@greese/ui 1.0.0 → 1.1.0

package/dist/css/PageTransition.css

@@ -333,6 +333,18 @@
     html::view-transition-old(*.greese-PageTransition--exit-none) {
       animation-name: none;
     }
+    html::view-transition-new(*.greese-PageTransition--route-enter) {
+      animation-name: var(--greese-page-enter);
+    }
+    html::view-transition-old(*.greese-PageTransition--route-exit) {
+      animation-name: var(--greese-page-exit);
+    }
+    html::view-transition-group(*.greese-PageTransition--route-pace),
+    html::view-transition-old(*.greese-PageTransition--route-pace),
+    html::view-transition-new(*.greese-PageTransition--route-pace) {
+      animation-duration: var(--greese-page-duration, var(--greese-motion-page-duration, var(--greese-duration-normal)));
+      animation-timing-function: var(--greese-page-ease, var(--greese-motion-page-ease, var(--greese-ease-out)));
+    }
     html::view-transition-group(*.greese-PageTransition--share) {
       animation-duration: var(--greese-motion-share-duration, var(--greese-motion-page-duration, var(--greese-duration-normal)));
       animation-timing-function: var(--greese-motion-share-ease, var(--greese-motion-page-ease, var(--greese-ease-out)));

package/dist/greese.css

@@ -11261,6 +11261,18 @@
     html::view-transition-old(*.greese-PageTransition--exit-none) {
       animation-name: none;
     }
+    html::view-transition-new(*.greese-PageTransition--route-enter) {
+      animation-name: var(--greese-page-enter);
+    }
+    html::view-transition-old(*.greese-PageTransition--route-exit) {
+      animation-name: var(--greese-page-exit);
+    }
+    html::view-transition-group(*.greese-PageTransition--route-pace),
+    html::view-transition-old(*.greese-PageTransition--route-pace),
+    html::view-transition-new(*.greese-PageTransition--route-pace) {
+      animation-duration: var(--greese-page-duration, var(--greese-motion-page-duration, var(--greese-duration-normal)));
+      animation-timing-function: var(--greese-page-ease, var(--greese-motion-page-ease, var(--greese-ease-out)));
+    }
     html::view-transition-group(*.greese-PageTransition--share) {
       animation-duration: var(--greese-motion-share-duration, var(--greese-motion-page-duration, var(--greese-duration-normal)));
       animation-timing-function: var(--greese-motion-share-ease, var(--greese-motion-page-ease, var(--greese-ease-out)));

package/dist/style-manifest.json

@@ -1726,6 +1726,9 @@
         "exit-wipe-out-up-right",
         "left",
         "page",
+        "route-enter",
+        "route-exit",
+        "route-pace",
         "share",
         "still",
         "theme",
@@ -1745,6 +1748,10 @@
         "--greese-motion-page-exit",
         "--greese-motion-share-duration",
         "--greese-motion-share-ease",
+        "--greese-page-duration",
+        "--greese-page-ease",
+        "--greese-page-enter",
+        "--greese-page-exit",
         "--greese-page-scrolled"
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greese/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "greese ui's CSS and design tokens: a framework-free stylesheet, per-component CSS, custom properties, Sass kit and TypeScript constants. Works in plain HTML, or under any framework.",
   "keywords": [
     "css",

package/src/components/PageTransition/PageTransition.scss

@@ -13,6 +13,11 @@
 //   greese-PageTransition--still          not animated at all
 //   greese-PageTransition--page           a whole page: only its screenful shows
 //   greese-PageTransition--left           a page that left live: its rest fades
+//   greese-PageTransition--route-enter, --route-exit, --route-pace
+//                                         a route's or navigation's own effects
+//                                         and pace, read from the root's
+//                                         --greese-page-enter / -exit /
+//                                         -duration / -ease (usePageNavigate)
 // Transition types (`greese-back`, …) pick between these classes in React's
 // <ViewTransition> props, which works wherever React does; the CSS doesn't
 // depend on `:active-view-transition-type()`. Entrances play the effects' own
@@ -93,6 +98,30 @@
       animation-name: none;
     }
 
+    // A route's or a navigation's own effects (usePageNavigate writes the
+    // variables at the click): after the named effects and the theme's roles,
+    // so they win; `--left` below still wins, since a live exit already played.
+    html::view-transition-new(*.greese-PageTransition--route-enter) {
+      animation-name: var(--greese-page-enter);
+    }
+
+    html::view-transition-old(*.greese-PageTransition--route-exit) {
+      animation-name: var(--greese-page-exit);
+    }
+
+    html::view-transition-group(*.greese-PageTransition--route-pace),
+    html::view-transition-old(*.greese-PageTransition--route-pace),
+    html::view-transition-new(*.greese-PageTransition--route-pace) {
+      animation-duration: var(
+        --greese-page-duration,
+        var(--greese-motion-page-duration, var(--greese-duration-normal))
+      );
+      animation-timing-function: var(
+        --greese-page-ease,
+        var(--greese-motion-page-ease, var(--greese-ease-out))
+      );
+    }
+
     // A shared element morphs from where it was to where it is: its group
     // moves and resizes, at the theme's `share-duration` and `share-ease`.
     html::view-transition-group(*.greese-PageTransition--share) {

package/src/styles/_manifest.scss

@@ -375,9 +375,9 @@ $blocks: (
   ),
   'PageTransition': (
     parts: (),
-    modifiers: ('enter-blur-in', 'enter-depth', 'enter-depth-in', 'enter-fade-down', 'enter-fade-end', 'enter-fade-in', 'enter-fade-start', 'enter-fade-up', 'enter-flip-down', 'enter-flip-left', 'enter-flip-over-down', 'enter-flip-over-left', 'enter-flip-over-right', 'enter-flip-over-up', 'enter-flip-right', 'enter-flip-up', 'enter-hinge', 'enter-iris-down', 'enter-iris-down-left', 'enter-iris-down-right', 'enter-iris-in', 'enter-iris-left', 'enter-iris-right', 'enter-iris-up', 'enter-iris-up-left', 'enter-iris-up-right', 'enter-none', 'enter-pocket-down', 'enter-pocket-down-left', 'enter-pocket-down-right', 'enter-pocket-left', 'enter-pocket-right', 'enter-pocket-up', 'enter-pocket-up-left', 'enter-pocket-up-right', 'enter-pop', 'enter-pop-in', 'enter-scale-in', 'enter-slide-down', 'enter-slide-left', 'enter-slide-right', 'enter-slide-up', 'enter-swing-in', 'enter-turn-x', 'enter-turn-y', 'enter-wipe-down', 'enter-wipe-down-left', 'enter-wipe-down-right', 'enter-wipe-left', 'enter-wipe-open-x', 'enter-wipe-open-y', 'enter-wipe-right', 'enter-wipe-up', 'enter-wipe-up-left', 'enter-wipe-up-right', 'exit-blur-out', 'exit-depth-out', 'exit-fade-out', 'exit-fade-out-down', 'exit-fade-out-up', 'exit-fall', 'exit-flip-out-down', 'exit-flip-out-left', 'exit-flip-out-right', 'exit-flip-out-up', 'exit-flip-over-out-down', 'exit-flip-over-out-left', 'exit-flip-over-out-right', 'exit-flip-over-out-up', 'exit-glow', 'exit-iris-out', 'exit-iris-out-down', 'exit-iris-out-down-left', 'exit-iris-out-down-right', 'exit-iris-out-left', 'exit-iris-out-right', 'exit-iris-out-up', 'exit-iris-out-up-left', 'exit-iris-out-up-right', 'exit-none', 'exit-pocket-out-down', 'exit-pocket-out-down-left', 'exit-pocket-out-down-right', 'exit-pocket-out-left', 'exit-pocket-out-right', 'exit-pocket-out-up', 'exit-pocket-out-up-left', 'exit-pocket-out-up-right', 'exit-pop-out', 'exit-rise', 'exit-scale-out', 'exit-squish', 'exit-swing-out', 'exit-tilt', 'exit-wipe-close-x', 'exit-wipe-close-y', 'exit-wipe-out-down', 'exit-wipe-out-down-left', 'exit-wipe-out-down-right', 'exit-wipe-out-left', 'exit-wipe-out-right', 'exit-wipe-out-up', 'exit-wipe-out-up-left', 'exit-wipe-out-up-right', 'left', 'page', 'share', 'still', 'theme', 'theme-back',),
+    modifiers: ('enter-blur-in', 'enter-depth', 'enter-depth-in', 'enter-fade-down', 'enter-fade-end', 'enter-fade-in', 'enter-fade-start', 'enter-fade-up', 'enter-flip-down', 'enter-flip-left', 'enter-flip-over-down', 'enter-flip-over-left', 'enter-flip-over-right', 'enter-flip-over-up', 'enter-flip-right', 'enter-flip-up', 'enter-hinge', 'enter-iris-down', 'enter-iris-down-left', 'enter-iris-down-right', 'enter-iris-in', 'enter-iris-left', 'enter-iris-right', 'enter-iris-up', 'enter-iris-up-left', 'enter-iris-up-right', 'enter-none', 'enter-pocket-down', 'enter-pocket-down-left', 'enter-pocket-down-right', 'enter-pocket-left', 'enter-pocket-right', 'enter-pocket-up', 'enter-pocket-up-left', 'enter-pocket-up-right', 'enter-pop', 'enter-pop-in', 'enter-scale-in', 'enter-slide-down', 'enter-slide-left', 'enter-slide-right', 'enter-slide-up', 'enter-swing-in', 'enter-turn-x', 'enter-turn-y', 'enter-wipe-down', 'enter-wipe-down-left', 'enter-wipe-down-right', 'enter-wipe-left', 'enter-wipe-open-x', 'enter-wipe-open-y', 'enter-wipe-right', 'enter-wipe-up', 'enter-wipe-up-left', 'enter-wipe-up-right', 'exit-blur-out', 'exit-depth-out', 'exit-fade-out', 'exit-fade-out-down', 'exit-fade-out-up', 'exit-fall', 'exit-flip-out-down', 'exit-flip-out-left', 'exit-flip-out-right', 'exit-flip-out-up', 'exit-flip-over-out-down', 'exit-flip-over-out-left', 'exit-flip-over-out-right', 'exit-flip-over-out-up', 'exit-glow', 'exit-iris-out', 'exit-iris-out-down', 'exit-iris-out-down-left', 'exit-iris-out-down-right', 'exit-iris-out-left', 'exit-iris-out-right', 'exit-iris-out-up', 'exit-iris-out-up-left', 'exit-iris-out-up-right', 'exit-none', 'exit-pocket-out-down', 'exit-pocket-out-down-left', 'exit-pocket-out-down-right', 'exit-pocket-out-left', 'exit-pocket-out-right', 'exit-pocket-out-up', 'exit-pocket-out-up-left', 'exit-pocket-out-up-right', 'exit-pop-out', 'exit-rise', 'exit-scale-out', 'exit-squish', 'exit-swing-out', 'exit-tilt', 'exit-wipe-close-x', 'exit-wipe-close-y', 'exit-wipe-out-down', 'exit-wipe-out-down-left', 'exit-wipe-out-down-right', 'exit-wipe-out-left', 'exit-wipe-out-right', 'exit-wipe-out-up', 'exit-wipe-out-up-left', 'exit-wipe-out-up-right', 'left', 'page', 'route-enter', 'route-exit', 'route-pace', 'share', 'still', 'theme', 'theme-back',),
     part-modifiers: (),
-    variables: ('--greese-ease-out', '--greese-motion-distance', '--greese-motion-page', '--greese-motion-page-back', '--greese-motion-page-back-exit', '--greese-motion-page-duration', '--greese-motion-page-ease', '--greese-motion-page-exit', '--greese-motion-share-duration', '--greese-motion-share-ease', '--greese-page-scrolled',),
+    variables: ('--greese-ease-out', '--greese-motion-distance', '--greese-motion-page', '--greese-motion-page-back', '--greese-motion-page-back-exit', '--greese-motion-page-duration', '--greese-motion-page-ease', '--greese-motion-page-exit', '--greese-motion-share-duration', '--greese-motion-share-ease', '--greese-page-duration', '--greese-page-ease', '--greese-page-enter', '--greese-page-exit', '--greese-page-scrolled',),
   ),
   'Pagination': (
     parts: ('ellipsis', 'list', 'page', 'step',),

package/themes/candy.css

@@ -0,0 +1,87 @@
+/**
+ * Candy: a pink primary with azure, lavender and a yellow accent, on neutrals tinted pink.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/candy.css'
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.theme {
+  :root,
+  [data-greese-scheme=light],
+  [data-greese-scheme=system] {
+    --greese-color-canvas: #fff3f7;
+    --greese-color-surface: #ffe5ee;
+    --greese-color-surface-overlay: #ffffff;
+    --greese-color-fg: #2d0318;
+    --greese-color-fg-muted: #9c2661;
+    --greese-color-border: #ffcfe0;
+    --greese-color-border-strong: #ff81b6;
+    --greese-color-track: #ffcfe0;
+    --greese-color-primary: #c13b7b;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 80%, #000);
+    --greese-color-primary-content: #ffffff;
+    --greese-color-secondary: #00668f;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 80%, #000);
+    --greese-color-secondary-content: #ffffff;
+    --greese-color-tertiary: #9d79f6;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 80%, #000);
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #f4d90b;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 80%, #000);
+    --greese-color-accent-content: #11171c;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme=light]),
+    [data-greese-scheme=system] {
+      --greese-color-canvas: #2d0318;
+      --greese-color-surface: #581235;
+      --greese-color-surface-overlay: #7a1a4a;
+      --greese-color-fg: #ffe5ee;
+      --greese-color-fg-muted: #ffaecd;
+      --greese-color-border: #7a1a4a;
+      --greese-color-border-strong: #9c2661;
+      --greese-color-track: #c13b7b;
+      --greese-color-primary: #ff81b6;
+      --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+      --greese-color-primary-content: #11171c;
+      --greese-color-secondary: #5ac0f7;
+      --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+      --greese-color-secondary-content: #11171c;
+      --greese-color-tertiary: #cdbfff;
+      --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+      --greese-color-tertiary-content: #11171c;
+      --greese-color-accent: #fbe136;
+      --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+      --greese-color-accent-content: #11171c;
+    }
+  }
+  [data-greese-scheme=dark] {
+    --greese-color-canvas: #2d0318;
+    --greese-color-surface: #581235;
+    --greese-color-surface-overlay: #7a1a4a;
+    --greese-color-fg: #ffe5ee;
+    --greese-color-fg-muted: #ffaecd;
+    --greese-color-border: #7a1a4a;
+    --greese-color-border-strong: #9c2661;
+    --greese-color-track: #c13b7b;
+    --greese-color-primary: #ff81b6;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+    --greese-color-primary-content: #11171c;
+    --greese-color-secondary: #5ac0f7;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+    --greese-color-secondary-content: #11171c;
+    --greese-color-tertiary: #cdbfff;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #fbe136;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+    --greese-color-accent-content: #11171c;
+  }
+}

package/themes/candy.scss

@@ -0,0 +1,32 @@
+/**
+ * Candy: a pink primary with azure, lavender and a yellow accent, on neutrals tinted pink.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled candy.css.
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+// Generated by greese ui Theme Studio from greese-theme.json. Edit it there, or in
+// the studio (npm run studio); changes made here are overwritten.
+@use 'pkg:@greese/ui/scss/kit' as greese;
+
+@include greese.tokens((
+  color: (
+    primary: (light: "pink-600", dark: "pink-400"),
+    secondary: (light: "azure-700", dark: "azure-400"),
+    tertiary: (light: "lavender-500", dark: "lavender-300"),
+    accent: (light: "yellow-400", dark: "yellow-300"),
+    canvas: (light: "pink-50", dark: "pink-999"),
+    surface: (light: "pink-100", dark: "pink-900"),
+    surface-overlay: (light: "#ffffff", dark: "pink-800"),
+    fg: (light: "pink-999", dark: "pink-100"),
+    fg-muted: (light: "pink-700", dark: "pink-300"),
+    border: (light: "pink-200", dark: "pink-800"),
+    border-strong: (light: "pink-400", dark: "pink-700"),
+    track: (light: "pink-200", dark: "pink-600"),
+  ),
+));

package/themes/forest.css

@@ -0,0 +1,87 @@
+/**
+ * Forest: a jade primary with lime, aqua and an orange accent, on neutrals tinted jade.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/forest.css'
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.theme {
+  :root,
+  [data-greese-scheme=light],
+  [data-greese-scheme=system] {
+    --greese-color-canvas: #eefaf4;
+    --greese-color-surface: #daf4e8;
+    --greese-color-surface-overlay: #ffffff;
+    --greese-color-fg: #001c11;
+    --greese-color-fg-muted: #006f51;
+    --greese-color-border: #baedd6;
+    --greese-color-border-strong: #54cea1;
+    --greese-color-track: #baedd6;
+    --greese-color-primary: #006f51;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 80%, #000);
+    --greese-color-primary-content: #ffffff;
+    --greese-color-secondary: #517600;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 80%, #000);
+    --greese-color-secondary-content: #ffffff;
+    --greese-color-tertiary: #00707b;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 80%, #000);
+    --greese-color-tertiary-content: #ffffff;
+    --greese-color-accent: #c05d00;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 80%, #000);
+    --greese-color-accent-content: #000000;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme=light]),
+    [data-greese-scheme=system] {
+      --greese-color-canvas: #001c11;
+      --greese-color-surface: #003c2a;
+      --greese-color-surface-overlay: #00553d;
+      --greese-color-fg: #daf4e8;
+      --greese-color-fg-muted: #8ee1be;
+      --greese-color-border: #00553d;
+      --greese-color-border-strong: #006f51;
+      --greese-color-track: #008e68;
+      --greese-color-primary: #54cea1;
+      --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+      --greese-color-primary-content: #11171c;
+      --greese-color-secondary: #a6dc51;
+      --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+      --greese-color-secondary-content: #11171c;
+      --greese-color-tertiary: #64d0de;
+      --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+      --greese-color-tertiary-content: #11171c;
+      --greese-color-accent: #ff9d5e;
+      --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+      --greese-color-accent-content: #11171c;
+    }
+  }
+  [data-greese-scheme=dark] {
+    --greese-color-canvas: #001c11;
+    --greese-color-surface: #003c2a;
+    --greese-color-surface-overlay: #00553d;
+    --greese-color-fg: #daf4e8;
+    --greese-color-fg-muted: #8ee1be;
+    --greese-color-border: #00553d;
+    --greese-color-border-strong: #006f51;
+    --greese-color-track: #008e68;
+    --greese-color-primary: #54cea1;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+    --greese-color-primary-content: #11171c;
+    --greese-color-secondary: #a6dc51;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+    --greese-color-secondary-content: #11171c;
+    --greese-color-tertiary: #64d0de;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #ff9d5e;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+    --greese-color-accent-content: #11171c;
+  }
+}

package/themes/forest.scss

@@ -0,0 +1,32 @@
+/**
+ * Forest: a jade primary with lime, aqua and an orange accent, on neutrals tinted jade.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled forest.css.
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+// Generated by greese ui Theme Studio from greese-theme.json. Edit it there, or in
+// the studio (npm run studio); changes made here are overwritten.
+@use 'pkg:@greese/ui/scss/kit' as greese;
+
+@include greese.tokens((
+  color: (
+    primary: (light: "jade-700", dark: "jade-400"),
+    secondary: (light: "lime-700", dark: "lime-400"),
+    tertiary: (light: "aqua-700", dark: "aqua-400"),
+    accent: (light: "orange-600", dark: "orange-400"),
+    canvas: (light: "jade-50", dark: "jade-999"),
+    surface: (light: "jade-100", dark: "jade-900"),
+    surface-overlay: (light: "#ffffff", dark: "jade-800"),
+    fg: (light: "jade-999", dark: "jade-100"),
+    fg-muted: (light: "jade-700", dark: "jade-300"),
+    border: (light: "jade-200", dark: "jade-800"),
+    border-strong: (light: "jade-400", dark: "jade-700"),
+    track: (light: "jade-200", dark: "jade-600"),
+  ),
+));

package/themes/grape.css

@@ -0,0 +1,87 @@
+/**
+ * Grape: a lavender primary with magenta, royal blue and a jade accent, on neutrals tinted lavender.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/grape.css'
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.theme {
+  :root,
+  [data-greese-scheme=light],
+  [data-greese-scheme=system] {
+    --greese-color-canvas: #f7f5ff;
+    --greese-color-surface: #edeaff;
+    --greese-color-surface-overlay: #ffffff;
+    --greese-color-fg: #190c33;
+    --greese-color-fg-muted: #6443ab;
+    --greese-color-border: #dfd8ff;
+    --greese-color-border-strong: #b69fff;
+    --greese-color-track: #dfd8ff;
+    --greese-color-primary: #7e5bd0;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 80%, #000);
+    --greese-color-primary-content: #ffffff;
+    --greese-color-secondary: #bb32a3;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 80%, #000);
+    --greese-color-secondary-content: #ffffff;
+    --greese-color-tertiary: #5963e5;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 80%, #000);
+    --greese-color-tertiary-content: #ffffff;
+    --greese-color-accent: #008e68;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 80%, #000);
+    --greese-color-accent-content: #000000;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme=light]),
+    [data-greese-scheme=system] {
+      --greese-color-canvas: #190c33;
+      --greese-color-surface: #362361;
+      --greese-color-surface-overlay: #4c3285;
+      --greese-color-fg: #edeaff;
+      --greese-color-fg-muted: #cdbfff;
+      --greese-color-border: #4c3285;
+      --greese-color-border-strong: #6443ab;
+      --greese-color-track: #7e5bd0;
+      --greese-color-primary: #b69fff;
+      --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+      --greese-color-primary-content: #11171c;
+      --greese-color-secondary: #f97cde;
+      --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+      --greese-color-secondary-content: #11171c;
+      --greese-color-tertiary: #9aaaff;
+      --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+      --greese-color-tertiary-content: #11171c;
+      --greese-color-accent: #54cea1;
+      --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+      --greese-color-accent-content: #11171c;
+    }
+  }
+  [data-greese-scheme=dark] {
+    --greese-color-canvas: #190c33;
+    --greese-color-surface: #362361;
+    --greese-color-surface-overlay: #4c3285;
+    --greese-color-fg: #edeaff;
+    --greese-color-fg-muted: #cdbfff;
+    --greese-color-border: #4c3285;
+    --greese-color-border-strong: #6443ab;
+    --greese-color-track: #7e5bd0;
+    --greese-color-primary: #b69fff;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+    --greese-color-primary-content: #11171c;
+    --greese-color-secondary: #f97cde;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+    --greese-color-secondary-content: #11171c;
+    --greese-color-tertiary: #9aaaff;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #54cea1;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+    --greese-color-accent-content: #11171c;
+  }
+}

package/themes/grape.scss

@@ -0,0 +1,32 @@
+/**
+ * Grape: a lavender primary with magenta, royal blue and a jade accent, on neutrals tinted lavender.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled grape.css.
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+// Generated by greese ui Theme Studio from greese-theme.json. Edit it there, or in
+// the studio (npm run studio); changes made here are overwritten.
+@use 'pkg:@greese/ui/scss/kit' as greese;
+
+@include greese.tokens((
+  color: (
+    primary: (light: "lavender-600", dark: "lavender-400"),
+    secondary: (light: "magenta-600", dark: "magenta-400"),
+    tertiary: (light: "royal-600", dark: "royal-400"),
+    accent: (light: "jade-600", dark: "jade-400"),
+    canvas: (light: "lavender-50", dark: "lavender-999"),
+    surface: (light: "lavender-100", dark: "lavender-900"),
+    surface-overlay: (light: "#ffffff", dark: "lavender-800"),
+    fg: (light: "lavender-999", dark: "lavender-100"),
+    fg-muted: (light: "lavender-700", dark: "lavender-300"),
+    border: (light: "lavender-200", dark: "lavender-800"),
+    border-strong: (light: "lavender-400", dark: "lavender-700"),
+    track: (light: "lavender-200", dark: "lavender-600"),
+  ),
+));

package/themes/greese.css

@@ -0,0 +1,36 @@
+/**
+ * Greese: the official theme. A warm orange primary on greese ui's own neutrals.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/greese.css'
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.theme {
+  :root,
+  [data-greese-scheme=light],
+  [data-greese-scheme=system] {
+    --greese-color-primary: #964700;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 80%, #000);
+    --greese-color-primary-content: #ffffff;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme=light]),
+    [data-greese-scheme=system] {
+      --greese-color-primary: #ff9d5e;
+      --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+      --greese-color-primary-content: #11171c;
+    }
+  }
+  [data-greese-scheme=dark] {
+    --greese-color-primary: #ff9d5e;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+    --greese-color-primary-content: #11171c;
+  }
+}

package/themes/greese.scss

@@ -0,0 +1,21 @@
+/**
+ * Greese: the official theme. A warm orange primary on greese ui's own neutrals.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled greese.css.
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+// Generated by greese ui Theme Studio from greese-theme.json. Edit it there, or in
+// the studio (npm run studio); changes made here are overwritten.
+@use 'pkg:@greese/ui/scss/kit' as greese;
+
+@include greese.tokens((
+  color: (
+    primary: (light: "orange-700", dark: "orange-400"),
+  ),
+));

package/themes/mono.css

@@ -0,0 +1,87 @@
+/**
+ * Mono: near-black (near-white in dark mode) and grays, with taupe and a single red accent, on gray neutrals.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/mono.css'
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.theme {
+  :root,
+  [data-greese-scheme=light],
+  [data-greese-scheme=system] {
+    --greese-color-canvas: #f7f7f7;
+    --greese-color-surface: #ededed;
+    --greese-color-surface-overlay: #ffffff;
+    --greese-color-fg: #161616;
+    --greese-color-fg-muted: #5c5c5c;
+    --greese-color-border: #dedede;
+    --greese-color-border-strong: #b1b1b1;
+    --greese-color-track: #dedede;
+    --greese-color-primary: #2e3335;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 80%, #000);
+    --greese-color-primary-content: #ffffff;
+    --greese-color-secondary: #6f777c;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 80%, #000);
+    --greese-color-secondary-content: #ffffff;
+    --greese-color-tertiary: #67594f;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 80%, #000);
+    --greese-color-tertiary-content: #ffffff;
+    --greese-color-accent: #d52727;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 80%, #000);
+    --greese-color-accent-content: #ffffff;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme=light]),
+    [data-greese-scheme=system] {
+      --greese-color-canvas: #161616;
+      --greese-color-surface: #323232;
+      --greese-color-surface-overlay: #464646;
+      --greese-color-fg: #ededed;
+      --greese-color-fg-muted: #cacaca;
+      --greese-color-border: #464646;
+      --greese-color-border-strong: #5c5c5c;
+      --greese-color-track: #767676;
+      --greese-color-primary: #ebedee;
+      --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+      --greese-color-primary-content: #11171c;
+      --greese-color-secondary: #aab3b7;
+      --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+      --greese-color-secondary-content: #11171c;
+      --greese-color-tertiary: #d3c7be;
+      --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+      --greese-color-tertiary-content: #11171c;
+      --greese-color-accent: #ff8b7f;
+      --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+      --greese-color-accent-content: #11171c;
+    }
+  }
+  [data-greese-scheme=dark] {
+    --greese-color-canvas: #161616;
+    --greese-color-surface: #323232;
+    --greese-color-surface-overlay: #464646;
+    --greese-color-fg: #ededed;
+    --greese-color-fg-muted: #cacaca;
+    --greese-color-border: #464646;
+    --greese-color-border-strong: #5c5c5c;
+    --greese-color-track: #767676;
+    --greese-color-primary: #ebedee;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+    --greese-color-primary-content: #11171c;
+    --greese-color-secondary: #aab3b7;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+    --greese-color-secondary-content: #11171c;
+    --greese-color-tertiary: #d3c7be;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #ff8b7f;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+    --greese-color-accent-content: #11171c;
+  }
+}

package/themes/mono.scss

@@ -0,0 +1,32 @@
+/**
+ * Mono: near-black (near-white in dark mode) and grays, with taupe and a single red accent, on gray neutrals.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled mono.css.
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+// Generated by greese ui Theme Studio from greese-theme.json. Edit it there, or in
+// the studio (npm run studio); changes made here are overwritten.
+@use 'pkg:@greese/ui/scss/kit' as greese;
+
+@include greese.tokens((
+  color: (
+    primary: (light: "silver-900", dark: "silver-100"),
+    secondary: (light: "silver-600", dark: "silver-400"),
+    tertiary: (light: "taupe-700", dark: "taupe-300"),
+    accent: (light: "red-600", dark: "red-400"),
+    canvas: (light: "gray-50", dark: "gray-999"),
+    surface: (light: "gray-100", dark: "gray-900"),
+    surface-overlay: (light: "#ffffff", dark: "gray-800"),
+    fg: (light: "gray-999", dark: "gray-100"),
+    fg-muted: (light: "gray-700", dark: "gray-300"),
+    border: (light: "gray-200", dark: "gray-800"),
+    border-strong: (light: "gray-400", dark: "gray-700"),
+    track: (light: "gray-200", dark: "gray-600"),
+  ),
+));

package/themes/ocean.css

@@ -0,0 +1,87 @@
+/**
+ * Ocean: a deep azure primary with royal blue, turquoise and a gold accent, on neutrals tinted azure.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/ocean.css'
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.theme {
+  :root,
+  [data-greese-scheme=light],
+  [data-greese-scheme=system] {
+    --greese-color-canvas: #eef9ff;
+    --greese-color-surface: #daf1ff;
+    --greese-color-surface-overlay: #ffffff;
+    --greese-color-fg: #001927;
+    --greese-color-fg-muted: #00668f;
+    --greese-color-border: #bde6ff;
+    --greese-color-border-strong: #5ac0f7;
+    --greese-color-track: #bde6ff;
+    --greese-color-primary: #00668f;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 80%, #000);
+    --greese-color-primary-content: #ffffff;
+    --greese-color-secondary: #5963e5;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 80%, #000);
+    --greese-color-secondary-content: #ffffff;
+    --greese-color-tertiary: #007069;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 80%, #000);
+    --greese-color-tertiary-content: #ffffff;
+    --greese-color-accent: #df9c00;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 80%, #000);
+    --greese-color-accent-content: #11171c;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme=light]),
+    [data-greese-scheme=system] {
+      --greese-color-canvas: #001927;
+      --greese-color-surface: #003750;
+      --greese-color-surface-overlay: #004d6e;
+      --greese-color-fg: #daf1ff;
+      --greese-color-fg-muted: #91d6ff;
+      --greese-color-border: #004d6e;
+      --greese-color-border-strong: #00668f;
+      --greese-color-track: #0082b6;
+      --greese-color-primary: #5ac0f7;
+      --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+      --greese-color-primary-content: #11171c;
+      --greese-color-secondary: #9aaaff;
+      --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+      --greese-color-secondary-content: #11171c;
+      --greese-color-tertiary: #5dcec5;
+      --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+      --greese-color-tertiary-content: #11171c;
+      --greese-color-accent: #ffd593;
+      --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+      --greese-color-accent-content: #11171c;
+    }
+  }
+  [data-greese-scheme=dark] {
+    --greese-color-canvas: #001927;
+    --greese-color-surface: #003750;
+    --greese-color-surface-overlay: #004d6e;
+    --greese-color-fg: #daf1ff;
+    --greese-color-fg-muted: #91d6ff;
+    --greese-color-border: #004d6e;
+    --greese-color-border-strong: #00668f;
+    --greese-color-track: #0082b6;
+    --greese-color-primary: #5ac0f7;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+    --greese-color-primary-content: #11171c;
+    --greese-color-secondary: #9aaaff;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+    --greese-color-secondary-content: #11171c;
+    --greese-color-tertiary: #5dcec5;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #ffd593;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+    --greese-color-accent-content: #11171c;
+  }
+}

package/themes/ocean.scss

@@ -0,0 +1,32 @@
+/**
+ * Ocean: a deep azure primary with royal blue, turquoise and a gold accent, on neutrals tinted azure.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled ocean.css.
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+// Generated by greese ui Theme Studio from greese-theme.json. Edit it there, or in
+// the studio (npm run studio); changes made here are overwritten.
+@use 'pkg:@greese/ui/scss/kit' as greese;
+
+@include greese.tokens((
+  color: (
+    primary: (light: "azure-700", dark: "azure-400"),
+    secondary: (light: "royal-600", dark: "royal-400"),
+    tertiary: (light: "turquoise-700", dark: "turquoise-400"),
+    accent: (light: "gold-500", dark: "gold-300"),
+    canvas: (light: "azure-50", dark: "azure-999"),
+    surface: (light: "azure-100", dark: "azure-900"),
+    surface-overlay: (light: "#ffffff", dark: "azure-800"),
+    fg: (light: "azure-999", dark: "azure-100"),
+    fg-muted: (light: "azure-700", dark: "azure-300"),
+    border: (light: "azure-200", dark: "azure-800"),
+    border-strong: (light: "azure-400", dark: "azure-700"),
+    track: (light: "azure-200", dark: "azure-600"),
+  ),
+));

package/themes/sunset.css

@@ -0,0 +1,87 @@
+/**
+ * Sunset: a burnt orange primary with ruby, gold and a magenta accent, on neutrals tinted orange.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/sunset.css'
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.theme {
+  :root,
+  [data-greese-scheme=light],
+  [data-greese-scheme=system] {
+    --greese-color-canvas: #fff4ee;
+    --greese-color-surface: #ffe8da;
+    --greese-color-surface-overlay: #ffffff;
+    --greese-color-fg: #290d00;
+    --greese-color-fg-muted: #964700;
+    --greese-color-border: #ffd8c1;
+    --greese-color-border-strong: #ff9d5e;
+    --greese-color-track: #ffd8c1;
+    --greese-color-primary: #964700;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 80%, #000);
+    --greese-color-primary-content: #ffffff;
+    --greese-color-secondary: #d12655;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 80%, #000);
+    --greese-color-secondary-content: #ffffff;
+    --greese-color-tertiary: #8a5f00;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 80%, #000);
+    --greese-color-tertiary-content: #ffffff;
+    --greese-color-accent: #bb32a3;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 80%, #000);
+    --greese-color-accent-content: #ffffff;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme=light]),
+    [data-greese-scheme=system] {
+      --greese-color-canvas: #290d00;
+      --greese-color-surface: #522300;
+      --greese-color-surface-overlay: #733400;
+      --greese-color-fg: #ffe8da;
+      --greese-color-fg-muted: #ffc19c;
+      --greese-color-border: #733400;
+      --greese-color-border-strong: #964700;
+      --greese-color-track: #c05d00;
+      --greese-color-primary: #ff9d5e;
+      --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+      --greese-color-primary-content: #11171c;
+      --greese-color-secondary: #ff8798;
+      --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+      --greese-color-secondary-content: #11171c;
+      --greese-color-tertiary: #feb93d;
+      --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+      --greese-color-tertiary-content: #11171c;
+      --greese-color-accent: #f97cde;
+      --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+      --greese-color-accent-content: #11171c;
+    }
+  }
+  [data-greese-scheme=dark] {
+    --greese-color-canvas: #290d00;
+    --greese-color-surface: #522300;
+    --greese-color-surface-overlay: #733400;
+    --greese-color-fg: #ffe8da;
+    --greese-color-fg-muted: #ffc19c;
+    --greese-color-border: #733400;
+    --greese-color-border-strong: #964700;
+    --greese-color-track: #c05d00;
+    --greese-color-primary: #ff9d5e;
+    --greese-color-primary-strong: color-mix(in oklab, var(--greese-color-primary) 70%, #fff);
+    --greese-color-primary-content: #11171c;
+    --greese-color-secondary: #ff8798;
+    --greese-color-secondary-strong: color-mix(in oklab, var(--greese-color-secondary) 70%, #fff);
+    --greese-color-secondary-content: #11171c;
+    --greese-color-tertiary: #feb93d;
+    --greese-color-tertiary-strong: color-mix(in oklab, var(--greese-color-tertiary) 70%, #fff);
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #f97cde;
+    --greese-color-accent-strong: color-mix(in oklab, var(--greese-color-accent) 70%, #fff);
+    --greese-color-accent-content: #11171c;
+  }
+}

package/themes/sunset.scss

@@ -0,0 +1,32 @@
+/**
+ * Sunset: a burnt orange primary with ruby, gold and a magenta accent, on neutrals tinted orange.
+ *
+ * A greese ui color theme (ADR 0025): the brand colors and the neutrals
+ * (canvas, surfaces, text, borders) in both schemes, in @layer greese.theme;
+ * content and strong shades are derived for contrast (WCAG AA). It sets no
+ * shapes and no motion, so it goes with any shape or motion theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled sunset.css.
+ *
+ * Generated from apps/site/src/studio/presets.ts (npm run themes -w site).
+ */
+// Generated by greese ui Theme Studio from greese-theme.json. Edit it there, or in
+// the studio (npm run studio); changes made here are overwritten.
+@use 'pkg:@greese/ui/scss/kit' as greese;
+
+@include greese.tokens((
+  color: (
+    primary: (light: "orange-700", dark: "orange-400"),
+    secondary: (light: "ruby-600", dark: "ruby-400"),
+    tertiary: (light: "gold-700", dark: "gold-400"),
+    accent: (light: "magenta-600", dark: "magenta-400"),
+    canvas: (light: "orange-50", dark: "orange-999"),
+    surface: (light: "orange-100", dark: "orange-900"),
+    surface-overlay: (light: "#ffffff", dark: "orange-800"),
+    fg: (light: "orange-999", dark: "orange-100"),
+    fg-muted: (light: "orange-700", dark: "orange-300"),
+    border: (light: "orange-200", dark: "orange-800"),
+    border-strong: (light: "orange-400", dark: "orange-700"),
+    track: (light: "orange-200", dark: "orange-600"),
+  ),
+));