Merge remote-tracking branch 'origin/main' into save-conversations
This commit is contained in:
Antonio Scandurra
@@ -1,4 +1,3 @@
|
||||
import { text } from "./components"
|
||||
import contactFinder from "./contactFinder"
|
||||
import contactsPopover from "./contactsPopover"
|
||||
import commandPalette from "./commandPalette"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { text, border, background, foreground } from "./components"
|
||||
import editor from "./editor"
|
||||
import { interactive } from "../element"
|
||||
|
||||
export default function assistant(colorScheme: ColorScheme) {
|
||||
const layer = colorScheme.highest
|
||||
@@ -15,83 +16,104 @@ export default function assistant(colorScheme: ColorScheme) {
|
||||
background: editor(colorScheme).background,
|
||||
},
|
||||
hamburgerButton: {
|
||||
icon: {
|
||||
color: text(layer, "sans", "default", { size: "sm" }).color,
|
||||
asset: "icons/hamburger_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
icon: {
|
||||
color: text(layer, "sans", "default", { size: "sm" }).color,
|
||||
asset: "icons/hamburger_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
},
|
||||
},
|
||||
},
|
||||
container: {
|
||||
margin: { left: 12 },
|
||||
}
|
||||
container: {
|
||||
margin: { left: 12 },
|
||||
}
|
||||
},
|
||||
zoomInButton: {
|
||||
icon: {
|
||||
color: text(layer, "sans", "default", { size: "sm" }).color,
|
||||
asset: "icons/maximize_8.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
icon: {
|
||||
color: text(layer, "sans", "default", { size: "sm" }).color,
|
||||
asset: "icons/maximize_8.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
container: {
|
||||
margin: { right: 12 },
|
||||
}
|
||||
container: {
|
||||
margin: { right: 12 },
|
||||
}
|
||||
},
|
||||
zoomOutButton: {
|
||||
icon: {
|
||||
color: text(layer, "sans", "default", { size: "sm" }).color,
|
||||
asset: "icons/minimize_8.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
icon: {
|
||||
color: text(layer, "sans", "default", { size: "sm" }).color,
|
||||
asset: "icons/minimize_8.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
container: {
|
||||
margin: { right: 12 },
|
||||
}
|
||||
container: {
|
||||
margin: { right: 12 },
|
||||
}
|
||||
},
|
||||
plusButton: {
|
||||
icon: {
|
||||
color: text(layer, "sans", "default", { size: "sm" }).color,
|
||||
asset: "icons/plus_12.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
icon: {
|
||||
color: text(layer, "sans", "default", { size: "sm" }).color,
|
||||
asset: "icons/plus_12.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
container: {
|
||||
margin: { right: 12 },
|
||||
}
|
||||
container: {
|
||||
margin: { right: 12 },
|
||||
}
|
||||
},
|
||||
title: {
|
||||
margin: { left: 12 },
|
||||
...text(layer, "sans", "default", { size: "sm" })
|
||||
margin: { left: 12 },
|
||||
...text(layer, "sans", "default", { size: "sm" })
|
||||
},
|
||||
savedConversation: {
|
||||
background: background(layer, "on"),
|
||||
hover: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
savedAt: {
|
||||
margin: { left: 8 },
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
title: {
|
||||
margin: { left: 8 },
|
||||
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
|
||||
}
|
||||
container: interactive({
|
||||
base: {
|
||||
background: background(layer, "on"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
}
|
||||
},
|
||||
}),
|
||||
savedAt: {
|
||||
margin: { left: 8 },
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
title: {
|
||||
margin: { left: 8 },
|
||||
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
|
||||
}
|
||||
},
|
||||
userSender: {
|
||||
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
|
||||
default: {
|
||||
...text(layer, "sans", "default", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
assistantSender: {
|
||||
...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
|
||||
default: {
|
||||
...text(layer, "sans", "accent", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
systemSender: {
|
||||
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
|
||||
default: {
|
||||
...text(layer, "sans", "variant", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
sentAt: {
|
||||
margin: { top: 2, left: 8 },
|
||||
@@ -100,17 +122,21 @@ export default function assistant(colorScheme: ColorScheme) {
|
||||
modelInfoContainer: {
|
||||
margin: { right: 16, top: 4 },
|
||||
},
|
||||
model: {
|
||||
background: background(layer, "on"),
|
||||
margin: { right: 8 },
|
||||
padding: 4,
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
hover: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
model: interactive({
|
||||
base: {
|
||||
background: background(layer, "on"),
|
||||
margin: { right: 8 },
|
||||
padding: 4,
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
remainingTokens: {
|
||||
margin: { right: 12 },
|
||||
...text(layer, "sans", "positive", { size: "xs" }),
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { text, background } from "./components"
|
||||
import { toggleable } from "../element"
|
||||
|
||||
export default function commandPalette(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest
|
||||
return {
|
||||
keystrokeSpacing: 8,
|
||||
key: {
|
||||
|
||||
const key = toggleable({
|
||||
base: {
|
||||
text: text(layer, "mono", "variant", "default", { size: "xs" }),
|
||||
cornerRadius: 2,
|
||||
background: background(layer, "on"),
|
||||
@@ -21,10 +22,21 @@ export default function commandPalette(colorScheme: ColorScheme) {
|
||||
bottom: 1,
|
||||
left: 2,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
active: {
|
||||
text: text(layer, "mono", "on", "default", { size: "xs" }),
|
||||
background: withOpacity(background(layer, "on"), 0.2),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
keystrokeSpacing: 8,
|
||||
// TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
|
||||
key: {
|
||||
inactive: { ...key.inactive },
|
||||
active: key.active,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@ export function foreground(
|
||||
return getStyle(layer, styleSetOrStyles, style).foreground
|
||||
}
|
||||
|
||||
interface Text {
|
||||
interface Text extends Object {
|
||||
family: keyof typeof fontFamilies
|
||||
color: string
|
||||
size: number
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, borderColor, foreground, text } from "./components"
|
||||
|
||||
import { interactive, toggleable } from "../element"
|
||||
export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
const nameMargin = 8
|
||||
const sidePadding = 12
|
||||
@@ -71,47 +71,85 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
rowHeight: 28,
|
||||
sectionIconSize: 8,
|
||||
headerRow: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: { top: 14 },
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
headerRow: toggleable({
|
||||
base: interactive({
|
||||
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, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
}, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(layer, "mono", "active", { size: "sm" }),
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
...text(layer, "mono", "active", { size: "sm" }),
|
||||
background: background(layer, "active"),
|
||||
}),
|
||||
leaveCall: interactive({
|
||||
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" }),
|
||||
},
|
||||
},
|
||||
leaveCall: {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
cornerRadius: 6,
|
||||
margin: {
|
||||
top: 1,
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "hovered", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
hover: {
|
||||
...text(layer, "sans", "hovered", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
contactRow: {
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
inactive: {
|
||||
default: {
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
contactAvatar: {
|
||||
cornerRadius: 10,
|
||||
width: 18,
|
||||
@@ -135,12 +173,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
},
|
||||
contactButtonSpacing: nameMargin,
|
||||
contactButton: {
|
||||
...contactButton,
|
||||
hover: {
|
||||
background: background(layer, "hovered"),
|
||||
contactButton: interactive({
|
||||
base: { ...contactButton },
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
disabledButton: {
|
||||
...contactButton,
|
||||
background: background(layer, "on"),
|
||||
@@ -149,34 +189,52 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
callingIndicator: {
|
||||
...text(layer, "mono", "variant", { size: "xs" }),
|
||||
},
|
||||
treeBranch: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
hover: {
|
||||
color: borderColor(layer),
|
||||
treeBranch: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: borderColor(layer),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: borderColor(layer),
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
color: borderColor(layer),
|
||||
}),
|
||||
projectRow: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...projectRow,
|
||||
background: background(layer),
|
||||
icon: {
|
||||
margin: { left: nameMargin },
|
||||
color: foreground(layer, "variant"),
|
||||
width: 12,
|
||||
},
|
||||
name: {
|
||||
...projectRow.name,
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: { background: background(layer, "active") },
|
||||
},
|
||||
},
|
||||
},
|
||||
projectRow: {
|
||||
...projectRow,
|
||||
background: background(layer),
|
||||
icon: {
|
||||
margin: { left: nameMargin },
|
||||
color: foreground(layer, "variant"),
|
||||
width: 12,
|
||||
},
|
||||
name: {
|
||||
...projectRow.name,
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
},
|
||||
hover: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, foreground, text } from "./components"
|
||||
|
||||
import { interactive } from "../element"
|
||||
const avatarSize = 12
|
||||
const headerPadding = 8
|
||||
|
||||
@@ -21,24 +21,32 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
|
||||
},
|
||||
button: {
|
||||
...text(layer, "sans", "on", { size: "xs" }),
|
||||
background: background(layer, "on"),
|
||||
padding: 4,
|
||||
cornerRadius: 6,
|
||||
margin: { left: 6 },
|
||||
hover: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
button: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", "on", { size: "xs" }),
|
||||
background: background(layer, "on"),
|
||||
padding: 4,
|
||||
cornerRadius: 6,
|
||||
margin: { left: 6 },
|
||||
},
|
||||
},
|
||||
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
dismissButton: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
default: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, borderColor, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function contextMenu(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.middle
|
||||
@@ -10,37 +11,54 @@ export default function contextMenu(colorScheme: ColorScheme) {
|
||||
shadow: colorScheme.popoverShadow,
|
||||
border: border(layer),
|
||||
keystrokeMargin: 30,
|
||||
item: {
|
||||
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" }),
|
||||
keystroke: {
|
||||
...text(layer, "sans", "hovered", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
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", "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 },
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
activeHover: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
separator: {
|
||||
background: borderColor(layer),
|
||||
margin: { top: 2, bottom: 2 },
|
||||
|
||||
+101
-84
@@ -1,60 +1,69 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, svg, text } from "./components"
|
||||
|
||||
import { interactive } from "../element"
|
||||
export default function copilot(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.middle
|
||||
|
||||
let content_width = 264
|
||||
|
||||
let ctaButton = {
|
||||
let ctaButton =
|
||||
// Copied from welcome screen. FIXME: Move this into a ZDS component
|
||||
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" }),
|
||||
hover: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
}
|
||||
interactive({
|
||||
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" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
outLinkIcon: {
|
||||
icon: svg(
|
||||
foreground(layer, "variant"),
|
||||
"icons/link_out_12.svg",
|
||||
12,
|
||||
12
|
||||
),
|
||||
container: {
|
||||
cornerRadius: 6,
|
||||
padding: { left: 6 },
|
||||
},
|
||||
hover: {
|
||||
outLinkIcon: interactive({
|
||||
base: {
|
||||
icon: svg(
|
||||
foreground(layer, "hovered"),
|
||||
foreground(layer, "variant"),
|
||||
"icons/link_out_12.svg",
|
||||
12,
|
||||
12
|
||||
),
|
||||
container: {
|
||||
cornerRadius: 6,
|
||||
padding: { left: 6 },
|
||||
},
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
modal: {
|
||||
titleText: {
|
||||
...text(layer, "sans", { size: "xs", weight: "bold" }),
|
||||
default: {
|
||||
...text(layer, "sans", { size: "xs", weight: "bold" }),
|
||||
},
|
||||
},
|
||||
titlebar: {
|
||||
background: background(colorScheme.lowest),
|
||||
@@ -75,42 +84,46 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
bottom: 8,
|
||||
},
|
||||
},
|
||||
closeIcon: {
|
||||
icon: svg(
|
||||
foreground(layer, "variant"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
container: {
|
||||
cornerRadius: 2,
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
closeIcon: interactive({
|
||||
base: {
|
||||
icon: svg(
|
||||
foreground(layer, "on"),
|
||||
foreground(layer, "variant"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
container: {
|
||||
cornerRadius: 2,
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
icon: svg(
|
||||
foreground(layer, "base"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
state: {
|
||||
hovered: {
|
||||
icon: svg(
|
||||
foreground(layer, "on"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
icon: svg(
|
||||
foreground(layer, "base"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
dimensions: {
|
||||
width: 280,
|
||||
height: 280,
|
||||
@@ -185,28 +198,32 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
},
|
||||
},
|
||||
right: (content_width * 1) / 3,
|
||||
rightContainer: {
|
||||
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", {
|
||||
rightContainer: interactive({
|
||||
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,
|
||||
}),
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { background, border, borderColor, foreground, text } from "./components"
|
||||
import hoverPopover from "./hoverPopover"
|
||||
|
||||
import { buildSyntax } from "../theme/syntax"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function editor(colorScheme: ColorScheme) {
|
||||
const { isLight } = colorScheme
|
||||
@@ -48,46 +49,76 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
// Inline autocomplete suggestions, Co-pilot suggestions, etc.
|
||||
suggestion: syntax.predictive,
|
||||
codeActions: {
|
||||
indicator: {
|
||||
color: foreground(layer, "variant"),
|
||||
indicator: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "variant", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: foreground(layer, "accent"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "accent", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "accent", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
clicked: {
|
||||
color: foreground(layer, "base"),
|
||||
},
|
||||
hover: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
active: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
},
|
||||
verticalScale: 0.55,
|
||||
},
|
||||
folds: {
|
||||
iconMarginScale: 2.5,
|
||||
foldedIcon: "icons/chevron_right_8.svg",
|
||||
foldableIcon: "icons/chevron_down_8.svg",
|
||||
indicator: {
|
||||
color: foreground(layer, "variant"),
|
||||
|
||||
clicked: {
|
||||
color: foreground(layer, "base"),
|
||||
indicator: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "base"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: foreground(layer, "default"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
active: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
ellipses: {
|
||||
textColor: colorScheme.ramps.neutral(0.71).hex(),
|
||||
cornerRadiusFactor: 0.15,
|
||||
background: {
|
||||
// Copied from hover_popover highlight
|
||||
color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
|
||||
default: {
|
||||
color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
|
||||
},
|
||||
|
||||
hover: {
|
||||
hovered: {
|
||||
color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
|
||||
},
|
||||
|
||||
@@ -223,21 +254,26 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
color: syntax.linkUri.color,
|
||||
underline: syntax.linkUri.underline,
|
||||
},
|
||||
jumpIcon: {
|
||||
color: foreground(layer, "on"),
|
||||
iconWidth: 20,
|
||||
buttonWidth: 20,
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
top: 6,
|
||||
bottom: 6,
|
||||
left: 6,
|
||||
right: 6,
|
||||
jumpIcon: interactive({
|
||||
base: {
|
||||
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"),
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
scrollbar: {
|
||||
width: 12,
|
||||
minHeightFactor: 1.0,
|
||||
|
||||
@@ -1,35 +1,40 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
export default function feedback(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest
|
||||
|
||||
return {
|
||||
submit_button: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
submit_button: interactive({
|
||||
base: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
state: {
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
hover: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
button_margin: 8,
|
||||
info_text_default: text(layer, "sans", "default", { size: "xs" }),
|
||||
link_text_default: text(layer, "sans", "default", {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function picker(colorScheme: ColorScheme): any {
|
||||
let layer = colorScheme.lowest
|
||||
@@ -38,35 +39,65 @@ export default function picker(colorScheme: ColorScheme): any {
|
||||
...container,
|
||||
padding: {},
|
||||
},
|
||||
item: {
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
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
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
background: withOpacity(
|
||||
background(layer, "pressed"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: withOpacity(
|
||||
background(layer, "base", "active"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
hovered: {
|
||||
background: withOpacity(
|
||||
background(layer, "hovered"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
background: withOpacity(
|
||||
background(layer, "pressed"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
text: text(layer, "sans", "variant"),
|
||||
highlightText: text(layer, "sans", "accent", { weight: "bold" }),
|
||||
active: {
|
||||
background: withOpacity(
|
||||
background(layer, "base", "active"),
|
||||
0.5
|
||||
),
|
||||
text: text(layer, "sans", "base", "active"),
|
||||
highlightText: text(layer, "sans", "accent", {
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
hover: {
|
||||
background: withOpacity(background(layer, "hovered"), 0.5),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
inputEditor,
|
||||
emptyInputEditor,
|
||||
noMatches: {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
import { interactive, toggleable } from "../element"
|
||||
export default function projectPanel(colorScheme: ColorScheme) {
|
||||
const { isLight } = colorScheme
|
||||
|
||||
@@ -28,48 +28,79 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
}
|
||||
|
||||
let entry = {
|
||||
...baseEntry,
|
||||
text: text(layer, "mono", "variant", { size: "sm" }),
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
const default_entry = interactive({
|
||||
base: {
|
||||
...baseEntry,
|
||||
text: text(layer, "mono", "variant", { size: "sm" }),
|
||||
status,
|
||||
},
|
||||
active: {
|
||||
background: colorScheme.isLight
|
||||
? withOpacity(background(layer, "active"), 0.5)
|
||||
: background(layer, "active"),
|
||||
text: text(layer, "mono", "active", { size: "sm" }),
|
||||
state: {
|
||||
default: {
|
||||
background: background(layer),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
},
|
||||
},
|
||||
activeHover: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "active", { size: "sm" }),
|
||||
})
|
||||
|
||||
let entry = toggleable({
|
||||
base: default_entry,
|
||||
state: {
|
||||
active: interactive({
|
||||
base: {
|
||||
...default_entry,
|
||||
},
|
||||
state: {
|
||||
default: {
|
||||
background: background(colorScheme.lowest),
|
||||
},
|
||||
hovered: {
|
||||
background: background(colorScheme.lowest, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(colorScheme.lowest, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
status,
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
openProjectButton: {
|
||||
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"),
|
||||
openProjectButton: interactive({
|
||||
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"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "pressed"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
background: background(layer),
|
||||
padding: { left: 6, right: 6, top: 0, bottom: 6 },
|
||||
indentWidth: 12,
|
||||
@@ -94,8 +125,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
...entry,
|
||||
text: text(layer, "mono", "disabled"),
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "disabled", { size: "sm" }),
|
||||
...entry.active,
|
||||
default: {
|
||||
...entry.active.default,
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "disabled", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
},
|
||||
filenameEditor: {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function search(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest
|
||||
@@ -35,36 +36,50 @@ export default function search(colorScheme: ColorScheme) {
|
||||
return {
|
||||
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
||||
matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
|
||||
optionButton: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
optionButton: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(layer, "mono", "accent"),
|
||||
},
|
||||
hovered: {
|
||||
...text(layer, "mono", "accent", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "mono", "accent", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
active: {
|
||||
...text(layer, "mono", "on", "inverted"),
|
||||
background: background(layer, "on", "inverted"),
|
||||
border: border(layer, "on", "inverted"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
hover: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
editor,
|
||||
invalidEditor: {
|
||||
...editor,
|
||||
@@ -97,17 +112,24 @@ export default function search(colorScheme: ColorScheme) {
|
||||
...text(layer, "mono", "on"),
|
||||
size: 18,
|
||||
},
|
||||
dismissButton: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 14,
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
dismissButton: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 14,
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
const headerPadding = 8
|
||||
|
||||
@@ -12,33 +13,41 @@ export default function simpleMessageNotification(
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, right: headerPadding },
|
||||
},
|
||||
actionMessage: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
hover: {
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
actionMessage: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
},
|
||||
},
|
||||
dismissButton: {
|
||||
color: foreground(layer),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
dismissButton: interactive({
|
||||
base: {
|
||||
color: foreground(layer),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
import { interactive, toggleable } from "../element"
|
||||
export default function statusBar(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.lowest
|
||||
|
||||
@@ -25,95 +25,123 @@ export default function statusBar(colorScheme: ColorScheme) {
|
||||
},
|
||||
border: border(layer, { top: true, overlay: true }),
|
||||
cursorPosition: text(layer, "sans", "variant"),
|
||||
activeLanguage: {
|
||||
padding: { left: 6, right: 6 },
|
||||
...text(layer, "sans", "variant"),
|
||||
hover: {
|
||||
...text(layer, "sans", "on"),
|
||||
activeLanguage: interactive({
|
||||
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: {
|
||||
...diagnosticStatusContainer,
|
||||
iconSpacing: 4,
|
||||
iconWidth: 14,
|
||||
height: 18,
|
||||
message: text(layer, "sans"),
|
||||
iconColor: foreground(layer),
|
||||
hover: {
|
||||
lspStatus: interactive({
|
||||
base: {
|
||||
...diagnosticStatusContainer,
|
||||
iconSpacing: 4,
|
||||
iconWidth: 14,
|
||||
height: 18,
|
||||
message: text(layer, "sans"),
|
||||
iconColor: foreground(layer),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
diagnosticMessage: {
|
||||
...text(layer, "sans"),
|
||||
hover: text(layer, "sans", "hovered"),
|
||||
},
|
||||
diagnosticSummary: {
|
||||
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 },
|
||||
state: {
|
||||
hovered: {
|
||||
message: text(layer, "sans"),
|
||||
iconColor: foreground(layer),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
containerWarning: {
|
||||
...diagnosticStatusContainer,
|
||||
background: background(layer, "warning"),
|
||||
border: border(layer, "warning"),
|
||||
}),
|
||||
diagnosticMessage: interactive({
|
||||
base: {
|
||||
...text(layer, "sans"),
|
||||
},
|
||||
containerError: {
|
||||
...diagnosticStatusContainer,
|
||||
background: background(layer, "negative"),
|
||||
border: border(layer, "negative"),
|
||||
},
|
||||
hover: {
|
||||
iconColorOk: foreground(layer, "on"),
|
||||
state: { hovered: text(layer, "sans", "hovered") },
|
||||
}),
|
||||
diagnosticSummary: interactive({
|
||||
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: {
|
||||
cornerRadius: 6,
|
||||
padding: { top: 3, bottom: 3, left: 7, right: 7 },
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
containerWarning: {
|
||||
...diagnosticStatusContainer,
|
||||
background: background(layer, "warning", "hovered"),
|
||||
border: border(layer, "warning", "hovered"),
|
||||
background: background(layer, "warning"),
|
||||
border: border(layer, "warning"),
|
||||
},
|
||||
containerError: {
|
||||
...diagnosticStatusContainer,
|
||||
background: background(layer, "negative", "hovered"),
|
||||
border: border(layer, "negative", "hovered"),
|
||||
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"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
panelButtons: {
|
||||
groupLeft: {},
|
||||
groupBottom: {},
|
||||
groupRight: {},
|
||||
button: {
|
||||
...statusContainer,
|
||||
iconSize: 16,
|
||||
iconColor: foreground(layer, "variant"),
|
||||
label: {
|
||||
margin: { left: 6 },
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
button: toggleable({
|
||||
base: interactive({
|
||||
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"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
iconColor: foreground(layer, "active"),
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
iconColor: foreground(layer, "hovered"),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
iconColor: foreground(layer, "pressed"),
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
iconColor: foreground(layer, "hovered"),
|
||||
background: background(layer, "variant"),
|
||||
},
|
||||
active: {
|
||||
iconColor: foreground(layer, "active"),
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
badge: {
|
||||
cornerRadius: 3,
|
||||
padding: 2,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { text, border, background, foreground } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function tabBar(colorScheme: ColorScheme) {
|
||||
const height = 32
|
||||
@@ -87,17 +88,36 @@ export default function tabBar(colorScheme: ColorScheme) {
|
||||
inactiveTab: inactivePaneInactiveTab,
|
||||
},
|
||||
draggedTab,
|
||||
paneButton: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: activePaneActiveTab.height,
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
paneButton: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: activePaneActiveTab.height,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: foreground(layer, "accent"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
color: foreground(layer, "accent"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
paneButtonContainer: {
|
||||
background: tab.background,
|
||||
border: {
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import merge from "ts-deepmerge"
|
||||
|
||||
type ToggleState = "inactive" | "active"
|
||||
|
||||
type Toggleable<T> = Record<ToggleState, T>
|
||||
|
||||
const NO_INACTIVE_OR_BASE_ERROR =
|
||||
"A toggleable object must have an inactive state, or a base property."
|
||||
const NO_ACTIVE_ERROR = "A toggleable object must have an active state."
|
||||
|
||||
interface ToggleableProps<T> {
|
||||
base?: T
|
||||
state: Partial<Record<ToggleState, T>>
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function for creating Toggleable objects.
|
||||
* @template T The type of the object being toggled.
|
||||
* @param props Object containing the base (inactive) state and state modifications to create the active state.
|
||||
* @returns A Toggleable object containing both the inactive and active states.
|
||||
* @example
|
||||
* ```
|
||||
* toggleable({
|
||||
* base: { background: "#000000", text: "#CCCCCC" },
|
||||
* state: { active: { text: "#CCCCCC" } },
|
||||
* })
|
||||
* ```
|
||||
*/
|
||||
export function toggleable<T extends object>(
|
||||
props: ToggleableProps<T>
|
||||
): Toggleable<T> {
|
||||
const { base, state } = props
|
||||
|
||||
if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
|
||||
if (!state.active) throw new Error(NO_ACTIVE_ERROR)
|
||||
|
||||
const inactiveState = base
|
||||
? ((state.inactive ? merge(base, state.inactive) : base) as T)
|
||||
: (state.inactive as T)
|
||||
|
||||
const toggleObj: Toggleable<T> = {
|
||||
inactive: inactiveState,
|
||||
active: merge(base ?? {}, state.active) as T,
|
||||
}
|
||||
|
||||
return toggleObj
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
import { interactive, toggleable } from "../element"
|
||||
export default function dropdownMenu(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.middle
|
||||
|
||||
@@ -9,38 +9,56 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
shadow: colorScheme.popoverShadow,
|
||||
header: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
|
||||
secondaryTextSpacing: 10,
|
||||
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
background: background(layer, "on"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
hover: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
}
|
||||
},
|
||||
header: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryText: text(layer, "sans", {
|
||||
size: "sm",
|
||||
color: "#aaaaaa",
|
||||
}),
|
||||
secondaryTextSpacing: 10,
|
||||
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
background: background(layer, "on"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
sectionHeader: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 8, right: 8, top: 8, bottom: 8 },
|
||||
},
|
||||
item: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryTextSpacing: 10,
|
||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 },
|
||||
hover: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryTextSpacing: 10,
|
||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
activeHover: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
const headerPadding = 8
|
||||
|
||||
@@ -10,22 +11,30 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, right: headerPadding },
|
||||
},
|
||||
actionMessage: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
actionMessage: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
},
|
||||
},
|
||||
dismissButton: {
|
||||
color: foreground(layer),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
dismissButton: interactive({
|
||||
base: {
|
||||
color: foreground(layer),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
TextProperties,
|
||||
svg,
|
||||
} from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
export default function welcome(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest
|
||||
@@ -63,27 +64,31 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
bottom: 2,
|
||||
},
|
||||
},
|
||||
button: {
|
||||
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"),
|
||||
button: interactive({
|
||||
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"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
usageNote: {
|
||||
...text(layer, "sans", "variant", { size: "2xs" }),
|
||||
padding: {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { toggleable } from "../element"
|
||||
import {
|
||||
background,
|
||||
border,
|
||||
@@ -10,38 +11,53 @@ import {
|
||||
} from "./components"
|
||||
import statusBar from "./statusBar"
|
||||
import tabBar from "./tabBar"
|
||||
|
||||
import { interactive } from "../element"
|
||||
import merge from "ts-deepmerge"
|
||||
export default function workspace(colorScheme: ColorScheme) {
|
||||
const layer = colorScheme.lowest
|
||||
const isLight = colorScheme.isLight
|
||||
const itemSpacing = 8
|
||||
const titlebarButton = {
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 8,
|
||||
right: 8,
|
||||
const titlebarButton = toggleable({
|
||||
base: interactive({
|
||||
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"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(layer, "sans", "variant", "active", { size: "xs" }),
|
||||
background: background(layer, "variant", "active"),
|
||||
border: border(layer, "variant", "active"),
|
||||
},
|
||||
},
|
||||
},
|
||||
...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"),
|
||||
},
|
||||
active: {
|
||||
...text(layer, "sans", "variant", "active", { size: "xs" }),
|
||||
background: background(layer, "variant", "active"),
|
||||
border: border(layer, "variant", "active"),
|
||||
},
|
||||
}
|
||||
})
|
||||
const avatarWidth = 18
|
||||
const avatarOuterWidth = avatarWidth + 4
|
||||
const followerAvatarWidth = 14
|
||||
@@ -78,19 +94,24 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
},
|
||||
cornerRadius: 4,
|
||||
},
|
||||
keyboardHint: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3,
|
||||
keyboardHint: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
hover: {
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
keyboardHintWidth: 320,
|
||||
},
|
||||
joiningProjectAvatar: {
|
||||
@@ -201,12 +222,15 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
|
||||
// Sign in buttom
|
||||
// FlatButton, Variant
|
||||
signInPrompt: {
|
||||
margin: {
|
||||
left: itemSpacing,
|
||||
signInPrompt: merge(titlebarButton, {
|
||||
inactive: {
|
||||
default: {
|
||||
margin: {
|
||||
left: itemSpacing,
|
||||
},
|
||||
},
|
||||
},
|
||||
...titlebarButton,
|
||||
},
|
||||
}),
|
||||
|
||||
// Offline Indicator
|
||||
offlineIcon: {
|
||||
@@ -234,40 +258,68 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
},
|
||||
cornerRadius: 6,
|
||||
},
|
||||
callControl: {
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 20,
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
callControl: interactive({
|
||||
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({
|
||||
base: interactive({
|
||||
base: {
|
||||
margin: { left: itemSpacing },
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 14,
|
||||
buttonWidth: 20,
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "on", "default"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
userMenuButton: merge(titlebarButton, {
|
||||
inactive: {
|
||||
default: {
|
||||
buttonWidth: 20,
|
||||
iconWidth: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
toggleContactsButton: {
|
||||
margin: { left: itemSpacing },
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 14,
|
||||
buttonWidth: 20,
|
||||
active: {
|
||||
background: background(layer, "variant", "active"),
|
||||
color: foreground(layer, "variant", "active"),
|
||||
// posiewic: these properties are not currently set on main
|
||||
default: {
|
||||
iconWidth: 12,
|
||||
button_width: 20,
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
color: foreground(layer, "variant", "pressed"),
|
||||
},
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
userMenuButton: {
|
||||
buttonWidth: 20,
|
||||
iconWidth: 12,
|
||||
...titlebarButton,
|
||||
},
|
||||
}),
|
||||
|
||||
toggleContactsBadge: {
|
||||
cornerRadius: 3,
|
||||
padding: 2,
|
||||
@@ -285,12 +337,45 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
background: background(colorScheme.highest),
|
||||
border: border(colorScheme.highest, { bottom: true }),
|
||||
itemSpacing: 8,
|
||||
navButton: {
|
||||
color: foreground(colorScheme.highest, "on"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 24,
|
||||
navButton: interactive({
|
||||
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({
|
||||
base: {
|
||||
...text(colorScheme.highest, "sans", "variant"),
|
||||
cornerRadius: 6,
|
||||
hover: {
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||
background: background(
|
||||
colorScheme.highest,
|
||||
@@ -298,25 +383,8 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
"hovered"
|
||||
),
|
||||
},
|
||||
disabled: {
|
||||
color: foreground(colorScheme.highest, "on", "disabled"),
|
||||
},
|
||||
},
|
||||
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
||||
},
|
||||
breadcrumbHeight: 24,
|
||||
breadcrumbs: {
|
||||
...text(colorScheme.highest, "sans", "variant"),
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
hover: {
|
||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||
background: background(colorScheme.highest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
disconnectedOverlay: {
|
||||
...text(layer, "sans"),
|
||||
background: withOpacity(background(layer), 0.8),
|
||||
|
||||
Reference in New Issue
Block a user