mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-27 04:44:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Style elevations & update styleTrees

Browse source 
Also rename `info` -> `accent`

Co-Authored-By: Kay Simmons <3323631+Kethku@users.noreply.github.com>
This commit is contained in:
Nate Butler 2022-10-11 17:38:28 -04:00
parent 95bc18a995
commit 5708879b5a
11 changed files with 84 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
crates/theme/src/theme.rs
View file

@ -777,7 +777,7 @@ pub struct Layer {
pub base: StyleSet,
pub variant: StyleSet,
pub on: StyleSet,
pub info: StyleSet,
pub accent: StyleSet,
pub positive: StyleSet,
pub warning: StyleSet,
pub negative: StyleSet,
@ -790,6 +790,7 @@ pub struct StyleSet {
pub disabled: Style,
pub hovered: Style,
pub pressed: Style,
pub inverted: Style,
}
#[derive(Clone, Deserialize, Default)]

10
crates/theme_testbench/src/theme_testbench.rs
View file

@ -107,7 +107,7 @@ impl ThemeTestbench {
.boxed(),
)
.with_child(
Self::render_button_set(3, layer_index, "info", &layer.info, cx)
Self::render_button_set(3, layer_index, "accent", &layer.accent, cx)
.flex(1., false)
.boxed(),
)
@ -187,6 +187,14 @@ impl ThemeTestbench {
Some(|style_set| &style_set.disabled),
cx,
))
.with_child(Self::render_button(
set_index * 6 + 5,
layer_index,
"inverted",
&style_set,
Some(|style_set| &style_set.inverted),
cx,
))
}
fn render_button(

4
styles/src/styleTree/commandPalette.ts
View file

@ -9,7 +9,7 @@ export default function commandPalette(colorScheme: ColorScheme) {
key: {
text: text(layer, "mono", "on", "default", { size: "xs" }),
cornerRadius: 2,
background: withOpacity(background(layer, "on"), 0.5),
background: background(layer, "on"),
padding: {
top: 1,
bottom: 1,
@ -22,7 +22,7 @@ export default function commandPalette(colorScheme: ColorScheme) {
left: 2,
},
active: {
text: text(layer, "mono", "on", "active", { size: "xs" }),
text: text(layer, "mono", "on", "inverted", { size: "xs" }),
background: withOpacity(background(layer, "on"), 0.2),
},
},

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

@ -6,14 +6,14 @@ function isStyleSet(key: any): key is StyleSets {
"base",
"variant",
"on",
"info",
"accent",
"positive",
"warning",
"negative",
].includes(key);
}
function isStyle(key: any): key is Styles {
return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
return ["default", "active", "disabled", "hovered", "pressed", "inverted"].includes(key);
}
function getStyle(
layer: Layer,

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

@ -36,8 +36,8 @@ export default function editor(colorScheme: ColorScheme) {
}),
},
message: {
text: text(layer, "sans", styleSet, { size: "sm" }),
highlightText: text(layer, "sans", styleSet, {
text: text(layer, "sans", styleSet, "inverted", { size: "sm" }),
highlightText: text(layer, "sans", styleSet, "inverted", {
size: "sm",
weight: "bold",
}),
@ -153,7 +153,7 @@ export default function editor(colorScheme: ColorScheme) {
.neutral(0.5)
.alpha(0.4)
.hex(), // TODO: This was blend * 2
errorColor: foreground(layer, "negative"),
errorColor: background(layer, "negative"),
gutterBackground: background(layer),
gutterPaddingFactor: 3.5,
lineNumber: foreground(layer, "disabled"),
@ -225,7 +225,7 @@ export default function editor(colorScheme: ColorScheme) {
},
errorDiagnostic: diagnostic(elevation.middle, "negative"),
warningDiagnostic: diagnostic(elevation.middle, "warning"),
informationDiagnostic: diagnostic(elevation.middle, "info"),
informationDiagnostic: diagnostic(elevation.middle, "accent"),
hintDiagnostic: diagnostic(elevation.middle, "warning"),
invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
invalidHintDiagnostic: diagnostic(elevation.middle, "base"),

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

@ -23,8 +23,8 @@ export default function HoverPopover(elevation: Elevation) {
container: baseContainer,
infoContainer: {
...baseContainer,
background: background(layer, "info"),
border: border(layer, "info"),
background: background(layer, "accent"),
border: border(layer, "accent"),
},
warningContainer: {
...baseContainer,

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

@ -26,11 +26,11 @@ export default function picker(colorScheme: ColorScheme) {
},
cornerRadius: 8,
text: text(layer, "sans", "variant"),
highlightText: text(layer, "sans", "info", { weight: "bold" }),
highlightText: text(layer, "sans", "accent", { weight: "bold" }),
active: {
background: background(layer, "active"),
text: text(layer, "sans", "active"),
highlightText: text(layer, "sans", "info", "active", {
background: background(layer, "base", "inverted"),
text: text(layer, "sans", "base", "inverted"),
highlightText: text(layer, "sans", "accent", "inverted", {
weight: "bold",
}),
},

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

@ -111,7 +111,7 @@ export default function statusBar(colorScheme: ColorScheme) {
padding: 2,
margin: { bottom: -1, right: -1 },
border: border(layer),
background: background(layer, "info"),
background: background(layer, "accent"),
},
},
};

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

@ -31,7 +31,7 @@ export default function tabBar(colorScheme: ColorScheme) {
// Indicators
iconConflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "info"),
iconDirty: foreground(layer, "accent"),
// When two tabs of the same name are open, a label appears next to them
description: {

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

@ -49,7 +49,7 @@ export interface Layer {
base: StyleSet;
variant: StyleSet;
on: StyleSet;
info: StyleSet;
accent: StyleSet;
positive: StyleSet;
warning: StyleSet;
negative: StyleSet;
@ -74,6 +74,7 @@ export interface StyleSet {
disabled: Style;
hovered: Style;
pressed: Style;
inverted: Style;
}
export interface Style {

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

@ -12,9 +12,8 @@ import {
} from "./colorScheme";
export function colorRamp(color: Color): Scale {
let hue = color.hsl()[0];
let endColor = chroma.hsl(hue, 0.88, 0.96);
let startColor = chroma.hsl(hue, 0.68, 0.12);
let endColor = color.desaturate(1).brighten(5);
let startColor = color.desaturate(1).darken(5);
return chroma.scale([startColor, color, endColor]).mode("hsl");
}
@ -58,9 +57,9 @@ export function createColorScheme(
magenta: baseRamps.magenta,
};
let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight);
let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)));
let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, {
let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), {
blur: 4,
color: baseSet
.neutral(isLight ? 7 : 0)
@ -71,7 +70,7 @@ export function createColorScheme(
});
lowest.above = middle;
let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, {
let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), {
blur: 16,
color: baseSet
.neutral(isLight ? 7 : 0)
@ -139,35 +138,63 @@ function resample(scale: Scale, samples: number[]): Scale {
function elevation(
ramps: RampSet,
isLight: boolean,
shadow?: Shadow
): Elevation {
return {
ramps,
bottom: bottomLayer(ramps, isLight),
middle: middleLayer(ramps, isLight),
top: topLayer(ramps, isLight),
bottom: bottomLayer(ramps),
middle: middleLayer(ramps),
top: topLayer(ramps),
shadow,
};
}
interface StyleColors {
default: number | Color;
hovered: number | Color;
pressed: number | Color;
active: number | Color;
disabled: number | Color;
function bottomLayer(ramps: RampSet): Layer {
return {
base: buildStyleSet(ramps.neutral, 0.2, 1),
variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
on: buildStyleSet(ramps.neutral, 0.1, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5),
positive: buildStyleSet(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5),
};
}
function middleLayer(ramps: RampSet): Layer {
return {
base: buildStyleSet(ramps.neutral, 0.1, 1),
variant: buildStyleSet(ramps.neutral, 0.1, 0.7),
on: buildStyleSet(ramps.neutral, 0, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5),
positive: buildStyleSet(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5),
};
}
function topLayer(ramps: RampSet): Layer {
return {
base: buildStyleSet(ramps.neutral, 0, 1),
variant: buildStyleSet(ramps.neutral, 0, 0.7),
on: buildStyleSet(ramps.neutral, 0.1, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5),
positive: buildStyleSet(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5),
};
}
function buildStyleSet(
ramp: Scale,
styleDefinitions: {
background: StyleColors;
border: StyleColors;
foreground: StyleColors;
}
backgroundBase: number,
foregroundBase: number,
step: number = 0.08,
): StyleSet {
let styleDefinitions = buildStyleDefinition(backgroundBase, foregroundBase, step);
function colorString(indexOrColor: number | Color): string {
if (typeof indexOrColor === "number") {
return ramp(indexOrColor).hex();
@ -190,10 +217,11 @@ function buildStyleSet(
pressed: buildStyle("pressed"),
active: buildStyle("active"),
disabled: buildStyle("disabled"),
inverted: buildStyle("inverted"),
};
}
function buildLayer(bgBase: number, fgBase: number, step: number) {
function buildStyleDefinition(bgBase: number, fgBase: number, step: number = 0.08) {
return {
background: {
default: bgBase,
@ -201,6 +229,7 @@ function buildLayer(bgBase: number, fgBase: number, step: number) {
pressed: bgBase + step * 1.5,
active: bgBase + step * 3,
disabled: bgBase,
inverted: fgBase + step * 6,
},
border: {
default: bgBase + step * 1,
@ -208,49 +237,15 @@ function buildLayer(bgBase: number, fgBase: number, step: number) {
pressed: bgBase + step,
active: bgBase + step * 3,
disabled: bgBase + step * 0.5,
inverted: bgBase - step * 3,
},
foreground: {
default: fgBase,
hovered: fgBase,
pressed: fgBase,
active: fgBase,
active: fgBase + step * 6,
disabled: bgBase + step * 4,
inverted: bgBase + step * 2,
},
};
}
function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
return {
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, 0.5, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
};
}
function middleLayer(ramps: RampSet, isLight: boolean): Layer {
return {
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, 0.5, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
};
}
function topLayer(ramps: RampSet, isLight: boolean): Layer {
return {
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, 0.5, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
};
}
}