WIP snake_case 5/?

This commit is contained in:
Nate Butler
2023-06-29 11:31:23 -04:00
parent 0627c198fd
commit 97dc7b77f4
23 changed files with 250 additions and 256 deletions
+9 -9
View File
@@ -51,29 +51,29 @@ const modal_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken>
function syntaxHighlightStyleColorTokens(
function syntax_highlight_style_color_tokens(
syntax: Syntax
): ThemeSyntaxColorTokens {
const styleKeys = Object.keys(syntax) as (keyof Syntax)[]
const style_keys = Object.keys(syntax) as (keyof Syntax)[]
return styleKeys.reduce((acc, styleKey) => {
return style_keys.reduce((acc, style_key) => {
// Hack: The type of a style could be "Function"
// This can happen because we have a "constructor" property on the syntax object
// and a "constructor" property on the prototype of the syntax object
// To work around this just assert that the type of the style is not a function
if (!syntax[styleKey] || typeof syntax[styleKey] === "function")
if (!syntax[style_key] || typeof syntax[style_key] === "function")
return acc
const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>
return { ...acc, [styleKey]: colorToken(styleKey, color) }
const { color } = syntax[style_key] as Required<SyntaxHighlightStyle>
return { ...acc, [style_key]: colorToken(style_key, color) }
}, {} as ThemeSyntaxColorTokens)
}
const syntax_Tokens = (
const syntax_tokens = (
theme: ColorScheme
): ColorSchemeTokens["syntax"] => {
const syntax = editor(theme).syntax
return syntaxHighlightStyleColorTokens(syntax)
return syntax_highlight_style_color_tokens(syntax)
}
export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
@@ -94,6 +94,6 @@ export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
popover_shadow: popover_shadow_token(theme),
modal_shadow: modal_shadow_token(theme),
players: playersToken(theme),
syntax: syntax_Tokens(theme),
syntax: syntax_tokens(theme),
}
}
+13 -13
View File
@@ -1,6 +1,6 @@
import { SingleColorToken } from "@tokens-studio/types"
import { Layer, Style, StyleSet } from "../color_scheme"
import { colorToken } from "./token"
import { color_token } from "./token"
interface StyleToken {
background: SingleColorToken
@@ -27,36 +27,36 @@ export interface LayerToken {
negative: StyleSetToken
}
export const styleToken = (style: Style, name: string): StyleToken => {
export const style_token = (style: Style, name: string): StyleToken => {
const token = {
background: colorToken(`${name}Background`, style.background),
border: colorToken(`${name}Border`, style.border),
foreground: colorToken(`${name}Foreground`, style.foreground),
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 styleSetToken = (
styleSet: StyleSet,
export const style_set_token = (
style_set: StyleSet,
name: string
): StyleSetToken => {
const token: StyleSetToken = {} as StyleSetToken
for (const style in styleSet) {
for (const style in style_set) {
const s = style as keyof StyleSet
token[s] = styleToken(styleSet[s], `${name}${style}`)
token[s] = style_token(style_set[s], `${name}${style}`)
}
return token
}
export const layerToken = (layer: Layer, name: string): LayerToken => {
export const layer_token = (layer: Layer, name: string): LayerToken => {
const token: LayerToken = {} as LayerToken
for (const styleSet in layer) {
const s = styleSet as keyof Layer
token[s] = styleSetToken(layer[s], `${name}${styleSet}`)
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
+17 -17
View File
@@ -1,36 +1,36 @@
import { SingleColorToken } from "@tokens-studio/types"
import { colorToken } from "./token"
import { color_token } from "./token"
import { ColorScheme, Players } from "../color_scheme"
export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
export type PlayersToken = Record<keyof Players, PlayerToken>
function buildPlayerToken(
colorScheme: ColorScheme,
function build_player_token(
theme: ColorScheme,
index: number
): PlayerToken {
const playerNumber = index.toString() as keyof Players
const player_number = index.toString() as keyof Players
return {
selection: colorToken(
selection: color_token(
`player${index}Selection`,
colorScheme.players[playerNumber].selection
theme.players[player_number].selection
),
cursor: colorToken(
cursor: color_token(
`player${index}Cursor`,
colorScheme.players[playerNumber].cursor
theme.players[player_number].cursor
),
}
}
export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({
"0": buildPlayerToken(colorScheme, 0),
"1": buildPlayerToken(colorScheme, 1),
"2": buildPlayerToken(colorScheme, 2),
"3": buildPlayerToken(colorScheme, 3),
"4": buildPlayerToken(colorScheme, 4),
"5": buildPlayerToken(colorScheme, 5),
"6": buildPlayerToken(colorScheme, 6),
"7": buildPlayerToken(colorScheme, 7),
export const players_token = (theme: ColorScheme): PlayersToken => ({
"0": build_player_token(theme, 0),
"1": build_player_token(theme, 1),
"2": build_player_token(theme, 2),
"3": build_player_token(theme, 3),
"4": build_player_token(theme, 4),
"5": build_player_token(theme, 5),
"6": build_player_token(theme, 6),
"7": build_player_token(theme, 7),
})
+1 -1
View File
@@ -1,6 +1,6 @@
import { SingleColorToken, TokenTypes } from "@tokens-studio/types"
export function colorToken(
export function color_token(
name: string,
value: string,
description?: string