Detailed changes
@@ -10,21 +10,23 @@ export default function commandPalette(colorScheme: ColorScheme) {
keystrokeSpacing: 8,
key:
toggleable(interactive({
- text: text(layer, "mono", "variant", "default", { size: "xs" }),
- cornerRadius: 2,
- background: background(layer, "on"),
- padding: {
- top: 1,
- bottom: 1,
- left: 6,
- right: 6,
- },
- margin: {
- top: 1,
- bottom: 1,
- left: 2,
- },
- }, { hover: { cornerRadius: 4, padding: { top: 17 } } }), {
+ base: {
+ text: text(layer, "mono", "variant", "default", { size: "xs" }),
+ cornerRadius: 2,
+ background: background(layer, "on"),
+ padding: {
+ top: 1,
+ bottom: 1,
+ left: 6,
+ right: 6,
+ },
+ margin: {
+ top: 1,
+ bottom: 1,
+ left: 2,
+ },
+ }, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }
+ }), {
default: {
text: text(layer, "mono", "on", "default", { size: "xs" }),
background: withOpacity(background(layer, "on"), 0.2),
@@ -73,14 +73,17 @@ export default function contactsPanel(colorScheme: ColorScheme) {
rowHeight: 28,
sectionIconSize: 8,
headerRow: toggleable(interactive({
- ...text(layer, "mono", { size: "sm" }),
- margin: { top: 14 },
- padding: {
- left: sidePadding,
- right: sidePadding,
- },
- background: background(layer, "default"),// posiewic: breaking change
- }, {}),
+ base: {
+ ...text(layer, "mono", { size: "sm" }),
+ margin: { top: 14 },
+ padding: {
+ left: sidePadding,
+ right: sidePadding,
+ },
+ background: background(layer, "default"),// posiewic: breaking change
+ }
+ , state: { hovered: { background: background(layer, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
+ }),
{
default: {
...text(layer, "mono", "active", { size: "sm" }),
@@ -88,27 +91,30 @@ export default function contactsPanel(colorScheme: ColorScheme) {
},
}),
leaveCall: interactive({
- background: background(layer),
- border: border(layer),
- cornerRadius: 6,
- margin: {
- top: 1,
- },
- padding: {
- top: 1,
- bottom: 1,
- left: 7,
- right: 7,
- },
- ...text(layer, "sans", "variant", { size: "xs" }),
- },
- {
- hover: {
+ base: {
+ background: background(layer),
+ border: border(layer),
+ cornerRadius: 6,
+ margin: {
+ top: 1,
+ },
+ padding: {
+ top: 1,
+ bottom: 1,
+ left: 7,
+ right: 7,
+ },
+ ...text(layer, "sans", "variant", { size: "xs" }),
+ }
+ ,
+ state: {
+ hovered: {
...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"),
border: border(layer, "hovered"),
}
}
+ }
),
contactRow: {
inactive: {
@@ -153,13 +159,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
},
},
contactButtonSpacing: nameMargin,
- contactButton: interactive(
- contactButton,
- {
- hover: {
+ contactButton: interactive({
+ base: { ...contactButton },
+ state: {
+ hovered: {
background: background(layer, "hovered"),
},
- }),
+ }
+ }),
disabledButton: {
...contactButton,
background: background(layer, "on"),
@@ -169,14 +176,16 @@ export default function contactsPanel(colorScheme: ColorScheme) {
...text(layer, "mono", "variant", { size: "xs" }),
},
treeBranch: toggleable(interactive({
- color: borderColor(layer),
- width: 1,
- },
- {
- hover: {
+ base: {
+ color: borderColor(layer),
+ width: 1,
+ },
+ state: {
+ hovered: {
color: borderColor(layer),
},
- }),
+ }
+ }),
{
default: {
color: borderColor(layer),
@@ -23,18 +23,20 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
},
button:
interactive({
- ...text(layer, "sans", "on", { size: "xs" }),
- background: background(layer, "on"),
- padding: 4,
- cornerRadius: 6,
- margin: { left: 6 }
- },
+ base: {
+ ...text(layer, "sans", "on", { size: "xs" }),
+ background: background(layer, "on"),
+ padding: 4,
+ cornerRadius: 6,
+ margin: { left: 6 }
+ },
- {
- hover: {
+ state: {
+ hovered: {
background: background(layer, "on", "hovered"),
}
- }),
+ }
+ }),
dismissButton: {
default: {
@@ -13,35 +13,37 @@ export default function contextMenu(colorScheme: ColorScheme) {
border: border(layer),
keystrokeMargin: 30,
item: toggleable(interactive({
- iconSpacing: 8,
- iconWidth: 14,
- padding: { left: 6, right: 6, top: 2, bottom: 2 },
- cornerRadius: 6,
- label: text(layer, "sans", { size: "sm" }),
- keystroke: {
- ...text(layer, "sans", "variant", {
- size: "sm",
- weight: "bold",
- }),
- padding: { left: 3, right: 3 },
- }
- }, {
- hover: {
- background: background(layer, "hovered"),
- label: text(layer, "sans", "hovered", { size: "sm" }),
+ base: {
+ iconSpacing: 8,
+ iconWidth: 14,
+ padding: { left: 6, right: 6, top: 2, bottom: 2 },
+ cornerRadius: 6,
+ label: text(layer, "sans", { size: "sm" }),
keystroke: {
- ...text(layer, "sans", "hovered", {
+ ...text(layer, "sans", "variant", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
- },
+ }
+ }, state: {
+ hovered: {
+ background: background(layer, "hovered"),
+ label: text(layer, "sans", "hovered", { size: "sm" }),
+ keystroke: {
+ ...text(layer, "sans", "hovered", {
+ size: "sm",
+ weight: "bold",
+ }),
+ padding: { left: 3, right: 3 },
+ },
+ }
}
}), {
default: {
background: background(layer, "active"),
},
- hover: {
+ hovered: {
background: background(layer, "active"),
},
}),
@@ -9,53 +9,57 @@ export default function copilot(colorScheme: ColorScheme) {
let ctaButton =
// Copied from welcome screen. FIXME: Move this into a ZDS component
interactive({
- background: background(layer),
- border: border(layer, "default"),
- cornerRadius: 4,
- margin: {
- top: 4,
- bottom: 4,
- left: 8,
- right: 8,
- },
- padding: {
- top: 3,
- bottom: 3,
- left: 7,
- right: 7,
+ base: {
+ background: background(layer),
+ border: border(layer, "default"),
+ cornerRadius: 4,
+ margin: {
+ top: 4,
+ bottom: 4,
+ left: 8,
+ right: 8,
+ },
+ padding: {
+ top: 3,
+ bottom: 3,
+ left: 7,
+ right: 7,
+ },
+ ...text(layer, "sans", "default", { size: "sm" })
},
- ...text(layer, "sans", "default", { size: "sm" })
- },
- {
- hover: {
+ state: {
+ hovered: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
- });
+ }
+ });
return {
outLinkIcon:
interactive({
- icon: svg(
- foreground(layer, "variant"),
- "icons/link_out_12.svg",
- 12,
- 12
- ),
- container: {
- cornerRadius: 6,
- padding: { left: 6 },
+ base: {
+ icon: svg(
+ foreground(layer, "variant"),
+ "icons/link_out_12.svg",
+ 12,
+ 12
+ ),
+ container: {
+ cornerRadius: 6,
+ padding: { left: 6 },
+ },
},
- },
- {
- hover: {
+ state: {
+ hovered: {
icon: {
color:
foreground(layer, "hovered")
}
},
- }),
+ }
+ }),
modal: {
titleText: {
@@ -82,7 +86,8 @@ export default function copilot(colorScheme: ColorScheme) {
bottom: 8,
},
},
- closeIcon: interactive(
+ closeIcon: interactive({
+ base:
{
icon: svg(
foreground(layer, "variant"),
@@ -103,8 +108,8 @@ export default function copilot(colorScheme: ColorScheme) {
},
}
},
- {
- hover: {
+ state: {
+ hovered: {
icon: svg(
foreground(layer, "on"),
"icons/x_mark_8.svg",
@@ -120,7 +125,8 @@ export default function copilot(colorScheme: ColorScheme) {
8
),
},
- }),
+ }
+ }),
dimensions: {
width: 280,
height: 280,
@@ -196,27 +202,29 @@ export default function copilot(colorScheme: ColorScheme) {
},
right: (content_width * 1) / 3,
rightContainer: interactive({
- border: border(colorScheme.lowest, "inverted", {
- bottom: false,
- right: false,
- top: false,
- left: true,
- }),
- padding: {
- top: 3,
- bottom: 5,
- left: 8,
- right: 0,
- }
- }, {
- hover: {
- border: border(layer, "active", {
+ base: {
+ border: border(colorScheme.lowest, "inverted", {
bottom: false,
right: false,
top: false,
left: true,
}),
- },
+ padding: {
+ top: 3,
+ bottom: 5,
+ left: 8,
+ right: 0,
+ }
+ }, state: {
+ hovered: {
+ border: border(layer, "active", {
+ bottom: false,
+ right: false,
+ top: false,
+ left: true,
+ }),
+ },
+ }
})
},
},
@@ -51,14 +51,16 @@ export default function editor(colorScheme: ColorScheme) {
suggestion: syntax.predictive,
codeActions: {
indicator: toggleable(interactive({
- color: foreground(layer, "variant"),
- }, {
- clicked: {
- color: foreground(layer, "base"),
- },
- hover: {
- color: foreground(layer, "on"),
- },
+ base: {
+ color: foreground(layer, "variant"),
+ }, state: {
+ clicked: {
+ color: foreground(layer, "base"),
+ },
+ hovered: {
+ color: foreground(layer, "on"),
+ },
+ }
}),
{
default: {
@@ -73,14 +75,16 @@ export default function editor(colorScheme: ColorScheme) {
foldedIcon: "icons/chevron_right_8.svg",
foldableIcon: "icons/chevron_down_8.svg",
indicator: toggleable(interactive({
- color: foreground(layer, "variant"),
- }, {
- clicked: {
- color: foreground(layer, "base"),
- },
- hover: {
- color: foreground(layer, "on"),
- },
+ base: {
+ color: foreground(layer, "variant"),
+ }, state: {
+ clicked: {
+ color: foreground(layer, "base"),
+ },
+ hovered: {
+ color: foreground(layer, "on"),
+ },
+ }
}),
{
default: {
@@ -231,19 +235,21 @@ export default function editor(colorScheme: ColorScheme) {
underline: syntax.linkUri.underline,
},
jumpIcon: interactive({
- color: foreground(layer, "on"),
- iconWidth: 20,
- buttonWidth: 20,
- cornerRadius: 6,
- padding: {
- top: 6,
- bottom: 6,
- left: 6,
- right: 6,
- }
- }, {
- hover: {
- background: background(layer, "on", "hovered"),
+ base: {
+ color: foreground(layer, "on"),
+ iconWidth: 20,
+ buttonWidth: 20,
+ cornerRadius: 6,
+ padding: {
+ top: 6,
+ bottom: 6,
+ left: 6,
+ right: 6,
+ }
+ }, state: {
+ hovered: {
+ background: background(layer, "on", "hovered"),
+ }
}
}),
@@ -41,23 +41,26 @@ export default function picker(colorScheme: ColorScheme): any {
padding: {},
},
item: toggleable(interactive({
- padding: {
- bottom: 4,
- left: 12,
- right: 12,
- top: 4,
- },
- margin: {
- top: 1,
- left: 4,
- right: 4,
- },
- cornerRadius: 8,
- text: text(layer, "sans", "variant"),
- highlightText: text(layer, "sans", "accent", { weight: "bold" }),
- }, {
- hover: {
- background: withOpacity(background(layer, "hovered"), 0.5),
+ base: {
+ padding: {
+ bottom: 4,
+ left: 12,
+ right: 12,
+ top: 4,
+ },
+ margin: {
+ top: 1,
+ left: 4,
+ right: 4,
+ },
+ cornerRadius: 8,
+ text: text(layer, "sans", "variant"),
+ highlightText: text(layer, "sans", "accent", { weight: "bold" }),
+ }
+ , state: {
+ hovered: {
+ background: withOpacity(background(layer, "hovered"), 0.5),
+ }
}
}),
{
@@ -30,15 +30,17 @@ export default function projectPanel(colorScheme: ColorScheme) {
}
let entry = toggleable(interactive({
- ...baseEntry,
- text: text(layer, "mono", "variant", { size: "sm" }),
- status,
- },
+ base: {
+ ...baseEntry,
+ text: text(layer, "mono", "variant", { size: "sm" }),
+ status,
+ }, state:
{
- hover: {
+ hovered: {
background: background(layer, "variant", "hovered"),
}
- }),
+ }
+ }),
{
default: {
/*background: colorScheme.isLight
@@ -46,7 +48,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
: background(layer, "active") ,*/ // todo posiewic
text: text(layer, "mono", "active", { size: "sm" }),
},
- hover: {
+ hovered: {
//background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
@@ -55,27 +57,29 @@ export default function projectPanel(colorScheme: ColorScheme) {
return {
openProjectButton: interactive({
- background: background(layer),
- border: border(layer, "active"),
- cornerRadius: 4,
- margin: {
- top: 16,
- left: 16,
- right: 16,
- },
- padding: {
- top: 3,
- bottom: 3,
- left: 7,
- right: 7,
- },
- ...text(layer, "sans", "default", { size: "sm" })
- }, {
- hover: {
- ...text(layer, "sans", "default", { size: "sm" }),
- background: background(layer, "hovered"),
+ base: {
+ background: background(layer),
border: border(layer, "active"),
- },
+ cornerRadius: 4,
+ margin: {
+ top: 16,
+ left: 16,
+ right: 16,
+ },
+ padding: {
+ top: 3,
+ bottom: 3,
+ left: 7,
+ right: 7,
+ },
+ ...text(layer, "sans", "default", { size: "sm" })
+ }, state: {
+ hovered: {
+ ...text(layer, "sans", "default", { size: "sm" }),
+ background: background(layer, "hovered"),
+ border: border(layer, "active"),
+ },
+ }
}),
background: background(layer),
padding: { left: 6, right: 6, top: 0, bottom: 6 },
@@ -27,74 +27,82 @@ export default function statusBar(colorScheme: ColorScheme) {
border: border(layer, { top: true, overlay: true }),
cursorPosition: text(layer, "sans", "variant"),
activeLanguage: interactive({
- padding: { left: 6, right: 6 },
- ...text(layer, "sans", "variant")
- },
- {
- hover: {
+ base: {
+ padding: { left: 6, right: 6 },
+ ...text(layer, "sans", "variant")
+ },
+ state: {
+ hovered: {
...text(layer, "sans", "on"),
}
- },
+ }
+ },
),
autoUpdateProgressMessage: text(layer, "sans", "variant"),
autoUpdateDoneMessage: text(layer, "sans", "variant"),
lspStatus: interactive({
- ...diagnosticStatusContainer,
- iconSpacing: 4,
- iconWidth: 14,
- height: 18,
- message: text(layer, "sans"),
- iconColor: foreground(layer)
- },
- {
- hover: {
+ base: {
+ ...diagnosticStatusContainer,
+ iconSpacing: 4,
+ iconWidth: 14,
+ height: 18,
+ message: text(layer, "sans"),
+ iconColor: foreground(layer)
+ },
+ state: {
+ hovered: {
message: text(layer, "sans"),
iconColor: foreground(layer),
background: background(layer, "hovered"),
}
- }),
+ }
+ }),
diagnosticMessage: interactive({
- ...text(layer, "sans")
+ base: {
+ ...text(layer, "sans")
+ },
+ state: { hovered: text(layer, "sans", "hovered") }
},
- { hover: text(layer, "sans", "hovered") },
),
diagnosticSummary:
interactive({
- height: 20,
- iconWidth: 16,
- iconSpacing: 2,
- summarySpacing: 6,
- text: text(layer, "sans", { size: "sm" }),
- iconColorOk: foreground(layer, "variant"),
- iconColorWarning: foreground(layer, "warning"),
- iconColorError: foreground(layer, "negative"),
- containerOk: {
- cornerRadius: 6,
- padding: { top: 3, bottom: 3, left: 7, right: 7 },
- },
- containerWarning: {
- ...diagnosticStatusContainer,
- background: background(layer, "warning"),
- border: border(layer, "warning"),
- },
- containerError: {
- ...diagnosticStatusContainer,
- background: background(layer, "negative"),
- border: border(layer, "negative"),
- }
- }, {
- hover: {
- iconColorOk: foreground(layer, "on"),
+ base: {
+ height: 20,
+ iconWidth: 16,
+ iconSpacing: 2,
+ summarySpacing: 6,
+ text: text(layer, "sans", { size: "sm" }),
+ iconColorOk: foreground(layer, "variant"),
+ iconColorWarning: foreground(layer, "warning"),
+ iconColorError: foreground(layer, "negative"),
containerOk: {
- background: background(layer, "on", "hovered"),
+ cornerRadius: 6,
+ padding: { top: 3, bottom: 3, left: 7, right: 7 },
},
containerWarning: {
- background: background(layer, "warning", "hovered"),
- border: border(layer, "warning", "hovered"),
+ ...diagnosticStatusContainer,
+ background: background(layer, "warning"),
+ border: border(layer, "warning"),
},
containerError: {
- background: background(layer, "negative", "hovered"),
- border: border(layer, "negative", "hovered"),
+ ...diagnosticStatusContainer,
+ background: background(layer, "negative"),
+ border: border(layer, "negative"),
+ }
+ }, state: {
+ hovered: {
+ iconColorOk: foreground(layer, "on"),
+ containerOk: {
+ background: background(layer, "on", "hovered"),
+ },
+ containerWarning: {
+ background: background(layer, "warning", "hovered"),
+ border: border(layer, "warning", "hovered"),
+ },
+ containerError: {
+ background: background(layer, "negative", "hovered"),
+ border: border(layer, "negative", "hovered"),
+ }
}
}
}
@@ -104,17 +112,19 @@ export default function statusBar(colorScheme: ColorScheme) {
groupBottom: {},
groupRight: {},
button: toggleable(interactive({
- ...statusContainer,
- iconSize: 16,
- iconColor: foreground(layer, "variant"),
- label: {
- margin: { left: 6 },
- ...text(layer, "sans", { size: "sm" }),
- },
- }, {
- hover: {
- iconColor: foreground(layer, "hovered"),
- background: background(layer, "variant"),
+ base: {
+ ...statusContainer,
+ iconSize: 16,
+ iconColor: foreground(layer, "variant"),
+ label: {
+ margin: { left: 6 },
+ ...text(layer, "sans", { size: "sm" }),
+ },
+ }, state: {
+ hovered: {
+ iconColor: foreground(layer, "hovered"),
+ background: background(layer, "variant"),
+ }
}
}),
{
@@ -90,15 +90,17 @@ export default function tabBar(colorScheme: ColorScheme) {
},
draggedTab,
paneButton: toggleable(interactive({
- color: foreground(layer, "variant"),
- iconWidth: 12,
- buttonWidth: activePaneActiveTab.height,
- },
- {
- hover: {
+ base: {
+ color: foreground(layer, "variant"),
+ iconWidth: 12,
+ buttonWidth: activePaneActiveTab.height,
+ },
+ state: {
+ hovered: {
color: foreground(layer, "hovered"),
}
- }),
+ }
+ }),
{
default: {
color: foreground(layer, "accent"),
@@ -65,24 +65,26 @@ export default function welcome(colorScheme: ColorScheme) {
},
},
button: interactive({
- background: background(layer),
- border: border(layer, "active"),
- cornerRadius: 4,
- margin: {
- top: 4,
- bottom: 4,
- },
- padding: {
- top: 3,
- bottom: 3,
- left: 7,
- right: 7,
- },
- ...text(layer, "sans", "default", interactive_text_size)
- }, {
- hover: {
- ...text(layer, "sans", "default", interactive_text_size),
- background: background(layer, "hovered"),
+ base: {
+ background: background(layer),
+ border: border(layer, "active"),
+ cornerRadius: 4,
+ margin: {
+ top: 4,
+ bottom: 4,
+ },
+ padding: {
+ top: 3,
+ bottom: 3,
+ left: 7,
+ right: 7,
+ },
+ ...text(layer, "sans", "default", interactive_text_size)
+ }, state: {
+ hovered: {
+ ...text(layer, "sans", "default", interactive_text_size),
+ background: background(layer, "hovered"),
+ }
}
}),
@@ -18,26 +18,28 @@ export default function workspace(colorScheme: ColorScheme) {
const isLight = colorScheme.isLight
const itemSpacing = 8
const titlebarButton = toggleable(interactive({
- cornerRadius: 6,
- padding: {
- top: 1,
- bottom: 1,
- left: 8,
- right: 8,
- },
- ...text(layer, "sans", "variant", { size: "xs" }),
- background: background(layer, "variant"),
- border: border(layer),
- }, {
- hover: {
- ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
- background: background(layer, "variant", "hovered"),
- border: border(layer, "variant", "hovered"),
- },
- clicked: {
- ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
- background: background(layer, "variant", "pressed"),
- border: border(layer, "variant", "pressed"),
+ base: {
+ cornerRadius: 6,
+ padding: {
+ top: 1,
+ bottom: 1,
+ left: 8,
+ right: 8,
+ },
+ ...text(layer, "sans", "variant", { size: "xs" }),
+ background: background(layer, "variant"),
+ border: border(layer),
+ }, state: {
+ hovered: {
+ ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
+ background: background(layer, "variant", "hovered"),
+ border: border(layer, "variant", "hovered"),
+ },
+ clicked: {
+ ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
+ background: background(layer, "variant", "pressed"),
+ border: border(layer, "variant", "pressed"),
+ }
}
}),
{
@@ -86,17 +88,19 @@ export default function workspace(colorScheme: ColorScheme) {
},
keyboardHint:
interactive({
- ...text(layer, "sans", "variant", { size: "sm" }),
- padding: {
- top: 3,
- left: 8,
- right: 8,
- bottom: 3,
- },
- cornerRadius: 8
- }, {
- hover: {
- ...text(layer, "sans", "active", { size: "sm" }),
+ base: {
+ ...text(layer, "sans", "variant", { size: "sm" }),
+ padding: {
+ top: 3,
+ left: 8,
+ right: 8,
+ bottom: 3,
+ },
+ cornerRadius: 8
+ }, state: {
+ hovered: {
+ ...text(layer, "sans", "active", { size: "sm" }),
+ }
}
}),
@@ -250,33 +254,37 @@ export default function workspace(colorScheme: ColorScheme) {
cornerRadius: 6,
},
callControl: interactive({
- cornerRadius: 6,
- color: foreground(layer, "variant"),
- iconWidth: 12,
- buttonWidth: 20,
- }, {
- hover: {
- background: background(layer, "variant", "hovered"),
- color: foreground(layer, "variant", "hovered"),
- },
+ base: {
+ cornerRadius: 6,
+ color: foreground(layer, "variant"),
+ iconWidth: 12,
+ buttonWidth: 20,
+ }, state: {
+ hovered: {
+ background: background(layer, "variant", "hovered"),
+ color: foreground(layer, "variant", "hovered"),
+ },
+ }
}),
toggleContactsButton: toggleable(interactive({
- margin: { left: itemSpacing },
- cornerRadius: 6,
- color: foreground(layer, "variant"),
- iconWidth: 14,
- buttonWidth: 20,
- },
- {
+ base: {
+ margin: { left: itemSpacing },
+ cornerRadius: 6,
+ color: foreground(layer, "variant"),
+ iconWidth: 14,
+ buttonWidth: 20,
+ },
+ state: {
clicked: {
background: background(layer, "variant", "pressed"),
color: foreground(layer, "variant", "pressed"),
},
- hover: {
+ hovered: {
background: background(layer, "variant", "hovered"),
color: foreground(layer, "variant", "hovered"),
}
- }),
+ }
+ }),
{
default: {
background: background(layer, "variant", "active"),
@@ -318,38 +326,42 @@ export default function workspace(colorScheme: ColorScheme) {
itemSpacing: 8,
navButton: interactive(
{
- color: foreground(colorScheme.highest, "on"),
- iconWidth: 12,
- buttonWidth: 24,
- cornerRadius: 6,
- }, {
- hover: {
- color: foreground(colorScheme.highest, "on", "hovered"),
- background: background(
- colorScheme.highest,
- "on",
- "hovered"
- ),
- },
- disabled: {
- color: foreground(colorScheme.highest, "on", "disabled"),
- },
- }),
+ base: {
+ color: foreground(colorScheme.highest, "on"),
+ iconWidth: 12,
+ buttonWidth: 24,
+ cornerRadius: 6,
+ }, state: {
+ hovered: {
+ color: foreground(colorScheme.highest, "on", "hovered"),
+ background: background(
+ colorScheme.highest,
+ "on",
+ "hovered"
+ ),
+ },
+ disabled: {
+ color: foreground(colorScheme.highest, "on", "disabled"),
+ },
+ }
+ }),
padding: { left: 8, right: 8, top: 4, bottom: 4 },
},
breadcrumbHeight: 24,
breadcrumbs: interactive({
- ...text(colorScheme.highest, "sans", "variant"),
- cornerRadius: 6,
- padding: {
- left: 6,
- right: 6,
+ base: {
+ ...text(colorScheme.highest, "sans", "variant"),
+ cornerRadius: 6,
+ padding: {
+ left: 6,
+ right: 6,
+ }
+ }, state: {
+ hovered: {
+ color: foreground(colorScheme.highest, "on", "hovered"),
+ background: background(colorScheme.highest, "on", "hovered"),
+ },
}
- }, {
- hover: {
- color: foreground(colorScheme.highest, "on", "hovered"),
- background: background(colorScheme.highest, "on", "hovered"),
- },
}),
disconnectedOverlay: {
...text(layer, "sans"),