@reopt-ai/opt-ui 1.4.1

package/dist/theme/presets/default.css

@@ -0,0 +1,355 @@
+/* AUTOGENERATED by scripts/gen-theme-css.ts — DO NOT EDIT.
+   Edit the source token map in presets/tokens.ts and re-run:
+     bun run --filter @reopt-ai/opt-ui gen:theme-css
+*/
+
+/* ── Default Theme ── */
+
+:root,
+[data-theme="default"] {
+  /* Surface */
+  --opt-surface: #ffffff;
+  --opt-surface-raised: #ffffff;
+  --opt-surface-overlay: #ffffff;
+  --opt-surface-input: hsl(204 20% 94%);
+  --opt-surface-input-hover: hsl(204 20% 91%);
+  --opt-surface-inset: rgba(0, 0, 0, 0.02);
+
+  /* Accent */
+  --opt-accent: hsl(221 83% 53%);
+  --opt-accent-hover: hsl(221 83% 46%);
+  --opt-accent-active: hsl(221 83% 39%);
+  --opt-accent-subtle: hsl(221 83% 53% / 0.08);
+  --opt-accent-fg: #ffffff;
+
+  /* Text */
+  --opt-text-body-size: var(--opt-font-size-sm);
+  --opt-text-body-weight: var(--opt-font-weight-normal);
+  --opt-text-body-leading: 1.5;
+  --opt-text-label-size: var(--opt-font-size-sm);
+  --opt-text-label-weight: var(--opt-font-weight-medium);
+  --opt-text-label-leading: 1.25;
+  --opt-text-supporting-size: var(--opt-font-size-xs);
+  --opt-text-supporting-weight: var(--opt-font-weight-normal);
+  --opt-text-supporting-leading: 1.5;
+  --opt-text-code-size: var(--opt-font-size-sm);
+  --opt-text-code-weight: var(--opt-font-weight-normal);
+  --opt-text-code-leading: 1.5;
+  --opt-text-heading-1-size: var(--opt-font-size-3xl);
+  --opt-text-heading-1-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-1-leading: 1.2;
+  --opt-text-heading-2-size: var(--opt-font-size-2xl);
+  --opt-text-heading-2-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-2-leading: 1.25;
+  --opt-text-heading-3-size: var(--opt-font-size-xl);
+  --opt-text-heading-3-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-3-leading: 1.3;
+  --opt-text-heading-4-size: var(--opt-font-size-lg);
+  --opt-text-heading-4-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-4-leading: 1.35;
+  --opt-text-heading-5-size: var(--opt-font-size-base);
+  --opt-text-heading-5-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-5-leading: 1.4;
+  --opt-text-heading-6-size: var(--opt-font-size-sm);
+  --opt-text-heading-6-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-6-leading: 1.5;
+  --opt-text-display-1-size: var(--opt-font-size-4xl);
+  --opt-text-display-1-weight: var(--opt-font-weight-normal);
+  --opt-text-display-1-leading: 1.1;
+  --opt-text-display-2-size: var(--opt-font-size-3xl);
+  --opt-text-display-2-weight: var(--opt-font-weight-normal);
+  --opt-text-display-2-leading: 1.15;
+  --opt-text-display-3-size: var(--opt-font-size-2xl);
+  --opt-text-display-3-weight: var(--opt-font-weight-normal);
+  --opt-text-display-3-leading: 1.2;
+  --opt-text: hsl(0 0% 20%);
+  --opt-text-secondary: hsl(0 0% 40%);
+  --opt-text-tertiary: hsl(0 0% 55%);
+
+  /* Border */
+  --opt-border-width: 1px;
+  --opt-border: rgba(0, 0, 0, 0.13);
+  --opt-border-hover: rgba(0, 0, 0, 0.33);
+  --opt-border-subtle: rgba(0, 0, 0, 0.08);
+
+  /* Focus */
+  --opt-ring: hsl(221 83% 53%);
+  --opt-ring-offset: #ffffff;
+
+  /* Background */
+  --opt-bg: #ffffff;
+  --opt-bg-subtle: rgba(0, 0, 0, 0.04);
+  --opt-bg-muted: rgba(0, 0, 0, 0.08);
+
+  /* Status */
+  --opt-success: hsl(142 71% 45%);
+  --opt-success-subtle: hsl(142 76% 95%);
+  --opt-success-fg: hsl(142 71% 29%);
+  --opt-warning: hsl(38 92% 50%);
+  --opt-warning-subtle: hsl(48 96% 93%);
+  --opt-warning-fg: hsl(38 92% 33%);
+  --opt-danger: hsl(0 84% 60%);
+  --opt-danger-subtle: hsl(0 93% 95%);
+  --opt-danger-fg: hsl(0 84% 40%);
+  --opt-info: hsl(221 83% 53%);
+  --opt-info-subtle: hsl(214 95% 95%);
+  --opt-info-fg: hsl(221 83% 40%);
+
+  /* Chart */
+  --opt-chart-6: color-mix(in oklch, var(--opt-chart-1) 62%, var(--opt-chart-2));
+  --opt-chart-7: color-mix(in oklch, var(--opt-chart-2) 62%, var(--opt-chart-3));
+  --opt-chart-8: color-mix(in oklch, var(--opt-chart-3) 62%, var(--opt-chart-4));
+  --opt-chart-9: color-mix(in oklch, var(--opt-chart-4) 62%, var(--opt-chart-5));
+  --opt-chart-10: color-mix(in oklch, var(--opt-chart-5) 62%, var(--opt-chart-1));
+  --opt-chart-11: color-mix(in oklch, var(--opt-chart-1) 55%, var(--opt-chart-3));
+  --opt-chart-12: color-mix(in oklch, var(--opt-chart-2) 55%, var(--opt-chart-4));
+  --opt-chart-13: color-mix(in oklch, var(--opt-chart-3) 55%, var(--opt-chart-5));
+  --opt-chart-14: color-mix(in oklch, var(--opt-chart-4) 55%, var(--opt-chart-1));
+  --opt-chart-15: color-mix(in oklch, var(--opt-chart-5) 55%, var(--opt-chart-2));
+  --opt-chart-16: color-mix(in oklch, var(--opt-chart-1) 35%, var(--opt-chart-4));
+  --opt-chart-sequential-1: color-mix(in oklch, var(--opt-chart-1) 18%, var(--opt-surface));
+  --opt-chart-sequential-2: color-mix(in oklch, var(--opt-chart-1) 36%, var(--opt-surface));
+  --opt-chart-sequential-3: color-mix(in oklch, var(--opt-chart-1) 54%, var(--opt-surface));
+  --opt-chart-sequential-4: color-mix(in oklch, var(--opt-chart-1) 76%, var(--opt-surface));
+  --opt-chart-sequential-5: var(--opt-chart-1);
+  --opt-chart-diverging-negative: var(--opt-danger);
+  --opt-chart-diverging-neutral: var(--opt-text-tertiary);
+  --opt-chart-diverging-positive: var(--opt-success);
+  --opt-chart-1: hsl(221 83% 53%);
+  --opt-chart-2: hsl(142 71% 45%);
+  --opt-chart-3: hsl(38 92% 50%);
+  --opt-chart-4: hsl(280 67% 54%);
+  --opt-chart-5: hsl(349 89% 60%);
+
+  /* Radius */
+  --opt-radius-sm: 0.25rem;
+  --opt-radius-md: 0.5rem;
+  --opt-radius-lg: 0.75rem;
+  --opt-radius-xl: 1rem;
+
+  /* Shadow */
+  --opt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --opt-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
+  --opt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+  /* Spacing */
+  --opt-space-0: 0px;
+  --opt-space-0-5: 0.125rem;
+  --opt-space-1: 0.25rem;
+  --opt-space-1-5: 0.375rem;
+  --opt-space-2: 0.5rem;
+  --opt-space-3: 0.75rem;
+  --opt-space-4: 1rem;
+  --opt-space-5: 1.25rem;
+  --opt-space-6: 1.5rem;
+  --opt-space-8: 2rem;
+  --opt-space-section: 1.5rem;
+  --opt-space-group: 1rem;
+  --opt-space-element: 0.5rem;
+
+  /* Typography */
+  --opt-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --opt-font-size-xs: 0.75rem;
+  --opt-font-size-sm: 0.875rem;
+  --opt-font-size-base: 1rem;
+  --opt-font-size-lg: 1.125rem;
+  --opt-font-size-xl: 1.25rem;
+  --opt-font-size-2xl: 1.5rem;
+  --opt-font-size-3xl: 1.875rem;
+  --opt-font-size-4xl: 2.25rem;
+  --opt-font-weight-normal: 400;
+  --opt-font-weight-medium: 500;
+  --opt-font-weight-semibold: 600;
+  --opt-font-weight-bold: 700;
+  --opt-font-heading: var(--font-geist-sans), system-ui, sans-serif;
+  --opt-font-body: var(--font-geist-sans), system-ui, sans-serif;
+  --opt-tracking-heading: -0.015em;
+  --opt-weight-heading: 600;
+
+  /* Other */
+  --opt-control-sm: 2rem;
+  --opt-control-md: 2.5rem;
+  --opt-control-lg: 3rem;
+  --opt-control-padding-sm: 0.75rem;
+  --opt-control-padding-md: 1rem;
+  --opt-control-padding-lg: 1.5rem;
+  --opt-duration-fast: 150ms;
+  --opt-duration-medium: 250ms;
+  --opt-duration-slow: 400ms;
+  --opt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --opt-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+[data-theme="default-dark"] {
+  /* Surface */
+  --opt-surface: hsl(204 4% 16%);
+  --opt-surface-raised: hsl(204 4% 16%);
+  --opt-surface-overlay: hsl(204 4% 16%);
+  --opt-surface-input: hsl(204 4% 10%);
+  --opt-surface-input-hover: hsl(204 4% 8%);
+  --opt-surface-inset: rgba(255, 255, 255, 0.04);
+
+  /* Accent */
+  --opt-accent: hsl(221 83% 53%);
+  --opt-accent-hover: hsl(221 83% 60%);
+  --opt-accent-active: hsl(221 83% 67%);
+  --opt-accent-subtle: hsl(221 83% 53% / 0.12);
+  --opt-accent-fg: #ffffff;
+
+  /* Text */
+  --opt-text-body-size: var(--opt-font-size-sm);
+  --opt-text-body-weight: var(--opt-font-weight-normal);
+  --opt-text-body-leading: 1.5;
+  --opt-text-label-size: var(--opt-font-size-sm);
+  --opt-text-label-weight: var(--opt-font-weight-medium);
+  --opt-text-label-leading: 1.25;
+  --opt-text-supporting-size: var(--opt-font-size-xs);
+  --opt-text-supporting-weight: var(--opt-font-weight-normal);
+  --opt-text-supporting-leading: 1.5;
+  --opt-text-code-size: var(--opt-font-size-sm);
+  --opt-text-code-weight: var(--opt-font-weight-normal);
+  --opt-text-code-leading: 1.5;
+  --opt-text-heading-1-size: var(--opt-font-size-3xl);
+  --opt-text-heading-1-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-1-leading: 1.2;
+  --opt-text-heading-2-size: var(--opt-font-size-2xl);
+  --opt-text-heading-2-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-2-leading: 1.25;
+  --opt-text-heading-3-size: var(--opt-font-size-xl);
+  --opt-text-heading-3-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-3-leading: 1.3;
+  --opt-text-heading-4-size: var(--opt-font-size-lg);
+  --opt-text-heading-4-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-4-leading: 1.35;
+  --opt-text-heading-5-size: var(--opt-font-size-base);
+  --opt-text-heading-5-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-5-leading: 1.4;
+  --opt-text-heading-6-size: var(--opt-font-size-sm);
+  --opt-text-heading-6-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-6-leading: 1.5;
+  --opt-text-display-1-size: var(--opt-font-size-4xl);
+  --opt-text-display-1-weight: var(--opt-font-weight-normal);
+  --opt-text-display-1-leading: 1.1;
+  --opt-text-display-2-size: var(--opt-font-size-3xl);
+  --opt-text-display-2-weight: var(--opt-font-weight-normal);
+  --opt-text-display-2-leading: 1.15;
+  --opt-text-display-3-size: var(--opt-font-size-2xl);
+  --opt-text-display-3-weight: var(--opt-font-weight-normal);
+  --opt-text-display-3-leading: 1.2;
+  --opt-text: hsl(0 0% 82%);
+  --opt-text-secondary: hsl(0 0% 58%);
+  --opt-text-tertiary: hsl(0 0% 38%);
+
+  /* Border */
+  --opt-border-width: 1px;
+  --opt-border: rgba(255, 255, 255, 0.1);
+  --opt-border-hover: rgba(255, 255, 255, 0.25);
+  --opt-border-subtle: rgba(255, 255, 255, 0.08);
+
+  /* Focus */
+  --opt-ring: hsl(221 83% 53%);
+  --opt-ring-offset: hsl(204 4% 16%);
+
+  /* Background */
+  --opt-bg: #0a0a0a;
+  --opt-bg-subtle: rgba(255, 255, 255, 0.06);
+  --opt-bg-muted: rgba(255, 255, 255, 0.08);
+
+  /* Status */
+  --opt-success: hsl(142 71% 45%);
+  --opt-success-subtle: hsl(142 71% 45% / 0.2);
+  --opt-success-fg: hsl(142 76% 73%);
+  --opt-warning: hsl(38 92% 50%);
+  --opt-warning-subtle: hsl(38 92% 50% / 0.2);
+  --opt-warning-fg: hsl(48 96% 73%);
+  --opt-danger: hsl(0 84% 60%);
+  --opt-danger-subtle: hsl(0 84% 60% / 0.2);
+  --opt-danger-fg: hsl(0 84% 73%);
+  --opt-info: hsl(221 83% 53%);
+  --opt-info-subtle: hsl(221 83% 53% / 0.2);
+  --opt-info-fg: hsl(221 83% 73%);
+
+  /* Chart */
+  --opt-chart-6: color-mix(in oklch, var(--opt-chart-1) 62%, var(--opt-chart-2));
+  --opt-chart-7: color-mix(in oklch, var(--opt-chart-2) 62%, var(--opt-chart-3));
+  --opt-chart-8: color-mix(in oklch, var(--opt-chart-3) 62%, var(--opt-chart-4));
+  --opt-chart-9: color-mix(in oklch, var(--opt-chart-4) 62%, var(--opt-chart-5));
+  --opt-chart-10: color-mix(in oklch, var(--opt-chart-5) 62%, var(--opt-chart-1));
+  --opt-chart-11: color-mix(in oklch, var(--opt-chart-1) 55%, var(--opt-chart-3));
+  --opt-chart-12: color-mix(in oklch, var(--opt-chart-2) 55%, var(--opt-chart-4));
+  --opt-chart-13: color-mix(in oklch, var(--opt-chart-3) 55%, var(--opt-chart-5));
+  --opt-chart-14: color-mix(in oklch, var(--opt-chart-4) 55%, var(--opt-chart-1));
+  --opt-chart-15: color-mix(in oklch, var(--opt-chart-5) 55%, var(--opt-chart-2));
+  --opt-chart-16: color-mix(in oklch, var(--opt-chart-1) 35%, var(--opt-chart-4));
+  --opt-chart-sequential-1: color-mix(in oklch, var(--opt-chart-1) 18%, var(--opt-surface));
+  --opt-chart-sequential-2: color-mix(in oklch, var(--opt-chart-1) 36%, var(--opt-surface));
+  --opt-chart-sequential-3: color-mix(in oklch, var(--opt-chart-1) 54%, var(--opt-surface));
+  --opt-chart-sequential-4: color-mix(in oklch, var(--opt-chart-1) 76%, var(--opt-surface));
+  --opt-chart-sequential-5: var(--opt-chart-1);
+  --opt-chart-diverging-negative: var(--opt-danger);
+  --opt-chart-diverging-neutral: var(--opt-text-tertiary);
+  --opt-chart-diverging-positive: var(--opt-success);
+  --opt-chart-1: hsl(221 83% 53%);
+  --opt-chart-2: hsl(142 71% 45%);
+  --opt-chart-3: hsl(38 92% 50%);
+  --opt-chart-4: hsl(280 67% 54%);
+  --opt-chart-5: hsl(349 89% 60%);
+
+  /* Radius */
+  --opt-radius-sm: 0.25rem;
+  --opt-radius-md: 0.5rem;
+  --opt-radius-lg: 0.75rem;
+  --opt-radius-xl: 1rem;
+
+  /* Shadow */
+  --opt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --opt-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+  --opt-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+
+  /* Spacing */
+  --opt-space-0: 0px;
+  --opt-space-0-5: 0.125rem;
+  --opt-space-1: 0.25rem;
+  --opt-space-1-5: 0.375rem;
+  --opt-space-2: 0.5rem;
+  --opt-space-3: 0.75rem;
+  --opt-space-4: 1rem;
+  --opt-space-5: 1.25rem;
+  --opt-space-6: 1.5rem;
+  --opt-space-8: 2rem;
+  --opt-space-section: 1.5rem;
+  --opt-space-group: 1rem;
+  --opt-space-element: 0.5rem;
+
+  /* Typography */
+  --opt-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --opt-font-size-xs: 0.75rem;
+  --opt-font-size-sm: 0.875rem;
+  --opt-font-size-base: 1rem;
+  --opt-font-size-lg: 1.125rem;
+  --opt-font-size-xl: 1.25rem;
+  --opt-font-size-2xl: 1.5rem;
+  --opt-font-size-3xl: 1.875rem;
+  --opt-font-size-4xl: 2.25rem;
+  --opt-font-weight-normal: 400;
+  --opt-font-weight-medium: 500;
+  --opt-font-weight-semibold: 600;
+  --opt-font-weight-bold: 700;
+  --opt-font-heading: var(--font-geist-sans), system-ui, sans-serif;
+  --opt-font-body: var(--font-geist-sans), system-ui, sans-serif;
+  --opt-tracking-heading: -0.015em;
+  --opt-weight-heading: 600;
+
+  /* Other */
+  --opt-control-sm: 2rem;
+  --opt-control-md: 2.5rem;
+  --opt-control-lg: 3rem;
+  --opt-control-padding-sm: 0.75rem;
+  --opt-control-padding-md: 1rem;
+  --opt-control-padding-lg: 1.5rem;
+  --opt-duration-fast: 150ms;
+  --opt-duration-medium: 250ms;
+  --opt-duration-slow: 400ms;
+  --opt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --opt-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
+}