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

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,
} }