feat(colors)!: update all colors #1508
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
* 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 <giamir.buoncristiani@gmail.com>
* 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 <giamir.buoncristiani@gmail.com>
* 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)
* 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)
* 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 * Remove some extra returns * Update MIGRATION_GUIDE.md Co-authored-by: Giamir Buoncristiani <gbuoncristiani@stackoverflow.com> * Apply suggestions from code review Co-authored-by: Giamir Buoncristiani <gbuoncristiani@stackoverflow.com> * 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 <gbuoncristiani@stackoverflow.com>
…into stacks-next
* 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
* 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 <dcormier@stackoverflow.com>
dancormier
added
enhancement
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
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 includes many breaking changes for the Stacks Classic 2.0 release. These changes focus on the color palettes used and included in Stacks, as well as (mostly under-the-hood) changes to custom theme generation.
The goal of these changes is to improve accessibility in Stacks by meeting a minimum of APCA 60Lc for our components in light/dark mode and WCAG AAA in high contrast modes.
Please see the migration guide included in these changes for more info.