feat!: source color tokens from product-libraries-tokens

[frankieyan]

Description

With this PR, we're bringing in Todoist's colour tokens into Reactist so that they come already themed when we consume them in our apps, allowing us to avoid mapping them back to Reactist's variables in each of them.

We also removed --reactist-* variables that are either unused, or can be replaced by a corresponding product library token. When upgrading to this new version, references to them will need to be updated:

64 removed and replaced

Removed	Replacement
--reactist-actionable-primary-destructive-disabled-fill	--product-library-actionable-destructive-disabled-fill
--reactist-actionable-primary-destructive-disabled-tint	--product-library-actionable-destructive-on-disabled-tint
--reactist-actionable-primary-destructive-hover-fill	--product-library-actionable-destructive-hover-fill
--reactist-actionable-primary-destructive-hover-tint	--product-library-actionable-destructive-on-hover-tint
--reactist-actionable-primary-destructive-idle-fill	--product-library-actionable-destructive-idle-fill
--reactist-actionable-primary-destructive-idle-tint	--product-library-actionable-destructive-on-idle-tint
--reactist-actionable-primary-disabled-fill	--product-library-actionable-primary-disabled-fill
--reactist-actionable-primary-disabled-tint	--product-library-actionable-primary-on-disabled-tint
--reactist-actionable-primary-hover-fill	--product-library-actionable-primary-hover-fill
--reactist-actionable-primary-hover-tint	--product-library-actionable-primary-on-hover-tint
--reactist-actionable-primary-idle-fill	--product-library-actionable-primary-idle-fill
--reactist-actionable-primary-idle-tint	--product-library-actionable-primary-on-idle-tint
--reactist-actionable-quaternary-disabled-tint	--product-library-actionable-quaternary-disabled-tint
--reactist-actionable-quaternary-hover-fill	--product-library-actionable-quaternary-hover-fill
--reactist-actionable-quaternary-hover-tint	--product-library-actionable-quaternary-on-hover-tint
--reactist-actionable-quaternary-idle-tint	--product-library-actionable-quaternary-idle-tint
--reactist-actionable-secondary-destructive-disabled-tint	--product-library-actionable-destructive-disabled-tint
--reactist-actionable-secondary-destructive-hover-fill	--product-library-info-attention-secondary-idle-fill
--reactist-actionable-secondary-destructive-hover-tint	--product-library-actionable-destructive-hover-tint
--reactist-actionable-secondary-destructive-idle-tint	--product-library-actionable-destructive-idle-tint
--reactist-actionable-secondary-disabled-fill	--product-library-actionable-secondary-disabled-fill
--reactist-actionable-secondary-disabled-tint	--product-library-actionable-secondary-on-disabled-tint
--reactist-actionable-secondary-hover-fill	--product-library-actionable-secondary-hover-fill
--reactist-actionable-secondary-hover-tint	--product-library-actionable-secondary-on-hover-tint
--reactist-actionable-secondary-idle-fill	--product-library-actionable-secondary-idle-fill
--reactist-actionable-secondary-idle-tint	--product-library-actionable-secondary-on-idle-tint
--reactist-actionable-tertiary-disabled-tint	--product-library-actionable-tertiary-disabled-tint
--reactist-actionable-tertiary-hover-fill	--product-library-actionable-tertiary-hover-fill
--reactist-actionable-tertiary-hover-tint	--product-library-actionable-tertiary-on-hover-tint
--reactist-actionable-tertiary-idle-tint	--product-library-actionable-tertiary-idle-tint
--reactist-alert-tone-caution-icon	--product-library-info-warning-primary-on-idle-fill
--reactist-alert-tone-critical-icon	--product-library-info-attention-primary-idle-fill
--reactist-alert-tone-info-icon	--product-library-info-neutral-primary-idle-fill
--reactist-alert-tone-positive-icon	--product-library-info-positive-primary-idle-fill
--reactist-bg-aside	--product-library-background-base-secondary
--reactist-bg-brand	--product-library-display-accent-primary-fill
--reactist-bg-default	--product-library-background-base-primary
--reactist-bg-highlight	--product-library-actionable-quaternary-hover-fill
--reactist-bg-selected	--product-library-selectable-secondary-selected-fill
--reactist-bg-toast	--product-library-background-raised-quaternary
--reactist-content-danger	--product-library-actionable-destructive-idle-tint
--reactist-content-positive	--product-library-info-positive-primary-idle-tint
--reactist-content-primary	--product-library-display-primary-idle-tint
--reactist-content-secondary	--product-library-display-secondary-idle-tint
--reactist-content-tertiary	--product-library-display-tertiary-idle-tint
--reactist-divider-primary	--product-library-divider-primary
--reactist-divider-secondary	--product-library-divider-secondary
--reactist-divider-tertiary	--product-library-divider-tertiary
--reactist-field-readonly-background	--product-library-background-base-tertiary
--reactist-framework-fill-background	--product-library-background-base-secondary
--reactist-framework-fill-crest	--product-library-background-base-tertiary
--reactist-inputs-alert	--product-library-info-attention-primary-idle-tint
--reactist-inputs-focus	--product-library-border-focus-tint
--reactist-inputs-hover	--product-library-border-hover-tint
--reactist-inputs-idle	--product-library-border-idle-tint
--reactist-scrollbar-thumb-idle	--product-library-display-quaternary-idle-tint
--reactist-switch-background	--product-library-selectable-primary-unselected-fill
--reactist-switch-checked	--product-library-actionable-primary-idle-fill
--reactist-switch-toggle	--product-library-selectable-primary-on-selected-fill
--reactist-toast-actionable-hover-fill	--product-library-actionable-tertiary-on-dark-hover-fill
--reactist-toast-actionable-primary-tint	--product-library-actionable-tertiary-on-dark-idle-tint
--reactist-toast-actionable-secondary-tint	--product-library-actionable-quaternary-on-dark-idle-tint
--reactist-toast-content-primary	--product-library-display-primary-on-dark-tint
--reactist-toast-content-secondary	--product-library-display-secondary-on-dark-tint

