Nate Butler created
styles/src/build_tokens.ts | 2
styles/src/theme/tokens/color_scheme.ts | 23 +++++++++++++--------
styles/src/theme/tokens/players.ts | 28 +++++++++++++++-----------
3 files changed, 31 insertions(+), 22 deletions(-)
@@ -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 })
@@ -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(),
}
}
@@ -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),
+ }
+}