imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Integrate compound design tokens (#11091)

Browse source 
* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* lintfix

* Use correct SpyInstance import

* Using npm build of design tokens
This commit is contained in:
Germain 2023-06-14 16:49:14 +01:00 • committed by GitHub
parent b9b93264b6
commit 4243847f4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 222 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/theme.ts
View file

@ -269,6 +269,24 @@ export async function setTheme(theme?: string): Promise<void> {
const styleSheet = styleElements.get(stylesheetName)!;
styleSheet.disabled = false;
/**
* Adds the Compound theme class to the top-most element in the document
* This will automatically refresh the colour scales based on the OS or user
* preferences
*
* Note: Theming through Compound is not yet established. Brand theming should
* be done in a similar manner as it used to be done.
*/
document.body.classList.remove("cpd-theme-light", "cpd-theme-dark", "cpd-theme-light-hc", "cpd-theme-dark-hc");
let compoundThemeClassName = `cpd-theme-` + (stylesheetName.includes("light") ? "light" : "dark");
// Always respect user OS preference!
if (isHighContrastTheme(theme) || window.matchMedia("(prefers-contrast: more)").matches) {
compoundThemeClassName += "-hc";
}
document.body.classList.add(compoundThemeClassName);
return new Promise((resolve, reject) => {
const switchTheme = function (): void {
// we re-enable our theme here just in case we raced with another