@mono-lit/helper 0.0.0-stage → 0.0.1

package/dist/ui/theme/tokens.css

@@ -0,0 +1,261 @@
+/* GENERATED by scripts/theme-build.mjs — token layer.
+   Edit src/data/theme/presets.json (or the generator) and run `pnpm theme:build`. */
+@layer mono-tokens {
+:root {
+  color-scheme: light;
+  --radius: 0.625rem;
+  /* Basecoat semantic tokens — the default palette (one) */
+  --background: oklch(0.973 0.007 268.55);
+  --foreground: oklch(0.278 0.03 256.85);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.278 0.03 256.85);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.278 0.03 256.85);
+  --primary: oklch(0.304 0.108 273.2);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.98 0.005 274.97);
+  --secondary-foreground: oklch(0.278 0.03 256.85);
+  --muted: oklch(0.98 0.005 274.97);
+  --muted-foreground: oklch(0.551 0.023 264.36);
+  --accent: oklch(0.965 0.014 272.69);
+  --accent-foreground: oklch(0.278 0.03 256.85);
+  --destructive: oklch(0.577 0.215 27.33);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.928 0.011 269.54);
+  --input: oklch(0.891 0.014 268.48);
+  --ring: oklch(0.304 0.108 273.2);
+  --chart-1: oklch(0.304 0.108 273.2);
+  --chart-2: oklch(0.673 0.103 269.05);
+  --chart-3: oklch(0.749 0.142 76.49);
+  --chart-4: oklch(0.928 0.011 269.54);
+  --chart-5: oklch(0.361 0.108 273.02);
+  --success: oklch(0.527 0.137 150.07);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.5553 0.1455 48.998);
+  --warning-foreground: oklch(1 0 0);
+  --info: oklch(0.482 0.123 262.67);
+  --info-foreground: oklch(1 0 0);
+  --teal: oklch(0.5239 0.0917 180.004);
+  --teal-foreground: oklch(1 0 0);
+  --purple: oklch(0.355 0.141 267.87);
+  --purple-foreground: oklch(1 0 0);
+  --neutral: oklch(0.554 0.041 257.42);
+  --neutral-foreground: oklch(1 0 0);
+  --dark: oklch(0.208 0.04 265.75);
+  --dark-foreground: oklch(1 0 0);
+  /* Basecoat non-colour tokens (verbatim from vendor base.css) */
+  --sidebar-width: 16rem;
+  --sidebar-mobile-width: 18rem;
+  --scrollbar-track: transparent;
+  --scrollbar-width: 0.625rem;
+  --scrollbar-sm-width: 0.375rem;
+  --scrollbar-radius: 9999px;
+  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
+  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
+  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
+  --font-sans: var(--mono-font-sans, "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  --font-mono: var(--mono-font-mono, "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  /* Tailwind engine subset the ported rules read */
+  --mono-spacing: 0.25rem;
+  --mono-text-xs: 0.75rem;
+  --mono-text-xs--lh: calc(1 / 0.75);
+  --mono-text-sm: 0.875rem;
+  --mono-text-sm--lh: calc(1.25 / 0.875);
+  --mono-text-base: 1rem;
+  --mono-text-base--lh: calc(1.5 / 1);
+  --mono-text-lg: 1.125rem;
+  --mono-text-lg--lh: calc(1.75 / 1.125);
+  --mono-text-xl: 1.25rem;
+  --mono-text-xl--lh: calc(1.75 / 1.25);
+  --mono-font-weight-normal: 400;
+  --mono-font-weight-medium: 500;
+  --mono-font-weight-semibold: 600;
+  --mono-font-weight-bold: 700;
+  --mono-tracking-tight: -0.025em;
+  --mono-tracking-wide: 0.025em;
+  --mono-tracking-wider: 0.05em;
+  --mono-tracking-widest: 0.1em;
+  --mono-leading-none: 1;
+  --mono-leading-snug: 1.375;
+  --mono-leading-normal: 1.5;
+  --mono-leading-relaxed: 1.625;
+  --mono-radius-2xl: 1rem;
+  --mono-radius-3xl: 1.5rem;
+  --mono-radius-4xl: 2rem;
+  --mono-radius-full: 9999px;
+  --mono-shadow-none: 0 0 #0000;
+  --mono-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --mono-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --mono-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --mono-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --mono-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --mono-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --mono-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --mono-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --mono-duration: 150ms;
+  --mono-duration-fast: 100ms;
+  --mono-duration-slow: 200ms;
+  --mono-animate-pulse: mono-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --mono-blur-xs: 4px;
+  --mono-container-xs: 20rem;
+  --mono-container-sm: 24rem;
+  --mono-container-md: 28rem;
+  --mono-container-lg: 32rem;
+  --mono-container-xl: 36rem;
+  --mono-container-2xl: 42rem;
+  --mono-border-width: 1px;
+  --mono-ring-width: 3px;
+  --mono-ring-alpha: 50%;
+  /* mono control / type scale */
+  --mono-control-height-xs: 1.5rem;
+  --mono-control-height-sm: 2rem;
+  --mono-control-height-md: 2.25rem;
+  --mono-control-height-lg: 2.5rem;
+  --mono-control-height-xl: 2.75rem;
+  --mono-control-height-xxl: 3rem;
+  --mono-control-font-xs: 0.75rem;
+  --mono-control-font-sm: 0.875rem;
+  --mono-control-font-md: 0.875rem;
+  --mono-control-font-lg: 0.875rem;
+  --mono-control-font-xl: 1rem;
+  --mono-control-font-xxl: 1.125rem;
+  --mono-label-font-size: 0.875rem;
+  --mono-label-font-weight: 500;
+  --mono-message-font-size: 0.875rem;
+  --mono-option-font-size: 0.875rem;
+  --mono-title-font-xs: 0.75rem;
+  --mono-title-font-sm: 0.875rem;
+  --mono-title-font-md: 1rem;
+  --mono-title-font-lg: 1.125rem;
+  --mono-title-font-xl: 1.25rem;
+  --mono-title-font-xxl: 1.5rem;
+  --mono-title-font-weight: 500;
+  --mono-title-line-height: 1;
+  --mono-subtitle-font-xs: 0.75rem;
+  --mono-subtitle-font-sm: 0.75rem;
+  --mono-subtitle-font-md: 0.875rem;
+  --mono-subtitle-font-lg: 0.875rem;
+  --mono-subtitle-font-xl: 1rem;
+  --mono-subtitle-font-xxl: 1.125rem;
+  --mono-subtitle-font-weight: 400;
+  --mono-subtitle-line-height: 1.5;
+  --mono-icon-sm: 0.875rem;
+  --mono-icon-md: 1.25rem;
+  --mono-icon-lg: 2rem;
+  /* mode tokens (light) */
+  --mono-mode-tint: 10%;
+  --mono-mode-tint-hover: 20%;
+  --mono-mode-checked-bg: 5%;
+  --mono-mode-checked-border: 30%;
+  --mono-mode-surface: transparent;
+  --mono-mode-state-border-alpha: 100%;
+  --mono-mode-state-ring-alpha: 20%;
+  --mono-mode-tab-active-border: transparent;
+}
+:is(html, body, .mono-theme).dark {
+  color-scheme: light;
+  --background: oklch(0.973 0.007 268.55);
+  --foreground: oklch(0.278 0.03 256.85);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.278 0.03 256.85);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.278 0.03 256.85);
+  --primary: oklch(0.304 0.108 273.2);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.98 0.005 274.97);
+  --secondary-foreground: oklch(0.278 0.03 256.85);
+  --muted: oklch(0.98 0.005 274.97);
+  --muted-foreground: oklch(0.551 0.023 264.36);
+  --accent: oklch(0.965 0.014 272.69);
+  --accent-foreground: oklch(0.278 0.03 256.85);
+  --destructive: oklch(0.577 0.215 27.33);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.928 0.011 269.54);
+  --input: oklch(0.891 0.014 268.48);
+  --ring: oklch(0.304 0.108 273.2);
+  --chart-1: oklch(0.304 0.108 273.2);
+  --chart-2: oklch(0.673 0.103 269.05);
+  --chart-3: oklch(0.749 0.142 76.49);
+  --chart-4: oklch(0.928 0.011 269.54);
+  --chart-5: oklch(0.361 0.108 273.02);
+  --success: oklch(0.527 0.137 150.07);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.5553 0.1455 48.998);
+  --warning-foreground: oklch(1 0 0);
+  --info: oklch(0.482 0.123 262.67);
+  --info-foreground: oklch(1 0 0);
+  --teal: oklch(0.5239 0.0917 180.004);
+  --teal-foreground: oklch(1 0 0);
+  --purple: oklch(0.355 0.141 267.87);
+  --purple-foreground: oklch(1 0 0);
+  --neutral: oklch(0.554 0.041 257.42);
+  --neutral-foreground: oklch(1 0 0);
+  --dark: oklch(0.208 0.04 265.75);
+  --dark-foreground: oklch(1 0 0);
+  --sidebar-width: 16rem;
+  --sidebar-mobile-width: 18rem;
+  --scrollbar-track: transparent;
+  --scrollbar-width: 0.625rem;
+  --scrollbar-sm-width: 0.375rem;
+  --scrollbar-radius: 9999px;
+  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
+  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
+  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
+  /* mode tokens (light — no dark mode) */
+  --mono-mode-tint: 10%;
+  --mono-mode-tint-hover: 20%;
+  --mono-mode-checked-bg: 5%;
+  --mono-mode-checked-border: 30%;
+  --mono-mode-surface: transparent;
+  --mono-mode-state-border-alpha: 100%;
+  --mono-mode-state-ring-alpha: 20%;
+  --mono-mode-tab-active-border: transparent;
+}
+:where(:root, :is(html, body, .mono-theme).dark, [class*="theme-"], .mono-theme) {
+  /* var()-bearing tokens re-derive on every element a preset or mode class can land on */
+  --scrollbar-thumb: var(--border);
+  --mono-radius-sm: calc(var(--radius) - 4px);
+  --mono-radius-md: calc(var(--radius) - 2px);
+  --mono-radius-lg: var(--radius);
+  --mono-radius-xl: calc(var(--radius) + 4px);
+  --mono-ring-color: color-mix(in oklab, var(--ring) var(--mono-ring-alpha), transparent);
+  --mono-ring: 0 0 0 var(--mono-ring-width) var(--mono-ring-color);
+  --sidebar: var(--card);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --mono-mode-surface-hover: var(--muted);
+  --mono-mode-outline-bg: var(--background);
+  --mono-mode-surface-strong: var(--input);
+  --mono-mode-field-hover-bg: var(--mono-mode-surface);
+  --mono-mode-outline-border: var(--border);
+  --mono-mode-invalid-border: var(--destructive);
+  --mono-mode-invalid-ring: color-mix(in oklab, var(--destructive) 20%, transparent);
+  --mono-mode-ghost-hover: var(--muted);
+  --mono-mode-tab-inactive-fg: color-mix(in oklab, var(--foreground) 60%, transparent);
+  --mono-mode-tab-active-bg: var(--background);
+  --mono-mode-switch-thumb: var(--background);
+  --mono-mode-switch-thumb-checked: var(--background);
+  --mono-mode-backdrop: color-mix(in oklab, black 10%, transparent);
+}
+:where(:is(html, body, .mono-theme).dark, :is(html, body, .mono-theme).dark [class*="theme-"], :is(html, body, .mono-theme).dark .mono-theme) {
+  --mono-mode-surface-hover: var(--muted);
+  --mono-mode-outline-bg: var(--background);
+  --mono-mode-surface-strong: var(--input);
+  --mono-mode-field-hover-bg: var(--mono-mode-surface);
+  --mono-mode-outline-border: var(--border);
+  --mono-mode-invalid-border: var(--destructive);
+  --mono-mode-invalid-ring: color-mix(in oklab, var(--destructive) 20%, transparent);
+  --mono-mode-ghost-hover: var(--muted);
+  --mono-mode-tab-inactive-fg: color-mix(in oklab, var(--foreground) 60%, transparent);
+  --mono-mode-tab-active-bg: var(--background);
+  --mono-mode-switch-thumb: var(--background);
+  --mono-mode-switch-thumb-checked: var(--background);
+  --mono-mode-backdrop: color-mix(in oklab, black 10%, transparent);
+}
+}
+@keyframes mono-pulse { 50% { opacity: 0.5; } }