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

Update palette names #2877

Merged
merged 17 commits into from Nov 12, 2018

Conversation

Projects
None yet
1 participant
@thisisdano
Copy link
Member

thisisdano commented Nov 9, 2018

⚠️ Breaking changes in this PR ⚠️


The PR attempts to normalize and finalize the palette naming scheme. There are a few changes.

  • Palette naming is additive: each subset has the palette name of its parent, plus a subset suffix
    • Ex:
      • 'palette-color' (all color tokens)
      • 'palette-color-system' (all system color tokens)
      • 'palette-color-system-blue' (all blue color tokens)
      • 'palette-color-system-blue-dark' (dark blue color tokens)
  • Default palettes use palette-[property]-default not palette-system-[property]
    • Ex: 'palette-letter-spacing-default'
  • Palettes with no suffix include all tokens in the category
    • Ex: 'palette-font'
    • Ex: 'palette-color'
    • Ex: 'palette-units'
  • Palettes attempt to mimic the token categories/functions/properties: like units, color, and font
    • Ex: 'palette-color-system-red-warm'
    • Ex: 'palette-units-system-positive'
    • Ex: 'palette-font-system'
  • Palettes attempt to mimic the token categories/functions/properties: like units, color, and font
    • Ex: 'palette-color-system-red-warm'
    • Ex: 'palette-font-system'
    • Ex: 'palette-units-system-positive'
  • Palettes have a relative subset suffix (like -small, -smaller)
    • Ex: 'palette-color-system-red-warm-light'
    • Ex: 'palette-units-system-smaller'
    • Ex: 'palette-units-system-negative-smaller'
  • Palettes that include all values in a set, have no special suffix (-all goes away)
    • Ex: 'palette-units' (all unit tokens, including ch, em, and percentage)
    • Ex: 'palette-units-system' (all system unit tokens)
    • Ex: 'palette-font-theme-types' (all theme font sizes in type-based families)
  • Any palette that had a -negative grouping now also has a corresponding -positive
    • Ex: 'palette-units-system-negative' and 'palette-units-system-positive' ('palette-units-system' includes all negative and positive values)
  • The -negative and -positive groups now appear before the sizing groups
    • Ex: 'palette-units-system-negative-smaller'
  • The font-weights category is now font-weight
    • Ex: 'palette-font-weight-system'
  • Numeric font-weights use the -system suffix, not -numeric
    • Ex: 'palette-font-weight-system'

There are too many specific changes to list each individual palette name change. The current documentation on the website should be correct.


Key changes
Update palettes in _uswds-theme-utilities.scss.

Old palette name New palette name
palette-system-[property] palette-[property]-default
palette-spacing-system[...] palette-units-system-[...]
palette-spacing-system-all palette-units-system
palette-spacing-units[...] palette-units[...]
palette-colors[...] palette-color[...]
palette-[system color]-all palette-color-system-[color]
palette-[system color][...] palette-color-system-[color][...]
palette-font-weights-numeric palette-font-weight-system
palette-font-theme-[family]-all palette-font-theme-[family]
palette-font-system-[family]-all palette-font-system-[family]
palette-font-system-[family]-sm palette-font-system-[family]-small
palette-font-system-[family]-lg palette-font-system-[family]-large
palette-font-system-[family]-xlarge palette-font-system-[family]-larger
palette-font-[family]-[theme-size] palette-font-theme-[family]-[theme-size]
palette-font-[family]-[system-size] palette-font-system-[family]-[system-size]
palette-font-theme-all palette-font-theme
palette-font-theme-[type-based families] palette-font-theme-types
palette-font-theme-[role-based families] palette-font-theme-roles

@thisisdano thisisdano requested a review from uswds/core Nov 9, 2018

@thisisdano thisisdano changed the title Update palette names [WIP] Update palette names Nov 10, 2018

@thisisdano thisisdano changed the title [WIP] Update palette names Update palette names Nov 12, 2018

@thisisdano thisisdano merged commit 0c92d6d into release-2.0 Nov 12, 2018

10 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
federalist-staging/build The build is complete!
Details
federalist/build The build is complete!
Details
security/snyk - examples/browserify/package.json (thisisdano) No new issues
Details
security/snyk - examples/grunt/package.json (thisisdano) No new issues
Details
security/snyk - examples/gulp/package.json (thisisdano) No new issues
Details
security/snyk - examples/node-sass/package.json (thisisdano) No new issues
Details
security/snyk - examples/webpack/package.json (thisisdano) No new issues
Details
security/snyk - package.json (thisisdano) No new issues
Details
security/snyk - package.json (uswds) No manifest changes detected

@thisisdano thisisdano deleted the dw-update-palette-names branch Nov 12, 2018

@thisisdano thisisdano referenced this pull request Nov 14, 2018

Merged

2.0.0-beta.4 #2879

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment