Nate Butler created
styles/src/buildThemes.ts | 5
styles/src/colorSchemes.ts | 18 +
styles/src/styleTree/app.ts | 12
styles/src/styleTree/components.ts | 83 ++++++++---
styles/src/styleTree/contactsPopover.ts | 2
styles/src/styleTree/contextMenu.ts | 7
styles/src/styleTree/editor.ts | 23 ++
styles/src/styleTree/hoverPopover.ts | 2
styles/src/styleTree/picker.ts | 18 +-
styles/src/styleTree/tabBar.ts | 25 +-
styles/src/styleTree/terminal.ts | 12
styles/src/styleTree/workspace.ts | 13 -
styles/src/themes/abruzzo.ts | 31 +--
styles/src/themes/andromeda.ts | 31 +--
styles/src/themes/brushtrees.ts | 31 +--
styles/src/themes/cave.ts | 31 +--
styles/src/themes/common/colorScheme.ts | 100 +++++++-------
styles/src/themes/common/ramps.ts | 191 +++++++++++++-------------
styles/src/themes/internal/zed-pro.ts | 31 +--
styles/src/themes/one-dark.ts | 22 --
styles/src/themes/one-light.ts | 18 --
styles/src/themes/rose-pine-dawn.ts | 26 +-
styles/src/themes/rose-pine-moon.ts | 27 +--
styles/src/themes/solarized.ts | 33 +--
styles/src/themes/sulphurpool.ts | 31 +--
styles/src/themes/summercamp.ts | 31 +--
26 files changed, 407 insertions(+), 447 deletions(-)
@@ -2,7 +2,10 @@ import * as fs from "fs";
import * as path from "path";
import { tmpdir } from "os";
import app from "./styleTree/app";
-import colorSchemes, { internalColorSchemes, experimentalColorSchemes } from "./colorSchemes";
+import colorSchemes, {
+ internalColorSchemes,
+ experimentalColorSchemes,
+} from "./colorSchemes";
import snakeCase from "./utils/snakeCase";
import { ColorScheme } from "./themes/common/colorScheme";
@@ -6,11 +6,10 @@ const colorSchemes: ColorScheme[] = [];
export default colorSchemes;
const internalColorSchemes: ColorScheme[] = [];
-export { internalColorSchemes }
+export { internalColorSchemes };
const experimentalColorSchemes: ColorScheme[] = [];
-export { experimentalColorSchemes }
-
+export { experimentalColorSchemes };
function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
for (const fileName of fs.readdirSync(themesPath)) {
@@ -25,7 +24,12 @@ function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
}
}
-fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes)
-fillColorSchemes(path.resolve(`${__dirname}/themes/internal`), internalColorSchemes)
-fillColorSchemes(path.resolve(`${__dirname}/themes/experiments`), experimentalColorSchemes)
-
+fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes);
+fillColorSchemes(
+ path.resolve(`${__dirname}/themes/internal`),
+ internalColorSchemes
+);
+fillColorSchemes(
+ path.resolve(`${__dirname}/themes/experiments`),
+ experimentalColorSchemes
+);
@@ -24,7 +24,7 @@ export default function app(colorScheme: ColorScheme): Object {
return {
meta: {
name: colorScheme.name,
- isLight: colorScheme.isLight
+ isLight: colorScheme.isLight,
},
picker: picker(colorScheme),
workspace: workspace(colorScheme),
@@ -61,7 +61,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
- }
+ },
},
middle: {
...colorScheme.middle,
@@ -75,7 +75,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.middle.ramps.blue.colors(100, "hex"),
violet: colorScheme.middle.ramps.violet.colors(100, "hex"),
magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"),
- }
+ },
},
highest: {
...colorScheme.highest,
@@ -89,7 +89,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.highest.ramps.blue.colors(100, "hex"),
violet: colorScheme.highest.ramps.violet.colors(100, "hex"),
magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"),
- }
+ },
},
players: [
colorScheme.players["0"],
@@ -100,7 +100,7 @@ export default function app(colorScheme: ColorScheme): Object {
colorScheme.players["5"],
colorScheme.players["6"],
colorScheme.players["7"],
- ]
- }
+ ],
+ },
};
}
@@ -2,12 +2,24 @@ import { fontFamilies, fontSizes, FontWeight } from "../common";
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
function isStyleSet(key: any): key is StyleSets {
- return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
+ return [
+ "base",
+ "variant",
+ "on",
+ "info",
+ "positive",
+ "warning",
+ "negative",
+ ].includes(key);
}
function isStyle(key: any): key is Styles {
return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
}
-function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style {
+function getStyle(
+ layer: Layer,
+ possibleStyleSetOrStyle?: any,
+ possibleStyle?: any
+): Style {
let styleSet: StyleSets = "base";
let style: Styles = "default";
if (isStyleSet(possibleStyleSetOrStyle)) {
@@ -24,29 +36,53 @@ function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: a
}
export function background(layer: Layer, style?: Styles): string;
-export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function background(
+ layer: Layer,
+ styleSet?: StyleSets,
+ style?: Styles
+): string;
+export function background(
+ layer: Layer,
+ styleSetOrStyles?: StyleSets | Styles,
+ style?: Styles
+): string {
return getStyle(layer, styleSetOrStyles, style).background;
}
export function borderColor(layer: Layer, style?: Styles): string;
-export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function borderColor(
+ layer: Layer,
+ styleSet?: StyleSets,
+ style?: Styles
+): string;
+export function borderColor(
+ layer: Layer,
+ styleSetOrStyles?: StyleSets | Styles,
+ style?: Styles
+): string {
return getStyle(layer, styleSetOrStyles, style).border;
}
export function foreground(layer: Layer, style?: Styles): string;
-export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function foreground(
+ layer: Layer,
+ styleSet?: StyleSets,
+ style?: Styles
+): string;
+export function foreground(
+ layer: Layer,
+ styleSetOrStyles?: StyleSets | Styles,
+ style?: Styles
+): string {
return getStyle(layer, styleSetOrStyles, style).foreground;
}
interface Text {
- family: keyof typeof fontFamilies,
- color: string,
- size: number,
- weight?: FontWeight,
- underline?: boolean,
+ family: keyof typeof fontFamilies;
+ color: string;
+ size: number;
+ weight?: FontWeight;
+ underline?: boolean;
}
interface TextProperties {
@@ -66,16 +102,19 @@ export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
- properties?: TextProperties): Text;
+ properties?: TextProperties
+): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
style: Styles,
- properties?: TextProperties): Text;
+ properties?: TextProperties
+): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
- properties?: TextProperties): Text;
+ properties?: TextProperties
+): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
@@ -101,10 +140,9 @@ export function text(
};
}
-
export interface Border {
- color: string,
- width: number,
+ color: string;
+ width: number;
top?: boolean;
bottom?: boolean;
left?: boolean;
@@ -137,10 +175,7 @@ export function border(
style: Styles,
properties?: BorderProperties
): Border;
-export function border(
- layer: Layer,
- properties?: BorderProperties
-): Border;
+export function border(layer: Layer, properties?: BorderProperties): Border;
export function border(
layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
@@ -161,4 +196,4 @@ export function border(
width: 1,
...properties,
};
-}
+}
@@ -4,5 +4,5 @@ import { background } from "./components";
export default function workspace(colorScheme: ColorScheme) {
return {
background: background(colorScheme.lowest.middle),
- }
+ };
}
@@ -1,10 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme";
-import {
- background,
- border,
- borderColor,
- text,
-} from "./components";
+import { background, border, borderColor, text } from "./components";
export default function contextMenu(colorScheme: ColorScheme) {
let elevation = colorScheme.middle;
@@ -1,5 +1,10 @@
import { fontWeights } from "../common";
-import { ColorScheme, Elevation, Layer, StyleSets } from "../themes/common/colorScheme";
+import {
+ ColorScheme,
+ Elevation,
+ Layer,
+ StyleSets,
+} from "../themes/common/colorScheme";
import { withOpacity } from "../utils/color";
import {
background,
@@ -30,7 +35,7 @@ export default function editor(colorScheme: ColorScheme) {
header: {
border: border(layer, {
top: true,
- })
+ }),
},
message: {
text: text(layer, "sans", styleSet, { size: "sm" }),
@@ -129,7 +134,7 @@ export default function editor(colorScheme: ColorScheme) {
weight: fontWeights.normal,
italic: true,
},
- }
+ };
return {
textColor: syntax.primary.color,
@@ -138,12 +143,18 @@ export default function editor(colorScheme: ColorScheme) {
highlightedLineBackground: background(layer, "on"),
codeActions: {
indicator: foreground(layer, "variant"),
- verticalScale: 0.55
+ verticalScale: 0.55,
},
diffBackgroundDeleted: background(layer, "negative"),
diffBackgroundInserted: background(layer, "positive"),
- documentHighlightReadBackground: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: This was blend
- documentHighlightWriteBackground: elevation.ramps.neutral(0.5).alpha(0.4).hex(), // TODO: This was blend * 2
+ documentHighlightReadBackground: elevation.ramps
+ .neutral(0.5)
+ .alpha(0.2)
+ .hex(), // TODO: This was blend
+ documentHighlightWriteBackground: elevation.ramps
+ .neutral(0.5)
+ .alpha(0.4)
+ .hex(), // TODO: This was blend * 2
errorColor: foreground(layer, "negative"),
gutterBackground: background(layer),
gutterPaddingFactor: 3.5,
@@ -10,7 +10,7 @@ export default function HoverPopover(elevation: Elevation) {
left: 8,
right: 8,
top: 4,
- bottom: 4
+ bottom: 4,
},
shadow: elevation.shadow,
border: border(layer),
@@ -1,9 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme";
-import {
- background,
- border,
- text,
-} from "./components";
+import { background, border, text } from "./components";
export default function picker(colorScheme: ColorScheme) {
let elevation = colorScheme.highest;
@@ -14,7 +10,7 @@ export default function picker(colorScheme: ColorScheme) {
shadow: elevation.shadow,
cornerRadius: 12,
padding: {
- bottom: 4
+ bottom: 4,
},
item: {
padding: {
@@ -26,7 +22,7 @@ export default function picker(colorScheme: ColorScheme) {
margin: {
top: 1,
left: 4,
- right: 4
+ right: 4,
},
cornerRadius: 8,
text: text(layer, "sans", "variant"),
@@ -34,7 +30,9 @@ export default function picker(colorScheme: ColorScheme) {
active: {
background: background(layer, "active"),
text: text(layer, "sans", "active"),
- highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
+ highlightText: text(layer, "sans", "info", "active", {
+ weight: "bold",
+ }),
},
hover: {
background: background(layer, "hovered"),
@@ -61,8 +59,8 @@ export default function picker(colorScheme: ColorScheme) {
top: 8,
},
margin: {
- bottom: 4
- }
+ bottom: 4,
+ },
},
};
}
@@ -38,8 +38,8 @@ export default function tabBar(colorScheme: ColorScheme) {
// When two tabs of the same name are open, a label appears next to them
description: {
margin: { left: 8 },
- ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" })
- }
+ ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }),
+ },
};
const activePaneActiveTab = {
@@ -48,7 +48,7 @@ export default function tabBar(colorScheme: ColorScheme) {
text: text(activeLayerActiveTab, "sans", { size: "sm" }),
border: {
...tab.border,
- bottom: false
+ bottom: false,
},
};
@@ -64,21 +64,24 @@ export default function tabBar(colorScheme: ColorScheme) {
text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }),
border: {
...tab.border,
- bottom: false
+ bottom: false,
},
- }
+ };
const draggedTab = {
...activePaneActiveTab,
background: withOpacity(tab.background, 0.8),
border: undefined as any,
shadow: elevation.above.shadow,
- }
+ };
return {
height,
background: background(activeLayerInactiveTab),
- dropTargetOverlayColor: withOpacity(foreground(activeLayerInactiveTab), 0.6),
+ dropTargetOverlayColor: withOpacity(
+ foreground(activeLayerInactiveTab),
+ 0.6
+ ),
activePane: {
activeTab: activePaneActiveTab,
inactiveTab: tab,
@@ -101,7 +104,7 @@ export default function tabBar(colorScheme: ColorScheme) {
border: {
...tab.border,
right: false,
- }
- }
- }
-}
+ },
+ },
+ };
+}
@@ -2,12 +2,12 @@ import { Elevation } from "../themes/common/colorScheme";
export default function terminal(elevation: Elevation) {
/**
- * Colors are controlled per-cell in the terminal grid.
- * Cells can be set to any of these more 'theme-capable' colors
- * or can be set directly with RGB values.
- * Here are the common interpretations of these names:
- * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
- */
+ * Colors are controlled per-cell in the terminal grid.
+ * Cells can be set to any of these more 'theme-capable' colors
+ * or can be set directly with RGB values.
+ * Here are the common interpretations of these names:
+ * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
+ */
return {
black: elevation.ramps.neutral(0).hex(),
red: elevation.ramps.red(0.5).hex(),
@@ -5,7 +5,7 @@ import {
border,
borderColor,
foreground,
- text
+ text,
} from "./components";
import statusBar from "./statusBar";
import tabBar from "./tabBar";
@@ -37,10 +37,7 @@ export default function workspace(colorScheme: ColorScheme) {
},
sidebar: {
initialSize: 240,
- border: border(
- layer,
- { left: true, right: true }
- ),
+ border: border(layer, { left: true, right: true }),
},
paneDivider: {
color: borderColor(layer),
@@ -171,9 +168,9 @@ export default function workspace(colorScheme: ColorScheme) {
},
maximized: {
margin: 32,
- border: border(elevation.above.top, { "overlay": true }),
+ border: border(elevation.above.top, { overlay: true }),
shadow: elevation.above.shadow,
- }
- }
+ },
+ },
};
}
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "abruzzo";
const ramps = {
- neutral: chroma.scale([
- "#1b0d05",
- "#2c1e18",
- "#654035",
- "#9d5e4a",
- "#b37354",
- "#c1825a",
- "#dda66e",
- "#fbf3e2",
- ]).domain([
- 0,
- 0.15,
- 0.35,
- 0.5,
- 0.6,
- 0.75,
- 0.85,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#1b0d05",
+ "#2c1e18",
+ "#654035",
+ "#9d5e4a",
+ "#b37354",
+ "#c1825a",
+ "#dda66e",
+ "#fbf3e2",
+ ])
+ .domain([0, 0.15, 0.35, 0.5, 0.6, 0.75, 0.85, 1]),
red: colorRamp(chroma("#e594c4")),
orange: colorRamp(chroma("#d9e87e")),
yellow: colorRamp(chroma("#fd9d83")),
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "andromeda";
const ramps = {
- neutral: chroma.scale([
- "#1E2025",
- "#23262E",
- "#292E38",
- "#2E323C",
- "#ACA8AE",
- "#CBC9CF",
- "#E1DDE4",
- "#F7F7F8",
- ]).domain([
- 0,
- 0.15,
- 0.25,
- 0.35,
- 0.7,
- 0.8,
- 0.9,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#1E2025",
+ "#23262E",
+ "#292E38",
+ "#2E323C",
+ "#ACA8AE",
+ "#CBC9CF",
+ "#E1DDE4",
+ "#F7F7F8",
+ ])
+ .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#F92672")),
orange: colorRamp(chroma("#F39C12")),
yellow: colorRamp(chroma("#FFE66D")),
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "brush-tree";
const ramps = {
- neutral: chroma.scale([
- "#485867",
- "#5A6D7A",
- "#6D828E",
- "#8299A1",
- "#98AFB5",
- "#B0C5C8",
- "#C9DBDC",
- "#E3EFEF",
- ]).domain([
- 0,
- 0.17,
- 0.32,
- 0.48,
- 0.6,
- 0.715,
- 0.858,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#485867",
+ "#5A6D7A",
+ "#6D828E",
+ "#8299A1",
+ "#98AFB5",
+ "#B0C5C8",
+ "#C9DBDC",
+ "#E3EFEF",
+ ])
+ .domain([0, 0.17, 0.32, 0.48, 0.6, 0.715, 0.858, 1]),
red: colorRamp(chroma("#b38686")),
orange: colorRamp(chroma("#d8bba2")),
yellow: colorRamp(chroma("#aab386")),
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "cave";
const ramps = {
- neutral: chroma.scale([
- "#19171c",
- "#26232a",
- "#585260",
- "#655f6d",
- "#7e7887",
- "#8b8792",
- "#e2dfe7",
- "#efecf4",
- ]).domain([
- 0,
- 0.3,
- 0.45,
- 0.6,
- 0.65,
- 0.7,
- 0.85,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#19171c",
+ "#26232a",
+ "#585260",
+ "#655f6d",
+ "#7e7887",
+ "#8b8792",
+ "#e2dfe7",
+ "#efecf4",
+ ])
+ .domain([0, 0.3, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")),
@@ -1,83 +1,83 @@
import { Scale } from "chroma-js";
export interface ColorScheme {
- name: string,
- isLight: boolean,
+ name: string;
+ isLight: boolean;
- lowest: Elevation,
- middle: Elevation,
- highest: Elevation,
+ lowest: Elevation;
+ middle: Elevation;
+ highest: Elevation;
- players: Players,
+ players: Players;
}
export interface Player {
- cursor: string,
- selection: string,
+ cursor: string;
+ selection: string;
}
export interface Players {
- "0": Player,
- "1": Player,
- "2": Player,
- "3": Player,
- "4": Player,
- "5": Player,
- "6": Player,
- "7": Player,
+ "0": Player;
+ "1": Player;
+ "2": Player;
+ "3": Player;
+ "4": Player;
+ "5": Player;
+ "6": Player;
+ "7": Player;
}
export interface Elevation {
- ramps: RampSet,
+ ramps: RampSet;
- bottom: Layer,
- middle: Layer,
- top: Layer,
+ bottom: Layer;
+ middle: Layer;
+ top: Layer;
- above?: Elevation,
- shadow?: Shadow
+ above?: Elevation;
+ shadow?: Shadow;
}
export interface Shadow {
- blur: number,
- color: string,
- offset: number[],
+ blur: number;
+ color: string;
+ offset: number[];
}
export type StyleSets = keyof Layer;
export interface Layer {
- base: StyleSet,
- variant: StyleSet,
- on: StyleSet,
- info: StyleSet,
- positive: StyleSet,
- warning: StyleSet,
- negative: StyleSet,
+ base: StyleSet;
+ variant: StyleSet;
+ on: StyleSet;
+ info: StyleSet;
+ positive: StyleSet;
+ warning: StyleSet;
+ negative: StyleSet;
}
export interface RampSet {
- neutral: Scale,
- red: Scale,
- orange: Scale,
- yellow: Scale,
- green: Scale,
- cyan: Scale,
- blue: Scale,
- violet: Scale,
- magenta: Scale,
+ neutral: Scale;
+ red: Scale;
+ orange: Scale;
+ yellow: Scale;
+ green: Scale;
+ cyan: Scale;
+ blue: Scale;
+ violet: Scale;
+ magenta: Scale;
}
export type Styles = keyof StyleSet;
export interface StyleSet {
- default: Style,
- active: Style,
- disabled: Style,
- hovered: Style,
- pressed: Style,
+ default: Style;
+ active: Style;
+ disabled: Style;
+ hovered: Style;
+ pressed: Style;
}
export interface Style {
- background: string,
- border: string,
- foreground: string,
-}
+ background: string;
+ border: string;
+ foreground: string;
+}
@@ -1,5 +1,15 @@
import chroma, { Color, Scale } from "chroma-js";
-import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, Styles, StyleSet } from "./colorScheme";
+import {
+ ColorScheme,
+ Elevation,
+ Layer,
+ Player,
+ RampSet,
+ Shadow,
+ Style,
+ Styles,
+ StyleSet,
+} from "./colorScheme";
export function colorRamp(color: Color): Scale {
let hue = color.hsl()[0];
@@ -8,7 +18,11 @@ export function colorRamp(color: Color): Scale {
return chroma.scale([startColor, color, endColor]).mode("hsl");
}
-export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
+export function createColorScheme(
+ name: string,
+ isLight: boolean,
+ colorRamps: { [rampName: string]: Scale }
+): ColorScheme {
// Chromajs scales from 0 to 1 flipped if isLight is true
let baseRamps: typeof colorRamps = {};
@@ -20,18 +34,16 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
// function to any in order to get the colors back out from the original ramps.
if (isLight) {
for (var rampName in colorRamps) {
- baseRamps[rampName] = chroma
- .scale(colorRamps[rampName].colors(100).reverse());
+ baseRamps[rampName] = chroma.scale(
+ colorRamps[rampName].colors(100).reverse()
+ );
}
- baseRamps.neutral = chroma
- .scale(colorRamps.neutral.colors(100).reverse());
+ baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
} else {
for (var rampName in colorRamps) {
- baseRamps[rampName] = chroma
- .scale(colorRamps[rampName].colors(100));
+ baseRamps[rampName] = chroma.scale(colorRamps[rampName].colors(100));
}
- baseRamps.neutral = chroma
- .scale(colorRamps.neutral.colors(100));
+ baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100));
}
let baseSet = {
@@ -46,40 +58,28 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
magenta: baseRamps.magenta,
};
- let lowest = elevation(
- resampleSet(
- baseSet,
- evenSamples(0, 1)
- ),
- isLight,
- );
+ let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight);
- let middle = elevation(
- resampleSet(
- baseSet,
- evenSamples(0.08, 1)
- ),
- isLight,
- {
- blur: 4,
- color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
- offset: [1, 2],
- }
- );
+ let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, {
+ blur: 4,
+ color: baseSet
+ .neutral(isLight ? 7 : 0)
+ .darken()
+ .alpha(0.2)
+ .hex(), // TODO used blend previously. Replace with something else
+ offset: [1, 2],
+ });
lowest.above = middle;
- let highest = elevation(
- resampleSet(
- baseSet,
- evenSamples(0.16, 1)
- ),
- isLight,
- {
- blur: 16,
- color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
- offset: [0, 2],
- }
- );
+ let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, {
+ blur: 16,
+ color: baseSet
+ .neutral(isLight ? 7 : 0)
+ .darken()
+ .alpha(0.2)
+ .hex(), // TODO used blend previously. Replace with something else
+ offset: [0, 2],
+ });
middle.above = highest;
let players = {
@@ -91,7 +91,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
"5": player(baseSet.cyan),
"6": player(baseSet.red),
"7": player(baseSet.yellow),
- }
+ };
return {
name,
@@ -109,11 +109,13 @@ function player(ramp: Scale): Player {
return {
selection: ramp(0.5).alpha(0.24).hex(),
cursor: ramp(0.5).hex(),
- }
+ };
}
function evenSamples(min: number, max: number): number[] {
- return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
+ return Array.from(Array(101).keys()).map(
+ (i) => (i / 100) * (max - min) + min
+ );
}
function resampleSet(ramps: RampSet, samples: number[]): RampSet {
@@ -127,7 +129,7 @@ function resampleSet(ramps: RampSet, samples: number[]): RampSet {
blue: resample(ramps.blue, samples),
violet: resample(ramps.violet, samples),
magenta: resample(ramps.magenta, samples),
- }
+ };
}
function resample(scale: Scale, samples: number[]): Scale {
@@ -135,7 +137,11 @@ function resample(scale: Scale, samples: number[]): Scale {
return chroma.scale(newColors);
}
-function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
+function elevation(
+ ramps: RampSet,
+ isLight: boolean,
+ shadow?: Shadow
+): Elevation {
return {
ramps,
@@ -148,17 +154,20 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
}
interface StyleColors {
- default: number | Color,
- hovered: number | Color,
- pressed: number | Color,
- active: number | Color,
- disabled: number | Color,
+ default: number | Color;
+ hovered: number | Color;
+ pressed: number | Color;
+ active: number | Color;
+ disabled: number | Color;
}
-function buildStyleSet(ramp: Scale, styleDefinitions: {
- background: StyleColors,
- border: StyleColors,
- foreground: StyleColors,
-}): StyleSet {
+function buildStyleSet(
+ ramp: Scale,
+ styleDefinitions: {
+ background: StyleColors;
+ border: StyleColors;
+ foreground: StyleColors;
+ }
+): StyleSet {
function colorString(indexOrColor: number | Color): string {
if (typeof indexOrColor === "number") {
return ramp(indexOrColor).hex();
@@ -172,7 +181,7 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
background: colorString(styleDefinitions.background[style]),
border: colorString(styleDefinitions.border[style]),
foreground: colorString(styleDefinitions.foreground[style]),
- }
+ };
}
return {
@@ -181,73 +190,67 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
pressed: buildStyle("pressed"),
active: buildStyle("active"),
disabled: buildStyle("disabled"),
- }
+ };
}
-function buildLayer(fgLayer: number, bgBase: number, fgBase: number, step: number) {
+function buildLayer(bgBase: number, fgBase: number, step: number) {
return {
background: {
default: bgBase,
hovered: bgBase + step,
- pressed: bgBase + (step * 1.5),
- active: bgBase + (step * 2.5),
+ pressed: bgBase + step * 1.5,
+ active: bgBase + step * 3,
disabled: bgBase,
},
border: {
- default: bgBase + step,
+ default: bgBase + step * 1,
hovered: bgBase + step,
pressed: bgBase + step,
- active: bgBase + step,
- disabled: bgBase + step,
+ active: bgBase + step * 3,
+ disabled: bgBase + step * 0.5,
},
foreground: {
default: fgBase,
hovered: fgBase - step,
pressed: fgBase - step,
active: fgBase,
- disabled: fgLayer - (step * 4),
+ disabled: bgBase + step * 4,
},
- }
+ };
}
function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
- let fgLayer = 1
-
return {
- base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 1, 0.08)),
- variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 0.7, 0.08)),
- on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
- info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.2, 1, 0.08)),
- positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.2, 1, 0.08)),
- warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.2, 1, 0.08)),
- negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.2, 1, 0.08))
+ base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
+ variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
+ on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+ info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+ positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+ warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+ negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
};
}
function middleLayer(ramps: RampSet, isLight: boolean): Layer {
- let fgLayer = 1
-
return {
- base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
- variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 0.7, 0.08)),
- on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
- info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.1, 1, 0.08)),
- positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.1, 1, 0.08)),
- warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.1, 1, 0.08)),
- negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.1, 1, 0.08))
+ base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+ variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
+ on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
+ info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+ positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+ warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+ negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
};
}
function topLayer(ramps: RampSet, isLight: boolean): Layer {
- let fgLayer = 1
-
return {
- base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
- variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 0.7, 0.08)),
- on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
- info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0, 1, 0.08)),
- positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0, 1, 0.08)),
- warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0, 1, 0.08)),
- negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0, 1, 0.08))
+ base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
+ variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
+ on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+ info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+ positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+ warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+ negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
};
-}
+}
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "../common/ramps";
const name = "zed-pro";
const ramps = {
- neutral: chroma.scale([
- "#101010",
- "#1C1C1C",
- "#212121",
- "#2D2D2D",
- "#B9B9B9",
- "#DADADA",
- "#E6E6E6",
- "#FFFFFF",
- ]).domain([
- 0,
- 0.1,
- 0.2,
- 0.3,
- 0.7,
- 0.8,
- 0.9,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#101010",
+ "#1C1C1C",
+ "#212121",
+ "#2D2D2D",
+ "#B9B9B9",
+ "#DADADA",
+ "#E6E6E6",
+ "#FFFFFF",
+ ])
+ .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#DC604F")),
orange: colorRamp(chroma("#DE782F")),
yellow: colorRamp(chroma("#E0B750")),
@@ -24,25 +24,9 @@ const base0E = "#c678dd";
const base0F = "#be5046";
const ramps = {
- neutral: chroma.scale([
- base00,
- base01,
- base02,
- base03,
- base04,
- base05,
- base06,
- base07,
- ]).domain([
- 0.05,
- 0.22,
- 0.25,
- 0.45,
- 0.62,
- 0.8,
- 0.9,
- 1
- ]),
+ neutral: chroma
+ .scale([base00, base01, base02, base03, base04, base05, base06, base07])
+ .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
red: colorRamp(chroma(base08)),
orange: colorRamp(chroma(base09)),
yellow: colorRamp(chroma(base0A)),
@@ -24,21 +24,9 @@ const base0E = "#a626a4";
const base0F = "#986801";
const ramps = {
- neutral: chroma.scale([
- base00,
- base01,
- base02,
- base03,
- base04,
- base05,
- base06,
- base07,
- ]).domain([
- 0,
- 0.05,
- 0.77,
- 1
- ]),
+ neutral: chroma
+ .scale([base00, base01, base02, base03, base04, base05, base06, base07])
+ .domain([0, 0.05, 0.77, 1]),
red: colorRamp(chroma(base08)),
orange: colorRamp(chroma(base09)),
yellow: colorRamp(chroma(base0A)),
@@ -4,20 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "rosé-pine-dawn";
const ramps = {
- neutral: chroma.scale([
- "#575279",
- "#797593",
- "#9893A5",
- "#B5AFB8",
- "#D3CCCC",
- "#F2E9E1",
- "#FFFAF3",
- "#FAF4ED",
- ]).domain([
- 0,
- 0.73,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#575279",
+ "#797593",
+ "#9893A5",
+ "#B5AFB8",
+ "#D3CCCC",
+ "#F2E9E1",
+ "#FFFAF3",
+ "#FAF4ED",
+ ])
+ .domain([0, 0.73, 1]),
red: colorRamp(chroma("#B4637A")),
orange: colorRamp(chroma("#D7827E")),
yellow: colorRamp(chroma("#EA9D34")),
@@ -4,21 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "rosé-pine-moon";
const ramps = {
- neutral: chroma.scale([
- "#232136",
- "#2A273F",
- "#393552",
- "#3E3A53",
- "#56526C",
- "#6E6A86",
- "#908CAA",
- "#E0DEF4",
- ]).domain([
- 0,
- 0.3,
- 0.55,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#232136",
+ "#2A273F",
+ "#393552",
+ "#3E3A53",
+ "#56526C",
+ "#6E6A86",
+ "#908CAA",
+ "#E0DEF4",
+ ])
+ .domain([0, 0.3, 0.55, 1]),
red: colorRamp(chroma("#EB6F92")),
orange: colorRamp(chroma("#EBBCBA")),
yellow: colorRamp(chroma("#F6C177")),
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "solarized";
const ramps = {
- neutral: chroma.scale([
- "#002b36",
- "#073642",
- "#586e75",
- "#657b83",
- "#839496",
- "#93a1a1",
- "#eee8d5",
- "#fdf6e3",
- ]).domain([
- 0,
- 0.2,
- 0.38,
- 0.45,
- 0.65,
- 0.7,
- 0.85,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#002b36",
+ "#073642",
+ "#586e75",
+ "#657b83",
+ "#839496",
+ "#93a1a1",
+ "#eee8d5",
+ "#fdf6e3",
+ ])
+ .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")),
@@ -34,4 +27,4 @@ const ramps = {
};
export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "sulphurpool";
const ramps = {
- neutral: chroma.scale([
- "#202746",
- "#293256",
- "#5e6687",
- "#6b7394",
- "#898ea4",
- "#979db4",
- "#dfe2f1",
- "#f5f7ff",
- ]).domain([
- 0,
- 0.2,
- 0.38,
- 0.45,
- 0.65,
- 0.7,
- 0.85,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#202746",
+ "#293256",
+ "#5e6687",
+ "#6b7394",
+ "#898ea4",
+ "#979db4",
+ "#dfe2f1",
+ "#f5f7ff",
+ ])
+ .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")),
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "summercamp";
const ramps = {
- neutral: chroma.scale([
- "#1c1810",
- "#2a261c",
- "#3a3527",
- "#3a3527",
- "#5f5b45",
- "#736e55",
- "#bab696",
- "#f8f5de",
- ]).domain([
- 0,
- 0.2,
- 0.38,
- 0.4,
- 0.65,
- 0.7,
- 0.85,
- 1
- ]),
+ neutral: chroma
+ .scale([
+ "#1c1810",
+ "#2a261c",
+ "#3a3527",
+ "#3a3527",
+ "#5f5b45",
+ "#736e55",
+ "#bab696",
+ "#f8f5de",
+ ])
+ .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#e35142")),
orange: colorRamp(chroma("#fba11b")),
yellow: colorRamp(chroma("#f2ff27")),