@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/Type.css

@@ -0,0 +1,211 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Type--p1 {
+    font-size: var(--greese-type-p1-font-size);
+    font-weight: var(--greese-type-p1-font-weight);
+    letter-spacing: var(--greese-type-p1-letter-spacing);
+    line-height: var(--greese-type-p1-line-height);
+    color: var(--greese-type-p1-color, inherit);
+    font-family: var(--greese-type-p1-font-family, inherit);
+    font-style: var(--greese-type-p1-font-style, inherit);
+    text-transform: var(--greese-type-p1-text-transform, inherit);
+    font-feature-settings: var(--greese-type-p1-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-p1-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-p1-font-stretch, inherit);
+    text-wrap: var(--greese-type-p1-text-wrap, inherit);
+    word-spacing: var(--greese-type-p1-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-p1-font-variant-numeric, inherit);
+  }
+  .greese-Type--p2 {
+    font-size: var(--greese-type-p2-font-size);
+    font-weight: var(--greese-type-p2-font-weight);
+    letter-spacing: var(--greese-type-p2-letter-spacing);
+    line-height: var(--greese-type-p2-line-height);
+    color: var(--greese-type-p2-color, inherit);
+    font-family: var(--greese-type-p2-font-family, inherit);
+    font-style: var(--greese-type-p2-font-style, inherit);
+    text-transform: var(--greese-type-p2-text-transform, inherit);
+    font-feature-settings: var(--greese-type-p2-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-p2-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-p2-font-stretch, inherit);
+    text-wrap: var(--greese-type-p2-text-wrap, inherit);
+    word-spacing: var(--greese-type-p2-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-p2-font-variant-numeric, inherit);
+  }
+  .greese-Type--p3 {
+    font-size: var(--greese-type-p3-font-size);
+    font-weight: var(--greese-type-p3-font-weight);
+    letter-spacing: var(--greese-type-p3-letter-spacing);
+    line-height: var(--greese-type-p3-line-height);
+    color: var(--greese-type-p3-color, inherit);
+    font-family: var(--greese-type-p3-font-family, inherit);
+    font-style: var(--greese-type-p3-font-style, inherit);
+    text-transform: var(--greese-type-p3-text-transform, inherit);
+    font-feature-settings: var(--greese-type-p3-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-p3-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-p3-font-stretch, inherit);
+    text-wrap: var(--greese-type-p3-text-wrap, inherit);
+    word-spacing: var(--greese-type-p3-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-p3-font-variant-numeric, inherit);
+  }
+  .greese-Type--h1 {
+    font-size: var(--greese-type-h1-font-size);
+    font-weight: var(--greese-type-h1-font-weight);
+    letter-spacing: var(--greese-type-h1-letter-spacing);
+    line-height: var(--greese-type-h1-line-height);
+    color: var(--greese-type-h1-color, inherit);
+    font-family: var(--greese-type-h1-font-family, inherit);
+    font-style: var(--greese-type-h1-font-style, inherit);
+    text-transform: var(--greese-type-h1-text-transform, inherit);
+    font-feature-settings: var(--greese-type-h1-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-h1-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-h1-font-stretch, inherit);
+    text-wrap: var(--greese-type-h1-text-wrap, inherit);
+    word-spacing: var(--greese-type-h1-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-h1-font-variant-numeric, inherit);
+  }
+  .greese-Type--h2 {
+    font-size: var(--greese-type-h2-font-size);
+    font-weight: var(--greese-type-h2-font-weight);
+    letter-spacing: var(--greese-type-h2-letter-spacing);
+    line-height: var(--greese-type-h2-line-height);
+    color: var(--greese-type-h2-color, inherit);
+    font-family: var(--greese-type-h2-font-family, inherit);
+    font-style: var(--greese-type-h2-font-style, inherit);
+    text-transform: var(--greese-type-h2-text-transform, inherit);
+    font-feature-settings: var(--greese-type-h2-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-h2-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-h2-font-stretch, inherit);
+    text-wrap: var(--greese-type-h2-text-wrap, inherit);
+    word-spacing: var(--greese-type-h2-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-h2-font-variant-numeric, inherit);
+  }
+  .greese-Type--h3 {
+    font-size: var(--greese-type-h3-font-size);
+    font-weight: var(--greese-type-h3-font-weight);
+    letter-spacing: var(--greese-type-h3-letter-spacing);
+    line-height: var(--greese-type-h3-line-height);
+    color: var(--greese-type-h3-color, inherit);
+    font-family: var(--greese-type-h3-font-family, inherit);
+    font-style: var(--greese-type-h3-font-style, inherit);
+    text-transform: var(--greese-type-h3-text-transform, inherit);
+    font-feature-settings: var(--greese-type-h3-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-h3-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-h3-font-stretch, inherit);
+    text-wrap: var(--greese-type-h3-text-wrap, inherit);
+    word-spacing: var(--greese-type-h3-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-h3-font-variant-numeric, inherit);
+  }
+  .greese-Type--h4 {
+    font-size: var(--greese-type-h4-font-size);
+    font-weight: var(--greese-type-h4-font-weight);
+    letter-spacing: var(--greese-type-h4-letter-spacing);
+    line-height: var(--greese-type-h4-line-height);
+    color: var(--greese-type-h4-color, inherit);
+    font-family: var(--greese-type-h4-font-family, inherit);
+    font-style: var(--greese-type-h4-font-style, inherit);
+    text-transform: var(--greese-type-h4-text-transform, inherit);
+    font-feature-settings: var(--greese-type-h4-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-h4-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-h4-font-stretch, inherit);
+    text-wrap: var(--greese-type-h4-text-wrap, inherit);
+    word-spacing: var(--greese-type-h4-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-h4-font-variant-numeric, inherit);
+  }
+  .greese-Type--h5 {
+    font-size: var(--greese-type-h5-font-size);
+    font-weight: var(--greese-type-h5-font-weight);
+    letter-spacing: var(--greese-type-h5-letter-spacing);
+    line-height: var(--greese-type-h5-line-height);
+    color: var(--greese-type-h5-color, inherit);
+    font-family: var(--greese-type-h5-font-family, inherit);
+    font-style: var(--greese-type-h5-font-style, inherit);
+    text-transform: var(--greese-type-h5-text-transform, inherit);
+    font-feature-settings: var(--greese-type-h5-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-h5-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-h5-font-stretch, inherit);
+    text-wrap: var(--greese-type-h5-text-wrap, inherit);
+    word-spacing: var(--greese-type-h5-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-h5-font-variant-numeric, inherit);
+  }
+  .greese-Type--h6 {
+    font-size: var(--greese-type-h6-font-size);
+    font-weight: var(--greese-type-h6-font-weight);
+    letter-spacing: var(--greese-type-h6-letter-spacing);
+    line-height: var(--greese-type-h6-line-height);
+    color: var(--greese-type-h6-color, inherit);
+    font-family: var(--greese-type-h6-font-family, inherit);
+    font-style: var(--greese-type-h6-font-style, inherit);
+    text-transform: var(--greese-type-h6-text-transform, inherit);
+    font-feature-settings: var(--greese-type-h6-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-h6-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-h6-font-stretch, inherit);
+    text-wrap: var(--greese-type-h6-text-wrap, inherit);
+    word-spacing: var(--greese-type-h6-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-h6-font-variant-numeric, inherit);
+  }
+  .greese-Type--s1 {
+    font-size: var(--greese-type-s1-font-size);
+    font-weight: var(--greese-type-s1-font-weight);
+    letter-spacing: var(--greese-type-s1-letter-spacing);
+    line-height: var(--greese-type-s1-line-height);
+    color: var(--greese-type-s1-color, inherit);
+    font-family: var(--greese-type-s1-font-family, inherit);
+    font-style: var(--greese-type-s1-font-style, inherit);
+    text-transform: var(--greese-type-s1-text-transform, inherit);
+    font-feature-settings: var(--greese-type-s1-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-s1-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-s1-font-stretch, inherit);
+    text-wrap: var(--greese-type-s1-text-wrap, inherit);
+    word-spacing: var(--greese-type-s1-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-s1-font-variant-numeric, inherit);
+  }
+  .greese-Type--s2 {
+    font-size: var(--greese-type-s2-font-size);
+    font-weight: var(--greese-type-s2-font-weight);
+    letter-spacing: var(--greese-type-s2-letter-spacing);
+    line-height: var(--greese-type-s2-line-height);
+    color: var(--greese-type-s2-color, inherit);
+    font-family: var(--greese-type-s2-font-family, inherit);
+    font-style: var(--greese-type-s2-font-style, inherit);
+    text-transform: var(--greese-type-s2-text-transform, inherit);
+    font-feature-settings: var(--greese-type-s2-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-s2-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-s2-font-stretch, inherit);
+    text-wrap: var(--greese-type-s2-text-wrap, inherit);
+    word-spacing: var(--greese-type-s2-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-s2-font-variant-numeric, inherit);
+  }
+  .greese-Type--caption {
+    font-size: var(--greese-type-caption-font-size);
+    font-weight: var(--greese-type-caption-font-weight);
+    letter-spacing: var(--greese-type-caption-letter-spacing);
+    line-height: var(--greese-type-caption-line-height);
+    color: var(--greese-type-caption-color, inherit);
+    font-family: var(--greese-type-caption-font-family, inherit);
+    font-style: var(--greese-type-caption-font-style, inherit);
+    text-transform: var(--greese-type-caption-text-transform, inherit);
+    font-feature-settings: var(--greese-type-caption-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-caption-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-caption-font-stretch, inherit);
+    text-wrap: var(--greese-type-caption-text-wrap, inherit);
+    word-spacing: var(--greese-type-caption-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-caption-font-variant-numeric, inherit);
+  }
+  .greese-Type--button {
+    font-size: var(--greese-type-button-font-size);
+    font-weight: var(--greese-type-button-font-weight);
+    letter-spacing: var(--greese-type-button-letter-spacing);
+    line-height: var(--greese-type-button-line-height);
+    color: var(--greese-type-button-color, inherit);
+    font-family: var(--greese-type-button-font-family, inherit);
+    font-style: var(--greese-type-button-font-style, inherit);
+    text-transform: var(--greese-type-button-text-transform, inherit);
+    font-feature-settings: var(--greese-type-button-font-feature-settings, inherit);
+    font-variation-settings: var(--greese-type-button-font-variation-settings, inherit);
+    font-stretch: var(--greese-type-button-font-stretch, inherit);
+    text-wrap: var(--greese-type-button-text-wrap, inherit);
+    word-spacing: var(--greese-type-button-word-spacing, inherit);
+    font-variant-numeric: var(--greese-type-button-font-variant-numeric, inherit);
+  }
+}

