From 4d32131227b51debb35ca2cebb1817f2267edf06 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 25 Aug 2026 08:28:10 +1000 Subject: [PATCH] Rename spacing scale keys to value-based names (#498) --- .../content/docs/components/layout/box.mdx | 4 +- apps/docs/content/docs/docs/layout.mdx | 8 +-- apps/docs/content/docs/docs/styling.mdx | 4 +- .../content/docs/docs/token-reference.mdx | 12 ++-- apps/docs/src/components/components-index.tsx | 8 +-- apps/docs/src/examples/box/basic.tsx | 2 +- apps/docs/src/examples/box/render-element.tsx | 2 +- .../src/examples/box/responsive-layout.tsx | 4 +- .../src/examples/box/semantic-element.tsx | 2 +- apps/docs/src/examples/button/appearance.tsx | 2 +- apps/docs/src/examples/button/icons.tsx | 2 +- apps/docs/src/examples/button/sizes.tsx | 2 +- apps/docs/src/examples/button/tones.tsx | 2 +- .../checkbox/first-line-alignment.tsx | 2 +- apps/docs/src/examples/checkbox/sizes.tsx | 2 +- apps/docs/src/examples/checkbox/states.tsx | 2 +- .../docs/src/examples/checkbox/validation.tsx | 2 +- .../src/examples/combobox-field/basic.tsx | 2 +- .../examples/combobox-field/validation.tsx | 2 +- apps/docs/src/examples/forms/build-a-form.tsx | 6 +- .../examples/forms/constraint-validation.tsx | 2 +- .../src/examples/forms/custom-validation.tsx | 2 +- .../forms/react-hook-form-checkbox.tsx | 4 +- .../src/examples/forms/react-hook-form.tsx | 4 +- .../examples/forms/tanstack-form-checkbox.tsx | 4 +- .../docs/src/examples/forms/tanstack-form.tsx | 4 +- apps/docs/src/examples/forms/validation.tsx | 2 +- .../examples/heading/automatic-leveling.tsx | 2 +- .../src/examples/icon-button/appearance.tsx | 2 +- apps/docs/src/examples/icon-button/size.tsx | 2 +- apps/docs/src/examples/icon-button/tones.tsx | 2 +- apps/docs/src/examples/icon/colours.tsx | 4 +- apps/docs/src/examples/icon/decorative.tsx | 2 +- apps/docs/src/examples/icon/size-context.tsx | 2 +- apps/docs/src/examples/icon/sizes.tsx | 4 +- apps/docs/src/examples/link/standalone.tsx | 2 +- apps/docs/src/examples/link/tones.tsx | 2 +- .../src/examples/loading-skeleton/basic.tsx | 2 +- .../loading-skeleton/border-radius.tsx | 2 +- .../examples/loading-skeleton/provider.tsx | 10 ++-- .../src/examples/loading-spinner/children.tsx | 2 +- .../src/examples/loading-spinner/colors.tsx | 2 +- .../src/examples/loading-spinner/sizes.tsx | 2 +- apps/docs/src/examples/numeral/compact.tsx | 2 +- apps/docs/src/examples/numeral/formats.tsx | 2 +- apps/docs/src/examples/numeral/precision.tsx | 2 +- .../examples/overview/concentric-radius.tsx | 6 +- apps/docs/src/examples/overview/depth.tsx | 6 +- .../src/examples/overview/radius-roles.tsx | 6 +- .../src/examples/overview/role-colours.tsx | 22 ++++---- .../src/examples/overview/spacing-scale.tsx | 4 +- .../overview/typography-components.tsx | 2 +- .../examples/text-field/prefix-and-suffix.tsx | 2 +- .../docs/src/examples/text-field/required.tsx | 2 +- apps/docs/src/examples/text-field/sizes.tsx | 2 +- .../src/examples/text-field/validation.tsx | 2 +- apps/docs/src/examples/text/alignment.tsx | 2 +- .../docs/src/examples/text/numeric-glyphs.tsx | 4 +- apps/docs/src/examples/text/transform.tsx | 2 +- apps/docs/src/examples/text/trim.tsx | 4 +- apps/docs/src/examples/text/truncation.tsx | 2 +- apps/docs/src/examples/text/typography.tsx | 4 +- .../examples/theming/color-mode-override.tsx | 12 ++-- .../examples/theming/semantic-variables.tsx | 4 +- apps/docs/src/lib/playground-default-code.tsx | 12 ++-- apps/docs/src/lib/story-wrapper.tsx | 2 +- docs/STYLING.md | 18 +++--- docs/TESTING.md | 4 +- .../@luke-ui/react/.storybook/preview.tsx | 2 +- .../react/src/blockquote/recipe.css.ts | 2 +- .../react/src/box/box.browser.test.tsx | 2 +- .../@luke-ui/react/src/box/box.stories.tsx | 8 +-- .../react/src/box/box.visual.test.tsx | 6 +- .../@luke-ui/react/src/button/styles.css.ts | 2 +- .../react/src/overlays/mobile-overlay.css.ts | 2 +- .../react/src/primitives/button/recipe.css.ts | 8 +-- .../src/primitives/checkbox/recipe.css.ts | 10 ++-- .../src/primitives/combobox/styles.css.ts | 56 +++++++++---------- .../react/src/primitives/field/recipe.css.ts | 6 +- .../src/primitives/input-group/recipe.css.ts | 28 +++++----- .../react/src/styles/invalid-indicator.ts | 4 +- .../src/styles/utilities-emitted.test-d.ts | 18 ++---- .../src/styles/utilities.browser.test.ts | 34 +++++------ .../react/src/styles/utilities.css.ts | 22 ++++---- .../react/src/styles/utilities.stories.tsx | 16 +++--- .../react/src/styles/utilities.test-d.ts | 19 +++---- .../@luke-ui/react/src/text/text.stories.tsx | 6 +- packages/@luke-ui/react/src/theme/contract.ts | 27 +++++---- .../react/src/theme/foundation.test.ts | 12 ++-- .../@luke-ui/react/src/theme/foundation.ts | 9 ++- .../src/theme/theme-diagnostics-inspector.tsx | 30 +++++----- .../@luke-ui/react/src/theme/token-board.tsx | 20 +++---- 92 files changed, 303 insertions(+), 314 deletions(-) diff --git a/apps/docs/content/docs/components/layout/box.mdx b/apps/docs/content/docs/components/layout/box.mdx index 806eae41..7fdfe806 100644 --- a/apps/docs/content/docs/components/layout/box.mdx +++ b/apps/docs/content/docs/components/layout/box.mdx @@ -20,7 +20,7 @@ gap, flex, and grid-child properties. It does not set grid container properties. rules in the application CSS or a component that owns that layout. ```tsx - + {children} ``` @@ -33,7 +33,7 @@ worked example. ## Spacing values -Padding, gap, and margin accept the Luke UI spacing steps. Read +Padding, gap, and margin accept value-based spacing keys. Read [Layout](/docs/layout#spacing-and-sizing) for the full scale and for logical property names. ## Choose the rendered element diff --git a/apps/docs/content/docs/docs/layout.mdx b/apps/docs/content/docs/docs/layout.mdx index d03df561..2d12ec44 100644 --- a/apps/docs/content/docs/docs/layout.mdx +++ b/apps/docs/content/docs/docs/layout.mdx @@ -15,7 +15,7 @@ Box is the layout component. Use it to: ```tsx import { Box } from '@luke-ui/react/box'; - + {children} ; ``` @@ -69,9 +69,9 @@ content can adapt without a breakpoint. ## Spacing and sizing -Padding, gap, and margin use the Luke UI spacing steps: `0`, `100`, `200`, `300`, `400`, `600`, -`800`, `1000`, `1200`, and `1600`. Margin also accepts `auto`. Sizing and grid-placement properties -accept their CSS values. +Padding, gap, and margin accept `0` plus value-based spacing keys such as `sp16` and `sp24`. Each +spacing key matches its pixel value, so `sp16` is 16px. Margin also accepts `auto`. Sizing and +grid-placement properties accept their CSS values. Use logical properties such as `paddingInline`, `marginBlockStart`, and `maxInlineSize`. They work in both writing directions without a second layout rule. diff --git a/apps/docs/content/docs/docs/styling.mdx b/apps/docs/content/docs/docs/styling.mdx index 65c9c287..9cc090d7 100644 --- a/apps/docs/content/docs/docs/styling.mdx +++ b/apps/docs/content/docs/docs/styling.mdx @@ -34,7 +34,7 @@ can change without a migration path. Components are intentionally opinionated. Their public props cover supported variants, states, and behaviour. The active identity supplies semantic colours, font roles, radii, and depth. Luke UI -defines its type and spacing steps in source. +defines its type and spacing scale in source. @@ -128,7 +128,7 @@ outside Luke UI's layers, so do not use it to reach into a component's internal ```tsx import { Box } from '@luke-ui/react/box'; - + {children} ; ``` diff --git a/apps/docs/content/docs/docs/token-reference.mdx b/apps/docs/content/docs/docs/token-reference.mdx index 3ef7cb2a..49927289 100644 --- a/apps/docs/content/docs/docs/token-reference.mdx +++ b/apps/docs/content/docs/docs/token-reference.mdx @@ -1,6 +1,6 @@ --- title: Token reference -description: Public semantic CSS variables to build custom Luke UI elements. +description: Public CSS variables to build custom Luke UI elements. --- import { TokenExplorer } from '../../../src/components/token-explorer'; @@ -23,12 +23,14 @@ background and foreground. ## Choosing a scale -Choose a token by the job it performs. Spacing uses numbered steps. Radius and depth use semantic -roles. Use the public variable instead of copying its resolved CSS value. +Token families use different naming models. Spacing uses value-based keys such as `sp16` and `sp24`. +Radius and depth use semantic roles. Use the public variable instead of copying its resolved CSS +value. ### Spacing -Spacing provides one scale for `gap`, `padding`, and `margin`. +Spacing provides one scale for `gap`, `padding`, and `margin`. Each key matches its pixel value, so +`sp16` is 16px. @@ -52,7 +54,7 @@ space between them, usually the wrapper's padding. This keeps their corners conc ```tsx import { deriveConcentricRadius, vars } from '@luke-ui/react/theme'; -const wrapperRadius = deriveConcentricRadius(vars.radius.control, vars.space[200]); +const wrapperRadius = deriveConcentricRadius(vars.radius.control, vars.space.sp8); ``` ### Depth diff --git a/apps/docs/src/components/components-index.tsx b/apps/docs/src/components/components-index.tsx index 81d08128..c6eaad7a 100644 --- a/apps/docs/src/components/components-index.tsx +++ b/apps/docs/src/components/components-index.tsx @@ -16,8 +16,8 @@ export function ComponentsIndex(): JSX.Element { className="not-prose" display="flex" flexDirection="column" - gap="800" - marginBlockStart="800" + gap="sp32" + marginBlockStart="sp32" > {componentIndexGroups.map((group) => ( @@ -33,8 +33,8 @@ function CategoryGroup({ group }: { group: ComponentIndexGroup }) { display="flex" elementType="section" flexDirection="column" - gap="400" - marginBlockStart="400" + gap="sp16" + marginBlockStart="sp16" > {group.title} diff --git a/apps/docs/src/examples/box/basic.tsx b/apps/docs/src/examples/box/basic.tsx index 256185d1..7ec0c1c8 100644 --- a/apps/docs/src/examples/box/basic.tsx +++ b/apps/docs/src/examples/box/basic.tsx @@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box'; export default () => { return ( - + Account Settings diff --git a/apps/docs/src/examples/box/render-element.tsx b/apps/docs/src/examples/box/render-element.tsx index 0da2b016..cb6599f2 100644 --- a/apps/docs/src/examples/box/render-element.tsx +++ b/apps/docs/src/examples/box/render-element.tsx @@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box'; export default () => { return ( -
}> +
}> Delivery details