10 removed with no replacement

• --reactist-alert-tone-caution-background
• --reactist-alert-tone-caution-border
• --reactist-alert-tone-critical-background
• --reactist-alert-tone-critical-border
• --reactist-alert-tone-info-background
• --reactist-alert-tone-info-border
• --reactist-alert-tone-positive-background
• --reactist-alert-tone-positive-border
• --reactist-framework-fill-selected
• --reactist-framework-fill-summit

PR Checklist

• Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Reviewed and approved Chromatic visual regression tests in CI

[doistbot]

⚠️ PR size is large: Review quality may be affected

👋 @frankieyan This PR is large enough that Doistbot's review may miss details.

Reviewable diff: 323 review-load lines across 40 files (+323 / -500), excluding low-signal files. I will still run the review, but this would be easier for your colleagues to review as smaller PRs or a PR stack 😅

ℹ️ To make it easier to review, the recommended diff size is < 750 review-load lines and < 25 files changed

To be mindful of their time I would suggest you split this PR

Steps for splitting the PR:

1. Put mechanical refactors, generated updates, and dependency changes in their own PRs.
2. Open the first PR against main.
3. Branch the next PR from the previous PR branch, then set its GitHub base branch to that previous branch.
4. Merge the stack from bottom to top.

You can use your agent of choice (Codex/Claude etc) to help you with the split 😊 Just point them to this comment and ask them Can you please help me create a logical PR stack from this PR?

[doistbot]

This PR migrates Reactist's color tokens to source directly from @doist/product-libraries-tokens, replacing obsolete --reactist-* custom properties with their product-library equivalents across all components.

I also included a few optional follow-up notes in the details below.

Optional follow-up notes (2)

• scripts/copy-token-themes.sh:20: In POSIX sh, if $SRC contains no matching .css files, the loop variable f will expand to the unexpanded glob string "node_modules/@doist/product-libraries-tokens/dist/colors/css/*.css" and cause cat to fail. Consider adding [ -f "$f" ] || continue as the first line inside the loop.
• scripts/copy-token-themes.sh:13: Redundant existence check (TOCTOU anti-pattern). The [ ! -d "$SRC" ] guard on lines 13–16 is unnecessary: the script already runs under set -e, and the for f in "$SRC"/*.css loop on line 20 will naturally fail (with cat erroring on the unexpanded glob literal) if the directory doesn't exist or is empty. The check adds a needless stat call. If the friendlier error message is desired, let the loop fail and wrap the message around the exit, or drop the check entirely.

_{Share Feedback • Review Logs}

[frankieyan]

@Bloomca any chance I can get a sanity check on this today? :)

[Bloomca]

@frankieyan Yeah, I am looking into it! Will post a review very soon

[Bloomca]

Smoke-tested in the storybook, and all looks good! Sorry for taking time with the review