shelving 1.237.0 → 1.239.0

package/ui/misc/Tag.module.css

@@ -1,4 +1,12 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Font.module.css";
+@import "../style/Radius.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";
 
 @layer components {
 	.tag {

package/ui/notice/Message.module.css

@@ -1,4 +1,6 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.message {

package/ui/notice/Notice.md

@@ -43,7 +43,7 @@ import { LOADING_NOTICE } from "shelving/ui";
 | `--notice-size` | Font size | `var(--size-normal)` |
 | `--notice-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads** — the tint ladder `--tint-50` / `--tint-80` / `--tint-90`, plus `--space-paragraph`, `--space-small`, `--radius-xsmall`, `--stroke-normal`, `--size-normal`, and `--weight-strong`.
+**Global tokens it reads** — the tint ladder [`--tint-50`](/ui/TINT_CLASS) / [`--tint-80`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS), plus [`--space-paragraph`](/ui/getSpaceClass), [`--space-small`](/ui/getSpaceClass), [`--radius-xsmall`](/ui/getRadiusClass), [`--stroke-normal`](/ui/getStrokeClass), [`--size-normal`](/ui/getSizeClass), and [`--weight-strong`](/ui/getWeightClass).
 
 ## See also
 

package/ui/notice/Notice.module.css

@@ -1,4 +1,10 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Radius.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";
 
 @layer components {
 	.notice {

package/ui/notice/Notices.module.css

@@ -1,4 +1,6 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
+@import "../style/Width.module.css";
 
 @layer components {
 	.notices {

package/ui/style/Color.module.css

@@ -1,6 +1,33 @@
-@import "base.css";
+@import "layers.css";
 @import "Tint.module.css";
 
+@layer defaults {
+	:root {
+		/* Basic colors */
+		--color-gray: oklch(60% 0.01 240); /* Subtle blue tint so neutrals don't feel "dead". */
+		--color-red: oklch(62% 0.2 30); /* Slightly desaturated from default — takes the edge off without losing red identity. */
+		--color-orange: oklch(74% 0.157 60);
+		--color-yellow: oklch(86% 0.16 92);
+		--color-green: oklch(72% 0.185 130);
+		--color-aqua: oklch(72% 0.121 185);
+		--color-blue: oklch(57% 0.216 260); /* OKLCH form of #156ef4 — warmer hue (260) than the previous 240. */
+		--color-purple: oklch(58% 0.25 300);
+		--color-pink: oklch(68% 0.239 350);
+
+		/* Semantic colors */
+		--color-link: var(--color-blue);
+		--color-focus: var(--color-blue);
+		--color-success: var(--color-green);
+		--color-warning: var(--color-orange);
+		--color-failure: var(--color-red);
+
+		/* Brand colors */
+		--color-primary: var(--color-blue); /* Primary brand color */
+		--color-secondary: var(--color-purple); /* Secondary brand color */
+		--color-tertiary: var(--color-pink); /* Tertiary brand color */
+	}
+}
+
 @layer variants {
 	/* Basic colors */
 	.gray {

package/ui/style/Duration.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Enumerated transition-duration names selectable via the `duration` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Duration/UIDuration
+ */
+export type UIDuration = "fast" | "normal" | "slow";
+/**
+ * Variant props for the transition duration of an element, e.g. `duration="fast"`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Duration/DurationVariants
+ */
+export interface DurationVariants {
+    /** Transition duration of the element. */
+    duration?: UIDuration | undefined;
+}
+/**
+ * Get the transition-duration class for a component from its `duration` variant prop.
+ *
+ * @param variants Variant props containing the optional `duration` name.
+ * @returns The duration class string, or `undefined` when no `duration` is set.
+ * @example getDurationClass({ duration: "fast" }) // "duration-fast"
+ * @see https://dhoulb.github.io/shelving/ui/style/Duration/getDurationClass
+ */
+export declare function getDurationClass({ duration }: DurationVariants): string | undefined;

package/ui/style/Duration.js

@@ -0,0 +1,13 @@
+import { getModuleClass } from "../util/css.js";
+import DURATION_CSS from "./Duration.module.css";
+/**
+ * Get the transition-duration class for a component from its `duration` variant prop.
+ *
+ * @param variants Variant props containing the optional `duration` name.
+ * @returns The duration class string, or `undefined` when no `duration` is set.
+ * @example getDurationClass({ duration: "fast" }) // "duration-fast"
+ * @see https://dhoulb.github.io/shelving/ui/style/Duration/getDurationClass
+ */
+export function getDurationClass({ duration }) {
+    return duration && getModuleClass(DURATION_CSS, `duration-${duration}`);
+}

package/ui/style/Duration.module.css

@@ -0,0 +1,23 @@
+@import "layers.css";
+
+@layer defaults {
+	:root {
+		/* Durations — transition/animation timings. */
+		--duration-fast: 150ms;
+		--duration-normal: 300ms;
+		--duration-slow: 600ms;
+	}
+}
+
+@layer variants {
+	/* Transition-duration variants. */
+	.duration-fast {
+		transition-duration: var(--duration-fast);
+	}
+	.duration-normal {
+		transition-duration: var(--duration-normal);
+	}
+	.duration-slow {
+		transition-duration: var(--duration-slow);
+	}
+}

package/ui/style/Duration.tsx

@@ -0,0 +1,31 @@
+import { getModuleClass } from "../util/css.js";
+import DURATION_CSS from "./Duration.module.css";
+
+/**
+ * Enumerated transition-duration names selectable via the `duration` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Duration/UIDuration
+ */
+export type UIDuration = "fast" | "normal" | "slow";
+
+/**
+ * Variant props for the transition duration of an element, e.g. `duration="fast"`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Duration/DurationVariants
+ */
+export interface DurationVariants {
+	/** Transition duration of the element. */
+	duration?: UIDuration | undefined;
+}
+
+/**
+ * Get the transition-duration class for a component from its `duration` variant prop.
+ *
+ * @param variants Variant props containing the optional `duration` name.
+ * @returns The duration class string, or `undefined` when no `duration` is set.
+ * @example getDurationClass({ duration: "fast" }) // "duration-fast"
+ * @see https://dhoulb.github.io/shelving/ui/style/Duration/getDurationClass
+ */
+export function getDurationClass({ duration }: DurationVariants): string | undefined {
+	return duration && getModuleClass(DURATION_CSS, `duration-${duration}`);
+}

package/ui/style/Flex.module.css

@@ -1,4 +1,6 @@
-@import "base.css";
+@import "layers.css";
+@import "Size.module.css";
+@import "Space.module.css";
 
 @layer defaults {
 	.flex {

package/ui/style/Font.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Enumerated font-family names selectable via the `font` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Font/UIFont
+ */
+export type UIFont = "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?: UIFont | undefined;
+}
+/**
+ * Get the font-family class for a component from its `font` variant prop.
+ *
+ * @param variants Variant props containing the optional `font` name.
+ * @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

@@ -0,0 +1,13 @@
+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 Variant props containing the optional `font` name.
+ * @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

@@ -0,0 +1,50 @@
+@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

@@ -0,0 +1,31 @@
+import { getModuleClass } from "../util/css.js";
+import FONT_CSS from "./Font.module.css";
+
+/**
+ * Enumerated font-family names selectable via the `font` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Font/UIFont
+ */
+export type UIFont = "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?: UIFont | undefined;
+}
+
+/**
+ * Get the font-family class for a component from its `font` variant prop.
+ *
+ * @param variants Variant props containing the optional `font` name.
+ * @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/Gap.module.css

@@ -1,4 +1,5 @@
-@import "base.css";
+@import "layers.css";
+@import "Space.module.css";
 
 @layer variants {
 	/* Gap variants — sets `gap` directly. Used by flex/grid layouts and by Lists/Definitions for the spacing between their items. */

package/ui/style/Padding.module.css

@@ -1,4 +1,5 @@
-@import "base.css";
+@import "layers.css";
+@import "Space.module.css";
 
 @layer variants {
 	/* Block-padding variants. */

package/ui/style/Radius.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Enumerated corner-radius scale selectable via the `radius` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Radius/UIRadius
+ */
+export type UIRadius = "none" | "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
+/**
+ * Variant props for the corner radius of an element, e.g. `radius="large"`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Radius/RadiusVariants
+ */
+export interface RadiusVariants {
+    /** Corner radius of the element. */
+    radius?: UIRadius | undefined;
+}
+/**
+ * Get the corner-radius class for a component from its `radius` variant prop.
+ *
+ * @param variants Variant props containing the optional `radius` scale.
+ * @returns The radius class string, or `undefined` when no `radius` is set.
+ * @example getRadiusClass({ radius: "large" }) // "radius-large"
+ * @see https://dhoulb.github.io/shelving/ui/style/Radius/getRadiusClass
+ */
+export declare function getRadiusClass({ radius }: RadiusVariants): string | undefined;

package/ui/style/Radius.js

@@ -0,0 +1,13 @@
+import { getModuleClass } from "../util/css.js";
+import RADIUS_CSS from "./Radius.module.css";
+/**
+ * Get the corner-radius class for a component from its `radius` variant prop.
+ *
+ * @param variants Variant props containing the optional `radius` scale.
+ * @returns The radius class string, or `undefined` when no `radius` is set.
+ * @example getRadiusClass({ radius: "large" }) // "radius-large"
+ * @see https://dhoulb.github.io/shelving/ui/style/Radius/getRadiusClass
+ */
+export function getRadiusClass({ radius }) {
+    return radius && getModuleClass(RADIUS_CSS, `radius-${radius}`);
+}

package/ui/style/Radius.module.css

@@ -0,0 +1,43 @@
+@import "layers.css";
+
+@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 */
+	}
+}
+
+@layer variants {
+	/* Corner-radius variants. */
+	.radius-none {
+		border-radius: 0;
+	}
+	.radius-xxsmall {
+		border-radius: var(--radius-xxsmall);
+	}
+	.radius-xsmall {
+		border-radius: var(--radius-xsmall);
+	}
+	.radius-small {
+		border-radius: var(--radius-small);
+	}
+	.radius-normal {
+		border-radius: var(--radius-normal);
+	}
+	.radius-large {
+		border-radius: var(--radius-large);
+	}
+	.radius-xlarge {
+		border-radius: var(--radius-xlarge);
+	}
+	.radius-xxlarge {
+		border-radius: var(--radius-xxlarge);
+	}
+}

package/ui/style/Radius.tsx

@@ -0,0 +1,31 @@
+import { getModuleClass } from "../util/css.js";
+import RADIUS_CSS from "./Radius.module.css";
+
+/**
+ * Enumerated corner-radius scale selectable via the `radius` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Radius/UIRadius
+ */
+export type UIRadius = "none" | "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
+
+/**
+ * Variant props for the corner radius of an element, e.g. `radius="large"`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Radius/RadiusVariants
+ */
+export interface RadiusVariants {
+	/** Corner radius of the element. */
+	radius?: UIRadius | undefined;
+}
+
+/**
+ * Get the corner-radius class for a component from its `radius` variant prop.
+ *
+ * @param variants Variant props containing the optional `radius` scale.
+ * @returns The radius class string, or `undefined` when no `radius` is set.
+ * @example getRadiusClass({ radius: "large" }) // "radius-large"
+ * @see https://dhoulb.github.io/shelving/ui/style/Radius/getRadiusClass
+ */
+export function getRadiusClass({ radius }: RadiusVariants): string | undefined {
+	return radius && getModuleClass(RADIUS_CSS, `radius-${radius}`);
+}

package/ui/style/Scroll.module.css

@@ -1,3 +1,7 @@
+@import "layers.css";
+@import "Color.module.css";
+@import "Stroke.module.css";
+
 @layer defaults {
 	.horizontal {
 		margin: 0;

package/ui/style/Shadow.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Enumerated drop-shadow scale selectable via the `shadow` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Shadow/UIShadow
+ */
+export type UIShadow = "none" | "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
+/**
+ * Variant props for the drop shadow of an element, e.g. `shadow="large"`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Shadow/ShadowVariants
+ */
+export interface ShadowVariants {
+    /** Drop shadow of the element. */
+    shadow?: UIShadow | undefined;
+}
+/**
+ * Get the drop-shadow class for a component from its `shadow` variant prop.
+ *
+ * @param variants Variant props containing the optional `shadow` scale.
+ * @returns The shadow class string, or `undefined` when no `shadow` is set.
+ * @example getShadowClass({ shadow: "large" }) // "shadow-large"
+ * @see https://dhoulb.github.io/shelving/ui/style/Shadow/getShadowClass
+ */
+export declare function getShadowClass({ shadow }: ShadowVariants): string | undefined;

package/ui/style/Shadow.js

@@ -0,0 +1,13 @@
+import { getModuleClass } from "../util/css.js";
+import SHADOW_CSS from "./Shadow.module.css";
+/**
+ * Get the drop-shadow class for a component from its `shadow` variant prop.
+ *
+ * @param variants Variant props containing the optional `shadow` scale.
+ * @returns The shadow class string, or `undefined` when no `shadow` is set.
+ * @example getShadowClass({ shadow: "large" }) // "shadow-large"
+ * @see https://dhoulb.github.io/shelving/ui/style/Shadow/getShadowClass
+ */
+export function getShadowClass({ shadow }) {
+    return shadow && getModuleClass(SHADOW_CSS, `shadow-${shadow}`);
+}

package/ui/style/Shadow.module.css

@@ -0,0 +1,42 @@
+@import "layers.css";
+
+@layer defaults {
+	:root {
+		/* Shadows — elevation drop-shadows. */
+		--shadow-xxsmall: 0 0.125rem 0.5rem -0.25rem #0006;
+		--shadow-xsmall: 0 0.25rem 1rem -0.5rem #0006;
+		--shadow-small: 0 0.375rem 1.5rem -0.75rem #0006;
+		--shadow-normal: 0 0.5rem 2rem -1rem #0006;
+		--shadow-large: 0 0.75rem 3rem -1.5rem #0006;
+		--shadow-xlarge: 0 1rem 4rem -2rem #0006;
+		--shadow-xxlarge: 0 1.5rem 6rem -3rem #0006;
+	}
+}
+
+@layer variants {
+	/* Drop-shadow variants. */
+	.shadow-none {
+		box-shadow: none;
+	}
+	.shadow-xxsmall {
+		box-shadow: var(--shadow-xxsmall);
+	}
+	.shadow-xsmall {
+		box-shadow: var(--shadow-xsmall);
+	}
+	.shadow-small {
+		box-shadow: var(--shadow-small);
+	}
+	.shadow-normal {
+		box-shadow: var(--shadow-normal);
+	}
+	.shadow-large {
+		box-shadow: var(--shadow-large);
+	}
+	.shadow-xlarge {
+		box-shadow: var(--shadow-xlarge);
+	}
+	.shadow-xxlarge {
+		box-shadow: var(--shadow-xxlarge);
+	}
+}

package/ui/style/Shadow.tsx

@@ -0,0 +1,31 @@
+import { getModuleClass } from "../util/css.js";
+import SHADOW_CSS from "./Shadow.module.css";
+
+/**
+ * Enumerated drop-shadow scale selectable via the `shadow` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Shadow/UIShadow
+ */
+export type UIShadow = "none" | "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
+
+/**
+ * Variant props for the drop shadow of an element, e.g. `shadow="large"`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Shadow/ShadowVariants
+ */
+export interface ShadowVariants {
+	/** Drop shadow of the element. */
+	shadow?: UIShadow | undefined;
+}
+
+/**
+ * Get the drop-shadow class for a component from its `shadow` variant prop.
+ *
+ * @param variants Variant props containing the optional `shadow` scale.
+ * @returns The shadow class string, or `undefined` when no `shadow` is set.
+ * @example getShadowClass({ shadow: "large" }) // "shadow-large"
+ * @see https://dhoulb.github.io/shelving/ui/style/Shadow/getShadowClass
+ */
+export function getShadowClass({ shadow }: ShadowVariants): string | undefined {
+	return shadow && getModuleClass(SHADOW_CSS, `shadow-${shadow}`);
+}

package/ui/style/Size.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Enumerated font-size scale selectable via the `size` variant prop.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/style/Size/UISize
+ */
+export type UISize = "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?: UISize | undefined;
+}
+/**
+ * Get the font-size class for a component from its `size` variant prop.
+ *
+ * @param variants Variant props containing the optional `size` scale.
+ * @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

@@ -0,0 +1,13 @@
+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 Variant props containing the optional `size` scale.
+ * @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);
+}