From a18136762d83f2a531f296658b5fcd858f5c0e2a Mon Sep 17 00:00:00 2001 From: lmjabreu Date: Wed, 20 May 2026 09:08:49 +0100 Subject: [PATCH 1/2] feat!: remove brand-coloured defaults from token vars Reactist's CSS defaults encoded product brand colours: --reactist-bg-brand defaulted to legacy Doist blue (#246fe0), and the button Actionable palette defaulted to Twist teals (#008aa6 / #006f85). Consumers like todoist-web already override all of these via the prescribed reactist-configuration/ bridge pattern, but the defaults leaked into Storybook and any unconfigured consumer. Changes: - Delete --reactist-bg-brand from design-tokens.css - Spinner and progress-bar defaults: var(--reactist-bg-brand) -> currentColor - Button primary fills (idle/hover/disabled): #008aa6/#007992/#99d0db -> currentColor - Button tertiary tints (idle/hover/disabled): #006f85/#006f85/#99c5ce -> currentColor The buttons' secondary, quaternary, and destructive palettes were already neutral and remain unchanged. The bridge file in todoist-web continues to override all of these tokens with product-library actionable.* values, so Todoist appearance is unchanged. BREAKING CHANGE: --reactist-bg-brand is removed. Consumers relying on it as a fallback for the spinner or progress-bar must set --reactist-spinner-tint and --reactist-progressbar-fill directly. Consumers relying on the Twist teal defaults for primary/tertiary buttons must provide their own values for the --reactist-actionable-primary-*-fill and --reactist-actionable-tertiary-*-tint variables. Refs: Doist/design-system-audits 2026-05-08-reactist-colour-audit.md Co-Authored-By: Claude Opus 4.7 (1M context) --- src/button/button.module.css | 12 ++++++------ src/components/progress-bar/progress-bar.module.css | 2 +- src/spinner/spinner.module.css | 2 +- src/styles/design-tokens.css | 1 - 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/button/button.module.css b/src/button/button.module.css index 9cf0c25ed..652a3a9ed 100644 --- a/src/button/button.module.css +++ b/src/button/button.module.css @@ -16,11 +16,11 @@ /* variant="primary" */ --reactist-actionable-primary-idle-tint: #ffffff; - --reactist-actionable-primary-idle-fill: #008aa6; + --reactist-actionable-primary-idle-fill: currentColor; --reactist-actionable-primary-hover-tint: #ffffff; - --reactist-actionable-primary-hover-fill: #007992; + --reactist-actionable-primary-hover-fill: currentColor; --reactist-actionable-primary-disabled-tint: #ffffff; - --reactist-actionable-primary-disabled-fill: #99d0db; + --reactist-actionable-primary-disabled-fill: currentColor; /* variant="secondary" */ --reactist-actionable-secondary-idle-tint: #282f30; @@ -31,10 +31,10 @@ --reactist-actionable-secondary-disabled-fill: #f2f6f7; /* variant="tertiary" (only has fill when hovered) */ - --reactist-actionable-tertiary-idle-tint: #006f85; - --reactist-actionable-tertiary-hover-tint: #006f85; + --reactist-actionable-tertiary-idle-tint: currentColor; + --reactist-actionable-tertiary-hover-tint: currentColor; --reactist-actionable-tertiary-hover-fill: #f2f6f7; - --reactist-actionable-tertiary-disabled-tint: #99c5ce; + --reactist-actionable-tertiary-disabled-tint: currentColor; /* variant="quaternary" (only has fill when hovered) */ --reactist-actionable-quaternary-idle-tint: #6c777a; diff --git a/src/components/progress-bar/progress-bar.module.css b/src/components/progress-bar/progress-bar.module.css index 5109f0ec5..bf4e7d444 100644 --- a/src/components/progress-bar/progress-bar.module.css +++ b/src/components/progress-bar/progress-bar.module.css @@ -3,7 +3,7 @@ --reactist-progressbar-radius-outer: var(--reactist-progressbar-height); --reactist-progressbar-radius-inner: var(--reactist-progressbar-height); --reactist-progressbar-track: var(--reactist-framework-fill-crest); - --reactist-progressbar-fill: var(--reactist-bg-brand); + --reactist-progressbar-fill: currentColor; --reactist-progressbar-scale-tint: var(--reactist-content-tertiary); --reactist-progressbar-scale-tick-height: 8px; --reactist-progressbar-scale-minor-tick-opacity: 0.15; diff --git a/src/spinner/spinner.module.css b/src/spinner/spinner.module.css index 4a402698f..7ceb1c2fa 100644 --- a/src/spinner/spinner.module.css +++ b/src/spinner/spinner.module.css @@ -1,5 +1,5 @@ :root { - --reactist-spinner-tint: var(--reactist-bg-brand); + --reactist-spinner-tint: currentColor; --reactist-spinner-fill: var(--reactist-framework-fill-crest); } diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css index 0954547d2..e8ae6c68f 100644 --- a/src/styles/design-tokens.css +++ b/src/styles/design-tokens.css @@ -68,7 +68,6 @@ /* background color */ --reactist-bg-default: rgb(255, 255, 255); - --reactist-bg-brand: rgb(36, 111, 224); --reactist-bg-aside: rgb(250, 250, 250); --reactist-bg-highlight: rgb(242, 242, 242); --reactist-bg-selected: rgb(230, 230, 230); From 7e05e8ad3a442514211dc7e8e42583737f3f6930 Mon Sep 17 00:00:00 2001 From: lmjabreu Date: Thu, 21 May 2026 15:28:14 +0100 Subject: [PATCH 2/2] fix: narrow scope to audit Q5 (revert button + design-tokens over-reaches) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit doistbot's review flagged two regressions in the previous state: - Primary button rendered white-on-white in unconfigured contexts. The previous commit set primary fills to `currentColor` while keeping the on-fill tint hardcoded at `#ffffff`. Where parent text is white, both fill and tint resolved to white and the button disappeared. - Tertiary tints set to `currentColor` cascaded into TextLink and changed its default link-colored appearance. The audit (2026-05-08-reactist-colour-audit.md, Q5) only prescribed deleting `--reactist-bg-brand` and changing spinner + progress-bar fills to `currentColor`. It did not prescribe touching button defaults or moving the actionable palette into design-tokens.css. The bridge files in todoist-web and twist-web already override the button defaults; the unconfigured fallback being Twist teal is fine. This commit reverts: - button.module.css primary idle/hover/disabled-fill back to the original Twist teals (#008aa6, #007992, #99d0db). - button.module.css tertiary idle/hover/disabled-tint back to the original teals (#006f85, #006f85, #99c5ce). - design-tokens.css additions of the full actionable palette (duplicated what's already in button.module.css with different cascade behaviour) and the unrelated switches/checkboxes block (out of scope). Kept (audit-prescribed): - `--reactist-bg-brand` deletion from design-tokens.css. - spinner.module.css `--reactist-spinner-tint` → `currentColor`. - progress-bar.module.css `--reactist-progressbar-fill` → `currentColor`. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/button/button.module.css | 12 +++++------ src/styles/design-tokens.css | 42 ------------------------------------ 2 files changed, 6 insertions(+), 48 deletions(-) diff --git a/src/button/button.module.css b/src/button/button.module.css index 652a3a9ed..9cf0c25ed 100644 --- a/src/button/button.module.css +++ b/src/button/button.module.css @@ -16,11 +16,11 @@ /* variant="primary" */ --reactist-actionable-primary-idle-tint: #ffffff; - --reactist-actionable-primary-idle-fill: currentColor; + --reactist-actionable-primary-idle-fill: #008aa6; --reactist-actionable-primary-hover-tint: #ffffff; - --reactist-actionable-primary-hover-fill: currentColor; + --reactist-actionable-primary-hover-fill: #007992; --reactist-actionable-primary-disabled-tint: #ffffff; - --reactist-actionable-primary-disabled-fill: currentColor; + --reactist-actionable-primary-disabled-fill: #99d0db; /* variant="secondary" */ --reactist-actionable-secondary-idle-tint: #282f30; @@ -31,10 +31,10 @@ --reactist-actionable-secondary-disabled-fill: #f2f6f7; /* variant="tertiary" (only has fill when hovered) */ - --reactist-actionable-tertiary-idle-tint: currentColor; - --reactist-actionable-tertiary-hover-tint: currentColor; + --reactist-actionable-tertiary-idle-tint: #006f85; + --reactist-actionable-tertiary-hover-tint: #006f85; --reactist-actionable-tertiary-hover-fill: #f2f6f7; - --reactist-actionable-tertiary-disabled-tint: currentColor; + --reactist-actionable-tertiary-disabled-tint: #99c5ce; /* variant="quaternary" (only has fill when hovered) */ --reactist-actionable-quaternary-idle-tint: #6c777a; diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css index 9f8a7ea4a..e8ae6c68f 100644 --- a/src/styles/design-tokens.css +++ b/src/styles/design-tokens.css @@ -89,43 +89,6 @@ /* component-specific */ - /* actionable colors */ - --reactist-actionable-primary-idle-tint: #ffffff; - --reactist-actionable-primary-idle-fill: #008aa6; - --reactist-actionable-primary-hover-tint: #ffffff; - --reactist-actionable-primary-hover-fill: #007992; - --reactist-actionable-primary-disabled-tint: #ffffff; - --reactist-actionable-primary-disabled-fill: #99d0db; - - --reactist-actionable-secondary-idle-tint: #282f30; - --reactist-actionable-secondary-idle-fill: #f2f6f7; - --reactist-actionable-secondary-hover-tint: #282f30; - --reactist-actionable-secondary-hover-fill: #e3e7e8; - --reactist-actionable-secondary-disabled-tint: #a9acac; - --reactist-actionable-secondary-disabled-fill: #f2f6f7; - - --reactist-actionable-tertiary-idle-tint: #006f85; - --reactist-actionable-tertiary-hover-tint: #006f85; - --reactist-actionable-tertiary-hover-fill: #f2f6f7; - --reactist-actionable-tertiary-disabled-tint: #99c5ce; - - --reactist-actionable-quaternary-idle-tint: #6c777a; - --reactist-actionable-quaternary-hover-tint: #282f30; - --reactist-actionable-quaternary-hover-fill: #e0e7e8; - --reactist-actionable-quaternary-disabled-tint: #c4c9ca; - - --reactist-actionable-primary-destructive-idle-tint: #ffffff; - --reactist-actionable-primary-destructive-idle-fill: #dc4c3e; - --reactist-actionable-primary-destructive-hover-tint: #ffffff; - --reactist-actionable-primary-destructive-hover-fill: #b03d32; - --reactist-actionable-primary-destructive-disabled-tint: #ffffff; - --reactist-actionable-primary-destructive-disabled-fill: #f1b7b2; - - --reactist-actionable-secondary-destructive-idle-tint: #dc4c3e; - --reactist-actionable-secondary-destructive-hover-tint: #b03d32; - --reactist-actionable-secondary-destructive-hover-fill: transparent; - --reactist-actionable-secondary-destructive-disabled-tint: #f1b7b2; - /* alerts */ --reactist-alert-tone-info-icon: rgba(49, 111, 234); --reactist-alert-tone-info-border: rgba(238, 238, 238); @@ -146,11 +109,6 @@ /* fields */ --reactist-field-readonly-background: rgb(246, 244, 244); - /* switches and checkboxes */ - --reactist-switch-background: var(--reactist-framework-fill-summit); - --reactist-switch-checked: var(--reactist-content-positive); - --reactist-switch-toggle: var(--reactist-bg-default); - /* toasts */ --reactist-toast-actionable-primary-tint: #39d1ef; --reactist-toast-actionable-secondary-tint: #b6c1c3;