2a28a8abbd
🎯 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>
480 lines
12 KiB
SCSS
480 lines
12 KiB
SCSS
@use 'ui-design-system/src/styles/semantic' as *;
|
|
|
|
.ui-enhanced-table-container {
|
|
position: relative;
|
|
width: 100%;
|
|
background: $semantic-color-surface-primary;
|
|
border-radius: $semantic-border-card-radius;
|
|
box-shadow: $semantic-shadow-elevation-1;
|
|
overflow: hidden;
|
|
|
|
// Variants
|
|
&--striped {
|
|
.ui-enhanced-table__row:nth-child(even),
|
|
.ui-enhanced-table__virtual-row:nth-child(even) {
|
|
background: $semantic-color-surface-secondary;
|
|
}
|
|
}
|
|
|
|
&--bordered {
|
|
border: $semantic-border-width-1 solid $semantic-color-border-primary;
|
|
|
|
.ui-enhanced-table__header-cell,
|
|
.ui-enhanced-table__cell,
|
|
.ui-enhanced-table__virtual-cell {
|
|
border-right: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
|
}
|
|
}
|
|
|
|
&--minimal {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
|
|
.ui-enhanced-table__header {
|
|
border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
|
}
|
|
}
|
|
|
|
// Size variants
|
|
&--compact {
|
|
.ui-enhanced-table__header-cell,
|
|
.ui-enhanced-table__cell,
|
|
.ui-enhanced-table__virtual-cell {
|
|
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
|
font-size: map-get($semantic-typography-body-small, font-size);
|
|
line-height: map-get($semantic-typography-body-small, line-height);
|
|
}
|
|
}
|
|
|
|
&--comfortable {
|
|
.ui-enhanced-table__header-cell,
|
|
.ui-enhanced-table__cell,
|
|
.ui-enhanced-table__virtual-cell {
|
|
padding: $semantic-spacing-component-lg $semantic-spacing-component-md;
|
|
font-size: map-get($semantic-typography-body-large, font-size);
|
|
line-height: map-get($semantic-typography-body-large, line-height);
|
|
}
|
|
}
|
|
|
|
// States
|
|
&--sticky-header {
|
|
.ui-enhanced-table__header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: $semantic-z-index-dropdown;
|
|
background: $semantic-color-surface-elevated;
|
|
box-shadow: $semantic-shadow-elevation-1;
|
|
}
|
|
}
|
|
|
|
&--loading {
|
|
pointer-events: none;
|
|
|
|
.ui-enhanced-table__loading-overlay {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&--virtual {
|
|
.ui-enhanced-table__scroll-container {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Filter Row
|
|
.ui-enhanced-table__filter-row {
|
|
display: flex;
|
|
background: $semantic-color-surface-secondary;
|
|
border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
|
padding: $semantic-spacing-component-sm 0;
|
|
gap: $semantic-spacing-component-xs;
|
|
}
|
|
|
|
.ui-enhanced-table__filter-cell {
|
|
padding: 0 $semantic-spacing-component-sm;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ui-enhanced-table__filter-input,
|
|
.ui-enhanced-table__filter-select {
|
|
width: 100%;
|
|
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
|
border: $semantic-border-width-1 solid $semantic-color-border-primary;
|
|
border-radius: $semantic-border-input-radius;
|
|
background: $semantic-color-surface-primary;
|
|
color: $semantic-color-text-primary;
|
|
font-size: map-get($semantic-typography-body-small, font-size);
|
|
font-family: map-get($semantic-typography-body-small, font-family);
|
|
line-height: map-get($semantic-typography-body-small, line-height);
|
|
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: $semantic-color-focus;
|
|
box-shadow: 0 0 0 2px $semantic-color-focus;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: $semantic-color-text-tertiary;
|
|
}
|
|
}
|
|
|
|
// Scroll Container
|
|
.ui-enhanced-table__scroll-container {
|
|
position: relative;
|
|
overflow-x: auto;
|
|
max-height: 600px;
|
|
}
|
|
|
|
// Header
|
|
.ui-enhanced-table__header {
|
|
background: $semantic-color-surface-elevated;
|
|
border-bottom: $semantic-border-width-2 solid $semantic-color-border-primary;
|
|
}
|
|
|
|
.ui-enhanced-table__header-row {
|
|
display: flex;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.ui-enhanced-table__header-cell {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: $semantic-spacing-component-md;
|
|
background: $semantic-color-surface-elevated;
|
|
border-right: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
|
font-weight: $semantic-typography-font-weight-semibold;
|
|
font-size: map-get($semantic-typography-body-medium, font-size);
|
|
font-family: map-get($semantic-typography-body-medium, font-family);
|
|
line-height: map-get($semantic-typography-body-medium, line-height);
|
|
color: $semantic-color-text-primary;
|
|
flex-shrink: 0;
|
|
user-select: none;
|
|
|
|
&--sortable {
|
|
cursor: pointer;
|
|
transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
|
|
|
&:hover {
|
|
background: $semantic-color-surface-secondary;
|
|
}
|
|
}
|
|
|
|
&--sorted {
|
|
background: $semantic-color-surface-secondary;
|
|
}
|
|
|
|
&--draggable {
|
|
cursor: grab;
|
|
|
|
&:active {
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
.ui-enhanced-table__header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $semantic-spacing-component-xs;
|
|
flex: 1;
|
|
}
|
|
|
|
.ui-enhanced-table__header-text {
|
|
font-weight: $semantic-typography-font-weight-semibold;
|
|
}
|
|
|
|
.ui-enhanced-table__sort-indicators {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.ui-enhanced-table__sort-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: $semantic-color-primary;
|
|
font-weight: $semantic-typography-font-weight-bold;
|
|
|
|
sup {
|
|
font-size: 8px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
&[data-direction="asc"] {
|
|
color: $semantic-color-success;
|
|
}
|
|
|
|
&[data-direction="desc"] {
|
|
color: $semantic-color-danger;
|
|
}
|
|
}
|
|
|
|
// Resize Handle
|
|
.ui-enhanced-table__resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: transparent;
|
|
cursor: col-resize;
|
|
z-index: 1;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 2px;
|
|
height: 20px;
|
|
background: $semantic-color-border-secondary;
|
|
opacity: 0;
|
|
transition: opacity $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
|
}
|
|
|
|
&:hover::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Virtual Viewport
|
|
.ui-enhanced-table__virtual-viewport {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// Rows (Traditional and Virtual)
|
|
.ui-enhanced-table__body {
|
|
background: $semantic-color-surface-primary;
|
|
}
|
|
|
|
.ui-enhanced-table__row,
|
|
.ui-enhanced-table__virtual-row {
|
|
display: flex;
|
|
min-width: 100%;
|
|
transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
|
|
|
&--hover:hover {
|
|
background: $semantic-color-surface-secondary;
|
|
}
|
|
|
|
&--selected {
|
|
background: rgba($semantic-color-primary, 0.1);
|
|
border-left: 3px solid $semantic-color-primary;
|
|
}
|
|
|
|
&--striped {
|
|
background: $semantic-color-surface-secondary;
|
|
}
|
|
}
|
|
|
|
// Cells
|
|
.ui-enhanced-table__cell,
|
|
.ui-enhanced-table__virtual-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: $semantic-spacing-component-md;
|
|
border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
|
font-size: map-get($semantic-typography-body-medium, font-size);
|
|
font-family: map-get($semantic-typography-body-medium, font-family);
|
|
line-height: map-get($semantic-typography-body-medium, line-height);
|
|
color: $semantic-color-text-primary;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ui-enhanced-table__cell-content {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
// Empty State
|
|
.ui-enhanced-table__empty-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: $semantic-spacing-layout-section-lg;
|
|
}
|
|
|
|
.ui-enhanced-table__empty-cell {
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-enhanced-table__empty-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: $semantic-spacing-component-md;
|
|
}
|
|
|
|
.ui-enhanced-table__empty-text {
|
|
font-size: map-get($semantic-typography-body-large, font-size);
|
|
font-family: map-get($semantic-typography-body-large, font-family);
|
|
color: $semantic-color-text-tertiary;
|
|
}
|
|
|
|
// Loading Overlay
|
|
.ui-enhanced-table__loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba($semantic-color-backdrop, 0.5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: $semantic-spacing-component-md;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
|
z-index: $semantic-z-index-overlay;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.ui-enhanced-table__loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid $semantic-color-border-subtle;
|
|
border-top: 3px solid $semantic-color-primary;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.ui-enhanced-table__loading-text {
|
|
font-size: map-get($semantic-typography-body-medium, font-size);
|
|
font-family: map-get($semantic-typography-body-medium, font-family);
|
|
color: $semantic-color-text-primary;
|
|
font-weight: $semantic-typography-font-weight-medium;
|
|
}
|
|
|
|
// Column Reorder Ghost
|
|
.ui-enhanced-table__column-ghost {
|
|
position: fixed;
|
|
padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
|
|
background: $semantic-color-primary;
|
|
color: $semantic-color-on-primary;
|
|
border-radius: $semantic-border-input-radius;
|
|
font-size: map-get($semantic-typography-body-small, font-size);
|
|
font-family: map-get($semantic-typography-body-small, font-family);
|
|
font-weight: $semantic-typography-font-weight-medium;
|
|
box-shadow: $semantic-shadow-elevation-3;
|
|
pointer-events: none;
|
|
z-index: $semantic-z-index-modal;
|
|
transform: translate(-50%, -100%);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
// Animations
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
// Responsive Design
|
|
@media (max-width: 768px) {
|
|
.ui-enhanced-table-container {
|
|
font-size: map-get($semantic-typography-body-small, font-size);
|
|
|
|
.ui-enhanced-table__header-cell,
|
|
.ui-enhanced-table__cell,
|
|
.ui-enhanced-table__virtual-cell {
|
|
padding: $semantic-spacing-component-sm;
|
|
}
|
|
|
|
.ui-enhanced-table__filter-row {
|
|
padding: $semantic-spacing-component-xs 0;
|
|
}
|
|
|
|
.ui-enhanced-table__resize-handle {
|
|
width: 8px; // Larger touch target
|
|
}
|
|
}
|
|
|
|
.ui-enhanced-table__scroll-container {
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
// Accessibility
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ui-enhanced-table__header-cell,
|
|
.ui-enhanced-table__row,
|
|
.ui-enhanced-table__virtual-row,
|
|
.ui-enhanced-table__cell,
|
|
.ui-enhanced-table__virtual-cell,
|
|
.ui-enhanced-table__filter-input,
|
|
.ui-enhanced-table__filter-select,
|
|
.ui-enhanced-table__loading-overlay,
|
|
.ui-enhanced-table__resize-handle::before {
|
|
transition-duration: 0ms;
|
|
animation-duration: 0ms;
|
|
}
|
|
|
|
.ui-enhanced-table__loading-spinner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
// High contrast mode
|
|
@media (prefers-contrast: high) {
|
|
.ui-enhanced-table-container {
|
|
border: $semantic-border-width-2 solid $semantic-color-text-primary;
|
|
}
|
|
|
|
.ui-enhanced-table__header-cell,
|
|
.ui-enhanced-table__cell,
|
|
.ui-enhanced-table__virtual-cell {
|
|
border-color: $semantic-color-text-primary;
|
|
}
|
|
|
|
.ui-enhanced-table__filter-input,
|
|
.ui-enhanced-table__filter-select {
|
|
border-color: $semantic-color-text-primary;
|
|
}
|
|
}
|
|
|
|
// Print styles
|
|
@media print {
|
|
.ui-enhanced-table-container {
|
|
box-shadow: none;
|
|
border: $semantic-border-width-1 solid $semantic-color-text-primary;
|
|
}
|
|
|
|
.ui-enhanced-table__filter-row,
|
|
.ui-enhanced-table__loading-overlay,
|
|
.ui-enhanced-table__resize-handle,
|
|
.ui-enhanced-table__column-ghost {
|
|
display: none !important;
|
|
}
|
|
|
|
.ui-enhanced-table__header {
|
|
background: white !important;
|
|
}
|
|
|
|
.ui-enhanced-table__row,
|
|
.ui-enhanced-table__virtual-row {
|
|
break-inside: avoid;
|
|
}
|
|
}
|
|
|
|
// Focus management for keyboard navigation
|
|
.ui-enhanced-table__header-cell:focus-visible,
|
|
.ui-enhanced-table__row:focus-visible,
|
|
.ui-enhanced-table__virtual-row:focus-visible {
|
|
outline: 2px solid $semantic-color-focus;
|
|
outline-offset: -2px;
|
|
} |