mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-25 00:32:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

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
Show stats 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 { 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";

18
styles/src/colorSchemes.ts
View file

@ -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
);

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

@ -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"],
]
}
],
},
};
}

83
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";
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,
};
}
}

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

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

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

@ -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;

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

@ -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,

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

@ -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),

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

@ -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,
},
},
};
}

25
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
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,
}
}
}
}
},
},
};
}

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

@ -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(),

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

@ -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,
}
}
},
},
};
}

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

@ -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")),

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

@ -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")),

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

@ -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")),

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

@ -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")),

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

@ -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;
}

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

@ -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)),
};
}
}

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 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")),

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

@ -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)),

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

@ -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)),

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 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")),

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 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")),

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

@ -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);

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

@ -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")),

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

@ -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")),