fix: preserve design token references in generated CSS by ggdouglas · Pull Request #8288 · palantir/blueprint

ggdouglas · 2026-10-02T14:59:33Z

Summary

Currently, Blueprint’s generated CSS repeats resolved color values instead of preserving the relationships defined by the token source. For example, both --bp-palette-blue-3 and --bp-intent-primary-rest contain #2d72d2, even though the intent token is defined as an alias of the palette token.

This change preserves those relationships by emitting ordinary aliases as CSS var() references. This keeps the generated CSS aligned with the token source and allows palette overrides to flow through the intent and semantic tokens that depend on them. Colors derived using relative color syntax still retain literal fallbacks for older browsers.

Generated CSS

Before:

--bp-emphasis-focus-color: #2d72d2;
--bp-intent-primary-rest: #2d72d2;
--bp-palette-blue-3: #2d72d2;
--bp-surface-layer-color-primary: #2d72d20d;
--bp-surface-layer-primary: linear-gradient(#2d72d20d 0 0);
--bp-surface-background-color-primary-rest: #2d72d2;
--bp-typography-color-primary-rest: #2d72d2;

After:

--bp-palette-blue-3: #2d72d2;
--bp-intent-primary-rest: var(--bp-palette-blue-3);
--bp-surface-layer-color-primary: #2d72d20d;
--bp-surface-layer-primary: linear-gradient(var(--bp-surface-layer-color-primary) 0 0);
--bp-surface-background-color-primary-rest: var(--bp-intent-primary-rest);
--bp-typography-color-primary-rest: var(--bp-intent-primary-rest);
--bp-emphasis-focus-color: var(--bp-intent-primary-rest);

Value-only diff (declaration order omitted)

-  --bp-emphasis-focus-color: #2d72d2;
+  --bp-emphasis-focus-color: var(--bp-intent-primary-rest);
-  --bp-intent-default-rest: #5f6b7c;
+  --bp-intent-default-rest: var(--bp-palette-gray-1);
-  --bp-intent-default-hover: #404854;
+  --bp-intent-default-hover: var(--bp-palette-dark-gray-5);
-  --bp-intent-default-active: #383e47;
+  --bp-intent-default-active: var(--bp-palette-dark-gray-4);
-  --bp-intent-default-disabled: #8f99a8;
+  --bp-intent-default-disabled: var(--bp-palette-gray-3);
-  --bp-intent-default-foreground: #ffffff;
+  --bp-intent-default-foreground: var(--bp-palette-white);
-  --bp-intent-primary-rest: #2d72d2;
+  --bp-intent-primary-rest: var(--bp-palette-blue-3);
-  --bp-intent-primary-hover: #215db0;
+  --bp-intent-primary-hover: var(--bp-palette-blue-2);
-  --bp-intent-primary-active: #184a90;
+  --bp-intent-primary-active: var(--bp-palette-blue-1);
-  --bp-intent-primary-disabled: #4c90f0;
+  --bp-intent-primary-disabled: var(--bp-palette-blue-4);
-  --bp-intent-primary-foreground: #ffffff;
+  --bp-intent-primary-foreground: var(--bp-palette-white);
-  --bp-intent-success-rest: #238551;
+  --bp-intent-success-rest: var(--bp-palette-green-3);
-  --bp-intent-success-hover: #1c6e42;
+  --bp-intent-success-hover: var(--bp-palette-green-2);
-  --bp-intent-success-active: #165a36;
+  --bp-intent-success-active: var(--bp-palette-green-1);
-  --bp-intent-success-disabled: #32a467;
+  --bp-intent-success-disabled: var(--bp-palette-green-4);
-  --bp-intent-success-foreground: #ffffff;
+  --bp-intent-success-foreground: var(--bp-palette-white);
-  --bp-intent-warning-rest: #c87619;
+  --bp-intent-warning-rest: var(--bp-palette-orange-3);
-  --bp-intent-warning-hover: #935610;
+  --bp-intent-warning-hover: var(--bp-palette-orange-2);
-  --bp-intent-warning-active: #77450d;
+  --bp-intent-warning-active: var(--bp-palette-orange-1);
-  --bp-intent-warning-disabled: #ec9a3c;
+  --bp-intent-warning-disabled: var(--bp-palette-orange-4);
-  --bp-intent-warning-foreground: #111418;
+  --bp-intent-warning-foreground: var(--bp-palette-black);
-  --bp-intent-danger-rest: #cd4246;
+  --bp-intent-danger-rest: var(--bp-palette-red-3);
-  --bp-intent-danger-hover: #ac2f33;
+  --bp-intent-danger-hover: var(--bp-palette-red-2);
-  --bp-intent-danger-active: #8e292c;
+  --bp-intent-danger-active: var(--bp-palette-red-1);
-  --bp-intent-danger-disabled: #e76a6e;
+  --bp-intent-danger-disabled: var(--bp-palette-red-4);
-  --bp-intent-danger-foreground: #ffffff;
+  --bp-intent-danger-foreground: var(--bp-palette-white);
-  --bp-surface-layer-default: linear-gradient(#5f6b7c0d 0 0);
+  --bp-surface-layer-default: linear-gradient(var(--bp-surface-layer-color-default) 0 0);
-  --bp-surface-layer-primary: linear-gradient(#2d72d20d 0 0);
+  --bp-surface-layer-primary: linear-gradient(var(--bp-surface-layer-color-primary) 0 0);
-  --bp-surface-layer-success: linear-gradient(#2385510d 0 0);
+  --bp-surface-layer-success: linear-gradient(var(--bp-surface-layer-color-success) 0 0);
-  --bp-surface-layer-warning: linear-gradient(#c876190d 0 0);
+  --bp-surface-layer-warning: linear-gradient(var(--bp-surface-layer-color-warning) 0 0);
-  --bp-surface-layer-danger: linear-gradient(#cd42460d 0 0);
+  --bp-surface-layer-danger: linear-gradient(var(--bp-surface-layer-color-danger) 0 0);
-  --bp-surface-background-color-primary-rest: #2d72d2;
+  --bp-surface-background-color-primary-rest: var(--bp-intent-primary-rest);
-  --bp-surface-background-color-primary-hover: #215db0;
+  --bp-surface-background-color-primary-hover: var(--bp-intent-primary-hover);
-  --bp-surface-background-color-primary-active: #184a90;
+  --bp-surface-background-color-primary-active: var(--bp-intent-primary-active);
-  --bp-surface-background-color-primary-disabled: #4c90f0;
+  --bp-surface-background-color-primary-disabled: var(--bp-intent-primary-disabled);
-  --bp-surface-background-color-success-rest: #238551;
+  --bp-surface-background-color-success-rest: var(--bp-intent-success-rest);
-  --bp-surface-background-color-success-hover: #1c6e42;
+  --bp-surface-background-color-success-hover: var(--bp-intent-success-hover);
-  --bp-surface-background-color-success-active: #165a36;
+  --bp-surface-background-color-success-active: var(--bp-intent-success-active);
-  --bp-surface-background-color-success-disabled: #32a467;
+  --bp-surface-background-color-success-disabled: var(--bp-intent-success-disabled);
-  --bp-surface-background-color-warning-rest: #c87619;
+  --bp-surface-background-color-warning-rest: var(--bp-intent-warning-rest);
-  --bp-surface-background-color-warning-hover: #935610;
+  --bp-surface-background-color-warning-hover: var(--bp-intent-warning-hover);
-  --bp-surface-background-color-warning-active: #77450d;
+  --bp-surface-background-color-warning-active: var(--bp-intent-warning-active);
-  --bp-surface-background-color-warning-disabled: #ec9a3c;
+  --bp-surface-background-color-warning-disabled: var(--bp-intent-warning-disabled);
-  --bp-surface-background-color-danger-rest: #cd4246;
+  --bp-surface-background-color-danger-rest: var(--bp-intent-danger-rest);
-  --bp-surface-background-color-danger-hover: #ac2f33;
+  --bp-surface-background-color-danger-hover: var(--bp-intent-danger-hover);
-  --bp-surface-background-color-danger-active: #8e292c;
+  --bp-surface-background-color-danger-active: var(--bp-intent-danger-active);
-  --bp-surface-background-color-danger-disabled: #e76a6e;
+  --bp-surface-background-color-danger-disabled: var(--bp-intent-danger-disabled);
-  --bp-typography-color-muted: #5f6b7c;
+  --bp-typography-color-muted: var(--bp-intent-default-rest);
-  --bp-typography-color-default-disabled: #8f99a8;
+  --bp-typography-color-default-disabled: var(--bp-intent-default-disabled);
-  --bp-typography-color-primary-rest: #2d72d2;
+  --bp-typography-color-primary-rest: var(--bp-intent-primary-rest);
-  --bp-typography-color-primary-hover: #215db0;
+  --bp-typography-color-primary-hover: var(--bp-intent-primary-hover);
-  --bp-typography-color-primary-active: #184a90;
+  --bp-typography-color-primary-active: var(--bp-intent-primary-active);
-  --bp-typography-color-primary-disabled: #4c90f0;
+  --bp-typography-color-primary-disabled: var(--bp-intent-primary-disabled);
-  --bp-typography-color-success-rest: #238551;
+  --bp-typography-color-success-rest: var(--bp-intent-success-rest);
-  --bp-typography-color-success-hover: #1c6e42;
+  --bp-typography-color-success-hover: var(--bp-intent-success-hover);
-  --bp-typography-color-success-active: #165a36;
+  --bp-typography-color-success-active: var(--bp-intent-success-active);
-  --bp-typography-color-success-disabled: #32a467;
+  --bp-typography-color-success-disabled: var(--bp-intent-success-disabled);
-  --bp-typography-color-warning-rest: #c87619;
+  --bp-typography-color-warning-rest: var(--bp-intent-warning-rest);
-  --bp-typography-color-warning-hover: #935610;
+  --bp-typography-color-warning-hover: var(--bp-intent-warning-hover);
-  --bp-typography-color-warning-active: #77450d;
+  --bp-typography-color-warning-active: var(--bp-intent-warning-active);
-  --bp-typography-color-warning-disabled: #ec9a3c;
+  --bp-typography-color-warning-disabled: var(--bp-intent-warning-disabled);
-  --bp-typography-color-danger-rest: #cd4246;
+  --bp-typography-color-danger-rest: var(--bp-intent-danger-rest);
-  --bp-typography-color-danger-hover: #ac2f33;
+  --bp-typography-color-danger-hover: var(--bp-intent-danger-hover);
-  --bp-typography-color-danger-active: #8e292c;
+  --bp-typography-color-danger-active: var(--bp-intent-danger-active);
-  --bp-typography-color-danger-disabled: #e76a6e;
+  --bp-typography-color-danger-disabled: var(--bp-intent-danger-disabled);

--bp-surface-layer-color-primary deliberately stays literal because it applies opacity to another token and older browsers need the fallback. --bp-surface-layer-primary can reference it directly; browsers that support relative colors will pick up the relative-color value.

Full compiled CSS

The compiled design-token stylesheet is not checked in, so the full output is included below.

Before

@charset "UTF-8";
/*
** Copyright 2026-present Palantir Technologies, Inc. All rights reserved.
** Licensed under the Apache License, Version 2.0.
*/
/**
 * Do not edit directly, this file was auto-generated.
 */
:root {
  --bp-emphasis-transition-duration: 100ms;
  --bp-emphasis-ease-default: cubic-bezier(0.4, 1, 0.75, 0.9);
  --bp-emphasis-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11);
  --bp-emphasis-focus-color: #2d72d2;
  --bp-emphasis-focus-width: 2px;
  --bp-emphasis-focus-offset: 2px;
  --bp-emphasis-motion-reduced: 0; /** 0 = motion allowed, 1 = reduced motion */
  --bp-intent-default-rest: #5f6b7c;
  --bp-intent-default-hover: #404854;
  --bp-intent-default-active: #383e47;
  --bp-intent-default-disabled: #8f99a8;
  --bp-intent-default-foreground: #ffffff;
  --bp-intent-primary-rest: #2d72d2;
  --bp-intent-primary-hover: #215db0;
  --bp-intent-primary-active: #184a90;
  --bp-intent-primary-disabled: #4c90f0;
  --bp-intent-primary-foreground: #ffffff;
  --bp-intent-success-rest: #238551;
  --bp-intent-success-hover: #1c6e42;
  --bp-intent-success-active: #165a36;
  --bp-intent-success-disabled: #32a467;
  --bp-intent-success-foreground: #ffffff;
  --bp-intent-warning-rest: #c87619;
  --bp-intent-warning-hover: #935610;
  --bp-intent-warning-active: #77450d;
  --bp-intent-warning-disabled: #ec9a3c;
  --bp-intent-warning-foreground: #111418;
  --bp-intent-danger-rest: #cd4246;
  --bp-intent-danger-hover: #ac2f33;
  --bp-intent-danger-active: #8e292c;
  --bp-intent-danger-disabled: #e76a6e;
  --bp-intent-danger-foreground: #ffffff;
  --bp-palette-black: #111418;
  --bp-palette-white: #ffffff;
  --bp-palette-dark-gray-1: #1c2127;
  --bp-palette-dark-gray-2: #252a31;
  --bp-palette-dark-gray-3: #2f343c;
  --bp-palette-dark-gray-4: #383e47;
  --bp-palette-dark-gray-5: #404854;
  --bp-palette-gray-1: #5f6b7c;
  --bp-palette-gray-2: #738091;
  --bp-palette-gray-3: #8f99a8;
  --bp-palette-gray-4: #abb3bf;
  --bp-palette-gray-5: #c5cbd3;
  --bp-palette-light-gray-1: #d3d8de;
  --bp-palette-light-gray-2: #dce0e5;
  --bp-palette-light-gray-3: #e5e8eb;
  --bp-palette-light-gray-4: #edeff2;
  --bp-palette-light-gray-5: #f6f7f9;
  --bp-palette-blue-1: #184a90;
  --bp-palette-blue-2: #215db0;
  --bp-palette-blue-3: #2d72d2;
  --bp-palette-blue-4: #4c90f0;
  --bp-palette-blue-5: #8abbff;
  --bp-palette-green-1: #165a36;
  --bp-palette-green-2: #1c6e42;
  --bp-palette-green-3: #238551;
  --bp-palette-green-4: #32a467;
  --bp-palette-green-5: #72ca9b;
  --bp-palette-orange-1: #77450d;
  --bp-palette-orange-2: #935610;
  --bp-palette-orange-3: #c87619;
  --bp-palette-orange-4: #ec9a3c;
  --bp-palette-orange-5: #fbb360;
  --bp-palette-red-1: #8e292c;
  --bp-palette-red-2: #ac2f33;
  --bp-palette-red-3: #cd4246;
  --bp-palette-red-4: #e76a6e;
  --bp-palette-red-5: #fa999c;
  --bp-palette-vermilion-1: #96290d;
  --bp-palette-vermilion-2: #b83211;
  --bp-palette-vermilion-3: #d33d17;
  --bp-palette-vermilion-4: #eb6847;
  --bp-palette-vermilion-5: #ff9980;
  --bp-palette-rose-1: #a82255;
  --bp-palette-rose-2: #c22762;
  --bp-palette-rose-3: #db2c6f;
  --bp-palette-rose-4: #f5498b;
  --bp-palette-rose-5: #ff66a1;
  --bp-palette-violet-1: #5c255c;
  --bp-palette-violet-2: #7c327c;
  --bp-palette-violet-3: #9d3f9d;
  --bp-palette-violet-4: #bd6bbd;
  --bp-palette-violet-5: #d69fd6;
  --bp-palette-indigo-1: #5642a6;
  --bp-palette-indigo-2: #634dbf;
  --bp-palette-indigo-3: #7961db;
  --bp-palette-indigo-4: #9881f3;
  --bp-palette-indigo-5: #bdadff;
  --bp-palette-cerulean-1: #0c5174;
  --bp-palette-cerulean-2: #0f6894;
  --bp-palette-cerulean-3: #147eb3;
  --bp-palette-cerulean-4: #3fa6da;
  --bp-palette-cerulean-5: #68c1ee;
  --bp-palette-turquoise-1: #004d46;
  --bp-palette-turquoise-2: #007067;
  --bp-palette-turquoise-3: #00a396;
  --bp-palette-turquoise-4: #13c9ba;
  --bp-palette-turquoise-5: #7ae1d8;
  --bp-palette-forest-1: #1d7324;
  --bp-palette-forest-2: #238c2c;
  --bp-palette-forest-3: #29a634;
  --bp-palette-forest-4: #43bf4d;
  --bp-palette-forest-5: #62d96b;
  --bp-palette-lime-1: #43501b;
  --bp-palette-lime-2: #5a701a;
  --bp-palette-lime-3: #8eb125;
  --bp-palette-lime-4: #b6d94c;
  --bp-palette-lime-5: #d4f17e;
  --bp-palette-gold-1: #5c4405;
  --bp-palette-gold-2: #866103;
  --bp-palette-gold-3: #d1980b;
  --bp-palette-gold-4: #f0b726;
  --bp-palette-gold-5: #fbd065;
  --bp-palette-sepia-1: #5e4123;
  --bp-palette-sepia-2: #7a542e;
  --bp-palette-sepia-3: #946638;
  --bp-palette-sepia-4: #af855a;
  --bp-palette-sepia-5: #d0b090;
  --bp-surface-border-color-default: #5f6b7c1f;
  --bp-surface-border-color-strong: #5f6b7c40;
  --bp-surface-border-width: 1px;
  --bp-surface-border-radius: 4px;
  --bp-surface-shadow-0: 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(0, 0, 0, 0.02); /** Level 0 - border only, 0 0 0 1px rgba(black, 15%), 0 0 5px 0 rgba(0,0,0, 2%) */
  --bp-surface-shadow-1: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1); /** Level 1 - subtle elevation */
  --bp-surface-shadow-2: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); /** Level 2 - standard elevation */
  --bp-surface-shadow-3: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); /** Level 3 - popover/dialog elevation */
  --bp-surface-shadow-4: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.3); /** Level 4 - maximum elevation */
  --bp-surface-spacing: 4px; /** Base spacing unit — components multiply this */
  --bp-surface-z-index-0: 0;
  --bp-surface-z-index-1: 10;
  --bp-surface-z-index-2: 20;
  --bp-surface-z-index-3: 30;
  --bp-surface-z-index-4: 40;
  --bp-surface-color-code: #ffffffb3;
  --bp-surface-layer-opacity: 0.05; /** Shared opacity for surface layers */
  --bp-surface-layer-color-default: #5f6b7c0d;
  --bp-surface-layer-color-primary: #2d72d20d;
  --bp-surface-layer-color-success: #2385510d;
  --bp-surface-layer-color-warning: #c876190d;
  --bp-surface-layer-color-danger: #cd42460d;
  --bp-surface-layer-default: linear-gradient(#5f6b7c0d 0 0);
  --bp-surface-layer-primary: linear-gradient(#2d72d20d 0 0);
  --bp-surface-layer-success: linear-gradient(#2385510d 0 0);
  --bp-surface-layer-warning: linear-gradient(#c876190d 0 0);
  --bp-surface-layer-danger: linear-gradient(#cd42460d 0 0);
  --bp-surface-background-color-default-rest: #ffffff;
  --bp-surface-background-color-default-hover: #f6f7f9;
  --bp-surface-background-color-default-active: #edeff2;
  --bp-surface-background-color-default-disabled: #ffffff;
  --bp-surface-background-color-primary-rest: #2d72d2;
  --bp-surface-background-color-primary-hover: #215db0;
  --bp-surface-background-color-primary-active: #184a90;
  --bp-surface-background-color-primary-disabled: #4c90f0;
  --bp-surface-background-color-success-rest: #238551;
  --bp-surface-background-color-success-hover: #1c6e42;
  --bp-surface-background-color-success-active: #165a36;
  --bp-surface-background-color-success-disabled: #32a467;
  --bp-surface-background-color-warning-rest: #c87619;
  --bp-surface-background-color-warning-hover: #935610;
  --bp-surface-background-color-warning-active: #77450d;
  --bp-surface-background-color-warning-disabled: #ec9a3c;
  --bp-surface-background-color-danger-rest: #cd4246;
  --bp-surface-background-color-danger-hover: #ac2f33;
  --bp-surface-background-color-danger-active: #8e292c;
  --bp-surface-background-color-danger-disabled: #e76a6e;
  --bp-typography-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", blueprint-icons-16, sans-serif;
  --bp-typography-family-mono: monospace;
  --bp-typography-size-body-x-small: 10px;
  --bp-typography-size-body-small: 12px;
  --bp-typography-size-body-medium: 14px;
  --bp-typography-size-body-large: 16px;
  --bp-typography-size-heading-small: 16px;
  --bp-typography-size-heading-medium: 20px;
  --bp-typography-size-heading-large: 24px;
  --bp-typography-size-heading-x-large: 28px;
  --bp-typography-size-heading-display: 46px;
  --bp-typography-size-code-small: 12px;
  --bp-typography-size-code-medium: 13px;
  --bp-typography-size-code-large: 14px;
  --bp-typography-weight-default: 400;
  --bp-typography-weight-bold: 600;
  --bp-typography-line-height-default: 1.28581;
  --bp-typography-line-height-large: 1.5;
  --bp-typography-color-muted: #5f6b7c;
  --bp-typography-color-default-rest: #1c2127;
  --bp-typography-color-default-hover: #111418;
  --bp-typography-color-default-active: #252a31;
  --bp-typography-color-default-disabled: #8f99a8;
  --bp-typography-color-primary-rest: #2d72d2;
  --bp-typography-color-primary-hover: #215db0;
  --bp-typography-color-primary-active: #184a90;
  --bp-typography-color-primary-disabled: #4c90f0;
  --bp-typography-color-success-rest: #238551;
  --bp-typography-color-success-hover: #1c6e42;
  --bp-typography-color-success-active: #165a36;
  --bp-typography-color-success-disabled: #32a467;
  --bp-typography-color-warning-rest: #c87619;
  --bp-typography-color-warning-hover: #935610;
  --bp-typography-color-warning-active: #77450d;
  --bp-typography-color-warning-disabled: #ec9a3c;
  --bp-typography-color-danger-rest: #cd4246;
  --bp-typography-color-danger-hover: #ac2f33;
  --bp-typography-color-danger-active: #8e292c;
  --bp-typography-color-danger-disabled: #e76a6e;
}

@supports (color: oklch(from var(--any-color) l c h)) {
  :root {
    --bp-surface-border-color-default: oklch(from var(--bp-intent-default-rest) l c h / 0.12);
    --bp-surface-border-color-strong: oklch(from var(--bp-intent-default-rest) l c h / 0.25);
    --bp-surface-color-code: oklch(from var(--bp-palette-white) l c h / 0.7);
    --bp-surface-layer-color-default: oklch(from var(--bp-intent-default-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-primary: oklch(from var(--bp-intent-primary-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-success: oklch(from var(--bp-intent-success-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-warning: oklch(from var(--bp-intent-warning-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-danger: oklch(from var(--bp-intent-danger-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-default: linear-gradient(oklch(from var(--bp-intent-default-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-layer-primary: linear-gradient(oklch(from var(--bp-intent-primary-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-layer-success: linear-gradient(oklch(from var(--bp-intent-success-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-layer-warning: linear-gradient(oklch(from var(--bp-intent-warning-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-layer-danger: linear-gradient(oklch(from var(--bp-intent-danger-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-background-color-default-rest: oklch(from var(--bp-intent-default-rest) calc(l * 1.909) calc(c * 0) h);
    --bp-surface-background-color-default-hover: oklch(from var(--bp-intent-default-hover) calc(l + 0.577) calc(c + -0.02) calc(h + 6.2));
    --bp-surface-background-color-default-active: oklch(from var(--bp-intent-default-active) calc(l + 0.59) calc(c + -0.013) calc(h + 0));
    --bp-surface-background-color-default-disabled: oklch(from var(--bp-intent-default-disabled) calc(l * 1.471) calc(c * 0) h);
    --bp-typography-color-default-rest: oklch(from var(--bp-intent-default-rest) calc(l + -0.279) calc(c + -0.017) calc(h + -4));
    --bp-typography-color-default-hover: oklch(from var(--bp-intent-default-hover) calc(l + -0.209) calc(c + -0.013) calc(h + -2.7));
    --bp-typography-color-default-active: oklch(from var(--bp-intent-default-active) calc(l + -0.079) calc(c + -0.003) calc(h + -1.6));
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */
[data-bp-color-scheme=dark],
.bp6-dark {
  --bp-surface-border-color-default: #ffffff33;
  --bp-surface-border-color-strong: #ffffff4d;
  --bp-surface-shadow-0: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.2); /** Level 0 - border only, inset 0 0 0 1px rgba(white, 20%), 0 0 10px 0 rgba(0,0,0, 20%) */
  --bp-surface-shadow-1: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px -1px rgba(0, 0, 0, 0.2); /** Level 1 - subtle elevation with inner highlights */
  --bp-surface-shadow-2: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 4px 6px -4px rgba(0, 0, 0, 0.5), 0px 10px 30px -5px rgba(0, 0, 0, 0.5); /** Level 2 - standard elevation */
  --bp-surface-shadow-3: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 20px 25px -5px rgba(0, 0, 0, 0.3), 0px 10px 30px -5px rgba(0, 0, 0, 0.3); /** Level 3 - popover/dialog elevation */
  --bp-surface-shadow-4: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 25px 60px -12px rgba(0, 0, 0, 0.85); /** Level 4 - maximum elevation */
  --bp-surface-color-code: #1114184d;
  --bp-surface-background-color-default-rest: #111418;
  --bp-surface-background-color-default-hover: #1c2127;
  --bp-surface-background-color-default-active: #252a31;
  --bp-surface-background-color-default-disabled: #111418;
  --bp-typography-color-default-rest: #a5aab3;
  --bp-typography-color-default-hover: #646970;
  --bp-typography-color-default-active: #54575d;
}

@supports (color: oklch(from var(--any-color) l c h)) {
  [data-bp-color-scheme=dark],
  .bp6-dark {
    --bp-surface-border-color-default: oklch(from var(--bp-palette-white) l c h / 0.2);
    --bp-surface-border-color-strong: oklch(from var(--bp-palette-white) l c h / 0.3);
    --bp-surface-color-code: oklch(from var(--bp-palette-black) l c h / 0.3);
    --bp-surface-background-color-default-rest: oklch(from var(--bp-intent-default-rest) calc(l * 0.362) calc(c * 0.308) calc(h + -1.44));
    --bp-surface-background-color-default-hover: oklch(from var(--bp-intent-default-hover) calc(l * 0.615) calc(c * 0.597) calc(h + -5.29));
    --bp-surface-background-color-default-active: oklch(from var(--bp-intent-default-active) calc(l * 0.782) calc(c * 0.84) calc(h + -1.58));
    --bp-surface-background-color-default-disabled: oklch(from var(--bp-intent-default-disabled) calc(l * 0.279) calc(c * 0.377) calc(h + -2.74));
    --bp-typography-color-default-rest: oklch(from var(--bp-intent-default-rest) calc(l + 0.212) calc(c + -0.016) calc(h + 6.2));
    --bp-typography-color-default-hover: oklch(from var(--bp-intent-default-hover) calc(l + 0.12) calc(c + -0.01) calc(h + 0));
    --bp-typography-color-default-active: oklch(from var(--bp-intent-default-active) calc(l + 0.095) calc(c + -0.008) calc(h + 0));
  }
}

After

@charset "UTF-8";
/*
** Copyright 2026-present Palantir Technologies, Inc. All rights reserved.
** Licensed under the Apache License, Version 2.0.
*/
/**
 * Do not edit directly, this file was auto-generated.
 */
:root {
  --bp-palette-black: #111418;
  --bp-palette-white: #ffffff;
  --bp-palette-dark-gray-1: #1c2127;
  --bp-palette-dark-gray-2: #252a31;
  --bp-palette-dark-gray-3: #2f343c;
  --bp-palette-dark-gray-4: #383e47;
  --bp-palette-dark-gray-5: #404854;
  --bp-palette-gray-1: #5f6b7c;
  --bp-palette-gray-2: #738091;
  --bp-palette-gray-3: #8f99a8;
  --bp-palette-gray-4: #abb3bf;
  --bp-palette-gray-5: #c5cbd3;
  --bp-palette-light-gray-1: #d3d8de;
  --bp-palette-light-gray-2: #dce0e5;
  --bp-palette-light-gray-3: #e5e8eb;
  --bp-palette-light-gray-4: #edeff2;
  --bp-palette-light-gray-5: #f6f7f9;
  --bp-palette-blue-1: #184a90;
  --bp-palette-blue-2: #215db0;
  --bp-palette-blue-3: #2d72d2;
  --bp-palette-blue-4: #4c90f0;
  --bp-palette-blue-5: #8abbff;
  --bp-palette-green-1: #165a36;
  --bp-palette-green-2: #1c6e42;
  --bp-palette-green-3: #238551;
  --bp-palette-green-4: #32a467;
  --bp-palette-green-5: #72ca9b;
  --bp-palette-orange-1: #77450d;
  --bp-palette-orange-2: #935610;
  --bp-palette-orange-3: #c87619;
  --bp-palette-orange-4: #ec9a3c;
  --bp-palette-orange-5: #fbb360;
  --bp-palette-red-1: #8e292c;
  --bp-palette-red-2: #ac2f33;
  --bp-palette-red-3: #cd4246;
  --bp-palette-red-4: #e76a6e;
  --bp-palette-red-5: #fa999c;
  --bp-palette-vermilion-1: #96290d;
  --bp-palette-vermilion-2: #b83211;
  --bp-palette-vermilion-3: #d33d17;
  --bp-palette-vermilion-4: #eb6847;
  --bp-palette-vermilion-5: #ff9980;
  --bp-palette-rose-1: #a82255;
  --bp-palette-rose-2: #c22762;
  --bp-palette-rose-3: #db2c6f;
  --bp-palette-rose-4: #f5498b;
  --bp-palette-rose-5: #ff66a1;
  --bp-palette-violet-1: #5c255c;
  --bp-palette-violet-2: #7c327c;
  --bp-palette-violet-3: #9d3f9d;
  --bp-palette-violet-4: #bd6bbd;
  --bp-palette-violet-5: #d69fd6;
  --bp-palette-indigo-1: #5642a6;
  --bp-palette-indigo-2: #634dbf;
  --bp-palette-indigo-3: #7961db;
  --bp-palette-indigo-4: #9881f3;
  --bp-palette-indigo-5: #bdadff;
  --bp-palette-cerulean-1: #0c5174;
  --bp-palette-cerulean-2: #0f6894;
  --bp-palette-cerulean-3: #147eb3;
  --bp-palette-cerulean-4: #3fa6da;
  --bp-palette-cerulean-5: #68c1ee;
  --bp-palette-turquoise-1: #004d46;
  --bp-palette-turquoise-2: #007067;
  --bp-palette-turquoise-3: #00a396;
  --bp-palette-turquoise-4: #13c9ba;
  --bp-palette-turquoise-5: #7ae1d8;
  --bp-palette-forest-1: #1d7324;
  --bp-palette-forest-2: #238c2c;
  --bp-palette-forest-3: #29a634;
  --bp-palette-forest-4: #43bf4d;
  --bp-palette-forest-5: #62d96b;
  --bp-palette-lime-1: #43501b;
  --bp-palette-lime-2: #5a701a;
  --bp-palette-lime-3: #8eb125;
  --bp-palette-lime-4: #b6d94c;
  --bp-palette-lime-5: #d4f17e;
  --bp-palette-gold-1: #5c4405;
  --bp-palette-gold-2: #866103;
  --bp-palette-gold-3: #d1980b;
  --bp-palette-gold-4: #f0b726;
  --bp-palette-gold-5: #fbd065;
  --bp-palette-sepia-1: #5e4123;
  --bp-palette-sepia-2: #7a542e;
  --bp-palette-sepia-3: #946638;
  --bp-palette-sepia-4: #af855a;
  --bp-palette-sepia-5: #d0b090;
  --bp-intent-default-rest: var(--bp-palette-gray-1);
  --bp-intent-default-hover: var(--bp-palette-dark-gray-5);
  --bp-intent-default-active: var(--bp-palette-dark-gray-4);
  --bp-intent-default-disabled: var(--bp-palette-gray-3);
  --bp-intent-default-foreground: var(--bp-palette-white);
  --bp-intent-primary-rest: var(--bp-palette-blue-3);
  --bp-intent-primary-hover: var(--bp-palette-blue-2);
  --bp-intent-primary-active: var(--bp-palette-blue-1);
  --bp-intent-primary-disabled: var(--bp-palette-blue-4);
  --bp-intent-primary-foreground: var(--bp-palette-white);
  --bp-intent-success-rest: var(--bp-palette-green-3);
  --bp-intent-success-hover: var(--bp-palette-green-2);
  --bp-intent-success-active: var(--bp-palette-green-1);
  --bp-intent-success-disabled: var(--bp-palette-green-4);
  --bp-intent-success-foreground: var(--bp-palette-white);
  --bp-intent-warning-rest: var(--bp-palette-orange-3);
  --bp-intent-warning-hover: var(--bp-palette-orange-2);
  --bp-intent-warning-active: var(--bp-palette-orange-1);
  --bp-intent-warning-disabled: var(--bp-palette-orange-4);
  --bp-intent-warning-foreground: var(--bp-palette-black);
  --bp-intent-danger-rest: var(--bp-palette-red-3);
  --bp-intent-danger-hover: var(--bp-palette-red-2);
  --bp-intent-danger-active: var(--bp-palette-red-1);
  --bp-intent-danger-disabled: var(--bp-palette-red-4);
  --bp-intent-danger-foreground: var(--bp-palette-white);
  --bp-surface-border-color-default: #5f6b7c1f;
  --bp-surface-border-color-strong: #5f6b7c40;
  --bp-surface-border-width: 1px;
  --bp-surface-border-radius: 4px;
  --bp-surface-shadow-0: 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(0, 0, 0, 0.02); /** Level 0 - border only, 0 0 0 1px rgba(black, 15%), 0 0 5px 0 rgba(0,0,0, 2%) */
  --bp-surface-shadow-1: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1); /** Level 1 - subtle elevation */
  --bp-surface-shadow-2: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); /** Level 2 - standard elevation */
  --bp-surface-shadow-3: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); /** Level 3 - popover/dialog elevation */
  --bp-surface-shadow-4: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.3); /** Level 4 - maximum elevation */
  --bp-surface-spacing: 4px; /** Base spacing unit — components multiply this */
  --bp-surface-z-index-0: 0;
  --bp-surface-z-index-1: 10;
  --bp-surface-z-index-2: 20;
  --bp-surface-z-index-3: 30;
  --bp-surface-z-index-4: 40;
  --bp-surface-color-code: #ffffffb3;
  --bp-surface-layer-opacity: 0.05; /** Shared opacity for surface layers */
  --bp-surface-layer-color-default: #5f6b7c0d;
  --bp-surface-layer-color-primary: #2d72d20d;
  --bp-surface-layer-color-success: #2385510d;
  --bp-surface-layer-color-warning: #c876190d;
  --bp-surface-layer-color-danger: #cd42460d;
  --bp-surface-layer-default: linear-gradient(var(--bp-surface-layer-color-default) 0 0);
  --bp-surface-layer-primary: linear-gradient(var(--bp-surface-layer-color-primary) 0 0);
  --bp-surface-layer-success: linear-gradient(var(--bp-surface-layer-color-success) 0 0);
  --bp-surface-layer-warning: linear-gradient(var(--bp-surface-layer-color-warning) 0 0);
  --bp-surface-layer-danger: linear-gradient(var(--bp-surface-layer-color-danger) 0 0);
  --bp-surface-background-color-default-rest: #ffffff;
  --bp-surface-background-color-default-hover: #f6f7f9;
  --bp-surface-background-color-default-active: #edeff2;
  --bp-surface-background-color-default-disabled: #ffffff;
  --bp-surface-background-color-primary-rest: var(--bp-intent-primary-rest);
  --bp-surface-background-color-primary-hover: var(--bp-intent-primary-hover);
  --bp-surface-background-color-primary-active: var(--bp-intent-primary-active);
  --bp-surface-background-color-primary-disabled: var(--bp-intent-primary-disabled);
  --bp-surface-background-color-success-rest: var(--bp-intent-success-rest);
  --bp-surface-background-color-success-hover: var(--bp-intent-success-hover);
  --bp-surface-background-color-success-active: var(--bp-intent-success-active);
  --bp-surface-background-color-success-disabled: var(--bp-intent-success-disabled);
  --bp-surface-background-color-warning-rest: var(--bp-intent-warning-rest);
  --bp-surface-background-color-warning-hover: var(--bp-intent-warning-hover);
  --bp-surface-background-color-warning-active: var(--bp-intent-warning-active);
  --bp-surface-background-color-warning-disabled: var(--bp-intent-warning-disabled);
  --bp-surface-background-color-danger-rest: var(--bp-intent-danger-rest);
  --bp-surface-background-color-danger-hover: var(--bp-intent-danger-hover);
  --bp-surface-background-color-danger-active: var(--bp-intent-danger-active);
  --bp-surface-background-color-danger-disabled: var(--bp-intent-danger-disabled);
  --bp-typography-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", blueprint-icons-16, sans-serif;
  --bp-typography-family-mono: monospace;
  --bp-typography-size-body-x-small: 10px;
  --bp-typography-size-body-small: 12px;
  --bp-typography-size-body-medium: 14px;
  --bp-typography-size-body-large: 16px;
  --bp-typography-size-heading-small: 16px;
  --bp-typography-size-heading-medium: 20px;
  --bp-typography-size-heading-large: 24px;
  --bp-typography-size-heading-x-large: 28px;
  --bp-typography-size-heading-display: 46px;
  --bp-typography-size-code-small: 12px;
  --bp-typography-size-code-medium: 13px;
  --bp-typography-size-code-large: 14px;
  --bp-typography-weight-default: 400;
  --bp-typography-weight-bold: 600;
  --bp-typography-line-height-default: 1.28581;
  --bp-typography-line-height-large: 1.5;
  --bp-typography-color-muted: var(--bp-intent-default-rest);
  --bp-typography-color-default-rest: #1c2127;
  --bp-typography-color-default-hover: #111418;
  --bp-typography-color-default-active: #252a31;
  --bp-typography-color-default-disabled: var(--bp-intent-default-disabled);
  --bp-typography-color-primary-rest: var(--bp-intent-primary-rest);
  --bp-typography-color-primary-hover: var(--bp-intent-primary-hover);
  --bp-typography-color-primary-active: var(--bp-intent-primary-active);
  --bp-typography-color-primary-disabled: var(--bp-intent-primary-disabled);
  --bp-typography-color-success-rest: var(--bp-intent-success-rest);
  --bp-typography-color-success-hover: var(--bp-intent-success-hover);
  --bp-typography-color-success-active: var(--bp-intent-success-active);
  --bp-typography-color-success-disabled: var(--bp-intent-success-disabled);
  --bp-typography-color-warning-rest: var(--bp-intent-warning-rest);
  --bp-typography-color-warning-hover: var(--bp-intent-warning-hover);
  --bp-typography-color-warning-active: var(--bp-intent-warning-active);
  --bp-typography-color-warning-disabled: var(--bp-intent-warning-disabled);
  --bp-typography-color-danger-rest: var(--bp-intent-danger-rest);
  --bp-typography-color-danger-hover: var(--bp-intent-danger-hover);
  --bp-typography-color-danger-active: var(--bp-intent-danger-active);
  --bp-typography-color-danger-disabled: var(--bp-intent-danger-disabled);
  --bp-emphasis-transition-duration: 100ms;
  --bp-emphasis-ease-default: cubic-bezier(0.4, 1, 0.75, 0.9);
  --bp-emphasis-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11);
  --bp-emphasis-focus-color: var(--bp-intent-primary-rest);
  --bp-emphasis-focus-width: 2px;
  --bp-emphasis-focus-offset: 2px;
  --bp-emphasis-motion-reduced: 0; /** 0 = motion allowed, 1 = reduced motion */
}

@supports (color: oklch(from var(--any-color) l c h)) {
  :root {
    --bp-surface-border-color-default: oklch(from var(--bp-intent-default-rest) l c h / 0.12);
    --bp-surface-border-color-strong: oklch(from var(--bp-intent-default-rest) l c h / 0.25);
    --bp-surface-color-code: oklch(from var(--bp-palette-white) l c h / 0.7);
    --bp-surface-layer-color-default: oklch(from var(--bp-intent-default-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-primary: oklch(from var(--bp-intent-primary-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-success: oklch(from var(--bp-intent-success-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-warning: oklch(from var(--bp-intent-warning-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-danger: oklch(from var(--bp-intent-danger-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-background-color-default-rest: oklch(from var(--bp-intent-default-rest) calc(l * 1.909) calc(c * 0) h);
    --bp-surface-background-color-default-hover: oklch(from var(--bp-intent-default-hover) calc(l + 0.577) calc(c + -0.02) calc(h + 6.2));
    --bp-surface-background-color-default-active: oklch(from var(--bp-intent-default-active) calc(l + 0.59) calc(c + -0.013) calc(h + 0));
    --bp-surface-background-color-default-disabled: oklch(from var(--bp-intent-default-disabled) calc(l * 1.471) calc(c * 0) h);
    --bp-typography-color-default-rest: oklch(from var(--bp-intent-default-rest) calc(l + -0.279) calc(c + -0.017) calc(h + -4));
    --bp-typography-color-default-hover: oklch(from var(--bp-intent-default-hover) calc(l + -0.209) calc(c + -0.013) calc(h + -2.7));
    --bp-typography-color-default-active: oklch(from var(--bp-intent-default-active) calc(l + -0.079) calc(c + -0.003) calc(h + -1.6));
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */
[data-bp-color-scheme=dark],
.bp6-dark {
  --bp-surface-border-color-default: #ffffff33;
  --bp-surface-border-color-strong: #ffffff4d;
  --bp-surface-shadow-0: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.2); /** Level 0 - border only, inset 0 0 0 1px rgba(white, 20%), 0 0 10px 0 rgba(0,0,0, 20%) */
  --bp-surface-shadow-1: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px -1px rgba(0, 0, 0, 0.2); /** Level 1 - subtle elevation with inner highlights */
  --bp-surface-shadow-2: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 4px 6px -4px rgba(0, 0, 0, 0.5), 0px 10px 30px -5px rgba(0, 0, 0, 0.5); /** Level 2 - standard elevation */
  --bp-surface-shadow-3: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 20px 25px -5px rgba(0, 0, 0, 0.3), 0px 10px 30px -5px rgba(0, 0, 0, 0.3); /** Level 3 - popover/dialog elevation */
  --bp-surface-shadow-4: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 25px 60px -12px rgba(0, 0, 0, 0.85); /** Level 4 - maximum elevation */
  --bp-surface-color-code: #1114184d;
  --bp-surface-background-color-default-rest: #111418;
  --bp-surface-background-color-default-hover: #1c2127;
  --bp-surface-background-color-default-active: #252a31;
  --bp-surface-background-color-default-disabled: #111418;
  --bp-typography-color-default-rest: #a5aab3;
  --bp-typography-color-default-hover: #646970;
  --bp-typography-color-default-active: #54575d;
}

@supports (color: oklch(from var(--any-color) l c h)) {
  [data-bp-color-scheme=dark],
  .bp6-dark {
    --bp-surface-border-color-default: oklch(from var(--bp-palette-white) l c h / 0.2);
    --bp-surface-border-color-strong: oklch(from var(--bp-palette-white) l c h / 0.3);
    --bp-surface-color-code: oklch(from var(--bp-palette-black) l c h / 0.3);
    --bp-surface-background-color-default-rest: oklch(from var(--bp-intent-default-rest) calc(l * 0.362) calc(c * 0.308) calc(h + -1.44));
    --bp-surface-background-color-default-hover: oklch(from var(--bp-intent-default-hover) calc(l * 0.615) calc(c * 0.597) calc(h + -5.29));
    --bp-surface-background-color-default-active: oklch(from var(--bp-intent-default-active) calc(l * 0.782) calc(c * 0.84) calc(h + -1.58));
    --bp-surface-background-color-default-disabled: oklch(from var(--bp-intent-default-disabled) calc(l * 0.279) calc(c * 0.377) calc(h + -2.74));
    --bp-typography-color-default-rest: oklch(from var(--bp-intent-default-rest) calc(l + 0.212) calc(c + -0.016) calc(h + 6.2));
    --bp-typography-color-default-hover: oklch(from var(--bp-intent-default-hover) calc(l + 0.12) calc(c + -0.01) calc(h + 0));
    --bp-typography-color-default-active: oklch(from var(--bp-intent-default-active) calc(l + 0.095) calc(c + -0.008) calc(h + 0));
  }
}

Reviewer notes

The default values are unchanged, so this should not look different. Even so, please inspect the generated styles in light and dark modes for regressions, especially intent states, focus treatments, and layered surfaces.

changelog-app · 2026-10-02T14:59:41Z

✅ Successfully generated changelog entry!

Entry generated via PR title

To modify this entry, edit PR title using proper format.

📋Changelog Preview

🐛 Fixes

Preserve design token references in generated CSS (#8288)

ggdouglas added 2 commits October 1, 2026 17:02

Preserve design token references

7dcb121

Order design tokens by dependency

14f974e

ggdouglas added the Domain: design label Oct 2, 2026

Navigation Menu

Repository navigation

fix: preserve design token references in generated CSS - #8288

fix: preserve design token references in generated CSS#8288
ggdouglas wants to merge 2 commits into
developfrom
gd/preserve-design-token-references

ggdouglas commented Oct 2, 2026 •

edited

Loading

Uh oh!

changelog-app Bot commented Oct 2, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

ggdouglas commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Generated CSS

Full compiled CSS

Reviewer notes

Uh oh!

changelog-app Bot commented Oct 2, 2026

✅ Successfully generated changelog entry!

Entry generated via PR title

📋Changelog Preview

🐛 Fixes

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

ggdouglas commented Oct 2, 2026 •

edited

Loading