@techsio/ui-kit 0.3.1 → 0.4.0

package/src/tokens/components/molecules/_select.css

@@ -1,9 +1,10 @@
 @theme static {
   /* === BASE COLOR MAPPING === */
-  --color-select: var(--color-surface);
+  --color-select: var(--color-form-control-bg);
   --color-select-accent: var(--color-primary);
   --color-select-danger: var(--color-danger);
-  --color-select-border: var(--color-border-primary);
+  --color-select-success: var(--color-success);
+  --color-select-warning: var(--color-warning);
   --color-select-fg: var(--color-fg-primary);
 
   /* === STATE VARIATIONS === */
@@ -15,10 +16,14 @@
   --gap-select-root: var(--spacing-150);
 
   /* === TRIGGER === */
-  --color-select-trigger-border: var(--color-select-border);
   --color-select-trigger-bg-hover: var(--color-select-hover);
+  --color-select-trigger: var(--color-select-fg);
+  --color-select-trigger-hover: var(--color-select-accent);
+  --color-select-trigger-border-hover: var(--color-form-control-border-hover);
   --color-select-trigger-border-focus: var(--color-select-accent);
-  --padding-select-trigger: var(--spacing-200);
+  --color-select-ring: var(--color-form-control-ring);
+  --padding-select-trigger-sm: var(--padding-input-sm);
+  --padding-select-trigger-md: var(--padding-input-md);
 
   /* === CLEAR TRIGGER === */
   --color-select-clear-trigger-fg: var(--color-select-fg);
@@ -27,7 +32,7 @@
   --spacing-select-right: var(--spacing-450);
 
   /* === DROPDOWN CONTENT === */
-  --color-select-content-bg: var(--color-select);
+  --color-select-content-bg: var(--color-surface);
   --color-select-content-border: var(--color-border-primary);
   --shadow-select-content: var(--shadow-md);
 
@@ -45,10 +50,7 @@
   --color-select-indicator: var(--color-select-accent);
 
   /* === PLACEHOLDER === */
-  --color-select-placeholder: --alpha(
-    var(--color-fg-secondary) /
-    var(--opacity-placeholder)
-  );
+  --color-select-placeholder: var(--color-form-control-placeholder);
 
   /* === DISABLED STATES === */
   --color-select-bg-disabled: var(--color-bg-disabled);
@@ -59,15 +61,34 @@
   --spacing-content: var(--spacing-450);
 
   /* === TYPOGRAPHY === */
-  --text-select-trigger-size: var(--text-md);
-
-  --text-select-xs: var(--text-xs);
-  --text-select-sm: var(--text-sm);
-  --text-select-md: var(--text-md);
-  --text-select-lg: var(--text-lg);
+  /* Trigger typography - size variants */
+  --text-select-trigger-xs: var(--text-xs);
+  --text-select-trigger-sm: var(--text-sm);
+  --text-select-trigger-md: var(--text-md);
+  --text-select-trigger-lg: var(--text-lg);
+
+  /* Item typography - size variants */
+  --text-select-item-xs: var(--text-xs);
+  --text-select-item-sm: var(--text-sm);
+  --text-select-item-md: var(--text-md);
+  --text-select-item-lg: var(--text-lg);
+
+  /* Value text typography - size variants */
+  --text-select-value-xs: var(--text-xs);
+  --text-select-value-sm: var(--text-sm);
+  --text-select-value-md: var(--text-md);
+  --text-select-value-lg: var(--text-lg);
+
+  --text-select-item-group-label-xs: var(--text-xs);
+  --text-select-item-group-label-sm: var(--text-sm);
+  --text-select-item-group-label-md: var(--text-md);
+  --text-select-item-group-label-lg: var(--text-lg);
 
   /* === BORDERS & RADIUS === */
-  --radius-select: var(--radius-sm);
+  --border-width-select: var(--border-width-form-control);
+  --radius-select: var(--radius-form-control);
+  --radius-select-sm: var(--radius-form-control-sm);
+  --radius-select-md: var(--radius-form-control-md);
 
   /* === Z-INDEX === */
   --z-content: 50;
@@ -75,16 +96,16 @@
 
 /* === ICONS === */
 @utility token-icon-select-indicator {
-  @apply icon-[mdi--chevron-down];
+  @apply token-icon-chevron-down;
 }
 @utility token-icon-select-indicator-open {
-  @apply icon-[mdi--chevron-right];
+  @apply token-icon-chevron-up;
 }
 
 @utility token-icon-select-check {
-  @apply icon-[mdi--check];
+  @apply token-icon-check;
 }
 
 @utility token-icon-select-clear {
-  @apply icon-[mdi--close];
+  @apply token-icon-close;
 }

package/src/tokens/components/molecules/_steps.css

@@ -1,54 +1,135 @@
 @theme static {
-  /* === BASE TOKEN MAPPING === */
-  --color-steps: var(--color-base);
-  --color-steps-active: var(--color-primary);
-  --color-steps-accent: var(--color-surface);
+  /* === REFERENCE LAYER === */
+  --color-steps-base: var(--color-surface);
+  --color-steps-overlay: var(--color-overlay);
+  --color-steps-float: var(--color-float);
+  --color-steps-accent: var(--color-primary);
+  --color-steps-success: var(--color-success);
+  --color-steps-fg-reverse: var(--color-fg-reverse);
+
+  /* === DERIVED COLORS === */
   --color-steps-fg: var(--color-fg-primary);
-  --color-steps-fg-active: var(--color-fg-reverse);
-  --color-steps-fg-current: var(--color-fg-reverse);
 
-  /* === ROOT === */
-  --color-steps-root-bg: var(--color-steps);
+  --color-steps-trigger-bg-hover: oklch(
+    from var(--color-steps-overlay) calc(l - var(--surface-increment)) c h
+  );
+  --color-steps-trigger-bg-current: oklch(
+    from var(--color-steps-accent) l c h /
+    0.12
+  );
+  --color-steps-trigger-bg-complete: oklch(
+    from var(--color-steps-success) l c h /
+    0.12
+  );
 
-  /* === LIST === */
-  --color-steps-list-bg: var(--color-steps);
+  --color-steps-indicator-bg: var(--color-steps-overlay);
+  --color-steps-indicator-bg-hover: var(--color-steps-float);
+  --color-steps-indicator-bg-current: var(--color-steps-accent);
+  --color-steps-indicator-bg-complete: var(--color-steps-success);
+  --color-steps-indicator-border: var(--color-border-primary);
+  --color-steps-indicator-border-hover: var(--color-steps-accent);
+  --color-steps-indicator-border-current: var(--color-steps-accent);
+  --color-steps-indicator-border-complete: var(--color-steps-success);
+  --color-steps-indicator-fg: var(--color-fg-secondary);
+  --color-steps-indicator-fg-current: var(--color-steps-fg-reverse);
+  --color-steps-indicator-fg-complete: var(--color-steps-fg-reverse);
 
-  /* === ITEM === */
-  --color-steps-item-bg: transparent;
+  --color-steps-indicator-bg-solid: var(--color-steps-float);
+  --color-steps-indicator-bg-solid-hover: oklch(
+    from var(--color-steps-float) calc(l - var(--surface-increment)) c h
+  );
+  --color-steps-indicator-bg-solid-current: var(--color-steps-accent);
+  --color-steps-indicator-bg-solid-complete: var(--color-steps-success);
+  --color-steps-indicator-fg-solid: var(--color-fg-primary);
+  --color-steps-indicator-fg-solid-current: var(--color-steps-fg-reverse);
+  --color-steps-indicator-fg-solid-complete: var(--color-steps-fg-reverse);
 
-  /* === TRIGGER === */
-  --gap-trigger: var(--spacing-150);
+  --color-steps-title-fg: var(--color-fg-primary);
+  --color-steps-title-fg-current: var(--color-primary);
+  --color-steps-title-fg-complete: var(--color-success);
+  --color-steps-description-fg: var(--color-fg-secondary);
+  --color-steps-description-fg-current: var(--color-fg-primary);
+  --color-steps-description-fg-complete: var(--color-fg-primary);
 
-  /* === CONTENT === */
-  --color-steps-content-bg: var(--color-steps-accent);
+  --color-steps-separator-bg: var(--color-border-primary);
+  --color-steps-separator-bg-current: var(--color-primary-light);
+  --color-steps-separator-bg-complete: var(--color-success);
 
-  /* === INDICATOR === */
-  --color-steps-indicator-bg: var(--color-steps-accent);
-  --color-steps-indicator-bg-hover: var(--color-steps-active);
-  --color-steps-indicator-bg-complete: var(--color-steps-active);
-  --color-steps-indicator-bg-current: var(--color-steps-active);
+  --color-steps-progress-bg: var(--color-border-primary);
+  --color-steps-progress-range-bg: var(--color-steps-accent);
 
-  /* === SEPARATOR === */
-  --color-steps-separator-bg: var(--color-steps-accent);
-  --color-steps-separator-bg-complete: var(--color-steps-active);
+  --color-steps-content-bg: var(--color-steps-base);
+  --color-steps-content-bg-complete: var(--color-steps-overlay);
+  --color-steps-content-border: var(--color-border-primary);
+  --color-steps-content-border-complete: var(--color-success);
+  --color-steps-content-fg: var(--color-fg-primary);
 
   /* === SPACING === */
-  --gap-root: var(--spacing-250);
-  --gap-list: var(--spacing-200);
-  --gap-item: var(--spacing-150);
-  --padding-content: var(--spacing-250);
-  --height-steps-indicator: var(--spacing-350);
-  --padding-steps-btn: var(--spacing-100) var(--spacing-200);
-
-  /* === SIZES === */
+  --gap-steps-root: var(--spacing-300);
+  --gap-steps-list: var(--spacing-150);
+  --gap-steps-panels: var(--spacing-250);
+  --gap-steps-item: var(--spacing-150);
+  --gap-steps-trigger: var(--spacing-150);
+  --gap-steps-text: var(--spacing-50);
+  --gap-steps-navigation: var(--spacing-150);
+
+  --padding-steps-trigger-x: var(--spacing-150);
+  --padding-steps-trigger-y: var(--spacing-100);
+  --padding-steps-content-sm: var(--spacing-200);
+  --padding-steps-content-md: var(--spacing-250);
+  --padding-steps-content-lg: var(--spacing-300);
+
+  --spacing-steps-indicator-sm: var(--spacing-300);
+  --spacing-steps-indicator-md: var(--spacing-350);
+  --spacing-steps-indicator-lg: var(--spacing-400);
+  --spacing-steps-list-vertical: var(--container-xs);
+  --spacing-steps-separator-offset: var(--spacing-200);
+  --spacing-steps-separator-vertical: var(--spacing-400);
+
+  /* === TYPOGRAPHY === */
+  --font-weight-steps-title: var(--font-weight-medium);
+  --font-weight-steps-number: var(--font-weight-semibold);
+
+  --text-steps-title: var(--text-md);
+  --text-steps-title-sm: var(--text-sm);
+  --text-steps-title-md: var(--text-md);
+  --text-steps-title-lg: var(--text-lg);
+
+  --text-steps-description: var(--text-sm);
+  --text-steps-description-sm: var(--text-xs);
+  --text-steps-description-md: var(--text-sm);
+  --text-steps-description-lg: var(--text-md);
+
+  --text-steps-content-sm: var(--text-sm);
+  --text-steps-content-md: var(--text-md);
+  --text-steps-content-lg: var(--text-lg);
+
+  --text-steps-number-sm: var(--text-sm);
+  --text-steps-number-md: var(--text-md);
+  --text-steps-number-lg: var(--text-lg);
+
+  --text-steps-icon: var(--text-md);
+  --text-steps-icon-sm: var(--text-sm);
+  --text-steps-icon-md: var(--text-md);
+  --text-steps-icon-lg: var(--text-lg);
+
+  /* === BORDERS & RADIUS === */
+  --border-width-steps-indicator: var(--border-width-sm);
+  --border-width-steps-content: var(--border-width-sm);
+  --radius-steps-indicator: 999px;
+  --radius-steps-trigger: var(--radius-sm);
+  --radius-steps-content: var(--radius-md);
+  --radius-steps-progress: 999px;
+  --radius-steps-separator: 999px;
+  --height-steps-progress: 4px;
   --height-steps-separator: 2px;
+  --width-steps-progress: 4px;
   --width-steps-separator: 2px;
 
   /* === FOCUS RINGS === */
   --color-steps-ring: var(--color-ring);
 }
 
-/* Semantic tokens for steps icons */
 @utility token-icon-steps-check {
-  @apply icon-[mdi--check];
+  @apply token-icon-check;
 }

package/src/tokens/components/molecules/_toast.css

@@ -57,21 +57,21 @@
 
 /* Icons */
 @utility token-icon-toast-success {
-  @apply icon-[mdi--check-circle];
+  @apply token-icon-check-circle;
 }
 
 @utility token-icon-toast-error {
-  @apply icon-[mdi--alert-circle];
+  @apply token-icon-alert-circle;
 }
 
 @utility token-icon-toast-warning {
-  @apply icon-[mdi--alert];
+  @apply token-icon-alert;
 }
 
 @utility token-icon-toast-info {
-  @apply icon-[mdi--information];
+  @apply token-icon-information;
 }
 
 @utility token-icon-toast-close {
-  @apply icon-[mdi--close];
+  @apply token-icon-close;
 }

package/src/tokens/components/molecules/_tree-view.css

@@ -8,7 +8,6 @@
 
   /* === STATE VARIATIONS === */
   --color-tree-node-bg-hover: var(--color-primary-hover);
-  --color-tree-node-bg-selected: transparent;
   --color-tree-fg-hover: var(--color-fg-reverse);
   --color-tree-fg-selected: var(--color-tree-accent);
 
@@ -60,21 +59,21 @@
 /* Tree Icons - using semantic tokens */
 
 @utility token-icon-tree-node {
-  @apply icon-[mdi--folder];
+  @apply token-icon-folder;
 }
 
 @utility token-icon-tree-node-open {
-  @apply icon-[mdi--folder-open];
+  @apply token-icon-folder-open;
 }
 
 @utility token-icon-tree-item {
-  @apply icon-[mdi--file-document];
+  @apply token-icon-file-document;
 }
 
 @utility token-icon-tree-indicator {
-  @apply icon-[mdi--chevron-right];
+  @apply token-icon-chevron-right;
 }
 
 @utility token-icon-tree-indicator-open {
-  @apply icon-[mdi--chevron-down];
+  @apply token-icon-chevron-down;
 }

package/src/tokens/components/organisms/_footer.css

@@ -41,8 +41,6 @@
   --font-weight-footer-link: var(--font-weight-normal);
 
   /* === SIZES === */
-  --container-footer-sm: var(--container-sm);
-  --container-footer-md: var(--container-md);
   --container-footer-max: var(--container-max-w);
 
   /* === SPACING === */
@@ -80,11 +78,8 @@
 
   /* === BORDERS & EFFECTS === */
   --border-width-footer: var(--border-width-md);
-  --color-footer-border: var(--color-red-600);
+  --color-footer-border: var(--color-border-primary);
   --height-footer-divider: 2px;
 
   --radius-footer: 0;
-
-  /* === BREAKPOINTS === */
-  --breakpoint-footer-mobile: 768px;
 }

