@swiftwc/ui 0.0.0-dev.89 → 0.0.0-dev.91

package/generated/components/bordered-button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A button that applies standard border artwork based on the button’s context.
+ * @summary A control that initiates an action. Styled with standard border artwork based on the button’s context.
  *
  * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/bordered-button.js

@@ -3,7 +3,7 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A button that applies standard border artwork based on the button’s context.
+ * @summary A control that initiates an action. Styled with standard border artwork based on the button’s context.
  *
  * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/bordered-prominent-button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A button that applies standard border prominent artwork based on the button’s context.
+ * @summary A control that initiates an action. Styled with standard border prominent artwork based on the button’s context.
  *
  * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/bordered-prominent-button.js

@@ -3,7 +3,7 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A button that applies standard border prominent artwork based on the button’s context.
+ * @summary A control that initiates an action. Styled with standard border prominent artwork based on the button’s context.
  *
  * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/borderless-button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A button that doesn’t apply a border.
+ * @summary A control that initiates an action. Styled without any borders.
  *
  * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/borderless-button.js

@@ -3,7 +3,7 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A button that doesn’t apply a border.
+ * @summary A control that initiates an action. Styled without any borders.
  *
  * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/date-picker.d.ts

@@ -1,6 +1,9 @@
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const datePickerStyles: readonly ["graphical", "field", "automatic"];
 export type DatePickerStyle = (typeof datePickerStyles)[number];
