Update a few more components

This commit is contained in:
Nate Butler 2023-07-04 00:32:27 -04:00
parent d5acfe8fc1
commit 8a5e7047f0
3 changed files with 31 additions and 22 deletions

View File

@ -60,7 +60,7 @@ function write_tokens(themes: ColorScheme[], tokens_directory: string) {
for (const theme of themes) {
const file_name = slugify(theme.name) + ".json"
const tokens = theme_tokens(theme)
const tokens = theme_tokens()
const tokens_json = JSON.stringify(tokens, null, 2)
const out_path = path.join(tokens_directory, file_name)
fs.writeFileSync(out_path, tokens_json, { mode: 0o644 })

View File

@ -15,6 +15,7 @@ import { PlayersToken, players_token } from "./players"
import { color_token } from "./token"
import { Syntax } from "../syntax"
import editor from "../../style_tree/editor"
import { useTheme } from "@/src/common"
interface ColorSchemeTokens {
name: SingleOtherToken
@ -39,12 +40,14 @@ const create_shadow_token = (
}
}
const popover_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
const popover_shadow_token = (): SingleBoxShadowToken => {
const theme = useTheme()
const shadow = theme.popover_shadow
return create_shadow_token(shadow, "popover_shadow")
}
const modal_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
const modal_shadow_token = (): SingleBoxShadowToken => {
const theme = useTheme()
const shadow = theme.modal_shadow
return create_shadow_token(shadow, "modal_shadow")
}
@ -68,13 +71,15 @@ function syntax_highlight_style_color_tokens(
}, {} as ThemeSyntaxColorTokens)
}
const syntax_tokens = (theme: ColorScheme): ColorSchemeTokens["syntax"] => {
const syntax = editor(theme).syntax
const syntax_tokens = (): ColorSchemeTokens["syntax"] => {
const syntax = editor().syntax
return syntax_highlight_style_color_tokens(syntax)
}
export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
export function theme_tokens(): ColorSchemeTokens {
const theme = useTheme()
return {
name: {
name: "themeName",
@ -89,9 +94,9 @@ export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
lowest: layer_token(theme.lowest, "lowest"),
middle: layer_token(theme.middle, "middle"),
highest: layer_token(theme.highest, "highest"),
popover_shadow: popover_shadow_token(theme),
modal_shadow: modal_shadow_token(theme),
players: players_token(theme),
syntax: syntax_tokens(theme),
popover_shadow: popover_shadow_token(),
modal_shadow: modal_shadow_token(),
players: players_token(),
syntax: syntax_tokens(),
}
}

View File

@ -1,12 +1,14 @@
import { SingleColorToken } from "@tokens-studio/types"
import { color_token } from "./token"
import { ColorScheme, Players } from "../color_scheme"
import { Players } from "../color_scheme"
import { useTheme } from "@/src/common"
export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
export type PlayersToken = Record<keyof Players, PlayerToken>
function build_player_token(theme: ColorScheme, index: number): PlayerToken {
function build_player_token(index: number): PlayerToken {
const theme = useTheme()
const player_number = index.toString() as keyof Players
return {
@ -21,13 +23,15 @@ function build_player_token(theme: ColorScheme, index: number): PlayerToken {
}
}
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),
})
export const players_token = (): PlayersToken => {
return {
"0": build_player_token(0),
"1": build_player_token(1),
"2": build_player_token(2),
"3": build_player_token(3),
"4": build_player_token(4),
"5": build_player_token(5),
"6": build_player_token(6),
"7": build_player_token(7),
}
}