Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1012 from zed-industries/clean-up-themes

Browse source 
Clean up themes
This commit is contained in:
Nate Butler 2022-05-18 11:52:39 -04:00 • committed by GitHub
commit 56553c3f90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 129 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

6
styles/src/themes.ts
View file

@ -7,10 +7,12 @@ export default themes;
const themesPath = path.resolve(`${__dirname}/themes`);
for (const fileName of fs.readdirSync(themesPath)) {
if (fileName == "template.ts") continue;
const filePath = path.join(themesPath, fileName);
if (fs.statSync(filePath).isFile()) {
const theme = require(filePath);
themes.push(theme.dark);
themes.push(theme.light);
if (theme.dark) themes.push(theme.dark);
if (theme.light) themes.push(theme.light);
}
}

15
styles/src/themes/cave.ts
View file

@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "cave";
const ramps = {
neutral: chroma.scale(["#19171c", "#26232a", "#585260", "#655f6d", "#7e7887", "#8b8792", "#e2dfe7", "#efecf4"]),
neutral: chroma.scale([
"#19171c",
"#26232a",
"#585260",
"#655f6d",
"#7e7887",
"#8b8792",
"#e2dfe7",
"#efecf4",
]),
red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")),
@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
}
};
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
export const light = createTheme(`${name}-light`, true, ramps);

24
styles/src/themes/common/base16.ts
View file