+/**
+ * @summary A control for selecting an absolute date.
+ */
 export declare class DatePicker extends FormAssociatedBase {
     #private;
     static get observedAttributes(): string[];

package/generated/components/date-picker.js

@@ -6,6 +6,9 @@ import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, clamp, devFlags, kebabCase, onoff, set } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
+/**
+ * @summary A control for selecting an absolute date.
+ */
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
         return [

package/generated/components/glass-button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A button that applies glass border artwork based on the button’s context.
+ * @summary A control that initiates an action. Styled with glass border artwork based on the button’s context.
  *
  * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/glass-button.js

@@ -3,7 +3,7 @@ import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/util
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A button that applies glass border artwork based on the button’s context.
+ * @summary A control that initiates an action. Styled with glass border artwork based on the button’s context.
  *
  * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/glass-prominent-button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A button that applies prominent glass border artwork based on the button’s context.
+ * @summary A control that initiates an action. Styled with prominent glass border artwork based on the button’s context.
  *
  * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/glass-prominent-button.js

@@ -3,7 +3,7 @@ import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/util
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A button that applies prominent glass border artwork based on the button’s context.
+ * @summary A control that initiates an action. Styled with prominent glass border artwork based on the button’s context.
  *
  * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
  *

package/generated/components/section-view.d.ts

@@ -1,4 +1,6 @@
 /**
+ * @summary A container view that you can use to add hierarchy within certain views.
+ *
  * @slot header
  * @slot footer
  */

package/generated/components/section-view.js

@@ -1,6 +1,8 @@
 import { $, devFlags } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 /**
+ * @summary A container view that you can use to add hierarchy within certain views.
+ *
  * @slot header
  * @slot footer
  */

package/generated/components/text-field.js

@@ -124,7 +124,7 @@ export class TextField extends FormAssociatedBase {
             case 'name':
             case 'minimum':
             case 'maximum':
-                this.#sendValueToForm();
+                this.#sendValueToForm(false);
                 break;
             case 'prompt':
                 this.#input?.setAttribute('placeholder', newValue ?? ''); // else this.#input?.removeAttribute(name)
@@ -491,7 +491,7 @@ export class TextField extends FormAssociatedBase {
     };
     formResetCallback = () => {
         this.text = '';
-        this.#sendValueToForm();
+        this.#sendValueToForm(false);
     };
 }
 _a = TextField;

package/generated/components/tool-bar-item-group.d.ts

@@ -1,3 +1,6 @@
+/**
+ * A model that represents a group of `ToolbarItems` which can be placed in the toolbar or navigation bar.
+ */
 export declare class ToolBarItemGroup extends HTMLElement {
     constructor();
     connectedCallback(): void;

package/generated/components/tool-bar-item-group.js

@@ -8,6 +8,9 @@ var ToolBarItemGroup_1;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { adaptiveSlot } from '../internal/decorators';
 import { devFlags } from '../internal/utils';
+/**
+ * A model that represents a group of `ToolbarItems` which can be placed in the toolbar or navigation bar.
+ */
 let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
     constructor() {
         super();

package/generated/components/tool-bar-item.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @summary A model that represents an item which can be placed in the toolbar or navigation bar.
+ */
 export declare class ToolBarItem extends HTMLElement {
     #private;
     static get observedAttributes(): string[];

package/generated/components/tool-bar-item.js

@@ -9,6 +9,9 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { adaptiveSlot } from '../internal/decorators';
 import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
+/**
+ * @summary A model that represents an item which can be placed in the toolbar or navigation bar.
+ */
 let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
     static get observedAttributes() {
         return ['slot', 'data-previous-slot', 'title-key'];

package/generated/components/tool-bar.d.ts

@@ -1,4 +1,6 @@
 /**
+ * @summary Populates the toolbar or navigation bar with the specified items.
+ *
  * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal

package/generated/components/tool-bar.js

@@ -3,6 +3,8 @@ import { ResizeObserverSingleton } from '../internal/class/resize-observer-singl
 import { $, devFlags } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 /**
+ * @summary Populates the toolbar or navigation bar with the specified items.
+ *
  * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal

package/generated/css/index.css

@@ -1105,6 +1105,7 @@
   group-box:not([hidden]),
   tool-bar:not([hidden]),
   label-view:not([hidden]),
+  text-view:not([hidden]),
   labeled-content:not([hidden]),
   menu-view:not([hidden]),
   section-view:not([hidden]),
@@ -3375,6 +3376,18 @@
     }
   }
 }
+@layer sw-components {
+  :where(text-view[prose]) {
+    container: text-view/inline-size;
+    --text-view--p-margin-block-start: 1rem;
+  }
+  text-view[prose] p {
+    margin-block-start: var(--text-view--p-margin-block-start);
+  }
+  :where(text-view[prose] h1) {
+    font-size: clamp(1rem, var(--text-view--h1-font-size) + 0.5rem, 3rem);
+  }
+}
 @layer sw-components {
   :where(toggle-view) {
     grid-template-columns: minmax(0, 1fr);
@@ -6020,6 +6033,16 @@
     --accentColor4: var(--orange4);
     --accentColor5: var(--orange5);
   }
+  :where([tint=purple],
+  [list-item-tint=purple]) {
+    --accentColorEffective: var(--purple);
+    --accentColorEffective4: var(--purple4);
+    --accentColor: var(--purple);
+    --accentColor2: var(--purple2);
+    --accentColor3: var(--purple3);
+    --accentColor4: var(--purple4);
+    --accentColor5: var(--purple5);
+  }
 }
 @layer sw-utils {
   :where([frame\:width=infinity]) {

package/generated/internal/utils/compare-big-decimals.js

@@ -1,19 +1,3 @@
-/**
- * @example
- * compareBigDecimals("1e3", "1000") // 0
- * compareBigDecimals("1e-3", "0.001") // 0
- * compareBigDecimals("-10", "-2") // -1 ✅
- * const arr = ["1.2","1.10","1.02","1e2","100","-0.5"]
- * arr.sort(compareBigDecimals)
- * console.log(arr)
- * function isInRange(value: string, min: string, max: string): boolean {return compareBigDecimals(value, min) >= 0 && compareBigDecimals(value, max) <= 0}
- * // examples
- * isInRange("-5", "-10", "-1")   // true
- * isInRange("-11", "-10", "-1")  // false
- * isInRange("0", "-10", "-1")    // false
- * isInRange("-Infinity", "-Infinity", "-1")  // true
- * isInRange("5", "-Infinity", "Infinity")    // true
- */
 const POSITIVE_INFINITY = 'Infinity', NEGATIVE_INFINITY = '-Infinity';
 export default function (a, b) {
     const aInf = isInfinity(a), bInf = isInfinity(b);
@@ -75,7 +59,13 @@ function parse(input) {
     if (exp > 0) {
         const move = Math.min(exp, f.length);
         i += f.slice(0, move);
-        f = f.slice(move) + '0'.repeat(exp - move);
+        f = f.slice(move);
+        const remaining = exp - move;
+        if (remaining > 0)
+            i += '0'.repeat(remaining);
+        // const move = Math.min(exp, f.length)
+        // i += f.slice(0, move)
+        // f = f.slice(move) + '0'.repeat(exp - move)
     }
     else if (exp < 0) {
         const move = Math.min(-exp, i.length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.89",
+  "version": "0.0.0-dev.91",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -62,7 +62,7 @@
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
-    "build:manifest": "tsx scripts/make-manifest.ts",
+    "build:manifest": "tsx scripts/make-manifest.ts && prettier ./web-components.html-data/en.json --write",
     "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:tpl && npm run build:barrels:morphdom && npm run build:barrels:i18n",
     "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
     "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
@@ -73,6 +73,7 @@
     "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
+    "lint:scripts": "tsc -p tsconfig.scripts.json --noEmit",
     "test": "vitest --dom",
     "prepackage": "rm -rf generated",
     "package": "npm run build:ts && npm run build:scss",

package/scss/_components.scss

@@ -52,6 +52,7 @@
 @forward 'components/tool-bar';
 
 @forward 'components/label-view';
+@forward 'components/text-view';
 
 @forward 'components/toggle-view';
 

package/scss/_maps.scss

@@ -254,3 +254,34 @@ $button-sizes-map: (
     ),
   ),
 );
+
+$tint-names: gray, blue, red, green, orange, purple;
+
+$foreground-tokens: (
+  secondary: --secondary,
+  blue: --blue,
+  red: --red,
+  green: --green,
+  orange: --orange,
+  purple: --purple,
+  'blue.secondary': --blue2,
+  'red.secondary': --red2,
+  'green.secondary': --green2,
+  'orange.secondary': --orange2,
+  'purple.secondary': --purple2,
+  'blue.tertiary': --blue3,
+  'red.tertiary': --red3,
+  'green.tertiary': --green3,
+  'orange.tertiary': --orange3,
+  'purple.tertiary': --purple3,
+  'blue.quaternary': --blue4,
+  'red.quaternary': --red4,
+  'green.quaternary': --green4,
+  'orange.quaternary': --orange4,
+  'purple.quaternary': --purple4,
+  'blue.quinary': --blue5,
+  'red.quinary': --red5,
+  'green.quinary': --green5,
+  'orange.quinary': --orange5,
+  'purple.quinary': --purple5,
+);

package/scss/components/_index.scss

@@ -42,6 +42,7 @@
   group-box,
   tool-bar,
   label-view,
+  text-view,
   labeled-content,
   menu-view,
   section-view,

package/scss/components/_text-view.scss

@@ -0,0 +1,57 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  text-view {
+    :where(&) {
+      //
+
+      // inline-size: min-content;
+    }
+
+    &[prose] {
+      :where(&) {
+        container: text-view / inline-size;
+
+        // font-size: clamp(1rem, var(--text-view--base-font-size) + 0.5rem, 3rem);
+
+        // --text-view--base-font-size: 1cqi;
+        // --text-view--h1-font-size: 5cqi;
+
+        --text-view--p-margin-block-start: 1rem;
+      }
+
+      p {
+        margin-block-start: var(--text-view--p-margin-block-start);
+      }
+
+      // @container text-view (width <= 576px) {
+      //   :where(&) {
+      //     --text-view--base-font-size: 1.3cqi;
+      //   }
+      // }
+      // @container text-view (width > 576px) {
+      //   :where(&) {
+      //     --text-view--base-font-size: 1.3cqi;
+      //   }
+      // }
+      // @container table (width > 768) {
+      //   --text-view--base-font-size: 100% * 16px;
+      // }
+      // @container table (width > 1024) {
+      //   --text-view--base-font-size: 100% * 16px;
+      // }
+      // @container table (width > 1280) {
+      //   --text-view--base-font-size: 100% * 16px;
+      // }
+      // @container table (width > 1536) {
+      //   --text-view--base-font-size: 100% * 16px;
+      // }
+
+      h1 {
+        :where(&) {
+          font-size: clamp(1rem, var(--text-view--h1-font-size) + 0.5rem, 3rem);
+        }
+      }
+    }
+  }
+}

package/scss/utils/_index.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 
 @layer #{vars.$utils-layer} {
   [background-style='grouped'] {
@@ -25,43 +26,13 @@
     }
   }
 
-  @each $k,
-    $v
-      in (
-        secondary: --secondary,
-        blue: --blue,
-        red: --red,
-        green: --green,
-        orange: --orange,
-        purple: --purple,
-        'blue.secondary': --blue2,
-        'red.secondary': --red2,
-        'green.secondary': --green2,
-        'orange.secondary': --orange2,
-        'purple.secondary': --purple2,
-        'blue.tertiary': --blue3,
-        'red.tertiary': --red3,
-        'green.tertiary': --green3,
-        'orange.tertiary': --orange3,
-        'purple.tertiary': --purple3,
-        'blue.quaternary': --blue4,
-        'red.quaternary': --red4,
-        'green.quaternary': --green4,
-        'orange.quaternary': --orange4,
-        'purple.quaternary': --purple4,
-        'blue.quinary': --blue5,
-        'red.quinary': --red5,
-        'green.quinary': --green5,
-        'orange.quinary': --orange5,
-        'purple.quinary': --purple5
-      )
-  {
+  @each $k, $v in maps.$foreground-tokens {
     :where([foreground='#{"" + $k}']) {
       color: var(#{$v});
     }
   }
 
-  @each $tint in gray, blue, red, green, orange {
+  @each $tint in maps.$tint-names {
     [tint='#{"" + $tint}'],
     [list-item-tint='#{"" + $tint}'] {
       :where(&) {

package/scss/utils/_stacks.scss

@@ -34,18 +34,6 @@
         }
       }
     }
-
-    // @each $k, $v in $alignment-map {
-    //   &[align='#{$k}'] {
-    //     justify-items: $v;
-    //   }
-    // }
-
-    // @each $k, $v in $distribution-map {
-    //   &[distribute='#{$k}'] {
-    //     justify-content: $v;
-    //   }
-    // }
   }
 
   // Horizontal alignment becomes the common tweak
@@ -77,36 +65,15 @@
         }
       }
     }
-
-    // @each $k, $v in $alignment-map {
-    //   &[align='#{$k}'] {
-    //     align-items: $v;
-    //   }
-    // }
-
-    // @each $k, $v in $distribution-map {
-    //   &[distribute='#{$k}'] {
-    //     align-content: $v;
-    //   }
-    // }
   }
 
   v-stack,
   h-stack {
-    // $spaces: 0, 1, 2, 3, 4;
-    // @each $s in $spaces {
     @for $i from 0 through 50 {
       :where(&[spacing='#{$i}']) {
         gap: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
       }
     }
-
-    // :where(&[frame\:alignment='leading']) {
-    //   justify-self: start;
-    // }
-    // :where(&[frame\:alignment='center']) {
-    //   justify-self: center;
-    // }
   }
 
   // padding reserved word for stacks

package/web-components.html-data/en.json

@@ -10,7 +10,7 @@
     },
     {
       "name": "bordered-button",
-      "description": "A button that applies standard border artwork based on the button’s context.",
+      "description": "A control that initiates an action. Styled with standard border artwork based on the button’s context.",
       "attributes": [
         {
           "name": "role",
@@ -24,7 +24,7 @@
     },
     {
       "name": "bordered-prominent-button",
-      "description": "A button that applies standard border prominent artwork based on the button’s context.",
+      "description": "A control that initiates an action. Styled with standard border prominent artwork based on the button’s context.",
       "attributes": [
         {
           "name": "role",
@@ -38,7 +38,7 @@
     },
     {
       "name": "borderless-button",
-      "description": "A button that doesn’t apply a border.",
+      "description": "A control that initiates an action. Styled without any borders.",
       "attributes": [
         {
           "name": "role",
@@ -78,6 +78,7 @@
     },
     {
       "name": "date-picker",
+      "description": "A control for selecting an absolute date.",
       "attributes": [
         {
           "name": "date-picker-style",
@@ -150,7 +151,7 @@
     },
     {
       "name": "glass-button",
-      "description": "A button that applies glass border artwork based on the button’s context.",
+      "description": "A control that initiates an action. Styled with glass border artwork based on the button’s context.",
       "attributes": [
         {
           "name": "role",
@@ -164,7 +165,7 @@
     },
     {
       "name": "glass-prominent-button",
-      "description": "A button that applies prominent glass border artwork based on the button’s context.",
+      "description": "A control that initiates an action. Styled with prominent glass border artwork based on the button’s context.",
       "attributes": [
         {
           "name": "role",
@@ -433,7 +434,7 @@
     },
     {
       "name": "section-view",
-      "description": "",
+      "description": "A container view that you can use to add hierarchy within certain views.",
       "attributes": [
         {
           "name": "header"
@@ -563,10 +564,12 @@
       ]
     },
     {
-      "name": "tool-bar-item-group"
+      "name": "tool-bar-item-group",
+      "description": "A model that represents a group of `ToolbarItems` which can be placed in the toolbar or navigation bar."
     },
     {
       "name": "tool-bar-item",
+      "description": "A model that represents an item which can be placed in the toolbar or navigation bar.",
       "attributes": [
         {
           "name": "slot"
@@ -581,7 +584,7 @@
     },
     {
       "name": "tool-bar",
-      "description": ""
+      "description": "Populates the toolbar or navigation bar with the specified items."
     },
     {
       "name": "vkeyboard",
@@ -949,27 +952,27 @@
       "values": [
         {
           "name": "gray",
-          "description": "like secondary, like disabled"
+          "description": "Like secondary, like disabled"
         },
         {
-          "name": "red",
-          "description": "system red color"
+          "name": "blue",
+          "description": "System `blue` color"
         },
         {
-          "name": "blue",
-          "description": "system blue color"
+          "name": "red",
+          "description": "System `red` color"
         },
         {
           "name": "green",
-          "description": "system green color"
+          "description": "System `green` color"
         },
         {
           "name": "orange",
-          "description": "system orange color"
+          "description": "System `orange` color"
         },
         {
           "name": "purple",
-          "description": "system purple color"
+          "description": "System `purple` color"
         }
       ]
     },
@@ -978,35 +981,107 @@
       "values": [
         {
           "name": "secondary",
-          "description": "system secondary color"
+          "description": "Applies the system secondary color (`--secondary`)"
         },
         {
           "name": "blue",
-          "description": "system blue color"
+          "description": "Applies the system blue color (`--blue`)"
+        },
+        {
+          "name": "red",
+          "description": "Applies the system red color (`--red`)"
+        },
+        {
+          "name": "green",
+          "description": "Applies the system green color (`--green`)"
+        },
+        {
+          "name": "orange",
+          "description": "Applies the system orange color (`--orange`)"
+        },
+        {
+          "name": "purple",
+          "description": "Applies the system purple color (`--purple`)"
         },
         {
           "name": "blue.secondary",
-          "description": "system secondary blue color"
+          "description": "Applies the system secondary blue color (`--blue2`)"
         },
         {
-          "name": "gray",
-          "description": "system gray color"
+          "name": "red.secondary",
+          "description": "Applies the system secondary red color (`--red2`)"
         },
         {
-          "name": "red",
-          "description": "system red color"
+          "name": "green.secondary",
+          "description": "Applies the system secondary green color (`--green2`)"
         },
         {
-          "name": "green",
-          "description": "system green color"
+          "name": "orange.secondary",
+          "description": "Applies the system secondary orange color (`--orange2`)"
         },
         {
-          "name": "orange",
-          "description": "system orange color"
+          "name": "purple.secondary",
+          "description": "Applies the system secondary purple color (`--purple2`)"
         },
         {
-          "name": "purple",
-          "description": "system purple color"
+          "name": "blue.tertiary",
+          "description": "Applies the system tertiary blue color (`--blue3`)"
+        },
+        {
+          "name": "red.tertiary",
+          "description": "Applies the system tertiary red color (`--red3`)"
+        },
+        {
+          "name": "green.tertiary",
+          "description": "Applies the system tertiary green color (`--green3`)"
+        },
+        {
+          "name": "orange.tertiary",
+          "description": "Applies the system tertiary orange color (`--orange3`)"
+        },
+        {
+          "name": "purple.tertiary",
+          "description": "Applies the system tertiary purple color (`--purple3`)"
+        },
+        {
+          "name": "blue.quaternary",
+          "description": "Applies the system quaternary blue color (`--blue4`)"
+        },
+        {
+          "name": "red.quaternary",
+          "description": "Applies the system quaternary red color (`--red4`)"
+        },
+        {
+          "name": "green.quaternary",
+          "description": "Applies the system quaternary green color (`--green4`)"
+        },
+        {
+          "name": "orange.quaternary",
+          "description": "Applies the system quaternary orange color (`--orange4`)"
+        },
+        {
+          "name": "purple.quaternary",
+          "description": "Applies the system quaternary purple color (`--purple4`)"
+        },
+        {
+          "name": "blue.quinary",
+          "description": "Applies the system quinary blue color (`--blue5`)"
+        },
+        {
+          "name": "red.quinary",
+          "description": "Applies the system quinary red color (`--red5`)"
+        },
+        {
+          "name": "green.quinary",
+          "description": "Applies the system quinary green color (`--green5`)"
+        },
+        {
+          "name": "orange.quinary",
+          "description": "Applies the system quinary orange color (`--orange5`)"
+        },
+        {
+          "name": "purple.quinary",
+          "description": "Applies the system quinary purple color (`--purple5`)"
         }
       ]
     },