@conductor-by-89soone/tokens 0.6.0 → 0.7.0

package/dist/cli.js

@@ -611,6 +611,59 @@ var componentTokens = [
   ...workbench
 ];
 
+// src/oklab.ts
+var HEX = /^#([0-9a-f]{6})$/i;
+function parseHex(hex) {
+  const match = HEX.exec(hex);
+  if (match === null) throw new Error(`oklab: expected #rrggbb, got "${hex}"`);
+  const digits = match[1];
+  return [0, 2, 4].map((offset) => Number.parseInt(digits.slice(offset, offset + 2), 16) / 255);
+}
+var toLinear = (channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+var toGamma = (channel) => channel <= 31308e-7 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - 0.055;
+var clamp = (channel) => Math.min(1, Math.max(0, channel));
+function toOklab(hex) {
+  const [r, g, b] = parseHex(hex).map(toLinear);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function fromOklab([lightness, a, b]) {
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const linear = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+  return `#${linear.map((channel) => Math.round(clamp(toGamma(clamp(channel))) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function mixOklab(foreground, background, weight) {
+  if (!(weight >= 0 && weight <= 1)) throw new Error(`oklab: weight must be within [0, 1], got ${weight}`);
+  const front = toOklab(foreground);
+  const back = toOklab(background);
+  return fromOklab(front.map((channel, index) => channel * weight + back[index] * (1 - weight)));
+}
+var TONE_WEIGHTS = {
+  background: 0.04,
+  border: 0.14,
+  backgroundHover: 0.12,
+  borderHover: 0.45
+};
+function toneValues(tones, surfaceRaised) {
+  const out = {};
+  for (const tone2 of Object.keys(tones)) {
+    for (const [state, weight] of Object.entries(TONE_WEIGHTS)) out[`tone.${tone2}.${state}`] = mixOklab(tones[tone2], surfaceRaised, weight);
+  }
+  return out;
+}
+
 // src/palette.dark.ts
 function darkToken(input2) {
   return { tier: "semantic", ...input2 };
@@ -1104,6 +1157,27 @@ var dataviz = [
     description: "Sequential distribution step 5 of 5 (most prominent), single-hue luminance ramp. Fill only; non-text 3:1 on chart surfaces (CP-115~CP-117)."
   })
 ];
+var TONE_STATE_DESCRIPTIONS = {
+  background: "rest fill",
+  border: "rest edge",
+  backgroundHover: "hover fill",
+  borderHover: "hover edge"
+};
+function valueOf(tokens, key) {
+  const value2 = tokens.find((token) => token.key === key)?.value;
+  if (typeof value2 !== "string") throw new Error(`palette.dark: tone base "${key}" has no literal colour value`);
+  return value2;
+}
+var toneBases = { accent: valueOf(accent, "accent.DEFAULT"), danger: valueOf(status, "status.danger") };
+var tone = Object.entries(toneValues(toneBases, valueOf(surface, "surface.raised"))).map(([key, value2]) => {
+  const [, toneName, state] = key.split(".");
+  return darkToken({
+    key,
+    usage: "decorative",
+    value: value2,
+    description: `Secondary ${toneName}-tone button ${TONE_STATE_DESCRIPTIONS[state]}: ${Math.round(TONE_WEIGHTS[state] * 100)}% of \`${toneName === "accent" ? "accent" : "status.danger"}\` over \`surface.raised\`, mixed in OKLab at build time (CR-050).`
+  });
+});
 var darkPalette = [
   ...surface,
   ...text,
@@ -1115,11 +1189,12 @@ var darkPalette = [
   ...fontFamily,
   ...elevation,
   ...interaction,
+  ...tone,
   ...dataviz
 ];
 
 // src/palette.light.ts
-var values = {
+var baseValues = {
   "surface.base": "#e8ecf2",
   "surface.canvas": "#eef1f6",
   "surface.subtle": "#f3f6f9",
@@ -1189,6 +1264,13 @@ var values = {
   "dataviz.sequential.4": "#4539cd",
   "dataviz.sequential.5": "#3329a4"
 };
+var values = {
+  ...baseValues,
+  ...toneValues(
+    { accent: baseValues["accent.DEFAULT"], danger: baseValues["status.danger"] },
+    baseValues["surface.raised"]
+  )
+};
 var lightAdditions = [];
 function derivePalette(base, overrides, additions = []) {
   const baseKeys = new Set(base.map((token) => token.key));

package/dist/contrast-cli.js

@@ -362,6 +362,12 @@ var datavizPairs = [
   pair("CP-116", "dataviz.sequential.5", "surface.canvas", "nonText"),
   pair("CP-117", "dataviz.sequential.5", "surface.raised", "nonText")
 ];
+var tonePairs = [
+  pair("CP-118", "text.primary", "tone.accent.background", "body"),
+  pair("CP-119", "text.primary", "tone.accent.backgroundHover", "body"),
+  pair("CP-120", "text.primary", "tone.danger.background", "body"),
+  pair("CP-121", "text.primary", "tone.danger.backgroundHover", "body")
+];
 var contrastPairs = [
   ...textOnSurface,
   ...accentPairs,
@@ -371,7 +377,8 @@ var contrastPairs = [
   ...severityPairs,
   ...badgePairs,
   ...disabledPairs,
-  ...datavizPairs
+  ...datavizPairs,
+  ...tonePairs
 ];
 var forbiddenPairs = [
   {
@@ -832,6 +839,59 @@ var componentTokens = [
   ...workbench
 ];
 
+// src/oklab.ts
+var HEX = /^#([0-9a-f]{6})$/i;
+function parseHex(hex) {
+  const match = HEX.exec(hex);
+  if (match === null) throw new Error(`oklab: expected #rrggbb, got "${hex}"`);
+  const digits = match[1];
+  return [0, 2, 4].map((offset) => Number.parseInt(digits.slice(offset, offset + 2), 16) / 255);
+}
+var toLinear = (channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+var toGamma = (channel) => channel <= 31308e-7 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - 0.055;
+var clamp = (channel) => Math.min(1, Math.max(0, channel));
+function toOklab(hex) {
+  const [r, g, b] = parseHex(hex).map(toLinear);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function fromOklab([lightness, a, b]) {
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const linear = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+  return `#${linear.map((channel) => Math.round(clamp(toGamma(clamp(channel))) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function mixOklab(foreground, background, weight) {
+  if (!(weight >= 0 && weight <= 1)) throw new Error(`oklab: weight must be within [0, 1], got ${weight}`);
+  const front = toOklab(foreground);
+  const back = toOklab(background);
+  return fromOklab(front.map((channel, index) => channel * weight + back[index] * (1 - weight)));
+}
+var TONE_WEIGHTS = {
+  background: 0.04,
+  border: 0.14,
+  backgroundHover: 0.12,
+  borderHover: 0.45
+};
+function toneValues(tones, surfaceRaised) {
+  const out = {};
+  for (const tone2 of Object.keys(tones)) {
+    for (const [state, weight] of Object.entries(TONE_WEIGHTS)) out[`tone.${tone2}.${state}`] = mixOklab(tones[tone2], surfaceRaised, weight);
+  }
+  return out;
+}
+
 // src/palette.dark.ts
 function darkToken(input2) {
   return { tier: "semantic", ...input2 };
@@ -1325,6 +1385,27 @@ var dataviz = [
     description: "Sequential distribution step 5 of 5 (most prominent), single-hue luminance ramp. Fill only; non-text 3:1 on chart surfaces (CP-115~CP-117)."
   })
 ];
+var TONE_STATE_DESCRIPTIONS = {
+  background: "rest fill",
+  border: "rest edge",
+  backgroundHover: "hover fill",
+  borderHover: "hover edge"
+};
+function valueOf(tokens, key) {
+  const value2 = tokens.find((token) => token.key === key)?.value;
+  if (typeof value2 !== "string") throw new Error(`palette.dark: tone base "${key}" has no literal colour value`);
+  return value2;
+}
+var toneBases = { accent: valueOf(accent, "accent.DEFAULT"), danger: valueOf(status, "status.danger") };
+var tone = Object.entries(toneValues(toneBases, valueOf(surface, "surface.raised"))).map(([key, value2]) => {
+  const [, toneName, state] = key.split(".");
+  return darkToken({
+    key,
+    usage: "decorative",
+    value: value2,
+    description: `Secondary ${toneName}-tone button ${TONE_STATE_DESCRIPTIONS[state]}: ${Math.round(TONE_WEIGHTS[state] * 100)}% of \`${toneName === "accent" ? "accent" : "status.danger"}\` over \`surface.raised\`, mixed in OKLab at build time (CR-050).`
+  });
+});
 var darkPalette = [
   ...surface,
   ...text,
@@ -1336,11 +1417,12 @@ var darkPalette = [
   ...fontFamily,
   ...elevation,
   ...interaction,
+  ...tone,
   ...dataviz
 ];
 
 // src/palette.light.ts
-var values = {
+var baseValues = {
   "surface.base": "#e8ecf2",
   "surface.canvas": "#eef1f6",
   "surface.subtle": "#f3f6f9",
@@ -1410,6 +1492,13 @@ var values = {
   "dataviz.sequential.4": "#4539cd",
   "dataviz.sequential.5": "#3329a4"
 };
+var values = {
+  ...baseValues,
+  ...toneValues(
+    { accent: baseValues["accent.DEFAULT"], danger: baseValues["status.danger"] },
+    baseValues["surface.raised"]
+  )
+};
 var lightAdditions = [];
 function derivePalette(base, overrides, additions = []) {
   const baseKeys = new Set(base.map((token) => token.key));
@@ -1602,7 +1691,7 @@ function tokensForTheme(theme) {
 // src/contrast/color.ts
 var HEX_SOURCE = "#([0-9a-f]{3,8})\\b";
 var FUNCTIONAL_SOURCE = "\\b(rgba?|hsla?)\\(\\s*([^()]*)\\)";
-var clamp = (value2, low, high) => Math.min(Math.max(value2, low), high);
+var clamp2 = (value2, low, high) => Math.min(Math.max(value2, low), high);
 function fromHex(digits) {
   const byte = (pair2) => parseInt(pair2.length === 1 ? pair2 + pair2 : pair2, 16);
   if (digits.length === 3 || digits.length === 4) {
@@ -1626,14 +1715,14 @@ function argumentsOf(body) {
 function toAlpha(raw) {
   if (raw === void 0) return 1;
   const value2 = raw.endsWith("%") ? Number(raw.slice(0, -1)) / 100 : Number(raw);
-  return Number.isFinite(value2) ? clamp(value2, 0, 1) : 1;
+  return Number.isFinite(value2) ? clamp2(value2, 0, 1) : 1;
 }
 function fromRgb(body) {
   const parts = argumentsOf(body);
   if (parts.length < 3) return void 0;
   const channel = (raw) => {
     const value2 = raw.endsWith("%") ? Number(raw.slice(0, -1)) / 100 * 255 : Number(raw);
-    return Number.isFinite(value2) ? clamp(Math.round(value2), 0, 255) : Number.NaN;
+    return Number.isFinite(value2) ? clamp2(Math.round(value2), 0, 255) : Number.NaN;
   };
   const r = channel(parts[0]);
   const g = channel(parts[1]);
@@ -1648,10 +1737,10 @@ function fromHsl(body) {
   const saturation = Number(parts[1].replace(/%$/, "")) / 100;
   const lightness = Number(parts[2].replace(/%$/, "")) / 100;
   if (![hue, saturation, lightness].every((value2) => Number.isFinite(value2))) return void 0;
-  const chroma = (1 - Math.abs(2 * clamp(lightness, 0, 1) - 1)) * clamp(saturation, 0, 1);
+  const chroma = (1 - Math.abs(2 * clamp2(lightness, 0, 1) - 1)) * clamp2(saturation, 0, 1);
   const sextant = (hue % 360 + 360) % 360 / 60;
   const secondary = chroma * (1 - Math.abs(sextant % 2 - 1));
-  const lift = clamp(lightness, 0, 1) - chroma / 2;
+  const lift = clamp2(lightness, 0, 1) - chroma / 2;
   const wheel = [
     [chroma, secondary, 0],
     [secondary, chroma, 0],
@@ -1661,7 +1750,7 @@ function fromHsl(body) {
     [chroma, 0, secondary]
   ];
   const [r, g, b] = wheel[Math.floor(sextant) % 6];
-  const channel = (raw) => clamp(Math.round((raw + lift) * 255), 0, 255);
+  const channel = (raw) => clamp2(Math.round((raw + lift) * 255), 0, 255);
   return { r: channel(r), g: channel(g), b: channel(b), alpha: toAlpha(parts[3]) };
 }
 function parseFunctional(name, body) {

package/dist/contrast-report.json

@@ -10,11 +10,11 @@
     "nonText": 3
   },
   "summary": {
-    "declaredPairs": 116,
-    "checks": 232,
-    "passed": 232,
+    "declaredPairs": 120,
+    "checks": 240,
+    "passed": 240,
     "failed": 0,
-    "excludedTokens": 241,
+    "excludedTokens": 249,
     "forbiddenPairs": 2
   },
   "results": [
@@ -1526,6 +1526,58 @@
       "ratio": 10.836,
       "pass": true
     },
+    {
+      "id": "CP-118",
+      "theme": "dark",
+      "foreground": "text.primary",
+      "background": "tone.accent.background",
+      "foregroundValue": "#f4f7fb",
+      "backgroundValue": "#172131",
+      "compositedForeground": "#f4f7fb",
+      "usage": "body",
+      "threshold": 4.5,
+      "ratio": 15.0532,
+      "pass": true
+    },
+    {
+      "id": "CP-119",
+      "theme": "dark",
+      "foreground": "text.primary",
+      "background": "tone.accent.backgroundHover",
+      "foregroundValue": "#f4f7fb",
+      "backgroundValue": "#1d2840",
+      "compositedForeground": "#f4f7fb",
+      "usage": "body",
+      "threshold": 4.5,
+      "ratio": 13.6691,
+      "pass": true
+    },
+    {
+      "id": "CP-120",
+      "theme": "dark",
+      "foreground": "text.primary",
+      "background": "tone.danger.background",
+      "foregroundValue": "#f4f7fb",
+      "backgroundValue": "#1d202c",
+      "compositedForeground": "#f4f7fb",
+      "usage": "body",
+      "threshold": 4.5,
+      "ratio": 15.0893,
+      "pass": true
+    },
+    {
+      "id": "CP-121",
+      "theme": "dark",
+      "foreground": "text.primary",
+      "background": "tone.danger.backgroundHover",
+      "foregroundValue": "#f4f7fb",
+      "backgroundValue": "#2d252f",
+      "compositedForeground": "#f4f7fb",
+      "usage": "body",
+      "threshold": 4.5,
+      "ratio": 13.79,
+      "pass": true
+    },
     {
       "id": "CP-001",
       "theme": "light",
@@ -3033,6 +3085,58 @@
       "threshold": 3,
       "ratio": 10.2529,
       "pass": true
+    },
+    {
+      "id": "CP-118",
+      "theme": "light",
+      "foreground": "text.primary",
+      "background": "tone.accent.background",
+      "foregroundValue": "#0c121c",
+      "backgroundValue": "#f3f6fc",
+      "compositedForeground": "#0c121c",
+      "usage": "body",
+      "threshold": 4.5,
+      "ratio": 17.3371,
+      "pass": true
+    },
+    {
+      "id": "CP-119",
+      "theme": "light",
+      "foreground": "text.primary",
+      "background": "tone.accent.backgroundHover",
+      "foregroundValue": "#0c121c",
+      "backgroundValue": "#e4e9fa",
+      "compositedForeground": "#0c121c",
+      "usage": "body",
+      "threshold": 4.5,
+      "ratio": 15.4924,
+      "pass": true
+    },
+    {
+      "id": "CP-120",
+      "theme": "light",
+      "foreground": "text.primary",
+      "background": "tone.danger.background",
+      "foregroundValue": "#0c121c",
+      "backgroundValue": "#fbf4f4",
+      "compositedForeground": "#0c121c",
+      "usage": "body",
+      "threshold": 4.5,
+      "ratio": 17.292,
+      "pass": true
+    },
+    {
+      "id": "CP-121",
+      "theme": "light",
+      "foreground": "text.primary",
+      "background": "tone.danger.backgroundHover",
+      "foregroundValue": "#0c121c",
+      "backgroundValue": "#f9e4e2",
+      "compositedForeground": "#0c121c",
+      "usage": "body",
+      "threshold": 4.5,
+      "ratio": 15.3929,
+      "pass": true
     }
   ],
   "exclusions": [
@@ -3176,6 +3280,46 @@
       "usage": "decorative",
       "reason": "Policy-blocked fill. Contrast-exempt as a fill; checked beneath the label (5.27:1)."
     },
+    {
+      "key": "tone.accent.background",
+      "usage": "decorative",
+      "reason": "Secondary accent-tone button rest fill: 4% of `accent` over `surface.raised`, mixed in OKLab at build time (CR-050)."
+    },
+    {
+      "key": "tone.accent.border",
+      "usage": "decorative",
+      "reason": "Secondary accent-tone button rest edge: 14% of `accent` over `surface.raised`, mixed in OKLab at build time (CR-050)."
+    },
+    {
+      "key": "tone.accent.backgroundHover",
+      "usage": "decorative",
+      "reason": "Secondary accent-tone button hover fill: 12% of `accent` over `surface.raised`, mixed in OKLab at build time (CR-050)."
+    },
+    {
+      "key": "tone.accent.borderHover",
+      "usage": "decorative",
+      "reason": "Secondary accent-tone button hover edge: 45% of `accent` over `surface.raised`, mixed in OKLab at build time (CR-050)."
+    },
+    {
+      "key": "tone.danger.background",
+      "usage": "decorative",
+      "reason": "Secondary danger-tone button rest fill: 4% of `status.danger` over `surface.raised`, mixed in OKLab at build time (CR-050)."
+    },
+    {
+      "key": "tone.danger.border",
+      "usage": "decorative",
+      "reason": "Secondary danger-tone button rest edge: 14% of `status.danger` over `surface.raised`, mixed in OKLab at build time (CR-050)."
+    },
+    {
+      "key": "tone.danger.backgroundHover",
+      "usage": "decorative",
+      "reason": "Secondary danger-tone button hover fill: 12% of `status.danger` over `surface.raised`, mixed in OKLab at build time (CR-050)."
+    },
+    {
+      "key": "tone.danger.borderHover",
+      "usage": "decorative",
+      "reason": "Secondary danger-tone button hover edge: 45% of `status.danger` over `surface.raised`, mixed in OKLab at build time (CR-050)."
+    },
     {
       "key": "font.size.2xs",
       "usage": "decorative",

package/dist/index.d.ts

@@ -90,4 +90,42 @@ interface TokenGroup {
     readonly order: number;
 }
 
-export { CDT_PREFIX, PACKAGE_NAME, SEVERITY_ICONS, STATUS_ICONS, type SeverityIconName, type StatusIconName, type TokenDefinition, type TokenGroup, type TokenTier, type TokenUsage };
+/**
+ * WCAG 2.1 contrast ratio (1–21) of `foreground` drawn on `background`.
+ *
+ * Accepts `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb()`/`rgba()` and `hsl()`/`hsla()`, alone or as the single
+ * colour inside a compound value such as a box-shadow. A translucent
+ * foreground is composited over the background first; the background must be opaque, because what
+ * it sits on is unknown here. Throws on anything else rather than returning a ratio that could pass.
+ */
+declare function contrastRatio(foreground: string, background: string): number;
+
+/**
+ * OKLab mixing for derived state colours (CR-050).
+ *
+ * The stylesheet used to tint tone buttons with `color-mix(in srgb, …)` at render time. Mixing in
+ * gamma-encoded sRGB darkens and desaturates the midpoints, and a render-time mix is invisible to
+ * `checkContrast`. These tints are now computed here, at build time, in OKLab — the Cartesian form
+ * of OKLCH, so lightness is perceptually even — and emitted as plain hex. No browser has to support
+ * `oklch()` or relative colour syntax, and every derived background can sit in a contrast pair.
+ *
+ * OKLab rather than polar OKLCH: the surfaces are near-neutral, so their hue is noise, and an OKLCH
+ * mix would swing the tint's hue along that noise (a red mixed toward a blue-grey surface drifts
+ * purple). Mixing a and b linearly keeps the tone's hue and walks its chroma down evenly.
+ *
+ * Refs: CR-050 FR-THM-004 FR-TOK-001
+ */
+/** An OKLab (L, a, b) triple, or an sRGB triple in [0, 1] internally. */
+type OklabColor = readonly [number, number, number];
+/** sRGB → OKLab (Björn Ottosson's reference matrices). */
+declare function toOklab(hex: string): OklabColor;
+/** OKLab → sRGB hex, clipping each out-of-gamut channel. */
+declare function fromOklab([lightness, a, b]: OklabColor): string;
+/** `weight` of `foreground` over `background`, mixed in OKLab. 0 → background, 1 → foreground. */
+declare function mixOklab(foreground: string, background: string, weight: number): string;
+/** The two tones whose state tints are derived (`tone.accent.*`, `tone.danger.*`). */
+type ToneName = "accent" | "danger";
+/** `tone.<tone>.<state>` → hex for one theme, from that theme's tone colours and raised surface. */
+declare function toneValues(tones: Readonly<Record<ToneName, string>>, surfaceRaised: string): Readonly<Record<string, string>>;
+
+export { CDT_PREFIX, type OklabColor, PACKAGE_NAME, SEVERITY_ICONS, STATUS_ICONS, type SeverityIconName, type StatusIconName, type TokenDefinition, type TokenGroup, type TokenTier, type TokenUsage, type ToneName, contrastRatio, fromOklab, mixOklab, toOklab, toneValues };

package/dist/index.js

@@ -103,6 +103,20 @@ var tokens = {
     disabled: "var(--cdt-state-disabled)",
     disabledPolicy: "var(--cdt-state-disabled-policy)"
   },
+  tone: {
+    accent: {
+      background: "var(--cdt-tone-accent-background)",
+      border: "var(--cdt-tone-accent-border)",
+      backgroundHover: "var(--cdt-tone-accent-background-hover)",
+      borderHover: "var(--cdt-tone-accent-border-hover)"
+    },
+    danger: {
+      background: "var(--cdt-tone-danger-background)",
+      border: "var(--cdt-tone-danger-border)",
+      backgroundHover: "var(--cdt-tone-danger-background-hover)",
+      borderHover: "var(--cdt-tone-danger-border-hover)"
+    }
+  },
   dataviz: {
     series: {
       "1": "var(--cdt-dataviz-series-1)",
@@ -462,4 +476,174 @@ var SEVERITY_ICONS = {
   blocked: "shield-x"
 };
 
-export { CDT_PREFIX, PACKAGE_NAME, SEVERITY_ICONS, STATUS_ICONS, breakpoints, tokens };
+// src/contrast/color.ts
+var HEX_SOURCE = "#([0-9a-f]{3,8})\\b";
+var FUNCTIONAL_SOURCE = "\\b(rgba?|hsla?)\\(\\s*([^()]*)\\)";
+var clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+function fromHex(digits) {
+  const byte = (pair) => parseInt(pair.length === 1 ? pair + pair : pair, 16);
+  if (digits.length === 3 || digits.length === 4) {
+    const [r, g, b, a] = [...digits];
+    return { r: byte(r), g: byte(g), b: byte(b), alpha: a === void 0 ? 1 : byte(a) / 255 };
+  }
+  if (digits.length === 6 || digits.length === 8) {
+    const at = (index) => digits.slice(index, index + 2);
+    return {
+      r: byte(at(0)),
+      g: byte(at(2)),
+      b: byte(at(4)),
+      alpha: digits.length === 8 ? byte(at(6)) / 255 : 1
+    };
+  }
+  return void 0;
+}
+function argumentsOf(body) {
+  return body.replace(/\//g, " ").split(/[\s,]+/).filter((part) => part !== "");
+}
+function toAlpha(raw) {
+  if (raw === void 0) return 1;
+  const value = raw.endsWith("%") ? Number(raw.slice(0, -1)) / 100 : Number(raw);
+  return Number.isFinite(value) ? clamp(value, 0, 1) : 1;
+}
+function fromRgb(body) {
+  const parts = argumentsOf(body);
+  if (parts.length < 3) return void 0;
+  const channel = (raw) => {
+    const value = raw.endsWith("%") ? Number(raw.slice(0, -1)) / 100 * 255 : Number(raw);
+    return Number.isFinite(value) ? clamp(Math.round(value), 0, 255) : Number.NaN;
+  };
+  const r = channel(parts[0]);
+  const g = channel(parts[1]);
+  const b = channel(parts[2]);
+  if ([r, g, b].some(Number.isNaN)) return void 0;
+  return { r, g, b, alpha: toAlpha(parts[3]) };
+}
+function fromHsl(body) {
+  const parts = argumentsOf(body);
+  if (parts.length < 3) return void 0;
+  const hue = Number(parts[0].replace(/deg$/i, ""));
+  const saturation = Number(parts[1].replace(/%$/, "")) / 100;
+  const lightness = Number(parts[2].replace(/%$/, "")) / 100;
+  if (![hue, saturation, lightness].every((value) => Number.isFinite(value))) return void 0;
+  const chroma = (1 - Math.abs(2 * clamp(lightness, 0, 1) - 1)) * clamp(saturation, 0, 1);
+  const sextant = (hue % 360 + 360) % 360 / 60;
+  const secondary = chroma * (1 - Math.abs(sextant % 2 - 1));
+  const lift = clamp(lightness, 0, 1) - chroma / 2;
+  const wheel = [
+    [chroma, secondary, 0],
+    [secondary, chroma, 0],
+    [0, chroma, secondary],
+    [0, secondary, chroma],
+    [secondary, 0, chroma],
+    [chroma, 0, secondary]
+  ];
+  const [r, g, b] = wheel[Math.floor(sextant) % 6];
+  const channel = (raw) => clamp(Math.round((raw + lift) * 255), 0, 255);
+  return { r: channel(r), g: channel(g), b: channel(b), alpha: toAlpha(parts[3]) };
+}
+function parseFunctional(name, body) {
+  return name.toLowerCase().startsWith("hsl") ? fromHsl(body) : fromRgb(body);
+}
+function findColors(value) {
+  const found = [];
+  for (const match of value.matchAll(new RegExp(FUNCTIONAL_SOURCE, "gi"))) {
+    const parsed = parseFunctional(match[1], match[2]);
+    if (parsed) found.push(parsed);
+  }
+  for (const match of value.matchAll(new RegExp(HEX_SOURCE, "gi"))) {
+    const parsed = fromHex(match[1]);
+    if (parsed) found.push(parsed);
+  }
+  return found;
+}
+function linearise(channel8) {
+  const channel = channel8 / 255;
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance({ r, g, b }) {
+  return 0.2126 * linearise(r) + 0.7152 * linearise(g) + 0.0722 * linearise(b);
+}
+function contrastRatio(one, other) {
+  const first = relativeLuminance(one);
+  const second = relativeLuminance(other);
+  const lighter = Math.max(first, second);
+  const darker = Math.min(first, second);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function compositeOver(foreground, background) {
+  if (foreground.alpha >= 1) return foreground;
+  const mix = (front, back) => Math.round(front * foreground.alpha + back * (1 - foreground.alpha));
+  return {
+    r: mix(foreground.r, background.r),
+    g: mix(foreground.g, background.g),
+    b: mix(foreground.b, background.b),
+    alpha: 1
+  };
+}
+
+// src/measure.ts
+function parse(role, value) {
+  const colours = findColors(value);
+  if (colours.length !== 1) throw new Error(`contrastRatio: ${role} "${value}" must hold exactly one #hex, rgb() or hsl() colour, found ${colours.length}`);
+  return colours[0];
+}
+function contrastRatio2(foreground, background) {
+  const back = parse("background", background);
+  if (back.alpha < 1) throw new Error(`contrastRatio: background "${background}" is translucent; composite it onto its surface first`);
+  return contrastRatio(compositeOver(parse("foreground", foreground), back), back);
+}
+
+// src/oklab.ts
+var HEX = /^#([0-9a-f]{6})$/i;
+function parseHex(hex) {
+  const match = HEX.exec(hex);
+  if (match === null) throw new Error(`oklab: expected #rrggbb, got "${hex}"`);
+  const digits = match[1];
+  return [0, 2, 4].map((offset) => Number.parseInt(digits.slice(offset, offset + 2), 16) / 255);
+}
+var toLinear = (channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+var toGamma = (channel) => channel <= 31308e-7 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - 0.055;
+var clamp2 = (channel) => Math.min(1, Math.max(0, channel));
+function toOklab(hex) {
+  const [r, g, b] = parseHex(hex).map(toLinear);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function fromOklab([lightness, a, b]) {
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const linear = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+  return `#${linear.map((channel) => Math.round(clamp2(toGamma(clamp2(channel))) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function mixOklab(foreground, background, weight) {
+  if (!(weight >= 0 && weight <= 1)) throw new Error(`oklab: weight must be within [0, 1], got ${weight}`);
+  const front = toOklab(foreground);
+  const back = toOklab(background);
+  return fromOklab(front.map((channel, index) => channel * weight + back[index] * (1 - weight)));
+}
+var TONE_WEIGHTS = {
+  background: 0.04,
+  border: 0.14,
+  backgroundHover: 0.12,
+  borderHover: 0.45
+};
+function toneValues(tones, surfaceRaised) {
+  const out = {};
+  for (const tone of Object.keys(tones)) {
+    for (const [state, weight] of Object.entries(TONE_WEIGHTS)) out[`tone.${tone}.${state}`] = mixOklab(tones[tone], surfaceRaised, weight);
+  }
+  return out;
+}
+
+export { CDT_PREFIX, PACKAGE_NAME, SEVERITY_ICONS, STATUS_ICONS, breakpoints, contrastRatio2 as contrastRatio, fromOklab, mixOklab, toOklab, tokens, toneValues };

package/dist/tokens.css

@@ -69,6 +69,15 @@
   --cdt-state-disabled: #18202c;
   --cdt-state-disabled-policy: #422006;
 
+  --cdt-tone-accent-background: #172131;
+  --cdt-tone-accent-border: #1f2944;
+  --cdt-tone-accent-background-hover: #1d2840;
+  --cdt-tone-accent-border-hover: #394682;
+  --cdt-tone-danger-background: #1d202c;
+  --cdt-tone-danger-border: #312630;
+  --cdt-tone-danger-background-hover: #2d252f;
+  --cdt-tone-danger-border-hover: #72363a;
+
   --cdt-dataviz-series-1: #e88171;
   --cdt-dataviz-series-2: #1db198;
   --cdt-dataviz-series-3: #e979ad;
@@ -427,6 +436,15 @@
   --cdt-state-disabled: #e2e8f0;
   --cdt-state-disabled-policy: #fef3c7;
 
+  --cdt-tone-accent-background: #f3f6fc;
+  --cdt-tone-accent-border: #e0e6fa;
+  --cdt-tone-accent-background-hover: #e4e9fa;
+  --cdt-tone-accent-border-hover: #a7b5ef;
+  --cdt-tone-danger-background: #fbf4f4;
+  --cdt-tone-danger-border: #f9e0dd;
+  --cdt-tone-danger-background-hover: #f9e4e2;
+  --cdt-tone-danger-border-hover: #eea39a;
+
   --cdt-dataviz-series-1: #d45946;
   --cdt-dataviz-series-2: #228f7d;
   --cdt-dataviz-series-3: #d54e8d;
@@ -786,6 +804,15 @@
   --cdt-state-disabled: #e2e8f0;
   --cdt-state-disabled-policy: #fef3c7;
 
+  --cdt-tone-accent-background: #f3f6fc;
+  --cdt-tone-accent-border: #e0e6fa;
+  --cdt-tone-accent-background-hover: #e4e9fa;
+  --cdt-tone-accent-border-hover: #a7b5ef;
+  --cdt-tone-danger-background: #fbf4f4;
+  --cdt-tone-danger-border: #f9e0dd;
+  --cdt-tone-danger-background-hover: #f9e4e2;
+  --cdt-tone-danger-border-hover: #eea39a;
+
   --cdt-dataviz-series-1: #d45946;
   --cdt-dataviz-series-2: #228f7d;
   --cdt-dataviz-series-3: #d54e8d;

package/dist/tokens.d.ts

@@ -105,6 +105,20 @@ declare const tokens: {
         readonly disabled: "var(--cdt-state-disabled)";
         readonly disabledPolicy: "var(--cdt-state-disabled-policy)";
     };
+    readonly tone: {
+        readonly accent: {
+            readonly background: "var(--cdt-tone-accent-background)";
+            readonly border: "var(--cdt-tone-accent-border)";
+            readonly backgroundHover: "var(--cdt-tone-accent-background-hover)";
+            readonly borderHover: "var(--cdt-tone-accent-border-hover)";
+        };
+        readonly danger: {
+            readonly background: "var(--cdt-tone-danger-background)";
+            readonly border: "var(--cdt-tone-danger-border)";
+            readonly backgroundHover: "var(--cdt-tone-danger-background-hover)";
+            readonly borderHover: "var(--cdt-tone-danger-border-hover)";
+        };
+    };
     readonly dataviz: {
         readonly series: {
             readonly "1": "var(--cdt-dataviz-series-1)";

package/dist/tokens.js

@@ -99,6 +99,20 @@ var tokens = {
     disabled: "var(--cdt-state-disabled)",
     disabledPolicy: "var(--cdt-state-disabled-policy)"
   },
+  tone: {
+    accent: {
+      background: "var(--cdt-tone-accent-background)",
+      border: "var(--cdt-tone-accent-border)",
+      backgroundHover: "var(--cdt-tone-accent-background-hover)",
+      borderHover: "var(--cdt-tone-accent-border-hover)"
+    },
+    danger: {
+      background: "var(--cdt-tone-danger-background)",
+      border: "var(--cdt-tone-danger-border)",
+      backgroundHover: "var(--cdt-tone-danger-background-hover)",
+      borderHover: "var(--cdt-tone-danger-border-hover)"
+    }
+  },
   dataviz: {
     series: {
       "1": "var(--cdt-dataviz-series-1)",

package/dist/tokens.json

@@ -582,6 +582,94 @@
         "light": "#fef3c7"
       }
     },
+    {
+      "key": "tone.accent.background",
+      "cssName": "--cdt-tone-accent-background",
+      "tier": "semantic",
+      "usage": "decorative",
+      "description": "Secondary accent-tone button rest fill: 4% of `accent` over `surface.raised`, mixed in OKLab at build time (CR-050).",
+      "values": {
+        "dark": "#172131",
+        "light": "#f3f6fc"
+      }
+    },
+    {
+      "key": "tone.accent.border",
+      "cssName": "--cdt-tone-accent-border",
+      "tier": "semantic",
+      "usage": "decorative",
+      "description": "Secondary accent-tone button rest edge: 14% of `accent` over `surface.raised`, mixed in OKLab at build time (CR-050).",
+      "values": {
+        "dark": "#1f2944",
+        "light": "#e0e6fa"
+      }
+    },
+    {
+      "key": "tone.accent.backgroundHover",
+      "cssName": "--cdt-tone-accent-background-hover",
+      "tier": "semantic",
+      "usage": "decorative",
+      "description": "Secondary accent-tone button hover fill: 12% of `accent` over `surface.raised`, mixed in OKLab at build time (CR-050).",
+      "values": {
+        "dark": "#1d2840",
+        "light": "#e4e9fa"
+      }
+    },
+    {
+      "key": "tone.accent.borderHover",
+      "cssName": "--cdt-tone-accent-border-hover",
+      "tier": "semantic",
+      "usage": "decorative",
+      "description": "Secondary accent-tone button hover edge: 45% of `accent` over `surface.raised`, mixed in OKLab at build time (CR-050).",
+      "values": {
+        "dark": "#394682",
+        "light": "#a7b5ef"
+      }
+    },
+    {
+      "key": "tone.danger.background",
+      "cssName": "--cdt-tone-danger-background",
+      "tier": "semantic",
+      "usage": "decorative",
+      "description": "Secondary danger-tone button rest fill: 4% of `status.danger` over `surface.raised`, mixed in OKLab at build time (CR-050).",
+      "values": {
+        "dark": "#1d202c",
+        "light": "#fbf4f4"
+      }
+    },
+    {
+      "key": "tone.danger.border",
+      "cssName": "--cdt-tone-danger-border",
+      "tier": "semantic",
+      "usage": "decorative",
+      "description": "Secondary danger-tone button rest edge: 14% of `status.danger` over `surface.raised`, mixed in OKLab at build time (CR-050).",
+      "values": {
+        "dark": "#312630",
+        "light": "#f9e0dd"
+      }
+    },
+    {
+      "key": "tone.danger.backgroundHover",
+      "cssName": "--cdt-tone-danger-background-hover",
+      "tier": "semantic",
+      "usage": "decorative",
+      "description": "Secondary danger-tone button hover fill: 12% of `status.danger` over `surface.raised`, mixed in OKLab at build time (CR-050).",
+      "values": {
+        "dark": "#2d252f",
+        "light": "#f9e4e2"
+      }
+    },
+    {
+      "key": "tone.danger.borderHover",
+      "cssName": "--cdt-tone-danger-border-hover",
+      "tier": "semantic",
+      "usage": "decorative",
+      "description": "Secondary danger-tone button hover edge: 45% of `status.danger` over `surface.raised`, mixed in OKLab at build time (CR-050).",
+      "values": {
+        "dark": "#72363a",
+        "light": "#eea39a"
+      }
+    },
     {
       "key": "dataviz.series.1",
       "cssName": "--cdt-dataviz-series-1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conductor-by-89soone/tokens",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Theme-aware design tokens and validation CLIs for Conductor.",
   "license": "MIT",
   "homepage": "https://89sooner.github.io/design-system/",