Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(colors)!: update all colors (#1508)
* 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]>
- Loading branch information
4 people
authored
Oct 6, 2023
1 parent
aaf26f2
commit 0ce7557