Your order will arrive within three business days.

diff --git a/apps/docs/src/examples/box/responsive-layout.tsx b/apps/docs/src/examples/box/responsive-layout.tsx index cd847e27..a5813c6e 100644 --- a/apps/docs/src/examples/box/responsive-layout.tsx +++ b/apps/docs/src/examples/box/responsive-layout.tsx @@ -4,7 +4,7 @@ import { vars } from '@luke-ui/react/theme'; export default () => { return ( - + @@ -17,7 +17,7 @@ function Item() { alignItems="center" display="flex" justifyContent="center" - padding="400" + padding="sp16" style={{ backgroundColor: vars.color.background.neutral.solid.rest, flex: 1, diff --git a/apps/docs/src/examples/box/semantic-element.tsx b/apps/docs/src/examples/box/semantic-element.tsx index 40d6be7e..0a3d076f 100644 --- a/apps/docs/src/examples/box/semantic-element.tsx +++ b/apps/docs/src/examples/box/semantic-element.tsx @@ -4,7 +4,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + Account settings Manage your profile and sign-in details. diff --git a/apps/docs/src/examples/button/appearance.tsx b/apps/docs/src/examples/button/appearance.tsx index ee865fde..58a4899d 100644 --- a/apps/docs/src/examples/button/appearance.tsx +++ b/apps/docs/src/examples/button/appearance.tsx @@ -3,7 +3,7 @@ import { Button } from '@luke-ui/react/button'; export default () => { return ( - + diff --git a/apps/docs/src/examples/button/icons.tsx b/apps/docs/src/examples/button/icons.tsx index 188f69d7..b66383e8 100644 --- a/apps/docs/src/examples/button/icons.tsx +++ b/apps/docs/src/examples/button/icons.tsx @@ -4,7 +4,7 @@ import { Icon } from '@luke-ui/react/icon'; export default () => { return ( - + diff --git a/apps/docs/src/examples/button/tones.tsx b/apps/docs/src/examples/button/tones.tsx index 4c766278..15d94b96 100644 --- a/apps/docs/src/examples/button/tones.tsx +++ b/apps/docs/src/examples/button/tones.tsx @@ -3,7 +3,7 @@ import { Button } from '@luke-ui/react/button'; export default () => { return ( - + diff --git a/apps/docs/src/examples/checkbox/first-line-alignment.tsx b/apps/docs/src/examples/checkbox/first-line-alignment.tsx index 265f1646..4f2dc92f 100644 --- a/apps/docs/src/examples/checkbox/first-line-alignment.tsx +++ b/apps/docs/src/examples/checkbox/first-line-alignment.tsx @@ -4,7 +4,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + A longer label keeps its control aligned when it wraps. diff --git a/apps/docs/src/examples/checkbox/sizes.tsx b/apps/docs/src/examples/checkbox/sizes.tsx index 954dcedf..d3fd987e 100644 --- a/apps/docs/src/examples/checkbox/sizes.tsx +++ b/apps/docs/src/examples/checkbox/sizes.tsx @@ -3,7 +3,7 @@ import { Checkbox } from '@luke-ui/react/checkbox'; export default () => { return ( - + Small diff --git a/apps/docs/src/examples/checkbox/states.tsx b/apps/docs/src/examples/checkbox/states.tsx index c5425cce..a007c158 100644 --- a/apps/docs/src/examples/checkbox/states.tsx +++ b/apps/docs/src/examples/checkbox/states.tsx @@ -3,7 +3,7 @@ import { Checkbox } from '@luke-ui/react/checkbox'; export default () => { return ( - + Unchecked Checked Indeterminate diff --git a/apps/docs/src/examples/checkbox/validation.tsx b/apps/docs/src/examples/checkbox/validation.tsx index 8903d67d..82b05880 100644 --- a/apps/docs/src/examples/checkbox/validation.tsx +++ b/apps/docs/src/examples/checkbox/validation.tsx @@ -10,7 +10,7 @@ export default () => { return (
- + I accept the terms of service diff --git a/apps/docs/src/examples/combobox-field/basic.tsx b/apps/docs/src/examples/combobox-field/basic.tsx index ce968643..103481c6 100644 --- a/apps/docs/src/examples/combobox-field/basic.tsx +++ b/apps/docs/src/examples/combobox-field/basic.tsx @@ -13,7 +13,7 @@ const fruits: Array = [ export default () => { return ( - + { return ( - + { } return ( - + setSubmittedEmail('')} onSubmit={handleSubmit}> - + { name="email" type="email" /> - + diff --git a/apps/docs/src/examples/forms/custom-validation.tsx b/apps/docs/src/examples/forms/custom-validation.tsx index b88e8772..eb9a77e1 100644 --- a/apps/docs/src/examples/forms/custom-validation.tsx +++ b/apps/docs/src/examples/forms/custom-validation.tsx @@ -20,7 +20,7 @@ export default () => { return ( - + { }); return ( - + undefined)}> - + { }); return ( - + undefined)}> - + { }); return ( - + { event.preventDefault(); @@ -44,7 +44,7 @@ export default () => { }} ref={formRef} > - + {(field) => ( { }); return ( - + { event.preventDefault(); @@ -43,7 +43,7 @@ export default () => { }} ref={formRef} > - + {(field) => ( { return ( - + { return ( - + Product roadmap Objectives diff --git a/apps/docs/src/examples/icon-button/appearance.tsx b/apps/docs/src/examples/icon-button/appearance.tsx index 7dbf8206..5f954d9b 100644 --- a/apps/docs/src/examples/icon-button/appearance.tsx +++ b/apps/docs/src/examples/icon-button/appearance.tsx @@ -3,7 +3,7 @@ import { IconButton } from '@luke-ui/react/icon-button'; export default () => { return ( - + diff --git a/apps/docs/src/examples/icon-button/size.tsx b/apps/docs/src/examples/icon-button/size.tsx index 8625f5ec..f934a66a 100644 --- a/apps/docs/src/examples/icon-button/size.tsx +++ b/apps/docs/src/examples/icon-button/size.tsx @@ -3,7 +3,7 @@ import { IconButton } from '@luke-ui/react/icon-button'; export default () => { return ( - + diff --git a/apps/docs/src/examples/icon-button/tones.tsx b/apps/docs/src/examples/icon-button/tones.tsx index 4478fc63..5544cb03 100644 --- a/apps/docs/src/examples/icon-button/tones.tsx +++ b/apps/docs/src/examples/icon-button/tones.tsx @@ -3,7 +3,7 @@ import { IconButton } from '@luke-ui/react/icon-button'; export default () => { return ( - + diff --git a/apps/docs/src/examples/icon/colours.tsx b/apps/docs/src/examples/icon/colours.tsx index cb8e1602..69b0ce7d 100644 --- a/apps/docs/src/examples/icon/colours.tsx +++ b/apps/docs/src/examples/icon/colours.tsx @@ -5,7 +5,7 @@ import type { PropsWithChildren } from 'react'; export default () => { return ( - + @@ -36,7 +36,7 @@ export default () => { function FlexCol({ children }: PropsWithChildren) { return ( - + {children} ); diff --git a/apps/docs/src/examples/icon/decorative.tsx b/apps/docs/src/examples/icon/decorative.tsx index 2bb89450..343fa989 100644 --- a/apps/docs/src/examples/icon/decorative.tsx +++ b/apps/docs/src/examples/icon/decorative.tsx @@ -4,7 +4,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + Continue diff --git a/apps/docs/src/examples/icon/size-context.tsx b/apps/docs/src/examples/icon/size-context.tsx index fad60527..4dc06aa0 100644 --- a/apps/docs/src/examples/icon/size-context.tsx +++ b/apps/docs/src/examples/icon/size-context.tsx @@ -4,7 +4,7 @@ import { Icon, IconSizeProvider } from '@luke-ui/react/icon'; export default () => { return ( - + diff --git a/apps/docs/src/examples/icon/sizes.tsx b/apps/docs/src/examples/icon/sizes.tsx index 1a42e900..01ff8ec4 100644 --- a/apps/docs/src/examples/icon/sizes.tsx +++ b/apps/docs/src/examples/icon/sizes.tsx @@ -5,7 +5,7 @@ import type { PropsWithChildren } from 'react'; export default () => { return ( - + xsmall @@ -28,7 +28,7 @@ export default () => { function FlexCol({ children }: PropsWithChildren) { return ( - + {children} ); diff --git a/apps/docs/src/examples/link/standalone.tsx b/apps/docs/src/examples/link/standalone.tsx index 270e9067..d69dad17 100644 --- a/apps/docs/src/examples/link/standalone.tsx +++ b/apps/docs/src/examples/link/standalone.tsx @@ -4,7 +4,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + Read the release notes before updating your workspace. diff --git a/apps/docs/src/examples/link/tones.tsx b/apps/docs/src/examples/link/tones.tsx index 970804fb..85980dd3 100644 --- a/apps/docs/src/examples/link/tones.tsx +++ b/apps/docs/src/examples/link/tones.tsx @@ -3,7 +3,7 @@ import { Link } from '@luke-ui/react/link'; export default () => { return ( - + View report View report diff --git a/apps/docs/src/examples/loading-skeleton/basic.tsx b/apps/docs/src/examples/loading-skeleton/basic.tsx index 4ed847c6..e3eebc07 100644 --- a/apps/docs/src/examples/loading-skeleton/basic.tsx +++ b/apps/docs/src/examples/loading-skeleton/basic.tsx @@ -8,7 +8,7 @@ export default () => { const [isLoading, setIsLoading] = useState(true); return ( - + isLoading diff --git a/apps/docs/src/examples/loading-skeleton/border-radius.tsx b/apps/docs/src/examples/loading-skeleton/border-radius.tsx index 454dfc05..145214ae 100644 --- a/apps/docs/src/examples/loading-skeleton/border-radius.tsx +++ b/apps/docs/src/examples/loading-skeleton/border-radius.tsx @@ -8,7 +8,7 @@ export default () => { const [isLoading, setIsLoading] = useState(true); return ( - + diff --git a/apps/docs/src/examples/loading-skeleton/provider.tsx b/apps/docs/src/examples/loading-skeleton/provider.tsx index 9c4fcc80..b00e5ab4 100644 --- a/apps/docs/src/examples/loading-skeleton/provider.tsx +++ b/apps/docs/src/examples/loading-skeleton/provider.tsx @@ -8,10 +8,10 @@ export default () => { const [isLoading, setIsLoading] = useState(true); return ( - + - - + + No local prop @@ -19,7 +19,7 @@ export default () => { Account balance: $1,240.00 - + isLoading @@ -27,7 +27,7 @@ export default () => { Next payment: 21 August - + {'isLoading={false}'} diff --git a/apps/docs/src/examples/loading-spinner/children.tsx b/apps/docs/src/examples/loading-spinner/children.tsx index 9d2b1d1f..48a10c5d 100644 --- a/apps/docs/src/examples/loading-spinner/children.tsx +++ b/apps/docs/src/examples/loading-spinner/children.tsx @@ -8,7 +8,7 @@ export default () => { const [isLoading, setIsLoading] = useState(true); return ( - + diff --git a/apps/docs/src/examples/loading-spinner/colors.tsx b/apps/docs/src/examples/loading-spinner/colors.tsx index a29b2a06..a3f34962 100644 --- a/apps/docs/src/examples/loading-spinner/colors.tsx +++ b/apps/docs/src/examples/loading-spinner/colors.tsx @@ -3,7 +3,7 @@ import { LoadingSpinner } from '@luke-ui/react/loading-spinner'; export default () => { return ( - + diff --git a/apps/docs/src/examples/loading-spinner/sizes.tsx b/apps/docs/src/examples/loading-spinner/sizes.tsx index 26ec3c18..e9402430 100644 --- a/apps/docs/src/examples/loading-spinner/sizes.tsx +++ b/apps/docs/src/examples/loading-spinner/sizes.tsx @@ -3,7 +3,7 @@ import { LoadingSpinner } from '@luke-ui/react/loading-spinner'; export default () => { return ( - + diff --git a/apps/docs/src/examples/numeral/compact.tsx b/apps/docs/src/examples/numeral/compact.tsx index 48919afd..8431bd6b 100644 --- a/apps/docs/src/examples/numeral/compact.tsx +++ b/apps/docs/src/examples/numeral/compact.tsx @@ -4,7 +4,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + Short: diff --git a/apps/docs/src/examples/numeral/formats.tsx b/apps/docs/src/examples/numeral/formats.tsx index f47a88a7..08e0c2a7 100644 --- a/apps/docs/src/examples/numeral/formats.tsx +++ b/apps/docs/src/examples/numeral/formats.tsx @@ -4,7 +4,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + Conversion rate: diff --git a/apps/docs/src/examples/numeral/precision.tsx b/apps/docs/src/examples/numeral/precision.tsx index db8e92b5..cea1f25f 100644 --- a/apps/docs/src/examples/numeral/precision.tsx +++ b/apps/docs/src/examples/numeral/precision.tsx @@ -4,7 +4,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + Fixed: diff --git a/apps/docs/src/examples/overview/concentric-radius.tsx b/apps/docs/src/examples/overview/concentric-radius.tsx index eac878af..2022e00e 100644 --- a/apps/docs/src/examples/overview/concentric-radius.tsx +++ b/apps/docs/src/examples/overview/concentric-radius.tsx @@ -4,13 +4,13 @@ import { deriveConcentricRadius, vars } from '@luke-ui/react/theme'; import { DecorativeBox } from './decorative-box.js'; export default () => { - const controlGap = vars.space[200]; + const controlGap = vars.space.sp8; return ( - + { return ( {Object.entries(vars.depth).map(([name, depth]) => ( - + { return ( {radiusRoles.map((role) => ( - + { const [role, setRole] = useState('warning'); return ( - - + + {(Object.keys(roles) as Array).map((option) => ( diff --git a/apps/docs/src/examples/text/alignment.tsx b/apps/docs/src/examples/text/alignment.tsx index 9b3e10f2..f9b66741 100644 --- a/apps/docs/src/examples/text/alignment.tsx +++ b/apps/docs/src/examples/text/alignment.tsx @@ -8,7 +8,7 @@ const rowStyle = { export default () => { return ( - + Start aligned diff --git a/apps/docs/src/examples/text/numeric-glyphs.tsx b/apps/docs/src/examples/text/numeric-glyphs.tsx index b7a223fe..48434735 100644 --- a/apps/docs/src/examples/text/numeric-glyphs.tsx +++ b/apps/docs/src/examples/text/numeric-glyphs.tsx @@ -12,13 +12,13 @@ export default () => { return ( {variants.map((variant) => ( - + {variant.label} diff --git a/apps/docs/src/examples/text/transform.tsx b/apps/docs/src/examples/text/transform.tsx index 0ad061b9..362b9f04 100644 --- a/apps/docs/src/examples/text/transform.tsx +++ b/apps/docs/src/examples/text/transform.tsx @@ -3,7 +3,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + Project settings View all activity diff --git a/apps/docs/src/examples/text/trim.tsx b/apps/docs/src/examples/text/trim.tsx index 4601f072..69f636c4 100644 --- a/apps/docs/src/examples/text/trim.tsx +++ b/apps/docs/src/examples/text/trim.tsx @@ -13,11 +13,11 @@ export default () => { const [isTrimmed, setIsTrimmed] = useState(true); return ( - + Trim text - + Aa diff --git a/apps/docs/src/examples/text/truncation.tsx b/apps/docs/src/examples/text/truncation.tsx index 104a63ea..55274138 100644 --- a/apps/docs/src/examples/text/truncation.tsx +++ b/apps/docs/src/examples/text/truncation.tsx @@ -3,7 +3,7 @@ import { Text } from '@luke-ui/react/text'; export default () => { return ( - + The weekly product update includes changes to reports, permissions, and saved views. diff --git a/apps/docs/src/examples/text/typography.tsx b/apps/docs/src/examples/text/typography.tsx index c4f24ad3..ad09b12e 100644 --- a/apps/docs/src/examples/text/typography.tsx +++ b/apps/docs/src/examples/text/typography.tsx @@ -5,12 +5,12 @@ import { Fragment } from 'react'; export default () => { return ( - + {typeStyles.map((typography) => ( diff --git a/apps/docs/src/examples/theming/color-mode-override.tsx b/apps/docs/src/examples/theming/color-mode-override.tsx index 025f4b5e..5cd26c4a 100644 --- a/apps/docs/src/examples/theming/color-mode-override.tsx +++ b/apps/docs/src/examples/theming/color-mode-override.tsx @@ -11,18 +11,18 @@ export default () => { - + Parent colour mode - + {(['light', 'dark'] as const).map((option) => ( @@ -106,7 +106,7 @@ export default () => { {signedInAs && ( - + Signed in as {signedInAs} )} diff --git a/apps/docs/src/lib/story-wrapper.tsx b/apps/docs/src/lib/story-wrapper.tsx index 4dfe17e9..834d76c3 100644 --- a/apps/docs/src/lib/story-wrapper.tsx +++ b/apps/docs/src/lib/story-wrapper.tsx @@ -13,7 +13,7 @@ const modeToBoxProps = { display: 'flex', justifyContent: 'center', minBlockSize: '6rem', - padding: '800', + padding: 'sp32', style: { backgroundColor: vars.color.surface.canvas, color: vars.color.text.primary, diff --git a/docs/STYLING.md b/docs/STYLING.md index 6637440f..574662bd 100644 --- a/docs/STYLING.md +++ b/docs/STYLING.md @@ -52,12 +52,12 @@ with no class and no JS required. Neither step injects styles at runtime. `ModalOverlay`, `Modal`, and `Dialog` for the combobox tray. `use-is-mobile-device.ts` reads the device screen width, not the viewport width, to decide when a combobox switches to it. - `styles/`: layout utilities, most exported from `@luke-ui/react/styles`. -- `theme/contract.ts`: the semantic token tree, the mode-family declaration, `--luke-*` variable +- `theme/contract.ts`: the theme token tree, the mode-family declaration, `--luke-*` variable naming, and the source-owned `typeStyles` typography keys. - `theme/path-record.ts`: the typed `[path, value]` record constructor value producers use so `Object.fromEntries` cannot hide a missing contract path. -- `theme/contract.css.ts`: the typed `vars` contract, built by walking the semantic token tree - directly so it stays source-owned and free of styling-engine types. +- `theme/contract.css.ts`: the typed `vars` contract, built by walking the theme token tree directly + so it stays source-owned and free of styling-engine types. - `theme/define-theme.ts`: the public `defineTheme(input)` authoring util, its typed `ThemeInput`, and the one resolution of curated defaults (source colours, materials, radius, backdrop) into the internal foundation. @@ -340,8 +340,8 @@ import { createSprinkles } from '@luke-ui/react/styles'; const layout = createSprinkles({ display: 'flex', - gap: '400', - padding: '600', + gap: 'sp16', + padding: 'sp24', }); return ( @@ -351,8 +351,8 @@ return ( ); ``` -Spacing and gap properties use `0` or the semantic space steps `100`, `200`, `300`, `400`, `600`, -`800`, `1000`, `1200`, and `1600`. Margin also accepts `auto`. Enum-like properties use CSS-native +Spacing and gap properties use `0` or value-based keys such as `sp16` and `sp24`. Each key matches +its pixel value, so `sp16` is 16px. Margin also accepts `auto`. Enum-like properties use CSS-native values, for example `display: 'flex'`. Sizing, inset, flex-basis, order, and grid-placement values accept their CSS property values. @@ -365,7 +365,7 @@ only overrides need to be specified. const responsive = createSprinkles({ display: 'flex', flexDirection: { initial: 'column', bp768: 'row' }, - gap: { initial: '300', bp768: '600' }, + gap: { initial: 'sp12', bp768: 'sp24' }, }); ``` @@ -381,7 +381,7 @@ Aria Components' `render` prop. Use `mergeProps` from `@luke-ui/react/utils` so ```tsx import { mergeProps } from '@luke-ui/react/utils'; -const buttonBox = createSprinkles({ padding: '400' }); +const buttonBox = createSprinkles({ padding: 'sp16' });