@asafarim/design-tokens 0.1.0

package/dist/css/tokens.base.css

@@ -0,0 +1,121 @@
+:root {
+  --asm-font-family-primary: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --asm-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  --asm-font-weight-100: 100;
+  --asm-font-weight-200: 200;
+  --asm-font-weight-300: 300;
+  --asm-font-weight-400: 400;
+  --asm-font-weight-500: 500;
+  --asm-font-weight-600: 600;
+  --asm-font-weight-700: 700;
+  --asm-font-weight-800: 800;
+  --asm-font-weight-900: 900;
+
+  --asm-font-size-xs: 0.75rem;
+  --asm-font-size-sm: 0.875rem;
+  --asm-font-size-md: 1rem;
+  --asm-font-size-lg: 1.125rem;
+  --asm-font-size-xl: 1.25rem;
+  --asm-font-size-2xl: 1.5rem;
+  --asm-font-size-3xl: 1.875rem;
+  --asm-font-size-4xl: 2.25rem;
+  --asm-font-size-5xl: 3rem;
+  --asm-font-size-6xl: 3.75rem;
+
+  --asm-line-height-tight: 1.1;
+  --asm-line-height-normal: 1.4;
+  --asm-line-height-relaxed: 1.6;
+  --asm-line-height-h1: 1.05;
+  --asm-line-height-h2: 1.1;
+  --asm-line-height-h3: 1.15;
+  --asm-line-height-h4: 1.2;
+  --asm-line-height-h5: 1.25;
+  --asm-line-height-h6: 1.25;
+
+  --asm-letter-spacing-tight: -0.01em;
+  --asm-letter-spacing-normal: 0em;
+  --asm-letter-spacing-wide: 0.02em;
+
+  --asm-space-0: 0px;
+  --asm-space-1: 4px;
+  --asm-space-2: 8px;
+  --asm-space-3: 12px;
+  --asm-space-4: 16px;
+  --asm-space-5: 20px;
+  --asm-space-6: 24px;
+  --asm-space-8: 32px;
+  --asm-space-10: 40px;
+  --asm-space-12: 48px;
+  --asm-space-16: 64px;
+
+  --asm-space-page-padding-x: clamp(16px, 3vw, 32px);
+  --asm-space-page-padding-y: clamp(16px, 3vw, 40px);
+  --asm-space-section-gap: clamp(24px, 4vw, 64px);
+  --asm-space-component-gap: 16px;
+
+  --asm-grid-columns: 12;
+  --asm-grid-gutter: 24px;
+
+  --asm-container-xs: 480px;
+  --asm-container-sm: 640px;
+  --asm-container-md: 768px;
+  --asm-container-lg: 1024px;
+  --asm-container-xl: 1280px;
+  --asm-container-2xl: 1360px;
+
+  --asm-radius-sm: 6px;
+  --asm-radius-md: 10px;
+  --asm-radius-lg: 12px;
+  --asm-radius-xl: 16px;
+  --asm-radius-full: 9999px;
+
+  --asm-border-hairline: 1px;
+  --asm-border-thin: 2px;
+  --asm-border-thick: 3px;
+
+  --asm-effect-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
+  --asm-effect-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.10);
+  --asm-effect-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.14);
+  --asm-effect-shadow-xl: 0 24px 60px rgba(17, 24, 39, 0.18);
+
+  --asm-effect-blur-sm: 4px;
+  --asm-effect-blur-md: 8px;
+  --asm-effect-blur-lg: 16px;
+
+  --asm-motion-duration-fast: 120ms;
+  --asm-motion-duration-normal: 200ms;
+  --asm-motion-duration-slow: 320ms;
+
+  --asm-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --asm-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+  --asm-motion-easing-entrance: cubic-bezier(0, 0, 0, 1);
+  --asm-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  --asm-transition-fade: opacity var(--asm-motion-duration-normal) var(--asm-motion-easing-standard);
+  --asm-transition-slide: transform var(--asm-motion-duration-normal) var(--asm-motion-easing-standard);
+  --asm-transition-scale: transform var(--asm-motion-duration-fast) var(--asm-motion-easing-emphasized);
+
+  --asm-z-base: 0;
+  --asm-z-dropdown: 100;
+  --asm-z-sticky: 200;
+  --asm-z-overlay: 300;
+  --asm-z-modal: 400;
+  --asm-z-popover: 450;
+  --asm-z-tooltip: 500;
+  --asm-z-toast: 600;
+
+  --asm-icon-size-xs: 12px;
+  --asm-icon-size-sm: 16px;
+  --asm-icon-size-md: 20px;
+  --asm-icon-size-lg: 24px;
+  --asm-icon-size-xl: 28px;
+
+  --asm-icon-stroke-thin: 1;
+  --asm-icon-stroke-regular: 1.5;
+  --asm-icon-stroke-bold: 2;
+
+  --asm-density-factor: 1;
+  --asm-space-control-padding-y: 8px;
+  --asm-space-control-padding-x: 12px;
+}

