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

Rework color schemes

Browse Source 
Co-Authored-By: Keith Simmons <keith@the-simmons.net>
This commit is contained in:
Nate Butler
2022-05-16 18:11:22 -04:00
co-authored by Keith Simmons
parent 7d22ede804
commit af5bb92847
24 changed files with 1030 additions and 5770 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/buildThemes.ts
+8 -3
View File
@@ -2,19 +2,24 @@ 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 { 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,
caveDark, caveLight,
solarizedDark, solarizedLight,
sulphurpoolDark, sulphurpoolLight
];
const themeDirectory = `${__dirname}/../../assets/themes/`;
// Clear existing themes
for (const file of fs.readdirSync(themeDirectory)) {
fs.unlinkSync(path.join(themeDirectory, file));
}
// Write new themes to theme directory
for (let theme of themes) {
let styleTree = snakeCase(app(theme));
let styleTreeJSON = JSON.stringify(styleTree, null, 2);
styles/src/buildTokens.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import * as fs from "fs";
import * as path from "path";
import dark from "./themes/dark";
import light from "./themes/light";
import { light as solarizedLight, dark as solarizedDark } from "./themes/solarized";
// Use cave as "light" and "dark" themes
import { light, dark } from "./themes/cave";
import Theme from "./themes/theme";
import { colors, fontFamilies, fontSizes, fontWeights, sizes } from "./tokens";
styles/src/themes/base16.ts
+108 -94
View File
@@ -1,106 +1,123 @@
import { ColorToken, fontWeights, NumberToken } from "../tokens";
import chroma from "chroma-js";
import { Scale, Color } from "chroma-js";
import { color, 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 colorRamp(color: Color): Scale {
let hue = color.hsl()[0];
let endColor = chroma.hsl(hue, 0.88, 0.96);
let startColor = chroma.hsl(hue, 0.68, 0.12);
return chroma
.scale([startColor, color, endColor])
.mode("hsl");
}
export function createTheme(name: string, isLight: boolean, neutral: ColorToken[], accent: Accents): Theme {
// Neutral. 8 stops from 0 to 1.
export function createTheme(name: string, isLight: boolean, ramps: { [rampName: string]: Scale }, blend?: number): Theme {
if (isLight) {
neutral = [...neutral].reverse();
for (var rampName in ramps) {
ramps[rampName] = ramps[rampName].domain([1, 0]);
}
ramps.neutral = ramps.neutral.domain([7, 0]);
} else {
ramps.neutral = ramps.neutral.domain([0, 7]);
}
if (blend === undefined) {
blend = isLight ? 0.12 : 0.24;
}
function rampColor(ramp: Scale, index: number): ColorToken {
return color(ramp(index).hex());
}
let blend = isLight ? 0.12 : 0.24;
const backgroundColor = {
// Title bar
100: {
base: neutral[1],
hovered: withOpacity(neutral[2], blend),
active: withOpacity(neutral[2], blend * 1.5),
base: rampColor(ramps.neutral, 1.25),
hovered: rampColor(ramps.neutral, 1.5),
active: rampColor(ramps.neutral, 1.75),
},
// Midground (panels, etc)
300: {
base: neutral[1],
hovered: withOpacity(neutral[2], blend),
active: withOpacity(neutral[2], blend * 1.5),
base: rampColor(ramps.neutral, 1),
hovered: rampColor(ramps.neutral, 1.25),
active: rampColor(ramps.neutral, 1.5),
},
// Editor
500: {
base: neutral[0],
hovered: withOpacity(neutral[1], blend),
active: withOpacity(neutral[1], blend * 1.5),
base: rampColor(ramps.neutral, 0),
hovered: rampColor(ramps.neutral, 0.25),
active: rampColor(ramps.neutral, 0.5),
},
on300: {
base: neutral[0],
hovered: withOpacity(neutral[1], blend),
active: withOpacity(neutral[1], blend * 2),
base: rampColor(ramps.neutral, 0),
hovered: rampColor(ramps.neutral, 0.25),
active: rampColor(ramps.neutral, 0.5),
},
on500: {
base: neutral[1],
hovered: withOpacity(neutral[2], blend),
active: withOpacity(neutral[2], blend * 2),
base: rampColor(ramps.neutral, 1.25),
hovered: rampColor(ramps.neutral, 1.5),
active: rampColor(ramps.neutral, 1.75),
},
ok: {
base: withOpacity(accent.green, 0.15),
hovered: withOpacity(accent.green, 0.20),
active: withOpacity(accent.green, 0.25),
base: withOpacity(rampColor(ramps.green, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.green, 0.5), 0.20),
active: withOpacity(rampColor(ramps.green, 0.5), 0.25),
},
error: {
base: withOpacity(accent.red, 0.15),
hovered: withOpacity(accent.red, 0.20),
active: withOpacity(accent.red, 0.25),
base: withOpacity(rampColor(ramps.red, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.red, 0.5), 0.20),
active: withOpacity(rampColor(ramps.red, 0.5), 0.25),
},
warning: {
base: withOpacity(accent.yellow, 0.15),
hovered: withOpacity(accent.yellow, 0.20),
active: withOpacity(accent.yellow, 0.25),
base: withOpacity(rampColor(ramps.yellow, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.20),
active: withOpacity(rampColor(ramps.yellow, 0.5), 0.25),
},
info: {
base: withOpacity(accent.blue, 0.15),
hovered: withOpacity(accent.blue, 0.20),
active: withOpacity(accent.blue, 0.25),
base: withOpacity(rampColor(ramps.blue, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.20),
active: withOpacity(rampColor(ramps.blue, 0.5), 0.25),
},
};
const borderColor = {
primary: neutral[0],
secondary: neutral[1],
muted: neutral[3],
active: neutral[3],
onMedia: withOpacity(neutral[0], 0.1),
ok: withOpacity(accent.green, 0.15),
error: withOpacity(accent.red, 0.15),
warning: withOpacity(accent.yellow, 0.15),
info: withOpacity(accent.blue, 0.15),
primary: rampColor(ramps.neutral, isLight ? 2 : 0),
secondary: rampColor(ramps.neutral, isLight ? 2 : 1),
muted: rampColor(ramps.neutral, isLight ? 4 : 3),
active: rampColor(ramps.neutral, isLight ? 4 : 3),
onMedia: withOpacity(rampColor(ramps.neutral, 0), 0.1),
ok: withOpacity(rampColor(ramps.green, 0.5), 0.15),
error: withOpacity(rampColor(ramps.red, 0.5), 0.15),
warning: withOpacity(rampColor(ramps.yellow, 0.5), 0.15),
info: withOpacity(rampColor(ramps.blue, 0.5), 0.15),
};
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,
primary: rampColor(ramps.neutral, 6),
secondary: rampColor(ramps.neutral, 5),
muted: rampColor(ramps.neutral, 5),
placeholder: rampColor(ramps.neutral, 4),
active: rampColor(ramps.neutral, 7),
feature: rampColor(ramps.blue, 0.5),
ok: rampColor(ramps.green, 0.5),
error: rampColor(ramps.red, 0.5),
warning: rampColor(ramps.yellow, 0.5),
info: rampColor(ramps.blue, 0.5),
};
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),
1: buildPlayer(rampColor(ramps.blue, 0.5)),
2: buildPlayer(rampColor(ramps.green, 0.5)),
3: buildPlayer(rampColor(ramps.magenta, 0.5)),
4: buildPlayer(rampColor(ramps.orange, 0.5)),
5: buildPlayer(rampColor(ramps.violet, 0.5)),
6: buildPlayer(rampColor(ramps.cyan, 0.5)),
7: buildPlayer(rampColor(ramps.red, 0.5)),
8: buildPlayer(rampColor(ramps.yellow, 0.5)),
};
const editor = {
@@ -108,19 +125,16 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
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,
active: rampColor(ramps.neutral, 1),
highlighted: rampColor(ramps.neutral, 1.25), // TODO: Where is this used?
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(neutral[7], blend / 2),
activeOccurrence: withOpacity(neutral[7], blend),
matchingBracket: backgroundColor[500].active,
match: withOpacity(accent.violet, blend * 2),
activeMatch: withOpacity(accent.violet, blend * 3),
occurrence: withOpacity(rampColor(ramps.neutral, 2), blend),
activeOccurrence: withOpacity(rampColor(ramps.neutral, 2), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
match: rampColor(ramps.violet, 0.15),
activeMatch: withOpacity(rampColor(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
related: backgroundColor[500].hovered,
},
gutter: {
@@ -131,59 +145,59 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
const syntax: Syntax = {
primary: {
color: neutral[7],
color: rampColor(ramps.neutral, 7),
weight: fontWeights.normal,
},
comment: {
color: neutral[5],
color: rampColor(ramps.neutral, 5),
weight: fontWeights.normal,
},
punctuation: {
color: neutral[5],
color: rampColor(ramps.neutral, 6),
weight: fontWeights.normal,
},
constant: {
color: neutral[4],
color: rampColor(ramps.neutral, 4),
weight: fontWeights.normal,
},
keyword: {
color: accent.blue,
color: rampColor(ramps.blue, 0.5),
weight: fontWeights.normal,
},
function: {
color: accent.yellow,
color: rampColor(ramps.yellow, 0.5),
weight: fontWeights.normal,
},
type: {
color: accent.cyan,
color: rampColor(ramps.cyan, 0.5),
weight: fontWeights.normal,
},
variant: {
color: accent.blue,
color: rampColor(ramps.blue, 0.5),
weight: fontWeights.normal,
},
property: {
color: accent.blue,
color: rampColor(ramps.blue, 0.5),
weight: fontWeights.normal,
},
enum: {
color: accent.orange,
color: rampColor(ramps.orange, 0.5),
weight: fontWeights.normal,
},
operator: {
color: accent.orange,
color: rampColor(ramps.orange, 0.5),
weight: fontWeights.normal,
},
string: {
color: accent.orange,
color: rampColor(ramps.orange, 0.5),
weight: fontWeights.normal,
},
number: {
color: accent.green,
color: rampColor(ramps.green, 0.5),
weight: fontWeights.normal,
},
boolean: {
color: accent.green,
color: rampColor(ramps.green, 0.5),
weight: fontWeights.normal,
},
predictive: {
@@ -191,7 +205,7 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
weight: fontWeights.normal,
},
title: {
color: accent.yellow,
color: rampColor(ramps.yellow, 0.5),
weight: fontWeights.bold,
},
emphasis: {
@@ -203,12 +217,12 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
weight: fontWeights.bold,
},
linkUri: {
color: accent.green,
color: rampColor(ramps.green, 0.5),
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: accent.orange,
color: rampColor(ramps.orange, 0.5),
weight: fontWeights.normal,
italic: true,
},
styles/src/themes/cave.ts
+15 -25
View File
@@ -1,29 +1,19 @@
import { createTheme } from "./base16";
import { color } from "../tokens";
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./base16";
const name = "cave";
const neutrals = [
color("#19171c"),
color("#26232a"),
color("#585260"),
color("#655f6d"),
color("#7e7887"),
color("#8b8792"),
color("#e2dfe7"),
color("#efecf4"),
];
const ramps = {
neutral: chroma.scale(["#19171c", "#26232a", "#585260", "#655f6d", "#7e7887", "#8b8792", "#e2dfe7", "#efecf4"]),
red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")),
green: colorRamp(chroma("#2a9292")),
cyan: colorRamp(chroma("#398bc6")),
blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
}
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);
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/dark.ts
-230
View File
@@ -1,230 +0,0 @@
import { colors, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
const backgroundColor = {
100: {
base: colors.neutral[750],
hovered: colors.neutral[725],
active: colors.neutral[800],
},
300: {
base: colors.neutral[800],
hovered: colors.neutral[775],
active: colors.neutral[750],
},
500: {
base: colors.neutral[900],
hovered: withOpacity(colors.neutral[0], 0.08),
active: withOpacity(colors.neutral[0], 0.12),
},
on300: {
base: withOpacity(colors.neutral[850], 0.5),
hovered: colors.neutral[875],
active: colors.neutral[900],
},
on500: {
base: colors.neutral[850],
hovered: colors.neutral[800],
active: colors.neutral[775],
},
ok: {
base: withOpacity(colors.green[600], 0.15),
hovered: withOpacity(colors.green[600], 0.20),
active: withOpacity(colors.green[600], 0.25),
},
error: {
base: withOpacity(colors.red[600], 0.15),
hovered: withOpacity(colors.red[600], 0.20),
active: withOpacity(colors.red[600], 0.25),
},
warning: {
base: withOpacity(colors.amber[400], 0.15),
hovered: withOpacity(colors.amber[400], 0.20),
active: withOpacity(colors.amber[400], 0.25),
},
info: {
base: withOpacity(colors.blue[500], 0.15),
hovered: withOpacity(colors.blue[500], 0.20),
active: withOpacity(colors.blue[500], 0.25),
},
};
const borderColor = {
primary: colors.neutral[875],
secondary: colors.neutral[775],
muted: colors.neutral[675],
active: colors.neutral[900],
onMedia: withOpacity(colors.neutral[875], 0.1),
ok: withOpacity(colors.green[600], 0.15),
error: withOpacity(colors.red[500], 0.15),
warning: withOpacity(colors.amber[400], 0.15),
info: withOpacity(colors.blue[500], 0.15),
};
const textColor = {
primary: colors.neutral[50],
secondary: colors.neutral[350],
muted: colors.neutral[450],
placeholder: colors.neutral[650],
active: colors.neutral[0],
feature: colors.blue[400],
ok: colors.green[600],
error: colors.red[400],
warning: colors.amber[300],
info: colors.blue[500],
};
const iconColor = {
primary: colors.neutral[200],
secondary: colors.neutral[350],
muted: colors.neutral[600],
placeholder: colors.neutral[700],
active: colors.neutral[0],
feature: colors.blue[500],
ok: colors.green[600],
error: colors.red[500],
warning: colors.amber[400],
info: colors.blue[600],
};
const player = {
1: buildPlayer(colors.blue[500]),
2: buildPlayer(colors.lime[500]),
3: buildPlayer(colors.fuschia[500]),
4: buildPlayer(colors.orange[500]),
5: buildPlayer(colors.purple[500]),
6: buildPlayer(colors.teal[400]),
7: buildPlayer(colors.pink[400]),
8: buildPlayer(colors.yellow[400]),
};
const editor = {
background: backgroundColor[500].base,
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: withOpacity(colors.neutral[0], 0.07),
highlighted: withOpacity(colors.neutral[0], 0.12),
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(colors.neutral[0], 0.12),
activeOccurrence: withOpacity(colors.neutral[0], 0.16),
matchingBracket: backgroundColor[500].active,
match: withOpacity(colors.violet[700], 0.5),
activeMatch: withOpacity(colors.violet[600], 0.7),
related: backgroundColor[500].hovered,
},
gutter: {
primary: textColor.placeholder,
active: textColor.active,
},
};
const syntax: Syntax = {
primary: {
color: colors.neutral[150],
weight: fontWeights.normal,
},
comment: {
color: colors.neutral[300],
weight: fontWeights.normal,
},
punctuation: {
color: colors.neutral[200],
weight: fontWeights.normal,
},
constant: {
color: colors.neutral[150],
weight: fontWeights.normal,
},
keyword: {
color: colors.blue[400],
weight: fontWeights.normal,
},
function: {
color: colors.yellow[200],
weight: fontWeights.normal,
},
type: {
color: colors.teal[300],
weight: fontWeights.normal,
},
variant: {
color: colors.sky[300],
weight: fontWeights.normal,
},
property: {
color: colors.blue[400],
weight: fontWeights.normal,
},
enum: {
color: colors.orange[500],
weight: fontWeights.normal,
},
operator: {
color: colors.orange[500],
weight: fontWeights.normal,
},
string: {
color: colors.orange[300],
weight: fontWeights.normal,
},
number: {
color: colors.lime[300],
weight: fontWeights.normal,
},
boolean: {
color: colors.lime[300],
weight: fontWeights.normal,
},
predictive: {
color: textColor.muted,
weight: fontWeights.normal,
},
title: {
color: colors.amber[500],
weight: fontWeights.bold,
},
emphasis: {
color: textColor.feature,
weight: fontWeights.normal,
},
"emphasis.strong": {
color: textColor.feature,
weight: fontWeights.bold,
},
linkUri: {
color: colors.lime[500],
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: colors.orange[500],
weight: fontWeights.normal,
italic: true,
},
};
const shadowAlpha: NumberToken = {
value: 0.32,
type: "number",
};
const theme: Theme = {
name: "dark",
backgroundColor,
borderColor,
textColor,
iconColor,
editor,
syntax,
player,
shadowAlpha,
};
export default theme;
styles/src/themes/gruvbox.ts
+30
View File
@@ -0,0 +1,30 @@
import chroma from "chroma-js";
import { createTheme } from "./base16";
const name = "cave";
const colors = {
"red": chroma("#be4678"),
"orange": chroma("#aa573c"),
"yellow": chroma("#a06e3b"),
"green": chroma("#2a9292"),
"cyan": chroma("#398bc6"),
"blue": chroma("#576ddb"),
"violet": chroma("#955ae7"),
"magenta": chroma("#bf40bf"),
};
const ramps = {
neutral: chroma.scale(["#19171c", "#26232a", "#585260", "#655f6d", "#7e7887", "#8b8792", "#e2dfe7", "#efecf4"]),
red: chroma.scale([colors.red.darken(3), colors.red, colors.red.brighten(3)]),
orange: chroma.scale([colors.orange.darken(3), colors.orange, colors.orange.brighten(3)]),
yellow: chroma.scale([colors.yellow.darken(3), colors.yellow, colors.yellow.brighten(3)]),
green: chroma.scale([colors.green.darken(3), colors.green, colors.green.brighten(3)]),
cyan: chroma.scale([colors.cyan.darken(3), colors.cyan, colors.cyan.brighten(3)]),
blue: chroma.scale([colors.blue.darken(3), colors.blue, colors.blue.brighten(3)]),
violet: chroma.scale([colors.violet.darken(3), colors.violet, colors.violet.brighten(3)]),
magenta: chroma.scale([colors.magenta.darken(3), colors.magenta, colors.magenta.brighten(3)]),
}
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/light.ts
-230
View File
@@ -1,230 +0,0 @@
import { colors, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
const backgroundColor = {
100: {
base: colors.neutral[75],
hovered: colors.neutral[100],
active: colors.neutral[150],
},
300: {
base: colors.neutral[25],
hovered: colors.neutral[75],
active: colors.neutral[100],
},
500: {
base: colors.neutral[0],
hovered: withOpacity(colors.neutral[900], 0.03),
active: withOpacity(colors.neutral[900], 0.06),
},
on300: {
base: colors.neutral[50],
hovered: colors.neutral[100],
active: colors.neutral[150],
},
on500: {
base: colors.neutral[50],
hovered: colors.neutral[25],
active: colors.neutral[0],
},
ok: {
base: withOpacity(colors.green[600], 0.15),
hovered: withOpacity(colors.green[600], 0.20),
active: withOpacity(colors.green[600], 0.25),
},
error: {
base: withOpacity(colors.red[600], 0.15),
hovered: withOpacity(colors.red[600], 0.20),
active: withOpacity(colors.red[600], 0.25),
},
warning: {
base: withOpacity(colors.amber[400], 0.15),
hovered: withOpacity(colors.amber[400], 0.20),
active: withOpacity(colors.amber[400], 0.25),
},
info: {
base: withOpacity(colors.blue[500], 0.15),
hovered: withOpacity(colors.blue[500], 0.20),
active: withOpacity(colors.blue[500], 0.25),
},
};
const borderColor = {
primary: colors.neutral[150],
secondary: colors.neutral[150],
muted: colors.neutral[100],
active: colors.neutral[250],
onMedia: withOpacity(colors.neutral[250], 0.3),
ok: withOpacity(colors.green[600], 0.15),
error: withOpacity(colors.red[500], 0.15),
warning: withOpacity(colors.amber[400], 0.15),
info: withOpacity(colors.blue[500], 0.15),
};
const textColor = {
primary: colors.neutral[750],
secondary: colors.neutral[650],
muted: colors.neutral[550],
placeholder: colors.neutral[450],
active: colors.neutral[900],
feature: colors.indigo[500],
ok: colors.green[500],
error: colors.red[500],
warning: colors.yellow[500],
info: colors.blue[500],
};
const iconColor = {
primary: colors.neutral[700],
secondary: colors.neutral[500],
muted: colors.neutral[350],
placeholder: colors.neutral[300],
active: colors.neutral[900],
feature: colors.indigo[500],
ok: colors.green[600],
error: colors.red[600],
warning: colors.yellow[400],
info: colors.blue[600],
};
const player = {
1: buildPlayer(colors.blue[500]),
2: buildPlayer(colors.emerald[400]),
3: buildPlayer(colors.fuschia[400]),
4: buildPlayer(colors.orange[400]),
5: buildPlayer(colors.purple[400]),
6: buildPlayer(colors.teal[400]),
7: buildPlayer(colors.pink[400]),
8: buildPlayer(colors.yellow[400]),
};
const editor = {
background: backgroundColor[500].base,
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: withOpacity(colors.neutral[900], 0.06),
highlighted: withOpacity(colors.neutral[900], 0.12),
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(colors.neutral[900], 0.06),
activeOccurrence: withOpacity(colors.neutral[900], 0.16),
matchingBracket: colors.neutral[0],
match: colors.yellow[100],
activeMatch: colors.yellow[200],
related: colors.neutral[0],
},
gutter: {
primary: colors.neutral[300],
active: textColor.active,
},
};
const syntax: Syntax = {
primary: {
color: colors.neutral[800],
weight: fontWeights.normal,
},
comment: {
color: colors.neutral[500],
weight: fontWeights.normal,
},
punctuation: {
color: colors.neutral[600],
weight: fontWeights.normal,
},
constant: {
color: colors.neutral[800],
weight: fontWeights.normal,
},
keyword: {
color: colors.indigo[700],
weight: fontWeights.normal,
},
function: {
color: colors.orange[600],
weight: fontWeights.normal,
},
type: {
color: colors.yellow[600],
weight: fontWeights.normal,
},
variant: {
color: colors.rose[700],
weight: fontWeights.normal,
},
property: {
color: colors.emerald[700],
weight: fontWeights.normal,
},
enum: {
color: colors.red[500],
weight: fontWeights.normal,
},
operator: {
color: colors.red[500],
weight: fontWeights.normal,
},
string: {
color: colors.red[500],
weight: fontWeights.normal,
},
number: {
color: colors.indigo[500],
weight: fontWeights.normal,
},
boolean: {
color: colors.red[500],
weight: fontWeights.normal,
},
predictive: {
color: textColor.placeholder,
weight: fontWeights.normal,
},
title: {
color: colors.sky[500],
weight: fontWeights.bold,
},
emphasis: {
color: textColor.feature,
weight: fontWeights.normal,
},
"emphasis.strong": {
color: textColor.feature,
weight: fontWeights.bold,
},
linkUri: {
color: colors.lime[500],
weight: fontWeights.normal,
underline: true
},
linkText: {
color: colors.red[500],
weight: fontWeights.normal,
italic: true
},
};
const shadowAlpha: NumberToken = {
value: 0.12,
type: "number",
};
const theme: Theme = {
name: "light",
backgroundColor,
borderColor,
textColor,
iconColor,
editor,
syntax,
player,
shadowAlpha,
};
export default theme;
styles/src/themes/solarized.ts
+15 -25
View File
@@ -1,29 +1,19 @@
import { createTheme } from "./base16";
import { color } from "../tokens";
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./base16";
const name = "solarized";
const neutrals = [
color("#002b36"),
color("#073642"),
color("#586e75"),
color("#657b83"),
color("#839496"),
color("#93a1a1"),
color("#eee8d5"),
color("#fdf6e3"),
];
const ramps = {
neutral: chroma.scale(["#002b36", "#073642", "#586e75", "#657b83", "#839496", "#93a1a1", "#eee8d5", "#fdf6e3"]),
red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")),
green: colorRamp(chroma("#859900")),
cyan: colorRamp(chroma("#2aa198")),
blue: colorRamp(chroma("#268bd2")),
violet: colorRamp(chroma("#6c71c4")),
magenta: colorRamp(chroma("#d33682")),
}
const colors = {
"red": color("#dc322f"),
"orange": color("#cb4b16"),
"yellow": color("#b58900"),
"green": color("#859900"),
"cyan": color("#2aa198"),
"blue": color("#268bd2"),
"violet": color("#6c71c4"),
"magenta": color("#d33682"),
};
export const dark = createTheme(`${name}-dark`, false, neutrals, colors);
export const light = createTheme(`${name}-light`, true, neutrals, colors);
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/sulphurpool.ts
+15 -25
View File
@@ -1,29 +1,19 @@
import { createTheme } from "./base16";
import { color } from "../tokens";
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./base16";
const name = "sulphurpool";
const neutrals = [
color("#202746"),
color("#293256"),
color("#5e6687"),
color("#6b7394"),
color("#898ea4"),
color("#979db4"),
color("#dfe2f1"),
color("#f5f7ff"),
]
const ramps = {
neutral: chroma.scale(["#202746", "#293256", "#5e6687", "#6b7394", "#898ea4", "#979db4", "#dfe2f1", "#f5f7ff"]),
red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")),
green: colorRamp(chroma("#ac9739")),
cyan: colorRamp(chroma("#22a2c9")),
blue: colorRamp(chroma("#3d8fd1")),
violet: colorRamp(chroma("#6679cc")),
magenta: colorRamp(chroma("#9c637a")),
}
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);
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/theme.ts
-3
View File
@@ -125,9 +125,6 @@ export default interface Theme {
line: {
active: ColorToken;
highlighted: ColorToken;
inserted: ColorToken;
deleted: ColorToken;
modified: ColorToken;
};
highlight: {
selection: ColorToken;