@greese/ui 0.0.0-stage → 1.0.0

package/dist/vite.d.ts

@@ -0,0 +1,40 @@
+import { type ContentOptions } from './utilitiesFiles.ts';
+import type { PurgeOptions } from './utilities.ts';
+/** The module to import: `import 'virtual:greese-utilities.css'`. */
+export declare const UTILITIES_MODULE = "virtual:greese-utilities.css";
+interface ModuleNode {
+    id?: string | null;
+}
+/** The part of Vite's plugin API this uses, so @greese/ui needs no dependency on Vite. */
+export interface UtilitiesPlugin {
+    name: string;
+    resolveId(id: string): string | undefined;
+    load(this: {
+        addWatchFile?: (file: string) => void;
+    }, id: string): Promise<string | undefined>;
+    handleHotUpdate(context: {
+        file: string;
+        server: {
+            moduleGraph: {
+                getModuleById(id: string): ModuleNode | undefined;
+                invalidateModule(m: ModuleNode): void;
+            };
+        };
+    }): ModuleNode[] | undefined;
+}
+/**
+ * A Vite plugin that serves only the utility classes your source uses, as
+ * `virtual:greese-utilities.css`: it reads the files `content` matches, keeps
+ * the classes they spell out (`purgeUtilities`), and rebuilds when one changes.
+ * The same CSS `greese-utilities --content …` writes to a file.
+ *
+ * ```ts
+ * // vite.config.ts
+ * import { greeseUtilities } from '@greese/ui/vite'
+ * export default { plugins: [greeseUtilities({ content: ['index.html', 'src/**\/*.{ts,tsx}'] })] }
+ * // main.tsx
+ * import 'virtual:greese-utilities.css'
+ * ```
+ */
+export declare const greeseUtilities: (options: ContentOptions & Omit<PurgeOptions, "content">) => UtilitiesPlugin;
+export {};

package/dist/vite.js

@@ -0,0 +1,43 @@
+import { purgeFiles } from "./utilitiesFiles.js";
+/** The module to import: `import 'virtual:greese-utilities.css'`. */
+export const UTILITIES_MODULE = 'virtual:greese-utilities.css';
+const RESOLVED = `\0${UTILITIES_MODULE}`;
+/**
+ * A Vite plugin that serves only the utility classes your source uses, as
+ * `virtual:greese-utilities.css`: it reads the files `content` matches, keeps
+ * the classes they spell out (`purgeUtilities`), and rebuilds when one changes.
+ * The same CSS `greese-utilities --content …` writes to a file.
+ *
+ * ```ts
+ * // vite.config.ts
+ * import { greeseUtilities } from '@greese/ui/vite'
+ * export default { plugins: [greeseUtilities({ content: ['index.html', 'src/**\/*.{ts,tsx}'] })] }
+ * // main.tsx
+ * import 'virtual:greese-utilities.css'
+ * ```
+ */
+export const greeseUtilities = (options) => {
+    let files = new Set();
+    return {
+        name: 'greese-utilities',
+        resolveId: (id) => (id === UTILITIES_MODULE ? RESOLVED : undefined),
+        async load(id) {
+            if (id !== RESOLVED)
+                return undefined;
+            const result = await purgeFiles(options);
+            files = new Set(result.files);
+            for (const file of files)
+                this.addWatchFile?.(file);
+            return result.css;
+        },
+        handleHotUpdate({ file, server }) {
+            if (!files.has(file))
+                return undefined;
+            const module = server.moduleGraph.getModuleById(RESOLVED);
+            if (!module)
+                return undefined;
+            server.moduleGraph.invalidateModule(module);
+            return [module];
+        },
+    };
+};

package/package.json

