@greese/ui 0.0.0-stage → 1.1.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/depth.css

@@ -0,0 +1,123 @@
+/**
+ * Depth: things turn into place in three dimensions. Reveals, panels, table rows and toasts flip up into place, menus swing down from their top edge like a sign and back up, tooltips flip up and back, and dialogs rise out of the page from behind it and sink back in. Pages are the two faces of a panel that turns half over, the whole page at once: one way going forward and the other going back.
+ *
+ * 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/depth.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.6s;
+    --greese-motion-distance: 1rem;
+    --greese-motion-stagger: 0.06s;
+    --greese-motion-theme: greese-flip-up;
+    --greese-motion-content: greese-flip-up;
+    --greese-motion-rows: greese-flip-up;
+    --greese-motion-toast: greese-flip-up;
+    --greese-motion-dialog: greese-depth-in;
+    --greese-motion-dialog-exit-translate: 0px 0px;
+    --greese-motion-dialog-exit-scale: 1;
+    --greese-motion-dialog-exit-opacity: 0;
+    --greese-motion-dialog-exit-mask-image: none;
+    --greese-motion-dialog-exit-transform: perspective(800px) translateZ(-240px);
+    --greese-motion-popover: greese-swing-in;
+    --greese-motion-popover-exit-translate: 0px 0px;
+    --greese-motion-popover-exit-scale: 1;
+    --greese-motion-popover-exit-opacity: 0;
+    --greese-motion-popover-exit-mask-image: none;
+    --greese-motion-popover-exit-transform: perspective(800px) rotateX(-80deg);
+    --greese-motion-popover-exit-transform-origin: 50% 0%;
+    --greese-motion-tooltip: greese-flip-up;
+    --greese-motion-tooltip-exit-translate: 0px 0px;
+    --greese-motion-tooltip-exit-scale: 1;
+    --greese-motion-tooltip-exit-opacity: 0;
+    --greese-motion-tooltip-exit-mask-image: none;
+    --greese-motion-tooltip-exit-transform: perspective(800px) rotateX(75deg);
+    --greese-motion-content-duration: var(--greese-duration-slow);
+    --greese-motion-rows-duration: var(--greese-duration-slow);
+    --greese-motion-overlay-duration: var(--greese-duration-normal);
+    --greese-motion-toast-duration: var(--greese-duration-slow);
+    --greese-motion-exit-duration: var(--greese-duration-normal);
+    --greese-motion-enter-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+    --greese-motion-exit-ease: var(--greese-easing-exit);
+    --greese-motion-page: greese-flip-over-right;
+    --greese-motion-page-exit: greese-flip-over-out-left;
+    --greese-motion-page-back: greese-flip-over-left;
+    --greese-motion-page-back-exit: greese-flip-over-out-right;
+    --greese-motion-page-mode: snapshot;
+    --greese-motion-page-duration: 0.8s;
+    --greese-motion-page-ease: cubic-bezier(0.65, 0, 0.35, 1);
+    --greese-motion-page-stagger: 0.06s;
+  }
+}
+@layer greese.utilities {
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes greese-flip-up {
+      from {
+        opacity: 0;
+        transform: perspective(800px) rotateX(75deg);
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @keyframes greese-depth-in {
+      from {
+        opacity: 0;
+        transform: perspective(800px) translateZ(-240px);
+      }
+      60% {
+        opacity: 1;
+      }
+    }
+    @keyframes greese-swing-in {
+      from {
+        opacity: 0;
+        transform: perspective(800px) rotateX(-80deg);
+        transform-origin: 50% 0%;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @keyframes greese-flip-over-right {
+      from {
+        transform: perspective(2000px) rotateY(-180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-out-left {
+      from {
+        transform: perspective(2000px) rotateY(0deg);
+        backface-visibility: hidden;
+      }
+      to {
+        transform: perspective(2000px) rotateY(180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-left {
+      from {
+        transform: perspective(2000px) rotateY(180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-out-right {
+      from {
+        transform: perspective(2000px) rotateY(0deg);
+        backface-visibility: hidden;
+      }
+      to {
+        transform: perspective(2000px) rotateY(-180deg);
+        backface-visibility: hidden;
+      }
+    }
+  }
+}

package/themes/depth.scss

@@ -0,0 +1,46 @@
+/**
+ * Depth: things turn into place in three dimensions. Reveals, panels, table rows and toasts flip up into place, menus swing down from their top edge like a sign and back up, tooltips flip up and back, and dialogs rise out of the page from behind it and sink back in. Pages are the two faces of a panel that turns half over, the whole page at once: one way going forward and the other going back.
+ *
+ * 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 depth.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.6s",
+  distance: "1rem",
+  stagger: "0.06s",
+  theme: "flip-up",
+  content: "flip-up",
+  rows: "flip-up",
+  toast: "flip-up",
+  dialog: "depth-in",
+  dialog-exit: "depth-out",
+  popover: "swing-in",
+  popover-exit: "swing-out",
+  tooltip: "flip-up",
+  tooltip-exit: "flip-out-up",
+  content-duration: "slow",
+  rows-duration: "slow",
+  overlay-duration: "normal",
+  toast-duration: "slow",
+  exit-duration: "normal",
+  enter-ease: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  exit-ease: "exit",
+  page: "flip-over-right",
+  page-exit: "flip-over-out-left",
+  page-back: "flip-over-left",
+  page-back-exit: "flip-over-out-right",
+  page-mode: "snapshot",
+  page-duration: "0.8s",
+  page-ease: "cubic-bezier(0.65, 0, 0.35, 1)",
+  page-stagger: "0.06s",
+));

package/themes/extrude.css

@@ -0,0 +1,219 @@
+/**
+ * Extrude: solid, like keycaps. Buttons, chips, badges, keys, avatars, collapsible headers and the chosen segment stand out of the page on a thick lower edge and sink into it when pressed; tabs stand up on a thick top edge and the current one is pressed in; cards, tiles and alerts are blocks with a deep lower edge, an alert’s in its tone; fields, code boxes, tracks and the segmented control are pressed into the page, and a progress bar’s fill stands up out of its track. All of it drawn inside each box, so it survives every motion theme’s masks.
+ *
+ * A greese ui shape theme (ADR 0025): radii, and components outlined with one
+ * clip and one border ring each (ADR 0024), in @layer greese.overrides. It
+ * sets no colors and no motion, so it goes with any color or motion theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/extrude.css'
+ *
+ * Generated from apps/site/src/studio/shapes.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 {
+    --greese-corner-control: var(--greese-radius-md);
+    --greese-corner-field: var(--greese-radius-sm);
+    --greese-corner-surface: var(--greese-radius-md);
+    --greese-corner-panel: var(--greese-radius-md);
+    --greese-corner-inset: var(--greese-radius-sm);
+    --greese-corner-pill: var(--greese-radius-pill);
+    --greese-corner-round: var(--greese-radius-round);
+  }
+}
+@layer greese.overrides {
+  .greese-Accordion {
+    display: grid;
+    gap: var(--greese-space-2);
+    border-block-start: 0;
+  }
+}
+@layer greese.overrides {
+  .greese-AccordionItem {
+    border-block-end: 0;
+  }
+}
+@layer greese.overrides {
+  .greese-Alert {
+    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 {
+    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 {
+    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) {
+    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]) {
+    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-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]) {
+      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 {
+      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]) {
+    transform: translateY(0.1875rem);
+  }
+}
+@layer greese.overrides {
+  .greese-Card {
+    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 {
+    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 {
+      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]) {
+    transform: translateY(0.125rem);
+  }
+}
+@layer greese.overrides {
+  .greese-Collapsible > .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 {
+      background-color: color-mix(in oklab, var(--greese-color-fg) 5%, var(--greese-color-surface));
+    }
+  }
+  .greese-Collapsible[open] > .greese-Collapsible-trigger {
+    margin-block-end: var(--greese-space-2);
+  }
+  .greese-Collapsible > .greese-Collapsible-content {
+    padding-inline: var(--greese-space-4);
+  }
+  .greese-Collapsible > .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 {
+      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]) {
+    transform: translateY(0.1875rem);
+  }
+  .greese-Collapsible[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 {
+    box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
+  }
+}
+@layer greese.overrides {
+  .greese-Key {
+    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 {
+    box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
+  }
+}
+@layer greese.overrides {
+  .greese-Progress {
+    box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
+  }
+  .greese-Progress::-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 {
+    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) {
+    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 {
+      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]) {
+    transform: translateY(0.125rem);
+  }
+}
+@layer greese.overrides {
+  .greese-SegmentedControl .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 {
+    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 {
+    border-radius: var(--greese-radius-lg);
+  }
+  .greese-SpeedDial .greese-SpeedDialAction-icon {
+    border-radius: var(--greese-radius-md);
+  }
+}
+@layer greese.overrides {
+  .greese-Tab {
+    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] {
+    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 {
+      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]) {
+    transform: translateY(0.125rem);
+  }
+}
+@layer greese.overrides {
+  .greese-Textarea {
+    box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
+  }
+}
+@layer greese.overrides {
+  .greese-Tile {
+    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);
+  }
+}