84 lines
2.9 KiB
JavaScript
84 lines
2.9 KiB
JavaScript
/**
|
|
* Generates a CSS block that overrides the folds vanilla-extract design tokens
|
|
* for a given theme class name.
|
|
*
|
|
* NOTE: The `--oq6d07*` variable names are stable compiled identifiers for the
|
|
* version of the `folds` design system used in Paarrot. They will need updating
|
|
* if folds is upgraded to a version that recompiles its theme contract.
|
|
*/
|
|
export function generateThemeCSS(className, theme) {
|
|
const { background: bg, surface: sf, surfaceVariant: sv, primary: pr, secondary: sc, success: su, warning: wa, critical: cr, other: ot, } = theme.colors;
|
|
const vars = `
|
|
.${className} {
|
|
--oq6d070: ${bg.container};
|
|
--oq6d071: ${bg.containerHover};
|
|
--oq6d072: ${bg.containerActive};
|
|
--oq6d073: ${bg.containerLine};
|
|
--oq6d074: ${bg.onContainer};
|
|
--oq6d075: ${sf.container};
|
|
--oq6d076: ${sf.containerHover};
|
|
--oq6d077: ${sf.containerActive};
|
|
--oq6d078: ${sf.containerLine};
|
|
--oq6d079: ${sf.onContainer};
|
|
--oq6d07a: ${sv.container};
|
|
--oq6d07b: ${sv.containerHover};
|
|
--oq6d07c: ${sv.containerActive};
|
|
--oq6d07d: ${sv.containerLine};
|
|
--oq6d07e: ${sv.onContainer};
|
|
--oq6d07f: ${pr.main};
|
|
--oq6d07g: ${pr.mainHover};
|
|
--oq6d07h: ${pr.mainActive};
|
|
--oq6d07i: ${pr.mainLine};
|
|
--oq6d07j: ${pr.onMain};
|
|
--oq6d07k: ${pr.container};
|
|
--oq6d07l: ${pr.containerHover};
|
|
--oq6d07m: ${pr.containerActive};
|
|
--oq6d07n: ${pr.containerLine};
|
|
--oq6d07o: ${pr.onContainer};
|
|
--oq6d07p: ${sc.main};
|
|
--oq6d07q: ${sc.mainHover};
|
|
--oq6d07r: ${sc.mainActive};
|
|
--oq6d07s: ${sc.mainLine};
|
|
--oq6d07t: ${sc.onMain};
|
|
--oq6d07u: ${sc.container};
|
|
--oq6d07v: ${sc.containerHover};
|
|
--oq6d07w: ${sc.containerActive};
|
|
--oq6d07x: ${sc.containerLine};
|
|
--oq6d07y: ${sc.onContainer};
|
|
--oq6d07z: ${su.main};
|
|
--oq6d0710: ${su.mainHover};
|
|
--oq6d0711: ${su.mainActive};
|
|
--oq6d0712: ${su.mainLine};
|
|
--oq6d0713: ${su.onMain};
|
|
--oq6d0714: ${su.container};
|
|
--oq6d0715: ${su.containerHover};
|
|
--oq6d0716: ${su.containerActive};
|
|
--oq6d0717: ${su.containerLine};
|
|
--oq6d0718: ${su.onContainer};
|
|
--oq6d0719: ${wa.main};
|
|
--oq6d071a: ${wa.mainHover};
|
|
--oq6d071b: ${wa.mainActive};
|
|
--oq6d071c: ${wa.mainLine};
|
|
--oq6d071d: ${wa.onMain};
|
|
--oq6d071e: ${wa.container};
|
|
--oq6d071f: ${wa.containerHover};
|
|
--oq6d071g: ${wa.containerActive};
|
|
--oq6d071h: ${wa.containerLine};
|
|
--oq6d071i: ${wa.onContainer};
|
|
--oq6d071j: ${cr.main};
|
|
--oq6d071k: ${cr.mainHover};
|
|
--oq6d071l: ${cr.mainActive};
|
|
--oq6d071m: ${cr.mainLine};
|
|
--oq6d071n: ${cr.onMain};
|
|
--oq6d071o: ${cr.container};
|
|
--oq6d071p: ${cr.containerHover};
|
|
--oq6d071q: ${cr.containerActive};
|
|
--oq6d071r: ${cr.containerLine};
|
|
--oq6d071s: ${cr.onContainer};
|
|
--oq6d071t: ${ot.focusRing};
|
|
--oq6d071u: ${ot.shadow};
|
|
--oq6d071v: ${ot.overlay};
|
|
}`;
|
|
return theme.extraCss ? `${vars}\n${theme.extraCss}` : vars;
|
|
}
|
|
//# sourceMappingURL=theme-css.js.map
|