shelving 1.253.2 → 1.253.4

package/ui/style/getRadiusClass.md

@@ -4,15 +4,14 @@ This module's main job is to **define and document the corner-radius design toke
 
 ## Theme variables
 
-The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app. Every step derives from `--radius`, so changing that one value reflows the whole ramp.
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app. Every step derives from `--radius-normal`, so changing that one value reflows the whole ramp.
 
 | Variable | Default | Notes |
 |---|---|---|
-| `--radius` | `1rem` | Base radius — the root of the scale. |
-| `--radius-xxsmall` | `calc(var(--radius) * 0.25)` | 4px |
-| `--radius-xsmall` | `calc(var(--radius) * 0.5)` | 8px |
-| `--radius-small` | `calc(var(--radius) * 0.75)` | 12px |
-| `--radius-normal` | `calc(var(--radius) * 1)` | 16px |
-| `--radius-large` | `calc(var(--radius) * 1.5)` | 24px |
-| `--radius-xlarge` | `calc(var(--radius) * 2)` | 32px |
-| `--radius-xxlarge` | `calc(var(--radius) * 3)` | 48px |
+| `--radius-xxsmall` | `calc(var(--radius-normal) * 0.25)` | 4px |
+| `--radius-xsmall` | `calc(var(--radius-normal) * 0.5)` | 8px |
+| `--radius-small` | `calc(var(--radius-normal) * 0.75)` | 12px |
+| `--radius-normal` | `var(--radius-normal)` | 16px — Base radius (the root of the scale) |
+| `--radius-large` | `calc(var(--radius-normal) * 1.5)` | 24px |
+| `--radius-xlarge` | `calc(var(--radius-normal) * 2)` | 32px |
+| `--radius-xxlarge` | `calc(var(--radius-normal) * 3)` | 48px |

package/ui/style/getSpaceClass.md

@@ -2,7 +2,7 @@
 
 The `space` variant prop sets a block-level element's `margin-block` (top + bottom) from the spacing scale — `<Section space="large">`, `<Paragraph space="none">`. It's an **override** for one-off spacing; for an app-wide change, retune the spacing variables below in a theme file.
 
-`getSpaceClass({ space })` maps the prop to a margin class (e.g. `space="large"` → `large`). The same scale also backs `getPaddingClass()` and `getGapClass()`, so all three move together when you change `--space`.
+`getSpaceClass({ space })` maps the prop to a margin class (e.g. `space="large"` → `large`). The same scale also backs `getPaddingClass()` and `getGapClass()`, so all three move together when you change `--space-normal`.
 
 Alongside the named scale, `space` and `padding` also accept numeric multiples of `--space-normal` — `1x` … `10x` (e.g. `padding="5x"` → `calc(var(--space-normal) * 5)`) — for larger one-off blocks like hero panels.
 
@@ -14,18 +14,17 @@ The following `:root` variables are defined by this module and can be overridden
 
 | Variable | Default | Notes |
 |---|---|---|
-| `--space` | `1rem` | Base spacing unit — the root of the scale. |
-| `--space-xxsmall` | `calc(var(--space) * 0.25)` | 4px |
-| `--space-xsmall` | `calc(var(--space) * 0.5)` | 8px |
-| `--space-small` | `calc(var(--space) * 0.75)` | 12px |
-| `--space-normal` | `calc(var(--space) * 1)` | 16px |
-| `--space-large` | `calc(var(--space) * 1.5)` | 24px |
-| `--space-xlarge` | `calc(var(--space) * 2)` | 32px |
-| `--space-xxlarge` | `calc(var(--space) * 3)` | 48px |
+| `--space-xxsmall` | `var(--space-normal) * 0.25` | 4px |
+| `--space-xsmall` | `var(--space-normal) * 0.5` | 8px |
+| `--space-small` | `var(--space-normal) * 0.75` | 12px |
+| `--space-normal` | 1rem | 16px - base spacing unit (the root of the scale). |
+| `--space-large` | `var(--space-normal) * 1.5` | 24px |
+| `--space-xlarge` | `var(--space-normal) * 2` | 32px |
+| `--space-xxlarge` | `var(--space-normal) * 3` | 48px |
 
 ### Semantic
 
 | Variable | Default | Used for |
 |---|---|---|
-| `--space-section` | `2rem` | Top margin for titles / headings / section blocks. |
+| `--space-section` | `var(--space-normal) * 2` | Top margin for titles / headings / section blocks. |
 | `--space-paragraph` | `var(--space-normal)` | Default block-space for most prose elements. |

