@ahrowe/ui 0.42.0 → 0.43.0

package/dist/types/common/fab/components/fabBase/fabBase.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { ButtonStyleType } from '../../../button/button.types.js';
+import { ButtonProps, ButtonStyleType } from '../../../button/button.types.js';
 export type FabBaseSize = 'default' | 'mini';
 export interface FabBaseProps {
     children?: ReactNode;
@@ -8,5 +8,6 @@ export interface FabBaseProps {
     /** Forwarded from Fab's `button` slot. */
     style?: CSSProperties;
     styleType?: ButtonStyleType;
+    color?: ButtonProps['color'];
     onClick?: () => void;
 }

package/dist/types/common/progressBar/progressBar.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
 import { ProgressBarProps } from './progressBar.types.js';
-export declare function getContrastColor(hexColor: string): string;
 declare function ProgressBar({ className, total, progress, style, classNames, styles: slotStyles, ...rest }: ProgressBarProps): ReactElement;
 export default ProgressBar;

package/dist/types/common/progressBar/progressBar.types.d.ts

@@ -1,8 +1,10 @@
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 export interface Progress {
     amount: number;
     label?: string;
-    color?: string;
+    /** A `ThemeColor` or any CSS colour; its label is black or white, whichever reads. Default `--primary-color`. */
+    color?: ColorValue;
     class?: string;
 }
 export type ProgressBarSlots = 'root' | 'fill' | 'label';

package/dist/types/common/splitButton/splitButton.types.d.ts

@@ -1,7 +1,7 @@
 import { PopoverAlign } from '../popover/popover.types.js';
 import { CSSProperties, ReactNode } from 'react';
 import { IconContent } from '../types/icon.types.js';
-import { ButtonStyleType, ButtonSize } from '../button/button.types.js';
+import { ButtonProps, ButtonStyleType, ButtonSize } from '../button/button.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
 export interface SplitButtonAction {
     id: string;
@@ -20,7 +20,10 @@ export interface SplitButtonProps extends HtmlProps {
     children?: ReactNode;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
     actions: SplitButtonAction[];
+    /** Default `Filled`. */
     styleType?: ButtonStyleType;
+    /** A `ThemeColor` or any CSS colour, shared by both buttons (default `Primary`). */
+    color?: ButtonProps['color'];
     size?: ButtonSize;
     disabled?: boolean;
     isLoading?: boolean;

package/dist/types/common/styles/tone.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { ColorValue } from '../themeProvider/color.types.js';
+/** The class, and for a colour of the caller's own the inline style, that set the --tone properties. */
+export declare function toneProps(color: ColorValue): {
+    className: string;
+    style?: CSSProperties;
+};
+/** A colour as a CSS value, for a component that paints it itself rather than through --tone. */
+export declare function cssColor(color: ColorValue): string;
+/** Warns in development about a value that can never be a colour. A var() passes: it only resolves on screen. */
+export declare function useToneCheck(component: string, colors: (ColorValue | undefined)[]): void;

package/dist/types/common/themeProvider/color.types.d.ts

@@ -0,0 +1,20 @@
+/** The theme's named colours, shared by every component that takes a `color`. */
+export declare enum ThemeColor {
+    /** `--primary-color`. */
+    Primary = "primary",
+    /** The surrounding text colour, with `--border-color` for an outline. */
+    Neutral = "neutral",
+    /** `--success-color`. */
+    Success = "success",
+    /** `--info-color`. */
+    Info = "info",
+    /** `--warn-color`. */
+    Warn = "warn",
+    /** `--error-color`. */
+    Error = "error"
+}
+/**
+ * A `ThemeColor`, or any CSS colour such as `'var(--brand)'` or `'#7c3aed'`.
+ * `string & {}` rather than `string`, which would swallow the enum into one plain string type.
+ */
+export type ColorValue = ThemeColor | (string & {});

package/dist/types/common/themeProvider/index.d.ts

@@ -1,4 +1,6 @@
 export { default } from './themeProvider.js';
 export { defaultTheme } from './defaultTheme.js';
 export { lightTheme } from './lightTheme.js';
+export { ThemeColor } from './color.types.js';
+export type { ColorValue } from './color.types.js';
 export type { Theme, ThemeProviderProps, ThemeVariables } from './theme.types.js';

package/dist/types/common/themeProvider/theme.types.d.ts

@@ -106,15 +106,10 @@ export interface ThemeVariables {
      * the device's own safe-area inset where that is larger. Modal sets --modal-padding on its own
      * panel, so this does not reach a Modal sheet. */
     '--sheet-safe-padding'?: string;
-    /** Default-style button background. Falls back to transparent when unset. */
-    '--button-default-background'?: string;
-    /** Default-style button text colour. Falls back to --text-color when unset. */
-    '--button-default-color'?: string;
-    /** Default-style button border (full `border` shorthand, e.g. `1px solid var(--border-color)`). Falls back to a transparent 1px border when unset. */
-    '--button-default-border'?: string;
     '--card-shadow'?: string;
     '--background-card-elevated'?: string;
     '--background-card-outlined'?: string;
+    /** Surface of a Neutral Light card, named after the old Filled style. Unset, it is the text-colour tint every Light uses; defaultTheme sets --background-accent. */
     '--background-card-filled'?: string;
     /** Slider track (unfilled) colour. Falls back to --background-accent-light. */
     '--slider-track-color'?: string;
@@ -214,6 +209,8 @@ export interface ThemeVariables {
     '--calendar-now-color'?: string;
     /** Corner radius of an event. Falls back to 6px. */
     '--calendar-event-radius'?: string;
+    /** The hours outside `workingHours` in the week and day views. Falls back to --background-accent. */
+    '--calendar-off-hours-color'?: string;
     /** Page button size. Falls back to 36px. */
     '--pagination-size'?: string;
     /** Gap between page buttons. Falls back to 4px. */

package/dist/types/common/timeline/timeline.types.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { IconContent } from '../types/icon.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 /** Layout of entries relative to the connecting line. */
 export declare enum TimelineAlignment {
     /** Line and markers on the left, content to the right (the default). */
@@ -10,14 +11,6 @@ export declare enum TimelineAlignment {
     /** Line down the center, entries alternating left/right. */
     Alternate = "alternate"
 }
-/** Semantic colour for an entry's marker, matching the theme's status colours. */
-export declare enum TimelineItemStatus {
-    Default = "default",
-    Primary = "primary",
-    Success = "success",
-    Warn = "warn",
-    Error = "error"
-}
 export type TimelineSlots = 'root' | 'item' | 'marker' | 'dot' | 'connector' | 'content' | 'title' | 'description' | 'timestamp';
 export interface TimelineItem {
     /** Stable identity for the entry, used as its React key. Falls back to its array index when omitted; pass one whenever `items` can be reordered or have entries prepended (e.g. a live "newest first" audit log), so React doesn't misattribute row state across the shift. */
@@ -30,8 +23,8 @@ export interface TimelineItem {
     timestamp?: React.ReactNode;
     /** Icon shown in the marker instead of a plain dot — a FontAwesome icon or any node. */
     icon?: IconContent;
-    /** Semantic marker colour (default `Default`). */
-    status?: TimelineItemStatus;
+    /** The marker's colour: a `ThemeColor` or any CSS colour. Unset, it is `--timeline-dot-color`. */
+    color?: ColorValue;
     /** Extra content rendered under the description, e.g. a diff, an attachment, an actor avatar. */
     content?: React.ReactNode;
     /** Makes the whole entry clickable (e.g. to open the full record), rendering it as an accessible button. */

package/dist/types/common/toast/index.d.ts

@@ -1,2 +1,2 @@
 export { showToast } from './toastService.js';
-export type { ToastContextConfig, ToastLabels, ToastOptions, ToastType, ToastPosition, ToastSlots, } from './toast.types.js';
+export type { ToastContextConfig, ToastLabels, ToastOptions, ToastPosition, ToastSlots } from './toast.types.js';

package/dist/types/common/toast/toast.types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { SlotClassNames, SlotStyles } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export type ToastType = 'default' | 'info' | 'success' | 'error' | 'warn';
 export type ToastSlots = 'root' | 'icon' | 'content' | 'closeButton' | 'progressBar';
 /** Text Toast renders of its own, for translating it. */
 export interface ToastLabels {
@@ -25,7 +25,11 @@ export interface ToastContextConfig {
     labels?: ToastLabels;
 }
 export interface ToastOptions extends Omit<ToastContextConfig, 'allowStacking'> {
-    type?: ToastType;
+    /**
+     * A `ThemeColor` (default `Primary`) or any CSS colour. A ThemeColor also picks the icon; any
+     * other colour shows a bell.
+     */
+    color?: ColorValue;
     classNames?: SlotClassNames<ToastSlots>;
     styles?: SlotStyles<ToastSlots>;
 }
@@ -44,7 +48,7 @@ export interface ResolvedToastOptions {
     showRemainingTime: boolean;
     showCloseButton: boolean;
     pauseOnHover: boolean;
-    type: ToastType;
+    color: ColorValue;
     classNames?: SlotClassNames<ToastSlots>;
     styles?: SlotStyles<ToastSlots>;
 }

package/dist/types/common/types/actions.types.d.ts

@@ -2,6 +2,6 @@ import { IconContent } from './icon.types.js';
 /** A single icon-triggered action, rendered as an `ActionIcon` */
 export interface IconAction {
     title?: string;
-    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     icon: IconContent;
 }

package/dist/types/common/utils/dismissClick.d.ts

@@ -0,0 +1,4 @@
+/** Records that the release just dispatched closed an overlay, which marks the click it raises. */
+export declare function markDismiss(): void;
+/** Whether the click `event` ends a press that closed an overlay. */
+export declare function isDismissClick(event: Event): boolean;

package/dist/types/common/utils/isDev.d.ts

@@ -0,0 +1 @@
+export declare function isDev(): boolean;

package/docs/Accordion.md

@@ -4,25 +4,60 @@
 
 **Keywords:** collapse, dropdown panel
 
-**Import:** `import { Accordion } from '@ahrowe/ui'`
+**Import:** `import { Accordion, AccordionStyleType, ThemeColor } from '@ahrowe/ui'`
 
-**Style variants:** `AccordionStyleType.Default` | `AccordionStyleType.Primary` | `AccordionStyleType.Plain`
+**Styles:** the library's own, meaning what they mean on Button, Badge and Chip, applied to the
+header; `color` is the colour they use (a `ThemeColor`, default `Neutral`, or any CSS colour, see
+[ThemeColor.md](ThemeColor.md)). The body is ordinary text on the page in every style. There is no
+`Filled`: an accordion structures content, and a solid header would compete with the page's main
+action.
+
+- `AccordionStyleType.Outlined` (default): a border in the colour, the header's text in the colour
+- `AccordionStyleType.Light`: the header in a light tint of the colour, its text in the colour
+- `AccordionStyleType.Plain`: the header's text in the colour, no chrome and no padding, for a disclosure inside other content
+
+Each accordion is one section; render several directly next to each other for a list, without a
+wrapper around each one, and the arrow keys move between their headers. **Neighbours** keep a
+small gap by default. With `joined` they make one block instead: one line between each, in the
+border colour for Outlined and in the page colour for Light, open or closed. Two neighbours join
+only when both are joined.
 
 ```tsx
-import { Accordion, AccordionStyleType } from '@ahrowe/ui';
+import { Accordion, AccordionStyleType, ThemeColor } from '@ahrowe/ui';
 
 // Uncontrolled — manages its own open state
 <Accordion title="Section title">
   <p>Content goes here</p>
 </Accordion>
 
+// A list of separate sections
+{faqs.map((faq) => (
+  <Accordion key={faq.id} title={faq.question}>
+    {faq.answer}
+  </Accordion>
+))}
+
+// The same list as one bordered control
+{faqs.map((faq) => (
+  <Accordion key={faq.id} title={faq.question} joined>
+    {faq.answer}
+  </Accordion>
+))}
+
+// Headers tinted in the primary colour
+{steps.map((step) => (
+  <Accordion key={step.id} title={step.title} styleType={AccordionStyleType.Light} color={ThemeColor.Primary}>
+    {step.body}
+  </Accordion>
+))}
+
 // Controlled
 <Accordion
   id="section-1"
   title="Controlled section"
   expanded={isOpen}
   onHeaderClicked={(id, isExpanded) => setIsOpen(isExpanded)}
-  styleType={AccordionStyleType.Primary}
+  styleType={AccordionStyleType.Light}
 >
   Content
 </Accordion>
@@ -36,7 +71,9 @@ import { Accordion, AccordionStyleType } from '@ahrowe/ui';
 | `expanded` | `boolean \| null` | Controlled open state |
 | `startOpen` | `boolean` | Uncontrolled initial state |
 | `onHeaderClicked` | `(id, isExpanded) => void` | Toggle callback |
-| `styleType` | `AccordionStyleType` | Visual variant |
+| `styleType` | `AccordionStyleType` | `Outlined` (default), `Light` or `Plain` |
+| `color` | `ColorValue` | A `ThemeColor` (default `Neutral`) or any CSS colour |
+| `joined` | `boolean` | Joins the section to joined neighbours into one block. Default `false`: a small gap |
 | `hideHeader` | `boolean` | Hide the clickable header |
 | `id` | `string` | Passed back in `onHeaderClicked` |
 
@@ -49,8 +86,40 @@ a `role="region"` labelled by the header, so a screen reader can move between th
 An activation key pressed inside the body does not reach the header, so a Space typed into a
 field in an open section types a space instead of collapsing the section.
 
+**Arrow keys**, the optional keys of the
+[WAI-ARIA accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/): Down and Up
+move the focus to the next and previous header and wrap at the ends, Home and End to the first and
+last. They move among the accordions rendered beside each other under one parent, so a list nested
+inside a section's body is a set of its own, and a key pressed inside a body stays there.
+
+The pattern also wraps each header in a `role="heading"` with an `aria-level` that fits the page;
+this header is not, because only the page knows that level.
+
 **Slots:** `root` `header` `title` `icon` `body` `bodyInner`
 
 ## Sizing
 
 The header's font, padding and chevron follow `--default-font-size`, as does the body's padding. There is no fixed height: the header is that padding plus one line of text, so a larger base font simply makes it taller.
+
+**Theming:** every colour comes from `color`, through the variables listed in
+[ThemeColor.md](ThemeColor.md); in `Neutral` that is the surrounding text colour and a
+`--border-color` outline. The header tints on hover in its own text colour and shows a
+`--focus-border-color` ring inside its edge on keyboard focus.
+
+## Migration from `Default`, `Primary` and `Plain`
+
+Before 0.43 the styles were `Default` (bordered sections that moved apart when one opened),
+`Primary` (borderless until open, then framed in `--primary-color`) and `Plain`. The styles are
+now the library's shared ones, and `Default` and `Primary` are gone, so TypeScript points at each
+use:
+
+| Before | After |
+|--------|-------|
+| `styleType={AccordionStyleType.Default}` | `joined`: `Outlined` is the default style, and `joined` keeps neighbours in one box |
+| `styleType={AccordionStyleType.Primary}` | `color={ThemeColor.Primary}`: Outlined, bordered in the primary colour |
+| `styleType={AccordionStyleType.Plain}` | unchanged, with a small gap added above its body |
+
+An Accordion without `styleType` compiles unchanged and looks different in a list: neighbours
+used to join into one box and now keep a small gap. Add `joined` to every one in the list to keep
+the box, now with square corners at each join; an open one stays in the box instead of moving
+apart from the others.

package/docs/ActionButtons.md

@@ -7,7 +7,7 @@
 **Import:** `import { ActionButtons } from '@ahrowe/ui'`
 
 ```tsx
-import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
+import { ActionButtons, ThemeColor } from '@ahrowe/ui';
 
 <ActionButtons
   labels={{ submit: 'Save', cancel: 'Discard' }}
@@ -19,7 +19,7 @@ import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 // Destructive action
 <ActionButtons
   labels={{ submit: 'Delete' }}
-  submitButtonStyle={ButtonStyleType.Delete}
+  submitButtonColor={ThemeColor.Error}
   onSubmit={handleDelete}
   onClose={onClose}
 />
@@ -41,7 +41,10 @@ import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 | `onClose` | `() => void` | Secondary button click |
 | `labels.submit` | `ReactNode \| string` | Primary button label |
 | `labels.cancel` | `ReactNode \| string` | Secondary button label |
-| `submitButtonStyle` | `ButtonStyleType` | `Primary` (default), `Delete`, `Default` |
+| `submitButtonStyle` | `ButtonStyleType` | Default `Filled` |
+| `submitButtonColor` | `ColorValue` | Default `Primary`; `Error` for a destructive confirm; or any CSS colour |
+| `cancelButtonStyle` | `ButtonStyleType` | Default `Outlined` |
+| `cancelButtonColor` | `ColorValue` | Default `Primary`; or any CSS colour |
 | `isSubmitButtonLoading` | `boolean` | Shows spinner on primary button |
 | `isSubmitButtonDisabled` | `boolean` | |
 | `isCancelButtonLoading` | `boolean` | |

package/docs/ActionIcon.md

@@ -1,22 +1,28 @@
 # ActionIcon
 
-**When to use:** Clickable icon button without a label — toolbar actions, table row actions, icon-only controls.
+**When to use:** Clickable icon button without a label — toolbar actions, table row actions, close buttons, icon-only controls.
 
-**Keywords:** toolbar button
+**Keywords:** toolbar button, icon button, close, ghost
 
 **Import:** `import { ActionIcon } from '@ahrowe/ui'`
 
 **Requires:** `@fortawesome/free-solid-svg-icons` peer dependency.
 
+An ActionIcon is a [Button](Button.md) holding only an icon and sized by it: a real `<button>`
+with Button's hover, focus ring and ripple. It takes Button's `styleType` and `color`, plain and
+in the surrounding text colour by default, so it fits whatever it sits on.
+
 ```tsx
-import { ActionIcon } from '@ahrowe/ui';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
-
-<ActionIcon
-  icon={faTrash}
-  title="Delete item"
-  onClick={(e) => handleDelete(e)}
-/>
+import { ActionIcon, ButtonStyleType, ThemeColor } from '@ahrowe/ui';
+import { faTrash, faXmark } from '@fortawesome/free-solid-svg-icons';
+
+<ActionIcon icon={faXmark} aria-label="Close" onClick={onClose} />
+
+// A destructive row action
+<ActionIcon icon={faTrash} color={ThemeColor.Error} title="Delete item" onClick={handleDelete} />
+
+// Filled, for an action that should stand out
+<ActionIcon icon={faTrash} styleType={ButtonStyleType.Filled} color={ThemeColor.Error} aria-label="Delete" />
 ```
 
 **Key props:**
@@ -24,9 +30,28 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 | Prop | Type | Description |
 |------|------|-------------|
 | `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element (required) |
-| `title` | `string` | Tooltip / accessible label |
-| `onClick` | `(event: MouseEvent) => void` | Click handler |
-| `className` | `string` | Root element class |
-| `ref` | `Ref<HTMLDivElement>` | Ref to the root element |
+| `styleType` | `ButtonStyleType` | Default `Plain`; any of Button's styles |
+| `color` | `ColorValue` | A `ThemeColor` (default `Neutral`) or any CSS colour, see [ThemeColor.md](ThemeColor.md) |
+| `title` | `string` | Tooltip. Give an icon-only button an `aria-label` as well |
+| `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void \| Promise<void>` | Click handler |
+| `disabled` | `boolean` | Fades it and blocks clicks |
+| `ref` | `Ref<HTMLButtonElement>` | Ref to the button |
+
+Every other Button prop and native `<button>` attribute passes through, except `size`,
+`children` and `isLoading`. The box is the icon plus `4px` on each side; set `width` and `height`
+for a different one.
 
 **Slots:** `root` `icon`
+
+## Migration from the div
+
+Before 0.43 an ActionIcon was a `div` with a button role and no colour of its own.
+
+- **Types:** `ref` is `Ref<HTMLButtonElement>` and `onClick` receives a
+  `MouseEvent<HTMLButtonElement>`. A handler annotated with `HTMLDivElement` no longer compiles;
+  drop the annotation or change it. The same goes for the `onClick` of Card and SectionHeader
+  `actions`, which render ActionIcons.
+- **Layout:** it is inline, like a button, where the div was a block of its own width. In a flex
+  row nothing changes; on its own in a block it now sits in the line.
+- **Look:** it has Button's hover tint, focus ring and ripple, where the div only darkened on
+  hover. It takes the surrounding text colour as before; a colour of its own is now `color`.

package/docs/Alert.md

@@ -4,24 +4,24 @@
 
 **Keywords:** warning box
 
-**Import:** `import { Alert, AlertStyleType } from '@ahrowe/ui'`
+**Import:** `import { Alert, ThemeColor } from '@ahrowe/ui'`
 
-**Style variants:** `AlertStyleType.Default` | `AlertStyleType.Info` | `AlertStyleType.Success` | `AlertStyleType.Warn` | `AlertStyleType.Error`
+**Colours:** any `color`: a `ThemeColor` (default `Primary`) or any CSS colour, see [ThemeColor.md](ThemeColor.md). A `ThemeColor` also picks the icon: a bell for `Primary` and `Neutral`, then info, check, warning and cross. Any other colour shows `icon`, or the bell.
 
 ```tsx
-import { Alert, AlertStyleType } from '@ahrowe/ui';
+import { Alert, ThemeColor } from '@ahrowe/ui';
 
-// Default, neutral message
-<Alert>A default, neutral message.</Alert>
+// In the primary colour, the default
+<Alert>Here is what changed since your last visit.</Alert>
 
-// Semantic variants
-<Alert styleType={AlertStyleType.Info}>Here's something worth knowing.</Alert>
-<Alert styleType={AlertStyleType.Success}>Your changes were saved.</Alert>
-<Alert styleType={AlertStyleType.Warn}>Your storage is almost full.</Alert>
-<Alert styleType={AlertStyleType.Error}>Something went wrong. Please try again.</Alert>
+// Semantic colours
+<Alert color={ThemeColor.Info}>Here's something worth knowing.</Alert>
+<Alert color={ThemeColor.Success}>Your changes were saved.</Alert>
+<Alert color={ThemeColor.Warn}>Your storage is almost full.</Alert>
+<Alert color={ThemeColor.Error}>Something went wrong. Please try again.</Alert>
 
 // With a title
-<Alert styleType={AlertStyleType.Warn} title="Storage almost full">
+<Alert color={ThemeColor.Warn} title="Storage almost full">
   You've used 92% of your available space. Free up room or upgrade your plan.
 </Alert>
 
@@ -30,7 +30,7 @@ import { Alert, AlertStyleType } from '@ahrowe/ui';
 const [visible, setVisible] = useState(true);
 {visible && (
   <Alert
-    styleType={AlertStyleType.Info}
+    color={ThemeColor.Info}
     title="New feature available"
     onClose={() => setVisible(false)}
   >
@@ -39,13 +39,13 @@ const [visible, setVisible] = useState(true);
 )}
 
 // Without the leading icon
-<Alert styleType={AlertStyleType.Success} hideIcon>
+<Alert color={ThemeColor.Success} hideIcon>
   A minimal message with no leading icon.
 </Alert>
 
-// Custom icon, overriding the styleType default
+// Custom icon, overriding the colour's own
 import { faRocket } from '@fortawesome/free-solid-svg-icons';
-<Alert styleType={AlertStyleType.Info} icon={faRocket}>
+<Alert color={ThemeColor.Info} icon={faRocket}>
   Shipping a new release tonight.
 </Alert>
 ```
@@ -56,8 +56,8 @@ import { faRocket } from '@fortawesome/free-solid-svg-icons';
 |------|------|-------------|
 | `title` | `ReactNode` | Optional bold heading above the description |
 | `children` | `ReactNode` | The message body |
-| `styleType` | `AlertStyleType` | Colour variant and default icon (default `Default`) |
-| `icon` | `IconDefinition \| ReactElement` | Overrides the default icon for `styleType` — FontAwesome icon or any React element |
+| `color` | `ColorValue` | A `ThemeColor` (default `Primary`) or any CSS colour; a `ThemeColor` also picks the icon |
+| `icon` | `IconDefinition \| ReactElement` | Overrides the colour's icon — FontAwesome icon or any React element |
 | `hideIcon` | `boolean` | Hide the leading icon entirely |
 | `onClose` | `() => void` | Shows a close button and is called when it's clicked. `Alert` doesn't hide itself, so stop rendering it (or update your own state) in the handler |
 
@@ -70,3 +70,13 @@ import { faRocket } from '@fortawesome/free-solid-svg-icons';
 ## Sizing
 
 Every length in an alert is `em`, so the padding, the icon, the close button and the accent bar keep their ratios to the body copy at any base font.
+
+## Migration from `AlertStyleType`
+
+Before 0.43 an Alert's colour was `styleType`, typed `AlertStyleType`. It is now `color`, typed
+`ColorValue`, and `AlertStyleType` is gone, so TypeScript points at every use:
+
+| Before | After |
+|--------|-------|
+| `styleType={AlertStyleType.Default}` | nothing: `Primary` is the default, with the same bell |
+| `styleType={AlertStyleType.Info}` (and `Success`, `Warn`, `Error`) | `color={ThemeColor.Info}` |

package/docs/AnimatedLogo.md

@@ -49,7 +49,7 @@ import { AnimatedLogo } from '@ahrowe/ui';
 | `path` | `string` | SVG path `d` data to draw and fill (default: the AhroweUI mark). Multiple subpaths (several `M` commands in one `d`) are supported. |
 | `viewBox` | `string` | `viewBox` matching `path`'s coordinate space (default: the AhroweUI mark's viewBox) |
 | `size` | `number \| string` | Width/height of the root `svg` (default `96`) |
-| `color` | `string` | Overrides stroke/fill colour (default `var(--primary-color)`) |
+| `color` | `ColorValue` | The stroke and fill: a `ThemeColor` or any CSS colour (default `--primary-color`) |
 | `duration` | `number` | Length of one draw-fill cycle, in seconds (default `4.2`) |
 | `loop` | `boolean` | Repeats the draw-fill-retract cycle forever; `false` plays once and holds filled (default `true`) |
 | `fill` | `boolean` | Fills the interior once drawn; `false` keeps it an outline-only trace (default `true`) |

package/docs/Badge.md

@@ -4,14 +4,14 @@
 
 **Keywords:** pill
 
-**Import:** `import { Badge, BadgeStyleType, BadgePosition } from '@ahrowe/ui'`
+**Import:** `import { Badge, BadgeStyleType, BadgePosition, ThemeColor } from '@ahrowe/ui'`
 
-**Style variants:** `BadgeStyleType.Default` | `BadgeStyleType.Primary` (default) | `BadgeStyleType.Success` | `BadgeStyleType.Info` | `BadgeStyleType.Warn` | `BadgeStyleType.Error`
+**Styles:** `BadgeStyleType.Filled` (default) | `BadgeStyleType.Light` | `BadgeStyleType.Outlined`, in any `color`: a `ThemeColor` (default `Primary`) or any CSS colour, see [ThemeColor.md](ThemeColor.md). A `dot` is always solid.
 
-**Position (when wrapping `children`):** `BadgePosition.TopRight` (default) | `BadgePosition.TopLeft` | `BadgePosition.BottomRight` | `BadgePosition.BottomLeft`
+**Position (when wrapping `children`):** `BadgePosition.TopRight` (default) | `BadgePosition.TopLeft` | `BadgePosition.BottomRight` | `BadgePosition.BottomLeft`. A badge over its `children` sits on the page colour, so `Light`, `Outlined` and a `Neutral` `Filled` look as they do on the page instead of letting the avatar or icon show through.
 
 ```tsx
-import { Badge, BadgeStyleType } from '@ahrowe/ui';
+import { Badge, BadgeStyleType, ThemeColor } from '@ahrowe/ui';
 import { faBell } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -25,10 +25,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 <Badge content="NEW" />
 
 // Plain dot, no text
-<Badge dot styleType={BadgeStyleType.Error} />
+<Badge dot color={ThemeColor.Error} />
+
+// A status label
+<Badge content="Paid" styleType={BadgeStyleType.Light} color={ThemeColor.Success} />
 
 // Overlaying an icon
-<Badge count={12} styleType={BadgeStyleType.Error}>
+<Badge count={12} color={ThemeColor.Error}>
   <FontAwesomeIcon icon={faBell} />
 </Badge>
 
@@ -47,8 +50,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 | `content` | `ReactNode` | Custom content overriding the computed `count` text |
 | `dot` | `boolean` | Render as a plain dot with no text |
 | `showZero` | `boolean` | Show the badge when `count` is `0` |
-| `styleType` | `BadgeStyleType` | Colour variant (default `Primary`) |
+| `styleType` | `BadgeStyleType` | `Filled` (default), `Light` or `Outlined`. Ignored by a `dot` |
+| `color` | `ColorValue` | A `ThemeColor` (default `Primary`) or any CSS colour |
 | `position` | `BadgePosition` | Corner the badge attaches to when wrapping `children` (default `TopRight`) |
 | `children` | `ReactNode` | Element the badge overlays. Omit to render the badge inline on its own |
 
 **Slots:** `badge`
+
+## Migration from colour styles
+
+Before 0.43, `BadgeStyleType` was a colour, and `Primary` was filled while the others were a light
+tint. Style and colour are now separate props, so every colour comes in every style. The old
+members are gone and TypeScript points at each:
+
+| Before | After |
+|--------|-------|
+| `styleType={BadgeStyleType.Primary}` | nothing: `Filled` `Primary` is the default |
+| `styleType={BadgeStyleType.Default}` | `styleType={BadgeStyleType.Light} color={ThemeColor.Neutral}` |
+| `styleType={BadgeStyleType.Success}` (and `Info`, `Warn`, `Error`) | `styleType={BadgeStyleType.Light} color={ThemeColor.Success}` |
+| `dot styleType={BadgeStyleType.Error}` | `dot color={ThemeColor.Error}` |