@@ -1,6 +1,133 @@
 {
   "name": "@greese/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "greese ui's CSS and design tokens: a framework-free stylesheet, per-component CSS, custom properties, Sass kit and TypeScript constants. Works in plain HTML, or under any framework.",
+  "keywords": [
+    "css",
+    "design-system",
+    "design-tokens",
+    "css-variables",
+    "theme",
+    "dark-mode",
+    "sass",
+    "scss",
+    "web-components",
+    "framework-agnostic",
+    "mobile-first"
+  ],
+  "author": "Chris Moody",
+  "license": "MIT",
+  "homepage": "https://chris-moody.github.io/greese/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chris-moody/greese.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/chris-moody/greese/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "bin": {
+    "greese-utilities": "./bin/greese-utilities.mjs"
+  },
+  "files": [
+    "LICENSE",
+    "bin",
+    "dist",
+    "src/styles",
+    "src/components/**/*.scss",
+    "themes"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./effects": {
+      "types": "./dist/effects.d.ts",
+      "default": "./dist/effects.js"
+    },
+    "./effect-classes": {
+      "types": "./dist/effect-classes.d.ts",
+      "default": "./dist/effect-classes.js"
+    },
+    "./utilities": {
+      "types": "./dist/utilities.d.ts",
+      "default": "./dist/utilities.js"
+    },
+    "./shapes": {
+      "types": "./dist/shapes.d.ts",
+      "default": "./dist/shapes.js"
+    },
+    "./utilities-files": {
+      "types": "./dist/utilitiesFiles.d.ts",
+      "default": "./dist/utilitiesFiles.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
+    },
+    "./utilities.css": "./dist/utilities.css",
+    "./styles.css": "./dist/greese.css",
+    "./base.css": "./dist/base.css",
+    "./css/*": "./dist/css/*",
+    "./tokens.css": "./dist/tokens.css",
+    "./palette.css": "./dist/palette.css",
+    "./themes/*": "./themes/*",
+    "./scss": {
+      "sass": "./src/styles/index.scss"
+    },
+    "./scss/kit": {
+      "sass": "./src/styles/_kit.scss"
+    },
+    "./scss/config": {
+      "sass": "./src/styles/_config.scss"
+    },
+    "./scss/mixins": {
+      "sass": "./src/styles/public/_mixins.scss"
+    },
+    "./scss/tones": {
+      "sass": "./src/styles/public/_tones.scss"
+    },
+    "./scss/floating": {
+      "sass": "./src/styles/public/_floating.scss"
+    },
+    "./scss/controls": {
+      "sass": "./src/styles/public/_controls.scss"
+    },
+    "./scss/tokens": "./dist/_tokens.scss",
+    "./scss/layers": "./dist/_layers.scss",
+    "./scss/maps": "./dist/_maps.scss",
+    "./style-manifest.json": "./dist/style-manifest.json",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
+    "build": "npm run clean && tsc -p tsconfig.build.json && node scripts/build-tokens.ts && node scripts/build-utilities.ts && node scripts/build-styles.ts",
+    "watch": "node scripts/watch.ts",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint src scripts --max-warnings 0 && stylelint \"src/**/*.scss\" --max-warnings 0",
+    "test": "vitest run",
+    "size": "size-limit"
+  },
+  "devDependencies": {
+    "@greese/eslint-config": "*",
+    "@greese/typescript-config": "*",
+    "@size-limit/preset-small-lib": "^14.2.0",
+    "@types/node": "^24.0.0",
+    "eslint": "^9.39.0",
+    "jsdom": "^30.1.3",
+    "sass-embedded": "^1.105.2",
+    "size-limit": "^14.2.0",
+    "stylelint": "^17.16.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.5"
+  }
+}

package/src/components/Accordion/Accordion.scss

@@ -0,0 +1,9 @@
+@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/src/components/ActionSelect/ActionSelect.scss

@@ -0,0 +1,6 @@
+@layer greese.components {
+  // Never wider than its container: the select gives up width first.
+  .greese-ActionSelect {
+    max-inline-size: 100%;
+  }
+}

package/src/components/Alert/Alert.scss

@@ -0,0 +1,71 @@
+@use '../../styles/tones';
+
+@layer greese.components {
+  @include tones.classes(
+    'greese-Alert',
+    'greese-alert-tone',
+    (info, positive, warning, negative, neutral, primary, secondary, tertiary)
+  );
+
+  .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);
+
+    > 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/src/components/AppBar/AppBar.scss

@@ -0,0 +1,43 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-AppBar {
+    @include mixins.component-root;
+
+    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);
+  }
+
+  // Shadow fades in over the first few rem of scroll, with no JS.
+  @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/src/components/AspectRatio/AspectRatio.scss

@@ -0,0 +1,22 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-AspectRatio {
+    position: relative;
+    overflow: hidden;
+
+    > :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;
+  }
+
+  @include mixins.responsive-prop('greese-AspectRatio', 'ratio', aspect-ratio);
+}

package/src/components/AutoLayout/AutoLayout.scss