package/dist/css/tokens.dark.css

@@ -0,0 +1,50 @@
+[data-theme="dark"] {
+  --asm-color-bg: #0B1220;
+  --asm-color-surface: #0F172A;
+  --asm-color-surface-muted: #111B2E;
+  --asm-color-panel: #0F172A;
+  --asm-color-modal: #0F172A;
+
+  --asm-color-text: #E5E7EB;
+  --asm-color-text-muted: #9CA3AF;
+  --asm-color-border: #1F2937;
+
+  --asm-color-brand-primary-50: #EEF2FF;
+  --asm-color-brand-primary-500: #3A5AFE;
+  --asm-color-brand-primary-600: #3A5AFE;
+  --asm-color-brand-primary-700: #304FFE;
+
+  --asm-color-semantic-success: #22C55E;
+  --asm-color-semantic-warning: #FBBF24;
+  --asm-color-semantic-error: #F87171;
+  --asm-color-semantic-info: #38BDF8;
+
+  --asm-color-button-primary-bg: #3A5AFE;
+  --asm-color-button-primary-bg-hover: #304FFE;
+  --asm-color-button-primary-bg-active: #304FFE;
+  --asm-color-button-primary-text: #FFFFFF;
+
+  --asm-color-button-secondary-bg: #111B2E;
+  --asm-color-button-secondary-text: #E5E7EB;
+
+  --asm-color-button-ghost-bg-hover: rgba(229, 231, 235, 0.08);
+
+  --asm-color-button-destructive-bg: #F87171;
+  --asm-color-button-destructive-text: #0B1220;
+
+  --asm-color-button-disabled-bg: #1F2937;
+  --asm-color-button-disabled-text: #9CA3AF;
+
+  --asm-color-input-bg: #0B1220;
+  --asm-color-input-text: #E5E7EB;
+  --asm-color-input-border: #1F2937;
+  --asm-color-input-border-hover: #374151;
+  --asm-color-input-border-focus: #3A5AFE;
+  --asm-color-input-placeholder: #9CA3AF;
+  --asm-color-input-error-border: #F87171;
+  --asm-color-input-success-border: #22C55E;
+
+  --asm-color-focus-ring: #3A5AFE;
+
+  --asm-color-overlay-scrim: rgba(17, 24, 39, 0.64);
+}

package/dist/css/tokens.density.comfortable.css

@@ -0,0 +1,6 @@
+[data-density="comfortable"] {
+  --asm-density-factor: 1.05;
+  --asm-space-component-gap: 18px;
+  --asm-space-control-padding-y: 10px;
+  --asm-space-control-padding-x: 14px;
+}

package/dist/css/tokens.density.compact.css

@@ -0,0 +1,6 @@
+[data-density="compact"] {
+  --asm-density-factor: 0.9;
+  --asm-space-component-gap: 12px;
+  --asm-space-control-padding-y: 6px;
+  --asm-space-control-padding-x: 10px;
+}

package/dist/css/tokens.high-contrast.css

