add solarized dark and light syntax themes

This commit is contained in:
Keith Simmons 2022-04-22 12:07:43 -07:00
parent c61ae6f31f
commit d0ee686e09
11 changed files with 4084 additions and 3 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

567
styles/dist/solarized-dark.json vendored Normal file
View file

@ -0,0 +1,567 @@
{
"meta": {
"themeName": "solarized-dark"
},
"text": {
"primary": {
"value": "#fdf6e3",
"type": "color"
},
"secondary": {
"value": "#eee8d5",
"type": "color"
},
"muted": {
"value": "#839496",
"type": "color"
},
"placeholder": {
"value": "#839496",
"type": "color"
},
"active": {
"value": "#002b36",
"type": "color"
},
"feature": {
"value": "#268bd2",
"type": "color"
},
"ok": {
"value": "#859900",
"type": "color"
},
"error": {
"value": "#dc322f",
"type": "color"
},
"warning": {
"value": "#b58900",
"type": "color"
},
"info": {
"value": "#268bd2",
"type": "color"
}
},
"icon": {
"primary": {
"value": "#fdf6e3",
"type": "color"
},
"secondary": {
"value": "#eee8d5",
"type": "color"
},
"muted": {
"value": "#839496",
"type": "color"
},
"placeholder": {
"value": "#839496",
"type": "color"
},
"active": {
"value": "#002b36",
"type": "color"
},
"feature": {
"value": "#268bd2",
"type": "color"
},
"ok": {
"value": "#859900",
"type": "color"
},
"error": {
"value": "#dc322f",
"type": "color"
},
"warning": {
"value": "#b58900",
"type": "color"
},
"info": {
"value": "#268bd2",
"type": "color"
}
},
"background": {
"100": {
"base": {
"value": "#073642",
"type": "color"
},
"hovered": {
"value": "#002b36",
"type": "color"
},
"active": {
"value": "#586e75",
"type": "color"
},
"focused": {
"value": "#657b83",
"type": "color"
}
},
"300": {
"base": {
"value": "#586e75",
"type": "color"
},
"hovered": {
"value": "#073642",
"type": "color"
},
"active": {
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
}
},
"500": {
"base": {
"value": "#657b83",
"type": "color"
},
"hovered": {
"value": "#586e75",
"type": "color"
},
"active": {
"value": "#839496",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
}
},
"on300": {
"base": {
"value": "#586e75",
"type": "color"
},
"hovered": {
"value": "#073642",
"type": "color"
},
"active": {
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
}
},
"on500": {
"base": {
"value": "#586e75",
"type": "color"
},
"hovered": {
"value": "#073642",
"type": "color"
},
"active": {
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
}
},
"ok": {
"base": {
"value": "#859900",
"type": "color"
},
"hovered": {
"value": "#859900",
"type": "color"
},
"active": {
"value": "#859900",
"type": "color"
},
"focused": {
"value": "#859900",
"type": "color"
}
},
"error": {
"base": {
"value": "#dc322f",
"type": "color"
},
"hovered": {
"value": "#dc322f",
"type": "color"
},
"active": {
"value": "#dc322f",
"type": "color"
},
"focused": {
"value": "#dc322f",
"type": "color"
}
},
"warning": {
"base": {
"value": "#b58900",
"type": "color"
},
"hovered": {
"value": "#b58900",
"type": "color"
},
"active": {
"value": "#b58900",
"type": "color"
},
"focused": {
"value": "#b58900",
"type": "color"
}
},
"info": {
"base": {
"value": "#268bd2",
"type": "color"
},
"hovered": {
"value": "#268bd2",
"type": "color"
},
"active": {
"value": "#268bd2",
"type": "color"
},
"focused": {
"value": "#268bd2",
"type": "color"
}
}
},
"border": {
"primary": {
"value": "#657b83",
"type": "color"
},
"secondary": {
"value": "#586e75",
"type": "color"
},
"muted": {
"value": "#073642",
"type": "color"
},
"focused": {
"value": "#002b36",
"type": "color"
},
"active": {
"value": "#839496",
"type": "color"
},
"ok": {
"value": "#859900",
"type": "color"
},
"error": {
"value": "#dc322f",
"type": "color"
},
"warning": {
"value": "#b58900",
"type": "color"
},
"info": {
"value": "#268bd2",
"type": "color"
}
},
"editor": {
"background": {
"value": "#657b83",
"type": "color"
},
"indent_guide": {
"value": "#073642",
"type": "color"
},
"indent_guide_active": {
"value": "#586e75",
"type": "color"
},
"line": {
"active": {
"value": "#002b3612",
"type": "color"
},
"highlighted": {
"value": "#002b361f",
"type": "color"
},
"inserted": {
"value": "#859900",
"type": "color"
},
"deleted": {
"value": "#dc322f",
"type": "color"
},
"modified": {
"value": "#268bd2",
"type": "color"
}
},
"highlight": {
"selection": {
"value": "#268bd23d",
"type": "color"
},
"occurrence": {
"value": "#002b361f",
"type": "color"
},
"activeOccurrence": {
"value": "#002b3629",
"type": "color"
},
"matchingBracket": {
"value": "#839496",
"type": "color"
},
"match": {
"value": "#6c71c480",
"type": "color"
},
"activeMatch": {
"value": "#6c71c4b3",
"type": "color"
},
"related": {
"value": "#839496",
"type": "color"
}
},
"gutter": {
"primary": {
"value": "#839496",
"type": "color"
},
"active": {
"value": "#002b36",
"type": "color"
}
}
},
"syntax": {
"primary": {
"value": "#fdf6e3",
"type": "color"
},
"comment": {
"value": "#eee8d5",
"type": "color"
},
"keyword": {
"value": "#268bd2",
"type": "color"
},
"function": {
"value": "#b58900",
"type": "color"
},
"type": {
"value": "#2aa198",
"type": "color"
},
"variant": {
"value": "#268bd2",
"type": "color"
},
"property": {
"value": "#268bd2",
"type": "color"
},
"enum": {
"value": "#cb4b16",
"type": "color"
},
"operator": {
"value": "#cb4b16",
"type": "color"
},
"string": {
"value": "#cb4b16",
"type": "color"
},
"number": {
"value": "#859900",
"type": "color"
},
"boolean": {
"value": "#859900",
"type": "color"
}
},
"player": {
"1": {
"baseColor": {
"value": "#268bd2",
"type": "color"
},
"cursorColor": {
"value": "#268bd2",
"type": "color"
},
"selectionColor": {
"value": "#268bd23d",
"type": "color"
},
"borderColor": {
"value": "#268bd2cc",
"type": "color"
}
},
"2": {
"baseColor": {
"value": "#859900",
"type": "color"
},
"cursorColor": {
"value": "#859900",
"type": "color"
},
"selectionColor": {
"value": "#8599003d",
"type": "color"
},
"borderColor": {
"value": "#859900cc",
"type": "color"
}
},
"3": {
"baseColor": {
"value": "#d33682",
"type": "color"
},
"cursorColor": {
"value": "#d33682",
"type": "color"
},
"selectionColor": {
"value": "#d336823d",
"type": "color"
},
"borderColor": {
"value": "#d33682cc",
"type": "color"
}
},
"4": {
"baseColor": {
"value": "#cb4b16",
"type": "color"
},
"cursorColor": {
"value": "#cb4b16",
"type": "color"
},
"selectionColor": {
"value": "#cb4b163d",
"type": "color"
},
"borderColor": {
"value": "#cb4b16cc",
"type": "color"
}
},
"5": {
"baseColor": {
"value": "#6c71c4",
"type": "color"
},
"cursorColor": {
"value": "#6c71c4",
"type": "color"
},
"selectionColor": {
"value": "#6c71c43d",
"type": "color"
},
"borderColor": {
"value": "#6c71c4cc",
"type": "color"
}
},
"6": {
"baseColor": {
"value": "#2aa198",
"type": "color"
},
"cursorColor": {
"value": "#2aa198",
"type": "color"
},
"selectionColor": {
"value": "#2aa1983d",
"type": "color"
},
"borderColor": {
"value": "#2aa198cc",
"type": "color"
}
},
"7": {
"baseColor": {
"value": "#dc322f",
"type": "color"
},
"cursorColor": {
"value": "#dc322f",
"type": "color"
},
"selectionColor": {
"value": "#dc322f3d",
"type": "color"
},
"borderColor": {
"value": "#dc322fcc",
"type": "color"
}
},
"8": {
"baseColor": {
"value": "#b58900",
"type": "color"
},
"cursorColor": {
"value": "#b58900",
"type": "color"
},
"selectionColor": {
"value": "#b589003d",
"type": "color"
},
"borderColor": {
"value": "#b58900cc",
"type": "color"
}
}
},
"shadowAlpha": {
"value": 0.32,
"type": "number"
}
}

