shelving 1.253.2 → 1.253.3

package/ui/style/Radius.module.css

@@ -3,14 +3,13 @@
 @layer defaults {
 	:root {
 		/* Radii — corner rounding. */
-		--radius: 1rem;
-		--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: 1rem; /* 16px */
+		--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/Space.js

@@ -9,5 +9,5 @@ import SPACE_CSS from "./Space.module.css";
  * @see https://dhoulb.github.io/shelving/ui/style/Space/getSpaceClass
  */
 export function getSpaceClass({ space }) {
-    return space && getModuleClass(SPACE_CSS, space);
+    return space && getModuleClass(SPACE_CSS, `space-${space}`);
 }

package/ui/style/Space.module.css

@@ -3,14 +3,13 @@
 @layer defaults {
 	:root {
 		/* Spacings */
-		--space: 1rem;
-		--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: calc(var(--space-normal) * 0.25); /* 4px */
+		--space-xsmall: calc(var(--space-normal) * 0.5); /* 8px */
+		--space-small: calc(var(--space-normal) * 0.75); /* 12px */
+		--space-normal: 1rem; /* 16px */
+		--space-large: calc(var(--space-normal) * 1.5); /* 24px */
+		--space-xlarge: calc(var(--space-normal) * 2); /* 32px */
+		--space-xxlarge: calc(var(--space-normal) * 3); /* 48px */
 
 		/* Semantic spacings */
 		--space-section: 2rem; /* Default top margin for titles/headings/section blocks. */
@@ -20,60 +19,60 @@
 
 @layer variants {
 	/* Block-space variants — opt-in margin-block modifiers for any block-level component. */
-	.none {
+	.space-none {
 		margin-block: 0;
 	}
-	.xxsmall {
+	.space-xxsmall {
 		margin-block: var(--space-xxsmall);
 	}
-	.xsmall {
+	.space-xsmall {
 		margin-block: var(--space-xsmall);
 	}
-	.small {
+	.space-small {
 		margin-block: var(--space-small);
 	}
-	.normal {
+	.space-normal {
 		margin-block: var(--space-normal);
 	}
-	.large {
+	.space-large {
 		margin-block: var(--space-large);
 	}
-	.xlarge {
+	.space-xlarge {
 		margin-block: var(--space-xlarge);
 	}
-	.xxlarge {
+	.space-xxlarge {
 		margin-block: var(--space-xxlarge);
 	}
 
 	/* Numeric block-space multiples of `--space-normal` (`1x` … `10x`). */
-	.\31 x {
+	.space-1x {
 		margin-block: calc(var(--space-normal) * 1);
 	}
-	.\32 x {
+	.space-2x {
 		margin-block: calc(var(--space-normal) * 2);
 	}
-	.\33 x {
+	.space-3x {
 		margin-block: calc(var(--space-normal) * 3);
 	}
-	.\34 x {
+	.space-4x {
 		margin-block: calc(var(--space-normal) * 4);
 	}
-	.\35 x {
+	.space-5x {
 		margin-block: calc(var(--space-normal) * 5);
 	}
-	.\36 x {
+	.space-6x {
 		margin-block: calc(var(--space-normal) * 6);
 	}
-	.\37 x {
+	.space-7x {
 		margin-block: calc(var(--space-normal) * 7);
 	}
-	.\38 x {
+	.space-8x {
 		margin-block: calc(var(--space-normal) * 8);
 	}
-	.\39 x {
+	.space-9x {
 		margin-block: calc(var(--space-normal) * 9);
 	}
-	.\31 0x {
+	.space-10x {
 		margin-block: calc(var(--space-normal) * 10);
 	}
 }

package/ui/style/Space.tsx

@@ -45,5 +45,5 @@ export interface SpaceVariants {
  * @see https://dhoulb.github.io/shelving/ui/style/Space/getSpaceClass
  */
 export function getSpaceClass({ space }: SpaceVariants): string | undefined {
-	return space && getModuleClass(SPACE_CSS, space);
+	return space && getModuleClass(SPACE_CSS, `space-${space}`);
 }

package/ui/style/Tint.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Shades of the currently selected tint color, from `"00"` (black) through `"50"` (the hue itself) to `"100"` (white).
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Tint/TintVariant
+ */
+export type TintVariant = "00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "100";
 /**
  * CSS class that (re)calculates the full ladder of tint shades from the current global tint colour.
  *

package/ui/style/Tint.module.css

@@ -34,12 +34,6 @@
 		--tint-100: white;
 	}
 
-	body {
-		/* Apply default colours to body. */
-		color: var(--tint-00);
-		background: var(--tint-100);
-	}
-
 	.tint {
 		/* Neutralise bright colors in tinted areas. */
 		--color-link: inherit;

package/ui/style/Tint.tsx

@@ -1,6 +1,34 @@
 import { getModuleClass } from "../util/css.js";
 import THEME_CSS from "./Tint.module.css";
 
+/**
+ * Shades of the currently selected tint color, from `"00"` (black) through `"50"` (the hue itself) to `"100"` (white).
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Tint/TintVariant
+ */
+export type TintVariant =
+	| "00"
+	| "05"
+	| "10"
+	| "15"
+	| "20"
+	| "25"
+	| "30"
+	| "35"
+	| "40"
+	| "45"
+	| "50"
+	| "55"
+	| "60"
+	| "65"
+	| "70"
+	| "75"
+	| "80"
+	| "85"
+	| "90"
+	| "95"
+	| "100";
+
 /**
  * CSS class that (re)calculates the full ladder of tint shades from the current global tint colour.
  *

package/ui/style/Typography.d.ts

@@ -1,57 +1,62 @@
-import { type FontVariants } from "./Font.js";
-import { type SizeVariants } from "./Size.js";
-import { type WeightVariants } from "./Weight.js";
+import type { TintVariant } from "./Tint.js";
 /**
- * Shades of the currently selected tint color, from `"00"` (black) through `"50"` (the hue itself) to `"100"` (white).
- * - Can be applied as the text `color:` for components that support `TypographyVariants`
+ * Allowed values for font size for components that support `TypographyVariants`
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Typography/TintVariant
+ * @see https://dhoulb.github.io/shelving/ui/style/Typography/SizeVariant
  */
-export type TintVariant = "00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "100";
+export type SizeVariant = "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
 /**
- * Text-alignment variant props — opt-in modifiers any prose component can mix in via `getTypographyClass()`.
+ * Allowed values for font weight for components that support `TypographyVariants`
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Typography/AlignVariants
+ * @see https://dhoulb.github.io/shelving/ui/style/Typography/WeightVariant
  */
-export type AlignVariants = {
-    /** Align text to the start of the line (LTR: left). */
-    left?: boolean | undefined;
-    /** Centre text horizontally. */
-    center?: boolean | undefined;
-    /** Align text to the end of the line (LTR: right). */
-    right?: boolean | undefined;
-};
+export type WeightVariant = "title" | "body" | "label" | "code" | "normal" | "strong";
 /**
- * Whitespace wrap variant props — opt-in modifiers any prose component can mix in via `getTypographyClass()`.
+ * Allowed values for text case for components that support `TypographyVariants`
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Typography/WrapVariants
+ * @see https://dhoulb.github.io/shelving/ui/style/Typography/CaseVariant
  */
-export type WrapVariants = {
-    /** Enable wrapping. */
-    wrap?: boolean | undefined;
-    /** Disable wrapping. */
-    nowrap?: boolean | undefined;
-};
+export type CaseVariant = "title" | "body" | "label" | "code" | "upper" | "lower" | "normal";
 /**
- * Typographic variant props — font-family, weight, alignment, size, and tint.
+ * Allowed values for font family for components that support `TypographyVariants`
  *
- * Combines the focused {@link SizeVariants}, {@link WeightVariants}, and {@link FontVariants} interfaces (each backed
- * by its own CSS module) with text alignment and tint colour.
+ * @see https://dhoulb.github.io/shelving/ui/style/Typography/FontVariant
+ */
+export type FontVariant = "title" | "body" | "label" | "code" | "serif" | "sans" | "monospace";
+/**
+ * Typographic variant props — font-family, weight, case, size, tint, alignment, and wrap, applied via `getTypographyClass()`
  *
  * @see https://dhoulb.github.io/shelving/ui/style/Typography/TypographyVariants
  */
-export interface TypographyVariants extends AlignVariants, SizeVariants, WeightVariants, FontVariants, WrapVariants {
+export interface TypographyVariants {
+    /** Font size of the element. */
+    size?: SizeVariant | undefined;
     /** Set CSS text `color:` to one of the shades of the current tint ladder. */
     tint?: TintVariant | undefined;
+    /** Font family of the element. */
+    font?: FontVariant | undefined;
+    /** Text case of the element. */
+    case?: CaseVariant | undefined;
+    /** Font weight of the element. */
+    weight?: WeightVariant | undefined;
+    /** Align text to the start of the line (LTR: left). */
+    left?: boolean | undefined;
+    /** Centre text horizontally. */
+    center?: boolean | undefined;
+    /** Align text to the end of the line (LTR: right). */
+    right?: boolean | undefined;
+    /** Enable wrapping. */
+    wrap?: boolean | undefined;
+    /** Disable wrapping. */
+    nowrap?: boolean | undefined;
 }
 /**
  * Get the typography class for a component from its typographic variant props.
  *
- * Composes the focused size, weight, and font helpers with text alignment and tint colour.
+ * Maps the size, weight, font, case, tint, alignment, and wrap variant props to their CSS classes.
  *
- * @param variants
  * @returns The combined typography class string, or `undefined` when no variants apply.
  * @example getTypographyClass({ font: "title", size: "large", center: true })
  * @see https://dhoulb.github.io/shelving/ui/style/Typography/getTypographyClass
  */
-export declare function getTypographyClass({ tint, ...props }: TypographyVariants): string | undefined;
+export declare function getTypographyClass({ tint, weight, font, case: caseValue, size, ...props }: TypographyVariants): string | undefined;

package/ui/style/Typography.js

@@ -1,18 +1,14 @@
-import { getClass, getModuleClass } from "../util/css.js";
-import { getFontClass } from "./Font.js";
-import { getSizeClass } from "./Size.js";
+import { getModuleClass } from "../util/css.js";
 import TYPOGRAPHY_CSS from "./Typography.module.css";
-import { getWeightClass } from "./Weight.js";
 /**
  * Get the typography class for a component from its typographic variant props.
  *
- * Composes the focused size, weight, and font helpers with text alignment and tint colour.
+ * Maps the size, weight, font, case, tint, alignment, and wrap variant props to their CSS classes.
  *
- * @param variants
  * @returns The combined typography class string, or `undefined` when no variants apply.
  * @example getTypographyClass({ font: "title", size: "large", center: true })
  * @see https://dhoulb.github.io/shelving/ui/style/Typography/getTypographyClass
  */
-export function getTypographyClass({ tint, ...props }) {
-    return getClass(getSizeClass(props), getWeightClass(props), getFontClass(props), getModuleClass(TYPOGRAPHY_CSS, tint && `tint-${tint}`, props));
+export function getTypographyClass({ tint, weight, font, case: caseValue, size, ...props }) {
+    return getModuleClass(TYPOGRAPHY_CSS, caseValue && `case-${caseValue}`, tint && `tint-${tint}`, weight && `weight-${weight}`, font && `font-${font}`, size && `size-${size}`, props);
 }

package/ui/style/Typography.module.css

@@ -1,7 +1,170 @@
 @import "layers.css";
 @import "Tint.module.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);
+
+		/* 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;
+
+		/* Sizings */
+		--size-scale: 1.25;
+		--size-xxsmall: calc(var(--size-normal) * pow(var(--size-scale), -3));
+		--size-xsmall: calc(var(--size-normal) * pow(var(--size-scale), -2));
+		--size-small: calc(var(--size-normal) * pow(var(--size-scale), -1));
+		--size-normal: 1rem;
+		--size-large: calc(var(--size-normal) * pow(var(--size-scale), 1));
+		--size-xlarge: calc(var(--size-normal) * pow(var(--size-scale), 2));
+		--size-xxlarge: calc(var(--size-normal) * pow(var(--size-scale), 3));
+		--size-xxxlarge: calc(var(--size-normal) * 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;
+
+		/* Semantic cases */
+		--case-title: none;
+		--case-body: none;
+		--case-label: uppercase;
+		--case-code: none;
+	}
+
+	body {
+		font-family: var(--font-body);
+		font-weight: var(--weight-body);
+		font-size: var(--size-normal);
+		line-height: var(--leading);
+		text-align: start;
+		text-transform: var(--case-body);
+		color: var(--tint-00);
+		background-color: var(--tint-100);
+	}
+}
+
 @layer variants {
+	/* Font-size variants. */
+	.size-xxsmall {
+		font-size: var(--size-xxsmall);
+		line-height: var(--leading);
+	}
+	.size-xsmall {
+		font-size: var(--size-xsmall);
+		line-height: var(--leading);
+	}
+	.size-small {
+		font-size: var(--size-small);
+		line-height: var(--leading);
+	}
+	.size-normal {
+		font-size: var(--size-normal);
+		line-height: var(--leading);
+	}
+	.size-large {
+		font-size: var(--size-large);
+		line-height: var(--leading);
+	}
+	.size-xlarge {
+		font-size: var(--size-xlarge);
+		line-height: var(--leading);
+	}
+	.size-xxlarge {
+		font-size: var(--size-xxlarge);
+		line-height: var(--leading);
+	}
+
+	/* Font-family variants. */
+	.font-title {
+		font-family: var(--font-title);
+	}
+	.font-body {
+		font-family: var(--font-body);
+	}
+	.font-code {
+		font-family: var(--font-code);
+	}
+	.font-label {
+		font-family: var(--font-label);
+	}
+	.font-sans {
+		font-family: var(--font-sans);
+	}
+	.font-serif {
+		font-family: var(--font-serif);
+	}
+	.font-monospace {
+		font-family: var(--font-monospace);
+	}
+
+	/* 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);
+	}
+
+	/* Font-case variants. */
+	.case-title {
+		text-transform: var(--case-title);
+	}
+	.case-body {
+		text-transform: var(--case-body);
+	}
+	.case-code {
+		text-transform: var(--case-code);
+	}
+	.case-label {
+		text-transform: var(--case-label);
+	}
+	.case-upper {
+		text-transform: uppercase;
+	}
+	.case-lower {
+		text-transform: lowercase;
+	}
+	.case-normal {
+		text-transform: none;
+	}
+
 	/* Text tint variants — set CSS `color:` to a shade of the current tint ladder. */
 	.tint-00 {
 		color: var(--tint-00);

package/ui/style/Typography.tsx

@@ -1,92 +1,80 @@
-import { getClass, getModuleClass } from "../util/css.js";
-import { type FontVariants, getFontClass } from "./Font.js";
-import { getSizeClass, type SizeVariants } from "./Size.js";
+import { getModuleClass } from "../util/css.js";
+import type { TintVariant } from "./Tint.js";
 import TYPOGRAPHY_CSS from "./Typography.module.css";
-import { getWeightClass, type WeightVariants } from "./Weight.js";
 
 /**
- * Shades of the currently selected tint color, from `"00"` (black) through `"50"` (the hue itself) to `"100"` (white).
- * - Can be applied as the text `color:` for components that support `TypographyVariants`
+ * Allowed values for font size for components that support `TypographyVariants`
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Typography/TintVariant
+ * @see https://dhoulb.github.io/shelving/ui/style/Typography/SizeVariant
  */
-export type TintVariant =
-	| "00"
-	| "05"
-	| "10"
-	| "15"
-	| "20"
-	| "25"
-	| "30"
-	| "35"
-	| "40"
-	| "45"
-	| "50"
-	| "55"
-	| "60"
-	| "65"
-	| "70"
-	| "75"
-	| "80"
-	| "85"
-	| "90"
-	| "95"
-	| "100";
+export type SizeVariant = "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
 
 /**
- * Text-alignment variant props — opt-in modifiers any prose component can mix in via `getTypographyClass()`.
+ * Allowed values for font weight for components that support `TypographyVariants`
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Typography/AlignVariants
+ * @see https://dhoulb.github.io/shelving/ui/style/Typography/WeightVariant
  */
-export type AlignVariants = {
-	/** Align text to the start of the line (LTR: left). */
-	left?: boolean | undefined;
-	/** Centre text horizontally. */
-	center?: boolean | undefined;
-	/** Align text to the end of the line (LTR: right). */
-	right?: boolean | undefined;
-};
+export type WeightVariant = "title" | "body" | "label" | "code" | "normal" | "strong";
 
 /**
- * Whitespace wrap variant props — opt-in modifiers any prose component can mix in via `getTypographyClass()`.
+ * Allowed values for text case for components that support `TypographyVariants`
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Typography/WrapVariants
+ * @see https://dhoulb.github.io/shelving/ui/style/Typography/CaseVariant
  */
-export type WrapVariants = {
-	/** Enable wrapping. */
-	wrap?: boolean | undefined;
-	/** Disable wrapping. */
-	nowrap?: boolean | undefined;
-};
+export type CaseVariant = "title" | "body" | "label" | "code" | "upper" | "lower" | "normal";
 
 /**
- * Typographic variant props — font-family, weight, alignment, size, and tint.
+ * Allowed values for font family for components that support `TypographyVariants`
  *
- * Combines the focused {@link SizeVariants}, {@link WeightVariants}, and {@link FontVariants} interfaces (each backed
- * by its own CSS module) with text alignment and tint colour.
+ * @see https://dhoulb.github.io/shelving/ui/style/Typography/FontVariant
+ */
+export type FontVariant = "title" | "body" | "label" | "code" | "serif" | "sans" | "monospace";
+
+/**
+ * Typographic variant props — font-family, weight, case, size, tint, alignment, and wrap, applied via `getTypographyClass()`
  *
  * @see https://dhoulb.github.io/shelving/ui/style/Typography/TypographyVariants
  */
-export interface TypographyVariants extends AlignVariants, SizeVariants, WeightVariants, FontVariants, WrapVariants {
+export interface TypographyVariants {
+	/** Font size of the element. */
+	size?: SizeVariant | undefined;
 	/** Set CSS text `color:` to one of the shades of the current tint ladder. */
 	tint?: TintVariant | undefined;
+	/** Font family of the element. */
+	font?: FontVariant | undefined;
+	/** Text case of the element. */
+	case?: CaseVariant | undefined;
+	/** Font weight of the element. */
+	weight?: WeightVariant | undefined;
+	/** Align text to the start of the line (LTR: left). */
+	left?: boolean | undefined;
+	/** Centre text horizontally. */
+	center?: boolean | undefined;
+	/** Align text to the end of the line (LTR: right). */
+	right?: boolean | undefined;
+	/** Enable wrapping. */
+	wrap?: boolean | undefined;
+	/** Disable wrapping. */
+	nowrap?: boolean | undefined;
 }
 
 /**
  * Get the typography class for a component from its typographic variant props.
  *
- * Composes the focused size, weight, and font helpers with text alignment and tint colour.
+ * Maps the size, weight, font, case, tint, alignment, and wrap variant props to their CSS classes.
  *
- * @param variants
  * @returns The combined typography class string, or `undefined` when no variants apply.
  * @example getTypographyClass({ font: "title", size: "large", center: true })
  * @see https://dhoulb.github.io/shelving/ui/style/Typography/getTypographyClass
  */
-export function getTypographyClass({ tint, ...props }: TypographyVariants): string | undefined {
-	return getClass(
-		getSizeClass(props),
-		getWeightClass(props),
-		getFontClass(props),
-		getModuleClass(TYPOGRAPHY_CSS, tint && `tint-${tint}`, props),
+export function getTypographyClass({ tint, weight, font, case: caseValue, size, ...props }: TypographyVariants): string | undefined {
+	return getModuleClass(
+		TYPOGRAPHY_CSS,
+		caseValue && `case-${caseValue}`,
+		tint && `tint-${tint}`,
+		weight && `weight-${weight}`,
+		font && `font-${font}`,
+		size && `size-${size}`,
+		props,
 	);
 }

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 |