From a1342f6740ba4a5a15677da1617e3bcb23e6cc7b Mon Sep 17 00:00:00 2001
From: bennypowers <bennypowers@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:53:43 +0000
Subject: [PATCH] deploy: 450b81023a25d6c38c7b841dbe37cf99ba18a2f6

---
 tokens/border/index.html |  30 +++++++----
 tokens/color/index.html  | 107 ++++++++++++++++++++++++++-------------
 tokens/font/index.html   |   9 ++--
 tokens/icon/index.html   |  27 ++++++----
 4 files changed, 117 insertions(+), 56 deletions(-)

diff --git a/tokens/border/index.html b/tokens/border/index.html
index d4d383636c..3b96d10519 100644
--- a/tokens/border/index.html
+++ b/tokens/border/index.html
@@ -10647,7 +10647,8 @@ <h3 id="border-strong">
           <a href="#border-strong">Strong</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-strong</code> color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code> Resolves to <code>--rh-color-border-strong-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-strong-on-dark</code> on a themable container with a dark color palette</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -12211,7 +12212,8 @@ <h3 id="border-subtle">
           <a href="#border-subtle">Subtle</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-subtle</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-subtle-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-subtle-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -13775,7 +13777,8 @@ <h3 id="border-interactive">
           <a href="#border-interactive">Interactive</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-interactive</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-interactive-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-interactive-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -15339,7 +15342,8 @@ <h3 id="border-destructive">
           <a href="#border-destructive">Destructive</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-destructive</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-destructive-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-destructive-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -16986,7 +16990,8 @@ <h4 id="border-status-danger">
           <a href="#border-status-danger">Danger</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-danger</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-danger-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-danger-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -18550,7 +18555,8 @@ <h4 id="border-status-caution">
           <a href="#border-status-caution">Caution</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-caution</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-caution-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-caution-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -20114,7 +20120,8 @@ <h4 id="border-status-warning">
           <a href="#border-status-warning">Warning</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-warning</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-warning-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-warning-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -21678,7 +21685,8 @@ <h4 id="border-status-neutral">
           <a href="#border-status-neutral">Neutral</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-neutral</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-neutral-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-neutral-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -23242,7 +23250,8 @@ <h4 id="border-status-info">
           <a href="#border-status-info">Info</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-info</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-info-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-info-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -24806,7 +24815,8 @@ <h4 id="border-status-success">
           <a href="#border-status-success">Success</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>border-success</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-border-success-on-light</code> on a themable container with a light color palette and <code>--rh-color-border-success-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
