@scattered-light/loomiere-mojave 0.1.0 → 0.2.0

package/dist/exports/design-system/tokens.json

@@ -0,0 +1,3063 @@
+{
+  "name": "Mojave",
+  "version": 1,
+  "meta": {
+    "source": "loomiere",
+    "brand": "mojave",
+    "prefix": "sl"
+  },
+  "color": {
+    "themes": [
+      {
+        "id": "light",
+        "name": "Light"
+      },
+      {
+        "id": "dark",
+        "name": "Dark"
+      }
+    ],
+    "tokens": [
+      {
+        "name": "sl-surface-base",
+        "value": "{sl-surface-canvas}",
+        "usage": "Alias of canvas for components that ask for \"the background\"."
+      },
+      {
+        "name": "sl-surface-canvas",
+        "value": {
+          "light": "{sl-color-white}",
+          "dark": "{sl-color-neutral-1200}"
+        },
+        "usage": "The page itself. Paper in light mode, the darkest neutral in dark mode."
+      },
+      {
+        "name": "sl-surface-overlay",
+        "value": {
+          "light": "{sl-color-neutral-100}",
+          "dark": "{sl-color-neutral-1000}"
+        },
+        "usage": "Popups, menus and code blocks that sit above raised surfaces."
+      },
+      {
+        "name": "sl-surface-raised",
+        "value": {
+          "light": "{sl-color-neutral-50}",
+          "dark": "{sl-color-neutral-1100}"
+        },
+        "usage": "Cards and panels one level above the canvas."
+      },
+      {
+        "name": "sl-surface-modal",
+        "value": {
+          "light": "{sl-color-white}",
+          "dark": "{sl-color-neutral-1100}"
+        },
+        "usage": "Dialogs and drawers. Paper in light mode; in dark mode one step lighter than the page, so a modal lifts off the dimmed page under it."
+      },
+      {
+        "name": "sl-surface-tray",
+        "value": {
+          "light": "{sl-color-neutral-50}",
+          "dark": "{sl-color-neutral-1000}"
+        },
+        "usage": "The strip behind a row of controls (toolbars, toggle groups). A step off the page in both themes, so the controls sitting on it stand out, while secondary and accent text on it still pass AA."
+      },
+      {
+        "name": "sl-surface-inverse",
+        "value": {
+          "light": "{sl-color-neutral-1100}",
+          "dark": "{sl-color-neutral-900}"
+        },
+        "usage": "Dark-on-light flip for small floating things such as tooltips. Inside a brand pair it becomes the pair's text color."
+      },
+      {
+        "name": "sl-text-accent",
+        "value": {
+          "light": "{sl-color-primary-700}",
+          "dark": "{sl-color-primary-200}"
+        },
+        "usage": "Accent text such as active tabs. One step darker than the interactive color so it stays AA as text."
+      },
+      {
+        "name": "sl-text-disabled",
+        "value": {
+          "light": "{sl-color-neutral-500}",
+          "dark": "{sl-color-neutral-600}"
+        },
+        "usage": "Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI."
+      },
+      {
+        "name": "sl-text-on-accent",
+        "value": "{sl-text-on-primary}",
+        "usage": "Alias for text placed on any accent fill."
+      },
+      {
+        "name": "sl-text-on-primary",
+        "value": {
+          "light": "{sl-color-primary-on-600}",
+          "dark": "{sl-color-primary-on-400}"
+        },
+        "usage": "Text on the accent fill: that step's own on-color, so it reads on any accent the brand picks."
+      },
+      {
+        "name": "sl-text-primary",
+        "value": {
+          "light": "{sl-color-primary-1000}",
+          "dark": "{sl-color-white}"
+        },
+        "usage": "Body text and headings. The highest-contrast neutral."
+      },
+      {
+        "name": "sl-text-secondary",
+        "value": {
+          "light": "{sl-color-neutral-1000}",
+          "dark": "{sl-color-neutral-300}"
+        },
+        "usage": "Supporting text such as descriptions and helper copy. Over 7:1 on every surface, and darker still under prefers-contrast: more."
+      },
+      {
+        "name": "sl-text-tertiary",
+        "value": {
+          "light": "{sl-color-neutral-900}",
+          "dark": "{sl-color-neutral-400}"
+        },
+        "usage": "Placeholders, captions and metadata. The lightest text that still passes AA (4.5:1) on every surface."
+      },
+      {
+        "name": "sl-text-on-tint",
+        "value": {
+          "light": "{sl-color-primary-800}",
+          "dark": "{sl-color-primary-100}"
+        },
+        "usage": "Text on an accent wash (interactive.tint*). Stays in the accent family."
+      },
+      {
+        "name": "sl-text-on-tint-strong",
+        "value": {
+          "light": "{sl-color-primary-900}",
+          "dark": "{sl-color-primary-75}"
+        },
+        "usage": "Text on the selected accent wash, a step darker than on-tint."
+      },
+      {
+        "name": "sl-text-on-inverse",
+        "value": {
+          "light": "{sl-color-neutral-on-1100}",
+          "dark": "{sl-color-neutral-on-100}"
+        },
+        "usage": "Text on fill.inverse."
+      },
+      {
+        "name": "sl-text-on-inverse-surface",
+        "value": {
+          "light": "{sl-color-neutral-on-1100}",
+          "dark": "{sl-color-neutral-on-900}"
+        },
+        "usage": "Text on surface.inverse (tooltips): the on-color of the inverse step, so it passes AA in both themes."
+      },
+      {
+        "name": "sl-border-accent",
+        "value": {
+          "light": "{sl-color-primary-600}",
+          "dark": "{sl-color-primary-400}"
+        },
+        "usage": "Borders that signal selection or the active item."
+      },
+      {
+        "name": "sl-border-default",
+        "value": {
+          "light": "{sl-color-neutral-300}",
+          "dark": "{sl-color-neutral-800}"
+        },
+        "usage": "Everyday dividers and control outlines. Darkens under prefers-contrast: more."
+      },
+      {
+        "name": "sl-border-strong",
+        "value": {
+          "light": "{sl-color-neutral-800}",
+          "dark": "{sl-color-neutral-700}"
+        },
+        "usage": "Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries."
+      },
+      {
+        "name": "sl-border-subtle",
+        "value": {
+          "light": "{sl-color-neutral-200}",
+          "dark": "{sl-color-neutral-900}"
+        },
+        "usage": "Hairlines inside a surface (table rows, list separators) that should barely register."
+      },
+      {
+        "name": "sl-border-control",
+        "value": {
+          "light": "{sl-color-neutral-800}",
+          "dark": "{sl-color-neutral-600}"
+        },
+        "usage": "Edge of a small control (checkbox, radio, switch) that must be found before it is filled."
+      },
+      {
+        "name": "sl-border-control-hover",
+        "value": {
+          "light": "{sl-color-neutral-900}",
+          "dark": "{sl-color-neutral-400}"
+        },
+        "usage": "Control edge under the pointer: one clear step darker than border.control."
+      },
+      {
+        "name": "sl-fill-subtle",
+        "value": {
+          "light": "{sl-color-neutral-200}",
+          "dark": "{sl-color-neutral-900}"
+        },
+        "usage": "Lightest fill: hovered rows, chips, empty tracks."
+      },
+      {
+        "name": "sl-fill-default",
+        "value": {
+          "light": "{sl-color-neutral-300}",
+          "dark": "{sl-color-neutral-800}"
+        },
+        "usage": "Standard fill: slider and switch tracks, pressed rows."
+      },
+      {
+        "name": "sl-fill-strong",
+        "value": {
+          "light": "{sl-color-neutral-400}",
+          "dark": "{sl-color-neutral-700}"
+        },
+        "usage": "Heaviest fill: scroll thumbs, slider marks, hovered tracks."
+      },
+      {
+        "name": "sl-fill-inverse",
+        "value": {
+          "light": "{sl-color-neutral-1100}",
+          "dark": "{sl-color-neutral-100}"
+        },
+        "usage": "A small solid chip in the chrome color that flips with the theme: dark on light pages, light on dark ones. Keyboard keys use it."
+      },
+      {
+        "name": "sl-fill-stronger",
+        "value": {
+          "light": "{sl-color-neutral-500}",
+          "dark": "{sl-color-neutral-600}"
+        },
+        "usage": "One step past fill.strong, for the hover state of a strong fill such as a scrollbar thumb."
+      },
+      {
+        "name": "sl-fill-track",
+        "value": {
+          "light": "{sl-color-neutral-200}",
+          "dark": "{sl-color-neutral-1100}"
+        },
+        "usage": "The empty part of a meter or progress bar. Light like fill.subtle in light mode; near the page in dark mode, so any palette's fill reads 3:1 against it."
+      },
+      {
+        "name": "sl-interactive-active",
+        "value": {
+          "light": "{sl-color-primary-800}",
+          "dark": "{sl-color-primary-200}"
+        },
+        "usage": "Pressed state of the main accent. Darker than hover so the press is felt."
+      },
+      {
+        "name": "sl-interactive-default",
+        "value": {
+          "light": "{sl-color-primary-600}",
+          "dark": "{sl-color-primary-400}"
+        },
+        "usage": "Primary accent for buttons, links and selected states. Step 600 is 6.1:1 on paper; step 400 is 5.6:1 on the dark canvas."
+      },
+      {
+        "name": "sl-interactive-disabled",
+        "value": {
+          "light": "{sl-color-neutral-400}",
+          "dark": "{sl-color-neutral-700}"
+        },
+        "usage": "Fill for disabled accent controls. Low contrast on purpose, but never invisible."
+      },
+      {
+        "name": "sl-interactive-hover",
+        "value": {
+          "light": "{sl-color-primary-700}",
+          "dark": "{sl-color-primary-300}"
+        },
+        "usage": "Hover state of the main accent. One step away from default in the direction of more contrast."
+      },
+      {
+        "name": "sl-interactive-tint",
+        "value": {
+          "light": "{sl-color-primary-50}",
+          "dark": "{sl-color-primary-1000}"
+        },
+        "usage": "Faint accent wash behind a ghost or outline control on hover, or a selected row."
+      },
+      {
+        "name": "sl-interactive-tint-hover",
+        "value": {
+          "light": "{sl-color-primary-100}",
+          "dark": "{sl-color-primary-900}"
+        },
+        "usage": "Accent wash for a highlighted menu item or a pressed toggle."
+      },
+      {
+        "name": "sl-interactive-tint-active",
+        "value": {
+          "light": "{sl-color-primary-200}",
+          "dark": "{sl-color-primary-800}"
+        },
+        "usage": "Accent wash for a selected or pressed item: one step past tint-hover."
+      },
+      {
+        "name": "sl-interactive-tint-strong",
+        "value": {
+          "light": "{sl-color-primary-300}",
+          "dark": "{sl-color-primary-700}"
+        },
+        "usage": "Strongest accent wash, for hovering an item that is already pressed."
+      },
+      {
+        "name": "sl-focus-ring",
+        "value": "{sl-interactive-default}",
+        "usage": "Focus ring color. Uses the interactive accent so focus reads as \"this is the thing you can act on\"."
+      },
+      {
+        "name": "sl-focus-halo-color",
+        "value": "{sl-interactive-tint-hover}",
+        "usage": "The pale tint of the focus glow. Components on a colored scope use that scope's soft-hover instead."
+      },
+      {
+        "name": "sl-status-error",
+        "value": {
+          "light": "{sl-color-error-500}",
+          "dark": "{sl-color-error-400}"
+        },
+        "usage": "Errors and destructive actions."
+      },
+      {
+        "name": "sl-status-error-dark",
+        "value": {
+          "light": "{sl-color-error-700}",
+          "dark": "{sl-color-error-200}"
+        },
+        "usage": "Error color for text or icons that need more contrast than the base color."
+      },
+      {
+        "name": "sl-status-error-light",
+        "value": {
+          "light": "{sl-color-error-50}",
+          "dark": "{sl-color-error-1000}"
+        },
+        "usage": "Error tint for backgrounds behind error messages."
+      },
+      {
+        "name": "sl-status-info",
+        "value": {
+          "light": "{sl-color-info-500}",
+          "dark": "{sl-color-info-400}"
+        },
+        "usage": "Neutral notices and help."
+      },
+      {
+        "name": "sl-status-info-dark",
+        "value": {
+          "light": "{sl-color-info-700}",
+          "dark": "{sl-color-info-200}"
+        },
+        "usage": "Info color for text or icons that need more contrast."
+      },
+      {
+        "name": "sl-status-info-light",
+        "value": {
+          "light": "{sl-color-info-50}",
+          "dark": "{sl-color-info-1000}"
+        },
+        "usage": "Info tint for notice backgrounds."
+      },
+      {
+        "name": "sl-status-success",
+        "value": {
+          "light": "{sl-color-success-500}",
+          "dark": "{sl-color-success-400}"
+        },
+        "usage": "Confirmations and completed states."
+      },
+      {
+        "name": "sl-status-success-dark",
+        "value": {
+          "light": "{sl-color-success-700}",
+          "dark": "{sl-color-success-200}"
+        },
+        "usage": "Success color for text or icons that need more contrast."
+      },
+      {
+        "name": "sl-status-success-light",
+        "value": {
+          "light": "{sl-color-success-50}",
+          "dark": "{sl-color-success-1000}"
+        },
+        "usage": "Success tint for confirmation backgrounds."
+      },
+      {
+        "name": "sl-status-warning",
+        "value": {
+          "light": "{sl-color-warning-500}",
+          "dark": "{sl-color-warning-400}"
+        },
+        "usage": "Warnings, and the required-field marker."
+      },
+      {
+        "name": "sl-status-warning-dark",
+        "value": {
+          "light": "{sl-color-warning-700}",
+          "dark": "{sl-color-warning-200}"
+        },
+        "usage": "Warning color for text or icons that need more contrast."
+      },
+      {
+        "name": "sl-status-warning-light",
+        "value": {
+          "light": "{sl-color-warning-50}",
+          "dark": "{sl-color-warning-1000}"
+        },
+        "usage": "Warning tint for caution backgrounds."
+      },
+      {
+        "name": "sl-overlay-base",
+        "value": "{sl-color-black}",
+        "usage": "Base color for scrims behind modals. Components apply their own opacity."
+      },
+      {
+        "name": "sl-emphasis-bold-bg",
+        "value": {
+          "light": "{sl-color-primary-600}",
+          "dark": "{sl-color-primary-400}"
+        },
+        "usage": "bold: solid in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-bold-bg-hover",
+        "value": {
+          "light": "{sl-color-primary-700}",
+          "dark": "{sl-color-primary-300}"
+        },
+        "usage": "bold: solid in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-bold-bg-active",
+        "value": {
+          "light": "{sl-color-primary-800}",
+          "dark": "{sl-color-primary-200}"
+        },
+        "usage": "bold: solid in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-bold-fg",
+        "value": {
+          "light": "{sl-color-primary-on-600}",
+          "dark": "{sl-color-primary-on-400}"
+        },
+        "usage": "bold: solid in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-bold-border",
+        "value": {
+          "light": "{sl-color-primary-600}",
+          "dark": "{sl-color-primary-400}"
+        },
+        "usage": "bold: solid in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-bold-border-hover",
+        "value": {
+          "light": "{sl-color-primary-700}",
+          "dark": "{sl-color-primary-300}"
+        },
+        "usage": "bold: solid in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-standard-bg",
+        "value": "#00000000",
+        "usage": "standard: outline in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-standard-bg-hover",
+        "value": {
+          "light": "{sl-color-primary-50}",
+          "dark": "{sl-color-primary-1000}"
+        },
+        "usage": "standard: outline in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-standard-bg-active",
+        "value": {
+          "light": "{sl-color-primary-100}",
+          "dark": "{sl-color-primary-900}"
+        },
+        "usage": "standard: outline in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-standard-fg",
+        "value": {
+          "light": "{sl-color-primary-700}",
+          "dark": "{sl-color-primary-200}"
+        },
+        "usage": "standard: outline in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-standard-border",
+        "value": {
+          "light": "{sl-color-primary-600}",
+          "dark": "{sl-color-primary-400}"
+        },
+        "usage": "standard: outline in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-standard-border-hover",
+        "value": {
+          "light": "{sl-color-primary-700}",
+          "dark": "{sl-color-primary-300}"
+        },
+        "usage": "standard: outline in accent (primary)"
+      },
+      {
+        "name": "sl-emphasis-subtle-bg",
+        "value": {
+          "light": "{sl-color-neutral-200}",
+          "dark": "{sl-color-neutral-900}"
+        },
+        "usage": "subtle: soft in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-subtle-bg-hover",
+        "value": {
+          "light": "{sl-color-neutral-300}",
+          "dark": "{sl-color-neutral-800}"
+        },
+        "usage": "subtle: soft in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-subtle-bg-active",
+        "value": {
+          "light": "{sl-color-neutral-400}",
+          "dark": "{sl-color-neutral-700}"
+        },
+        "usage": "subtle: soft in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-subtle-fg",
+        "value": {
+          "light": "{sl-color-neutral-1200}",
+          "dark": "{sl-color-neutral-50}"
+        },
+        "usage": "subtle: soft in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-subtle-border",
+        "value": {
+          "light": "{sl-color-neutral-200}",
+          "dark": "{sl-color-neutral-900}"
+        },
+        "usage": "subtle: soft in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-subtle-border-hover",
+        "value": {
+          "light": "{sl-color-neutral-300}",
+          "dark": "{sl-color-neutral-800}"
+        },
+        "usage": "subtle: soft in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-quiet-bg",
+        "value": "#00000000",
+        "usage": "quiet: outline in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-quiet-bg-hover",
+        "value": {
+          "light": "{sl-color-neutral-200}",
+          "dark": "{sl-color-neutral-900}"
+        },
+        "usage": "quiet: outline in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-quiet-bg-active",
+        "value": {
+          "light": "{sl-color-neutral-300}",
+          "dark": "{sl-color-neutral-800}"
+        },
+        "usage": "quiet: outline in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-quiet-fg",
+        "value": {
+          "light": "{sl-color-primary-1000}",
+          "dark": "{sl-color-white}"
+        },
+        "usage": "quiet: outline in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-quiet-border",
+        "value": {
+          "light": "{sl-color-neutral-800}",
+          "dark": "{sl-color-neutral-600}"
+        },
+        "usage": "quiet: outline in chrome (neutral)"
+      },
+      {
+        "name": "sl-emphasis-quiet-border-hover",
+        "value": {
+          "light": "{sl-color-neutral-1000}",
+          "dark": "{sl-color-neutral-200}"
+        },
+        "usage": "quiet: outline in chrome (neutral)"
+      },
+      {
+        "name": "sl-content-blockquote-border",
+        "value": "{sl-border-accent}",
+        "usage": "Accent bar beside quotes so they read as quoted at a glance."
+      },
+      {
+        "name": "sl-content-blockquote-cite",
+        "value": "{sl-text-tertiary}",
+        "usage": "Attribution under a quote, quieter than the quote itself."
+      },
+      {
+        "name": "sl-content-code-background",
+        "value": "{sl-surface-overlay}",
+        "usage": "Inline code chip, tinted like an overlay so it separates from prose."
+      },
+      {
+        "name": "sl-content-code-border",
+        "value": "{sl-border-default}",
+        "usage": "Outline for inline code chips."
+      },
+      {
+        "name": "sl-content-code-text",
+        "value": "{sl-text-on-tint}",
+        "usage": "Inline code text in the accent's on-tint color so it stands apart from body text."
+      },
+      {
+        "name": "sl-content-field-border",
+        "value": "{sl-border-default}",
+        "usage": "Borders for form fields rendered inside prose."
+      },
+      {
+        "name": "sl-content-hr-border",
+        "value": "{sl-border-default}",
+        "usage": "Horizontal rules between prose sections."
+      },
+      {
+        "name": "sl-content-kbd-background",
+        "value": "{sl-fill-inverse}",
+        "usage": "Keyboard keys render inverted (dark keys on light pages, light keys on dark ones) to look like keycaps."
+      },
+      {
+        "name": "sl-content-kbd-text",
+        "value": "{sl-text-on-inverse}",
+        "usage": "Text on keycaps."
+      },
+      {
+        "name": "sl-content-link-color",
+        "value": "{sl-interactive-default}",
+        "usage": "Links in running text. Same as the interactive accent so links and buttons agree."
+      },
+      {
+        "name": "sl-content-link-hover-color",
+        "value": "{sl-interactive-hover}",
+        "usage": "Link hover, one step toward more contrast."
+      },
+      {
+        "name": "sl-content-link-underline-color",
+        "value": {
+          "light": "#290c3f73",
+          "dark": "#3b234e73"
+        },
+        "usage": "The link color at 45% opacity, so underlines stay calmer than the text in long paragraphs and follow the link in every theme."
+      },
+      {
+        "name": "sl-content-link-underline-hover-color",
+        "value": "{sl-content-link-hover-color}",
+        "usage": "Underline darkens on hover to confirm the target."
+      },
+      {
+        "name": "sl-content-list-marker-color",
+        "value": "{sl-interactive-default}",
+        "usage": "Bullets and numbers in the accent so lists scan quickly."
+      },
+      {
+        "name": "sl-content-mark-background",
+        "value": "{sl-interactive-tint-hover}",
+        "usage": "Highlighted text (<mark>), an accent tint."
+      },
+      {
+        "name": "sl-content-page-background",
+        "value": "{sl-surface-canvas}",
+        "usage": "Background for long-form content pages."
+      },
+      {
+        "name": "sl-content-pre-background",
+        "value": "{sl-surface-canvas}",
+        "usage": "Code block background."
+      },
+      {
+        "name": "sl-content-pre-border",
+        "value": "{sl-border-default}",
+        "usage": "Code block outline."
+      },
+      {
+        "name": "sl-content-pre-text",
+        "value": "{sl-content-prose-color}",
+        "usage": "Code block text, the same as prose."
+      },
+      {
+        "name": "sl-content-prose-color",
+        "value": "{sl-text-primary}",
+        "usage": "Long-form body text. The same as body text, so prose and UI read as one voice."
+      },
+      {
+        "name": "sl-content-scrollbar-thumb",
+        "value": "{sl-fill-strong}",
+        "usage": "Scrollbar thumb at rest."
+      },
+      {
+        "name": "sl-content-scrollbar-thumb-hover",
+        "value": "{sl-fill-stronger}",
+        "usage": "Scrollbar thumb on hover, slightly stronger."
+      },
+      {
+        "name": "sl-content-scrollbar-track",
+        "value": "#00000000",
+        "usage": "Scrollbar track stays transparent so it does not add a stripe to every panel."
+      },
+      {
+        "name": "sl-content-selection-background",
+        "value": "{sl-interactive-tint-hover}",
+        "usage": "Text selection highlight, an accent tint."
+      },
+      {
+        "name": "sl-content-selection-text",
+        "value": "{sl-text-primary}",
+        "usage": "Selected text stays body text so it reads the same on the tint."
+      },
+      {
+        "name": "sl-field-background",
+        "value": "{sl-surface-base}",
+        "usage": "Field fill at rest."
+      },
+      {
+        "name": "sl-field-background-disabled",
+        "value": "{sl-surface-overlay}",
+        "usage": "Disabled fields sink into a flat gray so they read as unavailable."
+      },
+      {
+        "name": "sl-field-border-color",
+        "value": "{sl-border-control}",
+        "usage": "Field edge at rest. Passes 3:1 against the page (WCAG 1.4.11) so an empty field is still findable."
+      },
+      {
+        "name": "sl-field-border-color-hover",
+        "value": "{sl-border-control-hover}",
+        "usage": "Field edge under the pointer."
+      },
+      {
+        "name": "sl-field-border-color-focus",
+        "value": "{sl-focus-ring}",
+        "usage": "Field edge while typing, in the focus color."
+      },
+      {
+        "name": "sl-field-border-color-error",
+        "value": "{sl-status-error}",
+        "usage": "Field edge when the value is invalid."
+      },
+      {
+        "name": "sl-field-color",
+        "value": "{sl-text-primary}",
+        "usage": "The value you typed."
+      },
+      {
+        "name": "sl-field-color-disabled",
+        "value": "{sl-text-disabled}",
+        "usage": "The value in a disabled field."
+      },
+      {
+        "name": "sl-field-placeholder-color",
+        "value": "{sl-text-tertiary}",
+        "usage": "Hint text before anything is typed."
+      },
+      {
+        "name": "sl-popup-background",
+        "value": "{sl-surface-base}",
+        "usage": "Popup fill."
+      },
+      {
+        "name": "sl-popup-border-color",
+        "value": "{sl-border-default}",
+        "usage": "Popup edge, a quiet line that separates it from the page under it."
+      },
+      {
+        "name": "sl-popup-arrow-fill",
+        "value": "{sl-popup-background}",
+        "usage": "The arrow is part of the popup, so it takes the popup's fill."
+      },
+      {
+        "name": "sl-popup-arrow-stroke",
+        "value": "{sl-popup-border-color}",
+        "usage": "Arrow edge, continuing the popup's border."
+      },
+      {
+        "name": "sl-popup-separator-color",
+        "value": "{sl-border-subtle}",
+        "usage": "Line between groups of rows, quieter than the popup edge."
+      },
+      {
+        "name": "sl-item-color",
+        "value": "{sl-text-primary}",
+        "usage": "Row text at rest."
+      },
+      {
+        "name": "sl-item-color-hover",
+        "value": "{sl-text-on-tint}",
+        "usage": "Row text on the highlighted tint."
+      },
+      {
+        "name": "sl-item-color-selected",
+        "value": "{sl-text-on-tint-strong}",
+        "usage": "Row text on the selected tint."
+      },
+      {
+        "name": "sl-item-color-disabled",
+        "value": "{sl-text-disabled}",
+        "usage": "Row text when the row can't be picked."
+      },
+      {
+        "name": "sl-item-background-hover",
+        "value": "{sl-interactive-tint-hover}",
+        "usage": "Highlighted row (pointer or keyboard)."
+      },
+      {
+        "name": "sl-item-background-selected",
+        "value": "{sl-interactive-tint-active}",
+        "usage": "The chosen row."
+      },
+      {
+        "name": "sl-item-indicator-color",
+        "value": "{sl-interactive-default}",
+        "usage": "The check or dot that marks a chosen row."
+      },
+      {
+        "name": "sl-check-background",
+        "value": "{sl-field-background}",
+        "usage": "Empty box, the same fill as a field so it reads as something to fill in."
+      },
+      {
+        "name": "sl-check-border-color",
+        "value": "{sl-border-control}",
+        "usage": "Empty box edge. Passes 3:1 so the box can be found before it's ticked."
+      },
+      {
+        "name": "sl-check-border-color-hover",
+        "value": "{sl-border-control-hover}",
+        "usage": "Edge under the pointer."
+      },
+      {
+        "name": "sl-check-background-checked",
+        "value": "{sl-interactive-default}",
+        "usage": "Ticked box fill, the brand's interactive color."
+      },
+      {
+        "name": "sl-check-border-color-checked",
+        "value": "{sl-border-accent}",
+        "usage": "Ticked box edge."
+      },
+      {
+        "name": "sl-check-mark-color",
+        "value": "{sl-text-on-primary}",
+        "usage": "Check mark, dash or dot on a ticked fill."
+      },
+      {
+        "name": "sl-check-mark-color-outline",
+        "value": "{sl-interactive-default}",
+        "usage": "Check mark in the outline style, where the box stays empty and only the mark is colored."
+      },
+      {
+        "name": "sl-check-mark-color-disabled",
+        "value": "{sl-text-disabled}",
+        "usage": "Check mark of a disabled outline box."
+      },
+      {
+        "name": "sl-modal-background",
+        "value": "{sl-surface-modal}",
+        "usage": "Modal fill."
+      },
+      {
+        "name": "sl-modal-border-color",
+        "value": "{sl-border-default}",
+        "usage": "Modal edge, the same quiet line as popups."
+      },
+      {
+        "name": "sl-modal-backdrop",
+        "value": "#00000080",
+        "usage": "Scrim that dims the page behind a modal."
+      },
+      {
+        "name": "sl-modal-title-color",
+        "value": "{sl-text-primary}",
+        "usage": "Modal heading color."
+      },
+      {
+        "name": "sl-modal-description-color",
+        "value": "{sl-text-secondary}",
+        "usage": "Supporting text under the heading."
+      },
+      {
+        "name": "sl-drawer-handle-color",
+        "value": "{sl-border-strong}",
+        "usage": "The grab bar on bottom drawers. Strong border so it reads as something to drag."
+      },
+      {
+        "name": "sl-bar-background",
+        "value": "{sl-surface-tray}",
+        "usage": "Strip fill."
+      },
+      {
+        "name": "sl-bar-border-color",
+        "value": "{sl-border-default}",
+        "usage": "Strip edge."
+      },
+      {
+        "name": "sl-bar-separator-color",
+        "value": "{sl-border-default}",
+        "usage": "Divider between groups."
+      },
+      {
+        "name": "sl-disclosure-trigger-background-hover",
+        "value": "{sl-fill-subtle}",
+        "usage": "A trigger under the pointer, the same light fill as a hovered row."
+      },
+      {
+        "name": "sl-disclosure-trigger-background-active",
+        "value": "{sl-fill-default}",
+        "usage": "A trigger being pressed, one step stronger than hover."
+      },
+      {
+        "name": "sl-disclosure-icon-color",
+        "value": "{sl-text-secondary}",
+        "usage": "The chevron that turns as a panel opens."
+      },
+      {
+        "name": "sl-disclosure-content-color",
+        "value": "{sl-text-secondary}",
+        "usage": "Text inside an opened accordion or collapsible panel, quieter than the trigger that names it."
+      },
+      {
+        "name": "sl-disclosure-divider-color",
+        "value": "{sl-border-default}",
+        "usage": "Line between accordion items and under a tab list."
+      },
+      {
+        "name": "sl-disclosure-indicator-color",
+        "value": "{sl-border-accent}",
+        "usage": "The line under the selected tab."
+      },
+      {
+        "name": "sl-disclosure-selected-color",
+        "value": "{sl-text-accent}",
+        "usage": "Selected tab text."
+      },
+      {
+        "name": "sl-notice-description-color",
+        "value": "{sl-text-secondary}",
+        "usage": "Description on the plain surface. A tinted notice uses its palette's text color for both lines."
+      },
+      {
+        "name": "sl-gauge-track-color",
+        "value": "{sl-fill-track}",
+        "usage": "The empty part of the bar. Every palette's fill reads 3:1 on it, so the amount is clear in both themes."
+      },
+      {
+        "name": "sl-gauge-label-color",
+        "value": "{sl-text-primary}",
+        "usage": "What is being measured."
+      },
+      {
+        "name": "sl-gauge-value-color",
+        "value": "{sl-text-secondary}",
+        "usage": "The number, quieter than its label."
+      },
+      {
+        "name": "sl-table-background",
+        "value": "{sl-surface-canvas}",
+        "usage": "Cell area. The page color, so a grid sits on the page like body text."
+      },
+      {
+        "name": "sl-table-color",
+        "value": "{sl-text-primary}",
+        "usage": "Cell text."
+      },
+      {
+        "name": "sl-table-subtle-color",
+        "value": "{sl-text-secondary}",
+        "usage": "Secondary text in cells and panels: counts, hints, group totals."
+      },
+      {
+        "name": "sl-table-header-background",
+        "value": "{sl-surface-tray}",
+        "usage": "Header row, side bar and other grid chrome. The tray step, so it sits a step off the cells in both themes and secondary text on it still passes AA."
+      },
+      {
+        "name": "sl-table-header-color",
+        "value": "{sl-text-primary}",
+        "usage": "Column names."
+      },
+      {
+        "name": "sl-table-header-background-hover",
+        "value": "{sl-fill-subtle}",
+        "usage": "A header cell under the pointer, showing it can be clicked to sort."
+      },
+      {
+        "name": "sl-table-border-color",
+        "value": "{sl-border-default}",
+        "usage": "The grid's outer edge and the line under the header."
+      },
+      {
+        "name": "sl-table-row-border-color",
+        "value": "{sl-border-subtle}",
+        "usage": "Hairlines between rows, quiet so the data leads."
+      },
+      {
+        "name": "sl-table-row-hover",
+        "value": "{sl-item-background-hover}",
+        "usage": "Row under the pointer. Same tint as a highlighted menu row."
+      },
+      {
+        "name": "sl-table-row-selected",
+        "value": "{sl-item-background-selected}",
+        "usage": "Selected rows. Same tint as the chosen menu row."
+      },
+      {
+        "name": "sl-table-column-hover",
+        "value": "{sl-fill-subtle}",
+        "usage": "Column under the pointer, when column hover is on. Neutral so it never reads as a selection."
+      },
+      {
+        "name": "sl-table-range-background",
+        "value": "{sl-interactive-tint}",
+        "usage": "Cells inside a dragged range selection."
+      },
+      {
+        "name": "sl-table-range-border",
+        "value": "{sl-focus-ring}",
+        "usage": "Edge of a range selection and of the focused cell, the same color as every focus ring."
+      },
+      {
+        "name": "sl-pair-ember-dune-bg",
+        "value": "{sl-color-secondary-600}",
+        "usage": "Background."
+      },
+      {
+        "name": "sl-pair-ember-dune-fg",
+        "value": "{sl-color-tertiary-50}",
+        "usage": "Text, icons and strong borders. 5.93:1 on bg."
+      },
+      {
+        "name": "sl-pair-ember-dune-accent",
+        "value": "{sl-color-tertiary-50}",
+        "usage": "Links, buttons and focus rings. The pair names no accent, so this is fg."
+      },
+      {
+        "name": "sl-pair-ember-dune-hover",
+        "value": "#eee0da",
+        "usage": "Accent on hover: accent moved 15% toward bg. 4.76:1 against bg, which is the button label."
+      },
+      {
+        "name": "sl-pair-ember-dune-active",
+        "value": "{sl-pair-ember-dune-accent}",
+        "usage": "Accent while pressed: the accent itself, because moving it would drop the button label below AA."
+      },
+      {
+        "name": "sl-pair-ember-dune-subtle",
+        "value": "#a36151",
+        "usage": "Accent wash for highlighted items, selection and mark: accent 12% into bg. fg on it is 4.63:1."
+      },
+      {
+        "name": "sl-pair-ember-dune-emphasis",
+        "value": "{sl-pair-ember-dune-subtle}",
+        "usage": "Stronger accent wash for selected and pressed items: subtle itself, because a stronger tint would drop text below AA."
+      },
+      {
+        "name": "sl-pair-ember-dune-muted",
+        "value": "#9d5747",
+        "usage": "Inset background for code: fg 6% into bg. fg on it is 5.22:1."
+      },
+      {
+        "name": "sl-pair-mirage-deep-bg",
+        "value": "{sl-color-primary-900}",
+        "usage": "Background."
+      },
+      {
+        "name": "sl-pair-mirage-deep-fg",
+        "value": "{sl-color-primary-75}",
+        "usage": "Text, icons and strong borders. 13.25:1 on bg."
+      },
+      {
+        "name": "sl-pair-mirage-deep-accent",
+        "value": "{sl-color-tertiary-200}",
+        "usage": "Links, buttons and focus rings. 9.61:1 on bg."
+      },
+      {
+        "name": "sl-pair-mirage-deep-hover",
+        "value": "#dfd8b9",
+        "usage": "Accent on hover: accent moved 15% toward fg. 10.13:1 against bg, which is the button label."
+      },
+      {
+        "name": "sl-pair-mirage-deep-active",
+        "value": "#e3dcc6",
+        "usage": "Accent while pressed: accent moved 30% toward fg. 10.59:1 against bg, which is the button label."
+      },
+      {
+        "name": "sl-pair-mirage-deep-subtle",
+        "value": "#483257",
+        "usage": "Accent wash for highlighted items, selection and mark: accent 12% into bg. fg on it is 10.26:1."
+      },
+      {
+        "name": "sl-pair-mirage-deep-emphasis",
+        "value": "#574361",
+        "usage": "Stronger accent wash for selected and pressed items: accent 22% into bg. fg on it is 8.05:1."
+      },
+      {
+        "name": "sl-pair-mirage-deep-muted",
+        "value": "#412954",
+        "usage": "Inset background for code: fg 6% into bg. fg on it is 11.48:1."
+      },
+      {
+        "name": "sl-pair-stone-soft-bg",
+        "value": {
+          "light": "{sl-color-neutral-100}",
+          "dark": "{sl-color-neutral-1100}"
+        },
+        "usage": "Background."
+      },
+      {
+        "name": "sl-pair-stone-soft-fg",
+        "value": {
+          "light": "{sl-color-neutral-1200}",
+          "dark": "{sl-color-neutral-100}"
+        },
+        "usage": "Text, icons and strong borders. 15.97:1 on bg."
+      },
+      {
+        "name": "sl-pair-stone-soft-accent",
+        "value": {
+          "light": "{sl-color-primary-600}",
+          "dark": "{sl-color-primary-300}"
+        },
+        "usage": "Links, buttons and focus rings. 5.81:1 on bg."
+      },
+      {
+        "name": "sl-pair-stone-soft-hover",
+        "value": {
+          "light": "#7637a8",
+          "dark": "#d9affc"
+        },
+        "usage": "Accent on hover: accent moved 15% toward fg. 6.87:1 against bg, which is the button label."
+      },
+      {
+        "name": "sl-pair-stone-soft-active",
+        "value": {
+          "light": "#64358d",
+          "dark": "#debdfb"
+        },
+        "usage": "Accent while pressed: accent moved 30% toward fg. 8.13:1 against bg, which is the button label."
+      },
+      {
+        "name": "sl-pair-stone-soft-subtle",
+        "value": {
+          "light": "#e8e3f2",
+          "dark": "{sl-pair-stone-soft-bg}"
+        },
+        "usage": "Accent wash for highlighted items, selection and mark: accent 12% into bg. fg on it is 13.47:1."
+      },
+      {
+        "name": "sl-pair-stone-soft-emphasis",
+        "value": "{sl-pair-stone-soft-subtle}",
+        "usage": "Stronger accent wash for selected and pressed items: subtle itself, because a stronger tint would drop text below AA."
+      },
+      {
+        "name": "sl-pair-stone-soft-muted",
+        "value": {
+          "light": "#e7eae7",
+          "dark": "#3f4742"
+        },
+        "usage": "Inset background for code: fg 6% into bg. fg on it is 13.97:1."
+      },
+      {
+        "name": "sl-color-white",
+        "value": "#ffffff",
+        "usage": "Paper: the lightest color in the system. Every palette step is measured against it."
+      },
+      {
+        "name": "sl-color-black",
+        "value": "#000000",
+        "usage": "Ink: the darkest color in the system. Palettes end here unless they name their own darkest color."
+      },
+      {
+        "name": "sl-color-neutral-50",
+        "value": "#f8fbf9",
+        "usage": "neutral (stone) 50: 1.04:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-100",
+        "value": "#f6f9f6",
+        "usage": "neutral (stone) 100: 1.06:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-200",
+        "value": "#eff3ee",
+        "usage": "neutral (stone) 200: 1.12:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-300",
+        "value": "#e7ece4",
+        "usage": "neutral (stone) 300: brand color #e7ece4, placed at its own contrast (1.2:1)"
+      },
+      {
+        "name": "sl-color-neutral-400",
+        "value": "#d1dbd1",
+        "usage": "neutral (stone) 400: 1.42:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-500",
+        "value": "#bcccc1",
+        "usage": "neutral (stone) 500: brand color #bcccc1, placed at its own contrast (1.67:1)"
+      },
+      {
+        "name": "sl-color-neutral-600",
+        "value": "#a5b4aa",
+        "usage": "neutral (stone) 600: 2.16:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-700",
+        "value": "#919f96",
+        "usage": "neutral (stone) 700: 2.76:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-800",
+        "value": "#7c8980",
+        "usage": "neutral (stone) 800: 3.65:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-900",
+        "value": "#667169",
+        "usage": "neutral (stone) 900: 5.08:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-1000",
+        "value": "#4f5852",
+        "usage": "neutral (stone) 1000: 7.31:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-1100",
+        "value": "#353d38",
+        "usage": "neutral (stone) 1100: 11.08:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-1200",
+        "value": "#181e1a",
+        "usage": "neutral (stone) 1200: 16.83:1 against paper"
+      },
+      {
+        "name": "sl-color-neutral-on-50",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 50: 16.26:1"
+      },
+      {
+        "name": "sl-color-neutral-on-100",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 100: 15.97:1"
+      },
+      {
+        "name": "sl-color-neutral-on-200",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 200: 15.11:1"
+      },
+      {
+        "name": "sl-color-neutral-on-300",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 300: 14.13:1"
+      },
+      {
+        "name": "sl-color-neutral-on-400",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 400: 11.91:1"
+      },
+      {
+        "name": "sl-color-neutral-on-500",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 500: 10.12:1"
+      },
+      {
+        "name": "sl-color-neutral-on-600",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 600: 7.83:1"
+      },
+      {
+        "name": "sl-color-neutral-on-700",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 700: 6.13:1"
+      },
+      {
+        "name": "sl-color-neutral-on-800",
+        "value": "{sl-color-neutral-1200}",
+        "usage": "Text on neutral 800: 4.64:1"
+      },
+      {
+        "name": "sl-color-neutral-on-900",
+        "value": "{sl-color-neutral-50}",
+        "usage": "Text on neutral 900: 4.88:1"
+      },
+      {
+        "name": "sl-color-neutral-on-1000",
+        "value": "{sl-color-neutral-50}",
+        "usage": "Text on neutral 1000: 7.07:1"
+      },
+      {
+        "name": "sl-color-neutral-on-1100",
+        "value": "{sl-color-neutral-50}",
+        "usage": "Text on neutral 1100: 10.75:1"
+      },
+      {
+        "name": "sl-color-neutral-on-1200",
+        "value": "{sl-color-neutral-50}",
+        "usage": "Text on neutral 1200: 16.26:1"
+      },
+      {
+        "name": "sl-color-primary-50",
+        "value": "#fdfaff",
+        "usage": "primary (mirage) 50: 1.03:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-75",
+        "value": "#f9f2ff",
+        "usage": "primary (mirage) 75: 1.09:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-100",
+        "value": "#f4e7ff",
+        "usage": "primary (mirage) 100: 1.18:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-200",
+        "value": "#e6c6ff",
+        "usage": "primary (mirage) 200: 1.51:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-300",
+        "value": "#d4a2fc",
+        "usage": "primary (mirage) 300: 2.02:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-400",
+        "value": "#b978ed",
+        "usage": "primary (mirage) 400: 3:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-500",
+        "value": "#a04edf",
+        "usage": "primary (mirage) 500: 4.5:1 against paper, locked so it always passes"
+      },
+      {
+        "name": "sl-color-primary-600",
+        "value": "#8838c4",
+        "usage": "primary (mirage) 600: 6.1:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-700",
+        "value": "#7131a0",
+        "usage": "primary (mirage) 700: 7.91:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-800",
+        "value": "#542775",
+        "usage": "primary (mirage) 800: 10.87:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-900",
+        "value": "#371e4a",
+        "usage": "primary (mirage) 900: 14.38:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-1000",
+        "value": "#221928",
+        "usage": "primary (mirage) 1000: 17.89:1 against paper"
+      },
+      {
+        "name": "sl-color-primary-on-50",
+        "value": "{sl-color-primary-1000}",
+        "usage": "Text on primary 50: 16.4:1"
+      },
+      {
+        "name": "sl-color-primary-on-75",
+        "value": "{sl-color-primary-1000}",
+        "usage": "Text on primary 75: 15.49:1"
+      },
+      {
+        "name": "sl-color-primary-on-100",
+        "value": "{sl-color-primary-1000}",
+        "usage": "Text on primary 100: 14.32:1"
+      },
+      {
+        "name": "sl-color-primary-on-200",
+        "value": "{sl-color-primary-1000}",
+        "usage": "Text on primary 200: 11.22:1"
+      },
+      {
+        "name": "sl-color-primary-on-300",
+        "value": "{sl-color-primary-1000}",
+        "usage": "Text on primary 300: 8.38:1"
+      },
+      {
+        "name": "sl-color-primary-on-400",
+        "value": "{sl-color-primary-1000}",
+        "usage": "Text on primary 400: 5.63:1"
+      },
+      {
+        "name": "sl-color-primary-on-500",
+        "value": "{sl-color-white}",
+        "usage": "Text on primary 500: 4.52:1"
+      },
+      {
+        "name": "sl-color-primary-on-600",
+        "value": "{sl-color-primary-50}",
+        "usage": "Text on primary 600: 5.95:1"
+      },
+      {
+        "name": "sl-color-primary-on-700",
+        "value": "{sl-color-primary-50}",
+        "usage": "Text on primary 700: 7.66:1"
+      },
+      {
+        "name": "sl-color-primary-on-800",
+        "value": "{sl-color-primary-50}",
+        "usage": "Text on primary 800: 10.55:1"
+      },
+      {
+        "name": "sl-color-primary-on-900",
+        "value": "{sl-color-primary-50}",
+        "usage": "Text on primary 900: 14.03:1"
+      },
+      {
+        "name": "sl-color-primary-on-1000",
+        "value": "{sl-color-primary-50}",
+        "usage": "Text on primary 1000: 16.4:1"
+      },
+      {
+        "name": "sl-color-secondary-50",
+        "value": "#fffaf9",
+        "usage": "secondary (ember) 50: 1.03:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-75",
+        "value": "#fff2ef",
+        "usage": "secondary (ember) 75: 1.09:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-100",
+        "value": "#ffe7e1",
+        "usage": "secondary (ember) 100: 1.18:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-200",
+        "value": "#fdc5b7",
+        "usage": "secondary (ember) 200: 1.51:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-300",
+        "value": "#f8a08b",
+        "usage": "secondary (ember) 300: 2.02:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-400",
+        "value": "#ed6f52",
+        "usage": "secondary (ember) 400: 3:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-500",
+        "value": "#b95b45",
+        "usage": "secondary (ember) 500: 4.5:1 against paper, locked so it always passes"
+      },
+      {
+        "name": "sl-color-secondary-600",
+        "value": "#964d3c",
+        "usage": "secondary (ember) 600: 6.1:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-700",
+        "value": "#794234",
+        "usage": "secondary (ember) 700: 7.91:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-800",
+        "value": "#57342b",
+        "usage": "secondary (ember) 800: 10.87:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-900",
+        "value": "#3d231c",
+        "usage": "secondary (ember) 900: 14.38:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-1000",
+        "value": "#24120e",
+        "usage": "secondary (ember) 1000: 17.89:1 against paper"
+      },
+      {
+        "name": "sl-color-secondary-on-50",
+        "value": "{sl-color-secondary-1000}",
+        "usage": "Text on secondary 50: 17.38:1"
+      },
+      {
+        "name": "sl-color-secondary-on-75",
+        "value": "{sl-color-secondary-1000}",
+        "usage": "Text on secondary 75: 16.44:1"
+      },
+      {
+        "name": "sl-color-secondary-on-100",
+        "value": "{sl-color-secondary-1000}",
+        "usage": "Text on secondary 100: 15.22:1"
+      },
+      {
+        "name": "sl-color-secondary-on-200",
+        "value": "{sl-color-secondary-1000}",
+        "usage": "Text on secondary 200: 11.86:1"
+      },
+      {
+        "name": "sl-color-secondary-on-300",
+        "value": "{sl-color-secondary-1000}",
+        "usage": "Text on secondary 300: 8.9:1"
+      },
+      {
+        "name": "sl-color-secondary-on-400",
+        "value": "{sl-color-secondary-1000}",
+        "usage": "Text on secondary 400: 5.99:1"
+      },
+      {
+        "name": "sl-color-secondary-on-500",
+        "value": "{sl-color-white}",
+        "usage": "Text on secondary 500: 4.52:1"
+      },
+      {
+        "name": "sl-color-secondary-on-600",
+        "value": "{sl-color-secondary-50}",
+        "usage": "Text on secondary 600: 5.93:1"
+      },
+      {
+        "name": "sl-color-secondary-on-700",
+        "value": "{sl-color-secondary-50}",
+        "usage": "Text on secondary 700: 7.68:1"
+      },
+      {
+        "name": "sl-color-secondary-on-800",
+        "value": "{sl-color-secondary-50}",
+        "usage": "Text on secondary 800: 10.51:1"
+      },
+      {
+        "name": "sl-color-secondary-on-900",
+        "value": "{sl-color-secondary-50}",
+        "usage": "Text on secondary 900: 13.94:1"
+      },
+      {
+        "name": "sl-color-secondary-on-1000",
+        "value": "{sl-color-secondary-50}",
+        "usage": "Text on secondary 1000: 17.38:1"
+      },
+      {
+        "name": "sl-color-tertiary-50",
+        "value": "#fcfbf8",
+        "usage": "tertiary (dune) 50: 1.03:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-75",
+        "value": "#f7f5ed",
+        "usage": "tertiary (dune) 75: 1.09:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-100",
+        "value": "#efecdd",
+        "usage": "tertiary (dune) 100: 1.18:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-200",
+        "value": "#dad3ad",
+        "usage": "tertiary (dune) 200: 1.51:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-300",
+        "value": "#c3b67a",
+        "usage": "tertiary (dune) 300: 2.02:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-400",
+        "value": "#9f9568",
+        "usage": "tertiary (dune) 400: 3:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-500",
+        "value": "#7d7658",
+        "usage": "tertiary (dune) 500: 4.5:1 against paper, locked so it always passes"
+      },
+      {
+        "name": "sl-color-tertiary-600",
+        "value": "#686248",
+        "usage": "tertiary (dune) 600: 6.1:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-700",
+        "value": "#56513b",
+        "usage": "tertiary (dune) 700: 7.91:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-800",
+        "value": "#413d2c",
+        "usage": "tertiary (dune) 800: 10.87:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-900",
+        "value": "#2c2a1d",
+        "usage": "tertiary (dune) 900: 14.38:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-1000",
+        "value": "#19170f",
+        "usage": "tertiary (dune) 1000: 17.89:1 against paper"
+      },
+      {
+        "name": "sl-color-tertiary-on-50",
+        "value": "{sl-color-tertiary-1000}",
+        "usage": "Text on tertiary 50: 17.33:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-75",
+        "value": "{sl-color-tertiary-1000}",
+        "usage": "Text on tertiary 75: 16.43:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-100",
+        "value": "{sl-color-tertiary-1000}",
+        "usage": "Text on tertiary 100: 15.13:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-200",
+        "value": "{sl-color-tertiary-1000}",
+        "usage": "Text on tertiary 200: 11.87:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-300",
+        "value": "{sl-color-tertiary-1000}",
+        "usage": "Text on tertiary 300: 8.79:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-400",
+        "value": "{sl-color-tertiary-1000}",
+        "usage": "Text on tertiary 400: 5.96:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-500",
+        "value": "{sl-color-white}",
+        "usage": "Text on tertiary 500: 4.56:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-600",
+        "value": "{sl-color-tertiary-50}",
+        "usage": "Text on tertiary 600: 5.92:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-700",
+        "value": "{sl-color-tertiary-50}",
+        "usage": "Text on tertiary 700: 7.7:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-800",
+        "value": "{sl-color-tertiary-50}",
+        "usage": "Text on tertiary 800: 10.52:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-900",
+        "value": "{sl-color-tertiary-50}",
+        "usage": "Text on tertiary 900: 13.94:1"
+      },
+      {
+        "name": "sl-color-tertiary-on-1000",
+        "value": "{sl-color-tertiary-50}",
+        "usage": "Text on tertiary 1000: 17.33:1"
+      },
+      {
+        "name": "sl-color-quaternary-50",
+        "value": "#fdfbfc",
+        "usage": "quaternary (silhouette) 50: 1.03:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-75",
+        "value": "#f8f4f5",
+        "usage": "quaternary (silhouette) 75: 1.09:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-100",
+        "value": "#f3eaec",
+        "usage": "quaternary (silhouette) 100: 1.18:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-200",
+        "value": "#e1cdd2",
+        "usage": "quaternary (silhouette) 200: 1.51:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-300",
+        "value": "#ceaeb6",
+        "usage": "quaternary (silhouette) 300: 2.02:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-400",
+        "value": "#b58994",
+        "usage": "quaternary (silhouette) 400: 3:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-500",
+        "value": "#996976",
+        "usage": "quaternary (silhouette) 500: 4.5:1 against paper, locked so it always passes"
+      },
+      {
+        "name": "sl-color-quaternary-600",
+        "value": "#855462",
+        "usage": "quaternary (silhouette) 600: 6.1:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-700",
+        "value": "#754251",
+        "usage": "quaternary (silhouette) 700: 7.91:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-800",
+        "value": "#602c3d",
+        "usage": "quaternary (silhouette) 800: 10.87:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-900",
+        "value": "#441d2a",
+        "usage": "quaternary (silhouette) 900: 14.38:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-1000",
+        "value": "#290e17",
+        "usage": "quaternary (silhouette) 1000: 17.89:1 against paper"
+      },
+      {
+        "name": "sl-color-quaternary-on-50",
+        "value": "{sl-color-quaternary-1000}",
+        "usage": "Text on quaternary 50: 17.43:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-75",
+        "value": "{sl-color-quaternary-1000}",
+        "usage": "Text on quaternary 75: 16.46:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-100",
+        "value": "{sl-color-quaternary-1000}",
+        "usage": "Text on quaternary 100: 15.21:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-200",
+        "value": "{sl-color-quaternary-1000}",
+        "usage": "Text on quaternary 200: 11.86:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-300",
+        "value": "{sl-color-quaternary-1000}",
+        "usage": "Text on quaternary 300: 8.85:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-400",
+        "value": "{sl-color-quaternary-1000}",
+        "usage": "Text on quaternary 400: 5.96:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-500",
+        "value": "{sl-color-white}",
+        "usage": "Text on quaternary 500: 4.53:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-600",
+        "value": "{sl-color-quaternary-50}",
+        "usage": "Text on quaternary 600: 5.92:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-700",
+        "value": "{sl-color-quaternary-50}",
+        "usage": "Text on quaternary 700: 7.68:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-800",
+        "value": "{sl-color-quaternary-50}",
+        "usage": "Text on quaternary 800: 10.59:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-900",
+        "value": "{sl-color-quaternary-50}",
+        "usage": "Text on quaternary 900: 14.01:1"
+      },
+      {
+        "name": "sl-color-quaternary-on-1000",
+        "value": "{sl-color-quaternary-50}",
+        "usage": "Text on quaternary 1000: 17.43:1"
+      },
+      {
+        "name": "sl-color-success-50",
+        "value": "#f7fdf8",
+        "usage": "success 50: 1.03:1 against paper"
+      },
+      {
+        "name": "sl-color-success-75",
+        "value": "#eaf9ec",
+        "usage": "success 75: 1.09:1 against paper"
+      },
+      {
+        "name": "sl-color-success-100",
+        "value": "#d8f3dc",
+        "usage": "success 100: 1.18:1 against paper"
+      },
+      {
+        "name": "sl-color-success-200",
+        "value": "#9de1aa",
+        "usage": "success 200: 1.51:1 against paper"
+      },
+      {
+        "name": "sl-color-success-300",
+        "value": "#54cd75",
+        "usage": "success 300: 2.02:1 against paper"
+      },
+      {
+        "name": "sl-color-success-400",
+        "value": "#1cab51",
+        "usage": "success 400: 3:1 against paper"
+      },
+      {
+        "name": "sl-color-success-500",
+        "value": "#14883f",
+        "usage": "success 500: 4.5:1 against paper, locked so it always passes"
+      },
+      {
+        "name": "sl-color-success-600",
+        "value": "#0f7133",
+        "usage": "success 600: 6.1:1 against paper"
+      },
+      {
+        "name": "sl-color-success-700",
+        "value": "#0b5e29",
+        "usage": "success 700: 7.91:1 against paper"
+      },
+      {
+        "name": "sl-color-success-800",
+        "value": "#06471e",
+        "usage": "success 800: 10.87:1 against paper"
+      },
+      {
+        "name": "sl-color-success-900",
+        "value": "#033112",
+        "usage": "success 900: 14.38:1 against paper"
+      },
+      {
+        "name": "sl-color-success-1000",
+        "value": "#011c08",
+        "usage": "success 1000: 17.89:1 against paper"
+      },
+      {
+        "name": "sl-color-success-on-50",
+        "value": "{sl-color-success-1000}",
+        "usage": "Text on success 50: 17.39:1"
+      },
+      {
+        "name": "sl-color-success-on-75",
+        "value": "{sl-color-success-1000}",
+        "usage": "Text on success 75: 16.45:1"
+      },
+      {
+        "name": "sl-color-success-on-100",
+        "value": "{sl-color-success-1000}",
+        "usage": "Text on success 100: 15.18:1"
+      },
+      {
+        "name": "sl-color-success-on-200",
+        "value": "{sl-color-success-1000}",
+        "usage": "Text on success 200: 11.77:1"
+      },
+      {
+        "name": "sl-color-success-on-300",
+        "value": "{sl-color-success-1000}",
+        "usage": "Text on success 300: 8.85:1"
+      },
+      {
+        "name": "sl-color-success-on-400",
+        "value": "{sl-color-success-1000}",
+        "usage": "Text on success 400: 5.97:1"
+      },
+      {
+        "name": "sl-color-success-on-500",
+        "value": "{sl-color-white}",
+        "usage": "Text on success 500: 4.54:1"
+      },
+      {
+        "name": "sl-color-success-on-600",
+        "value": "{sl-color-success-50}",
+        "usage": "Text on success 600: 5.94:1"
+      },
+      {
+        "name": "sl-color-success-on-700",
+        "value": "{sl-color-success-50}",
+        "usage": "Text on success 700: 7.69:1"
+      },
+      {
+        "name": "sl-color-success-on-800",
+        "value": "{sl-color-success-50}",
+        "usage": "Text on success 800: 10.56:1"
+      },
+      {
+        "name": "sl-color-success-on-900",
+        "value": "{sl-color-success-50}",
+        "usage": "Text on success 900: 14.02:1"
+      },
+      {
+        "name": "sl-color-success-on-1000",
+        "value": "{sl-color-success-50}",
+        "usage": "Text on success 1000: 17.39:1"
+      },
+      {
+        "name": "sl-color-warning-50",
+        "value": "#fffbf6",
+        "usage": "warning 50: 1.03:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-75",
+        "value": "#fff3e7",
+        "usage": "warning 75: 1.09:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-100",
+        "value": "#fee9d1",
+        "usage": "warning 100: 1.18:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-200",
+        "value": "#fcc98f",
+        "usage": "warning 200: 1.51:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-300",
+        "value": "#f6a535",
+        "usage": "warning 300: 2.02:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-400",
+        "value": "#ce8407",
+        "usage": "warning 400: 3:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-500",
+        "value": "#a66905",
+        "usage": "warning 500: 4.5:1 against paper, locked so it always passes"
+      },
+      {
+        "name": "sl-color-warning-600",
+        "value": "#895703",
+        "usage": "warning 600: 6.1:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-700",
+        "value": "#734702",
+        "usage": "warning 700: 7.91:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-800",
+        "value": "#583501",
+        "usage": "warning 800: 10.87:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-900",
+        "value": "#3e2401",
+        "usage": "warning 900: 14.38:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-1000",
+        "value": "#241300",
+        "usage": "warning 1000: 17.89:1 against paper"
+      },
+      {
+        "name": "sl-color-warning-on-50",
+        "value": "{sl-color-warning-1000}",
+        "usage": "Text on warning 50: 17.45:1"
+      },
+      {
+        "name": "sl-color-warning-on-75",
+        "value": "{sl-color-warning-1000}",
+        "usage": "Text on warning 75: 16.46:1"
+      },
+      {
+        "name": "sl-color-warning-on-100",
+        "value": "{sl-color-warning-1000}",
+        "usage": "Text on warning 100: 15.23:1"
+      },
+      {
+        "name": "sl-color-warning-on-200",
+        "value": "{sl-color-warning-1000}",
+        "usage": "Text on warning 200: 11.89:1"
+      },
+      {
+        "name": "sl-color-warning-on-300",
+        "value": "{sl-color-warning-1000}",
+        "usage": "Text on warning 300: 8.86:1"
+      },
+      {
+        "name": "sl-color-warning-on-400",
+        "value": "{sl-color-warning-1000}",
+        "usage": "Text on warning 400: 5.93:1"
+      },
+      {
+        "name": "sl-color-warning-on-500",
+        "value": "{sl-color-white}",
+        "usage": "Text on warning 500: 4.52:1"
+      },
+      {
+        "name": "sl-color-warning-on-600",
+        "value": "{sl-color-warning-50}",
+        "usage": "Text on warning 600: 5.95:1"
+      },
+      {
+        "name": "sl-color-warning-on-700",
+        "value": "{sl-color-warning-50}",
+        "usage": "Text on warning 700: 7.75:1"
+      },
+      {
+        "name": "sl-color-warning-on-800",
+        "value": "{sl-color-warning-50}",
+        "usage": "Text on warning 800: 10.59:1"
+      },
+      {
+        "name": "sl-color-warning-on-900",
+        "value": "{sl-color-warning-50}",
+        "usage": "Text on warning 900: 13.98:1"
+      },
+      {
+        "name": "sl-color-warning-on-1000",
+        "value": "{sl-color-warning-50}",
+        "usage": "Text on warning 1000: 17.45:1"
+      },
+      {
+        "name": "sl-color-error-50",
+        "value": "#fffafa",
+        "usage": "error 50: 1.03:1 against paper"
+      },
+      {
+        "name": "sl-color-error-75",
+        "value": "#fff2f1",
+        "usage": "error 75: 1.09:1 against paper"
+      },
+      {
+        "name": "sl-color-error-100",
+        "value": "#ffe6e4",
+        "usage": "error 100: 1.18:1 against paper"
+      },
+      {
+        "name": "sl-color-error-200",
+        "value": "#ffc4be",
+        "usage": "error 200: 1.51:1 against paper"
+      },
+      {
+        "name": "sl-color-error-300",
+        "value": "#fe9c93",
+        "usage": "error 300: 2.02:1 against paper"
+      },
+      {
+        "name": "sl-color-error-400",
+        "value": "#f66660",
+        "usage": "error 400: 3:1 against paper"
+      },
+      {
+        "name": "sl-color-error-500",
+        "value": "#d83d3d",
+        "usage": "error 500: 4.5:1 against paper, locked so it always passes"
+      },
+      {
+        "name": "sl-color-error-600",
+        "value": "#b43131",
+        "usage": "error 600: 6.1:1 against paper"
+      },
+      {
+        "name": "sl-color-error-700",
+        "value": "#972828",
+        "usage": "error 700: 7.91:1 against paper"
+      },
+      {
+        "name": "sl-color-error-800",
+        "value": "#741c1c",
+        "usage": "error 800: 10.87:1 against paper"
+      },
+      {
+        "name": "sl-color-error-900",
+        "value": "#531111",
+        "usage": "error 900: 14.38:1 against paper"
+      },
+      {
+        "name": "sl-color-error-1000",
+        "value": "#320707",
+        "usage": "error 1000: 17.89:1 against paper"
+      },
+      {
+        "name": "sl-color-error-on-50",
+        "value": "{sl-color-error-1000}",
+        "usage": "Text on error 50: 17.37:1"
+      },
+      {
+        "name": "sl-color-error-on-75",
+        "value": "{sl-color-error-1000}",
+        "usage": "Text on error 75: 16.44:1"
+      },
+      {
+        "name": "sl-color-error-on-100",
+        "value": "{sl-color-error-1000}",
+        "usage": "Text on error 100: 15.13:1"
+      },
+      {
+        "name": "sl-color-error-on-200",
+        "value": "{sl-color-error-1000}",
+        "usage": "Text on error 200: 11.88:1"
+      },
+      {
+        "name": "sl-color-error-on-300",
+        "value": "{sl-color-error-1000}",
+        "usage": "Text on error 300: 8.89:1"
+      },
+      {
+        "name": "sl-color-error-on-400",
+        "value": "{sl-color-error-1000}",
+        "usage": "Text on error 400: 5.98:1"
+      },
+      {
+        "name": "sl-color-error-on-500",
+        "value": "{sl-color-white}",
+        "usage": "Text on error 500: 4.51:1"
+      },
+      {
+        "name": "sl-color-error-on-600",
+        "value": "{sl-color-error-50}",
+        "usage": "Text on error 600: 5.93:1"
+      },
+      {
+        "name": "sl-color-error-on-700",
+        "value": "{sl-color-error-50}",
+        "usage": "Text on error 700: 7.66:1"
+      },
+      {
+        "name": "sl-color-error-on-800",
+        "value": "{sl-color-error-50}",
+        "usage": "Text on error 800: 10.55:1"
+      },
+      {
+        "name": "sl-color-error-on-900",
+        "value": "{sl-color-error-50}",
+        "usage": "Text on error 900: 13.95:1"
+      },
+      {
+        "name": "sl-color-error-on-1000",
+        "value": "{sl-color-error-50}",
+        "usage": "Text on error 1000: 17.37:1"
+      },
+      {
+        "name": "sl-color-info-50",
+        "value": "#f9fbff",
+        "usage": "info 50: 1.03:1 against paper"
+      },
+      {
+        "name": "sl-color-info-75",
+        "value": "#eff5ff",
+        "usage": "info 75: 1.09:1 against paper"
+      },
+      {
+        "name": "sl-color-info-100",
+        "value": "#e2edff",
+        "usage": "info 100: 1.18:1 against paper"
+      },
+      {
+        "name": "sl-color-info-200",
+        "value": "#b8d4ff",
+        "usage": "info 200: 1.51:1 against paper"
+      },
+      {
+        "name": "sl-color-info-300",
+        "value": "#8cb7fe",
+        "usage": "info 300: 2.02:1 against paper"
+      },
+      {
+        "name": "sl-color-info-400",
+        "value": "#5694f9",
+        "usage": "info 400: 3:1 against paper"
+      },
+      {
+        "name": "sl-color-info-500",
+        "value": "#3473dc",
+        "usage": "info 500: 4.5:1 against paper, locked so it always passes"
+      },
+      {
+        "name": "sl-color-info-600",
+        "value": "#295fb8",
+        "usage": "info 600: 6.1:1 against paper"
+      },
+      {
+        "name": "sl-color-info-700",
+        "value": "#214f9a",
+        "usage": "info 700: 7.91:1 against paper"
+      },
+      {
+        "name": "sl-color-info-800",
+        "value": "#173b76",
+        "usage": "info 800: 10.87:1 against paper"
+      },
+      {
+        "name": "sl-color-info-900",
+        "value": "#0e2854",
+        "usage": "info 900: 14.38:1 against paper"
+      },
+      {
+        "name": "sl-color-info-1000",
+        "value": "#051634",
+        "usage": "info 1000: 17.89:1 against paper"
+      },
+      {
+        "name": "sl-color-info-on-50",
+        "value": "{sl-color-info-1000}",
+        "usage": "Text on info 50: 17.31:1"
+      },
+      {
+        "name": "sl-color-info-on-75",
+        "value": "{sl-color-info-1000}",
+        "usage": "Text on info 75: 16.38:1"
+      },
+      {
+        "name": "sl-color-info-on-100",
+        "value": "{sl-color-info-1000}",
+        "usage": "Text on info 100: 15.2:1"
+      },
+      {
+        "name": "sl-color-info-on-200",
+        "value": "{sl-color-info-1000}",
+        "usage": "Text on info 200: 11.87:1"
+      },
+      {
+        "name": "sl-color-info-on-300",
+        "value": "{sl-color-info-1000}",
+        "usage": "Text on info 300: 8.81:1"
+      },
+      {
+        "name": "sl-color-info-on-400",
+        "value": "{sl-color-info-1000}",
+        "usage": "Text on info 400: 5.98:1"
+      },
+      {
+        "name": "sl-color-info-on-500",
+        "value": "{sl-color-white}",
+        "usage": "Text on info 500: 4.53:1"
+      },
+      {
+        "name": "sl-color-info-on-600",
+        "value": "{sl-color-info-50}",
+        "usage": "Text on info 600: 5.92:1"
+      },
+      {
+        "name": "sl-color-info-on-700",
+        "value": "{sl-color-info-50}",
+        "usage": "Text on info 700: 7.65:1"
+      },
+      {
+        "name": "sl-color-info-on-800",
+        "value": "{sl-color-info-50}",
+        "usage": "Text on info 800: 10.54:1"
+      },
+      {
+        "name": "sl-color-info-on-900",
+        "value": "{sl-color-info-50}",
+        "usage": "Text on info 900: 13.98:1"
+      },
+      {
+        "name": "sl-color-info-on-1000",
+        "value": "{sl-color-info-50}",
+        "usage": "Text on info 1000: 17.31:1"
+      },
+      {
+        "name": "sl-color-data-1",
+        "value": "#a04fdf",
+        "usage": "Data series 1 (violet). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-2",
+        "value": "#ef7053",
+        "usage": "Data series 2 (coral). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-3",
+        "value": "#c4b679",
+        "usage": "Data series 3 (gold). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-4",
+        "value": "#612c3d",
+        "usage": "Data series 4 (burgundy). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-5",
+        "value": "#86e6ca",
+        "usage": "Data series 5 (mint). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-6",
+        "value": "#154975",
+        "usage": "Data series 6 (navy). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-7",
+        "value": "#bbc3fe",
+        "usage": "Data series 7 (periwinkle). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-8",
+        "value": "#0b5313",
+        "usage": "Data series 8 (forest). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-9",
+        "value": "#74ce4b",
+        "usage": "Data series 9 (lime). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-10",
+        "value": "#dac925",
+        "usage": "Data series 10 (yellow). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-11",
+        "value": "#b4a1e2",
+        "usage": "Data series 11 (lavender). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-12",
+        "value": "#ffc3b5",
+        "usage": "Data series 12 (peach). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-13",
+        "value": "#f1e5af",
+        "usage": "Data series 13 (cream). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-14",
+        "value": "#a6838e",
+        "usage": "Data series 14 (mauve). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-15",
+        "value": "#bfecdf",
+        "usage": "Data series 15 (seafoam). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-16",
+        "value": "#7fa8cb",
+        "usage": "Data series 16 (sky). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-17",
+        "value": "#e5e8ff",
+        "usage": "Data series 17 (ice). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-18",
+        "value": "#b1d0b5",
+        "usage": "Data series 18 (sage). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-19",
+        "value": "#d0fabd",
+        "usage": "Data series 19 (chartreuse). Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-20",
+        "value": "#fffce1",
+        "usage": "Data series 20 (ivory). Categorical; use in order."
+      }
+    ]
+  },
+  "type": {
+    "fonts": [],
+    "families": {
+      "display": "'Funnel Display', sans-serif",
+      "body": "'Barlow Semi Condensed', sans-serif",
+      "mono": "'Roboto Mono', monospace"
+    },
+    "groups": [
+      {
+        "name": "Minimize",
+        "family": "body",
+        "styles": [
+          {
+            "name": "text-style-minimize",
+            "family": "body",
+            "fontSize": "0.625rem",
+            "lineHeight": 1.428,
+            "fontWeight": 400,
+            "usage": "Body copy in the minimize tier, the smallest functional text (captions, fine print)."
+          },
+          {
+            "name": "text-style-minimize-trigger",
+            "family": "body",
+            "fontSize": "0.625rem",
+            "lineHeight": 1.428,
+            "fontWeight": 500,
+            "usage": "Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down."
+          },
+          {
+            "name": "text-style-minimize-selected",
+            "family": "body",
+            "fontSize": "0.625rem",
+            "lineHeight": 1.428,
+            "fontWeight": 600,
+            "usage": "The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size."
+          },
+          {
+            "name": "text-style-minimize-link",
+            "family": "body",
+            "fontSize": "0.625rem",
+            "lineHeight": 1.428,
+            "fontWeight": 400,
+            "usage": "Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type."
+          },
+          {
+            "name": "text-style-minimize-subtitle",
+            "family": "body",
+            "fontSize": "0.625rem",
+            "lineHeight": 1.428,
+            "fontWeight": 700,
+            "usage": "Subtitles in the minimize tier, the smallest functional text (captions, fine print)."
+          },
+          {
+            "name": "text-style-minimize-subtitle-label",
+            "family": "body",
+            "fontSize": "0.625rem",
+            "lineHeight": 1.428,
+            "fontWeight": 600,
+            "letterSpacing": "0.1em",
+            "usage": "Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print)."
+          }
+        ]
+      },
+      {
+        "name": "Condense",
+        "family": "body",
+        "styles": [
+          {
+            "name": "text-style-condense",
+            "family": "body",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 400,
+            "usage": "Body copy in the condense tier, dense UI text (tables, secondary labels)."
+          },
+          {
+            "name": "text-style-condense-trigger",
+            "family": "body",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 500,
+            "usage": "Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down."
+          },
+          {
+            "name": "text-style-condense-selected",
+            "family": "body",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 600,
+            "usage": "The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size."
+          },
+          {
+            "name": "text-style-condense-link",
+            "family": "body",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 400,
+            "usage": "Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type."
+          },
+          {
+            "name": "text-style-condense-subtitle",
+            "family": "body",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 700,
+            "usage": "Subtitles in the condense tier, dense UI text (tables, secondary labels)."
+          },
+          {
+            "name": "text-style-condense-subtitle-label",
+            "family": "body",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 600,
+            "letterSpacing": "0.05em",
+            "usage": "Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels)."
+          }
+        ]
+      },
+      {
+        "name": "Base",
+        "family": "body",
+        "styles": [
+          {
+            "name": "text-style-base",
+            "family": "body",
+            "fontSize": "1rem",
+            "lineHeight": 1.35,
+            "fontWeight": 400,
+            "usage": "Body copy in the base tier, the default UI and body text. Fluid: 14px at 320px wide → 16px at 1280px wide."
+          },
+          {
+            "name": "text-style-base-selected",
+            "family": "body",
+            "fontSize": "1rem",
+            "lineHeight": 1.35,
+            "fontWeight": 600,
+            "usage": "The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. Fluid: 14px at 320px wide → 16px at 1280px wide."
+          },
+          {
+            "name": "text-style-base-label",
+            "family": "body",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 500,
+            "usage": "Form labels in the base tier, the default UI and body text."
+          },
+          {
+            "name": "text-style-base-link",
+            "family": "body",
+            "fontSize": "1rem",
+            "lineHeight": 1.35,
+            "fontWeight": 400,
+            "usage": "Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. Fluid: 14px at 320px wide → 16px at 1280px wide."
+          },
+          {
+            "name": "text-style-base-subtitle",
+            "family": "body",
+            "fontSize": "1rem",
+            "lineHeight": 1.35,
+            "fontWeight": 700,
+            "usage": "Subtitles in the base tier, the default UI and body text. Fluid: 14px at 320px wide → 16px at 1280px wide."
+          },
+          {
+            "name": "text-style-base-trigger",
+            "family": "body",
+            "fontSize": "1rem",
+            "lineHeight": 1.428,
+            "fontWeight": 500,
+            "usage": "Buttons and triggers in the base tier, the default UI and body text. Fluid: 14px at 320px wide → 16px at 1280px wide."
+          }
+        ]
+      },
+      {
+        "name": "Magnify",
+        "family": "body",
+        "styles": [
+          {
+            "name": "text-style-magnify",
+            "family": "body",
+            "fontSize": "1.2rem",
+            "lineHeight": 1.35,
+            "fontWeight": 400,
+            "usage": "Body copy in the magnify tier, emphasized body text (lead paragraphs). Fluid: 16px at 320px wide → 19.2px at 1280px wide."
+          },
+          {
+            "name": "text-style-magnify-trigger",
+            "family": "body",
+            "fontSize": "1.2rem",
+            "lineHeight": 1.35,
+            "fontWeight": 500,
+            "usage": "Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. Fluid: 16px at 320px wide → 19.2px at 1280px wide."
+          }
+        ]
+      },
+      {
+        "name": "Maximize",
+        "family": "display",
+        "styles": [
+          {
+            "name": "text-style-maximize-2xl",
+            "family": "display",
+            "fontSize": "1.728rem",
+            "lineHeight": 1.253,
+            "fontWeight": 600,
+            "usage": "Display text at 2xl, for headings and hero copy. Fluid: 23.04px at 320px wide → 27.65px at 1280px wide."
+          },
+          {
+            "name": "text-style-maximize-3xl",
+            "family": "display",
+            "fontSize": "2.0736rem",
+            "lineHeight": 1.204,
+            "fontWeight": 600,
+            "usage": "Display text at 3xl, for headings and hero copy. Fluid: 27.65px at 320px wide → 33.18px at 1280px wide."
+          },
+          {
+            "name": "text-style-maximize-4xl",
+            "family": "display",
+            "fontSize": "2.4883rem",
+            "lineHeight": 1,
+            "fontWeight": 600,
+            "usage": "Display text at 4xl, for headings and hero copy. Fluid: 33.18px at 320px wide → 39.81px at 1280px wide."
+          },
+          {
+            "name": "text-style-maximize-lg",
+            "family": "display",
+            "fontSize": "1.2rem",
+            "lineHeight": 1.35,
+            "fontWeight": 600,
+            "usage": "Display text at lg, for headings and hero copy. Fluid: 16px at 320px wide → 19.2px at 1280px wide."
+          },
+          {
+            "name": "text-style-maximize-md",
+            "family": "display",
+            "fontSize": "1rem",
+            "lineHeight": 1.35,
+            "fontWeight": 600,
+            "usage": "Display text at md, for headings and hero copy. Fluid: 14px at 320px wide → 16px at 1280px wide."
+          },
+          {
+            "name": "text-style-maximize-sm",
+            "family": "display",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 600,
+            "usage": "Display text at sm, for headings and hero copy."
+          },
+          {
+            "name": "text-style-maximize-xl",
+            "family": "display",
+            "fontSize": "1.44rem",
+            "lineHeight": 1.35,
+            "fontWeight": 600,
+            "usage": "Display text at xl, for headings and hero copy. Fluid: 19.2px at 320px wide → 23.04px at 1280px wide."
+          },
+          {
+            "name": "text-style-maximize-xs",
+            "family": "display",
+            "fontSize": "0.625rem",
+            "lineHeight": 1.428,
+            "fontWeight": 600,
+            "usage": "Display text at xs, for headings and hero copy."
+          }
+        ]
+      },
+      {
+        "name": "Code",
+        "family": "mono",
+        "styles": [
+          {
+            "name": "text-style-code",
+            "family": "mono",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 400,
+            "usage": "Code uses the mono family so characters line up."
+          }
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "tokens": [
+      {
+        "name": "sl-space-1",
+        "value": "0.25rem",
+        "usage": "1 × 4px unit = 4px"
+      },
+      {
+        "name": "sl-space-2",
+        "value": "0.5rem",
+        "usage": "2 × 4px unit = 8px"
+      },
+      {
+        "name": "sl-space-3",
+        "value": "0.75rem",
+        "usage": "3 × 4px unit = 12px"
+      },
+      {
+        "name": "sl-space-4",
+        "value": "1rem",
+        "usage": "4 × 4px unit = 16px"
+      },
+      {
+        "name": "sl-space-5",
+        "value": "1.25rem",
+        "usage": "5 × 4px unit = 20px"
+      },
+      {
+        "name": "sl-space-6",
+        "value": "1.5rem",
+        "usage": "6 × 4px unit = 24px"
+      },
+      {
+        "name": "sl-space-7",
+        "value": "1.75rem",
+        "usage": "7 × 4px unit = 28px"
+      },
+      {
+        "name": "sl-space-8",
+        "value": "2rem",
+        "usage": "8 × 4px unit = 32px"
+      },
+      {
+        "name": "sl-space-9",
+        "value": "2.25rem",
+        "usage": "9 × 4px unit = 36px"
+      },
+      {
+        "name": "sl-space-10",
+        "value": "2.5rem",
+        "usage": "10 × 4px unit = 40px"
+      },
+      {
+        "name": "sl-space-11",
+        "value": "2.75rem",
+        "usage": "11 × 4px unit = 44px"
+      },
+      {
+        "name": "sl-space-12",
+        "value": "3rem",
+        "usage": "12 × 4px unit = 48px"
+      },
+      {
+        "name": "sl-space-13",
+        "value": "3.25rem",
+        "usage": "13 × 4px unit = 52px"
+      },
+      {
+        "name": "sl-space-14",
+        "value": "3.5rem",
+        "usage": "14 × 4px unit = 56px"
+      },
+      {
+        "name": "sl-space-16",
+        "value": "4rem",
+        "usage": "16 × 4px unit = 64px"
+      },
+      {
+        "name": "sl-space-20",
+        "value": "5rem",
+        "usage": "20 × 4px unit = 80px"
+      },
+      {
+        "name": "sl-space-24",
+        "value": "6rem",
+        "usage": "24 × 4px unit = 96px"
+      },
+      {
+        "name": "sl-space-28",
+        "value": "7rem",
+        "usage": "28 × 4px unit = 112px"
+      },
+      {
+        "name": "sl-space-32",
+        "value": "8rem",
+        "usage": "32 × 4px unit = 128px"
+      },
+      {
+        "name": "sl-space-36",
+        "value": "9rem",
+        "usage": "36 × 4px unit = 144px"
+      },
+      {
+        "name": "sl-space-40",
+        "value": "10rem",
+        "usage": "40 × 4px unit = 160px"
+      },
+      {
+        "name": "sl-space-44",
+        "value": "11rem",
+        "usage": "44 × 4px unit = 176px"
+      },
+      {
+        "name": "sl-space-48",
+        "value": "12rem",
+        "usage": "48 × 4px unit = 192px"
+      },
+      {
+        "name": "sl-space-52",
+        "value": "13rem",
+        "usage": "52 × 4px unit = 208px"
+      },
+      {
+        "name": "sl-space-56",
+        "value": "14rem",
+        "usage": "56 × 4px unit = 224px"
+      },
+      {
+        "name": "sl-space-60",
+        "value": "15rem",
+        "usage": "60 × 4px unit = 240px"
+      },
+      {
+        "name": "sl-space-64",
+        "value": "16rem",
+        "usage": "64 × 4px unit = 256px"
+      },
+      {
+        "name": "sl-space-72",
+        "value": "18rem",
+        "usage": "72 × 4px unit = 288px"
+      },
+      {
+        "name": "sl-space-80",
+        "value": "20rem",
+        "usage": "80 × 4px unit = 320px"
+      },
+      {
+        "name": "sl-space-96",
+        "value": "24rem",
+        "usage": "96 × 4px unit = 384px"
+      },
+      {
+        "name": "sl-space-px",
+        "value": "1px",
+        "usage": "A single device-independent pixel, for hairline offsets. Not part of the brand unit scale."
+      },
+      {
+        "name": "sl-space-0-5",
+        "value": "0.125rem",
+        "usage": "0.5 × 4px unit = 2px"
+      },
+      {
+        "name": "sl-space-1-5",
+        "value": "0.375rem",
+        "usage": "1.5 × 4px unit = 6px"
+      },
+      {
+        "name": "sl-space-2-5",
+        "value": "0.625rem",
+        "usage": "2.5 × 4px unit = 10px"
+      },
+      {
+        "name": "sl-space-3-5",
+        "value": "0.875rem",
+        "usage": "3.5 × 4px unit = 14px"
+      },
+      {
+        "name": "sl-space-block-lg",
+        "value": "2rem",
+        "usage": "8 × 4px unit = 32px"
+      },
+      {
+        "name": "sl-space-block-md",
+        "value": "1.5rem",
+        "usage": "6 × 4px unit = 24px"
+      },
+      {
+        "name": "sl-space-block-sm",
+        "value": "1rem",
+        "usage": "4 × 4px unit = 16px"
+      },
+      {
+        "name": "sl-space-block-xs",
+        "value": "0.5rem",
+        "usage": "2 × 4px unit = 8px"
+      },
+      {
+        "name": "sl-space-inline-lg",
+        "value": "2rem",
+        "usage": "8 × 4px unit = 32px"
+      },
+      {
+        "name": "sl-space-inline-md",
+        "value": "1.5rem",
+        "usage": "6 × 4px unit = 24px"
+      },
+      {
+        "name": "sl-space-inline-sm",
+        "value": "1rem",
+        "usage": "4 × 4px unit = 16px"
+      },
+      {
+        "name": "sl-space-inline-xs",
+        "value": "0.5rem",
+        "usage": "2 × 4px unit = 8px"
+      }
+    ]
+  },
+  "radius": {
+    "tokens": [
+      {
+        "name": "sl-radius-full",
+        "value": "9999px",
+        "usage": "Fully rounded ends (pills, circles), whatever the brand radius."
+      },
+      {
+        "name": "sl-radius-none",
+        "value": "0",
+        "usage": "0 × 4px base"
+      },
+      {
+        "name": "sl-radius-sm",
+        "value": "0.125rem",
+        "usage": "0.5 × 4px base"
+      },
+      {
+        "name": "sl-radius-base",
+        "value": "0.25rem",
+        "usage": "1 × 4px base"
+      },
+      {
+        "name": "sl-radius-md",
+        "value": "0.375rem",
+        "usage": "1.5 × 4px base"
+      },
+      {
+        "name": "sl-radius-lg",
+        "value": "0.5rem",
+        "usage": "2 × 4px base"
+      },
+      {
+        "name": "sl-radius-xl",
+        "value": "0.75rem",
+        "usage": "3 × 4px base"
+      },
+      {
+        "name": "sl-radius-2xl",
+        "value": "1rem",
+        "usage": "4 × 4px base"
+      },
+      {
+        "name": "sl-radius-3xl",
+        "value": "1.5rem",
+        "usage": "6 × 4px base"
+      },
+      {
+        "name": "sl-radius-box",
+        "value": "0.25rem",
+        "usage": "Default rounding for boxes that are not controls or surfaces."
+      },
+      {
+        "name": "sl-radius-chrome",
+        "value": "0.375rem",
+        "usage": "App chrome such as toolbars and menubars."
+      },
+      {
+        "name": "sl-radius-control",
+        "value": "0.125rem",
+        "usage": "Inputs, buttons and other controls you click or type in."
+      },
+      {
+        "name": "sl-radius-focus",
+        "value": "0.125rem",
+        "usage": "Focus rings follow the control radius."
+      },
+      {
+        "name": "sl-radius-item",
+        "value": "0.125rem",
+        "usage": "Rows inside menus and lists, so highlighted items keep a soft edge inside the popup."
+      },
+      {
+        "name": "sl-radius-minimal",
+        "value": "0",
+        "usage": "Square corners for things that tile edge to edge."
+      },
+      {
+        "name": "sl-radius-modal",
+        "value": "0.75rem",
+        "usage": "Dialogs get the largest radius so they read as a separate layer."
+      },
+      {
+        "name": "sl-radius-pill",
+        "value": "9999px",
+        "usage": "Fully rounded ends for pills, badges and switches."
+      },
+      {
+        "name": "sl-radius-surface",
+        "value": "0.5rem",
+        "usage": "Cards, popovers and panels."
+      }
+    ]
+  },
+  "shadow": {
+    "tokens": [
+      {
+        "name": "sl-elevation-2xl",
+        "value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        "usage": "Elevation 2xl"
+      },
+      {
+        "name": "sl-elevation-base",
+        "value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+        "usage": "Elevation base"
+      },
+      {
+        "name": "sl-elevation-lg",
+        "value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        "usage": "Elevation lg"
+      },
+      {
+        "name": "sl-elevation-md",
+        "value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        "usage": "Elevation md"
+      },
+      {
+        "name": "sl-elevation-sm",
+        "value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        "usage": "Elevation sm"
+      },
+      {
+        "name": "sl-elevation-xl",
+        "value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        "usage": "Elevation xl"
+      },
+      {
+        "name": "sl-elevation-xs",
+        "value": "0 0 0 1px rgba(0, 0, 0, 0.05)",
+        "usage": "Elevation xs"
+      }
+    ]
+  },
+  "stroke": {
+    "tokens": [
+      {
+        "name": "sl-stroke-thin",
+        "value": "1px",
+        "usage": "1 × 1px base"
+      },
+      {
+        "name": "sl-stroke-medium",
+        "value": "2px",
+        "usage": "2 × 1px base"
+      },
+      {
+        "name": "sl-stroke-thick",
+        "value": "3px",
+        "usage": "3 × 1px base"
+      },
+      {
+        "name": "sl-stroke-default",
+        "value": "1px",
+        "usage": "Normal borders."
+      },
+      {
+        "name": "sl-stroke-emphasis",
+        "value": "2px",
+        "usage": "Borders that mark a selected or focused state."
+      },
+      {
+        "name": "sl-stroke-strong",
+        "value": "3px",
+        "usage": "Borders that must hold up at a distance, such as dashed drop zones."
+      }
+    ]
+  }
+}