transformers color.js

0% Statements 0/6

0% Branches 0/4

0% Functions 0/2

0% Lines 0/6

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import theo from 'theo';
/*
{
  "props": [
    {
      "name": "color-accent-1",
      "inherits": "color-brand-base-50"
    },
  ]
}
*/
 
theo.registerValueTransform(
  // Name to be used with registerTransform()
  'color/web',
  // Determine if the value transform
  // should be run on the specified prop
  (prop) => {
    const inherits = prop.get('inherits');
    return (
      typeof inherits === 'string' && inherits.includes('color') && prop.get('type') === 'color' && inherits
    );
  },
  // Return the new value
  (prop) => {
    const ns = prop.get('namespace');
    const scope = prop.get('scope').split('')[0];
    return `var(--${ns}-${scope}-${prop.get('inherits')}, ${prop.get('value')})`;
  },
);