@greese/ui 0.0.0-stage → 1.1.0

package/dist/base.css

@@ -0,0 +1,67 @@
+/* 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.reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  html {
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+  body {
+    min-block-size: 100dvh;
+    margin: 0;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    overflow-wrap: break-word;
+  }
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-inline-size: 100%;
+  }
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+}
+@layer greese.base {
+  body {
+    font-family: var(--greese-font-body);
+    font-size: var(--greese-type-p2-font-size);
+    line-height: var(--greese-line-height-normal);
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-canvas);
+    -webkit-font-smoothing: antialiased;
+  }
+  :focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+}

package/dist/colorScheme.d.ts

@@ -0,0 +1,16 @@
+/** `system` follows the OS setting; `light` and `dark` force a mode. */
+export type ColorScheme = 'light' | 'dark' | 'system';
+export declare const DEFAULT_SCHEME_STORAGE_KEY = "greese-scheme";
+export interface SchemeScriptOptions {
+    /** localStorage key holding the user's choice. Must match useColorScheme's. */
+    storageKey?: string;
+}
+/**
+ * A tiny inline script that applies the user's saved color scheme before first
+ * paint, so a dark-mode user never sees a flash of light. Put it in `<head>`:
+ *
+ * ```tsx
+ * <script dangerouslySetInnerHTML={{ __html: getSchemeScript() }} />
+ * ```
+ */
+export declare const getSchemeScript: ({ storageKey, }?: SchemeScriptOptions) => string;

package/dist/colorScheme.js

@@ -0,0 +1,13 @@
+import { SCHEME_ATTR } from "./css.js";
+export const DEFAULT_SCHEME_STORAGE_KEY = 'greese-scheme';
+/**
+ * A tiny inline script that applies the user's saved color scheme before first
+ * paint, so a dark-mode user never sees a flash of light. Put it in `<head>`:
+ *
+ * ```tsx
+ * <script dangerouslySetInnerHTML={{ __html: getSchemeScript() }} />
+ * ```
+ */
+export const getSchemeScript = ({ storageKey = DEFAULT_SCHEME_STORAGE_KEY, } = {}) => `(function(){try{var s=localStorage.getItem(${JSON.stringify(storageKey)});` +
+    `if(s==='light'||s==='dark'){document.documentElement.setAttribute('${SCHEME_ATTR}',s)}}` +
+    `catch(e){}})();`;

package/dist/contrast.d.ts

@@ -0,0 +1,15 @@
+/** Light and dark ink for content on a color: white, or greese ui's near-black canvas. */
+export declare const CONTENT_LIGHT = "#ffffff";
+export declare const CONTENT_DARK: "#11171c";
+/** The WCAG AA minimum for normal text. */
+export declare const AA = 4.5;
+/** WCAG relative luminance, 0 (black) to 1 (white), of `#rgb` or `#rrggbb`. */
+export declare const luminance: (color: string) => number | undefined;
+/** The WCAG contrast ratio of two hex colors (1–21), or undefined. */
+export declare const contrastRatio: (a: string, b: string) => number | undefined;
+/**
+ * The text color for content on `color`: white or near-black, whichever
+ * contrasts more, as long as it reaches AA. Where neither does (a mid-tone
+ * near the crossover), pure black: when white fails, black always passes.
+ */
+export declare const contentColor: (color: string) => string | undefined;

package/dist/contrast.js

@@ -0,0 +1,43 @@
+/**
+ * WCAG 2 contrast, for picking text colors that stay readable on a theme's
+ * brand colors. Hex colors only (`#rgb`, `#rrggbb`): anything else (a
+ * `var()`, `oklch()`) can't be measured here, so callers keep their default.
+ */
+import { black, steel, white } from "./palette.js";
+/** Light and dark ink for content on a color: white, or greese ui's near-black canvas. */
+export const CONTENT_LIGHT = white;
+export const CONTENT_DARK = steel[999];
+/** The WCAG AA minimum for normal text. */
+export const AA = 4.5;
+/** WCAG relative luminance, 0 (black) to 1 (white), of `#rgb` or `#rrggbb`. */
+export const luminance = (color) => {
+    let hex = /^#([0-9a-f]{3}){1,2}$/i.test(color) ? color.slice(1) : '';
+    if (!hex)
+        return undefined;
+    if (hex.length === 3)
+        hex = hex.replace(/./g, '$&$&');
+    return [0.2126, 0.7152, 0.0722].reduce((sum, weight, i) => {
+        const s = parseInt(hex.slice(i * 2, i * 2 + 2), 16) / 255;
+        return sum + weight * (s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4);
+    }, 0);
+};
+/** The WCAG contrast ratio of two hex colors (1–21), or undefined. */
+export const contrastRatio = (a, b) => {
+    const la = luminance(a);
+    const lb = luminance(b);
+    if (la === undefined || lb === undefined)
+        return undefined;
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+};
+/**
+ * The text color for content on `color`: white or near-black, whichever
+ * contrasts more, as long as it reaches AA. Where neither does (a mid-tone
+ * near the crossover), pure black: when white fails, black always passes.
+ */
+export const contentColor = (color) => {
+    if (luminance(color) === undefined)
+        return undefined;
+    const light = contrastRatio(color, CONTENT_LIGHT);
+    const dark = contrastRatio(color, CONTENT_DARK);
+    return Math.max(light, dark) < AA ? black : light >= dark ? CONTENT_LIGHT : CONTENT_DARK;
+};

