Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 2x 1776x 2x 308x 616x 46x 2x 44x 44x 570x 308x 308x 308x 2x 3x 1770x 298x | import { MODE_EXTENSION_KEY } from '../../utils/constants.js';
/**
* CSS filter to detect tokens with light/dark values
*
* @param {Object} token
* @returns boolean
*/
export const lightDarkFilter = (token) => {
return !!token.$extensions?.[MODE_EXTENSION_KEY]?.dark?.$value;
};
/**
* CSS Transformer that converts light/dark mode values to light-dark() CSS function
*
* @param {Object} token
* @returns
*/
export const lightDarkTransformer = (token) => {
const resolveReference = (value, originalValue) => {
// If the value is dynamic, check if it's an alias reference
// Aliases are resolved by Style Dictionary and should use the resolved value
if (token.dynamic) {
// If original value is an alias reference, use the resolved value instead
// Aliases don't generate CSS variables, so we need to use the literal resolved value
if (originalValue && originalValue.includes('{alias.')) {
return value; // Use the resolved value (e.g., #fff) instead of creating a CSS variable
}
// Otherwise, convert token name to CSS variable reference syntax
const tokenName = originalValue.replace('{', '').replace('}', '').replace(/\./g, '-');
return `var(--${tokenName})`;
}
// Otherwise return the literal value
return value;
};
const lightVal = resolveReference(token.$value, token.original.$value);
const darkVal = resolveReference(
token.$extensions[MODE_EXTENSION_KEY].dark.$value,
token.original.$extensions[MODE_EXTENSION_KEY].dark.$value,
);
return `light-dark(${lightVal}, ${darkVal})`;
};
/**
* Style Dictionary registration for the light-dark CSS transform
* @param {StyleDictionary} StyleDictionary
*/
export const lightDarkCSS = (StyleDictionary) => {
StyleDictionary.registerTransform({
name: 'value/light-dark-css-var',
type: 'value',
transitive: true,
filter: (token) => lightDarkFilter(token),
transform: (token) => lightDarkTransformer(token),
});
};
|