@kennycorrea/ui 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 0.8.1 — 2026-10-11
+
+### Fixed
+- **`Badge` text passes WCAG AA in both appearances.** Soft badges wrote their text in step a11
+  on an a3 wash, which fails 4.5:1 in light for `success` (jade, 4.27:1), `warning` (amber,
+  4.25:1), blue and several accents a business can pick for `brand`. Every variant is now
+  `highContrast` (step 12), which clears 9.8:1 on every Radix scale in light and dark. `Toast`
+  already passed (lowest: amber action text at 4.61:1) and is unchanged.
+
+### Added
+- **`test/contrast.test.tsx`**: every `Badge` variant (`brand` against every Radix accent) and
+  every `Toast` type, light and dark, computed from Radix's own token files. It fails if
+  `highContrast` is dropped. Not axe: jsdom applies no stylesheet, so axe's colour-contrast rule
+  can only report "incomplete" there; this checks the same pairs it would check in a browser.
+- **A dev-only warning when a needed colour scale is missing.** The first `Badge` or `Toaster`
+  to mount checks for `--{gray,jade,amber,red,blue}-9` and names the missing
+  `@radix-ui/themes/tokens/colors/*.css` imports.
+
+### Docs
+- README: the colour scales the atoms need, and their order relative to `base.css`.
+
+## 0.8.0 — 2026-10-09
+
+### Added
+- **Every Radix Themes component the atoms do not wrap**, re-exported unchanged from
+  `src/primitives/`: layout (Box, Flex, Grid, Container, Section, Inset), type (Text, Heading,
+  Link, Code, Kbd, Em, Strong, Quote, Blockquote), and AlertDialog, AspectRatio, Callout,
+  CheckboxCards, CheckboxGroup, DataList, DropdownMenu, HoverCard, IconButton, Radio,
+  RadioCards, RadioGroup, ScrollArea, SegmentedControl, TabNav, Table, Tabs, TextField,
+  AccessibleIcon, Portal, Reset, Slot, Slottable, ThemePanel, VisuallyHidden. Where an atom
+  exists it remains the export under that name.
+- **`ThemeRoot`** — Themes' `<Theme>`, renamed because `Theme` is already this package's type.
+- **All of Radix Icons** (`@radix-ui/react-icons`, 320 `*Icon` components). `Icon` is
+  unchanged and still the house glyph set.
+
 ## 0.7.0 — 2026-10-09
 
 ### Added

package/README.md

@@ -63,6 +63,29 @@ And in the app's own `index.css`:
 every utility class used *inside* the atoms — `w-full`, `inline-flex` — is missing from the
 generated CSS. The components come out subtly unstyled and nothing appears in the console.
 
+### Colour scales — required
+
+The atoms name five Radix scales: **gray**, **jade** (`Badge` success, `Toast` success),
+**amber** (warning), **red** (danger/error) and **blue** (`Toast`/`Alert` info). If the app
+imports Radix Themes piecemeal rather than the whole `@radix-ui/themes/styles.css`, every one of
+them must be imported, **after `base.css`** as Radix documents it, plus the app's own accent:
+
+```css
+@import '@radix-ui/themes/tokens/base.css';
+@import '@radix-ui/themes/tokens/colors/gray.css';
+@import '@radix-ui/themes/tokens/colors/jade.css';
+@import '@radix-ui/themes/tokens/colors/amber.css';
+@import '@radix-ui/themes/tokens/colors/red.css';
+@import '@radix-ui/themes/tokens/colors/blue.css';
+/* …the accent the app offers, if not one of the above */
+@import '@radix-ui/themes/components.css';
+@import '@radix-ui/themes/utilities.css';
+```
+
+A missing scale is not an error to CSS — the variables are just undefined, and badges and toasts
+render colourless. Since 0.8.1 the first `Badge` or `Toaster` to mount checks for them and
+`console.warn`s the missing imports by name, outside production builds.
+
 ## Theming — 0.2.0
 
 **A product configures its own accents, default and storage namespace.** Until 0.2.0 all three