@@ -0,0 +1,50 @@
+[data-contrast="high"] {
+  --asm-color-bg: #000000;
+  --asm-color-surface: #000000;
+  --asm-color-surface-muted: #000000;
+  --asm-color-panel: #000000;
+  --asm-color-modal: #000000;
+
+  --asm-color-text: #FFFFFF;
+  --asm-color-text-muted: #FFFFFF;
+  --asm-color-border: #FFFFFF;
+
+  --asm-color-brand-primary-50: #FFFFFF;
+  --asm-color-brand-primary-500: #FFFFFF;
+  --asm-color-brand-primary-600: #FFFFFF;
+  --asm-color-brand-primary-700: #FFFFFF;
+
+  --asm-color-semantic-success: #00FF00;
+  --asm-color-semantic-warning: #FFFF00;
+  --asm-color-semantic-error: #FF0000;
+  --asm-color-semantic-info: #00FFFF;
+
+  --asm-color-button-primary-bg: #FFFFFF;
+  --asm-color-button-primary-bg-hover: #FFFFFF;
+  --asm-color-button-primary-bg-active: #FFFFFF;
+  --asm-color-button-primary-text: #000000;
+
+  --asm-color-button-secondary-bg: #000000;
+  --asm-color-button-secondary-text: #FFFFFF;
+
+  --asm-color-button-ghost-bg-hover: #FFFFFF;
+
+  --asm-color-button-destructive-bg: #FF0000;
+  --asm-color-button-destructive-text: #000000;
+
+  --asm-color-button-disabled-bg: #000000;
+  --asm-color-button-disabled-text: #FFFFFF;
+
+  --asm-color-input-bg: #000000;
+  --asm-color-input-text: #FFFFFF;
+  --asm-color-input-border: #FFFFFF;
+  --asm-color-input-border-hover: #FFFFFF;
+  --asm-color-input-border-focus: #FFFFFF;
+  --asm-color-input-placeholder: #FFFFFF;
+  --asm-color-input-error-border: #FF0000;
+  --asm-color-input-success-border: #00FF00;
+
+  --asm-color-focus-ring: #FFFFFF;
+
+  --asm-color-overlay-scrim: rgba(255, 255, 255, 0.9);
+}

package/dist/css/tokens.light.css

@@ -0,0 +1,50 @@
+[data-theme="light"] {
+  --asm-color-bg: #F9FAFB;
+  --asm-color-surface: #FFFFFF;
+  --asm-color-surface-muted: #F3F4F6;
+  --asm-color-panel: #FFFFFF;
+  --asm-color-modal: #FFFFFF;
+
+  --asm-color-text: #111827;
+  --asm-color-text-muted: #6B7280;
+  --asm-color-border: #D1D5DB;
+
+  --asm-color-brand-primary-50: #EEF2FF;
+  --asm-color-brand-primary-500: #3A5AFE;
+  --asm-color-brand-primary-600: #304FFE;
+  --asm-color-brand-primary-700: #1E40FF;
+
+  --asm-color-semantic-success: #16A34A;
+  --asm-color-semantic-warning: #F59E0B;
+  --asm-color-semantic-error: #EF4444;
+  --asm-color-semantic-info: #0EA5E9;
+
+  --asm-color-button-primary-bg: #304FFE;
+  --asm-color-button-primary-bg-hover: #1E40FF;
+  --asm-color-button-primary-bg-active: #1E40FF;
+  --asm-color-button-primary-text: #FFFFFF;
+
+  --asm-color-button-secondary-bg: #FFFFFF;
+  --asm-color-button-secondary-text: #111827;
+
+  --asm-color-button-ghost-bg-hover: rgba(17, 24, 39, 0.06);
+
+  --asm-color-button-destructive-bg: #EF4444;
+  --asm-color-button-destructive-text: #FFFFFF;
+
+  --asm-color-button-disabled-bg: #D1D5DB;
+  --asm-color-button-disabled-text: #374151;
+
+  --asm-color-input-bg: #FFFFFF;
+  --asm-color-input-text: #111827;
+  --asm-color-input-border: #D1D5DB;
+  --asm-color-input-border-hover: #6B7280;
+  --asm-color-input-border-focus: #304FFE;
+  --asm-color-input-placeholder: #6B7280;
+  --asm-color-input-error-border: #EF4444;
+  --asm-color-input-success-border: #16A34A;
+
+  --asm-color-focus-ring: #3A5AFE;
+
+  --asm-color-overlay-scrim: rgba(17, 24, 39, 0.48);
+}

package/dist/css/tokens.rtl.css

@@ -0,0 +1,3 @@
+[dir="rtl"] {
+  direction: rtl;
+}

package/dist/css/tokens.utilities.css

@@ -0,0 +1,16 @@
+:root {
+  color-scheme: light dark;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --asm-motion-duration-fast: 0ms;
+    --asm-motion-duration-normal: 0ms;
+    --asm-motion-duration-slow: 0ms;
+  }
+}
+
+:where([data-theme]) {
+  background-color: var(--asm-color-bg);
+  color: var(--asm-color-text);
+}