View file

@ -2515,5 +2515,572 @@
"value": 0.12,
"type": "number"
}
},
"solarized-dark": {
"meta": {
"themeName": "solarized-dark"
},
"text": {
"primary": {
"value": "#fdf6e3",
"type": "color"
},
"secondary": {
"value": "#eee8d5",
"type": "color"
},
"muted": {
"value": "#839496",
"type": "color"
},
"placeholder": {
"value": "#839496",
"type": "color"
},
"active": {
"value": "#002b36",
"type": "color"
},
"feature": {
"value": "#268bd2",
"type": "color"
},
"ok": {
"value": "#859900",
"type": "color"
},
"error": {
"value": "#dc322f",
"type": "color"
},
"warning": {
"value": "#b58900",
"type": "color"
},
"info": {
"value": "#268bd2",
"type": "color"
}
},
"icon": {
"primary": {
"value": "#fdf6e3",
"type": "color"
},
"secondary": {
"value": "#eee8d5",
"type": "color"
},
"muted": {
"value": "#839496",
"type": "color"
},
"placeholder": {
"value": "#839496",
"type": "color"
},
"active": {
"value": "#002b36",
"type": "color"
},
"feature": {
"value": "#268bd2",
"type": "color"
},
"ok": {
"value": "#859900",
"type": "color"
},
"error": {
"value": "#dc322f",
"type": "color"
},
"warning": {
"value": "#b58900",
"type": "color"
},
"info": {
"value": "#268bd2",
"type": "color"
}
},
"background": {
"100": {
"base": {
"value": "#073642",
"type": "color"
},
"hovered": {
"value": "#002b36",
"type": "color"
},
"active": {
"value": "#586e75",
"type": "color"
},
"focused": {
"value": "#657b83",
"type": "color"
}
},
"300": {
"base": {
"value": "#586e75",
"type": "color"
},
"hovered": {
"value": "#073642",
"type": "color"
},
"active": {
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
}
},
"500": {
"base": {
"value": "#657b83",
"type": "color"
},
"hovered": {
"value": "#586e75",
"type": "color"
},
"active": {
"value": "#839496",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
}
},
"on300": {
"base": {
"value": "#586e75",
"type": "color"
},
"hovered": {
"value": "#073642",
"type": "color"
},
"active": {
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
}
},
"on500": {
"base": {
"value": "#586e75",
"type": "color"
},
"hovered": {
"value": "#073642",
"type": "color"
},
"active": {
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
}
},
"ok": {
"base": {
"value": "#859900",
"type": "color"
},
"hovered": {
"value": "#859900",
"type": "color"
},
"active": {
"value": "#859900",
"type": "color"
},
"focused": {
"value": "#859900",
"type": "color"
}
},
"error": {
"base": {
"value": "#dc322f",
"type": "color"
},
"hovered": {
"value": "#dc322f",
"type": "color"
},
"active": {
"value": "#dc322f",
"type": "color"
},
"focused": {
"value": "#dc322f",
"type": "color"
}
},
"warning": {
"base": {
"value": "#b58900",
"type": "color"
},
"hovered": {
"value": "#b58900",
"type": "color"
},
"active": {
"value": "#b58900",
"type": "color"
},
"focused": {
"value": "#b58900",
"type": "color"
}
},
"info": {
"base": {
"value": "#268bd2",
"type": "color"
},
"hovered": {
"value": "#268bd2",
"type": "color"
},
"active": {
"value": "#268bd2",
"type": "color"
},
"focused": {
"value": "#268bd2",
"type": "color"
}
}
},
"border": {
"primary": {
"value": "#657b83",
"type": "color"
},
"secondary": {
"value": "#586e75",
"type": "color"
},
"muted": {
"value": "#073642",
"type": "color"
},
"focused": {
"value": "#002b36",
"type": "color"
},
"active": {
"value": "#839496",
"type": "color"
},
"ok": {
"value": "#859900",
"type": "color"
},
"error": {
"value": "#dc322f",
"type": "color"
},
"warning": {
"value": "#b58900",
"type": "color"
},
"info": {
"value": "#268bd2",
"type": "color"
}
},
"editor": {
"background": {
"value": "#657b83",
"type": "color"
},
"indent_guide": {
"value": "#073642",
"type": "color"
},
"indent_guide_active": {
"value": "#586e75",
"type": "color"
},
"line": {
"active": {
"value": "#002b3612",
"type": "color"
},
"highlighted": {
"value": "#002b361f",
"type": "color"
},
"inserted": {
"value": "#859900",
"type": "color"
},
"deleted": {
"value": "#dc322f",
"type": "color"
},
"modified": {
"value": "#268bd2",
"type": "color"
}
},
"highlight": {
"selection": {
"value": "#268bd23d",
"type": "color"
},
"occurrence": {
"value": "#002b361f",
"type": "color"
},
"activeOccurrence": {
"value": "#002b3629",
"type": "color"
},
"matchingBracket": {
"value": "#839496",
"type": "color"
},
"match": {
"value": "#6c71c480",
"type": "color"
},
"activeMatch": {
"value": "#6c71c4b3",
"type": "color"
},
"related": {
"value": "#839496",
"type": "color"
}
},
"gutter": {
"primary": {
"value": "#839496",
"type": "color"
},
"active": {
"value": "#002b36",
"type": "color"
}
}
},
"syntax": {
"primary": {
"value": "#fdf6e3",
"type": "color"
},
"comment": {
"value": "#eee8d5",
"type": "color"
},
"keyword": {
"value": "#268bd2",
"type": "color"
},
"function": {
"value": "#b58900",
"type": "color"
},
"type": {
"value": "#2aa198",
"type": "color"
},
"variant": {
"value": "#268bd2",
"type": "color"
},
"property": {
"value": "#268bd2",
"type": "color"
},
"enum": {
"value": "#cb4b16",
"type": "color"
},
"operator": {
"value": "#cb4b16",
"type": "color"
},
"string": {
"value": "#cb4b16",
"type": "color"
},
"number": {
"value": "#859900",
"type": "color"
},
"boolean": {
"value": "#859900",
"type": "color"
}
},
"player": {
"1": {
"baseColor": {
"value": "#268bd2",
"type": "color"
},
"cursorColor": {
"value": "#268bd2",
"type": "color"
},
"selectionColor": {
"value": "#268bd23d",
"type": "color"
},
"borderColor": {
"value": "#268bd2cc",
"type": "color"
}
},
"2": {
"baseColor": {
"value": "#859900",
"type": "color"
},
"cursorColor": {
"value": "#859900",
"type": "color"
},
"selectionColor": {
"value": "#8599003d",
"type": "color"
},
"borderColor": {
"value": "#859900cc",
"type": "color"
}
},
"3": {
"baseColor": {
"value": "#d33682",
"type": "color"
},
"cursorColor": {
"value": "#d33682",
"type": "color"
},
"selectionColor": {
"value": "#d336823d",
"type": "color"
},
"borderColor": {
"value": "#d33682cc",
"type": "color"
}
},
"4": {
"baseColor": {
"value": "#cb4b16",
"type": "color"
},
"cursorColor": {
"value": "#cb4b16",
"type": "color"
},
"selectionColor": {
"value": "#cb4b163d",
"type": "color"
},
"borderColor": {
"value": "#cb4b16cc",
"type": "color"
}
},
"5": {
"baseColor": {
"value": "#6c71c4",
"type": "color"
},
"cursorColor": {
"value": "#6c71c4",
"type": "color"
},
"selectionColor": {
"value": "#6c71c43d",
"type": "color"
},
"borderColor": {
"value": "#6c71c4cc",
"type": "color"
}
},
"6": {
"baseColor": {
"value": "#2aa198",
"type": "color"
},
"cursorColor": {
"value": "#2aa198",
"type": "color"
},
"selectionColor": {
"value": "#2aa1983d",
"type": "color"
},
"borderColor": {
"value": "#2aa198cc",
"type": "color"
}
},
"7": {
"baseColor": {
"value": "#dc322f",
"type": "color"
},
"cursorColor": {
"value": "#dc322f",
"type": "color"
},
"selectionColor": {
"value": "#dc322f3d",
"type": "color"
},
"borderColor": {
"value": "#dc322fcc",
"type": "color"
}
},
"8": {
"baseColor": {
"value": "#b58900",
"type": "color"
},
"cursorColor": {
"value": "#b58900",
"type": "color"
},
"selectionColor": {
"value": "#b589003d",
"type": "color"
},
"borderColor": {
"value": "#b58900cc",
"type": "color"
}
}
},
"shadowAlpha": {
"value": 0.32,
"type": "number"
}
}
}

