@greese/ui 0.0.0-stage → 1.1.0

package/themes/outline.css

@@ -0,0 +1,127 @@
+/**
+ * Outline: drawn rather than filled. Solid and soft buttons and badges, soft alerts, filled and elevated cards and tiles, avatars, the current tab and segment, toasts and tooltips are outlined in their color, with text to match over a faint or neutral fill; what was outlined is filled instead.
+ *
+ * A greese ui color variant (ADR 0025): how any color theme's colors are worn,
+ * reassigned per component variant in @layer greese.overrides. It sets no
+ * color tokens, shapes or motion, so it goes with any color, shape or motion
+ * theme.
+ * Load it after greese ui's styles:
+ *
+ *   import '@greese/ui/themes/outline.css'
+ *
+ * Generated from apps/site/src/studio/variants.ts (npm run themes -w site).
+ */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.overrides {
+  .greese-Alert.greese-Alert--soft {
+    background-color: var(--greese-color-canvas);
+    border-color: var(--greese-alert-tone);
+  }
+  .greese-Alert.greese-Alert--outline {
+    background-color: color-mix(in oklab, var(--greese-alert-tone) 14%, transparent);
+    border-color: transparent;
+  }
+}
+@layer greese.overrides {
+  .greese-Avatar {
+    background-color: transparent;
+    outline: 1.5px solid color-mix(in oklab, currentcolor 70%, transparent);
+    outline-offset: -1.5px;
+  }
+}
+@layer greese.overrides {
+  .greese-Badge.greese-Badge--solid {
+    color: var(--greese-badge-tone);
+    background-color: color-mix(in oklab, var(--greese-badge-tone) 8%, var(--greese-badge-surface));
+    border-color: var(--greese-badge-tone);
+  }
+  .greese-Badge.greese-Badge--soft {
+    background-color: var(--greese-badge-surface);
+    border-color: color-mix(in oklab, var(--greese-badge-tone) 55%, var(--greese-badge-surface));
+  }
+  .greese-Badge.greese-Badge--outline {
+    color: var(--greese-badge-tone-on);
+    background-color: var(--greese-badge-tone);
+    border-color: var(--greese-badge-tone);
+  }
+}
+@layer greese.overrides {
+  .greese-Button.greese-Button--solid {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: color-mix(in oklab, var(--greese-button-tone) 6%, transparent);
+    --greese-button-border: var(--greese-button-tone);
+    --greese-button-bg-hover: color-mix(in oklab, var(--greese-button-tone) 14%, transparent);
+    --greese-button-bg-active: color-mix(in oklab, var(--greese-button-tone) 22%, transparent);
+  }
+  .greese-Button.greese-Button--soft {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: transparent;
+    --greese-button-border: color-mix(in oklab, var(--greese-button-tone) 45%, transparent);
+    --greese-button-bg-hover: color-mix(in oklab, var(--greese-button-tone) 14%, transparent);
+    --greese-button-bg-active: color-mix(in oklab, var(--greese-button-tone) 22%, transparent);
+  }
+  .greese-Button.greese-Button--outline {
+    --greese-button-fg: var(--greese-button-on-tone);
+    --greese-button-bg: var(--greese-button-tone);
+    --greese-button-border: transparent;
+    --greese-button-bg-hover: color-mix(in oklab, var(--greese-button-tone), var(--greese-button-on-tone) 14%);
+    --greese-button-bg-active: color-mix(in oklab, var(--greese-button-tone), var(--greese-button-on-tone) 24%);
+  }
+}
+@layer greese.overrides {
+  .greese-Card.greese-Card--filled {
+    background-color: transparent;
+    border: 1px solid var(--greese-color-border-strong);
+    --greese-shape-ring: var(--greese-color-border-strong);
+  }
+  .greese-Card.greese-Card--elevated {
+    background-color: var(--greese-color-canvas);
+    border: 1px solid var(--greese-color-border-strong);
+    box-shadow: none;
+    --greese-shape-ring: var(--greese-color-border-strong);
+  }
+  .greese-Card.greese-Card--outline {
+    background-color: color-mix(in oklab, var(--greese-color-border) 65%, var(--greese-color-surface));
+    border-color: transparent;
+    --greese-shape-ring: transparent;
+  }
+}
+@layer greese.overrides {
+  .greese-Segment {
+    --greese-segment-current-bg: transparent;
+    --greese-segment-current-edge: inset 0 0 0 1.5px var(--greese-color-primary);
+    --greese-segment-current-ring: var(--greese-color-primary);
+  }
+}
+@layer greese.overrides {
+  .greese-Tab {
+    --greese-tab-current-bg: transparent;
+    --greese-tab-current-edge: inset 0 0 0 1.5px var(--greese-color-primary);
+    --greese-tab-current-ring: var(--greese-color-primary);
+  }
+}
+@layer greese.overrides {
+  .greese-Tile {
+    background-color: color-mix(in oklab, var(--greese-color-border) 65%, var(--greese-color-surface));
+    border-color: transparent;
+  }
+  .greese-Tile.greese-Tile--filled {
+    background-color: transparent;
+    border-color: var(--greese-color-border-strong);
+  }
+}
+@layer greese.overrides {
+  .greese-Toast {
+    background-color: var(--greese-color-canvas);
+    border: 1px solid var(--greese-toast-tone);
+    border-inline-start-width: 3px;
+  }
+}
+@layer greese.overrides {
+  .greese-Tooltip {
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-surface-overlay);
+    border: 1px solid var(--greese-color-fg);
+    --greese-tooltip-border: var(--greese-color-fg);
+  }
+}

