oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add sulphurpool theme, update solarized

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/buildThemes.ts
+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);
styles/src/themes/solarized.ts
+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: {
styles/src/themes/sulphurpool-dark.ts
+3
View File
@@ -0,0 +1,3 @@
import { sulphurpool } from "./sulphurpool";
export default sulphurpool(true);
styles/src/themes/sulphurpool-light.ts
+3
View File
@@ -0,0 +1,3 @@
import { sulphurpool } from "./sulphurpool";
export default sulphurpool(false);
styles/src/themes/sulphurpool.ts
+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,
};
}