@techsio/ui-kit 0.0.0

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

@@ -0,0 +1,93 @@
+@theme static {
+  --opacity-borderless: 60%;
+  /* === BASE COLOR MAPPING === */
+  --color-textarea-base: var(--color-fill-base);
+  --color-textarea-accent: var(--color-primary);
+  --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: --alpha(
+    var(--color-fg-primary) /
+    var(--opacity-placeholder)
+  );
+  --color-textarea-fg-disabled: var(--color-disabled-fg);
+
+  /* Border colors */
+  --color-textarea-border: var(--color-border-primary);
+  --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-disabled-border);
+
+  /* === 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-textarea-accent);
+  --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);
+
+  /* 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);
+  --color-textarea-placeholder-danger: --alpha(
+    var(--color-textarea-danger) /
+    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-disabled-bg);
+
+  /* === SPACING === */
+  --padding-textarea-sm: var(--spacing-100) var(--spacing-150);
+  --padding-textarea-md: var(--spacing-150) var(--spacing-200);
+  --padding-textarea-lg: var(--spacing-150) var(--spacing-250);
+
+  /* === TYPOGRAPHY === */
+  --text-textarea-sm: var(--text-sm);
+  --text-textarea-md: var(--text-md);
+  --text-textarea-lg: var(--text-lg);
+
+  /* === BORDERS & RADIUS === */
+  --border-textarea-width: 1px;
+  --radius-textarea: var(--radius-md);
+
+  /* === FOCUS RING === */
+  --color-textarea-ring: var(--color-ring);
+}

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

@@ -0,0 +1,21 @@
+@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);
+
+  --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);
+
+  /* Required for Zag.js */
+  --tooltip-arrow-size: var(--spacing-150);
+  --tooltip-arrow-background: var(--color-tooltip-bg);
+}

package/src/tokens/components/components.css

@@ -0,0 +1,32 @@
+@import "./atoms/_badge.css";
+@import "./atoms/_button.css";
+@import "./atoms/_icon.css";
+@import "./atoms/_input.css";
+@import "./atoms/_numeric-input.css";
+@import "./atoms/_rating.css";
+@import "./atoms/_textarea.css";
+@import "./atoms/_tooltip.css";
+
+@import "./molecules/_accordion.css";
+@import "./molecules/_breadcrumb.css";
+@import "./molecules/_carousel.css";
+@import "./molecules/_checkbox.css";
+@import "./molecules/_color-select.css";
+@import "./molecules/_combobox.css";
+@import "./molecules/_dialog.css";
+@import "./molecules/_pagination.css";
+@import "./molecules/_popover.css";
+@import "./molecules/_menu.css";
+@import "./molecules/_tabs.css";
+@import "./molecules/_product-card.css";
+@import "./molecules/_slider.css";
+@import "./molecules/_search-form.css";
+@import "./molecules/_select.css";
+@import "./molecules/_steps.css";
+@import "./molecules/_switch.css";
+@import "./molecules/_toast.css";
+@import "./molecules/_tree-view.css";
+
+@import "./organisms/_table.css";
+@import "./organisms/_footer.css";
+@import "./organisms/_header.css";

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

