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 1/?

Browse Source 
through `contact_notification`
This commit is contained in:
Nate Butler 2023-06-28 22:42:57 -04:00
parent 2e162f8af7
commit b015f506da
41 changed files with 302 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
styles/src/component/icon_button.ts
View File

@ -11,9 +11,9 @@ export type Margin = {
interface IconButtonOptions {
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
}

6
styles/src/component/text_button.ts
View File

@ -10,9 +10,9 @@ import { Margin } from "./icon_button"
interface TextButtonOptions {
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
text_properties?: TextProperties

40
styles/src/element/interactive.ts
View File

@ -43,55 +43,55 @@ export function interactive<T extends object>({
}: InteractiveProps<T>): Interactive<T> {
if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR)
let defaultState: T
let default_state: T
if (state.default && base) {
defaultState = merge(base, state.default) as T
default_state = merge(base, state.default) as T
} else {
defaultState = base ? base : (state.default as T)
default_state = base ? base : (state.default as T)
}
const interactiveObj: Interactive<T> = {
default: defaultState,
const interactive_obj: Interactive<T> = {
default: default_state,
}
let stateCount = 0
let state_count = 0
if (state.hovered !== undefined) {
interactiveObj.hovered = merge(
interactiveObj.default,
interactive_obj.hovered = merge(
interactive_obj.default,
state.hovered
) as T
stateCount++
state_count++
}
if (state.clicked !== undefined) {
interactiveObj.clicked = merge(
interactiveObj.default,
interactive_obj.clicked = merge(
interactive_obj.default,
state.clicked
) as T
stateCount++
state_count++
}
if (state.selected !== undefined) {
interactiveObj.selected = merge(
interactiveObj.default,
interactive_obj.selected = merge(
interactive_obj.default,
state.selected
) as T
stateCount++
state_count++
}
if (state.disabled !== undefined) {
interactiveObj.disabled = merge(
interactiveObj.default,
interactive_obj.disabled = merge(
interactive_obj.default,
state.disabled
) as T
stateCount++
state_count++
}
if (stateCount < 1) {
if (state_count < 1) {
throw new Error(NOT_ENOUGH_STATES_ERROR)
}
return interactiveObj
return interactive_obj
}

8
styles/src/element/toggle.ts
View File

@ -35,13 +35,13 @@ export function toggleable<T extends object>(
if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
if (!state.active) throw new Error(NO_ACTIVE_ERROR)
const inactiveState = base
const inactive_state = base
? ((state.inactive ? merge(base, state.inactive) : base) as T)
: (state.inactive as T)
const toggleObj: Toggleable<T> = {
inactive: inactiveState,
const toggle_obj: Toggleable<T> = {
inactive: inactive_state,
active: merge(base ?? {}, state.active) as T,
}
return toggleObj
return toggle_obj
}

44
styles/src/style_tree/assistant.ts
View File

@ -10,11 +10,11 @@ export default function assistant(colorScheme: ColorScheme): any {
background: editor(colorScheme).background,
padding: { left: 12 },
},
messageHeader: {
message_header: {
margin: { bottom: 6, top: 6 },
background: editor(colorScheme).background,
},
hamburgerButton: interactive({
hamburger_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
@ -36,7 +36,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
},
}),
splitButton: interactive({
split_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
@ -58,7 +58,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
},
}),
quoteButton: interactive({
quote_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
@ -80,7 +80,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
},
}),
assistButton: interactive({
assist_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
@ -102,7 +102,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
},
}),
zoomInButton: interactive({
zoom_in_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
@ -124,7 +124,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
},
}),
zoomOutButton: interactive({
zoom_out_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
@ -146,7 +146,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
},
}),
plusButton: interactive({
plus_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
@ -171,7 +171,7 @@ export default function assistant(colorScheme: ColorScheme): any {
title: {
...text(layer, "sans", "default", { size: "sm" }),
},
savedConversation: {
saved_conversation: {
container: interactive({
base: {
background: background(layer, "on"),
@ -195,7 +195,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}),
},
},
userSender: {
user_sender: {
default: {
...text(layer, "sans", "default", {
size: "sm",
@ -203,7 +203,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}),
},
},
assistantSender: {
assistant_sender: {
default: {
...text(layer, "sans", "accent", {
size: "sm",
@ -211,7 +211,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}),
},
},
systemSender: {
system_sender: {
default: {
...text(layer, "sans", "variant", {
size: "sm",
@ -219,7 +219,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}),
},
},
sentAt: {
sent_at: {
margin: { top: 2, left: 8 },
...text(layer, "sans", "default", { size: "2xs" }),
},
@ -228,7 +228,7 @@ export default function assistant(colorScheme: ColorScheme): any {
background: background(layer, "on"),
margin: { left: 12, right: 12, top: 12 },
padding: 4,
cornerRadius: 4,
corner_radius: 4,
...text(layer, "sans", "default", { size: "xs" }),
},
state: {
@ -238,28 +238,28 @@ export default function assistant(colorScheme: ColorScheme): any {
},
},
}),
remainingTokens: {
remaining_tokens: {
background: background(layer, "on"),
margin: { top: 12, right: 24 },
padding: 4,
cornerRadius: 4,
corner_radius: 4,
...text(layer, "sans", "positive", { size: "xs" }),
},
noRemainingTokens: {
no_remaining_tokens: {
background: background(layer, "on"),
margin: { top: 12, right: 24 },
padding: 4,
cornerRadius: 4,
corner_radius: 4,
...text(layer, "sans", "negative", { size: "xs" }),
},
errorIcon: {
error_icon: {
margin: { left: 8 },
color: foreground(layer, "negative"),
width: 12,
},
apiKeyEditor: {
api_key_editor: {
background: background(layer, "on"),
cornerRadius: 6,
corner_radius: 6,
text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", {
size: "xs",
@ -273,7 +273,7 @@ export default function assistant(colorScheme: ColorScheme): any {
top: 4,
},
},
apiKeyPrompt: {
api_key_prompt: {
padding: 10,
...text(layer, "sans", "default", { size: "xs" }),
},

4
styles/src/style_tree/command_palette.ts
View File

@ -9,7 +9,7 @@ export default function command_palette(colorScheme: ColorScheme): any {
const key = toggleable({
base: {
text: text(layer, "mono", "variant", "default", { size: "xs" }),
cornerRadius: 2,
corner_radius: 2,
background: background(layer, "on"),
padding: {
top: 1,
@ -32,7 +32,7 @@ export default function command_palette(colorScheme: ColorScheme): any {
})
return {
keystrokeSpacing: 8,
keystroke_spacing: 8,
// TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
key: {
inactive: { ...key.inactive },

130
styles/src/style_tree/components.ts
View File

@ -1,7 +1,11 @@
import { fontFamilies, fontSizes, FontWeight } from "../common"
import {
fontFamilies as font_families,
fontSizes as font_sizes,
FontWeight,
} from "../common"
import { Layer, Styles, StyleSets, Style } from "../theme/color_scheme"
function isStyleSet(key: any): key is StyleSets {
function is_style_set(key: any): key is StyleSets {
return [
"base",
"variant",
@ -13,7 +17,7 @@ function isStyleSet(key: any): key is StyleSets {
].includes(key)
}
function isStyle(key: any): key is Styles {
function is_style(key: any): key is Styles {
return [
"default",
"active",
@ -23,78 +27,70 @@ function isStyle(key: any): key is Styles {
"inverted",
].includes(key)
}
function getStyle(
function get_style(
layer: Layer,
possibleStyleSetOrStyle?: any,
possibleStyle?: any
possible_style_set_or_style?: any,
possible_style?: any
): Style {
let styleSet: StyleSets = "base"
let style_set: StyleSets = "base"
let style: Styles = "default"
if (isStyleSet(possibleStyleSetOrStyle)) {
styleSet = possibleStyleSetOrStyle
} else if (isStyle(possibleStyleSetOrStyle)) {
style = possibleStyleSetOrStyle
if (is_style_set(possible_style_set_or_style)) {
style_set = possible_style_set_or_style
} else if (is_style(possible_style_set_or_style)) {
style = possible_style_set_or_style
}
if (isStyle(possibleStyle)) {
style = possibleStyle
if (is_style(possible_style)) {
style = possible_style
}
return layer[styleSet][style]
return layer[style_set][style]
}
export function background(layer: Layer, style?: Styles): string
export function background(
layer: Layer,
styleSet?: StyleSets,
style_set?: StyleSets,
style?: Styles
): string
export function background(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style_set_or_styles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).background
return get_style(layer, style_set_or_styles, style).background
}
export function borderColor(layer: Layer, style?: Styles): string
export function borderColor(
export function border_color(layer: Layer, style?: Styles): string
export function border_color(
layer: Layer,
styleSet?: StyleSets,
style_set?: StyleSets,
style?: Styles
): string
export function borderColor(
export function border_color(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style_set_or_styles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).border
return get_style(layer, style_set_or_styles, style).border
}
export function foreground(layer: Layer, style?: Styles): string
export function foreground(
layer: Layer,
styleSet?: StyleSets,
style_set?: StyleSets,
style?: Styles
): string
export function foreground(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style_set_or_styles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).foreground
}
interface Text extends Object {
family: keyof typeof fontFamilies
color: string
size: number
weight?: FontWeight
underline?: boolean
return get_style(layer, style_set_or_styles, style).foreground
}
export interface TextStyle extends Object {
family: keyof typeof fontFamilies
family: keyof typeof font_families
color: string
size: number
weight?: FontWeight
@ -102,7 +98,7 @@ export interface TextStyle extends Object {
}
export interface TextProperties {
size?: keyof typeof fontSizes
size?: keyof typeof font_sizes
weight?: FontWeight
underline?: boolean
color?: string
@ -182,49 +178,53 @@ interface FontFeatures {
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
font_family: keyof typeof font_families,
style_set: StyleSets,
style: Styles,
properties?: TextProperties
): Text
): TextStyle
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
font_family: keyof typeof font_families,
style_set: StyleSets,
properties?: TextProperties
): Text
): TextStyle
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
font_family: keyof typeof font_families,
style: Styles,
properties?: TextProperties
): Text
): TextStyle
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
font_family: keyof typeof font_families,
properties?: TextProperties
): Text
): TextStyle
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
styleOrProperties?: Styles | TextProperties,
font_family: keyof typeof font_families,
style_set_style_or_properties?: StyleSets | Styles | TextProperties,
style_or_properties?: Styles | TextProperties,
properties?: TextProperties
) {
const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
const style = get_style(
layer,
style_set_style_or_properties,
style_or_properties
)
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties
if (typeof style_set_style_or_properties === "object") {
properties = style_set_style_or_properties
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties
if (typeof style_or_properties === "object") {
properties = style_or_properties
}
const size = fontSizes[properties?.size || "sm"]
const size = font_sizes[properties?.size || "sm"]
const color = properties?.color || style.foreground
return {
family: fontFamilies[fontFamily],
family: font_families[font_family],
...properties,
color,
size,
@ -252,13 +252,13 @@ export interface BorderProperties {
export function border(
layer: Layer,
styleSet: StyleSets,
style_set: StyleSets,
style: Styles,
properties?: BorderProperties
): Border
export function border(
layer: Layer,
styleSet: StyleSets,
style_set: StyleSets,
properties?: BorderProperties
): Border
export function border(
@ -269,17 +269,17 @@ export function border(
export function border(layer: Layer, properties?: BorderProperties): Border
export function border(
layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
styleOrProperties?: Styles | BorderProperties,
style_set_or_properties?: StyleSets | Styles | BorderProperties,
style_or_properties?: Styles | BorderProperties,
properties?: BorderProperties
): Border {
const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
const style = get_style(layer, style_set_or_properties, style_or_properties)
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties
if (typeof style_set_or_properties === "object") {
properties = style_set_or_properties
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties
if (typeof style_or_properties === "object") {
properties = style_or_properties
}
return {

56
styles/src/style_tree/contact_finder.ts
View File

@ -2,25 +2,25 @@ import picker from "./picker"
import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components"
export default function contact_finder(colorScheme: ColorScheme): any {
const layer = colorScheme.middle
export default function contact_finder(theme: ColorScheme): any {
const layer = theme.middle
const sideMargin = 6
const contactButton = {
const side_margin = 6
const contact_button = {
background: background(layer, "variant"),
color: foreground(layer, "variant"),
iconWidth: 8,
buttonWidth: 16,
cornerRadius: 8,
icon_width: 8,
button_width: 16,
corner_radius: 8,
}
const pickerStyle = picker(colorScheme)
const pickerInput = {
const picker_style = picker(theme)
const picker_input = {
background: background(layer, "on"),
cornerRadius: 6,
corner_radius: 6,
text: text(layer, "mono"),
placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
selection: colorScheme.players[0],
placeholder_text: text(layer, "mono", "on", "disabled", { size: "xs" }),
selection: theme.players[0],
border: border(layer),
padding: {
bottom: 4,
@ -29,40 +29,40 @@ export default function contact_finder(colorScheme: ColorScheme): any {
top: 4,
},
margin: {
left: sideMargin,
right: sideMargin,
left: side_margin,
right: side_margin,
},
}
return {
picker: {
emptyContainer: {},
empty_container: {},
item: {
...pickerStyle.item,
margin: { left: sideMargin, right: sideMargin },
...picker_style.item,
margin: { left: side_margin, right: side_margin },
},
noMatches: pickerStyle.noMatches,
inputEditor: pickerInput,
emptyInputEditor: pickerInput,
no_matches: picker_style.noMatches,
input_editor: picker_input,
empty_input_editor: picker_input,
},
rowHeight: 28,
contactAvatar: {
cornerRadius: 10,
row_height: 28,
contact_avatar: {
corner_radius: 10,
width: 18,
},
contactUsername: {
contact_username: {
padding: {
left: 8,
},
},
contactButton: {
...contactButton,
contact_button: {
...contact_button,
hover: {
background: background(layer, "variant", "hovered"),
},
},
disabledContactButton: {
...contactButton,
disabled_contact_button: {
...contact_button,
background: background(layer, "disabled"),
color: foreground(layer, "disabled"),
},

85
styles/src/style_tree/contact_list.ts
View File

@ -1,24 +1,30 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, borderColor, foreground, text } from "./components"
import {
background,
border,
border_color,
foreground,
text,
} from "./components"
import { interactive, toggleable } from "../element"
export default function contacts_panel(colorScheme: ColorScheme): any {
export default function contacts_panel(theme: ColorScheme): any {
const nameMargin = 8
const sidePadding = 12
const layer = colorScheme.middle
const layer = theme.middle
const contactButton = {
background: background(layer, "on"),
color: foreground(layer, "on"),
iconWidth: 8,
buttonWidth: 16,
cornerRadius: 8,
icon_width: 8,
button_width: 16,
corner_radius: 8,
}
const projectRow = {
guestAvatarSpacing: 4,
guest_avatar_spacing: 4,
height: 24,
guestAvatar: {
cornerRadius: 8,
guest_avatar: {
corner_radius: 8,
width: 14,
},
name: {
@ -43,14 +49,14 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
return {
background: background(layer),
padding: { top: 12 },
userQueryEditor: {
user_query_editor: {
background: background(layer, "on"),
cornerRadius: 6,
corner_radius: 6,
text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", {
placeholder_text: text(layer, "mono", "on", "disabled", {
size: "xs",
}),
selection: colorScheme.players[0],
selection: theme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
@ -62,16 +68,16 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
left: 6,
},
},
userQueryEditorHeight: 33,
addContactButton: {
user_query_editor_height: 33,
add_contact_button: {
margin: { left: 6, right: 12 },
color: foreground(layer, "on"),
buttonWidth: 28,
iconWidth: 16,
button_width: 28,
icon_width: 16,
},
rowHeight: 28,
sectionIconSize: 8,
headerRow: toggleable({
row_height: 28,
section_icon_size: 8,
header_row: toggleable({
base: interactive({
base: {
...text(layer, "mono", { size: "sm" }),
@ -106,11 +112,11 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
},
},
}),
leaveCall: interactive({
leave_call: interactive({
base: {
background: background(layer),
border: border(layer),
cornerRadius: 6,
corner_radius: 6,
margin: {
top: 1,
},
@ -130,7 +136,7 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
},
},
}),
contactRow: {
contact_row: {
inactive: {
default: {
padding: {
@ -149,31 +155,30 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
},
},
},
contactAvatar: {
cornerRadius: 10,
contact_avatar: {
corner_radius: 10,
width: 18,
},
contactStatusFree: {
cornerRadius: 4,
contact_status_free: {
corner_radius: 4,
padding: 4,
margin: { top: 12, left: 12 },
background: foreground(layer, "positive"),
},
contactStatusBusy: {
cornerRadius: 4,
contact_status_busy: {
corner_radius: 4,
padding: 4,
margin: { top: 12, left: 12 },
background: foreground(layer, "negative"),
},
contactUsername: {
contact_username: {
...text(layer, "mono", { size: "sm" }),
margin: {
left: nameMargin,
},
},
contactButtonSpacing: nameMargin,
contactButton: interactive({
contact_button_spacing: nameMargin,
contact_button: interactive({
base: { ...contactButton },
state: {
hovered: {
@ -181,35 +186,35 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
},
},
}),
disabledButton: {
disabled_button: {
...contactButton,
background: background(layer, "on"),
color: foreground(layer, "on"),
},
callingIndicator: {
calling_indicator: {
...text(layer, "mono", "variant", { size: "xs" }),
},
treeBranch: toggleable({
tree_branch: toggleable({
base: interactive({
base: {
color: borderColor(layer),
color: border_color(layer),
width: 1,
},
state: {
hovered: {
color: borderColor(layer),
color: border_color(layer),
},
},
}),
state: {
active: {
default: {
color: borderColor(layer),
color: border_color(layer),
},
},
},
}),
projectRow: toggleable({
project_row: toggleable({
base: interactive({
base: {
...projectRow,

35
styles/src/style_tree/contact_notification.ts
View File

@ -4,48 +4,47 @@ import { interactive } from "../element"
const avatarSize = 12
const headerPadding = 8
export default function contact_notification(colorScheme: ColorScheme): any {
const layer = colorScheme.lowest
export default function contact_notification(theme: ColorScheme): any {
return {
headerAvatar: {
header_avatar: {
height: avatarSize,
width: avatarSize,
cornerRadius: 6,
corner_radius: 6,
},
headerMessage: {
...text(layer, "sans", { size: "xs" }),
header_message: {
...text(theme.lowest, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding },
},
headerHeight: 18,
bodyMessage: {
...text(layer, "sans", { size: "xs" }),
header_height: 18,
body_message: {
...text(theme.lowest, "sans", { size: "xs" }),
margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
},
button: interactive({
base: {
...text(layer, "sans", "on", { size: "xs" }),
background: background(layer, "on"),
...text(theme.lowest, "sans", "on", { size: "xs" }),
background: background(theme.lowest, "on"),
padding: 4,
cornerRadius: 6,
corner_radius: 6,
margin: { left: 6 },
},
state: {
hovered: {
background: background(layer, "on", "hovered"),
background: background(theme.lowest, "on", "hovered"),
},
},
}),
dismissButton: {
dismiss_button: {
default: {
color: foreground(layer, "variant"),
iconWidth: 8,
color: foreground(theme.lowest, "variant"),
icon_width: 8,
iconHeight: 8,
buttonWidth: 8,
button_width: 8,
buttonHeight: 8,
hover: {
color: foreground(layer, "hovered"),
color: foreground(theme.lowest, "hovered"),
},
},
},

2
styles/src/style_tree/contacts_popover.ts
View File

@ -5,7 +5,7 @@ export default function contacts_popover(colorScheme: ColorScheme): any {
const layer = colorScheme.middle
return {
background: background(layer),
cornerRadius: 6,
corner_radius: 6,
padding: { top: 6, bottom: 6 },
shadow: colorScheme.popoverShadow,
border: border(layer),

10
styles/src/style_tree/context_menu.ts
View File

@ -1,12 +1,12 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, borderColor, text } from "./components"
import { background, border, border_color, text } from "./components"
import { interactive, toggleable } from "../element"
export default function context_menu(colorScheme: ColorScheme): any {
const layer = colorScheme.middle
return {
background: background(layer),
cornerRadius: 10,
corner_radius: 10,
padding: 4,
shadow: colorScheme.popoverShadow,
border: border(layer),
@ -15,9 +15,9 @@ export default function context_menu(colorScheme: ColorScheme): any {
base: interactive({
base: {
iconSpacing: 8,
iconWidth: 14,
icon_width: 14,
padding: { left: 6, right: 6, top: 2, bottom: 2 },
cornerRadius: 6,
corner_radius: 6,
label: text(layer, "sans", { size: "sm" }),
keystroke: {
...text(layer, "sans", "variant", {
@ -60,7 +60,7 @@ export default function context_menu(colorScheme: ColorScheme): any {
}),
separator: {
background: borderColor(layer),
background: border_color(layer),
margin: { top: 2, bottom: 2 },
},
}

8
styles/src/style_tree/copilot.ts
View File

@ -12,7 +12,7 @@ export default function copilot(colorScheme: ColorScheme): any {
base: {
background: background(layer),
border: border(layer, "default"),
cornerRadius: 4,
corner_radius: 4,
margin: {
top: 4,
bottom: 4,
@ -46,7 +46,7 @@ export default function copilot(colorScheme: ColorScheme): any {
12
),
container: {
cornerRadius: 6,
corner_radius: 6,
padding: { left: 6 },
},
},
@ -93,7 +93,7 @@ export default function copilot(colorScheme: ColorScheme): any {
8
),
container: {
cornerRadius: 2,
corner_radius: 2,
padding: {
top: 4,
bottom: 4,
@ -246,7 +246,7 @@ export default function copilot(colorScheme: ColorScheme): any {
}),
border: border(layer, "warning"),
background: background(layer, "warning"),
cornerRadius: 2,
corner_radius: 2,
padding: {
top: 4,
left: 4,

28
styles/src/style_tree/editor.ts
View File

@ -1,6 +1,12 @@
import { withOpacity } from "../theme/color"
import { ColorScheme, Layer, StyleSets } from "../theme/color_scheme"
import { background, border, borderColor, foreground, text } from "./components"
import {
background,
border,
border_color,
foreground,
text,
} from "./components"
import hoverPopover from "./hover_popover"
import { buildSyntax } from "../theme/syntax"
@ -12,7 +18,7 @@ export default function editor(colorScheme: ColorScheme): any {
const layer = colorScheme.highest
const autocompleteItem = {
cornerRadius: 6,
corner_radius: 6,
padding: {
bottom: 2,
left: 6,
@ -111,7 +117,7 @@ export default function editor(colorScheme: ColorScheme): any {
}),
ellipses: {
textColor: colorScheme.ramps.neutral(0.71).hex(),
cornerRadiusFactor: 0.15,
corner_radiusFactor: 0.15,
background: {
// Copied from hover_popover highlight
default: {
@ -141,7 +147,7 @@ export default function editor(colorScheme: ColorScheme): any {
: colorScheme.ramps.green(0.5).hex(),
removedWidthEm: 0.275,
widthEm: 0.15,
cornerRadius: 0.05,
corner_radius: 0.05,
},
/** Highlights matching occurrences of what is under the cursor
* as well as matched brackets
@ -174,7 +180,7 @@ export default function editor(colorScheme: ColorScheme): any {
],
autocomplete: {
background: background(colorScheme.middle),
cornerRadius: 8,
corner_radius: 8,
padding: 4,
margin: {
left: -14,
@ -204,7 +210,7 @@ export default function editor(colorScheme: ColorScheme): any {
},
diagnosticHeader: {
background: background(colorScheme.middle),
iconWidthFactor: 1.5,
icon_widthFactor: 1.5,
textScaleFactor: 0.857,
border: border(colorScheme.middle, {
bottom: true,
@ -257,9 +263,9 @@ export default function editor(colorScheme: ColorScheme): any {
jumpIcon: interactive({
base: {
color: foreground(layer, "on"),
iconWidth: 20,
buttonWidth: 20,
cornerRadius: 6,
icon_width: 20,
button_width: 20,
corner_radius: 6,
padding: {
top: 6,
bottom: 6,
@ -284,7 +290,7 @@ export default function editor(colorScheme: ColorScheme): any {
background: withOpacity(background(layer, "inverted"), 0.3),
border: {
width: 1,
color: borderColor(layer, "variant"),
color: border_color(layer, "variant"),
top: false,
right: true,
left: true,
@ -306,7 +312,7 @@ export default function editor(colorScheme: ColorScheme): any {
compositionMark: {
underline: {
thickness: 1.0,
color: borderColor(layer),
color: border_color(layer),
},
},
syntax,

2
styles/src/style_tree/feedback.ts
View File

@ -10,7 +10,7 @@ export default function feedback(colorScheme: ColorScheme): any {
base: {
...text(layer, "mono", "on"),
background: background(layer, "on"),
cornerRadius: 6,
corner_radius: 6,
border: border(layer, "on"),
margin: {
right: 4,

2
styles/src/style_tree/hover_popover.ts
View File

@ -5,7 +5,7 @@ export default function hover_popover(colorScheme: ColorScheme): any {
const layer = colorScheme.middle
const baseContainer = {
background: background(layer),
cornerRadius: 8,
corner_radius: 8,
padding: {
left: 8,
right: 8,

4
styles/src/style_tree/incoming_call_notification.ts
View File

@ -16,7 +16,7 @@ export default function incoming_call_notification(
callerAvatar: {
height: avatarSize,
width: avatarSize,
cornerRadius: avatarSize / 2,
corner_radius: avatarSize / 2,
},
callerMetadata: {
margin: { left: 10 },
@ -33,7 +33,7 @@ export default function incoming_call_notification(
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 },
},
buttonWidth: 96,
button_width: 96,
acceptButton: {
background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true }),

4
styles/src/style_tree/picker.ts
View File

@ -9,7 +9,7 @@ export default function picker(colorScheme: ColorScheme): any {
background: background(layer),
border: border(layer),
shadow: colorScheme.modalShadow,
cornerRadius: 12,
corner_radius: 12,
padding: {
bottom: 4,
},
@ -53,7 +53,7 @@ export default function picker(colorScheme: ColorScheme): any {
left: 4,
right: 4,
},
cornerRadius: 8,
corner_radius: 8,
text: text(layer, "sans", "variant"),
highlightText: text(layer, "sans", "accent", {
weight: "bold",

2
styles/src/style_tree/project_diagnostics.ts
View File

@ -6,7 +6,7 @@ export default function project_diagnostics(colorScheme: ColorScheme): any {
return {
background: background(layer),
tabIconSpacing: 4,
tabIconWidth: 13,
tab_icon_width: 13,
tabSummarySpacing: 10,
emptyMessage: text(layer, "sans", "variant", { size: "md" }),
}

2
styles/src/style_tree/project_panel.ts
View File

@ -117,7 +117,7 @@ export default function project_panel(theme: ColorScheme): any {
base: {
background: background(layer),
border: border(layer, "active"),
cornerRadius: 4,
corner_radius: 4,
margin: {
top: 16,
left: 16,

4
styles/src/style_tree/project_shared_notification.ts
View File

@ -17,7 +17,7 @@ export default function project_shared_notification(
ownerAvatar: {
height: avatarSize,
width: avatarSize,
cornerRadius: avatarSize / 2,
corner_radius: avatarSize / 2,
},
ownerMetadata: {
margin: { left: 10 },
@ -34,7 +34,7 @@ export default function project_shared_notification(
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 },
},
buttonWidth: 96,
button_width: 96,
openButton: {
background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true }),

8
styles/src/style_tree/search.ts
View File

@ -9,7 +9,7 @@ export default function search(colorScheme: ColorScheme): any {
// Search input
const editor = {
background: background(layer),
cornerRadius: 8,
corner_radius: 8,
minWidth: 200,
maxWidth: 500,
placeholderText: text(layer, "mono", "disabled"),
@ -41,7 +41,7 @@ export default function search(colorScheme: ColorScheme): any {
base: {
...text(layer, "mono", "on"),
background: background(layer, "on"),
cornerRadius: 6,
corner_radius: 6,
border: border(layer, "on"),
margin: {
right: 4,
@ -115,8 +115,8 @@ export default function search(colorScheme: ColorScheme): any {
dismissButton: interactive({
base: {
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: 14,
icon_width: 12,
button_width: 14,
padding: {
left: 10,
right: 10,

5
styles/src/style_tree/shared_screen.ts
View File

@ -1,10 +1,7 @@
import { ColorScheme } from "../theme/color_scheme"
import { StyleTree } from "../types"
import { background } from "./components"
export default function sharedScreen(
colorScheme: ColorScheme
): StyleTree.SharedScreen {
export default function sharedScreen(colorScheme: ColorScheme) {
const layer = colorScheme.highest
return {
background: background(layer),

6
styles/src/style_tree/simple_message_notification.ts
View File

@ -17,7 +17,7 @@ export default function simple_message_notification(
base: {
...text(layer, "sans", { size: "xs" }),
border: border(layer, "active"),
cornerRadius: 4,
corner_radius: 4,
padding: {
top: 3,
bottom: 3,
@ -38,9 +38,9 @@ export default function simple_message_notification(
dismissButton: interactive({
base: {
color: foreground(layer),
iconWidth: 8,
icon_width: 8,
iconHeight: 8,
buttonWidth: 8,
button_width: 8,
buttonHeight: 8,
},
state: {

12
styles/src/style_tree/status_bar.ts
View File

@ -5,12 +5,12 @@ export default function status_bar(colorScheme: ColorScheme): any {
const layer = colorScheme.lowest
const statusContainer = {
cornerRadius: 6,
corner_radius: 6,
padding: { top: 3, bottom: 3, left: 6, right: 6 },
}
const diagnosticStatusContainer = {
cornerRadius: 6,
corner_radius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 },
}
@ -42,7 +42,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
base: {
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
icon_width: 14,
height: 18,
message: text(layer, "sans"),
iconColor: foreground(layer),
@ -64,7 +64,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
diagnosticSummary: interactive({
base: {
height: 20,
iconWidth: 16,
icon_width: 16,
iconSpacing: 2,
summarySpacing: 6,
text: text(layer, "sans", { size: "sm" }),
@ -72,7 +72,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
iconColorWarning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"),
containerOk: {
cornerRadius: 6,
corner_radius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
},
containerWarning: {
@ -143,7 +143,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
},
}),
badge: {
cornerRadius: 3,
corner_radius: 3,
padding: 2,
margin: { bottom: -1, right: -1 },
border: border(layer),

8
styles/src/style_tree/tab_bar.ts
View File

@ -25,10 +25,10 @@ export default function tab_bar(colorScheme: ColorScheme): any {
spacing: 8,
// Tab type icons (e.g. Project Search)
typeIconWidth: 14,
type_icon_width: 14,
// Close icons
closeIconWidth: 8,
close_icon_width: 8,
iconClose: foreground(layer, "variant"),
iconCloseActive: foreground(layer, "hovered"),
@ -92,8 +92,8 @@ export default function tab_bar(colorScheme: ColorScheme): any {
base: interactive({
base: {
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: activePaneActiveTab.height,
icon_width: 12,
button_width: activePaneActiveTab.height,
},
state: {
hovered: {

3
styles/src/style_tree/terminal.ts
View File

@ -1,7 +1,6 @@
import { ColorScheme } from "../theme/color_scheme"
import { StyleTree } from "../types"
export default function terminal(theme: ColorScheme): StyleTree.TerminalStyle {
export default function terminal(theme: ColorScheme) {
/**
* Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors

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

@ -78,7 +78,7 @@ function user_menu(theme: ColorScheme) {
const button = toggleable({
base: interactive({
base: {
cornerRadius: 6,
corner_radius: 6,
height: button_height,
width: online ? 37 : 24,
padding: {
@ -180,13 +180,13 @@ export function titlebar(theme: ColorScheme): any {
leaderAvatar: {
width: avatarWidth,
outerWidth: avatarOuterWidth,
cornerRadius: avatarWidth / 2,
corner_radius: avatarWidth / 2,
outerCornerRadius: avatarOuterWidth / 2,
},
followerAvatar: {
width: followerAvatarWidth,
outerWidth: followerAvatarOuterWidth,
cornerRadius: followerAvatarWidth / 2,
corner_radius: followerAvatarWidth / 2,
outerCornerRadius: followerAvatarOuterWidth / 2,
},
inactiveAvatarGrayscale: true,
@ -202,7 +202,7 @@ export function titlebar(theme: ColorScheme): any {
top: 2,
bottom: 2,
},
cornerRadius: 6,
corner_radius: 6,
},
avatarRibbon: {
height: 3,
@ -234,7 +234,7 @@ export function titlebar(theme: ColorScheme): any {
left: 8,
right: 8,
},
cornerRadius: 6,
corner_radius: 6,
},
leave_call_button: icon_button(theme, {
@ -254,7 +254,7 @@ export function titlebar(theme: ColorScheme): any {
// Jewel that notifies you that there are new contact requests
toggleContactsBadge: {
cornerRadius: 3,
corner_radius: 3,
padding: 2,
margin: { top: 3, left: 3 },
border: border(theme.lowest),

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

@ -18,7 +18,7 @@ export default function dropdown_menu(colorScheme: ColorScheme): any {
}),
secondaryTextSpacing: 10,
padding: { left: 8, right: 8, top: 2, bottom: 2 },
cornerRadius: 6,
corner_radius: 6,
background: background(layer, "on"),
},
state: {

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

@ -9,11 +9,11 @@ export default function tooltip(colorScheme: ColorScheme): any {
padding: { top: 4, bottom: 4, left: 8, right: 8 },
margin: { top: 6, left: 6 },
shadow: colorScheme.popoverShadow,
cornerRadius: 6,
corner_radius: 6,
text: text(layer, "sans", { size: "xs" }),
keystroke: {
background: background(layer, "on"),
cornerRadius: 4,
corner_radius: 4,
margin: { left: 6 },
padding: { left: 4, right: 4 },
...text(layer, "mono", "on", { size: "xs", weight: "bold" }),

4
styles/src/style_tree/update_notification.ts
View File

@ -25,9 +25,9 @@ export default function update_notification(colorScheme: ColorScheme): any {
dismissButton: interactive({
base: {
color: foreground(layer),
iconWidth: 8,
icon_width: 8,
iconHeight: 8,
buttonWidth: 8,
button_width: 8,
buttonHeight: 8,
},
state: {

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

@ -14,7 +14,7 @@ export default function welcome(colorScheme: ColorScheme): any {
const layer = colorScheme.highest
const checkboxBase = {
cornerRadius: 4,
corner_radius: 4,
padding: {
left: 3,
right: 3,
@ -57,7 +57,7 @@ export default function welcome(colorScheme: ColorScheme): any {
checkboxGroup: {
border: border(layer, "variant"),
background: withOpacity(background(layer, "hovered"), 0.25),
cornerRadius: 4,
corner_radius: 4,
padding: {
left: 12,
top: 2,
@ -68,7 +68,7 @@ export default function welcome(colorScheme: ColorScheme): any {
base: {
background: background(layer),
border: border(layer, "active"),
cornerRadius: 4,
corner_radius: 4,
margin: {
top: 4,
bottom: 4,

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

@ -3,7 +3,7 @@ import { withOpacity } from "../theme/color"
import {
background,
border,
borderColor,
border_color,
foreground,
svg,
text,
@ -46,7 +46,7 @@ export default function workspace(colorScheme: ColorScheme): any {
margin: {
top: 96,
},
cornerRadius: 4,
corner_radius: 4,
},
keyboardHint: interactive({
base: {
@ -57,7 +57,7 @@ export default function workspace(colorScheme: ColorScheme): any {
right: 8,
bottom: 3,
},
cornerRadius: 8,
corner_radius: 8,
},
state: {
hovered: {
@ -69,7 +69,7 @@ export default function workspace(colorScheme: ColorScheme): any {
keyboardHintWidth: 320,
},
joiningProjectAvatar: {
cornerRadius: 40,
corner_radius: 40,
width: 80,
},
joiningProjectMessage: {
@ -79,7 +79,7 @@ export default function workspace(colorScheme: ColorScheme): any {
externalLocationMessage: {
background: background(colorScheme.middle, "accent"),
border: border(colorScheme.middle, "accent"),
cornerRadius: 6,
corner_radius: 6,
padding: 12,
margin: { bottom: 8, right: 8 },
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
@ -121,7 +121,7 @@ export default function workspace(colorScheme: ColorScheme): any {
},
},
paneDivider: {
color: borderColor(layer),
color: border_color(layer),
width: 1,
},
statusBar: statusBar(colorScheme),
@ -134,9 +134,9 @@ export default function workspace(colorScheme: ColorScheme): any {
navButton: interactive({
base: {
color: foreground(colorScheme.highest, "on"),
iconWidth: 12,
buttonWidth: 24,
cornerRadius: 6,
icon_width: 12,
button_width: 24,
corner_radius: 6,
},
state: {
hovered: {
@ -162,7 +162,7 @@ export default function workspace(colorScheme: ColorScheme): any {
breadcrumbs: interactive({
base: {
...text(colorScheme.highest, "sans", "variant"),
cornerRadius: 6,
corner_radius: 6,
padding: {
left: 6,
right: 6,
@ -186,7 +186,7 @@ export default function workspace(colorScheme: ColorScheme): any {
notification: {
margin: { top: 10 },
background: background(colorScheme.middle),
cornerRadius: 6,
corner_radius: 6,
padding: 12,
border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow,

6
styles/src/theme/color_scheme.ts
View File

@ -252,11 +252,7 @@ function buildStyleSet(
}
}
function buildStyleDefinition(
bgBase: number,
fgBase: number,
step = 0.08
) {
function buildStyleDefinition(bgBase: number, fgBase: number, step = 0.08) {
return {
background: {
default: bgBase,

4
styles/src/types/element.ts
View File

@ -1,4 +0,0 @@
import { Clean } from "./util"
import * as zed from "./zed"
export type Text = Clean<zed.TextStyle>

5
styles/src/types/index.ts
View File

@ -1,5 +0,0 @@
import * as StyleTree from "./styleTree"
import * as Property from "./property"
import * as Element from "./element"
export { StyleTree, Property, Element }

9
styles/src/types/property.ts
View File

@ -1,9 +0,0 @@
import { Clean } from "./util"
import * as zed from "./zed"
export type Color = zed.Color
export type CursorStyle = zed.CursorStyle
export type FontStyle = zed.Style
export type Border = Clean<zed.Border>
export type Margin = Clean<zed.Margin>
export type Padding = Clean<zed.Padding>

33
styles/src/types/style_tree.ts
View File

@ -1,33 +0,0 @@
import { Clean } from "./util"
import * as zed from "./zed"
export type AssistantStyle = Readonly<Clean<zed.AssistantStyle>>
export type CommandPalette = Readonly<Clean<zed.CommandPalette>>
export type ContactFinder = Readonly<Clean<zed.ContactFinder>>
export type ContactList = Readonly<Clean<zed.ContactList>>
export type ContactNotification = Readonly<Clean<zed.ContactNotification>>
export type ContactsPopover = Readonly<Clean<zed.ContactsPopover>>
export type ContextMenu = Readonly<Clean<zed.ContextMenu>>
export type Copilot = Readonly<Clean<zed.Copilot>>
export type Editor = Readonly<Clean<zed.Editor>>
export type FeedbackStyle = Readonly<Clean<zed.FeedbackStyle>>
export type IncomingCallNotification = Readonly<
Clean<zed.IncomingCallNotification>
>
export type ThemeMeta = Readonly<Clean<zed.ThemeMeta>>
export type Picker = Readonly<Clean<zed.Picker>>
export type ProjectDiagnostics = Readonly<Clean<zed.ProjectDiagnostics>>
export type ProjectPanel = Readonly<Clean<zed.ProjectPanel>>
export type ProjectSharedNotification = Readonly<
Clean<zed.ProjectSharedNotification>
>
export type Search = Readonly<Clean<zed.Search>>
export type SharedScreen = Readonly<Clean<zed.ContainerStyle>>
export type MessageNotification = Readonly<Clean<zed.MessageNotification>>
export type TerminalStyle = Readonly<Clean<zed.TerminalStyle>>
export type UserMenu = Readonly<Clean<zed.UserMenu>>
export type DropdownMenu = Readonly<Clean<zed.DropdownMenu>>
export type TooltipStyle = Readonly<Clean<zed.TooltipStyle>>
export type UpdateNotification = Readonly<Clean<zed.UpdateNotification>>
export type WelcomeStyle = Readonly<Clean<zed.WelcomeStyle>>
export type Workspace = Readonly<Clean<zed.Workspace>>

17
styles/src/types/util.ts
View File

@ -1,17 +0,0 @@
export type Prettify<T> = {
[K in keyof T]: T[K]
} & unknown
/**
* Clean removes the [k: string]: unknown property from an object,
* and Prettifies it, providing better hover information for the type
*/
export type Clean<T> = {
[K in keyof T as string extends K ? never : K]: T[K]
}
export type DeepClean<T> = {
[K in keyof T as string extends K ? never : K]: T[K] extends object
? DeepClean<T[K]>
: T[K]
}

4
styles/src/utils/snake_case.ts
View File

@ -5,8 +5,8 @@ import { snakeCase } from "case-anything"
// Typescript magic to convert any string from camelCase to snake_case at compile time
type SnakeCase<S> = S extends string
? S extends `${infer T}${infer U}`
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S
: S
type SnakeCased<Type> = {

36
styles/tsconfig.json
View File

@ -24,33 +24,15 @@
"useUnknownInCatchVariables": false,
"baseUrl": ".",
"paths": {
"@/*": [
"./*"
],
"@element/*": [
"./src/element/*"
],
"@component/*": [
"./src/component/*"
],
"@styleTree/*": [
"./src/styleTree/*"
],
"@theme/*": [
"./src/theme/*"
],
"@types/*": [
"./src/util/*"
],
"@themes/*": [
"./src/themes/*"
],
"@util/*": [
"./src/util/*"
]
"@/*": ["./*"],
"@element/*": ["./src/element/*"],
"@component/*": ["./src/component/*"],
"@styleTree/*": ["./src/styleTree/*"],
"@theme/*": ["./src/theme/*"],
"@types/*": ["./src/util/*"],
"@themes/*": ["./src/themes/*"],
"@util/*": ["./src/util/*"]
}
},
"exclude": [
"node_modules"
]
"exclude": ["node_modules"]
}