@kb.ui/tokens 0.11.0 → 0.12.0

package/README.md

@@ -28,7 +28,7 @@ If your app does not load the full React or CSS stylesheet, import `@kb.ui/token
 
 ## Exports
 
-| Import | File | Contents |
+| Import | `File` | Contents |
 |---|---|---|
 | `@kb.ui/tokens/tokens.css` | `dist/tokens.css` | All variables on `:root`; theme-dependent variables rebound on `[data-theme="light"]` and `[data-theme="dark"]`, plus a system-setting fallback and system-color overrides for tokens with a `kb.forced` value under `forced-colors: active` |
 | `@kb.ui/tokens` | `dist/tokens.js`, `dist/tokens.d.ts` | `tokens`, a nested read-only object of variable names |
@@ -44,8 +44,10 @@ bun run --cwd packages/tokens test
 The build rejects a token file that:
 
 - contains an alias, such as `{blue.600}`, pointing at a token that does not exist
+- forms an alias cycle within the effective light, dark, or forced-colors mode graph
+- uses an unsupported `$type`, a malformed CSS value for its `$type`, or an incompatible alias target `$type`
 - has two paths that produce the same variable name
 - uses a key with characters other than letters, digits, `_` and `-`
 - has a `$value` that is not a string
 
-[docs/tokens.md](../../docs/tokens.md) explains token kinds, naming and dark mode.
+[`docs/tokens.md`](../../docs/tokens.md) explains the CSS-native DTCG-inspired format, token kinds, naming and dark mode.

package/dist/tokens.css

@@ -113,6 +113,13 @@
   --kb-card-padding-compact: 20px;
   --kb-card-face: linear-gradient(180deg, var(--kb-material-action-sheen), transparent 60%);
   --kb-card-shadow: var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px rgb(36 40 49 / 0.22);
+  --kb-gallery-max-width: var(--kb-container-size-lg);
+  --kb-gallery-gutter-sm: var(--kb-space-4);
+  --kb-gallery-gutter-md: var(--kb-space-6);
+  --kb-gallery-gutter-lg: var(--kb-space-8);
+  --kb-gallery-gap: var(--kb-space-6);
+  --kb-gallery-filters-gap: var(--kb-space-3);
+  --kb-gallery-filter-min-width: 12rem;
   --kb-grid-gap: var(--kb-space-6);
   --kb-grid-min-item-width: 18.75rem;
   --kb-grid-min-item-width-sm: 14rem;
@@ -173,6 +180,7 @@
   --kb-panel-background: var(--kb-material-surface-bg);
   --kb-panel-background-active: var(--kb-material-surface-bg);
   --kb-panel-background-sunken: var(--kb-material-field-bg);
+  --kb-panel-background-opaque: var(--kb-material-surface-bg);
   --kb-panel-border: var(--kb-color-border);
   --kb-panel-border-active: var(--kb-color-accent);
   --kb-panel-border-critical: var(--kb-color-danger);
@@ -399,6 +407,12 @@
   --kb-split-collapse-sm: 32rem;
   --kb-split-collapse-md: 48rem;
   --kb-split-collapse-lg: 64rem;
+  --kb-supportingpane-max-width: var(--kb-container-size-lg);
+  --kb-supportingpane-gutter-sm: var(--kb-space-4);
+  --kb-supportingpane-gutter-md: var(--kb-space-6);
+  --kb-supportingpane-gutter-lg: var(--kb-space-8);
+  --kb-supportingpane-gap: var(--kb-layout-gap-lg);
+  --kb-supportingpane-aside-width: 22rem;
   --kb-separator-color: var(--kb-color-border);
   --kb-separator-width: 1px;
   --kb-separator-min-length: var(--kb-space-4);
@@ -410,6 +424,15 @@
   --kb-fieldset-legend-size: var(--kb-text-h4-size);
   --kb-formactions-gap: var(--kb-space-2);
   --kb-formactions-padding-top: var(--kb-space-4);
+  --kb-form-gap: var(--kb-space-6);
+  --kb-form-width-sm: 32rem;
+  --kb-form-width-md: 40rem;
+  --kb-formsection-gap: var(--kb-space-4);
+  --kb-formsection-header-gap: var(--kb-space-1);
+  --kb-formsection-fields-gap: var(--kb-space-4);
+  --kb-formsection-collapse: 40rem;
+  --kb-settings-gap: var(--kb-space-8);
+  --kb-settings-divider: var(--kb-color-border);
   --kb-errorsummary-padding: var(--kb-space-4);
   --kb-errorsummary-radius: var(--kb-radius-md);
   --kb-errorsummary-gap: var(--kb-space-2);
@@ -585,6 +608,38 @@
   --kb-collectionrow-leading-width: 3rem;
   --kb-collectionrow-aside-width: 12rem;
   --kb-collectionrow-gap: var(--kb-space-3);
+  --kb-pageheader-gap: var(--kb-space-4);
+  --kb-pageheader-main-gap: var(--kb-space-4);
+  --kb-pageheader-heading-gap: var(--kb-space-1);
+  --kb-pageheader-headline-gap: var(--kb-space-2);
+  --kb-pageheader-actions-gap: var(--kb-space-2);
+  --kb-pageheader-heading-min-width: 18rem;
+  --kb-pageheader-description-max-width: var(--kb-text-measure);
+  --kb-pageheader-title-size-sm: var(--kb-heading-size-lg);
+  --kb-pageheader-title-size-md: var(--kb-heading-size-xl);
+  --kb-pageheader-title-size-lg: var(--kb-heading-size-display);
+  --kb-pageheader-divider: var(--kb-color-border);
+  --kb-pageheader-divider-gap: var(--kb-space-5);
+  --kb-statsrow-column-gap: var(--kb-space-5);
+  --kb-statsrow-row-gap: var(--kb-space-5);
+  --kb-statsrow-item-gap: var(--kb-space-2);
+  --kb-statsrow-item-min-width: 10rem;
+  --kb-statsrow-item-padding: var(--kb-space-4);
+  --kb-statsrow-item-background: var(--kb-card-background);
+  --kb-statsrow-item-border: var(--kb-card-border);
+  --kb-statsrow-item-border-width: var(--kb-card-border-width);
+  --kb-statsrow-item-radius: var(--kb-card-radius);
+  --kb-statsrow-positive: var(--kb-color-success);
+  --kb-statsrow-negative: var(--kb-color-danger);
+  --kb-statsrow-neutral: var(--kb-color-muted);
+  --kb-dashboard-gap: var(--kb-space-6);
+  --kb-dashboard-max-width: var(--kb-container-size-lg);
+  --kb-dashboard-gutter-sm: var(--kb-space-4);
+  --kb-dashboard-gutter-md: var(--kb-space-6);
+  --kb-dashboard-gutter-lg: var(--kb-space-8);
+  --kb-dashboard-gutter-md-from: 48rem;
+  --kb-dashboard-gutter-lg-from: 64rem;
+  --kb-dashboard-collapse: 60rem;
   color-scheme: light;
 }
 
@@ -649,6 +704,7 @@
   --kb-panel-background: var(--kb-material-surface-bg);
   --kb-panel-background-active: var(--kb-material-surface-bg);
   --kb-panel-background-sunken: var(--kb-material-field-bg);
+  --kb-panel-background-opaque: var(--kb-material-surface-bg);
   --kb-panel-border: var(--kb-color-border);
   --kb-panel-border-active: var(--kb-color-accent);
   --kb-panel-border-critical: var(--kb-color-danger);
@@ -729,6 +785,7 @@
   --kb-code-syntax-operator: #47505e;
   --kb-code-syntax-property: #1f5173;
   --kb-separator-color: var(--kb-color-border);
+  --kb-settings-divider: var(--kb-color-border);
   --kb-skeleton-base: var(--kb-color-surface);
   --kb-skeleton-highlight: var(--kb-material-raised-top);
   --kb-skeleton-border: var(--kb-material-soft-border);
@@ -769,6 +826,12 @@
   --kb-table-header-background: var(--kb-color-surface);
   --kb-table-selected-background: var(--kb-color-surface);
   --kb-table-border: var(--kb-color-border);
+  --kb-pageheader-divider: var(--kb-color-border);
+  --kb-statsrow-item-background: var(--kb-card-background);
+  --kb-statsrow-item-border: var(--kb-card-border);
+  --kb-statsrow-positive: var(--kb-color-success);
+  --kb-statsrow-negative: var(--kb-color-danger);
+  --kb-statsrow-neutral: var(--kb-color-muted);
   color-scheme: light;
 }
 
@@ -833,6 +896,7 @@
   --kb-panel-background: var(--kb-material-surface-bg);
   --kb-panel-background-active: var(--kb-material-surface-bg);
   --kb-panel-background-sunken: var(--kb-material-field-bg);
+  --kb-panel-background-opaque: var(--kb-material-surface-bg);
   --kb-panel-border: var(--kb-color-border);
   --kb-panel-border-active: var(--kb-color-accent);
   --kb-panel-border-critical: var(--kb-color-danger);
@@ -913,6 +977,7 @@
   --kb-code-syntax-operator: #c8d0dc;
   --kb-code-syntax-property: #9ac7eb;
   --kb-separator-color: var(--kb-color-border);
+  --kb-settings-divider: var(--kb-color-border);
   --kb-skeleton-base: var(--kb-color-surface);
   --kb-skeleton-highlight: var(--kb-material-raised-top);
   --kb-skeleton-border: var(--kb-material-soft-border);
@@ -953,6 +1018,12 @@
   --kb-table-header-background: var(--kb-color-surface);
   --kb-table-selected-background: var(--kb-color-surface);
   --kb-table-border: var(--kb-color-border);
+  --kb-pageheader-divider: var(--kb-color-border);
+  --kb-statsrow-item-background: var(--kb-card-background);
+  --kb-statsrow-item-border: var(--kb-card-border);
+  --kb-statsrow-positive: var(--kb-color-success);
+  --kb-statsrow-negative: var(--kb-color-danger);
+  --kb-statsrow-neutral: var(--kb-color-muted);
   color-scheme: dark;
 }
 
@@ -1018,6 +1089,7 @@
     --kb-panel-background: var(--kb-material-surface-bg);
     --kb-panel-background-active: var(--kb-material-surface-bg);
     --kb-panel-background-sunken: var(--kb-material-field-bg);
+    --kb-panel-background-opaque: var(--kb-material-surface-bg);
     --kb-panel-border: var(--kb-color-border);
     --kb-panel-border-active: var(--kb-color-accent);
     --kb-panel-border-critical: var(--kb-color-danger);
@@ -1098,6 +1170,7 @@
     --kb-code-syntax-operator: #c8d0dc;
     --kb-code-syntax-property: #9ac7eb;
     --kb-separator-color: var(--kb-color-border);
+    --kb-settings-divider: var(--kb-color-border);
     --kb-skeleton-base: var(--kb-color-surface);
     --kb-skeleton-highlight: var(--kb-material-raised-top);
     --kb-skeleton-border: var(--kb-material-soft-border);
@@ -1138,6 +1211,12 @@
     --kb-table-header-background: var(--kb-color-surface);
     --kb-table-selected-background: var(--kb-color-surface);
     --kb-table-border: var(--kb-color-border);
+    --kb-pageheader-divider: var(--kb-color-border);
+    --kb-statsrow-item-background: var(--kb-card-background);
+    --kb-statsrow-item-border: var(--kb-card-border);
+    --kb-statsrow-positive: var(--kb-color-success);
+    --kb-statsrow-negative: var(--kb-color-danger);
+    --kb-statsrow-neutral: var(--kb-color-muted);
     color-scheme: dark;
   }
 }

package/dist/tokens.d.ts

@@ -147,6 +147,15 @@ export declare const tokens: {
     readonly "face": "--kb-card-face";
     readonly "shadow": "--kb-card-shadow";
   };
+  readonly "gallery": {
+    readonly "max-width": "--kb-gallery-max-width";
+    readonly "gutter-sm": "--kb-gallery-gutter-sm";
+    readonly "gutter-md": "--kb-gallery-gutter-md";
+    readonly "gutter-lg": "--kb-gallery-gutter-lg";
+    readonly "gap": "--kb-gallery-gap";
+    readonly "filters-gap": "--kb-gallery-filters-gap";
+    readonly "filter-min-width": "--kb-gallery-filter-min-width";
+  };
   readonly "grid": {
     readonly "gap": "--kb-grid-gap";
     readonly "min-item-width": "--kb-grid-min-item-width";
@@ -228,6 +237,7 @@ export declare const tokens: {
     readonly "background": "--kb-panel-background";
     readonly "background-active": "--kb-panel-background-active";
     readonly "background-sunken": "--kb-panel-background-sunken";
+    readonly "background-opaque": "--kb-panel-background-opaque";
     readonly "border": "--kb-panel-border";
     readonly "border-active": "--kb-panel-border-active";
     readonly "border-critical": "--kb-panel-border-critical";
@@ -519,6 +529,16 @@ export declare const tokens: {
       readonly "lg": "--kb-split-collapse-lg";
     };
   };
+  readonly "supportingpane": {
+    readonly "max-width": "--kb-supportingpane-max-width";
+    readonly "gutter": {
+      readonly "sm": "--kb-supportingpane-gutter-sm";
+      readonly "md": "--kb-supportingpane-gutter-md";
+      readonly "lg": "--kb-supportingpane-gutter-lg";
+    };
+    readonly "gap": "--kb-supportingpane-gap";
+    readonly "aside-width": "--kb-supportingpane-aside-width";
+  };
   readonly "separator": {
     readonly "color": "--kb-separator-color";
     readonly "width": "--kb-separator-width";
@@ -538,6 +558,23 @@ export declare const tokens: {
     readonly "gap": "--kb-formactions-gap";
     readonly "padding-top": "--kb-formactions-padding-top";
   };
+  readonly "form": {
+    readonly "gap": "--kb-form-gap";
+    readonly "width": {
+      readonly "sm": "--kb-form-width-sm";
+      readonly "md": "--kb-form-width-md";
+    };
+  };
+  readonly "formsection": {
+    readonly "gap": "--kb-formsection-gap";
+    readonly "header-gap": "--kb-formsection-header-gap";
+    readonly "fields-gap": "--kb-formsection-fields-gap";
+    readonly "collapse": "--kb-formsection-collapse";
+  };
+  readonly "settings": {
+    readonly "gap": "--kb-settings-gap";
+    readonly "divider": "--kb-settings-divider";
+  };
   readonly "errorsummary": {
     readonly "padding": "--kb-errorsummary-padding";
     readonly "radius": "--kb-errorsummary-radius";
@@ -763,4 +800,46 @@ export declare const tokens: {
     readonly "aside-width": "--kb-collectionrow-aside-width";
     readonly "gap": "--kb-collectionrow-gap";
   };
+  readonly "pageheader": {
+    readonly "gap": "--kb-pageheader-gap";
+    readonly "main-gap": "--kb-pageheader-main-gap";
+    readonly "heading-gap": "--kb-pageheader-heading-gap";
+    readonly "headline-gap": "--kb-pageheader-headline-gap";
+    readonly "actions-gap": "--kb-pageheader-actions-gap";
+    readonly "heading-min-width": "--kb-pageheader-heading-min-width";
+    readonly "description-max-width": "--kb-pageheader-description-max-width";
+    readonly "title-size": {
+      readonly "sm": "--kb-pageheader-title-size-sm";
+      readonly "md": "--kb-pageheader-title-size-md";
+      readonly "lg": "--kb-pageheader-title-size-lg";
+    };
+    readonly "divider": "--kb-pageheader-divider";
+    readonly "divider-gap": "--kb-pageheader-divider-gap";
+  };
+  readonly "statsrow": {
+    readonly "column-gap": "--kb-statsrow-column-gap";
+    readonly "row-gap": "--kb-statsrow-row-gap";
+    readonly "item-gap": "--kb-statsrow-item-gap";
+    readonly "item-min-width": "--kb-statsrow-item-min-width";
+    readonly "item-padding": "--kb-statsrow-item-padding";
+    readonly "item-background": "--kb-statsrow-item-background";
+    readonly "item-border": "--kb-statsrow-item-border";
+    readonly "item-border-width": "--kb-statsrow-item-border-width";
+    readonly "item-radius": "--kb-statsrow-item-radius";
+    readonly "positive": "--kb-statsrow-positive";
+    readonly "negative": "--kb-statsrow-negative";
+    readonly "neutral": "--kb-statsrow-neutral";
+  };
+  readonly "dashboard": {
+    readonly "gap": "--kb-dashboard-gap";
+    readonly "max-width": "--kb-dashboard-max-width";
+    readonly "gutter": {
+      readonly "sm": "--kb-dashboard-gutter-sm";
+      readonly "md": "--kb-dashboard-gutter-md";
+      readonly "lg": "--kb-dashboard-gutter-lg";
+      readonly "md-from": "--kb-dashboard-gutter-md-from";
+      readonly "lg-from": "--kb-dashboard-gutter-lg-from";
+    };
+    readonly "collapse": "--kb-dashboard-collapse";
+  };
 };

package/dist/tokens.js

@@ -147,6 +147,15 @@ export const tokens = {
     "face": "--kb-card-face",
     "shadow": "--kb-card-shadow"
   },
+  "gallery": {
+    "max-width": "--kb-gallery-max-width",
+    "gutter-sm": "--kb-gallery-gutter-sm",
+    "gutter-md": "--kb-gallery-gutter-md",
+    "gutter-lg": "--kb-gallery-gutter-lg",
+    "gap": "--kb-gallery-gap",
+    "filters-gap": "--kb-gallery-filters-gap",
+    "filter-min-width": "--kb-gallery-filter-min-width"
+  },
   "grid": {
     "gap": "--kb-grid-gap",
     "min-item-width": "--kb-grid-min-item-width",
@@ -228,6 +237,7 @@ export const tokens = {
     "background": "--kb-panel-background",
     "background-active": "--kb-panel-background-active",
     "background-sunken": "--kb-panel-background-sunken",
+    "background-opaque": "--kb-panel-background-opaque",
     "border": "--kb-panel-border",
     "border-active": "--kb-panel-border-active",
     "border-critical": "--kb-panel-border-critical",
@@ -519,6 +529,16 @@ export const tokens = {
       "lg": "--kb-split-collapse-lg"
     }
   },
+  "supportingpane": {
+    "max-width": "--kb-supportingpane-max-width",
+    "gutter": {
+      "sm": "--kb-supportingpane-gutter-sm",
+      "md": "--kb-supportingpane-gutter-md",
+      "lg": "--kb-supportingpane-gutter-lg"
+    },
+    "gap": "--kb-supportingpane-gap",
+    "aside-width": "--kb-supportingpane-aside-width"
+  },
   "separator": {
     "color": "--kb-separator-color",
     "width": "--kb-separator-width",
@@ -538,6 +558,23 @@ export const tokens = {
     "gap": "--kb-formactions-gap",
     "padding-top": "--kb-formactions-padding-top"
   },
+  "form": {
+    "gap": "--kb-form-gap",
+    "width": {
+      "sm": "--kb-form-width-sm",
+      "md": "--kb-form-width-md"
+    }
+  },
+  "formsection": {
+    "gap": "--kb-formsection-gap",
+    "header-gap": "--kb-formsection-header-gap",
+    "fields-gap": "--kb-formsection-fields-gap",
+    "collapse": "--kb-formsection-collapse"
+  },
+  "settings": {
+    "gap": "--kb-settings-gap",
+    "divider": "--kb-settings-divider"
+  },
   "errorsummary": {
     "padding": "--kb-errorsummary-padding",
     "radius": "--kb-errorsummary-radius",
@@ -762,5 +799,47 @@ export const tokens = {
     "leading-width": "--kb-collectionrow-leading-width",
     "aside-width": "--kb-collectionrow-aside-width",
     "gap": "--kb-collectionrow-gap"
+  },
+  "pageheader": {
+    "gap": "--kb-pageheader-gap",
+    "main-gap": "--kb-pageheader-main-gap",
+    "heading-gap": "--kb-pageheader-heading-gap",
+    "headline-gap": "--kb-pageheader-headline-gap",
+    "actions-gap": "--kb-pageheader-actions-gap",
+    "heading-min-width": "--kb-pageheader-heading-min-width",
+    "description-max-width": "--kb-pageheader-description-max-width",
+    "title-size": {
+      "sm": "--kb-pageheader-title-size-sm",
+      "md": "--kb-pageheader-title-size-md",
+      "lg": "--kb-pageheader-title-size-lg"
+    },
+    "divider": "--kb-pageheader-divider",
+    "divider-gap": "--kb-pageheader-divider-gap"
+  },
+  "statsrow": {
+    "column-gap": "--kb-statsrow-column-gap",
+    "row-gap": "--kb-statsrow-row-gap",
+    "item-gap": "--kb-statsrow-item-gap",
+    "item-min-width": "--kb-statsrow-item-min-width",
+    "item-padding": "--kb-statsrow-item-padding",
+    "item-background": "--kb-statsrow-item-background",
+    "item-border": "--kb-statsrow-item-border",
+    "item-border-width": "--kb-statsrow-item-border-width",
+    "item-radius": "--kb-statsrow-item-radius",
+    "positive": "--kb-statsrow-positive",
+    "negative": "--kb-statsrow-negative",
+    "neutral": "--kb-statsrow-neutral"
+  },
+  "dashboard": {
+    "gap": "--kb-dashboard-gap",
+    "max-width": "--kb-dashboard-max-width",
+    "gutter": {
+      "sm": "--kb-dashboard-gutter-sm",
+      "md": "--kb-dashboard-gutter-md",
+      "lg": "--kb-dashboard-gutter-lg",
+      "md-from": "--kb-dashboard-gutter-md-from",
+      "lg-from": "--kb-dashboard-gutter-lg-from"
+    },
+    "collapse": "--kb-dashboard-collapse"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kb.ui/tokens",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/tokens.json

@@ -636,6 +636,36 @@
       }
     }
   },
+  "gallery": {
+    "max-width": {
+      "$type": "dimension",
+      "$value": "{container.size.lg}"
+    },
+    "gutter-sm": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "gutter-md": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "gutter-lg": {
+      "$type": "dimension",
+      "$value": "{space.8}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "filters-gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "filter-min-width": {
+      "$type": "dimension",
+      "$value": "12rem"
+    }
+  },
   "grid": {
     "gap": {
       "$type": "dimension",
@@ -897,6 +927,10 @@
       "$type": "color",
       "$value": "{material.field-bg}"
     },
+    "background-opaque": {
+      "$type": "color",
+      "$value": "{material.surface-bg}"
+    },
     "border": {
       "$type": "color",
       "$value": "{color.border}"
@@ -1969,6 +2003,34 @@
       }
     }
   },
+  "supportingpane": {
+    "max-width": {
+      "$type": "dimension",
+      "$value": "{container.size.lg}"
+    },
+    "gutter": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "{space.4}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{space.6}"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "{space.8}"
+      }
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{layout.gap.lg}"
+    },
+    "aside-width": {
+      "$type": "dimension",
+      "$value": "22rem"
+    }
+  },
   "separator": {
     "color": {
       "$type": "color",
@@ -2021,6 +2083,50 @@
       "$value": "{space.4}"
     }
   },
+  "form": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "width": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "32rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "40rem"
+      }
+    }
+  },
+  "formsection": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "header-gap": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "fields-gap": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "collapse": {
+      "$type": "dimension",
+      "$value": "40rem"
+    }
+  },
+  "settings": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.8}"
+    },
+    "divider": {
+      "$type": "color",
+      "$value": "{color.border}"
+    }
+  },
   "errorsummary": {
     "padding": {
       "$type": "dimension",
@@ -2770,5 +2876,143 @@
       "$type": "dimension",
       "$value": "{space.3}"
     }
+  },
+  "pageheader": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "main-gap": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "heading-gap": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "headline-gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "actions-gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "heading-min-width": {
+      "$type": "dimension",
+      "$value": "18rem"
+    },
+    "description-max-width": {
+      "$type": "dimension",
+      "$value": "{text.measure}"
+    },
+    "title-size": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "{heading.size.lg}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{heading.size.xl}"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "{heading.size.display}"
+      }
+    },
+    "divider": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "divider-gap": {
+      "$type": "dimension",
+      "$value": "{space.5}"
+    }
+  },
+  "statsrow": {
+    "column-gap": {
+      "$type": "dimension",
+      "$value": "{space.5}"
+    },
+    "row-gap": {
+      "$type": "dimension",
+      "$value": "{space.5}"
+    },
+    "item-gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "item-min-width": {
+      "$type": "dimension",
+      "$value": "10rem"
+    },
+    "item-padding": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "item-background": {
+      "$type": "color",
+      "$value": "{card.background}"
+    },
+    "item-border": {
+      "$type": "color",
+      "$value": "{card.border}"
+    },
+    "item-border-width": {
+      "$type": "dimension",
+      "$value": "{card.border-width}"
+    },
+    "item-radius": {
+      "$type": "dimension",
+      "$value": "{card.radius}"
+    },
+    "positive": {
+      "$type": "color",
+      "$value": "{color.success}"
+    },
+    "negative": {
+      "$type": "color",
+      "$value": "{color.danger}"
+    },
+    "neutral": {
+      "$type": "color",
+      "$value": "{color.muted}"
+    }
+  },
+  "dashboard": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "max-width": {
+      "$type": "dimension",
+      "$value": "{container.size.lg}"
+    },
+    "gutter": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "{space.4}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{space.6}"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "{space.8}"
+      },
+      "md-from": {
+        "$type": "dimension",
+        "$value": "48rem"
+      },
+      "lg-from": {
+        "$type": "dimension",
+        "$value": "64rem"
+      }
+    },
+    "collapse": {
+      "$type": "dimension",
+      "$value": "60rem"
+    }
   }
 }