@techsio/ui-kit 0.0.0

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

@@ -0,0 +1,61 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-badge-primary: var(--color-primary);
+  --color-badge-secondary: var(--color-secondary);
+  --color-badge-tertiary: var(--color-tertiary);
+  --color-badge-info: var(--color-info);
+  --color-badge-success: var(--color-success);
+  --color-badge-warning: var(--color-warning);
+  --color-badge-danger: var(--color-danger);
+
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-badge-bg-primary: var(--color-badge-primary);
+  --color-badge-bg-secondary: var(--color-badge-secondary);
+  --color-badge-bg-tertiary: var(--color-badge-tertiary);
+  --color-badge-bg-info: var(--color-badge-info);
+  --color-badge-bg-success: var(--color-badge-success);
+  --color-badge-bg-warning: var(--color-badge-warning);
+  --color-badge-bg-danger: var(--color-badge-danger);
+  --color-badge-bg-discount: var(--color-badge-danger); /* Alias for discount */
+
+  /* Foreground colors */
+  --color-badge-fg: var(--color-fg-reverse);
+  --color-badge-fg-primary: var(--color-badge-fg);
+  --color-badge-fg-secondary: var(--color-badge-fg);
+  --color-badge-fg-tertiary: var(--color-badge-fg);
+  --color-badge-fg-info: var(--color-badge-fg);
+  --color-badge-fg-success: var(--color-badge-fg);
+  --color-badge-fg-warning: var(--color-badge-fg);
+  --color-badge-fg-danger: var(--color-badge-fg);
+  --color-badge-fg-discount: var(--color-fg-dark); /* Keep original for discount */
+
+  /* Border colors */
+  --color-badge-border: var(--color-border-primary);
+  --color-badge-border-primary: transparent;
+  --color-badge-border-secondary: transparent;
+  --color-badge-border-tertiary: transparent;
+  --color-badge-border-info: transparent;
+  --color-badge-border-success: transparent;
+  --color-badge-border-warning: transparent;
+  --color-badge-border-danger: transparent;
+  --color-badge-border-discount: transparent;
+
+  /* === COMPONENT VARIANTS === */
+  /* Outline variant */
+  --color-badge-bg-outline: transparent;
+  --color-badge-fg-outline: var(--color-fg-secondary);
+  --color-badge-border-outline: var(--color-badge-border);
+
+  /* === SPACING === */
+  --padding-badge: var(--spacing-100) var(--spacing-100);
+
+  /* === TYPOGRAPHY === */
+  --text-badge-size: var(--text-xs);
+  --font-weight-badge: var(--font-weight-normal);
+
+  /* === BORDERS & RADIUS === */
+  --radius-badge: var(--radius-sm);
+  --border-width-badge: var(--border-width-sm);
+}

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

