WIP snake_case 5/?
This commit is contained in:
Nate Butler
@@ -12,7 +12,7 @@ export default function simple_message_notification(
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
margin: { left: header_padding, right: header_padding },
|
||||
},
|
||||
action_nessage: interactive({
|
||||
action_message: interactive({
|
||||
base: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
border: border(theme.middle, "active"),
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function status_bar(theme: ColorScheme): any {
|
||||
},
|
||||
},
|
||||
}),
|
||||
auto_updat_progress_message: text(layer, "sans", "variant"),
|
||||
auto_update_progress_message: text(layer, "sans", "variant"),
|
||||
auto_update_done_message: text(layer, "sans", "variant"),
|
||||
lsp_status: interactive({
|
||||
base: {
|
||||
|
||||
@@ -3,11 +3,11 @@ import { with_opacity } from "../theme/color"
|
||||
import { text, border, background, foreground } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function tab_bar(colorScheme: ColorScheme): any {
|
||||
export default function tab_bar(theme: ColorScheme): any {
|
||||
const height = 32
|
||||
|
||||
const activeLayer = colorScheme.highest
|
||||
const layer = colorScheme.middle
|
||||
const active_layer = theme.highest
|
||||
const layer = theme.middle
|
||||
|
||||
const tab = {
|
||||
height,
|
||||
@@ -29,12 +29,12 @@ export default function tab_bar(colorScheme: ColorScheme): any {
|
||||
|
||||
// Close icons
|
||||
close_icon_width: 8,
|
||||
iconClose: foreground(layer, "variant"),
|
||||
iconCloseActive: foreground(layer, "hovered"),
|
||||
icon_close: foreground(layer, "variant"),
|
||||
icon_close_active: foreground(layer, "hovered"),
|
||||
|
||||
// Indicators
|
||||
iconConflict: foreground(layer, "warning"),
|
||||
iconDirty: foreground(layer, "accent"),
|
||||
icon_conflict: foreground(layer, "warning"),
|
||||
icon_dirty: foreground(layer, "accent"),
|
||||
|
||||
// When two tabs of the same name are open, a label appears next to them
|
||||
description: {
|
||||
@@ -43,25 +43,25 @@ export default function tab_bar(colorScheme: ColorScheme): any {
|
||||
},
|
||||
}
|
||||
|
||||
const activePaneActiveTab = {
|
||||
const active_pane_active_tab = {
|
||||
...tab,
|
||||
background: background(activeLayer),
|
||||
text: text(activeLayer, "sans", "active", { size: "sm" }),
|
||||
background: background(active_layer),
|
||||
text: text(active_layer, "sans", "active", { size: "sm" }),
|
||||
border: {
|
||||
...tab.border,
|
||||
bottom: false,
|
||||
},
|
||||
}
|
||||
|
||||
const inactivePaneInactiveTab = {
|
||||
const inactive_pane_inactive_tab = {
|
||||
...tab,
|
||||
background: background(layer),
|
||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||
}
|
||||
|
||||
const inactivePaneActiveTab = {
|
||||
const inactive_pane_active_tab = {
|
||||
...tab,
|
||||
background: background(activeLayer),
|
||||
background: background(active_layer),
|
||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||
border: {
|
||||
...tab.border,
|
||||
@@ -69,31 +69,31 @@ export default function tab_bar(colorScheme: ColorScheme): any {
|
||||
},
|
||||
}
|
||||
|
||||
const draggedTab = {
|
||||
...activePaneActiveTab,
|
||||
const dragged_tab = {
|
||||
...active_pane_active_tab,
|
||||
background: with_opacity(tab.background, 0.9),
|
||||
border: undefined as any,
|
||||
shadow: colorScheme.popover_shadow,
|
||||
shadow: theme.popover_shadow,
|
||||
}
|
||||
|
||||
return {
|
||||
height,
|
||||
background: background(layer),
|
||||
activePane: {
|
||||
activeTab: activePaneActiveTab,
|
||||
inactiveTab: tab,
|
||||
active_pane: {
|
||||
active_tab: active_pane_active_tab,
|
||||
inactive_tab: tab,
|
||||
},
|
||||
inactivePane: {
|
||||
activeTab: inactivePaneActiveTab,
|
||||
inactiveTab: inactivePaneInactiveTab,
|
||||
inactive_pane: {
|
||||
active_tab: inactive_pane_active_tab,
|
||||
inactive_tab: inactive_pane_inactive_tab,
|
||||
},
|
||||
draggedTab,
|
||||
paneButton: toggleable({
|
||||
dragged_tab,
|
||||
pane_button: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
icon_width: 12,
|
||||
button_width: activePaneActiveTab.height,
|
||||
button_width: active_pane_active_tab.height,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
@@ -118,7 +118,7 @@ export default function tab_bar(colorScheme: ColorScheme): any {
|
||||
},
|
||||
},
|
||||
}),
|
||||
paneButtonContainer: {
|
||||
pane_button_container: {
|
||||
background: tab.background,
|
||||
border: {
|
||||
...tab.border,
|
||||
|
||||
@@ -17,8 +17,8 @@ function build_spacing(
|
||||
group: spacing,
|
||||
item: spacing / 2,
|
||||
half_item: spacing / 4,
|
||||
marginY: (container_height - element_height) / 2,
|
||||
marginX: (container_height - element_height) / 2,
|
||||
margin_y: (container_height - element_height) / 2,
|
||||
margin_x: (container_height - element_height) / 2,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,15 +26,15 @@ function call_controls(theme: ColorScheme) {
|
||||
const button_height = 18
|
||||
|
||||
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
|
||||
const marginY = {
|
||||
top: space.marginY,
|
||||
bottom: space.marginY,
|
||||
const margin_y = {
|
||||
top: space.margin_y,
|
||||
bottom: space.margin_y,
|
||||
}
|
||||
|
||||
return {
|
||||
toggle_microphone_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...marginY,
|
||||
...margin_y,
|
||||
left: space.group,
|
||||
right: space.half_item,
|
||||
},
|
||||
@@ -43,7 +43,7 @@ function call_controls(theme: ColorScheme) {
|
||||
|
||||
toggle_speakers_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...marginY,
|
||||
...margin_y,
|
||||
left: space.half_item,
|
||||
right: space.half_item,
|
||||
},
|
||||
@@ -51,7 +51,7 @@ function call_controls(theme: ColorScheme) {
|
||||
|
||||
screen_share_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...marginY,
|
||||
...margin_y,
|
||||
left: space.half_item,
|
||||
right: space.group,
|
||||
},
|
||||
@@ -150,20 +150,20 @@ function user_menu(theme: ColorScheme) {
|
||||
}
|
||||
}
|
||||
return {
|
||||
userMenuButtonOnline: build_button({ online: true }),
|
||||
userMenuButtonOffline: build_button({ online: false }),
|
||||
user_menu_button_online: build_button({ online: true }),
|
||||
user_menu_button_offline: build_button({ online: false }),
|
||||
}
|
||||
}
|
||||
|
||||
export function titlebar(theme: ColorScheme): any {
|
||||
const avatarWidth = 15
|
||||
const avatarOuterWidth = avatarWidth + 4
|
||||
const followerAvatarWidth = 14
|
||||
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
||||
const avatar_width = 15
|
||||
const avatar_outer_width = avatar_width + 4
|
||||
const follower_avatar_width = 14
|
||||
const follower_avatar_outer_width = follower_avatar_width + 4
|
||||
|
||||
return {
|
||||
item_spacing: ITEM_SPACING,
|
||||
facePileSpacing: 2,
|
||||
face_pile_spacing: 2,
|
||||
height: TITLEBAR_HEIGHT,
|
||||
background: background(theme.lowest),
|
||||
border: border(theme.lowest, { bottom: true }),
|
||||
@@ -177,21 +177,21 @@ export function titlebar(theme: ColorScheme): any {
|
||||
highlight_color: text(theme.lowest, "sans", "active").color,
|
||||
|
||||
// Collaborators
|
||||
leaderAvatar: {
|
||||
width: avatarWidth,
|
||||
outerWidth: avatarOuterWidth,
|
||||
corner_radius: avatarWidth / 2,
|
||||
outerCornerRadius: avatarOuterWidth / 2,
|
||||
leader_avatar: {
|
||||
width: avatar_width,
|
||||
outer_width: avatar_outer_width,
|
||||
corner_radius: avatar_width / 2,
|
||||
outer_corner_radius: avatar_outer_width / 2,
|
||||
},
|
||||
followerAvatar: {
|
||||
width: followerAvatarWidth,
|
||||
outerWidth: followerAvatarOuterWidth,
|
||||
corner_radius: followerAvatarWidth / 2,
|
||||
outerCornerRadius: followerAvatarOuterWidth / 2,
|
||||
follower_avatar: {
|
||||
width: follower_avatar_width,
|
||||
outer_width: follower_avatar_outer_width,
|
||||
corner_radius: follower_avatar_width / 2,
|
||||
outer_corner_radius: follower_avatar_outer_width / 2,
|
||||
},
|
||||
inactiveAvatarGrayscale: true,
|
||||
followerAvatarOverlap: 8,
|
||||
leaderSelection: {
|
||||
inactive_avatar_grayscale: true,
|
||||
follower_avatar_overlap: 8,
|
||||
leader_selection: {
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
@@ -204,14 +204,14 @@ export function titlebar(theme: ColorScheme): any {
|
||||
},
|
||||
corner_radius: 6,
|
||||
},
|
||||
avatarRibbon: {
|
||||
avatar_ribbon: {
|
||||
height: 3,
|
||||
width: 14,
|
||||
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
|
||||
},
|
||||
|
||||
sign_in_button: toggleable_text_button(theme, {}),
|
||||
offlineIcon: {
|
||||
offline_icon: {
|
||||
color: foreground(theme.lowest, "variant"),
|
||||
width: 16,
|
||||
margin: {
|
||||
@@ -223,7 +223,7 @@ export function titlebar(theme: ColorScheme): any {
|
||||
},
|
||||
|
||||
// When the collaboration server is out of date, show a warning
|
||||
outdatedWarning: {
|
||||
outdated_warning: {
|
||||
...text(theme.lowest, "sans", "warning", { size: "xs" }),
|
||||
background: with_opacity(background(theme.lowest, "warning"), 0.3),
|
||||
border: border(theme.lowest, "warning"),
|
||||
@@ -253,14 +253,14 @@ export function titlebar(theme: ColorScheme): any {
|
||||
}),
|
||||
|
||||
// Jewel that notifies you that there are new contact requests
|
||||
toggleContactsBadge: {
|
||||
toggle_contacts_badge: {
|
||||
corner_radius: 3,
|
||||
padding: 2,
|
||||
margin: { top: 3, left: 3 },
|
||||
border: border(theme.lowest),
|
||||
background: foreground(theme.lowest, "accent"),
|
||||
},
|
||||
shareButton: toggleable_text_button(theme, {}),
|
||||
share_button: toggleable_text_button(theme, {}),
|
||||
user_menu: user_menu(theme),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,61 +1,59 @@
|
||||
import { ColorScheme } from "../theme/color_scheme"
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
export default function dropdown_menu(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
|
||||
export default function dropdown_menu(theme: ColorScheme): any {
|
||||
return {
|
||||
rowHeight: 30,
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
shadow: colorScheme.popover_shadow,
|
||||
row_height: 30,
|
||||
background: background(theme.middle),
|
||||
border: border(theme.middle),
|
||||
shadow: theme.popover_shadow,
|
||||
header: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryText: text(layer, "sans", {
|
||||
...text(theme.middle, "sans", { size: "sm" }),
|
||||
secondary_text: text(theme.middle, "sans", {
|
||||
size: "sm",
|
||||
color: "#aaaaaa",
|
||||
}),
|
||||
secondaryTextSpacing: 10,
|
||||
secondary_text_spacing: 10,
|
||||
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
||||
corner_radius: 6,
|
||||
background: background(layer, "on"),
|
||||
background: background(theme.middle, "on"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
background: background(theme.middle, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
background: background(theme.middle, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
sectionHeader: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
section_header: {
|
||||
...text(theme.middle, "sans", { size: "sm" }),
|
||||
padding: { left: 8, right: 8, top: 8, bottom: 8 },
|
||||
},
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryTextSpacing: 10,
|
||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||
...text(theme.middle, "sans", { size: "sm" }),
|
||||
secondary_text_spacing: 10,
|
||||
secondary_text: text(theme.middle, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
background: background(theme.middle, "hovered"),
|
||||
...text(theme.middle, "sans", "hovered", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
background: background(theme.middle, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
background: background(theme.middle, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,23 +1,22 @@
|
||||
import { ColorScheme } from "../theme/color_scheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function tooltip(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
export default function tooltip(theme: ColorScheme): any {
|
||||
return {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
background: background(theme.middle),
|
||||
border: border(theme.middle),
|
||||
padding: { top: 4, bottom: 4, left: 8, right: 8 },
|
||||
margin: { top: 6, left: 6 },
|
||||
shadow: colorScheme.popover_shadow,
|
||||
shadow: theme.popover_shadow,
|
||||
corner_radius: 6,
|
||||
text: text(layer, "sans", { size: "xs" }),
|
||||
text: text(theme.middle, "sans", { size: "xs" }),
|
||||
keystroke: {
|
||||
background: background(layer, "on"),
|
||||
background: background(theme.middle, "on"),
|
||||
corner_radius: 4,
|
||||
margin: { left: 6 },
|
||||
padding: { left: 4, right: 4 },
|
||||
...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
|
||||
...text(theme.middle, "mono", "on", { size: "xs", weight: "bold" }),
|
||||
},
|
||||
maxTextWidth: 200,
|
||||
max_text_width: 200,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,37 +2,37 @@ import { ColorScheme } from "../theme/color_scheme"
|
||||
import { foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
const headerPadding = 8
|
||||
|
||||
export default function update_notification(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
export default function update_notification(theme: ColorScheme): any {
|
||||
const header_padding = 8
|
||||
|
||||
return {
|
||||
message: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, right: headerPadding },
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
margin: { left: header_padding, right: header_padding },
|
||||
},
|
||||
actionMessage: interactive({
|
||||
action_message: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
margin: { left: header_padding, top: 6, bottom: 6 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
color: foreground(theme.middle, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
dismissButton: interactive({
|
||||
dismiss_button: interactive({
|
||||
base: {
|
||||
color: foreground(layer),
|
||||
color: foreground(theme.middle),
|
||||
icon_width: 8,
|
||||
iconHeight: 8,
|
||||
icon_height: 8,
|
||||
button_width: 8,
|
||||
buttonHeight: 8,
|
||||
button_height: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
color: foreground(theme.middle, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
@@ -10,10 +10,8 @@ import {
|
||||
} from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
export default function welcome(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.highest
|
||||
|
||||
const checkboxBase = {
|
||||
export default function welcome(theme: ColorScheme): any {
|
||||
const checkbox_base = {
|
||||
corner_radius: 4,
|
||||
padding: {
|
||||
left: 3,
|
||||
@@ -21,8 +19,8 @@ export default function welcome(colorScheme: ColorScheme): any {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
},
|
||||
// shadow: colorScheme.popover_shadow,
|
||||
border: border(layer),
|
||||
// shadow: theme.popover_shadow,
|
||||
border: border(theme.highest),
|
||||
margin: {
|
||||
right: 8,
|
||||
top: 5,
|
||||
@@ -33,30 +31,30 @@ export default function welcome(colorScheme: ColorScheme): any {
|
||||
const interactive_text_size: TextProperties = { size: "sm" }
|
||||
|
||||
return {
|
||||
pageWidth: 320,
|
||||
logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64),
|
||||
logoSubheading: {
|
||||
...text(layer, "sans", "variant", { size: "md" }),
|
||||
page_width: 320,
|
||||
logo: svg(foreground(theme.highest, "default"), "icons/logo_96.svg", 64, 64),
|
||||
logo_subheading: {
|
||||
...text(theme.highest, "sans", "variant", { size: "md" }),
|
||||
margin: {
|
||||
top: 10,
|
||||
bottom: 7,
|
||||
},
|
||||
},
|
||||
buttonGroup: {
|
||||
button_group: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
headingGroup: {
|
||||
heading_group: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 12,
|
||||
},
|
||||
},
|
||||
checkboxGroup: {
|
||||
border: border(layer, "variant"),
|
||||
background: with_opacity(background(layer, "hovered"), 0.25),
|
||||
checkbox_group: {
|
||||
border: border(theme.highest, "variant"),
|
||||
background: with_opacity(background(theme.highest, "hovered"), 0.25),
|
||||
corner_radius: 4,
|
||||
padding: {
|
||||
left: 12,
|
||||
@@ -66,8 +64,8 @@ export default function welcome(colorScheme: ColorScheme): any {
|
||||
},
|
||||
button: interactive({
|
||||
base: {
|
||||
background: background(layer),
|
||||
border: border(layer, "active"),
|
||||
background: background(theme.highest),
|
||||
border: border(theme.highest, "active"),
|
||||
corner_radius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
@@ -79,23 +77,23 @@ export default function welcome(colorScheme: ColorScheme): any {
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", interactive_text_size),
|
||||
...text(theme.highest, "sans", "default", interactive_text_size),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", interactive_text_size),
|
||||
background: background(layer, "hovered"),
|
||||
...text(theme.highest, "sans", "default", interactive_text_size),
|
||||
background: background(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
usageNote: {
|
||||
...text(layer, "sans", "variant", { size: "2xs" }),
|
||||
usage_note: {
|
||||
...text(theme.highest, "sans", "variant", { size: "2xs" }),
|
||||
padding: {
|
||||
top: -4,
|
||||
},
|
||||
},
|
||||
checkboxContainer: {
|
||||
checkbox_container: {
|
||||
margin: {
|
||||
top: 4,
|
||||
},
|
||||
@@ -105,29 +103,29 @@ export default function welcome(colorScheme: ColorScheme): any {
|
||||
},
|
||||
checkbox: {
|
||||
label: {
|
||||
...text(layer, "sans", interactive_text_size),
|
||||
...text(theme.highest, "sans", interactive_text_size),
|
||||
// Also supports margin, container, border, etc.
|
||||
},
|
||||
icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
|
||||
icon: svg(foreground(theme.highest, "on"), "icons/check_12.svg", 12, 12),
|
||||
default: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "default"),
|
||||
border: border(layer, "active"),
|
||||
...checkbox_base,
|
||||
background: background(theme.highest, "default"),
|
||||
border: border(theme.highest, "active"),
|
||||
},
|
||||
checked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
...checkbox_base,
|
||||
background: background(theme.highest, "hovered"),
|
||||
border: border(theme.highest, "active"),
|
||||
},
|
||||
hovered: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
...checkbox_base,
|
||||
background: background(theme.highest, "hovered"),
|
||||
border: border(theme.highest, "active"),
|
||||
},
|
||||
hoveredAndChecked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
hovered_and_checked: {
|
||||
...checkbox_base,
|
||||
background: background(theme.highest, "hovered"),
|
||||
border: border(theme.highest, "active"),
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -13,44 +13,43 @@ import tabBar from "./tab_bar"
|
||||
import { interactive } from "../element"
|
||||
|
||||
import { titlebar } from "./titlebar"
|
||||
export default function workspace(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.lowest
|
||||
const is_light = colorScheme.is_light
|
||||
export default function workspace(theme: ColorScheme): any {
|
||||
const { is_light } = theme
|
||||
|
||||
return {
|
||||
background: background(colorScheme.lowest),
|
||||
blankPane: {
|
||||
logoContainer: {
|
||||
background: background(theme.lowest),
|
||||
blank_pane: {
|
||||
logo_container: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
logo: svg(
|
||||
with_opacity("#000000", colorScheme.is_light ? 0.6 : 0.8),
|
||||
with_opacity("#000000", theme.is_light ? 0.6 : 0.8),
|
||||
"icons/logo_96.svg",
|
||||
256,
|
||||
256
|
||||
),
|
||||
|
||||
logoShadow: svg(
|
||||
logo_shadow: svg(
|
||||
with_opacity(
|
||||
colorScheme.is_light
|
||||
theme.is_light
|
||||
? "#FFFFFF"
|
||||
: colorScheme.lowest.base.default.background,
|
||||
colorScheme.is_light ? 1 : 0.6
|
||||
: theme.lowest.base.default.background,
|
||||
theme.is_light ? 1 : 0.6
|
||||
),
|
||||
"icons/logo_96.svg",
|
||||
256,
|
||||
256
|
||||
),
|
||||
keyboardHints: {
|
||||
keyboard_hints: {
|
||||
margin: {
|
||||
top: 96,
|
||||
},
|
||||
corner_radius: 4,
|
||||
},
|
||||
keyboardHint: interactive({
|
||||
keyboard_hint: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
...text(theme.lowest, "sans", "variant", { size: "sm" }),
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
@@ -61,32 +60,32 @@ export default function workspace(colorScheme: ColorScheme): any {
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
...text(theme.lowest, "sans", "active", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
keyboardHintWidth: 320,
|
||||
keyboard_hint_width: 320,
|
||||
},
|
||||
joiningProjectAvatar: {
|
||||
joining_project_avatar: {
|
||||
corner_radius: 40,
|
||||
width: 80,
|
||||
},
|
||||
joiningProjectMessage: {
|
||||
joining_project_message: {
|
||||
padding: 12,
|
||||
...text(layer, "sans", { size: "lg" }),
|
||||
...text(theme.lowest, "sans", { size: "lg" }),
|
||||
},
|
||||
externalLocationMessage: {
|
||||
background: background(colorScheme.middle, "accent"),
|
||||
border: border(colorScheme.middle, "accent"),
|
||||
external_location_message: {
|
||||
background: background(theme.middle, "accent"),
|
||||
border: border(theme.middle, "accent"),
|
||||
corner_radius: 6,
|
||||
padding: 12,
|
||||
margin: { bottom: 8, right: 8 },
|
||||
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
|
||||
...text(theme.middle, "sans", "accent", { size: "xs" }),
|
||||
},
|
||||
leaderBorderOpacity: 0.7,
|
||||
leaderBorderWidth: 2.0,
|
||||
tabBar: tabBar(colorScheme),
|
||||
leader_border_opacity: 0.7,
|
||||
leader_border_width: 2.0,
|
||||
tab_bar: tabBar(theme),
|
||||
modal: {
|
||||
margin: {
|
||||
bottom: 52,
|
||||
@@ -94,62 +93,62 @@ export default function workspace(colorScheme: ColorScheme): any {
|
||||
},
|
||||
cursor: "Arrow",
|
||||
},
|
||||
zoomedBackground: {
|
||||
zoomed_background: {
|
||||
cursor: "Arrow",
|
||||
background: is_light
|
||||
? with_opacity(background(colorScheme.lowest), 0.8)
|
||||
: with_opacity(background(colorScheme.highest), 0.6),
|
||||
? with_opacity(background(theme.lowest), 0.8)
|
||||
: with_opacity(background(theme.highest), 0.6),
|
||||
},
|
||||
zoomedPaneForeground: {
|
||||
zoomed_pane_foreground: {
|
||||
margin: 16,
|
||||
shadow: colorScheme.modal_shadow,
|
||||
border: border(colorScheme.lowest, { overlay: true }),
|
||||
shadow: theme.modal_shadow,
|
||||
border: border(theme.lowest, { overlay: true }),
|
||||
},
|
||||
zoomedPanelForeground: {
|
||||
zoomed_panel_foreground: {
|
||||
margin: 16,
|
||||
border: border(colorScheme.lowest, { overlay: true }),
|
||||
border: border(theme.lowest, { overlay: true }),
|
||||
},
|
||||
dock: {
|
||||
left: {
|
||||
border: border(layer, { right: true }),
|
||||
border: border(theme.lowest, { right: true }),
|
||||
},
|
||||
bottom: {
|
||||
border: border(layer, { top: true }),
|
||||
border: border(theme.lowest, { top: true }),
|
||||
},
|
||||
right: {
|
||||
border: border(layer, { left: true }),
|
||||
border: border(theme.lowest, { left: true }),
|
||||
},
|
||||
},
|
||||
paneDivider: {
|
||||
color: border_color(layer),
|
||||
pane_divider: {
|
||||
color: border_color(theme.lowest),
|
||||
width: 1,
|
||||
},
|
||||
statusBar: statusBar(colorScheme),
|
||||
titlebar: titlebar(colorScheme),
|
||||
status_bar: statusBar(theme),
|
||||
titlebar: titlebar(theme),
|
||||
toolbar: {
|
||||
height: 34,
|
||||
background: background(colorScheme.highest),
|
||||
border: border(colorScheme.highest, { bottom: true }),
|
||||
itemSpacing: 8,
|
||||
navButton: interactive({
|
||||
background: background(theme.highest),
|
||||
border: border(theme.highest, { bottom: true }),
|
||||
item_spacing: 8,
|
||||
nav_button: interactive({
|
||||
base: {
|
||||
color: foreground(colorScheme.highest, "on"),
|
||||
color: foreground(theme.highest, "on"),
|
||||
icon_width: 12,
|
||||
button_width: 24,
|
||||
corner_radius: 6,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||
color: foreground(theme.highest, "on", "hovered"),
|
||||
background: background(
|
||||
colorScheme.highest,
|
||||
theme.highest,
|
||||
"on",
|
||||
"hovered"
|
||||
),
|
||||
},
|
||||
disabled: {
|
||||
color: foreground(
|
||||
colorScheme.highest,
|
||||
theme.highest,
|
||||
"on",
|
||||
"disabled"
|
||||
),
|
||||
@@ -158,10 +157,10 @@ export default function workspace(colorScheme: ColorScheme): any {
|
||||
}),
|
||||
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
||||
},
|
||||
breadcrumbHeight: 24,
|
||||
breadcrumb_height: 24,
|
||||
breadcrumbs: interactive({
|
||||
base: {
|
||||
...text(colorScheme.highest, "sans", "variant"),
|
||||
...text(theme.highest, "sans", "variant"),
|
||||
corner_radius: 6,
|
||||
padding: {
|
||||
left: 6,
|
||||
@@ -170,31 +169,31 @@ export default function workspace(colorScheme: ColorScheme): any {
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||
color: foreground(theme.highest, "on", "hovered"),
|
||||
background: background(
|
||||
colorScheme.highest,
|
||||
theme.highest,
|
||||
"on",
|
||||
"hovered"
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
disconnectedOverlay: {
|
||||
...text(layer, "sans"),
|
||||
background: with_opacity(background(layer), 0.8),
|
||||
disconnected_overlay: {
|
||||
...text(theme.lowest, "sans"),
|
||||
background: with_opacity(background(theme.lowest), 0.8),
|
||||
},
|
||||
notification: {
|
||||
margin: { top: 10 },
|
||||
background: background(colorScheme.middle),
|
||||
background: background(theme.middle),
|
||||
corner_radius: 6,
|
||||
padding: 12,
|
||||
border: border(colorScheme.middle),
|
||||
shadow: colorScheme.popover_shadow,
|
||||
border: border(theme.middle),
|
||||
shadow: theme.popover_shadow,
|
||||
},
|
||||
notifications: {
|
||||
width: 400,
|
||||
margin: { right: 10, bottom: 10 },
|
||||
},
|
||||
dropTargetOverlayColor: with_opacity(foreground(layer, "variant"), 0.5),
|
||||
drop_target_overlay_color: with_opacity(foreground(theme.lowest, "variant"), 0.5),
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user