package/src/tokens/components/organisms/_gallery.css

@@ -0,0 +1,35 @@
+@theme static {
+  /* === REFERENCE LAYER === */
+  --color-gallery: var(--color-surface);
+  --color-gallery-accent: var(--color-primary);
+
+  /* === DERIVED COLORS === */
+  --color-gallery-trigger-bg: oklch(
+    from var(--color-gallery) calc(l - var(--surface-increment) * 2) c h
+  );
+  --color-gallery-trigger-bg-active: oklch(
+    from var(--color-gallery) calc(l - var(--surface-increment) * 3) c h
+  );
+  --color-gallery-trigger-border: var(--color-border-primary);
+  --color-gallery-trigger-border-active: var(--color-gallery-accent);
+  --color-gallery-trigger-ring: var(--color-ring);
+
+  /* === SPACING === */
+  --spacing-gallery-xs: var(--spacing-50);
+  --spacing-gallery-sm: var(--spacing-100);
+  --spacing-gallery-md: var(--spacing-200);
+  --spacing-gallery-lg: var(--spacing-300);
+  --spacing-gallery-root: var(--spacing-200);
+  --padding-gallery-trigger: 0 0;
+
+  /* === DIMENSIONS === */
+  --height-gallery: min(60svh, 36rem);
+
+  /* === EFFECTS === */
+  --brightness-gallery-trigger: 70%;
+  --brightness-gallery-trigger-active: 100%;
+  --shadow-gallery-trigger: var(--shadow-sm);
+
+  /* === BORDERS === */
+  --radius-gallery-trigger: var(--radius-sm);
+}

package/src/tokens/components/organisms/_header.css

@@ -84,3 +84,11 @@
 
   --duration-header: 300ms;
 }
+
+@utility token-icon-header-menu {
+  @apply token-icon-menu;
+}
+
+@utility token-icon-header-close {
+  @apply token-icon-close;
+}