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 | 1x 1x | import theo from 'theo';
/*
{
"props": [
{
"name": "font-size-base",
"value": "1rem",
"type": "number",
},
{
"name": "font-scale-ratio",
"value": "1.15",
"type": "number",
},
{
"name": "font-scale-neg-1",
"type": 'fontscale',
"value": ''
},
{
"name": "font-scale-1",
"type": 'fontscale',
"value": ''
}
]
}
*/
theo.registerValueTransform(
// Name to be used with registerTransform()
'fontscale/web',
// Determine if the value transform
// should be run on the specified prop
(prop) => {
return prop.get('type') === 'fontscale';
},
// Return the new value
(prop) => {
const ns = prop.get('namespace');
const name = prop.get('name').replace(/(?!\D)\w+/, '');
const range = prop.get('name').split('-').slice(-1).toString();
const scope = prop.get('scope').split('')[0];
const step = range === '1' ? 'base' : Number(range) - 1;
const operator = prop.get('name').includes('neg') ? '/' : '*';
const normalizedName = range === '1' ? 'font-size-base' : `${name}${step}`;
return `calc(var(--${ns}-${scope}-${normalizedName}) ${operator} var(--${ns}-${scope}-font-scale-ratio))`;
},
);
// Override the default "web" transform
theo.registerTransform('raw', ['color/rgb', 'fontscale/web']);
|