raft-ui 0.0.1

package/src/lib/without-children.ts

@@ -0,0 +1,6 @@
+/**
+ * Element props without `children` — for leaf components (dots, markers) that
+ * render no caller content. React ships `ComponentPropsWithoutRef` but no
+ * equivalent that subtracts children, so this names the one-off `Omit`.
+ */
+export type WithoutChildren<P> = Omit<P, "children">;

package/src/styles.css

@@ -0,0 +1,467 @@
+@import "tailwindcss";
+@import "./fonts/brutal.css";
+
+/* Pure token contract. No legacy action/surface/destructive/component aliases. */
+
+@source "./components";
+
+@theme {
+  --shadow-*: initial;
+
+  --color-black: oklch(0 0 0);
+  --color-white: oklch(1 0 0);
+
+  --color-brutal-yellow-50: oklch(0.984 0.017 84.56);
+  --color-brutal-yellow-100: oklch(0.975 0.027 85.64);
+  --color-brutal-yellow-200: oklch(0.94 0.066 86.23);
+  --color-brutal-yellow-300: oklch(0.913 0.103 88.02);
+  --color-brutal-yellow-400: oklch(0.883 0.162 91.89);
+  --color-brutal-yellow-500: oklch(0.759 0.155 92.93);
+  --color-brutal-yellow-600: oklch(0.637 0.13 92.64);
+  --color-brutal-yellow-700: oklch(0.508 0.104 92.9);
+  --color-brutal-yellow-800: oklch(0.388 0.08 93.41);
+  --color-brutal-yellow-900: oklch(0.26 0.053 92.86);
+  --color-brutal-yellow-950: oklch(0.199 0.041 93.21);
+  --color-brutal-yellow: var(--color-brutal-yellow-400);
+
+  --color-brutal-purple-50: oklch(0.976 0.008 294.09);
+  --color-brutal-purple-100: oklch(0.949 0.018 296.72);
+  --color-brutal-purple-200: oklch(0.891 0.037 294.17);
+  --color-brutal-purple-300: oklch(0.84 0.056 294.36);
+  --color-brutal-purple-400: oklch(0.783 0.078 294.55);
+  --color-brutal-purple-500: oklch(0.682 0.117 294);
+  --color-brutal-purple-600: oklch(0.575 0.157 293.61);
+  --color-brutal-purple-700: oklch(0.475 0.168 293);
+  --color-brutal-purple-800: oklch(0.367 0.131 293.06);
+  --color-brutal-purple-900: oklch(0.25 0.09 293.19);
+  --color-brutal-purple-950: oklch(0.195 0.07 292.41);
+  --color-brutal-purple: var(--color-brutal-purple-400);
+
+  --color-brutal-pink-50: oklch(0.968 0.017 359.4);
+  --color-brutal-pink-100: oklch(0.936 0.034 2.02);
+  --color-brutal-pink-200: oklch(0.871 0.073 0.34);
+  --color-brutal-pink-300: oklch(0.808 0.116 0.76);
+  --color-brutal-pink-400: oklch(0.749 0.162 0.71);
+  --color-brutal-pink-500: oklch(0.662 0.244 0.59);
+  --color-brutal-pink-600: oklch(0.565 0.226 0.56);
+  --color-brutal-pink-700: oklch(0.456 0.182 0.91);
+  --color-brutal-pink-800: oklch(0.354 0.142 0.38);
+  --color-brutal-pink-900: oklch(0.246 0.098 0.96);
+  --color-brutal-pink-950: oklch(0.198 0.08 359.99);
+  --color-brutal-pink: var(--color-brutal-pink-400);
+
+  --color-brutal-cyan-50: oklch(0.974 0.016 226.9);
+  --color-brutal-cyan-100: oklch(0.945 0.033 226.27);
+  --color-brutal-cyan-200: oklch(0.892 0.07 224.23);
+  --color-brutal-cyan-300: oklch(0.835 0.114 220.86);
+  --color-brutal-cyan-400: oklch(0.783 0.135 219.2);
+  --color-brutal-cyan-500: oklch(0.672 0.116 219.07);
+  --color-brutal-cyan-600: oklch(0.569 0.099 219.95);
+  --color-brutal-cyan-700: oklch(0.46 0.079 219.13);
+  --color-brutal-cyan-800: oklch(0.348 0.06 219.02);
+  --color-brutal-cyan-900: oklch(0.246 0.043 221.18);
+  --color-brutal-cyan-950: oklch(0.185 0.032 217.82);
+  --color-brutal-cyan: var(--color-brutal-cyan-400);
+
+  --color-brutal-orange-50: oklch(0.976 0.011 45.81);
+  --color-brutal-orange-100: oklch(0.941 0.028 40.23);
+  --color-brutal-orange-200: oklch(0.892 0.053 43.23);
+  --color-brutal-orange-300: oklch(0.835 0.087 46.56);
+  --color-brutal-orange-400: oklch(0.785 0.123 50.11);
+  --color-brutal-orange-500: oklch(0.685 0.145 54.68);
+  --color-brutal-orange-600: oklch(0.57 0.121 54.53);
+  --color-brutal-orange-700: oklch(0.465 0.099 54.58);
+  --color-brutal-orange-800: oklch(0.361 0.076 55.55);
+  --color-brutal-orange-900: oklch(0.246 0.052 55.54);
+  --color-brutal-orange-950: oklch(0.191 0.042 54.31);
+  --color-brutal-orange: var(--color-brutal-orange-400);
+
+  --color-brutal-lime-50: oklch(0.98 0.029 132.52);
+  --color-brutal-lime-100: oklch(0.949 0.081 130.41);
+  --color-brutal-lime-200: oklch(0.91 0.149 130.12);
+  --color-brutal-lime-300: oklch(0.867 0.142 130.1);
+  --color-brutal-lime-400: oklch(0.827 0.135 130.07);
+  --color-brutal-lime-500: oklch(0.715 0.118 130.4);
+  --color-brutal-lime-600: oklch(0.596 0.099 130.36);
+  --color-brutal-lime-700: oklch(0.485 0.08 129.92);
+  --color-brutal-lime-800: oklch(0.366 0.06 130.11);
+  --color-brutal-lime-900: oklch(0.256 0.041 130.57);
+  --color-brutal-lime-950: oklch(0.196 0.032 130.49);
+  --color-brutal-lime: var(--color-brutal-lime-400);
+
+  --color-brutal-red-50: oklch(0.968 0.014 22.88);
+  --color-brutal-red-100: oklch(0.926 0.034 20.05);
+  --color-brutal-red-200: oklch(0.854 0.072 22.92);
+  --color-brutal-red-300: oklch(0.781 0.118 25.18);
+  --color-brutal-red-400: oklch(0.711 0.168 28.04);
+  --color-brutal-red-500: oklch(0.627 0.209 32.98);
+  --color-brutal-red-600: oklch(0.528 0.176 33.04);
+  --color-brutal-red-700: oklch(0.431 0.144 33.03);
+  --color-brutal-red-800: oklch(0.331 0.11 33.1);
+  --color-brutal-red-900: oklch(0.243 0.081 33.19);
+  --color-brutal-red-950: oklch(0.185 0.061 34.2);
+  --color-brutal-red: var(--color-brutal-red-400);
+
+  --color-brutal-stone-50: oklch(0.974 0.002 67.9);
+  --color-brutal-stone-100: oklch(0.947 0.003 67.83);
+  --color-brutal-stone-200: oklch(0.896 0.008 73.73);
+  --color-brutal-stone-300: oklch(0.845 0.014 71.31);
+  --color-brutal-stone-400: oklch(0.789 0.014 71.29);
+  --color-brutal-stone-500: oklch(0.682 0.012 76.55);
+  --color-brutal-stone-600: oklch(0.569 0.01 67.63);
+  --color-brutal-stone-700: oklch(0.466 0.008 67.63);
+  --color-brutal-stone-800: oklch(0.354 0.007 67.62);
+  --color-brutal-stone-900: oklch(0.249 0.005 67.61);
+  --color-brutal-stone-950: oklch(0.187 0.003 67.68);
+  --color-brutal-stone: var(--color-brutal-stone-400);
+
+  --color-brutal-cream-50: oklch(1 0 0);
+  --color-brutal-cream-100: oklch(0.991 0.01 87.41);
+  --color-brutal-cream-200: oklch(0.986 0.015 86.39);
+  --color-brutal-cream-300: oklch(0.878 0.18 95.13);
+  --color-brutal-cream-400: oklch(0.777 0.16 95.27);
+  --color-brutal-cream-500: oklch(0.663 0.136 95.2);
+  --color-brutal-cream-600: oklch(0.561 0.115 95.02);
+  --color-brutal-cream-700: oklch(0.457 0.094 95.72);
+  --color-brutal-cream-800: oklch(0.352 0.072 94.83);
+  --color-brutal-cream-900: oklch(0.242 0.05 95.07);
+  --color-brutal-cream-950: oklch(0.189 0.039 94.73);
+  --color-brutal-cream: var(--color-brutal-cream-200);
+}
+
+@theme inline {
+  --color-background: var(--layer-page);
+  --color-foreground: var(--foreground);
+  --color-foreground-strong: var(--foreground-strong);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-foreground-placeholder: var(--foreground-placeholder);
+  --color-foreground-disabled: var(--foreground-disabled);
+  --color-foreground-inverse: var(--foreground-inverse);
+
+  --color-layer-page: var(--layer-page);
+  --color-layer-panel: var(--layer-panel);
+  --color-layer-muted: var(--layer-muted);
+  --color-layer-field: var(--layer-field);
+  --color-layer-popover: var(--layer-popover);
+  --color-layer-backdrop: var(--layer-backdrop);
+
+  --color-line-strong: var(--line-strong);
+  --color-line: var(--line);
+  --color-line-subtle: var(--line-subtle);
+  --color-line-muted: var(--line-muted);
+  --color-line-focus: var(--line-focus);
+
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+  --color-primary-950: var(--primary-950);
+
+  --color-accent-50: var(--accent-50);
+  --color-accent-100: var(--accent-100);
+  --color-accent-200: var(--accent-200);
+  --color-accent-300: var(--accent-300);
+  --color-accent-400: var(--accent-400);
+  --color-accent-500: var(--accent-500);
+  --color-accent-600: var(--accent-600);
+  --color-accent-700: var(--accent-700);
+  --color-accent-800: var(--accent-800);
+  --color-accent-900: var(--accent-900);
+  --color-accent-950: var(--accent-950);
+
+  --color-secondary-50: var(--secondary-50);
+  --color-secondary-100: var(--secondary-100);
+  --color-secondary-200: var(--secondary-200);
+  --color-secondary-300: var(--secondary-300);
+  --color-secondary-400: var(--secondary-400);
+  --color-secondary-500: var(--secondary-500);
+  --color-secondary-600: var(--secondary-600);
+  --color-secondary-700: var(--secondary-700);
+  --color-secondary-800: var(--secondary-800);
+  --color-secondary-900: var(--secondary-900);
+  --color-secondary-950: var(--secondary-950);
+
+  --color-info-dark: var(--state-info-dark);
+  --color-info-base: var(--state-info-base);
+  --color-info-light: var(--state-info-light);
+  --color-info-lighter: var(--state-info-lighter);
+
+  --color-success-dark: var(--state-success-dark);
+  --color-success-base: var(--state-success-base);
+  --color-success-light: var(--state-success-light);
+  --color-success-lighter: var(--state-success-lighter);
+
+  --color-warning-dark: var(--state-warning-dark);
+  --color-warning-base: var(--state-warning-base);
+  --color-warning-light: var(--state-warning-light);
+  --color-warning-lighter: var(--state-warning-lighter);
+
+  --color-danger-dark: var(--state-danger-dark);
+  --color-danger-base: var(--state-danger-base);
+  --color-danger-light: var(--state-danger-light);
+  --color-danger-lighter: var(--state-danger-lighter);
+
+  --shadow-xs: var(--theme-shadow-xs);
+  --shadow-sm: var(--theme-shadow-sm);
+  --shadow-md: var(--theme-shadow-md);
+  --shadow-lg: var(--theme-shadow-lg);
+  --shadow-xl: var(--theme-shadow-xl);
+
+  --font-heading: var(--heading-font);
+  --font-sans: var(--sans-font);
+  --font-mono: var(--mono-font);
+}
+
+:where(:root),
+[data-theme="brutal"] {
+  --layer-page: oklch(1 0 0);
+  --foreground: oklch(0.18 0.006 25);
+  --foreground-strong: oklch(0.18 0.006 25);
+  --foreground-muted: oklch(0.18 0.006 25 / 0.6);
+  --foreground-placeholder: oklch(0.18 0.006 25 / 0.5);
+  --foreground-disabled: oklch(0.18 0.006 25 / 0.3);
+  --foreground-inverse: oklch(1 0 0);
+
+  --layer-panel: oklch(1 0 0);
+  --layer-muted: oklch(0.18 0.006 25 / 0.05);
+  --layer-field: oklch(1 0 0);
+  --layer-popover: oklch(1 0 0);
+  --layer-backdrop: oklch(0 0 0 / 0.75);
+
+  --line-strong: oklch(0.18 0.006 25);
+  --line: oklch(0.18 0.006 25);
+  --line-subtle: oklch(0.18 0.006 25 / 0.3);
+  --line-muted: oklch(0.18 0.006 25 / 0.15);
+  --line-focus: oklch(0.18 0.006 25);
+
+  --primary-50: var(--color-brutal-yellow-50);
+  --primary-100: var(--color-brutal-yellow-100);
+  --primary-200: var(--color-brutal-yellow-200);
+  --primary-300: var(--color-brutal-yellow-300);
+  --primary-400: var(--color-brutal-yellow);
+  --primary-500: var(--color-brutal-yellow-500);
+  --primary-600: var(--color-brutal-yellow-600);
+  --primary-700: var(--color-brutal-yellow-700);
+  --primary-800: var(--color-brutal-yellow-800);
+  --primary-900: var(--color-brutal-yellow-900);
+  --primary-950: var(--color-brutal-yellow-950);
+
+  --accent-50: var(--color-brutal-pink-50);
+  --accent-100: var(--color-brutal-pink-100);
+  --accent-200: var(--color-brutal-pink-200);
+  --accent-300: var(--color-brutal-pink-300);
+  --accent-400: var(--color-brutal-pink);
+  --accent-500: var(--color-brutal-pink-500);
+  --accent-600: var(--color-brutal-pink-600);
+  --accent-700: var(--color-brutal-pink-700);
+  --accent-800: var(--color-brutal-pink-800);
+  --accent-900: var(--color-brutal-pink-900);
+  --accent-950: var(--color-brutal-pink-950);
+
+  --secondary-50: var(--color-brutal-stone-50);
+  --secondary-100: var(--color-brutal-stone-100);
+  --secondary-200: var(--color-brutal-stone-200);
+  --secondary-300: var(--color-brutal-stone-300);
+  --secondary-400: var(--color-brutal-stone);
+  --secondary-500: var(--color-brutal-stone-500);
+  --secondary-600: var(--color-brutal-stone-600);
+  --secondary-700: var(--color-brutal-stone-700);
+  --secondary-800: var(--color-brutal-stone-800);
+  --secondary-900: var(--color-brutal-stone-900);
+  --secondary-950: var(--color-brutal-stone-950);
+
+  --state-info-dark: var(--color-brutal-cyan-800);
+  --state-info-base: var(--color-brutal-cyan);
+  --state-info-light: var(--color-brutal-cyan-200);
+  --state-info-lighter: var(--color-brutal-cyan-100);
+
+  --state-success-dark: oklch(0.366 0.09 153.079);
+  --state-success-base: oklch(0.714 0.176 153.079);
+  --state-success-light: oklch(0.91 0.149 153.079);
+  --state-success-lighter: oklch(0.949 0.079 153.079);
+
+  --state-warning-dark: oklch(0.366 0.106 44.441);
+  --state-warning-base: oklch(0.7 0.202 44.441);
+  --state-warning-light: oklch(0.91 0.05 44.441);
+  --state-warning-lighter: oklch(0.949 0.027 44.441);
+
+  --state-danger-dark: var(--color-brutal-red-800);
+  --state-danger-base: oklch(0.616 0.249 26.758);
+  --state-danger-light: var(--color-brutal-red-200);
+  --state-danger-lighter: var(--color-brutal-red-100);
+
+  /* xs: pressed · sm: resting · md: hover/focus · lg: floating overlay · xl: modal */
+  --theme-shadow-xs: 1px 1px 0px var(--line-strong);
+  --theme-shadow-sm: 2px 2px 0px var(--line-strong);
+  --theme-shadow-md: 4px 4px 0px var(--line-strong);
+  --theme-shadow-lg: 4px 4px 0px var(--color-black);
+  --theme-shadow-xl: 6px 6px 0px var(--line-strong);
+
+  --heading-font: "Space Grotesk Variable", "Space Grotesk", system-ui, sans-serif;
+  --sans-font: "Space Grotesk Variable", "Space Grotesk", system-ui, sans-serif;
+  --mono-font: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
+}
+
+[data-theme="elegant"] {
+  --layer-page: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --foreground-strong: oklch(0.21 0.006 285);
+  --foreground-muted: oklch(0.36 0.006 285);
+  --foreground-placeholder: oklch(0.58 0.006 285);
+  --foreground-disabled: oklch(0.7 0.006 286);
+  --foreground-inverse: oklch(1 0 0);
+
+  --layer-panel: oklch(1 0 0);
+  --layer-muted: oklch(0.967 0.001 286);
+  --layer-field: oklch(1 0 0);
+  --layer-popover: oklch(1 0 0);
+  --layer-backdrop: oklch(0 0 0 / 0.75);
+
+  --line-strong: oklch(0.21 0.006 285);
+  --line: oklch(0.84 0.006 285);
+  --line-subtle: oklch(0.92 0.004 286);
+  --line-muted: oklch(25.42% 0 89.37 / 0.08);
+  --line-focus: oklch(0.21 0.006 285);
+
+  --primary-50: var(--color-brutal-yellow-50);
+  --primary-100: var(--color-brutal-yellow-100);
+  --primary-200: var(--color-brutal-yellow-200);
+  --primary-300: var(--color-brutal-yellow-300);
+  --primary-400: var(--color-brutal-yellow);
+  --primary-500: var(--color-brutal-yellow-500);
+  --primary-600: var(--color-brutal-yellow-600);
+  --primary-700: var(--color-brutal-yellow-700);
+  --primary-800: var(--color-brutal-yellow-800);
+  --primary-900: var(--color-brutal-yellow-900);
+  --primary-950: var(--color-brutal-yellow-950);
+
+  --accent-50: var(--color-brutal-pink-50);
+  --accent-100: var(--color-brutal-pink-100);
+  --accent-200: var(--color-brutal-pink-200);
+  --accent-300: var(--color-brutal-pink-300);
+  --accent-400: var(--color-brutal-pink);
+  --accent-500: var(--color-brutal-pink-500);
+  --accent-600: var(--color-brutal-pink-600);
+  --accent-700: var(--color-brutal-pink-700);
+  --accent-800: var(--color-brutal-pink-800);
+  --accent-900: var(--color-brutal-pink-900);
+  --accent-950: var(--color-brutal-pink-950);
+
+  --secondary-50: var(--color-brutal-stone-50);
+  --secondary-100: var(--color-brutal-stone-100);
+  --secondary-200: var(--color-brutal-stone-200);
+  --secondary-300: var(--color-brutal-stone-300);
+  --secondary-400: var(--color-brutal-stone);
+  --secondary-500: var(--color-brutal-stone-500);
+  --secondary-600: var(--color-brutal-stone-600);
+  --secondary-700: var(--color-brutal-stone-700);
+  --secondary-800: var(--color-brutal-stone-800);
+  --secondary-900: var(--color-brutal-stone-900);
+  --secondary-950: var(--color-brutal-stone-950);
+
+  --state-info-dark: var(--color-brutal-cyan-800);
+  --state-info-base: var(--color-brutal-cyan);
+  --state-info-light: var(--color-brutal-cyan-200);
+  --state-info-lighter: var(--color-brutal-cyan-100);
+
+  --state-success-dark: oklch(0.366 0.09 153.079);
+  --state-success-base: oklch(0.714 0.176 153.079);
+  --state-success-light: oklch(0.91 0.149 153.079);
+  --state-success-lighter: oklch(0.949 0.079 153.079);
+
+  --state-warning-dark: oklch(0.366 0.106 44.441);
+  --state-warning-base: oklch(0.7 0.202 44.441);
+  --state-warning-light: oklch(0.91 0.05 44.441);
+  --state-warning-lighter: oklch(0.949 0.027 44.441);
+
+  --state-danger-dark: var(--color-brutal-red-800);
+  --state-danger-base: oklch(0.616 0.249 26.758);
+  --state-danger-light: var(--color-brutal-red-200);
+  --state-danger-lighter: var(--color-brutal-red-100);
+
+  /* xs: pressed · sm: resting · md: hover/focus · lg: floating overlay · xl: modal */
+  --theme-shadow-xs: oklch(0.145 0.002 286.131 / 0.071) 0px 0.5px 0px;
+  --theme-shadow-sm:
+    oklch(0.145 0.002 286.131 / 0.071) 0px 0.5px 0px,
+    oklch(0.145 0.002 286.131 / 0.012) 0px 5px 4px -2px,
+    oklch(0.145 0.002 286.131 / 0.02) 0px 3px 3px -1px,
+    oklch(0.145 0.002 286.131 / 0.039) 0px 1px 2px -1px;
+  --theme-shadow-md:
+    oklch(0.145 0.002 286.131 / 0.071) 0px 0.5px 0px,
+    oklch(0.145 0.002 286.131 / 0.02) 0px 8px 8px -4px,
+    oklch(0.145 0.002 286.131 / 0.027) 0px 5px 5px -2px,
+    oklch(0.145 0.002 286.131 / 0.039) 0px 2px 3px -1px;
+  --theme-shadow-lg:
+    0px 1px 1px oklch(0.21 0.006 285 / 0.1), 0px 0px 0px 1px oklch(0.21 0.006 285 / 0.04),
+    0px 2px 12px -4px oklch(0.21 0.006 285 / 0.16);
+  --theme-shadow-xl:
+    oklch(0.145 0.002 286.131 / 0.071) 0px 0.5px 0px, 0px 0px 0px 1px oklch(0.21 0.006 285 / 0.08),
+    oklch(0.145 0.002 286.131 / 0.031) 0px 18px 24px -12px,
+    oklch(0.145 0.002 286.131 / 0.039) 0px 12px 12px -6px,
+    oklch(0.145 0.002 286.131 / 0.039) 0px 4px 6px -3px;
+
+  --heading-font: "Inter", system-ui, sans-serif;
+  --sans-font: "Geist", system-ui, sans-serif;
+  --mono-font: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-theme="elegant"]:not(.light) {
+    --layer-page: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --foreground-strong: oklch(0.95 0 0);
+    --foreground-muted: oklch(0.82 0 0);
+    --foreground-placeholder: oklch(0.72 0.006 286);
+    --foreground-disabled: oklch(0.65 0.006 286);
+    --foreground-inverse: oklch(0.145 0 0);
+
+    --layer-panel: oklch(0.21 0.006 285);
+    --layer-muted: oklch(0.274 0.006 286);
+    --layer-field: oklch(0.21 0.006 285);
+    --layer-popover: oklch(0.145 0 0);
+
+    --line-strong: oklch(0.95 0 0);
+    --line: oklch(0.56 0.006 286);
+    --line-subtle: oklch(0.4 0.006 286);
+    --line-muted: oklch(96% 0 89.37 / 0.08);
+    --line-focus: oklch(0.95 0 0);
+  }
+}
+
+[data-theme="elegant"].dark {
+  --layer-page: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --foreground-strong: oklch(0.95 0 0);
+  --foreground-muted: oklch(0.82 0 0);
+  --foreground-placeholder: oklch(0.72 0.006 286);
+  --foreground-disabled: oklch(0.65 0.006 286);
+  --foreground-inverse: oklch(0.145 0 0);
+
+  --layer-panel: oklch(0.21 0.006 285);
+  --layer-muted: oklch(0.274 0.006 286);
+  --layer-field: oklch(0.21 0.006 285);
+  --layer-popover: oklch(0.145 0 0);
+
+  --line-strong: oklch(0.95 0 0);
+  --line: oklch(0.56 0.006 286);
+  --line-subtle: oklch(0.4 0.006 286);
+  --line-muted: oklch(96% 0 89.37 / 0.08);
+  --line-focus: oklch(0.95 0 0);
+}
+
+*,
+::before,
+::after {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  position: relative;
+}