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 {
Flex::column()
.with_child(
Flex::row()
.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,
))
Self::render_button_set(0, layer_index, "base", &layer.base, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Flex::row()
.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,
))
Self::render_button_set(1, layer_index, "on", &layer.on, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Flex::row()
.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,
))
Self::render_button_set(2, layer_index, "info", &layer.info, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Flex::row()
.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,
))
Self::render_button_set(3, layer_index, "positive", &layer.positive, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Flex::row()
.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,
))
Self::render_button_set(4, layer_index, "warning", &layer.warning, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Flex::row()
.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,
))
Self::render_button_set(5, layer_index, "negative", &layer.negative, cx)
.flex(1., false)
.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(
button_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 { ColorScheme } from "../themes/common/colorScheme";
export const panel = {
padding: { top: 12, bottom: 12 },
};
// export const panel = {
// padding: { top: 12, bottom: 12 },
// };
export default function app(colorScheme: ColorScheme): Object {
return {
@ -38,7 +38,7 @@ export default function app(colorScheme: ColorScheme): Object {
contactFinder: contactFinder(colorScheme),
search: search(colorScheme),
breadcrumbs: {
...text(colorScheme.lowest.top, "sans", "base", "variant"),
...text(colorScheme.lowest.top, "sans"),
padding: {
left: 6,
},

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

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

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

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

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

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

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

@ -12,7 +12,7 @@ import tabBar from "./tabBar";
export default function workspace(colorScheme: ColorScheme) {
const elevation = colorScheme.lowest;
const layer = elevation.middle;
const layer = elevation.bottom;
const titlebarPadding = 6;
return {
@ -117,20 +117,20 @@ export default function workspace(colorScheme: ColorScheme) {
},
toolbar: {
height: 34,
background: background(layer),
border: border(layer, "base", "variant", { bottom: true }),
background: background(elevation.top),
border: border(elevation.top, "base", "variant", { bottom: true }),
itemSpacing: 8,
navButton: {
color: foreground(layer, "on"),
color: foreground(elevation.top, "on"),
iconWidth: 12,
buttonWidth: 24,
cornerRadius: 6,
hover: {
color: foreground(layer, "on", "hovered"),
background: background(layer, "on", "hovered"),
color: foreground(elevation.top, "on", "hovered"),
background: background(elevation.top, "on", "hovered"),
},
disabled: {
color: foreground(layer, "on", "disabled"),
color: foreground(elevation.top, "on", "disabled"),
},
},
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 {
ramps,
bottom: topLayer(ramps, isLight),
bottom: bottomLayer(ramps, isLight),
middle: middleLayer(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 {
let defaultStyle: Style = {
background: ramps.neutral(0.2).hex(),