@greese/ui 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chris Moody
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,56 @@
-# Temporary Holding Version
+# @greese/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+greese ui's CSS and design tokens, with no framework attached. Use it from
+plain HTML, or under any framework: `@greese/react` renders the same markup,
+and the Svelte, Vue and Angular packages will too (ADR 0014).
+
+```bash
+npm install @greese/ui
+```
+
+```html
+<link rel="stylesheet" href="node_modules/@greese/ui/dist/greese.css" />
+<!-- or, with a bundler: import '@greese/ui/styles.css' -->
+
+<button class="greese-Button greese-Button--solid">Save changes</button>
+```
+
+Each component's classes, parts, modifiers and state attributes are listed in
+the docs' Styling sections (and in `style-manifest.json`), and they're a
+public contract: every framework package renders the same ones. Native
+elements need nothing else (`<dialog>`, `<details>`, form controls);
+widgets with keyboard behaviour (Tabs, Combobox…) also need JavaScript, which
+the framework packages provide.
+
+## What's in it
+
+| Import                           | What                                                                                                                                                            |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@greese/ui/styles.css`          | Tokens and every component's styles                                                                                                                             |
+| `@greese/ui/base.css`            | Opt-in reset and page defaults                                                                                                                                  |
+| `@greese/ui/css/<Name>.css`      | One component's own styles (plus the shared core). A component built on others (a Dialog uses Button) needs theirs too; the framework packages wire that up     |
+| `@greese/ui/tokens.css`          | `--greese-*` custom properties, in `@layer greese.tokens`                                                                                                       |
+| `@greese/ui/palette.css`         | Opt-in: the palette as `--greese-<hue>-<shade>` (`--greese-lavender-600`), about 1.5 kB compressed                                                              |
+| `@greese/ui/scss`                | The whole stylesheet as Sass, configurable (`@use 'pkg:@greese/ui/scss' with ($breakpoints: …)`)                                                                |
+| `@greese/ui/scss/kit`            | The theming kit: `@use 'pkg:@greese/ui/scss/kit' as greese`, build-time themes that reject unknown names                                                        |
+| `@greese/ui/scss/tokens`         | The token CSS, plus `$breakpoints` and `$space-keys` Sass maps                                                                                                  |
+| `@greese/ui/scss/layers`         | Only the cascade layer order statement                                                                                                                          |
+| `@greese/ui/scss/maps`           | Only the Sass maps (`$breakpoints`, `$space-keys`, every token default as `$color` and `$scalars`, the palette as `$palette`, and `$layer-order`); emits no CSS |
+| `@greese/ui/style-manifest.json` | Every component's styling API, read from the compiled CSS                                                                                                       |
+| `@greese/ui`                     | TypeScript constants (`color`, `palette` and each hue, `space`, `radius`, `lineHeight`, `shadow`, `breakpoints`, …), `createTheme()` and `getSchemeScript()`    |
+
+It has no dependencies.
+
+Colors follow the OS color scheme. `data-greese-scheme="light"` or `"dark"` on
+any element forces a mode for that subtree, and modes can be nested. `createTheme()` builds a scoped theme as a static CSS string, which you can serve however you like and apply with `data-greese-theme="<name>"`.
+
+## Color roles and the palette
+
+`color` holds the semantic roles components use. The brand colors, in order,
+are `primary` (what components use for interactive emphasis), `secondary`,
+`tertiary` and `accent`, each with `…Strong` and a WCAG-safe `…Content`
+color that `createTheme` derives when you set only the main color.
+
+`palette` is 22 hues × 11 shades (`50`–`999`). Use it instead of hex literals: `palette.lavender[600]` or
+`import { lavender } from '@greese/ui'` in TypeScript, `lavender-600` in
+the SCSS kit, `var(--greese-lavender-600)` with `palette.css`.

package/bin/greese-utilities.mjs

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+// greese-utilities: writes the utility classes a project uses, or all of them.
+//
+//   greese-utilities --content "index.html" --content "src/**/*.{ts,tsx}" --out public/utilities.css
+//   greese-utilities --all --out utilities.css
+//
+// Options: --content <glob> (repeat), --out <file> (else stdout), --all (every
+// class, no scanning), --safelist <class> (repeat), --groups <a,b> (only these),
+// --prefix <name> (default none), --cwd <dir>.
+import { writeFile } from 'node:fs/promises'
+import { parseArgs } from 'node:util'
+import { generateUtilities } from '../dist/utilities.js'
+import { purgeFiles } from '../dist/utilitiesFiles.js'
+
+const { values } = parseArgs({
+  options: {
+    content: { type: 'string', multiple: true },
+    out: { type: 'string' },
+    all: { type: 'boolean' },
+    safelist: { type: 'string', multiple: true },
+    groups: { type: 'string' },
+    prefix: { type: 'string' },
+    cwd: { type: 'string' },
+    help: { type: 'boolean', short: 'h' },
+  },
+})
+
+if (values.help || (!values.all && !values.content?.length)) {
+  console.error(
+    'usage: greese-utilities (--content <glob>... | --all) [--out <file>] [--safelist <class>...] [--groups a,b] [--prefix <name>]'
+  )
+  process.exit(values.help ? 0 : 1)
+}
+
+const options = {
+  ...(values.prefix && { prefix: values.prefix }),
+  ...(values.groups && { groups: values.groups.split(',') }),
+}
+
+let css
+if (values.all) css = generateUtilities(options)
+else {
+  const result = await purgeFiles({
+    ...options,
+    content: values.content,
+    safelist: values.safelist ?? [],
+    cwd: values.cwd,
+  })
+  css = result.css
+  console.error(`greese-utilities: read ${result.files.length} files`)
+}
+
+if (values.out) {
+  await writeFile(values.out, css)
+  console.error(`greese-utilities: wrote ${values.out} (${css.length} bytes)`)
+} else process.stdout.write(css)

package/dist/_layers.scss

@@ -0,0 +1,2 @@
+/* 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;