Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP snake_case 5/?

Browse source
This commit is contained in:
Nate Butler 2023-06-29 11:31:23 -04:00
parent 0627c198fd
commit 97dc7b77f4
23 changed files with 250 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/src/style_tree/simple_message_notification.ts
View file

@ -12,7 +12,7 @@ export default function simple_message_notification(
...text(theme.middle, "sans", { size: "xs" }), ...text(theme.middle, "sans", { size: "xs" }),
margin: { left: header_padding, right: header_padding }, margin: { left: header_padding, right: header_padding },
}, },
action_nessage: interactive({ action_message: interactive({
base: { base: {
...text(theme.middle, "sans", { size: "xs" }), ...text(theme.middle, "sans", { size: "xs" }),
border: border(theme.middle, "active"), border: border(theme.middle, "active"),

2
styles/src/style_tree/status_bar.ts
View file

@ -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"), auto_update_done_message: text(layer, "sans", "variant"),
lsp_status: interactive({ lsp_status: interactive({
base: { base: {

52
styles/src/style_tree/tab_bar.ts
View file

@ -3,11 +3,11 @@ import { with_opacity } from "../theme/color"
import { text, border, background, foreground } from "./components" import { text, border, background, foreground } from "./components"
import { interactive, toggleable } from "../element" 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 height = 32
const activeLayer = colorScheme.highest const active_layer = theme.highest
const layer = colorScheme.middle const layer = theme.middle
const tab = { const tab = {
height, height,
@ -29,12 +29,12 @@ export default function tab_bar(colorScheme: ColorScheme): any {
// Close icons // Close icons
close_icon_width: 8, close_icon_width: 8,
iconClose: foreground(layer, "variant"), icon_close: foreground(layer, "variant"),
iconCloseActive: foreground(layer, "hovered"), icon_close_active: foreground(layer, "hovered"),
// Indicators // Indicators
iconConflict: foreground(layer, "warning"), icon_conflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "accent"), icon_dirty: foreground(layer, "accent"),
// When two tabs of the same name are open, a label appears next to them // When two tabs of the same name are open, a label appears next to them
description: { description: {
@ -43,25 +43,25 @@ export default function tab_bar(colorScheme: ColorScheme): any {
}, },
} }
const activePaneActiveTab = { const active_pane_active_tab = {
...tab, ...tab,
background: background(activeLayer), background: background(active_layer),
text: text(activeLayer, "sans", "active", { size: "sm" }), text: text(active_layer, "sans", "active", { size: "sm" }),
border: { border: {
...tab.border, ...tab.border,
bottom: false, bottom: false,
}, },
} }
const inactivePaneInactiveTab = { const inactive_pane_inactive_tab = {
...tab, ...tab,
background: background(layer), background: background(layer),
text: text(layer, "sans", "variant", { size: "sm" }), text: text(layer, "sans", "variant", { size: "sm" }),
} }
const inactivePaneActiveTab = { const inactive_pane_active_tab = {
...tab, ...tab,
background: background(activeLayer), background: background(active_layer),
text: text(layer, "sans", "variant", { size: "sm" }), text: text(layer, "sans", "variant", { size: "sm" }),
border: { border: {
...tab.border, ...tab.border,
@ -69,31 +69,31 @@ export default function tab_bar(colorScheme: ColorScheme): any {
}, },
} }
const draggedTab = { const dragged_tab = {
...activePaneActiveTab, ...active_pane_active_tab,
background: with_opacity(tab.background, 0.9), background: with_opacity(tab.background, 0.9),
border: undefined as any, border: undefined as any,
shadow: colorScheme.popover_shadow, shadow: theme.popover_shadow,
} }
return { return {
height, height,
background: background(layer), background: background(layer),
activePane: { active_pane: {
activeTab: activePaneActiveTab, active_tab: active_pane_active_tab,
inactiveTab: tab, inactive_tab: tab,
}, },
inactivePane: { inactive_pane: {
activeTab: inactivePaneActiveTab, active_tab: inactive_pane_active_tab,
inactiveTab: inactivePaneInactiveTab, inactive_tab: inactive_pane_inactive_tab,
}, },
draggedTab, dragged_tab,
paneButton: toggleable({ pane_button: toggleable({
base: interactive({ base: interactive({
base: { base: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
icon_width: 12, icon_width: 12,
button_width: activePaneActiveTab.height, button_width: active_pane_active_tab.height,
}, },
state: { state: {
hovered: { hovered: {
@ -118,7 +118,7 @@ export default function tab_bar(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
paneButtonContainer: { pane_button_container: {
background: tab.background, background: tab.background,
border: { border: {
...tab.border, ...tab.border,

66
styles/src/style_tree/titlebar.ts
View file

@ -17,8 +17,8 @@ function build_spacing(
group: spacing, group: spacing,
item: spacing / 2, item: spacing / 2,
half_item: spacing / 4, half_item: spacing / 4,
marginY: (container_height - element_height) / 2, margin_y: (container_height - element_height) / 2,
marginX: (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 button_height = 18
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING) const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
const marginY = { const margin_y = {
top: space.marginY, top: space.margin_y,
bottom: space.marginY, bottom: space.margin_y,
} }
return { return {
toggle_microphone_button: toggleable_icon_button(theme, { toggle_microphone_button: toggleable_icon_button(theme, {
margin: { margin: {
...marginY, ...margin_y,
left: space.group, left: space.group,
right: space.half_item, right: space.half_item,
}, },
@ -43,7 +43,7 @@ function call_controls(theme: ColorScheme) {
toggle_speakers_button: toggleable_icon_button(theme, { toggle_speakers_button: toggleable_icon_button(theme, {
margin: { margin: {
...marginY, ...margin_y,
left: space.half_item, left: space.half_item,
right: space.half_item, right: space.half_item,
}, },
@ -51,7 +51,7 @@ function call_controls(theme: ColorScheme) {
screen_share_button: toggleable_icon_button(theme, { screen_share_button: toggleable_icon_button(theme, {
margin: { margin: {
...marginY, ...margin_y,
left: space.half_item, left: space.half_item,
right: space.group, right: space.group,
}, },
@ -150,20 +150,20 @@ function user_menu(theme: ColorScheme) {
} }
} }
return { return {
userMenuButtonOnline: build_button({ online: true }), user_menu_button_online: build_button({ online: true }),
userMenuButtonOffline: build_button({ online: false }), user_menu_button_offline: build_button({ online: false }),
} }
} }
export function titlebar(theme: ColorScheme): any { export function titlebar(theme: ColorScheme): any {
const avatarWidth = 15 const avatar_width = 15
const avatarOuterWidth = avatarWidth + 4 const avatar_outer_width = avatar_width + 4
const followerAvatarWidth = 14 const follower_avatar_width = 14
const followerAvatarOuterWidth = followerAvatarWidth + 4 const follower_avatar_outer_width = follower_avatar_width + 4
return { return {
item_spacing: ITEM_SPACING, item_spacing: ITEM_SPACING,
facePileSpacing: 2, face_pile_spacing: 2,
height: TITLEBAR_HEIGHT, height: TITLEBAR_HEIGHT,
background: background(theme.lowest), background: background(theme.lowest),
border: border(theme.lowest, { bottom: true }), border: border(theme.lowest, { bottom: true }),
@ -177,21 +177,21 @@ export function titlebar(theme: ColorScheme): any {
highlight_color: text(theme.lowest, "sans", "active").color, highlight_color: text(theme.lowest, "sans", "active").color,
// Collaborators // Collaborators
leaderAvatar: { leader_avatar: {
width: avatarWidth, width: avatar_width,
outerWidth: avatarOuterWidth, outer_width: avatar_outer_width,
corner_radius: avatarWidth / 2, corner_radius: avatar_width / 2,
outerCornerRadius: avatarOuterWidth / 2, outer_corner_radius: avatar_outer_width / 2,
}, },
followerAvatar: { follower_avatar: {
width: followerAvatarWidth, width: follower_avatar_width,
outerWidth: followerAvatarOuterWidth, outer_width: follower_avatar_outer_width,
corner_radius: followerAvatarWidth / 2, corner_radius: follower_avatar_width / 2,
outerCornerRadius: followerAvatarOuterWidth / 2, outer_corner_radius: follower_avatar_outer_width / 2,
}, },
inactiveAvatarGrayscale: true, inactive_avatar_grayscale: true,
followerAvatarOverlap: 8, follower_avatar_overlap: 8,
leaderSelection: { leader_selection: {
margin: { margin: {
top: 4, top: 4,
bottom: 4, bottom: 4,
@ -204,14 +204,14 @@ export function titlebar(theme: ColorScheme): any {
}, },
corner_radius: 6, corner_radius: 6,
}, },
avatarRibbon: { avatar_ribbon: {
height: 3, height: 3,
width: 14, width: 14,
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
}, },
sign_in_button: toggleable_text_button(theme, {}), sign_in_button: toggleable_text_button(theme, {}),
offlineIcon: { offline_icon: {
color: foreground(theme.lowest, "variant"), color: foreground(theme.lowest, "variant"),
width: 16, width: 16,
margin: { margin: {
@ -223,7 +223,7 @@ export function titlebar(theme: ColorScheme): any {
}, },
// When the collaboration server is out of date, show a warning // When the collaboration server is out of date, show a warning
outdatedWarning: { outdated_warning: {
...text(theme.lowest, "sans", "warning", { size: "xs" }), ...text(theme.lowest, "sans", "warning", { size: "xs" }),
background: with_opacity(background(theme.lowest, "warning"), 0.3), background: with_opacity(background(theme.lowest, "warning"), 0.3),
border: border(theme.lowest, "warning"), 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 // Jewel that notifies you that there are new contact requests
toggleContactsBadge: { toggle_contacts_badge: {
corner_radius: 3, corner_radius: 3,
padding: 2, padding: 2,
margin: { top: 3, left: 3 }, margin: { top: 3, left: 3 },
border: border(theme.lowest), border: border(theme.lowest),
background: foreground(theme.lowest, "accent"), background: foreground(theme.lowest, "accent"),
}, },
shareButton: toggleable_text_button(theme, {}), share_button: toggleable_text_button(theme, {}),
user_menu: user_menu(theme), user_menu: user_menu(theme),
} }
} }

42
styles/src/style_tree/toolbar_dropdown_menu.ts
View file

@ -1,61 +1,59 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
export default function dropdown_menu(colorScheme: ColorScheme): any { export default function dropdown_menu(theme: ColorScheme): any {
const layer = colorScheme.middle
return { return {
rowHeight: 30, row_height: 30,
background: background(layer), background: background(theme.middle),
border: border(layer), border: border(theme.middle),
shadow: colorScheme.popover_shadow, shadow: theme.popover_shadow,
header: interactive({ header: interactive({
base: { base: {
...text(layer, "sans", { size: "sm" }), ...text(theme.middle, "sans", { size: "sm" }),
secondaryText: text(layer, "sans", { secondary_text: text(theme.middle, "sans", {
size: "sm", size: "sm",
color: "#aaaaaa", color: "#aaaaaa",
}), }),
secondaryTextSpacing: 10, secondary_text_spacing: 10,
padding: { left: 8, right: 8, top: 2, bottom: 2 }, padding: { left: 8, right: 8, top: 2, bottom: 2 },
corner_radius: 6, corner_radius: 6,
background: background(layer, "on"), background: background(theme.middle, "on"),
}, },
state: { state: {
hovered: { hovered: {
background: background(layer, "hovered"), background: background(theme.middle, "hovered"),
}, },
clicked: { clicked: {
background: background(layer, "pressed"), background: background(theme.middle, "pressed"),
}, },
}, },
}), }),
sectionHeader: { section_header: {
...text(layer, "sans", { size: "sm" }), ...text(theme.middle, "sans", { size: "sm" }),
padding: { left: 8, right: 8, top: 8, bottom: 8 }, padding: { left: 8, right: 8, top: 8, bottom: 8 },
}, },
item: toggleable({ item: toggleable({
base: interactive({ base: interactive({
base: { base: {
...text(layer, "sans", { size: "sm" }), ...text(theme.middle, "sans", { size: "sm" }),
secondaryTextSpacing: 10, secondary_text_spacing: 10,
secondaryText: text(layer, "sans", { size: "sm" }), secondary_text: text(theme.middle, "sans", { size: "sm" }),
padding: { left: 18, right: 18, top: 2, bottom: 2 }, padding: { left: 18, right: 18, top: 2, bottom: 2 },
}, },
state: { state: {
hovered: { hovered: {
background: background(layer, "hovered"), background: background(theme.middle, "hovered"),
...text(layer, "sans", "hovered", { size: "sm" }), ...text(theme.middle, "sans", "hovered", { size: "sm" }),
}, },
}, },
}), }),
state: { state: {
active: { active: {
default: { default: {
background: background(layer, "active"), background: background(theme.middle, "active"),
}, },
hovered: { hovered: {
background: background(layer, "hovered"), background: background(theme.middle, "hovered"),
}, },
}, },
}, },

17
styles/src/style_tree/tooltip.ts
View file

@ -1,23 +1,22 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function tooltip(colorScheme: ColorScheme): any { export default function tooltip(theme: ColorScheme): any {
const layer = colorScheme.middle
return { return {
background: background(layer), background: background(theme.middle),
border: border(layer), border: border(theme.middle),
padding: { top: 4, bottom: 4, left: 8, right: 8 }, padding: { top: 4, bottom: 4, left: 8, right: 8 },
margin: { top: 6, left: 6 }, margin: { top: 6, left: 6 },
shadow: colorScheme.popover_shadow, shadow: theme.popover_shadow,
corner_radius: 6, corner_radius: 6,
text: text(layer, "sans", { size: "xs" }), text: text(theme.middle, "sans", { size: "xs" }),
keystroke: { keystroke: {
background: background(layer, "on"), background: background(theme.middle, "on"),
corner_radius: 4, corner_radius: 4,
margin: { left: 6 }, margin: { left: 6 },
padding: { left: 4, right: 4 }, 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,
} }
} }

28
styles/src/style_tree/update_notification.ts
View file

@ -2,37 +2,37 @@ import { ColorScheme } from "../theme/color_scheme"
import { foreground, text } from "./components" import { foreground, text } from "./components"
import { interactive } from "../element" import { interactive } from "../element"
const headerPadding = 8
export default function update_notification(colorScheme: ColorScheme): any { export default function update_notification(theme: ColorScheme): any {
const layer = colorScheme.middle const header_padding = 8
return { return {
message: { message: {
...text(layer, "sans", { size: "xs" }), ...text(theme.middle, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding }, margin: { left: header_padding, right: header_padding },
}, },
actionMessage: interactive({ action_message: interactive({
base: { base: {
...text(layer, "sans", { size: "xs" }), ...text(theme.middle, "sans", { size: "xs" }),
margin: { left: headerPadding, top: 6, bottom: 6 }, margin: { left: header_padding, top: 6, bottom: 6 },
}, },
state: { state: {
hovered: { hovered: {
color: foreground(layer, "hovered"), color: foreground(theme.middle, "hovered"),
}, },
}, },
}), }),
dismissButton: interactive({ dismiss_button: interactive({
base: { base: {
color: foreground(layer), color: foreground(theme.middle),
icon_width: 8, icon_width: 8,
iconHeight: 8, icon_height: 8,
button_width: 8, button_width: 8,
buttonHeight: 8, button_height: 8,
}, },
state: { state: {
hovered: { hovered: {
color: foreground(layer, "hovered"), color: foreground(theme.middle, "hovered"),
}, },
}, },
}), }),

74
styles/src/style_tree/welcome.ts
View file

@ -10,10 +10,8 @@ import {
} from "./components" } from "./components"
import { interactive } from "../element" import { interactive } from "../element"
export default function welcome(colorScheme: ColorScheme): any { export default function welcome(theme: ColorScheme): any {
const layer = colorScheme.highest const checkbox_base = {
const checkboxBase = {
corner_radius: 4, corner_radius: 4,
padding: { padding: {
left: 3, left: 3,
@ -21,8 +19,8 @@ export default function welcome(colorScheme: ColorScheme): any {
top: 3, top: 3,
bottom: 3, bottom: 3,
}, },
// shadow: colorScheme.popover_shadow, // shadow: theme.popover_shadow,
border: border(layer), border: border(theme.highest),
margin: { margin: {
right: 8, right: 8,
top: 5, top: 5,
@ -33,30 +31,30 @@ export default function welcome(colorScheme: ColorScheme): any {
const interactive_text_size: TextProperties = { size: "sm" } const interactive_text_size: TextProperties = { size: "sm" }
return { return {
pageWidth: 320, page_width: 320,
logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64), logo: svg(foreground(theme.highest, "default"), "icons/logo_96.svg", 64, 64),
logoSubheading: { logo_subheading: {
...text(layer, "sans", "variant", { size: "md" }), ...text(theme.highest, "sans", "variant", { size: "md" }),
margin: { margin: {
top: 10, top: 10,
bottom: 7, bottom: 7,
}, },
}, },
buttonGroup: { button_group: {
margin: { margin: {
top: 8, top: 8,
bottom: 16, bottom: 16,
}, },
}, },
headingGroup: { heading_group: {
margin: { margin: {
top: 8, top: 8,
bottom: 12, bottom: 12,
}, },
}, },
checkboxGroup: { checkbox_group: {
border: border(layer, "variant"), border: border(theme.highest, "variant"),
background: with_opacity(background(layer, "hovered"), 0.25), background: with_opacity(background(theme.highest, "hovered"), 0.25),
corner_radius: 4, corner_radius: 4,
padding: { padding: {
left: 12, left: 12,
@ -66,8 +64,8 @@ export default function welcome(colorScheme: ColorScheme): any {
}, },
button: interactive({ button: interactive({
base: { base: {
background: background(layer), background: background(theme.highest),
border: border(layer, "active"), border: border(theme.highest, "active"),
corner_radius: 4, corner_radius: 4,
margin: { margin: {
top: 4, top: 4,
@ -79,23 +77,23 @@ export default function welcome(colorScheme: ColorScheme): any {
left: 7, left: 7,
right: 7, right: 7,
}, },
...text(layer, "sans", "default", interactive_text_size), ...text(theme.highest, "sans", "default", interactive_text_size),
}, },
state: { state: {
hovered: { hovered: {
...text(layer, "sans", "default", interactive_text_size), ...text(theme.highest, "sans", "default", interactive_text_size),
background: background(layer, "hovered"), background: background(theme.highest, "hovered"),
}, },
}, },
}), }),
usageNote: { usage_note: {
...text(layer, "sans", "variant", { size: "2xs" }), ...text(theme.highest, "sans", "variant", { size: "2xs" }),
padding: { padding: {
top: -4, top: -4,
}, },
}, },
checkboxContainer: { checkbox_container: {
margin: { margin: {
top: 4, top: 4,
}, },
@ -105,29 +103,29 @@ export default function welcome(colorScheme: ColorScheme): any {
}, },
checkbox: { checkbox: {
label: { label: {
...text(layer, "sans", interactive_text_size), ...text(theme.highest, "sans", interactive_text_size),
// Also supports margin, container, border, etc. // 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: { default: {
...checkboxBase, ...checkbox_base,
background: background(layer, "default"), background: background(theme.highest, "default"),
border: border(layer, "active"), border: border(theme.highest, "active"),
}, },
checked: { checked: {
...checkboxBase, ...checkbox_base,
background: background(layer, "hovered"), background: background(theme.highest, "hovered"),
border: border(layer, "active"), border: border(theme.highest, "active"),
}, },
hovered: { hovered: {
...checkboxBase, ...checkbox_base,
background: background(layer, "hovered"), background: background(theme.highest, "hovered"),
border: border(layer, "active"), border: border(theme.highest, "active"),
}, },
hoveredAndChecked: { hovered_and_checked: {
...checkboxBase, ...checkbox_base,
background: background(layer, "hovered"), background: background(theme.highest, "hovered"),
border: border(layer, "active"), border: border(theme.highest, "active"),
}, },
}, },
} }

119
styles/src/style_tree/workspace.ts
View file

@ -13,44 +13,43 @@ import tabBar from "./tab_bar"
import { interactive } from "../element" import { interactive } from "../element"
import { titlebar } from "./titlebar" import { titlebar } from "./titlebar"
export default function workspace(colorScheme: ColorScheme): any { export default function workspace(theme: ColorScheme): any {
const layer = colorScheme.lowest const { is_light } = theme
const is_light = colorScheme.is_light
return { return {
background: background(colorScheme.lowest), background: background(theme.lowest),
blankPane: { blank_pane: {
logoContainer: { logo_container: {
width: 256, width: 256,
height: 256, height: 256,
}, },
logo: svg( 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", "icons/logo_96.svg",
256, 256,
256 256
), ),
logoShadow: svg( logo_shadow: svg(
with_opacity( with_opacity(
colorScheme.is_light theme.is_light
? "#FFFFFF" ? "#FFFFFF"
: colorScheme.lowest.base.default.background, : theme.lowest.base.default.background,
colorScheme.is_light ? 1 : 0.6 theme.is_light ? 1 : 0.6
), ),
"icons/logo_96.svg", "icons/logo_96.svg",
256, 256,
256 256
), ),
keyboardHints: { keyboard_hints: {
margin: { margin: {
top: 96, top: 96,
}, },
corner_radius: 4, corner_radius: 4,
}, },
keyboardHint: interactive({ keyboard_hint: interactive({
base: { base: {
...text(layer, "sans", "variant", { size: "sm" }), ...text(theme.lowest, "sans", "variant", { size: "sm" }),
padding: { padding: {
top: 3, top: 3,
left: 8, left: 8,
@ -61,32 +60,32 @@ export default function workspace(colorScheme: ColorScheme): any {
}, },
state: { state: {
hovered: { 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, corner_radius: 40,
width: 80, width: 80,
}, },
joiningProjectMessage: { joining_project_message: {
padding: 12, padding: 12,
...text(layer, "sans", { size: "lg" }), ...text(theme.lowest, "sans", { size: "lg" }),
}, },
externalLocationMessage: { external_location_message: {
background: background(colorScheme.middle, "accent"), background: background(theme.middle, "accent"),
border: border(colorScheme.middle, "accent"), border: border(theme.middle, "accent"),
corner_radius: 6, corner_radius: 6,
padding: 12, padding: 12,
margin: { bottom: 8, right: 8 }, margin: { bottom: 8, right: 8 },
...text(colorScheme.middle, "sans", "accent", { size: "xs" }), ...text(theme.middle, "sans", "accent", { size: "xs" }),
}, },
leaderBorderOpacity: 0.7, leader_border_opacity: 0.7,
leaderBorderWidth: 2.0, leader_border_width: 2.0,
tabBar: tabBar(colorScheme), tab_bar: tabBar(theme),
modal: { modal: {
margin: { margin: {
bottom: 52, bottom: 52,
@ -94,62 +93,62 @@ export default function workspace(colorScheme: ColorScheme): any {
}, },
cursor: "Arrow", cursor: "Arrow",
}, },
zoomedBackground: { zoomed_background: {
cursor: "Arrow", cursor: "Arrow",
background: is_light background: is_light
? with_opacity(background(colorScheme.lowest), 0.8) ? with_opacity(background(theme.lowest), 0.8)
: with_opacity(background(colorScheme.highest), 0.6), : with_opacity(background(theme.highest), 0.6),
}, },
zoomedPaneForeground: { zoomed_pane_foreground: {
margin: 16, margin: 16,
shadow: colorScheme.modal_shadow, shadow: theme.modal_shadow,
border: border(colorScheme.lowest, { overlay: true }), border: border(theme.lowest, { overlay: true }),
}, },
zoomedPanelForeground: { zoomed_panel_foreground: {
margin: 16, margin: 16,
border: border(colorScheme.lowest, { overlay: true }), border: border(theme.lowest, { overlay: true }),
}, },
dock: { dock: {
left: { left: {
border: border(layer, { right: true }), border: border(theme.lowest, { right: true }),
}, },
bottom: { bottom: {
border: border(layer, { top: true }), border: border(theme.lowest, { top: true }),
}, },
right: { right: {
border: border(layer, { left: true }), border: border(theme.lowest, { left: true }),
}, },
}, },
paneDivider: { pane_divider: {
color: border_color(layer), color: border_color(theme.lowest),
width: 1, width: 1,
}, },
statusBar: statusBar(colorScheme), status_bar: statusBar(theme),
titlebar: titlebar(colorScheme), titlebar: titlebar(theme),
toolbar: { toolbar: {
height: 34, height: 34,
background: background(colorScheme.highest), background: background(theme.highest),
border: border(colorScheme.highest, { bottom: true }), border: border(theme.highest, { bottom: true }),
itemSpacing: 8, item_spacing: 8,
navButton: interactive({ nav_button: interactive({
base: { base: {
color: foreground(colorScheme.highest, "on"), color: foreground(theme.highest, "on"),
icon_width: 12, icon_width: 12,
button_width: 24, button_width: 24,
corner_radius: 6, corner_radius: 6,
}, },
state: { state: {
hovered: { hovered: {
color: foreground(colorScheme.highest, "on", "hovered"), color: foreground(theme.highest, "on", "hovered"),
background: background( background: background(
colorScheme.highest, theme.highest,
"on", "on",
"hovered" "hovered"
), ),
}, },
disabled: { disabled: {
color: foreground( color: foreground(
colorScheme.highest, theme.highest,
"on", "on",
"disabled" "disabled"
), ),
@ -158,10 +157,10 @@ export default function workspace(colorScheme: ColorScheme): any {
}), }),
padding: { left: 8, right: 8, top: 4, bottom: 4 }, padding: { left: 8, right: 8, top: 4, bottom: 4 },
}, },
breadcrumbHeight: 24, breadcrumb_height: 24,
breadcrumbs: interactive({ breadcrumbs: interactive({
base: { base: {
...text(colorScheme.highest, "sans", "variant"), ...text(theme.highest, "sans", "variant"),
corner_radius: 6, corner_radius: 6,
padding: { padding: {
left: 6, left: 6,
@ -170,31 +169,31 @@ export default function workspace(colorScheme: ColorScheme): any {
}, },
state: { state: {
hovered: { hovered: {
color: foreground(colorScheme.highest, "on", "hovered"), color: foreground(theme.highest, "on", "hovered"),
background: background( background: background(
colorScheme.highest, theme.highest,
"on", "on",
"hovered" "hovered"
), ),
}, },
}, },
}), }),
disconnectedOverlay: { disconnected_overlay: {
...text(layer, "sans"), ...text(theme.lowest, "sans"),
background: with_opacity(background(layer), 0.8), background: with_opacity(background(theme.lowest), 0.8),
}, },
notification: { notification: {
margin: { top: 10 }, margin: { top: 10 },
background: background(colorScheme.middle), background: background(theme.middle),
corner_radius: 6, corner_radius: 6,
padding: 12, padding: 12,
border: border(colorScheme.middle), border: border(theme.middle),
shadow: colorScheme.popover_shadow, shadow: theme.popover_shadow,
}, },
notifications: { notifications: {
width: 400, width: 400,
margin: { right: 10, bottom: 10 }, 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),
} }
} }

18
styles/src/theme/tokens/color_scheme.ts
View file

@ -51,29 +51,29 @@ const modal_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken> type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken>
function syntaxHighlightStyleColorTokens( function syntax_highlight_style_color_tokens(
syntax: Syntax syntax: Syntax
): ThemeSyntaxColorTokens { ): ThemeSyntaxColorTokens {
const styleKeys = Object.keys(syntax) as (keyof Syntax)[] const style_keys = Object.keys(syntax) as (keyof Syntax)[]
return styleKeys.reduce((acc, styleKey) => { return style_keys.reduce((acc, style_key) => {
// Hack: The type of a style could be "Function" // Hack: The type of a style could be "Function"
// This can happen because we have a "constructor" property on the syntax object // This can happen because we have a "constructor" property on the syntax object
// and a "constructor" property on the prototype of the syntax object // and a "constructor" property on the prototype of the syntax object
// To work around this just assert that the type of the style is not a function // To work around this just assert that the type of the style is not a function
if (!syntax[styleKey] || typeof syntax[styleKey] === "function") if (!syntax[style_key] || typeof syntax[style_key] === "function")
return acc return acc
const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle> const { color } = syntax[style_key] as Required<SyntaxHighlightStyle>
return { ...acc, [styleKey]: colorToken(styleKey, color) } return { ...acc, [style_key]: colorToken(style_key, color) }
}, {} as ThemeSyntaxColorTokens) }, {} as ThemeSyntaxColorTokens)
} }
const syntax_Tokens = ( const syntax_tokens = (
theme: ColorScheme theme: ColorScheme
): ColorSchemeTokens["syntax"] => { ): ColorSchemeTokens["syntax"] => {
const syntax = editor(theme).syntax const syntax = editor(theme).syntax
return syntaxHighlightStyleColorTokens(syntax) return syntax_highlight_style_color_tokens(syntax)
} }
export function theme_tokens(theme: ColorScheme): ColorSchemeTokens { export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
@ -94,6 +94,6 @@ export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
popover_shadow: popover_shadow_token(theme), popover_shadow: popover_shadow_token(theme),
modal_shadow: modal_shadow_token(theme), modal_shadow: modal_shadow_token(theme),
players: playersToken(theme), players: playersToken(theme),
syntax: syntax_Tokens(theme), syntax: syntax_tokens(theme),
} }
} }

26
styles/src/theme/tokens/layer.ts
View file

@ -1,6 +1,6 @@
import { SingleColorToken } from "@tokens-studio/types" import { SingleColorToken } from "@tokens-studio/types"
import { Layer, Style, StyleSet } from "../color_scheme" import { Layer, Style, StyleSet } from "../color_scheme"
import { colorToken } from "./token" import { color_token } from "./token"
interface StyleToken { interface StyleToken {
background: SingleColorToken background: SingleColorToken
@ -27,36 +27,36 @@ export interface LayerToken {
negative: StyleSetToken negative: StyleSetToken
} }
export const styleToken = (style: Style, name: string): StyleToken => { export const style_token = (style: Style, name: string): StyleToken => {
const token = { const token = {
background: colorToken(`${name}Background`, style.background), background: color_token(`${name}Background`, style.background),
border: colorToken(`${name}Border`, style.border), border: color_token(`${name}Border`, style.border),
foreground: colorToken(`${name}Foreground`, style.foreground), foreground: color_token(`${name}Foreground`, style.foreground),
} }
return token return token
} }
export const styleSetToken = ( export const style_set_token = (
styleSet: StyleSet, style_set: StyleSet,
name: string name: string
): StyleSetToken => { ): StyleSetToken => {
const token: StyleSetToken = {} as StyleSetToken const token: StyleSetToken = {} as StyleSetToken
for (const style in styleSet) { for (const style in style_set) {
const s = style as keyof StyleSet const s = style as keyof StyleSet
token[s] = styleToken(styleSet[s], `${name}${style}`) token[s] = style_token(style_set[s], `${name}${style}`)
} }
return token return token
} }
export const layerToken = (layer: Layer, name: string): LayerToken => { export const layer_token = (layer: Layer, name: string): LayerToken => {
const token: LayerToken = {} as LayerToken const token: LayerToken = {} as LayerToken
for (const styleSet in layer) { for (const style_set in layer) {
const s = styleSet as keyof Layer const s = style_set as keyof Layer
token[s] = styleSetToken(layer[s], `${name}${styleSet}`) token[s] = style_set_token(layer[s], `${name}${style_set}`)
} }
return token return token

34
styles/src/theme/tokens/players.ts
View file

@ -1,36 +1,36 @@
import { SingleColorToken } from "@tokens-studio/types" import { SingleColorToken } from "@tokens-studio/types"
import { colorToken } from "./token" import { color_token } from "./token"
import { ColorScheme, Players } from "../color_scheme" import { ColorScheme, Players } from "../color_scheme"
export type PlayerToken = Record<"selection" | "cursor", SingleColorToken> export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
export type PlayersToken = Record<keyof Players, PlayerToken> export type PlayersToken = Record<keyof Players, PlayerToken>
function buildPlayerToken( function build_player_token(
colorScheme: ColorScheme, theme: ColorScheme,
index: number index: number
): PlayerToken { ): PlayerToken {
const playerNumber = index.toString() as keyof Players const player_number = index.toString() as keyof Players
return { return {
selection: colorToken( selection: color_token(
`player${index}Selection`, `player${index}Selection`,
colorScheme.players[playerNumber].selection theme.players[player_number].selection
), ),
cursor: colorToken( cursor: color_token(
`player${index}Cursor`, `player${index}Cursor`,
colorScheme.players[playerNumber].cursor theme.players[player_number].cursor
), ),
} }
} }
export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({ export const players_token = (theme: ColorScheme): PlayersToken => ({
"0": buildPlayerToken(colorScheme, 0), "0": build_player_token(theme, 0),
"1": buildPlayerToken(colorScheme, 1), "1": build_player_token(theme, 1),
"2": buildPlayerToken(colorScheme, 2), "2": build_player_token(theme, 2),
"3": buildPlayerToken(colorScheme, 3), "3": build_player_token(theme, 3),
"4": buildPlayerToken(colorScheme, 4), "4": build_player_token(theme, 4),
"5": buildPlayerToken(colorScheme, 5), "5": build_player_token(theme, 5),
"6": buildPlayerToken(colorScheme, 6), "6": build_player_token(theme, 6),
"7": buildPlayerToken(colorScheme, 7), "7": build_player_token(theme, 7),
}) })

2
styles/src/theme/tokens/token.ts
View file

@ -1,6 +1,6 @@
import { SingleColorToken, TokenTypes } from "@tokens-studio/types" import { SingleColorToken, TokenTypes } from "@tokens-studio/types"
export function colorToken( export function color_token(
name: string, name: string,
value: string, value: string,
description?: string description?: string

2
styles/src/themes/andromeda/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

2
styles/src/themes/atelier/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

2
styles/src/themes/ayu/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

6
styles/src/themes/ayu/common.ts
View file

@ -15,14 +15,14 @@ export const ayu = {
export const build_theme = (t: typeof dark, light: boolean) => { export const build_theme = (t: typeof dark, light: boolean) => {
const color = { const color = {
lightBlue: t.syntax.tag.hex(), light_blue: t.syntax.tag.hex(),
yellow: t.syntax.func.hex(), yellow: t.syntax.func.hex(),
blue: t.syntax.entity.hex(), blue: t.syntax.entity.hex(),
green: t.syntax.string.hex(), green: t.syntax.string.hex(),
teal: t.syntax.regexp.hex(), teal: t.syntax.regexp.hex(),
red: t.syntax.markup.hex(), red: t.syntax.markup.hex(),
orange: t.syntax.keyword.hex(), orange: t.syntax.keyword.hex(),
lightYellow: t.syntax.special.hex(), light_yellow: t.syntax.special.hex(),
gray: t.syntax.comment.hex(), gray: t.syntax.comment.hex(),
purple: t.syntax.constant.hex(), purple: t.syntax.constant.hex(),
} }
@ -55,7 +55,7 @@ export const build_theme = (t: typeof dark, light: boolean) => {
cyan: color_ramp(chroma(color.teal)), cyan: color_ramp(chroma(color.teal)),
blue: color_ramp(chroma(color.blue)), blue: color_ramp(chroma(color.blue)),
violet: color_ramp(chroma(color.purple)), violet: color_ramp(chroma(color.purple)),
magenta: color_ramp(chroma(color.lightBlue)), magenta: color_ramp(chroma(color.light_blue)),
}, },
syntax, syntax,
} }

2
styles/src/themes/gruvbox/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

2
styles/src/themes/one/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

2
styles/src/themes/rose-pine/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

2
styles/src/themes/sandcastle/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

2
styles/src/themes/solarized/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

2
styles/src/themes/summercamp/LICENSE
View file

@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.