Files
oak-gpui/styles/src/theme/tokens/layer.ts
T
2023-07-04 01:20:56 -04:00

64 lines
1.6 KiB
TypeScript

import { SingleColorToken } from "@tokens-studio/types"
import { Layer, Style, StyleSet } from "../create_theme"
import { color_token } from "./token"
interface StyleToken {
background: SingleColorToken
border: SingleColorToken
foreground: SingleColorToken
}
interface StyleSetToken {
default: StyleToken
active: StyleToken
disabled: StyleToken
hovered: StyleToken
pressed: StyleToken
inverted: StyleToken
}
export interface LayerToken {
base: StyleSetToken
variant: StyleSetToken
on: StyleSetToken
accent: StyleSetToken
positive: StyleSetToken
warning: StyleSetToken
negative: StyleSetToken
}
export const style_token = (style: Style, name: string): StyleToken => {
const token = {
background: color_token(`${name}Background`, style.background),
border: color_token(`${name}Border`, style.border),
foreground: color_token(`${name}Foreground`, style.foreground),
}
return token
}
export const style_set_token = (
style_set: StyleSet,
name: string
): StyleSetToken => {
const token: StyleSetToken = {} as StyleSetToken
for (const style in style_set) {
const s = style as keyof StyleSet
token[s] = style_token(style_set[s], `${name}${style}`)
}
return token
}
export const layer_token = (layer: Layer, name: string): LayerToken => {
const token: LayerToken = {} as LayerToken
for (const style_set in layer) {
const s = style_set as keyof Layer
token[s] = style_set_token(layer[s], `${name}${style_set}`)
}
return token
}