@@ -0,0 +1,85 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  --color-accordion-base: var(--color-surface);
+  --color-accordion-border: var(--color-border-primary);
+  --color-accordion-accent: var(--color-primary);
+
+  /* === DERIVED COLORS === */
+  /* Background colors */
+  --color-accordion-bg: var(--color-accordion-base);
+  --color-accordion-title-bg: var(--color-accordion-bg);
+  --color-accordion-content-bg: var(--color-accordion-bg);
+
+  /* Foreground colors */
+  --color-accordion-fg: var(--color-fg-primary);
+  --color-accordion-title-fg: var(--color-accordion-fg);
+  --color-accordion-subtitle-fg: --alpha(
+    var(--color-accordion-fg) /
+    var(--opacity-text-secondary)
+  );
+  --color-accordion-content-fg: var(--color-accordion-fg);
+
+  /* === STATE VARIATIONS === */
+  --color-accordion-bg-hover: oklch(
+    from var(--color-accordion-bg) calc(l + var(--state-hover)) c h
+  );
+  --color-accordion-title-bg-hover: var(--color-accordion-bg-hover);
+
+  /* === COMPONENT VARIANTS === */
+  /* Component variants will be added here when needed */
+
+  /* === VALIDATION STATES === */
+  /* Validation states will be added here when needed */
+
+  /* === DISABLED STATES === */
+  --color-accordion-fg-disabled: --alpha(
+    var(--color-disabled-fg) /
+    var(--opacity-disabled)
+  );
+
+  /* === SPACING === */
+  --padding-accordion-title-sm: var(--spacing-100) var(--spacing-150);
+  --padding-accordion-title-md: var(--spacing-150) var(--spacing-200);
+  --padding-accordion-title-lg: var(--spacing-200) var(--spacing-250);
+
+  --padding-accordion-content-sm: var(--spacing-100) var(--spacing-100);
+  --padding-accordion-content-md: var(--spacing-150) var(--spacing-200);
+  --padding-accordion-content-lg: var(--spacing-200) var(--spacing-300);
+
+  --padding-accordion-icon: var(--spacing-200);
+
+  /* === TYPOGRAPHY === */
+  /* Font weights */
+  --font-weight-accordion-title: var(--font-weight-medium);
+
+  /* Default sizes */
+  --text-accordion-title-md: var(--text-md);
+  --text-accordion-content-md: var(--text-md);
+  --text-accordion-subtitle-md: var(--text-sm);
+
+  /* Size variants */
+  --text-accordion-title-lg: var(--text-lg);
+  --text-accordion-content-lg: var(--text-lg);
+  --text-accordion-subtitle-lg: var(--text-md);
+  --text-accordion-title-sm: var(--text-sm);
+  --text-accordion-content-sm: var(--text-sm);
+  --text-accordion-subtitle-sm: var(--text-xs);
+
+  /* === BORDERS & RADIUS === */
+  --border-width-accordion: var(--border-width-sm);
+  --radius-accordion: var(--radius-sm);
+
+  /* === SHADOWS === */
+  --shadow-accordion-root-sm: var(--shadow-primary);
+  --shadow-accordion-root-md: var(--shadow-xl);
+  --shadow-accordion-content-sm: var(--shadow-sm);
+  --shadow-accordion-content-md: var(--shadow-primary);
+
+  /* === FOCUS RINGS === */
+  --color-accordion-ring: var(--color-ring);
+}
+
+/* Semantic tokens for accordion icons */
+@utility token-icon-accordion-chevron {
+  @apply icon-[mdi--chevron-down];
+}

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

@@ -0,0 +1,44 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-breadcrumb: var(--color-surface);
+  --color-breadcrumb-accent: var(--color-primary);
+
+  /* === DERIVED COLORS === */
+  /* Background colors */
+  --color-breadcrumb-bg: var(--color-breadcrumb);
+
+  /* Foreground colors */
+  --color-breadcrumb-fg: var(--color-fg-primary);
+  --color-breadcrumb-fg-secondary: var(--color-fg-secondary);
+  --color-breadcrumb-fg-current: var(--color-breadcrumb-accent);
+
+  /* Slot-specific colors */
+  --color-breadcrumb-item-fg: var(--color-breadcrumb-fg);
+  --color-breadcrumb-separator-fg: var(--color-breadcrumb-fg-secondary);
+  --color-breadcrumb-ellipsis-fg: var(--color-breadcrumb-fg-secondary);
+
+  /* === STATE VARIATIONS === */
+  --color-breadcrumb-fg-hover: var(--color-breadcrumb-accent);
+
+  /* === SPACING === */
+  --spacing-breadcrumb-sm: var(--spacing-100);
+  --spacing-breadcrumb-md: var(--spacing-150);
+  --spacing-breadcrumb-lg: var(--spacing-200);
+
+  /* === TYPOGRAPHY === */
+  --text-breadcrumb-sm: var(--text-xs);
+  --text-breadcrumb-md: var(--text-sm);
+  --text-breadcrumb-lg: var(--text-md);
+
+  /* === FOCUS RINGS === */
+  --color-breadcrumb-ring: var(--color-ring);
+}
+
+@utility token-icon-breadcrumb-separator {
+  @apply icon-[mdi--chevron-right];
+}
+
+@utility token-icon-breadcrumb-ellipsis {
+  @apply icon-[mdi--ellipsis-horizontal];
+}

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