View file

@ -3,9 +3,11 @@ import * as path from "path";
import app from "./styleTree/app";
import dark from "./themes/dark";
import light from "./themes/light";
import solarizedDark from "./themes/solarized-dark";
import solarizedLight from "./themes/solarized-light";
import snakeCase from "./utils/snakeCase";
const themes = [dark, light];
const themes = [dark, light, solarizedDark, solarizedLight];
for (let theme of themes) {
let styleTree = snakeCase(app(theme));
let styleTreeJSON = JSON.stringify(styleTree, null, 2);

View file

@ -2,6 +2,8 @@ import * as fs from "fs";
import * as path from "path";
import dark from "./themes/dark";
import light from "./themes/light";
import solarizedDark from "./themes/solarized-dark";
import solarizedLight from "./themes/solarized-light";
import Theme from "./themes/theme";
import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
@ -96,7 +98,7 @@ combinedTokens.core = coreTokens;
// Add each theme to the combined tokens and write ${theme}.json.
// We write `${theme}.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
let themes = [dark, light];
let themes = [dark, light, solarizedDark, solarizedLight];
themes.forEach((theme) => {
const themePath = `${distPath}/${theme.name}.json`
fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));

View file

@ -1,4 +1,4 @@
import { colors, fontWeights, NumberToken } from "../tokens";
import { color, colors, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";

View file

@ -0,0 +1,3 @@
import { solarized } from "./solarized";
export default solarized(true);

View file

@ -0,0 +1,3 @@
import { solarized } from "./solarized";
export default solarized(false);

View file

@ -0,0 +1,255 @@
import { color, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
const dark = {
0: color("#657b83"),
1: color("#586e75"),
2: color("#073642"),
3: color("#002b36"),
};
const light = {
0: color("#839496"),
1: color("#93a1a1"),
2: color("#eee8d5"),
3: color("#fdf6e3"),
};
const colors = {
"yellow": color("#b58900"),
"orange": color("#cb4b16"),
"red": color("#dc322f"),
"magenta": color("#d33682"),
"violet": color("#6c71c4"),
"blue": color("#268bd2"),
"cyan": color("#2aa198"),
"green": color("#859900"),
};
export function solarized(darkTheme: boolean): Theme {
let fg = darkTheme ? light : dark;
let bg = darkTheme ? dark : light;
let name = darkTheme ? "solarized-dark" : "solarized-light";
const backgroundColor = {
100: {
base: bg[2],
hovered: bg[1],
active: bg[1],
focused: bg[1],
},
300: {
base: bg[2],
hovered: bg[1],
active: bg[1],
focused: bg[1],
},
500: {
base: bg[3],
hovered: bg[2],
active: bg[2],
focused: bg[2],
},
on300: {
base: bg[2],
hovered: bg[1],
active: bg[1],
focused: bg[1],
},
on500: {
base: bg[2],
hovered: bg[1],
active: bg[1],
focused: bg[1],
},
ok: {
base: colors.green,
hovered: colors.green,
active: colors.green,
focused: colors.green,
},
error: {
base: colors.red,
hovered: colors.red,
active: colors.red,
focused: colors.red,
},
warning: {
base: colors.yellow,
hovered: colors.yellow,
active: colors.yellow,
focused: colors.yellow,
},
info: {
base: colors.blue,
hovered: colors.blue,
active: colors.blue,
focused: colors.blue,
},
};
const borderColor = {
primary: bg[3],
secondary: bg[2],
muted: bg[1],
focused: bg[1],
active: bg[1],
ok: colors.green,
error: colors.red,
warning: colors.yellow,
info: colors.blue,
};
const textColor = {
primary: fg[2],
secondary: fg[1],
muted: fg[1],
placeholder: fg[0],
active: fg[3],
//TODO: (design) define feature and it's correct value
feature: colors.blue,
ok: colors.green,
error: colors.red,
warning: colors.yellow,
info: colors.blue,
};
const player = {
1: buildPlayer(colors.blue),
2: buildPlayer(colors.green),
3: buildPlayer(colors.magenta),
4: buildPlayer(colors.orange),
5: buildPlayer(colors.violet),
6: buildPlayer(colors.cyan),
7: buildPlayer(colors.red),
8: buildPlayer(colors.yellow),
};
const editor = {
background: backgroundColor[500].base,
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: withOpacity(fg[3], 0.07),
highlighted: withOpacity(fg[3], 0.12),
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(bg[0], 0.12),
activeOccurrence: withOpacity(bg[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
matchingBracket: backgroundColor[500].active,
match: withOpacity(colors.violet, 0.5),
activeMatch: withOpacity(colors.violet, 0.7),
related: backgroundColor[500].focused,
},
gutter: {
primary: textColor.placeholder,
active: textColor.active,
},
};
const syntax: Syntax = {
primary: {
color: fg[3],
weight: fontWeights.normal,
},
comment: {
color: fg[2],
weight: fontWeights.normal,
},
punctuation: {
color: fg[1],
weight: fontWeights.normal,
},
constant: {
color: fg[0],
weight: fontWeights.normal,
},
keyword: {
color: colors.blue,
weight: fontWeights.normal,
},
function: {
color: colors.yellow,
weight: fontWeights.normal,
},
type: {
color: colors.cyan,
weight: fontWeights.normal,
},
variant: {
color: colors.blue,
weight: fontWeights.normal,
},
property: {
color: colors.blue,
weight: fontWeights.normal,
},
enum: {
color: colors.orange,
weight: fontWeights.normal,
},
operator: {
color: colors.orange,
weight: fontWeights.normal,
},
string: {
color: colors.orange,
weight: fontWeights.normal,
},
number: {
color: colors.green,
weight: fontWeights.normal,
},
boolean: {
color: colors.green,
weight: fontWeights.normal,
},
predictive: {
color: textColor.muted,
weight: fontWeights.normal,
},
title: {
color: colors.yellow,
weight: fontWeights.bold,
},
emphasis: {
color: textColor.active,
weight: fontWeights.normal,
},
emphasisStrong: {
color: textColor.active,
weight: fontWeights.bold,
},
linkUrl: {
color: colors.green,
weight: fontWeights.normal,
// TODO: add underline
},
linkText: {
color: colors.orange,
weight: fontWeights.normal,
// TODO: add italic
},
};
const shadowAlpha: NumberToken = {
value: 0.32,
type: "number",
};
return {
name,
backgroundColor,
borderColor,
textColor,
iconColor: textColor,
editor,
syntax,
player,
shadowAlpha,
};
}

View file

@ -71,6 +71,12 @@ export interface ColorToken {
type: "color",
step?: number,
}
export function color(value: string): ColorToken {
return {
value,
type: "color",
};
}
export const colors = {
neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
rose: colorRamp("#F43F5EFF"),