@ztwoint/z-ui 0.1.26 → 0.1.28

package/dist/css/config/colors/semantic-colors.css

@@ -0,0 +1,356 @@
+/* Semantic Colors - Design System Foundation */
+
+:root {
+  /* Background Colors */
+  --background-default: var(--neutral-0);
+  --background-on-top: var(--neutral-0);
+  --background-light: var(--neutral-25);
+  --background-medium: var(--neutral-50);
+  --background-high: var(--neutral-100);
+  --background-inverted-elevated: rgba(255, 255, 255, 0.1);
+  --background-attention: var(--neutral-200);
+  --background-brand: #001534;
+
+  /* Surface Colors - Neutral */
+  --surface-neutral-default: var(--neutral-0);
+  --surface-neutral-hover: var(--neutral-75);
+  --surface-neutral-pressed: var(--neutral-100);
+  --surface-neutral-focused: var(--neutral-75);
+  --surface-neutral-disabled: var(--neutral-100);
+
+  /* Surface Colors - Accent */
+  --surface-accent-default: var(--blue-600);
+  --surface-accent-hover: var(--blue-800);
+  --surface-accent-pressed: var(--blue-400);
+  --surface-accent-disabled: var(--neutral-100);
+
+  /* Surface Colors - Danger */
+  --surface-danger-default: var(--red-600);
+  --surface-danger-hover: var(--red-800);
+  --surface-danger-pressed: var(--red-400);
+  --surface-danger-disabled: var(--neutral-100);
+
+  /* Surface Colors - Success */
+  --surface-success-default: var(--green-600);
+  --surface-success-hover: var(--green-800);
+  --surface-success-pressed: var(--green-400);
+  --surface-success-disabled: var(--neutral-100);
+
+  /* Surface Colors - Warning */
+  --surface-warning-default: var(--amber-600);
+  --surface-warning-hover: var(--amber-800);
+  --surface-warning-pressed: var(--amber-400);
+  --surface-warning-disabled: var(--neutral-100);
+
+  /* Surface Colors - Purple */
+  --surface-purple-default: var(--violet-600);
+  --surface-purple-hover: var(--violet-700);
+  --surface-purple-pressed: var(--violet-400);
+  --surface-purple-disabled: var(--neutral-100);
+
+  /* Surface Colors - Inverted */
+  --surface-inverted-default: var(--alpha-two-150);
+  --surface-inverted-hover: var(--alpha-two-300);
+  --surface-inverted-pressed: var(--neutral-0);
+  --surface-inverted-disabled: var(--neutral-100);
+
+  /* Stroke Colors - Solid */
+  --stroke-solid-light: var(--neutral-100);
+  --stroke-solid-medium: var(--neutral-150);
+  --stroke-solid-high: var(--neutral-200);
+  --stroke-solid-hover: var(--neutral-300);
+  --stroke-solid-active: var(--blue-600);
+  --stroke-solid-attention: var(--neutral-950);
+  --stroke-solid-highlight: var(--blue-300);
+
+  /* Stroke Colors - Transparent */
+  --stroke-transparent-light: var(--alpha-one-100);
+  --stroke-transparent-medium: var(--alpha-one-150);
+  --stroke-transparent-high: var(--alpha-one-200);
+  --stroke-transparent-hover: var(--alpha-one-300);
+  --stroke-transparent-active: var(--blue-600);
+  --stroke-transparent-attention: var(--neutral-950);
+  --stroke-transparent-highlight: var(--blue-300);
+
+  /* Stroke Colors - Inverted */
+  --stroke-inverted-default: var(--alpha-two-100);
+  --stroke-inverted-hover: var(--alpha-two-300);
+  --stroke-inverted-active: var(--blue-500);
+  --stroke-inverted-attention: var(--amber-500);
+  --stroke-inverted-highlight: var(--blue-200);
+
+  /* Overlay */
+  --overlay-default: var(--alpha-one-500);
+
+  /* Text Colors - Neutral */
+  --text-neutral-primary: var(--neutral-950);
+  --text-neutral-secondary: var(--neutral-600);
+  --text-neutral-muted: var(--neutral-400);
+
+  /* Text Colors - Inverted */
+  --text-inverted-primary: var(--neutral-0);
+  --text-inverted-secondary: var(--alpha-two-600);
+  --text-inverted-static: var(--neutral-0);
+
+  /* Text Colors - Brand */
+  --text-brand-primary: var(--blue-950);
+  --text-brand-secondary: var(--blue-600);
+
+  /* Text Colors - Success */
+  --text-success-primary: var(--green-950);
+  --text-success-secondary: var(--green-600);
+
+  /* Text Colors - Danger */
+  --text-danger-primary: var(--red-950);
+  --text-danger-secondary: var(--red-600);
+
+  /* Text Colors - Warning */
+  --text-warning-primary: var(--amber-950);
+  --text-warning-secondary: var(--amber-600);
+
+  /* Text Colors - Purple */
+  --text-purple-primary: var(--violet-950);
+  --text-purple-secondary: var(--violet-600);
+
+  /* Text Colors - Body */
+  --text-body-primary: var(--neutral-950);
+  --text-body-long: var(--neutral-800);
+  --text-body-short: var(--neutral-700);
+}
+
+.dark {
+  /* Background Colors - Dark Mode */
+  --background-default: var(--neutral-0);
+  --background-on-top: var(--neutral-50);
+  --background-light: var(--neutral-25);
+  --background-medium: var(--neutral-25);
+  --background-high: var(--neutral-100);
+  --background-inverted-elevated: rgba(20, 20, 20, 0.1);
+  --background-attention: var(--neutral-200);
+  --background-brand: #0f0f0f;
+
+  /* Surface Colors - Neutral - Dark Mode */
+  --surface-neutral-default: var(--neutral-0);
+  --surface-neutral-hover: var(--neutral-75);
+  --surface-neutral-pressed: var(--neutral-100);
+  --surface-neutral-focused: var(--neutral-75);
+  --surface-neutral-disabled: var(--neutral-50);
+
+  /* Surface Colors - Accent - Dark Mode */
+  --surface-accent-default: var(--blue-500);
+  --surface-accent-hover: var(--blue-700);
+  --surface-accent-pressed: var(--blue-400);
+  --surface-accent-disabled: var(--neutral-50);
+
+  /* Surface Colors - Danger - Dark Mode */
+  --surface-danger-default: var(--red-500);
+  --surface-danger-hover: var(--red-700);
+  --surface-danger-pressed: var(--red-400);
+  --surface-danger-disabled: var(--neutral-50);
+
+  /* Surface Colors - Success - Dark Mode */
+  --surface-success-default: var(--green-500);
+  --surface-success-hover: var(--green-700);
+  --surface-success-pressed: var(--green-400);
+  --surface-success-disabled: var(--neutral-50);
+
+  /* Surface Colors - Warning - Dark Mode */
+  --surface-warning-default: var(--amber-500);
+  --surface-warning-hover: var(--amber-700);
+  --surface-warning-pressed: var(--amber-400);
+  --surface-warning-disabled: var(--neutral-100);
+
+  /* Surface Colors - Purple - Dark Mode */
+  --surface-purple-default: var(--violet-500);
+  --surface-purple-hover: var(--violet-700);
+  --surface-purple-pressed: var(--violet-400);
+  --surface-purple-disabled: var(--neutral-50);
+
+  /* Surface Colors - Inverted - Dark Mode */
+  --surface-inverted-default: var(--neutral-150);
+  --surface-inverted-hover: var(--neutral-300);
+  --surface-inverted-pressed: var(--neutral-0);
+  --surface-inverted-disabled: var(--neutral-100);
+
+  /* Stroke Colors - Solid - Dark Mode */
+  --stroke-solid-light: var(--neutral-75);
+  --stroke-solid-medium: var(--neutral-100);
+  --stroke-solid-high: var(--neutral-150);
+  --stroke-solid-hover: var(--neutral-200);
+  --stroke-solid-active: var(--blue-500);
+  --stroke-solid-attention: var(--neutral-950);
+  --stroke-solid-highlight: var(--blue-200);
+
+  /* Stroke Colors - Transparent - Dark Mode */
+  --stroke-transparent-light: var(--neutral-75);
+  --stroke-transparent-medium: var(--neutral-100);
+  --stroke-transparent-high: var(--neutral-150);
+  --stroke-transparent-hover: var(--neutral-200);
+  --stroke-transparent-active: var(--blue-500);
+  --stroke-transparent-attention: var(--neutral-950);
+  --stroke-transparent-highlight: var(--blue-200);
+
+  /* Stroke Colors - Inverted - Dark Mode */
+  --stroke-inverted-default: var(--neutral-150);
+  --stroke-inverted-hover: var(--neutral-150);
+  --stroke-inverted-active: var(--neutral-150);
+  --stroke-inverted-attention: var(--neutral-150);
+  --stroke-inverted-highlight: var(--neutral-150);
+
+  /* Overlay - Dark Mode */
+  --overlay-default: var(--neutral-50);
+
+  /* Text Colors - Neutral - Dark Mode */
+  --text-neutral-primary: var(--neutral-950);
+  --text-neutral-secondary: var(--neutral-500);
+  --text-neutral-muted: var(--neutral-400);
+
+  /* Text Colors - Inverted - Dark Mode */
+  --text-inverted-primary: var(--neutral-0);
+  --text-inverted-secondary: var(--alpha-one-600);
+  --text-inverted-static: var(--neutral-950);
+
+  /* Text Colors - Brand - Dark Mode */
+  --text-brand-primary: var(--blue-950);
+  --text-brand-secondary: var(--blue-600);
+
+  /* Text Colors - Success - Dark Mode */
+  --text-success-primary: var(--green-950);
+  --text-success-secondary: var(--green-600);
+
+  /* Text Colors - Danger - Dark Mode */
+  --text-danger-primary: var(--red-950);
+  --text-danger-secondary: var(--red-600);
+
+  /* Text Colors - Warning - Dark Mode */
+  --text-warning-primary: var(--amber-950);
+  --text-warning-secondary: var(--amber-600);
+
+  /* Text Colors - Purple - Dark Mode */
+  --text-purple-primary: var(--violet-950);
+  --text-purple-secondary: var(--violet-600);
+
+  /* Text Colors - Body - Dark Mode */
+  --text-body-primary: var(--neutral-0);
+  --text-body-long: var(--neutral-800);
+  --text-body-short: var(--neutral-700);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+  /* Background Colors */
+  --color-background-default: var(--background-default);
+  --color-background-on-top: var(--background-on-top);
+  --color-background-light: var(--background-light);
+  --color-background-medium: var(--background-medium);
+  --color-background-high: var(--background-high);
+  --color-background-inverted-elevated: var(--background-inverted-elevated);
+  --color-background-attention: var(--background-attention);
+  --color-background-brand: var(--background-brand);
+
+  /* Surface Colors - Neutral */
+  --color-surface-neutral-default: var(--surface-neutral-default);
+  --color-surface-neutral-hover: var(--surface-neutral-hover);
+  --color-surface-neutral-pressed: var(--surface-neutral-pressed);
+  --color-surface-neutral-focused: var(--surface-neutral-focused);
+  --color-surface-neutral-disabled: var(--surface-neutral-disabled);
+
+  /* Surface Colors - Accent */
+  --color-surface-accent-default: var(--surface-accent-default);
+  --color-surface-accent-hover: var(--surface-accent-hover);
+  --color-surface-accent-pressed: var(--surface-accent-pressed);
+  --color-surface-accent-disabled: var(--surface-accent-disabled);
+
+  /* Surface Colors - Danger */
+  --color-surface-danger-default: var(--surface-danger-default);
+  --color-surface-danger-hover: var(--surface-danger-hover);
+  --color-surface-danger-pressed: var(--surface-danger-pressed);
+  --color-surface-danger-disabled: var(--surface-danger-disabled);
+
+  /* Surface Colors - Success */
+  --color-surface-success-default: var(--surface-success-default);
+  --color-surface-success-hover: var(--surface-success-hover);
+  --color-surface-success-pressed: var(--surface-success-pressed);
+  --color-surface-success-disabled: var(--surface-success-disabled);
+
+  /* Surface Colors - Warning */
+  --color-surface-warning-default: var(--surface-warning-default);
+  --color-surface-warning-hover: var(--surface-warning-hover);
+  --color-surface-warning-pressed: var(--surface-warning-pressed);
+  --color-surface-warning-disabled: var(--surface-warning-disabled);
+
+  /* Surface Colors - Purple */
+  --color-surface-purple-default: var(--surface-purple-default);
+  --color-surface-purple-hover: var(--surface-purple-hover);
+  --color-surface-purple-pressed: var(--surface-purple-pressed);
+  --color-surface-purple-disabled: var(--surface-purple-disabled);
+
+  /* Surface Colors - Inverted */
+  --color-surface-inverted-default: var(--surface-inverted-default);
+  --color-surface-inverted-hover: var(--surface-inverted-hover);
+  --color-surface-inverted-pressed: var(--surface-inverted-pressed);
+  --color-surface-inverted-disabled: var(--surface-inverted-disabled);
+
+  /* Stroke Colors - Solid */
+  --color-stroke-solid-light: var(--stroke-solid-light);
+  --color-stroke-solid-medium: var(--stroke-solid-medium);
+  --color-stroke-solid-high: var(--stroke-solid-high);
+  --color-stroke-solid-hover: var(--stroke-solid-hover);
+  --color-stroke-solid-active: var(--stroke-solid-active);
+  --color-stroke-solid-attention: var(--stroke-solid-attention);
+  --color-stroke-solid-highlight: var(--stroke-solid-highlight);
+
+  /* Stroke Colors - Transparent */
+  --color-stroke-transparent-light: var(--stroke-transparent-light);
+  --color-stroke-transparent-medium: var(--stroke-transparent-medium);
+  --color-stroke-transparent-high: var(--stroke-transparent-high);
+  --color-stroke-transparent-hover: var(--stroke-transparent-hover);
+  --color-stroke-transparent-active: var(--stroke-transparent-active);
+  --color-stroke-transparent-attention: var(--stroke-transparent-attention);
+  --color-stroke-transparent-highlight: var(--stroke-transparent-highlight);
+
+  /* Stroke Colors - Inverted */
+  --color-stroke-inverted-default: var(--stroke-inverted-default);
+  --color-stroke-inverted-hover: var(--stroke-inverted-hover);
+  --color-stroke-inverted-active: var(--stroke-inverted-active);
+  --color-stroke-inverted-attention: var(--stroke-inverted-attention);
+  --color-stroke-inverted-highlight: var(--stroke-inverted-highlight);
+
+  /* Overlay */
+  --color-overlay-default: var(--overlay-default);
+
+  /* Text Colors - Neutral */
+  --color-text-neutral-primary: var(--text-neutral-primary);
+  --color-text-neutral-secondary: var(--text-neutral-secondary);
+  --color-text-neutral-muted: var(--text-neutral-muted);
+
+  /* Text Colors - Inverted */
+  --color-text-inverted-primary: var(--text-inverted-primary);
+  --color-text-inverted-secondary: var(--text-inverted-secondary);
+  --color-text-inverted-static: var(--text-inverted-static);
+
+  /* Text Colors - Brand */
+  --color-text-brand-primary: var(--text-brand-primary);
+  --color-text-brand-secondary: var(--text-brand-secondary);
+
+  /* Text Colors - Success */
+  --color-text-success-primary: var(--text-success-primary);
+  --color-text-success-secondary: var(--text-success-secondary);
+
+  /* Text Colors - Danger */
+  --color-text-danger-primary: var(--text-danger-primary);
+  --color-text-danger-secondary: var(--text-danger-secondary);
+
+  /* Text Colors - Warning */
+  --color-text-warning-primary: var(--text-warning-primary);
+  --color-text-warning-secondary: var(--text-warning-secondary);
+
+  /* Text Colors - Purple */
+  --color-text-purple-primary: var(--text-purple-primary);
+  --color-text-purple-secondary: var(--text-purple-secondary);
+
+  /* Text Colors - Body */
+  --color-text-body-primary: var(--text-body-primary);
+  --color-text-body-long: var(--text-body-long);
+  --color-text-body-short: var(--text-body-short);
+}

