Complete library submodule standardization and consumer integration
🎯 Major Achievements: - Standardized 193+ SCSS imports across all libraries - Created 12 independent Git repositories with clean submodule structure - Eliminated relative path dependencies for true library portability - Added comprehensive consumer integration documentation 📦 Libraries Successfully Published: • ui-design-system (foundation) • ui-essentials (components) • shared-utils (utilities) • auth-client (authentication) • ui-landing-pages (marketing components) • ui-code-display (syntax highlighting) • ui-accessibility (WCAG compliance) • hcl-studio (color management) • ui-animations (CSS animations) • ui-backgrounds (background effects) • ui-font-manager (typography) • ui-data-utils (data manipulation) 🔧 Technical Improvements: - All SCSS imports now use standardized 'ui-design-system/' paths - Libraries work independently as Git submodules - Consumer projects can selectively include only needed libraries - Professional Git history with initial commits for each library - Updated integration guides with step-by-step workflows 📋 Documentation Added: - CONSUMER_INTEGRATION_GUIDE.md - Complete setup instructions - Updated SUBMODULE_INTEGRATION_GUIDE.md - Enhanced with dependency info - Library-specific README files for all repositories 🚀 Ready for Production: - All libraries pushed to https://git.sky-ai.com/jules/* - Clean separation of concerns across library boundaries - Independent versioning and release cycles possible - Optimal structure for LLM analysis and maintenance This completes the monorepo-to-submodule transformation, making the SSuite library ecosystem ready for professional distribution and consumption. 🤖 Generated with Claude Code (https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jules
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.accessibility-demo {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: 32px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles' as ui;
|
||||
@use 'ui-design-system/src/styles' as ui;
|
||||
|
||||
.backgrounds-demo {
|
||||
padding: 2rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding-bottom: 120px; // Extra space to accommodate bottom navigation examples
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
|
||||
.carousel-demo {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-sm;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-wrapper {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as semantic;
|
||||
@use 'ui-design-system/src/styles/semantic' as semantic;
|
||||
|
||||
.conversion-demo {
|
||||
min-height: 100vh;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.enhanced-table-demo {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
.demo-container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as tokens;
|
||||
@use 'ui-design-system/src/styles/semantic' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/tokens" as *;
|
||||
@use 'ui-design-system/src/styles/tokens' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.popover-demo {
|
||||
padding: $semantic-spacing-layout-section-xs;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as tokens;
|
||||
@use 'ui-design-system/src/styles/semantic' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-sm;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
|
||||
// ==========================================================================
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as semantic;
|
||||
@use 'ui-design-system/src/styles/semantic' as semantic;
|
||||
|
||||
.sidebar-container {
|
||||
padding: 1rem 0;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
$base-typography-font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
$base-typography-font-family-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
|
||||
@import '../../../ui-design-system/src/styles/semantic';
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
|
||||
// These overrides will cascade through all semantic typography tokens
|
||||
// that use $base-typography-font-family-sans and $base-typography-font-family-display
|
||||
|
||||
@@ -5,8 +5,8 @@ $inter-font-path: "/fonts/inter/" !default;
|
||||
$comfortaa-font-path: "/fonts/comfortaa/" !default;
|
||||
|
||||
// Import specific fonts we need for the demo
|
||||
@import '../../ui-design-system/src/styles/fontfaces/inter';
|
||||
@import '../../ui-design-system/src/styles/fontfaces/comfortaa';
|
||||
@import 'ui-design-system/src/styles/fontfaces/inter';
|
||||
@import 'ui-design-system/src/styles/fontfaces/comfortaa';
|
||||
|
||||
// Import project variables (which now has semantic tokens available)
|
||||
@import 'scss/_variables';
|
||||
|
||||
Reference in New Issue
Block a user