@greese/ui 0.0.0-stage → 1.1.0

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/gentle.css

@@ -0,0 +1,66 @@
+/**
+ * Gentle: unhurried and soft. Long durations that ease out and a wide stagger; things come into focus out of a blur, and overlays sink away. Pages change softly: the old one fades away while the new one comes into focus.
+ *
+ * A greese ui motion theme (ADR 0025): it assigns the motion roles (which
+ * built-in effect plays where, and which duration and easing it takes) and
+ * paces every entrance. It redefines no effect and no token, and sets no
+ * colors and no shapes, so it goes with any of those.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/gentle.css'
+ *
+ * Generated from apps/site/src/studio/motions.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.overrides {
+  :root {
+    --greese-motion-duration: 0.8s;
+    --greese-motion-distance: 1.5rem;
+    --greese-motion-stagger: 0.09s;
+    --greese-motion-theme: greese-blur-in;
+    --greese-motion-content: greese-blur-in;
+    --greese-motion-rows: greese-fade-up;
+    --greese-motion-toast: greese-fade-up;
+    --greese-motion-overlay: greese-blur-in;
+    --greese-motion-overlay-exit-translate: 0px var(--greese-motion-distance, 1rem);
+    --greese-motion-overlay-exit-scale: 1;
+    --greese-motion-overlay-exit-opacity: 0;
+    --greese-motion-overlay-exit-mask-image: none;
+    --greese-motion-overlay-exit-transform: none;
+    --greese-motion-content-duration: var(--greese-duration-slow);
+    --greese-motion-rows-duration: var(--greese-duration-slow);
+    --greese-motion-overlay-duration: var(--greese-duration-slow);
+    --greese-motion-toast-duration: var(--greese-duration-slow);
+    --greese-motion-exit-duration: var(--greese-duration-normal);
+    --greese-motion-enter-ease: cubic-bezier(0.16, 1, 0.3, 1);
+    --greese-motion-exit-ease: cubic-bezier(0.7, 0, 0.84, 0);
+    --greese-motion-page: greese-blur-in;
+    --greese-motion-page-exit: greese-fade-out;
+    --greese-motion-page-duration: 0.7s;
+    --greese-motion-page-ease: cubic-bezier(0.16, 1, 0.3, 1);
+    --greese-motion-page-stagger: 0.09s;
+  }
+}
+@layer greese.utilities {
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes greese-blur-in {
+      from {
+        filter: blur(8px);
+      }
+    }
+    @keyframes greese-fade-up {
+      from {
+        translate: 0px var(--greese-motion-distance, 1rem);
+        opacity: 0;
+      }
+    }
+    @keyframes greese-fade-out {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+  }
+}

package/themes/gentle.scss

@@ -0,0 +1,39 @@
+/**
+ * Gentle: unhurried and soft. Long durations that ease out and a wide stagger; things come into focus out of a blur, and overlays sink away. Pages change softly: the old one fades away while the new one comes into focus.
+ *
+ * A greese ui motion theme (ADR 0025): it assigns the motion roles (which
+ * built-in effect plays where, and which duration and easing it takes) and
+ * paces every entrance. It redefines no effect and no token, and sets no
+ * colors and no shapes, so it goes with any of those.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled gentle.css.
+ *
+ * Generated from apps/site/src/studio/motions.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.motion-defaults((
+  duration: "0.8s",
+  distance: "1.5rem",
+  stagger: "0.09s",
+  theme: "blur-in",
+  content: "blur-in",
+  rows: "fade-up",
+  toast: "fade-up",
+  overlay: "blur-in",
+  overlay-exit: "fade-out-down",
+  content-duration: "slow",
+  rows-duration: "slow",
+  overlay-duration: "slow",
+  toast-duration: "slow",
+  exit-duration: "normal",
+  enter-ease: "cubic-bezier(0.16, 1, 0.3, 1)",
+  exit-ease: "cubic-bezier(0.7, 0, 0.84, 0)",
+  page: "blur-in",
+  page-exit: "fade-out",
+  page-duration: "0.7s",
+  page-ease: "cubic-bezier(0.16, 1, 0.3, 1)",
+  page-stagger: "0.09s",
+));

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"),
+  ),
+));