package/ui/style/getTypographyClass.md

@@ -0,0 +1,64 @@
+# getTypographyClass
+
+The typography variant props set an element's text styling from a single helper — `<Heading font="title" size="large">`, `<Paragraph weight="strong" center>`, `<Small case="upper">`. They're **overrides** for one-off changes; for an app-wide change, retune the variables below in a theme file.
+
+`getTypographyClass({ size, weight, font, case, tint, left, center, right, wrap, nowrap })` maps each prop to a class (e.g. `size="large"` → `size-large`, `font="title"` → `font-title`, `weight="strong"` → `weight-strong`, `case="upper"` → `case-upper`), and combines them with text alignment, tint colour, and wrapping. It supersedes the former `getFontClass()`, `getSizeClass()`, and `getWeightClass()` helpers, which were merged into this module.
+
+The semantic faces, weights, sizes, and cases are aliases of the base values, so a theme usually only needs to move the small set of base variables.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
+
+### Faces
+
+| Variable | Default | Notes |
+|---|---|---|
+| `--font-sans` | `system-ui` | Default UI face. |
+| `--font-monospace` | `ui-monospace, "SF Mono", "Consolas", "Menlo", monospace` | Code face. |
+| `--font-serif` | `"Palatino", "Garamond", serif` | Serif face. |
+| `--font-title` | `var(--font-sans)` | Headings and titles. |
+| `--font-body` | `var(--font-sans)` | Body baseline. |
+| `--font-label` | `var(--font-sans)` | Labels. |
+| `--font-code` | `var(--font-monospace)` | Code and preformatted text. |
+
+### Weights
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--weight-normal` | `400` | Body text. |
+| `--weight-strong` | `700` | Bold / emphasis. |
+| `--weight-title` | `var(--weight-strong)` | Headings and titles. |
+| `--weight-body` | `var(--weight-normal)` | Body baseline. |
+| `--weight-label` | `var(--weight-strong)` | Labels (`<Label>`, table/definition headers). |
+| `--weight-code` | `500` | Monospace / code. |
+
+### Sizes
+
+| Variable | Default | Notes |
+|---|---|---|
+| `--size-scale` | `1.25` | Ratio between steps. |
+| `--size-normal` | `1rem` | Base size — the root of the modular scale. |
+| `--size-xxsmall` … `--size-xxxlarge` | `calc(var(--size-normal) * pow(var(--size-scale), n))` | Each step is the base scaled by a power of the ratio. |
+| `--size-icon` | `var(--size-large)` | Icon box size. |
+| `--size-label` | `var(--size-small)` | Label text size. |
+| `--size-smaller` | `0.875em` | Relative (em) shrink — e.g. inline `<Small>`. |
+| `--size-larger` | `1.5em` | Relative grow. |
+| `--size-xlarger` | `2.5em` | Relative grow. |
+| `--size-xxlarger` | `5em` | Relative grow. |
+
+### Line height
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--leading` | `clamp(1.05em, calc(1em + 0.5rem), 1.5em)` | Default line height; paired with every font-size variant and the body baseline. |
+| `--leading-normal` | `1.5` | Plain unitless line height for dense blocks. |
+
+### Case
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--case-title` | `none` | `text-transform` for titles and headings. |
+| `--case-body` | `none` | `text-transform` for body text and the body baseline. |
+| `--case-label` | `uppercase` | `text-transform` for labels and tags. |
+| `--case-code` | `none` | `text-transform` for code and preformatted text. |

package/ui/style/index.d.ts

@@ -1,17 +1,14 @@
 export * from "./Color.js";
 export * from "./Duration.js";
 export * from "./Flex.js";
-export * from "./Font.js";
 export * from "./Gap.js";
 export * from "./Padding.js";
 export * from "./Radius.js";
 export * from "./Scroll.js";
 export * from "./Shadow.js";
-export * from "./Size.js";
 export * from "./Space.js";
 export * from "./Status.js";
 export * from "./Stroke.js";
 export * from "./Tint.js";
 export * from "./Typography.js";
-export * from "./Weight.js";
 export * from "./Width.js";

package/ui/style/index.js

@@ -1,17 +1,14 @@
 export * from "./Color.js";
 export * from "./Duration.js";
 export * from "./Flex.js";
-export * from "./Font.js";
 export * from "./Gap.js";
 export * from "./Padding.js";
 export * from "./Radius.js";
 export * from "./Scroll.js";
 export * from "./Shadow.js";
-export * from "./Size.js";
 export * from "./Space.js";
 export * from "./Status.js";
 export * from "./Stroke.js";
 export * from "./Tint.js";
 export * from "./Typography.js";
-export * from "./Weight.js";
 export * from "./Width.js";

package/ui/style/index.tsx

@@ -1,17 +1,14 @@
 export * from "./Color.js";
 export * from "./Duration.js";
 export * from "./Flex.js";
-export * from "./Font.js";
 export * from "./Gap.js";
 export * from "./Padding.js";
 export * from "./Radius.js";
 export * from "./Scroll.js";
 export * from "./Shadow.js";
-export * from "./Size.js";
 export * from "./Space.js";
 export * from "./Status.js";
 export * from "./Stroke.js";
 export * from "./Tint.js";
 export * from "./Typography.js";
-export * from "./Weight.js";
 export * from "./Width.js";

package/ui/style/layers.css

@@ -8,8 +8,8 @@
  *   • `defaults`   — `:root` design tokens (spread across the themed token modules), the tint ladder, and the
  *                    body baseline. Low-priority opt-in defaults.
  *   • `components` — component-defining CSS. The bulk of the codebase.
- *   • `variants`   — cross-cutting opt-in modifiers (Color, Status, Space, Padding, Gap, Width, Size, Weight,
- *                    Font, Flex, Scroll). Always beat components.
+ *   • `variants`   — cross-cutting opt-in modifiers (Color, Status, Space, Padding, Gap, Width, Typography,
+ *                    Flex, Scroll). Always beat components.
  *   • `overrides`  — top-priority structural overrides like `:first-child` / `:last-child` margin collapses,
  *                    which must beat variant-set margins.
  *

package/ui/table/Table.module.css

@@ -1,10 +1,8 @@
 @import "../style/layers.css";
-@import "../style/Font.module.css";
-@import "../style/Size.module.css";
 @import "../style/Space.module.css";
 @import "../style/Stroke.module.css";
 @import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.table,

package/ui/style/Font.d.ts

@@ -1,24 +0,0 @@
-/**
- * Allowed values for font family for components that support `FontVariants`
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Font/FontValue
- */
-export type FontValue = "title" | "body" | "label" | "code" | "serif" | "sans" | "monospace";
-/**
- * Variant props for the font family of an element, e.g. `font="title"`.
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Font/FontVariants
- */
-export interface FontVariants {
-    /** Font family of the element. */
-    font?: FontValue | undefined;
-}
-/**
- * Get the font-family class for a component from its `font` variant prop.
- *
- * @param variants
- * @returns The font class string, or `undefined` when no `font` is set.
- * @example getFontClass({ font: "title" }) // "title"
- * @see https://dhoulb.github.io/shelving/ui/style/Font/getFontClass
- */
-export declare function getFontClass({ font }: FontVariants): string | undefined;

package/ui/style/Font.js

@@ -1,13 +0,0 @@
-import { getModuleClass } from "../util/css.js";
-import FONT_CSS from "./Font.module.css";
-/**
- * Get the font-family class for a component from its `font` variant prop.
- *
- * @param variants
- * @returns The font class string, or `undefined` when no `font` is set.
- * @example getFontClass({ font: "title" }) // "title"
- * @see https://dhoulb.github.io/shelving/ui/style/Font/getFontClass
- */
-export function getFontClass({ font }) {
-    return font && getModuleClass(FONT_CSS, font);
-}

package/ui/style/Font.module.css

@@ -1,50 +0,0 @@
-@import "layers.css";
-
-@layer defaults {
-	:root {
-		/* Font faces */
-		--font-sans: system-ui;
-		--font-monospace: ui-monospace, "SF Mono", "Consolas", "Menlo", monospace;
-		--font-serif: "Palatino", "Garamond", serif;
-
-		/* Semantic font faces */
-		--font-title: var(--font-sans);
-		--font-body: var(--font-sans);
-		--font-label: var(--font-sans);
-		--font-code: var(--font-monospace);
-
-		/* Semantic cases */
-		--case-label: uppercase;
-	}
-
-	/* Baseline body font so a page with no `<Layout>` still reads correctly. */
-	body {
-		font-family: var(--font-body);
-		text-align: start;
-	}
-}
-
-@layer variants {
-	/* Font-family variants. */
-	.title {
-		font-family: var(--font-title);
-	}
-	.body {
-		font-family: var(--font-body);
-	}
-	.code {
-		font-family: var(--font-code);
-	}
-	.label {
-		font-family: var(--font-label);
-	}
-	.sans {
-		font-family: var(--font-sans);
-	}
-	.serif {
-		font-family: var(--font-serif);
-	}
-	.monospace {
-		font-family: var(--font-monospace);
-	}
-}

package/ui/style/Font.tsx

@@ -1,31 +0,0 @@
-import { getModuleClass } from "../util/css.js";
-import FONT_CSS from "./Font.module.css";
-
-/**
- * Allowed values for font family for components that support `FontVariants`
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Font/FontValue
- */
-export type FontValue = "title" | "body" | "label" | "code" | "serif" | "sans" | "monospace";
-
-/**
- * Variant props for the font family of an element, e.g. `font="title"`.
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Font/FontVariants
- */
-export interface FontVariants {
-	/** Font family of the element. */
-	font?: FontValue | undefined;
-}
-
-/**
- * Get the font-family class for a component from its `font` variant prop.
- *
- * @param variants
- * @returns The font class string, or `undefined` when no `font` is set.
- * @example getFontClass({ font: "title" }) // "title"
- * @see https://dhoulb.github.io/shelving/ui/style/Font/getFontClass
- */
-export function getFontClass({ font }: FontVariants): string | undefined {
-	return font && getModuleClass(FONT_CSS, font);
-}

package/ui/style/Size.d.ts

@@ -1,24 +0,0 @@
-/**
- * Allowed values for font size for components that support `SizeVariants`
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Size/SizeVariant
- */
-export type SizeVariant = "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
-/**
- * Variant props for the font size of an element, e.g. `size="large"`.
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Size/SizeVariants
- */
-export interface SizeVariants {
-    /** Font size of the element. */
-    size?: SizeVariant | undefined;
-}
-/**
- * Get the font-size class for a component from its `size` variant prop.
- *
- * @param variants
- * @returns The size class string, or `undefined` when no `size` is set.
- * @example getSizeClass({ size: "large" }) // "large"
- * @see https://dhoulb.github.io/shelving/ui/style/Size/getSizeClass
- */
-export declare function getSizeClass({ size }: SizeVariants): string | undefined;

package/ui/style/Size.js

@@ -1,13 +0,0 @@
-import { getModuleClass } from "../util/css.js";
-import SIZE_CSS from "./Size.module.css";
-/**
- * Get the font-size class for a component from its `size` variant prop.
- *
- * @param variants
- * @returns The size class string, or `undefined` when no `size` is set.
- * @example getSizeClass({ size: "large" }) // "large"
- * @see https://dhoulb.github.io/shelving/ui/style/Size/getSizeClass
- */
-export function getSizeClass({ size }) {
-    return size && getModuleClass(SIZE_CSS, size);
-}

package/ui/style/Size.module.css

@@ -1,69 +0,0 @@
-@import "layers.css";
-
-@layer defaults {
-	:root {
-		/* Sizings */
-		--size: 1rem;
-		--size-scale: 1.25;
-		--size-xxsmall: calc(var(--size) * pow(var(--size-scale), -3));
-		--size-xsmall: calc(var(--size) * pow(var(--size-scale), -2));
-		--size-small: calc(var(--size) * pow(var(--size-scale), -1));
-		--size-normal: calc(var(--size) * pow(var(--size-scale), 0));
-		--size-large: calc(var(--size) * pow(var(--size-scale), 1));
-		--size-xlarge: calc(var(--size) * pow(var(--size-scale), 2));
-		--size-xxlarge: calc(var(--size) * pow(var(--size-scale), 3));
-		--size-xxxlarge: calc(var(--size) * pow(var(--size-scale), 4));
-
-		/* Semantic sizes */
-		--size-icon: var(--size-large);
-		--size-label: var(--size-small);
-
-		/* Relative sizes */
-		--size-smaller: 0.875em;
-		--size-larger: 1.5em;
-		--size-xlarger: 2.5em;
-		--size-xxlarger: 5em;
-
-		/* Line heights */
-		--leading: clamp(1.05em, calc(1em + 0.5rem), 1.5em);
-		--leading-normal: 1.5;
-	}
-
-	/* Baseline body size so a page with no `<Layout>` still reads correctly. */
-	body {
-		font-size: var(--size-normal);
-		line-height: var(--leading);
-	}
-}
-
-@layer variants {
-	/* Font-size variants. */
-	.xxsmall {
-		font-size: var(--size-xxsmall);
-		line-height: var(--leading);
-	}
-	.xsmall {
-		font-size: var(--size-xsmall);
-		line-height: var(--leading);
-	}
-	.small {
-		font-size: var(--size-small);
-		line-height: var(--leading);
-	}
-	.normal {
-		font-size: var(--size-normal);
-		line-height: var(--leading);
-	}
-	.large {
-		font-size: var(--size-large);
-		line-height: var(--leading);
-	}
-	.xlarge {
-		font-size: var(--size-xlarge);
-		line-height: var(--leading);
-	}
-	.xxlarge {
-		font-size: var(--size-xxlarge);
-		line-height: var(--leading);
-	}
-}

package/ui/style/Size.tsx

@@ -1,31 +0,0 @@
-import { getModuleClass } from "../util/css.js";
-import SIZE_CSS from "./Size.module.css";
-
-/**
- * Allowed values for font size for components that support `SizeVariants`
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Size/SizeVariant
- */
-export type SizeVariant = "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
-
-/**
- * Variant props for the font size of an element, e.g. `size="large"`.
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Size/SizeVariants
- */
-export interface SizeVariants {
-	/** Font size of the element. */
-	size?: SizeVariant | undefined;
-}
-
-/**
- * Get the font-size class for a component from its `size` variant prop.
- *
- * @param variants
- * @returns The size class string, or `undefined` when no `size` is set.
- * @example getSizeClass({ size: "large" }) // "large"
- * @see https://dhoulb.github.io/shelving/ui/style/Size/getSizeClass
- */
-export function getSizeClass({ size }: SizeVariants): string | undefined {
-	return size && getModuleClass(SIZE_CSS, size);
-}

package/ui/style/Weight.d.ts

@@ -1,24 +0,0 @@
-/**
- * Allowed values for font weight for components that support `WeightVariants`
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Weight/WeightVariant
- */
-export type WeightVariant = "title" | "body" | "label" | "code" | "normal" | "strong";
-/**
- * Variant props for the font weight of an element, e.g. `weight="strong"`.
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Weight/WeightVariants
- */
-export interface WeightVariants {
-    /** Font weight of the element. */
-    weight?: WeightVariant | undefined;
-}
-/**
- * Get the font weight class for a component from its `weight` variant prop.
- *
- * @param variants
- * @returns The weight class string, or `undefined` when no `weight` is set.
- * @example getWeightClass({ weight: "strong" }) // "weight-strong"
- * @see https://dhoulb.github.io/shelving/ui/style/Weight/getWeightClass
- */
-export declare function getWeightClass({ weight }: WeightVariants): string | undefined;

package/ui/style/Weight.js

@@ -1,13 +0,0 @@
-import { getModuleClass } from "../util/css.js";
-import WEIGHT_CSS from "./Weight.module.css";
-/**
- * Get the font weight class for a component from its `weight` variant prop.
- *
- * @param variants
- * @returns The weight class string, or `undefined` when no `weight` is set.
- * @example getWeightClass({ weight: "strong" }) // "weight-strong"
- * @see https://dhoulb.github.io/shelving/ui/style/Weight/getWeightClass
- */
-export function getWeightClass({ weight }) {
-    return weight && getModuleClass(WEIGHT_CSS, `weight-${weight}`);
-}

package/ui/style/Weight.module.css

@@ -1,42 +0,0 @@
-@import "layers.css";
-
-@layer defaults {
-	:root {
-		/* Font weights */
-		--weight-normal: 400;
-		--weight-strong: 700;
-
-		/* Semantic font weights */
-		--weight-title: var(--weight-strong);
-		--weight-body: var(--weight-normal);
-		--weight-label: var(--weight-strong);
-		--weight-code: 500;
-	}
-
-	/* Baseline body weight so a page with no `<Layout>` still reads correctly. */
-	body {
-		font-weight: var(--weight-body);
-	}
-}
-
-@layer variants {
-	/* Font-weight variants. */
-	.weight-title {
-		font-weight: var(--weight-title);
-	}
-	.weight-body {
-		font-weight: var(--weight-body);
-	}
-	.weight-code {
-		font-weight: var(--weight-code);
-	}
-	.weight-label {
-		font-weight: var(--weight-label);
-	}
-	.weight-normal {
-		font-weight: var(--weight-normal);
-	}
-	.weight-strong {
-		font-weight: var(--weight-strong);
-	}
-}

package/ui/style/Weight.tsx

@@ -1,31 +0,0 @@
-import { getModuleClass } from "../util/css.js";
-import WEIGHT_CSS from "./Weight.module.css";
-
-/**
- * Allowed values for font weight for components that support `WeightVariants`
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Weight/WeightVariant
- */
-export type WeightVariant = "title" | "body" | "label" | "code" | "normal" | "strong";
-
-/**
- * Variant props for the font weight of an element, e.g. `weight="strong"`.
- *
- * @see https://dhoulb.github.io/shelving/ui/style/Weight/WeightVariants
- */
-export interface WeightVariants {
-	/** Font weight of the element. */
-	weight?: WeightVariant | undefined;
-}
-
-/**
- * Get the font weight class for a component from its `weight` variant prop.
- *
- * @param variants
- * @returns The weight class string, or `undefined` when no `weight` is set.
- * @example getWeightClass({ weight: "strong" }) // "weight-strong"
- * @see https://dhoulb.github.io/shelving/ui/style/Weight/getWeightClass
- */
-export function getWeightClass({ weight }: WeightVariants): string | undefined {
-	return weight && getModuleClass(WEIGHT_CSS, `weight-${weight}`);
-}

package/ui/style/getFontClass.md

@@ -1,32 +0,0 @@
-# getFontClass
-
-The `font` variant prop sets an element's font family — `<Code font="monospace">`, `<Heading font="title">`. It's an **override** for one-off typeface changes; for an app-wide change, point the font variables below at your own faces in a theme file.
-
-`getFontClass({ font })` maps the prop to a font-family class (e.g. `font="title"` → `title`). The semantic faces (`--font-title`, `--font-body`, …) are aliases of the three base faces, so a theme typically only redefines `--font-sans` / `--font-serif` / `--font-monospace`.
-
-## Theme variables
-
-The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
-
-### Faces
-
-| Variable | Default | Notes |
-|---|---|---|
-| `--font-sans` | `system-ui` | Default UI face. |
-| `--font-monospace` | `ui-monospace, "SF Mono", "Consolas", "Menlo", monospace` | Code face. |
-| `--font-serif` | `"Palatino", "Garamond", serif` | Serif face. |
-
-### Semantic
-
-| Variable | Default | Used for |
-|---|---|---|
-| `--font-title` | `var(--font-sans)` | Headings and titles. |
-| `--font-body` | `var(--font-sans)` | Body baseline. |
-| `--font-label` | `var(--font-sans)` | Labels. |
-| `--font-code` | `var(--font-monospace)` | Code and preformatted text. |
-
-### Case
-
-| Variable | Default | Used for |
-|---|---|---|
-| `--case-label` | `uppercase` | `text-transform` for labels and tags. |

package/ui/style/getSizeClass.md

@@ -1,35 +0,0 @@
-# getSizeClass
-
-The `size` variant prop sets an element's font size from the modular scale — `<Heading size="large">`, `<Small size="xsmall">`. It's an **override** for one-off sizing; for an app-wide change, retune the scale variables below in a theme file.
-
-`getSizeClass({ size })` maps the prop to a font-size class (e.g. `size="large"` → `large`). All steps derive from `--size` and `--size-scale`, so changing those two reflows the whole ramp.
-
-## Theme variables
-
-The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
-
-### Scale
-
-| Variable | Default | Notes |
-|---|---|---|
-| `--size` | `1rem` | Base size — the root of the modular scale. |
-| `--size-scale` | `1.25` | Ratio between steps. |
-| `--size-xxsmall` … `--size-xxxlarge` | `calc(var(--size) * pow(var(--size-scale), n))` | Each step is the base scaled by a power of the ratio (`--size-normal` = `var(--size)`). |
-
-### Semantic & relative
-
-| Variable | Default | Used for |
-|---|---|---|
-| `--size-icon` | `var(--size-large)` | Icon box size. |
-| `--size-label` | `var(--size-small)` | Label text size. |
-| `--size-smaller` | `0.875em` | Relative (em) shrink — e.g. inline `<Small>`. |
-| `--size-larger` | `1.5em` | Relative grow. |
-| `--size-xlarger` | `2.5em` | Relative grow. |
-| `--size-xxlarger` | `5em` | Relative grow. |
-
-### Line height
-
-| Variable | Default | Used for |
-|---|---|---|
-| `--leading` | `clamp(1.05em, calc(1em + 0.5rem), 1.5em)` | Default line height; paired with every font-size variant and the body baseline. |
-| `--leading-normal` | `1.5` | Plain unitless line height for dense blocks. |