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

promote variant to its own styleset

Browse source
This commit is contained in:
K Simmons 2022-09-22 13:29:19 -07:00
parent ebe8c952e4
commit 962f087ac2
17 changed files with 624 additions and 666 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -775,6 +775,7 @@ pub struct RampSet {
#[derive(Clone, Deserialize, Default)]
pub struct Layer {
pub base: StyleSet,
pub variant: StyleSet,
pub on: StyleSet,
pub info: StyleSet,
pub positive: StyleSet,
@ -785,7 +786,6 @@ pub struct Layer {
#[derive(Clone, Deserialize, Default)]
pub struct StyleSet {
pub default: Style,
pub variant: Style,
pub active: Style,
pub disabled: Style,
pub hovered: Style,

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

@ -2,8 +2,8 @@ use gpui::{
actions,
color::Color,
elements::{
Canvas, ConstrainedBox, Container, ContainerStyle, ElementBox, Flex, Label, Margin,
MouseEventHandler, Padding, ParentElement,
Canvas, Container, ContainerStyle, ElementBox, Flex, Label, Margin, MouseEventHandler,
Padding, ParentElement,
},
fonts::TextStyle,
Border, Element, Entity, MutableAppContext, Quad, RenderContext, View, ViewContext,
@ -97,27 +97,32 @@ impl ThemeTestbench {
.boxed(),
)
.with_child(
Self::render_button_set(1, layer_index, "on", &layer.on, cx)
Self::render_button_set(1, layer_index, "variant", &layer.variant, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Self::render_button_set(2, layer_index, "info", &layer.info, cx)
Self::render_button_set(2, layer_index, "on", &layer.on, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Self::render_button_set(3, layer_index, "positive", &layer.positive, cx)
Self::render_button_set(3, layer_index, "info", &layer.info, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Self::render_button_set(4, layer_index, "warning", &layer.warning, cx)
Self::render_button_set(4, layer_index, "positive", &layer.positive, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Self::render_button_set(5, layer_index, "negative", &layer.negative, cx)
Self::render_button_set(5, layer_index, "warning", &layer.warning, cx)
.flex(1., false)
.boxed(),
)
.with_child(
Self::render_button_set(6, layer_index, "negative", &layer.negative, cx)
.flex(1., false)
.boxed(),
)
@ -153,21 +158,13 @@ impl ThemeTestbench {
.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,
set_index * 4 + 2,
layer_index,
"disabled",
&style_set,

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

@ -1,16 +1,45 @@
import { fontFamilies, fontSizes, FontWeight } from "../common";
import { Layer, Styles, StyleSets } from "../themes/common/colorScheme";
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
return layer[styleSet ?? "base"][style ?? "default"].background;
function isStyleSet(key: any): key is StyleSets {
return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
}
export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
return layer[styleSet ?? "base"][style ?? "default"].border;
function isStyle(key: any): key is Styles {
return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
}
export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
return layer[styleSet ?? "base"][style ?? "default"].foreground;
function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style {
let styleSet: StyleSets = "base";
let style: Styles = "default";
if (isStyleSet(possibleStyleSetOrStyle)) {
styleSet = possibleStyleSetOrStyle;
} else if (isStyle(possibleStyleSetOrStyle)) {
style = possibleStyleSetOrStyle;
}
if (isStyle(possibleStyle)) {
style = possibleStyle;
}
return layer[styleSet][style];
}
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 {
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 {
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 {
return getStyle(layer, styleSetOrStyles, style).foreground;
}
interface Text {
family: keyof typeof fontFamilies,
@ -41,33 +70,24 @@ export function text(
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
style: Styles,
properties?: TextProperties): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSetOrProperties?: StyleSets | TextProperties,
properties?: TextProperties): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
styleOrProperties?: Styles | TextProperties,
properties?: TextProperties
) {
let styleSet: StyleSets = "base";
let style: Styles = "default";
if (typeof styleSetOrProperties === "string") {
styleSet = styleSetOrProperties
} else if (styleSetOrProperties !== undefined) {
properties = styleSetOrProperties;
}
if (typeof styleOrProperties === "string") {
style = styleOrProperties;
} else if (styleOrProperties !== undefined) {
properties = styleOrProperties;
}
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
let size = fontSizes[properties?.size || "sm"];
return {
family: fontFamilies[fontFamily],
color: layer[styleSet][style].foreground,
color: style.foreground,
...properties,
size,
};
@ -84,7 +104,7 @@ export interface Border {
overlay?: boolean;
}
export interface BorderOptions {
export interface BorderProperties {
width?: number;
top?: boolean;
bottom?: boolean;
@ -97,41 +117,33 @@ export function border(
layer: Layer,
styleSet: StyleSets,
style: Styles,
options?: BorderOptions
properties?: BorderProperties
): Border;
export function border(
layer: Layer,
styleSet: StyleSets,
options?: BorderOptions
properties?: BorderProperties
): Border;
export function border(
layer: Layer,
options?: BorderOptions
style: Styles,
properties?: BorderProperties
): Border;
export function border(
layer: Layer,
styleSetOrOptions?: StyleSets | BorderOptions,
styleOrOptions?: Styles | BorderOptions,
options?: BorderOptions
properties?: BorderProperties
): Border;
export function border(
layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
styleOrProperties?: Styles | BorderProperties,
properties?: BorderProperties
): Border {
let styleSet: StyleSets = "base";
let style: Styles = "default";
if (typeof styleSetOrOptions === "string") {
styleSet = styleSetOrOptions
} else if (styleSetOrOptions !== undefined) {
options = styleSetOrOptions;
}
if (typeof styleOrOptions === "string") {
style = styleOrOptions;
} else if (styleOrOptions !== undefined) {
options = styleOrOptions;
}
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
return {
color: layer[styleSet][style].border,
color: style.border,
width: 1,
...options,
...properties,
};
}

6
styles/src/styleTree/contactFinder.ts
View file

@ -27,13 +27,13 @@ export default function contactFinder(colorScheme: ColorScheme) {
contactButton: {
...contactButton,
hover: {
background: background(layer, "base", "hovered"),
background: background(layer, "hovered"),
},
},
disabledContactButton: {
...contactButton,
background: background(layer, "base", "disabled"),
color: foreground(layer, "base", "disabled"),
background: background(layer, "disabled"),
color: foreground(layer, "disabled"),
},
};
}

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

@ -91,8 +91,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
right: sidePadding,
},
active: {
...text(layer, "mono", "base", "active", { size: "sm" }),
background: background(layer, "base", "active"),
...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "active"),
},
},
contactRow: {
@ -101,17 +101,17 @@ export default function contactsPanel(colorScheme: ColorScheme) {
right: sidePadding,
},
active: {
background: background(layer, "base", "active"),
background: background(layer, "active"),
},
},
treeBranch: {
color: borderColor(layer),
width: 1,
hover: {
color: borderColor(layer, "base", "hovered"),
color: borderColor(layer, "hovered"),
},
active: {
color: borderColor(layer, "base", "active"),
color: borderColor(layer, "active"),
},
},
contactAvatar: {
@ -128,7 +128,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
contactButton: {
...contactButton,
hover: {
background: background(layer, "base", "hovered"),
background: background(layer, "hovered"),
},
},
disabledButton: {
@ -144,10 +144,10 @@ export default function contactsPanel(colorScheme: ColorScheme) {
...text(layer, "mono", { size: "sm" }),
},
hover: {
background: background(layer, "base", "hovered"),
background: background(layer, "hovered"),
},
active: {
background: background(layer, "base", "active"),
background: background(layer, "active"),
},
},
inviteRow: {
@ -158,7 +158,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
border: border(layer, { top: true }),
text: text(layer, "sans", { size: "sm" }),
hover: {
text: text(layer, "sans", "base", "hovered", { size: "sm" }),
text: text(layer, "sans", "hovered", { size: "sm" }),
},
},
};

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

@ -23,20 +23,20 @@ export default function contextMenu(colorScheme: ColorScheme) {
cornerRadius: 6,
label: text(layer, "sans", { size: "sm" }),
keystroke: {
...text(layer, "sans", "base", "variant", { size: "sm", weight: "bold" }),
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
padding: { left: 3, right: 3 },
},
hover: {
background: background(layer, "base", "hovered"),
text: text(layer, "sans", "base", "hovered", { size: "sm" }),
background: background(layer, "hovered"),
text: text(layer, "sans", "hovered", { size: "sm" }),
},
active: {
background: background(layer, "base", "active"),
text: text(layer, "sans", "base", "active", { size: "sm" }),
background: background(layer, "active"),
text: text(layer, "sans", "active", { size: "sm" }),
},
activeHover: {
background: background(layer, "base", "active"),
text: text(layer, "sans", "base", "active", { size: "sm" }),
background: background(layer, "active"),
text: text(layer, "sans", "active", { size: "sm" }),
},
},
separator: {

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

@ -133,10 +133,10 @@ export default function editor(colorScheme: ColorScheme) {
return {
textColor: syntax.primary.color,
background: background(layer),
activeLineBackground: background(layer, "base", "variant"),
highlightedLineBackground: background(layer, "base", "variant"),
activeLineBackground: background(layer, "variant"),
highlightedLineBackground: background(layer, "variant"),
codeActions: {
indicator: foreground(layer, "base", "variant"),
indicator: foreground(layer, "variant"),
verticalScale: 0.618
},
diffBackgroundDeleted: background(layer, "negative"),
@ -147,7 +147,7 @@ export default function editor(colorScheme: ColorScheme) {
gutterBackground: background(layer),
gutterPaddingFactor: 3.5,
lineNumber: foreground(layer),
lineNumberActive: foreground(layer, "base", "active"),
lineNumberActive: foreground(layer, "active"),
renameFade: 0.6,
unnecessaryCodeFade: 0.5,
selection: colorScheme.players[0],
@ -169,7 +169,7 @@ export default function editor(colorScheme: ColorScheme) {
item: autocompleteItem,
hoveredItem: {
...autocompleteItem,
background: background(elevation.above.top, "base", "hovered"),
background: background(elevation.above.top, "hovered"),
},
margin: {
left: -14,
@ -177,7 +177,7 @@ export default function editor(colorScheme: ColorScheme) {
matchHighlight: elevation.above.ramps.blue(0.5).hex(),
selectedItem: {
...autocompleteItem,
background: background(elevation.above.top, "base", "active"),
background: background(elevation.above.top, "active"),
},
},
diagnosticHeader: {

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

@ -23,11 +23,11 @@ export default function picker(colorScheme: ColorScheme) {
text: text(layer, "sans"),
highlightText: text(layer, "sans", { weight: "bold" }),
active: {
background: background(layer, "base", "active"),
text: text(layer, "sans", "base", "active"),
background: background(layer, "active"),
text: text(layer, "sans", "active"),
},
hover: {
background: background(layer, "base", "hovered"),
background: background(layer, "hovered"),
},
},
border: border(layer),

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

@ -8,6 +8,6 @@ export default function projectDiagnostics(colorScheme: ColorScheme) {
tabIconSpacing: 4,
tabIconWidth: 13,
tabSummarySpacing: 10,
emptyMessage: text(layer, "sans", "base", "variant", { size: "md" }),
emptyMessage: text(layer, "sans", "variant", { size: "md" }),
};
}

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

@ -17,12 +17,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer, "on", "hovered"),
},
active: {
background: background(layer, "base", "active"),
text: text(layer, "mono", "base", "active", { size: "sm" }),
background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
activeHover: {
background: background(layer, "base", "hovered"),
text: text(layer, "mono", "base", "active", { size: "sm" }),
background: background(layer, "hovered"),
text: text(layer, "mono", "active", { size: "sm" }),
},
},
cutEntryFade: 0.4,

6
styles/src/styleTree/search.ts
View file

@ -10,9 +10,9 @@ export default function search(colorScheme: ColorScheme) {
cornerRadius: 8,
minWidth: 200,
maxWidth: 500,
placeholderText: text(layer, "mono", "base", "disabled"),
placeholderText: text(layer, "mono", "disabled"),
selection: colorScheme.players[0],
text: text(layer, "mono", "base", "active"),
text: text(layer, "mono", "active"),
border: border(layer),
margin: {
right: 12,
@ -65,7 +65,7 @@ export default function search(colorScheme: ColorScheme) {
border: border(layer, "negative"),
},
matchIndex: {
...text(layer, "mono", "on", "variant"),
...text(layer, "mono", "variant"),
padding: 6,
},
optionButtonGroup: {

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

@ -42,7 +42,7 @@ export default function statusBar(colorScheme: ColorScheme) {
},
diagnosticMessage: {
...text(layer, "sans"),
hover: text(layer, "sans", "base", "hovered"),
hover: text(layer, "sans", "hovered"),
},
feedback: {
...text(layer, "sans"),
@ -98,12 +98,12 @@ export default function statusBar(colorScheme: ColorScheme) {
iconSize: 16,
iconColor: foreground(layer),
hover: {
iconColor: foreground(layer, "base", "hovered"),
background: background(layer, "base", "hovered"),
iconColor: foreground(layer, "hovered"),
background: background(layer, "hovered"),
},
active: {
iconColor: foreground(layer, "base", "active"),
background: background(layer, "base", "active"),
iconColor: foreground(layer, "active"),
background: background(layer, "active"),
},
},
badge: {

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

@ -17,19 +17,19 @@ export default function tabBar(colorScheme: ColorScheme) {
overlay: true,
}),
iconClose: foreground(layer),
iconCloseActive: foreground(layer, "base", "active"),
iconCloseActive: foreground(layer, "active"),
iconConflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "info"),
iconWidth: 8,
spacing: 8,
text: text(layer, "sans", "base", "variant", { size: "sm" }),
text: text(layer, "sans", "variant", { size: "sm" }),
padding: {
left: 8,
right: 8,
},
description: {
margin: { left: 6, top: 1 },
...text(layer, "sans", "base", "variant", { size: "2xs" })
...text(layer, "sans", "variant", { size: "2xs" })
}
};
@ -46,13 +46,13 @@ export default function tabBar(colorScheme: ColorScheme) {
const inactivePaneInactiveTab = {
...tab,
background: background(layer),
text: text(layer, "sans", "base", "variant", { size: "sm" }),
text: text(layer, "sans", "variant", { size: "sm" }),
};
const inactivePaneActiveTab = {
...tab,
background: background(elevation.top),
text: text(elevation.top, "sans", "base", "variant", { size: "sm" }),
text: text(elevation.top, "sans", "variant", { size: "sm" }),
border: {
...tab.border,
bottom: false
@ -84,7 +84,7 @@ export default function tabBar(colorScheme: ColorScheme) {
iconWidth: 12,
buttonWidth: activePaneActiveTab.height,
hover: {
color: foreground(layer, "base", "hovered"),
color: foreground(layer, "hovered"),
},
},
paneButtonContainer: {

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

@ -14,7 +14,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, top: 6, bottom: 6 },
hover: {
color: foreground(layer, "base", "hovered"),
color: foreground(layer, "hovered"),
},
},
dismissButton: {
@ -24,7 +24,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
buttonWidth: 8,
buttonHeight: 8,
hover: {
color: foreground(layer, "base", "hovered"),
color: foreground(layer, "hovered"),
},
},
};

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

@ -72,8 +72,8 @@ export default function workspace(colorScheme: ColorScheme) {
},
border: border(layer, { bottom: true, overlay: true }),
signInPrompt: {
background: background(layer, "on", "default"),
border: border(layer, "on", "default"),
background: background(layer, "on"),
border: border(layer, "on"),
cornerRadius: 6,
margin: {
top: 1,
@ -118,7 +118,7 @@ export default function workspace(colorScheme: ColorScheme) {
toolbar: {
height: 34,
background: background(elevation.top),
border: border(elevation.top, "base", "variant", { bottom: true }),
border: border(elevation.top, "variant", { bottom: true }),
itemSpacing: 8,
navButton: {
color: foreground(elevation.top, "on"),
@ -136,7 +136,7 @@ export default function workspace(colorScheme: ColorScheme) {
padding: { left: 8, right: 8, top: 4, bottom: 4 },
},
breadcrumbs: {
...text(layer, "mono", "on", "variant"),
...text(layer, "mono", "variant"),
padding: { left: 6 },
},
disconnectedOverlay: {

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

@ -47,6 +47,7 @@ export interface Shadow {
export type StyleSets = keyof Layer;
export interface Layer {
base: StyleSet,
variant: StyleSet,
on: StyleSet,
info: StyleSet,
positive: StyleSet,
@ -69,7 +70,6 @@ export interface RampSet {
export type Styles = keyof StyleSet;
export interface StyleSet {
default: Style,
variant: Style,
active: Style,
disabled: Style,
hovered: Style,

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

File diff suppressed because it is too large Load diff