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

add more states to the theme testbench

Browse source
This commit is contained in:
K Simmons 2022-09-22 14:25:15 -07:00
parent 962f087ac2
commit 96f9ee784d
4 changed files with 96 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -148,7 +148,7 @@ impl ThemeTestbench {
) -> Flex {
Flex::row()
.with_child(Self::render_button(
set_index * 4,
set_index * 6,
layer_index,
set_name,
&style_set,
@ -156,7 +156,23 @@ impl ThemeTestbench {
cx,
))
.with_child(Self::render_button(
set_index * 4 + 1,
set_index * 6 + 1,
layer_index,
"hovered",
&style_set,
Some(|style_set| &style_set.hovered),
cx,
))
.with_child(Self::render_button(
set_index * 6 + 2,
layer_index,
"pressed",
&style_set,
Some(|style_set| &style_set.pressed),
cx,
))
.with_child(Self::render_button(
set_index * 6 + 3,
layer_index,
"active",
&style_set,
@ -164,7 +180,7 @@ impl ThemeTestbench {
cx,
))
.with_child(Self::render_button(
set_index * 4 + 2,
set_index * 6 + 4,
layer_index,
"disabled",
&style_set,

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

@ -85,6 +85,14 @@ export function text(
) {
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
let size = fontSizes[properties?.size || "sm"];
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties;
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties;
}
return {
family: fontFamilies[fontFamily],
color: style.foreground,
@ -141,6 +149,13 @@ export function border(
): Border {
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties;
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties;
}
return {
color: style.border,
width: 1,

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

@ -118,7 +118,7 @@ export default function workspace(colorScheme: ColorScheme) {
toolbar: {
height: 34,
background: background(elevation.top),
border: border(elevation.top, "variant", { bottom: true }),
border: border(elevation.top, { bottom: true }),
itemSpacing: 8,
navButton: {
color: foreground(elevation.top, "on"),

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

@ -1,5 +1,5 @@
import chroma, { Color, Scale } from "chroma-js";
import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, 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];
@ -151,35 +151,68 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
};
}
function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
let baseSet: StyleSet = {
default: {
background: ramps.neutral(0.15).hex(),
border: ramps.neutral(0.2).hex(),
foreground: ramps.neutral(1).hex(),
},
hovered: {
background: ramps.neutral(0.25).hex(),
border: ramps.neutral(1.0).hex(),
foreground: ramps.neutral(0.9).hex(),
},
pressed: {
background: ramps.neutral(0.55).hex(),
border: ramps.neutral(0.9).hex(),
foreground: ramps.neutral(0.9).hex(),
},
active: {
background: ramps.neutral(0.8).hex(),
border: ramps.neutral(0.8).hex(),
foreground: ramps.neutral(0.1).hex(),
},
disabled: {
background: ramps.neutral(0.25).hex(),
border: ramps.neutral(1).hex(),
foreground: ramps.neutral(0.9).hex(),
},
interface StyleColors {
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 colorString(indexOrColor: number | Color): string {
if (typeof indexOrColor === "number") {
return ramp(indexOrColor).hex();
} else {
return indexOrColor.hex();
}
}
function buildStyle(style: Styles): Style {
return {
background: colorString(styleDefinitions.background[style]),
border: colorString(styleDefinitions.border[style]),
foreground: colorString(styleDefinitions.foreground[style]),
}
}
return {
default: buildStyle("default"),
hovered: buildStyle("hovered"),
pressed: buildStyle("pressed"),
active: buildStyle("active"),
disabled: buildStyle("disabled"),
}
}
function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
let baseSet = buildStyleSet(ramps.neutral, {
background: {
default: 0.15,
hovered: 0.25,
pressed: 0.55,
active: 0.8,
disabled: 0.25,
},
border: {
default: 0.2,
hovered: 1.0,
pressed: 0.9,
active: 0.8,
disabled: 1,
},
foreground: {
default: 1,
hovered: 0.9,
pressed: 0.9,
active: 0.1,
disabled: 0.9,
},
});
let onSet: StyleSet = {
default: {
background: ramps.neutral(0.15).hex(),
@ -214,12 +247,6 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
foreground: ramps.neutral(1).hex(),
};
let variantStyle: Style = {
background: ramps.neutral(0.3).hex(),
border: ramps.neutral(0.6).hex(),
foreground: ramps.neutral(0.8).hex(),
};
let hoveredStyle: Style = {
background: ramps.neutral(0.1).hex(),
border: ramps.neutral(1.0).hex(),
@ -270,12 +297,6 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
foreground: ramps.neutral(1).hex(),
};
let variantStyle: Style = {
background: ramps.neutral(0.3).hex(),
border: ramps.neutral(0.6).hex(),
foreground: ramps.neutral(0.8).hex(),
};
let hoveredStyle: Style = {
background: ramps.neutral(0.4).hex(),
border: ramps.neutral(1.0).hex(),