package/dist/css/config/components/button.css

@@ -0,0 +1,152 @@
+/* Button Component Colors - Design System Foundation */
+
+:root {
+  /* Button Primary - Neutral - Surface */
+  --button-primary-neutral-surface-default: var(--neutral-950);
+  --button-primary-neutral-surface-hover: var(--neutral-900);
+  --button-primary-neutral-surface-pressed: var(--neutral-500);
+  --button-primary-neutral-surface-disabled: var(--neutral-50);
+
+  /* Button Primary - Neutral - Stroke */
+  --button-primary-neutral-stroke-default: transparent;
+  --button-primary-neutral-stroke-hover: transparent;
+  --button-primary-neutral-stroke-pressed: transparent;
+  --button-primary-neutral-stroke-disabled: var(--neutral-100);
+
+  /* Button Primary - Brand - Surface */
+  --button-primary-brand-surface-default: var(--blue-600);
+  --button-primary-brand-surface-hover: var(--blue-700);
+  --button-primary-brand-surface-pressed: var(--blue-500);
+  --button-primary-brand-surface-disabled: var(--neutral-50);
+
+  /* Button Primary - Brand - Stroke */
+  --button-primary-brand-stroke-default: transparent;
+  --button-primary-brand-stroke-hover: transparent;
+  --button-primary-brand-stroke-pressed: transparent;
+  --button-primary-brand-stroke-disabled: var(--neutral-100);
+
+  /* Button Primary - Danger - Surface */
+  --button-primary-danger-surface-default: var(--red-600);
+  --button-primary-danger-surface-hover: var(--red-700);
+  --button-primary-danger-surface-pressed: var(--red-500);
+  --button-primary-danger-surface-disabled: var(--neutral-50);
+
+  /* Button Primary - Danger - Stroke */
+  --button-primary-danger-stroke-default: transparent;
+  --button-primary-danger-stroke-hover: transparent;
+  --button-primary-danger-stroke-pressed: transparent;
+  --button-primary-danger-stroke-disabled: var(--neutral-100);
+
+  /* Button Secondary - Surface */
+  --button-secondary-surface-default: var(--neutral-00);
+  --button-secondary-surface-hover: var(--neutral-50);
+  --button-secondary-surface-pressed: var(--neutral-75);
+  --button-secondary-surface-disabled: var(--neutral-50);
+
+  /* Button Secondary - Stroke */
+  --button-secondary-stroke-default: var(--neutral-150);
+  --button-secondary-stroke-hover: var(--neutral-200);
+  --button-secondary-stroke-pressed: transparent;
+  --button-secondary-stroke-disabled: var(--neutral-100);
+}
+
+.dark {
+  /* Button Primary - Neutral - Surface - Dark Mode */
+  --button-primary-neutral-surface-default: var(--neutral-950);
+  --button-primary-neutral-surface-hover: var(--neutral-800);
+  --button-primary-neutral-surface-pressed: var(--neutral-500);
+  --button-primary-neutral-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  /* Button Primary - Neutral - Stroke - Dark Mode */
+  --button-primary-neutral-stroke-default: transparent;
+  --button-primary-neutral-stroke-hover: transparent;
+  --button-primary-neutral-stroke-pressed: transparent;
+  --button-primary-neutral-stroke-disabled: var(--neutral-50);
+
+  /* Button Primary - Brand - Surface - Dark Mode */
+  --button-primary-brand-surface-default: var(--blue-500);
+  --button-primary-brand-surface-hover: var(--blue-700);
+  --button-primary-brand-surface-pressed: var(--blue-400);
+  --button-primary-brand-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  /* Button Primary - Brand - Stroke - Dark Mode */
+  --button-primary-brand-stroke-default: transparent;
+  --button-primary-brand-stroke-hover: transparent;
+  --button-primary-brand-stroke-pressed: transparent;
+  --button-primary-brand-stroke-disabled: var(--neutral-50);
+
+  /* Button Primary - Danger - Surface - Dark Mode */
+  --button-primary-danger-surface-default: var(--red-500);
+  --button-primary-danger-surface-hover: var(--red-700);
+  --button-primary-danger-surface-pressed: var(--red-500);
+  --button-primary-danger-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  /* Button Primary - Danger - Stroke - Dark Mode */
+  --button-primary-danger-stroke-default: transparent;
+  --button-primary-danger-stroke-hover: transparent;
+  --button-primary-danger-stroke-pressed: transparent;
+  --button-primary-danger-stroke-disabled: var(--neutral-50);
+
+  /* Button Secondary - Surface - Dark Mode */
+  --button-secondary-surface-default: var(--neutral-50);
+  --button-secondary-surface-hover: var(--neutral-150);
+  --button-secondary-surface-pressed: var(--neutral-75);
+  --button-secondary-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  /* Button Secondary - Stroke - Dark Mode */
+  --button-secondary-stroke-default: var(--neutral-100);
+  --button-secondary-stroke-hover: var(--neutral-200);
+  --button-secondary-stroke-pressed: transparent;
+  --button-secondary-stroke-disabled: var(--neutral-50);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+  /* Button Primary - Neutral - Surface */
+  --color-button-primary-neutral-surface-default: var(--button-primary-neutral-surface-default);
+  --color-button-primary-neutral-surface-hover: var(--button-primary-neutral-surface-hover);
+  --color-button-primary-neutral-surface-pressed: var(--button-primary-neutral-surface-pressed);
+  --color-button-primary-neutral-surface-disabled: var(--button-primary-neutral-surface-disabled);
+
+  /* Button Primary - Neutral - Stroke */
+  --color-button-primary-neutral-stroke-default: var(--button-primary-neutral-stroke-default);
+  --color-button-primary-neutral-stroke-hover: var(--button-primary-neutral-stroke-hover);
+  --color-button-primary-neutral-stroke-pressed: var(--button-primary-neutral-stroke-pressed);
+  --color-button-primary-neutral-stroke-disabled: var(--button-primary-neutral-stroke-disabled);
+
+  /* Button Primary - Brand - Surface */
+  --color-button-primary-brand-surface-default: var(--button-primary-brand-surface-default);
+  --color-button-primary-brand-surface-hover: var(--button-primary-brand-surface-hover);
+  --color-button-primary-brand-surface-pressed: var(--button-primary-brand-surface-pressed);
+  --color-button-primary-brand-surface-disabled: var(--button-primary-brand-surface-disabled);
+
+  /* Button Primary - Brand - Stroke */
+  --color-button-primary-brand-stroke-default: var(--button-primary-brand-stroke-default);
+  --color-button-primary-brand-stroke-hover: var(--button-primary-brand-stroke-hover);
+  --color-button-primary-brand-stroke-pressed: var(--button-primary-brand-stroke-pressed);
+  --color-button-primary-brand-stroke-disabled: var(--button-primary-brand-stroke-disabled);
+
+  /* Button Primary - Danger - Surface */
+  --color-button-primary-danger-surface-default: var(--button-primary-danger-surface-default);
+  --color-button-primary-danger-surface-hover: var(--button-primary-danger-surface-hover);
+  --color-button-primary-danger-surface-pressed: var(--button-primary-danger-surface-pressed);
+  --color-button-primary-danger-surface-disabled: var(--button-primary-danger-surface-disabled);
+
+  /* Button Primary - Danger - Stroke */
+  --color-button-primary-danger-stroke-default: var(--button-primary-danger-stroke-default);
+  --color-button-primary-danger-stroke-hover: var(--button-primary-danger-stroke-hover);
+  --color-button-primary-danger-stroke-pressed: var(--button-primary-danger-stroke-pressed);
+  --color-button-primary-danger-stroke-disabled: var(--button-primary-danger-stroke-disabled);
+
+  /* Button Secondary - Surface */
+  --color-button-secondary-surface-default: var(--button-secondary-surface-default);
+  --color-button-secondary-surface-hover: var(--button-secondary-surface-hover);
+  --color-button-secondary-surface-pressed: var(--button-secondary-surface-pressed);
+  --color-button-secondary-surface-disabled: var(--button-secondary-surface-disabled);
+
+  /* Button Secondary - Stroke */
+  --color-button-secondary-stroke-default: var(--button-secondary-stroke-default);
+  --color-button-secondary-stroke-hover: var(--button-secondary-stroke-hover);
+  --color-button-secondary-stroke-pressed: var(--button-secondary-stroke-pressed);
+  --color-button-secondary-stroke-disabled: var(--button-secondary-stroke-disabled);
+}

