@greese/ui 0.0.0-stage → 1.0.0

package/themes/snappy.css

@@ -0,0 +1,82 @@
+/**
+ * Snappy: quick and decisive. Short durations, a sharp curve, a tight stagger; things pop in from a short distance, and overlays scale in and away. Pages pop: the old one pops away all at once and the new one pops in.
+ *
+ * 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/snappy.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.25s;
+    --greese-motion-distance: 0.5rem;
+    --greese-motion-stagger: 0.03s;
+    --greese-motion-theme: greese-pop-in;
+    --greese-motion-content: greese-fade-up;
+    --greese-motion-rows: greese-fade-up;
+    --greese-motion-toast: greese-pop-in;
+    --greese-motion-overlay: greese-scale-in;
+    --greese-motion-overlay-exit-translate: 0px 0px;
+    --greese-motion-overlay-exit-scale: 0;
+    --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-fast);
+    --greese-motion-rows-duration: var(--greese-duration-fast);
+    --greese-motion-overlay-duration: var(--greese-duration-fast);
+    --greese-motion-toast-duration: var(--greese-duration-fast);
+    --greese-motion-exit-duration: var(--greese-duration-fast);
+    --greese-motion-enter-ease: cubic-bezier(0, 0, 0, 1);
+    --greese-motion-exit-ease: var(--greese-easing-exit);
+    --greese-motion-page: greese-pop-in;
+    --greese-motion-page-exit: greese-pop-out;
+    --greese-motion-page-duration: 0.25s;
+    --greese-motion-page-ease: cubic-bezier(0, 0, 0, 1);
+    --greese-motion-page-stagger: 0.03s;
+    --greese-motion-page-exit-order: together;
+  }
+}
+@layer greese.utilities {
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes greese-pop-in {
+      from {
+        scale: 0.8;
+        opacity: 0;
+      }
+      60% {
+        scale: 1.04;
+        opacity: 1;
+      }
+    }
+    @keyframes greese-fade-up {
+      from {
+        translate: 0px var(--greese-motion-distance, 1rem);
+        opacity: 0;
+      }
+    }
+    @keyframes greese-scale-in {
+      from {
+        scale: 0;
+      }
+    }
+    @keyframes greese-pop-out {
+      from {
+        scale: 1;
+      }
+      40% {
+        scale: 1.04;
+        opacity: 1;
+      }
+      to {
+        scale: 0.8;
+        opacity: 0;
+      }
+    }
+  }
+}

package/themes/snappy.scss

@@ -0,0 +1,40 @@
+/**
+ * Snappy: quick and decisive. Short durations, a sharp curve, a tight stagger; things pop in from a short distance, and overlays scale in and away. Pages pop: the old one pops away all at once and the new one pops in.
+ *
+ * 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 snappy.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.25s",
+  distance: "0.5rem",
+  stagger: "0.03s",
+  theme: "pop-in",
+  content: "fade-up",
+  rows: "fade-up",
+  toast: "pop-in",
+  overlay: "scale-in",
+  overlay-exit: "scale-out",
+  content-duration: "fast",
+  rows-duration: "fast",
+  overlay-duration: "fast",
+  toast-duration: "fast",
+  exit-duration: "fast",
+  enter-ease: "cubic-bezier(0, 0, 0, 1)",
+  exit-ease: "exit",
+  page: "pop-in",
+  page-exit: "pop-out",
+  page-duration: "0.25s",
+  page-ease: "cubic-bezier(0, 0, 0, 1)",
+  page-stagger: "0.03s",
+  page-exit-order: "together",
+));

package/themes/soft.css

@@ -0,0 +1,79 @@
+/**
+ * Soft: every corner rounded, a step rounder than the library. Controls and fields take the large radius, containers the extra-large one, accordion items are rounded panels and the off-canvas sidebar rounds its inner edge.
+ *
+ * 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/soft.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-lg);
+    --greese-corner-field: var(--greese-radius-lg);
+    --greese-corner-surface: var(--greese-radius-xl);
+    --greese-corner-panel: var(--greese-radius-lg);
+    --greese-corner-inset: var(--greese-radius-md);
+    --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;
+  }
+  .greese-AccordionItem > .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 {
+    border-radius: var(--greese-radius-lg);
+  }
+}
+@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);
+  }
+}
+@layer greese.overrides {
+  .greese-Sidebar {
+    border-start-end-radius: var(--greese-corner-surface);
+    border-end-end-radius: var(--greese-corner-surface);
+  }
+}
+@layer greese.overrides {
+  .greese-SpeedDial .greese-SpeedDial-trigger {
+    border-radius: var(--greese-radius-xl);
+  }
+  .greese-SpeedDial .greese-SpeedDialAction-icon {
+    border-radius: var(--greese-radius-lg);
+  }
+}

package/themes/soft.scss

@@ -0,0 +1,84 @@
+/**
+ * Soft: every corner rounded, a step rounder than the library. Controls and fields take the large radius, containers the extra-large one, accordion items are rounded panels and the off-canvas sidebar rounds its inner edge.
+ *
+ * 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.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled soft.css.
+ *
+ * Generated from apps/site/src/studio/shapes.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((
+  corner: (
+    control: "var(--greese-radius-lg)",
+    field: "var(--greese-radius-lg)",
+    surface: "var(--greese-radius-xl)",
+    panel: "var(--greese-radius-lg)",
+    inset: "var(--greese-radius-md)",
+    pill: "var(--greese-radius-pill)",
+    round: "var(--greese-radius-round)",
+  ),
+));
+
+@include greese.component(Accordion) {
+  display: grid;
+  gap: var(--greese-space-2);
+  border-block-start: 0;
+}
+
+@include greese.component(AccordionItem) {
+  border-block-end: 0;
+
+  > .greese-Collapsible-content {
+    padding-block-start: var(--greese-space-3);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-panel);
+  }
+}
+
+@include greese.component(Avatar) {
+  border-radius: var(--greese-radius-lg);
+}
+
+@include greese.component(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) {
+      &:hover {
+        background-color: color-mix(in oklab, var(--greese-color-fg) 5%, var(--greese-color-surface));
+      }
+    }
+  }
+
+  &[open] > .greese-Collapsible-trigger {
+    margin-block-end: var(--greese-space-2);
+  }
+
+  > .greese-Collapsible-content {
+    padding-inline: var(--greese-space-4);
+  }
+}
+
+@include greese.component(Sidebar) {
+  border-start-end-radius: var(--greese-corner-surface);
+  border-end-end-radius: var(--greese-corner-surface);
+}
+
+@include greese.component(SpeedDial) {
+  .greese-SpeedDial-trigger {
+    border-radius: var(--greese-radius-xl);
+  }
+
+  .greese-SpeedDialAction-icon {
+    border-radius: var(--greese-radius-lg);
+  }
+}