Add sulphurpool theme, update solarized

Co-Authored-By: Keith Simmons <keith@the-simmons.net>
This commit is contained in:
Nate Butler
2022-04-25 18:07:24 -04:00
co-authored by Keith Simmons
parent 5be7c354f6
commit e28d1828f0
11 changed files with 5937 additions and 81 deletions
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+15 -15
View File
@@ -42,7 +42,7 @@
"weight": "bold",
"size": 14
},
"background": "#586e75"
"background": "#657b83"
},
"border": {
"color": "#002b36",
@@ -368,8 +368,8 @@
"code_actions_indicator": "#93a1a1",
"diff_background_deleted": "#dc322f",
"diff_background_inserted": "#859900",
"document_highlight_read_background": "#657b831f",
"document_highlight_write_background": "#657b8329",
"document_highlight_read_background": "#002b361f",
"document_highlight_write_background": "#002b3629",
"error_color": "#dc322f",
"gutter_background": "#002b36",
"gutter_padding_factor": 3.5,
@@ -697,7 +697,7 @@
"weight": "normal"
},
"comment": {
"color": "#eee8d5",
"color": "#93a1a1",
"weight": "normal"
},
"punctuation": {
@@ -837,7 +837,7 @@
},
"hovered_entry": {
"height": 22,
"background": "#586e75",
"background": "#657b83",
"icon_color": "#93a1a1",
"icon_size": 8,
"icon_spacing": 8,
@@ -860,7 +860,7 @@
},
"hovered_selected_entry": {
"height": 22,
"background": "#586e75",
"background": "#657b83",
"icon_color": "#93a1a1",
"icon_size": 8,
"icon_spacing": 8,
@@ -945,7 +945,7 @@
"right": 8
}
},
"background": "#586e75",
"background": "#657b83",
"corner_radius": 6
},
"active_item": {
@@ -980,7 +980,7 @@
"right": 8
}
},
"background": "#586e75",
"background": "#657b83",
"corner_radius": 6
},
"menu": {
@@ -1098,7 +1098,7 @@
"right": 12
},
"host_row_height": 28,
"tree_branch_color": "#586e75",
"tree_branch_color": "#657b83",
"tree_branch_width": 1,
"host_avatar": {
"corner_radius": 10,
@@ -1170,7 +1170,7 @@
"padding": {
"left": 8
},
"background": "#586e75",
"background": "#657b83",
"corner_radius": 6
},
"unshared_project": {
@@ -1221,10 +1221,10 @@
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#586e75",
"background": "#657b83",
"corner_radius": 4,
"border": {
"color": "#586e75",
"color": "#657b83",
"width": 1
},
"margin": {
@@ -1242,10 +1242,10 @@
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#586e75",
"background": "#657b83",
"corner_radius": 4,
"border": {
"color": "#586e75",
"color": "#657b83",
"width": 1
},
"margin": {
@@ -1299,7 +1299,7 @@
"background": "#073642",
"corner_radius": 4,
"border": {
"color": "#586e75",
"color": "#657b83",
"width": 1
},
"margin": {
+15 -15
View File
@@ -42,7 +42,7 @@
"weight": "bold",
"size": 14
},
"background": "#93a1a1"
"background": "#839496"
},
"border": {
"color": "#fdf6e3",
@@ -368,8 +368,8 @@
"code_actions_indicator": "#586e75",
"diff_background_deleted": "#dc322f",
"diff_background_inserted": "#859900",
"document_highlight_read_background": "#8394961f",
"document_highlight_write_background": "#83949629",
"document_highlight_read_background": "#fdf6e31f",
"document_highlight_write_background": "#fdf6e329",
"error_color": "#dc322f",
"gutter_background": "#fdf6e3",
"gutter_padding_factor": 3.5,
@@ -697,7 +697,7 @@
"weight": "normal"
},
"comment": {
"color": "#073642",
"color": "#586e75",
"weight": "normal"
},
"punctuation": {
@@ -837,7 +837,7 @@
},
"hovered_entry": {
"height": 22,
"background": "#93a1a1",
"background": "#839496",
"icon_color": "#586e75",
"icon_size": 8,
"icon_spacing": 8,
@@ -860,7 +860,7 @@
},
"hovered_selected_entry": {
"height": 22,
"background": "#93a1a1",
"background": "#839496",
"icon_color": "#586e75",
"icon_size": 8,
"icon_spacing": 8,
@@ -945,7 +945,7 @@
"right": 8
}
},
"background": "#93a1a1",
"background": "#839496",
"corner_radius": 6
},
"active_item": {
@@ -980,7 +980,7 @@
"right": 8
}
},
"background": "#93a1a1",
"background": "#839496",
"corner_radius": 6
},
"menu": {
@@ -1098,7 +1098,7 @@
"right": 12
},
"host_row_height": 28,
"tree_branch_color": "#93a1a1",
"tree_branch_color": "#839496",
"tree_branch_width": 1,
"host_avatar": {
"corner_radius": 10,
@@ -1170,7 +1170,7 @@
"padding": {
"left": 8
},
"background": "#93a1a1",
"background": "#839496",
"corner_radius": 6
},
"unshared_project": {
@@ -1221,10 +1221,10 @@
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#93a1a1",
"background": "#839496",
"corner_radius": 4,
"border": {
"color": "#93a1a1",
"color": "#839496",
"width": 1
},
"margin": {
@@ -1242,10 +1242,10 @@
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#93a1a1",
"background": "#839496",
"corner_radius": 4,
"border": {
"color": "#93a1a1",
"color": "#839496",
"width": 1
},
"margin": {
@@ -1299,7 +1299,7 @@
"background": "#eee8d5",
"corner_radius": 4,
"border": {
"color": "#93a1a1",
"color": "#839496",
"width": 1
},
"margin": {
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+8 -1
View File
@@ -5,9 +5,16 @@ import dark from "./themes/dark";
import light from "./themes/light";
import solarizedDark from "./themes/solarized-dark";
import solarizedLight from "./themes/solarized-light";
import sulphurpoolDark from "./themes/sulphurpool-dark";
import sulphurpoolLight from "./themes/sulphurpool-light";
import snakeCase from "./utils/snakeCase";
const themes = [dark, light, solarizedDark, solarizedLight];
const themes = [
dark, light,
solarizedDark, solarizedLight,
sulphurpoolDark, sulphurpoolLight
];
for (let theme of themes) {
let styleTree = snakeCase(app(theme));
let styleTreeJSON = JSON.stringify(styleTree, null, 2);
+52 -50
View File
@@ -2,28 +2,30 @@ import { color, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
// Dark: 0 == Darkest, 3 == Lightest
const dark = {
0: color("#657b83"),
1: color("#586e75"),
2: color("#073642"),
3: color("#002b36"),
0: color("#002b36"),
1: color("#073642"),
2: color("#586e75"),
3: color("#657b83"),
};
// Light: 0 == Lightest, 3 == Darkest
const light = {
0: color("#839496"),
1: color("#93a1a1"),
2: color("#eee8d5"),
3: color("#fdf6e3"),
0: color("#fdf6e3"),
1: color("#eee8d5"),
2: color("#93a1a1"),
3: color("#839496"),
};
const colors = {
"yellow": color("#b58900"),
"orange": color("#cb4b16"),
"red": color("#dc322f"),
"magenta": color("#d33682"),
"violet": color("#6c71c4"),
"blue": color("#268bd2"),
"cyan": color("#2aa198"),
"orange": color("#cb4b16"),
"yellow": color("#b58900"),
"green": color("#859900"),
"cyan": color("#2aa198"),
"blue": color("#268bd2"),
"violet": color("#6c71c4"),
"magenta": color("#d33682"),
};
export function solarized(darkTheme: boolean): Theme {
@@ -33,35 +35,35 @@ export function solarized(darkTheme: boolean): Theme {
const backgroundColor = {
100: {
base: bg[2],
hovered: bg[1],
active: bg[1],
focused: bg[1],
base: bg[1],
hovered: bg[3],
active: bg[3],
focused: bg[3],
},
300: {
base: bg[2],
hovered: bg[1],
active: bg[1],
focused: bg[1],
base: bg[1],
hovered: bg[3],
active: bg[3],
focused: bg[3],
},
500: {
base: bg[3],
hovered: bg[2],
active: bg[2],
focused: bg[2],
},
on300: {
base: bg[3],
hovered: bg[2],
active: bg[2],
focused: bg[2],
},
on500: {
base: bg[2],
base: bg[0],
hovered: bg[1],
active: bg[1],
focused: bg[1],
},
on300: {
base: bg[0],
hovered: bg[1],
active: bg[1],
focused: bg[1],
},
on500: {
base: bg[1],
hovered: bg[3],
active: bg[3],
focused: bg[3],
},
ok: {
base: colors.green,
hovered: colors.green,
@@ -89,11 +91,11 @@ export function solarized(darkTheme: boolean): Theme {
};
const borderColor = {
primary: bg[3],
secondary: bg[2],
muted: bg[1],
focused: bg[1],
active: bg[1],
primary: bg[0],
secondary: bg[1],
muted: bg[3],
focused: bg[3],
active: bg[3],
ok: colors.green,
error: colors.red,
warning: colors.yellow,
@@ -101,11 +103,11 @@ export function solarized(darkTheme: boolean): Theme {
};
const textColor = {
primary: fg[2],
secondary: fg[1],
muted: fg[1],
placeholder: fg[0],
active: fg[3],
primary: fg[1],
secondary: fg[2],
muted: fg[2],
placeholder: fg[3],
active: fg[0],
//TODO: (design) define feature and it's correct value
feature: colors.blue,
ok: colors.green,
@@ -130,8 +132,8 @@ export function solarized(darkTheme: boolean): Theme {
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: withOpacity(fg[3], 0.07),
highlighted: withOpacity(fg[3], 0.12),
active: withOpacity(fg[0], 0.07),
highlighted: withOpacity(fg[0], 0.12),
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
@@ -153,7 +155,7 @@ export function solarized(darkTheme: boolean): Theme {
const syntax: Syntax = {
primary: {
color: fg[3],
color: fg[0],
weight: fontWeights.normal,
},
comment: {
@@ -161,11 +163,11 @@ export function solarized(darkTheme: boolean): Theme {
weight: fontWeights.normal,
},
punctuation: {
color: fg[1],
color: fg[2],
weight: fontWeights.normal,
},
constant: {
color: fg[0],
color: fg[3],
weight: fontWeights.normal,
},
keyword: {
+3
View File
@@ -0,0 +1,3 @@
import { sulphurpool } from "./sulphurpool";
export default sulphurpool(true);
+3
View File
@@ -0,0 +1,3 @@
import { sulphurpool } from "./sulphurpool";
export default sulphurpool(false);
+257
View File
@@ -0,0 +1,257 @@
import { color, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
// Dark: 0 == Darkest, 3 == Lightest
const dark = {
0: color("#202746"),
1: color("#293256"),
2: color("#5e6687"),
3: color("#6b7394"),
};
// Light: 0 == Lightest, 3 == Darkest
const light = {
0: color("#f5f7ff"),
1: color("#dfe2f1"),
2: color("#979db4"),
3: color("#898ea4"),
};
const colors = {
"red": color("#c94922"),
"orange": color("#c76b29"),
"yellow": color("#c08b30"),
"green": color("#ac9739"),
"cyan": color("#22a2c9"),
"blue": color("#3d8fd1"),
"violet": color("#6679cc"),
"magenta": color("#9c637a"),
};
export function sulphurpool(darkTheme: boolean): Theme {
let fg = darkTheme ? light : dark;
let bg = darkTheme ? dark : light;
let name = darkTheme ? "sulphurpool-dark" : "sulphurpool-light";
const backgroundColor = {
100: {
base: bg[1],
hovered: bg[3],
active: bg[3],
focused: bg[3],
},
300: {
base: bg[1],
hovered: bg[3],
active: bg[3],
focused: bg[3],
},
500: {
base: bg[0],
hovered: bg[1],
active: bg[1],
focused: bg[1],
},
on300: {
base: bg[0],
hovered: bg[1],
active: bg[1],
focused: bg[1],
},
on500: {
base: bg[1],
hovered: bg[3],
active: bg[3],
focused: bg[3],
},
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[0],
secondary: bg[1],
muted: bg[3],
focused: bg[3],
active: bg[3],
ok: colors.green,
error: colors.red,
warning: colors.yellow,
info: colors.blue,
};
const textColor = {
primary: fg[1],
secondary: fg[2],
muted: fg[2],
placeholder: fg[3],
active: fg[0],
//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[0], 0.07),
highlighted: withOpacity(fg[0], 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[0],
weight: fontWeights.normal,
},
comment: {
color: fg[2],
weight: fontWeights.normal,
},
punctuation: {
color: fg[2],
weight: fontWeights.normal,
},
constant: {
color: fg[3],
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.feature,
weight: fontWeights.normal,
},
"emphasis.strong": {
color: textColor.feature,
weight: fontWeights.bold,
},
linkUri: {
color: colors.green,
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: colors.orange,
weight: fontWeights.normal,
italic: true,
},
};
const shadowAlpha: NumberToken = {
value: 0.32,
type: "number",
};
return {
name,
backgroundColor,
borderColor,
textColor,
iconColor: textColor,
editor,
syntax,
player,
shadowAlpha,
};
}