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

More tweaks and add variant to theme testbench

Browse source
This commit is contained in:
K Simmons 2022-09-21 16:59:33 -07:00
parent 593c7a8cd1
commit eabd687cbc
7 changed files with 124 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -92,176 +92,32 @@ impl ThemeTestbench {
) -> Container { ) -> Container {
Flex::column() Flex::column()
.with_child( .with_child(
Flex::row() Self::render_button_set(0, layer_index, "base", &layer.base, cx)
.with_child(Self::render_button(
0,
layer_index,
"base",
&layer.base,
None,
cx,
))
.with_child(Self::render_button(
1,
layer_index,
"active",
&layer.base,
Some(|style_set| &style_set.active),
cx,
))
.with_child(Self::render_button(
2,
layer_index,
"disabled",
&layer.base,
Some(|style_set| &style_set.disabled),
cx,
))
.flex(1., false) .flex(1., false)
.boxed(), .boxed(),
) )
.with_child( .with_child(
Flex::row() Self::render_button_set(1, layer_index, "on", &layer.on, cx)
.with_child(Self::render_button(
3,
layer_index,
"on",
&layer.on,
None,
cx,
))
.with_child(Self::render_button(
4,
layer_index,
"active",
&layer.on,
Some(|style_set| &style_set.active),
cx,
))
.with_child(Self::render_button(
5,
layer_index,
"disabled",
&layer.on,
Some(|style_set| &style_set.disabled),
cx,
))
.flex(1., false) .flex(1., false)
.boxed(), .boxed(),
) )
.with_child( .with_child(
Flex::row() Self::render_button_set(2, layer_index, "info", &layer.info, cx)
.with_child(Self::render_button(
6,
layer_index,
"info",
&layer.info,
None,
cx,
))
.with_child(Self::render_button(
7,
layer_index,
"active",
&layer.info,
Some(|style_set| &style_set.active),
cx,
))
.with_child(Self::render_button(
8,
layer_index,
"disabled",
&layer.info,
Some(|style_set| &style_set.disabled),
cx,
))
.flex(1., false) .flex(1., false)
.boxed(), .boxed(),
) )
.with_child( .with_child(
Flex::row() Self::render_button_set(3, layer_index, "positive", &layer.positive, cx)
.with_child(Self::render_button(
9,
layer_index,
"positive",
&layer.positive,
None,
cx,
))
.with_child(Self::render_button(
10,
layer_index,
"active",
&layer.positive,
Some(|style_set| &style_set.active),
cx,
))
.with_child(Self::render_button(
11,
layer_index,
"disabled",
&layer.positive,
Some(|style_set| &style_set.disabled),
cx,
))
.flex(1., false) .flex(1., false)
.boxed(), .boxed(),
) )
.with_child( .with_child(
Flex::row() Self::render_button_set(4, layer_index, "warning", &layer.warning, cx)
.with_child(Self::render_button(
12,
layer_index,
"warning",
&layer.warning,
None,
cx,
))
.with_child(Self::render_button(
13,
layer_index,
"active",
&layer.warning,
Some(|style_set| &style_set.active),
cx,
))
.with_child(Self::render_button(
14,
layer_index,
"disabled",
&layer.warning,
Some(|style_set| &style_set.disabled),
cx,
))
.flex(1., false) .flex(1., false)
.boxed(), .boxed(),
) )
.with_child( .with_child(
Flex::row() Self::render_button_set(5, layer_index, "negative", &layer.negative, cx)
.with_child(Self::render_button(
15,
layer_index,
"negative",
&layer.negative,
None,
cx,
))
.with_child(Self::render_button(
16,
layer_index,
"active",
&layer.negative,
Some(|style_set| &style_set.active),
cx,
))
.with_child(Self::render_button(
17,
layer_index,
"disabled",
&layer.negative,
Some(|style_set| &style_set.disabled),
cx,
))
.flex(1., false) .flex(1., false)
.boxed(), .boxed(),
) )
@ -278,6 +134,48 @@ impl ThemeTestbench {
}) })
} }
fn render_button_set(
set_index: usize,
layer_index: usize,
set_name: &'static str,
style_set: &StyleSet,
cx: &mut RenderContext<'_, Self>,
) -> Flex {
Flex::row()
.with_child(Self::render_button(
set_index * 4,
layer_index,
set_name,
&style_set,
None,
cx,
))
.with_child(Self::render_button(
set_index * 4 + 1,
layer_index,
"variant",
&style_set,
Some(|style_set| &style_set.variant),
cx,
))
.with_child(Self::render_button(
set_index * 4 + 2,
layer_index,
"active",
&style_set,
Some(|style_set| &style_set.active),
cx,
))
.with_child(Self::render_button(
set_index * 4 + 3,
layer_index,
"disabled",
&style_set,
Some(|style_set| &style_set.disabled),
cx,
))
}
fn render_button( fn render_button(
button_index: usize, button_index: usize,
layer_index: usize, layer_index: usize,

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

@ -16,9 +16,9 @@ import tooltip from "./tooltip";
import terminal from "./terminal"; import terminal from "./terminal";
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme";
export const panel = { // export const panel = {
padding: { top: 12, bottom: 12 }, // padding: { top: 12, bottom: 12 },
}; // };
export default function app(colorScheme: ColorScheme): Object { export default function app(colorScheme: ColorScheme): Object {
return { return {
@ -38,7 +38,7 @@ export default function app(colorScheme: ColorScheme): Object {
contactFinder: contactFinder(colorScheme), contactFinder: contactFinder(colorScheme),
search: search(colorScheme), search: search(colorScheme),
breadcrumbs: { breadcrumbs: {
...text(colorScheme.lowest.top, "sans", "base", "variant"), ...text(colorScheme.lowest.top, "sans"),
padding: { padding: {
left: 6, left: 6,
}, },

5
styles/src/styleTree/contactsPanel.ts
View file

@ -1,5 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme";
import { panel } from "./app";
import { import {
background, background,
border, border,
@ -49,8 +48,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
}; };
return { return {
...panel, background: background(layer),
padding: { top: panel.padding.top, bottom: 0 }, padding: { top: 12, bottom: 0 },
userQueryEditor: { userQueryEditor: {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, cornerRadius: 6,

3
styles/src/styleTree/projectPanel.ts
View file

@ -1,11 +1,10 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme";
import { panel } from "./app";
import { background, foreground, text } from "./components"; import { background, foreground, text } from "./components";
export default function projectPanel(colorScheme: ColorScheme) { export default function projectPanel(colorScheme: ColorScheme) {
let layer = colorScheme.lowest.middle; let layer = colorScheme.lowest.middle;
return { return {
...panel, background: background(layer),
padding: { left: 12, right: 12, top: 6, bottom: 6 }, padding: { left: 12, right: 12, top: 6, bottom: 6 },
indentWidth: 8, indentWidth: 8,
entry: { entry: {

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

@ -12,7 +12,7 @@ export default function tabBar(colorScheme: ColorScheme) {
height, height,
background: background(layer), background: background(layer),
border: border(layer, { border: border(layer, {
left: true, right: true,
bottom: true, bottom: true,
overlay: true, overlay: true,
}), }),
@ -22,7 +22,7 @@ export default function tabBar(colorScheme: ColorScheme) {
iconDirty: foreground(layer, "info"), iconDirty: foreground(layer, "info"),
iconWidth: 8, iconWidth: 8,
spacing: 8, spacing: 8,
text: text(layer, "sans", { size: "sm" }), text: text(layer, "sans", "base", "variant", { size: "sm" }),
padding: { padding: {
left: 8, left: 8,
right: 8, right: 8,
@ -46,13 +46,13 @@ export default function tabBar(colorScheme: ColorScheme) {
const inactivePaneInactiveTab = { const inactivePaneInactiveTab = {
...tab, ...tab,
background: background(layer), background: background(layer),
text: text(layer, "sans", { size: "sm" }), text: text(layer, "sans", "base", "variant", { size: "sm" }),
}; };
const inactivePaneActiveTab = { const inactivePaneActiveTab = {
...tab, ...tab,
background: background(layer), background: background(elevation.top),
text: text(layer, "sans", "base", "variant", { size: "sm" }), text: text(elevation.top, "sans", "base", "variant", { size: "sm" }),
border: { border: {
...tab.border, ...tab.border,
bottom: false bottom: false
@ -70,11 +70,6 @@ export default function tabBar(colorScheme: ColorScheme) {
height, height,
background: background(layer), background: background(layer),
dropTargetOverlayColor: withOpacity(foreground(layer), 0.6), dropTargetOverlayColor: withOpacity(foreground(layer), 0.6),
border: border(layer, {
left: true,
bottom: true,
overlay: true,
}),
activePane: { activePane: {
activeTab: activePaneActiveTab, activeTab: activePaneActiveTab,
inactiveTab: tab, inactiveTab: tab,

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

@ -12,7 +12,7 @@ import tabBar from "./tabBar";
export default function workspace(colorScheme: ColorScheme) { export default function workspace(colorScheme: ColorScheme) {
const elevation = colorScheme.lowest; const elevation = colorScheme.lowest;
const layer = elevation.middle; const layer = elevation.bottom;
const titlebarPadding = 6; const titlebarPadding = 6;
return { return {
@ -117,20 +117,20 @@ export default function workspace(colorScheme: ColorScheme) {
}, },
toolbar: { toolbar: {
height: 34, height: 34,
background: background(layer), background: background(elevation.top),
border: border(layer, "base", "variant", { bottom: true }), border: border(elevation.top, "base", "variant", { bottom: true }),
itemSpacing: 8, itemSpacing: 8,
navButton: { navButton: {
color: foreground(layer, "on"), color: foreground(elevation.top, "on"),
iconWidth: 12, iconWidth: 12,
buttonWidth: 24, buttonWidth: 24,
cornerRadius: 6, cornerRadius: 6,
hover: { hover: {
color: foreground(layer, "on", "hovered"), color: foreground(elevation.top, "on", "hovered"),
background: background(layer, "on", "hovered"), background: background(elevation.top, "on", "hovered"),
}, },
disabled: { disabled: {
color: foreground(layer, "on", "disabled"), color: foreground(elevation.top, "on", "disabled"),
}, },
}, },
padding: { left: 8, right: 8, top: 4, bottom: 4 }, padding: { left: 8, right: 8, top: 4, bottom: 4 },

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

@ -143,7 +143,7 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
return { return {
ramps, ramps,
bottom: topLayer(ramps, isLight), bottom: bottomLayer(ramps, isLight),
middle: middleLayer(ramps, isLight), middle: middleLayer(ramps, isLight),
top: topLayer(ramps, isLight), top: topLayer(ramps, isLight),
@ -151,6 +151,62 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
}; };
} }
function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
let defaultStyle: Style = {
background: ramps.neutral(0.25).hex(),
border: ramps.neutral(0.6).hex(),
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(),
foreground: ramps.neutral(0.9).hex(),
};
let pressedStyle: Style = {
background: ramps.neutral(0.55).hex(),
border: ramps.neutral(0.9).hex(),
foreground: ramps.neutral(0.9).hex(),
};
let activeStyle: Style = {
background: ramps.neutral(0.8).hex(),
border: ramps.neutral(0.8).hex(),
foreground: ramps.neutral(0.1).hex(),
};
let disabledStyle: Style = {
background: ramps.neutral(0.25).hex(),
border: ramps.neutral(1).hex(),
foreground: ramps.neutral(0.9).hex(),
};
let styleSet: StyleSet = {
default: defaultStyle,
variant: variantStyle,
hovered: hoveredStyle,
pressed: pressedStyle,
active: activeStyle,
disabled: disabledStyle,
};
return {
base: styleSet,
on: styleSet,
info: styleSet,
positive: styleSet,
warning: styleSet,
negative: styleSet
};
}
function middleLayer(ramps: RampSet, isLight: boolean): Layer { function middleLayer(ramps: RampSet, isLight: boolean): Layer {
let defaultStyle: Style = { let defaultStyle: Style = {
background: ramps.neutral(0.2).hex(), background: ramps.neutral(0.2).hex(),