Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: rename color design-tokens #3053

Merged
merged 17 commits into from
Jan 28, 2025
Merged

chore: rename color design-tokens #3053

merged 17 commits into from
Jan 28, 2025

Conversation

mimarz
Copy link
Collaborator

@mimarz mimarz commented Jan 27, 2025

replaces #3052

  • Added migration for renames, css-renames-next48-to-next49
    • Run designsystemet migrate css-renames-next48-to-next49 --glob "./**/*.css"
  • Renamed CSS variables, tokens, and updated references:
    • color-background-subtle -> color-background-tinted
    • color-surface-default -> color-surface-tinted
    • ds-color-contrast-default -> --ds-color-base-contrast-default
    • ds-color-contrast-subtle -> --ds-color-base-contrast-subtle

40 renamed variables in CSS.

  // Background
  '--ds-color-background-subtle': '--ds-color-background-tinted',
  '--ds-color-neutral-background-subtle': '--ds-color-neutral-background-tinted',
  '--ds-color-accent-background-subtle': '--ds-color-accent-background-tinted',
  '--ds-color-brand1-background-subtle': '--ds-color-brand1-background-tinted',
  '--ds-color-brand2-background-subtle': '--ds-color-brand2-background-tinted',
  '--ds-color-brand3-background-subtle': '--ds-color-brand3-background-tinted',
  '--ds-color-danger-background-subtle': '--ds-color-danger-background-tinted',
  '--ds-color-warning-background-subtle': '--ds-color-warning-background-tinted',
  '--ds-color-success-background-subtle': '--ds-color-success-background-tinted',
  '--ds-color-info-background-subtle': '--ds-color-info-background-tinted',
  
  // Surface
  '--ds-color-surface-default': '--ds-color-surface-tinted',
  '--ds-color-neutral-surface-default': '--ds-color-neutral-surface-tinted',
  '--ds-color-accent-surface-default': '--ds-color-accent-surface-tinted',
  '--ds-color-brand1-surface-default': '--ds-color-brand1-surface-tinted',
  '--ds-color-brand2-surface-default': '--ds-color-brand2-surface-tinted',
  '--ds-color-brand3-surface-default': '--ds-color-brand3-surface-tinted',
  '--ds-color-danger-surface-default': '--ds-color-danger-surface-tinted',
  '--ds-color-warning-surface-default': '--ds-color-warning-surface-tinted',
  '--ds-color-success-surface-default': '--ds-color-success-surface-tinted',
  '--ds-color-info-surface-default': '--ds-color-info-surface-tinted',
  
  // Contrast 
  '--ds-color-contrast-default': '--ds-color-base-contrast-default',
  '--ds-color-contrast-subtle': '--ds-color-base-contrast-subtle',
  '--ds-color-neutral-contrast-default': '--ds-color-neutral-base-contrast-default',
  '--ds-color-accent-contrast-default': '--ds-color-accent-base-contrast-default',
  '--ds-color-brand1-contrast-default': '--ds-color-brand1-base-contrast-default',
  '--ds-color-brand2-contrast-default': '--ds-color-brand2-base-contrast-default',
  '--ds-color-brand3-contrast-default': '--ds-color-brand3-base-contrast-default',
  '--ds-color-danger-contrast-default': '--ds-color-danger-base-contrast-default',
  '--ds-color-warning-contrast-default': '--ds-color-warning-base-contrast-default',
  '--ds-color-success-contrast-default': '--ds-color-success-base-contrast-default',
  '--ds-color-info-contrast-default': '--ds-color-info-base-contrast-default',
  '--ds-color-neutral-contrast-subtle': '--ds-color-neutral-base-contrast-subtle',
  '--ds-color-accent-contrast-subtle': '--ds-color-accent-base-contrast-subtle',
  '--ds-color-brand1-contrast-subtle': '--ds-color-brand1-base-contrast-subtle',
  '--ds-color-brand2-contrast-subtle': '--ds-color-brand2-base-contrast-subtle',
  '--ds-color-brand3-contrast-subtle': '--ds-color-brand3-base-contrast-subtle',
  '--ds-color-danger-contrast-subtle': '--ds-color-danger-base-contrast-subtle',
  '--ds-color-warning-contrast-subtle': '--ds-color-warning-base-contrast-subtle',
  '--ds-color-success-contrast-subtle': '--ds-color-success-base-contrast-subtle',
  '--ds-color-info-contrast-subtle': '--ds-color-info-base-contrast-subtle'

Copy link

changeset-bot bot commented Jan 27, 2025

🦋 Changeset detected

Latest commit: fd75254

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@digdir/designsystemet-theme Minor
@digdir/designsystemet Minor
@digdir/designsystemet-css Minor
@digdir/designsystemet-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Jan 27, 2025

Preview deployments for this pull request:

Storybook - 28. Jan 2025 - 14:34

Storefront - 28. Jan 2025 - 14:35

Theme - 28. Jan 2025 - 14:34

Copy link
Contributor

github-actions bot commented Jan 27, 2025

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 52.4% 2980 / 5687
🔵 Statements 52.4% 2980 / 5687
🔵 Functions 82.94% 180 / 217
🔵 Branches 76.79% 523 / 681
File CoverageNo changed files found.
Generated in workflow #1843 for commit fd75254 by the Vitest Coverage Report Action

