1import { SingleColorToken } from "@tokens-studio/types";
2import { Layer, Style, StyleSet } from "../colorScheme";
3import { colorToken } from "./token";
4
5interface StyleToken {
6 background: SingleColorToken,
7 border: SingleColorToken,
8 foreground: SingleColorToken,
9}
10
11interface StyleSetToken {
12 default: StyleToken
13 active: StyleToken
14 disabled: StyleToken
15 hovered: StyleToken
16 pressed: StyleToken
17 inverted: StyleToken
18}
19
20export interface LayerToken {
21 base: StyleSetToken
22 variant: StyleSetToken
23 on: StyleSetToken
24 accent: StyleSetToken
25 positive: StyleSetToken
26 warning: StyleSetToken
27 negative: StyleSetToken
28}
29
30export const styleToken = (style: Style, name: string): StyleToken => {
31 const token = {
32 background: colorToken(`${name}Background`, style.background),
33 border: colorToken(`${name}Border`, style.border),
34 foreground: colorToken(`${name}Foreground`, style.foreground),
35 }
36
37 return token
38}
39
40export const styleSetToken = (styleSet: StyleSet, name: string): StyleSetToken => {
41 const token: StyleSetToken = {} as StyleSetToken;
42
43 for (const style in styleSet) {
44 const s = style as keyof StyleSet;
45 token[s] = styleToken(styleSet[s], `${name}${style}`);
46 }
47
48 return token;
49}
50
51export const layerToken = (layer: Layer, name: string): LayerToken => {
52 const token: LayerToken = {} as LayerToken;
53
54 for (const styleSet in layer) {
55 const s = styleSet as keyof Layer;
56 token[s] = styleSetToken(layer[s], `${name}${styleSet}`);
57 }
58
59 return token;
60}