package/dist/css/Visibility.css

@@ -0,0 +1,78 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Visibility {
+    display: contents;
+  }
+}
+@layer greese.utilities {
+  @media (width < 600px) {
+    .greese-Visibility--hide-below-sm {
+      display: none;
+    }
+  }
+  @media (width >= 600px) {
+    .greese-Visibility--hide-from-sm {
+      display: none;
+    }
+  }
+  @media (width >= 600px) and (width < 900px) {
+    .greese-Visibility--hide-sm-to-md {
+      display: none;
+    }
+  }
+  @media (width >= 600px) and (width < 1200px) {
+    .greese-Visibility--hide-sm-to-lg {
+      display: none;
+    }
+  }
+  @media (width >= 600px) and (width < 1536px) {
+    .greese-Visibility--hide-sm-to-xl {
+      display: none;
+    }
+  }
+  @media (width < 900px) {
+    .greese-Visibility--hide-below-md {
+      display: none;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Visibility--hide-from-md {
+      display: none;
+    }
+  }
+  @media (width >= 900px) and (width < 1200px) {
+    .greese-Visibility--hide-md-to-lg {
+      display: none;
+    }
+  }
+  @media (width >= 900px) and (width < 1536px) {
+    .greese-Visibility--hide-md-to-xl {
+      display: none;
+    }
+  }
+  @media (width < 1200px) {
+    .greese-Visibility--hide-below-lg {
+      display: none;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Visibility--hide-from-lg {
+      display: none;
+    }
+  }
+  @media (width >= 1200px) and (width < 1536px) {
+    .greese-Visibility--hide-lg-to-xl {
+      display: none;
+    }
+  }
+  @media (width < 1536px) {
+    .greese-Visibility--hide-below-xl {
+      display: none;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Visibility--hide-from-xl {
+      display: none;
+    }
+  }
+}

package/dist/css/VisuallyHidden.css

@@ -0,0 +1,15 @@
+@import './core.css';
+@layer greese.components {
+  .greese-VisuallyHidden {
+    box-sizing: border-box;
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: inset(50%);
+  }
+}

package/dist/css/core.css

@@ -0,0 +1,251 @@
+/* GENERATED by @greese/ui from src/tokens.ts - do not edit. */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.tokens {
+  :root {
+    --greese-loaded: 1;
+    --greese-space-0: 0;
+    --greese-space-1: 0.25rem;
+    --greese-space-2: 0.5rem;
+    --greese-space-3: 0.75rem;
+    --greese-space-4: 1rem;
+    --greese-space-5: 1.5rem;
+    --greese-space-6: 2rem;
+    --greese-space-7: 3rem;
+    --greese-space-8: 4rem;
+    --greese-radius-none: 0;
+    --greese-radius-sm: 4px;
+    --greese-radius-md: 8px;
+    --greese-radius-lg: 16px;
+    --greese-radius-xl: 24px;
+    --greese-radius-pill: 999px;
+    --greese-radius-round: 50%;
+    --greese-corner-control: var(--greese-radius-md);
+    --greese-corner-field: var(--greese-radius-md);
+    --greese-corner-surface: var(--greese-radius-lg);
+    --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);
+    --greese-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --greese-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    --greese-font-weight-regular: 400;
+    --greese-font-weight-medium: 500;
+    --greese-font-weight-semibold: 600;
+    --greese-font-weight-bold: 700;
+    --greese-line-height-tight: 1.25;
+    --greese-line-height-snug: 1.375;
+    --greese-line-height-normal: 1.5;
+    --greese-shadow-sm: 0 1px 2px color-mix(in srgb, var(--greese-color-black) 8%, transparent);
+    --greese-shadow-md: 0 4px 12px color-mix(in srgb, var(--greese-color-black) 12%, transparent);
+    --greese-shadow-lg: 0 12px 32px color-mix(in srgb, var(--greese-color-black) 18%, transparent);
+    --greese-z-index-dropdown: 1000;
+    --greese-z-index-sticky: 1100;
+    --greese-z-index-overlay: 1300;
+    --greese-z-index-modal: 1400;
+    --greese-z-index-popover: 1500;
+    --greese-z-index-toast: 1600;
+    --greese-z-index-tooltip: 1700;
+    --greese-duration-fast: 120ms;
+    --greese-duration-normal: 200ms;
+    --greese-duration-slow: 320ms;
+    --greese-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --greese-easing-enter: cubic-bezier(0, 0, 0, 1);
+    --greese-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+    --greese-breakpoint-xs: 0px;
+    --greese-breakpoint-sm: 600px;
+    --greese-breakpoint-md: 900px;
+    --greese-breakpoint-lg: 1200px;
+    --greese-breakpoint-xl: 1536px;
+  }
+  :root,
+  [data-greese-scheme=light],
+  [data-greese-scheme=system] {
+    color-scheme: light;
+    --greese-color-canvas: #ffffff;
+    --greese-color-surface: #f5f7f9;
+    --greese-color-surface-overlay: #ffffff;
+    --greese-color-fg: #11171c;
+    --greese-color-fg-muted: #505e6d;
+    --greese-color-border: #d7dfe7;
+    --greese-color-border-strong: #a3b3c4;
+    --greese-color-track: #d7dfe7;
+    --greese-color-primary: #2771e0;
+    --greese-color-primary-strong: #1356b8;
+    --greese-color-primary-content: #ffffff;
+    --greese-color-secondary: #7e5bd0;
+    --greese-color-secondary-strong: #6443ab;
+    --greese-color-secondary-content: #ffffff;
+    --greese-color-tertiary: #007069;
+    --greese-color-tertiary-strong: #00544f;
+    --greese-color-tertiary-content: #ffffff;
+    --greese-color-accent: #c13b7b;
+    --greese-color-accent-strong: #9c2661;
+    --greese-color-accent-content: #ffffff;
+    --greese-color-focus-ring: var(--greese-color-primary);
+    --greese-color-positive: #007231;
+    --greese-color-negative: #ae0914;
+    --greese-color-negative-content: #ffffff;
+    --greese-color-warning: #8a5f00;
+    --greese-color-info: #00668f;
+    --greese-color-white: #ffffff;
+    --greese-color-black: #000000;
+    --greese-color-scrim: color-mix(in srgb, var(--greese-color-black) 45%, transparent);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme=light]),
+    [data-greese-scheme=system] {
+      color-scheme: dark;
+      --greese-color-canvas: #11171c;
+      --greese-color-surface: #2a333c;
+      --greese-color-surface-overlay: #3c4854;
+      --greese-color-fg: #e9edf2;
+      --greese-color-fg-muted: #a3b3c4;
+      --greese-color-border: #3c4854;
+      --greese-color-border-strong: #505e6d;
+      --greese-color-track: #687889;
+      --greese-color-primary: #81b2ff;
+      --greese-color-primary-strong: #aaccff;
+      --greese-color-primary-content: #11171c;
+      --greese-color-secondary: #b69fff;
+      --greese-color-secondary-strong: #cdbfff;
+      --greese-color-secondary-content: #11171c;
+      --greese-color-tertiary: #5dcec5;
+      --greese-color-tertiary-strong: #94e1da;
+      --greese-color-tertiary-content: #11171c;
+      --greese-color-accent: #ff81b6;
+      --greese-color-accent-strong: #ffaecd;
+      --greese-color-accent-content: #11171c;
+      --greese-color-focus-ring: var(--greese-color-primary-strong);
+      --greese-color-positive: #61cf7e;
+      --greese-color-negative: #ff8b7f;
+      --greese-color-negative-content: #11171c;
+      --greese-color-warning: #feb93d;
+      --greese-color-info: #5ac0f7;
+      --greese-color-white: #ffffff;
+      --greese-color-black: #000000;
+      --greese-color-scrim: color-mix(in srgb, var(--greese-color-black) 60%, transparent);
+    }
+  }
+  [data-greese-scheme=dark] {
+    color-scheme: dark;
+    --greese-color-canvas: #11171c;
+    --greese-color-surface: #2a333c;
+    --greese-color-surface-overlay: #3c4854;
+    --greese-color-fg: #e9edf2;
+    --greese-color-fg-muted: #a3b3c4;
+    --greese-color-border: #3c4854;
+    --greese-color-border-strong: #505e6d;
+    --greese-color-track: #687889;
+    --greese-color-primary: #81b2ff;
+    --greese-color-primary-strong: #aaccff;
+    --greese-color-primary-content: #11171c;
+    --greese-color-secondary: #b69fff;
+    --greese-color-secondary-strong: #cdbfff;
+    --greese-color-secondary-content: #11171c;
+    --greese-color-tertiary: #5dcec5;
+    --greese-color-tertiary-strong: #94e1da;
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #ff81b6;
+    --greese-color-accent-strong: #ffaecd;
+    --greese-color-accent-content: #11171c;
+    --greese-color-focus-ring: var(--greese-color-primary-strong);
+    --greese-color-positive: #61cf7e;
+    --greese-color-negative: #ff8b7f;
+    --greese-color-negative-content: #11171c;
+    --greese-color-warning: #feb93d;
+    --greese-color-info: #5ac0f7;
+    --greese-color-white: #ffffff;
+    --greese-color-black: #000000;
+    --greese-color-scrim: color-mix(in srgb, var(--greese-color-black) 60%, transparent);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --greese-duration-fast: 0.01ms;
+      --greese-duration-normal: 0.01ms;
+      --greese-duration-slow: 0.01ms;
+    }
+  }
+}
+@layer greese.tokens {
+  :root {
+    --greese-type-p1-font-size: 1.125rem;
+    --greese-type-p1-font-weight: 400;
+    --greese-type-p1-line-height: 1.6;
+    --greese-type-p1-letter-spacing: 0;
+    --greese-type-p2-font-size: 1rem;
+    --greese-type-p2-font-weight: 400;
+    --greese-type-p2-line-height: 1.55;
+    --greese-type-p2-letter-spacing: 0;
+    --greese-type-p3-font-size: 0.875rem;
+    --greese-type-p3-font-weight: 400;
+    --greese-type-p3-line-height: 1.5;
+    --greese-type-p3-letter-spacing: 0;
+    --greese-type-h1-font-size: 2.25rem;
+    --greese-type-h1-font-weight: 700;
+    --greese-type-h1-line-height: 1.15;
+    --greese-type-h1-letter-spacing: -0.02em;
+    --greese-type-h1-text-wrap: balance;
+    --greese-type-h2-font-size: 1.875rem;
+    --greese-type-h2-font-weight: 700;
+    --greese-type-h2-line-height: 1.2;
+    --greese-type-h2-letter-spacing: -0.015em;
+    --greese-type-h2-text-wrap: balance;
+    --greese-type-h3-font-size: 1.5rem;
+    --greese-type-h3-font-weight: 600;
+    --greese-type-h3-line-height: 1.25;
+    --greese-type-h3-letter-spacing: -0.01em;
+    --greese-type-h3-text-wrap: balance;
+    --greese-type-h4-font-size: 1.25rem;
+    --greese-type-h4-font-weight: 600;
+    --greese-type-h4-line-height: 1.3;
+    --greese-type-h4-letter-spacing: 0;
+    --greese-type-h4-text-wrap: balance;
+    --greese-type-h5-font-size: 1.125rem;
+    --greese-type-h5-font-weight: 600;
+    --greese-type-h5-line-height: 1.35;
+    --greese-type-h5-letter-spacing: 0;
+    --greese-type-h5-text-wrap: balance;
+    --greese-type-h6-font-size: 1rem;
+    --greese-type-h6-font-weight: 600;
+    --greese-type-h6-line-height: 1.4;
+    --greese-type-h6-letter-spacing: 0;
+    --greese-type-h6-text-wrap: balance;
+    --greese-type-s1-font-size: 1.25rem;
+    --greese-type-s1-font-weight: 500;
+    --greese-type-s1-line-height: 1.4;
+    --greese-type-s1-letter-spacing: 0;
+    --greese-type-s2-font-size: 1.125rem;
+    --greese-type-s2-font-weight: 500;
+    --greese-type-s2-line-height: 1.45;
+    --greese-type-s2-letter-spacing: 0;
+    --greese-type-caption-font-size: 0.75rem;
+    --greese-type-caption-font-weight: 400;
+    --greese-type-caption-line-height: 1.4;
+    --greese-type-caption-letter-spacing: 0.02em;
+    --greese-type-button-font-size: 0.9375rem;
+    --greese-type-button-font-weight: 600;
+    --greese-type-button-line-height: 1.25;
+    --greese-type-button-letter-spacing: 0;
+  }
+  @media (width >= 900px) {
+    :root {
+      --greese-type-p1-font-size: 1.25rem;
+      --greese-type-h1-font-size: 2.75rem;
+      --greese-type-h2-font-size: 2.25rem;
+      --greese-type-h3-font-size: 1.75rem;
+      --greese-type-h4-font-size: 1.375rem;
+      --greese-type-h5-font-size: 1.25rem;
+      --greese-type-h6-font-size: 1.0625rem;
+      --greese-type-s1-font-size: 1.375rem;
+    }
+  }
+  @media (width >= 1200px) {
+    :root {
+      --greese-type-h1-font-size: 3.5rem;
+      --greese-type-h1-line-height: 1.1;
+      --greese-type-h2-font-size: 2.75rem;
+      --greese-type-h3-font-size: 2rem;
+      --greese-type-h4-font-size: 1.5rem;
+    }
+  }
+}

