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

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

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
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
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
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
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
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
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
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
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
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
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
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
SOFTWARE.
SOFTWARE.