package/dist/css/config/components/index.css

@@ -0,0 +1 @@
+@import './button.css';

package/dist/css/config/config-deprecated.css

@@ -0,0 +1,41 @@
+/* Colors */
+@import './colors/defaults.css';
+@import './colors/backgrounds.css';
+@import './colors/surfaces.css';
+@import './colors/stroke.css';
+@import './colors/overlay.css';
+@import './colors/icons.css';
+@import './colors/text.css';
+@import './typography/typography.css';
+
+/* TODO Drop Shadow */
+
+/* Components Colors */
+@import './colors/components/button.css';
+@import './colors/components/tab.css';
+@import './colors/components/alert.css';
+@import './colors/components/select.css';
+
+@theme {
+  --font-family-sans: 'Inter Variable', sans-serif;
+  --font-family-display: 'Inter Variable', sans-serif;
+}
+
+/* Base styles to ensure Inter is applied globally */
+@layer base {
+  html {
+    font-family: var(--font-family-sans);
+  }
+
+  body {
+    font-family: var(--font-family-sans);
+    -webkit-font-smoothing: antialiased;
+    /* Safari and Chrome  on macOS */
+    -moz-osx-font-smoothing: grayscale;
+    /* Firefox on macOS */
+  }
+
+  * {
+    font-family: inherit;
+  }
+}