package/dist/css.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Shared CSS-generation primitives. Used by the build script (default tokens)
+ * and by createTheme() (theme overrides), so both name and structure custom
+ * properties identically.
+ */
+import { type ScalarGroup } from './tokens.ts';
+/**
+ * Cascade layer order for everything greese ui emits. Every stylesheet we produce
+ * (tokens, components, themes) starts with this statement, so the order holds
+ * no matter which sheet the browser sees first. Unlayered consumer CSS beats
+ * all of it.
+ *
+ * `greese.overrides` holds build-time component overrides (the SCSS kit's
+ * `component()` and `motion()`): above the components they restyle, below
+ * the utilities, so style props and the `greese` prop still win.
+ */
+export declare const LAYER_ORDER = "@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;";
+export declare const SCHEME_ATTR = "data-greese-scheme";
+export declare const THEME_ATTR = "data-greese-theme";
+import { kebab } from './kebab.ts';
+export { kebab };
+/** The custom property for a token: `cssVar('lineHeight', 'tight')` -> `--greese-line-height-tight`. */
+export declare const cssVar: (group: ScalarGroup | "color", key: string | number) => string;
+export type Declarations = Array<[property: string, value: string]>;
+/** Renders declarations at the given indent. */
+export declare const decls: (list: Declarations, indent: string) => string;
+/** Declarations collapsing every duration under reduced motion. */
+export declare const reducedMotionDecls: (keys: Iterable<string>) => Declarations;
+export declare const allDurationKeys: string[];

