Export additional tokens, standardize naming convention

Nate Butler created 2 years ago

Change summary

styles/src/theme/tokens/colorScheme.ts | 54 +++++++++++++++++++++++++--
styles/src/theme/tokens/players.ts     |  4 +-
2 files changed, 52 insertions(+), 6 deletions(-)

Detailed changes

styles/src/theme/tokens/colorScheme.ts

@@ -1,19 +1,65 @@
-import { ColorScheme } from "../colorScheme"
+import { SingleBoxShadowToken, SingleColorToken, SingleOtherToken, TokenTypes, TokenTypographyValue } from "@tokens-studio/types"
+import { ColorScheme, Shadow, ThemeSyntax } from "../colorScheme"
 import { LayerToken, layerToken } from "./layer"
-import { PlayerTokens, players } from "./players"
+import { PlayersToken, playersToken } from "./players"
 
 interface ColorSchemeTokens {
+    name: SingleOtherToken
+    appearance: SingleOtherToken
     lowest: LayerToken
     middle: LayerToken
     highest: LayerToken
-    players: PlayerTokens
+    players: PlayersToken
+    popoverShadow: SingleBoxShadowToken
+    modalShadow: SingleBoxShadowToken
+    syntax?: ThemeSyntaxToken
 }
 
+const createShadowToken = (shadow: Shadow, tokenName: string): SingleBoxShadowToken => {
+    return {
+        name: tokenName,
+        type: TokenTypes.BOX_SHADOW,
+        value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`
+    };
+};
+
+const popoverShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
+    const shadow = colorScheme.popoverShadow;
+    return createShadowToken(shadow, "popoverShadow");
+};
+
+const modalShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
+    const shadow = colorScheme.modalShadow;
+    return createShadowToken(shadow, "modalShadow");
+};
+
+interface SyntaxHighlightStyleToken {
+    color: SingleColorToken
+    weight: TokenTypographyValue['fontWeight']
+    underline: TokenTypographyValue['textDecoration']
+    italic: SingleOtherToken
+}
+
+// TODO: Implement exporting syntax tokens
+type ThemeSyntaxToken = Record<keyof ThemeSyntax, SyntaxHighlightStyleToken>
+
 export function colorSchemeTokens(colorScheme: ColorScheme): ColorSchemeTokens {
     return {
+        name: {
+            name: "themeName",
+            value: colorScheme.name,
+            type: TokenTypes.OTHER,
+        },
+        appearance: {
+            name: "themeAppearance",
+            value: colorScheme.isLight ? "light" : "dark",
+            type: TokenTypes.OTHER,
+        },
         lowest: layerToken(colorScheme.lowest, "lowest"),
         middle: layerToken(colorScheme.middle, "middle"),
         highest: layerToken(colorScheme.highest, "highest"),
-        players: players(colorScheme),
+        popoverShadow: popoverShadowToken(colorScheme),
+        modalShadow: modalShadowToken(colorScheme),
+        players: playersToken(colorScheme),
     }
 }

styles/src/theme/tokens/players.ts

@@ -4,7 +4,7 @@ import { colorToken } from "./token"
 
 export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
 
-export type PlayerTokens = Record<keyof Players, PlayerToken>
+export type PlayersToken = Record<keyof Players, PlayerToken>
 
 function buildPlayerToken(colorScheme: ColorScheme, index: number): PlayerToken {
 
@@ -16,7 +16,7 @@ function buildPlayerToken(colorScheme: ColorScheme, index: number): PlayerToken
     }
 }
 
-export const players = (colorScheme: ColorScheme): PlayerTokens => ({
+export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({
     "0": buildPlayerToken(colorScheme, 0),
     "1": buildPlayerToken(colorScheme, 1),
     "2": buildPlayerToken(colorScheme, 2),