package/dist/css/config/config.css

@@ -1,21 +1,3 @@
-/* Colors */
-@import './colors/defaults.css';
-@import './colors/backgrounds.css';
-@import './colors/surfaces.css';
-@import './colors/stroke.css';
-@import './colors/overlay.css';
-@import './colors/icons.css';
-@import './colors/text.css';
-@import './typography/typography.css';
-
-/* TODO Drop Shadow */
-
-/* Components Colors */
-@import './colors/components/button.css';
-@import './colors/components/tab.css';
-@import './colors/components/alert.css';
-@import './colors/components/select.css';
-
 @theme {
   --font-family-sans: 'Inter Variable', sans-serif;
   --font-family-display: 'Inter Variable', sans-serif;
@@ -39,3 +21,7 @@
     font-family: inherit;
   }
 }
+@import './config-deprecated.css';
+@import './colors/defaults.css';
+@import './colors/semantic-colors.css';
+@import './typography/typography.css';

package/dist/css/config/typography/2xl.css

@@ -55,6 +55,7 @@
   line-height: 1.5rem;
   letter-spacing: -0.05rem;
   font-weight: 400;
+  overflow-y: visible;
 }
 
 .leading-none-medium-2xl {
@@ -62,6 +63,7 @@
   line-height: 1.5rem;
   letter-spacing: -0.05rem;
   font-weight: 500;
+  overflow-y: visible;
 }
 
 .leading-none-semibold-2xl {
@@ -69,6 +71,7 @@
   line-height: 1.5rem;
   letter-spacing: -0.05rem;
   font-weight: 600;
+  overflow-y: visible;
 }
 
 .leading-none-bold-2xl {
@@ -76,6 +79,7 @@
   line-height: 1.5rem;
   letter-spacing: -0.05rem;
   font-weight: 700;
+  overflow-y: visible;
 }
 
 .leading-none-italic-2xl {
@@ -83,6 +87,7 @@
   line-height: 1.5rem;
   letter-spacing: -0.05rem;
   font-style: italic;
+  overflow-y: visible;
 }
 
 .leading-none-underlined-2xl {
@@ -90,6 +95,7 @@
   line-height: 1.5rem;
   letter-spacing: -0.05rem;
   text-decoration: underline;
+  overflow-y: visible;
 }
 
 .leading-none-strikethrough-2xl {
@@ -97,4 +103,5 @@
   line-height: 1.5rem;
   letter-spacing: -0.05rem;
   text-decoration: line-through;
+  overflow-y: visible;
 }