package/dist/css.js

@@ -0,0 +1,28 @@
+/**
+ * Shared CSS-generation primitives. Used by the build script (default tokens)
+ * and by createTheme() (theme overrides), so both name and structure custom
+ * properties identically.
+ */
+import { duration } from "./tokens.js";
+/**
+ * Cascade layer order for everything greese ui emits. Every stylesheet we produce
+ * (tokens, components, themes) starts with this statement, so the order holds
+ * no matter which sheet the browser sees first. Unlayered consumer CSS beats
+ * all of it.
+ *
+ * `greese.overrides` holds build-time component overrides (the SCSS kit's
+ * `component()` and `motion()`): above the components they restyle, below
+ * the utilities, so style props and the `greese` prop still win.
+ */
+export const LAYER_ORDER = '@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;';
+export const SCHEME_ATTR = 'data-greese-scheme';
+export const THEME_ATTR = 'data-greese-theme';
+import { kebab } from "./kebab.js";
+export { kebab };
+/** The custom property for a token: `cssVar('lineHeight', 'tight')` -> `--greese-line-height-tight`. */
+export const cssVar = (group, key) => `--greese-${kebab(group)}-${kebab(String(key))}`;
+/** Renders declarations at the given indent. */
+export const decls = (list, indent) => list.map(([p, v]) => `${indent}${p}: ${v};`).join('\n');
+/** Declarations collapsing every duration under reduced motion. */
+export const reducedMotionDecls = (keys) => [...keys].map((k) => [cssVar('duration', k), '0.01ms']);
+export const allDurationKeys = Object.keys(duration);

