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

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

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

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

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

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

@ -27,13 +27,13 @@ export default function contactFinder(colorScheme: ColorScheme) {
contactButton: { contactButton: {
...contactButton, ...contactButton,
hover: { hover: {
background: background(layer, "base", "hovered"), background: background(layer, "hovered"),
}, },
}, },
disabledContactButton: { disabledContactButton: {
...contactButton, ...contactButton,
background: background(layer, "base", "disabled"), background: background(layer, "disabled"),
color: foreground(layer, "base", "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, right: sidePadding,
}, },
active: { active: {
...text(layer, "mono", "base", "active", { size: "sm" }), ...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "base", "active"), background: background(layer, "active"),
}, },
}, },
contactRow: { contactRow: {
@ -101,17 +101,17 @@ export default function contactsPanel(colorScheme: ColorScheme) {
right: sidePadding, right: sidePadding,
}, },
active: { active: {
background: background(layer, "base", "active"), background: background(layer, "active"),
}, },
}, },
treeBranch: { treeBranch: {
color: borderColor(layer), color: borderColor(layer),
width: 1, width: 1,
hover: { hover: {
color: borderColor(layer, "base", "hovered"), color: borderColor(layer, "hovered"),
}, },
active: { active: {
color: borderColor(layer, "base", "active"), color: borderColor(layer, "active"),
}, },
}, },
contactAvatar: { contactAvatar: {
@ -128,7 +128,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
contactButton: { contactButton: {
...contactButton, ...contactButton,
hover: { hover: {
background: background(layer, "base", "hovered"), background: background(layer, "hovered"),
}, },
}, },
disabledButton: { disabledButton: {
@ -144,10 +144,10 @@ export default function contactsPanel(colorScheme: ColorScheme) {
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm" }),
}, },
hover: { hover: {
background: background(layer, "base", "hovered"), background: background(layer, "hovered"),
}, },
active: { active: {
background: background(layer, "base", "active"), background: background(layer, "active"),
}, },
}, },
inviteRow: { inviteRow: {
@ -158,7 +158,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
border: border(layer, { top: true }), border: border(layer, { top: true }),
text: text(layer, "sans", { size: "sm" }), text: text(layer, "sans", { size: "sm" }),
hover: { 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, cornerRadius: 6,
label: text(layer, "sans", { size: "sm" }), label: text(layer, "sans", { size: "sm" }),
keystroke: { keystroke: {
...text(layer, "sans", "base", "variant", { size: "sm", weight: "bold" }), ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
padding: { left: 3, right: 3 }, padding: { left: 3, right: 3 },
}, },
hover: { hover: {
background: background(layer, "base", "hovered"), background: background(layer, "hovered"),
text: text(layer, "sans", "base", "hovered", { size: "sm" }), text: text(layer, "sans", "hovered", { size: "sm" }),
}, },
active: { active: {
background: background(layer, "base", "active"), background: background(layer, "active"),
text: text(layer, "sans", "base", "active", { size: "sm" }), text: text(layer, "sans", "active", { size: "sm" }),
}, },
activeHover: { activeHover: {
background: background(layer, "base", "active"), background: background(layer, "active"),
text: text(layer, "sans", "base", "active", { size: "sm" }), text: text(layer, "sans", "active", { size: "sm" }),
}, },
}, },
separator: { separator: {

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

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

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

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

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

@ -8,6 +8,6 @@ export default function projectDiagnostics(colorScheme: ColorScheme) {
tabIconSpacing: 4, tabIconSpacing: 4,
tabIconWidth: 13, tabIconWidth: 13,
tabSummarySpacing: 10, 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"), background: background(layer, "on", "hovered"),
}, },
active: { active: {
background: background(layer, "base", "active"), background: background(layer, "active"),
text: text(layer, "mono", "base", "active", { size: "sm" }), text: text(layer, "mono", "active", { size: "sm" }),
}, },
activeHover: { activeHover: {
background: background(layer, "base", "hovered"), background: background(layer, "hovered"),
text: text(layer, "mono", "base", "active", { size: "sm" }), text: text(layer, "mono", "active", { size: "sm" }),
}, },
}, },
cutEntryFade: 0.4, cutEntryFade: 0.4,

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

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

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

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

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

@ -17,19 +17,19 @@ export default function tabBar(colorScheme: ColorScheme) {
overlay: true, overlay: true,
}), }),
iconClose: foreground(layer), iconClose: foreground(layer),
iconCloseActive: foreground(layer, "base", "active"), iconCloseActive: foreground(layer, "active"),
iconConflict: foreground(layer, "warning"), iconConflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "info"), iconDirty: foreground(layer, "info"),
iconWidth: 8, iconWidth: 8,
spacing: 8, spacing: 8,
text: text(layer, "sans", "base", "variant", { size: "sm" }), text: text(layer, "sans", "variant", { size: "sm" }),
padding: { padding: {
left: 8, left: 8,
right: 8, right: 8,
}, },
description: { description: {
margin: { left: 6, top: 1 }, 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 = { const inactivePaneInactiveTab = {
...tab, ...tab,
background: background(layer), background: background(layer),
text: text(layer, "sans", "base", "variant", { size: "sm" }), text: text(layer, "sans", "variant", { size: "sm" }),
}; };
const inactivePaneActiveTab = { const inactivePaneActiveTab = {
...tab, ...tab,
background: background(elevation.top), background: background(elevation.top),
text: text(elevation.top, "sans", "base", "variant", { size: "sm" }), text: text(elevation.top, "sans", "variant", { size: "sm" }),
border: { border: {
...tab.border, ...tab.border,
bottom: false bottom: false
@ -84,7 +84,7 @@ export default function tabBar(colorScheme: ColorScheme) {
iconWidth: 12, iconWidth: 12,
buttonWidth: activePaneActiveTab.height, buttonWidth: activePaneActiveTab.height,
hover: { hover: {
color: foreground(layer, "base", "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
paneButtonContainer: { 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" }), ...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, top: 6, bottom: 6 }, margin: { left: headerPadding, top: 6, bottom: 6 },
hover: { hover: {
color: foreground(layer, "base", "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
dismissButton: { dismissButton: {
@ -24,7 +24,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
buttonWidth: 8, buttonWidth: 8,
buttonHeight: 8, buttonHeight: 8,
hover: { 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 }), border: border(layer, { bottom: true, overlay: true }),
signInPrompt: { signInPrompt: {
background: background(layer, "on", "default"), background: background(layer, "on"),
border: border(layer, "on", "default"), border: border(layer, "on"),
cornerRadius: 6, cornerRadius: 6,
margin: { margin: {
top: 1, top: 1,
@ -118,7 +118,7 @@ export default function workspace(colorScheme: ColorScheme) {
toolbar: { toolbar: {
height: 34, height: 34,
background: background(elevation.top), background: background(elevation.top),
border: border(elevation.top, "base", "variant", { bottom: true }), border: border(elevation.top, "variant", { bottom: true }),
itemSpacing: 8, itemSpacing: 8,
navButton: { navButton: {
color: foreground(elevation.top, "on"), color: foreground(elevation.top, "on"),
@ -136,7 +136,7 @@ export default function workspace(colorScheme: ColorScheme) {
padding: { left: 8, right: 8, top: 4, bottom: 4 }, padding: { left: 8, right: 8, top: 4, bottom: 4 },
}, },
breadcrumbs: { breadcrumbs: {
...text(layer, "mono", "on", "variant"), ...text(layer, "mono", "variant"),
padding: { left: 6 }, padding: { left: 6 },
}, },
disconnectedOverlay: { disconnectedOverlay: {

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

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

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

File diff suppressed because it is too large Load diff