[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui.
luke-ui.netlify.app/
Establish the tactile system through Button and IconButton (#112)
* Establish tactile Button and IconButton controls
* Center IconButton content
* Apply the default theme in docs
* Author semantic depth values directly
* Author semantic depth values directly
* Remove authored action control borders
* Remove inset control depth
* Restore exterior control depth
* Add action control face lighting
* Address action control review feedback
* Rename Button appearance API
* Clarify pending action cues
* Restore ELMO and docs theme controls
* Update tokens
authored by
Luke Bennett
and committed by
GitHub
(Jul 13, 2026, 7:43 PM +1000)
5383bebd
272da8ef
+1156
-389
+7
.changeset/tactile-action-controls.md
+7
.changeset/tactile-action-controls.md
+10
docs/STYLING.md
+10
docs/STYLING.md
···
33
33
font size, line height, and letter spacing so components cannot combine unrelated values. Icon sizes
34
34
carry forward the `xsmall`, `small`, `medium`, and `large` scale at 16px, 20px, 24px, and 32px.
35
35
36
+
Each colour mode authors the final composite `box-shadow` for `depth.recessed`, `depth.resting`,
37
+
`depth.raised`, `depth.floating`, and `depth.overlay`. Components select a semantic depth and do not
38
+
branch on the theme identity. This keeps lower edges and exterior shadows visible in the foundation
39
+
instead of deriving them from strength multipliers and hidden formulas.
40
+
41
+
Each mode also authors final `background-image` values for `actionControlFinish.resting`,
42
+
`actionControlFinish.raised`, and `actionControlFinish.recessed`. Button and IconButton layer this
43
+
face lighting over their semantic surface colour. Ghost controls and forced-colours rendering do not
44
+
use the authored finish.
45
+
36
46
Use `deriveConcentricRadius(innerRadius, gap)` for rounded elements nested inside another rounded
37
47
surface. It returns a CSS `calc()` value for the outer radius, so both inputs can be semantic theme
38
48
variables instead of theme-specific numbers.
+7
apps/docs/vitest.config.ts
+7
apps/docs/vitest.config.ts
···
2
2
import { playwright } from 'vite-plus/test/browser-playwright';
3
3
4
4
export default defineConfig({
5
+
optimizeDeps: {
6
+
include: [
7
+
'next-themes',
8
+
'react-aria-components/ToggleButton',
9
+
'react-aria-components/ToggleButtonGroup',
10
+
],
11
+
},
5
12
test: {
6
13
passWithNoTests: true,
7
14
projects: [
+111
apps/docs/src/components/theme-controls.browser.test.tsx
+111
apps/docs/src/components/theme-controls.browser.test.tsx
···
1
+
import '@luke-ui/react/stylesheet.css';
2
+
import '@luke-ui/react/themes/elmo.css';
3
+
import '@luke-ui/react/themes/machined-edge.css';
4
+
import { ThemeProvider } from 'next-themes';
5
+
import { act } from 'react';
6
+
import type { ReactNode } from 'react';
7
+
import type { Root } from 'react-dom/client';
8
+
import { createRoot, hydrateRoot } from 'react-dom/client';
9
+
import { renderToString } from 'react-dom/server';
10
+
import { afterEach, expect, test, vi } from 'vite-plus/test';
11
+
import { page, userEvent } from 'vite-plus/test/context';
12
+
import { StoryWrapper } from '../lib/story-wrapper';
13
+
import { DocsThemeRoot, ThemeControls } from './theme-controls';
14
+
15
+
let container: HTMLElement | undefined;
16
+
let root: Root | undefined;
17
+
18
+
afterEach(() => {
19
+
if (root) act(() => root?.unmount());
20
+
container?.remove();
21
+
localStorage.clear();
22
+
document.documentElement.removeAttribute('class');
23
+
container = undefined;
24
+
root = undefined;
25
+
});
26
+
27
+
test('exposes the playground colour-mode toggle beside the theme profile control', async () => {
28
+
renderTheme(<ThemeControls />);
29
+
30
+
const profile = page.getByRole('combobox', { name: 'Theme profile' });
31
+
const darkMode = getDarkModeButton();
32
+
33
+
await userEvent.selectOptions(profile, 'elmo');
34
+
await userEvent.click(darkMode, { force: true });
35
+
36
+
expect(profile).toHaveValue('elmo');
37
+
await expect.poll(() => getThemeRoot().dataset.colorMode).toBe('dark');
38
+
});
39
+
40
+
test('bridges dark mode into the Luke UI root and example canvas', async () => {
41
+
renderTheme(
42
+
<>
43
+
<ThemeControls />
44
+
<StoryWrapper>
45
+
<span>Example content</span>
46
+
</StoryWrapper>
47
+
</>,
48
+
);
49
+
50
+
const themeRoot = getThemeRoot();
51
+
const exampleContent = page.getByText('Example content').element();
52
+
const exampleCanvas = exampleContent.parentElement;
53
+
if (!exampleCanvas) throw new Error('Expected an example canvas');
54
+
55
+
const lightBackground = getComputedStyle(exampleCanvas).backgroundColor;
56
+
await userEvent.click(getDarkModeButton(), { force: true });
57
+
58
+
await expect.poll(() => themeRoot.dataset.colorMode).toBe('dark');
59
+
expect(getComputedStyle(exampleCanvas).backgroundColor).not.toBe(lightBackground);
60
+
});
61
+
62
+
test('omits the colour mode until hydration completes', async () => {
63
+
localStorage.setItem('theme', 'dark');
64
+
const tree = (
65
+
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
66
+
<DocsThemeRoot>
67
+
<span>Hydrated content</span>
68
+
</DocsThemeRoot>
69
+
</ThemeProvider>
70
+
);
71
+
const serverMarkup = renderToString(tree);
72
+
expect(serverMarkup).not.toContain('data-color-mode');
73
+
74
+
container = document.body.appendChild(document.createElement('div'));
75
+
container.innerHTML = serverMarkup;
76
+
const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
77
+
await act(async () => {
78
+
root = hydrateRoot(container as HTMLElement, tree);
79
+
});
80
+
81
+
await expect.poll(() => getThemeRoot().dataset.colorMode).toBe('dark');
82
+
expect(consoleError).not.toHaveBeenCalledWith(expect.stringContaining('hydration mismatch'));
83
+
consoleError.mockRestore();
84
+
});
85
+
86
+
function renderTheme(children: ReactNode) {
87
+
container = document.body.appendChild(document.createElement('div'));
88
+
root = createRoot(container);
89
+
90
+
act(() => {
91
+
root?.render(
92
+
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
93
+
<DocsThemeRoot>{children}</DocsThemeRoot>
94
+
</ThemeProvider>,
95
+
);
96
+
});
97
+
}
98
+
99
+
function getDarkModeButton() {
100
+
const button = container?.querySelector<HTMLButtonElement>('button[aria-label="Dark theme"]');
101
+
if (!button) throw new Error('Expected an accessible dark theme button');
102
+
103
+
return page.elementLocator(button);
104
+
}
105
+
106
+
function getThemeRoot() {
107
+
const themeRoot = container?.querySelector<HTMLElement>('[data-color-mode]');
108
+
if (!themeRoot) throw new Error('Expected a Luke UI theme root');
109
+
110
+
return themeRoot;
111
+
}
+66
apps/docs/src/components/theme-controls.tsx
+66
apps/docs/src/components/theme-controls.tsx
···
1
+
import { themeRootClassName } from '@luke-ui/react/theme';
2
+
import { elmoThemeClassName, machinedEdgeThemeClassName } from '@luke-ui/react/themes';
3
+
import { cx } from '@luke-ui/react/utils';
4
+
import type { ChangeEvent, ComponentProps, PropsWithChildren } from 'react';
5
+
import { createContext, useContext, useMemo, useState } from 'react';
6
+
import { ThemeToggle, useHydratedTheme } from './playground/theme-toggle';
7
+
8
+
export type ThemeName = 'elmo' | 'machined-edge';
9
+
10
+
interface ThemeSettings {
11
+
setTheme: (theme: ThemeName) => void;
12
+
theme: ThemeName;
13
+
}
14
+
15
+
const ThemeSettingsContext = createContext<ThemeSettings | null>(null);
16
+
17
+
export function DocsThemeRoot({ children }: PropsWithChildren) {
18
+
const colorMode = useHydratedTheme();
19
+
const [theme, setTheme] = useState<ThemeName>('machined-edge');
20
+
const themeClassName =
21
+
theme === 'machined-edge' ? machinedEdgeThemeClassName : elmoThemeClassName;
22
+
const settings = useMemo(() => ({ setTheme, theme }), [theme]);
23
+
24
+
return (
25
+
<ThemeSettingsContext.Provider value={settings}>
26
+
<div
27
+
className={cx(themeRootClassName, themeClassName, 'flex min-h-screen flex-1 flex-col')}
28
+
data-color-mode={colorMode ?? undefined}
29
+
>
30
+
{children}
31
+
</div>
32
+
</ThemeSettingsContext.Provider>
33
+
);
34
+
}
35
+
36
+
export function ThemeControls({ className, ...props }: ComponentProps<'div'>) {
37
+
const { setTheme, theme } = useThemeSettings();
38
+
39
+
function handleThemeChange(event: ChangeEvent<HTMLSelectElement>) {
40
+
setTheme(event.target.value === 'elmo' ? 'elmo' : 'machined-edge');
41
+
}
42
+
43
+
return (
44
+
<div {...props} className={cx('flex items-center gap-1', className)}>
45
+
<label>
46
+
<span className="sr-only">Theme profile</span>
47
+
<select
48
+
aria-label="Theme profile"
49
+
className="h-8 rounded-md border border-fd-border bg-fd-background px-2 text-fd-foreground text-xs"
50
+
onChange={handleThemeChange}
51
+
value={theme}
52
+
>
53
+
<option value="machined-edge">Machined edge</option>
54
+
<option value="elmo">ELMO</option>
55
+
</select>
56
+
</label>
57
+
<ThemeToggle />
58
+
</div>
59
+
);
60
+
}
61
+
62
+
function useThemeSettings() {
63
+
const settings = useContext(ThemeSettingsContext);
64
+
if (!settings) throw new Error('ThemeControls must be rendered inside DocsThemeRoot');
65
+
return settings;
66
+
}
+1
-1
apps/docs/src/lib/playground-default-code.tsx
+1
-1
apps/docs/src/lib/playground-default-code.tsx
+3
-3
apps/docs/src/lib/story-wrapper.tsx
+3
-3
apps/docs/src/lib/story-wrapper.tsx
···
1
1
import { IconSpritesheetProvider } from '@luke-ui/react/icon';
2
2
import spriteSheetHref from '@luke-ui/react/spritesheet.svg?url&no-inline';
3
+
import { vars } from '@luke-ui/react/theme';
3
4
import type { ReactNode } from 'react';
4
5
5
6
type StoryWrapperProps = { children: ReactNode };
···
9
10
<div
10
11
style={{
11
12
alignItems: 'center',
12
-
// Interim plain values; docs theming is rewired against the new theme contract in #96.
13
-
backgroundColor: '#fff',
14
-
color: '#212121',
13
+
backgroundColor: vars.color.surface.canvas,
14
+
color: vars.color.text.primary,
15
15
display: 'flex',
16
16
justifyContent: 'center',
17
17
minBlockSize: '6rem',
+7
-4
apps/docs/src/routes/__root.tsx
+7
-4
apps/docs/src/routes/__root.tsx
···
1
-
import { themeRootClassName } from '@luke-ui/react/theme';
2
-
import { cx } from '@luke-ui/react/utils';
1
+
import '@luke-ui/react/themes/elmo.css';
2
+
import '@luke-ui/react/themes/machined-edge.css';
3
3
import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router';
4
4
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
5
5
import { RootProvider } from 'fumadocs-ui/provider/tanstack';
6
6
import type { ReactNode } from 'react';
7
7
import { lazy, Suspense } from 'react';
8
+
import { DocsThemeRoot } from '../components/theme-controls';
8
9
import appCss from '../styles/app.css?url';
9
10
10
11
const SearchDialog = lazy(() => import('../components/search'));
···
50
51
<head>
51
52
<HeadContent />
52
53
</head>
53
-
<body className={cx(themeRootClassName, 'flex min-h-screen flex-col')}>
54
-
<RootProvider search={{ SearchDialog: LazySearchDialog }}>{children}</RootProvider>
54
+
<body className="flex min-h-screen flex-col">
55
+
<RootProvider search={{ SearchDialog: LazySearchDialog }}>
56
+
<DocsThemeRoot>{children}</DocsThemeRoot>
57
+
</RootProvider>
55
58
<Scripts />
56
59
</body>
57
60
</html>
+44
-7
packages/@luke-ui/react/.storybook/preview.tsx
+44
-7
packages/@luke-ui/react/.storybook/preview.tsx
···
1
1
/// <reference types="vite/client" />
2
2
3
+
import '../dist/themes/elmo.css';
4
+
import '../dist/themes/machined-edge.css';
3
5
import '@luke-ui/react/stylesheet.css';
4
6
import { IconSpritesheetProvider } from '@luke-ui/react/icon';
5
7
import spriteSheetHref from '@luke-ui/react/spritesheet.svg?url&no-inline';
6
8
import { themeRootClassName } from '@luke-ui/react/theme';
9
+
import { elmoThemeClassName, machinedEdgeThemeClassName } from '@luke-ui/react/themes';
7
10
import addonA11y from '@storybook/addon-a11y';
8
11
import addonDocs from '@storybook/addon-docs';
9
12
import { definePreview } from '@storybook/react-vite';
···
11
14
export default definePreview({
12
15
addons: [addonA11y(), addonDocs()],
13
16
decorators: [
14
-
(Story) => (
15
-
<IconSpritesheetProvider href={spriteSheetHref}>
16
-
<div className={themeRootClassName}>
17
-
<Story />
18
-
</div>
19
-
</IconSpritesheetProvider>
20
-
),
17
+
(Story, { globals }) => {
18
+
const themeClassName =
19
+
globals.theme === 'elmo' ? elmoThemeClassName : machinedEdgeThemeClassName;
20
+
const colorMode = globals.colorMode === 'dark' ? 'dark' : 'light';
21
+
22
+
return (
23
+
<IconSpritesheetProvider href={spriteSheetHref}>
24
+
<div className={`${themeRootClassName} ${themeClassName}`} data-color-mode={colorMode}>
25
+
<Story />
26
+
</div>
27
+
</IconSpritesheetProvider>
28
+
);
29
+
},
21
30
],
31
+
globalTypes: {
32
+
colorMode: {
33
+
description: 'Colour mode',
34
+
toolbar: {
35
+
dynamicTitle: true,
36
+
icon: 'contrast',
37
+
items: [
38
+
{ title: 'Light', value: 'light' },
39
+
{ title: 'Dark', value: 'dark' },
40
+
],
41
+
},
42
+
},
43
+
theme: {
44
+
description: 'Luke UI theme',
45
+
toolbar: {
46
+
dynamicTitle: true,
47
+
icon: 'paintbrush',
48
+
items: [
49
+
{ title: 'Machined edge', value: 'machined-edge' },
50
+
{ title: 'ELMO', value: 'elmo' },
51
+
],
52
+
},
53
+
},
54
+
},
55
+
initialGlobals: {
56
+
colorMode: 'light',
57
+
theme: 'machined-edge',
58
+
},
22
59
parameters: {
23
60
a11y: {
24
61
// 'todo' - show a11y violations in the test UI only
+9
-4
apps/docs/src/components/playground/theme-toggle.tsx
+9
-4
apps/docs/src/components/playground/theme-toggle.tsx
···
11
11
type Theme = (typeof THEMES)[number]['value'];
12
12
13
13
export function ThemeToggle() {
14
-
const { resolvedTheme, setTheme } = useTheme();
14
+
const { setTheme } = useTheme();
15
+
const theme = useHydratedTheme();
16
+
17
+
return <IconToggleButtonGroup label="Theme" onChange={setTheme} options={THEMES} value={theme} />;
18
+
}
19
+
20
+
export function useHydratedTheme(): Theme | null {
21
+
const { resolvedTheme } = useTheme();
15
22
const isMounted = useSyncExternalStore(
16
23
subscribeToHydration,
17
24
getHydratedSnapshot,
18
25
getServerSnapshot,
19
26
);
20
27
21
-
const theme = isMounted && isTheme(resolvedTheme) ? resolvedTheme : null;
22
-
23
-
return <IconToggleButtonGroup label="Theme" onChange={setTheme} options={THEMES} value={theme} />;
28
+
return isMounted && isTheme(resolvedTheme) ? resolvedTheme : null;
24
29
}
25
30
26
31
function isTheme(value: string | undefined): value is Theme {
+1
-1
packages/@luke-ui/react/src/test-utils/render-visual.tsx
+1
-1
packages/@luke-ui/react/src/test-utils/render-visual.tsx
···
103
103
* pattern.
104
104
*
105
105
* @example
106
-
* const tones = variantValuesFor<typeof Button, 'tone'>()(['primary', 'critical', 'ghost', 'neutral']);
106
+
* const tones = variantValuesFor<typeof Button, 'tone'>()(['neutral', 'accent', 'danger']);
107
107
*/
108
108
export function variantValuesFor<
109
109
Component extends ComponentType<any>,
+76
-3
packages/@luke-ui/react/src/theme/build-theme.test.ts
+76
-3
packages/@luke-ui/react/src/theme/build-theme.test.ts
···
13
13
import { elmoFoundation, machinedEdgeFoundation } from './foundations.js';
14
14
15
15
const pairs = flattenThemeContract();
16
-
const isModePath = (path: string) => path.startsWith('color.') || path.startsWith('depth.');
16
+
const isModePath = (path: string) =>
17
+
path.startsWith('actionControlFinish.') || path.startsWith('color.') || path.startsWith('depth.');
17
18
const modeVarNames = pairs.filter(([path]) => isModePath(path)).map(([, varName]) => varName);
18
19
const identityVarNames = pairs.filter(([path]) => !isModePath(path)).map(([, varName]) => varName);
19
20
···
114
115
expect(css).toContain('--luke-color-surface-disabled');
115
116
expect(css).toContain('--luke-color-intent-accent-text-hover');
116
117
expect(css).toContain('--luke-depth-raised');
118
+
expect(css).toContain('--luke-action-control-finish-resting');
117
119
expect(css).toContain('--luke-space-100:');
118
120
expect(css).toContain('--luke-control-size-small');
119
121
expect(css).toContain('--luke-motion-easing-standard');
···
123
125
expect(css).toContain('--luke-font-900-letter-spacing: -0.025em');
124
126
expect(css).toContain('--luke-icon-size-xsmall: 16px');
125
127
expect(css).toContain('--luke-icon-size-large: 32px');
128
+
});
129
+
130
+
it('emits the authored semantic depth values without synthesising material layers', () => {
131
+
expect(extractValue(blocks.baseLight, '--luke-depth-resting')).toBe(
132
+
machinedEdgeFoundation.light.depth.resting,
133
+
);
134
+
expect(extractValue(blocks.mediaDark, '--luke-depth-raised')).toBe(
135
+
machinedEdgeFoundation.dark.depth.raised,
136
+
);
137
+
for (const foundation of [machinedEdgeFoundation, elmoFoundation]) {
138
+
for (const mode of ['light', 'dark'] as const) {
139
+
expect(foundation[mode].depth.resting).not.toContain('inset');
140
+
expect(foundation[mode].depth.raised).not.toContain('inset');
141
+
expect(foundation[mode].depth.resting.split(', ')).toHaveLength(2);
142
+
expect(foundation[mode].depth.raised.split(', ')).toHaveLength(2);
143
+
expect(foundation[mode].depth.recessed).toBe('none');
144
+
}
145
+
}
146
+
});
147
+
148
+
it('keeps ELMO softer than Machined edge while retaining finish and state depth', () => {
149
+
const elmoBlocks = splitBlocks(buildTheme(elmoFoundation));
150
+
for (const [elmoBlock, machinedBlock] of [
151
+
[elmoBlocks.baseLight, blocks.baseLight],
152
+
[elmoBlocks.mediaDark, blocks.mediaDark],
153
+
] as const) {
154
+
const elmoResting = extractValue(elmoBlock, '--luke-depth-resting');
155
+
const elmoRaised = extractValue(elmoBlock, '--luke-depth-raised');
156
+
const elmoFinish = extractValue(elmoBlock, '--luke-action-control-finish-resting');
157
+
158
+
expect(extractValue(machinedBlock, '--luke-depth-resting')).toContain('0 2px 0');
159
+
expect(elmoResting).not.toContain('0 2px 0');
160
+
expect(elmoRaised).not.toContain('0 3px 0');
161
+
expect(elmoResting.split(', ')).toHaveLength(2);
162
+
expect(elmoRaised.split(', ')).toHaveLength(2);
163
+
expect(elmoRaised).not.toBe(elmoResting);
164
+
expect(elmoFinish).toContain('radial-gradient');
165
+
expect(elmoFinish).not.toBe(
166
+
extractValue(machinedBlock, '--luke-action-control-finish-resting'),
167
+
);
168
+
}
126
169
});
127
170
});
128
171
···
144
187
it('fills omitted optional fields with the documented defaults', () => {
145
188
const explicitFoundation: ThemeFoundation = {
146
189
dark: {
190
+
actionControlFinish: minimalFoundation.dark.actionControlFinish,
147
191
color: { ...minimalFoundation.dark.color, ...defaultSourceColors.dark },
148
-
material: minimalFoundation.dark.material,
192
+
depth: minimalFoundation.dark.depth,
149
193
},
150
194
light: {
195
+
actionControlFinish: minimalFoundation.light.actionControlFinish,
151
196
color: { ...minimalFoundation.light.color, ...defaultSourceColors.light },
152
-
material: minimalFoundation.light.material,
197
+
depth: minimalFoundation.light.depth,
153
198
},
154
199
name: 'minimal-check',
155
200
radius: { ...defaultRadius },
···
161
206
expect(css).toContain(`${varName}: `);
162
207
}
163
208
expect(css).toContain('--luke-color-border-focus: oklch(');
209
+
});
210
+
});
211
+
212
+
describe('buildTheme foundation validation', () => {
213
+
it('rejects empty or stylesheet-breaking depth values', () => {
214
+
const emptyDepth: ThemeFoundation = {
215
+
...machinedEdgeFoundation,
216
+
light: {
217
+
...machinedEdgeFoundation.light,
218
+
depth: { ...machinedEdgeFoundation.light.depth, resting: ' ' },
219
+
},
220
+
name: 'empty-depth',
221
+
};
222
+
const unsafeDepth: ThemeFoundation = {
223
+
...machinedEdgeFoundation,
224
+
dark: {
225
+
...machinedEdgeFoundation.dark,
226
+
depth: { ...machinedEdgeFoundation.dark.depth, overlay: 'none; color: red' },
227
+
},
228
+
name: 'unsafe-depth',
229
+
};
230
+
231
+
expect(() => buildTheme(emptyDepth)).toThrow(
232
+
'light.depth.resting: must be a non-empty CSS box-shadow value',
233
+
);
234
+
expect(() => buildTheme(unsafeDepth)).toThrow(
235
+
'dark.depth.overlay: must be a non-empty CSS box-shadow value',
236
+
);
164
237
});
165
238
});
166
239
+20
-108
packages/@luke-ui/react/src/theme/build-theme.ts
+20
-108
packages/@luke-ui/react/src/theme/build-theme.ts
···
1
1
import type { Oklch } from './color.js';
2
2
import { contrastRatio, formatOklch, gamutMapOklch, parseColor } from './color.js';
3
3
import { flattenThemeContract } from './contract.js';
4
-
import type {
5
-
ThemeFoundation,
6
-
ThemeMaterialProfile,
7
-
ThemeModeFoundation,
8
-
ThemeSourceColors,
9
-
} from './foundation.js';
4
+
import type { ThemeFoundation, ThemeModeFoundation, ThemeSourceColors } from './foundation.js';
10
5
import {
11
6
defaultFontFamily,
12
7
defaultFontWeights,
···
205
200
for (const [path, color] of Object.entries(colors)) {
206
201
values[path] = formatOklch(color);
207
202
}
208
-
Object.assign(values, buildDepthValues(modeFoundation.material));
203
+
for (const [name, value] of Object.entries(modeFoundation.depth)) {
204
+
values[`depth.${name}`] = value;
205
+
}
206
+
for (const [name, value] of Object.entries(modeFoundation.actionControlFinish)) {
207
+
values[`actionControlFinish.${name}`] = value;
208
+
}
209
209
return { failures, values };
210
210
}
211
211
···
533
533
return failures;
534
534
}
535
535
536
-
function buildDepthValues(material: ThemeMaterialProfile): Record<string, string> {
537
-
const shadowColor = gamutMapOklch(parseColor(material.shadowColor));
538
-
const white: Oklch = { c: 0, h: 0, l: 1 };
539
-
const blurScale = material.blur === 'sharp' ? 0.75 : 1.5;
540
-
541
-
const highlight = shadowLayer({
542
-
alpha: material.highlightStrength,
543
-
color: white,
544
-
inset: true,
545
-
offsetY: 1,
546
-
});
547
-
const ring = shadowLayer({
548
-
alpha: material.edgeStrength,
549
-
color: shadowColor,
550
-
inset: true,
551
-
spread: 1,
552
-
});
553
-
const lowerEdge =
554
-
material.lowerEdgeDepth > 0
555
-
? shadowLayer({
556
-
alpha: material.edgeStrength,
557
-
color: shadowColor,
558
-
inset: true,
559
-
offsetY: -material.lowerEdgeDepth,
560
-
})
561
-
: null;
562
-
const exterior = (offsetY: number, blur: number, alphaBase: number) =>
563
-
shadowLayer({
564
-
alpha: alphaBase * material.shadowStrength,
565
-
blur: blur * blurScale,
566
-
color: shadowColor,
567
-
offsetY,
568
-
});
569
-
const innerTopShadow = shadowLayer({
570
-
alpha: 0.5 * material.shadowStrength,
571
-
blur: 2 * blurScale,
572
-
color: shadowColor,
573
-
inset: true,
574
-
offsetY: 1,
575
-
});
576
-
577
-
return {
578
-
'depth.recessed': composeShadow([innerTopShadow, ring]),
579
-
'depth.resting': composeShadow([highlight, ring, lowerEdge, exterior(1, 2, 0.35)]),
580
-
'depth.raised': composeShadow([
581
-
highlight,
582
-
ring,
583
-
lowerEdge,
584
-
exterior(2, 4, 0.5),
585
-
exterior(1, 2, 0.35),
586
-
]),
587
-
'depth.floating': composeShadow([ring, exterior(4, 12, 0.7), exterior(2, 4, 0.4)]),
588
-
'depth.overlay': composeShadow([ring, exterior(12, 32, 0.9), exterior(4, 12, 0.5)]),
589
-
};
590
-
}
591
-
592
-
interface ShadowLayer {
593
-
alpha: number;
594
-
blur?: number;
595
-
color: Oklch;
596
-
inset?: boolean;
597
-
offsetY?: number;
598
-
spread?: number;
599
-
}
600
-
601
-
function shadowLayer(layer: ShadowLayer): string | null {
602
-
if (layer.alpha <= 0) return null;
603
-
const parts = [
604
-
...(layer.inset === true ? ['inset'] : []),
605
-
'0',
606
-
pixels(layer.offsetY ?? 0),
607
-
pixels(layer.blur ?? 0),
608
-
...(layer.spread !== undefined ? [pixels(layer.spread)] : []),
609
-
formatOklch(layer.color, Math.min(layer.alpha, 1)),
610
-
];
611
-
return parts.join(' ');
612
-
}
613
-
614
-
function composeShadow(layers: Array<string | null>): string {
615
-
const present = layers.filter((layer) => layer !== null);
616
-
return present.length === 0 ? 'none' : present.join(', ');
617
-
}
618
-
619
-
function pixels(value: number): string {
620
-
if (value === 0) return '0';
621
-
return `${Number(value.toFixed(2)).toString()}px`;
622
-
}
623
-
624
536
function validateFoundation(foundation: ThemeFoundation): void {
625
537
const issues: Array<string> = [];
626
538
try {
···
639
551
issues.push(`${mode}.color.${field}: ${errorMessage(error)}`);
640
552
}
641
553
}
642
-
const material = modeFoundation.material;
643
-
for (const field of ['highlightStrength', 'edgeStrength', 'shadowStrength'] as const) {
644
-
const value = material[field];
645
-
if (!Number.isFinite(value) || value < 0 || value > 1) {
646
-
issues.push(`${mode}.material.${field}: must be a number between 0 and 1`);
554
+
for (const [name, value] of Object.entries(modeFoundation.depth)) {
555
+
if (value.trim() === '' || /[;{}]/.test(value)) {
556
+
issues.push(`${mode}.depth.${name}: must be a non-empty CSS box-shadow value`);
647
557
}
648
558
}
649
-
if (!Number.isFinite(material.lowerEdgeDepth) || material.lowerEdgeDepth < 0) {
650
-
issues.push(`${mode}.material.lowerEdgeDepth: must be a number of pixels, 0 or greater`);
651
-
}
652
-
try {
653
-
parseColor(material.shadowColor);
654
-
} catch (error) {
655
-
issues.push(`${mode}.material.shadowColor: ${errorMessage(error)}`);
559
+
for (const [name, value] of Object.entries(modeFoundation.actionControlFinish)) {
560
+
if (value.trim() === '' || /[;{}]/.test(value)) {
561
+
issues.push(
562
+
`${mode}.actionControlFinish.${name}: must be a non-empty CSS background-image value`,
563
+
);
564
+
}
656
565
}
657
566
}
658
567
const fontFamily = foundation.typography?.fontFamily;
···
690
599
): string {
691
600
const selector = `.${themeClassName(foundation.name)}`;
692
601
const pairs = flattenThemeContract();
693
-
const isModePath = (path: string) => path.startsWith('color.') || path.startsWith('depth.');
602
+
const isModePath = (path: string) =>
603
+
path.startsWith('actionControlFinish.') ||
604
+
path.startsWith('color.') ||
605
+
path.startsWith('depth.');
694
606
const identityPairs = pairs.filter(([path]) => !isModePath(path));
695
607
const modePairs = pairs.filter(([path]) => isModePath(path));
696
608
+1
packages/@luke-ui/react/src/theme/contract.ts
+1
packages/@luke-ui/react/src/theme/contract.ts
···
92
92
},
93
93
},
94
94
depth: { recessed: null, resting: null, raised: null, floating: null, overlay: null },
95
+
actionControlFinish: { recessed: null, resting: null, raised: null },
95
96
font: {
96
97
100: { fontSize: null, letterSpacing: null, lineHeight: null },
97
98
200: { fontSize: null, letterSpacing: null, lineHeight: null },
+27
-17
packages/@luke-ui/react/src/theme/foundation.ts
+27
-17
packages/@luke-ui/react/src/theme/foundation.ts
···
77
77
};
78
78
}
79
79
80
-
/** The per-mode authored inputs: source colours and a material profile. */
80
+
/** The per-mode authored inputs: source colours, action-control finish, and depth treatments. */
81
81
export interface ThemeModeFoundation {
82
+
/** Final `background-image` values for the shared Button and IconButton face finish. */
83
+
actionControlFinish: ActionControlFinishFoundation;
82
84
/** Source colours the semantic colour contract is generated from. */
83
85
color: ThemeSourceColors;
84
-
/** The visible physical material properties the depth ladder is generated from. */
85
-
material: ThemeMaterialProfile;
86
+
/** Final composite `box-shadow` values for the semantic depth ladder. */
87
+
depth: ThemeDepthFoundation;
88
+
}
89
+
90
+
/** Authored action-control face lighting for one colour mode. */
91
+
export interface ActionControlFinishFoundation {
92
+
/** Face lighting for a pressed control. */
93
+
recessed: string;
94
+
/** Face lighting for a resting control. */
95
+
resting: string;
96
+
/** Face lighting for a hovered control. */
97
+
raised: string;
86
98
}
87
99
88
100
/**
···
109
121
focus?: string;
110
122
}
111
123
112
-
/** Visible physical material properties for one mode. */
113
-
export interface ThemeMaterialProfile {
114
-
/** Alpha of the top inner highlight line, 0 to 1. */
115
-
highlightStrength: number;
116
-
/** Alpha of the inset perimeter ring, 0 to 1. */
117
-
edgeStrength: number;
118
-
/** Colour of exterior and inset shadows. */
119
-
shadowColor: string;
120
-
/** Scale applied to exterior shadow alphas, 0 to 1. */
121
-
shadowStrength: number;
122
-
/** Blur character; scales shadow blur radii. */
123
-
blur: 'sharp' | 'soft';
124
-
/** Depth of the inset lower edge in pixels. */
125
-
lowerEdgeDepth: number;
124
+
/** Authored composite `box-shadow` values for one colour mode. */
125
+
export interface ThemeDepthFoundation {
126
+
/** Inset treatment for a pressed control or sunken surface. */
127
+
recessed: string;
128
+
/** Resting treatment for an interactive control or surface. */
129
+
resting: string;
130
+
/** Treatment for a hovered control or elevated surface. */
131
+
raised: string;
132
+
/** Treatment for a floating surface such as a menu. */
133
+
floating: string;
134
+
/** Treatment for a high-elevation surface such as a dialog. */
135
+
overlay: string;
126
136
}
127
137
128
138
/** Curated Capsize-compatible font stacks for each font-family choice. */
+112
-30
packages/@luke-ui/react/src/theme/foundations.ts
+112
-30
packages/@luke-ui/react/src/theme/foundations.ts
···
6
6
*/
7
7
export const machinedEdgeFoundation: ThemeFoundation = {
8
8
dark: {
9
+
actionControlFinish: {
10
+
raised: [
11
+
'radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.18) 0%, transparent 100%)',
12
+
'radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.1) 0%, transparent 70%)',
13
+
].join(', '),
14
+
recessed: [
15
+
'radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 100%)',
16
+
'radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.04) 0%, transparent 70%)',
17
+
].join(', '),
18
+
resting: [
19
+
'radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.14) 0%, transparent 100%)',
20
+
'radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.07) 0%, transparent 70%)',
21
+
].join(', '),
22
+
},
9
23
color: {
10
24
accent: 'oklch(0.75 0.1 200)',
11
25
neutral: 'oklch(0.25 0.015 210)',
12
26
},
13
-
material: {
14
-
blur: 'sharp',
15
-
edgeStrength: 0.55,
16
-
highlightStrength: 0.14,
17
-
lowerEdgeDepth: 2,
18
-
shadowColor: 'oklch(0.05 0.01 220)',
19
-
shadowStrength: 0.55,
27
+
depth: {
28
+
floating: [
29
+
'0 4px 12px oklch(0.05 0.01 220 / 0.38)',
30
+
'0 2px 4px oklch(0.05 0.01 220 / 0.22)',
31
+
].join(', '),
32
+
overlay: [
33
+
'0 12px 32px oklch(0.05 0.01 220 / 0.5)',
34
+
'0 4px 12px oklch(0.05 0.01 220 / 0.28)',
35
+
].join(', '),
36
+
raised: [
37
+
'0 3px 0 oklch(0.05 0.01 220 / 0.55)',
38
+
'0 5px 8px -2px oklch(0.05 0.01 220 / 0.32)',
39
+
].join(', '),
40
+
recessed: 'none',
41
+
resting: [
42
+
'0 2px 0 oklch(0.05 0.01 220 / 0.5)',
43
+
'0 3px 5px -1px oklch(0.05 0.01 220 / 0.26)',
44
+
].join(', '),
20
45
},
21
46
},
22
47
light: {
48
+
actionControlFinish: {
49
+
raised: [
50
+
'radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.3) 0%, transparent 100%)',
51
+
'radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.16) 0%, transparent 70%)',
52
+
].join(', '),
53
+
recessed: [
54
+
'radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.12) 0%, transparent 100%)',
55
+
'radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.06) 0%, transparent 70%)',
56
+
].join(', '),
57
+
resting: [
58
+
'radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.24) 0%, transparent 100%)',
59
+
'radial-gradient(70% 45% at 50% 110%, rgb(255 255 255 / 0.12) 0%, transparent 70%)',
60
+
].join(', '),
61
+
},
23
62
color: {
24
63
accent: 'oklch(0.52 0.11 200)',
25
64
neutral: 'oklch(0.975 0.008 210)',
26
65
},
27
-
material: {
28
-
blur: 'sharp',
29
-
edgeStrength: 0.45,
30
-
highlightStrength: 0.9,
31
-
lowerEdgeDepth: 2,
32
-
shadowColor: 'oklch(0.3 0.03 220)',
33
-
shadowStrength: 0.22,
66
+
depth: {
67
+
floating: [
68
+
'0 4px 12px oklch(0.3 0.03 220 / 0.16)',
69
+
'0 2px 4px oklch(0.3 0.03 220 / 0.1)',
70
+
].join(', '),
71
+
overlay: [
72
+
'0 12px 32px oklch(0.3 0.03 220 / 0.2)',
73
+
'0 4px 12px oklch(0.3 0.03 220 / 0.12)',
74
+
].join(', '),
75
+
raised: [
76
+
'0 3px 0 oklch(0.3 0.03 220 / 0.3)',
77
+
'0 5px 8px -2px oklch(0.3 0.03 220 / 0.2)',
78
+
].join(', '),
79
+
recessed: 'none',
80
+
resting: [
81
+
'0 2px 0 oklch(0.3 0.03 220 / 0.28)',
82
+
'0 3px 5px -1px oklch(0.3 0.03 220 / 0.16)',
83
+
].join(', '),
34
84
},
35
85
},
36
86
name: 'machined-edge',
···
38
88
39
89
/**
40
90
* Foundation for ELMO, the materially minimal bundled theme. Its light mode approximates the flat,
41
-
* hairline-bordered Luke UI look with the blue `#0160ae`-family accent; its dark mode is net-new.
91
+
* hairline-bordered Luke UI look with the blue `#185281`-family accent; its dark mode is net-new.
42
92
*/
43
93
export const elmoFoundation: ThemeFoundation = {
44
94
dark: {
95
+
actionControlFinish: {
96
+
raised: [
97
+
'radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.1) 0%, transparent 100%)',
98
+
'radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.05) 0%, transparent 70%)',
99
+
].join(', '),
100
+
recessed: 'radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.04) 0%, transparent 100%)',
101
+
resting: [
102
+
'radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.07) 0%, transparent 100%)',
103
+
'radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.03) 0%, transparent 70%)',
104
+
].join(', '),
105
+
},
45
106
color: {
46
107
accent: 'oklch(0.7 0.11 250)',
47
108
neutral: 'oklch(0.22 0.01 250)',
48
109
},
49
-
material: {
50
-
blur: 'soft',
51
-
edgeStrength: 0.45,
52
-
highlightStrength: 0.05,
53
-
lowerEdgeDepth: 0,
54
-
shadowColor: 'oklch(0.12 0.01 250)',
55
-
shadowStrength: 0.35,
110
+
depth: {
111
+
floating: '0 4px 14px oklch(0.12 0.01 250 / 0.25)',
112
+
overlay: '0 12px 36px oklch(0.12 0.01 250 / 0.32)',
113
+
raised: [
114
+
'0 2px 6px oklch(0.12 0.01 250 / 0.18)',
115
+
'0 1px 3px oklch(0.12 0.01 250 / 0.12)',
116
+
].join(', '),
117
+
recessed: 'none',
118
+
resting: [
119
+
'0 1px 3px oklch(0.12 0.01 250 / 0.12)',
120
+
'0 1px 2px oklch(0.12 0.01 250 / 0.06)',
121
+
].join(', '),
56
122
},
57
123
},
58
124
light: {
125
+
actionControlFinish: {
126
+
raised: [
127
+
'radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.2) 0%, transparent 100%)',
128
+
'radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.1) 0%, transparent 70%)',
129
+
].join(', '),
130
+
recessed: 'radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 100%)',
131
+
resting: [
132
+
'radial-gradient(90% 75% at 50% 0%, rgb(255 255 255 / 0.16) 0%, transparent 100%)',
133
+
'radial-gradient(80% 50% at 50% 110%, rgb(255 255 255 / 0.07) 0%, transparent 70%)',
134
+
].join(', '),
135
+
},
59
136
color: {
60
-
accent: '#0160ae',
137
+
accent: '#185281',
61
138
danger: '#c0262e',
62
139
info: '#1d39c4',
63
140
neutral: '#ffffff',
64
141
success: '#306317',
65
142
warning: '#d89614',
66
143
},
67
-
material: {
68
-
blur: 'soft',
69
-
edgeStrength: 0.35,
70
-
highlightStrength: 0,
71
-
lowerEdgeDepth: 0,
72
-
shadowColor: 'oklch(0.2 0.01 250)',
73
-
shadowStrength: 0.1,
144
+
depth: {
145
+
floating: '0 4px 14px oklch(0.2 0.01 250 / 0.12)',
146
+
overlay: '0 12px 36px oklch(0.2 0.01 250 / 0.16)',
147
+
raised: [
148
+
'0 2px 6px oklch(0.2 0.01 250 / 0.05)',
149
+
'0 1px 3px oklch(0.2 0.01 250 / 0.035)',
150
+
].join(', '),
151
+
recessed: 'none',
152
+
resting: [
153
+
'0 1px 3px oklch(0.2 0.01 250 / 0.04)',
154
+
'0 1px 2px oklch(0.2 0.01 250 / 0.02)',
155
+
].join(', '),
74
156
},
75
157
},
76
158
name: 'elmo',
+2
-1
packages/@luke-ui/react/src/theme/index.tsx
+2
-1
packages/@luke-ui/react/src/theme/index.tsx
···
34
34
35
35
/** The typed theme-foundation contract accepted by `buildTheme`. */
36
36
export type {
37
+
ActionControlFinishFoundation,
38
+
ThemeDepthFoundation,
37
39
ThemeFoundation,
38
-
ThemeMaterialProfile,
39
40
ThemeModeFoundation,
40
41
ThemeSourceColors,
41
42
} from './foundation.js';