package/dist/effect-classes.d.ts

@@ -0,0 +1,8 @@
+// GENERATED by @greese/ui from src/effects.ts - do not edit.
+import type { BuiltInEffect } from './effects.js'
+/** The entrances CSS plays alone. */
+export declare const entranceNames: readonly BuiltInEffect[]
+/** The built-in effects an overlay leaves with in CSS: those that end away from rest. */
+export declare const exitNames: readonly BuiltInEffect[]
+/** `fadeUp` → `fade-up`: the suffix of its `greese-Motion--enter-*` class. */
+export declare const effectClass: (name: string) => string

package/dist/effect-classes.js

@@ -0,0 +1,5 @@
+// GENERATED by @greese/ui from src/effects.ts - do not edit.
+const D = ["Right","Left","Up","Down","DownRight","DownLeft","UpRight","UpLeft"]
+export const entranceNames = [...["fadeIn","scaleIn","blurIn","pop","wipeOpenX","wipeOpenY","irisIn","turnX","turnY","depth","hinge","flipOverUp","flipOverDown","flipOverLeft","flipOverRight","fadeUp","fadeDown","fadeStart","fadeEnd","popIn","depthIn","swingIn"], ...["wipe","iris","pocket"].flatMap((p) => D.map((d) => p + d)), ...["slide","flip"].flatMap((p) => D.slice(0, 4).map((d) => p + d))]
+export const exitNames = [...["fadeOut","scaleOut","blurOut","squish","tilt","glow","wipeCloseX","wipeCloseY","irisOut","flipOverOutUp","flipOverOutDown","flipOverOutLeft","flipOverOutRight","fadeOutUp","fadeOutDown","popOut","rise","fall","depthOut","swingOut"], ...["wipeOut","irisOut","pocketOut"].flatMap((p) => D.map((d) => p + d)), ...["flipOut"].flatMap((p) => D.slice(0, 4).map((d) => p + d))]
+export const effectClass = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)