@uncinq/component-tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Un Cinq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,180 @@
+# @uncinq/component-tokens
+
+> Component-scoped CSS design tokens for Un Cinq projects — layer 3 of the design token architecture.
+
+<img width="1280" height="640" alt="share-component-tokens" src="https://github.com/user-attachments/assets/ef2387ee-2c45-4706-9e28-0f0341a100ed" />
+
+## What are component tokens?
+
+Component tokens are CSS custom properties scoped to a specific UI component. They sit at the top of the [DTCG](https://tr.designtokens.org/format/) three-layer model:
+
+```text
+primitive   →   semantic   →   component
+(raw values)    (purpose)      (component-scoped)
+```
+
+Where primitive and semantic tokens are provided by [@uncinq/design-tokens](https://github.com/uncinq/design-tokens), component tokens map those semantic values to specific parts of a component:
+
+```css
+/* semantic token from @uncinq/design-tokens */
+--color-brand: var(--color-indigo-600);
+
+/* component token from @uncinq/component-tokens */
+--btn-color-bg: var(--color-brand);
+```
+
+A component token answers: **"which semantic value does this part of this component use?"**
+
+---
+
+## Naming convention
+
+All component tokens follow the pattern: `--{component}-{category?}-{property}`
+
+```text
+--{component}               --btn
+  -{category}               --btn-color
+    -{property}             --btn-color-bg
+      -{state}              --btn-color-bg-hover
+```
+
+### Rules
+
+- **Lowercase kebab-case** — always
+- **Component name first** — `--btn-*`, `--badge-*`, `--hero-*`
+- **`color-*` for all color values** — background, border, text all use `color-` prefix
+- **States at the end** — `-hover`, `-focus`, `-active`, `-disabled`
+- **Reference semantic tokens** — never raw values; always `var(--semantic-token)`
+- **Alphabetical order** — tokens within a file are sorted alphabetically; group related tokens with a comment when the component has many properties:
+
+```css
+/* Border */
+--btn-border-radius: var(--radius-control);
+--btn-border-width:  var(--border-width-normal);
+
+/* Color */
+--btn-color-bg:   var(--color-brand);
+--btn-color-text: var(--color-text-on-brand);
+
+/* Spacing */
+--btn-gap:     var(--spacing-sm);
+--btn-padding: var(--spacing-control);
+```
+
+### Examples
+
+```css
+--btn-color-bg:      var(--color-brand);
+--btn-color-text:    var(--color-text-on-brand);
+--btn-border-radius: var(--radius-control);
+--btn-padding:       var(--spacing-control);
+
+--badge-border-radius: var(--radius-sm);
+--badge-color-bg:    var(--color-bg-muted);
+
+--hero-color-bg:     var(--color-bg);
+--hero-min-height:   50svh;
+```
+
+---
+
+## CSS cascade layers
+
+All tokens are declared inside `@layer config`, the lowest-priority layer in the stack. This means any project can override any token simply by declaring its own `@layer config` block after this package:
+
+```css
+@import '@uncinq/component-tokens';
+
+/* your project overrides — same layer, wins by source order */
+@layer config {
+  :root {
+    --btn-color-bg: var(--color-secondary);
+    --hero-min-height: 80svh;
+  }
+}
+```
+
+---
+
+## Prerequisites
+
+This package references semantic tokens from [@uncinq/design-tokens](https://github.com/uncinq/design-tokens). Import it before this package:
+
+```css
+@import '@uncinq/design-tokens';
+@import '@uncinq/component-tokens';
+```
+
+---
+
+## Installation
+
+```bash
+npm install @uncinq/component-tokens
+# or
+yarn add @uncinq/component-tokens
+```
+
+### Usage — full import
+
+```css
+@import '@uncinq/design-tokens';
+@import '@uncinq/component-tokens';
+```
+
+### Usage — per component
+
+```css
+@import '@uncinq/design-tokens';
+@import '@uncinq/component-tokens/tokens/component/button.css';
+@import '@uncinq/component-tokens/tokens/component/badge.css';
+```
+
+### Usage — CDN (no build step)
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@uncinq/design-tokens/tokens/index.css">
+<link rel="stylesheet" href="https://unpkg.com/@uncinq/component-tokens/tokens/index.css">
+```
+
+---
+
+## File structure
+
+```text
+tokens/
+  index.css               ← imports all component token files
+  component/
+    alert.css             ← alert / notification banner
+    badge.css             ← badge / pill / tag
+    breadcrumb.css        ← breadcrumb navigation
+    button.css            ← button (all variants)
+    card.css              ← card (alias → item tokens)
+    container.css         ← layout container + grid columns
+    details.css           ← <details> / accordion
+    dropdown.css          ← dropdown menu
+    embed.css             ← video / iframe embed wrapper
+    figure.css            ← <figure> + <figcaption>
+    heading.css           ← heading typography scale
+    hero.css              ← hero / banner section
+    item.css              ← item (canonical card-like unit)
+    items.css             ← items grid / list wrapper
+    link.css              ← inline link
+    list.css              ← styled list
+    logo.css              ← logotype
+    map.css               ← embedded map
+    media.css             ← media object (image + text)
+    nav.css               ← navigation bar
+    offcanvas.css         ← off-canvas panel / drawer
+    pagination.css        ← pagination control
+    surtitle.css          ← small label above a heading
+    table.css             ← data table
+```
+
+---
+
+## References
+
+- [DTCG specification](https://tr.designtokens.org/format/) — W3C Community Group draft
+- [@uncinq/design-tokens](https://github.com/uncinq/design-tokens) — primitive + semantic layers
+- [MDN: CSS cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@uncinq/component-tokens",
+  "version": "0.1.0",
+  "description": "Framework-agnostic CSS design tokens — component layers.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uncinq/component-tokens.git"
+  },
+  "homepage": "https://github.com/uncinq/component-tokens#readme",
+  "author": {
+    "name": "Un Cinq",
+    "url": "https://uncinq.dev/"
+  },
+  "keywords": [
+    "design-tokens",
+    "component-tokens",
+    "css",
+    "custom-properties",
+    "design-system"
+  ],
+  "files": [
+    "tokens/"
+  ],
+  "exports": {
+    ".": "./tokens/index.css",
+    "./tokens/index.css": "./tokens/index.css",
+    "./tokens/component/*": "./tokens/component/*"
+  },
+  "style": "./tokens/index.css",
+  "peerDependencies": {
+    "@uncinq/design-tokens": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/tokens/component/alert.css

@@ -0,0 +1,10 @@
+/* tokens/component/alert.css */
+@layer config {
+  :root {
+    --alert-border-radius: var(--radius-none);
+    --alert-font-size: var(--font-size-text);
+    --alert-gap: var(--spacing-sm);
+    --alert-margin: 0;
+    --alert-padding: var(--spacing-sm);
+  }
+}

package/tokens/component/badge.css

@@ -0,0 +1,13 @@
+/* tokens/component/badge.css */
+@layer config {
+  :root {
+    --badge-color-border: transparent;
+    --badge-border-radius: var(--radius-pill);
+    --badge-border-style: solid;
+    --badge-border-width: 0;
+    --badge-font-size: var(--font-size-2xs);
+    --badge-font-weight: var(--font-weight-control);
+    --badge-padding-x: var(--spacing-xs);
+    --badge-padding-y: var(--spacing-2xs);
+  }
+}

package/tokens/component/breadcrumb.css

@@ -0,0 +1,14 @@
+/* tokens/component/breadcrumb.css */
+@layer config {
+  :root {
+    --breadcrumb-color-border: var(--color-border);
+    --breadcrumb-border-width: var(--border-width-normal);
+    --breadcrumb-color-text: var(--color-text-muted);
+    --breadcrumb-color-text-active: var(--color-text);
+    --breadcrumb-color-separator: var(--color-text-muted);
+    --breadcrumb-font-size: var(--font-size-xs);
+    --breadcrumb-gap: var(--spacing-xs);
+    --breadcrumb-separator: "/";
+    --breadcrumb-padding: var(--spacing-xs);
+  }
+}

package/tokens/component/button.css

@@ -0,0 +1,33 @@
+/* tokens/component/button.css */
+@layer config {
+  :root {
+    
+    /* Border */
+    --btn-border-radius: var(--radius-control);
+    --btn-border-style: var(--border-style-solid);
+    --btn-border-width: var(--border-width-normal);
+
+    /* Color */
+    --btn-color-bg:         var(--color-brand);
+    --btn-color-bg-hover:   var(--color-brand-hover);
+    --btn-color-border:     var(--color-brand);
+    --btn-color-text:       var(--color-text-on-brand);
+    --btn-color-text-hover: var(--color-text-on-brand);
+
+    /* Typography */
+    --btn-font-size: var(--font-size-sm);
+    --btn-font-weight: var(--font-weight-control);
+    
+    /* Spacing */
+    --btn-gap: var(--spacing-sm);
+    --btn-padding: var(--spacing-control);
+
+    /* Text decoration */
+    --btn-color-text-decoration: transparent;
+    --btn-color-text-decoration-hover: transparent;
+    --btn-text-decoration-line: underline;
+
+    /* Transitions */
+    --btn-transition: var(--transition-normal);
+  }
+}

package/tokens/component/card.css

@@ -0,0 +1,39 @@
+/* tokens/component/card.css */
+/* Aliases for backwards compatibility — canonical tokens are --item-* */
+@layer config {
+  :root {
+
+    /* Border */
+    --card-border-radius:     var(--item-border-radius);
+    --card-border-style:      var(--item-border-style);
+    --card-border-width:      var(--item-border-width);
+
+    /* Button */
+    --card-btn-color-bg:      var(--item-btn-color-bg);
+    --card-btn-border-width:  var(--item-btn-border-width);
+    --card-btn-color-text:    var(--item-btn-color-text);
+
+    /* Color */
+    --card-color-bg:          var(--item-color-bg);
+    --card-color-border:      var(--item-color-border);
+    --card-color-text:        var(--item-color-text);
+    --card-color-text-muted:  var(--item-color-text-muted);
+    --card-color-title:       var(--item-color-title);
+
+    /* Font */
+    --card-font-size-title:   var(--item-font-size-title);
+    --card-font-weight-title: var(--item-font-weight-title);
+    --card-line-height-title: var(--item-line-height-title);
+
+    /* Spacing */
+    --card-gap:               var(--item-gap);
+    --card-padding:           var(--item-padding);
+
+    /* Media */
+    --card-media-color-bg:    var(--item-media-color-bg);
+    --card-media-ratio:       var(--item-media-ratio);
+
+    /* Shadow */
+    --card-shadow:            var(--item-shadow);
+  }
+}

package/tokens/component/container.css

@@ -0,0 +1,26 @@
+/* tokens/component/container.css */
+@layer config {
+  :root {
+
+    /* Container */
+    --container-max-width-mobile:      100%;
+    --container-max-width-tablet:      var(--size-tablet);
+    --container-max-width-tablet-wide: var(--size-tablet-wide);
+    --container-max-width-laptop:      var(--size-laptop);
+    --container-max-width-desktop:     var(--size-desktop);
+    
+    /* Grid */
+    --columns:                         12;
+    --gap:                             var(--spacing-sm);
+    --gutter:                          var(--spacing-md);
+    --grid-column:                     var(--grid-column-mobile);
+
+    /* Grid spans */
+    --grid-column-mobile:              var(--span-full);
+    --grid-column-tablet:              var(--span-half);
+    --grid-column-tablet-wide:         var(--span-third);
+    --grid-column-laptop:              var(--span-quarter);
+    --grid-column-desktop:             var(--span-quarter);
+
+  }
+}

package/tokens/component/details.css

@@ -0,0 +1,15 @@
+/* tokens/component/details.css */
+@layer config {
+  :root {
+    --details-color-bg:            var(--color-bg);
+    --details-color-border:        var(--color-border);
+    --details-border:              var(--border-width-normal) var(--border-style-solid) var(--details-color-border);
+    --details-border-radius:       var(--radius-surface);
+    --details-box-shadow:          var(--shadow-sm);
+    --details-box-shadow-hover:    var(--shadow-center-md);
+    --details-padding:             var(--spacing-sm);
+    --details-summary-font-size:   var(--font-size-md);
+    --details-summary-font-weight: var(--font-weight-heading);
+    --details-color-border-open:   var(--color-active);
+  }
+}

package/tokens/component/dropdown.css

@@ -0,0 +1,33 @@
+/* tokens/component/dropdown.css */
+@layer config {
+  :root {
+
+    /* Colors — panel */
+    --dropdown-color-bg:              var(--color-bg);
+    --dropdown-color-text:            var(--color-text);
+    --dropdown-color-border:          var(--color-border);
+
+    /* Layout */
+    --dropdown-min-width:             180px;
+    --dropdown-padding:               var(--size-4);
+    --dropdown-z-index:               50;
+
+    /* Appearance */
+    --dropdown-border-width:          var(--border-width-normal);
+    --dropdown-border-style:          var(--border-style-solid);
+    --dropdown-border-radius:         var(--radius-surface);
+    --dropdown-shadow:                var(--shadow-sm);
+
+    /* Item */
+    --dropdown-item-color-bg:         var(--color-bg);
+    --dropdown-item-color-bg-hover:   var(--color-bg-muted);
+    --dropdown-item-border-radius:    var(--radius-xs);
+    --dropdown-item-font-size:        var(--font-size-xs);
+    --dropdown-item-padding:          var(--spacing-2xs);
+
+    /* Transition — read by JS via getComputedStyle */
+    --dropdown-transition-duration:   var(--duration-fast);
+    --dropdown-transition-easing:     var(--easing-out);
+    --dropdown-translate-y:           -4px;
+  }
+}

package/tokens/component/embed.css

@@ -0,0 +1,12 @@
+/* tokens/component/embed.css */
+@layer config {
+  :root {
+    --embed-ratio:         var(--ratio-16-9);
+    --embed-color-border:  var(--color-border);
+    --embed-border-radius: var(--radius-none);
+    --embed-border-style:  var(--border-style-solid);
+    --embed-border-width:  0;
+    --embed-box-shadow:    none;
+    --embed-max-width:     100%;
+  }
+}

package/tokens/component/figure.css

@@ -0,0 +1,9 @@
+/* tokens/component/figure.css */
+@layer config {
+  :root {
+    --figure-gap:                  var(--spacing-xs);
+    --figure-figcaption-gap:       var(--spacing-xs);
+    --figure-figcaption-font-size: var(--font-size-xs);
+    --figure-margin-block:         var(--spacing-md);
+  }
+}

package/tokens/component/heading.css

@@ -0,0 +1,11 @@
+/* tokens/component/heading.css */
+@layer config {
+  :root {
+    --heading-gap:            var(--spacing-xs);
+    --heading-margin-bottom:  var(--spacing-md);
+    --heading-margin-bottom-tablet:  var(--spacing-md);
+    --heading-margin-bottom-tablet-wide:  var(--spacing-md);
+    --heading-margin-bottom-laptop:  var(--spacing-lg);
+    --heading-margin-bottom-desktop:  var(--spacing-xl);
+  }
+}

package/tokens/component/hero.css

@@ -0,0 +1,28 @@
+/* tokens/component/hero.css */
+@layer config {
+  :root {
+    /* Colors */
+    --hero-color-bg:      var(--color-bg);
+    --hero-color-text:    var(--color-text);
+    --hero-color-title:   var(--color-text);
+    --hero-color-link:    var(--color-text);
+
+    /* Layout */
+    --hero-min-height:         400px;
+    --hero-min-height-tablet:  600px;
+    --hero-min-height-desktop: 800px;
+
+    /* Spacing */
+    --hero-gap:               var(--spacing-sm);
+    --hero-padding:           var(--spacing-md) 0;
+
+    /* Content column width (no media) */
+    --hero-content-max-width: 60ch;
+
+    /* Cover darken */
+    --hero-cover-brightness: 0.3;
+
+    /* Typography */
+    --hero-font-size-title: var(--font-size-heading-01);
+  }
+}

package/tokens/component/item.css

@@ -0,0 +1,44 @@
+/* tokens/component/item.css */
+@layer config {
+  :root {
+    
+    /* Border */
+    --item-border-radius:     var(--radius-surface);
+    --item-border-style:      var(--border-style-solid);
+    --item-border-width:      var(--border-width-normal);
+
+    /* Button */
+    --item-btn-color-bg:      transparent;
+    --item-btn-border-width:  0;
+    --item-btn-color-text:    var(--color-brand);
+    --item-btn-padding:       0;
+    --item-btn-text-decoration: var(--text-decoration-none);
+    --item-btn-text-decoration-hover: var(--text-decoration-underline);
+    
+    /* Color */
+    --item-color-bg:          var(--color-bg);
+    --item-color-border:      var(--color-border);
+    --item-color-text:        var(--color-text);
+    --item-color-text-muted:  var(--color-text-muted);
+    --item-color-title:       var(--color-text);
+
+    /* Font */
+    --item-font-size-title:   var(--font-size-md);
+    --item-font-weight-title: var(--font-weight-heading);
+    --item-line-height-title: var(--line-height-heading);
+
+    /* Spacing */
+    --item-gap:               var(--spacing-sm);
+    --item-padding:           var(--spacing-surface);
+
+    /* Media */
+    --item-media-color-bg:    var(--media-color-bg);
+    --item-media-ratio:       var(--media-ratio);
+
+    /* Shadow */
+    --item-shadow:            var(--shadow-sm);
+    --item-shadow-hover:      var(--shadow-md);
+
+    --item-transition: box-shadow var(--duration-normal) var(--easing-default)
+  }
+}

package/tokens/component/items.css

@@ -0,0 +1,7 @@
+/* tokens/component/items.css */
+@layer config {
+  :root {
+    --items-cols:    1;
+    --items-gap:     var(--gap);
+  }
+}

package/tokens/component/link.css

@@ -0,0 +1,8 @@
+/* tokens/component/link.css */
+@layer config {
+  :root {
+    --link-color-text-decoration: initial;
+    --link-color-text-decoration-hover: transparent;
+    --link-text-decoration-line: underline;
+  }
+}

package/tokens/component/list.css

@@ -0,0 +1,15 @@
+/* tokens/component/list.css */
+@layer config {
+  :root {
+
+    /* Label */
+    --list-label-font-weight:    var(--font-weight-bold);
+    --list-label-margin-bottom:  var(--spacing-2xs);
+
+    /* Item */
+    --list-item-font-size:       var(--font-size-sm);
+    --list-item-gap:             var(--spacing-2xs);
+    --list-item-marker:          '-';
+    --list-item-marker-gap:      var(--spacing-2xs);
+  }
+}

package/tokens/component/logo.css

@@ -0,0 +1,15 @@
+/* tokens/component/logo.css */
+@layer config {
+  :root {
+    /* Image */
+    --logo-height: 1.5rem;
+    --logo-height-tablet: 2rem;
+
+    /* Text fallback (when no image) */
+    --logo-color:          var(--color-text);
+    --logo-font-family:    var(--font-heading);
+    --logo-font-size:      var(--font-size-md);
+    --logo-font-weight:    var(--font-weight-heading);
+    --logo-letter-spacing: var(--letter-spacing-normal);
+  }
+}

package/tokens/component/map.css

@@ -0,0 +1,9 @@
+/* tokens/component/map.css */
+@layer config {
+  :root {
+    --map-color-bg:       var(--color-bg-muted);
+    --map-margin-block:   var(--spacing-md);
+    --map-ratio:          var(--ratio-21-9);
+    --map-ratio-mobile:   var(--ratio-4-3);
+  }
+}

package/tokens/component/media.css

@@ -0,0 +1,7 @@
+/* tokens/component/media.css */
+@layer config {
+  :root {
+    --media-color-bg:    var(--color-bg-media);
+    --media-ratio:       var(--ratio-16-9);
+  }
+}

package/tokens/component/nav.css

@@ -0,0 +1,20 @@
+/* tokens/component/nav.css */
+@layer config {
+  :root {
+    /* Colors */
+    --nav-color-text:        var(--color-text);
+    --nav-color-text-hover:  var(--color-brand);
+    --nav-color-text-active: var(--color-active);
+    --nav-color-text-muted:  var(--color-text-muted);
+
+    /* Layout */
+    --nav-gap:               0px;
+    --nav-padding-x:         var(--spacing-xs);
+    --nav-padding-y:         var(--spacing-xs);
+
+    /* Typography */
+    --nav-font-size:         var(--font-size-text);
+    --nav-font-size-title:   var(--font-size-md);
+    --nav-font-weight-title: var(--font-weight-heading);
+  }
+}

package/tokens/component/offcanvas.css

@@ -0,0 +1,30 @@
+/* tokens/component/offcanvas.css */
+@layer config {
+  :root {
+    /* Colors */
+    --offcanvas-color-bg:       var(--color-bg);
+    --offcanvas-color-text:     var(--color-text);
+    --offcanvas-color-border:   var(--color-border);
+
+    /* Backdrop */
+    --offcanvas-backdrop-color: rgb(0 0 0 / 0.5);
+
+    /* Position */
+    --offcanvas-bottom: 0;
+    --offcanvas-end: 0;
+    --offcanvas-start: auto;
+    --offcanvas-top: 0;
+    --offcanvas-translate: translateX(100%);
+
+    /* Layout */
+    --offcanvas-width:    320px;
+    --offcanvas-height:   50vh;
+    --offcanvas-padding:  var(--spacing-surface);
+    --offcanvas-shadow:   var(--shadow-sm);
+    --offcanvas-z-index:  200;
+
+    /* Transition — read by JS via getComputedStyle */
+    --offcanvas-transition-duration: var(--duration-slow);
+    --offcanvas-transition-easing:   var(--easing-out-expo);
+  }
+}

package/tokens/component/pagination.css

@@ -0,0 +1,24 @@
+/* tokens/component/pagination.css */
+@layer config {
+  :root {
+    /* Layout */
+    --pagination-gap:             var(--spacing-3xs);
+
+    /* Item (page number) */
+    --pagination-item-size:          2.25rem;
+    --pagination-item-font-size:     var(--font-size-sm);
+    --pagination-item-font-weight:   var(--font-weight-normal);
+    --pagination-item-border-radius: var(--radius-sm);
+    --pagination-item-color-bg:      transparent;
+    --pagination-item-color-text:    var(--color-text);
+    --pagination-item-color-bg-hover:   var(--color-bg-muted);
+    --pagination-item-color-text-hover: var(--color-text);
+
+    /* Active item */
+    --pagination-item-color-bg-active:   var(--color-brand);
+    --pagination-item-color-text-active: var(--color-text-on-brand);
+
+    /* Disabled (nav controls) */
+    --pagination-disabled-opacity: var(--opacity-disabled);
+  }
+}

package/tokens/component/surtitle.css

@@ -0,0 +1,16 @@
+/* tokens/component/surtitle.css */
+@layer config {
+  :root {
+    --surtitle-border-radius:  0;
+    --surtitle-border-width:   0;
+    --surtitle-color:          var(--color-text-muted);
+    --surtitle-color-bg:       transparent;
+    --surtitle-color-border:   transparent;
+    --surtitle-font-size:      var(--font-size-xs);
+    --surtitle-font-weight:    var(--font-weight-bold);
+    --surtitle-letter-spacing: var(--letter-spacing-large);
+    --surtitle-line-height:    var(--line-height-normal);
+    --surtitle-padding:        0;
+    --surtitle-text-transform: uppercase;
+  }
+}

package/tokens/component/table.css

@@ -0,0 +1,11 @@
+/* tokens/component/table.css */
+@layer config {
+  :root {
+    --table-cell-padding-x:    var(--spacing-sm);
+    --table-cell-padding-y:    var(--spacing-xs);
+    --table-color-border:      var(--color-border);
+    --table-color-bg-header:   var(--color-bg-muted);
+    --table-color-bg-striped:  var(--color-bg-muted);
+    --table-font-size:         var(--font-size-sm);
+  }
+}

package/tokens/index.css

@@ -0,0 +1,25 @@
+/* tokens/index.css */
+@import 'component/alert.css';
+@import 'component/badge.css';
+@import 'component/breadcrumb.css';
+@import 'component/button.css';
+@import 'component/card.css';
+@import 'component/container.css';
+@import 'component/details.css';
+@import 'component/dropdown.css';
+@import 'component/embed.css';
+@import 'component/figure.css';
+@import 'component/heading.css';
+@import 'component/hero.css';
+@import 'component/item.css';
+@import 'component/items.css';
+@import 'component/link.css';
+@import 'component/list.css';
+@import 'component/logo.css';
+@import 'component/map.css';
+@import 'component/media.css';
+@import 'component/nav.css';
+@import 'component/offcanvas.css';
+@import 'component/pagination.css';
+@import 'component/surtitle.css';
+@import 'component/table.css';