package/dist/css/config/typography/3xl.css

@@ -55,6 +55,7 @@
   line-height: 2rem;
   letter-spacing: -0.1rem;
   font-weight: 400;
+  overflow-y: visible;
 }
 
 .leading-none-medium-3xl {
@@ -62,6 +63,7 @@
   line-height: 2rem;
   letter-spacing: -0.1rem;
   font-weight: 500;
+  overflow-y: visible;
 }
 
 .leading-none-semibold-3xl {
@@ -69,6 +71,7 @@
   line-height: 2rem;
   letter-spacing: -0.1rem;
   font-weight: 600;
+  overflow-y: visible;
 }
 
 .leading-none-bold-3xl {
@@ -76,6 +79,7 @@
   line-height: 2rem;
   letter-spacing: -0.1rem;
   font-weight: 700;
+  overflow-y: visible;
 }
 
 .leading-none-italic-3xl {
@@ -83,6 +87,7 @@
   line-height: 2rem;
   letter-spacing: -0.1rem;
   font-style: italic;
+  overflow-y: visible;
 }
 
 .leading-none-underlined-3xl {
@@ -90,6 +95,7 @@
   line-height: 2rem;
   letter-spacing: -0.1rem;
   text-decoration: underline;
+  overflow-y: visible;
 }
 
 .leading-none-strikethrough-3xl {
@@ -97,4 +103,5 @@
   line-height: 2rem;
   letter-spacing: -0.1rem;
   text-decoration: line-through;
+  overflow-y: visible;
 }