@@ -0,0 +1,72 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-carousel: var(--color-surface);
+  --color-carousel-accent: var(--color-primary);
+
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-carousel-trigger-bg: oklch(
+    from var(--color-carousel) calc(l - var(--surface-increment) * 4) c h
+  );
+  --color-carousel-trigger-bg-hover: oklch(
+    from var(--color-carousel) calc(l - var(--surface-increment) * 8) c h
+  );
+  --color-carousel-control-bg: oklch(
+    from var(--color-carousel) calc(l - var(--surface-increment) * 2) c h
+  );
+
+  /* Foreground colors */
+  --color-carousel-trigger-fg: var(--color-fg-dark);
+  --color-carousel-trigger-fg-hover: var(--color-fg-dark);
+
+  /* Indicator colors */
+  --color-carousel-indicator-bg: oklch(
+    from var(--color-carousel) calc(l - var(--surface-increment) * 4) c h
+  );
+  --color-carousel-indicator-bg-active: var(--color-carousel-accent);
+  --color-carousel-indicator-border: transparent;
+  --color-carousel-indicator-border-active: transparent;
+
+  /* === SPACING === */
+  /* Root spacing */
+  --spacing-carousel-root-sm: var(--container-3xs);
+  --spacing-carousel-root-md: var(--container-sm);
+  --spacing-carousel-root-lg: var(--container-lg);
+
+  --spacing-carousel-trigger-top: var(--spacing-100);
+  --spacing-carousel-trigger-right: var(--spacing-100);
+
+  /* Control spacing */
+  --padding-carousel-control: var(--spacing-100);
+  --gap-carousel-control: var(--spacing-200);
+
+  /* Trigger spacing */
+  --padding-carousel-trigger: 0 0;
+
+  /* Indicator spacing */
+  --gap-carousel-indicator: var(--spacing-100);
+  --width-carousel-indicator: var(--spacing-200);
+
+  /* === BORDERS & RADIUS === */
+  --radius-carousel: var(--radius-sm);
+  --radius-carousel-indicator: 50%;
+
+  /* === TYPOGRAPHY === */
+  --text-carousel-trigger-size: var(--text-md);
+
+  /* === FOCUS RINGS === */
+  --color-carousel-ring: var(--color-ring);
+
+  /* === ASPECT RATIO === */
+  /* Additional section for aspect ratios */
+  --aspect-carousel-indicator: var(--aspect-square);
+}
+
+@utility token-icon-carousel-prev {
+  @apply icon-[mdi--chevron-left];
+}
+
+@utility token-icon-carousel-next {
+  @apply icon-[mdi--chevron-right];
+}

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

@@ -0,0 +1,29 @@
+@theme static {
+  /* === BASE TOKEN MAPPING === */
+  --color-checkbox: var(--color-fill-active);
+  --color-checkbox-error: var(--color-danger);
+  --color-checkbox-checked: var(--color-success);
+  --color-checkbox-border: var(--color-border-primary);
+  --opacity-checkbox-disabled: var(--opacity-disabled);
+
+  --color-checkbox-indeterminate: var(--color-primary);
+
+  --color-checkbox-ring: var(--color-ring);
+  --color-checkbox-border-error: var(--color-checkbox-error);
+
+  --spacing-checkbox: var(--spacing-200);
+  --color-icon-fg: var(--color-fg-dark);
+  --text-checkbox-icon-md: var(--text-xs);
+  --radius-checkbox: var(--radius-sm);
+
+  --width-indeterminate: 60%;
+  --height-indeterminate: 2px;
+}
+
+@utility token-icon-checkbox {
+  @apply icon-[mdi--check-bold];
+}
+
+@utility token-icon-checkbox-indeterminate {
+  @apply icon-[mdi--minus];
+}

