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.

Sign up for GitHub

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

Jump to bottom

Color context (mode) tokens should only be applied with prefers-color-scheme when .calcite-mode-auto is applied #8343

Closed
2 of 6 tasks
alisonailea opened this issue Dec 6, 2023 · 5 comments
Closed
2 of 6 tasks

Color context (mode) tokens should only be applied with prefers-color-scheme when .calcite-mode-auto is applied #8343

alisonailea opened this issue Dec 6, 2023 · 5 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-design-tokens Issues specific to the @esri/calcite-design-tokens package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p0 - emergency User set priority impact status of p0 - emergency regression Issues that are caused by changes in a release, but were working before that.
Milestone
2023 December Pri...

Comments

@alisonailea
Copy link
Contributor

alisonailea commented Dec 6, 2023 •
edited by jcfranco
Loading

Check existing issues

Actual Behavior

When you change the light or dark appearance on a Mac, the light or dark color context tokens are applied automatically.

Expected Behavior

Color context tokens should only be applied in css with prefers-color-scheme when a .calcite-mode-auto class is applied.

Reproduction Sample

https://codepen.io/benesri/pen/RwgrjEx

Reproduction Steps

  1. Open a calcite-component that is not wrapped in a .calcite-mode-auto class
  2. switch to the "light" or "dark" mode on your computer
  3. observe the calcite-component does not change it's colors

Reproduction Version

2.0

Relevant Info

No response

Regression?

No response

Priority impact

p0 - emergency

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)
@alisonailea alisonailea added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 6, 2023
@github-actions github-actions bot added impact - p0 - emergency User set priority impact status of p0 - emergency calcite-design-tokens Issues specific to the @esri/calcite-design-tokens package. Calcite (dev) Issues logged by Calcite developers. labels Dec 6, 2023
@alisonailea alisonailea mentioned this issue Dec 6, 2023
Merged
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 6, 2023
@jcfranco jcfranco added this to the 2023 December Priorities milestone Dec 6, 2023
@jcfranco jcfranco added estimate - 3 A day or two of work, likely requires updates to tests. regression Issues that are caused by changes in a release, but were working before that. labels Dec 6, 2023
@geospatialem geospatialem added the ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. label Dec 6, 2023
@omarkawach
Copy link

This is greatly impacting us on the ArcGIS Maps SDK for JavaScript components team. Watching.

@jmanke
Copy link

jmanke commented Dec 6, 2023 •
edited
Loading

Dashboards is also seeing this in some of our routes - dark mode will briefly flash before our theming logic kicks in (when system preference is set to dark).

@omarkawach
Copy link

omarkawach commented Dec 6, 2023 •
edited
Loading

Some examples of areas where the design system is dictating the styling for us

Our Storybook web component documentation site (tabs, chips, and cards)
image (1)
image (2)
image (3)

@geospatialem geospatialem added the ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. label Dec 6, 2023
alisonailea added a commit that referenced this issue Dec 6, 2023
@alisonailea
fix(color-context tokens): only apply when .calcite-mode-auto is ap…
19de817 
…plied (#8344)

**Related Issue:** #8343

## Summary

Resolves bug where the @media query, which applied light and dark
color-context tokens on prefers-color-scheme in CSS, was applied at
`:root` instead of `.calcite-mode-auto`
@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Dec 6, 2023
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned alisonailea Dec 6, 2023
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 6, 2023

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 7, 2023
@geospatialem
Copy link
Member

Verified in 1.12.0-next.7 when the system settings are set to dark mode in Windows.

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

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-design-tokens Issues specific to the @esri/calcite-design-tokens package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p0 - emergency User set priority impact status of p0 - emergency regression Issues that are caused by changes in a release, but were working before that.
Projects
None yet
Milestone
2023 December Priorities
Development

No branches or pull requests
6 participants
@jcfranco @alisonailea @geospatialem @jmanke @omarkawach @DitwanP