feat!: remove brand-coloured defaults from token vars#1043
Open
lmjabreu wants to merge 3 commits into
Open
Conversation
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) <noreply@anthropic.com>
doistbot
reviewed
May 20, 2026
Member
doistbot
left a comment
doistbot
left a comment
There was a problem hiding this comment.
This PR removes legacy brand-colored default tokens in favor of neutral fallbacks to prevent product-specific styles from leaking into unconfigured environments. This is a valuable cleanup that streamlines the design system's theming configuration for consumers. However, there are a couple of unintended side effects to resolve with the unconfigured fallbacks, specifically the primary button rendering white text on a white background and the shared tertiary tokens inadvertently altering the default color mode for TextLink components.
…ches) 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) <noreply@anthropic.com>
craigcarlyle
approved these changes
May 22, 2026
Contributor
craigcarlyle
left a comment
craigcarlyle
left a comment
There was a problem hiding this comment.
Seems reasonable and won't break anything in todoist-web.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes: no issue (tracked in Reactist colour audit (component-libraries)).
Short description
Reactist's CSS defaults encoded one product brand colour via
--reactist-bg-brand(legacy Doist blue,rgb(36, 111, 224)). That token was consumed only byspinner.module.cssandprogress-bar.module.cssand leaked the wrong product brand into Storybook and any unconfigured consumer.Concretely:
--reactist-bg-brandfromdesign-tokens.css.var(--reactist-bg-brand)→currentColor.var(--reactist-bg-brand)→currentColor.Button Actionable defaults are unchanged in this PR. They continue to default to Twist teals in
button.module.css, and consumers like todoist-web continue to override all of them via thereactist-configuration/bridge pattern. Scoped per the audit's Q5 decision.Breaking change
--reactist-bg-brandis removed. Consumers relying on it as a fallback for the spinner or progress-bar must set--reactist-spinner-tintand--reactist-progressbar-filldirectly, or accept thecurrentColordefault (renders in inherited text colour).PR Checklist
currentColor-driven diffs for spinner / progress-bar in unconfigured stories.History
An earlier state of this PR also changed primary button fills and tertiary tints to
currentColor. doistbot's review flagged that this caused white-on-white primary buttons in some contexts and changed TextLink's default colour. The audit didn't prescribe those button changes, only the bg-brand removal and the spinner/progress-bar update. This PR is now narrowed to match the audit. See commit 7e05e8a for the revert.