package/src/tokens/components/molecules/_color-select.css

@@ -0,0 +1,61 @@
+:root {
+  --cols-num: 4;
+  /*breakpoint md*/
+  @media (width < 48rem) {
+    --cols-num: 3;
+  }
+  /*breakpoint xs*/
+  @media (width < 30rem) {
+    --cols-num: 2;
+  }
+}
+
+@theme static {
+  /* === DERIVED COLORS === */
+  --color-color-select-accent: var(--color-primary);
+  --color-color-select-border: var(--color-highlight);
+  --color-color-select-border-hover: var(--color-color-select-accent);
+  --color-color-select-selected: var(--color-color-select-accent);
+  --color-color-select-fg-check: var(--color-white);
+  --color-color-select-ring: var(--color-ring);
+  --color-color-select-label-fg: var(--color-fg-secondary);
+
+  /* === SPACING === */
+  --padding-color-select-atom: 0 0;
+  --spacing-color-select-group-sm: var(--spacing-100);
+  --spacing-color-select-group-md: var(--spacing-200);
+  --spacing-color-select-group-lg: var(--spacing-300);
+
+  --spacing-color-select-sm: var(--spacing-250);
+  --spacing-color-select-md: var(--spacing-350);
+  --spacing-color-select-lg: var(--spacing-450);
+
+  /* === TYPOGRAPHY === */
+  --text-color-select-sm: var(--text-xs);
+  --text-color-select-md: var(--text-sm);
+  --text-color-select-lg: var(--text-md);
+  --size-color-select-icon: 50%;
+
+  /* === BORDERS & RADIUS === */
+  --radius-color-select-full: var(--radius-full);
+  --radius-color-select-sm: var(--radius-sm);
+  --radius-color-select-md: var(--radius-md);
+  --radius-color-select-lg: var(--radius-2xl);
+
+  /* === SHADOWS === */
+  --shadow-color-select: var(--shadow-sm);
+
+  /* === LAYOUT === */
+}
+
+@utility token-icon-color-select {
+  @apply icon-[mdi--check-bold];
+}
+
+@utility select-disabled {
+  @apply grayscale-75;
+}
+
+@utility color-select-grid {
+  grid-template-columns: repeat(var(--cols-num), minmax(0, 1fr));
+}

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