@mimarz mimarz force-pushed the rename-color-tokens-jan25 branch from 7e92eaf to 4402b55 Compare January 27, 2025 08:06
@mimarz
Copy link
Collaborator Author

mimarz commented Jan 27, 2025

putting to review for visual tests

@mimarz mimarz marked this pull request as ready for review January 27, 2025 09:09
@Barsnes
Copy link
Member

Barsnes commented Jan 27, 2025

Approving this assuming the themebuilder will be updated in a separate pr

@mimarz
Copy link
Collaborator Author

mimarz commented Jan 27, 2025

Waiting to merge this for next release

@mimarz
Copy link
Collaborator Author

mimarz commented Jan 28, 2025

merge this before #2911

@mimarz mimarz merged commit 482f765 into next Jan 28, 2025
13 checks passed
@mimarz mimarz deleted the rename-color-tokens-jan25 branch February 13, 2025 11:40
mimarz added a commit that referenced this pull request Feb 21, 2025
replaces #3052

- Renamed CSS variables, tokens, and updated references:
  - `color-background-subtle` -> `color-background-tinted`
  - `color-surface-default` -> `color-surface-tinted`
  - `ds-color-contrast-default` -> `--ds-color-base-contrast-default`
  - `ds-color-contrast-subtle` -> `--ds-color-base-contrast-subtle`


40 renamed variables in CSS. 
```
  // Background
  '--ds-color-background-subtle': '--ds-color-background-tinted',
  '--ds-color-neutral-background-subtle': '--ds-color-neutral-background-tinted',
  '--ds-color-accent-background-subtle': '--ds-color-accent-background-tinted',
  '--ds-color-brand1-background-subtle': '--ds-color-brand1-background-tinted',
  '--ds-color-brand2-background-subtle': '--ds-color-brand2-background-tinted',
  '--ds-color-brand3-background-subtle': '--ds-color-brand3-background-tinted',
  '--ds-color-danger-background-subtle': '--ds-color-danger-background-tinted',
  '--ds-color-warning-background-subtle': '--ds-color-warning-background-tinted',
  '--ds-color-success-background-subtle': '--ds-color-success-background-tinted',
  '--ds-color-info-background-subtle': '--ds-color-info-background-tinted',
  
  // Surface
  '--ds-color-surface-default': '--ds-color-surface-tinted',
  '--ds-color-neutral-surface-default': '--ds-color-neutral-surface-tinted',
  '--ds-color-accent-surface-default': '--ds-color-accent-surface-tinted',
  '--ds-color-brand1-surface-default': '--ds-color-brand1-surface-tinted',
  '--ds-color-brand2-surface-default': '--ds-color-brand2-surface-tinted',
  '--ds-color-brand3-surface-default': '--ds-color-brand3-surface-tinted',
  '--ds-color-danger-surface-default': '--ds-color-danger-surface-tinted',
  '--ds-color-warning-surface-default': '--ds-color-warning-surface-tinted',
  '--ds-color-success-surface-default': '--ds-color-success-surface-tinted',
  '--ds-color-info-surface-default': '--ds-color-info-surface-tinted',
  
  // Contrast 
  '--ds-color-contrast-default': '--ds-color-base-contrast-default',
  '--ds-color-contrast-subtle': '--ds-color-base-contrast-subtle',
  '--ds-color-neutral-contrast-default': '--ds-color-neutral-base-contrast-default',
  '--ds-color-accent-contrast-default': '--ds-color-accent-base-contrast-default',
  '--ds-color-brand1-contrast-default': '--ds-color-brand1-base-contrast-default',
  '--ds-color-brand2-contrast-default': '--ds-color-brand2-base-contrast-default',
  '--ds-color-brand3-contrast-default': '--ds-color-brand3-base-contrast-default',
  '--ds-color-danger-contrast-default': '--ds-color-danger-base-contrast-default',
  '--ds-color-warning-contrast-default': '--ds-color-warning-base-contrast-default',
  '--ds-color-success-contrast-default': '--ds-color-success-base-contrast-default',
  '--ds-color-info-contrast-default': '--ds-color-info-base-contrast-default',
  '--ds-color-neutral-contrast-subtle': '--ds-color-neutral-base-contrast-subtle',
  '--ds-color-accent-contrast-subtle': '--ds-color-accent-base-contrast-subtle',
  '--ds-color-brand1-contrast-subtle': '--ds-color-brand1-base-contrast-subtle',
  '--ds-color-brand2-contrast-subtle': '--ds-color-brand2-base-contrast-subtle',
  '--ds-color-brand3-contrast-subtle': '--ds-color-brand3-base-contrast-subtle',
  '--ds-color-danger-contrast-subtle': '--ds-color-danger-base-contrast-subtle',
  '--ds-color-warning-contrast-subtle': '--ds-color-warning-base-contrast-subtle',
  '--ds-color-success-contrast-subtle': '--ds-color-success-base-contrast-subtle',
  '--ds-color-info-contrast-subtle': '--ds-color-info-base-contrast-subtle'
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants