@syncupsuite/themes 0.3.0 → 0.4.0

package/src/swiss-modernist/tailwind.css

@@ -0,0 +1,451 @@
+@import "tailwindcss";
+
+@theme {
+  /* --- Colors --- */
+  /* Himmelblau 50 */
+  --color-himmelblau-50: #E9F7FF;
+  /* Himmelblau 100 */
+  --color-himmelblau-100: #C5DAF3;
+  /* Himmelblau 200 */
+  --color-himmelblau-200: #A2BFE0;
+  /* Himmelblau 300 */
+  --color-himmelblau-300: #7FA3CC;
+  /* Himmelblau 400 */
+  --color-himmelblau-400: #5D88B9;
+  /* Himmelblau 500 */
+  --color-himmelblau-500: #3B6EA5;
+  /* Himmelblau 600 */
+  --color-himmelblau-600: #245180;
+  /* Himmelblau 700 */
+  --color-himmelblau-700: #0D355C;
+  /* Himmelblau 800 */
+  --color-himmelblau-800: #001B3B;
+  /* Himmelblau 900 */
+  --color-himmelblau-900: #00041C;
+  /* Rotkreuz 50 */
+  --color-rotkreuz-50: #FFE9E4;
+  /* Rotkreuz 100 */
+  --color-rotkreuz-100: #FFC5BE;
+  /* Rotkreuz 200 */
+  --color-rotkreuz-200: #FCA099;
+  /* Rotkreuz 300 */
+  --color-rotkreuz-300: #EC7B74;
+  /* Rotkreuz 400 */
+  --color-rotkreuz-400: #DB5450;
+  /* Rotkreuz 500 */
+  --color-rotkreuz-500: #C8202A;
+  /* Rotkreuz 600 */
+  --color-rotkreuz-600: #9C0013;
+  /* Rotkreuz 700 */
+  --color-rotkreuz-700: #720000;
+  /* Rotkreuz 800 */
+  --color-rotkreuz-800: #4A0000;
+  /* Rotkreuz 900 */
+  --color-rotkreuz-900: #240000;
+  /* Bleigrau 50 */
+  --color-bleigrau-50: #F1F5FC;
+  /* Bleigrau 100 */
+  --color-bleigrau-100: #D3DAE5;
+  /* Bleigrau 200 */
+  --color-bleigrau-200: #B6C0CE;
+  /* Bleigrau 300 */
+  --color-bleigrau-300: #9AA6B7;
+  /* Bleigrau 400 */
+  --color-bleigrau-400: #7E8DA1;
+  /* Bleigrau 500 */
+  --color-bleigrau-500: #64748B;
+  /* Bleigrau 600 */
+  --color-bleigrau-600: #475569;
+  /* Bleigrau 700 */
+  --color-bleigrau-700: #2D3848;
+  /* Bleigrau 800 */
+  --color-bleigrau-800: #141D2A;
+  /* Bleigrau 900 */
+  --color-bleigrau-900: #02060F;
+  /* Stahl 50 */
+  --color-stahl-50: #F1F6FA;
+  /* Stahl 100 */
+  --color-stahl-100: #DCE5EB;
+  /* Stahl 200 */
+  --color-stahl-200: #C9D4DC;
+  /* Stahl 300 */
+  --color-stahl-300: #B5C3CE;
+  /* Stahl 400 */
+  --color-stahl-400: #A2B3BF;
+  /* Stahl 500 */
+  --color-stahl-500: #8FA3B1;
+  /* Stahl 600 */
+  --color-stahl-600: #667783;
+  /* Stahl 700 */
+  --color-stahl-700: #3F4D57;
+  /* Stahl 800 */
+  --color-stahl-800: #1C272F;
+  /* Stahl 900 */
+  --color-stahl-900: #02060B;
+  /* Alpenklee 50 */
+  --color-alpenklee-50: #ECF9EF;
+  /* Alpenklee 100 */
+  --color-alpenklee-100: #CADFCF;
+  /* Alpenklee 200 */
+  --color-alpenklee-200: #A9C6B0;
+  /* Alpenklee 300 */
+  --color-alpenklee-300: #89AD92;
+  /* Alpenklee 400 */
+  --color-alpenklee-400: #6A9475;
+  /* Alpenklee 500 */
+  --color-alpenklee-500: #4A7C59;
+  /* Alpenklee 600 */
+  --color-alpenklee-600: #315C3E;
+  /* Alpenklee 700 */
+  --color-alpenklee-700: #193E26;
+  /* Alpenklee 800 */
+  --color-alpenklee-800: #03230F;
+  /* Alpenklee 900 */
+  --color-alpenklee-900: #000A01;
+  /* Elfenbein 50 */
+  --color-elfenbein-50: #F5F5F4;
+  /* Elfenbein 100 */
+  --color-elfenbein-100: #F5F5F3;
+  /* Elfenbein 200 */
+  --color-elfenbein-200: #F5F4F1;
+  /* Elfenbein 300 */
+  --color-elfenbein-300: #F5F4F0;
+  /* Elfenbein 400 */
+  --color-elfenbein-400: #F5F3EF;
+  /* Elfenbein 500 */
+  --color-elfenbein-500: #F5F3EE;
+  /* Elfenbein 600 */
+  --color-elfenbein-600: #B0AFAA;
+  /* Elfenbein 700 */
+  --color-elfenbein-700: #706F6C;
+  /* Elfenbein 800 */
+  --color-elfenbein-800: #373633;
+  /* Elfenbein 900 */
+  --color-elfenbein-900: #060604;
+  /* Russ 50 */
+  --color-russ-50: #F2F6F9;
+  /* Russ 100 */
+  --color-russ-100: #C2C7CD;
+  /* Russ 200 */
+  --color-russ-200: #939BA3;
+  /* Russ 300 */
+  --color-russ-300: #68717A;
+  /* Russ 400 */
+  --color-russ-400: #3F4954;
+  /* Russ 500 */
+  --color-russ-500: #1A2530;
+  /* Russ 600 */
+  --color-russ-600: #131D26;
+  /* Russ 700 */
+  --color-russ-700: #0C151D;
+  /* Russ 800 */
+  --color-russ-800: #060D14;
+  /* Russ 900 */
+  --color-russ-900: #03060B;
+  /* Neutral 50 */
+  --color-neutral-50: #F4F9FF;
+  /* Neutral 100 */
+  --color-neutral-100: #EAEFF5;
+  /* Neutral 200 */
+  --color-neutral-200: #D9DFE5;
+  /* Neutral 300 */
+  --color-neutral-300: #C0C5CB;
+  /* Neutral 400 */
+  --color-neutral-400: #94999E;
+  /* Neutral 500 */
+  --color-neutral-500: #6B6F74;
+  /* Neutral 600 */
+  --color-neutral-600: #494E53;
+  /* Neutral 700 */
+  --color-neutral-700: #2F3338;
+  /* Neutral 800 */
+  --color-neutral-800: #171B1F;
+  /* Neutral 900 */
+  --color-neutral-900: #05080B;
+  /* Accent 50 */
+  --color-accent-50: #E9F7FF;
+  /* Accent 100 */
+  --color-accent-100: #CFE6FF;
+  /* Accent 200 */
+  --color-accent-200: #B6D4F6;
+  /* Accent 300 */
+  --color-accent-300: #9DC3EE;
+  /* Accent 400 */
+  --color-accent-400: #83B2E5;
+  /* Accent 500 */
+  --color-accent-500: #6AA1DC;
+  /* Accent 600 */
+  --color-accent-600: #4675A7;
+  /* Accent 700 */
+  --color-accent-700: #234C75;
+  /* Accent 800 */
+  --color-accent-800: #022647;
+  /* Accent 900 */
+  --color-accent-900: #00041D;
+
+  /* --- Spacing (8px grid) --- */
+  /* Spacing 0 (0px) */
+  --spacing-0: 0px;
+  /* Spacing 1 (4px) */
+  --spacing-1: 4px;
+  /* Spacing 2 (8px) */
+  --spacing-2: 8px;
+  /* Spacing 3 (12px) */
+  --spacing-3: 12px;
+  /* Spacing 4 (16px) */
+  --spacing-4: 16px;
+  /* Spacing 5 (20px) */
+  --spacing-5: 20px;
+  /* Spacing 6 (24px) */
+  --spacing-6: 24px;
+  /* Spacing 8 (32px) */
+  --spacing-8: 32px;
+  /* Spacing 10 (40px) */
+  --spacing-10: 40px;
+  /* Spacing 12 (48px) */
+  --spacing-12: 48px;
+  /* Spacing 16 (64px) */
+  --spacing-16: 64px;
+  /* Spacing 20 (80px) */
+  --spacing-20: 80px;
+  /* Spacing 0.5 (2px) */
+  --spacing-0-5: 2px;
+  /* Spacing 1.5 (6px) */
+  --spacing-1-5: 6px;
+
+  /* --- Font Families --- */
+  /* Heading font family */
+  --font-heading: "Inter", "Helvetica Neue", "Arial", sans-serif;
+  /* Body font family */
+  --font-body: "Inter", "Helvetica Neue", "Arial", sans-serif;
+  /* Monospace font family */
+  --font-mono: "JetBrains Mono", "SF Mono", monospace;
+
+  /* --- Font Sizes --- */
+  /* Font size xs */
+  --text-xs: 0.75rem;
+  /* Font size sm */
+  --text-sm: 0.875rem;
+  /* Font size base */
+  --text-base: 1rem;
+  /* Font size lg */
+  --text-lg: 1.125rem;
+  /* Font size xl */
+  --text-xl: 1.25rem;
+  /* Font size 2xl */
+  --text-2xl: 1.5rem;
+  /* Font size 3xl */
+  --text-3xl: 1.875rem;
+  /* Font size 4xl */
+  --text-4xl: 2.25rem;
+
+  /* --- Border Radius --- */
+  /* Border radius none */
+  --radius-none: 0px;
+  /* Border radius sm */
+  --radius-sm: 0px;
+  /* Border radius md */
+  --radius-md: 0px;
+  /* Border radius lg */
+  --radius-lg: 0px;
+  /* Border radius xl */
+  --radius-xl: 0px;
+  /* Border radius full */
+  --radius-full: 9999px;
+
+}
+
+/* === Semantic Color API — theme-aware Tailwind utilities === */
+@theme {
+  --color-canvas: var(--background-canvas);
+  --color-surface: var(--background-surface);
+  --color-muted: var(--background-muted);
+  --color-foreground: var(--text-primary);
+  --color-foreground-secondary: var(--text-secondary);
+  --color-foreground-muted: var(--text-muted);
+  --color-foreground-inverse: var(--text-inverse);
+  --color-primary: var(--interactive-primary);
+  --color-primary-hover: var(--interactive-primary-hover);
+  --color-primary-active: var(--interactive-primary-active);
+  --color-border: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-error: var(--status-error);
+  --color-success: var(--status-success);
+  --color-warning: var(--status-warning);
+  --color-info: var(--status-info);
+  --color-ring: var(--focus-ring);
+  --color-focus-visible: var(--accessibility-focus-visible);
+}
+
+/* Primitive aliases + light mode semantic tokens */
+:root {
+  /* --primitive-color-* aliases → @theme --color-* (for semantic var() resolution) */
+  --primitive-color-himmelblau-50: var(--color-himmelblau-50);
+  --primitive-color-himmelblau-100: var(--color-himmelblau-100);
+  --primitive-color-himmelblau-200: var(--color-himmelblau-200);
+  --primitive-color-himmelblau-300: var(--color-himmelblau-300);
+  --primitive-color-himmelblau-400: var(--color-himmelblau-400);
+  --primitive-color-himmelblau-500: var(--color-himmelblau-500);
+  --primitive-color-himmelblau-600: var(--color-himmelblau-600);
+  --primitive-color-himmelblau-700: var(--color-himmelblau-700);
+  --primitive-color-himmelblau-800: var(--color-himmelblau-800);
+  --primitive-color-himmelblau-900: var(--color-himmelblau-900);
+  --primitive-color-rotkreuz-50: var(--color-rotkreuz-50);
+  --primitive-color-rotkreuz-100: var(--color-rotkreuz-100);
+  --primitive-color-rotkreuz-200: var(--color-rotkreuz-200);
+  --primitive-color-rotkreuz-300: var(--color-rotkreuz-300);
+  --primitive-color-rotkreuz-400: var(--color-rotkreuz-400);
+  --primitive-color-rotkreuz-500: var(--color-rotkreuz-500);
+  --primitive-color-rotkreuz-600: var(--color-rotkreuz-600);
+  --primitive-color-rotkreuz-700: var(--color-rotkreuz-700);
+  --primitive-color-rotkreuz-800: var(--color-rotkreuz-800);
+  --primitive-color-rotkreuz-900: var(--color-rotkreuz-900);
+  --primitive-color-bleigrau-50: var(--color-bleigrau-50);
+  --primitive-color-bleigrau-100: var(--color-bleigrau-100);
+  --primitive-color-bleigrau-200: var(--color-bleigrau-200);
+  --primitive-color-bleigrau-300: var(--color-bleigrau-300);
+  --primitive-color-bleigrau-400: var(--color-bleigrau-400);
+  --primitive-color-bleigrau-500: var(--color-bleigrau-500);
+  --primitive-color-bleigrau-600: var(--color-bleigrau-600);
+  --primitive-color-bleigrau-700: var(--color-bleigrau-700);
+  --primitive-color-bleigrau-800: var(--color-bleigrau-800);
+  --primitive-color-bleigrau-900: var(--color-bleigrau-900);
+  --primitive-color-stahl-50: var(--color-stahl-50);
+  --primitive-color-stahl-100: var(--color-stahl-100);
+  --primitive-color-stahl-200: var(--color-stahl-200);
+  --primitive-color-stahl-300: var(--color-stahl-300);
+  --primitive-color-stahl-400: var(--color-stahl-400);
+  --primitive-color-stahl-500: var(--color-stahl-500);
+  --primitive-color-stahl-600: var(--color-stahl-600);
+  --primitive-color-stahl-700: var(--color-stahl-700);
+  --primitive-color-stahl-800: var(--color-stahl-800);
+  --primitive-color-stahl-900: var(--color-stahl-900);
+  --primitive-color-alpenklee-50: var(--color-alpenklee-50);
+  --primitive-color-alpenklee-100: var(--color-alpenklee-100);
+  --primitive-color-alpenklee-200: var(--color-alpenklee-200);
+  --primitive-color-alpenklee-300: var(--color-alpenklee-300);
+  --primitive-color-alpenklee-400: var(--color-alpenklee-400);
+  --primitive-color-alpenklee-500: var(--color-alpenklee-500);
+  --primitive-color-alpenklee-600: var(--color-alpenklee-600);
+  --primitive-color-alpenklee-700: var(--color-alpenklee-700);
+  --primitive-color-alpenklee-800: var(--color-alpenklee-800);
+  --primitive-color-alpenklee-900: var(--color-alpenklee-900);
+  --primitive-color-elfenbein-50: var(--color-elfenbein-50);
+  --primitive-color-elfenbein-100: var(--color-elfenbein-100);
+  --primitive-color-elfenbein-200: var(--color-elfenbein-200);
+  --primitive-color-elfenbein-300: var(--color-elfenbein-300);
+  --primitive-color-elfenbein-400: var(--color-elfenbein-400);
+  --primitive-color-elfenbein-500: var(--color-elfenbein-500);
+  --primitive-color-elfenbein-600: var(--color-elfenbein-600);
+  --primitive-color-elfenbein-700: var(--color-elfenbein-700);
+  --primitive-color-elfenbein-800: var(--color-elfenbein-800);
+  --primitive-color-elfenbein-900: var(--color-elfenbein-900);
+  --primitive-color-russ-50: var(--color-russ-50);
+  --primitive-color-russ-100: var(--color-russ-100);
+  --primitive-color-russ-200: var(--color-russ-200);
+  --primitive-color-russ-300: var(--color-russ-300);
+  --primitive-color-russ-400: var(--color-russ-400);
+  --primitive-color-russ-500: var(--color-russ-500);
+  --primitive-color-russ-600: var(--color-russ-600);
+  --primitive-color-russ-700: var(--color-russ-700);
+  --primitive-color-russ-800: var(--color-russ-800);
+  --primitive-color-russ-900: var(--color-russ-900);
+  --primitive-color-neutral-50: var(--color-neutral-50);
+  --primitive-color-neutral-100: var(--color-neutral-100);
+  --primitive-color-neutral-200: var(--color-neutral-200);
+  --primitive-color-neutral-300: var(--color-neutral-300);
+  --primitive-color-neutral-400: var(--color-neutral-400);
+  --primitive-color-neutral-500: var(--color-neutral-500);
+  --primitive-color-neutral-600: var(--color-neutral-600);
+  --primitive-color-neutral-700: var(--color-neutral-700);
+  --primitive-color-neutral-800: var(--color-neutral-800);
+  --primitive-color-neutral-900: var(--color-neutral-900);
+  --primitive-color-accent-50: var(--color-accent-50);
+  --primitive-color-accent-100: var(--color-accent-100);
+  --primitive-color-accent-200: var(--color-accent-200);
+  --primitive-color-accent-300: var(--color-accent-300);
+  --primitive-color-accent-400: var(--color-accent-400);
+  --primitive-color-accent-500: var(--color-accent-500);
+  --primitive-color-accent-600: var(--color-accent-600);
+  --primitive-color-accent-700: var(--color-accent-700);
+  --primitive-color-accent-800: var(--color-accent-800);
+  --primitive-color-accent-900: var(--color-accent-900);
+
+  /* Semantic tokens */
+  /* Page background */
+  --background-canvas: var(--primitive-color-neutral-50);
+  /* Card/surface background */
+  --background-surface: #FFFFFF;
+  /* Muted background */
+  --background-muted: var(--primitive-color-neutral-100);
+  /* Primary text */
+  --text-primary: var(--primitive-color-neutral-900);
+  /* Secondary text */
+  --text-secondary: var(--primitive-color-neutral-600);
+  /* Muted/disabled text */
+  --text-muted: var(--primitive-color-neutral-500);
+  /* Text on dark backgrounds */
+  --text-inverse: var(--primitive-color-neutral-50);
+  /* Primary interactive (buttons, links) */
+  --interactive-primary: var(--primitive-color-himmelblau-500);
+  /* Primary interactive hover */
+  --interactive-primary-hover: var(--primitive-color-himmelblau-600);
+  /* Primary interactive active */
+  --interactive-primary-active: var(--primitive-color-himmelblau-700);
+  /* Default border */
+  --border-default: var(--primitive-color-neutral-200);
+  /* Strong border */
+  --border-strong: var(--primitive-color-neutral-400);
+  /* Error — WCAG-compliant red */
+  --status-error: #DC2626;
+  /* Success — WCAG-compliant green */
+  --status-success: #16A34A;
+  /* Warning — WCAG AA amber (4.5:1+ on white) */
+  --status-warning: #A16207;
+  /* Info status */
+  --status-info: var(--primitive-color-himmelblau-500);
+  /* Focus ring color */
+  --focus-ring: var(--primitive-color-himmelblau-500);
+  /* Keyboard focus indicator */
+  --accessibility-focus-visible: var(--primitive-color-himmelblau-500);
+}
+
+/* Dark mode semantic tokens */
+[data-theme="dark"] {
+  /* Page background — dark */
+  --background-canvas: var(--primitive-color-neutral-900);
+  /* Card/surface — dark */
+  --background-surface: var(--primitive-color-neutral-800);
+  /* Muted background — dark */
+  --background-muted: var(--primitive-color-neutral-700);
+  /* Primary text — dark */
+  --text-primary: var(--primitive-color-neutral-50);
+  /* Secondary text — dark */
+  --text-secondary: var(--primitive-color-neutral-300);
+  /* Muted text — dark */
+  --text-muted: var(--primitive-color-neutral-500);
+  /* Text on light backgrounds — dark */
+  --text-inverse: var(--primitive-color-neutral-900);
+  /* Primary interactive — dark */
+  --interactive-primary: var(--primitive-color-himmelblau-400);
+  /* Primary hover — dark */
+  --interactive-primary-hover: var(--primitive-color-himmelblau-300);
+  /* Primary active — dark */
+  --interactive-primary-active: var(--primitive-color-himmelblau-200);
+  /* Default border — dark */
+  --border-default: var(--primitive-color-neutral-700);
+  /* Strong border — dark */
+  --border-strong: var(--primitive-color-neutral-500);
+  /* Error — WCAG-compliant red (dark) */
+  --status-error: #EF4444;
+  /* Success — WCAG-compliant green (dark) */
+  --status-success: #22C55E;
+  /* Warning — WCAG-compliant amber (dark) */
+  --status-warning: #EAB308;
+  /* Info — dark */
+  --status-info: var(--primitive-color-himmelblau-400);
+  /* Focus ring — dark */
+  --focus-ring: var(--primitive-color-himmelblau-400);
+  /* Keyboard focus — dark */
+  --accessibility-focus-visible: var(--primitive-color-himmelblau-400);
+}