add solarized dark and light syntax themes
This commit is contained in:
Keith Simmons
parent
c61ae6f31f
commit
d0ee686e09
11 changed files with 4084 additions and 3 deletions
1338
assets/themes/solarized-dark.json
Normal file
1338
assets/themes/solarized-dark.json
Normal file
File diff suppressed because it is too large
Load diff
1338
assets/themes/solarized-light.json
Normal file
1338
assets/themes/solarized-light.json
Normal file
File diff suppressed because it is too large
Load diff
567
styles/dist/solarized-dark.json
vendored
Normal file
567
styles/dist/solarized-dark.json
vendored
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
567
styles/dist/tokens.json
vendored
567
styles/dist/tokens.json
vendored
|
|
@ -2515,5 +2515,572 @@
|
||||||
"value": 0.12,
|
"value": 0.12,
|
||||||
"type": "number"
|
"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"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3,9 +3,11 @@ import * as path from "path";
|
||||||
import app from "./styleTree/app";
|
import app from "./styleTree/app";
|
||||||
import dark from "./themes/dark";
|
import dark from "./themes/dark";
|
||||||
import light from "./themes/light";
|
import light from "./themes/light";
|
||||||
|
import solarizedDark from "./themes/solarized-dark";
|
||||||
|
import solarizedLight from "./themes/solarized-light";
|
||||||
import snakeCase from "./utils/snakeCase";
|
import snakeCase from "./utils/snakeCase";
|
||||||
|
|
||||||
const themes = [dark, light];
|
const themes = [dark, light, solarizedDark, solarizedLight];
|
||||||
for (let theme of themes) {
|
for (let theme of themes) {
|
||||||
let styleTree = snakeCase(app(theme));
|
let styleTree = snakeCase(app(theme));
|
||||||
let styleTreeJSON = JSON.stringify(styleTree, null, 2);
|
let styleTreeJSON = JSON.stringify(styleTree, null, 2);
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,8 @@ import * as fs from "fs";
|
||||||
import * as path from "path";
|
import * as path from "path";
|
||||||
import dark from "./themes/dark";
|
import dark from "./themes/dark";
|
||||||
import light from "./themes/light";
|
import light from "./themes/light";
|
||||||
|
import solarizedDark from "./themes/solarized-dark";
|
||||||
|
import solarizedLight from "./themes/solarized-light";
|
||||||
import Theme from "./themes/theme";
|
import Theme from "./themes/theme";
|
||||||
import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
|
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.
|
// 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.
|
// 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) => {
|
themes.forEach((theme) => {
|
||||||
const themePath = `${distPath}/${theme.name}.json`
|
const themePath = `${distPath}/${theme.name}.json`
|
||||||
fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
|
fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { colors, fontWeights, NumberToken } from "../tokens";
|
import { color, colors, fontWeights, NumberToken } from "../tokens";
|
||||||
import { withOpacity } from "../utils/color";
|
import { withOpacity } from "../utils/color";
|
||||||
import Theme, { buildPlayer, Syntax } from "./theme";
|
import Theme, { buildPlayer, Syntax } from "./theme";
|
||||||
|
|
||||||
|
|
|
||||||
3
styles/src/themes/solarized-dark.ts
Normal file
3
styles/src/themes/solarized-dark.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { solarized } from "./solarized";
|
||||||
|
|
||||||
|
export default solarized(true);
|
||||||
3
styles/src/themes/solarized-light.ts
Normal file
3
styles/src/themes/solarized-light.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { solarized } from "./solarized";
|
||||||
|
|
||||||
|
export default solarized(false);
|
||||||
255
styles/src/themes/solarized.ts
Normal file
255
styles/src/themes/solarized.ts
Normal 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,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -71,6 +71,12 @@ export interface ColorToken {
|
||||||
type: "color",
|
type: "color",
|
||||||
step?: number,
|
step?: number,
|
||||||
}
|
}
|
||||||
|
export function color(value: string): ColorToken {
|
||||||
|
return {
|
||||||
|
value,
|
||||||
|
type: "color",
|
||||||
|
};
|
||||||
|
}
|
||||||
export const colors = {
|
export const colors = {
|
||||||
neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
|
neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
|
||||||
rose: colorRamp("#F43F5EFF"),
|
rose: colorRamp("#F43F5EFF"),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue