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
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

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": {

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

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);

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: {

View file

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

View file

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

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,
};
}