@carbonid1/design-system 5.7.3 → 5.7.5

package/dist/Badge/Badge.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../helpers/cn/cn';
 import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';
-const badgeVariants = cva('inline-flex max-w-full min-w-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap', {
+const badgeVariants = cva('inline-flex max-w-full min-w-0 items-center gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap', {
     variants: {
         variant: {
-            default: 'bg-muted text-muted-foreground',
+            default: 'border-muted-foreground bg-muted text-foreground',
             primary: 'bg-primary-border/30 text-primary',
             success: 'bg-success/15 text-success-foreground',
             attention: 'bg-attention-muted text-attention-foreground',

package/dist/Button/Button.js

@@ -9,7 +9,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
         variant: {
             ghost: 'hover:bg-accent aria-expanded:bg-accent dark:hover:bg-accent/50',
             primary: 'bg-primary text-primary-foreground font-medium hover:bg-primary/90',
-            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+            outline: 'border-input-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30 dark:hover:bg-input/50',
             destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
             attention: 'text-attention-foreground hover:bg-attention-muted',
             subtle: 'text-muted-foreground hover:text-primary',

package/dist/helpers/contrast/contrast.d.ts

@@ -0,0 +1,12 @@
+type Oklch = {
+    lightness: number;
+    chroma: number;
+    hue: number;
+};
+/**
+ * WCAG 2.x contrast ratio between two oklch colors, in the range [1, 21].
+ * Order-independent. Alpha is not modeled — pass an already-composited color if a
+ * token is translucent.
+ */
+export declare const contrastRatio: (foreground: Oklch, background: Oklch) => number;
+export type { Oklch };

package/dist/helpers/contrast/contrast.js

@@ -0,0 +1,37 @@
+const DEGREES_TO_RADIANS = Math.PI / 180;
+const clampUnit = (value) => Math.min(1, Math.max(0, value));
+/**
+ * Linear-sRGB channels for an oklch color, via Björn Ottosson's oklab→linear
+ * matrices. Channels are clamped into gamut so an out-of-sRGB color folds to its
+ * nearest representable luminance rather than producing a nonsense ratio.
+ */
+const toLinearSrgb = ({ lightness, chroma, hue }) => {
+    const hueRadians = hue * DEGREES_TO_RADIANS;
+    const a = chroma * Math.cos(hueRadians);
+    const b = chroma * Math.sin(hueRadians);
+    const longRoot = lightness + 0.3963377774 * a + 0.2158037573 * b;
+    const mediumRoot = lightness - 0.1055613458 * a - 0.0638541728 * b;
+    const shortRoot = lightness - 0.0894841775 * a - 1.291485548 * b;
+    const long = longRoot ** 3;
+    const medium = mediumRoot ** 3;
+    const short = shortRoot ** 3;
+    return [
+        clampUnit(4.0767416621 * long - 3.3077115913 * medium + 0.2309699292 * short),
+        clampUnit(-1.2684380046 * long + 2.6097574011 * medium - 0.3413193965 * short),
+        clampUnit(-0.0041960863 * long - 0.7034186147 * medium + 1.707614701 * short),
+    ];
+};
+const relativeLuminance = (color) => {
+    const [red, green, blue] = toLinearSrgb(color);
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+};
+/**
+ * WCAG 2.x contrast ratio between two oklch colors, in the range [1, 21].
+ * Order-independent. Alpha is not modeled — pass an already-composited color if a
+ * token is translucent.
+ */
+export const contrastRatio = (foreground, background) => {
+    const lighter = Math.max(relativeLuminance(foreground), relativeLuminance(background));
+    const darker = Math.min(relativeLuminance(foreground), relativeLuminance(background));
+    return (lighter + 0.05) / (darker + 0.05);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.7.3",
+  "version": "5.7.5",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",

package/skills/design-system/SKILL.md

@@ -35,7 +35,6 @@ If you're editing `@carbonid1/design-system` itself (adding a primitive, changin
 
 ## Core rules
 
-- Never use native `<select>` — use `Select`
 - Never build a tooltip, context menu, or toast from scratch — use `Tooltip`, `ContextMenu`, `toast()`
 - All icons from `lucide-react` — search `lucide.dev/icons` before creating anything custom. If nothing fits, build via Lucide's `Icon` + `iconNode`, don't reach for another library.
 - All color through semantic tokens — no hardcoded Tailwind color classes. See [references/theming.md](references/theming.md).

package/themes/dashboard.css

@@ -58,6 +58,7 @@
   --color-success-foreground: var(--success-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-input-border: var(--input-border);
   --color-ring: var(--ring);
   /* Font families. Override a role by setting its `--font-*-custom` variable;
    * each falls back to a system stack. */
@@ -122,7 +123,14 @@
   --destructive: oklch(0.58 0.22 27);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  /* Resting boundary for form controls (Button outline, inputs) — distinct from
+   * decorative --border and the --input fill. Dark enough to clear WCAG 1.4.11
+   * (3:1) against the surfaces controls sit on; the contrast test guards it. */
+  --input-border: oklch(0.62 0 0);
+  /* Neutral focus ring (border-ring + ring-ring/50 halo). Dark enough that the
+   * solid border clears WCAG 1.4.11 (3:1 non-text) against the lightest surface
+   * — the themes contrast test guards this floor. */
+  --ring: oklch(0.6 0 0);
   --highlight: oklch(0.901 0.082 85.84);
   --highlight-foreground: oklch(0.344 0.06 58.6);
   --highlight-muted: oklch(0.962 0.042 95.28);
@@ -159,6 +167,7 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(0.373 0.031 260 / 50%);
   --input: oklch(0.373 0.031 260 / 60%);
+  --input-border: oklch(0.58 0.025 262);
   --ring: oklch(0.551 0.023 264);
   --highlight: oklch(0.55 0.07 268);
   --highlight-foreground: oklch(0.95 0.02 265);

package/themes/reader.css

@@ -80,6 +80,7 @@
   --color-success-foreground: var(--success-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-input-border: var(--input-border);
   --color-ring: var(--ring);
   /* Font families. Override a role by setting its `--font-*-custom` variable;
    * each falls back to a system stack. */
@@ -147,7 +148,14 @@
   --destructive: oklch(0.58 0.22 27);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  /* Resting boundary for form controls (Button outline, inputs) — distinct from
+   * decorative --border and the --input fill. Dark enough to clear WCAG 1.4.11
+   * (3:1) against the surfaces controls sit on; the contrast test guards it. */
+  --input-border: oklch(0.62 0 0);
+  /* Neutral focus ring (border-ring + ring-ring/50 halo). Dark enough that the
+   * solid border clears WCAG 1.4.11 (3:1 non-text) against the lightest surface
+   * — the themes contrast test guards this floor. */
+  --ring: oklch(0.6 0 0);
   --highlight: oklch(0.901 0.082 85.84);
   --highlight-foreground: oklch(0.344 0.06 58.6);
   --highlight-muted: oklch(0.962 0.042 95.28);
@@ -189,6 +197,7 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(0.373 0.031 260 / 50%);
   --input: oklch(0.373 0.031 260 / 60%);
+  --input-border: oklch(0.58 0.025 262);
   --ring: oklch(0.551 0.023 264);
   --highlight: oklch(0.55 0.07 268);
   --highlight-foreground: oklch(0.95 0.02 265);