Format
This commit is contained in:
Nate Butler
@@ -29,8 +29,8 @@ export default function statusBar(colorScheme: ColorScheme) {
|
||||
padding: { left: 6, right: 6 },
|
||||
...text(layer, "sans", "variant"),
|
||||
hover: {
|
||||
...text(layer, "sans", "on")
|
||||
}
|
||||
...text(layer, "sans", "on"),
|
||||
},
|
||||
},
|
||||
autoUpdateProgressMessage: text(layer, "sans", "variant"),
|
||||
autoUpdateDoneMessage: text(layer, "sans", "variant"),
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
|
||||
import { ColorScheme } from "../themes/common/colorScheme";
|
||||
import { withOpacity } from "../utils/color";
|
||||
import { border, background, foreground, text, TextProperties } from "./components";
|
||||
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import {
|
||||
border,
|
||||
background,
|
||||
foreground,
|
||||
text,
|
||||
TextProperties,
|
||||
} from "./components"
|
||||
|
||||
export default function welcome(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest;
|
||||
let layer = colorScheme.highest
|
||||
|
||||
let checkboxBase = {
|
||||
cornerRadius: 4,
|
||||
@@ -20,9 +24,9 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
margin: {
|
||||
right: 8,
|
||||
top: 5,
|
||||
bottom: 5
|
||||
bottom: 5,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
let interactive_text_size: TextProperties = { size: "sm" }
|
||||
|
||||
@@ -34,7 +38,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
dimensions: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
}
|
||||
},
|
||||
},
|
||||
logoSubheading: {
|
||||
...text(layer, "sans", "variant", { size: "md" }),
|
||||
@@ -46,13 +50,13 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
buttonGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 16
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
headingGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 12
|
||||
bottom: 12,
|
||||
},
|
||||
},
|
||||
checkboxGroup: {
|
||||
@@ -62,7 +66,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
padding: {
|
||||
left: 12,
|
||||
top: 2,
|
||||
bottom: 2
|
||||
bottom: 2,
|
||||
},
|
||||
},
|
||||
button: {
|
||||
@@ -71,7 +75,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4
|
||||
bottom: 4,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
@@ -90,8 +94,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
...text(layer, "sans", "variant", { size: "2xs" }),
|
||||
padding: {
|
||||
top: -4,
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
checkboxContainer: {
|
||||
margin: {
|
||||
@@ -99,7 +102,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
},
|
||||
padding: {
|
||||
bottom: 8,
|
||||
}
|
||||
},
|
||||
},
|
||||
checkbox: {
|
||||
label: {
|
||||
@@ -112,28 +115,28 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
}
|
||||
},
|
||||
},
|
||||
default: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "default"),
|
||||
border: border(layer, "active")
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
checked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
hoveredAndChecked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
}
|
||||
}
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
+293
-288
@@ -5,302 +5,307 @@ import statusBar from "./statusBar"
|
||||
import tabBar from "./tabBar"
|
||||
|
||||
export default function workspace(colorScheme: ColorScheme) {
|
||||
const layer = colorScheme.lowest
|
||||
const itemSpacing = 8
|
||||
const titlebarButton = {
|
||||
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"),
|
||||
},
|
||||
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
|
||||
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
||||
|
||||
return {
|
||||
background: background(colorScheme.lowest),
|
||||
blankPane: {
|
||||
logoContainer: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
logo: {
|
||||
color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
},
|
||||
logoShadow: {
|
||||
color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
},
|
||||
keyboardHints: {
|
||||
margin: {
|
||||
top: 96,
|
||||
},
|
||||
cornerRadius: 4,
|
||||
},
|
||||
keyboardHint: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
const layer = colorScheme.lowest
|
||||
const itemSpacing = 8
|
||||
const titlebarButton = {
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
background: background(layer, "variant"),
|
||||
border: border(layer),
|
||||
hover: {
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
}
|
||||
},
|
||||
keyboardHintWidth: 320,
|
||||
},
|
||||
joiningProjectAvatar: {
|
||||
cornerRadius: 40,
|
||||
width: 80,
|
||||
},
|
||||
joiningProjectMessage: {
|
||||
padding: 12,
|
||||
...text(layer, "sans", { size: "lg" }),
|
||||
},
|
||||
externalLocationMessage: {
|
||||
background: background(colorScheme.middle, "accent"),
|
||||
border: border(colorScheme.middle, "accent"),
|
||||
cornerRadius: 6,
|
||||
padding: 12,
|
||||
margin: { bottom: 8, right: 8 },
|
||||
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
|
||||
},
|
||||
leaderBorderOpacity: 0.7,
|
||||
leaderBorderWidth: 2.0,
|
||||
tabBar: tabBar(colorScheme),
|
||||
modal: {
|
||||
margin: {
|
||||
bottom: 52,
|
||||
top: 52,
|
||||
},
|
||||
cursor: "Arrow",
|
||||
},
|
||||
sidebar: {
|
||||
initialSize: 240,
|
||||
border: border(layer, { left: true, right: true }),
|
||||
},
|
||||
paneDivider: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
},
|
||||
statusBar: statusBar(colorScheme),
|
||||
titlebar: {
|
||||
itemSpacing,
|
||||
facePileSpacing: 2,
|
||||
height: 33, // 32px + 1px for overlaid border
|
||||
background: background(layer),
|
||||
border: border(layer, { bottom: true, overlay: true }),
|
||||
padding: {
|
||||
left: 80,
|
||||
right: itemSpacing,
|
||||
},
|
||||
|
||||
// Project
|
||||
title: text(layer, "sans", "variant"),
|
||||
|
||||
// Collaborators
|
||||
leaderAvatar: {
|
||||
width: avatarWidth,
|
||||
outerWidth: avatarOuterWidth,
|
||||
cornerRadius: avatarWidth / 2,
|
||||
outerCornerRadius: avatarOuterWidth / 2,
|
||||
},
|
||||
followerAvatar: {
|
||||
width: followerAvatarWidth,
|
||||
outerWidth: followerAvatarOuterWidth,
|
||||
cornerRadius: followerAvatarWidth / 2,
|
||||
outerCornerRadius: followerAvatarOuterWidth / 2,
|
||||
},
|
||||
inactiveAvatarGrayscale: true,
|
||||
followerAvatarOverlap: 8,
|
||||
leaderSelection: {
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
padding: {
|
||||
left: 2,
|
||||
right: 2,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
cornerRadius: 6,
|
||||
},
|
||||
avatarRibbon: {
|
||||
height: 3,
|
||||
width: 12,
|
||||
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
|
||||
},
|
||||
|
||||
// Sign in buttom
|
||||
// FlatButton, Variant
|
||||
signInPrompt: {
|
||||
...titlebarButton,
|
||||
},
|
||||
|
||||
// Offline Indicator
|
||||
offlineIcon: {
|
||||
color: foreground(layer, "variant"),
|
||||
width: 16,
|
||||
margin: {
|
||||
left: itemSpacing,
|
||||
},
|
||||
padding: {
|
||||
right: 4,
|
||||
},
|
||||
},
|
||||
|
||||
// Notice that the collaboration server is out of date
|
||||
outdatedWarning: {
|
||||
...text(layer, "sans", "warning", { size: "xs" }),
|
||||
background: withOpacity(background(layer, "warning"), 0.3),
|
||||
border: border(layer, "warning"),
|
||||
margin: {
|
||||
left: itemSpacing,
|
||||
},
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
cornerRadius: 6,
|
||||
},
|
||||
callControl: {
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 20,
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
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"),
|
||||
...text(layer, "sans", "variant", "hovered", { size: "xs" }),
|
||||
background: background(layer, "variant", "hovered"),
|
||||
border: border(layer, "variant", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
color: foreground(layer, "variant", "pressed"),
|
||||
...text(layer, "sans", "variant", "pressed", { size: "xs" }),
|
||||
background: background(layer, "variant", "pressed"),
|
||||
border: border(layer, "variant", "pressed"),
|
||||
},
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
active: {
|
||||
...text(layer, "sans", "variant", "active", { size: "xs" }),
|
||||
background: background(layer, "variant", "active"),
|
||||
border: border(layer, "variant", "active"),
|
||||
},
|
||||
},
|
||||
userMenuButton: {
|
||||
buttonWidth: 20,
|
||||
iconWidth: 12,
|
||||
...titlebarButton,
|
||||
},
|
||||
toggleContactsBadge: {
|
||||
cornerRadius: 3,
|
||||
padding: 2,
|
||||
margin: { top: 3, left: 3 },
|
||||
border: border(layer),
|
||||
background: foreground(layer, "accent"),
|
||||
},
|
||||
shareButton: {
|
||||
...titlebarButton,
|
||||
},
|
||||
},
|
||||
}
|
||||
const avatarWidth = 18
|
||||
const avatarOuterWidth = avatarWidth + 4
|
||||
const followerAvatarWidth = 14
|
||||
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
||||
|
||||
toolbar: {
|
||||
height: 34,
|
||||
background: background(colorScheme.highest),
|
||||
border: border(colorScheme.highest, { bottom: true }),
|
||||
itemSpacing: 8,
|
||||
navButton: {
|
||||
color: foreground(colorScheme.highest, "on"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 24,
|
||||
cornerRadius: 6,
|
||||
hover: {
|
||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||
background: background(
|
||||
colorScheme.highest,
|
||||
"on",
|
||||
"hovered"
|
||||
),
|
||||
return {
|
||||
background: background(colorScheme.lowest),
|
||||
blankPane: {
|
||||
logoContainer: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
logo: {
|
||||
color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
},
|
||||
logoShadow: {
|
||||
color: withOpacity(
|
||||
colorScheme.isLight
|
||||
? "#FFFFFF"
|
||||
: colorScheme.lowest.base.default.background,
|
||||
colorScheme.isLight ? 1 : 0.6
|
||||
),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
},
|
||||
keyboardHints: {
|
||||
margin: {
|
||||
top: 96,
|
||||
},
|
||||
cornerRadius: 4,
|
||||
},
|
||||
keyboardHint: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
hover: {
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
keyboardHintWidth: 320,
|
||||
},
|
||||
disabled: {
|
||||
color: foreground(colorScheme.highest, "on", "disabled"),
|
||||
joiningProjectAvatar: {
|
||||
cornerRadius: 40,
|
||||
width: 80,
|
||||
},
|
||||
},
|
||||
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
||||
},
|
||||
breadcrumbs: {
|
||||
...text(layer, "mono", "variant"),
|
||||
padding: { left: 6 },
|
||||
},
|
||||
disconnectedOverlay: {
|
||||
...text(layer, "sans"),
|
||||
background: withOpacity(background(layer), 0.8),
|
||||
},
|
||||
notification: {
|
||||
margin: { top: 10 },
|
||||
background: background(colorScheme.middle),
|
||||
cornerRadius: 6,
|
||||
padding: 12,
|
||||
border: border(colorScheme.middle),
|
||||
shadow: colorScheme.popoverShadow,
|
||||
},
|
||||
notifications: {
|
||||
width: 400,
|
||||
margin: { right: 10, bottom: 10 },
|
||||
},
|
||||
dock: {
|
||||
initialSizeRight: 640,
|
||||
initialSizeBottom: 304,
|
||||
wash_color: withOpacity(background(colorScheme.highest), 0.5),
|
||||
panel: {
|
||||
border: border(colorScheme.middle),
|
||||
},
|
||||
maximized: {
|
||||
margin: 32,
|
||||
border: border(colorScheme.highest, { overlay: true }),
|
||||
shadow: colorScheme.modalShadow,
|
||||
},
|
||||
},
|
||||
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
|
||||
}
|
||||
joiningProjectMessage: {
|
||||
padding: 12,
|
||||
...text(layer, "sans", { size: "lg" }),
|
||||
},
|
||||
externalLocationMessage: {
|
||||
background: background(colorScheme.middle, "accent"),
|
||||
border: border(colorScheme.middle, "accent"),
|
||||
cornerRadius: 6,
|
||||
padding: 12,
|
||||
margin: { bottom: 8, right: 8 },
|
||||
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
|
||||
},
|
||||
leaderBorderOpacity: 0.7,
|
||||
leaderBorderWidth: 2.0,
|
||||
tabBar: tabBar(colorScheme),
|
||||
modal: {
|
||||
margin: {
|
||||
bottom: 52,
|
||||
top: 52,
|
||||
},
|
||||
cursor: "Arrow",
|
||||
},
|
||||
sidebar: {
|
||||
initialSize: 240,
|
||||
border: border(layer, { left: true, right: true }),
|
||||
},
|
||||
paneDivider: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
},
|
||||
statusBar: statusBar(colorScheme),
|
||||
titlebar: {
|
||||
itemSpacing,
|
||||
facePileSpacing: 2,
|
||||
height: 33, // 32px + 1px for overlaid border
|
||||
background: background(layer),
|
||||
border: border(layer, { bottom: true, overlay: true }),
|
||||
padding: {
|
||||
left: 80,
|
||||
right: itemSpacing,
|
||||
},
|
||||
|
||||
// Project
|
||||
title: text(layer, "sans", "variant"),
|
||||
|
||||
// Collaborators
|
||||
leaderAvatar: {
|
||||
width: avatarWidth,
|
||||
outerWidth: avatarOuterWidth,
|
||||
cornerRadius: avatarWidth / 2,
|
||||
outerCornerRadius: avatarOuterWidth / 2,
|
||||
},
|
||||
followerAvatar: {
|
||||
width: followerAvatarWidth,
|
||||
outerWidth: followerAvatarOuterWidth,
|
||||
cornerRadius: followerAvatarWidth / 2,
|
||||
outerCornerRadius: followerAvatarOuterWidth / 2,
|
||||
},
|
||||
inactiveAvatarGrayscale: true,
|
||||
followerAvatarOverlap: 8,
|
||||
leaderSelection: {
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
padding: {
|
||||
left: 2,
|
||||
right: 2,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
cornerRadius: 6,
|
||||
},
|
||||
avatarRibbon: {
|
||||
height: 3,
|
||||
width: 12,
|
||||
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
|
||||
},
|
||||
|
||||
// Sign in buttom
|
||||
// FlatButton, Variant
|
||||
signInPrompt: {
|
||||
...titlebarButton,
|
||||
},
|
||||
|
||||
// Offline Indicator
|
||||
offlineIcon: {
|
||||
color: foreground(layer, "variant"),
|
||||
width: 16,
|
||||
margin: {
|
||||
left: itemSpacing,
|
||||
},
|
||||
padding: {
|
||||
right: 4,
|
||||
},
|
||||
},
|
||||
|
||||
// Notice that the collaboration server is out of date
|
||||
outdatedWarning: {
|
||||
...text(layer, "sans", "warning", { size: "xs" }),
|
||||
background: withOpacity(background(layer, "warning"), 0.3),
|
||||
border: border(layer, "warning"),
|
||||
margin: {
|
||||
left: itemSpacing,
|
||||
},
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
cornerRadius: 6,
|
||||
},
|
||||
callControl: {
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 20,
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
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"),
|
||||
},
|
||||
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,
|
||||
margin: { top: 3, left: 3 },
|
||||
border: border(layer),
|
||||
background: foreground(layer, "accent"),
|
||||
},
|
||||
shareButton: {
|
||||
...titlebarButton,
|
||||
},
|
||||
},
|
||||
|
||||
toolbar: {
|
||||
height: 34,
|
||||
background: background(colorScheme.highest),
|
||||
border: border(colorScheme.highest, { bottom: true }),
|
||||
itemSpacing: 8,
|
||||
navButton: {
|
||||
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"),
|
||||
},
|
||||
},
|
||||
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
||||
},
|
||||
breadcrumbs: {
|
||||
...text(layer, "mono", "variant"),
|
||||
padding: { left: 6 },
|
||||
},
|
||||
disconnectedOverlay: {
|
||||
...text(layer, "sans"),
|
||||
background: withOpacity(background(layer), 0.8),
|
||||
},
|
||||
notification: {
|
||||
margin: { top: 10 },
|
||||
background: background(colorScheme.middle),
|
||||
cornerRadius: 6,
|
||||
padding: 12,
|
||||
border: border(colorScheme.middle),
|
||||
shadow: colorScheme.popoverShadow,
|
||||
},
|
||||
notifications: {
|
||||
width: 400,
|
||||
margin: { right: 10, bottom: 10 },
|
||||
},
|
||||
dock: {
|
||||
initialSizeRight: 640,
|
||||
initialSizeBottom: 304,
|
||||
wash_color: withOpacity(background(colorScheme.highest), 0.5),
|
||||
panel: {
|
||||
border: border(colorScheme.middle),
|
||||
},
|
||||
maximized: {
|
||||
margin: 32,
|
||||
border: border(colorScheme.highest, { overlay: true }),
|
||||
shadow: colorScheme.modalShadow,
|
||||
},
|
||||
},
|
||||
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user