@greese/ui 1.0.0 → 1.2.0

package/themes/soft.css

@@ -23,57 +23,57 @@
   }
 }
 @layer greese.overrides {
-  .greese-Accordion {
+  .greese-Accordion:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     display: grid;
     gap: var(--greese-space-2);
     border-block-start: 0;
   }
 }
 @layer greese.overrides {
-  .greese-AccordionItem {
+  .greese-AccordionItem:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     border-block-end: 0;
   }
-  .greese-AccordionItem > .greese-Collapsible-content {
+  .greese-AccordionItem:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-content {
     padding-block-start: var(--greese-space-3);
     border: 1px solid var(--greese-color-border);
     border-radius: var(--greese-corner-panel);
   }
 }
 @layer greese.overrides {
-  .greese-Avatar {
+  .greese-Avatar:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     border-radius: var(--greese-radius-lg);
   }
 }
 @layer greese.overrides {
-  .greese-Collapsible > .greese-Collapsible-trigger {
+  .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger {
     padding-inline: var(--greese-space-4);
     background-color: var(--greese-color-surface);
     border: 1px solid var(--greese-collapsible-border, var(--greese-color-border));
     border-radius: var(--greese-corner-control);
   }
   @media (hover: hover) {
-    .greese-Collapsible > .greese-Collapsible-trigger:hover {
+    .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger:hover {
       background-color: color-mix(in oklab, var(--greese-color-fg) 5%, var(--greese-color-surface));
     }
   }
-  .greese-Collapsible[open] > .greese-Collapsible-trigger {
+  .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[open] > .greese-Collapsible-trigger {
     margin-block-end: var(--greese-space-2);
   }
-  .greese-Collapsible > .greese-Collapsible-content {
+  .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-content {
     padding-inline: var(--greese-space-4);
   }
 }
 @layer greese.overrides {
-  .greese-Sidebar {
+  .greese-Sidebar:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     border-start-end-radius: var(--greese-corner-surface);
     border-end-end-radius: var(--greese-corner-surface);
   }
 }
 @layer greese.overrides {
-  .greese-SpeedDial .greese-SpeedDial-trigger {
+  .greese-SpeedDial:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-SpeedDial-trigger {
     border-radius: var(--greese-radius-xl);
   }
-  .greese-SpeedDial .greese-SpeedDialAction-icon {
+  .greese-SpeedDial:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-SpeedDialAction-icon {
     border-radius: var(--greese-radius-lg);
   }
 }

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