ionbase-ui 0.38.0 → 0.47.0

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.38.0",
+  "version": "0.47.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.38.0",
+  "version": "0.47.0",
   "usage": "A pattern is a documented composition of components, not a component. Read one here, then read the contracts of what it composes.",
   "patterns": {
     "AgentRun": {

package/dist/styles/alert.css

@@ -100,9 +100,15 @@
   --ion-alert-icon: var(--icon-on-color);
 }
 
+/* Neutral solid is not an accent: its ground is `surface/inverse`, which flips
+ * with the theme, so its foreground must flip too. See the note in avatar.css —
+ * `text/on-color` here was a category error that only rendered correctly while
+ * on-color happened to be the inverse of the inverse surface in both modes. */
 .ion-alert--solid.ion-alert--neutral {
   --ion-alert-surface: var(--surface-inverse);
   --ion-alert-border: var(--border-inverse);
+  --ion-alert-text: var(--text-inverse);
+  --ion-alert-icon: var(--icon-inverse);
 }
 
 .ion-alert--solid.ion-alert--primary {

package/dist/styles/avatar-gradient.css

@@ -38,33 +38,60 @@
   --ion-avatar-gradient-font-weight: var(--font-weight-medium);
 
   /* Slate, which is also the block default — Figma's default variant. */
-  --ion-avatar-gradient-from: var(--color-gray-300);
-  --ion-avatar-gradient-mid: var(--color-gray-200);
-  --ion-avatar-gradient-to: var(--color-gray-50);
+  --ion-avatar-gradient-from: var(--surface-palette-1);
+  --ion-avatar-gradient-mid: var(--surface-palette-1-tint);
+  --ion-avatar-gradient-to: var(--surface-palette-1-subtle);
 
   /*
-   * The initials, from the primitive ramp rather than a semantic text token.
+   * The initials. THIS USED TO READ FROM THE PRIMITIVE RAMP, AND THE COMMENT
+   * HERE DEFENDED IT — correctly, on its own terms: the disc was primitives, so
+   * a semantic foreground would have flipped in the dark theme and left the
+   * background alone. An earlier draft did exactly that and the gate caught it
+   * at 1.05:1. A foreground has to theme exactly as much as the ground under it.
    *
-   * NOT AN OVERSIGHT, AND DO NOT "FIX" IT TO `--text-*`. The disc under this
-   * text is built from primitives, so it does not theme; a semantic foreground
-   * would flip in the dark theme and leave the background alone. An earlier
-   * draft did exactly that and the contrast gate caught it at 1.05:1. A
-   * foreground has to theme exactly as much as the background it sits on.
+   * That argument was right and the conclusion was wrong. It resolved the
+   * mismatch by theming NEITHER, which made the whole component theme-blind:
+   * seven near-white discs (luminance 0.89 to 0.98) rendered unchanged in the
+   * dark theme, because Primitives and Semantics each hold one mode and only
+   * Interface carries a Light/Dark axis. Nothing here was bound to Interface,
+   * so nothing here listened to the theme.
    *
-   * In Figma these are bound to a `palette/1`..`palette/7` collection the token
-   * export does not yet cover. Each one resolves to the primitive named here,
-   * so nothing is lost today — see AGENTS.md.
+   * Both ends now theme together, which is what the original argument actually
+   * asked for. See AGENTS.md for the ladder and the measurements.
    */
-  --ion-avatar-gradient-text: var(--color-gray-600);
+  --ion-avatar-gradient-text: var(--text-palette-1);
 
   /*
    * The sheen: a white radial highlight low and centre, over the linear
    * gradient. Identical in proportion at all four sizes — Figma expresses it as
    * a userSpaceOnUse radial scaled per size, and the ratios come out the same
-   * to three decimals, so it is written once as percentages.
+   * to three decimals, so the geometry is written once as percentages.
+   *
+   * THE ALPHA IS A TOKEN NOW. It was a raw `18%` in both themes, hardcoded
+   * twice, which is a place dark mode has to be fixed by hand — the same reason
+   * the bevel below is a local. `surface/sheen` is 20% in Light and 5% in Dark,
+   * following `surface/scrim` and `surface/hover`: a translucent wash whose
+   * alpha themes.
+   *
+   * THE ACCESSIBILITY ARGUMENT THAT PUT IT AT 5% WAS WRONG, AND THIS COMMENT
+   * USED TO MAKE IT. It claimed the gloss dropped five of seven hues under AA in
+   * Dark — green 3.76, red 3.92, pink 4.08, orange 4.15, blue 4.23. Those
+   * numbers came from compositing the sheen at FULL STRENGTH over the `from`
+   * stop, and that pixel does not exist. `from` is the top of the disc; the
+   * radial is centred at 70.513% of the height with a vertical radius of
+   * 64.103%, so at y=0 it is 1.10 radii out — past its own transparent stop,
+   * contributing nothing. The gloss and the darkest stop never meet.
+   *
+   * The gate evaluates the gradient geometrically as of 5 Sep 2026, and at the
+   * authored 18% the worst REAL point in Dark is 5.07 (green, at 50%,69%, where
+   * the gloss actually peaks and the disc beneath it is already near `to`).
+   * Nothing was ever failing. 5% is an aesthetic choice, not a fix, and it is
+   * only still here because it was reviewed in Figma and preferred.
+   *
+   * The worst point on this component is the bare top of the disc — 5.29 in
+   * Light (pink) and 5.31 in Dark (red), the same two numbers the stop comment
+   * below records, because the sheen never touches it.
    */
-  --ion-avatar-gradient-sheen: 18%;
-  --ion-avatar-gradient-sheen-mid: 3.6%;
 
   /*
    * Bevel. Two inner shadows and no drop shadow — the redesign dropped the
@@ -94,23 +121,39 @@
   color: var(--ion-avatar-gradient-text);
 
   /*
-   * The flat colour under the gradient is the `to` end, and that choice is
-   * load-bearing twice over. It is the fallback if `background-image` never
-   * paints, and it is the palest part of the disc — so it is also the worst
-   * case for the dark initials, which is what makes `verify-contrast` measure
-   * the pairing that actually needs measuring rather than a flattering one.
+   * The flat colour under the gradient is the `to` end. It is the fallback if
+   * `background-image` never paints, and that is the ONLY thing it is.
+   *
+   * THIS COMMENT USED TO CLAIM IT WAS ALSO THE WORST CASE FOR THE INITIALS, AND
+   * THAT WAS BACKWARDS. Dark text on a pale disc is hardest to read against the
+   * DARKEST stop, not the palest — `from`, not `to`. Because `verify-contrast`
+   * can only see a flat `background-color`, it was measuring the most flattering
+   * pairing of the three and calling it the strict one. Six of the seven hues
+   * were failing AA against the `from` stop the whole time — blue 3.42, purple
+   * 3.58, pink 3.27, orange 3.72, green 3.10, red 3.35 — and the build was green.
+   *
+   * The initials sit on `/800` in Light and `/200` in Dark, which mirror each
+   * other about the ramp exactly as the three disc stops do (300/200/50 against
+   * 700/800/900). They used to be `/600`, whose mirror is `/300` — the one rung
+   * in the component that was not mirrored, which is precisely why Light failed
+   * and Dark did not.
    *
-   * It was the `from` end before the redesign, for the same reason read the
-   * other way round: the text was white then, so its worst case was the
-   * lightest stop it sat on. Flip this if the disc is ever inverted again.
+   * THE GATE DOES NOT READ STOPS ANY MORE, IT EVALUATES THE GRADIENT. It began
+   * by reading only a flat `background-color`, which is what let this hide; then
+   * every stop; and as of 5 Sep 2026 it samples the disc, composites the layers
+   * at each point and reports the worst pixel the element actually paints —
+   * 5.29 in Light (pink) and 5.31 in Dark (red), both at 50%,0%, the bare top.
+   * Colours BETWEEN two stops are real pixels and none of them were measured
+   * before. Negative-tested by putting the initials back on `/600`: pink fails
+   * at 3.27 where the old gate passed it.
    */
   background-color: var(--ion-avatar-gradient-to);
   background-image:
     radial-gradient(
       55.556% 64.103% at 50% 70.513%,
-      rgb(255 255 255 / var(--ion-avatar-gradient-sheen)) 0%,
-      rgb(255 255 255 / var(--ion-avatar-gradient-sheen-mid)) 60%,
-      rgb(255 255 255 / 0%) 100%
+      var(--surface-sheen) 0%,
+      var(--surface-sheen-subtle) 60%,
+      transparent 100%
     ),
     linear-gradient(
       180deg,
@@ -169,50 +212,50 @@
 }
 
 .ion-avatar-gradient--slate {
-  --ion-avatar-gradient-from: var(--color-gray-300);
-  --ion-avatar-gradient-mid: var(--color-gray-200);
-  --ion-avatar-gradient-to: var(--color-gray-50);
-  --ion-avatar-gradient-text: var(--color-gray-600);
+  --ion-avatar-gradient-from: var(--surface-palette-1);
+  --ion-avatar-gradient-mid: var(--surface-palette-1-tint);
+  --ion-avatar-gradient-to: var(--surface-palette-1-subtle);
+  --ion-avatar-gradient-text: var(--text-palette-1);
 }
 
 .ion-avatar-gradient--blue {
-  --ion-avatar-gradient-from: var(--color-blue-300);
-  --ion-avatar-gradient-mid: var(--color-blue-200);
-  --ion-avatar-gradient-to: var(--color-blue-50);
-  --ion-avatar-gradient-text: var(--color-blue-600);
+  --ion-avatar-gradient-from: var(--surface-palette-2);
+  --ion-avatar-gradient-mid: var(--surface-palette-2-tint);
+  --ion-avatar-gradient-to: var(--surface-palette-2-subtle);
+  --ion-avatar-gradient-text: var(--text-palette-2);
 }
 
 .ion-avatar-gradient--violet {
-  --ion-avatar-gradient-from: var(--color-purple-300);
-  --ion-avatar-gradient-mid: var(--color-purple-200);
-  --ion-avatar-gradient-to: var(--color-purple-50);
-  --ion-avatar-gradient-text: var(--color-purple-600);
+  --ion-avatar-gradient-from: var(--surface-palette-3);
+  --ion-avatar-gradient-mid: var(--surface-palette-3-tint);
+  --ion-avatar-gradient-to: var(--surface-palette-3-subtle);
+  --ion-avatar-gradient-text: var(--text-palette-3);
 }
 
 .ion-avatar-gradient--pink {
-  --ion-avatar-gradient-from: var(--color-pink-300);
-  --ion-avatar-gradient-mid: var(--color-pink-200);
-  --ion-avatar-gradient-to: var(--color-pink-50);
-  --ion-avatar-gradient-text: var(--color-pink-600);
+  --ion-avatar-gradient-from: var(--surface-palette-4);
+  --ion-avatar-gradient-mid: var(--surface-palette-4-tint);
+  --ion-avatar-gradient-to: var(--surface-palette-4-subtle);
+  --ion-avatar-gradient-text: var(--text-palette-4);
 }
 
 .ion-avatar-gradient--orange {
-  --ion-avatar-gradient-from: var(--color-orange-300);
-  --ion-avatar-gradient-mid: var(--color-orange-200);
-  --ion-avatar-gradient-to: var(--color-orange-50);
-  --ion-avatar-gradient-text: var(--color-orange-600);
+  --ion-avatar-gradient-from: var(--surface-palette-5);
+  --ion-avatar-gradient-mid: var(--surface-palette-5-tint);
+  --ion-avatar-gradient-to: var(--surface-palette-5-subtle);
+  --ion-avatar-gradient-text: var(--text-palette-5);
 }
 
 .ion-avatar-gradient--green {
-  --ion-avatar-gradient-from: var(--color-green-300);
-  --ion-avatar-gradient-mid: var(--color-green-200);
-  --ion-avatar-gradient-to: var(--color-green-50);
-  --ion-avatar-gradient-text: var(--color-green-600);
+  --ion-avatar-gradient-from: var(--surface-palette-6);
+  --ion-avatar-gradient-mid: var(--surface-palette-6-tint);
+  --ion-avatar-gradient-to: var(--surface-palette-6-subtle);
+  --ion-avatar-gradient-text: var(--text-palette-6);
 }
 
 .ion-avatar-gradient--red {
-  --ion-avatar-gradient-from: var(--color-red-300);
-  --ion-avatar-gradient-mid: var(--color-red-200);
-  --ion-avatar-gradient-to: var(--color-red-50);
-  --ion-avatar-gradient-text: var(--color-red-600);
+  --ion-avatar-gradient-from: var(--surface-palette-7);
+  --ion-avatar-gradient-mid: var(--surface-palette-7-tint);
+  --ion-avatar-gradient-to: var(--surface-palette-7-subtle);
+  --ion-avatar-gradient-text: var(--text-palette-7);
 }

package/dist/styles/avatar.css

@@ -232,7 +232,6 @@
  * find on a different element resolves to the block's `--text-tertiary` and
  * measures a pairing that never renders.
  */
-.ion-avatar__indicator--neutral,
 .ion-avatar__indicator--primary,
 .ion-avatar__indicator--success,
 .ion-avatar__indicator--warning,
@@ -241,8 +240,15 @@
   color: var(--text-on-color);
 }
 
+/* Neutral is the odd one out: its ground is `surface/inverse`, a neutral that
+ * flips with the theme, not an accent. So its foreground has to flip with it —
+ * `text/inverse`, not `text/on-color`. Binding on-color here worked only by
+ * coincidence, while on-color happened to be the exact inverse of the inverse
+ * surface in both modes; the moment on-color settled on white for both, this
+ * pairing measured 1:1 and the indicator vanished. */
 .ion-avatar__indicator--neutral {
   background-color: var(--surface-inverse);
+  color: var(--text-inverse);
 }
 
 .ion-avatar__indicator--primary {

package/dist/styles/button.css

@@ -297,7 +297,12 @@
   --ion-button-pressed: var(--ion-shadow-inset-flush-lg);
 
   background-color: var(--surface-inverse);
-  color: var(--text-on-color);
+
+  /* `text/inverse`, not `text/on-color`. This type's ground is the inverse
+   * neutral, which flips with the theme; on-color is for accent grounds. The
+   * two coincided until on-color settled on white for both modes, at which
+   * point this button was white on white. */
+  color: var(--text-inverse);
   border-color: var(--border-inverse);
 }
 

package/dist/styles/tokens/base.css

@@ -19,8 +19,8 @@
   --color-purple-100: #f1e8fd;
   --color-purple-200: #dfd4fc;
   --color-purple-300: #adadf5;
-  --color-purple-400: #7e6ff1;
-  --color-purple-500: #5a4cd6;
+  --color-purple-400: #9a8ff4;
+  --color-purple-500: #786cdd;
   --color-purple-600: #4f3cc8;
   --color-purple-700: #4715b2;
   --color-purple-800: #350e8b;
@@ -35,7 +35,7 @@
   --color-red-700: #ad1515;
   --color-red-800: #850e0e;
   --color-red-900: #650a0a;
-  --color-orange-50: #fff4e5;
+  --color-orange-50: #fff6ea;
   --color-orange-100: #ffeed6;
   --color-orange-200: #fedbb4;
   --color-orange-300: #fdc17c;
@@ -184,7 +184,7 @@
   --success-700: #076426;
   --success-800: #054d1a;
   --success-900: #023c13;
-  --warning-50: #fff4e5;
+  --warning-50: #fff6ea;
   --warning-100: #ffeed6;
   --warning-200: #fedbb4;
   --warning-300: #fdc17c;
@@ -208,15 +208,15 @@
   --information-100: #f1e8fd;
   --information-200: #dfd4fc;
   --information-300: #adadf5;
-  --information-400: #7e6ff1;
-  --information-500: #5a4cd6;
+  --information-400: #9a8ff4;
+  --information-500: #786cdd;
   --information-600: #4f3cc8;
   --information-700: #4715b2;
   --information-800: #350e8b;
   --information-900: #260769;
   --chart-1: #286ef0;
   --chart-2: #14994e;
-  --chart-3: #5a4cd6;
+  --chart-3: #4f3cc8;
   --chart-4: #ea5600;
   --chart-5: #df2679;
   --chart-6: #a97a14;
@@ -253,13 +253,55 @@
   --icon-size-md: 20px;
   --icon-size-lg: 24px;
   --icon-size-xl: 32px;
-  --palette-1: #4b5563;
-  --palette-2: #1c62e3;
-  --palette-3: #4f3cc8;
-  --palette-4: #c3135c;
-  --palette-5: #af3e0e;
-  --palette-6: #0d7d38;
-  --palette-7: #c61616;
+  --palette-1-50: #f6f8f9;
+  --palette-1-200: #e5e7eb;
+  --palette-1-300: #dde0e4;
+  --palette-1-600: #4b5563;
+  --palette-1-700: #384252;
+  --palette-1-800: #1d2735;
+  --palette-1-900: #131923;
+  --palette-2-50: #ebf7ff;
+  --palette-2-200: #c7e4fa;
+  --palette-2-300: #9fd5f9;
+  --palette-2-600: #1c62e3;
+  --palette-2-700: #1541b2;
+  --palette-2-800: #0e2d8b;
+  --palette-2-900: #071e69;
+  --palette-3-50: #f6f1f8;
+  --palette-3-200: #dfd4fc;
+  --palette-3-300: #adadf5;
+  --palette-3-600: #4f3cc8;
+  --palette-3-700: #4715b2;
+  --palette-3-800: #350e8b;
+  --palette-3-900: #260769;
+  --palette-4-50: #fdf2f8;
+  --palette-4-200: #fbd0e8;
+  --palette-4-300: #f9a9d5;
+  --palette-4-600: #c3135c;
+  --palette-4-700: #a0134b;
+  --palette-4-800: #881141;
+  --palette-4-900: #5a0427;
+  --palette-5-50: #fff6ea;
+  --palette-5-200: #fedbb4;
+  --palette-5-300: #fdc17c;
+  --palette-5-600: #af3e0e;
+  --palette-5-700: #8e2f07;
+  --palette-5-800: #671f07;
+  --palette-5-900: #401604;
+  --palette-6-50: #f8fefc;
+  --palette-6-200: #c6ebdc;
+  --palette-6-300: #82d8b4;
+  --palette-6-600: #0d7d38;
+  --palette-6-700: #076426;
+  --palette-6-800: #054d1a;
+  --palette-6-900: #023c13;
+  --palette-7-50: #fef1f1;
+  --palette-7-200: #fed2d2;
+  --palette-7-300: #ffadad;
+  --palette-7-600: #c61616;
+  --palette-7-700: #ad1515;
+  --palette-7-800: #850e0e;
+  --palette-7-900: #650a0a;
   --text-default: #131923;
   --text-secondary: #384252;
   --text-tertiary: #4b5563;
@@ -277,6 +319,13 @@
   --text-link-visited: #4715b2;
   --text-interactive: #384252;
   --text-interactive-hover: #131923;
+  --text-palette-1: #1d2735;
+  --text-palette-2: #0e2d8b;
+  --text-palette-3: #350e8b;
+  --text-palette-4: #881141;
+  --text-palette-5: #671f07;
+  --text-palette-6: #054d1a;
+  --text-palette-7: #850e0e;
   --icon-default: #1d2735;
   --icon-secondary: #384252;
   --icon-tertiary: #4b5563;
@@ -328,7 +377,7 @@
   --surface-warning: #af3e0e;
   --surface-warning-hover: #8e2f07;
   --surface-warning-pressed: #671f07;
-  --surface-warning-subtle: #fff4e5;
+  --surface-warning-subtle: #fff6ea;
   --surface-warning-subtle-hover: #ffeed6;
   --surface-warning-tint: #ffeed6;
   --surface-information: #4f3cc8;
@@ -337,6 +386,29 @@
   --surface-information-subtle: #f6f1f8;
   --surface-information-subtle-hover: #f1e8fd;
   --surface-information-tint: #f1e8fd;
+  --surface-palette-1: #dde0e4;
+  --surface-palette-1-tint: #e5e7eb;
+  --surface-palette-1-subtle: #f6f8f9;
+  --surface-palette-2: #9fd5f9;
+  --surface-palette-2-tint: #c7e4fa;
+  --surface-palette-2-subtle: #ebf7ff;
+  --surface-palette-3: #adadf5;
+  --surface-palette-3-tint: #dfd4fc;
+  --surface-palette-3-subtle: #f6f1f8;
+  --surface-palette-4: #f9a9d5;
+  --surface-palette-4-tint: #fbd0e8;
+  --surface-palette-4-subtle: #fdf2f8;
+  --surface-palette-5: #fdc17c;
+  --surface-palette-5-tint: #fedbb4;
+  --surface-palette-5-subtle: #fff6ea;
+  --surface-palette-6: #82d8b4;
+  --surface-palette-6-tint: #c6ebdc;
+  --surface-palette-6-subtle: #f8fefc;
+  --surface-palette-7: #ffadad;
+  --surface-palette-7-tint: #fed2d2;
+  --surface-palette-7-subtle: #fef1f1;
+  --surface-sheen: rgba(255, 255, 255, 0.2);
+  --surface-sheen-subtle: rgba(255, 255, 255, 0.05);
   --border-subtle: #f0f2f4;
   --border-default: #e5e7eb;
   --border-strong: #dde0e4;
@@ -356,7 +428,7 @@
   --border-warning: #ea5600;
   --border-warning-strong: #8e2f07;
   --border-warning-subtle: #fedbb4;
-  --border-information: #5a4cd6;
+  --border-information: #786cdd;
   --border-information-strong: #4715b2;
   --border-information-subtle: #dfd4fc;
   --border-focus: #286ef0;

package/dist/styles/tokens/theme-dark.css

@@ -7,18 +7,24 @@
   --text-secondary: #dde0e4;
   --text-tertiary: #9ca3b0;
   --text-placeholder: #4b5563;
-  --text-on-color: #000000;
   --text-inverse: #131923;
-  --text-primary: #609cf0;
+  --text-primary: #9fd5f9;
   --text-error: #ffadad;
-  --text-success: #39b378;
-  --text-warning: #ef8539;
+  --text-success: #82d8b4;
+  --text-warning: #fdc17c;
   --text-information: #adadf5;
-  --text-link: #609cf0;
-  --text-link-hover: #9fd5f9;
-  --text-link-visited: #7e6ff1;
+  --text-link: #9fd5f9;
+  --text-link-hover: #c7e4fa;
+  --text-link-visited: #9a8ff4;
   --text-interactive: #dde0e4;
   --text-interactive-hover: #f6f8f9;
+  --text-palette-1: #e5e7eb;
+  --text-palette-2: #c7e4fa;
+  --text-palette-3: #dfd4fc;
+  --text-palette-4: #fbd0e8;
+  --text-palette-5: #fedbb4;
+  --text-palette-6: #c6ebdc;
+  --text-palette-7: #fed2d2;
   --icon-default: #f0f2f4;
   --icon-secondary: #dde0e4;
   --icon-tertiary: #9ca3b0;
@@ -28,7 +34,7 @@
   --icon-error: #f56b6b;
   --icon-success: #39b378;
   --icon-warning: #ef8539;
-  --icon-information: #7e6ff1;
+  --icon-information: #9a8ff4;
   --icon-interactive: #dde0e4;
   --icon-interactive-hover: #f6f8f9;
   --surface-default: #000000;
@@ -47,36 +53,43 @@
   --surface-pressed: rgba(255, 255, 255, 0.1);
   --surface-selected: #071e69;
   --surface-selected-hover: #0e2d8b;
-  --surface-primary: #286ef0;
-  --surface-primary-hover: #609cf0;
-  --surface-primary-pressed: #9fd5f9;
   --surface-primary-subtle: #071e69;
   --surface-primary-subtle-hover: #0e2d8b;
   --surface-primary-tint: #0e2d8b;
-  --surface-error: #eb3737;
-  --surface-error-hover: #f56b6b;
-  --surface-error-pressed: #ffadad;
   --surface-error-subtle: #650a0a;
   --surface-error-subtle-hover: #850e0e;
   --surface-error-tint: #850e0e;
-  --surface-success: #14994e;
-  --surface-success-hover: #39b378;
-  --surface-success-pressed: #82d8b4;
   --surface-success-subtle: #023c13;
   --surface-success-subtle-hover: #054d1a;
   --surface-success-tint: #054d1a;
-  --surface-warning: #ea5600;
-  --surface-warning-hover: #ef8539;
-  --surface-warning-pressed: #fdc17c;
   --surface-warning-subtle: #401604;
   --surface-warning-subtle-hover: #671f07;
   --surface-warning-tint: #671f07;
-  --surface-information: #5a4cd6;
-  --surface-information-hover: #7e6ff1;
-  --surface-information-pressed: #adadf5;
   --surface-information-subtle: #260769;
   --surface-information-subtle-hover: #350e8b;
   --surface-information-tint: #350e8b;
+  --surface-palette-1: #384252;
+  --surface-palette-1-tint: #1d2735;
+  --surface-palette-1-subtle: #131923;
+  --surface-palette-2: #1541b2;
+  --surface-palette-2-tint: #0e2d8b;
+  --surface-palette-2-subtle: #071e69;
+  --surface-palette-3: #4715b2;
+  --surface-palette-3-tint: #350e8b;
+  --surface-palette-3-subtle: #260769;
+  --surface-palette-4: #a0134b;
+  --surface-palette-4-tint: #881141;
+  --surface-palette-4-subtle: #5a0427;
+  --surface-palette-5: #8e2f07;
+  --surface-palette-5-tint: #671f07;
+  --surface-palette-5-subtle: #401604;
+  --surface-palette-6: #076426;
+  --surface-palette-6-tint: #054d1a;
+  --surface-palette-6-subtle: #023c13;
+  --surface-palette-7: #ad1515;
+  --surface-palette-7-tint: #850e0e;
+  --surface-palette-7-subtle: #650a0a;
+  --surface-sheen: rgba(255, 255, 255, 0.05);
   --border-subtle: #1d2735;
   --border-default: #384252;
   --border-strong: #4b5563;
@@ -85,19 +98,19 @@
   --border-disabled: #384252;
   --border-transparent: rgba(255, 255, 255, 0.05);
   --border-primary: #609cf0;
-  --border-primary-strong: #1c62e3;
+  --border-primary-strong: #286ef0;
   --border-primary-subtle: #0e2d8b;
   --border-error: #f56b6b;
-  --border-error-strong: #c61616;
+  --border-error-strong: #eb3737;
   --border-error-subtle: #850e0e;
   --border-success: #39b378;
-  --border-success-strong: #0d7d38;
+  --border-success-strong: #14994e;
   --border-success-subtle: #054d1a;
   --border-warning: #ef8539;
-  --border-warning-strong: #af3e0e;
+  --border-warning-strong: #ea5600;
   --border-warning-subtle: #671f07;
-  --border-information: #7e6ff1;
-  --border-information-strong: #4f3cc8;
+  --border-information: #9a8ff4;
+  --border-information-strong: #786cdd;
   --border-information-subtle: #350e8b;
   --border-focus: #609cf0;
   --border-focus-error: #f56b6b;