@ -1,5 +1,4 @@
import chroma from "chroma-js";
import { Scale, Color } from "chroma-js";
import chroma, { Color, Scale } from "chroma-js";
import { color, ColorToken, fontWeights, NumberToken } from "../../tokens";
import { withOpacity } from "../../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
@ -8,12 +7,15 @@ 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");
return chroma.scale([startColor, color, endColor]).mode("hsl");
}
export function createTheme(name: string, isLight: boolean, ramps: { [rampName: string]: Scale }, blend?: number): Theme {
export function createTheme(
name: string,
isLight: boolean,
ramps: { [rampName: string]: Scale },
blend?: number
): Theme {
if (isLight) {
for (var rampName in ramps) {
ramps[rampName] = ramps[rampName].domain([1, 0]);
@ -62,22 +64,22 @@ export function createTheme(name: string, isLight: boolean, ramps: { [rampName:
},
ok: {
base: withOpacity(rampColor(ramps.green, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.green, 0.5), 0.20),
hovered: withOpacity(rampColor(ramps.green, 0.5), 0.2),
active: withOpacity(rampColor(ramps.green, 0.5), 0.25),
},
error: {
base: withOpacity(rampColor(ramps.red, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.red, 0.5), 0.20),
hovered: withOpacity(rampColor(ramps.red, 0.5), 0.2),
active: withOpacity(rampColor(ramps.red, 0.5), 0.25),
},
warning: {
base: withOpacity(rampColor(ramps.yellow, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.20),
hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.2),
active: withOpacity(rampColor(ramps.yellow, 0.5), 0.25),
},
info: {
base: withOpacity(rampColor(ramps.blue, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.20),
hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.2),
active: withOpacity(rampColor(ramps.blue, 0.5), 0.25),
},
};
@ -242,4 +244,4 @@ export function createTheme(name: string, isLight: boolean, ramps: { [rampName:
player,
shadowAlpha,
};
}
}

14
styles/src/themes/common/theme.ts
View file

@ -4,8 +4,8 @@ import { withOpacity } from "../../utils/color";
export interface SyntaxHighlightStyle {
color: ColorToken;
weight?: FontWeightToken;
underline?: boolean,
italic?: boolean,
underline?: boolean;
italic?: boolean;
}
export interface Player {
@ -25,7 +25,7 @@ export function buildPlayer(
cursorColor: withOpacity(color, cursorOpacity || 1.0),
selectionColor: withOpacity(color, selectionOpacity || 0.24),
borderColor: withOpacity(color, borderOpacity || 0.8),
}
};
}
export interface BackgroundColorSet {
@ -56,7 +56,7 @@ export interface Syntax {
linkText: SyntaxHighlightStyle;
[key: string]: SyntaxHighlightStyle;
};
}
export default interface Theme {
name: string;
@ -86,8 +86,8 @@ export default interface Theme {
muted: ColorToken;
active: ColorToken;
/**
* Used for rendering borders on top of media like avatars, images, video, etc.
*/
* Used for rendering borders on top of media like avatars, images, video, etc.
*/
onMedia: ColorToken;
ok: ColorToken;
error: ColorToken;
@ -141,7 +141,7 @@ export default interface Theme {
};
};
syntax: Syntax,
syntax: Syntax;
player: {
1: Player;

15
styles/src/themes/solarized.ts
View file

@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "solarized";
const ramps = {
neutral: chroma.scale(["#002b36", "#073642", "#586e75", "#657b83", "#839496", "#93a1a1", "#eee8d5", "#fdf6e3"]),
neutral: chroma.scale([
"#002b36",
"#073642",
"#586e75",
"#657b83",
"#839496",
"#93a1a1",
"#eee8d5",
"#fdf6e3",
]),
red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")),
@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#268bd2")),
violet: colorRamp(chroma("#6c71c4")),
magenta: colorRamp(chroma("#d33682")),
}
};
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
export const light = createTheme(`${name}-light`, true, ramps);

15
styles/src/themes/sulphurpool.ts
View file

@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "sulphurpool";
const ramps = {
neutral: chroma.scale(["#202746", "#293256", "#5e6687", "#6b7394", "#898ea4", "#979db4", "#dfe2f1", "#f5f7ff"]),
neutral: chroma.scale([
"#202746",
"#293256",
"#5e6687",
"#6b7394",
"#898ea4",
"#979db4",
"#dfe2f1",
"#f5f7ff",
]),
red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")),
@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#3d8fd1")),
violet: colorRamp(chroma("#6679cc")),
magenta: colorRamp(chroma("#9c637a")),
}
};
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
export const light = createTheme(`${name}-light`, true, ramps);

69
styles/src/themes/template.ts Normal file
View file

@ -0,0 +1,69 @@
/**
* To create a new theme duplicate this file and move into templates
**/
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
/**
* Theme Name
*
* What the theme will be called in the UI
* Also used to generate filenames, etc
**/
const name = "themeName";
/**
* Theme Colors
*
* Zed themes are based on [base16](https://github.com/chriskempson/base16)
* The first 8 colors ("Neutrals") are used to construct the UI background, panels, etc.
* The latter 8 colors ("Accents") are used for syntax themes, semantic colors, and UI states.
**/
/**
* Color Ramps
*
* We use (chroma-js)[https://gka.github.io/chroma.js/] to minipulate color in themes and to build color ramps.
*
* You can use chroma-js operations on the ramps here.
* For example, you could use chroma.scale(...).correctLightness if your color ramps seem washed out near the ends.
**/
// TODO: Express accents without refering to them directly by color name.
// See common/base16.ts for where color tokens are used.
const ramps = {
neutral: chroma.scale([
"#19171c", // Dark: darkest backgrounds, inputs | Light: Lightest text, active states
"#26232a",
"#585260",
"#655f6d",
"#7e7887",
"#8b8792",
"#e2dfe7",
"#efecf4", // Light: darkest backgrounds, inputs | Dark: Lightest text, active states
]),
red: colorRamp(chroma("#be4678")), // Errors
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")), // Warnings
green: colorRamp(chroma("#2a9292")), // Positive
cyan: colorRamp(chroma("#398bc6")), // Player 1 (Host)
blue: colorRamp(chroma("#576ddb")), // Info
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
};
/**
* Theme Variants
*
* Currently we only support (and require) dark and light themes
* Eventually you will be able to have only a light or dark theme,
* and define other variants here.
*
* createTheme([name], [isLight], [arrayOfRamps])
**/
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);