@greese/ui 1.0.0 → 1.2.0

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

@@ -23,197 +23,197 @@
   }
 }
 @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;
   }
 }
 @layer greese.overrides {
-  .greese-Alert {
+  .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.25rem 0 0 color-mix(in oklab, var(--greese-alert-tone) 40%, transparent);
     padding-block-end: calc(var(--greese-space-3) + 0.25rem);
   }
 }
 @layer greese.overrides {
-  .greese-Avatar {
+  .greese-Avatar:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     border-radius: var(--greese-radius-md);
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.1875rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Badge {
+  .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.125rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Button:not(.greese-Button--ghost) {
+  .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):not(.greese-Button--ghost) {
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.25rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
-  .greese-Button:not(.greese-Button--ghost):active:not(:disabled, [aria-disabled=true]) {
+  .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):not(.greese-Button--ghost):active:not(:disabled, [aria-disabled=true]) {
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.0625rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
   @supports (color: color(from red srgb-linear calc(r * 1) g b/calc(alpha * 1))) {
-    .greese-Button:not(.greese-Button--ghost) {
+    .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):not(.greese-Button--ghost) {
       --greese-button-edge: color(from var(--greese-button-bg) srgb-linear calc(clamp(0, (alpha - 0.98) * 100, 1) * (clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1) * r * max(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05)) / max(0.0001, (0.2126 * r + 0.7152 * g + 0.0722 * b)) + (1 - clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1)) * (r + (1 - r) * (min(1, 3.1 * ((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) - 0.05) - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.0001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b))))) calc(clamp(0, (alpha - 0.98) * 100, 1) * (clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1) * g * max(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05)) / max(0.0001, (0.2126 * r + 0.7152 * g + 0.0722 * b)) + (1 - clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1)) * (g + (1 - g) * (min(1, 3.1 * ((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) - 0.05) - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.0001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b))))) calc(clamp(0, (alpha - 0.98) * 100, 1) * (clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1) * b * max(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05)) / max(0.0001, (0.2126 * r + 0.7152 * g + 0.0722 * b)) + (1 - clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1)) * (b + (1 - b) * (min(1, 3.1 * ((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) - 0.05) - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.0001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b))))) / calc(0.24 + clamp(0, (alpha - 0.98) * 100, 1) * 0.76));
       box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.25rem 0 0 var(--greese-button-edge);
     }
-    .greese-Button:not(.greese-Button--ghost):active:not(:disabled, [aria-disabled=true]) {
+    .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):not(.greese-Button--ghost):active:not(:disabled, [aria-disabled=true]) {
       box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.0625rem 0 0 var(--greese-button-edge);
     }
   }
   @media (prefers-reduced-motion: no-preference) {
-    .greese-Button {
+    .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
       transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
     }
   }
-  .greese-Button:active:not(:disabled, [aria-disabled=true]) {
+  .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active:not(:disabled, [aria-disabled=true]) {
     transform: translateY(0.1875rem);
   }
 }
 @layer greese.overrides {
-  .greese-Card {
+  .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 0 0 1px var(--greese-color-border), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.375rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Chip {
+  .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.1875rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
   @media (prefers-reduced-motion: no-preference) {
-    .greese-Chip {
+    .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
       transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
     }
   }
-  .greese-Chip:active:not(:disabled, [aria-disabled=true]) {
+  .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active:not(:disabled, [aria-disabled=true]) {
     transform: translateY(0.125rem);
   }
 }
 @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);
   }
-  .greese-Collapsible > .greese-Collapsible-trigger {
+  .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger {
     border-color: transparent;
     box-shadow: inset 0 0 0 1px var(--greese-color-border), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.25rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
   @media (prefers-reduced-motion: no-preference) {
-    .greese-Collapsible > .greese-Collapsible-trigger {
+    .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger {
       transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
     }
   }
-  .greese-Collapsible > .greese-Collapsible-trigger:active:not(:disabled, [aria-disabled=true]) {
+  .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger:active:not(:disabled, [aria-disabled=true]) {
     transform: translateY(0.1875rem);
   }
-  .greese-Collapsible[open] > .greese-Collapsible-trigger {
+  .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[open] > .greese-Collapsible-trigger {
     box-shadow: inset 0 0 0 1px var(--greese-color-border), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.0625rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Input {
+  .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Key {
+  .greese-Key:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.1875rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-OtpField .greese-OtpField-slot {
+  .greese-OtpField:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-OtpField-slot {
     box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Progress {
+  .greese-Progress:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
   }
-  .greese-Progress::-webkit-progress-value {
+  .greese-Progress:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::-webkit-progress-value {
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 calc(-1 * max(1px, var(--greese-progress-height) / 3)) 0 0 color-mix(in oklab, black 24%, transparent);
   }
-  .greese-Progress::-moz-progress-bar {
+  .greese-Progress:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::-moz-progress-bar {
     box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 calc(-1 * max(1px, var(--greese-progress-height) / 3)) 0 0 color-mix(in oklab, black 24%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Segment:has(:checked) {
+  .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):has(:checked) {
     box-shadow: inset 0 0 0 1.5px var(--greese-segment-current-ring, transparent), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.1875rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
   @media (prefers-reduced-motion: no-preference) {
-    .greese-Segment {
+    .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
       transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
     }
   }
-  .greese-Segment:active:not(:disabled, [aria-disabled=true]) {
+  .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active:not(:disabled, [aria-disabled=true]) {
     transform: translateY(0.125rem);
   }
 }
 @layer greese.overrides {
-  .greese-SegmentedControl .greese-SegmentedControl-track {
+  .greese-SegmentedControl:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-SegmentedControl-track {
     padding: 0.25rem;
     box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Select {
+  .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
   }
 }
 @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-lg);
   }
-  .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-md);
   }
 }
 @layer greese.overrides {
-  .greese-Tab {
+  .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     background-color: var(--greese-color-surface);
     border-radius: var(--greese-corner-control) var(--greese-corner-control) 0 0;
     box-shadow: inset 0 -1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 0.25rem 0 0 color-mix(in oklab, black 22%, transparent);
     padding-block-start: 0.25rem;
   }
-  .greese-Tab[aria-selected=true] {
+  .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[aria-selected=true] {
     background-color: var(--greese-tab-current-bg, color-mix(in oklab, var(--greese-color-primary) 12%, var(--greese-color-canvas)));
     box-shadow: inset 0 0 0 1.5px var(--greese-tab-current-ring, transparent), inset 0 -2px 0 var(--greese-color-primary), inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
     transform: translateY(0.125rem);
   }
   @media (prefers-reduced-motion: no-preference) {
-    .greese-Tab {
+    .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
       transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
     }
   }
-  .greese-Tab:active:not(:disabled, [aria-disabled=true]) {
+  .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active:not(:disabled, [aria-disabled=true]) {
     transform: translateY(0.125rem);
   }
 }
 @layer greese.overrides {
-  .greese-Textarea {
+  .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
   }
 }
 @layer greese.overrides {
-  .greese-Tile {
+  .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
     box-shadow: inset 0 0 0 1px var(--greese-color-border), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.375rem 0 0 color-mix(in oklab, black 24%, transparent);
   }
 }