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}