layer.ts

 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}