@@ -0,0 +1,90 @@
+@use '../../styles/mixins';
+
+// Registered so they never inherit: a nested item without a size must not
+// pick up its parent item's.
+@property --greese-autolayoutitem-s {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --greese-autolayoutitem-m {
+  syntax: '*';
+  inherits: false;
+}
+
+@layer greese.components {
+  .greese-AutoLayout {
+    // Plain custom properties: items inherit the row's columns and gap.
+    --greese-autolayout-columns: 12;
+    --greese-autolayout-column-gap: 0px;
+
+    display: flex;
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+
+  // Each item claims its share of the row less its share of the gaps, so
+  // `n` items of `columns / n` fill a row exactly: basis = p·100% − (1 − p)·gap.
+  .greese-AutoLayoutItem {
+    --greese-autolayoutitem-columns: var(--greese-autolayout-columns, 12);
+    --greese-autolayoutitem-size: var(
+      --greese-autolayoutitem-s,
+      var(--greese-autolayoutitem-columns)
+    );
+    --greese-autolayoutitem-max: var(
+      --greese-autolayoutitem-m,
+      var(--greese-autolayoutitem-size)
+    );
+    --greese-autolayoutitem-p: calc(
+      var(--greese-autolayoutitem-size) / var(--greese-autolayoutitem-columns)
+    );
+    --greese-autolayoutitem-q: calc(
+      var(--greese-autolayoutitem-max) / var(--greese-autolayoutitem-columns)
+    );
+    --greese-autolayoutitem-gap: var(--greese-autolayout-column-gap, 0px);
+
+    // Each item's share of the gaps beside it.
+    --greese-autolayoutitem-p-gap: calc(
+      (1 - var(--greese-autolayoutitem-p)) * var(--greese-autolayoutitem-gap)
+    );
+    --greese-autolayoutitem-q-gap: calc(
+      (1 - var(--greese-autolayoutitem-q)) * var(--greese-autolayoutitem-gap)
+    );
+
+    box-sizing: border-box;
+
+    // Grows by the columns it may add, never shrinks below its size.
+    flex: max(0, var(--greese-autolayoutitem-max) - var(--greese-autolayoutitem-size)) 0
+      calc(var(--greese-autolayoutitem-p) * 100% - var(--greese-autolayoutitem-p-gap));
+    min-inline-size: 0;
+    max-inline-size: calc(
+      var(--greese-autolayoutitem-q) * 100% - var(--greese-autolayoutitem-q-gap)
+    );
+  }
+
+  // `gap` sets both gaps and tells the items the column gap.
+  @include mixins.responsive-prop(
+    'greese-AutoLayout',
+    'gap',
+    (column-gap, row-gap, --greese-autolayout-column-gap),
+    mixins.space-tokens()
+  );
+
+  // After `gap`, so it wins where both apply.
+  @include mixins.responsive-prop(
+    'greese-AutoLayout',
+    'row-gap',
+    row-gap,
+    mixins.space-tokens()
+  );
+  @include mixins.responsive-prop(
+    'greese-AutoLayoutItem',
+    'size',
+    --greese-autolayoutitem-s
+  );
+  @include mixins.responsive-prop(
+    'greese-AutoLayoutItem',
+    'max',
+    --greese-autolayoutitem-m
+  );
+}

package/src/components/Avatar/Avatar.scss

@@ -0,0 +1,91 @@
+@use '../../styles/mixins';
+
+$sizes: (
+  xs: 1rem,
+  sm: 1.5rem,
+  md: 2.25rem,
+  lg: 3rem,
+  xl: 4rem,
+);
+
+@layer greese.components {
+  .greese-Avatar {
+    @include mixins.component-root;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    inline-size: var(--greese-avatar-size);
+    block-size: var(--greese-avatar-size);
+    overflow: hidden;
+    font-size: calc(var(--greese-avatar-size) * 0.4);
+    font-weight: var(--greese-font-weight-semibold);
+    line-height: 1;
+    vertical-align: middle;
+    user-select: none;
+    border-radius: var(--greese-corner-round);
+
+    > img {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+    }
+  }
+
+  @each $size, $value in $sizes {
+    .greese-Avatar--#{$size} {
+      --greese-avatar-size: #{$value};
+    }
+  }
+
+  .greese-Avatar--square {
+    border-radius: var(--greese-corner-panel);
+  }
+
+  .greese-Avatar-fallback {
+    display: grid;
+    place-items: center;
+    inline-size: 100%;
+    block-size: 100%;
+    color: var(--greese-color-primary);
+    background-color: color-mix(
+      in oklab,
+      var(--greese-color-primary) 16%,
+      var(--greese-color-canvas)
+    );
+  }
+
+  .greese-Avatar--count .greese-Avatar-fallback {
+    color: var(--greese-color-fg-muted);
+    background-color: var(--greese-color-surface);
+  }
+
+  .greese-AvatarGroup {
+    display: inline-flex;
+    align-items: center;
+    isolation: isolate;
+  }
+
+  // On the group and its avatars, so the group's size wins over each
+  // avatar's own (an Avatar is `md` unless told otherwise), and the count
+  // matches them.
+  @each $size, $value in $sizes {
+    .greese-AvatarGroup--#{$size},
+    .greese-AvatarGroup--#{$size} .greese-Avatar {
+      --greese-avatar-size: #{$value};
+    }
+  }
+
+  .greese-AvatarGroup-item {
+    position: relative;
+    display: inline-flex;
+    border-radius: var(--greese-corner-round);
+
+    > .greese-Avatar {
+      box-shadow: 0 0 0 2px var(--greese-color-canvas);
+    }
+
+    & + & {
+      margin-inline-start: calc(var(--greese-avatar-size) * -0.25);
+    }
+  }
+}

