@greese/ui 0.0.0-stage → 1.1.0

package/themes/tilt.css

@@ -0,0 +1,148 @@
+/**
+ * Tilt: real perspective. Hovered, buttons and chips lean back toward you from their lower edge and cards and tiles turn and lift off the page; pressed, they push into it. The current tab stands up off its list. Softer corners than the library’s.
+ *
+ * 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/tilt.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-md);
+    --greese-corner-surface: var(--greese-radius-lg);
+    --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;
+  }
+}
+@layer greese.overrides {
+  .greese-Button {
+    transform-origin: 50% 100%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Button {
+      transition: transform var(--greese-duration-normal) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-normal) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
+    .greese-Button:hover:not(:disabled, [aria-disabled=true]) {
+      transform: perspective(24rem) rotateX(18deg) translateZ(0.25rem);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Button:active:not(:disabled, [aria-disabled=true]) {
+      transform: perspective(24rem) translateZ(-0.75rem);
+    }
+  }
+}
+@layer greese.overrides {
+  .greese-Card.greese-Card--interactive {
+    transform-origin: 50% 50%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Card.greese-Card--interactive {
+      transition: transform var(--greese-duration-normal) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-normal) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
+    .greese-Card.greese-Card--interactive:hover:not(:disabled, [aria-disabled=true]) {
+      transform: perspective(60rem) rotateX(5deg) rotateY(-7deg) translateZ(1rem);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Card.greese-Card--interactive:active:not(:disabled, [aria-disabled=true]) {
+      transform: perspective(60rem) translateZ(-0.5rem);
+    }
+  }
+}
+@layer greese.overrides {
+  .greese-Chip {
+    transform-origin: 50% 100%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Chip {
+      transition: transform var(--greese-duration-normal) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-normal) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
+    .greese-Chip:hover:not(:disabled, [aria-disabled=true]) {
+      transform: perspective(20rem) rotateX(18deg);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Chip:active:not(:disabled, [aria-disabled=true]) {
+      transform: perspective(20rem) translateZ(-0.5rem);
+    }
+  }
+}
+@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-Tab {
+    transform-origin: 50% 100%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Tab {
+      transition: transform var(--greese-duration-normal) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard);
+    }
+    .greese-Tab[aria-selected=true] {
+      transform: perspective(16rem) rotateX(-14deg);
+    }
+  }
+}
+@layer greese.overrides {
+  .greese-Tile {
+    transform-origin: 50% 50%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Tile {
+      transition: transform var(--greese-duration-normal) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-normal) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
+    .greese-Tile:hover:not(:disabled, [aria-disabled=true]) {
+      transform: perspective(50rem) rotateX(6deg) rotateY(-8deg) translateZ(0.75rem);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Tile:active:not(:disabled, [aria-disabled=true]) {
+      transform: perspective(50rem) translateZ(-0.5rem);
+    }
+  }
+}

package/themes/tilt.scss

@@ -0,0 +1,169 @@
+/**
+ * Tilt: real perspective. Hovered, buttons and chips lean back toward you from their lower edge and cards and tiles turn and lift off the page; pressed, they push into it. The current tab stands up off its list. Softer corners than the library’s.
+ *
+ * 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 tilt.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-md)",
+    surface: "var(--greese-radius-lg)",
+    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;
+}
+
+@include greese.component(Button) {
+  transform-origin: 50% 100%;
+
+  @include greese.motion-safe {
+    transition:
+      transform var(--greese-duration-normal) var(--greese-easing-standard),
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      border-color var(--greese-duration-fast) var(--greese-easing-standard),
+      box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
+      color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @media (hover: hover) {
+      &:hover:not(:disabled, [aria-disabled='true']) {
+        transform: perspective(24rem) rotateX(18deg) translateZ(0.25rem);
+      }
+    }
+
+    &:active:not(:disabled, [aria-disabled='true']) {
+      transform: perspective(24rem) translateZ(-0.75rem);
+    }
+  }
+}
+
+@include greese.component(Card) {
+  &.greese-Card--interactive {
+    transform-origin: 50% 50%;
+    
+    @include greese.motion-safe {
+      transition:
+        transform var(--greese-duration-normal) var(--greese-easing-standard),
+        background-color var(--greese-duration-fast) var(--greese-easing-standard),
+        border-color var(--greese-duration-fast) var(--greese-easing-standard),
+        box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
+        color var(--greese-duration-fast) var(--greese-easing-standard);
+    
+      @media (hover: hover) {
+        &:hover:not(:disabled, [aria-disabled='true']) {
+          transform: perspective(60rem) rotateX(5deg) rotateY(-7deg) translateZ(1rem);
+        }
+      }
+    
+      &:active:not(:disabled, [aria-disabled='true']) {
+        transform: perspective(60rem) translateZ(-0.5rem);
+      }
+    }
+  }
+}
+
+@include greese.component(Chip) {
+  transform-origin: 50% 100%;
+
+  @include greese.motion-safe {
+    transition:
+      transform var(--greese-duration-normal) var(--greese-easing-standard),
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      border-color var(--greese-duration-fast) var(--greese-easing-standard),
+      box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
+      color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @media (hover: hover) {
+      &:hover:not(:disabled, [aria-disabled='true']) {
+        transform: perspective(20rem) rotateX(18deg);
+      }
+    }
+
+    &:active:not(:disabled, [aria-disabled='true']) {
+      transform: perspective(20rem) translateZ(-0.5rem);
+    }
+  }
+}
+
+@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(Tab) {
+  transform-origin: 50% 100%;
+
+  @include greese.motion-safe {
+    transition:
+      transform var(--greese-duration-normal) var(--greese-easing-standard),
+      color var(--greese-duration-fast) var(--greese-easing-standard),
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      box-shadow var(--greese-duration-fast) var(--greese-easing-standard);
+
+    &[aria-selected='true'] {
+      transform: perspective(16rem) rotateX(-14deg);
+    }
+  }
+}
+
+@include greese.component(Tile) {
+  transform-origin: 50% 50%;
+
+  @include greese.motion-safe {
+    transition:
+      transform var(--greese-duration-normal) var(--greese-easing-standard),
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      border-color var(--greese-duration-fast) var(--greese-easing-standard),
+      box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
+      color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @media (hover: hover) {
+      &:hover:not(:disabled, [aria-disabled='true']) {
+        transform: perspective(50rem) rotateX(6deg) rotateY(-8deg) translateZ(0.75rem);
+      }
+    }
+
+    &:active:not(:disabled, [aria-disabled='true']) {
+      transform: perspective(50rem) translateZ(-0.5rem);
+    }
+  }
+}

package/themes/wipe.css

@@ -0,0 +1,186 @@
+/**
+ * Wipe: things are revealed in place rather than moved. Reveals wipe up, panels and toasts open from the middle, table rows wipe across, menus wipe down from their trigger and back up, tooltips open and close from the middle, and dialogs open and close as a circle. Pages change along one edge, the whole page at once: the next wipes in as the last wipes away, from the right going forward and from the left 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/wipe.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: 0.75rem;
+    --greese-motion-stagger: 0.06s;
+    --greese-motion-theme: greese-wipe-up;
+    --greese-motion-content: greese-wipe-open-x;
+    --greese-motion-rows: greese-wipe-right;
+    --greese-motion-toast: greese-wipe-open-x;
+    --greese-motion-dialog: greese-iris-in;
+    --greese-motion-dialog-exit-translate: 0px 0px;
+    --greese-motion-dialog-exit-scale: 1;
+    --greese-motion-dialog-exit-opacity: 1;
+    --greese-motion-dialog-exit-mask-image: radial-gradient(closest-side, black 98%, transparent);
+    --greese-motion-dialog-exit-mask-size: 0% 0%;
+    --greese-motion-dialog-exit-mask-repeat: no-repeat;
+    --greese-motion-dialog-exit-mask-position: 50% 50%;
+    --greese-motion-dialog-exit-transform: none;
+    --greese-motion-dialog-exit-mask-from: 142% 142%;
+    --greese-motion-popover: greese-wipe-down;
+    --greese-motion-popover-exit-translate: 0px 0px;
+    --greese-motion-popover-exit-scale: 1;
+    --greese-motion-popover-exit-opacity: 1;
+    --greese-motion-popover-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-popover-exit-mask-size: 100% 0%;
+    --greese-motion-popover-exit-mask-repeat: no-repeat;
+    --greese-motion-popover-exit-mask-position: 50% 0%;
+    --greese-motion-popover-exit-transform: none;
+    --greese-motion-popover-exit-mask-from: 100% 100%;
+    --greese-motion-tooltip: greese-wipe-open-x;
+    --greese-motion-tooltip-exit-translate: 0px 0px;
+    --greese-motion-tooltip-exit-scale: 1;
+    --greese-motion-tooltip-exit-opacity: 1;
+    --greese-motion-tooltip-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-tooltip-exit-mask-size: 0% 100%;
+    --greese-motion-tooltip-exit-mask-repeat: no-repeat;
+    --greese-motion-tooltip-exit-mask-position: 50% 50%;
+    --greese-motion-tooltip-exit-transform: none;
+    --greese-motion-tooltip-exit-mask-from: 100% 100%;
+    --greese-motion-content-duration: var(--greese-duration-normal);
+    --greese-motion-rows-duration: var(--greese-duration-slow);
+    --greese-motion-overlay-duration: var(--greese-duration-normal);
+    --greese-motion-toast-duration: var(--greese-duration-normal);
+    --greese-motion-exit-duration: var(--greese-duration-normal);
+    --greese-motion-enter-ease: cubic-bezier(0.65, 0, 0.35, 1);
+    --greese-motion-exit-ease: cubic-bezier(0.65, 0, 0.35, 1);
+    --greese-motion-page: greese-wipe-left;
+    --greese-motion-page-exit: greese-wipe-out-left;
+    --greese-motion-page-back: greese-wipe-right;
+    --greese-motion-page-back-exit: greese-wipe-out-right;
+    --greese-motion-page-mode: snapshot;
+    --greese-motion-page-duration: 0.6s;
+    --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-wipe-up {
+      from {
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+    @keyframes greese-wipe-open-x {
+      from {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+    }
+    @keyframes greese-wipe-right {
+      from {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+    }
+    @keyframes greese-iris-in {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(closest-side, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(closest-side, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+    }
+    @keyframes greese-wipe-down {
+      from {
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-wipe-left {
+      from {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+    }
+    @keyframes greese-wipe-out-left {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+      to {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+    }
+    @keyframes greese-wipe-out-right {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+      to {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+    }
+  }
+}

package/themes/wipe.scss

@@ -0,0 +1,46 @@
+/**
+ * Wipe: things are revealed in place rather than moved. Reveals wipe up, panels and toasts open from the middle, table rows wipe across, menus wipe down from their trigger and back up, tooltips open and close from the middle, and dialogs open and close as a circle. Pages change along one edge, the whole page at once: the next wipes in as the last wipes away, from the right going forward and from the left 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 wipe.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: "0.75rem",
+  stagger: "0.06s",
+  theme: "wipe-up",
+  content: "wipe-open-x",
+  rows: "wipe-right",
+  toast: "wipe-open-x",
+  dialog: "iris-in",
+  dialog-exit: "iris-out",
+  popover: "wipe-down",
+  popover-exit: "wipe-out-up",
+  tooltip: "wipe-open-x",
+  tooltip-exit: "wipe-close-x",
+  content-duration: "normal",
+  rows-duration: "slow",
+  overlay-duration: "normal",
+  toast-duration: "normal",
+  exit-duration: "normal",
+  enter-ease: "cubic-bezier(0.65, 0, 0.35, 1)",
+  exit-ease: "cubic-bezier(0.65, 0, 0.35, 1)",
+  page: "wipe-left",
+  page-exit: "wipe-out-left",
+  page-back: "wipe-right",
+  page-back-exit: "wipe-out-right",
+  page-mode: "snapshot",
+  page-duration: "0.6s",
+  page-ease: "cubic-bezier(0.65, 0, 0.35, 1)",
+  page-stagger: "0.06s",
+));