nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.4

data/src/stylesheets/nitro_kit/tokens.css

@@ -1,11 +1,9 @@
 @layer nitro-kit.tokens {
   :where(:root) {
-    --nk-font-sans:
-      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    --nk-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --nk-font-mono:
-      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+    --nk-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
 
     --nk-text-xs: 0.75rem;
     --nk-text-sm: 0.875rem;
@@ -25,6 +23,19 @@
     --nk-typeset-leading: 1.75;
     --nk-typeset-flow: 1.25em;
 
+    /* The title scale. Four roles cover every owned title and legend: page
+       for the one page heading, section for full-width section headers,
+       surface for cards, dialogs, sheets, empty states, and fieldsets, and
+       compact for control-group legends and status titles. */
+    --nk-title-page-size: var(--nk-text-2xl);
+    --nk-title-page-weight: var(--nk-font-weight-bold);
+    --nk-title-section-size: var(--nk-text-xl);
+    --nk-title-section-weight: var(--nk-font-weight-bold);
+    --nk-title-surface-size: var(--nk-text-lg);
+    --nk-title-surface-weight: var(--nk-font-weight-bold);
+    --nk-title-compact-size: var(--nk-text-sm);
+    --nk-title-compact-weight: var(--nk-font-weight-semibold);
+
     --nk-font-weight-normal: 400;
     --nk-font-weight-medium: 500;
     --nk-font-weight-semibold: 600;
@@ -38,16 +49,21 @@
     --nk-radius-lg: 0.5rem;
     --nk-radius-xl: 0.75rem;
     --nk-radius-full: 9999px;
+    --nk-button-radius: initial;
 
     --nk-border-width: 1px;
     --nk-focus-width: 2px;
     --nk-focus-offset: 2px;
+    --nk-disabled-opacity: 0.6;
 
-    --nk-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.08);
-    --nk-shadow-md:
-      0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
-    --nk-shadow-lg:
-      0 10px 15px -3px oklch(0 0 0 / 0.12), 0 4px 6px -4px oklch(0 0 0 / 0.12);
+    --nk-shadow-xs: 0 1px 2px 0
+      color-mix(in oklab, var(--nk-black) 5%, transparent);
+    --nk-shadow-sm: 0 1px 2px
+      color-mix(in oklab, var(--nk-black) 8%, transparent);
+    --nk-shadow-md: 0 4px 6px -1px color-mix(in oklab, var(--nk-black) 10%, transparent),
+      0 2px 4px -2px color-mix(in oklab, var(--nk-black) 10%, transparent);
+    --nk-shadow-lg: 0 10px 15px -3px color-mix(in oklab, var(--nk-black) 12%, transparent),
+      0 4px 6px -4px color-mix(in oklab, var(--nk-black) 12%, transparent);
 
     --nk-duration-fast: 100ms;
     --nk-duration-normal: 150ms;
@@ -55,11 +71,27 @@
     --nk-ease: cubic-bezier(0.4, 0, 0.2, 1);
 
     --nk-control-height-xs: 1.5rem;
-    --nk-control-height-sm: 1.75rem;
-    --nk-control-height-md: 2.5rem;
+    --nk-control-height-sm: 2rem;
+    --nk-control-height-md: 2.25rem;
     --nk-control-height-lg: 2.75rem;
     --nk-control-height-xl: 3.5rem;
 
+    --nk-control-padding-inline: calc(var(--nk-space) * 3);
+
+    --nk-choice-size-md: 1.125rem;
+    --nk-choice-size-lg: 1.5rem;
+
+    --nk-icon-size-xs: 0.75rem;
+    --nk-icon-size-sm: 1rem;
+    --nk-icon-size-md: 1.25rem;
+    --nk-icon-size-lg: 1.75rem;
+    --nk-icon-size-xl: 2.25rem;
+
+    --nk-avatar-size-xs: 1.5rem;
+    --nk-avatar-size-sm: 2rem;
+    --nk-avatar-size-md: 3rem;
+    --nk-avatar-size-lg: 4rem;
+
     --nk-content-sm: 24rem;
     --nk-content-md: 32rem;
     --nk-content-lg: 48rem;
@@ -67,89 +99,479 @@
 
     --nk-app-shell-sidebar-width: 16rem;
     --nk-app-shell-topbar-height: 3.5rem;
+
+    /* The poles of every scale. */
+    --nk-white: #fff;
+    --nk-black: #000;
+
+    /* The color scales. Every family ships all eleven steps, appearance
+       independent; the appearance blocks below sample them. 50-200 are tints
+       and surfaces, 400-600 accents and markers, 700-950 content.
+    
+       Harmonized derivations of the Tailwind CSS v4 palette (MIT, (c) Tailwind
+       Labs Inc.): each family's lightness, chroma, and hue follow smooth local
+       fits through the source ramp, bounded to an imperceptible distance
+       (OKLab delta E <= 0.01 per value) and never more saturated outside sRGB
+       than the source. */
+    --nk-slate-50: oklch(98.4% 0.004 247.3);
+    --nk-slate-100: oklch(96.8% 0.006 249.8);
+    --nk-slate-200: oklch(93.6% 0.013 252.5);
+    --nk-slate-300: oklch(85.9% 0.023 254.2);
+    --nk-slate-400: oklch(71.2% 0.038 255.7);
+    --nk-slate-500: oklch(55.7% 0.045 257.6);
+    --nk-slate-600: oklch(45% 0.045 257.1);
+    --nk-slate-700: oklch(36.4% 0.043 257.5);
+    --nk-slate-800: oklch(28.5% 0.042 260.9);
+    --nk-slate-900: oklch(20.6% 0.042 263.3);
+    --nk-slate-950: oklch(12.9% 0.042 265.8);
+
+    --nk-gray-50: oklch(98.5% 0.002 250.4);
+    --nk-gray-100: oklch(96.7% 0.002 260.5);
+    --nk-gray-200: oklch(93.6% 0.005 264.1);
+    --nk-gray-300: oklch(86.2% 0.011 259.5);
+    --nk-gray-400: oklch(71.4% 0.02 261.5);
+    --nk-gray-500: oklch(55.6% 0.027 261.6);
+    --nk-gray-600: oklch(44.9% 0.031 260);
+    --nk-gray-700: oklch(36.4% 0.033 256.9);
+    --nk-gray-800: oklch(28.6% 0.034 260.1);
+    --nk-gray-900: oklch(20.7% 0.033 261.5);
+    --nk-gray-950: oklch(13% 0.028 262.7);
+
+    --nk-zinc-50: oklch(98.5% 0 none);
+    --nk-zinc-100: oklch(96.7% 0.001 286.4);
+    --nk-zinc-200: oklch(93% 0.003 286.3);
+    --nk-zinc-300: oklch(86.1% 0.007 286.3);
+    --nk-zinc-400: oklch(71.4% 0.013 286.1);
+    --nk-zinc-500: oklch(55.5% 0.017 285.9);
+    --nk-zinc-600: oklch(44.7% 0.016 285.8);
+    --nk-zinc-700: oklch(36% 0.012 285.9);
+    --nk-zinc-800: oklch(28.2% 0.008 285.9);
+    --nk-zinc-900: oklch(20.8% 0.005 285.9);
+    --nk-zinc-950: oklch(14% 0.005 285.8);
+
+    --nk-neutral-50: oklch(98.5% 0 none);
+    --nk-neutral-100: oklch(97% 0 none);
+    --nk-neutral-200: oklch(93.2% 0 none);
+    --nk-neutral-300: oklch(86% 0 none);
+    --nk-neutral-400: oklch(71.6% 0 none);
+    --nk-neutral-500: oklch(55.7% 0 none);
+    --nk-neutral-600: oklch(44.7% 0 none);
+    --nk-neutral-700: oklch(36.1% 0 none);
+    --nk-neutral-800: oklch(27.8% 0 none);
+    --nk-neutral-900: oklch(20.7% 0 none);
+    --nk-neutral-950: oklch(14.3% 0 none);
+
+    --nk-stone-50: oklch(98.5% 0.001 114.2);
+    --nk-stone-100: oklch(97% 0.001 85.2);
+    --nk-stone-200: oklch(93.3% 0.003 64.5);
+    --nk-stone-300: oklch(85.9% 0.005 52.4);
+    --nk-stone-400: oklch(71.5% 0.01 56.1);
+    --nk-stone-500: oklch(55.7% 0.012 62.1);
+    --nk-stone-600: oklch(45% 0.012 71.1);
+    --nk-stone-700: oklch(36.4% 0.01 62.3);
+    --nk-stone-800: oklch(27.8% 0.007 44.5);
+    --nk-stone-900: oklch(21.1% 0.006 46.3);
+    --nk-stone-950: oklch(14.7% 0.004 51.8);
+
+    --nk-red-50: oklch(97% 0.013 17.5);
+    --nk-red-100: oklch(93.9% 0.029 17.5);
+    --nk-red-200: oklch(88.4% 0.061 18.3);
+    --nk-red-300: oklch(80.2% 0.113 19.7);
+    --nk-red-400: oklch(71% 0.183 22.3);
+    --nk-red-500: oklch(63.6% 0.237 25.3);
+    --nk-red-600: oklch(57.5% 0.235 27.3);
+    --nk-red-700: oklch(50.7% 0.207 27.6);
+    --nk-red-800: oklch(45.3% 0.178 26.7);
+    --nk-red-900: oklch(38.6% 0.14 25.9);
+    --nk-red-950: oklch(26.8% 0.093 25.8);
+
+    --nk-orange-50: oklch(98.1% 0.015 73.9);
+    --nk-orange-100: oklch(95.2% 0.038 74.5);
+    --nk-orange-200: oklch(90.3% 0.075 71.7);
+    --nk-orange-300: oklch(83% 0.124 65.1);
+    --nk-orange-400: oklch(75.3% 0.173 56.1);
+    --nk-orange-500: oklch(70.5% 0.203 47.6);
+    --nk-orange-600: oklch(64.6% 0.212 41.1);
+    --nk-orange-700: oklch(55.3% 0.185 38.4);
+    --nk-orange-800: oklch(48% 0.158 37.7);
+    --nk-orange-900: oklch(39.8% 0.122 37.7);
+    --nk-orange-950: oklch(27.6% 0.079 36.7);
+
+    --nk-amber-50: oklch(98.8% 0.016 94.9);
+    --nk-amber-100: oklch(96% 0.069 96.5);
+    --nk-amber-200: oklch(92.4% 0.118 95.3);
+    --nk-amber-300: oklch(87.9% 0.167 92.1);
+    --nk-amber-400: oklch(82.8% 0.179 84.4);
+    --nk-amber-500: oklch(76.9% 0.178 70.1);
+    --nk-amber-600: oklch(66.6% 0.169 58.3);
+    --nk-amber-700: oklch(55.5% 0.153 49.1);
+    --nk-amber-800: oklch(48.1% 0.135 46.1);
+    --nk-amber-900: oklch(40.4% 0.112 45.4);
+    --nk-amber-950: oklch(28.9% 0.077 46.2);
+
+    --nk-yellow-50: oklch(98.7% 0.021 102.2);
+    --nk-yellow-100: oklch(97.3% 0.071 103.1);
+    --nk-yellow-200: oklch(94.5% 0.13 101.7);
+    --nk-yellow-300: oklch(90.4% 0.175 97.8);
+    --nk-yellow-400: oklch(85.2% 0.189 91.9);
+    --nk-yellow-500: oklch(79.5% 0.174 86);
+    --nk-yellow-600: oklch(68.1% 0.152 75.8);
+    --nk-yellow-700: oklch(55.6% 0.125 66.6);
+    --nk-yellow-800: oklch(48.3% 0.111 61.5);
+    --nk-yellow-900: oklch(41.1% 0.094 57.5);
+    --nk-yellow-950: oklch(29.6% 0.067 54.1);
+
+    --nk-lime-50: oklch(98.6% 0.026 120.7);
+    --nk-lime-100: oklch(96.8% 0.076 122.4);
+    --nk-lime-200: oklch(93.8% 0.129 124.4);
+    --nk-lime-300: oklch(89.7% 0.195 126.6);
+    --nk-lime-400: oklch(84.1% 0.228 128.9);
+    --nk-lime-500: oklch(76.8% 0.223 130.8);
+    --nk-lime-600: oklch(64.8% 0.19 131.7);
+    --nk-lime-700: oklch(53.5% 0.147 131.5);
+    --nk-lime-800: oklch(46.2% 0.125 131);
+    --nk-lime-900: oklch(39.5% 0.1 131.1);
+    --nk-lime-950: oklch(28.4% 0.073 132);
+
+    --nk-green-50: oklch(98.1% 0.017 155.9);
+    --nk-green-100: oklch(96.3% 0.046 156.6);
+    --nk-green-200: oklch(92.6% 0.088 156.1);
+    --nk-green-300: oklch(86.7% 0.151 154.3);
+    --nk-green-400: oklch(79.8% 0.204 151.8);
+    --nk-green-500: oklch(72.3% 0.209 149.6);
+    --nk-green-600: oklch(62.7% 0.184 149.2);
+    --nk-green-700: oklch(52.9% 0.145 150);
+    --nk-green-800: oklch(45.6% 0.121 151.4);
+    --nk-green-900: oklch(38.3% 0.094 152.4);
+    --nk-green-950: oklch(27.6% 0.066 153.1);
+
+    --nk-emerald-50: oklch(97.9% 0.019 165.4);
+    --nk-emerald-100: oklch(95% 0.056 164.5);
+    --nk-emerald-200: oklch(90.6% 0.095 164);
+    --nk-emerald-300: oklch(84.2% 0.143 164.5);
+    --nk-emerald-400: oklch(76.7% 0.167 163.3);
+    --nk-emerald-500: oklch(69.6% 0.16 162.5);
+    --nk-emerald-600: oklch(59.6% 0.135 163.2);
+    --nk-emerald-700: oklch(50.8% 0.108 165.5);
+    --nk-emerald-800: oklch(44% 0.09 167);
+    --nk-emerald-900: oklch(36.9% 0.074 169.2);
+    --nk-emerald-950: oklch(27.1% 0.052 172.3);
+
+    --nk-teal-50: oklch(98.3% 0.011 180.8);
+    --nk-teal-100: oklch(95.5% 0.057 180.5);
+    --nk-teal-200: oklch(91.1% 0.097 180.6);
+    --nk-teal-300: oklch(85.2% 0.136 181);
+    --nk-teal-400: oklch(77.8% 0.142 181.9);
+    --nk-teal-500: oklch(70.3% 0.13 182.5);
+    --nk-teal-600: oklch(60.1% 0.108 184.6);
+    --nk-teal-700: oklch(51% 0.089 186.6);
+    --nk-teal-800: oklch(44.5% 0.077 187.6);
+    --nk-teal-900: oklch(37.6% 0.062 189);
+    --nk-teal-950: oklch(28.6% 0.047 192);
+
+    --nk-cyan-50: oklch(98.3% 0.017 201.2);
+    --nk-cyan-100: oklch(95.8% 0.045 202.8);
+    --nk-cyan-200: oklch(91.8% 0.083 205);
+    --nk-cyan-300: oklch(86.2% 0.126 207.5);
+    --nk-cyan-400: oklch(78.9% 0.144 211.5);
+    --nk-cyan-500: oklch(71.5% 0.133 215.3);
+    --nk-cyan-600: oklch(61% 0.116 221.6);
+    --nk-cyan-700: oklch(52% 0.097 223.4);
+    --nk-cyan-800: oklch(45.5% 0.085 224.7);
+    --nk-cyan-900: oklch(38.8% 0.07 227.1);
+    --nk-cyan-950: oklch(30.9% 0.056 229.8);
+
+    --nk-sky-50: oklch(97.8% 0.011 237.7);
+    --nk-sky-100: oklch(94.9% 0.026 234.2);
+    --nk-sky-200: oklch(90% 0.059 232.1);
+    --nk-sky-300: oklch(82.7% 0.108 230.2);
+    --nk-sky-400: oklch(75.3% 0.153 232.8);
+    --nk-sky-500: oklch(68.5% 0.159 237.3);
+    --nk-sky-600: oklch(58.8% 0.148 242);
+    --nk-sky-700: oklch(50.1% 0.124 242.7);
+    --nk-sky-800: oklch(44.5% 0.104 241.2);
+    --nk-sky-900: oklch(38.1% 0.089 241.3);
+    --nk-sky-950: oklch(30.1% 0.067 242.7);
+
+    --nk-blue-50: oklch(96.8% 0.015 255.3);
+    --nk-blue-100: oklch(93.6% 0.03 254.3);
+    --nk-blue-200: oklch(88.2% 0.059 253.8);
+    --nk-blue-300: oklch(80.4% 0.101 252.6);
+    --nk-blue-400: oklch(70.9% 0.155 254.7);
+    --nk-blue-500: oklch(62.1% 0.205 259.4);
+    --nk-blue-600: oklch(54.9% 0.244 262.8);
+    --nk-blue-700: oklch(48.4% 0.239 264.6);
+    --nk-blue-800: oklch(43.2% 0.201 265.2);
+    --nk-blue-900: oklch(37% 0.15 266);
+    --nk-blue-950: oklch(28.8% 0.087 267.6);
+
+    --nk-indigo-50: oklch(96.2% 0.018 272.3);
+    --nk-indigo-100: oklch(93% 0.033 272.8);
+    --nk-indigo-200: oklch(87% 0.063 273.7);
+    --nk-indigo-300: oklch(78% 0.112 275.2);
+    --nk-indigo-400: oklch(67.6% 0.173 276.7);
+    --nk-indigo-500: oklch(58.4% 0.23 277.2);
+    --nk-indigo-600: oklch(51.4% 0.257 277);
+    --nk-indigo-700: oklch(45.3% 0.241 277);
+    --nk-indigo-800: oklch(40.7% 0.196 277.4);
+    --nk-indigo-900: oklch(34.9% 0.146 278.8);
+    --nk-indigo-950: oklch(26.4% 0.088 281.2);
+
+    --nk-violet-50: oklch(96.8% 0.016 294);
+    --nk-violet-100: oklch(94.5% 0.027 293.9);
+    --nk-violet-200: oklch(89.2% 0.058 293.8);
+    --nk-violet-300: oklch(80.8% 0.106 293.4);
+    --nk-violet-400: oklch(70.3% 0.173 293.4);
+    --nk-violet-500: oklch(60.6% 0.24 292.7);
+    --nk-violet-600: oklch(54.2% 0.279 292.7);
+    --nk-violet-700: oklch(48.8% 0.269 292.7);
+    --nk-violet-800: oklch(43.8% 0.234 293.2);
+    --nk-violet-900: oklch(37.1% 0.192 292.8);
+    --nk-violet-950: oklch(28.8% 0.139 291.6);
+
+    --nk-purple-50: oklch(97.4% 0.014 308.2);
+    --nk-purple-100: oklch(95.2% 0.029 307.4);
+    --nk-purple-200: oklch(90.1% 0.061 306.7);
+    --nk-purple-300: oklch(82.1% 0.114 306.3);
+    --nk-purple-400: oklch(71.4% 0.193 305.5);
+    --nk-purple-500: oklch(62.7% 0.255 303.9);
+    --nk-purple-600: oklch(55.7% 0.286 302.3);
+    --nk-purple-700: oklch(49.6% 0.261 302.2);
+    --nk-purple-800: oklch(44.1% 0.22 303.7);
+    --nk-purple-900: oklch(37.3% 0.182 304);
+    --nk-purple-950: oklch(29.5% 0.145 303.3);
+
+    --nk-fuchsia-50: oklch(97.7% 0.017 319.8);
+    --nk-fuchsia-100: oklch(95.2% 0.035 319.4);
+    --nk-fuchsia-200: oklch(90.3% 0.075 319.7);
+    --nk-fuchsia-300: oklch(82.9% 0.143 321.2);
+    --nk-fuchsia-400: oklch(74.3% 0.228 322.1);
+    --nk-fuchsia-500: oklch(66.5% 0.291 322.3);
+    --nk-fuchsia-600: oklch(59.1% 0.283 322.9);
+    --nk-fuchsia-700: oklch(51.8% 0.243 323.8);
+    --nk-fuchsia-800: oklch(45.9% 0.211 324.8);
+    --nk-fuchsia-900: oklch(39.1% 0.171 325.5);
+    --nk-fuchsia-950: oklch(30.1% 0.135 325.7);
+
+    --nk-pink-50: oklch(97.1% 0.015 343.1);
+    --nk-pink-100: oklch(94.9% 0.027 342.4);
+    --nk-pink-200: oklch(89.9% 0.062 343.3);
+    --nk-pink-300: oklch(81.7% 0.125 346);
+    --nk-pink-400: oklch(72.6% 0.196 349.7);
+    --nk-pink-500: oklch(65.2% 0.242 354.8);
+    --nk-pink-600: oklch(59.2% 0.239 0.2);
+    --nk-pink-700: oklch(52.5% 0.213 3.9);
+    --nk-pink-800: oklch(46.8% 0.188 3.7);
+    --nk-pink-900: oklch(39.8% 0.152 3.1);
+    --nk-pink-950: oklch(29.3% 0.109 3.2);
+
+    --nk-rose-50: oklch(96.9% 0.015 12.9);
+    --nk-rose-100: oklch(94.2% 0.027 11.4);
+    --nk-rose-200: oklch(89% 0.058 10.9);
+    --nk-rose-300: oklch(80.7% 0.112 11.2);
+    --nk-rose-400: oklch(71.3% 0.184 13.5);
+    --nk-rose-500: oklch(64.5% 0.244 16.2);
+    --nk-rose-600: oklch(58.6% 0.243 17.6);
+    --nk-rose-700: oklch(51.4% 0.212 16.9);
+    --nk-rose-800: oklch(46.4% 0.185 13.4);
+    --nk-rose-900: oklch(40% 0.157 10.9);
+    --nk-rose-950: oklch(28.1% 0.107 11.4);
+
+    /* The tint axis shared by Badge, Alert, and Toast. Semantic families
+       default to the same steps as their hue families, so `info` renders
+       exactly like `blue`; override --nk-palette-{semantic} to retheme the
+       tints without moving the raw hues, and --nk-color-{semantic} to move
+       fills and markers. Decorative hues stay the color they name. */
+    --nk-palette-neutral: var(--nk-zinc-400);
+    --nk-palette-info: var(--nk-blue-400);
+    --nk-palette-success: var(--nk-green-400);
+    --nk-palette-warning: var(--nk-amber-400);
+    --nk-palette-destructive: var(--nk-red-400);
+
+    --nk-palette-red: var(--nk-red-400);
+    --nk-palette-orange: var(--nk-orange-400);
+    --nk-palette-amber: var(--nk-amber-400);
+    --nk-palette-yellow: var(--nk-yellow-400);
+    --nk-palette-lime: var(--nk-lime-400);
+    --nk-palette-green: var(--nk-green-400);
+    --nk-palette-emerald: var(--nk-emerald-400);
+    --nk-palette-teal: var(--nk-teal-400);
+    --nk-palette-cyan: var(--nk-cyan-400);
+    --nk-palette-sky: var(--nk-sky-400);
+    --nk-palette-blue: var(--nk-blue-400);
+    --nk-palette-indigo: var(--nk-indigo-400);
+    --nk-palette-violet: var(--nk-violet-400);
+    --nk-palette-purple: var(--nk-purple-400);
+    --nk-palette-fuchsia: var(--nk-fuchsia-400);
+    --nk-palette-pink: var(--nk-pink-400);
+    --nk-palette-rose: var(--nk-rose-400);
   }
 
   :where(:root, [data-theme="light"]) {
     color-scheme: light;
 
-    --nk-color-canvas: oklch(0.993 0 0);
-    --nk-color-surface: oklch(1 0 0);
-    --nk-color-elevated: oklch(0.985 0 0);
-    --nk-color-foreground: oklch(0.21 0.006 285.885);
-    --nk-color-muted: oklch(0.967 0.001 286.375);
-    --nk-color-muted-foreground: oklch(0.552 0.016 285.938);
-    --nk-color-border: oklch(0.92 0.004 286.32);
-    --nk-color-focus: oklch(0.546 0.245 262.881);
-    --nk-color-primary: oklch(0.274 0.006 286.033);
-    --nk-color-primary-foreground: oklch(1 0 0);
-    --nk-color-neutral: oklch(0.552 0.016 285.938);
-    --nk-color-neutral-content: oklch(0.37 0.013 285.805);
-    --nk-color-info: oklch(0.546 0.245 262.881);
-    --nk-color-info-content: oklch(0.424 0.199 265.638);
-    --nk-color-success: oklch(0.627 0.194 149.214);
-    --nk-color-success-content: oklch(0.393 0.095 152.535);
-    --nk-color-warning: oklch(0.681 0.162 75.834);
-    --nk-color-warning-content: oklch(0.421 0.095 57.708);
-    --nk-color-danger: oklch(0.577 0.237 25.331);
-    --nk-color-danger-foreground: oklch(1 0 0);
-    --nk-color-danger-content: oklch(0.444 0.177 26.899);
-    --nk-color-overlay: oklch(0 0 0 / 0.5);
+    --nk-color-canvas: color-mix(
+      in oklab,
+      var(--nk-zinc-50) 47%,
+      var(--nk-white)
+    );
+    --nk-color-surface: var(--nk-white);
+    --nk-color-elevated: var(--nk-zinc-50);
+    --nk-color-foreground: var(--nk-zinc-900);
+    --nk-color-muted: var(--nk-zinc-100);
+    --nk-color-muted-foreground: var(--nk-zinc-500);
+    --nk-color-border: var(--nk-zinc-200);
+    --nk-color-focus: var(--nk-blue-600);
+    --nk-color-primary: var(--nk-zinc-800);
+    --nk-color-primary-foreground: var(--nk-white);
+    --nk-color-neutral: var(--nk-zinc-500);
+    --nk-color-neutral-content: var(--nk-zinc-700);
+    --nk-color-info: var(--nk-blue-600);
+    --nk-color-info-content: var(--nk-blue-800);
+    --nk-color-success: var(--nk-green-600);
+    --nk-color-success-content: var(--nk-green-900);
+    --nk-color-warning: var(--nk-yellow-600);
+    --nk-color-warning-content: var(--nk-yellow-900);
+    --nk-color-destructive: var(--nk-red-600);
+    --nk-color-destructive-foreground: var(--nk-white);
+    --nk-color-destructive-content: var(--nk-red-800);
+    --nk-color-overlay: color-mix(in oklab, var(--nk-black) 50%, transparent);
+
+    --nk-palette-neutral-content: var(--nk-zinc-700);
+    --nk-palette-info-content: var(--nk-blue-800);
+    --nk-palette-success-content: var(--nk-green-800);
+    --nk-palette-warning-content: var(--nk-amber-800);
+    --nk-palette-destructive-content: var(--nk-red-700);
+
+    --nk-palette-red-content: var(--nk-red-700);
+    --nk-palette-orange-content: var(--nk-orange-800);
+    --nk-palette-amber-content: var(--nk-amber-800);
+    --nk-palette-yellow-content: var(--nk-yellow-800);
+    --nk-palette-lime-content: var(--nk-lime-800);
+    --nk-palette-green-content: var(--nk-green-800);
+    --nk-palette-emerald-content: var(--nk-emerald-800);
+    --nk-palette-teal-content: var(--nk-teal-800);
+    --nk-palette-cyan-content: var(--nk-cyan-800);
+    --nk-palette-sky-content: var(--nk-sky-800);
+    --nk-palette-blue-content: var(--nk-blue-800);
+    --nk-palette-indigo-content: var(--nk-indigo-700);
+    --nk-palette-violet-content: var(--nk-violet-700);
+    --nk-palette-purple-content: var(--nk-purple-700);
+    --nk-palette-fuchsia-content: var(--nk-fuchsia-700);
+    --nk-palette-pink-content: var(--nk-pink-700);
+    --nk-palette-rose-content: var(--nk-rose-700);
   }
 
   @media (prefers-color-scheme: dark) {
     :where(:root:not([data-theme])) {
       color-scheme: dark;
 
-      --nk-color-canvas: oklch(0.141 0.005 285.823);
-      --nk-color-surface: oklch(0.178 0.006 285.885);
-      --nk-color-elevated: oklch(0.21 0.006 285.885);
-      --nk-color-foreground: oklch(0.967 0.001 286.375);
-      --nk-color-muted: oklch(0.274 0.006 286.033);
-      --nk-color-muted-foreground: oklch(0.705 0.015 286.067);
-      --nk-color-border: oklch(0.37 0.013 285.805);
-      --nk-color-focus: oklch(0.488 0.243 264.376);
-      --nk-color-primary: oklch(1 0 0);
-      --nk-color-primary-foreground: oklch(0.274 0.006 286.033);
-      --nk-color-neutral: oklch(0.705 0.015 286.067);
-      --nk-color-neutral-content: oklch(0.92 0.004 286.32);
-      --nk-color-info: oklch(0.623 0.214 259.815);
-      --nk-color-info-content: oklch(0.882 0.059 254.128);
-      --nk-color-success: oklch(0.723 0.219 149.579);
-      --nk-color-success-content: oklch(0.925 0.084 155.995);
-      --nk-color-warning: oklch(0.828 0.189 84.429);
-      --nk-color-warning-content: oklch(0.945 0.129 101.54);
-      --nk-color-danger: oklch(0.577 0.245 27.325);
-      --nk-color-danger-foreground: oklch(0.985 0 0);
-      --nk-color-danger-content: oklch(0.704 0.191 22.216);
-      --nk-color-overlay: oklch(0 0 0 / 0.65);
+      --nk-color-canvas: var(--nk-zinc-950);
+      --nk-color-surface: color-mix(
+        in oklab,
+        var(--nk-zinc-950) 45%,
+        var(--nk-zinc-900)
+      );
+      --nk-color-elevated: var(--nk-zinc-900);
+      --nk-color-foreground: var(--nk-zinc-100);
+      --nk-color-muted: var(--nk-zinc-800);
+      --nk-color-muted-foreground: var(--nk-zinc-400);
+      --nk-color-border: var(--nk-zinc-800);
+      --nk-color-focus: var(--nk-blue-700);
+      --nk-color-primary: var(--nk-white);
+      --nk-color-primary-foreground: var(--nk-zinc-800);
+      --nk-color-neutral: var(--nk-zinc-400);
+      --nk-color-neutral-content: var(--nk-zinc-200);
+      --nk-color-info: var(--nk-blue-500);
+      --nk-color-info-content: var(--nk-blue-200);
+      --nk-color-success: var(--nk-green-500);
+      --nk-color-success-content: var(--nk-green-200);
+      --nk-color-warning: var(--nk-amber-400);
+      --nk-color-warning-content: var(--nk-yellow-200);
+      --nk-color-destructive: var(--nk-red-600);
+      --nk-color-destructive-foreground: var(--nk-zinc-50);
+      --nk-color-destructive-content: var(--nk-red-400);
+      --nk-color-overlay: color-mix(in oklab, var(--nk-black) 65%, transparent);
+
+      --nk-palette-neutral-content: var(--nk-zinc-200);
+      --nk-palette-info-content: var(--nk-blue-200);
+      --nk-palette-success-content: var(--nk-green-200);
+      --nk-palette-warning-content: var(--nk-amber-200);
+      --nk-palette-destructive-content: var(--nk-red-200);
+
+      --nk-palette-red-content: var(--nk-red-200);
+      --nk-palette-orange-content: var(--nk-orange-200);
+      --nk-palette-amber-content: var(--nk-amber-200);
+      --nk-palette-yellow-content: var(--nk-yellow-200);
+      --nk-palette-lime-content: var(--nk-lime-200);
+      --nk-palette-green-content: var(--nk-green-200);
+      --nk-palette-emerald-content: var(--nk-emerald-200);
+      --nk-palette-teal-content: var(--nk-teal-200);
+      --nk-palette-cyan-content: var(--nk-cyan-200);
+      --nk-palette-sky-content: var(--nk-sky-200);
+      --nk-palette-blue-content: var(--nk-blue-200);
+      --nk-palette-indigo-content: var(--nk-indigo-200);
+      --nk-palette-violet-content: var(--nk-violet-200);
+      --nk-palette-purple-content: var(--nk-purple-200);
+      --nk-palette-fuchsia-content: var(--nk-fuchsia-200);
+      --nk-palette-pink-content: var(--nk-pink-200);
+      --nk-palette-rose-content: var(--nk-rose-200);
     }
   }
 
   :where([data-theme="dark"]) {
     color-scheme: dark;
 
-    --nk-color-canvas: oklch(0.141 0.005 285.823);
-    --nk-color-surface: oklch(0.178 0.006 285.885);
-    --nk-color-elevated: oklch(0.21 0.006 285.885);
-    --nk-color-foreground: oklch(0.967 0.001 286.375);
-    --nk-color-muted: oklch(0.274 0.006 286.033);
-    --nk-color-muted-foreground: oklch(0.705 0.015 286.067);
-    --nk-color-border: oklch(0.37 0.013 285.805);
-    --nk-color-focus: oklch(0.488 0.243 264.376);
-    --nk-color-primary: oklch(1 0 0);
-    --nk-color-primary-foreground: oklch(0.274 0.006 286.033);
-    --nk-color-neutral: oklch(0.705 0.015 286.067);
-    --nk-color-neutral-content: oklch(0.92 0.004 286.32);
-    --nk-color-info: oklch(0.623 0.214 259.815);
-    --nk-color-info-content: oklch(0.882 0.059 254.128);
-    --nk-color-success: oklch(0.723 0.219 149.579);
-    --nk-color-success-content: oklch(0.925 0.084 155.995);
-    --nk-color-warning: oklch(0.828 0.189 84.429);
-    --nk-color-warning-content: oklch(0.945 0.129 101.54);
-    --nk-color-danger: oklch(0.577 0.245 27.325);
-    --nk-color-danger-foreground: oklch(0.985 0 0);
-    --nk-color-danger-content: oklch(0.704 0.191 22.216);
-    --nk-color-overlay: oklch(0 0 0 / 0.65);
+    --nk-color-canvas: var(--nk-zinc-950);
+    --nk-color-surface: color-mix(
+      in oklab,
+      var(--nk-zinc-950) 45%,
+      var(--nk-zinc-900)
+    );
+    --nk-color-elevated: var(--nk-zinc-900);
+    --nk-color-foreground: var(--nk-zinc-100);
+    --nk-color-muted: var(--nk-zinc-800);
+    --nk-color-muted-foreground: var(--nk-zinc-400);
+    --nk-color-border: var(--nk-zinc-800);
+    --nk-color-focus: var(--nk-blue-700);
+    --nk-color-primary: var(--nk-white);
+    --nk-color-primary-foreground: var(--nk-zinc-800);
+    --nk-color-neutral: var(--nk-zinc-400);
+    --nk-color-neutral-content: var(--nk-zinc-200);
+    --nk-color-info: var(--nk-blue-500);
+    --nk-color-info-content: var(--nk-blue-200);
+    --nk-color-success: var(--nk-green-500);
+    --nk-color-success-content: var(--nk-green-200);
+    --nk-color-warning: var(--nk-amber-400);
+    --nk-color-warning-content: var(--nk-yellow-200);
+    --nk-color-destructive: var(--nk-red-600);
+    --nk-color-destructive-foreground: var(--nk-zinc-50);
+    --nk-color-destructive-content: var(--nk-red-400);
+    --nk-color-overlay: color-mix(in oklab, var(--nk-black) 65%, transparent);
+
+    --nk-palette-neutral-content: var(--nk-zinc-200);
+    --nk-palette-info-content: var(--nk-blue-200);
+    --nk-palette-success-content: var(--nk-green-200);
+    --nk-palette-warning-content: var(--nk-amber-200);
+    --nk-palette-destructive-content: var(--nk-red-200);
+
+    --nk-palette-red-content: var(--nk-red-200);
+    --nk-palette-orange-content: var(--nk-orange-200);
+    --nk-palette-amber-content: var(--nk-amber-200);
+    --nk-palette-yellow-content: var(--nk-yellow-200);
+    --nk-palette-lime-content: var(--nk-lime-200);
+    --nk-palette-green-content: var(--nk-green-200);
+    --nk-palette-emerald-content: var(--nk-emerald-200);
+    --nk-palette-teal-content: var(--nk-teal-200);
+    --nk-palette-cyan-content: var(--nk-cyan-200);
+    --nk-palette-sky-content: var(--nk-sky-200);
+    --nk-palette-blue-content: var(--nk-blue-200);
+    --nk-palette-indigo-content: var(--nk-indigo-200);
+    --nk-palette-violet-content: var(--nk-violet-200);
+    --nk-palette-purple-content: var(--nk-purple-200);
+    --nk-palette-fuchsia-content: var(--nk-fuchsia-200);
+    --nk-palette-pink-content: var(--nk-pink-200);
+    --nk-palette-rose-content: var(--nk-rose-200);
   }
 
   :where(:root, [data-theme]) {
@@ -184,7 +606,7 @@
       var(--nk-color-primary),
       transparent 10%
     );
-    --nk-color-danger-hover: light-dark(
+    --nk-color-destructive-hover: light-dark(
       oklch(0.54 0.237 25.331),
       oklch(0.59 0.237 25.331)
     );