@@ -0,0 +1,215 @@
+:root {
+  --opacity-outlined-hover: 16%;
+  --opacity-outlined-active: 12%;
+}
+
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-button-primary: var(--color-primary);
+  --color-button-secondary: var(--color-secondary);
+  --color-button-tertiary: var(--color-tertiary);
+  --color-button-warning: var(--color-warning);
+  --color-button-danger: var(--color-danger);
+  --color-button-borderless: transparent;
+
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-button-bg-primary: var(--color-button-primary);
+  --color-button-bg-secondary: var(--color-button-secondary);
+  --color-button-bg-tertiary: var(--color-button-tertiary);
+  --color-button-bg-warning: var(--color-button-warning);
+  --color-button-bg-danger: var(--color-button-danger);
+
+  /* Foreground colors */
+  --color-button-fg: var(--color-fg-reverse);
+  --color-button-fg-light: var(--color-fg-reverse);
+  --color-button-fg-outlined: var(--color-fg-primary);
+  --color-button-fg-primary: var(--color-button-fg);
+  --color-button-fg-secondary: var(--color-button-fg);
+  --color-button-fg-tertiary: var(--color-button-fg);
+  --color-button-fg-warning: var(--color-button-fg);
+  --color-button-fg-danger: var(--color-button-fg);
+  --color-button-fg-primary-light: var(--color-button-fg-light);
+  --color-button-fg-secondary-light: var(--color-button-fg-light);
+  --color-button-fg-tertiary-light: var(--color-button-fg-light);
+  --color-button-fg-warning-light: var(--color-button-fg-light);
+  --color-button-fg-danger-light: var(--color-button-fg-light);
+  --color-button-fg-outlined-primary: var(--color-button-fg-outlined);
+  --color-button-fg-outlined-secondary: var(--color-button-fg-outlined);
+  --color-button-fg-outlined-tertiary: var(--color-button-fg-outlined);
+  --color-button-fg-outlined-warning: var(--color-button-fg-outlined);
+  --color-button-fg-outlined-danger: var(--color-button-fg-outlined);
+  --color-button-fg-primary-borderless: var(--color-button-primary);
+  --color-button-fg-secondary-borderless: var(--color-button-secondary);
+  --color-button-fg-tertiary-borderless: var(--color-button-tertiary);
+  --color-button-fg-warning-borderless: var(--color-button-warning);
+  --color-button-fg-danger-borderless: var(--color-button-danger);
+
+  /* Border colors */
+  --color-button-border-primary: var(--color-button-primary);
+  --color-button-border-secondary: var(--color-button-secondary);
+  --color-button-border-tertiary: var(--color-button-tertiary);
+  --color-button-border-warning: var(--color-button-warning);
+  --color-button-border-danger: var(--color-button-danger);
+
+  /* === STATE VARIATIONS === */
+  /* Primary states */
+  --color-button-bg-primary-hover: oklch(
+    from var(--color-button-primary) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-primary-active: oklch(
+    from var(--color-button-primary) calc(l + var(--state-active)) c h
+  );
+
+  /* Secondary states */
+  --color-button-bg-secondary-hover: oklch(
+    from var(--color-button-secondary) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-secondary-active: oklch(
+    from var(--color-button-secondary) calc(l + var(--state-active)) c h
+  );
+
+  /* Tertiary states */
+  --color-button-bg-tertiary-hover: oklch(
+    from var(--color-button-tertiary) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-tertiary-active: oklch(
+    from var(--color-button-tertiary) calc(l + var(--state-active)) c h
+  );
+
+  /* Warning states */
+  --color-button-bg-warning-hover: oklch(
+    from var(--color-button-warning) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-warning-active: oklch(
+    from var(--color-button-warning) calc(l + var(--state-active)) c h
+  );
+
+  /* Danger states */
+  --color-button-bg-danger-hover: oklch(
+    from var(--color-button-danger) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-danger-active: oklch(
+    from var(--color-button-danger) calc(l + var(--state-active)) c h
+  );
+
+  /* Borderless states */
+  --color-button-bg-borderless: var(--color-button-borderless);
+  --color-button-bg-borderless-hover: var(--color-fill-hover);
+  --color-button-bg-borderless-active: var(--color-fill-active);
+
+  /* === COMPONENT VARIANTS === */
+  /* Light variants */
+  --color-button-bg-primary-light: var(--color-primary-light);
+  --color-button-bg-secondary-light: var(--color-secondary-light);
+  --color-button-bg-tertiary-light: var(--color-tertiary-light);
+  --color-button-bg-warning-light: var(--color-warning-light);
+  --color-button-bg-danger-light: var(--color-danger-light);
+
+  /* Light variant states */
+  --color-button-bg-primary-light-hover: oklch(
+    from var(--color-button-bg-primary-light) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-primary-light-active: oklch(
+    from var(--color-button-bg-primary-light) calc(l + var(--state-active)) c h
+  );
+  --color-button-bg-secondary-light-hover: oklch(
+    from var(--color-button-bg-secondary-light) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-secondary-light-active: oklch(
+    from var(--color-button-bg-secondary-light) calc(l + var(--state-active)) c
+      h
+  );
+  --color-button-bg-tertiary-light-hover: oklch(
+    from var(--color-button-bg-tertiary-light) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-tertiary-light-active: oklch(
+    from var(--color-button-bg-tertiary-light) calc(l + var(--state-active)) c h
+  );
+  --color-button-bg-warning-light-hover: oklch(
+    from var(--color-button-bg-warning-light) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-warning-light-active: oklch(
+    from var(--color-button-bg-warning-light) calc(l + var(--state-active)) c h
+  );
+  --color-button-bg-danger-light-hover: oklch(
+    from var(--color-button-bg-danger-light) calc(l + var(--state-hover)) c h
+  );
+  --color-button-bg-danger-light-active: oklch(
+    from var(--color-button-bg-danger-light) calc(l + var(--state-active)) c h
+  );
+
+  /* Outlined variants */
+  --color-button-bg-outlined-primary-hover: --alpha(
+    var(--color-button-primary) /
+    var(--opacity-outlined-hover)
+  );
+  --color-button-bg-outlined-primary-active: --alpha(
+    var(--color-button-primary) /
+    var(--opacity-outlined-active)
+  );
+  --color-button-bg-outlined-secondary-hover: --alpha(
+    var(--color-button-secondary) /
+    var(--opacity-outlined-hover)
+  );
+  --color-button-bg-outlined-secondary-active: --alpha(
+    var(--color-button-secondary) /
+    var(--opacity-outlined-active)
+  );
+  --color-button-bg-outlined-tertiary-hover: --alpha(
+    var(--color-button-tertiary) /
+    var(--opacity-outlined-hover)
+  );
+  --color-button-bg-outlined-tertiary-active: --alpha(
+    var(--color-button-tertiary) /
+    var(--opacity-outlined-active)
+  );
+  --color-button-bg-outlined-warning-hover: --alpha(
+    var(--color-button-warning) /
+    var(--opacity-outlined-hover)
+  );
+  --color-button-bg-outlined-warning-active: --alpha(
+    var(--color-button-warning) /
+    var(--opacity-outlined-active)
+  );
+  --color-button-bg-outlined-danger-hover: --alpha(
+    var(--color-button-danger) /
+    var(--opacity-outlined-hover)
+  );
+  --color-button-bg-outlined-danger-active: --alpha(
+    var(--color-button-danger) /
+    var(--opacity-outlined-active)
+  );
+
+  /* === DISABLED STATES === */
+  --color-button-bg-disabled: var(--color-disabled-bg);
+  --color-button-fg-disabled: var(--color-disabled-fg);
+  --color-button-border-disabled: var(--color-disabled-border);
+
+  /* === SPACING === */
+  --spacing-button-sm: var(--spacing-150);
+  --spacing-button-md: var(--spacing-200);
+  --spacing-button-lg: var(--spacing-250);
+
+  --padding-button-sm: var(--spacing-150) var(--spacing-250);
+  --padding-button-md: var(--spacing-200) var(--spacing-350);
+  --padding-button-lg: var(--spacing-250) var(--spacing-450);
+
+  /* === TYPOGRAPHY === */
+  --text-button-sm: var(--text-sm);
+  --text-button-md: var(--text-md);
+  --text-button-lg: var(--text-lg);
+
+  /* === BORDERS & RADIUS === */
+  --radius-button-sm: var(--radius-sm);
+  --radius-button-md: var(--radius-md);
+  --radius-button-lg: var(--radius-lg);
+
+  --border-button-width-sm: var(--border-width-sm);
+  --border-button-width-md: var(--border-width-md);
+  --border-button-width-lg: var(--border-width-lg);
+
+  /* === FOCUS RING === */
+  --color-button-ring: var(--color-ring);
+}

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

@@ -0,0 +1,122 @@
+@plugin "@iconify/tailwind4";
+
+@theme static {
+  --text-icon-xs: var(--text-xs);
+  --text-icon-sm: var(--text-sm);
+  --text-icon-md: var(--text-md);
+  --text-icon-lg: var(--text-lg);
+  --text-icon-xl: var(--text-xl);
+  --text-icon-2xl: var(--text-2xl);
+}
+
+/* Semantic tokens for icons */
+@utility token-icon-error {
+  @apply icon-[mdi-light--alert-circle];
+}
+
+@utility token-icon-success {
+  @apply icon-[mdi-light--check-circle];
+}
+
+@utility token-icon-warning {
+  @apply icon-[mdi-light--alert];
+}
+
+@utility token-icon-info {
+  @apply icon-[mdi-light--information];
+}
+
+
+@utility token-icon-close {
+  @apply icon-[mdi--close];
+}
+
+/* Component tokens for icons */
+@utility token-icon-input-error {
+  @apply token-icon-error;
+}
+
+@utility token-icon-input-success {
+  @apply token-icon-success;
+}
+
+@utility token-icon-input-warning {
+  @apply token-icon-warning;
+}
+
+@utility token-icon-input-info {
+  @apply token-icon-info;
+}
+
+
+/* Navigation icons */
+@utility token-icon-chevron-down {
+  @apply icon-[mdi--chevron-down];
+}
+
+@utility token-icon-chevron-right {
+  @apply icon-[mdi--chevron-right];
+}
+
+@utility token-icon-chevron-left {
+  @apply icon-[mdi--chevron-left];
+}
+
+@utility token-icon-chevron-up {
+  @apply icon-[mdi--chevron-up];
+}
+
+/* Action icons */
+@utility token-icon-plus {
+  @apply icon-[mdi--plus];
+}
+
+@utility token-icon-folder {
+  @apply icon-[mdi--folder];
+}
+
+@utility token-icon-save {
+  @apply icon-[mdi--content-save];
+}
+
+@utility token-icon-trash {
+  @apply icon-[mdi--delete];
+}
+
+@utility token-icon-copy {
+  @apply icon-[mdi--content-copy];
+}
+
+@utility token-icon-clipboard {
+  @apply icon-[mdi--clipboard];
+}
+
+@utility token-icon-undo {
+  @apply icon-[mdi--undo];
+}
+
+@utility token-icon-redo {
+  @apply icon-[mdi--redo];
+}
+
+@utility token-icon-check {
+  @apply icon-[mdi--check];
+}
+
+/* product card icons */
+
+@utility token-icon-cart {
+  @apply icon-[mdi-light--cart];
+}
+
+@utility token-icon-eye {
+  @apply icon-[mdi--eye];
+}
+
+@utility token-icon-heart {
+  @apply icon-[mdi--heart];
+}
+
+@utility token-icon-search {
+  @apply icon-[mdi--magnify];
+}

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

@@ -0,0 +1,125 @@
+@theme static {
+  /* BASE TOKENS - direct mapping from semantic tokens */
+  /* Base input colors */
+  --color-input: var(--color-fill-base);
+  --color-input-border: var(--color-border-primary);
+  --color-input-fg: var(--color-fg-primary);
+  --color-input-disabled: var(--color-disabled-bg);
+
+  /* Validation states - primary colors */
+  --color-input-danger: var(--color-danger);
+  --color-input-success: var(--color-success);
+  --color-input-warning: var(--color-warning);
+
+  /* DERIVED STATES - automatically calculated from base tokens */
+  /* Default state - hover/focus/disabled */
+  --color-input-hover: oklch(
+    from var(--color-input) calc(l + var(--state-hover)) c h
+  );
+  --color-input-focus: oklch(
+    from var(--color-input) calc(l + var(--state-active)) c h
+  );
+
+  --color-input-border-hover: oklch(
+    from var(--color-input-border) calc(l + var(--state-hover)) c h
+  );
+  --color-input-border-focus: var(--color-primary);
+  --color-input-border-disabled: --alpha(
+    var(--color-input-border) /
+    var(--opacity-disabled)
+  );
+
+  /* Error state - hover/focus */
+  --color-input-border-danger: var(--color-input-danger);
+  --color-input-border-danger-hover: oklch(
+    from var(--color-input-danger) calc(l + var(--state-hover)) c h
+  );
+  --color-input-border-danger-focus: var(--color-input-danger);
+  --color-input-placeholder-danger: --alpha(
+    var(--color-input-danger) /
+    var(--opacity-disabled)
+  );
+
+  /* Success state - hover/focus */
+  --color-input-border-success: var(--color-input-success);
+  --color-input-border-success-hover: oklch(
+    from var(--color-input-success) calc(l + var(--state-hover)) c h
+  );
+  --color-input-border-success-focus: var(--color-input-success);
+  --color-input-placeholder-success: --alpha(
+    var(--color-input-success) /
+    var(--opacity-disabled)
+  );
+
+  /* Warning state - hover/focus */
+  --color-input-border-warning: var(--color-input-warning);
+  --color-input-border-warning-hover: oklch(
+    from var(--color-input-warning) calc(l + var(--state-hover)) c h
+  );
+  --color-input-border-warning-focus: var(--color-input-warning);
+  --color-input-placeholder-warning: --alpha(
+    var(--color-input-warning) /
+    var(--opacity-disabled)
+  );
+
+  /* Text colors */
+  --color-input-fg-disabled: --alpha(
+    var(--color-input-fg) /
+    var(--opacity-disabled)
+  );
+  --color-input-placeholder: --alpha(
+    var(--color-input-fg) /
+    var(--opacity-placeholder)
+  );
+
+  --color-input-placeholder-disabled: --alpha(
+    var(--color-input-fg) /
+    var(--opacity-disabled-placeholder)
+  );
+
+  /* Label colors */
+  --color-label-fg: var(--color-input-fg);
+  --color-label-disabled: var(--color-input-fg-disabled);
+  --color-label-required: var(--color-input-danger);
+  --margin-label: var(--spacing-100);
+
+  /* Error/Helper/Extra colors */
+  --color-error-fg: var(--color-danger);
+  --color-helper-fg: var(--color-input-fg);
+
+  /* Focus ring colors - using consistent opacity */
+  --color-input-ring: var(--color-ring);
+
+  /* Spacing - keeping your existing values */
+  --padding-input-sm: var(--spacing-250) var(--spacing-250);
+  --padding-input-md: var(--spacing-350) var(--spacing-250);
+  --padding-input-lg: var(--spacing-450) var(--spacing-350);
+  --padding-with-button: var(--spacing-950);
+
+  /* Typography */
+  --text-input-sm: var(--text-sm);
+  --text-input-md: var(--text-md);
+  --text-input-lg: var(--text-lg);
+
+  /* Border */
+  --border-width-input: 1px;
+  --radius-input: var(--radius-md);
+
+  /* Label */
+
+  --font-label: var(--font-bold);
+  --text-label-sm: var(--text-input-sm);
+  --text-label-md: var(--text-input-md);
+  --text-label-lg: var(--text-input-lg);
+
+  /* Error message */
+  --text-error-sm: var(--text-input-sm);
+  --text-error-md: var(--text-input-md);
+  --text-error-lg: var(--text-input-lg);
+
+  /* Helper text / Extra text */
+  --text-helper-sm: var(--text-input-sm);
+  --text-helper-md: var(--text-input-md);
+  --text-helper-lg: var(--text-input-lg);
+  --color-helper-fg: var(--color-fg-secondary);
+}

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

@@ -0,0 +1,57 @@
+@theme static {
+  /* === BASE TOKEN MAPPING === */
+  --color-numeric-input-bg: var(--color-surface);
+  --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-hover)) c h
+  );
+  --color-numeric-input-border: var(--color-input-border);
+  --color-numeric-input-fg: var(--color-input-fg);
+
+  --color-numeric-input-invalid-border: var(--color-danger);
+  --color-numeric-input-invalid-bg: --alpha(var(--color-danger) / 10%);
+
+  --gap-numeric-input-root-sm: var(--spacing-150);
+  --gap-numeric-input-root-md: var(--spacing-200);
+  --gap-numeric-input-root-lg: var(--spacing-250);
+
+  /* ==== 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: 0 0 0 var(--spacing-150);
+
+  /* === TRIGGER === */
+  --color-numeric-input-trigger-container-bg: var(--color-numeric-input-bg);
+  --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: var(--spacing-100);
+
+  /* === INCREMENT BUTTON === */
+
+  --radius-numeric-input: var(--radius-sm);
+  --border-width-numeric-input: var(--border-width-input);
+
+  /* === FOCUS RING === */
+  --color-numeric-input-ring: var(--color-ring);
+}
+
+@utility token-icon-numeric-input-increment {
+  @apply icon-[mdi--chevron-up];
+}
+
+@utility token-icon-numeric-input-decrement {
+  @apply icon-[mdi--chevron-down];
+}

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

@@ -0,0 +1,33 @@
+@theme static {
+  /* === BASE COLORS === */
+  --color-rating-fg: var(--color-highlight);
+  --color-rating-fg-active: var(--color-warning);
+
+  /* === DISABLED STATES === */
+  --color-rating-fg-disabled: --alpha(
+    var(--color-rating-fg-active) /
+    var(--opacity-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 icon-[mdi--star];
+}
+
+@utility token-icon-rating-half {
+  @apply icon-[mdi--star-half];
+}