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

WIP + Format

Browse source
This commit is contained in:
Nate Butler 2022-10-09 19:43:06 -04:00
parent c4028ef116
commit 2d25e25ec3
26 changed files with 407 additions and 447 deletions
Download patch file Download diff file Expand all files Collapse all files

5
styles/src/buildThemes.ts
View file

@ -2,7 +2,10 @@ import * as fs from "fs";
import * as path from "path"; import * as path from "path";
import { tmpdir } from "os"; import { tmpdir } from "os";
import app from "./styleTree/app"; import app from "./styleTree/app";
import colorSchemes, { internalColorSchemes, experimentalColorSchemes } from "./colorSchemes"; import colorSchemes, {
internalColorSchemes,
experimentalColorSchemes,
} from "./colorSchemes";
import snakeCase from "./utils/snakeCase"; import snakeCase from "./utils/snakeCase";
import { ColorScheme } from "./themes/common/colorScheme"; import { ColorScheme } from "./themes/common/colorScheme";

18
styles/src/colorSchemes.ts
View file

@ -6,11 +6,10 @@ const colorSchemes: ColorScheme[] = [];
export default colorSchemes; export default colorSchemes;
const internalColorSchemes: ColorScheme[] = []; const internalColorSchemes: ColorScheme[] = [];
export { internalColorSchemes } export { internalColorSchemes };
const experimentalColorSchemes: ColorScheme[] = []; const experimentalColorSchemes: ColorScheme[] = [];
export { experimentalColorSchemes } export { experimentalColorSchemes };
function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) { function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
for (const fileName of fs.readdirSync(themesPath)) { 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`), colorSchemes);
fillColorSchemes(path.resolve(`${__dirname}/themes/internal`), internalColorSchemes) fillColorSchemes(
fillColorSchemes(path.resolve(`${__dirname}/themes/experiments`), experimentalColorSchemes) path.resolve(`${__dirname}/themes/internal`),
internalColorSchemes
);
fillColorSchemes(
path.resolve(`${__dirname}/themes/experiments`),
experimentalColorSchemes
);

12
styles/src/styleTree/app.ts
View file

@ -24,7 +24,7 @@ export default function app(colorScheme: ColorScheme): Object {
return { return {
meta: { meta: {
name: colorScheme.name, name: colorScheme.name,
isLight: colorScheme.isLight isLight: colorScheme.isLight,
}, },
picker: picker(colorScheme), picker: picker(colorScheme),
workspace: workspace(colorScheme), workspace: workspace(colorScheme),
@ -61,7 +61,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.lowest.ramps.blue.colors(100, "hex"), blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
violet: colorScheme.lowest.ramps.violet.colors(100, "hex"), violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"), magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
} },
}, },
middle: { middle: {
...colorScheme.middle, ...colorScheme.middle,
@ -75,7 +75,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.middle.ramps.blue.colors(100, "hex"), blue: colorScheme.middle.ramps.blue.colors(100, "hex"),
violet: colorScheme.middle.ramps.violet.colors(100, "hex"), violet: colorScheme.middle.ramps.violet.colors(100, "hex"),
magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"), magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"),
} },
}, },
highest: { highest: {
...colorScheme.highest, ...colorScheme.highest,
@ -89,7 +89,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.highest.ramps.blue.colors(100, "hex"), blue: colorScheme.highest.ramps.blue.colors(100, "hex"),
violet: colorScheme.highest.ramps.violet.colors(100, "hex"), violet: colorScheme.highest.ramps.violet.colors(100, "hex"),
magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"), magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"),
} },
}, },
players: [ players: [
colorScheme.players["0"], colorScheme.players["0"],
@ -100,7 +100,7 @@ export default function app(colorScheme: ColorScheme): Object {
colorScheme.players["5"], colorScheme.players["5"],
colorScheme.players["6"], colorScheme.players["6"],
colorScheme.players["7"], colorScheme.players["7"],
] ],
} },
}; };
} }

81
styles/src/styleTree/components.ts
View file

@ -2,12 +2,24 @@ import { fontFamilies, fontSizes, FontWeight } from "../common";
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"; import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
function isStyleSet(key: any): key is StyleSets { 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 { function isStyle(key: any): key is Styles {
return ["default", "active", "disabled", "hovered", "pressed"].includes(key); 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 styleSet: StyleSets = "base";
let style: Styles = "default"; let style: Styles = "default";
if (isStyleSet(possibleStyleSetOrStyle)) { 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, style?: Styles): string;
export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string; export function background(
export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string { layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string;
export function background(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).background; return getStyle(layer, styleSetOrStyles, style).background;
} }
export function borderColor(layer: Layer, style?: Styles): string; export function borderColor(layer: Layer, style?: Styles): string;
export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string; export function borderColor(
export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string { layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string;
export function borderColor(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).border; return getStyle(layer, styleSetOrStyles, style).border;
} }
export function foreground(layer: Layer, style?: Styles): string; export function foreground(layer: Layer, style?: Styles): string;
export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string; export function foreground(
export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string { layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string;
export function foreground(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).foreground; return getStyle(layer, styleSetOrStyles, style).foreground;
} }
interface Text { interface Text {
family: keyof typeof fontFamilies, family: keyof typeof fontFamilies;
color: string, color: string;
size: number, size: number;
weight?: FontWeight, weight?: FontWeight;
underline?: boolean, underline?: boolean;
} }
interface TextProperties { interface TextProperties {
@ -66,16 +102,19 @@ export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets, styleSet: StyleSets,
properties?: TextProperties): Text; properties?: TextProperties
): Text;
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
style: Styles, style: Styles,
properties?: TextProperties): Text; properties?: TextProperties
): Text;
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
properties?: TextProperties): Text; properties?: TextProperties
): Text;
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
@ -101,10 +140,9 @@ export function text(
}; };
} }
export interface Border { export interface Border {
color: string, color: string;
width: number, width: number;
top?: boolean; top?: boolean;
bottom?: boolean; bottom?: boolean;
left?: boolean; left?: boolean;
@ -137,10 +175,7 @@ export function border(
style: Styles, style: Styles,
properties?: BorderProperties properties?: BorderProperties
): Border; ): Border;
export function border( export function border(layer: Layer, properties?: BorderProperties): Border;
layer: Layer,
properties?: BorderProperties
): Border;
export function border( export function border(
layer: Layer, layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,

2
styles/src/styleTree/contactsPopover.ts
View file

@ -4,5 +4,5 @@ import { background } from "./components";
export default function workspace(colorScheme: ColorScheme) { export default function workspace(colorScheme: ColorScheme) {
return { return {
background: background(colorScheme.lowest.middle), background: background(colorScheme.lowest.middle),
} };
} }

7
styles/src/styleTree/contextMenu.ts
View file

@ -1,10 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme";
import { import { background, border, borderColor, text } from "./components";
background,
border,
borderColor,
text,
} from "./components";
export default function contextMenu(colorScheme: ColorScheme) { export default function contextMenu(colorScheme: ColorScheme) {
let elevation = colorScheme.middle; let elevation = colorScheme.middle;

23
styles/src/styleTree/editor.ts
View file

@ -1,5 +1,10 @@
import { fontWeights } from "../common"; 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 { withOpacity } from "../utils/color";
import { import {
background, background,
@ -30,7 +35,7 @@ export default function editor(colorScheme: ColorScheme) {
header: { header: {
border: border(layer, { border: border(layer, {
top: true, top: true,
}) }),
}, },
message: { message: {
text: text(layer, "sans", styleSet, { size: "sm" }), text: text(layer, "sans", styleSet, { size: "sm" }),
@ -129,7 +134,7 @@ export default function editor(colorScheme: ColorScheme) {
weight: fontWeights.normal, weight: fontWeights.normal,
italic: true, italic: true,
}, },
} };
return { return {
textColor: syntax.primary.color, textColor: syntax.primary.color,
@ -138,12 +143,18 @@ export default function editor(colorScheme: ColorScheme) {
highlightedLineBackground: background(layer, "on"), highlightedLineBackground: background(layer, "on"),
codeActions: { codeActions: {
indicator: foreground(layer, "variant"), indicator: foreground(layer, "variant"),
verticalScale: 0.55 verticalScale: 0.55,
}, },
diffBackgroundDeleted: background(layer, "negative"), diffBackgroundDeleted: background(layer, "negative"),
diffBackgroundInserted: background(layer, "positive"), diffBackgroundInserted: background(layer, "positive"),
documentHighlightReadBackground: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: This was blend documentHighlightReadBackground: elevation.ramps
documentHighlightWriteBackground: elevation.ramps.neutral(0.5).alpha(0.4).hex(), // TODO: This was blend * 2 .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"), errorColor: foreground(layer, "negative"),
gutterBackground: background(layer), gutterBackground: background(layer),
gutterPaddingFactor: 3.5, gutterPaddingFactor: 3.5,

2
styles/src/styleTree/hoverPopover.ts
View file

@ -10,7 +10,7 @@ export default function HoverPopover(elevation: Elevation) {
left: 8, left: 8,
right: 8, right: 8,
top: 4, top: 4,
bottom: 4 bottom: 4,
}, },
shadow: elevation.shadow, shadow: elevation.shadow,
border: border(layer), border: border(layer),

18
styles/src/styleTree/picker.ts
View file

@ -1,9 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme";
import { import { background, border, text } from "./components";
background,
border,
text,
} from "./components";
export default function picker(colorScheme: ColorScheme) { export default function picker(colorScheme: ColorScheme) {
let elevation = colorScheme.highest; let elevation = colorScheme.highest;
@ -14,7 +10,7 @@ export default function picker(colorScheme: ColorScheme) {
shadow: elevation.shadow, shadow: elevation.shadow,
cornerRadius: 12, cornerRadius: 12,
padding: { padding: {
bottom: 4 bottom: 4,
}, },
item: { item: {
padding: { padding: {
@ -26,7 +22,7 @@ export default function picker(colorScheme: ColorScheme) {
margin: { margin: {
top: 1, top: 1,
left: 4, left: 4,
right: 4 right: 4,
}, },
cornerRadius: 8, cornerRadius: 8,
text: text(layer, "sans", "variant"), text: text(layer, "sans", "variant"),
@ -34,7 +30,9 @@ export default function picker(colorScheme: ColorScheme) {
active: { active: {
background: background(layer, "active"), background: background(layer, "active"),
text: text(layer, "sans", "active"), text: text(layer, "sans", "active"),
highlightText: text(layer, "sans", "info", "active", { weight: "bold" }), highlightText: text(layer, "sans", "info", "active", {
weight: "bold",
}),
}, },
hover: { hover: {
background: background(layer, "hovered"), background: background(layer, "hovered"),
@ -61,8 +59,8 @@ export default function picker(colorScheme: ColorScheme) {
top: 8, top: 8,
}, },
margin: { margin: {
bottom: 4 bottom: 4,
} },
}, },
}; };
} }

23
styles/src/styleTree/tabBar.ts
View file

@ -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 // When two tabs of the same name are open, a label appears next to them
description: { description: {
margin: { left: 8 }, margin: { left: 8 },
...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }) ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }),
} },
}; };
const activePaneActiveTab = { const activePaneActiveTab = {
@ -48,7 +48,7 @@ export default function tabBar(colorScheme: ColorScheme) {
text: text(activeLayerActiveTab, "sans", { size: "sm" }), text: text(activeLayerActiveTab, "sans", { size: "sm" }),
border: { border: {
...tab.border, ...tab.border,
bottom: false bottom: false,
}, },
}; };
@ -64,21 +64,24 @@ export default function tabBar(colorScheme: ColorScheme) {
text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }), text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }),
border: { border: {
...tab.border, ...tab.border,
bottom: false bottom: false,
}, },
} };
const draggedTab = { const draggedTab = {
...activePaneActiveTab, ...activePaneActiveTab,
background: withOpacity(tab.background, 0.8), background: withOpacity(tab.background, 0.8),
border: undefined as any, border: undefined as any,
shadow: elevation.above.shadow, shadow: elevation.above.shadow,
} };
return { return {
height, height,
background: background(activeLayerInactiveTab), background: background(activeLayerInactiveTab),
dropTargetOverlayColor: withOpacity(foreground(activeLayerInactiveTab), 0.6), dropTargetOverlayColor: withOpacity(
foreground(activeLayerInactiveTab),
0.6
),
activePane: { activePane: {
activeTab: activePaneActiveTab, activeTab: activePaneActiveTab,
inactiveTab: tab, inactiveTab: tab,
@ -101,7 +104,7 @@ export default function tabBar(colorScheme: ColorScheme) {
border: { border: {
...tab.border, ...tab.border,
right: false, right: false,
} },
} },
} };
} }

12
styles/src/styleTree/terminal.ts
View file

@ -2,12 +2,12 @@ import { Elevation } from "../themes/common/colorScheme";
export default function terminal(elevation: Elevation) { export default function terminal(elevation: Elevation) {
/** /**
* Colors are controlled per-cell in the terminal grid. * Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors * Cells can be set to any of these more 'theme-capable' colors
* or can be set directly with RGB values. * or can be set directly with RGB values.
* Here are the common interpretations of these names: * Here are the common interpretations of these names:
* https://en.wikipedia.org/wiki/ANSI_escape_code#Colors * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
*/ */
return { return {
black: elevation.ramps.neutral(0).hex(), black: elevation.ramps.neutral(0).hex(),
red: elevation.ramps.red(0.5).hex(), red: elevation.ramps.red(0.5).hex(),

13
styles/src/styleTree/workspace.ts
View file

@ -5,7 +5,7 @@ import {
border, border,
borderColor, borderColor,
foreground, foreground,
text text,
} from "./components"; } from "./components";
import statusBar from "./statusBar"; import statusBar from "./statusBar";
import tabBar from "./tabBar"; import tabBar from "./tabBar";
@ -37,10 +37,7 @@ export default function workspace(colorScheme: ColorScheme) {
}, },
sidebar: { sidebar: {
initialSize: 240, initialSize: 240,
border: border( border: border(layer, { left: true, right: true }),
layer,
{ left: true, right: true }
),
}, },
paneDivider: { paneDivider: {
color: borderColor(layer), color: borderColor(layer),
@ -171,9 +168,9 @@ export default function workspace(colorScheme: ColorScheme) {
}, },
maximized: { maximized: {
margin: 32, margin: 32,
border: border(elevation.above.top, { "overlay": true }), border: border(elevation.above.top, { overlay: true }),
shadow: elevation.above.shadow, shadow: elevation.above.shadow,
} },
} },
}; };
} }

31
styles/src/themes/abruzzo.ts
View file

@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "abruzzo"; const name = "abruzzo";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#1b0d05", .scale([
"#2c1e18", "#1b0d05",
"#654035", "#2c1e18",
"#9d5e4a", "#654035",
"#b37354", "#9d5e4a",
"#c1825a", "#b37354",
"#dda66e", "#c1825a",
"#fbf3e2", "#dda66e",
]).domain([ "#fbf3e2",
0, ])
0.15, .domain([0, 0.15, 0.35, 0.5, 0.6, 0.75, 0.85, 1]),
0.35,
0.5,
0.6,
0.75,
0.85,
1
]),
red: colorRamp(chroma("#e594c4")), red: colorRamp(chroma("#e594c4")),
orange: colorRamp(chroma("#d9e87e")), orange: colorRamp(chroma("#d9e87e")),
yellow: colorRamp(chroma("#fd9d83")), yellow: colorRamp(chroma("#fd9d83")),

31
styles/src/themes/andromeda.ts
View file

@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "andromeda"; const name = "andromeda";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#1E2025", .scale([
"#23262E", "#1E2025",
"#292E38", "#23262E",
"#2E323C", "#292E38",
"#ACA8AE", "#2E323C",
"#CBC9CF", "#ACA8AE",
"#E1DDE4", "#CBC9CF",
"#F7F7F8", "#E1DDE4",
]).domain([ "#F7F7F8",
0, ])
0.15, .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
0.25,
0.35,
0.7,
0.8,
0.9,
1
]),
red: colorRamp(chroma("#F92672")), red: colorRamp(chroma("#F92672")),
orange: colorRamp(chroma("#F39C12")), orange: colorRamp(chroma("#F39C12")),
yellow: colorRamp(chroma("#FFE66D")), yellow: colorRamp(chroma("#FFE66D")),

31
styles/src/themes/brushtrees.ts
View file

@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "brush-tree"; const name = "brush-tree";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#485867", .scale([
"#5A6D7A", "#485867",
"#6D828E", "#5A6D7A",
"#8299A1", "#6D828E",
"#98AFB5", "#8299A1",
"#B0C5C8", "#98AFB5",
"#C9DBDC", "#B0C5C8",
"#E3EFEF", "#C9DBDC",
]).domain([ "#E3EFEF",
0, ])
0.17, .domain([0, 0.17, 0.32, 0.48, 0.6, 0.715, 0.858, 1]),
0.32,
0.48,
0.6,
0.715,
0.858,
1
]),
red: colorRamp(chroma("#b38686")), red: colorRamp(chroma("#b38686")),
orange: colorRamp(chroma("#d8bba2")), orange: colorRamp(chroma("#d8bba2")),
yellow: colorRamp(chroma("#aab386")), yellow: colorRamp(chroma("#aab386")),

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

@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "cave"; const name = "cave";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#19171c", .scale([
"#26232a", "#19171c",
"#585260", "#26232a",
"#655f6d", "#585260",
"#7e7887", "#655f6d",
"#8b8792", "#7e7887",
"#e2dfe7", "#8b8792",
"#efecf4", "#e2dfe7",
]).domain([ "#efecf4",
0, ])
0.3, .domain([0, 0.3, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
0.45,
0.6,
0.65,
0.7,
0.85,
1
]),
red: colorRamp(chroma("#be4678")), red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")), orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")), yellow: colorRamp(chroma("#a06e3b")),

98
styles/src/themes/common/colorScheme.ts
View file

@ -1,83 +1,83 @@
import { Scale } from "chroma-js"; import { Scale } from "chroma-js";
export interface ColorScheme { export interface ColorScheme {
name: string, name: string;
isLight: boolean, isLight: boolean;
lowest: Elevation, lowest: Elevation;
middle: Elevation, middle: Elevation;
highest: Elevation, highest: Elevation;
players: Players, players: Players;
} }
export interface Player { export interface Player {
cursor: string, cursor: string;
selection: string, selection: string;
} }
export interface Players { export interface Players {
"0": Player, "0": Player;
"1": Player, "1": Player;
"2": Player, "2": Player;
"3": Player, "3": Player;
"4": Player, "4": Player;
"5": Player, "5": Player;
"6": Player, "6": Player;
"7": Player, "7": Player;
} }
export interface Elevation { export interface Elevation {
ramps: RampSet, ramps: RampSet;
bottom: Layer, bottom: Layer;
middle: Layer, middle: Layer;
top: Layer, top: Layer;
above?: Elevation, above?: Elevation;
shadow?: Shadow shadow?: Shadow;
} }
export interface Shadow { export interface Shadow {
blur: number, blur: number;
color: string, color: string;
offset: number[], offset: number[];
} }
export type StyleSets = keyof Layer; export type StyleSets = keyof Layer;
export interface Layer { export interface Layer {
base: StyleSet, base: StyleSet;
variant: StyleSet, variant: StyleSet;
on: StyleSet, on: StyleSet;
info: StyleSet, info: StyleSet;
positive: StyleSet, positive: StyleSet;
warning: StyleSet, warning: StyleSet;
negative: StyleSet, negative: StyleSet;
} }
export interface RampSet { export interface RampSet {
neutral: Scale, neutral: Scale;
red: Scale, red: Scale;
orange: Scale, orange: Scale;
yellow: Scale, yellow: Scale;
green: Scale, green: Scale;
cyan: Scale, cyan: Scale;
blue: Scale, blue: Scale;
violet: Scale, violet: Scale;
magenta: Scale, magenta: Scale;
} }
export type Styles = keyof StyleSet; export type Styles = keyof StyleSet;
export interface StyleSet { export interface StyleSet {
default: Style, default: Style;
active: Style, active: Style;
disabled: Style, disabled: Style;
hovered: Style, hovered: Style;
pressed: Style, pressed: Style;
} }
export interface Style { export interface Style {
background: string, background: string;
border: string, border: string;
foreground: string, foreground: string;
} }

189
styles/src/themes/common/ramps.ts
View file

@ -1,5 +1,15 @@
import chroma, { Color, Scale } from "chroma-js"; 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 { export function colorRamp(color: Color): Scale {
let hue = color.hsl()[0]; let hue = color.hsl()[0];
@ -8,7 +18,11 @@ export function colorRamp(color: Color): Scale {
return chroma.scale([startColor, color, endColor]).mode("hsl"); 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 // Chromajs scales from 0 to 1 flipped if isLight is true
let baseRamps: typeof colorRamps = {}; 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. // function to any in order to get the colors back out from the original ramps.
if (isLight) { if (isLight) {
for (var rampName in colorRamps) { for (var rampName in colorRamps) {
baseRamps[rampName] = chroma baseRamps[rampName] = chroma.scale(
.scale(colorRamps[rampName].colors(100).reverse()); colorRamps[rampName].colors(100).reverse()
);
} }
baseRamps.neutral = chroma baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
.scale(colorRamps.neutral.colors(100).reverse());
} else { } else {
for (var rampName in colorRamps) { for (var rampName in colorRamps) {
baseRamps[rampName] = chroma baseRamps[rampName] = chroma.scale(colorRamps[rampName].colors(100));
.scale(colorRamps[rampName].colors(100));
} }
baseRamps.neutral = chroma baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100));
.scale(colorRamps.neutral.colors(100));
} }
let baseSet = { let baseSet = {
@ -46,40 +58,28 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
magenta: baseRamps.magenta, magenta: baseRamps.magenta,
}; };
let lowest = elevation( let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight);
resampleSet(
baseSet,
evenSamples(0, 1)
),
isLight,
);
let middle = elevation( let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, {
resampleSet( blur: 4,
baseSet, color: baseSet
evenSamples(0.08, 1) .neutral(isLight ? 7 : 0)
), .darken()
isLight, .alpha(0.2)
{ .hex(), // TODO used blend previously. Replace with something else
blur: 4, offset: [1, 2],
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; lowest.above = middle;
let highest = elevation( let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, {
resampleSet( blur: 16,
baseSet, color: baseSet
evenSamples(0.16, 1) .neutral(isLight ? 7 : 0)
), .darken()
isLight, .alpha(0.2)
{ .hex(), // TODO used blend previously. Replace with something else
blur: 16, offset: [0, 2],
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; middle.above = highest;
let players = { let players = {
@ -91,7 +91,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
"5": player(baseSet.cyan), "5": player(baseSet.cyan),
"6": player(baseSet.red), "6": player(baseSet.red),
"7": player(baseSet.yellow), "7": player(baseSet.yellow),
} };
return { return {
name, name,
@ -109,11 +109,13 @@ function player(ramp: Scale): Player {
return { return {
selection: ramp(0.5).alpha(0.24).hex(), selection: ramp(0.5).alpha(0.24).hex(),
cursor: ramp(0.5).hex(), cursor: ramp(0.5).hex(),
} };
} }
function evenSamples(min: number, max: number): number[] { 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 { function resampleSet(ramps: RampSet, samples: number[]): RampSet {
@ -127,7 +129,7 @@ function resampleSet(ramps: RampSet, samples: number[]): RampSet {
blue: resample(ramps.blue, samples), blue: resample(ramps.blue, samples),
violet: resample(ramps.violet, samples), violet: resample(ramps.violet, samples),
magenta: resample(ramps.magenta, samples), magenta: resample(ramps.magenta, samples),
} };
} }
function resample(scale: Scale, samples: number[]): Scale { function resample(scale: Scale, samples: number[]): Scale {
@ -135,7 +137,11 @@ function resample(scale: Scale, samples: number[]): Scale {
return chroma.scale(newColors); return chroma.scale(newColors);
} }
function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation { function elevation(
ramps: RampSet,
isLight: boolean,
shadow?: Shadow
): Elevation {
return { return {
ramps, ramps,
@ -148,17 +154,20 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
} }
interface StyleColors { interface StyleColors {
default: number | Color, default: number | Color;
hovered: number | Color, hovered: number | Color;
pressed: number | Color, pressed: number | Color;
active: number | Color, active: number | Color;
disabled: number | Color, disabled: number | Color;
} }
function buildStyleSet(ramp: Scale, styleDefinitions: { function buildStyleSet(
background: StyleColors, ramp: Scale,
border: StyleColors, styleDefinitions: {
foreground: StyleColors, background: StyleColors;
}): StyleSet { border: StyleColors;
foreground: StyleColors;
}
): StyleSet {
function colorString(indexOrColor: number | Color): string { function colorString(indexOrColor: number | Color): string {
if (typeof indexOrColor === "number") { if (typeof indexOrColor === "number") {
return ramp(indexOrColor).hex(); return ramp(indexOrColor).hex();
@ -172,7 +181,7 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
background: colorString(styleDefinitions.background[style]), background: colorString(styleDefinitions.background[style]),
border: colorString(styleDefinitions.border[style]), border: colorString(styleDefinitions.border[style]),
foreground: colorString(styleDefinitions.foreground[style]), foreground: colorString(styleDefinitions.foreground[style]),
} };
} }
return { return {
@ -181,73 +190,67 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
pressed: buildStyle("pressed"), pressed: buildStyle("pressed"),
active: buildStyle("active"), active: buildStyle("active"),
disabled: buildStyle("disabled"), disabled: buildStyle("disabled"),
} };
} }
function buildLayer(fgLayer: number, bgBase: number, fgBase: number, step: number) { function buildLayer(bgBase: number, fgBase: number, step: number) {
return { return {
background: { background: {
default: bgBase, default: bgBase,
hovered: bgBase + step, hovered: bgBase + step,
pressed: bgBase + (step * 1.5), pressed: bgBase + step * 1.5,
active: bgBase + (step * 2.5), active: bgBase + step * 3,
disabled: bgBase, disabled: bgBase,
}, },
border: { border: {
default: bgBase + step, default: bgBase + step * 1,
hovered: bgBase + step, hovered: bgBase + step,
pressed: bgBase + step, pressed: bgBase + step,
active: bgBase + step, active: bgBase + step * 3,
disabled: bgBase + step, disabled: bgBase + step * 0.5,
}, },
foreground: { foreground: {
default: fgBase, default: fgBase,
hovered: fgBase - step, hovered: fgBase - step,
pressed: fgBase - step, pressed: fgBase - step,
active: fgBase, active: fgBase,
disabled: fgLayer - (step * 4), disabled: bgBase + step * 4,
}, },
} };
} }
function bottomLayer(ramps: RampSet, isLight: boolean): Layer { function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
let fgLayer = 1
return { return {
base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 1, 0.08)), base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 0.7, 0.08)), variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)), on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.2, 1, 0.08)), info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.2, 1, 0.08)), positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.2, 1, 0.08)), warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.2, 1, 0.08)) negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
}; };
} }
function middleLayer(ramps: RampSet, isLight: boolean): Layer { function middleLayer(ramps: RampSet, isLight: boolean): Layer {
let fgLayer = 1
return { return {
base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)), base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 0.7, 0.08)), variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)), on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.1, 1, 0.08)), info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.1, 1, 0.08)), positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.1, 1, 0.08)), warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.1, 1, 0.08)) negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
}; };
} }
function topLayer(ramps: RampSet, isLight: boolean): Layer { function topLayer(ramps: RampSet, isLight: boolean): Layer {
let fgLayer = 1
return { return {
base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)), base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 0.7, 0.08)), variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)), on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0, 1, 0.08)), info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0, 1, 0.08)), positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0, 1, 0.08)), warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0, 1, 0.08)) negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
}; };
} }

31
styles/src/themes/internal/zed-pro.ts
View file

@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "../common/ramps";
const name = "zed-pro"; const name = "zed-pro";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#101010", .scale([
"#1C1C1C", "#101010",
"#212121", "#1C1C1C",
"#2D2D2D", "#212121",
"#B9B9B9", "#2D2D2D",
"#DADADA", "#B9B9B9",
"#E6E6E6", "#DADADA",
"#FFFFFF", "#E6E6E6",
]).domain([ "#FFFFFF",
0, ])
0.1, .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
0.2,
0.3,
0.7,
0.8,
0.9,
1
]),
red: colorRamp(chroma("#DC604F")), red: colorRamp(chroma("#DC604F")),
orange: colorRamp(chroma("#DE782F")), orange: colorRamp(chroma("#DE782F")),
yellow: colorRamp(chroma("#E0B750")), yellow: colorRamp(chroma("#E0B750")),

22
styles/src/themes/one-dark.ts
View file

@ -24,25 +24,9 @@ const base0E = "#c678dd";
const base0F = "#be5046"; const base0F = "#be5046";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
base00, .scale([base00, base01, base02, base03, base04, base05, base06, base07])
base01, .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
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)), red: colorRamp(chroma(base08)),
orange: colorRamp(chroma(base09)), orange: colorRamp(chroma(base09)),
yellow: colorRamp(chroma(base0A)), yellow: colorRamp(chroma(base0A)),

18
styles/src/themes/one-light.ts
View file

@ -24,21 +24,9 @@ const base0E = "#a626a4";
const base0F = "#986801"; const base0F = "#986801";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
base00, .scale([base00, base01, base02, base03, base04, base05, base06, base07])
base01, .domain([0, 0.05, 0.77, 1]),
base02,
base03,
base04,
base05,
base06,
base07,
]).domain([
0,
0.05,
0.77,
1
]),
red: colorRamp(chroma(base08)), red: colorRamp(chroma(base08)),
orange: colorRamp(chroma(base09)), orange: colorRamp(chroma(base09)),
yellow: colorRamp(chroma(base0A)), yellow: colorRamp(chroma(base0A)),

26
styles/src/themes/rose-pine-dawn.ts
View file

@ -4,20 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "rosé-pine-dawn"; const name = "rosé-pine-dawn";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#575279", .scale([
"#797593", "#575279",
"#9893A5", "#797593",
"#B5AFB8", "#9893A5",
"#D3CCCC", "#B5AFB8",
"#F2E9E1", "#D3CCCC",
"#FFFAF3", "#F2E9E1",
"#FAF4ED", "#FFFAF3",
]).domain([ "#FAF4ED",
0, ])
0.73, .domain([0, 0.73, 1]),
1
]),
red: colorRamp(chroma("#B4637A")), red: colorRamp(chroma("#B4637A")),
orange: colorRamp(chroma("#D7827E")), orange: colorRamp(chroma("#D7827E")),
yellow: colorRamp(chroma("#EA9D34")), yellow: colorRamp(chroma("#EA9D34")),

27
styles/src/themes/rose-pine-moon.ts
View file

@ -4,21 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "rosé-pine-moon"; const name = "rosé-pine-moon";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#232136", .scale([
"#2A273F", "#232136",
"#393552", "#2A273F",
"#3E3A53", "#393552",
"#56526C", "#3E3A53",
"#6E6A86", "#56526C",
"#908CAA", "#6E6A86",
"#E0DEF4", "#908CAA",
]).domain([ "#E0DEF4",
0, ])
0.3, .domain([0, 0.3, 0.55, 1]),
0.55,
1
]),
red: colorRamp(chroma("#EB6F92")), red: colorRamp(chroma("#EB6F92")),
orange: colorRamp(chroma("#EBBCBA")), orange: colorRamp(chroma("#EBBCBA")),
yellow: colorRamp(chroma("#F6C177")), yellow: colorRamp(chroma("#F6C177")),

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

@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "solarized"; const name = "solarized";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#002b36", .scale([
"#073642", "#002b36",
"#586e75", "#073642",
"#657b83", "#586e75",
"#839496", "#657b83",
"#93a1a1", "#839496",
"#eee8d5", "#93a1a1",
"#fdf6e3", "#eee8d5",
]).domain([ "#fdf6e3",
0, ])
0.2, .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
0.38,
0.45,
0.65,
0.7,
0.85,
1
]),
red: colorRamp(chroma("#dc322f")), red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")), orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")), yellow: colorRamp(chroma("#b58900")),

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

@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "sulphurpool"; const name = "sulphurpool";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#202746", .scale([
"#293256", "#202746",
"#5e6687", "#293256",
"#6b7394", "#5e6687",
"#898ea4", "#6b7394",
"#979db4", "#898ea4",
"#dfe2f1", "#979db4",
"#f5f7ff", "#dfe2f1",
]).domain([ "#f5f7ff",
0, ])
0.2, .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
0.38,
0.45,
0.65,
0.7,
0.85,
1
]),
red: colorRamp(chroma("#c94922")), red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")), orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")), yellow: colorRamp(chroma("#c08b30")),

31
styles/src/themes/summercamp.ts
View file

@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "summercamp"; const name = "summercamp";
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma
"#1c1810", .scale([
"#2a261c", "#1c1810",
"#3a3527", "#2a261c",
"#3a3527", "#3a3527",
"#5f5b45", "#3a3527",
"#736e55", "#5f5b45",
"#bab696", "#736e55",
"#f8f5de", "#bab696",
]).domain([ "#f8f5de",
0, ])
0.2, .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
0.38,
0.4,
0.65,
0.7,
0.85,
1
]),
red: colorRamp(chroma("#e35142")), red: colorRamp(chroma("#e35142")),
orange: colorRamp(chroma("#fba11b")), orange: colorRamp(chroma("#fba11b")),
yellow: colorRamp(chroma("#f2ff27")), yellow: colorRamp(chroma("#f2ff27")),