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

Update palette names #2877

Merged
merged 17 commits into from Nov 12, 2018
Merged

Update palette names #2877

merged 17 commits into from Nov 12, 2018

Conversation

@thisisdano
Copy link
Member

@thisisdano 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 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
@thisisdano thisisdano deleted the dw-update-palette-names branch Nov 12, 2018
@thisisdano thisisdano mentioned this pull request Nov 14, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

1 participant