zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-07 20:39:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats 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" }),
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"),

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"),
lsp_status: interactive({
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 { 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,

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

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

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

@ -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"),
},
},
},

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

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

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 { 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"),
},
},
}),

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

@ -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"),
},
},
}

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

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

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>
function syntaxHighlightStyleColorTokens(
function syntax_highlight_style_color_tokens(
syntax: Syntax
): 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"
// This can happen because we have a "constructor" property on 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
if (!syntax[styleKey] || typeof syntax[styleKey] === "function")
if (!syntax[style_key] || typeof syntax[style_key] === "function")
return acc
const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>
return { ...acc, [styleKey]: colorToken(styleKey, color) }
const { color } = syntax[style_key] as Required<SyntaxHighlightStyle>
return { ...acc, [style_key]: colorToken(style_key, color) }
}, {} as ThemeSyntaxColorTokens)
}
const syntax_Tokens = (
const syntax_tokens = (
theme: ColorScheme
): ColorSchemeTokens["syntax"] => {
const syntax = editor(theme).syntax
return syntaxHighlightStyleColorTokens(syntax)
return syntax_highlight_style_color_tokens(syntax)
}
export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
@ -94,6 +94,6 @@ export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
popover_shadow: popover_shadow_token(theme),
modal_shadow: modal_shadow_token(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 { Layer, Style, StyleSet } from "../color_scheme"
import { colorToken } from "./token"
import { color_token } from "./token"
interface StyleToken {
background: SingleColorToken
@ -27,36 +27,36 @@ export interface LayerToken {
negative: StyleSetToken
}
export const styleToken = (style: Style, name: string): StyleToken => {
export const style_token = (style: Style, name: string): StyleToken => {
const token = {
background: colorToken(`${name}Background`, style.background),
border: colorToken(`${name}Border`, style.border),
foreground: colorToken(`${name}Foreground`, style.foreground),
background: color_token(`${name}Background`, style.background),
border: color_token(`${name}Border`, style.border),
foreground: color_token(`${name}Foreground`, style.foreground),
}
return token
}
export const styleSetToken = (
styleSet: StyleSet,
export const style_set_token = (
style_set: StyleSet,
name: string
): StyleSetToken => {
const token: StyleSetToken = {} as StyleSetToken
for (const style in styleSet) {
for (const style in style_set) {
const s = style as keyof StyleSet
token[s] = styleToken(styleSet[s], `${name}${style}`)
token[s] = style_token(style_set[s], `${name}${style}`)
}
return token
}
export const layerToken = (layer: Layer, name: string): LayerToken => {
export const layer_token = (layer: Layer, name: string): LayerToken => {
const token: LayerToken = {} as LayerToken
for (const styleSet in layer) {
const s = styleSet as keyof Layer
token[s] = styleSetToken(layer[s], `${name}${styleSet}`)
for (const style_set in layer) {
const s = style_set as keyof Layer
token[s] = style_set_token(layer[s], `${name}${style_set}`)
}
return token

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

@ -1,36 +1,36 @@
import { SingleColorToken } from "@tokens-studio/types"
import { colorToken } from "./token"
import { color_token } from "./token"
import { ColorScheme, Players } from "../color_scheme"
export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
export type PlayersToken = Record<keyof Players, PlayerToken>
function buildPlayerToken(
colorScheme: ColorScheme,
function build_player_token(
theme: ColorScheme,
index: number
): PlayerToken {
const playerNumber = index.toString() as keyof Players
const player_number = index.toString() as keyof Players
return {
selection: colorToken(
selection: color_token(
`player${index}Selection`,
colorScheme.players[playerNumber].selection
theme.players[player_number].selection
),
cursor: colorToken(
cursor: color_token(
`player${index}Cursor`,
colorScheme.players[playerNumber].cursor
theme.players[player_number].cursor
),
}
}
export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({
"0": buildPlayerToken(colorScheme, 0),
"1": buildPlayerToken(colorScheme, 1),
"2": buildPlayerToken(colorScheme, 2),
"3": buildPlayerToken(colorScheme, 3),
"4": buildPlayerToken(colorScheme, 4),
"5": buildPlayerToken(colorScheme, 5),
"6": buildPlayerToken(colorScheme, 6),
"7": buildPlayerToken(colorScheme, 7),
export const players_token = (theme: ColorScheme): PlayersToken => ({
"0": build_player_token(theme, 0),
"1": build_player_token(theme, 1),
"2": build_player_token(theme, 2),
"3": build_player_token(theme, 3),
"4": build_player_token(theme, 4),
"5": build_player_token(theme, 5),
"6": build_player_token(theme, 6),
"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"
export function colorToken(
export function color_token(
name: string,
value: 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) => {
const color = {
lightBlue: t.syntax.tag.hex(),
light_blue: t.syntax.tag.hex(),
yellow: t.syntax.func.hex(),
blue: t.syntax.entity.hex(),
green: t.syntax.string.hex(),
teal: t.syntax.regexp.hex(),
red: t.syntax.markup.hex(),
orange: t.syntax.keyword.hex(),
lightYellow: t.syntax.special.hex(),
light_yellow: t.syntax.special.hex(),
gray: t.syntax.comment.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)),
blue: color_ramp(chroma(color.blue)),
violet: color_ramp(chroma(color.purple)),
magenta: color_ramp(chroma(color.lightBlue)),
magenta: color_ramp(chroma(color.light_blue)),
},
syntax,
}