package/dist/css/Accordion.css

@@ -0,0 +1,9 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Accordion {
+    border-block-start: 1px solid var(--greese-color-border);
+  }
+  .greese-AccordionItem {
+    border-block-end: 1px solid var(--greese-color-border);
+  }
+}

package/dist/css/ActionSelect.css

@@ -0,0 +1,6 @@
+@import './core.css';
+@layer greese.components {
+  .greese-ActionSelect {
+    max-inline-size: 100%;
+  }
+}

package/dist/css/Alert.css

@@ -0,0 +1,84 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Alert--neutral {
+    --greese-alert-tone: var(--greese-color-fg);
+    --greese-alert-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Alert--primary {
+    --greese-alert-tone: var(--greese-color-primary);
+    --greese-alert-tone-on: var(--greese-color-primary-content);
+  }
+  .greese-Alert--secondary {
+    --greese-alert-tone: var(--greese-color-secondary);
+    --greese-alert-tone-on: var(--greese-color-secondary-content);
+  }
+  .greese-Alert--tertiary {
+    --greese-alert-tone: var(--greese-color-tertiary);
+    --greese-alert-tone-on: var(--greese-color-tertiary-content);
+  }
+  .greese-Alert--positive {
+    --greese-alert-tone: var(--greese-color-positive);
+    --greese-alert-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Alert--negative {
+    --greese-alert-tone: var(--greese-color-negative);
+    --greese-alert-tone-on: var(--greese-color-negative-content);
+  }
+  .greese-Alert--warning {
+    --greese-alert-tone: var(--greese-color-warning);
+    --greese-alert-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Alert--info {
+    --greese-alert-tone: var(--greese-color-info);
+    --greese-alert-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Alert {
+    display: flex;
+    gap: var(--greese-space-3);
+    align-items: flex-start;
+    padding: var(--greese-space-3) var(--greese-space-4);
+    font-size: var(--greese-type-p3-font-size);
+    line-height: var(--greese-line-height-snug);
+    color: var(--greese-color-fg);
+    border: 1px solid transparent;
+    border-radius: var(--greese-corner-panel);
+  }
+  .greese-Alert--soft {
+    background-color: color-mix(in oklab, var(--greese-alert-tone) 10%, var(--greese-color-canvas));
+    border-color: color-mix(in oklab, var(--greese-alert-tone) 25%, transparent);
+  }
+  .greese-Alert--outline {
+    border-color: var(--greese-alert-tone);
+  }
+  .greese-Alert-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-block: 0.1em;
+    color: var(--greese-alert-tone);
+  }
+  .greese-Alert-icon > svg {
+    inline-size: 1.25em;
+    block-size: 1.25em;
+  }
+  .greese-Alert-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--greese-space-1);
+    min-inline-size: 0;
+  }
+  .greese-Alert-title {
+    margin: 0;
+    font-weight: var(--greese-font-weight-semibold);
+  }
+  .greese-Alert-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-2);
+    margin-block-start: var(--greese-space-2);
+  }
+  .greese-Alert-dismiss {
+    margin-block: calc(-1 * var(--greese-space-1));
+    margin-inline-end: calc(-1 * var(--greese-space-2));
+  }
+}

package/dist/css/AppBar.css

@@ -0,0 +1,35 @@
+@import './core.css';
+@layer greese.components {
+  .greese-AppBar {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--greese-space-3);
+    align-items: center;
+    min-block-size: 3.5rem;
+    padding-block-start: env(safe-area-inset-top);
+    padding-inline: max(var(--greese-space-4), env(safe-area-inset-left)) max(var(--greese-space-4), env(safe-area-inset-right));
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-surface-overlay);
+    border-block-end: 1px solid var(--greese-color-border);
+  }
+  .greese-AppBar--sticky {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--greese-z-index-sticky);
+  }
+  @supports (animation-timeline: scroll()) {
+    .greese-AppBar--elevate {
+      animation: greese-appbar-elevate linear both;
+      animation-range: 0 3rem;
+      animation-timeline: scroll(nearest block);
+    }
+  }
+  @keyframes greese-appbar-elevate {
+    from {
+      box-shadow: none;
+    }
+    to {
+      box-shadow: var(--greese-shadow-md);
+    }
+  }
+}

package/dist/css/AspectRatio.css

@@ -0,0 +1,40 @@
+@import './core.css';
+@layer greese.components {
+  .greese-AspectRatio {
+    position: relative;
+    overflow: hidden;
+  }
+  .greese-AspectRatio > :is(img, video, iframe, picture, canvas, svg) {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    border: 0;
+  }
+  .greese-AspectRatio--contain > :is(img, video, picture, canvas, svg) {
+    object-fit: contain;
+  }
+  .greese-AspectRatio--xs-ratio {
+    aspect-ratio: var(--greese-aspectratio-ratio-xs);
+  }
+  @media (width >= 600px) {
+    .greese-AspectRatio--sm-ratio {
+      aspect-ratio: var(--greese-aspectratio-ratio-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-AspectRatio--md-ratio {
+      aspect-ratio: var(--greese-aspectratio-ratio-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-AspectRatio--lg-ratio {
+      aspect-ratio: var(--greese-aspectratio-ratio-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-AspectRatio--xl-ratio {
+      aspect-ratio: var(--greese-aspectratio-ratio-xl);
+    }
+  }
+}