Apply v2 colors to components #1449
Merged
Conversation
This file contains 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
dancormier
added
the
breaking changes
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
dancormier
commented
Aug 18, 2023
| --theme-link-color-hover: var(--theme-secondary-legacy-350); | ||
| --theme-link-color-visited: var(--theme-secondary-legacy-700); | ||
| --theme-link-color: var(--theme-secondary-400); | ||
| --theme-link-color-hover: var(--theme-secondary-400); // TODO was 350, now same as base link color |
There was a problem hiding this comment.
Note
Many default theme component colors have collapsed into the same values. I'd like design to check this out and consider the best course of action.
dancormier
commented
Aug 18, 2023
dancormier
commented
Aug 18, 2023
dancormier
changed the title
giamir
approved these changes
Aug 21, 2023
There was a problem hiding this comment.
It looks good to me @dancormier. 🎉 Great work!
Feel free to merge this PR and move the story in ready for showcase once you have created a follow up tasks to resolve all the new APCA violations. We should initiate a conversation with design about those as soon as we have a good understanding of the contrast problems.
dancormier
added a commit
that referenced
this pull request
Oct 6, 2023
* feat(color): Add new color palette (#1415) * Prepare docs for new colors * Create color-legacy.less * Update colors docs page * Render all new and legacy colors + classes in docs page * Add tabs to color docs * Add new color sets * Maintain new and legacy colors pages separately * Fix new atomic color class docs * Add atomic color class generation * Add new black, white colors * Add new gold, silver, bronze * Move new color variable, class generation to new file * Generate theme color classes * Add docs to new less color functions * Fix docs page class rendering * Move new color files, refactor less functions; add theming * Remove cruft * Simplify docs page * theming… * Refactor and make some theming progress * Tweaks! * Simplify color mixins * Turn color sets into objects with key/value pairs * Clean up theme generation * Simplify color sets * Add custom theme variables * Cleanup * Revert entry.colors.js * Documentation, cleanup * add setup to test less mixins * fix unnecessary extra semicolon in atomic classes rule * run tests and linters for PRs and pushes into stacks-next * beautify css snapshots for better readability * add snapshot of the legacy color/theme generated css * Get rid of unneeded redirect * Add page for new theming variables * Move atomic class generation to atomic/color-new.less * change .theme-variables to .theme-variables() * Add utility color variables * Cleanup! * Theming! * font color need to be set per mode * Update tests * ⌘ + s * Update figma link * Update theming docs slightly * Update legacy color page to minimize changes to output * Update new theming docs page It's not *good*, but it is informative and hopefully useful while we build * Revert "Update new theming docs page" This reverts commit a7a19e7. * Generate custom theme variables for use in light/dark mode by default * Update theming (new) docs page * Add child theming docs * add snapshots for old and new atomic color files * Implement suggested tweaks * Show output of theme sliders * Add new fc variables, update bc variable values * Cleanup comments * Tweak theme color stops * Add status, lightness alias fc/bg classes; tweak theming * Tweak theming, remove r/g/b from new * rename theme function * cleanup * Add base theme color classes, values * snapshots, documentation fix * Move aliased utility class generation * add snapshot for create-aliased-utility-colors mixin * Remove new theme rgb references * Add .fc-new-* alias classes to docs * Remove border color alias cruft from docs * Remap new highlight color variables where possible * Revert "Remove border color alias cruft from docs" This reverts commit e0aeaca. * Add new border colors * Update snapshots * Add a Borders (new) docs page * Remove duplicate component-specific theme variables --------- Co-authored-by: Giamir Buoncristiani <[email protected]> * chore(deps): fix small conflict resolution mistake * Implement legacy naming for old color palette (#1440) * Add legacy suffix to all black colors * Add legacy suffix to orange, red, blue, green, powder, yellow * Tons of other misc color changes * Update css snapshots * add legacy to theme primary, secondary * Use legacy colors across docs * use legacy for single-digit border class stops * add legacy to utility aliases * Remove transparent and inherit from legacy color docs * Label legacy borders as legacy in docs * Add "(legacy)" to docs page names * Label remaining legacy colors * add legacy to fc-light, fc-medium, fc-dark * add legacy to focus-ring variables * Add legacy to bc alias vars * add TODOs for highlight color vars * Add theme variable todo * update --focus-ring with legacy suffix * Update css snapshots * Update test colors * Update card visual test colors * fix typo * Minor fixes * Rename docs pages; consolidate border docs * Tweak theming docs * move color Less files into versioned directories * move all legacy files into v1 folders and v2 into root * Label v1 generated theming variables as legacy * fix incorrect file paths for less tests * remove "new" suffix from all v2 colors * update snapshots * Update less tests to import from absolute paths lib/exports/color.less.test.ts was importing "color.less", which would import "lib/atomic.color.less" for some reason. I changed the paths to be explicit and work no matter what directory we chuck this files into. * Cleanup todos * Remove dupe variables from legacy (accounted for in new) * Standardize around v1/v2 for legacy/new colors * Cleanup stacks-documentation.less a little * Put those theme colors back! * Put those focus variables back! * Refactor utility class generation * remove new suffix from test setup to avoid confusion * Fix ADR typo Resolves #1440 (comment) * Add more Less tests for create-color-classes Resolves #1440 (comment) * Update border color link Resolves #1440 (comment) * Add test for create-aliased-utility-classes Resolves #1440 (comment) * Ensure high-contrast uses base theme colors Addresses #1440 (comment) * theming tweak --------- Co-authored-by: Giamir Buoncristiani <[email protected]> * Apply v2 colors to components (#1449) * Replace component legacy color variables, utility classes * Replace component monochromatic variables * Replace gold, sliver, bronze variables * Replace shade utility variables * Update a few missed theme variables, --blue * Missed a couple more theme variables * Update focus ring variables * Update generated sidebar widget colors * Replace less base black/white variables with static CSS vars * Remove completed todos * Fix focus ring variable name generation * Tweak focus-ring default value * Fix focus ring var generation * Theming updates * Update base theme variable color names * Move legacy border color classes to v1 directory * Move legacy typography color classes to v1 directory * Replace misc lingering legacy color references * Replace legacy Less vars with v2 variables, references * Replace legacy var references in ADR * Minor alterations to white values * Cleanup * Update Less test snapshot * Update baseline test images * Remove errant whitespace * Remove a11y test skippedTestids * Replace legacy color reference in docs with new colors (#1450) * 2.0.0-rc.0 * 2.0.0-rc.1 * Apply v2 colors to components proposed color alterations (#1451) * Replace component legacy color variables, utility classes * Replace component monochromatic variables * Replace gold, sliver, bronze variables * Replace shade utility variables * Update a few missed theme variables, --blue * Missed a couple more theme variables * Update focus ring variables * Update generated sidebar widget colors * Replace less base black/white variables with static CSS vars * Remove completed todos * Fix focus ring variable name generation * Tweak focus-ring default value * Fix focus ring var generation * Theming updates * Update base theme variable color names * Move legacy border color classes to v1 directory * Move legacy typography color classes to v1 directory * Replace misc lingering legacy color references * Replace legacy Less vars with v2 variables, references * Replace legacy var references in ADR * Minor alterations to white values * Cleanup * Update Less test snapshot * Update baseline test images * Remove errant whitespace * Improve validation state contrast, differentiation See all validation states sections in elements under "form" heading in sidebar nav ("Checkbox & Radio", "Inputs", etc) * Improve label state badge contrast * activity-indicator: improve warning, dark mode contrast * badges: improve state badge contrast * badges: improve user badge contrast, differentiation I'm not 100% sure about this one. Tough to differentiate them now that the color stops have been reduced * badges: tweak number count badge bg colors * badges: remove unneeded hc mode exception * notice: improve contrast, fix button interaction colors We can remove sooooo many high-contrast and dark mode overrides 😄 🎉 * post-summary: improve hotness colors * notice: tweak code background color * sidebar widgets: tweak background colors * notice: improve high contrast mode contrast * activity indicator: improve high contrast * Darken input success text color * Remove a11y test skippedTestids * formatting * Revert success color change * update baseline images * Deprecate primary btn, update filled secondary, other minor btn styling tweaks * Remove primary variant from btn visual test * Remove skipped link-preview tests * Dcormier/components colors v2 proposal vis image revert (#1466) * Revert "update baseline images" This reverts commit c2e23a5. * Kinda revert 19f67c0 * Update activity-indicator.less * invert activity indicator font color in dark mode * Update color-sets.less (#1467) See #1451 (comment) * Apply v2 color accessibility fixes (round 2) (#1477) * Add s-block-link__danger to docs, make small tweaks * activity-indicator: use black text for warning state Resolves test failure for s-activity-indicator-light-warning-new * Update activity indicator docs * link-preview: fix footer/header hc contrast issues * link-preview: followup contrast fix * toggle-switch: fix hc contrast on multiple "off" * Revert 'toggle-switch: fix hc contrast on multiple "off"' * Update light HC 400 stops See https://docs.google.com/spreadsheets/d/1ghhgOY3SOpKwGIFFoUrNTM6t3xNp9jOreAb9P_vcuQ0/edit?disco=AAAA32ZEHLA * Tweak notice btn colors Resolve failure of s-banner-light-warning-important * link-preview/code-block: update blue values to pass resolves s-link-preview-dark-code failure * toggle-switch: fix dark mode contrast issues resolves s-toggle-switch-dark-multiple, s-toggle-switch-dark-multiple-off failures * description: skip accessibility test for disabled variant side-steps s-description-light-is-disabled, s-description-dark-is-disabled failures * card: fix accessibility test failures on muted variant Resolves s-card-dark-muted, s-card-highcontrast-light-muted * highlight variables: tweak values * Tweak orange-500, orange-600 light hc values This resolves all badge-related accessibility test failures * Remove skipping of various accessibility test ids * docs: add migration guide (#1481) * docs: add migration guide * Remove some extra returns * Update MIGRATION_GUIDE.md Co-authored-by: Giamir Buoncristiani <[email protected]> * Apply suggestions from code review Co-authored-by: Giamir Buoncristiani <[email protected]> * Make theming alterations * Add "Upgrading dependencies" section * Minor tweaks to migration guide * The definite article ☝️ good professional wrestler name. When others refer to you as "Definite Article", you could angrily correct them: "It's **The** Definite Article" * Update MIGRATION_GUIDE.md --------- Co-authored-by: Giamir Buoncristiani <[email protected]> * Update light mode orange-400; orange-500 values for APCA (#1485) * Update MIGRATION_GUIDE.md * Update MIGRATION_GUIDE.md * Update MIGRATION_GUIDE.md * Add missed silver HC color alteration * Add stacks dep version to MIGRATION_GUIDE * Remove inline comments from color-sets.less * Update MIGRATION_GUIDE.md * 2.0.0-rc.2 * Update MIGRATION_GUIDE.md * Apply v2 color fixes (round 3) (#1488) * Set black to #000 in light mode; #fff in dark mode; cleanup * Darken input, textarea border color * Lighten s-label, s-description * Set badge border colors from 400 to 300 stops * lighten default important notice bg * Bold page title header * darken pagination item border color * Lighten post summary accepted answer color * Lighten stepped progress bar * Darken accordion expandable control * Lighten highlighted user card background color * Lighten prose kbd border * Update tag colors * 2.0.0-rc.3 * Update light mode red-100 * Fix code block bg color in light mode * 2.0.0-rc.4 * Update less output snapshots * Fix custom theming; forced dark/light modes * Update test images * Formatting * 2.0.0-rc.5 * Remove component-specific theme variable definitions Instead, we provide fallback values where they're referenced to prevent cascade collisions/overrulings from consumers * Update baseline Less test output * 2.0.0-rc.6 * Tweak color cascade * 2.0.0-rc.7 * Fix --theme-secondary-400 typo * 2.0.0-rc.8 * Update MIGRATION_GUIDE.md * Some unwanted notice docs changes slipped through * Ensure aliased styles respond to forced color modes * Update fc-success to use 400 instead of 500 From the sheet: > The (--fc-success) class looks a bit too dark. It should be set to use green-400 (instead of 500) > PubPlat - example on Badges list page if you've gotten a badge > Not sure if this is theme or not actually? Note that accepted answers use green-400 so we should match that. * Update link font colors per state * update select border color * Update color.less.test.ts.snap * Update baseline test images * 2.0.0-rc.9 * Update other link interaction state colors * Update recently merged tests * Update baseline images * 2.0.0-rc.10 * Change post summary watched bg to yellow-100 * Update admin badge border color; tweak hc syntax * Only apply topbar vars to child s-navigation when not within s-popover * Cleanup * Update badge baseline visual test images * Update --theme-topbar-item-color to black-400 Resolves: > The top nav bar icons are too dark. Change to black-400 * Update a11y tests * Update baseline images * 2.0.0-rc.11 * Doc updates to colors and theming (#1500) * Re-org nav, creating design section * Add color fundamentals back and half of content * Add crushed assets * Move theming items around * Heading level fix * Add depecration warnings * Box in more content, add alt text * Layer swatches * Fix dark mode * Accessibility info * Theming page updates * Minor spacing * Fix heading level * Update color roles * Replace most images in color fundamentals docs page * Replace all color fundamental example images * Use standard tip * Swap primary and secondary theme color usages --------- Co-authored-by: Dan Cormier <[email protected]> * Match topbar light class to light mode * Update MIGRATION_GUIDE.md * Update dark mode toggle switch, radio, checkmark * Update dark mode saturated colors * Update color.less.test.ts.snap * tweak theme generation; rm lightness clamping * 2.0.0-rc.12 * Change bold text weight from 600 to 700 * Update theming algo * 2.0.0-rc.13 * Simplify custom theme variable generation * 2.0.0-rc.14 * Fix tag high contrast theme colors * 2.0.0-rc.15 * Update purple 100, 200 values * update less snapshots * Documentation and migration guide updates --------- Co-authored-by: Giamir Buoncristiani <[email protected]> Co-authored-by: Giamir Buoncristiani <[email protected]> Co-authored-by: paintedbicycle <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR update components to use the v2 color palettes, per the stops mappings.
accessibility test run at 20230821-112331
TODO
--focus-ringvalue is a statichslavalue but should use theme colors)skippedTestidsfrom accessibility testsBreaking changes
--theme-primary-colorhas been changed to--theme-primary--theme-secondary-colorhas been changed to--theme-secondaryTechnical notes
.set-black()[300]). This is often necessary in situations where we operate on the color and need to pass what Less considers a color value. I think this is our best option but I figured it was worth mentioning..set-black()[300])lib/atomic/v1/border.lessfor easy removal when the time comes.lib/atomic/v1/typography.lessfor easy removal when the time comes.@white-legacyand@black-legacyhave been updated to use--_white-staticand--_black-static. These CSS variables were added in Implement legacy naming for old color palette #1440 (seelib/exports/color.less). They map to white and black color values and do not change based on mode. These were used in places where we wanted to keep the color black/white no matter the mode without the need/ability to map colors per mode.-ringwas missing from--focus-ring[*]variables.focus-ringvalues were not being overridden when using a custom theme. That has been resolved inlib/exports.color-sets.less.Design notes (light mode)
lib/exports/theme.less.has-warningtext, checkbox border too darkScreenshots
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
preblock background color possibly too pale?Screenshot
Screenshot