diff --git a/tokens/color/index.html b/tokens/color/index.html
index defabe0b62..e9a26301e9 100644
--- a/tokens/color/index.html
+++ b/tokens/color/index.html
@@ -7593,7 +7593,8 @@ <h3 id="color-accent-base">
           <a href="#color-accent-base">Base</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>accent-base</code> color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code> Resolves to <code>--rh-color-accent-base-on-light</code> on a themable container with a light color palette and <code>--rh-color-accent-base-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -9157,7 +9158,8 @@ <h3 id="color-accent-brand">
           <a href="#color-accent-brand">Brand</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>accent-brand</code> color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-accent-brand-on-light</code> on a themable container with a light color palette and <code>--rh-color-accent-brand-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -11196,7 +11198,8 @@ <h3 id="color-brand-red">
           <a href="#color-brand-red">Red</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>brand-red</code> color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code> Resolves to <code>--rh-color-brand-red-on-light</code> on a themable container with a light color palette and <code>--rh-color-brand-red-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -162046,7 +162049,8 @@ <h4 id="color-interactive-primary-default">
           <a href="#color-interactive-primary-default">Default</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-primary</code> (e.g. link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-primary-default-on-light</code> on a themable container with a light color palette and <code>--rh-color-interactive-primary-default-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -163610,7 +163614,9 @@ <h4 id="color-interactive-primary-hover">
           <a href="#color-interactive-primary-hover">Hover</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-primary</code> (e.g. link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-primary-hover-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-primary-hover-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -165174,7 +165180,9 @@ <h4 id="color-interactive-primary-active">
           <a href="#color-interactive-primary-active">Active</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-primary</code> (e.g. link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-primary-active-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-primary-active-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -166738,7 +166746,9 @@ <h4 id="color-interactive-primary-focus">
           <a href="#color-interactive-primary-focus">Focus</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-primary</code> (e.g. link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-primary-focus-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-primary-focus-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -168385,7 +168395,8 @@ <h5 id="color-interactive-primary-visited-default">
           <a href="#color-interactive-primary-visited-default">Default</a>
         </h5>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-primary-visited</code> (e.g. visited link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-primary-visited-default-on-light</code> on a themable container with a light color palette and <code>--rh-color-interactive-primary-visited-default-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -169949,7 +169960,9 @@ <h5 id="color-interactive-primary-visited-hover">
           <a href="#color-interactive-primary-visited-hover">Hover</a>
         </h5>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-primary-visited</code> (e.g. visited link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-primary-visited-hover-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-primary-visited-hover-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -171513,7 +171526,9 @@ <h5 id="color-interactive-primary-visited-active">
           <a href="#color-interactive-primary-visited-active">Active</a>
         </h5>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-primary-visited</code> (e.g. visited link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-primary-visited-active-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-primary-visited-active-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -173077,7 +173092,9 @@ <h5 id="color-interactive-primary-visited-focus">
           <a href="#color-interactive-primary-visited-focus">Focus</a>
         </h5>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-primary-visited</code> (e.g. visited link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-primary-visited-focus-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-primary-visited-focus-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -174732,7 +174749,8 @@ <h4 id="color-interactive-secondary-default">
           <a href="#color-interactive-secondary-default">Default</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-secondary</code> (e.g. link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-secondary-default-on-light</code> on a themable container with a light color palette and <code>--rh-color-interactive-secondary-default-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -176296,7 +176314,9 @@ <h4 id="color-interactive-secondary-hover">
           <a href="#color-interactive-secondary-hover">Hover</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-secondary</code> (e.g. link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-secondary-hover-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-secondary-hover-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -177860,7 +177880,9 @@ <h4 id="color-interactive-secondary-active">
           <a href="#color-interactive-secondary-active">Active</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-secondary</code> (e.g. link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-secondary-active-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-secondary-active-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -179424,7 +179446,9 @@ <h4 id="color-interactive-secondary-focus">
           <a href="#color-interactive-secondary-focus">Focus</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-secondary</code> (e.g. link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-secondary-focus-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-secondary-focus-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -181071,7 +181095,8 @@ <h5 id="color-interactive-secondary-visited-default">
           <a href="#color-interactive-secondary-visited-default">Default</a>
         </h5>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-secondary-visited</code> (e.g. visited link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-secondary-visited-default-on-light</code> on a themable container with a light color palette and <code>--rh-color-interactive-secondary-visited-default-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -182635,7 +182660,9 @@ <h5 id="color-interactive-secondary-visited-hover">
           <a href="#color-interactive-secondary-visited-hover">Hover</a>
         </h5>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-secondary-visited</code> (e.g. visited link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-secondary-visited-hover-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-secondary-visited-hover-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -184199,7 +184226,9 @@ <h5 id="color-interactive-secondary-visited-active">
           <a href="#color-interactive-secondary-visited-active">Active</a>
         </h5>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-secondary-visited</code> (e.g. visited link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-secondary-visited-active-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-secondary-visited-active-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -185763,7 +185792,9 @@ <h5 id="color-interactive-secondary-visited-focus">
           <a href="#color-interactive-secondary-visited-focus">Focus</a>
         </h5>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>interactive-secondary-visited</code> (e.g. visited link) color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-interactive-secondary-visited-focus-on-light</code> on a themable container with a light color palette
+and to <code>--rh-color-interactive-secondary-visited-focus-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -193720,7 +193751,7 @@ <h3 id="color-status-danger">
           <a href="#color-status-danger">Danger</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"><p>Represents an action which could have destructive consequences, e.g. deleting a file.</p>
+      <div class="description"><p>Responsive <code>status-danger</code> color value. Typically read-only – use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-status-danger-on-light</code> on a themable container with a light color palette and <code>--rh-color-status-danger-on-dark</code> on a themable container with a dark color palette.</p>
 </div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
@@ -195285,7 +195316,7 @@ <h3 id="color-status-caution">
           <a href="#color-status-caution">Caution</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"><p>Represents an action or notice which should immediately draw the attention</p>
+      <div class="description"><p>Responsive <code>status-caution</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-status-caution-on-light</code> on a themable container with a light color palette and <code>--rh-color-status-caution-on-dark</code> on a themable container with a dark color palette.</p>
 </div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
@@ -196850,7 +196881,7 @@ <h3 id="color-status-warning">
           <a href="#color-status-warning">Warning</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"><p>Represents an action or notice which elicits a warning of potential danger</p>
+      <div class="description"><p>Responsive <code>status-warning</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-status-warning-on-light</code> on a themable container with a light color palette and <code>--rh-color-status-warning-on-dark</code> on a themable container with a dark color palette.</p>
 </div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
@@ -198415,7 +198446,7 @@ <h3 id="color-status-neutral">
           <a href="#color-status-neutral">Neutral</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"><p>Represents an action or notice which has neither positive nor negative connotations, is neither explicitly constructive or explicitly destructive.</p>
+      <div class="description"><p>Responsive <code>status-neutral</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-status-neutral-on-light</code> on a themable container with a light color palette and <code>--rh-color-status-neutral-on-dark</code> on a themable container with a dark color palette.</p>
 </div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
@@ -199980,7 +200011,7 @@ <h3 id="color-status-note">
           <a href="#color-status-note">Note</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"><p>Represents an action or notice which is informational, or a tip on how best to complete a task.</p>
+      <div class="description"><p>Responsive <code>status-note</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-status-note-on-light</code> on a themable container with a light color palette and <code>--rh-color-status-note-on-dark</code> on a themable container with a dark color palette.</p>
 </div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
@@ -201545,7 +201576,7 @@ <h3 id="color-status-info">
           <a href="#color-status-info">Info</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"><p>Represents an action or notice which is informational, or a tip on how best to complete a task.</p>
+      <div class="description"><p>Responsive <code>status-info</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-status-info-on-light</code> on a themable container with a light color palette and <code>--rh-color-status-info-on-dark</code> on a themable container with a dark color palette.</p>
 </div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
@@ -203110,7 +203141,7 @@ <h3 id="color-status-success">
           <a href="#color-status-success">Success</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"><p>Represents a notice of success.</p>
+      <div class="description"><p>Responsive <code>status-success</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-status-success-on-light</code> on a themable container with a light color palette and <code>--rh-color-status-success-on-dark</code> on a themable container with a dark color palette.</p>
 </div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
@@ -204679,7 +204710,8 @@ <h2 id="color-surface">
           <a href="#color-surface">Surface</a>
         </h2>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>surface</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to the surface color corresponding to the surface' color palette.</p>
+</div>
       
       <rh-card id="surface-16" class="swatches" color-palette="lightest">
         <h3 slot="header">Theme Tokens</h3>
@@ -210186,7 +210218,8 @@ <h4 id="color-surface-status-danger">
           <a href="#color-surface-status-danger">Danger</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>surface-status-danger</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-surface-status-danger-on-light</code> on a themable container with a light color palette and <code>--rh-color-surface-status-danger-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -211750,7 +211783,8 @@ <h4 id="color-surface-status-caution">
           <a href="#color-surface-status-caution">Caution</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>surface-status-caution</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-surface-status-caution-on-light</code> on a themable container with a light color palette and <code>--rh-color-surface-status-caution-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -213314,7 +213348,8 @@ <h4 id="color-surface-status-warning">
           <a href="#color-surface-status-warning">Warning</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>surface-status-warning</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-surface-status-warning-on-light</code> on a themable container with a light color palette and <code>--rh-color-surface-status-warning-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -214878,7 +214913,8 @@ <h4 id="color-surface-status-default">
           <a href="#color-surface-status-default">Default</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>surface-status-default</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-surface-status-default-on-light</code> on a themable container with a light color palette and <code>--rh-color-surface-status-default-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -216442,7 +216478,8 @@ <h4 id="color-surface-status-neutral">
           <a href="#color-surface-status-neutral">Neutral</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>surface-status-neutral</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-surface-status-neutral-on-light</code> on a themable container with a light color palette and <code>--rh-color-surface-status-neutral-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -218006,7 +218043,8 @@ <h4 id="color-surface-status-info">
           <a href="#color-surface-status-info">Info</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>surface-status-info</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-surface-status-info-on-light</code> on a themable container with a light color palette and <code>--rh-color-surface-status-info-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -219570,7 +219608,8 @@ <h4 id="color-surface-status-success">
           <a href="#color-surface-status-success">Success</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>surface-status-success</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-surface-status-success-on-light</code> on a themable container with a light color palette and <code>--rh-color-surface-status-success-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
diff --git a/tokens/font/index.html b/tokens/font/index.html
index 7cf9feb56c..08c5ba1047 100644
--- a/tokens/font/index.html
+++ b/tokens/font/index.html
@@ -29181,7 +29181,8 @@ <h3 id="font-primary">
           <a href="#font-primary">Primary</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>text-primary</code> color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code> Resolves to <code>--rh-color-text-primary-on-light</code> on a themable container with a light color palette and <code>--rh-color-text-primary-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -30745,7 +30746,8 @@ <h3 id="font-secondary">
           <a href="#font-secondary">Secondary</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>text-secondary</code> color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code> Resolves to <code>--rh-color-text-secondary-on-light</code> on a themable container with a light color palette and <code>--rh-color-text-secondary-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -32309,7 +32311,8 @@ <h3 id="font-brand">
           <a href="#font-brand">Brand</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>text-brand</code> color value. Typically read only - use a themable container e.g. <code>&lt;rh-surface&gt;</code> Resolves to <code>--rh-color-text-brand-on-light</code> on a themable container with a light color palette and <code>--rh-color-text-brand-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
diff --git a/tokens/icon/index.html b/tokens/icon/index.html
index 9f5c41e3d6..e8a516a09f 100644
--- a/tokens/icon/index.html
+++ b/tokens/icon/index.html
@@ -12719,7 +12719,8 @@ <h3 id="icon-primary">
           <a href="#icon-primary">Primary</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-primary</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-primary-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-primary-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -14281,7 +14282,8 @@ <h3 id="icon-secondary">
           <a href="#icon-secondary">Secondary</a>
         </h3>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-secondary</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-secondary-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-secondary-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -17489,7 +17491,8 @@ <h4 id="icon-status-danger">
           <a href="#icon-status-danger">Danger</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-status-danger</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-status-danger-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-status-danger-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -19053,7 +19056,8 @@ <h4 id="icon-status-caution">
           <a href="#icon-status-caution">Caution</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-status-caution</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-status-caution-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-status-caution-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -20617,7 +20621,8 @@ <h4 id="icon-status-warning">
           <a href="#icon-status-warning">Warning</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-status-warning</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-status-warning-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-status-warning-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -22181,7 +22186,8 @@ <h4 id="icon-status-default">
           <a href="#icon-status-default">Default</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-status-default</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-status-default-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-status-default-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -23745,7 +23751,8 @@ <h4 id="icon-status-neutral">
           <a href="#icon-status-neutral">Neutral</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-status-neutral</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-status-neutral-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-status-neutral-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -25309,7 +25316,8 @@ <h4 id="icon-status-info">
           <a href="#icon-status-info">Info</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-status-info</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-status-info-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-status-info-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;
@@ -26873,7 +26881,8 @@ <h4 id="icon-status-success">
           <a href="#icon-status-success">Success</a>
         </h4>
       </uxdot-copy-permalink>
-      <div class="description"></div>
+      <div class="description"><p>Responsive <code>icon-status-success</code> color value. Typically read-only - use a themable container, e.g. <code>&lt;rh-surface&gt;</code>. Resolves to <code>--rh-color-icon-status-success-on-light</code> on a themable container with a light color palette and <code>--rh-color-icon-status-success-on-dark</code> on a themable container with a dark color palette.</p>
+</div>
       
       <rh-table><template shadowroot="open" shadowrootmode="open"><style>* {
   box-sizing: border-box;