@tuuject/koi-tokens 0.0.0-stage → 0.1.0

package/dist/panda-preset.js

@@ -0,0 +1,1243 @@
+// GENERATED by packages/tokens/scripts/build.mjs from src/tokens.json. Do not edit.
+export const koiPreset = {
+  "name": "@tuuject/koi-tokens",
+  "conditions": {
+    "extend": {
+      "dark": "[data-theme=dark] &",
+      "light": "[data-theme=light] &",
+      "fontChill": "[data-font=chill] &",
+      "paletteRose": "[data-palette=rose] &"
+    }
+  },
+  "theme": {
+    "extend": {
+      "tokens": {
+        "colors": {
+          "secondary": {
+            "50": {
+              "value": "oklch(98.5% 0.002 247.839)",
+              "description": "Neutral secondary, step 50: Tailwind gray-50. 1.0:1 on white, 19.3:1 on `secondary-950`."
+            },
+            "100": {
+              "value": "oklch(96.7% 0.003 264.542)",
+              "description": "Neutral secondary, step 100: Tailwind gray-100. 1.1:1 on white, 18.3:1 on `secondary-950`."
+            },
+            "200": {
+              "value": "oklch(92.8% 0.006 264.531)",
+              "description": "Neutral secondary, step 200: Tailwind gray-200. 1.2:1 on white, 16.3:1 on `secondary-950`."
+            },
+            "300": {
+              "value": "oklch(87.2% 0.01 258.338)",
+              "description": "Neutral secondary, step 300: Tailwind gray-300. 1.5:1 on white, 13.7:1 on `secondary-950`."
+            },
+            "400": {
+              "value": "oklch(70.7% 0.022 261.325)",
+              "description": "Neutral secondary, step 400: Tailwind gray-400. 2.6:1 on white, 7.7:1 on `secondary-950`."
+            },
+            "500": {
+              "value": "oklch(55.1% 0.027 264.364)",
+              "description": "Neutral secondary, step 500: Tailwind gray-500. 4.8:1 on white, 4.2:1 on `secondary-950`."
+            },
+            "600": {
+              "value": "oklch(44.6% 0.03 256.802)",
+              "description": "Neutral secondary, step 600: Tailwind gray-600. 7.6:1 on white, 2.7:1 on `secondary-950`."
+            },
+            "700": {
+              "value": "oklch(37.3% 0.034 259.733)",
+              "description": "Neutral secondary, step 700: Tailwind gray-700. 10.3:1 on white, 2.0:1 on `secondary-950`."
+            },
+            "800": {
+              "value": "oklch(27.8% 0.033 256.848)",
+              "description": "Neutral secondary, step 800: Tailwind gray-800. 14.7:1 on white, 1.4:1 on `secondary-950`."
+            },
+            "900": {
+              "value": "oklch(21% 0.034 264.665)",
+              "description": "Neutral secondary, step 900: Tailwind gray-900. 17.7:1 on white, 1.1:1 on `secondary-950`."
+            },
+            "950": {
+              "value": "oklch(13% 0.028 261.692)",
+              "description": "Neutral secondary, step 950: Tailwind gray-950. 20.1:1 on white, 1.0:1 on `secondary-950`. The dark-theme page ground (`page-bg`)."
+            }
+          },
+          "warning": {
+            "50": {
+              "value": "oklch(98.7% 0.026 102.212)",
+              "description": "Warning, step 50: Tailwind yellow-50. 1.0:1 on white, 19.4:1 on `secondary-950`."
+            },
+            "100": {
+              "value": "oklch(97.3% 0.071 103.193)",
+              "description": "Warning, step 100: Tailwind yellow-100. 1.1:1 on white, 18.7:1 on `secondary-950`."
+            },
+            "200": {
+              "value": "oklch(94.5% 0.129 101.54)",
+              "description": "Warning, step 200: Tailwind yellow-200. 1.2:1 on white, 17.3:1 on `secondary-950`."
+            },
+            "300": {
+              "value": "oklch(90.5% 0.182 98.111)",
+              "description": "Warning, step 300: Tailwind yellow-300. 1.3:1 on white, 15.2:1 on `secondary-950`."
+            },
+            "400": {
+              "value": "oklch(85.2% 0.199 91.936)",
+              "description": "Warning, step 400: Tailwind yellow-400. 1.6:1 on white, 12.8:1 on `secondary-950`."
+            },
+            "500": {
+              "value": "oklch(79.5% 0.184 86.047)",
+              "description": "Warning, step 500: Tailwind yellow-500. 1.9:1 on white, 10.5:1 on `secondary-950`."
+            },
+            "600": {
+              "value": "oklch(68.1% 0.162 75.834)",
+              "description": "Warning, step 600: Tailwind yellow-600. 2.9:1 on white, 6.9:1 on `secondary-950`."
+            },
+            "700": {
+              "value": "oklch(55.4% 0.135 66.442)",
+              "description": "Warning, step 700: Tailwind yellow-700. 4.9:1 on white, 4.1:1 on `secondary-950`."
+            },
+            "800": {
+              "value": "oklch(47.6% 0.114 61.907)",
+              "description": "Warning, step 800: Tailwind yellow-800. 6.9:1 on white, 2.9:1 on `secondary-950`."
+            },
+            "900": {
+              "value": "oklch(42.1% 0.095 57.708)",
+              "description": "Warning, step 900: Tailwind yellow-900. 8.7:1 on white, 2.3:1 on `secondary-950`."
+            },
+            "950": {
+              "value": "oklch(28.6% 0.066 53.813)",
+              "description": "Warning, step 950: Tailwind yellow-950. 14.6:1 on white, 1.4:1 on `secondary-950`."
+            }
+          },
+          "error": {
+            "50": {
+              "value": "oklch(97.1% 0.013 17.38)",
+              "description": "Error, step 50: Tailwind red-50. 1.1:1 on white, 18.4:1 on `secondary-950`."
+            },
+            "100": {
+              "value": "oklch(93.6% 0.032 17.717)",
+              "description": "Error, step 100: Tailwind red-100. 1.2:1 on white, 16.5:1 on `secondary-950`."
+            },
+            "200": {
+              "value": "oklch(88.5% 0.062 18.334)",
+              "description": "Error, step 200: Tailwind red-200. 1.4:1 on white, 13.9:1 on `secondary-950`."
+            },
+            "300": {
+              "value": "oklch(80.8% 0.114 19.571)",
+              "description": "Error, step 300: Tailwind red-300. 1.9:1 on white, 10.5:1 on `secondary-950`."
+            },
+            "400": {
+              "value": "oklch(70.4% 0.191 22.216)",
+              "description": "Error, step 400: Tailwind red-400. 2.9:1 on white, 7.0:1 on `secondary-950`."
+            },
+            "500": {
+              "value": "oklch(63.7% 0.237 25.331)",
+              "description": "Error, step 500: Tailwind red-500. 3.8:1 on white, 5.3:1 on `secondary-950`."
+            },
+            "600": {
+              "value": "oklch(57.7% 0.245 27.325)",
+              "description": "Error, step 600: Tailwind red-600. 4.8:1 on white, 4.2:1 on `secondary-950`."
+            },
+            "700": {
+              "value": "oklch(50.5% 0.213 27.518)",
+              "description": "Error, step 700: Tailwind red-700. 6.4:1 on white, 3.1:1 on `secondary-950`."
+            },
+            "800": {
+              "value": "oklch(44.4% 0.177 26.899)",
+              "description": "Error, step 800: Tailwind red-800. 8.4:1 on white, 2.4:1 on `secondary-950`."
+            },
+            "900": {
+              "value": "oklch(39.6% 0.141 25.723)",
+              "description": "Error, step 900: Tailwind red-900. 10.1:1 on white, 2.0:1 on `secondary-950`."
+            },
+            "950": {
+              "value": "oklch(25.8% 0.092 26.042)",
+              "description": "Error, step 950: Tailwind red-950. 16.1:1 on white, 1.2:1 on `secondary-950`."
+            }
+          },
+          "white": {
+            "value": "#ffffff",
+            "description": "Light page ground; text in dark theme; text on buttons."
+          },
+          "black": {
+            "value": "#000000",
+            "description": "Text in light theme."
+          }
+        },
+        "spacing": {
+          "1": {
+            "value": "4px",
+            "description": "Icon-to-label gap inside badges; Tailwind's unit."
+          },
+          "2": {
+            "value": "8px",
+            "description": "Gap between an icon and its label; between a label and its control."
+          },
+          "3": {
+            "value": "12px",
+            "description": "Inner padding of compact containers (tooltips, tab track); stack gap in forms' option lists."
+          },
+          "4": {
+            "value": "16px",
+            "description": "Gap between fields in a form; Alert padding."
+          },
+          "5": {
+            "value": "20px",
+            "description": "Content padding on mobile (the blog's `p-5`)."
+          },
+          "6": {
+            "value": "24px",
+            "description": "Card and Dialog padding; content padding from md up (`md:p-6`)."
+          },
+          "8": {
+            "value": "32px",
+            "description": "Gap between groups and between cards (the blog's `gap-8`)."
+          },
+          "10": {
+            "value": "40px",
+            "description": "Space between list items on mobile (`my-10`)."
+          },
+          "12": {
+            "value": "48px",
+            "description": "Space between list items from md up (`md:my-12`)."
+          },
+          "16": {
+            "value": "64px",
+            "description": "Gap between page sections."
+          }
+        },
+        "radii": {
+          "sm": {
+            "value": "6px",
+            "description": "Checkbox boxes."
+          },
+          "lg": {
+            "value": "8px",
+            "description": "Buttons and icon buttons with `shape=\"rounded\"` (Tailwind `rounded-lg`); tooltips; images inside text."
+          },
+          "xl": {
+            "value": "12px",
+            "description": "Inputs, textareas, selects, alerts, square avatars (the blog's friend avatars)."
+          },
+          "2xl": {
+            "value": "16px",
+            "description": "Spare step between fields (12px) and panels (24px); not used by the components today."
+          },
+          "panel": {
+            "value": "24px",
+            "description": "Cards and toasts (the blog's `.koi-squircle-md`; 48px squircle where `corner-shape: squircle` is supported)."
+          },
+          "dialog": {
+            "value": "32px",
+            "description": "Dialog panels: `radius-lg` (8px) of the footer buttons plus `space-6` (24px) padding, so the panel corner and the button corner share a center and read as concentric."
+          },
+          "bar": {
+            "value": "36px",
+            "description": "Floating bars: the blog's nav pill (`rounded-[2.25rem]`)."
+          },
+          "full": {
+            "value": "9999px",
+            "description": "Buttons, icon buttons, badges, tags, switches, tab tracks, round avatars."
+          }
+        },
+        "sizes": {
+          "control-sm": {
+            "value": "28px",
+            "description": "Small buttons, inputs, tags, avatars."
+          },
+          "control-md": {
+            "value": "36px",
+            "description": "Default height of buttons, inputs, selects, tab buttons and NavMenu items."
+          },
+          "control-lg": {
+            "value": "44px",
+            "description": "Large buttons (the blog's pagination pills), the tab track, the NavMenu logo box, large avatars."
+          },
+          "content-max": {
+            "value": "56rem",
+            "description": "Max width of a reading column (`max-w-4xl`)."
+          },
+          "icon": {
+            "value": "16px",
+            "description": "Icons beside 14px text: md/lg controls, alerts, toasts, NavMenu."
+          },
+          "icon-sm": {
+            "value": "14px",
+            "description": "Icons in small controls and tags."
+          },
+          "icon-xs": {
+            "value": "12px",
+            "description": "Icons beside 12px text: the checkbox tick, a field's error icon."
+          },
+          "icon-lg": {
+            "value": "18px",
+            "description": "Icons beside 16px titles: toasts, the dialog's close button."
+          }
+        },
+        "shadows": {
+          "raised": {
+            "value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+            "description": "The active tab and switch thumbs (`shadow-sm`). Not used on buttons, which are flat."
+          },
+          "float": {
+            "value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+            "description": "Things floating over the page: dialogs, toasts, the nav pill (`shadow-2xl`)."
+          },
+          "float-soft": {
+            "value": "0 25px 50px -12px rgba(0, 0, 0, 0.15)",
+            "description": "Docked floating chrome (the nav bar once scrolled)."
+          }
+        },
+        "blurs": {
+          "panel": {
+            "value": "24px",
+            "description": "Behind `surface-glass` and `backdrop` (`backdrop-blur-xl`)."
+          },
+          "float": {
+            "value": "40px",
+            "description": "Behind `surface-glass-tint` (`backdrop-blur-2xl`)."
+          }
+        },
+        "easings": {
+          "spring": {
+            "value": "cubic-bezier(.47,1.64,.41,.8)"
+          },
+          "out": {
+            "value": "cubic-bezier(0, 0, .2, 1)"
+          }
+        },
+        "durations": {
+          "fast": {
+            "value": "150ms"
+          },
+          "overlay": {
+            "value": "200ms"
+          },
+          "check": {
+            "value": "250ms"
+          },
+          "dialog": {
+            "value": "300ms"
+          },
+          "spring": {
+            "value": "400ms"
+          },
+          "shimmer": {
+            "value": "1.6s"
+          },
+          "spin": {
+            "value": "800ms"
+          },
+          "spin-slow": {
+            "value": "1.6s"
+          },
+          "indeterminate": {
+            "value": "1.2s"
+          },
+          "pulse": {
+            "value": "2s"
+          },
+          "ripple": {
+            "value": "600ms"
+          }
+        },
+        "zIndex": {
+          "dialog": {
+            "value": 900,
+            "description": "Dialog backdrop and popup."
+          },
+          "popup": {
+            "value": 950,
+            "description": "Panels opened from a trigger (SelectPanel), so they work inside a Dialog."
+          },
+          "toast": {
+            "value": 1000,
+            "description": "The toast stack, above everything else."
+          },
+          "tooltip": {
+            "value": 1000,
+            "description": "Tooltips: above dialogs and popups."
+          }
+        }
+      },
+      "semanticTokens": {
+        "colors": {
+          "page-bg": {
+            "value": {
+              "base": "{colors.white}",
+              "_dark": "{colors.secondary.950}"
+            },
+            "description": "Page background. The blog's body `bg-white` / `dark:bg-gray-950`."
+          },
+          "surface": {
+            "value": {
+              "base": "{colors.white}",
+              "_dark": "{colors.secondary.900}"
+            },
+            "description": "Cards, inputs, dialogs, the active tab: anything that sits on `page-bg` as its own object."
+          },
+          "surface-muted": {
+            "value": {
+              "base": "{colors.secondary.100}",
+              "_dark": "{colors.secondary.800}"
+            },
+            "description": "Quiet fills: tab track, progress track, ghost-button hover, disabled inputs."
+          },
+          "surface-glass": {
+            "value": {
+              "base": "rgba(255, 255, 255, 0.8)",
+              "_dark": "color-mix(in oklch, {colors.secondary.950} 70%, transparent)"
+            },
+            "description": "Koi's frosted panel (`bg-white/80 dark:bg-gray-950/70`), always with `blur-panel`. Use over imagery or color: the glass Card."
+          },
+          "surface-glass-tint": {
+            "value": {
+              "base": "rgba(255, 255, 255, 0.8)",
+              "_dark": "color-mix(in oklch, {colors.primary.950} 80%, transparent)"
+            },
+            "description": "Floating chrome: toasts and the blog's nav pill (`dark:bg-primary-950/80`), with `blur-float`."
+          },
+          "backdrop": {
+            "value": {
+              "base": "rgba(0, 0, 0, 0.4)",
+              "_dark": "rgba(0, 0, 0, 0.6)"
+            },
+            "description": "Dimmed layer behind a Dialog, with `blur-panel`."
+          },
+          "tooltip-bg": {
+            "value": {
+              "base": "{colors.secondary.900}",
+              "_dark": "{colors.secondary.100}"
+            },
+            "description": "Tooltip fill: inverted against the page."
+          },
+          "tooltip-text": {
+            "value": {
+              "base": "{colors.white}",
+              "_dark": "{colors.black}"
+            },
+            "description": "Text on `tooltip-bg`."
+          },
+          "text": {
+            "value": {
+              "base": "{colors.black}",
+              "_dark": "{colors.white}"
+            },
+            "description": "Body and heading text on `page-bg`, `surface`, `surface-muted` and the glass surfaces."
+          },
+          "text-muted": {
+            "value": {
+              "base": "rgba(0, 0, 0, 0.6)",
+              "_dark": "rgba(255, 255, 255, 0.6)"
+            },
+            "description": "Secondary text: help text, dates, descriptions, inactive tabs. The blog's `opacity-60`. Reads on `page-bg`, `surface` and `surface-muted`."
+          },
+          "text-disabled": {
+            "value": {
+              "base": "rgba(0, 0, 0, 0.38)",
+              "_dark": "rgba(255, 255, 255, 0.38)"
+            },
+            "description": "Disabled labels and values (exempt from contrast minimums). Never for content."
+          },
+          "text-brand": {
+            "value": {
+              "base": "{colors.primary.700}",
+              "_dark": "{colors.primary.300}"
+            },
+            "description": "Brand-colored text and icons: ghost buttons, active page links, tab focus. On `page-bg`, `surface`, `surface-muted`."
+          },
+          "border": {
+            "value": {
+              "base": "{colors.secondary.200}",
+              "_dark": "{colors.secondary.800}"
+            },
+            "description": "Decorative edges: card outlines, dividers, tag outlines. Not for control edges (too faint)."
+          },
+          "border-control": {
+            "value": "{colors.secondary.500}",
+            "description": "Edges of inputs, selects, checkboxes, radios and the off Switch track. Meets 3:1 on `surface` in both themes."
+          },
+          "border-control-hover": {
+            "value": {
+              "base": "{colors.secondary.600}",
+              "_dark": "{colors.secondary.400}"
+            },
+            "description": "Hovered control edge."
+          },
+          "divider": {
+            "value": {
+              "base": "rgba(0, 0, 0, 0.1)",
+              "_dark": "rgba(255, 255, 255, 0.1)"
+            },
+            "description": "Hairline separators (the blog's `border-black/10 dark:border-white/10`)."
+          },
+          "focus-ring": {
+            "value": {
+              "base": "{colors.primary.600}",
+              "_dark": "{colors.primary.400}"
+            },
+            "description": "2px focus outline on every interactive element, offset 2px (controls: drawn on the edge)."
+          },
+          "action": {
+            "value": "{colors.primary.700}",
+            "description": "Primary buttons, current page, checked controls' fill: the blog's pill button (`bg-primary-700`)."
+          },
+          "action-hover": {
+            "value": "{colors.primary.800}",
+            "description": "Hovered `action`. Darker than the blog's `primary-500` hover so white text stays readable."
+          },
+          "on-action": {
+            "value": "{colors.white}",
+            "description": "Text and icons on `action`, `action-hover`, `control-checked`, `danger`."
+          },
+          "action-subtle": {
+            "value": {
+              "base": "{colors.primary.100}",
+              "_dark": "{colors.primary.950}"
+            },
+            "description": "Secondary buttons and avatar fallbacks."
+          },
+          "action-subtle-hover": {
+            "value": {
+              "base": "{colors.primary.200}",
+              "_dark": "{colors.primary.900}"
+            },
+            "description": "Hovered `action-subtle`."
+          },
+          "on-action-subtle": {
+            "value": {
+              "base": "{colors.primary.800}",
+              "_dark": "{colors.primary.200}"
+            },
+            "description": "Text on `action-subtle`."
+          },
+          "control-checked": {
+            "value": {
+              "base": "{colors.primary.700}",
+              "_dark": "{colors.primary.600}"
+            },
+            "description": "Fill of a checked Checkbox, Radio dot and on Switch track; Progress bar."
+          },
+          "link": {
+            "value": {
+              "base": "{colors.accent.700}",
+              "_dark": "{colors.accent.400}"
+            },
+            "description": "Inline text links, with a dashed `link-border` underline. One step darker than the blog's `accent-600` so it reads at body size."
+          },
+          "link-border": {
+            "value": {
+              "base": "{colors.accent.300}",
+              "_dark": "{colors.accent.800}"
+            },
+            "description": "Dashed underline under `link` (the blog's `prose-a:border-dashed`)."
+          },
+          "link-hover-bg": {
+            "value": {
+              "base": "{colors.accent.100}",
+              "_dark": "{colors.accent.950}"
+            },
+            "description": "Tint behind a hovered link (the blog's `.prose a:hover`)."
+          },
+          "link-hover-border": {
+            "value": {
+              "base": "{colors.accent.500}",
+              "_dark": "{colors.accent.600}"
+            },
+            "description": "Underline of a hovered link."
+          },
+          "danger": {
+            "value": "{colors.error.600}",
+            "description": "Destructive buttons."
+          },
+          "danger-hover": {
+            "value": "{colors.error.700}",
+            "description": "Hovered `danger`."
+          },
+          "info-surface": {
+            "value": {
+              "base": "{colors.primary.50}",
+              "_dark": "{colors.primary.950}"
+            },
+            "description": "Info Alert fill."
+          },
+          "info-border": {
+            "value": {
+              "base": "{colors.primary.200}",
+              "_dark": "{colors.primary.800}"
+            },
+            "description": "Info Alert edge."
+          },
+          "info-text": {
+            "value": {
+              "base": "{colors.primary.800}",
+              "_dark": "{colors.primary.200}"
+            },
+            "description": "Text and icon on `info-surface`."
+          },
+          "warning-surface": {
+            "value": {
+              "base": "{colors.warning.50}",
+              "_dark": "{colors.warning.950}"
+            },
+            "description": "Warning Alert and Badge fill."
+          },
+          "warning-border": {
+            "value": {
+              "base": "{colors.warning.300}",
+              "_dark": "{colors.warning.800}"
+            },
+            "description": "Warning Alert edge."
+          },
+          "warning-text": {
+            "value": {
+              "base": "{colors.warning.800}",
+              "_dark": "{colors.warning.200}"
+            },
+            "description": "Text and icon on `warning-surface`."
+          },
+          "error-surface": {
+            "value": {
+              "base": "{colors.error.50}",
+              "_dark": "{colors.error.950}"
+            },
+            "description": "Error Alert and Badge fill."
+          },
+          "error-border": {
+            "value": {
+              "base": "{colors.error.300}",
+              "_dark": "{colors.error.800}"
+            },
+            "description": "Error Alert edge."
+          },
+          "error-text": {
+            "value": {
+              "base": "{colors.error.700}",
+              "_dark": "{colors.error.300}"
+            },
+            "description": "Text and icon on `error-surface`; Field error messages on `page-bg` / `surface`."
+          },
+          "error-control": {
+            "value": {
+              "base": "{colors.error.600}",
+              "_dark": "{colors.error.400}"
+            },
+            "description": "Edge of an invalid input."
+          },
+          "highlight": {
+            "value": {
+              "base": "{colors.accent.100}",
+              "_dark": "{colors.accent.950}"
+            },
+            "description": "Accent Badge fill: Koi's amber in a small dose."
+          },
+          "on-highlight": {
+            "value": {
+              "base": "{colors.accent.800}",
+              "_dark": "{colors.accent.200}"
+            },
+            "description": "Text on `highlight`."
+          },
+          "nav-item-text": {
+            "value": {
+              "base": "{colors.secondary.700}",
+              "_dark": "{colors.secondary.300}"
+            },
+            "description": "NavMenu items at rest, on page-bg, surface and the nav hover/active fills."
+          },
+          "nav-item-hover": {
+            "value": {
+              "base": "{colors.secondary.50}",
+              "_dark": "{colors.secondary.900}"
+            },
+            "description": "Hovered NavMenu item."
+          },
+          "table-row-hover": {
+            "value": {
+              "base": "{colors.secondary.50}",
+              "_dark": "color-mix(in oklch, {colors.secondary.800} 50%, transparent)"
+            },
+            "description": "Hovered table row. A step lighter than `surface-muted`, the ghost-button hover fill, so a hovered button still stands out in a hovered row."
+          },
+          "nav-item-active": {
+            "value": {
+              "base": "{colors.secondary.100}",
+              "_dark": "{colors.secondary.800}"
+            },
+            "description": "The current NavMenu item, with bold `text`."
+          },
+          "skeleton": {
+            "value": {
+              "base": "{colors.secondary.100}",
+              "_dark": "{colors.secondary.800}"
+            },
+            "description": "Skeleton placeholder fill. Reads on `page-bg` and `surface`."
+          },
+          "skeleton-highlight": {
+            "value": {
+              "base": "{colors.secondary.50}",
+              "_dark": "{colors.secondary.700}"
+            },
+            "description": "The shimmer band that sweeps across Skeleton placeholders."
+          },
+          "prose-text": {
+            "value": {
+              "base": "{colors.secondary.700}",
+              "_dark": "{colors.secondary.300}"
+            },
+            "description": "Running text inside Prose (the blog's `prose-slate` body, a step softer than `text`). Headings, bold and inline code inside Prose stay `text`."
+          },
+          "code-block-bg": {
+            "value": "{colors.secondary.800}",
+            "description": "Code block fill inside Prose: dark in both themes, as in the blog's `prose-slate`. Dark theme lifts it to the 800 step instead of Tailwind's `black / 0.5`, which vanished against `page-bg`."
+          },
+          "code-block-text": {
+            "value": {
+              "base": "{colors.secondary.200}",
+              "_dark": "{colors.secondary.300}"
+            },
+            "description": "Text on `code-block-bg`."
+          },
+          "primary-solid": {
+            "value": "{colors.action}",
+            "description": "Solid Button fill, color=\"primary\"."
+          },
+          "primary-solid-hover": {
+            "value": "{colors.action-hover}",
+            "description": "Hovered solid fill, color=\"primary\"."
+          },
+          "on-primary-solid": {
+            "value": "{colors.on-action}",
+            "description": "Text and icons on the solid fill, color=\"primary\"."
+          },
+          "primary-soft": {
+            "value": "{colors.action-subtle}",
+            "description": "Soft Button fill; also the hover fill of outline and ghost, color=\"primary\"."
+          },
+          "primary-soft-hover": {
+            "value": "{colors.action-subtle-hover}",
+            "description": "Hovered soft fill, color=\"primary\"."
+          },
+          "on-primary-soft": {
+            "value": "{colors.on-action-subtle}",
+            "description": "Text on the soft fill, color=\"primary\"."
+          },
+          "primary-fg": {
+            "value": "{colors.text-brand}",
+            "description": "Text and icons of outline and ghost Buttons, color=\"primary\"."
+          },
+          "primary-edge": {
+            "value": {
+              "base": "{colors.primary.600}",
+              "_dark": "{colors.primary.400}"
+            },
+            "description": "Outline Button edge (3:1+ on page-bg and surface), color=\"primary\"."
+          },
+          "accent-solid": {
+            "value": "{colors.accent.400}",
+            "description": "Solid Button fill, color=\"accent\"."
+          },
+          "accent-solid-hover": {
+            "value": "{colors.accent.300}",
+            "description": "Hovered solid fill, color=\"accent\"."
+          },
+          "on-accent-solid": {
+            "value": "{colors.accent.950}",
+            "description": "Text and icons on the solid fill, color=\"accent\"."
+          },
+          "accent-soft": {
+            "value": {
+              "base": "{colors.accent.100}",
+              "_dark": "{colors.accent.950}"
+            },
+            "description": "Soft Button fill; also the hover fill of outline and ghost, color=\"accent\"."
+          },
+          "accent-soft-hover": {
+            "value": {
+              "base": "{colors.accent.200}",
+              "_dark": "{colors.accent.900}"
+            },
+            "description": "Hovered soft fill, color=\"accent\"."
+          },
+          "on-accent-soft": {
+            "value": {
+              "base": "{colors.accent.800}",
+              "_dark": "{colors.accent.200}"
+            },
+            "description": "Text on the soft fill, color=\"accent\"."
+          },
+          "accent-fg": {
+            "value": {
+              "base": "{colors.accent.700}",
+              "_dark": "{colors.accent.400}"
+            },
+            "description": "Text and icons of outline and ghost Buttons, color=\"accent\"."
+          },
+          "accent-edge": {
+            "value": {
+              "base": "{colors.accent.600}",
+              "_dark": "{colors.accent.500}"
+            },
+            "description": "Outline Button edge (3:1+ on page-bg and surface), color=\"accent\"."
+          },
+          "secondary-solid": {
+            "value": {
+              "base": "{colors.secondary.700}",
+              "_dark": "{colors.secondary.200}"
+            },
+            "description": "Solid Button fill, color=\"secondary\"."
+          },
+          "secondary-solid-hover": {
+            "value": {
+              "base": "{colors.secondary.800}",
+              "_dark": "{colors.secondary.300}"
+            },
+            "description": "Hovered solid fill, color=\"secondary\"."
+          },
+          "on-secondary-solid": {
+            "value": {
+              "base": "{colors.white}",
+              "_dark": "{colors.secondary.950}"
+            },
+            "description": "Text and icons on the solid fill, color=\"secondary\"."
+          },
+          "secondary-soft": {
+            "value": {
+              "base": "{colors.secondary.100}",
+              "_dark": "{colors.secondary.800}"
+            },
+            "description": "Soft Button fill; also the hover fill of outline and ghost, color=\"secondary\"."
+          },
+          "secondary-soft-hover": {
+            "value": {
+              "base": "{colors.secondary.200}",
+              "_dark": "{colors.secondary.700}"
+            },
+            "description": "Hovered soft fill, color=\"secondary\"."
+          },
+          "on-secondary-soft": {
+            "value": {
+              "base": "{colors.secondary.800}",
+              "_dark": "{colors.secondary.100}"
+            },
+            "description": "Text on the soft fill, color=\"secondary\"."
+          },
+          "secondary-fg": {
+            "value": {
+              "base": "{colors.secondary.700}",
+              "_dark": "{colors.secondary.300}"
+            },
+            "description": "Text and icons of outline and ghost Buttons, color=\"secondary\"."
+          },
+          "secondary-edge": {
+            "value": "{colors.secondary.500}",
+            "description": "Outline Button edge (3:1+ on page-bg and surface), color=\"secondary\"."
+          },
+          "warning-solid": {
+            "value": "{colors.warning.400}",
+            "description": "Solid Button fill, color=\"warning\"."
+          },
+          "warning-solid-hover": {
+            "value": "{colors.warning.300}",
+            "description": "Hovered solid fill, color=\"warning\"."
+          },
+          "on-warning-solid": {
+            "value": "{colors.warning.950}",
+            "description": "Text and icons on the solid fill, color=\"warning\"."
+          },
+          "warning-soft": {
+            "value": {
+              "base": "{colors.warning.100}",
+              "_dark": "{colors.warning.950}"
+            },
+            "description": "Soft Button fill; also the hover fill of outline and ghost, color=\"warning\"."
+          },
+          "warning-soft-hover": {
+            "value": {
+              "base": "{colors.warning.200}",
+              "_dark": "{colors.warning.900}"
+            },
+            "description": "Hovered soft fill, color=\"warning\"."
+          },
+          "on-warning-soft": {
+            "value": {
+              "base": "{colors.warning.800}",
+              "_dark": "{colors.warning.200}"
+            },
+            "description": "Text on the soft fill, color=\"warning\"."
+          },
+          "warning-fg": {
+            "value": {
+              "base": "{colors.warning.700}",
+              "_dark": "{colors.warning.400}"
+            },
+            "description": "Text and icons of outline and ghost Buttons, color=\"warning\"."
+          },
+          "warning-edge": {
+            "value": {
+              "base": "{colors.warning.700}",
+              "_dark": "{colors.warning.500}"
+            },
+            "description": "Outline Button edge (3:1+ on page-bg and surface), color=\"warning\"."
+          },
+          "error-solid": {
+            "value": "{colors.danger}",
+            "description": "Solid Button fill, color=\"error\"."
+          },
+          "error-solid-hover": {
+            "value": "{colors.danger-hover}",
+            "description": "Hovered solid fill, color=\"error\"."
+          },
+          "on-error-solid": {
+            "value": "{colors.on-action}",
+            "description": "Text and icons on the solid fill, color=\"error\"."
+          },
+          "error-soft": {
+            "value": {
+              "base": "{colors.error.100}",
+              "_dark": "{colors.error.950}"
+            },
+            "description": "Soft Button fill; also the hover fill of outline and ghost, color=\"error\"."
+          },
+          "error-soft-hover": {
+            "value": {
+              "base": "{colors.error.200}",
+              "_dark": "{colors.error.900}"
+            },
+            "description": "Hovered soft fill, color=\"error\"."
+          },
+          "on-error-soft": {
+            "value": {
+              "base": "{colors.error.800}",
+              "_dark": "{colors.error.200}"
+            },
+            "description": "Text on the soft fill, color=\"error\"."
+          },
+          "error-fg": {
+            "value": {
+              "base": "{colors.error.700}",
+              "_dark": "{colors.error.400}"
+            },
+            "description": "Text and icons of outline and ghost Buttons, color=\"error\"."
+          },
+          "error-edge": {
+            "value": {
+              "base": "{colors.error.600}",
+              "_dark": "{colors.error.400}"
+            },
+            "description": "Outline Button edge (3:1+ on page-bg and surface), color=\"error\"."
+          },
+          "primary": {
+            "50": {
+              "value": {
+                "base": "oklch(97.7% 0.013 236.62)",
+                "_paletteRose": "#fff1f2"
+              },
+              "description": "Brand primary, step 50: Tailwind sky-50 (global.css `--color-primary-50: var(--color-sky-50)`)."
+            },
+            "100": {
+              "value": {
+                "base": "oklch(95.1% 0.026 236.824)",
+                "_paletteRose": "#ffe4e6"
+              },
+              "description": "Brand primary, step 100: Tailwind sky-100 (global.css `--color-primary-100: var(--color-sky-100)`)."
+            },
+            "200": {
+              "value": {
+                "base": "oklch(90.1% 0.058 230.902)",
+                "_paletteRose": "#fecdd3"
+              },
+              "description": "Brand primary, step 200: Tailwind sky-200 (global.css `--color-primary-200: var(--color-sky-200)`)."
+            },
+            "300": {
+              "value": {
+                "base": "oklch(82.8% 0.111 230.318)",
+                "_paletteRose": "#fda4af"
+              },
+              "description": "Brand primary, step 300: Tailwind sky-300 (global.css `--color-primary-300: var(--color-sky-300)`)."
+            },
+            "400": {
+              "value": {
+                "base": "oklch(74.6% 0.16 232.661)",
+                "_paletteRose": "#fb7185"
+              },
+              "description": "Brand primary, step 400: Tailwind sky-400 (global.css `--color-primary-400: var(--color-sky-400)`)."
+            },
+            "500": {
+              "value": {
+                "base": "oklch(68.5% 0.169 237.323)",
+                "_paletteRose": "#f43f5e"
+              },
+              "description": "Brand primary, step 500: Tailwind sky-500 (global.css `--color-primary-500: var(--color-sky-500)`)."
+            },
+            "600": {
+              "value": {
+                "base": "oklch(58.8% 0.158 241.966)",
+                "_paletteRose": "#e11d48"
+              },
+              "description": "Brand primary, step 600: Tailwind sky-600 (global.css `--color-primary-600: var(--color-sky-600)`)."
+            },
+            "700": {
+              "value": {
+                "base": "oklch(50% 0.134 242.749)",
+                "_paletteRose": "#be123c"
+              },
+              "description": "Brand primary, step 700: Tailwind sky-700 (global.css `--color-primary-700: var(--color-sky-700)`)."
+            },
+            "800": {
+              "value": {
+                "base": "oklch(44.3% 0.11 240.79)",
+                "_paletteRose": "#9f1239"
+              },
+              "description": "Brand primary, step 800: Tailwind sky-800 (global.css `--color-primary-800: var(--color-sky-800)`)."
+            },
+            "900": {
+              "value": {
+                "base": "oklch(39.1% 0.09 240.876)",
+                "_paletteRose": "#881337"
+              },
+              "description": "Brand primary, step 900: Tailwind sky-900 (global.css `--color-primary-900: var(--color-sky-900)`)."
+            },
+            "950": {
+              "value": {
+                "base": "oklch(29.3% 0.066 243.157)",
+                "_paletteRose": "#4c0519"
+              },
+              "description": "Brand primary, step 950: Tailwind sky-950 (global.css `--color-primary-950: var(--color-sky-950)`)."
+            }
+          },
+          "accent": {
+            "50": {
+              "value": {
+                "base": "oklch(98.7% 0.022 95.277)",
+                "_paletteRose": "#f5f3ff"
+              },
+              "description": "Brand accent, step 50: Tailwind amber-50 (global.css `--color-accent-50: var(--color-amber-50)`)."
+            },
+            "100": {
+              "value": {
+                "base": "oklch(96.2% 0.059 95.617)",
+                "_paletteRose": "#ede9fe"
+              },
+              "description": "Brand accent, step 100: Tailwind amber-100 (global.css `--color-accent-100: var(--color-amber-100)`)."
+            },
+            "200": {
+              "value": {
+                "base": "oklch(92.4% 0.12 95.746)",
+                "_paletteRose": "#ddd6fe"
+              },
+              "description": "Brand accent, step 200: Tailwind amber-200 (global.css `--color-accent-200: var(--color-amber-200)`)."
+            },
+            "300": {
+              "value": {
+                "base": "oklch(87.9% 0.169 91.605)",
+                "_paletteRose": "#c4b5fd"
+              },
+              "description": "Brand accent, step 300: Tailwind amber-300 (global.css `--color-accent-300: var(--color-amber-300)`)."
+            },
+            "400": {
+              "value": {
+                "base": "oklch(82.8% 0.189 84.429)",
+                "_paletteRose": "#a78bfa"
+              },
+              "description": "Brand accent, step 400: Tailwind amber-400 (global.css `--color-accent-400: var(--color-amber-400)`)."
+            },
+            "500": {
+              "value": {
+                "base": "oklch(76.9% 0.188 70.08)",
+                "_paletteRose": "#8b5cf6"
+              },
+              "description": "Brand accent, step 500: Tailwind amber-500 (global.css `--color-accent-500: var(--color-amber-500)`)."
+            },
+            "600": {
+              "value": {
+                "base": "oklch(66.6% 0.179 58.318)",
+                "_paletteRose": "#7c3aed"
+              },
+              "description": "Brand accent, step 600: Tailwind amber-600 (global.css `--color-accent-600: var(--color-amber-600)`)."
+            },
+            "700": {
+              "value": {
+                "base": "oklch(55.5% 0.163 48.998)",
+                "_paletteRose": "#6d28d9"
+              },
+              "description": "Brand accent, step 700: Tailwind amber-700 (global.css `--color-accent-700: var(--color-amber-700)`)."
+            },
+            "800": {
+              "value": {
+                "base": "oklch(47.3% 0.137 46.201)",
+                "_paletteRose": "#5b21b6"
+              },
+              "description": "Brand accent, step 800: Tailwind amber-800 (global.css `--color-accent-800: var(--color-amber-800)`)."
+            },
+            "900": {
+              "value": {
+                "base": "oklch(41.4% 0.112 45.904)",
+                "_paletteRose": "#4c1d95"
+              },
+              "description": "Brand accent, step 900: Tailwind amber-900 (global.css `--color-accent-900: var(--color-amber-900)`)."
+            },
+            "950": {
+              "value": {
+                "base": "oklch(27.9% 0.077 45.635)",
+                "_paletteRose": "#2e1065"
+              },
+              "description": "Brand accent, step 950: Tailwind amber-950 (global.css `--color-accent-950: var(--color-amber-950)`)."
+            }
+          }
+        },
+        "fonts": {
+          "sans": {
+            "value": {
+              "base": "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif",
+              "_fontChill": "\"ChillRoundF\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif"
+            }
+          }
+        }
+      },
+      "textStyles": {
+        "display": {
+          "description": "One per page at most: hero and site titles.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "30px",
+            "lineHeight": "38px",
+            "fontWeight": "700"
+          }
+        },
+        "heading-1": {
+          "description": "Page titles.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "24px",
+            "lineHeight": "32px",
+            "fontWeight": "700"
+          }
+        },
+        "heading-2": {
+          "description": "Section titles; Dialog titles.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "20px",
+            "lineHeight": "28px",
+            "fontWeight": "700"
+          }
+        },
+        "heading-3": {
+          "description": "Card titles, the NavMenu product name, sub-sections.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "16px",
+            "lineHeight": "24px",
+            "fontWeight": "700"
+          }
+        },
+        "prose": {
+          "description": "Long-form reading text only (articles, docs). Everything else is `body`.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "16px",
+            "lineHeight": "1.75",
+            "fontWeight": "400"
+          }
+        },
+        "body": {
+          "description": "The base size: UI text, inputs, alerts, menus, table cells.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": "400"
+          }
+        },
+        "small": {
+          "description": "Help text, descriptions, tooltips, tags, section labels.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "12px",
+            "lineHeight": "16px",
+            "fontWeight": "400"
+          }
+        },
+        "caption": {
+          "description": "Badges and tiny counters only.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "12px",
+            "lineHeight": "16px",
+            "fontWeight": "700"
+          }
+        },
+        "label": {
+          "description": "Field labels, table headers, Alert and Toast titles.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": "700"
+          }
+        },
+        "button": {
+          "description": "Button labels, md and lg.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": "600"
+          }
+        },
+        "button-sm": {
+          "description": "Small button labels, except in table cells.",
+          "value": {
+            "fontFamily": "sans",
+            "fontSize": "12px",
+            "lineHeight": "16px",
+            "fontWeight": "600"
+          }
+        }
+      },
+      "keyframes": {
+        "koi-fade": {
+          "from": {
+            "opacity": "0"
+          }
+        },
+        "koi-pop": {
+          "from": {
+            "opacity": "0",
+            "transform": "translateY(8px) scale(.97)"
+          }
+        },
+        "koi-rise": {
+          "from": {
+            "opacity": "0",
+            "transform": "translateY(12px) scale(.96)"
+          }
+        },
+        "koi-spin": {
+          "to": {
+            "transform": "rotate(360deg)"
+          }
+        },
+        "koi-shimmer": {
+          "from": {
+            "backgroundPosition": "-150vw 0"
+          },
+          "to": {
+            "backgroundPosition": "50vw 0"
+          }
+        },
+        "koi-indet": {
+          "from": {
+            "translate": "-100%"
+          },
+          "to": {
+            "translate": "250%"
+          }
+        },
+        "koi-pulse": {
+          "50%": {
+            "opacity": ".45"
+          }
+        }
+      }
+    }
+  }
+};
+export default koiPreset;