diff --git a/apps/docs/content/docs/index.mdx b/apps/docs/content/docs/index.mdx
index e77b3928..d0a73382 100644
--- a/apps/docs/content/docs/index.mdx
+++ b/apps/docs/content/docs/index.mdx
@@ -1,14 +1,15 @@
---
-title: Design System
+title: Luke UI
description: Components, themes, and layout utilities for React applications.
---
-Luke UI is a React component library for application interfaces. It includes static CSS, two bundled
-themes, and layout utilities that use the same semantic token contract as the components.
+Luke UI is a React based design system and component library for building applications. It includes
+static CSS, two bundled themes, and layout utilities that use the same semantic token contract as
+the components.
## Start building
-Install the package. Load the shared CSS and one theme. Then add the theme classes near the root of
+Install the package. Load the shared CSS and a theme. Then add the theme classes near the root of
your application. [Getting started](/overview/getting-started) has the complete setup.
@@ -22,14 +23,14 @@ your application. [Getting started](/overview/getting-started) has the complete
Use component APIs, recipes, layout utilities, and semantic variables in the right place.
- Build responsive structure with Box and Sprinkles.
+ Build responsive structure with Box.
## Theme your application
-Tactile and Paper each provide light and dark modes. The active theme supplies the colours, type,
-spacing, radii, and depth behind every component.
+Luke UI themes provide light and dark modes. The active theme supplies the colours, type, spacing,
+radii, and depth behind every component.
diff --git a/apps/docs/content/docs/overview/breakpoints.mdx b/apps/docs/content/docs/overview/breakpoints.mdx
index 3430ffdd..2e8230ec 100644
--- a/apps/docs/content/docs/overview/breakpoints.mdx
+++ b/apps/docs/content/docs/overview/breakpoints.mdx
@@ -21,8 +21,9 @@ Read [Layout](/overview/layout) for the full layout API.
Each breakpoint is a fixed constant, not a theme token. A custom theme cannot change these widths.
-Every breakpoint is a minimum width. There is no maximum-width or range condition. A value set at
-`medium` also applies at `large`, `xlarge`, and `xxlarge`, unless a later breakpoint overrides it.
+Every breakpoint is a minimum width. There is no maximum width or range condition. For example, a
+value set at the `small` breakpoint will also apply at the next medium (and above), unless a later
+breakpoint overrides it.
## Responsive values
diff --git a/apps/docs/content/docs/overview/color-mode.mdx b/apps/docs/content/docs/overview/color-mode.mdx
index c660d3ef..82624598 100644
--- a/apps/docs/content/docs/overview/color-mode.mdx
+++ b/apps/docs/content/docs/overview/color-mode.mdx
@@ -47,7 +47,7 @@ or hydration mismatch.
Application-owned portals sit outside their trigger's DOM ancestry. Apply the active identity class
and any explicit `data-color-mode` value to the portal root. Leave the attribute off when the source
-follows the system setting. Luke UI's Combobox does this for its own popover.
+follows the system setting.
## Continue learning
diff --git a/apps/docs/content/docs/overview/getting-started.mdx b/apps/docs/content/docs/overview/getting-started.mdx
index d9670cb5..0736f9c6 100644
--- a/apps/docs/content/docs/overview/getting-started.mdx
+++ b/apps/docs/content/docs/overview/getting-started.mdx
@@ -16,16 +16,6 @@ Install the package in your application.
pnpm add @luke-ui/react
```
-Within this monorepo, use a workspace dependency instead.
-
-```json
-{
- "dependencies": {
- "@luke-ui/react": "workspace:*"
- }
-}
-```
-
### 2. Import the CSS
Import the shared stylesheet and the stylesheet for one identity at your application root. This
@@ -62,7 +52,7 @@ must use a specific mode. Without it, Luke UI follows the system preference.
Learn how component APIs, recipes, utilities, and tokens fit together.
- Build responsive structure with Box and Sprinkles.
+ Build responsive structure with Box.
Understand identities, modes, and custom foundations.
diff --git a/apps/docs/content/docs/overview/iconography.mdx b/apps/docs/content/docs/overview/iconography.mdx
index 2ab96c58..8bac29c9 100644
--- a/apps/docs/content/docs/overview/iconography.mdx
+++ b/apps/docs/content/docs/overview/iconography.mdx
@@ -44,7 +44,7 @@ An icon that only decorates adjacent text has no contrast requirement.
## Accessibility
-Each icon is decorative or informative. Use the correct one.
+Each icon is decorative or informative.
The icon is decorative when the text next to it gives the meaning. Do not give it a title. The
component then hides the icon from assistive technology.
diff --git a/apps/docs/content/docs/overview/layout.mdx b/apps/docs/content/docs/overview/layout.mdx
index 538b9c9b..2d7218ac 100644
--- a/apps/docs/content/docs/overview/layout.mdx
+++ b/apps/docs/content/docs/overview/layout.mdx
@@ -3,13 +3,14 @@ title: Layout
description: Build responsive structure with Box and token-aware layout utilities.
---
-Use `Box` or `createSprinkles` for layout. They keep structure, spacing, sizing, positioning,
-overflow, flex, and grid-child rules separate from a component's content and behaviour.
-
## Box
-`Box` is a `div` with the supported layout properties. Use it to space child content. Constrain its
-size the same way. Place an item in a flex or grid layout, or hide content at a breakpoint.
+Box is the most fundamental layout component. Box is used to:
+
+- Provide spacing to child elements.
+- Impose sizing constraints on content.
+- Control layout behaviour within flex and grid containers.
+- Hide content based on screen size using its responsive display prop.
```tsx
import { Box } from '@luke-ui/react/box';
@@ -19,13 +20,13 @@ import { Box } from '@luke-ui/react/box';
;
```
-Use a normal `div` when no layout properties are needed. Box is a layout tool, not a replacement for
+Use semantic HTML when no layout properties are needed. Box is a layout tool, not a replacement for
every element.
## Responsive values
-Properties passed to `Box` or `createSprinkles` accept responsive values. Specify only the points
-where the layout changes.
+Properties passed to `Box` accept responsive values. Specify only the points where the layout
+changes.
diff --git a/apps/docs/src/examples/icon/basic.tsx b/apps/docs/src/examples/icon/basic.tsx
index e867d5dc..eda7b749 100644
--- a/apps/docs/src/examples/icon/basic.tsx
+++ b/apps/docs/src/examples/icon/basic.tsx
@@ -1,12 +1,5 @@
-import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
export default function Basic() {
- return (
-
-
-
-
-
- );
+ return ;
}
diff --git a/apps/docs/src/examples/icon/colours.tsx b/apps/docs/src/examples/icon/colours.tsx
index 4adc366e..ff334e91 100644
--- a/apps/docs/src/examples/icon/colours.tsx
+++ b/apps/docs/src/examples/icon/colours.tsx
@@ -1,34 +1,43 @@
import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
import { Text } from '@luke-ui/react/text';
+import type { PropsWithChildren } from 'react';
export default function Colours() {
return (
-
+
accent
-
-
+
+
success
-
-
+
+
warning
-
-
+
+
danger
-
+
+
+ );
+}
+
+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 004bff60..b38b4165 100644
--- a/apps/docs/src/examples/icon/decorative.tsx
+++ b/apps/docs/src/examples/icon/decorative.tsx
@@ -1,10 +1,12 @@
+import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
import { Text } from '@luke-ui/react/text';
export default function Decorative() {
return (
-
- Continue
-
+
+ Continue
+
+
);
}
diff --git a/apps/docs/src/examples/icon/sizes.tsx b/apps/docs/src/examples/icon/sizes.tsx
index bef3e34d..6e4f71c0 100644
--- a/apps/docs/src/examples/icon/sizes.tsx
+++ b/apps/docs/src/examples/icon/sizes.tsx
@@ -1,26 +1,35 @@
import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
import { Text } from '@luke-ui/react/text';
+import type { PropsWithChildren } from 'react';
export default function Sizes() {
return (
-
-
-
+
+
+
xsmall
-
-
-
+
+
+
small
-
-
-
+
+
+
medium
-
-
-
+
+
+
large
-
+
+
+ );
+}
+
+function FlexCol({ children }: PropsWithChildren) {
+ return (
+
+ {children}
);
}
diff --git a/apps/docs/src/lib/story-wrapper.tsx b/apps/docs/src/lib/story-wrapper.tsx
index 816539bf..4dfe17e9 100644
--- a/apps/docs/src/lib/story-wrapper.tsx
+++ b/apps/docs/src/lib/story-wrapper.tsx
@@ -4,6 +4,8 @@ import spriteSheetHref from '@luke-ui/react/spritesheet.svg?url&no-inline';
import { vars } from '@luke-ui/react/theme';
import type { ReactNode } from 'react';
+type Mode = 'inset' | 'full-bleed';
+
const modeToBoxProps = {
'full-bleed': {},
inset: {
@@ -17,17 +19,17 @@ const modeToBoxProps = {
color: vars.color.text.primary,
},
},
-} as const satisfies Record<'inset' | 'full-bleed', React.ComponentProps>;
+} as const satisfies Record>;
type StoryWrapperProps = {
children: ReactNode;
- mode?: 'inset' | 'full-bleed';
+ mode?: Mode;
};
export function StoryWrapper({ children, mode = 'inset' }: StoryWrapperProps) {
const boxProps = modeToBoxProps[mode];
return (
-
+
{children}
);
diff --git a/apps/docs/src/styles/app.css b/apps/docs/src/styles/app.css
index 185ea756..40c5f517 100644
--- a/apps/docs/src/styles/app.css
+++ b/apps/docs/src/styles/app.css
@@ -5,6 +5,10 @@
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
+code > * {
+ tab-size: 2;
+}
+
/**
* Bridge Fumadocs structural colour variables to Luke UI stable tokens.
* Scoped to the Luke UI theme root so Fumadocs chrome components resolve