From 50e3745b923eef00c9df8b0d39bb52f2e0f2ba95 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 18 May 2022 11:41:56 -0400 Subject: [PATCH] Clean up themes - Allow themes to have only a light or dark variant - Added a commented template file - Run formatter --- styles/src/themes.ts | 6 ++- styles/src/themes/cave.ts | 15 +++++-- styles/src/themes/common/base16.ts | 24 ++++++----- styles/src/themes/common/theme.ts | 14 +++--- styles/src/themes/solarized.ts | 15 +++++-- styles/src/themes/sulphurpool.ts | 15 +++++-- styles/src/themes/template.ts | 69 ++++++++++++++++++++++++++++++ 7 files changed, 129 insertions(+), 29 deletions(-) create mode 100644 styles/src/themes/template.ts diff --git a/styles/src/themes.ts b/styles/src/themes.ts index ef02fab8219fc3aa748436461fe08e916192dd5d..8d1782fd8472937f2ae97c3536139c35db1971de 100644 --- a/styles/src/themes.ts +++ b/styles/src/themes.ts @@ -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); } } diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts index f3c8102ac9ecc5d7b267a7f201cf73e47275cbc1..2e66f4baf465c473ea4660adc46cfd22e416adbe 100644 --- a/styles/src/themes/cave.ts +++ b/styles/src/themes/cave.ts @@ -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); \ No newline at end of file +export const light = createTheme(`${name}-light`, true, ramps); diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts index 525b39f2148540378961bb996054f746e00ad2fd..a05b3b2e71eaa6017973a2a8e715595ee1590362 100644 --- a/styles/src/themes/common/base16.ts +++ b/styles/src/themes/common/base16.ts @@ -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, }; -} \ No newline at end of file +} diff --git a/styles/src/themes/common/theme.ts b/styles/src/themes/common/theme.ts index 2c648e87ec530d639e3bd77167b01632219c38ea..d6a3149e312601b9cfa295fe69d5e34f219d4369 100644 --- a/styles/src/themes/common/theme.ts +++ b/styles/src/themes/common/theme.ts @@ -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; diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts index 6992dc5bf8e86f30a67a9fde5c95b5b31ee489f2..7027d16447fc3753b909b5ffcc268cfaba78c78b 100644 --- a/styles/src/themes/solarized.ts +++ b/styles/src/themes/solarized.ts @@ -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); \ No newline at end of file +export const light = createTheme(`${name}-light`, true, ramps); diff --git a/styles/src/themes/sulphurpool.ts b/styles/src/themes/sulphurpool.ts index 202d52bc68532cae2e109cedaf8c0b91c7edfcd3..6aa95008c305a121c068ca409510f01bf65802a5 100644 --- a/styles/src/themes/sulphurpool.ts +++ b/styles/src/themes/sulphurpool.ts @@ -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); \ No newline at end of file +export const light = createTheme(`${name}-light`, true, ramps); diff --git a/styles/src/themes/template.ts b/styles/src/themes/template.ts new file mode 100644 index 0000000000000000000000000000000000000000..d8617287a26eb2b24db2c3fae47bc5b91e8229d6 --- /dev/null +++ b/styles/src/themes/template.ts @@ -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);