layer.ts

 1import { SingleColorToken } from "@tokens-studio/types"
 2import { Layer, Style, StyleSet } from "../create_theme"
 3import { color_token } 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 style_token = (style: Style, name: string): StyleToken => {
31    const token = {
32        background: color_token(`${name}Background`, style.background),
33        border: color_token(`${name}Border`, style.border),
34        foreground: color_token(`${name}Foreground`, style.foreground),
35    }
36
37    return token
38}
39
40export const style_set_token = (
41    style_set: StyleSet,
42    name: string
43): StyleSetToken => {
44    const token: StyleSetToken = {} as StyleSetToken
45
46    for (const style in style_set) {
47        const s = style as keyof StyleSet
48        token[s] = style_token(style_set[s], `${name}${style}`)
49    }
50
51    return token
52}
53
54export const layer_token = (layer: Layer, name: string): LayerToken => {
55    const token: LayerToken = {} as LayerToken
56
57    for (const style_set in layer) {
58        const s = style_set as keyof Layer
59        token[s] = style_set_token(layer[s], `${name}${style_set}`)
60    }
61
62    return token
63}