@techsio/ui-kit 0.7.0 → 0.10.0

package/src/tokens/components/atoms/_numeric-input.css

@@ -1,66 +1,7 @@
-@theme static {
-  /* === BASE TOKEN MAPPING === */
-  --color-numeric-input-bg: var(--color-form-control-bg);
-  --color-numeric-input-hover: oklch(
-    from var(--color-numeric-input-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-numeric-input-focus: oklch(
-    from var(--color-numeric-input-bg) calc(l + var(--state-active)) c h
-  );
-  --color-numeric-input-border: var(--color-form-control-border);
-  --color-numeric-input-border-hover: var(--color-form-control-border-hover);
-  --color-numeric-input-border-focus: var(--color-form-control-border-focus);
-  --color-numeric-input-fg: var(--color-input-fg);
-
-  --color-numeric-input-bg-disabled: var(--color-form-control-bg-disabled);
-  --color-numeric-input-fg-disabled: var(--color-form-control-fg-disabled);
-  --color-numeric-input-border-disabled: var(
-    --color-form-control-border-disabled
-  );
-
-  --color-numeric-input-invalid-border: var(--color-danger);
-  --color-numeric-input-invalid-bg: --alpha(var(--color-danger) / 10%);
-
-  /* ==== TYPOGRAPHY ==== */
-  --text-numeric-input-sm: var(--text-sm);
-  --text-numeric-input-md: var(--text-md);
-  --text-numeric-input-lg: var(--text-lg);
-
-  /* === INPUT === */
-  --color-numeric-input-input-bg: transparent;
-  --color-numeric-input-input-bg-hover: var(--color-numeric-input-hover);
-  --color-numeric-input-input-bg-focus: var(--color-numeric-input-focus);
-  --padding-numeric-input-input-sm: var(--spacing-100);
-  --padding-numeric-input-input-md: var(--spacing-150);
-  --padding-numeric-input-input-lg: var(--spacing-200);
-
-  /* === TRIGGER === */
-  --color-numeric-input-trigger-container-bg: var(--color-form-control-border);
-  --color-numeric-input-trigger-bg: var(--color-numeric-input-bg);
-  --color-numeric-input-trigger-bg-hover: oklch(
-    from var(--color-numeric-input-trigger-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-numeric-input-trigger-fg: var(--color-numeric-input-fg);
-  --color-numeric-input-trigger-fg-hover: var(--color-primary);
-  --padding-numeric-input-trigger-x: var(--spacing-150);
-  --padding-numeric-input-trigger-y: 0rem;
-
-  /* === ROOT GAP === */
-  --gap-numeric-input-root-sm: 0rem;
-  --gap-numeric-input-root-md: 0rem;
-  --gap-numeric-input-root-lg: 0rem;
-
-  /* === INCREMENT BUTTON === */
-
-  --radius-numeric-input: var(--radius-form-control);
-  --radius-numeric-input-sm: var(--radius-form-control-sm);
-  --radius-numeric-input-md: var(--radius-form-control-md);
-  --radius-numeric-input-lg: var(--radius-form-control-lg);
-  --border-width-numeric-input: var(--border-width-input);
-
-  /* === FOCUS RING === */
-  --color-numeric-input-ring: var(--color-ring);
-}
+/*
+ * NumericInput — runtime tokens fully come from libs/ui/src/tokens/figma/variables.css.
+ * Only the semantic glyph aliases remain here.
+ */
 
 @utility token-icon-numeric-input-increment {
   @apply token-icon-increment;

package/src/tokens/components/atoms/_rating.css

@@ -1,30 +1,11 @@
-@theme static {
-  /* === BASE COLORS === */
-  --color-rating-fg: var(--color-highlight);
-  --color-rating-fg-active: var(--color-warning);
+/*
+ * Rating — runtime tokens fully come from libs/ui/src/tokens/figma/variables.css.
+ * Only the semantic glyph aliases remain here.
+ */
 
-  /* === DISABLED STATES === */
-  --color-rating-fg-disabled: var(--color-fg-disabled);
-
-  /* === SPACING === */
-  --spacing-rating-sm: var(--spacing-100);
-  --spacing-rating-md: var(--spacing-150);
-  --spacing-rating-lg: var(--spacing-200);
-
-  /* === TYPOGRAPHY === */
-  --text-rating-sm: var(--text-icon-sm);
-  --text-rating-md: var(--text-icon-md);
-  --text-rating-lg: var(--text-icon-lg);
-
-  /* === FOCUS RING === */
-  --color-rating-ring: var(--color-ring);
-}
-
-/* Semantic tokens for rating icons */
 @utility token-icon-rating {
   @apply token-icon-star;
 }
-
 @utility token-icon-rating-half {
   @apply token-icon-star-half;
 }

package/src/tokens/components/atoms/_skeleton.css

@@ -1,34 +1,30 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Background colors using reference layer */
-  --color-skeleton-bg: var(--color-overlay);
-  --color-skeleton-bg-primary: var(--color-skeleton-bg);
-  --color-skeleton-bg-secondary: var(--color-surface);
+/*
+ * Skeleton — runtime tokens come from libs/ui/src/tokens/figma/variables.css
+ * (colors, sizing, radius, durations).
+ *
+ * Kept here:
+ *   - `--duration-skeleton-pulse-{slow,normal,fast}` — Figma exports
+ *     `--duration-skeleton-{slow,normal,fast}` (no `-pulse-` infix), but
+ *     the @utility blocks below reference the `-pulse-` names.
+ *   - `--spacing-skeleton-text-{sm,md,lg,xl}` — alias bridges so the
+ *     `gap-skeleton-text-{size}` utility resolves; Figma exports only
+ *     `--spacing-skeleton-{size}` without the `-text-` infix.
+ *   - `@keyframes skeleton-pulse` + `@utility animate-skeleton-pulse-*`
+ *     + reduced-motion overrides — all are runtime-CSS constructs that
+ *     Figma can't model.
+ */
 
-  /* === ANIMATION === */
-  /* Use global motion tokens for consistent behavior */
+@theme static {
   --duration-skeleton-pulse-slow: 3s;
   --duration-skeleton-pulse-normal: 2s;
   --duration-skeleton-pulse-fast: 1s;
 
-  /* === SPACING === */
-  --spacing-skeleton-text-sm: var(--spacing-100);
-  --spacing-skeleton-text-md: var(--spacing-150);
-  --spacing-skeleton-text-lg: var(--spacing-200);
-  --spacing-skeleton-text-xl: var(--spacing-250);
-
-  /* === SIZING === */
-  --size-skeleton-circle-sm: 2rem;
-  --size-skeleton-circle-md: 3rem;
-  --size-skeleton-circle-lg: 4rem;
-  --size-skeleton-circle-xl: 6rem;
-  --height-skeleton-text-line: 1rem; /* Match text line height */
-
-  /* === BORDERS & RADIUS === */
-  --radius-skeleton-text: var(--radius-sm);
+  --spacing-skeleton-text-sm: var(--spacing-skeleton-sm);
+  --spacing-skeleton-text-md: var(--spacing-skeleton-md);
+  --spacing-skeleton-text-lg: var(--spacing-skeleton-lg);
+  --spacing-skeleton-text-xl: var(--spacing-skeleton-xl);
 }
 
-/* === ANIMATIONS === */
 @keyframes skeleton-pulse {
   0%,
   100% {
@@ -65,8 +61,6 @@
   }
 }
 
-/* Display reduced motion for storybook without having to
- enable the prefers-reduced-motion feature in DevTools */
 @layer utilities {
   .force-reduced-motion {
     animation: none;

package/src/tokens/components/atoms/_status-text.css

@@ -1,32 +1,21 @@
-@theme {
-  /* Status colors */
-  --color-status-text-fg-error: var(--color-danger);
-  --color-status-text-fg-success: var(--color-success);
-  --color-status-text-fg-warning: var(--color-warning);
-  --color-status-text-fg-default: var(--color-fg-secondary);
-
-  /* Text sizes - inherit from input sizing */
-  --text-status-text-sm: var(--text-input-sm);
-  --text-status-text-md: var(--text-input-md);
-  --text-status-text-lg: var(--text-input-lg);
-
-  /* Icon gap - spacing between icon and text */
-  --spacing-status-text-icon-gap-sm: var(--spacing-50);
-  --spacing-status-text-icon-gap-md: var(--spacing-100);
-  --spacing-status-text-icon-gap-lg: var(--spacing-200);
-
-  --spacing-status-text-icon: var(--spacing-50);
-  --spacing-status-text-icon-long-text: var(--spacing-100);
-}
+/*
+ * StatusText — runtime tokens fully come from libs/ui/src/tokens/figma/variables.css.
+ * Only the semantic glyph aliases remain here.
+ *
+ * Note: Figma's `--color-status-text-fg` resolves to `--color-fg-secondary`
+ * (single value, same across modes), while the atom previously hand-picked
+ * a brighter dark-mode value. In light mode both resolve to the same
+ * oklch(0.494 …), so the storybook visual is byte-identical. If dark-mode
+ * status-text needs more contrast, add a `light-dark()` to the Figma
+ * `color/fg/secondary` semantic instead of overriding here.
+ */
 
 @utility token-icon-status-text-success {
   @apply token-icon-success;
 }
-
 @utility token-icon-status-text-warning {
   @apply token-icon-warning;
 }
-
 @utility token-icon-status-text-error {
   @apply token-icon-error;
 }

package/src/tokens/components/atoms/_textarea.css

@@ -1,91 +1,38 @@
+/*
+ * Textarea — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here (Figma doesn't export):
+ *   - `--opacity-borderless` constant.
+ *   - `--color-textarea-bg-borderless*` derived via `--alpha()` from the
+ *     base bg, and `--color-textarea-placeholder-danger` derived from
+ *     the validation border. These are runtime CSS function calls that
+ *     can't be modelled as static Figma variables.
+ *   - `--color-textarea-border-{danger,success,warning}-focus` — the
+ *     focus state isn't separately exported (atom convention falls back
+ *     to the `-base` value).
+ */
+
 @theme static {
   --opacity-borderless: 60%;
-  /* === BASE COLOR MAPPING === */
-  --color-textarea-base: var(--color-form-control-bg);
-  --color-textarea-success: var(--color-success);
-  --color-textarea-warning: var(--color-warning);
-  --color-textarea-danger: var(--color-danger);
-
-  /* === DERIVED COLORS === */
-  /* Background colors - using reference layer */
-  --color-textarea-bg: var(--color-textarea-base);
-  --color-textarea-bg-borderless: --alpha(
-    var(--color-textarea-base) /
-    var(--opacity-borderless)
-  );
-
-  /* Foreground colors */
-  --color-textarea-fg: var(--color-fg-primary);
-  --color-textarea-placeholder: var(--color-form-control-placeholder);
-  --color-textarea-fg-disabled: var(--color-form-control-fg-disabled);
-
-  /* Border colors */
-  --color-textarea-border: var(--color-form-control-border);
-  --color-textarea-border-success: var(--color-textarea-success);
-  --color-textarea-border-warning: var(--color-textarea-warning);
-  --color-textarea-border-danger: var(--color-textarea-danger);
-  --color-textarea-border-disabled: var(--color-form-control-border-disabled);
-
-  /* === STATE VARIATIONS === */
-  /* Default hover/focus states */
-  --color-textarea-bg-hover: oklch(
-    from var(--color-textarea-base) calc(l + var(--state-hover)) c h
-  );
-  --color-textarea-bg-focus: oklch(
-    from var(--color-textarea-base) calc(l + var(--state-active)) c h
-  );
-
-  /* Border states */
-  --color-textarea-border-hover: var(--color-form-control-border-hover);
-  --color-textarea-border-focus: var(--color-textarea-accent);
-
-  /* === VALIDATION STATES === */
-  /* Success variant */
-  --color-textarea-border-success-hover: oklch(
-    from var(--color-textarea-success) calc(l + var(--state-hover)) c h
-  );
-  --color-textarea-border-success-focus: var(--color-textarea-success);
 
-  /* Warning variant */
-  --color-textarea-border-warning-hover: oklch(
-    from var(--color-textarea-warning) calc(l + var(--state-hover)) c h
-  );
-  --color-textarea-border-warning-focus: var(--color-textarea-warning);
+  /* Validation focus — fall back to base (Figma exports no focus variant). */
+  --color-textarea-border-danger-focus: var(--color-textarea-border-danger-base);
+  --color-textarea-border-success-focus: var(--color-textarea-border-success-base);
+  --color-textarea-border-warning-focus: var(--color-textarea-border-warning-base);
 
-  /* Danger variant */
-  --color-textarea-border-danger-hover: oklch(
-    from var(--color-textarea-danger) calc(l + var(--state-hover)) c h
-  );
-  --color-textarea-border-danger-focus: var(--color-textarea-danger);
+  /* Placeholder-on-danger (not in Figma) */
+  /* stylelint-disable scss/operator-no-newline-after -- biome wraps long lines */
   --color-textarea-placeholder-danger: --alpha(
-    var(--color-textarea-danger) /
+    var(--color-textarea-border-danger-base) /
     var(--opacity-placeholder)
   );
 
-  /* Borderless variant */
-  --color-textarea-bg-borderless-hover: var(--color-textarea-base);
-
-  --color-textarea-bg-borderless-focus: var(--color-textarea-base);
-
-  /* === DISABLED STATES === */
-  --color-textarea-bg-disabled: var(--color-form-control-bg-disabled);
-
-  /* === SPACING === */
-  --padding-textarea-sm: var(--padding-input-sm);
-  --padding-textarea-md: var(--padding-input-md);
-  --padding-textarea-lg: var(--padding-input-lg);
-
-  /* === TYPOGRAPHY === */
-  --text-textarea-sm: var(--text-sm);
-  --text-textarea-md: var(--text-md);
-  --text-textarea-lg: var(--text-lg);
-
-  /* === BORDERS & RADIUS === */
-  --border-textarea-width: var(--border-width-form-control);
-  --radius-textarea: var(--radius-form-control);
-  --radius-textarea-sm: var(--radius-form-control-sm);
-  --radius-textarea-md: var(--radius-form-control-md);
-
-  /* === FOCUS RING === */
-  --color-textarea-ring: var(--color-form-control-ring);
+  /* Borderless variant (not in Figma) */
+  --color-textarea-bg-borderless: --alpha(
+    var(--color-textarea-bg) /
+    var(--opacity-borderless)
+  );
+  /* stylelint-enable scss/operator-no-newline-after */
+  --color-textarea-bg-borderless-hover: var(--color-textarea-bg);
+  --color-textarea-bg-borderless-focus: var(--color-textarea-bg);
 }

package/src/tokens/components/atoms/_tooltip.css

@@ -1,21 +1,18 @@
-@theme static {
-  /* === BASE TOKEN MAPPING === */
-  --color-tooltip-bg: var(--color-overlay);
-  --color-tooltip-border: var(--color-border-primary);
-
-  /* === SIZING & SPACING === */
-  --padding-tooltip-sm: var(--spacing-150) var(--spacing-200);
-  --padding-tooltip-md: var(--spacing-200) var(--spacing-250);
-  --padding-tooltip-lg: var(--spacing-250) var(--spacing-350);
+/*
+ * Tooltip — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here (Figma doesn't export these exact names):
+ *   - `--padding-tooltip-{sm,md,lg}` combined shorthands for the
+ *     `p-tooltip-{size}` utility (Figma has split x/y axes).
+ *   - `--tooltip-arrow-size` and `--tooltip-arrow-background` —
+ *     Zag.js requires these exact CSS variable names.
+ */
 
-  --text-tooltip-sm: var(--text-xs);
-  --text-tooltip-md: var(--text-sm);
-  --text-tooltip-lg: var(--text-md);
-
-  --radius-tooltip: var(--radius-md);
-  --shadow-tooltip: var(--shadow-md);
+@theme static {
+  --padding-tooltip-sm: var(--padding-tooltip-y-sm) var(--padding-tooltip-x-sm);
+  --padding-tooltip-md: var(--padding-tooltip-y-md) var(--padding-tooltip-x-md);
+  --padding-tooltip-lg: var(--padding-tooltip-y-lg) var(--padding-tooltip-x-lg);
 
-  /* Required for Zag.js */
-  --tooltip-arrow-size: var(--spacing-150);
-  --tooltip-arrow-background: var(--color-tooltip-bg);
+  --tooltip-arrow-size: var(--spacing-tooltip-arrow);
+  --tooltip-arrow-background: var(--color-tooltip-arrow);
 }

package/src/tokens/components/components.css

@@ -8,6 +8,7 @@
 @import "./atoms/_image.css";
 @import "./atoms/_input.css";
 @import "./atoms/_label.css";
+@import "./atoms/_link.css";
 @import "./atoms/_numeric-input.css";
 @import "./atoms/_rating.css";
 @import "./atoms/_skeleton.css";

package/src/tokens/components/molecules/_product-card.css

@@ -16,30 +16,24 @@
   --color-product-card-stock-fg-limited-stock: var(--color-warning);
   --color-product-card-stock-fg-out-of-stock: var(--color-danger);
 
-  /* === STATE VARIATIONS === */
-  /* Add to cart button */
-  --color-product-card-button-cart-bg: var(--color-button-primary);
-  --color-product-card-button-cart-bg-hover: oklch(
-    from var(--color-product-card-button-cart-bg) calc(l + var(--state-hover)) c
-      h
-  );
-  --color-product-card-button-cart-fg: var(--color-button-fg);
+  /* === Button slots ===
+   * Per @KaiUweCZE on #425: keep ProductCard button tokens linked to the
+   * Button atom's token layer so a brand-driven Button retheme propagates
+   * automatically and hover values match Figma's hand-picked colors
+   * instead of the old `oklch(... calc(l + var(--state-hover)) ...)`
+   * derivation. cart/detail/wishlist map to primary/secondary/tertiary.
+   */
+  --color-product-card-button-cart-bg: var(--color-button-bg-primary-base);
+  --color-product-card-button-cart-bg-hover: var(--color-button-bg-primary-hover);
+  --color-product-card-button-cart-fg: var(--color-button-fg-primary);
 
-  /* Detail button */
-  --color-product-card-button-detail-bg: var(--color-button-secondary);
-  --color-product-card-button-detail-bg-hover: oklch(
-    from var(--color-product-card-button-detail-bg) calc(l + var(--state-hover))
-      c h
-  );
-  --color-product-card-button-detail-fg: var(--color-button-fg);
+  --color-product-card-button-detail-bg: var(--color-button-bg-secondary-base);
+  --color-product-card-button-detail-bg-hover: var(--color-button-bg-secondary-hover);
+  --color-product-card-button-detail-fg: var(--color-button-fg-secondary);
 
-  /* Wishlist button */
-  --color-product-card-button-wishlist-bg: var(--color-button-tertiary);
-  --color-product-card-button-wishlist-bg-hover: oklch(
-    from var(--color-product-card-button-wishlist-bg)
-      calc(l + var(--state-hover)) c h
-  );
-  --color-product-card-button-wishlist-fg: var(--color-button-fg);
+  --color-product-card-button-wishlist-bg: var(--color-button-bg-tertiary-base);
+  --color-product-card-button-wishlist-bg-hover: var(--color-button-bg-tertiary-hover);
+  --color-product-card-button-wishlist-fg: var(--color-button-fg-tertiary);
 
   /* === SPACING === */
   --spacing-product-card-padding: var(--spacing-150);