lukebennett.dev / luke-ui

0

[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. luke-ui.netlify.app/

0

luke-ui / packages / @luke-ui / react /

at main 4 folders 9 files

Luke Bennett Replace intent with the shared semantic colour contract (#309) 1min ago

Rename bundled themes to Tactile and Paper (#122)

2 weeks ago

Rebuild the theme identity control and fix the icon collision (#265) * Replace the docs theme identity select with a matching pill control The theme identity picker was a raw native <select>, the only native form control on the docs surface, squeezed to ~200px in the sidebar footer and truncating "Tactile". Add a text-label segmented toggle group alongside the existing icon-only one, sharing the same pill shape, height, and focus treatment as the colour-mode group beside it, and use it for theme identity in both the sidebar footer and the playground header. Also give system colour mode a settings-gear glyph so it no longer collides with the monitor icon used for the Desktop viewport option. * Swap the system colour-mode glyph for a half-filled circle A settings cog reads as "open theme options", not "follow the operating system" — a misleading glyph, not just an ambiguous one. Replace it with the conventional split-circle contrast mark (one half filled, one half outline), which reads as "either of these two, decided for you". Matches the existing icon set's outline conventions (24x24 viewBox, currentColor stroke) apart from the filled half the mark requires.

4 days ago

Flip to the 128-leaf theme contract and defineTheme-only authoring (breaking) (#230) * Flip to the 128-leaf theme contract and defineTheme-only authoring Reduce the emitted contract 152->128: feedback intents (info/success/ warning) collapse to a static subtle+border+text kit; drop surface.resting, surfaceDisabled, borderDisabled, and the unused motion tail; rename textDisabled->text.disabled (CSS-var-stable); add color.scrim. Emit color.scrim from the theme and replace the hardcoded combobox tray scrim with vars.color.scrim. Make defineTheme the sole public authoring API: drop buildTheme and the raw foundation types from the package entry (kept internal for the build pipeline), rewrite Tactile/Paper as defineTheme inputs, and route build-themes/themes through defineTheme. validateContrast drops removed-token checks and adds text.primary x neutral.surface.subtle*. Retained token values are byte-identical (zero visual drift; goldens unchanged). Breaking major. Part of #226 / #228. * Update docs for the 128-leaf contract and defineTheme authoring Rewrite the theming and overview docs plus STYLING.md to document defineTheme as the sole public authoring API and the reduced 128-leaf token contract (static feedback intents, text.disabled, scrim; removed surface.resting, the disabled surface/border tokens, and the unused motion tail). Repoint live docs examples/samples off removed tokens. Part of #226 / #228.

6 days ago

Replace intent with the shared semantic colour contract (#309) * Replace the intent colour contract with shared semantic roles The public contract exposed an asymmetric `color.intent` tree: neutral, accent, and danger received a full interactive ramp while info, success, and warning received a feedback-only kit. That described how components happened to use colour rather than what each colour styles and means. Replace it with a property-first contract shared by all six roles. Every role now gets subtle and solid background ramps with rest/hover/pressed, a resting and a stronger interactive foreground, a guaranteed on-solid foreground, and one state-free border — 60 leaves keyed off a single canonical `SEMANTIC_ROLES` list that generation, mapping, validation, diagnostics, and tooling all read. `FAMILY_REQUIREMENTS` collapses to one uniform capability set, so all six families are now gated on on-solid contrast where only neutral, accent, and danger were before. This moves no existing colour: not one family needed adapting, and steps 3-8, 11, and 12 generate identically for info, success, and warning. The golden diff is additive only. The validation matrix is now uniform per role: 90 hard checks (8 functional text, 60 role foregrounds, 18 on-solid, 2 focus, 2 control) and 12 advisory semantic-border checks per mode. `rest` is an explicit leaf because a path cannot be both a string leaf and the parent of `hover` and `pressed`. Solid pressed deliberately reuses solid hover; components carry the press through depth, finish, or transform. Refs #298, #299, #305 * Migrate components to the shared semantic colour contract Move every consumer off `color.intent` onto the new background, foreground, and border paths. Each old path has an exact new equivalent resolving to an identical value, so this is visually a no-op: 218 of 222 visual captures are pixel-identical, and the four that differ are Token Board captures whose height changed because the contract grew. Button and IconButton keep their subtle, solid, ghost, hover, pressed, disabled, pending, focus, material, and forced-colours behaviour. Button derives its ramp type from the contract now rather than mirroring a hand-flattened shape. Link uses the resting foreground at rest and the stronger hover foreground for both hover and press, since the shared contract carries no separate pressed content colour. Fields and Combobox controls use the state-free accent and danger borders while the functional focus ring stays independent on `border.focus`. Selection stays a component pattern: selected options compose the accent subtle ramp with a weight change and a check icon rather than a public selected colour token. Disabled and pending controls preserve their resting colours and suppress interaction states. Add the coverage the specification asks for and the suites lacked: Button's subtle ramp and its disabled suppression, a Field browser test for the required indicator and error tone, and Combobox's selected-plus-keyboard-focus composition. Note that the advisory semantic borders sit at 1.62-2.19:1, below the 3:1 non-text gate, so they must never be a required state's only cue. The three pre-existing violations of that rule are unchanged here and remain tracked in #247. Refs #298, #300, #301, #302, #303 * Document the shared semantic colour roles Teach one shared role model instead of action and feedback intent groups: the six roles and their meanings, the background and foreground state grammar, the state-free borders, and the contrast guarantees. Publish the old-to-new migration table, which is now the only place the old paths appear. Replace the intent-colours example with a role-colours example that shows subtle and solid swatches per role, so the page demonstrates that every role carries the full capability set. Migrate the raw CSS consumers in the docs app, and fix a mis-cased `--luke-color-intent-neutral-surface-subtleHover` reference that never resolved against a real generated variable. Correct the generation document: the loading skeleton maps to neutral step 8, as implemented and tested, not step 7. Refs #298, #304

1 minute ago

Rebuild styling entrypoints and add Box (#119)

2 weeks ago

Improve docs (#30)

2 months ago

Restore the shipped Vanilla Extract stylesheet contract * Restore the shipped stylesheet contract * Make stylesheet selector check portable * Replace Capsize adapter with layer-aware @capsizecss/core - Replace @capsizecss/vanilla-extract (createTextStyle) with @capsizecss/core (createStyleObject) so Text trim declarations are emitted through recipeInLayer and owned by - Replace string-based stylesheet scanner with PostCSS-based structural contract test using postcss and postcss-selector-parser - Add postcss and postcss-selector-parser as dev dependencies - Remove @capsizecss/vanilla-extract dependency - Update docs/STYLING.md to document the Capsize approach * Revert Capsize dependency change, use logical properties, move side-effect import - Keep @capsizecss/vanilla-extract as the dependency (remove @capsizecss/core direct dep) - Replace createStyleObject usage with direct style construction from vars - Use logical properties (marginBlockEnd/marginBlockStart) in text CSS - Move stylesheet root side-effect import from styles/index.ts to recipes/index.ts - Update stylesheet-contract test to match logical property names * Update STYLING.md to reflect direct Capsize style construction * Move stylesheet root from side-effect import to build entry - Remove side-effect import from recipes/index.ts - Add stylesheet.css.ts as an extra Rollup input via inputOptions - Clean up empty stylesheet-entry JS output in build:done hook - Remove unused unlink import * Revert inputOptions approach, restore side-effect import with clear comment - Remove inputOptions and build:done hook from vite.config.ts - Remove stale ./_ export from package.json - Restore stylesheet root import in recipes/index.ts with explicit comment explaining it is a VE build-time side-effect (stripped from compiled output)

1 week ago

Add Checkbox and first-line control alignment (#307) * Add Checkbox and first-line control alignment * Polish Checkbox alignment and material * Allow subpixel checkbox alignment * Add Checkbox sizes * Refine Checkbox examples and style contract * Keep disabled Checkbox state coverage

1 hour ago

migrate toolchain to vite-plus (#50) * migrate toolchain to vite-plus Replace standalone .oxfmtrc.json/.oxlintrc.json configs and tsdown.config.ts with vite-plus unified fmt:/lint:/pack: blocks. Root vite.config.ts owns all fmt and lint config; packages/@luke-ui/react/vite.config.ts owns the pack build. Turbo remains the task runner. * fix: use vite-plus/test in layers test; build before lint in turbo vp lint --type-aware picks up story files via tsconfig.storybook.json, which import from @luke-ui/react subpath exports. Those only resolve after build, so @luke-ui/react#check:lint now depends on build (mirrors the existing check:types override). * fix: check:lint depends on ^build for type-aware lint across packages * refactor: rename docs-tools vitest.config.ts to vite.config.ts

4 weeks ago

tsconfig.storybook.json

Add styling utils and misc improvements (#46) * Add styling utils and misc improvements * Revert changes to select files

1 month ago

Rename bundled themes to Tactile and Paper (#122)

2 weeks ago

vitest.config.ts

Add Checkbox and first-line control alignment (#307) * Add Checkbox and first-line control alignment * Polish Checkbox alignment and material * Allow subpixel checkbox alignment * Add Checkbox sizes * Refine Checkbox examples and style contract * Keep disabled Checkbox state coverage

1 hour ago

vitest.shims.d.ts

migrate toolchain to vite-plus (#50) * migrate toolchain to vite-plus Replace standalone .oxfmtrc.json/.oxlintrc.json configs and tsdown.config.ts with vite-plus unified fmt:/lint:/pack: blocks. Root vite.config.ts owns all fmt and lint config; packages/@luke-ui/react/vite.config.ts owns the pack build. Turbo remains the task runner. * fix: use vite-plus/test in layers test; build before lint in turbo vp lint --type-aware picks up story files via tsconfig.storybook.json, which import from @luke-ui/react subpath exports. Those only resolve after build, so @luke-ui/react#check:lint now depends on build (mirrors the existing check:types override). * fix: check:lint depends on ^build for type-aware lint across packages * refactor: rename docs-tools vitest.config.ts to vite.config.ts

4 weeks ago

README.md

@luke-ui/react#

Luke UI is a React design system built on react-aria-components and vanilla-extract.

Install#

pnpm add @luke-ui/react

Setup#

Import the component stylesheet and one bundled theme stylesheet. Apply the theme root and identity classes to the same element.

The shared stylesheet owns reset, theme-root, recipe, and utility rules in reset, theme, recipes, utilities order.

import '@luke-ui/react/stylesheet.css';
import '@luke-ui/react/themes/tactile.css';
import { themeRootClassName } from '@luke-ui/react/theme';
import { tactileThemeClassName } from '@luke-ui/react/themes';
import { cx } from '@luke-ui/react/utils';

export function App() {
	return <div className={cx(themeRootClassName, tactileThemeClassName)}>{/* your app */}</div>;
}

Components and docs#

Full component documentation, interactive examples, and API reference are at lukebennett88.github.io/luke-ui/docs.

AI agents can fetch documentation at:

llms.txt: component index.
llms-full.txt: full docs.
Any docs URL with .md appended: per-page Markdown.

Components follow three tiers:

Atoms: single units such as Text, Icon, and Heading.
Composed components: opinionated combinations such as Button and TextField.
Primitives: lower-level public APIs for library authors, such as button/primitive and field/primitive.

Atoms and composed components are app-developer-facing. Primitives are documented in hosted docs for library authors, separate from the primary component path.

License#

MIT