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

Merge pull request #913 from zed-industries/update-themes

Browse Source 
Add sulphurpool theme, update solarized
This commit is contained in:
Max Brunsfeld
2022-04-25 16:16:56 -07:00
committed by GitHub
parent e86152dc87 a2591ce1e2
commit 5ec30323b8
14 changed files with 5949 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/themes/cave-dark.json
+1396
View File
File diff suppressed because it is too large Load Diff
assets/themes/cave-light.json
+1396
View File
File diff suppressed because it is too large Load Diff
assets/themes/solarized-dark.json
+15 -15
View File
@@ -42,7 +42,7 @@
"weight": "bold",
"size": 14
},
"background": "#586e75"
"background": "#586e757a"
},
"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": "#586e7552",
"icon_color": "#93a1a1",
"icon_size": 8,
"icon_spacing": 8,
@@ -860,7 +860,7 @@
},
"hovered_selected_entry": {
"height": 22,
"background": "#586e75",
"background": "#586e7552",
"icon_color": "#93a1a1",
"icon_size": 8,
"icon_spacing": 8,
@@ -945,7 +945,7 @@
"right": 8
}
},
"background": "#586e75",
"background": "#586e7552",
"corner_radius": 6
},
"active_item": {
@@ -980,7 +980,7 @@
"right": 8
}
},
"background": "#586e75",
"background": "#586e7552",
"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": "#586e7552",
"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": {
assets/themes/solarized-light.json
+17 -17
View File
@@ -42,7 +42,7 @@
"weight": "bold",
"size": 14
},
"background": "#93a1a1"
"background": "#93a1a12e"
},
"border": {
"color": "#fdf6e3",
@@ -91,7 +91,7 @@
},
"shadow": {
"blur": 16,
"color": "#00000052",
"color": "#0000001f",
"offset": [
0,
2
@@ -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": "#93a1a11f",
"icon_color": "#586e75",
"icon_size": 8,
"icon_spacing": 8,
@@ -860,7 +860,7 @@
},
"hovered_selected_entry": {
"height": 22,
"background": "#93a1a1",
"background": "#93a1a11f",
"icon_color": "#586e75",
"icon_size": 8,
"icon_spacing": 8,
@@ -945,7 +945,7 @@
"right": 8
}
},
"background": "#93a1a1",
"background": "#93a1a11f",
"corner_radius": 6
},
"active_item": {
@@ -980,7 +980,7 @@
"right": 8
}
},
"background": "#93a1a1",
"background": "#93a1a11f",
"corner_radius": 6
},
"menu": {
@@ -993,7 +993,7 @@
},
"shadow": {
"blur": 16,
"color": "#00000052",
"color": "#0000001f",
"offset": [
0,
2
@@ -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": "#93a1a11f",
"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": {
assets/themes/sulphurpool-dark.json
+1396
View File
File diff suppressed because it is too large Load Diff
assets/themes/sulphurpool-light.json
+1396
View File
File diff suppressed because it is too large Load Diff
styles/src/buildThemes.ts
+10 -3
View File
@@ -1,13 +1,20 @@
import * as fs from "fs";
import * as path from "path";
import app from "./styleTree/app";
import { dark as caveDark, light as caveLight } from "./themes/cave";
import dark from "./themes/dark";
import light from "./themes/light";
import solarizedDark from "./themes/solarized-dark";
import solarizedLight from "./themes/solarized-light";
import { dark as solarizedDark, light as solarizedLight } from "./themes/solarized";
import { dark as sulphurpoolDark, light as sulphurpoolLight } from "./themes/sulphurpool";
import snakeCase from "./utils/snakeCase";
const themes = [dark, light, solarizedDark, solarizedLight];
const themes = [
dark, light,
caveDark, caveLight,
solarizedDark, solarizedLight,
sulphurpoolDark, sulphurpoolLight
];
for (let theme of themes) {
let styleTree = snakeCase(app(theme));
let styleTreeJSON = JSON.stringify(styleTree, null, 2);
styles/src/buildTokens.ts
+1 -3
View File
@@ -2,8 +2,6 @@ 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";
@@ -98,7 +96,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, solarizedDark, solarizedLight];
let themes = [dark, light];
themes.forEach((theme) => {
const themePath = `${distPath}/${theme.name}.json`
fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
styles/src/themes/base16.ts
+242
View File
@@ -0,0 +1,242 @@
import { ColorToken, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
export interface Accents {
"red": ColorToken,
"orange": ColorToken,
"yellow": ColorToken,
"green": ColorToken,
"cyan": ColorToken,
"blue": ColorToken,
"violet": ColorToken,
"magenta": ColorToken,
}
export function createTheme(name: string, isLight: boolean, neutral: ColorToken[], accent: Accents): Theme {
if (isLight) {
neutral = [...neutral].reverse();
}
let blend = isLight ? 0.12 : 0.32;
const backgroundColor = {
100: {
base: neutral[1],
hovered: withOpacity(neutral[2], blend),
active: withOpacity(neutral[2], blend * 1.5),
focused: neutral[2],
},
300: {
base: neutral[1],
hovered: withOpacity(neutral[2], blend),
active: withOpacity(neutral[2], blend * 1.5),
focused: neutral[2],
},
500: {
base: neutral[0],
hovered: neutral[1],
active: neutral[1],
focused: neutral[1],
},
on300: {
base: neutral[0],
hovered: neutral[1],
active: neutral[1],
focused: neutral[1],
},
on500: {
base: neutral[1],
hovered: neutral[3],
active: neutral[3],
focused: neutral[3],
},
ok: {
base: accent.green,
hovered: accent.green,
active: accent.green,
focused: accent.green,
},
error: {
base: accent.red,
hovered: accent.red,
active: accent.red,
focused: accent.red,
},
warning: {
base: accent.yellow,
hovered: accent.yellow,
active: accent.yellow,
focused: accent.yellow,
},
info: {
base: accent.blue,
hovered: accent.blue,
active: accent.blue,
focused: accent.blue,
},
};
const borderColor = {
primary: neutral[0],
secondary: neutral[1],
muted: neutral[3],
focused: neutral[3],
active: neutral[3],
ok: accent.green,
error: accent.red,
warning: accent.yellow,
info: accent.blue,
};
const textColor = {
primary: neutral[6],
secondary: neutral[5],
muted: neutral[5],
placeholder: neutral[4],
active: neutral[7],
feature: accent.blue,
ok: accent.green,
error: accent.red,
warning: accent.yellow,
info: accent.blue,
};
const player = {
1: buildPlayer(accent.blue),
2: buildPlayer(accent.green),
3: buildPlayer(accent.magenta),
4: buildPlayer(accent.orange),
5: buildPlayer(accent.violet),
6: buildPlayer(accent.cyan),
7: buildPlayer(accent.red),
8: buildPlayer(accent.yellow),
};
const editor = {
background: backgroundColor[500].base,
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: withOpacity(neutral[7], 0.07),
highlighted: withOpacity(neutral[7], 0.12),
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(neutral[0], 0.12),
activeOccurrence: withOpacity(neutral[0], 0.16),
matchingBracket: backgroundColor[500].active,
match: withOpacity(accent.violet, 0.5),
activeMatch: withOpacity(accent.violet, 0.7),
related: backgroundColor[500].focused,
},
gutter: {
primary: textColor.placeholder,
active: textColor.active,
},
};
const syntax: Syntax = {
primary: {
color: neutral[7],
weight: fontWeights.normal,
},
comment: {
color: neutral[5],
weight: fontWeights.normal,
},
punctuation: {
color: neutral[5],
weight: fontWeights.normal,
},
constant: {
color: neutral[4],
weight: fontWeights.normal,
},
keyword: {
color: accent.blue,
weight: fontWeights.normal,
},
function: {
color: accent.yellow,
weight: fontWeights.normal,
},
type: {
color: accent.cyan,
weight: fontWeights.normal,
},
variant: {
color: accent.blue,
weight: fontWeights.normal,
},
property: {
color: accent.blue,
weight: fontWeights.normal,
},
enum: {
color: accent.orange,
weight: fontWeights.normal,
},
operator: {
color: accent.orange,
weight: fontWeights.normal,
},
string: {
color: accent.orange,
weight: fontWeights.normal,
},
number: {
color: accent.green,
weight: fontWeights.normal,
},
boolean: {
color: accent.green,
weight: fontWeights.normal,
},
predictive: {
color: textColor.muted,
weight: fontWeights.normal,
},
title: {
color: accent.yellow,
weight: fontWeights.bold,
},
emphasis: {
color: textColor.feature,
weight: fontWeights.normal,
},
"emphasis.strong": {
color: textColor.feature,
weight: fontWeights.bold,
},
linkUri: {
color: accent.green,
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: accent.orange,
weight: fontWeights.normal,
italic: true,
},
};
const shadowAlpha: NumberToken = {
value: blend,
type: "number",
};
return {
name,
backgroundColor,
borderColor,
textColor,
iconColor: textColor,
editor,
syntax,
player,
shadowAlpha,
};
}
styles/src/themes/cave.ts
+29
View File
@@ -0,0 +1,29 @@
import { createTheme } from "./base16";
import { color } from "../tokens";
const name = "cave";
const neutrals = [
color("#19171c"),
color("#26232a"),
color("#585260"),
color("#655f6d"),
color("#7e7887"),
color("#8b8792"),
color("#e2dfe7"),
color("#efecf4"),
];
const colors = {
"red": color("#be4678"),
"orange": color("#aa573c"),
"yellow": color("#a06e3b"),
"green": color("#2a9292"),
"cyan": color("#398bc6"),
"blue": color("#576ddb"),
"violet": color("#955ae7"),
"magenta": color("#bf40bf"),
};
export const dark = createTheme(`${name}-dark`, false, neutrals, colors);
export const light = createTheme(`${name}-light`, true, neutrals, colors);
styles/src/themes/solarized-dark.ts
-3
View File
@@ -1,3 +0,0 @@
import { solarized } from "./solarized";
export default solarized(true);
styles/src/themes/solarized-light.ts
-3
View File
@@ -1,3 +0,0 @@
import { solarized } from "./solarized";
export default solarized(false);
styles/src/themes/solarized.ts
+22 -248
View File
@@ -1,255 +1,29 @@
import { color, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
import { createTheme } from "./base16";
import { color } from "../tokens";
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 name = "solarized";
const neutrals = [
color("#002b36"),
color("#073642"),
color("#586e75"),
color("#657b83"),
color("#839496"),
color("#93a1a1"),
color("#eee8d5"),
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"),
"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 {
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[3],
hovered: bg[2],
active: bg[2],
focused: bg[2],
},
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.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,
};
}
export const dark = createTheme(`${name}-dark`, false, neutrals, colors);
export const light = createTheme(`${name}-light`, true, neutrals, colors);
styles/src/themes/sulphurpool.ts
+29
View File
@@ -0,0 +1,29 @@
import { createTheme } from "./base16";
import { color } from "../tokens";
const name = "sulphurpool";
const neutrals = [
color("#202746"),
color("#293256"),
color("#5e6687"),
color("#6b7394"),
color("#898ea4"),
color("#979db4"),
color("#dfe2f1"),
color("#f5f7ff"),
]
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 const dark = createTheme(`${name}-dark`, false, neutrals, colors);
export const light = createTheme(`${name}-light`, true, neutrals, colors);