@@ -0,0 +1,116 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-combobox: var(--color-surface);
+  --color-combobox-success-fg: var(--color-success);
+  --color-combobox-warning-fg: var(--color-warning);
+  --color-combobox-danger-fg: var(--color-danger);
+
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-combobox-bg: var(--color-combobox);
+
+  /* Foreground colors */
+  --color-combobox-fg: var(--color-fg-primary);
+  --color-combobox-placeholder: --alpha(
+    var(--color-combobox-fg) /
+    var(--opacity-placeholder)
+  );
+
+  /* Border colors */
+  --color-combobox-border: var(--color-border-primary);
+  --color-combobox-border-hover: oklch(
+    from var(--color-combobox-border) calc(l + var(--state-hover)) c h
+  );
+  --color-combobox-border-focus: var(--color-combobox-accent);
+
+  /* === STATE VARIATIONS === */
+  /* Auto-calculated using semantic state modifiers */
+  --color-combobox-bg-hover: oklch(
+    from var(--color-combobox) calc(l + var(--state-hover)) c h
+  );
+  --color-combobox-bg-focus: oklch(
+    from var(--color-combobox) calc(l + var(--state-active)) c h
+  );
+
+  /* Input slot states */
+  --color-combobox-input-bg: transparent;
+  --color-combobox-input-bg-hover: var(--color-combobox-input-bg);
+  --color-combobox-input-bg-focused: var(--color-combobox-input-bg);
+
+  /* Trigger button states */
+  --color-combobox-trigger: var(--color-combobox-fg);
+  --color-combobox-trigger-hover: oklch(
+    from var(--color-combobox) min(l - 0.4, 1) c h
+  );
+  --color-combobox-trigger-bg: transparent;
+  --color-combobox-trigger-bg-hover: var(--color-combobox-trigger-bg);
+  --color-combobox-trigger-bg-active: var(--color-combobox-trigger-bg);
+
+  /* === COMPONENT VARIANTS === */
+  /* Dropdown content */
+  --color-combobox-content-bg: var(--color-combobox);
+
+  /* Dropdown items */
+  --color-combobox-item-fg: var(--color-combobox-fg);
+  --color-combobox-item-bg-selected: var(--color-combobox-bg-focus);
+  --color-combobox-item-bg-hover: var(--color-combobox-bg-hover);
+
+  /* === VALIDATION STATES === */
+  /* Success, warning, danger states - defined in BASE COLOR MAPPING */
+
+  /* === DISABLED STATES === */
+  /* Disabled appearance */
+  --color-combobox-bg-disabled: var(--color-disabled-bg);
+  --color-combobox-fg-disabled: var(--color-disabled-fg);
+  --color-combobox-border-disabled: var(--color-disabled-border);
+
+  /* === SPACING === */
+  /* Padding, margin, gap values */
+  --spacing-combobox-root-sm: var(--spacing-100);
+  --spacing-combobox-root-md: var(--spacing-150);
+  --spacing-combobox-root-lg: var(--spacing-200);
+
+  --padding-combobox-input-sm: var(--spacing-50);
+  --padding-combobox-input-md: var(--spacing-100);
+  --padding-combobox-input-lg: var(--spacing-150);
+
+  --padding-combobox-item-sm: var(--spacing-50) var(--spacing-150);
+  --padding-combobox-item-md: var(--spacing-50) var(--spacing-200);
+  --padding-combobox-item-lg: var(--spacing-50) var(--spacing-250);
+
+  --padding-combobox-trigger: 0 var(--spacing-100);
+
+  --spacing-combobox-clear-right: var(--spacing-250);
+
+  /* === TYPOGRAPHY === */
+  /* Font sizes and weights */
+  --text-combobox-trigger-size: var(--text-lg);
+  --text-combobox-content-sm: var(--text-sm);
+  --text-combobox-content-md: var(--text-md);
+  --text-combobox-content-lg: var(--text-lg);
+
+  /* === BORDERS & RADIUS === */
+  /* Border widths and radius values */
+  --radius-combobox: var(--radius-sm);
+  --border-width-combobox: var(--border-width-input);
+
+  /* === SHADOWS === */
+  /* Box shadow definitions - none for combobox */
+
+  /* === FOCUS RINGS === */
+  /* Focus ring colors and styles */
+  --color-combobox-ring: var(--color-ring);
+
+  /* Z-index */
+  --z-combobox-content: 20;
+}
+
+/* Semantic tokens for combobox icons */
+@utility token-icon-combobox-chevron {
+  @apply icon-[mdi--chevron-down];
+}
+
+@utility token-icon-combobox-clear {
+  @apply icon-[mdi--close];
+}

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

