@salemcobalt/tokens 0.2.0-rc.2 → 0.2.0-rc.20

package/README.md

@@ -10,3 +10,23 @@ Design tokens for the Salem Cobalt design system. One Style Dictionary source (`
 | `@salemcobalt/tokens/json` | `dist/json/tokens.json`       | `{ light, dark }` flat maps of resolved values.                                                                                                                                                    |
 
 `src/` is the source of truth. `scripts/generate-color.mjs` regenerates the color primitives and the themed color and elevation tokens from OKLCH parameters; run it only when the palette itself changes, then review the diff. `pnpm test` checks every documented text/surface pair against WCAG AA in both themes.
+
+## Layering
+
+`--sc-z-*` is one ordered ladder; every fixed or portaled surface in `@salemcobalt/ui` takes its `z-index` from it and
+nothing else sets one. Popups sit above dialogs on purpose: a Menu, Select or Popover opened from inside a Dialog
+renders over it, and a Tooltip over that.
+
+| Token             | Value | Used by                                                            |
+| ----------------- | ----- | ------------------------------------------------------------------ |
+| `--sc-z-base`     | 0     | Normal flow.                                                       |
+| `--sc-z-raised`   | 1     | Hover and focus rings over siblings.                               |
+| `--sc-z-sticky`   | 100   | Pinned chrome inside the page: sticky Toolbar, Banner, Table head. |
+| `--sc-z-backdrop` | 1100  | Dialog scrim.                                                      |
+| `--sc-z-dialog`   | 1200  | Dialog popup and sheet.                                            |
+| `--sc-z-dropdown` | 1300  | Menu, Select and Popover positioners, so they open over a Dialog.  |
+| `--sc-z-toast`    | 1400  | Toasts.                                                            |
+| `--sc-z-tooltip`  | 1500  | Tooltips, above everything.                                        |
+
+An app that pins its own chrome (a header, a bottom bar) should use `--sc-z-sticky` or a value below
+`--sc-z-backdrop` so dialogs still cover it. `pnpm test` asserts the order.

package/dist/css/tokens.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/tokens 0.2.0-rc.2 — generated from src/ by Style Dictionary. Do not edit. */
+/* @salemcobalt/tokens 0.2.0-rc.20 — generated from src/ by Style Dictionary. Do not edit. */
 :root, [data-theme="light"] {
   color-scheme: light;
   --sc-color-white: #ffffff; /** Primitive. */
@@ -13,6 +13,7 @@
   --sc-color-neutral-600: #707378; /** Primitive. Cool neutral, OKLCH hue 263. */
   --sc-color-neutral-700: #54585f; /** Primitive. Cool neutral, OKLCH hue 263. */
   --sc-color-neutral-800: #3c4046; /** Primitive. Cool neutral, OKLCH hue 263. */
+  --sc-color-neutral-850: #32353b; /** Primitive. Cool neutral, OKLCH hue 263. Between 800 and 900: the dark hover wash on raised surfaces. */
   --sc-color-neutral-900: #282b31; /** Primitive. Cool neutral, OKLCH hue 263. */
   --sc-color-neutral-950: #191c22; /** Primitive. Cool neutral, OKLCH hue 263. */
   --sc-color-neutral-1000: #0e1116; /** Primitive. Cool neutral, OKLCH hue 263. */
@@ -72,21 +73,24 @@
   --sc-color-teal-900: #013937; /** Primitive. OKLCH hue 192. */
   --sc-color-teal-950: #002524; /** Primitive. OKLCH hue 192. */
   --sc-color-surface-backdrop: #0b0d1699; /** Dialog scrim, 60% alpha. */
+  --sc-color-accent-wash: #f6f3ff; /** Faint selected-row wash, lighter than accent.subtle: brand.500 at 7% over surface.default, precomputed as an opaque swatch. Pair with accent.border. */
   --sc-z-base: 0; /** Normal flow. */
   --sc-z-raised: 1; /** Hover and focus rings over siblings. */
-  --sc-z-sticky: 100; /** Sticky headers and table heads. */
-  --sc-z-dropdown: 1000; /** Menus, selects, popovers. */
+  --sc-z-sticky: 100; /** Pinned chrome inside the page: sticky Toolbar, Banner, Table head. */
   --sc-z-backdrop: 1100; /** Dialog scrim. */
-  --sc-z-dialog: 1200; /** Dialog popup. */
-  --sc-z-toast: 1300; /** Toasts. */
-  --sc-z-tooltip: 1400; /** Tooltips, above everything. */
+  --sc-z-dialog: 1200; /** Dialog popup and sheet. */
+  --sc-z-dropdown: 1300; /** Menus, selects, popovers. Above dialog so a popup opened from inside one shows over it. */
+  --sc-z-toast: 1400; /** Toasts, above open popups. */
+  --sc-z-tooltip: 1500; /** Tooltips, above everything. */
   --sc-duration-fast: 100ms; /** Hover and press color changes. */
   --sc-duration-base: 200ms; /** Dialog enter, backdrop fade. */
   --sc-duration-slow: 300ms; /** Layout shifts, panels sliding. */
   --sc-duration-slower: 500ms; /** Page-level transitions only. */
+  --sc-duration-data: 600ms; /** A value moving to its new amount: a score ring's arc, a meter's fill. */
   --sc-ease-standard: cubic-bezier(0.2, 0, 0, 1); /** Color and size changes. */
   --sc-ease-enter: cubic-bezier(0, 0, 0.2, 1); /** Elements appearing. */
   --sc-ease-exit: cubic-bezier(0.4, 0, 1, 1); /** Elements leaving, at 75% of the enter duration. */
+  --sc-ease-data: cubic-bezier(0.2, 0.7, 0.2, 1); /** A value settling: quick off the mark, then a long, soft landing. Pairs with duration.data. */
   --sc-radius-none: 0px; /** Flush edges, table cells. */
   --sc-radius-xs: 2px; /** Focus ring corners on square elements. */
   --sc-radius-sm: 4px; /** Badge, Kbd, Button sm. */
@@ -109,11 +113,16 @@
   --sc-size-icon-md: 16px; /** Default icon: md controls, menu items, 14px UI text. */
   --sc-size-icon-lg: 20px; /** Icon inside lg controls, headings, Stat. */
   --sc-size-icon-xl: 24px; /** Empty states and feature callouts. */
+  --sc-size-score-sm: 40px; /** Score tile sm: list rows. */
+  --sc-size-score-md: 48px; /** Score tile md: cards and summaries. */
+  --sc-size-score-ring: 64px; /** Score ring: detail headers. */
+  --sc-size-score-ring-stroke: 6px; /** Stroke of the Score ring track and arc. */
   --sc-size-dialog-sm: 400px; /** Dialog max inline size, confirmations. */
   --sc-size-dialog-md: 560px; /** Dialog max inline size, default. */
   --sc-size-dialog-lg: 720px; /** Dialog max inline size, rich content. */
   --sc-border-width-hairline: 1px; /** Every border. */
   --sc-border-width-focus: 2px; /** Focus ring stroke and offset. */
+  --sc-border-width-halo: 4px; /** Soft ring around a current or live marker (box-shadow spread), e.g. the current step. */
   --sc-spacing-none: 0px; /** Reset; Stack and Inline gap="none". */
   --sc-spacing-3xs: 2px; /** Hairline gaps: Kbd group gap, Badge sm padding-block. */
   --sc-spacing-2xs: 4px; /** Icon-to-label gap in sm controls; Badge padding-block; Kbd padding-inline. */
@@ -147,6 +156,7 @@
   --sc-font-tracking-snug: -0.01em; /** Headings from 2xl up. */
   --sc-font-tracking-normal: 0em; /** Text. */
   --sc-font-tracking-wide: 0.04em; /** Uppercase labels. */
+  --sc-font-tracking-wider: 0.07em; /** Uppercase mono overlines (Heading size overline). */
   --sc-font-measure: 65ch; /** Max line length for running text. */
   --sc-elevation-0: none; /** Flat. Card default, Badge, Button. */
   --sc-elevation-1: 0 1px 2px rgba(14, 17, 22, 0.06), 0 1px 3px rgba(14, 17, 22, 0.1); /** Elevated Card and interactive Card hover. */
@@ -158,6 +168,8 @@
   --sc-color-surface-sunken: var(--sc-color-neutral-100); /** Inset wells and code blocks. */
   --sc-color-surface-hover: var(--sc-color-neutral-100); /** Hover wash on rows and ghost controls. */
   --sc-color-surface-active: var(--sc-color-neutral-200); /** Pressed wash on rows and ghost controls. */
+  --sc-color-surface-raised-hover: var(--sc-color-neutral-100); /** Hover wash inside raised surfaces (menus, select popups, dialogs, elevated cards). A step off surface.raised so the highlight shows. */
+  --sc-color-surface-raised-active: var(--sc-color-neutral-200); /** Pressed wash and neutral fills inside raised surfaces. */
   --sc-color-text-default: var(--sc-color-neutral-1000); /** Body and headings on every surface token. */
   --sc-color-text-muted: var(--sc-color-neutral-700); /** Secondary text and metadata on every surface token. */
   --sc-color-text-subtle: var(--sc-color-neutral-600); /** Placeholders and disabled labels; 4.5:1 on surface.default only. */
@@ -172,24 +184,33 @@
   --sc-color-accent-active: var(--sc-color-brand-800); /** Primary Button pressed. Light is #4700ab exactly. */
   --sc-color-accent-subtle: var(--sc-color-brand-50); /** Soft accent Badge fill, selected row wash. */
   --sc-color-accent-text: var(--sc-color-brand-700); /** Text on accent.subtle and surface.default. */
+  --sc-color-accent-border: var(--sc-color-brand-500); /** Selection border on accent.wash (plain Card selected); 3:1 on accent.wash and every surface. */
   --sc-color-success-subtle: var(--sc-color-green-50); /** Soft success Badge fill. */
   --sc-color-success-text: var(--sc-color-green-800); /** Text on success.subtle and surface.default. */
   --sc-color-success-solid: var(--sc-color-green-700); /** Solid success Badge fill. */
+  --sc-color-success-border: var(--sc-color-green-500); /** Tone border and outline; 3:1 on success.subtle and every surface. */
   --sc-color-warning-subtle: var(--sc-color-amber-50); /** Soft warning Badge fill. */
   --sc-color-warning-text: var(--sc-color-amber-900); /** Text on warning.subtle and surface.default. */
   --sc-color-warning-solid: var(--sc-color-amber-700); /** Solid warning Badge fill. */
+  --sc-color-warning-border: var(--sc-color-amber-500); /** Tone border and outline; 3:1 on warning.subtle and every surface. */
   --sc-color-info-subtle: var(--sc-color-teal-50); /** Soft info Badge fill. */
   --sc-color-info-text: var(--sc-color-teal-700); /** Text on info.subtle and surface.default. */
   --sc-color-info-solid: var(--sc-color-teal-600); /** Solid info Badge fill. */
   --sc-color-danger-subtle: var(--sc-color-red-50); /** Soft danger Badge fill. */
   --sc-color-danger-text: var(--sc-color-red-800); /** Text on danger.subtle and surface.default. */
   --sc-color-danger-solid: var(--sc-color-red-700); /** Danger Button fill and solid danger Badge. */
+  --sc-color-danger-border: var(--sc-color-red-500); /** Tone border and outline; 3:1 on danger.subtle and every surface. */
   --sc-color-danger-hover: var(--sc-color-red-800); /** Danger Button hover. */
+  --sc-color-diff-added-wash: var(--sc-color-green-50); /** Tint behind added text in a word diff. */
+  --sc-color-diff-added-stroke: var(--sc-color-green-600); /** Underline under added text; 3:1 on diff.added-wash. */
+  --sc-color-diff-removed-wash: var(--sc-color-red-50); /** Tint behind removed text in a word diff. Removed text is text.muted. */
+  --sc-color-diff-removed-stroke: var(--sc-color-red-600); /** Strike-through on removed text; 3:1 on diff.removed-wash. */
 }
 
 [data-theme="dark"] {
   color-scheme: dark;
   --sc-color-surface-backdrop: #00000099; /** Dialog scrim, 60% alpha. */
+  --sc-color-accent-wash: #232431; /** Faint selected-row wash, lighter than accent.subtle: brand.400 at 7% over surface.default, precomputed as an opaque swatch. Pair with accent.border. */
   --sc-elevation-0: none; /** Flat. Card default, Badge, Button. */
   --sc-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); /** Elevated Card and interactive Card hover. */
   --sc-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 20px -4px rgba(0, 0, 0, 0.6); /** Menus, popovers, toasts. */
@@ -200,6 +221,8 @@
   --sc-color-surface-sunken: var(--sc-color-black); /** Inset wells and code blocks. */
   --sc-color-surface-hover: var(--sc-color-neutral-900); /** Hover wash on rows and ghost controls. */
   --sc-color-surface-active: var(--sc-color-neutral-800); /** Pressed wash on rows and ghost controls. */
+  --sc-color-surface-raised-hover: var(--sc-color-neutral-850); /** Hover wash inside raised surfaces (menus, select popups, dialogs, elevated cards). A step off surface.raised so the highlight shows. */
+  --sc-color-surface-raised-active: var(--sc-color-neutral-800); /** Pressed wash and neutral fills inside raised surfaces. */
   --sc-color-text-default: var(--sc-color-neutral-50); /** Body and headings on every surface token. */
   --sc-color-text-muted: var(--sc-color-neutral-400); /** Secondary text and metadata on every surface token. */
   --sc-color-text-subtle: var(--sc-color-neutral-500); /** Placeholders and disabled labels; 4.5:1 on surface.default only. */
@@ -214,25 +237,34 @@
   --sc-color-accent-active: var(--sc-color-brand-200); /** Primary Button pressed. Light is #4700ab exactly. */
   --sc-color-accent-subtle: var(--sc-color-brand-950); /** Soft accent Badge fill, selected row wash. */
   --sc-color-accent-text: var(--sc-color-brand-300); /** Text on accent.subtle and surface.default. */
+  --sc-color-accent-border: var(--sc-color-brand-500); /** Selection border on accent.wash (plain Card selected); 3:1 on accent.wash and every surface. */
   --sc-color-success-subtle: var(--sc-color-green-950); /** Soft success Badge fill. */
   --sc-color-success-text: var(--sc-color-green-300); /** Text on success.subtle and surface.default. */
   --sc-color-success-solid: var(--sc-color-green-400); /** Solid success Badge fill. */
+  --sc-color-success-border: var(--sc-color-green-500); /** Tone border and outline; 3:1 on success.subtle and every surface. */
   --sc-color-warning-subtle: var(--sc-color-amber-950); /** Soft warning Badge fill. */
   --sc-color-warning-text: var(--sc-color-amber-300); /** Text on warning.subtle and surface.default. */
   --sc-color-warning-solid: var(--sc-color-amber-400); /** Solid warning Badge fill. */
+  --sc-color-warning-border: var(--sc-color-amber-500); /** Tone border and outline; 3:1 on warning.subtle and every surface. */
   --sc-color-info-subtle: var(--sc-color-teal-950); /** Soft info Badge fill. */
   --sc-color-info-text: var(--sc-color-teal-300); /** Text on info.subtle and surface.default. */
   --sc-color-info-solid: var(--sc-color-teal-400); /** Solid info Badge fill. */
   --sc-color-danger-subtle: var(--sc-color-red-950); /** Soft danger Badge fill. */
   --sc-color-danger-text: var(--sc-color-red-300); /** Text on danger.subtle and surface.default. */
   --sc-color-danger-solid: var(--sc-color-red-400); /** Danger Button fill and solid danger Badge. */
+  --sc-color-danger-border: var(--sc-color-red-500); /** Tone border and outline; 3:1 on danger.subtle and every surface. */
   --sc-color-danger-hover: var(--sc-color-red-300); /** Danger Button hover. */
+  --sc-color-diff-added-wash: var(--sc-color-green-950); /** Tint behind added text in a word diff. */
+  --sc-color-diff-added-stroke: var(--sc-color-green-400); /** Underline under added text; 3:1 on diff.added-wash. */
+  --sc-color-diff-removed-wash: var(--sc-color-red-950); /** Tint behind removed text in a word diff. Removed text is text.muted. */
+  --sc-color-diff-removed-stroke: var(--sc-color-red-400); /** Strike-through on removed text; 3:1 on diff.removed-wash. */
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     color-scheme: dark;
     --sc-color-surface-backdrop: #00000099; /** Dialog scrim, 60% alpha. */
+    --sc-color-accent-wash: #232431; /** Faint selected-row wash, lighter than accent.subtle: brand.400 at 7% over surface.default, precomputed as an opaque swatch. Pair with accent.border. */
     --sc-elevation-0: none; /** Flat. Card default, Badge, Button. */
     --sc-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); /** Elevated Card and interactive Card hover. */
     --sc-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 20px -4px rgba(0, 0, 0, 0.6); /** Menus, popovers, toasts. */
@@ -243,6 +275,8 @@
     --sc-color-surface-sunken: var(--sc-color-black); /** Inset wells and code blocks. */
     --sc-color-surface-hover: var(--sc-color-neutral-900); /** Hover wash on rows and ghost controls. */
     --sc-color-surface-active: var(--sc-color-neutral-800); /** Pressed wash on rows and ghost controls. */
+    --sc-color-surface-raised-hover: var(--sc-color-neutral-850); /** Hover wash inside raised surfaces (menus, select popups, dialogs, elevated cards). A step off surface.raised so the highlight shows. */
+    --sc-color-surface-raised-active: var(--sc-color-neutral-800); /** Pressed wash and neutral fills inside raised surfaces. */
     --sc-color-text-default: var(--sc-color-neutral-50); /** Body and headings on every surface token. */
     --sc-color-text-muted: var(--sc-color-neutral-400); /** Secondary text and metadata on every surface token. */
     --sc-color-text-subtle: var(--sc-color-neutral-500); /** Placeholders and disabled labels; 4.5:1 on surface.default only. */
@@ -257,19 +291,27 @@
     --sc-color-accent-active: var(--sc-color-brand-200); /** Primary Button pressed. Light is #4700ab exactly. */
     --sc-color-accent-subtle: var(--sc-color-brand-950); /** Soft accent Badge fill, selected row wash. */
     --sc-color-accent-text: var(--sc-color-brand-300); /** Text on accent.subtle and surface.default. */
+    --sc-color-accent-border: var(--sc-color-brand-500); /** Selection border on accent.wash (plain Card selected); 3:1 on accent.wash and every surface. */
     --sc-color-success-subtle: var(--sc-color-green-950); /** Soft success Badge fill. */
     --sc-color-success-text: var(--sc-color-green-300); /** Text on success.subtle and surface.default. */
     --sc-color-success-solid: var(--sc-color-green-400); /** Solid success Badge fill. */
+    --sc-color-success-border: var(--sc-color-green-500); /** Tone border and outline; 3:1 on success.subtle and every surface. */
     --sc-color-warning-subtle: var(--sc-color-amber-950); /** Soft warning Badge fill. */
     --sc-color-warning-text: var(--sc-color-amber-300); /** Text on warning.subtle and surface.default. */
     --sc-color-warning-solid: var(--sc-color-amber-400); /** Solid warning Badge fill. */
+    --sc-color-warning-border: var(--sc-color-amber-500); /** Tone border and outline; 3:1 on warning.subtle and every surface. */
     --sc-color-info-subtle: var(--sc-color-teal-950); /** Soft info Badge fill. */
     --sc-color-info-text: var(--sc-color-teal-300); /** Text on info.subtle and surface.default. */
     --sc-color-info-solid: var(--sc-color-teal-400); /** Solid info Badge fill. */
     --sc-color-danger-subtle: var(--sc-color-red-950); /** Soft danger Badge fill. */
     --sc-color-danger-text: var(--sc-color-red-300); /** Text on danger.subtle and surface.default. */
     --sc-color-danger-solid: var(--sc-color-red-400); /** Danger Button fill and solid danger Badge. */
+    --sc-color-danger-border: var(--sc-color-red-500); /** Tone border and outline; 3:1 on danger.subtle and every surface. */
     --sc-color-danger-hover: var(--sc-color-red-300); /** Danger Button hover. */
+    --sc-color-diff-added-wash: var(--sc-color-green-950); /** Tint behind added text in a word diff. */
+    --sc-color-diff-added-stroke: var(--sc-color-green-400); /** Underline under added text; 3:1 on diff.added-wash. */
+    --sc-color-diff-removed-wash: var(--sc-color-red-950); /** Tint behind removed text in a word diff. Removed text is text.muted. */
+    --sc-color-diff-removed-stroke: var(--sc-color-red-400); /** Strike-through on removed text; 3:1 on diff.removed-wash. */
   }
 }
 

package/dist/js/tokens.d.ts

@@ -1,4 +1,4 @@
-/* @salemcobalt/tokens 0.2.0-rc.2 — generated from src/ by Style Dictionary. Do not edit. */
+/* @salemcobalt/tokens 0.2.0-rc.20 — generated from src/ by Style Dictionary. Do not edit. */
 export declare const prefix: "sc";
 export declare const tokens: {
   color: {
@@ -15,6 +15,7 @@ export declare const tokens: {
       '600': "#707378",
       '700': "#54585f",
       '800': "#3c4046",
+      '850': "#32353b",
       '900': "#282b31",
       '950': "#191c22",
       '1000': "#0e1116"
@@ -109,6 +110,14 @@ export declare const tokens: {
         light: "#e6e8eb",
         dark: "#3c4046"
       },
+      'raised-hover': {
+        light: "#f2f3f6",
+        dark: "#32353b"
+      },
+      'raised-active': {
+        light: "#e6e8eb",
+        dark: "#3c4046"
+      },
       backdrop: {
         light: "#0b0d1699",
         dark: "#00000099"
@@ -171,9 +180,17 @@ export declare const tokens: {
         light: "#f6f6fe",
         dark: "#200550"
       },
+      wash: {
+        light: "#f6f3ff",
+        dark: "#232431"
+      },
       text: {
         light: "#5821c2",
         dark: "#beb6ff"
+      },
+      border: {
+        light: "#8250fe",
+        dark: "#8250fe"
       }
     },
     success: {
@@ -188,6 +205,10 @@ export declare const tokens: {
       solid: {
         light: "#026a34",
         dark: "#48be72"
+      },
+      border: {
+        light: "#05a152",
+        dark: "#05a152"
       }
     },
     warning: {
@@ -202,6 +223,10 @@ export declare const tokens: {
       solid: {
         light: "#794d02",
         dark: "#db9115"
+      },
+      border: {
+        light: "#b77700",
+        dark: "#b77700"
       }
     },
     info: {
@@ -231,32 +256,56 @@ export declare const tokens: {
         light: "#a8001c",
         dark: "#fe6f6b"
       },
+      border: {
+        light: "#e83f44",
+        dark: "#e83f44"
+      },
       hover: {
         light: "#860014",
         dark: "#ffa59f"
       }
+    },
+    diff: {
+      'added-wash': {
+        light: "#edfbf0",
+        dark: "#00280f"
+      },
+      'added-stroke': {
+        light: "#058141",
+        dark: "#48be72"
+      },
+      'removed-wash': {
+        light: "#fef4f3",
+        dark: "#430005"
+      },
+      'removed-stroke': {
+        light: "#c71529",
+        dark: "#fe6f6b"
+      }
     }
   },
   z: {
     base: 0,
     raised: 1,
     sticky: 100,
-    dropdown: 1000,
     backdrop: 1100,
     dialog: 1200,
-    toast: 1300,
-    tooltip: 1400
+    dropdown: 1300,
+    toast: 1400,
+    tooltip: 1500
   },
   duration: {
     fast: "100ms",
     base: "200ms",
     slow: "300ms",
-    slower: "500ms"
+    slower: "500ms",
+    data: "600ms"
   },
   ease: {
     standard: "cubic-bezier(0.2, 0, 0, 1)",
     enter: "cubic-bezier(0, 0, 0.2, 1)",
-    exit: "cubic-bezier(0.4, 0, 1, 1)"
+    exit: "cubic-bezier(0.4, 0, 1, 1)",
+    data: "cubic-bezier(0.2, 0.7, 0.2, 1)"
   },
   radius: {
     none: "0px",
@@ -291,6 +340,12 @@ export declare const tokens: {
       lg: "20px",
       xl: "24px"
     },
+    score: {
+      sm: "40px",
+      md: "48px",
+      ring: "64px",
+      'ring-stroke': "6px"
+    },
     dialog: {
       sm: "400px",
       md: "560px",
@@ -300,7 +355,8 @@ export declare const tokens: {
   border: {
     width: {
       hairline: "1px",
-      focus: "2px"
+      focus: "2px",
+      halo: "4px"
     }
   },
   spacing: {
@@ -347,7 +403,8 @@ export declare const tokens: {
       tight: "-0.02em",
       snug: "-0.01em",
       normal: "0em",
-      wide: "0.04em"
+      wide: "0.04em",
+      wider: "0.07em"
     },
     measure: "65ch"
   },
@@ -370,7 +427,7 @@ export declare const tokens: {
     }
   }
 };
-export type TokenName = "color-white" | "color-black" | "color-neutral-0" | "color-neutral-50" | "color-neutral-100" | "color-neutral-200" | "color-neutral-300" | "color-neutral-400" | "color-neutral-500" | "color-neutral-600" | "color-neutral-700" | "color-neutral-800" | "color-neutral-900" | "color-neutral-950" | "color-neutral-1000" | "color-brand-50" | "color-brand-100" | "color-brand-200" | "color-brand-300" | "color-brand-400" | "color-brand-500" | "color-brand-600" | "color-brand-700" | "color-brand-800" | "color-brand-900" | "color-brand-950" | "color-green-50" | "color-green-100" | "color-green-200" | "color-green-300" | "color-green-400" | "color-green-500" | "color-green-600" | "color-green-700" | "color-green-800" | "color-green-900" | "color-green-950" | "color-amber-50" | "color-amber-100" | "color-amber-200" | "color-amber-300" | "color-amber-400" | "color-amber-500" | "color-amber-600" | "color-amber-700" | "color-amber-800" | "color-amber-900" | "color-amber-950" | "color-red-50" | "color-red-100" | "color-red-200" | "color-red-300" | "color-red-400" | "color-red-500" | "color-red-600" | "color-red-700" | "color-red-800" | "color-red-900" | "color-red-950" | "color-teal-50" | "color-teal-100" | "color-teal-200" | "color-teal-300" | "color-teal-400" | "color-teal-500" | "color-teal-600" | "color-teal-700" | "color-teal-800" | "color-teal-900" | "color-teal-950" | "color-surface-canvas" | "color-surface-default" | "color-surface-raised" | "color-surface-sunken" | "color-surface-hover" | "color-surface-active" | "color-surface-backdrop" | "color-text-default" | "color-text-muted" | "color-text-subtle" | "color-text-on-accent" | "color-text-on-status" | "color-text-link" | "color-border-default" | "color-border-strong" | "color-border-focus" | "color-accent-default" | "color-accent-hover" | "color-accent-active" | "color-accent-subtle" | "color-accent-text" | "color-success-subtle" | "color-success-text" | "color-success-solid" | "color-warning-subtle" | "color-warning-text" | "color-warning-solid" | "color-info-subtle" | "color-info-text" | "color-info-solid" | "color-danger-subtle" | "color-danger-text" | "color-danger-solid" | "color-danger-hover" | "z-base" | "z-raised" | "z-sticky" | "z-dropdown" | "z-backdrop" | "z-dialog" | "z-toast" | "z-tooltip" | "duration-fast" | "duration-base" | "duration-slow" | "duration-slower" | "ease-standard" | "ease-enter" | "ease-exit" | "radius-none" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-2xl" | "radius-full" | "size-control-sm" | "size-control-md" | "size-control-lg" | "size-control-compact-sm" | "size-control-compact-md" | "size-control-compact-lg" | "size-touch-target" | "size-badge-sm" | "size-badge-md" | "size-icon-xs" | "size-icon-sm" | "size-icon-md" | "size-icon-lg" | "size-icon-xl" | "size-dialog-sm" | "size-dialog-md" | "size-dialog-lg" | "border-width-hairline" | "border-width-focus" | "spacing-none" | "spacing-3xs" | "spacing-2xs" | "spacing-xs" | "spacing-sm" | "spacing-md" | "spacing-lg" | "spacing-xl" | "spacing-2xl" | "spacing-3xl" | "spacing-4xl" | "font-family-sans" | "font-family-mono" | "font-size-xs" | "font-size-sm" | "font-size-md" | "font-size-lg" | "font-size-xl" | "font-size-2xl" | "font-size-3xl" | "font-size-4xl" | "font-size-5xl" | "font-weight-regular" | "font-weight-medium" | "font-weight-semibold" | "font-line-height-tight" | "font-line-height-snug" | "font-line-height-normal" | "font-line-height-ui" | "font-tracking-tight" | "font-tracking-snug" | "font-tracking-normal" | "font-tracking-wide" | "font-measure" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3";
+export type TokenName = "color-white" | "color-black" | "color-neutral-0" | "color-neutral-50" | "color-neutral-100" | "color-neutral-200" | "color-neutral-300" | "color-neutral-400" | "color-neutral-500" | "color-neutral-600" | "color-neutral-700" | "color-neutral-800" | "color-neutral-850" | "color-neutral-900" | "color-neutral-950" | "color-neutral-1000" | "color-brand-50" | "color-brand-100" | "color-brand-200" | "color-brand-300" | "color-brand-400" | "color-brand-500" | "color-brand-600" | "color-brand-700" | "color-brand-800" | "color-brand-900" | "color-brand-950" | "color-green-50" | "color-green-100" | "color-green-200" | "color-green-300" | "color-green-400" | "color-green-500" | "color-green-600" | "color-green-700" | "color-green-800" | "color-green-900" | "color-green-950" | "color-amber-50" | "color-amber-100" | "color-amber-200" | "color-amber-300" | "color-amber-400" | "color-amber-500" | "color-amber-600" | "color-amber-700" | "color-amber-800" | "color-amber-900" | "color-amber-950" | "color-red-50" | "color-red-100" | "color-red-200" | "color-red-300" | "color-red-400" | "color-red-500" | "color-red-600" | "color-red-700" | "color-red-800" | "color-red-900" | "color-red-950" | "color-teal-50" | "color-teal-100" | "color-teal-200" | "color-teal-300" | "color-teal-400" | "color-teal-500" | "color-teal-600" | "color-teal-700" | "color-teal-800" | "color-teal-900" | "color-teal-950" | "color-surface-canvas" | "color-surface-default" | "color-surface-raised" | "color-surface-sunken" | "color-surface-hover" | "color-surface-active" | "color-surface-raised-hover" | "color-surface-raised-active" | "color-surface-backdrop" | "color-text-default" | "color-text-muted" | "color-text-subtle" | "color-text-on-accent" | "color-text-on-status" | "color-text-link" | "color-border-default" | "color-border-strong" | "color-border-focus" | "color-accent-default" | "color-accent-hover" | "color-accent-active" | "color-accent-subtle" | "color-accent-wash" | "color-accent-text" | "color-accent-border" | "color-success-subtle" | "color-success-text" | "color-success-solid" | "color-success-border" | "color-warning-subtle" | "color-warning-text" | "color-warning-solid" | "color-warning-border" | "color-info-subtle" | "color-info-text" | "color-info-solid" | "color-danger-subtle" | "color-danger-text" | "color-danger-solid" | "color-danger-border" | "color-danger-hover" | "color-diff-added-wash" | "color-diff-added-stroke" | "color-diff-removed-wash" | "color-diff-removed-stroke" | "z-base" | "z-raised" | "z-sticky" | "z-backdrop" | "z-dialog" | "z-dropdown" | "z-toast" | "z-tooltip" | "duration-fast" | "duration-base" | "duration-slow" | "duration-slower" | "duration-data" | "ease-standard" | "ease-enter" | "ease-exit" | "ease-data" | "radius-none" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-2xl" | "radius-full" | "size-control-sm" | "size-control-md" | "size-control-lg" | "size-control-compact-sm" | "size-control-compact-md" | "size-control-compact-lg" | "size-touch-target" | "size-badge-sm" | "size-badge-md" | "size-icon-xs" | "size-icon-sm" | "size-icon-md" | "size-icon-lg" | "size-icon-xl" | "size-score-sm" | "size-score-md" | "size-score-ring" | "size-score-ring-stroke" | "size-dialog-sm" | "size-dialog-md" | "size-dialog-lg" | "border-width-hairline" | "border-width-focus" | "border-width-halo" | "spacing-none" | "spacing-3xs" | "spacing-2xs" | "spacing-xs" | "spacing-sm" | "spacing-md" | "spacing-lg" | "spacing-xl" | "spacing-2xl" | "spacing-3xl" | "spacing-4xl" | "font-family-sans" | "font-family-mono" | "font-size-xs" | "font-size-sm" | "font-size-md" | "font-size-lg" | "font-size-xl" | "font-size-2xl" | "font-size-3xl" | "font-size-4xl" | "font-size-5xl" | "font-weight-regular" | "font-weight-medium" | "font-weight-semibold" | "font-line-height-tight" | "font-line-height-snug" | "font-line-height-normal" | "font-line-height-ui" | "font-tracking-tight" | "font-tracking-snug" | "font-tracking-normal" | "font-tracking-wide" | "font-tracking-wider" | "font-measure" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3";
 export declare const tokenNames: readonly TokenName[];
 export type Theme = 'light' | 'dark';
 export declare const cssVar: (name: TokenName) => `var(--sc-${TokenName})`;

package/dist/js/tokens.js

@@ -1,4 +1,4 @@
-/* @salemcobalt/tokens 0.2.0-rc.2 — generated from src/ by Style Dictionary. Do not edit. */
+/* @salemcobalt/tokens 0.2.0-rc.20 — generated from src/ by Style Dictionary. Do not edit. */
 export const prefix = "sc";
 export const tokens = {
   "color": {
@@ -15,6 +15,7 @@ export const tokens = {
       "600": "#707378",
       "700": "#54585f",
       "800": "#3c4046",
+      "850": "#32353b",
       "900": "#282b31",
       "950": "#191c22",
       "1000": "#0e1116"
@@ -109,6 +110,14 @@ export const tokens = {
         "light": "#e6e8eb",
         "dark": "#3c4046"
       },
+      "raised-hover": {
+        "light": "#f2f3f6",
+        "dark": "#32353b"
+      },
+      "raised-active": {
+        "light": "#e6e8eb",
+        "dark": "#3c4046"
+      },
       "backdrop": {
         "light": "#0b0d1699",
         "dark": "#00000099"
@@ -171,9 +180,17 @@ export const tokens = {
         "light": "#f6f6fe",
         "dark": "#200550"
       },
+      "wash": {
+        "light": "#f6f3ff",
+        "dark": "#232431"
+      },
       "text": {
         "light": "#5821c2",
         "dark": "#beb6ff"
+      },
+      "border": {
+        "light": "#8250fe",
+        "dark": "#8250fe"
       }
     },
     "success": {
@@ -188,6 +205,10 @@ export const tokens = {
       "solid": {
         "light": "#026a34",
         "dark": "#48be72"
+      },
+      "border": {
+        "light": "#05a152",
+        "dark": "#05a152"
       }
     },
     "warning": {
@@ -202,6 +223,10 @@ export const tokens = {
       "solid": {
         "light": "#794d02",
         "dark": "#db9115"
+      },
+      "border": {
+        "light": "#b77700",
+        "dark": "#b77700"
       }
     },
     "info": {
@@ -231,32 +256,56 @@ export const tokens = {
         "light": "#a8001c",
         "dark": "#fe6f6b"
       },
+      "border": {
+        "light": "#e83f44",
+        "dark": "#e83f44"
+      },
       "hover": {
         "light": "#860014",
         "dark": "#ffa59f"
       }
+    },
+    "diff": {
+      "added-wash": {
+        "light": "#edfbf0",
+        "dark": "#00280f"
+      },
+      "added-stroke": {
+        "light": "#058141",
+        "dark": "#48be72"
+      },
+      "removed-wash": {
+        "light": "#fef4f3",
+        "dark": "#430005"
+      },
+      "removed-stroke": {
+        "light": "#c71529",
+        "dark": "#fe6f6b"
+      }
     }
   },
   "z": {
     "base": 0,
     "raised": 1,
     "sticky": 100,
-    "dropdown": 1000,
     "backdrop": 1100,
     "dialog": 1200,
-    "toast": 1300,
-    "tooltip": 1400
+    "dropdown": 1300,
+    "toast": 1400,
+    "tooltip": 1500
   },
   "duration": {
     "fast": "100ms",
     "base": "200ms",
     "slow": "300ms",
-    "slower": "500ms"
+    "slower": "500ms",
+    "data": "600ms"
   },
   "ease": {
     "standard": "cubic-bezier(0.2, 0, 0, 1)",
     "enter": "cubic-bezier(0, 0, 0.2, 1)",
-    "exit": "cubic-bezier(0.4, 0, 1, 1)"
+    "exit": "cubic-bezier(0.4, 0, 1, 1)",
+    "data": "cubic-bezier(0.2, 0.7, 0.2, 1)"
   },
   "radius": {
     "none": "0px",
@@ -291,6 +340,12 @@ export const tokens = {
       "lg": "20px",
       "xl": "24px"
     },
+    "score": {
+      "sm": "40px",
+      "md": "48px",
+      "ring": "64px",
+      "ring-stroke": "6px"
+    },
     "dialog": {
       "sm": "400px",
       "md": "560px",
@@ -300,7 +355,8 @@ export const tokens = {
   "border": {
     "width": {
       "hairline": "1px",
-      "focus": "2px"
+      "focus": "2px",
+      "halo": "4px"
     }
   },
   "spacing": {
@@ -347,7 +403,8 @@ export const tokens = {
       "tight": "-0.02em",
       "snug": "-0.01em",
       "normal": "0em",
-      "wide": "0.04em"
+      "wide": "0.04em",
+      "wider": "0.07em"
     },
     "measure": "65ch"
   },
@@ -370,5 +427,5 @@ export const tokens = {
     }
   }
 };
-export const tokenNames = ["color-white","color-black","color-neutral-0","color-neutral-50","color-neutral-100","color-neutral-200","color-neutral-300","color-neutral-400","color-neutral-500","color-neutral-600","color-neutral-700","color-neutral-800","color-neutral-900","color-neutral-950","color-neutral-1000","color-brand-50","color-brand-100","color-brand-200","color-brand-300","color-brand-400","color-brand-500","color-brand-600","color-brand-700","color-brand-800","color-brand-900","color-brand-950","color-green-50","color-green-100","color-green-200","color-green-300","color-green-400","color-green-500","color-green-600","color-green-700","color-green-800","color-green-900","color-green-950","color-amber-50","color-amber-100","color-amber-200","color-amber-300","color-amber-400","color-amber-500","color-amber-600","color-amber-700","color-amber-800","color-amber-900","color-amber-950","color-red-50","color-red-100","color-red-200","color-red-300","color-red-400","color-red-500","color-red-600","color-red-700","color-red-800","color-red-900","color-red-950","color-teal-50","color-teal-100","color-teal-200","color-teal-300","color-teal-400","color-teal-500","color-teal-600","color-teal-700","color-teal-800","color-teal-900","color-teal-950","color-surface-canvas","color-surface-default","color-surface-raised","color-surface-sunken","color-surface-hover","color-surface-active","color-surface-backdrop","color-text-default","color-text-muted","color-text-subtle","color-text-on-accent","color-text-on-status","color-text-link","color-border-default","color-border-strong","color-border-focus","color-accent-default","color-accent-hover","color-accent-active","color-accent-subtle","color-accent-text","color-success-subtle","color-success-text","color-success-solid","color-warning-subtle","color-warning-text","color-warning-solid","color-info-subtle","color-info-text","color-info-solid","color-danger-subtle","color-danger-text","color-danger-solid","color-danger-hover","z-base","z-raised","z-sticky","z-dropdown","z-backdrop","z-dialog","z-toast","z-tooltip","duration-fast","duration-base","duration-slow","duration-slower","ease-standard","ease-enter","ease-exit","radius-none","radius-xs","radius-sm","radius-md","radius-lg","radius-xl","radius-2xl","radius-full","size-control-sm","size-control-md","size-control-lg","size-control-compact-sm","size-control-compact-md","size-control-compact-lg","size-touch-target","size-badge-sm","size-badge-md","size-icon-xs","size-icon-sm","size-icon-md","size-icon-lg","size-icon-xl","size-dialog-sm","size-dialog-md","size-dialog-lg","border-width-hairline","border-width-focus","spacing-none","spacing-3xs","spacing-2xs","spacing-xs","spacing-sm","spacing-md","spacing-lg","spacing-xl","spacing-2xl","spacing-3xl","spacing-4xl","font-family-sans","font-family-mono","font-size-xs","font-size-sm","font-size-md","font-size-lg","font-size-xl","font-size-2xl","font-size-3xl","font-size-4xl","font-size-5xl","font-weight-regular","font-weight-medium","font-weight-semibold","font-line-height-tight","font-line-height-snug","font-line-height-normal","font-line-height-ui","font-tracking-tight","font-tracking-snug","font-tracking-normal","font-tracking-wide","font-measure","elevation-0","elevation-1","elevation-2","elevation-3"];
+export const tokenNames = ["color-white","color-black","color-neutral-0","color-neutral-50","color-neutral-100","color-neutral-200","color-neutral-300","color-neutral-400","color-neutral-500","color-neutral-600","color-neutral-700","color-neutral-800","color-neutral-850","color-neutral-900","color-neutral-950","color-neutral-1000","color-brand-50","color-brand-100","color-brand-200","color-brand-300","color-brand-400","color-brand-500","color-brand-600","color-brand-700","color-brand-800","color-brand-900","color-brand-950","color-green-50","color-green-100","color-green-200","color-green-300","color-green-400","color-green-500","color-green-600","color-green-700","color-green-800","color-green-900","color-green-950","color-amber-50","color-amber-100","color-amber-200","color-amber-300","color-amber-400","color-amber-500","color-amber-600","color-amber-700","color-amber-800","color-amber-900","color-amber-950","color-red-50","color-red-100","color-red-200","color-red-300","color-red-400","color-red-500","color-red-600","color-red-700","color-red-800","color-red-900","color-red-950","color-teal-50","color-teal-100","color-teal-200","color-teal-300","color-teal-400","color-teal-500","color-teal-600","color-teal-700","color-teal-800","color-teal-900","color-teal-950","color-surface-canvas","color-surface-default","color-surface-raised","color-surface-sunken","color-surface-hover","color-surface-active","color-surface-raised-hover","color-surface-raised-active","color-surface-backdrop","color-text-default","color-text-muted","color-text-subtle","color-text-on-accent","color-text-on-status","color-text-link","color-border-default","color-border-strong","color-border-focus","color-accent-default","color-accent-hover","color-accent-active","color-accent-subtle","color-accent-wash","color-accent-text","color-accent-border","color-success-subtle","color-success-text","color-success-solid","color-success-border","color-warning-subtle","color-warning-text","color-warning-solid","color-warning-border","color-info-subtle","color-info-text","color-info-solid","color-danger-subtle","color-danger-text","color-danger-solid","color-danger-border","color-danger-hover","color-diff-added-wash","color-diff-added-stroke","color-diff-removed-wash","color-diff-removed-stroke","z-base","z-raised","z-sticky","z-backdrop","z-dialog","z-dropdown","z-toast","z-tooltip","duration-fast","duration-base","duration-slow","duration-slower","duration-data","ease-standard","ease-enter","ease-exit","ease-data","radius-none","radius-xs","radius-sm","radius-md","radius-lg","radius-xl","radius-2xl","radius-full","size-control-sm","size-control-md","size-control-lg","size-control-compact-sm","size-control-compact-md","size-control-compact-lg","size-touch-target","size-badge-sm","size-badge-md","size-icon-xs","size-icon-sm","size-icon-md","size-icon-lg","size-icon-xl","size-score-sm","size-score-md","size-score-ring","size-score-ring-stroke","size-dialog-sm","size-dialog-md","size-dialog-lg","border-width-hairline","border-width-focus","border-width-halo","spacing-none","spacing-3xs","spacing-2xs","spacing-xs","spacing-sm","spacing-md","spacing-lg","spacing-xl","spacing-2xl","spacing-3xl","spacing-4xl","font-family-sans","font-family-mono","font-size-xs","font-size-sm","font-size-md","font-size-lg","font-size-xl","font-size-2xl","font-size-3xl","font-size-4xl","font-size-5xl","font-weight-regular","font-weight-medium","font-weight-semibold","font-line-height-tight","font-line-height-snug","font-line-height-normal","font-line-height-ui","font-tracking-tight","font-tracking-snug","font-tracking-normal","font-tracking-wide","font-tracking-wider","font-measure","elevation-0","elevation-1","elevation-2","elevation-3"];
 export const cssVar = (name) => `var(--sc-${name})`;

package/dist/json/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0-rc.2",
+  "version": "0.2.0-rc.20",
   "prefix": "sc",
   "light": {
     "sc-color-white": "#ffffff",
@@ -14,6 +14,7 @@
     "sc-color-neutral-600": "#707378",
     "sc-color-neutral-700": "#54585f",
     "sc-color-neutral-800": "#3c4046",
+    "sc-color-neutral-850": "#32353b",
     "sc-color-neutral-900": "#282b31",
     "sc-color-neutral-950": "#191c22",
     "sc-color-neutral-1000": "#0e1116",
@@ -78,6 +79,8 @@
     "sc-color-surface-sunken": "#f2f3f6",
     "sc-color-surface-hover": "#f2f3f6",
     "sc-color-surface-active": "#e6e8eb",
+    "sc-color-surface-raised-hover": "#f2f3f6",
+    "sc-color-surface-raised-active": "#e6e8eb",
     "sc-color-surface-backdrop": "#0b0d1699",
     "sc-color-text-default": "#0e1116",
     "sc-color-text-muted": "#54585f",
@@ -92,35 +95,46 @@
     "sc-color-accent-hover": "#6930e0",
     "sc-color-accent-active": "#4700ab",
     "sc-color-accent-subtle": "#f6f6fe",
+    "sc-color-accent-wash": "#f6f3ff",
     "sc-color-accent-text": "#5821c2",
+    "sc-color-accent-border": "#8250fe",
     "sc-color-success-subtle": "#edfbf0",
     "sc-color-success-text": "#015428",
     "sc-color-success-solid": "#026a34",
+    "sc-color-success-border": "#05a152",
     "sc-color-warning-subtle": "#fff5ea",
     "sc-color-warning-text": "#452a00",
     "sc-color-warning-solid": "#794d02",
+    "sc-color-warning-border": "#b77700",
     "sc-color-info-subtle": "#ecfaf9",
     "sc-color-info-text": "#056563",
     "sc-color-info-solid": "#057c79",
     "sc-color-danger-subtle": "#fef4f3",
     "sc-color-danger-text": "#860014",
     "sc-color-danger-solid": "#a8001c",
+    "sc-color-danger-border": "#e83f44",
     "sc-color-danger-hover": "#860014",
+    "sc-color-diff-added-wash": "#edfbf0",
+    "sc-color-diff-added-stroke": "#058141",
+    "sc-color-diff-removed-wash": "#fef4f3",
+    "sc-color-diff-removed-stroke": "#c71529",
     "sc-z-base": 0,
     "sc-z-raised": 1,
     "sc-z-sticky": 100,
-    "sc-z-dropdown": 1000,
     "sc-z-backdrop": 1100,
     "sc-z-dialog": 1200,
-    "sc-z-toast": 1300,
-    "sc-z-tooltip": 1400,
+    "sc-z-dropdown": 1300,
+    "sc-z-toast": 1400,
+    "sc-z-tooltip": 1500,
     "sc-duration-fast": "100ms",
     "sc-duration-base": "200ms",
     "sc-duration-slow": "300ms",
     "sc-duration-slower": "500ms",
+    "sc-duration-data": "600ms",
     "sc-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
     "sc-ease-enter": "cubic-bezier(0, 0, 0.2, 1)",
     "sc-ease-exit": "cubic-bezier(0.4, 0, 1, 1)",
+    "sc-ease-data": "cubic-bezier(0.2, 0.7, 0.2, 1)",
     "sc-radius-none": "0px",
     "sc-radius-xs": "2px",
     "sc-radius-sm": "4px",
@@ -143,11 +157,16 @@
     "sc-size-icon-md": "16px",
     "sc-size-icon-lg": "20px",
     "sc-size-icon-xl": "24px",
+    "sc-size-score-sm": "40px",
+    "sc-size-score-md": "48px",
+    "sc-size-score-ring": "64px",
+    "sc-size-score-ring-stroke": "6px",
     "sc-size-dialog-sm": "400px",
     "sc-size-dialog-md": "560px",
     "sc-size-dialog-lg": "720px",
     "sc-border-width-hairline": "1px",
     "sc-border-width-focus": "2px",
+    "sc-border-width-halo": "4px",
     "sc-spacing-none": "0px",
     "sc-spacing-3xs": "2px",
     "sc-spacing-2xs": "4px",
@@ -181,6 +200,7 @@
     "sc-font-tracking-snug": "-0.01em",
     "sc-font-tracking-normal": "0em",
     "sc-font-tracking-wide": "0.04em",
+    "sc-font-tracking-wider": "0.07em",
     "sc-font-measure": "65ch",
     "sc-elevation-0": "none",
     "sc-elevation-1": "0 1px 2px rgba(14, 17, 22, 0.06), 0 1px 3px rgba(14, 17, 22, 0.1)",
@@ -200,6 +220,7 @@
     "sc-color-neutral-600": "#707378",
     "sc-color-neutral-700": "#54585f",
     "sc-color-neutral-800": "#3c4046",
+    "sc-color-neutral-850": "#32353b",
     "sc-color-neutral-900": "#282b31",
     "sc-color-neutral-950": "#191c22",
     "sc-color-neutral-1000": "#0e1116",
@@ -264,6 +285,8 @@
     "sc-color-surface-sunken": "#05070c",
     "sc-color-surface-hover": "#282b31",
     "sc-color-surface-active": "#3c4046",
+    "sc-color-surface-raised-hover": "#32353b",
+    "sc-color-surface-raised-active": "#3c4046",
     "sc-color-surface-backdrop": "#00000099",
     "sc-color-text-default": "#f9fafd",
     "sc-color-text-muted": "#b7bbc0",
@@ -278,35 +301,46 @@
     "sc-color-accent-hover": "#beb6ff",
     "sc-color-accent-active": "#d9d5ff",
     "sc-color-accent-subtle": "#200550",
+    "sc-color-accent-wash": "#232431",
     "sc-color-accent-text": "#beb6ff",
+    "sc-color-accent-border": "#8250fe",
     "sc-color-success-subtle": "#00280f",
     "sc-color-success-text": "#83d79b",
     "sc-color-success-solid": "#48be72",
+    "sc-color-success-border": "#05a152",
     "sc-color-warning-subtle": "#2e1a00",
     "sc-color-warning-text": "#efb469",
     "sc-color-warning-solid": "#db9115",
+    "sc-color-warning-border": "#b77700",
     "sc-color-info-subtle": "#002524",
     "sc-color-info-text": "#74d4d0",
     "sc-color-info-solid": "#22bab6",
     "sc-color-danger-subtle": "#430005",
     "sc-color-danger-text": "#ffa59f",
     "sc-color-danger-solid": "#fe6f6b",
+    "sc-color-danger-border": "#e83f44",
     "sc-color-danger-hover": "#ffa59f",
+    "sc-color-diff-added-wash": "#00280f",
+    "sc-color-diff-added-stroke": "#48be72",
+    "sc-color-diff-removed-wash": "#430005",
+    "sc-color-diff-removed-stroke": "#fe6f6b",
     "sc-z-base": 0,
     "sc-z-raised": 1,
     "sc-z-sticky": 100,
-    "sc-z-dropdown": 1000,
     "sc-z-backdrop": 1100,
     "sc-z-dialog": 1200,
-    "sc-z-toast": 1300,
-    "sc-z-tooltip": 1400,
+    "sc-z-dropdown": 1300,
+    "sc-z-toast": 1400,
+    "sc-z-tooltip": 1500,
     "sc-duration-fast": "100ms",
     "sc-duration-base": "200ms",
     "sc-duration-slow": "300ms",
     "sc-duration-slower": "500ms",
+    "sc-duration-data": "600ms",
     "sc-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
     "sc-ease-enter": "cubic-bezier(0, 0, 0.2, 1)",
     "sc-ease-exit": "cubic-bezier(0.4, 0, 1, 1)",
+    "sc-ease-data": "cubic-bezier(0.2, 0.7, 0.2, 1)",
     "sc-radius-none": "0px",
     "sc-radius-xs": "2px",
     "sc-radius-sm": "4px",
@@ -329,11 +363,16 @@
     "sc-size-icon-md": "16px",
     "sc-size-icon-lg": "20px",
     "sc-size-icon-xl": "24px",
+    "sc-size-score-sm": "40px",
+    "sc-size-score-md": "48px",
+    "sc-size-score-ring": "64px",
+    "sc-size-score-ring-stroke": "6px",
     "sc-size-dialog-sm": "400px",
     "sc-size-dialog-md": "560px",
     "sc-size-dialog-lg": "720px",
     "sc-border-width-hairline": "1px",
     "sc-border-width-focus": "2px",
+    "sc-border-width-halo": "4px",
     "sc-spacing-none": "0px",
     "sc-spacing-3xs": "2px",
     "sc-spacing-2xs": "4px",
@@ -367,6 +406,7 @@
     "sc-font-tracking-snug": "-0.01em",
     "sc-font-tracking-normal": "0em",
     "sc-font-tracking-wide": "0.04em",
+    "sc-font-tracking-wider": "0.07em",
     "sc-font-measure": "65ch",
     "sc-elevation-0": "none",
     "sc-elevation-1": "0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5)",

package/dist/scss/_tokens.scss

@@ -1,4 +1,4 @@
-// @salemcobalt/tokens 0.2.0-rc.2 — generated from src/ by Style Dictionary. Do not edit.
+// @salemcobalt/tokens 0.2.0-rc.20 — generated from src/ by Style Dictionary. Do not edit.
 $sc-color-white: #ffffff; // Primitive.
 $sc-color-black: #05070c; // Primitive. Deepest dark surface.
 $sc-color-neutral-0: #ffffff; // Primitive. Cool neutral, OKLCH hue 263.
@@ -11,6 +11,7 @@ $sc-color-neutral-500: #8c8f95; // Primitive. Cool neutral, OKLCH hue 263.
 $sc-color-neutral-600: #707378; // Primitive. Cool neutral, OKLCH hue 263.
 $sc-color-neutral-700: #54585f; // Primitive. Cool neutral, OKLCH hue 263.
 $sc-color-neutral-800: #3c4046; // Primitive. Cool neutral, OKLCH hue 263.
+$sc-color-neutral-850: #32353b; // Primitive. Cool neutral, OKLCH hue 263. Between 800 and 900: the dark hover wash on raised surfaces.
 $sc-color-neutral-900: #282b31; // Primitive. Cool neutral, OKLCH hue 263.
 $sc-color-neutral-950: #191c22; // Primitive. Cool neutral, OKLCH hue 263.
 $sc-color-neutral-1000: #0e1116; // Primitive. Cool neutral, OKLCH hue 263.
@@ -75,6 +76,8 @@ $sc-color-surface-raised: #ffffff; // Floating surfaces: Dialog, menus. Pair wit
 $sc-color-surface-sunken: #f2f3f6; // Inset wells and code blocks.
 $sc-color-surface-hover: #f2f3f6; // Hover wash on rows and ghost controls.
 $sc-color-surface-active: #e6e8eb; // Pressed wash on rows and ghost controls.
+$sc-color-surface-raised-hover: #f2f3f6; // Hover wash inside raised surfaces (menus, select popups, dialogs, elevated cards). A step off surface.raised so the highlight shows.
+$sc-color-surface-raised-active: #e6e8eb; // Pressed wash and neutral fills inside raised surfaces.
 $sc-color-surface-backdrop: #0b0d1699; // Dialog scrim, 60% alpha.
 $sc-color-text-default: #0e1116; // Body and headings on every surface token.
 $sc-color-text-muted: #54585f; // Secondary text and metadata on every surface token.
@@ -89,35 +92,46 @@ $sc-color-accent-default: #8250fe; // Primary Button fill, selection, active ind
 $sc-color-accent-hover: #6930e0; // Primary Button hover.
 $sc-color-accent-active: #4700ab; // Primary Button pressed. Light is #4700ab exactly.
 $sc-color-accent-subtle: #f6f6fe; // Soft accent Badge fill, selected row wash.
+$sc-color-accent-wash: #f6f3ff; // Faint selected-row wash, lighter than accent.subtle: brand.500 at 7% over surface.default, precomputed as an opaque swatch. Pair with accent.border.
 $sc-color-accent-text: #5821c2; // Text on accent.subtle and surface.default.
+$sc-color-accent-border: #8250fe; // Selection border on accent.wash (plain Card selected); 3:1 on accent.wash and every surface.
 $sc-color-success-subtle: #edfbf0; // Soft success Badge fill.
 $sc-color-success-text: #015428; // Text on success.subtle and surface.default.
 $sc-color-success-solid: #026a34; // Solid success Badge fill.
+$sc-color-success-border: #05a152; // Tone border and outline; 3:1 on success.subtle and every surface.
 $sc-color-warning-subtle: #fff5ea; // Soft warning Badge fill.
 $sc-color-warning-text: #452a00; // Text on warning.subtle and surface.default.
 $sc-color-warning-solid: #794d02; // Solid warning Badge fill.
+$sc-color-warning-border: #b77700; // Tone border and outline; 3:1 on warning.subtle and every surface.
 $sc-color-info-subtle: #ecfaf9; // Soft info Badge fill.
 $sc-color-info-text: #056563; // Text on info.subtle and surface.default.
 $sc-color-info-solid: #057c79; // Solid info Badge fill.
 $sc-color-danger-subtle: #fef4f3; // Soft danger Badge fill.
 $sc-color-danger-text: #860014; // Text on danger.subtle and surface.default.
 $sc-color-danger-solid: #a8001c; // Danger Button fill and solid danger Badge.
+$sc-color-danger-border: #e83f44; // Tone border and outline; 3:1 on danger.subtle and every surface.
 $sc-color-danger-hover: #860014; // Danger Button hover.
+$sc-color-diff-added-wash: #edfbf0; // Tint behind added text in a word diff.
+$sc-color-diff-added-stroke: #058141; // Underline under added text; 3:1 on diff.added-wash.
+$sc-color-diff-removed-wash: #fef4f3; // Tint behind removed text in a word diff. Removed text is text.muted.
+$sc-color-diff-removed-stroke: #c71529; // Strike-through on removed text; 3:1 on diff.removed-wash.
 $sc-z-base: 0; // Normal flow.
 $sc-z-raised: 1; // Hover and focus rings over siblings.
-$sc-z-sticky: 100; // Sticky headers and table heads.
-$sc-z-dropdown: 1000; // Menus, selects, popovers.
+$sc-z-sticky: 100; // Pinned chrome inside the page: sticky Toolbar, Banner, Table head.
 $sc-z-backdrop: 1100; // Dialog scrim.
-$sc-z-dialog: 1200; // Dialog popup.
-$sc-z-toast: 1300; // Toasts.
-$sc-z-tooltip: 1400; // Tooltips, above everything.
+$sc-z-dialog: 1200; // Dialog popup and sheet.
+$sc-z-dropdown: 1300; // Menus, selects, popovers. Above dialog so a popup opened from inside one shows over it.
+$sc-z-toast: 1400; // Toasts, above open popups.
+$sc-z-tooltip: 1500; // Tooltips, above everything.
 $sc-duration-fast: 100ms; // Hover and press color changes.
 $sc-duration-base: 200ms; // Dialog enter, backdrop fade.
 $sc-duration-slow: 300ms; // Layout shifts, panels sliding.
 $sc-duration-slower: 500ms; // Page-level transitions only.
+$sc-duration-data: 600ms; // A value moving to its new amount: a score ring's arc, a meter's fill.
 $sc-ease-standard: cubic-bezier(0.2, 0, 0, 1); // Color and size changes.
 $sc-ease-enter: cubic-bezier(0, 0, 0.2, 1); // Elements appearing.
 $sc-ease-exit: cubic-bezier(0.4, 0, 1, 1); // Elements leaving, at 75% of the enter duration.
+$sc-ease-data: cubic-bezier(0.2, 0.7, 0.2, 1); // A value settling: quick off the mark, then a long, soft landing. Pairs with duration.data.
 $sc-radius-none: 0px; // Flush edges, table cells.
 $sc-radius-xs: 2px; // Focus ring corners on square elements.
 $sc-radius-sm: 4px; // Badge, Kbd, Button sm.
@@ -140,11 +154,16 @@ $sc-size-icon-sm: 14px; // Icon inside sm controls.
 $sc-size-icon-md: 16px; // Default icon: md controls, menu items, 14px UI text.
 $sc-size-icon-lg: 20px; // Icon inside lg controls, headings, Stat.
 $sc-size-icon-xl: 24px; // Empty states and feature callouts.
+$sc-size-score-sm: 40px; // Score tile sm: list rows.
+$sc-size-score-md: 48px; // Score tile md: cards and summaries.
+$sc-size-score-ring: 64px; // Score ring: detail headers.
+$sc-size-score-ring-stroke: 6px; // Stroke of the Score ring track and arc.
 $sc-size-dialog-sm: 400px; // Dialog max inline size, confirmations.
 $sc-size-dialog-md: 560px; // Dialog max inline size, default.
 $sc-size-dialog-lg: 720px; // Dialog max inline size, rich content.
 $sc-border-width-hairline: 1px; // Every border.
 $sc-border-width-focus: 2px; // Focus ring stroke and offset.
+$sc-border-width-halo: 4px; // Soft ring around a current or live marker (box-shadow spread), e.g. the current step.
 $sc-spacing-none: 0px; // Reset; Stack and Inline gap="none".
 $sc-spacing-3xs: 2px; // Hairline gaps: Kbd group gap, Badge sm padding-block.
 $sc-spacing-2xs: 4px; // Icon-to-label gap in sm controls; Badge padding-block; Kbd padding-inline.
@@ -178,6 +197,7 @@ $sc-font-tracking-tight: -0.02em; // Display sizes.
 $sc-font-tracking-snug: -0.01em; // Headings from 2xl up.
 $sc-font-tracking-normal: 0em; // Text.
 $sc-font-tracking-wide: 0.04em; // Uppercase labels.
+$sc-font-tracking-wider: 0.07em; // Uppercase mono overlines (Heading size overline).
 $sc-font-measure: 65ch; // Max line length for running text.
 $sc-elevation-0: none; // Flat. Card default, Badge, Button.
 $sc-elevation-1: 0 1px 2px rgba(14, 17, 22, 0.06), 0 1px 3px rgba(14, 17, 22, 0.1); // Elevated Card and interactive Card hover.
@@ -191,6 +211,8 @@ $sc-dark: (
   'color-surface-sunken': #05070c,
   'color-surface-hover': #282b31,
   'color-surface-active': #3c4046,
+  'color-surface-raised-hover': #32353b,
+  'color-surface-raised-active': #3c4046,
   'color-surface-backdrop': #00000099,
   'color-text-default': #f9fafd,
   'color-text-muted': #b7bbc0,
@@ -205,20 +227,29 @@ $sc-dark: (
   'color-accent-hover': #beb6ff,
   'color-accent-active': #d9d5ff,
   'color-accent-subtle': #200550,
+  'color-accent-wash': #232431,
   'color-accent-text': #beb6ff,
+  'color-accent-border': #8250fe,
   'color-success-subtle': #00280f,
   'color-success-text': #83d79b,
   'color-success-solid': #48be72,
+  'color-success-border': #05a152,
   'color-warning-subtle': #2e1a00,
   'color-warning-text': #efb469,
   'color-warning-solid': #db9115,
+  'color-warning-border': #b77700,
   'color-info-subtle': #002524,
   'color-info-text': #74d4d0,
   'color-info-solid': #22bab6,
   'color-danger-subtle': #430005,
   'color-danger-text': #ffa59f,
   'color-danger-solid': #fe6f6b,
+  'color-danger-border': #e83f44,
   'color-danger-hover': #ffa59f,
+  'color-diff-added-wash': #00280f,
+  'color-diff-added-stroke': #48be72,
+  'color-diff-removed-wash': #430005,
+  'color-diff-removed-stroke': #fe6f6b,
   'elevation-0': none,
   'elevation-1': 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5),
   'elevation-2': 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 20px -4px rgba(0, 0, 0, 0.6),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salemcobalt/tokens",
-  "version": "0.2.0-rc.2",
+  "version": "0.2.0-rc.20",
   "description": "Design tokens for the Salem Cobalt design system: CSS custom properties, Sass, TypeScript and JSON from one Style Dictionary source.",
   "license": "MIT",
   "repository": {

package/src/global/layer.json

@@ -2,11 +2,19 @@
   "z": {
     "base": { "$value": 0, "$type": "number", "$description": "Normal flow." },
     "raised": { "$value": 1, "$type": "number", "$description": "Hover and focus rings over siblings." },
-    "sticky": { "$value": 100, "$type": "number", "$description": "Sticky headers and table heads." },
-    "dropdown": { "$value": 1000, "$type": "number", "$description": "Menus, selects, popovers." },
+    "sticky": {
+      "$value": 100,
+      "$type": "number",
+      "$description": "Pinned chrome inside the page: sticky Toolbar, Banner, Table head."
+    },
     "backdrop": { "$value": 1100, "$type": "number", "$description": "Dialog scrim." },
-    "dialog": { "$value": 1200, "$type": "number", "$description": "Dialog popup." },
-    "toast": { "$value": 1300, "$type": "number", "$description": "Toasts." },
-    "tooltip": { "$value": 1400, "$type": "number", "$description": "Tooltips, above everything." }
+    "dialog": { "$value": 1200, "$type": "number", "$description": "Dialog popup and sheet." },
+    "dropdown": {
+      "$value": 1300,
+      "$type": "number",
+      "$description": "Menus, selects, popovers. Above dialog so a popup opened from inside one shows over it."
+    },
+    "toast": { "$value": 1400, "$type": "number", "$description": "Toasts, above open popups." },
+    "tooltip": { "$value": 1500, "$type": "number", "$description": "Tooltips, above everything." }
   }
 }

package/src/global/motion.json

@@ -3,7 +3,12 @@
     "fast": { "$value": "100ms", "$type": "duration", "$description": "Hover and press color changes." },
     "base": { "$value": "200ms", "$type": "duration", "$description": "Dialog enter, backdrop fade." },
     "slow": { "$value": "300ms", "$type": "duration", "$description": "Layout shifts, panels sliding." },
-    "slower": { "$value": "500ms", "$type": "duration", "$description": "Page-level transitions only." }
+    "slower": { "$value": "500ms", "$type": "duration", "$description": "Page-level transitions only." },
+    "data": {
+      "$value": "600ms",
+      "$type": "duration",
+      "$description": "A value moving to its new amount: a score ring's arc, a meter's fill."
+    }
   },
   "ease": {
     "standard": {
@@ -20,6 +25,11 @@
       "$value": "cubic-bezier(0.4, 0, 1, 1)",
       "$type": "cubicBezier",
       "$description": "Elements leaving, at 75% of the enter duration."
+    },
+    "data": {
+      "$value": "cubic-bezier(0.2, 0.7, 0.2, 1)",
+      "$type": "cubicBezier",
+      "$description": "A value settling: quick off the mark, then a long, soft landing. Pairs with duration.data."
     }
   }
 }

package/src/global/size.json

@@ -78,6 +78,28 @@
         "$description": "Empty states and feature callouts."
       }
     },
+    "score": {
+      "sm": {
+        "$value": "40px",
+        "$type": "dimension",
+        "$description": "Score tile sm: list rows."
+      },
+      "md": {
+        "$value": "48px",
+        "$type": "dimension",
+        "$description": "Score tile md: cards and summaries."
+      },
+      "ring": {
+        "$value": "64px",
+        "$type": "dimension",
+        "$description": "Score ring: detail headers."
+      },
+      "ring-stroke": {
+        "$value": "6px",
+        "$type": "dimension",
+        "$description": "Stroke of the Score ring track and arc."
+      }
+    },
     "dialog": {
       "sm": {
         "$value": "400px",
@@ -107,6 +129,11 @@
         "$value": "2px",
         "$type": "dimension",
         "$description": "Focus ring stroke and offset."
+      },
+      "halo": {
+        "$value": "4px",
+        "$type": "dimension",
+        "$description": "Soft ring around a current or live marker (box-shadow spread), e.g. the current step."
       }
     }
   }

package/src/global/typography.json

@@ -118,6 +118,11 @@
         "$value": "0.04em",
         "$type": "dimension",
         "$description": "Uppercase labels."
+      },
+      "wider": {
+        "$value": "0.07em",
+        "$type": "dimension",
+        "$description": "Uppercase mono overlines (Heading size overline)."
       }
     },
     "measure": {

package/src/primitives/color.json

@@ -61,6 +61,11 @@
         "$type": "color",
         "$description": "Primitive. Cool neutral, OKLCH hue 263."
       },
+      "850": {
+        "$value": "#32353b",
+        "$type": "color",
+        "$description": "Primitive. Cool neutral, OKLCH hue 263. Between 800 and 900: the dark hover wash on raised surfaces."
+      },
       "900": {
         "$value": "#282b31",
         "$type": "color",

package/src/themes/dark.json

@@ -31,6 +31,16 @@
         "$type": "color",
         "$description": "Pressed wash on rows and ghost controls."
       },
+      "raised-hover": {
+        "$value": "{color.neutral.850}",
+        "$type": "color",
+        "$description": "Hover wash inside raised surfaces (menus, select popups, dialogs, elevated cards). A step off surface.raised so the highlight shows."
+      },
+      "raised-active": {
+        "$value": "{color.neutral.800}",
+        "$type": "color",
+        "$description": "Pressed wash and neutral fills inside raised surfaces."
+      },
       "backdrop": {
         "$value": "#00000099",
         "$type": "color",
@@ -107,10 +117,20 @@
         "$type": "color",
         "$description": "Soft accent Badge fill, selected row wash."
       },
+      "wash": {
+        "$value": "#232431",
+        "$type": "color",
+        "$description": "Faint selected-row wash, lighter than accent.subtle: brand.400 at 7% over surface.default, precomputed as an opaque swatch. Pair with accent.border."
+      },
       "text": {
         "$value": "{color.brand.300}",
         "$type": "color",
         "$description": "Text on accent.subtle and surface.default."
+      },
+      "border": {
+        "$value": "{color.brand.500}",
+        "$type": "color",
+        "$description": "Selection border on accent.wash (plain Card selected); 3:1 on accent.wash and every surface."
       }
     },
     "success": {
@@ -128,6 +148,11 @@
         "$value": "{color.green.400}",
         "$type": "color",
         "$description": "Solid success Badge fill."
+      },
+      "border": {
+        "$value": "{color.green.500}",
+        "$type": "color",
+        "$description": "Tone border and outline; 3:1 on success.subtle and every surface."
       }
     },
     "warning": {
@@ -145,6 +170,11 @@
         "$value": "{color.amber.400}",
         "$type": "color",
         "$description": "Solid warning Badge fill."
+      },
+      "border": {
+        "$value": "{color.amber.500}",
+        "$type": "color",
+        "$description": "Tone border and outline; 3:1 on warning.subtle and every surface."
       }
     },
     "info": {
@@ -180,11 +210,38 @@
         "$type": "color",
         "$description": "Danger Button fill and solid danger Badge."
       },
+      "border": {
+        "$value": "{color.red.500}",
+        "$type": "color",
+        "$description": "Tone border and outline; 3:1 on danger.subtle and every surface."
+      },
       "hover": {
         "$value": "{color.red.300}",
         "$type": "color",
         "$description": "Danger Button hover."
       }
+    },
+    "diff": {
+      "added-wash": {
+        "$value": "{color.green.950}",
+        "$type": "color",
+        "$description": "Tint behind added text in a word diff."
+      },
+      "added-stroke": {
+        "$value": "{color.green.400}",
+        "$type": "color",
+        "$description": "Underline under added text; 3:1 on diff.added-wash."
+      },
+      "removed-wash": {
+        "$value": "{color.red.950}",
+        "$type": "color",
+        "$description": "Tint behind removed text in a word diff. Removed text is text.muted."
+      },
+      "removed-stroke": {
+        "$value": "{color.red.400}",
+        "$type": "color",
+        "$description": "Strike-through on removed text; 3:1 on diff.removed-wash."
+      }
     }
   },
   "elevation": {

package/src/themes/light.json

@@ -31,6 +31,16 @@
         "$type": "color",
         "$description": "Pressed wash on rows and ghost controls."
       },
+      "raised-hover": {
+        "$value": "{color.neutral.100}",
+        "$type": "color",
+        "$description": "Hover wash inside raised surfaces (menus, select popups, dialogs, elevated cards). A step off surface.raised so the highlight shows."
+      },
+      "raised-active": {
+        "$value": "{color.neutral.200}",
+        "$type": "color",
+        "$description": "Pressed wash and neutral fills inside raised surfaces."
+      },
       "backdrop": {
         "$value": "#0b0d1699",
         "$type": "color",
@@ -107,10 +117,20 @@
         "$type": "color",
         "$description": "Soft accent Badge fill, selected row wash."
       },
+      "wash": {
+        "$value": "#f6f3ff",
+        "$type": "color",
+        "$description": "Faint selected-row wash, lighter than accent.subtle: brand.500 at 7% over surface.default, precomputed as an opaque swatch. Pair with accent.border."
+      },
       "text": {
         "$value": "{color.brand.700}",
         "$type": "color",
         "$description": "Text on accent.subtle and surface.default."
+      },
+      "border": {
+        "$value": "{color.brand.500}",
+        "$type": "color",
+        "$description": "Selection border on accent.wash (plain Card selected); 3:1 on accent.wash and every surface."
       }
     },
     "success": {
@@ -128,6 +148,11 @@
         "$value": "{color.green.700}",
         "$type": "color",
         "$description": "Solid success Badge fill."
+      },
+      "border": {
+        "$value": "{color.green.500}",
+        "$type": "color",
+        "$description": "Tone border and outline; 3:1 on success.subtle and every surface."
       }
     },
     "warning": {
@@ -145,6 +170,11 @@
         "$value": "{color.amber.700}",
         "$type": "color",
         "$description": "Solid warning Badge fill."
+      },
+      "border": {
+        "$value": "{color.amber.500}",
+        "$type": "color",
+        "$description": "Tone border and outline; 3:1 on warning.subtle and every surface."
       }
     },
     "info": {
@@ -180,11 +210,38 @@
         "$type": "color",
         "$description": "Danger Button fill and solid danger Badge."
       },
+      "border": {
+        "$value": "{color.red.500}",
+        "$type": "color",
+        "$description": "Tone border and outline; 3:1 on danger.subtle and every surface."
+      },
       "hover": {
         "$value": "{color.red.800}",
         "$type": "color",
         "$description": "Danger Button hover."
       }
+    },
+    "diff": {
+      "added-wash": {
+        "$value": "{color.green.50}",
+        "$type": "color",
+        "$description": "Tint behind added text in a word diff."
+      },
+      "added-stroke": {
+        "$value": "{color.green.600}",
+        "$type": "color",
+        "$description": "Underline under added text; 3:1 on diff.added-wash."
+      },
+      "removed-wash": {
+        "$value": "{color.red.50}",
+        "$type": "color",
+        "$description": "Tint behind removed text in a word diff. Removed text is text.muted."
+      },
+      "removed-stroke": {
+        "$value": "{color.red.600}",
+        "$type": "color",
+        "$description": "Strike-through on removed text; 3:1 on diff.removed-wash."
+      }
     }
   },
   "elevation": {