package/src/components/Badge/Badge.scss

@@ -0,0 +1,52 @@
+@use '../../styles/tones';
+
+@layer greese.components {
+  @include tones.classes(
+    'greese-Badge',
+    'greese-badge-tone',
+    (neutral, primary, secondary, tertiary, accent, positive, negative, warning, info)
+  );
+
+  // Every variant is opaque: mixed over a surface, never over transparent,
+  // so whatever a badge is pinned to (an Indicator's avatar or icon) doesn't
+  // show through it. Set the surface to what it sits on, if not the canvas.
+  .greese-Badge {
+    --greese-badge-surface: var(--greese-color-canvas);
+
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+    padding: 0.125rem 0.5rem;
+    font-size: var(--greese-type-caption-font-size);
+    font-weight: var(--greese-font-weight-semibold);
+    line-height: var(--greese-line-height-snug);
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: var(--greese-corner-pill);
+  }
+
+  .greese-Badge--soft {
+    color: var(--greese-badge-tone);
+    background-color: color-mix(
+      in oklab,
+      var(--greese-badge-tone) 14%,
+      var(--greese-badge-surface)
+    );
+  }
+
+  .greese-Badge--solid {
+    color: var(--greese-badge-tone-on);
+    background-color: var(--greese-badge-tone);
+  }
+
+  .greese-Badge--outline {
+    color: var(--greese-badge-tone);
+    background-color: var(--greese-badge-surface);
+    border-color: color-mix(
+      in oklab,
+      var(--greese-badge-tone) 55%,
+      var(--greese-badge-surface)
+    );
+  }
+}

package/src/components/Box/Box.scss

@@ -0,0 +1,63 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Box {
+    @include mixins.component-root;
+  }
+}
+
+// Style props are utilities: they win over any component's own styles (a
+// Container's default gutter, say) regardless of source order.
+@layer greese.utilities {
+  $space: (
+    m: margin,
+    mx: margin-inline,
+    my: margin-block,
+    mt: margin-block-start,
+    mb: margin-block-end,
+    ms: margin-inline-start,
+    me: margin-inline-end,
+    p: padding,
+    px: padding-inline,
+    py: padding-block,
+    pt: padding-block-start,
+    pb: padding-block-end,
+    ps: padding-inline-start,
+    pe: padding-inline-end,
+    gap: gap,
+  );
+
+  @each $prop, $property in $space {
+    @include mixins.responsive-prop('greese-Box', $prop, $property);
+  }
+
+  @include mixins.responsive-prop('greese-Box', 'w', inline-size);
+  @include mixins.responsive-prop('greese-Box', 'max-w', max-inline-size);
+  @include mixins.responsive-prop(
+    'greese-Box',
+    'display',
+    display,
+    (
+      block: block,
+      inline: inline,
+      inline-block: inline-block,
+      flex: flex,
+      inline-flex: inline-flex,
+      grid: grid,
+      inline-grid: inline-grid,
+      none: none,
+      contents: contents,
+    )
+  );
+  @include mixins.responsive-prop(
+    'greese-Box',
+    'text-align',
+    text-align,
+    (
+      start: start,
+      center: center,
+      end: end,
+      justify: justify,
+    )
+  );
+}