f36cc07f1b
Previously we were not fully using CSS variables as values used in CSS were hard-coded one. It wasn't keeping the variable references. This was causing issues when customizing the theme, because editing colors was not enough, it was needed to customize also the tokens using these variables. Now by introducing ref() we can delegate how to deal with these directly to the generators themselves.
41 lines
934 B
TypeScript
41 lines
934 B
TypeScript
import { tokens } from "./cunningham-tokens";
|
|
|
|
export type DefaultTokens = typeof tokens;
|
|
export const defaultTokens = tokens;
|
|
|
|
/**
|
|
* Transform such object:
|
|
* {
|
|
* theme: {
|
|
* colors: {
|
|
* "primary-500": "blue"
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* to:
|
|
* {
|
|
* theme: {
|
|
* colors: {
|
|
* "primary-500": "ref(theme.colors.primary-500)"
|
|
* }
|
|
* }
|
|
* }
|
|
* @param tokens_
|
|
*/
|
|
export const buildRefs = <T extends Object>(tokens_: T): T => {
|
|
const buildRefsAux = (upperKey: string, subTokens: any) => {
|
|
if (typeof subTokens === "object") {
|
|
const obj: any = {};
|
|
Object.entries(subTokens).forEach(([key, value]) => {
|
|
obj[key] = buildRefsAux((upperKey ? upperKey + "." : "") + key, value);
|
|
});
|
|
return obj;
|
|
}
|
|
return "ref(" + upperKey + ")";
|
|
};
|
|
return buildRefsAux("", tokens_);
|
|
};
|
|
|
|
export const defaultTokenRefs = buildRefs(defaultTokens);
|