rift-ds 1.4.0 → 1.6.0

package/tokens/presets/violet.css

@@ -7,39 +7,39 @@
  * Import after tokens.css, then set data-brand="violet" on <html>.
  */
 @font-face {
-  font-family: 'Work Sans';
+  font-family: 'Plus Jakarta Sans';
   font-style: normal;
-  font-weight: 300 700;
+  font-weight: 300 800;
   font-display: swap;
-  src: url('../../fonts/presets/work-sans-300-700-latin.woff2') format('woff2');
+  src: url('../../fonts/presets/plus-jakarta-sans-300-800-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-  font-family: 'Work Sans';
+  font-family: 'Plus Jakarta Sans';
   font-style: normal;
-  font-weight: 300 700;
+  font-weight: 300 800;
   font-display: swap;
-  src: url('../../fonts/presets/work-sans-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url('../../fonts/presets/plus-jakarta-sans-300-800-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
-  font-family: 'Lora';
+  font-family: 'Playfair Display';
   font-style: normal;
-  font-weight: 400 700;
+  font-weight: 400 800;
   font-display: swap;
-  src: url('../../fonts/presets/lora-400-700-latin.woff2') format('woff2');
+  src: url('../../fonts/presets/playfair-display-400-800-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-  font-family: 'Lora';
+  font-family: 'Playfair Display';
   font-style: normal;
-  font-weight: 400 700;
+  font-weight: 400 800;
   font-display: swap;
-  src: url('../../fonts/presets/lora-400-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url('../../fonts/presets/playfair-display-400-800-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="violet"] {
@@ -63,8 +63,33 @@ html[data-brand="violet"] {
   --color-core-ui-secondary: var(--primitive-purple-11);
   --color-input-border-hover: var(--primitive-purple-06);
   --color-input-border-selected: var(--primitive-purple-08);
-  --font-family-heading: 'Lora', serif;
-  --font-family-primary: 'Work Sans', sans-serif;
+  --font-caption-letter-spacing: -0.005em;
+  --font-display-1-letter-spacing: 0.015em;
+  --font-display-1-weight: 400;
+  --font-display-2-letter-spacing: 0.01em;
+  --font-display-2-weight: 400;
+  --font-family-heading: 'Playfair Display', serif;
+  --font-family-primary: 'Plus Jakarta Sans', sans-serif;
+  --font-heading-1-letter-spacing: 0.01em;
+  --font-heading-1-weight: 500;
+  --font-heading-2-letter-spacing: 0.01em;
+  --font-heading-2-weight: 500;
+  --font-heading-3-letter-spacing: 0.01em;
+  --font-heading-3-weight: 500;
+  --font-mega-1-letter-spacing: 0.015em;
+  --font-mega-1-weight: 400;
+  --font-mega-2-letter-spacing: 0.015em;
+  --font-mega-2-weight: 400;
+  --font-overline-letter-spacing: 0.075em;
+  --font-paragraph-emphasis-letter-spacing: -0.015em;
+  --font-paragraph-letter-spacing: -0.005em;
+  --font-paragraph-sm-emphasis-letter-spacing: -0.005em;
+  --font-paragraph-sm-letter-spacing: -0.005em;
+  --font-sub-display-letter-spacing: 0.01em;
+  --font-sub-display-weight: 400;
+  --font-title-body-letter-spacing: -0.015em;
+  --font-title-body-weight: 500;
+  --material-symbols-weight: 300;
   --primitive-blue-00: #FBFBFE;
   --primitive-blue-01: #F6F6FD;
   --primitive-blue-02: #E6E7F9;
@@ -77,6 +102,16 @@ html[data-brand="violet"] {
   --primitive-blue-09: #303471;
   --primitive-blue-10: #1B1D3E;
   --primitive-blue-11: #12142B;
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-1000: 42px;
+  --primitive-gap-1500: 63px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-2000: 84px;
+  --primitive-gap-300: 13px;
+  --primitive-gap-3000: 126px;
+  --primitive-gap-400: 17px;
+  --primitive-gap-500: 21px;
   --primitive-green-00: #F9FCFC;
   --primitive-green-01: #F0F9F7;
   --primitive-green-02: #D5EDE8;
@@ -89,14 +124,14 @@ html[data-brand="violet"] {
   --primitive-green-09: #236153;
   --primitive-green-10: #143930;
   --primitive-green-11: #102C26;
-  --primitive-neutral-00: #FAF6FE;
-  --primitive-neutral-00-a01: rgba(250, 246, 254, 0.01);
-  --primitive-neutral-00-a60: rgba(250, 246, 254, 0.6);
-  --primitive-neutral-00-a90: rgba(250, 246, 254, 0.9);
-  --primitive-neutral-01: #EDE9F1;
-  --primitive-neutral-01-a01: rgba(237, 233, 241, 0.01);
-  --primitive-neutral-01-a60: rgba(237, 233, 241, 0.6);
-  --primitive-neutral-01-a82: rgba(237, 233, 241, 0.82);
+  --primitive-neutral-00: #FDFAFF;
+  --primitive-neutral-00-a01: rgba(253, 250, 255, 0.01);
+  --primitive-neutral-00-a60: rgba(253, 250, 255, 0.6);
+  --primitive-neutral-00-a90: rgba(253, 250, 255, 0.9);
+  --primitive-neutral-01: #EFEDF1;
+  --primitive-neutral-01-a01: rgba(239, 237, 241, 0.01);
+  --primitive-neutral-01-a60: rgba(239, 237, 241, 0.6);
+  --primitive-neutral-01-a82: rgba(239, 237, 241, 0.82);
   --primitive-neutral-02: #D3CFD7;
   --primitive-neutral-02-a80: rgba(211, 207, 215, 0.8);
   --primitive-neutral-03: #BBB6BF;
@@ -129,6 +164,15 @@ html[data-brand="violet"] {
   --primitive-orange-09: #754235;
   --primitive-orange-10: #462820;
   --primitive-orange-11: #341D17;
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-1000: 42px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-1500: 63px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 13px;
+  --primitive-padding-400: 17px;
+  --primitive-padding-500: 21px;
   --primitive-radius-050: 3px;
   --primitive-radius-100: 6px;
   --primitive-radius-1200: 67px;
@@ -198,8 +242,33 @@ html[data-brand="violet"][data-theme="dark"] {
   --color-core-ui-secondary: var(--primitive-purple-09);
   --color-input-border-hover: var(--primitive-purple-09);
   --color-input-border-selected: var(--primitive-purple-09);
-  --font-family-heading: 'Lora', serif;
-  --font-family-primary: 'Work Sans', sans-serif;
+  --font-caption-letter-spacing: -0.005em;
+  --font-display-1-letter-spacing: 0.015em;
+  --font-display-1-weight: 400;
+  --font-display-2-letter-spacing: 0.01em;
+  --font-display-2-weight: 400;
+  --font-family-heading: 'Playfair Display', serif;
+  --font-family-primary: 'Plus Jakarta Sans', sans-serif;
+  --font-heading-1-letter-spacing: 0.01em;
+  --font-heading-1-weight: 500;
+  --font-heading-2-letter-spacing: 0.01em;
+  --font-heading-2-weight: 500;
+  --font-heading-3-letter-spacing: 0.01em;
+  --font-heading-3-weight: 500;
+  --font-mega-1-letter-spacing: 0.015em;
+  --font-mega-1-weight: 400;
+  --font-mega-2-letter-spacing: 0.015em;
+  --font-mega-2-weight: 400;
+  --font-overline-letter-spacing: 0.075em;
+  --font-paragraph-emphasis-letter-spacing: -0.015em;
+  --font-paragraph-letter-spacing: -0.005em;
+  --font-paragraph-sm-emphasis-letter-spacing: -0.005em;
+  --font-paragraph-sm-letter-spacing: -0.005em;
+  --font-sub-display-letter-spacing: 0.01em;
+  --font-sub-display-weight: 400;
+  --font-title-body-letter-spacing: -0.015em;
+  --font-title-body-weight: 500;
+  --material-symbols-weight: 300;
   --primitive-blue-00: #FBFBFE;
   --primitive-blue-01: #F6F6FD;
   --primitive-blue-02: #E6E7F9;
@@ -212,6 +281,16 @@ html[data-brand="violet"][data-theme="dark"] {
   --primitive-blue-09: #303471;
   --primitive-blue-10: #1B1D3E;
   --primitive-blue-11: #12142B;
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-1000: 42px;
+  --primitive-gap-1500: 63px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-2000: 84px;
+  --primitive-gap-300: 13px;
+  --primitive-gap-3000: 126px;
+  --primitive-gap-400: 17px;
+  --primitive-gap-500: 21px;
   --primitive-green-00: #F9FCFC;
   --primitive-green-01: #F0F9F7;
   --primitive-green-02: #D5EDE8;
@@ -264,6 +343,15 @@ html[data-brand="violet"][data-theme="dark"] {
   --primitive-orange-09: #754235;
   --primitive-orange-10: #462820;
   --primitive-orange-11: #341D17;
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-1000: 42px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-1500: 63px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 13px;
+  --primitive-padding-400: 17px;
+  --primitive-padding-500: 21px;
   --primitive-radius-050: 3px;
   --primitive-radius-100: 6px;
   --primitive-radius-1200: 67px;

package/tokens/presets/warm.css

@@ -21,7 +21,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/source-sans-3-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -39,7 +39,7 @@
   font-weight: 400 700;
   font-display: swap;
   src: url('../../fonts/presets/lora-400-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="warm"] {
@@ -90,14 +90,14 @@ html[data-brand="warm"] {
   --primitive-green-09: #265E46;
   --primitive-green-10: #163729;
   --primitive-green-11: #112A20;
-  --primitive-neutral-00: #FAF6F2;
-  --primitive-neutral-00-a01: rgba(250, 246, 242, 0.01);
-  --primitive-neutral-00-a60: rgba(250, 246, 242, 0.6);
-  --primitive-neutral-00-a90: rgba(250, 246, 242, 0.9);
-  --primitive-neutral-01: #EDE9E5;
-  --primitive-neutral-01-a01: rgba(237, 233, 229, 0.01);
-  --primitive-neutral-01-a60: rgba(237, 233, 229, 0.6);
-  --primitive-neutral-01-a82: rgba(237, 233, 229, 0.82);
+  --primitive-neutral-00: #FCFAF8;
+  --primitive-neutral-00-a01: rgba(252, 250, 248, 0.01);
+  --primitive-neutral-00-a60: rgba(252, 250, 248, 0.6);
+  --primitive-neutral-00-a90: rgba(252, 250, 248, 0.9);
+  --primitive-neutral-01: #EFEDEB;
+  --primitive-neutral-01-a01: rgba(239, 237, 235, 0.01);
+  --primitive-neutral-01-a60: rgba(239, 237, 235, 0.6);
+  --primitive-neutral-01-a82: rgba(239, 237, 235, 0.82);
   --primitive-neutral-02: #D4D0CC;
   --primitive-neutral-02-a80: rgba(212, 208, 204, 0.8);
   --primitive-neutral-03: #BCB8B4;

package/tokens/presets/zest.css

@@ -21,7 +21,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/inter-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -39,7 +39,7 @@
   font-weight: 300 900;
   font-display: swap;
   src: url('../../fonts/presets/inter-tight-300-900-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="zest"] {
@@ -100,14 +100,14 @@ html[data-brand="zest"] {
   --primitive-green-09: #4D813D;
   --primitive-green-10: #2D4B24;
   --primitive-green-11: #233B1C;
-  --primitive-neutral-00: #F6F7F5;
-  --primitive-neutral-00-a01: rgba(246, 247, 245, 0.01);
-  --primitive-neutral-00-a60: rgba(246, 247, 245, 0.6);
-  --primitive-neutral-00-a90: rgba(246, 247, 245, 0.9);
-  --primitive-neutral-01: #E8E9E7;
-  --primitive-neutral-01-a01: rgba(232, 233, 231, 0.01);
-  --primitive-neutral-01-a60: rgba(232, 233, 231, 0.6);
-  --primitive-neutral-01-a82: rgba(232, 233, 231, 0.82);
+  --primitive-neutral-00: #FAFBFA;
+  --primitive-neutral-00-a01: rgba(250, 251, 250, 0.01);
+  --primitive-neutral-00-a60: rgba(250, 251, 250, 0.6);
+  --primitive-neutral-00-a90: rgba(250, 251, 250, 0.9);
+  --primitive-neutral-01: #EDEDEC;
+  --primitive-neutral-01-a01: rgba(237, 237, 236, 0.01);
+  --primitive-neutral-01-a60: rgba(237, 237, 236, 0.6);
+  --primitive-neutral-01-a82: rgba(237, 237, 236, 0.82);
   --primitive-neutral-02: #CECFCD;
   --primitive-neutral-02-a80: rgba(206, 207, 205, 0.8);
   --primitive-neutral-03: #B5B7B4;

package/tokens/registry.json

@@ -84,6 +84,12 @@
       "--color-input-text-inverse",
       "--color-input-text-placeholder",
       "--color-input-text-primary",
+      "--color-pixel-ink-1",
+      "--color-pixel-ink-2",
+      "--color-pixel-ink-3",
+      "--color-pixel-ink-4",
+      "--color-pixel-ink-5",
+      "--color-pixel-ink-6",
       "--color-scrim",
       "--color-status-error-bg",
       "--color-status-error-border",

package/tokens/registry.json.d.ts

@@ -84,6 +84,12 @@ declare const _default: {
       "--color-input-text-inverse",
       "--color-input-text-placeholder",
       "--color-input-text-primary",
+      "--color-pixel-ink-1",
+      "--color-pixel-ink-2",
+      "--color-pixel-ink-3",
+      "--color-pixel-ink-4",
+      "--color-pixel-ink-5",
+      "--color-pixel-ink-6",
       "--color-scrim",
       "--color-status-error-bg",
       "--color-status-error-border",

package/tokens/registry.json.js

@@ -1,4 +1,4 @@
-const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-neutral-bg", "--color-action-neutral-bg-active", "--color-action-neutral-bg-hover", "--color-action-neutral-text", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-button-bg", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-glass", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-calendar-cell-bg", "--color-calendar-cell-bg-hover", "--color-calendar-event-bg", "--color-calendar-event-bg-hover", "--color-calendar-event-border", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-chat-context-bg", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-file-document", "--color-file-pdf", "--color-file-presentation", "--color-file-spreadsheet", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-icon", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-icon", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-icon", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-icon", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-icon", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-trend-down", "--color-trend-up"], "typography": ["--font-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-body", "--font-family-code", "--font-family-heading", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-line-height-1100", "--font-line-height-400", "--font-line-height-500", "--font-line-height-600", "--font-line-height-700", "--font-line-height-800", "--font-line-height-900", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-weight", "--font-paragraph-emphasis-family", "--font-paragraph-emphasis-letter-spacing", "--font-paragraph-emphasis-line-height", "--font-paragraph-emphasis-size", "--font-paragraph-emphasis-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-emphasis-family", "--font-paragraph-sm-emphasis-letter-spacing", "--font-paragraph-sm-emphasis-line-height", "--font-paragraph-sm-emphasis-size", "--font-paragraph-sm-emphasis-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-size-1000", "--font-size-1200", "--font-size-1400", "--font-size-1600", "--font-size-2400", "--font-size-2900", "--font-size-300", "--font-size-3300", "--font-size-350", "--font-size-400", "--font-size-550", "--font-size-600", "--font-size-650", "--font-size-750", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-050", "--gap-100", "--gap-1000", "--gap-1500", "--gap-200", "--gap-2000", "--gap-300", "--gap-3000", "--gap-400", "--gap-500", "--padding-050", "--padding-100", "--padding-1000", "--padding-150", "--padding-1500", "--padding-200", "--padding-300", "--padding-400", "--padding-500"], "radius": ["--radius-050", "--radius-100", "--radius-1200", "--radius-200", "--radius-300", "--radius-400", "--radius-600", "--radius-pill"], "border": ["--border-025", "--border-050"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-1200", "--icon-size-500", "--icon-size-600", "--icon-size-800"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-instant", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-orbit", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
+const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-neutral-bg", "--color-action-neutral-bg-active", "--color-action-neutral-bg-hover", "--color-action-neutral-text", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-button-bg", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-glass", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-calendar-cell-bg", "--color-calendar-cell-bg-hover", "--color-calendar-event-bg", "--color-calendar-event-bg-hover", "--color-calendar-event-border", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-chat-context-bg", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-file-document", "--color-file-pdf", "--color-file-presentation", "--color-file-spreadsheet", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-pixel-ink-1", "--color-pixel-ink-2", "--color-pixel-ink-3", "--color-pixel-ink-4", "--color-pixel-ink-5", "--color-pixel-ink-6", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-icon", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-icon", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-icon", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-icon", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-icon", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-trend-down", "--color-trend-up"], "typography": ["--font-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-body", "--font-family-code", "--font-family-heading", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-line-height-1100", "--font-line-height-400", "--font-line-height-500", "--font-line-height-600", "--font-line-height-700", "--font-line-height-800", "--font-line-height-900", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-weight", "--font-paragraph-emphasis-family", "--font-paragraph-emphasis-letter-spacing", "--font-paragraph-emphasis-line-height", "--font-paragraph-emphasis-size", "--font-paragraph-emphasis-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-emphasis-family", "--font-paragraph-sm-emphasis-letter-spacing", "--font-paragraph-sm-emphasis-line-height", "--font-paragraph-sm-emphasis-size", "--font-paragraph-sm-emphasis-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-size-1000", "--font-size-1200", "--font-size-1400", "--font-size-1600", "--font-size-2400", "--font-size-2900", "--font-size-300", "--font-size-3300", "--font-size-350", "--font-size-400", "--font-size-550", "--font-size-600", "--font-size-650", "--font-size-750", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-050", "--gap-100", "--gap-1000", "--gap-1500", "--gap-200", "--gap-2000", "--gap-300", "--gap-3000", "--gap-400", "--gap-500", "--padding-050", "--padding-100", "--padding-1000", "--padding-150", "--padding-1500", "--padding-200", "--padding-300", "--padding-400", "--padding-500"], "radius": ["--radius-050", "--radius-100", "--radius-1200", "--radius-200", "--radius-300", "--radius-400", "--radius-600", "--radius-pill"], "border": ["--border-025", "--border-050"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-1200", "--icon-size-500", "--icon-size-600", "--icon-size-800"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-instant", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-orbit", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
 const registry = {
   categories
 };

package/tokens/tokens-dark.css

@@ -163,6 +163,15 @@
   --color-chart-series-6: var(--color-core-accent-amber);
   --color-chart-series-7: var(--color-core-accent-cobalt);
 
+  /* Pixel ink - The generated pixel avatar's six inks, high on each ramp
+     so the sprite holds its contrast on a dark page. */
+  --color-pixel-ink-1: var(--primitive-red-05);
+  --color-pixel-ink-2: var(--primitive-orange-05);
+  --color-pixel-ink-3: var(--primitive-yellow-05);
+  --color-pixel-ink-4: var(--primitive-green-05);
+  --color-pixel-ink-5: var(--primitive-blue-04);
+  --color-pixel-ink-6: var(--primitive-purple-05);
+
   /* Input */
   --color-input-text-primary: var(--primitive-neutral-01);
   --color-input-text-placeholder: var(--primitive-neutral-04);

package/tokens/tokens-light.css

@@ -212,6 +212,20 @@
   --color-chart-series-6: var(--color-core-accent-amber);
   --color-chart-series-7: var(--color-core-accent-cobalt);
 
+  /* Pixel ink - The six inks a generated pixel avatar is drawn in, one per
+     chromatic ramp that is not the brand's (a theme re-points the brand
+     ramp, so an ink on it would turn into a second copy of whichever ink
+     the theme's colour resembles). A sprite is small solid shapes on the page, so it
+     wants a text-like contrast rather than a chart fill's: deep on the ramp
+     here, high on it in the dark theme. Yellow and green sit a step deeper
+     than the rest because their ramps stay bright for longer. */
+  --color-pixel-ink-1: var(--primitive-red-08);
+  --color-pixel-ink-2: var(--primitive-orange-08);
+  --color-pixel-ink-3: var(--primitive-yellow-09);
+  --color-pixel-ink-4: var(--primitive-green-09);
+  --color-pixel-ink-5: var(--primitive-blue-07);
+  --color-pixel-ink-6: var(--primitive-purple-08);
+
   /* Input */
   --color-input-text-primary: var(--primitive-neutral-10);
   --color-input-text-placeholder: var(--primitive-neutral-06);

package/tokens/tokens-typography.css

@@ -194,7 +194,7 @@
    RESPONSIVE COLLAPSE
    The display tier steps down once, at 768px — the token layer's only
    breakpoint. Headings and body never step; weights and letter-spacing
-   never change at any breakpoint (weight contrast is the hierarchy rule).
+   never change at any breakpoint.
    ============================================ */
 
 @media (max-width: 768px) {