@@ -0,0 +1,75 @@
+:root {
+  --opacity-backdrop: 10%;
+}
+
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-dialog: var(--color-surface);
+  --color-dialog-accent: var(--color-primary);
+
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-dialog-bg: var(--color-dialog);
+  --color-dialog-fg: var(--color-fg-primary);
+  --color-dialog-backdrop-bg: --alpha(
+    var(--color-fg-primary) /
+    var(--opacity-backdrop)
+  );
+
+  /* Content colors */
+  --color-dialog-content-bg: var(--color-dialog-bg);
+  --color-dialog-content-fg: var(--color-dialog-fg);
+  --color-dialog-content-border: var(--color-border-primary);
+
+  /* Foreground colors */
+  --color-dialog-title-fg: var(--color-dialog-fg);
+  --color-dialog-description-fg: var(--color-dialog-fg);
+  --color-dialog-close-trigger-fg: var(--color-dialog-fg);
+
+  /* === SPACING === */
+  --padding-dialog-content: var(--spacing-450);
+  --gap-dialog-content: var(--spacing-250);
+  --padding-dialog-actions: var(--spacing-150);
+  --gap-dialog-actions: var(--spacing-100);
+  --spacing-dialog-close-trigger-padding: var(--spacing-150);
+  --spacing-dialog-close-trigger-offset: var(--spacing-250);
+
+  /* === TYPOGRAPHY === */
+  --text-dialog-title-size: var(--text-xl);
+  --text-dialog-description-size: var(--text-md);
+  --font-weight-dialog-title: var(--font-weight-semibold);
+
+  /* === SIZES === */
+  --container-dialog-xs: var(--container-xs);
+  --container-dialog-sm: var(--container-sm);
+  --container-dialog-md: var(--container-md);
+  --container-dialog-lg: var(--container-lg);
+  --container-dialog-xl: var(--container-xl);
+  --container-dialog-center-h-max: 80svh;
+  --container-dialog-center-w-max: var(--container-2xl);
+
+  /* === BORDERS & RADIUS === */
+  --border-width-dialog: var(--border-width-sm);
+  --radius-dialog-center: var(--radius-sm);
+  --radius-dialog-left: 0 0 0 0;
+  --radius-dialog-right: 0 0 0 0;
+  --radius-dialog-top: 0 0 0 0;
+  --radius-dialog-bottom: 0 0 0 0;
+  --radius-dialog-close-trigger: var(--radius-full);
+
+  /* === SHADOWS === */
+  --shadow-dialog-content: var(--shadow-primary);
+
+  /* === Z-INDEX === */
+  --z-dialog-backdrop: 10;
+  --z-dialog-positioner: 20;
+
+  /* === FOCUS RINGS === */
+  --color-dialog-ring: var(--color-ring);
+}
+
+/* Semantic tokens for dialog icons */
+@utility token-icon-dialog-close {
+  @apply token-icon-close;
+}

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

@@ -0,0 +1,48 @@
+@theme static {
+  /* ===== MENU CONTENT PANEL ===== */
+  --color-menu-content-bg: var(--color-surface);
+  --color-menu-content-border: var(--color-border-primary);
+  --radius-menu: var(--radius-sm);
+  --shadow-menu-content-shadow: var(--shadow-lg);
+
+  --padding-menu-content: var(--spacing-200);
+
+  /* ===== MENU ITEM ===== */
+  --color-menu-item-fg: var(--color-fg-primary);
+  --color-menu-item-hover: var(--color-surface-hover);
+  --radius-menu-item: var(--radius-xs);
+
+  --padding-menu-item-x: var(--spacing-250);
+  --padding-menu-item-y: var(--spacing-200);
+  --gap-menu-item: var(--spacing-200);
+
+  /* ===== MENU ITEM ICON ===== */
+  --text-menu-item-icon-size: var(--text-lg);
+  --color-menu-item-icon-fg: var(--color-fg-secondary);
+
+  /* ===== MENU SEPARATOR ===== */
+  --color-menu-separator-bg: var(--color-border-primary);
+  --height-menu-separator: 1px;
+  --margin-menu-separator: var(--spacing-200);
+
+  /* ===== MENU SUBMENU INDICATOR ===== */
+  --color-menu-submenu-indicator-fg: var(--color-fg-secondary);
+  --spacing-menu-submenu-indicator: var(--spacing-250);
+  --spacing-menu-submenu-offset: var(--spacing-200);
+
+  /* ===== MENU DISABLED STATE ===== */
+  --opacity-menu-disabled: 50%;
+}
+
+/* Semantic tokens for menu icons */
+@utility token-icon-menu-trigger {
+  @apply token-icon-chevron-down;
+}
+
+@utility token-icon-menu-submenu {
+  @apply token-icon-chevron-right;
+}
+
+@utility token-icon-menu-check {
+  @apply token-icon-check;
+}