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