package/themes/outline.scss

@@ -0,0 +1,126 @@
+/**
+ * Outline: drawn rather than filled. Solid and soft buttons and badges, soft alerts, filled and elevated cards and tiles, avatars, the current tab and segment, toasts and tooltips are outlined in their color, with text to match over a faint or neutral fill; what was outlined is filled instead.
+ *
+ * A greese ui color variant (ADR 0025): how any color theme's colors are worn,
+ * reassigned per component variant in @layer greese.overrides. It sets no
+ * color tokens, shapes or motion, so it goes with any color, shape or motion
+ * theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled outline.css.
+ *
+ * Generated from apps/site/src/studio/variants.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.component(Alert) {
+  @include greese.modifier(soft) {
+    background-color: var(--greese-color-canvas);
+    border-color: var(--greese-alert-tone);
+  }
+  @include greese.modifier(outline) {
+    background-color: color-mix(in oklab, var(--greese-alert-tone) 14%, transparent);
+    border-color: transparent;
+  }
+}
+
+@include greese.component(Avatar) {
+  background-color: transparent;
+  outline: 1.5px solid color-mix(in oklab, currentcolor 70%, transparent);
+  outline-offset: -1.5px;
+}
+
+@include greese.component(Badge) {
+  @include greese.modifier(solid) {
+    color: var(--greese-badge-tone);
+    background-color: color-mix(in oklab, var(--greese-badge-tone) 8%, var(--greese-badge-surface));
+    border-color: var(--greese-badge-tone);
+  }
+  @include greese.modifier(soft) {
+    background-color: var(--greese-badge-surface);
+    border-color: color-mix(in oklab, var(--greese-badge-tone) 55%, var(--greese-badge-surface));
+  }
+  @include greese.modifier(outline) {
+    color: var(--greese-badge-tone-on);
+    background-color: var(--greese-badge-tone);
+    border-color: var(--greese-badge-tone);
+  }
+}
+
+@include greese.component(Button) {
+  @include greese.modifier(solid) {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: color-mix(in oklab, var(--greese-button-tone) 6%, transparent);
+    --greese-button-border: var(--greese-button-tone);
+    --greese-button-bg-hover: color-mix(in oklab, var(--greese-button-tone) 14%, transparent);
+    --greese-button-bg-active: color-mix(in oklab, var(--greese-button-tone) 22%, transparent);
+  }
+  @include greese.modifier(soft) {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: transparent;
+    --greese-button-border: color-mix(in oklab, var(--greese-button-tone) 45%, transparent);
+    --greese-button-bg-hover: color-mix(in oklab, var(--greese-button-tone) 14%, transparent);
+    --greese-button-bg-active: color-mix(in oklab, var(--greese-button-tone) 22%, transparent);
+  }
+  @include greese.modifier(outline) {
+    --greese-button-fg: var(--greese-button-on-tone);
+    --greese-button-bg: var(--greese-button-tone);
+    --greese-button-border: transparent;
+    --greese-button-bg-hover: color-mix(in oklab, var(--greese-button-tone), var(--greese-button-on-tone) 14%);
+    --greese-button-bg-active: color-mix(in oklab, var(--greese-button-tone), var(--greese-button-on-tone) 24%);
+  }
+}
+
+@include greese.component(Card) {
+  @include greese.modifier(filled) {
+    background-color: transparent;
+    border: 1px solid var(--greese-color-border-strong);
+    --greese-shape-ring: var(--greese-color-border-strong);
+  }
+  @include greese.modifier(elevated) {
+    background-color: var(--greese-color-canvas);
+    border: 1px solid var(--greese-color-border-strong);
+    box-shadow: none;
+    --greese-shape-ring: var(--greese-color-border-strong);
+  }
+  @include greese.modifier(outline) {
+    background-color: color-mix(in oklab, var(--greese-color-border) 65%, var(--greese-color-surface));
+    border-color: transparent;
+    --greese-shape-ring: transparent;
+  }
+}
+
+@include greese.component(Segment) {
+  --greese-segment-current-bg: transparent;
+  --greese-segment-current-edge: inset 0 0 0 1.5px var(--greese-color-primary);
+  --greese-segment-current-ring: var(--greese-color-primary);
+}
+
+@include greese.component(Tab) {
+  --greese-tab-current-bg: transparent;
+  --greese-tab-current-edge: inset 0 0 0 1.5px var(--greese-color-primary);
+  --greese-tab-current-ring: var(--greese-color-primary);
+}
+
+@include greese.component(Tile) {
+  background-color: color-mix(in oklab, var(--greese-color-border) 65%, var(--greese-color-surface));
+  border-color: transparent;
+  @include greese.modifier(filled) {
+    background-color: transparent;
+    border-color: var(--greese-color-border-strong);
+  }
+}
+
+@include greese.component(Toast) {
+  background-color: var(--greese-color-canvas);
+  border: 1px solid var(--greese-toast-tone);
+  border-inline-start-width: 3px;
+}
+
+@include greese.component(Tooltip) {
+  color: var(--greese-color-fg);
+  background-color: var(--greese-color-surface-overlay);
+  border: 1px solid var(--greese-color-fg);
+  --greese-tooltip-border: var(--greese-color-fg);
+}

package/themes/pebble.css

@@ -0,0 +1,65 @@
+/**
+ * Pebble: as round as things get. Every control, field, tab, badge and tooltip is a pill, so square ones (icon buttons, checkboxes, avatars) are circles; containers take the extra-large radius, and a multi-line field the same, not a pill.
+ *
+ * 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/pebble.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-pill);
+    --greese-corner-field: var(--greese-radius-pill);
+    --greese-corner-surface: var(--greese-radius-xl);
+    --greese-corner-panel: var(--greese-radius-xl);
+    --greese-corner-inset: var(--greese-radius-pill);
+    --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-surface);
+  }
+}
+@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-Textarea {
+    border-radius: var(--greese-radius-xl);
+  }
+}

package/themes/pebble.scss

@@ -0,0 +1,69 @@
+/**
+ * Pebble: as round as things get. Every control, field, tab, badge and tooltip is a pill, so square ones (icon buttons, checkboxes, avatars) are circles; containers take the extra-large radius, and a multi-line field the same, not a pill.
+ *
+ * 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 pebble.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-pill)",
+    field: "var(--greese-radius-pill)",
+    surface: "var(--greese-radius-xl)",
+    panel: "var(--greese-radius-xl)",
+    inset: "var(--greese-radius-pill)",
+    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-surface);
+  }
+}
+
+@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(Textarea) {
+  border-radius: var(--greese-radius-xl);
+}

package/themes/pocket.css

@@ -0,0 +1,137 @@
+/**
+ * Pocket: things rise out of an invisible slot at one of their own edges, as if from a pocket, rather than fading in. Reveals, panels, table rows and toasts rise out of theirs; menus drop out of a slot under their trigger and go back up into it; dialogs and tooltips rise out of a slot and sink back into it. Pages sink into a slot at their foot and the next rises out of it; going back, they go up into a slot at their head and the last drops out of it.
+ *
+ * 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/pocket.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.55s;
+    --greese-motion-distance: 1.25rem;
+    --greese-motion-stagger: 0.05s;
+    --greese-motion-theme: greese-pocket-up;
+    --greese-motion-content: greese-pocket-up;
+    --greese-motion-rows: greese-pocket-up;
+    --greese-motion-toast: greese-pocket-up;
+    --greese-motion-dialog: greese-pocket-up;
+    --greese-motion-dialog-exit-translate: 0px 100%;
+    --greese-motion-dialog-exit-scale: 1;
+    --greese-motion-dialog-exit-opacity: 1;
+    --greese-motion-dialog-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-dialog-exit-mask-size: 100% 0%;
+    --greese-motion-dialog-exit-mask-repeat: no-repeat;
+    --greese-motion-dialog-exit-mask-position: 50% 0%;
+    --greese-motion-dialog-exit-transform: none;
+    --greese-motion-dialog-exit-mask-from: 100% 100%;
+    --greese-motion-popover: greese-pocket-down;
+    --greese-motion-popover-exit-translate: 0px -100%;
+    --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% 100%;
+    --greese-motion-popover-exit-transform: none;
+    --greese-motion-popover-exit-mask-from: 100% 100%;
+    --greese-motion-tooltip: greese-pocket-up;
+    --greese-motion-tooltip-exit-translate: 0px 100%;
+    --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: 100% 0%;
+    --greese-motion-tooltip-exit-mask-repeat: no-repeat;
+    --greese-motion-tooltip-exit-mask-position: 50% 0%;
+    --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-fast);
+    --greese-motion-enter-ease: cubic-bezier(0.2, 0.9, 0.1, 1);
+    --greese-motion-exit-ease: var(--greese-easing-exit);
+    --greese-motion-page: greese-pocket-up;
+    --greese-motion-page-exit: greese-pocket-out-down;
+    --greese-motion-page-back: greese-pocket-down;
+    --greese-motion-page-back-exit: greese-pocket-out-up;
+    --greese-motion-page-duration: 0.55s;
+    --greese-motion-page-ease: cubic-bezier(0.2, 0.9, 0.1, 1);
+    --greese-motion-page-stagger: 0.05s;
+  }
+}
+@layer greese.utilities {
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes greese-pocket-up {
+      from {
+        translate: 0px 100%;
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-pocket-down {
+      from {
+        translate: 0px -100%;
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+    @keyframes greese-pocket-out-down {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        translate: 0px 100%;
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-pocket-out-up {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        translate: 0px -100%;
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+  }
+}

package/themes/pocket.scss

@@ -0,0 +1,45 @@
+/**
+ * Pocket: things rise out of an invisible slot at one of their own edges, as if from a pocket, rather than fading in. Reveals, panels, table rows and toasts rise out of theirs; menus drop out of a slot under their trigger and go back up into it; dialogs and tooltips rise out of a slot and sink back into it. Pages sink into a slot at their foot and the next rises out of it; going back, they go up into a slot at their head and the last drops out of it.
+ *
+ * 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 pocket.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.55s",
+  distance: "1.25rem",
+  stagger: "0.05s",
+  theme: "pocket-up",
+  content: "pocket-up",
+  rows: "pocket-up",
+  toast: "pocket-up",
+  dialog: "pocket-up",
+  dialog-exit: "pocket-out-down",
+  popover: "pocket-down",
+  popover-exit: "pocket-out-up",
+  tooltip: "pocket-up",
+  tooltip-exit: "pocket-out-down",
+  content-duration: "normal",
+  rows-duration: "slow",
+  overlay-duration: "normal",
+  toast-duration: "normal",
+  exit-duration: "fast",
+  enter-ease: "cubic-bezier(0.2, 0.9, 0.1, 1)",
+  exit-ease: "exit",
+  page: "pocket-up",
+  page-exit: "pocket-out-down",
+  page-back: "pocket-down",
+  page-back-exit: "pocket-out-up",
+  page-duration: "0.55s",
+  page-ease: "cubic-bezier(0.2, 0.9, 0.1, 1)",
+  page-stagger: "0.05s",
+));