package/dist/atoms/Badge/Badge.d.ts

@@ -1,7 +1,14 @@
 import { Badge as ThemedBadge } from '@radix-ui/themes';
-import type { ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef, Ref } from 'react';
 export type BadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
 export interface BadgeProps extends Omit<ComponentPropsWithoutRef<typeof ThemedBadge>, 'color' | 'variant'> {
     variant?: BadgeVariant;
+    ref?: Ref<HTMLSpanElement>;
 }
-export declare function Badge({ variant, ...props }: BadgeProps): import("react").JSX.Element;
+/**
+ * **Always `highContrast`**, which writes the text in step 12 instead of a11. Soft badges are
+ * 12px text on an a3 wash, and a11 there fails WCAG AA in light for jade (4.27:1), amber
+ * (4.25:1), blue and several accents a business can pick for `brand`. Step 12 clears 9.8:1
+ * on every scale in both appearances; `test/contrast.test.tsx` holds it there.
+ */
+export declare function Badge({ variant, ref, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/atoms/Badge/Badge.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Badge as ThemedBadge } from '@radix-ui/themes';
+import { warnMissingScales } from '../../utils/scales.js';
 /**
  * The five meanings this library names, in Themes' colour vocabulary.
  *
@@ -18,6 +19,18 @@ const COLORS = {
     warning: 'amber',
     danger: 'red',
 };
-export function Badge({ variant = 'neutral', ...props }) {
-    return _jsx(ThemedBadge, { color: COLORS[variant], variant: "soft", radius: "full", ...props });
+/**
+ * **Always `highContrast`**, which writes the text in step 12 instead of a11. Soft badges are
+ * 12px text on an a3 wash, and a11 there fails WCAG AA in light for jade (4.27:1), amber
+ * (4.25:1), blue and several accents a business can pick for `brand`. Step 12 clears 9.8:1
+ * on every scale in both appearances; `test/contrast.test.tsx` holds it there.
+ */
+export function Badge({ variant = 'neutral', ref, ...props }) {
+    return (_jsx(ThemedBadge, { ref: (el) => {
+            warnMissingScales(el);
+            if (typeof ref === 'function')
+                ref(el);
+            else if (ref)
+                ref.current = el;
+        }, color: COLORS[variant], variant: "soft", radius: "full", highContrast: true, ...props }));
 }

package/dist/atoms/Toast/Toast.js

@@ -3,6 +3,7 @@ import * as RadixToast from '@radix-ui/react-toast';
 import { useSyncExternalStore } from 'react';
 import { useUiStrings } from '../../strings.js';
 import { cn } from '../../utils/cn.js';
+import { warnMissingScales } from '../../utils/scales.js';
 import { Icon } from '../Icon/Icon.js';
 /**
  * A module-level store, so `toast()` can be called from anywhere — an event handler, a
@@ -92,5 +93,5 @@ export function Toaster({ duration = 5000, position = 'bottom-right', label }) {
                                 if (item.action?.keepOpen)
                                     event.preventDefault();
                             }, className: cn('shrink-0 rounded-md px-2 py-1 text-sm font-medium', 'text-[var(--accent-11)] hover:bg-[var(--accent-a3)]'), children: item.action.label })) : null, _jsx(RadixToast.Close, { "aria-label": strings.dismiss, className: "shrink-0 rounded-md p-1 text-ink-muted hover:bg-[var(--gray-a3)]", children: _jsx(Icon, { name: "close", className: "size-4" }) })] }, item.id));
-            }), _jsx(RadixToast.Viewport, { className: cn('fixed z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none', POSITIONS[position]) })] }));
+            }), _jsx(RadixToast.Viewport, { ref: warnMissingScales, className: cn('fixed z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none', POSITIONS[position]) })] }));
 }

package/dist/icons/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The whole Radix Icons set, drawn on a 15px grid to sit beside Themes components.
+ *
+ * `Icon` stays the house glyph set for navigation and status; these cover everything else.
+ */
+export * from '@radix-ui/react-icons';

package/dist/icons/index.js

@@ -0,0 +1,6 @@
+/**
+ * The whole Radix Icons set, drawn on a 15px grid to sit beside Themes components.
+ *
+ * `Icon` stays the house glyph set for navigation and status; these cover everything else.
+ */
+export * from '@radix-ui/react-icons';

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from './atoms/index.js';
+export * from './icons/index.js';
+export * from './primitives/index.js';
 export * from './strings.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,3 +1,5 @@
 export * from './atoms/index.js';
+export * from './icons/index.js';
+export * from './primitives/index.js';
 export * from './strings.js';
 export * from './utils/index.js';

package/dist/primitives/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Every Radix Themes component the atoms do not already wrap, re-exported as is.
+ *
+ * The atoms stay the house API where one exists — `Button`, `Card`, `Dialog` and the rest
+ * carry decisions the raw component does not. These are for everything else, so an app
+ * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
+ * and drifting from the version the atoms were built against.
+ */
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/dist/primitives/index.js

@@ -0,0 +1,9 @@
+/**
+ * Every Radix Themes component the atoms do not already wrap, re-exported as is.
+ *
+ * The atoms stay the house API where one exists — `Button`, `Card`, `Dialog` and the rest
+ * carry decisions the raw component does not. These are for everything else, so an app
+ * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
+ * and drifting from the version the atoms were built against.
+ */
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/dist/utils/scales.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The Radix colour scales the atoms name. A consumer that imports only gray and its accent
+ * gets badges and toasts with no colour at all, and nothing says so — the variables are simply
+ * undefined. This is that something, in development only.
+ */
+export declare const REQUIRED_SCALES: readonly ["gray", "jade", "amber", "red", "blue"];
+export declare function warnMissingScales(el: Element | null): void;
+/** Test seam. */
+export declare function resetScaleCheck(): void;

package/dist/utils/scales.js

@@ -0,0 +1,30 @@
+/**
+ * The Radix colour scales the atoms name. A consumer that imports only gray and its accent
+ * gets badges and toasts with no colour at all, and nothing says so — the variables are simply
+ * undefined. This is that something, in development only.
+ */
+export const REQUIRED_SCALES = ['gray', 'jade', 'amber', 'red', 'blue'];
+const isDev = globalThis.process?.env?.NODE_ENV !==
+    'production';
+let checked = false;
+export function warnMissingScales(el) {
+    if (checked || !el || typeof getComputedStyle === 'undefined')
+        return;
+    if (!isDev)
+        return;
+    const style = getComputedStyle(el);
+    const missing = REQUIRED_SCALES.filter((s) => !style.getPropertyValue(`--${s}-9`).trim());
+    // Everything missing means no stylesheet yet (or jsdom) — not a choice; check again later.
+    if (missing.length === REQUIRED_SCALES.length)
+        return;
+    checked = true;
+    if (missing.length === 0)
+        return;
+    console.warn(`@kennycorrea/ui: missing Radix colour scale(s) ${missing.join(', ')}. Import ` +
+        `${missing.map((s) => `@radix-ui/themes/tokens/colors/${s}.css`).join(', ')} after ` +
+        '@radix-ui/themes/tokens/base.css, or Badge and Toast render colourless.');
+}
+/** Test seam. */
+export function resetScaleCheck() {
+    checked = false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
   "private": false,
   "type": "module",
@@ -35,6 +35,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slider": "^1.5.0",
     "@radix-ui/react-toast": "^1.2.23",
     "@radix-ui/react-toolbar": "^1.1.20",
@@ -49,6 +50,7 @@
     "@radix-ui/themes": "^3.3.0",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^24.19.2",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
     "jsdom": "^30.1.2",