@cruglobal/cornerstone-components 0.1.0

package/dist/unbundled/skills/cornerstone/references/tokens/color.md

@@ -0,0 +1,298 @@
+# Color
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/tokens/color
+
+<style>
+  /* Palette swatches */
+  .palette-swatches {
+    display: grid;
+    grid-template-columns: repeat(11, 1fr);
+    gap: var(--cs-space-3xs);
+    margin-block-start: var(--cs-space-l);
+    margin-block-end: var(--cs-space-m);
+  }
+  .palette-swatch {
+    display: block;
+    position: relative;
+    aspect-ratio: 1.5 / 1;
+  }
+  .swatch-button {
+    all: revert;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    background-color: var(--color);
+    border-radius: var(--cs-border-radius-m);
+    transition: transform 0.1s ease, translate 0.1s ease, box-shadow 0.1s ease;
+
+    &:hover {
+      transform: scale(1.075);
+      box-shadow: var(--cs-shadow-s);
+      z-index: 1;
+    }
+
+    &:active {
+      translate: 0 1px;
+      box-shadow: none;
+    }
+  }
+  @media (max-width: 576px) {
+    .palette-swatches {
+      grid-template-columns: repeat(6, 1fr);
+      gap: var(--cs-space-2xs);
+      row-gap: var(--cs-space-l);
+    }
+    .palette-swatch {
+      &::before {
+        font-size: var(--cs-font-size-2xs);
+        top: calc(-1 * var(--cs-space-m));
+      }
+    }
+  }
+
+  .color-mix-example {
+    background-image:
+      linear-gradient(
+        to right,
+        color-mix(in oklab, transparent, var(--mix-color)) 25%,
+        color-mix(in oklab, var(--cs-color-brand-fill-loud), var(--mix-color)) 25%,
+        color-mix(in oklab, var(--cs-color-brand-fill-loud), var(--mix-color)) 75%,
+        var(--cs-color-brand-fill-loud) 75%
+      );
+    border: none;
+    color: var(--cs-color-brand-on-loud);
+    text-align: center;
+  }
+</style>
+
+Cornerstone's color system is made up of three layers: a [color palette](https://cruglobal.github.io/cornerstone-design-system/color-palettes) that gives you a full spectrum of hues, [variant colors](#variant-colors) that define semantic color variations (like success and danger), and [colors for themed elements](#color-for-themed-elements) that apply specific tints from your palette and variant colors to the elements that make up a theme.
+
+For an overview of how theming works across the library, see [Theming <cs-icon name="arrow_forward"></cs-icon>](https://cruglobal.github.io/cornerstone-design-system/theming-overview).
+
+## Color Palette
+
+[Color palettes](https://cruglobal.github.io/cornerstone-design-system/color-palettes) give you a full spectrum of colors to use in your project and are the lowest-level color tokens. Cru's palette includes 19 hues, each with 11 numeric tints that make up a color scale from light to dark — `95` is near white, `05` is near black.
+
+These numeric tints help ensure accessible color contrast per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum):
+
+- A difference of 40 provides a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
+- A difference of 50 provides a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
+- A difference of 60 provides a minimum 7:1 contrast ratio, suitable for all text (AAA)
+
+### Core Colors
+
+In addition to numeric tints, each hue has a _core color_ — the most colorful, vibrant tint in the scale. The exact tint varies by palette. Use `--cs-color-{hue}` when you want a representative color for a hue without specifying a tint.
+
+The tint for each core color is stored as an integer in `--cs-color-{hue}-key`. These tokens are used internally to determine a compatible text color when using the core color as a background and are not used directly by components.
+
+Using this key, the color system derives a paired _on color_ guaranteed to meet WCAG 2.1 AA contrast when placed on top of the corresponding core color. If the core tint is light (≥ 60), the on color is a dark shade of that hue; otherwise it is white. Use `--cs-color-{hue}-on` any time you render text or icons on a core color background.
+
+## Variant Colors
+
+Variant colors are aliases for specific hues in your color palette to give them an extra layer of semantic meaning. These variants are familiar, meaningful hues that reinforce a specific message or intended use:
+
+| Variant | Use | Default |
+| --- | --- | --- |
+| Brand | Product recognition | <cs-icon name="square" style="color: var(--cs-color-yellow);" variant="fill"></cs-icon> yellow |
+| Neutral | Generic and ordinary content | <cs-icon name="square" style="color: var(--cs-color-gray);" variant="fill"></cs-icon> gray |
+| Highlight | Emphasis without a status meaning | <cs-icon name="square" style="color: var(--cs-color-purple);" variant="fill"></cs-icon> purple |
+| Information | Neutral, informative messages | <cs-icon name="square" style="color: var(--cs-color-turquoise);" variant="fill"></cs-icon> turquoise |
+| Success | Validity or confirmation | <cs-icon name="square" style="color: var(--cs-color-green);" variant="fill"></cs-icon> green |
+| Warning | Caution or uncertainty | <cs-icon name="square" style="color: var(--cs-color-orange);" variant="fill"></cs-icon> orange |
+| Danger | Errors or risk | <cs-icon name="square" style="color: var(--cs-color-cerise);" variant="fill"></cs-icon> cerise |
+| Link | Hyperlinks | <cs-icon name="square" style="color: var(--cs-color-cyan);" variant="fill"></cs-icon> cyan |
+
+Brand and neutral are used by nearly every element, component, and pattern across the library. Success, warning and danger are used selectively by components that could benefit from semantic reinforcement, such as buttons and callouts. Highlight, information and link are Cru's own additions to the set.
+
+Each variant color is an alias for a palette color and follows the same token format: `--cs-color-{variant}-{tint}`.
+
+### Core Colors
+
+Just like the hues in your color palette, each variant has a _core color_ — an alias for the most colorful, vibrant tint in the color scale selected for your variant. Use `--cs-color-{variant}` when you want a representative color for a variant without specifying a tint.
+
+Each core color also has a paired _on color_ (`--cs-color-{variant}-on`) guaranteed to meet WCAG 2.1 AA contrast when placed on top of it. Use on color tokens any time you render text or icons on a core color background.
+
+### Changing Variant Colors
+
+Any hue from your color palette can be assigned to any variant without redefining the tokens in your own stylesheet. To use a different hue, apply the `cs-{variant}-{hue}` class to the `<html>` element.
+
+```html
+<html class="cs-brand-purple cs-success-cyan"></html>
+```
+
+Every hue in the palette is available for every variant — the scales above are the full list.
+
+## Color for Themed Elements
+
+These tokens apply specific tints from your color palette and variant colors to the elements and components that make up a theme. They're named for the role they play rather than their appearance, and adapt to light and dark modes.
+
+### Surfaces
+
+Surfaces are background layers that content rests on. They convey elevation hierarchy — `raised` is closest to the user (e.g., dialogs) and `lowered` is farthest away (e.g., wells).
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr>
+        <th>Custom Property</th>
+        <th>Description</th>
+        <th>Preview</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-color-surface-raised">
+        <td class="token-name"><code>--cs-color-surface-raised</code></td>
+        <td>Background for elevated surfaces like dialogs and dropdown menus</td>
+        <td><div class="swatch" style="background-color: var(--cs-color-surface-raised); box-shadow: var(--cs-shadow-s)"></div></td>
+      </tr>
+      <tr id="token-cs-color-surface-default">
+        <td class="token-name"><code>--cs-color-surface-default</code></td>
+        <td>Default page or container background</td>
+        <td><div class="swatch" style="background-color: var(--cs-color-surface-default)"></div></td>
+      </tr>
+      <tr id="token-cs-color-surface-lowered">
+        <td class="token-name"><code>--cs-color-surface-lowered</code></td>
+        <td>Background for recessed surfaces like wells and code blocks</td>
+        <td><div class="swatch" style="background-color: var(--cs-color-surface-lowered); box-shadow: inset var(--cs-shadow-s)"></div></td>
+      </tr>
+      <tr id="token-cs-color-surface-border">
+        <td class="token-name"><code>--cs-color-surface-border</code></td>
+        <td>Border color used to delineate surface areas</td>
+        <td><div class="swatch" style="border-color: var(--cs-color-surface-border)"></div></td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+### Text
+
+Text colors are used for readable content and should meet a minimum 4.5:1 contrast ratio against surface colors.
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr>
+        <th>Custom Property</th>
+        <th>Description</th>
+        <th>Preview</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-color-text-normal">
+        <td class="token-name"><code>--cs-color-text-normal</code></td>
+        <td>Primary text color for most content</td>
+        <td><div style="color: var(--cs-color-text-normal); font-weight: var(--cs-font-weight-semibold)">AaBb</div></td>
+      </tr>
+      <tr id="token-cs-color-text-quiet">
+        <td class="token-name"><code>--cs-color-text-quiet</code></td>
+        <td>Subdued text for hints, captions, and other secondary content</td>
+        <td><div style="color: var(--cs-color-text-quiet); font-weight: var(--cs-font-weight-semibold)">AaBb</div></td>
+      </tr>
+      <tr id="token-cs-color-text-link">
+        <td class="token-name"><code>--cs-color-text-link</code></td>
+        <td>Color for hyperlinks</td>
+        <td><div style="color: var(--cs-color-text-link); font-weight: var(--cs-font-weight-semibold)">AaBb</div></td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+### Overlays
+
+Overlays provide a backdrop that isolates content, often with some transparency so background context shows through.
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr>
+        <th>Custom Property</th>
+        <th>Description</th>
+        <th>Preview</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-color-overlay-modal">
+        <td class="token-name"><code>--cs-color-overlay-modal</code></td>
+        <td>Semi-transparent backdrop behind modal dialogs</td>
+        <td><div class="swatch" style="background-color: var(--cs-color-overlay-modal)"></div></td>
+      </tr>
+      <tr id="token-cs-color-overlay-inline">
+        <td class="token-name"><code>--cs-color-overlay-inline</code></td>
+        <td>Subtle overlay for inline highlights or dimmed regions</td>
+        <td><div class="swatch" style="background-color: var(--cs-color-overlay-inline)"></div></td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+### Shadow
+
+A single color is used for all drop shadows. Use it alongside the [shadow tokens](https://cruglobal.github.io/cornerstone-design-system/tokens/shadows) to construct realistic shadows.
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr>
+        <th>Custom Property</th>
+        <th>Description</th>
+        <th>Preview</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-color-shadow">
+        <td class="token-name"><code>--cs-color-shadow</code></td>
+        <td>Color used for all component drop shadows</td>
+        <td><div class="swatch" style="background-color: var(--cs-color-surface-raised); box-shadow: var(--cs-shadow-l)"></div></td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+### Interactions
+
+These tokens power the consistent hover, active, and focus feedback you see across interactive components. The `--cs-color-focus` token sets the color of the keyboard focus ring. The `--cs-color-mix-hover` and `--cs-color-mix-active` tokens are overlays — they're mixed into a component's background via [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) to subtly shift it on hover and press, so every interactive component reacts consistently without each one defining its own hover/active palette.
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr>
+        <th>Custom Property</th>
+        <th>Description</th>
+        <th>Preview</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-color-focus">
+        <td class="token-name"><code>--cs-color-focus</code></td>
+        <td>Outline color for keyboard focus rings. Used alongside <a href="/tokens/focus">focus tokens</a>.</td>
+        <td><div class="swatch" style="outline: var(--cs-focus-ring)"></div></td>
+      </tr>
+      <tr id="token-cs-color-mix-hover">
+        <td class="token-name"><code>--cs-color-mix-hover</code></td>
+        <td>Color blended into a component's fill on hover</td>
+        <td><div class="swatch color-mix-example" style="--mix-color: var(--cs-color-mix-hover)"><small>mix</small></div></td>
+      </tr>
+      <tr id="token-cs-color-mix-active">
+        <td class="token-name"><code>--cs-color-mix-active</code></td>
+        <td>Color blended into a component's fill on press</td>
+        <td><div class="swatch color-mix-example" style="--mix-color: var(--cs-color-mix-active)"><small>mix</small></div></td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+### Semantic Variants
+
+Semantic variants use the `--cs-color-{variant}-{tint}` tokens from your [variant colors](#variant-colors) to power the `variant=""` attribute shared by buttons, badges, callouts, and many other components. Each variant is a complete, self-contained color system defining fills, borders, and on colors at three attention levels. Seven of the eight have them: `link` has a color scale but no attention levels, because it colors hyperlinks rather than backing a `variant=""`.
+
+Tokens follow the format `--cs-color-{variant}-{role}-{attention}`. The three **roles** are:
+
+- **Fill** for backgrounds or areas larger than a few pixels
+- **Border** for borders, dividers, and strokes
+- **On** for content displayed _on top of_ a fill (pair `on-loud` with `fill-loud`)
+
+The three **attention** levels are `quiet`, `normal`, and `loud` — from least to most visually prominent.

package/dist/unbundled/skills/cornerstone/references/tokens/component-groups.md

@@ -0,0 +1,252 @@
+# Component Groups
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/tokens/component-groups
+
+Component tokens let you style groups of related components at once. Rather than overriding individual component styles, these tokens propagate the style across every component that shares a given visual quality.
+
+## Form Controls
+
+Components such as [input](https://cruglobal.github.io/cornerstone-design-system/components/input), [select](https://cruglobal.github.io/cornerstone-design-system/components/select), [textarea](https://cruglobal.github.io/cornerstone-design-system/components/textarea), [checkbox](https://cruglobal.github.io/cornerstone-design-system/components/checkbox), and others share styles defined with the `--cs-form-control-*` prefix.
+
+Not every form control uses all of these custom properties. For example, [radio](https://cruglobal.github.io/cornerstone-design-system/components/radio) defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, [button](https://cruglobal.github.io/cornerstone-design-system/components/button) defines many of its own styles but matches the height and border width of other form controls.
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr><th>Custom Property</th><th>Description</th></tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-form-control-background-color">
+        <td class="token-name"><code>--cs-form-control-background-color</code></td>
+        <td>Background color of form control inputs</td>
+      </tr>
+      <tr id="token-cs-form-control-border-color">
+        <td class="token-name"><code>--cs-form-control-border-color</code></td>
+        <td>Border color of form control inputs</td>
+      </tr>
+      <tr id="token-cs-form-control-border-style">
+        <td class="token-name"><code>--cs-form-control-border-style</code></td>
+        <td>Border line style of form control inputs</td>
+      </tr>
+      <tr id="token-cs-form-control-border-width">
+        <td class="token-name"><code>--cs-form-control-border-width</code></td>
+        <td>Border thickness of form control inputs</td>
+      </tr>
+      <tr id="token-cs-form-control-border-radius">
+        <td class="token-name"><code>--cs-form-control-border-radius</code></td>
+        <td>Corner rounding of form control inputs</td>
+      </tr>
+      <tr id="token-cs-form-control-activated-color">
+        <td class="token-name"><code>--cs-form-control-activated-color</code></td>
+        <td>Accent color when a control is active, checked, or selected</td>
+      </tr>
+      <tr id="token-cs-form-control-label-color">
+        <td class="token-name"><code>--cs-form-control-label-color</code></td>
+        <td>Text color of form control labels</td>
+      </tr>
+      <tr id="token-cs-form-control-label-font-weight">
+        <td class="token-name"><code>--cs-form-control-label-font-weight</code></td>
+        <td>Font weight of form control labels</td>
+      </tr>
+      <tr id="token-cs-form-control-label-line-height">
+        <td class="token-name"><code>--cs-form-control-label-line-height</code></td>
+        <td>Line height of form control labels</td>
+      </tr>
+      <tr id="token-cs-form-control-value-color">
+        <td class="token-name"><code>--cs-form-control-value-color</code></td>
+        <td>Text color of the user-entered or selected value</td>
+      </tr>
+      <tr id="token-cs-form-control-value-font-weight">
+        <td class="token-name"><code>--cs-form-control-value-font-weight</code></td>
+        <td>Font weight of the user-entered or selected value</td>
+      </tr>
+      <tr id="token-cs-form-control-value-line-height">
+        <td class="token-name"><code>--cs-form-control-value-line-height</code></td>
+        <td>Line height of the user-entered or selected value</td>
+      </tr>
+      <tr id="token-cs-form-control-hint-color">
+        <td class="token-name"><code>--cs-form-control-hint-color</code></td>
+        <td>Text color of the hint text below a form control</td>
+      </tr>
+      <tr id="token-cs-form-control-hint-font-weight">
+        <td class="token-name"><code>--cs-form-control-hint-font-weight</code></td>
+        <td>Font weight of hint text</td>
+      </tr>
+      <tr id="token-cs-form-control-hint-line-height">
+        <td class="token-name"><code>--cs-form-control-hint-line-height</code></td>
+        <td>Line height of hint text</td>
+      </tr>
+      <tr id="token-cs-form-control-placeholder-color">
+        <td class="token-name"><code>--cs-form-control-placeholder-color</code></td>
+        <td>Text color of input placeholder text</td>
+      </tr>
+      <tr id="token-cs-form-control-required-content">
+        <td class="token-name"><code>--cs-form-control-required-content</code></td>
+        <td>Content appended to labels of required fields</td>
+      </tr>
+      <tr id="token-cs-form-control-required-content-color">
+        <td class="token-name"><code>--cs-form-control-required-content-color</code></td>
+        <td>Color of the required field indicator</td>
+      </tr>
+      <tr id="token-cs-form-control-required-content-offset">
+        <td class="token-name"><code>--cs-form-control-required-content-offset</code></td>
+        <td>Inline spacing between the label text and required indicator</td>
+      </tr>
+      <tr id="token-cs-form-control-padding-block">
+        <td class="token-name"><code>--cs-form-control-padding-block</code></td>
+        <td>Block (top/bottom) padding inside form control inputs</td>
+      </tr>
+      <tr id="token-cs-form-control-padding-inline">
+        <td class="token-name"><code>--cs-form-control-padding-inline</code></td>
+        <td>Inline (left/right) padding inside form control inputs</td>
+      </tr>
+      <tr id="token-cs-form-control-height">
+        <td class="token-name"><code>--cs-form-control-height</code></td>
+        <td>Computed height of single-line form controls; derived from padding and line height</td>
+      </tr>
+      <tr id="token-cs-form-control-toggle-size">
+        <td class="token-name"><code>--cs-form-control-toggle-size</code></td>
+        <td>Size of toggle controls (checkboxes, radios, switches)</td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+```html
+<form class="cs-stack">
+  <cs-input label="Input" placeholder="Placeholder"></cs-input>
+  <cs-select label="Select" value="option-1">
+    <cs-option value="option-1">Option 1</cs-option>
+    <cs-option value="option-2">Option 2</cs-option>
+    <cs-option value="option-3">Option 3</cs-option>
+  </cs-select>
+  <cs-textarea label="Textarea" placeholder="Placeholder"></cs-textarea>
+  <cs-radio-group label="Radio group" name="a" value="1">
+    <cs-radio value="1">Option 1</cs-radio>
+    <cs-radio value="2">Option 2</cs-radio>
+    <cs-radio value="3">Option 3</cs-radio>
+  </cs-radio-group>
+  <cs-checkbox>Checkbox</cs-checkbox>
+  <cs-switch>Switch</cs-switch>
+  <cs-slider label="Range"></cs-slider>
+  <cs-button>Button</cs-button>
+</form>
+```
+
+## Buttons
+
+In addition to sharing styles with form controls, [buttons](https://cruglobal.github.io/cornerstone-design-system/components/button) have their own subset of unique tokens.
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr><th>Custom Property</th><th>Description</th><th>Preview</th></tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-button-transform-hover">
+        <td class="token-name"><code>--cs-button-transform-hover</code></td>
+        <td>A transform function to apply to buttons on mouseover/hover</td>
+        <td><cs-button variant="brand" appearance="filled">Mouse Over Me</cs-button></td>
+      </tr>
+      <tr id="token-cs-button-transform-active">
+        <td class="token-name"><code>--cs-button-transform-active</code></td>
+        <td>A transform function to apply to buttons when pressed/active</td>
+        <td><cs-button variant="brand" appearance="filled">Press Me</cs-button></td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+## Panels
+
+Panel tokens apply to components with larger, contained surface areas, like [callout](https://cruglobal.github.io/cornerstone-design-system/components/callout), [card](https://cruglobal.github.io/cornerstone-design-system/components/card), [details](https://cruglobal.github.io/cornerstone-design-system/components/details), and [dialog](https://cruglobal.github.io/cornerstone-design-system/components/dialog).
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr><th>Custom Property</th><th>Description</th></tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-panel-border-style">
+        <td class="token-name"><code>--cs-panel-border-style</code></td>
+        <td>Border line style for panel components</td>
+      </tr>
+      <tr id="token-cs-panel-border-width">
+        <td class="token-name"><code>--cs-panel-border-width</code></td>
+        <td>Border thickness for panel components</td>
+      </tr>
+      <tr id="token-cs-panel-border-radius">
+        <td class="token-name"><code>--cs-panel-border-radius</code></td>
+        <td>Corner rounding for panel components</td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+```html
+<div class="cs-stack">
+  <cs-callout>
+    <cs-icon slot="icon" name="info"></cs-icon>
+    This is a simple callout with an icon.
+  </cs-callout>
+  <cs-card>Here's a basic, no-nonsense card.</cs-card>
+  <cs-details summary="Details"> <code>cs-details</code>, at your service. </cs-details>
+</div>
+```
+
+## Tooltips
+
+Tooltip tokens apply to the [tooltip](https://cruglobal.github.io/cornerstone-design-system/components/tooltip) component and built-in tooltips in other components like [slider](https://cruglobal.github.io/cornerstone-design-system/components/slider) and [copy button](https://cruglobal.github.io/cornerstone-design-system/components/copy-button).
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr><th>Custom Property</th><th>Description</th></tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-tooltip-arrow-size">
+        <td class="token-name"><code>--cs-tooltip-arrow-size</code></td>
+        <td>Size of the tooltip arrow/caret</td>
+      </tr>
+      <tr id="token-cs-tooltip-background-color">
+        <td class="token-name"><code>--cs-tooltip-background-color</code></td>
+        <td>Background color of the tooltip body</td>
+      </tr>
+      <tr id="token-cs-tooltip-border-color">
+        <td class="token-name"><code>--cs-tooltip-border-color</code></td>
+        <td>Border color of the tooltip</td>
+      </tr>
+      <tr id="token-cs-tooltip-border-style">
+        <td class="token-name"><code>--cs-tooltip-border-style</code></td>
+        <td>Border line style of the tooltip</td>
+      </tr>
+      <tr id="token-cs-tooltip-border-width">
+        <td class="token-name"><code>--cs-tooltip-border-width</code></td>
+        <td>Border thickness of the tooltip</td>
+      </tr>
+      <tr id="token-cs-tooltip-border-radius">
+        <td class="token-name"><code>--cs-tooltip-border-radius</code></td>
+        <td>Corner rounding of the tooltip</td>
+      </tr>
+      <tr id="token-cs-tooltip-content-color">
+        <td class="token-name"><code>--cs-tooltip-content-color</code></td>
+        <td>Text color of tooltip content</td>
+      </tr>
+      <tr id="token-cs-tooltip-font-size">
+        <td class="token-name"><code>--cs-tooltip-font-size</code></td>
+        <td>Font size of tooltip text</td>
+      </tr>
+      <tr id="token-cs-tooltip-line-height">
+        <td class="token-name"><code>--cs-tooltip-line-height</code></td>
+        <td>Line height of tooltip text</td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+```html
+<cs-button id="tooltip-demo" appearance="plain">
+  <cs-icon label="Target" name="target"></cs-icon>
+</cs-button>
+<cs-tooltip for="tooltip-demo" open trigger="manual">This is a tooltip</cs-tooltip>
+```

package/dist/unbundled/skills/cornerstone/references/tokens/focus.md

@@ -0,0 +1,43 @@
+# Focus
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/tokens/focus
+
+Focus tokens create a consistent, recognizable outline that lets keyboard users track where they are on the page. Together with [`--cs-color-focus`](https://cruglobal.github.io/cornerstone-design-system/tokens/color), these tokens assemble the focus ring applied to all interactive Cornerstone components.
+
+<cs-scroller>
+  <table class="token-table cs-hover-rows">
+    <thead>
+      <tr><th>Custom Property</th><th>Description</th></tr>
+    </thead>
+    <tbody>
+      <tr id="token-cs-focus-ring-style">
+        <td class="token-name"><code>--cs-focus-ring-style</code></td>
+        <td>Line style for the focus outline</td>
+      </tr>
+      <tr id="token-cs-focus-ring-width">
+        <td class="token-name"><code>--cs-focus-ring-width</code></td>
+        <td>Thickness of the focus outline</td>
+      </tr>
+      <tr id="token-cs-focus-ring">
+        <td class="token-name"><code>--cs-focus-ring</code></td>
+        <td>Shorthand combining style, width, and color into a complete focus outline value</td>
+      </tr>
+      <tr id="token-cs-focus-ring-offset">
+        <td class="token-name"><code>--cs-focus-ring-offset</code></td>
+        <td>Gap between the element's edge and the focus outline</td>
+      </tr>
+    </tbody>
+  </table>
+</cs-scroller>
+
+See your theme's focus ring by navigating this form with your keyboard:
+
+```html
+<form class="cs-stack">
+  <cs-input label="Text Input">
+    <span slot="hint">Press <kbd>Tab</kbd> to move focus to other interactive elements.</span>
+  </cs-input>
+  <cs-checkbox>Checkbox</cs-checkbox>
+  <cs-button variant="brand">Button</cs-button>
+</form>
+```