search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
287 stars 76 forks source link

[util: getModeName] Will not work if using auto mode. #10472

Open driskull opened 3 weeks ago

driskull commented 3 weeks ago

Description

The following code will not work correctly if a user is using the calcite-mode-auto class.

https://github.com/Esri/calcite-design-system/blob/06105acdaa06e9636671211abb5cc874c5c43e52/packages/calcite-components/src/utils/dom.ts#L49-L55

This is because the utility just walks up the DOM looking for the light or dark class.

We should remove this util and add a CSS variable for whether the mode is dark or not.

Proposed Advantages

I propose we have either:

--calcite-mode-dark: 1; // value of zero or one
--calcite-mode: "dark"; // value of "dark" or "light"?

This var would be set by the mode css in global.css. It would be a read-only CSS var that users/components could use as a lookup to see what mode is currently active.

Which Component

Affected components:

Relevant Info

No response

Calcite package

driskull commented 3 weeks ago

cc @alisonailea for thoughts.

driskull commented 3 weeks ago

Alternatively, the util could be update to look for the auto class and then get the prefers mode. However, I think walking up the dom using this utility isn't the best performance.

alisonailea commented 3 weeks ago

I think we should continue to use a class for this unless absolutely necessary to switch to a variable.

driskull commented 3 weeks ago

@jcfranco what do you think?

I can enhance the utility to look for the auto class and prefers mode from the browser if thats the route we want to take. However it wouldn't be the source of truth like a CSS var would