Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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 { interface IconButtonOptions {
layer?: layer?:
| ColorScheme["lowest"] | ColorScheme["lowest"]
| ColorScheme["middle"] | ColorScheme["middle"]
| ColorScheme["highest"] | ColorScheme["highest"]
color?: keyof ColorScheme["lowest"] color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin> margin?: Partial<Margin>
} }

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

@ -10,9 +10,9 @@ import { Margin } from "./icon_button"
interface TextButtonOptions { interface TextButtonOptions {
layer?: layer?:
| ColorScheme["lowest"] | ColorScheme["lowest"]
| ColorScheme["middle"] | ColorScheme["middle"]
| ColorScheme["highest"] | ColorScheme["highest"]
color?: keyof ColorScheme["lowest"] color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin> margin?: Partial<Margin>
text_properties?: TextProperties 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> { }: InteractiveProps<T>): Interactive<T> {
if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR) if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR)
let defaultState: T let default_state: T
if (state.default && base) { if (state.default && base) {
defaultState = merge(base, state.default) as T default_state = merge(base, state.default) as T
} else { } else {
defaultState = base ? base : (state.default as T) default_state = base ? base : (state.default as T)
} }
const interactiveObj: Interactive<T> = { const interactive_obj: Interactive<T> = {
default: defaultState, default: default_state,
} }
let stateCount = 0 let state_count = 0
if (state.hovered !== undefined) { if (state.hovered !== undefined) {
interactiveObj.hovered = merge( interactive_obj.hovered = merge(
interactiveObj.default, interactive_obj.default,
state.hovered state.hovered
) as T ) as T
stateCount++ state_count++
} }
if (state.clicked !== undefined) { if (state.clicked !== undefined) {
interactiveObj.clicked = merge( interactive_obj.clicked = merge(
interactiveObj.default, interactive_obj.default,
state.clicked state.clicked
) as T ) as T
stateCount++ state_count++
} }
if (state.selected !== undefined) { if (state.selected !== undefined) {
interactiveObj.selected = merge( interactive_obj.selected = merge(
interactiveObj.default, interactive_obj.default,
state.selected state.selected
) as T ) as T
stateCount++ state_count++
} }
if (state.disabled !== undefined) { if (state.disabled !== undefined) {
interactiveObj.disabled = merge( interactive_obj.disabled = merge(
interactiveObj.default, interactive_obj.default,
state.disabled state.disabled
) as T ) as T
stateCount++ state_count++
} }
if (stateCount < 1) { if (state_count < 1) {
throw new Error(NOT_ENOUGH_STATES_ERROR) 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 (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
if (!state.active) throw new Error(NO_ACTIVE_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 ? merge(base, state.inactive) : base) as T)
: (state.inactive as T) : (state.inactive as T)
const toggleObj: Toggleable<T> = { const toggle_obj: Toggleable<T> = {
inactive: inactiveState, inactive: inactive_state,
active: merge(base ?? {}, state.active) as T, 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, background: editor(colorScheme).background,
padding: { left: 12 }, padding: { left: 12 },
}, },
messageHeader: { message_header: {
margin: { bottom: 6, top: 6 }, margin: { bottom: 6, top: 6 },
background: editor(colorScheme).background, background: editor(colorScheme).background,
}, },
hamburgerButton: interactive({ hamburger_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
@ -36,7 +36,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
splitButton: interactive({ split_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
@ -58,7 +58,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
quoteButton: interactive({ quote_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
@ -80,7 +80,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
assistButton: interactive({ assist_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
@ -102,7 +102,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
zoomInButton: interactive({ zoom_in_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
@ -124,7 +124,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
zoomOutButton: interactive({ zoom_out_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
@ -146,7 +146,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
plusButton: interactive({ plus_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
@ -171,7 +171,7 @@ export default function assistant(colorScheme: ColorScheme): any {
title: { title: {
...text(layer, "sans", "default", { size: "sm" }), ...text(layer, "sans", "default", { size: "sm" }),
}, },
savedConversation: { saved_conversation: {
container: interactive({ container: interactive({
base: { base: {
background: background(layer, "on"), background: background(layer, "on"),
@ -195,7 +195,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}), }),
}, },
}, },
userSender: { user_sender: {
default: { default: {
...text(layer, "sans", "default", { ...text(layer, "sans", "default", {
size: "sm", size: "sm",
@ -203,7 +203,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}), }),
}, },
}, },
assistantSender: { assistant_sender: {
default: { default: {
...text(layer, "sans", "accent", { ...text(layer, "sans", "accent", {
size: "sm", size: "sm",
@ -211,7 +211,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}), }),
}, },
}, },
systemSender: { system_sender: {
default: { default: {
...text(layer, "sans", "variant", { ...text(layer, "sans", "variant", {
size: "sm", size: "sm",
@ -219,7 +219,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}), }),
}, },
}, },
sentAt: { sent_at: {
margin: { top: 2, left: 8 }, margin: { top: 2, left: 8 },
...text(layer, "sans", "default", { size: "2xs" }), ...text(layer, "sans", "default", { size: "2xs" }),
}, },
@ -228,7 +228,7 @@ export default function assistant(colorScheme: ColorScheme): any {
background: background(layer, "on"), background: background(layer, "on"),
margin: { left: 12, right: 12, top: 12 }, margin: { left: 12, right: 12, top: 12 },
padding: 4, padding: 4,
cornerRadius: 4, corner_radius: 4,
...text(layer, "sans", "default", { size: "xs" }), ...text(layer, "sans", "default", { size: "xs" }),
}, },
state: { state: {
@ -238,28 +238,28 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
remainingTokens: { remaining_tokens: {
background: background(layer, "on"), background: background(layer, "on"),
margin: { top: 12, right: 24 }, margin: { top: 12, right: 24 },
padding: 4, padding: 4,
cornerRadius: 4, corner_radius: 4,
...text(layer, "sans", "positive", { size: "xs" }), ...text(layer, "sans", "positive", { size: "xs" }),
}, },
noRemainingTokens: { no_remaining_tokens: {
background: background(layer, "on"), background: background(layer, "on"),
margin: { top: 12, right: 24 }, margin: { top: 12, right: 24 },
padding: 4, padding: 4,
cornerRadius: 4, corner_radius: 4,
...text(layer, "sans", "negative", { size: "xs" }), ...text(layer, "sans", "negative", { size: "xs" }),
}, },
errorIcon: { error_icon: {
margin: { left: 8 }, margin: { left: 8 },
color: foreground(layer, "negative"), color: foreground(layer, "negative"),
width: 12, width: 12,
}, },
apiKeyEditor: { api_key_editor: {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, corner_radius: 6,
text: text(layer, "mono", "on"), text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", { placeholderText: text(layer, "mono", "on", "disabled", {
size: "xs", size: "xs",
@ -273,7 +273,7 @@ export default function assistant(colorScheme: ColorScheme): any {
top: 4, top: 4,
}, },
}, },
apiKeyPrompt: { api_key_prompt: {
padding: 10, padding: 10,
...text(layer, "sans", "default", { size: "xs" }), ...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({ const key = toggleable({
base: { base: {
text: text(layer, "mono", "variant", "default", { size: "xs" }), text: text(layer, "mono", "variant", "default", { size: "xs" }),
cornerRadius: 2, corner_radius: 2,
background: background(layer, "on"), background: background(layer, "on"),
padding: { padding: {
top: 1, top: 1,
@ -32,7 +32,7 @@ export default function command_palette(colorScheme: ColorScheme): any {
}) })
return { 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 // TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
key: { key: {
inactive: { ...key.inactive }, 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" 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 [ return [
"base", "base",
"variant", "variant",
@ -13,7 +17,7 @@ function isStyleSet(key: any): key is StyleSets {
].includes(key) ].includes(key)
} }
function isStyle(key: any): key is Styles { function is_style(key: any): key is Styles {
return [ return [
"default", "default",
"active", "active",
@ -23,78 +27,70 @@ function isStyle(key: any): key is Styles {
"inverted", "inverted",
].includes(key) ].includes(key)
} }
function getStyle( function get_style(
layer: Layer, layer: Layer,
possibleStyleSetOrStyle?: any, possible_style_set_or_style?: any,
possibleStyle?: any possible_style?: any
): Style { ): Style {
let styleSet: StyleSets = "base" let style_set: StyleSets = "base"
let style: Styles = "default" let style: Styles = "default"
if (isStyleSet(possibleStyleSetOrStyle)) { if (is_style_set(possible_style_set_or_style)) {
styleSet = possibleStyleSetOrStyle style_set = possible_style_set_or_style
} else if (isStyle(possibleStyleSetOrStyle)) { } else if (is_style(possible_style_set_or_style)) {
style = possibleStyleSetOrStyle style = possible_style_set_or_style
} }
if (isStyle(possibleStyle)) { if (is_style(possible_style)) {
style = possibleStyle 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, style?: Styles): string
export function background( export function background(
layer: Layer, layer: Layer,
styleSet?: StyleSets, style_set?: StyleSets,
style?: Styles style?: Styles
): string ): string
export function background( export function background(
layer: Layer, layer: Layer,
styleSetOrStyles?: StyleSets | Styles, style_set_or_styles?: StyleSets | Styles,
style?: Styles style?: Styles
): string { ): 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 border_color(layer: Layer, style?: Styles): string
export function borderColor( export function border_color(
layer: Layer, layer: Layer,
styleSet?: StyleSets, style_set?: StyleSets,
style?: Styles style?: Styles
): string ): string
export function borderColor( export function border_color(
layer: Layer, layer: Layer,
styleSetOrStyles?: StyleSets | Styles, style_set_or_styles?: StyleSets | Styles,
style?: Styles style?: Styles
): string { ): 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, style?: Styles): string
export function foreground( export function foreground(
layer: Layer, layer: Layer,
styleSet?: StyleSets, style_set?: StyleSets,
style?: Styles style?: Styles
): string ): string
export function foreground( export function foreground(
layer: Layer, layer: Layer,
styleSetOrStyles?: StyleSets | Styles, style_set_or_styles?: StyleSets | Styles,
style?: Styles style?: Styles
): string { ): string {
return getStyle(layer, styleSetOrStyles, style).foreground return get_style(layer, style_set_or_styles, style).foreground
}
interface Text extends Object {
family: keyof typeof fontFamilies
color: string
size: number
weight?: FontWeight
underline?: boolean
} }
export interface TextStyle extends Object { export interface TextStyle extends Object {
family: keyof typeof fontFamilies family: keyof typeof font_families
color: string color: string
size: number size: number
weight?: FontWeight weight?: FontWeight
@ -102,7 +98,7 @@ export interface TextStyle extends Object {
} }
export interface TextProperties { export interface TextProperties {
size?: keyof typeof fontSizes size?: keyof typeof font_sizes
weight?: FontWeight weight?: FontWeight
underline?: boolean underline?: boolean
color?: string color?: string
@ -182,49 +178,53 @@ interface FontFeatures {
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, font_family: keyof typeof font_families,
styleSet: StyleSets, style_set: StyleSets,
style: Styles, style: Styles,
properties?: TextProperties properties?: TextProperties
): Text ): TextStyle
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, font_family: keyof typeof font_families,
styleSet: StyleSets, style_set: StyleSets,
properties?: TextProperties properties?: TextProperties
): Text ): TextStyle
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, font_family: keyof typeof font_families,
style: Styles, style: Styles,
properties?: TextProperties properties?: TextProperties
): Text ): TextStyle
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, font_family: keyof typeof font_families,
properties?: TextProperties properties?: TextProperties
): Text ): TextStyle
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, font_family: keyof typeof font_families,
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties, style_set_style_or_properties?: StyleSets | Styles | TextProperties,
styleOrProperties?: Styles | TextProperties, style_or_properties?: Styles | TextProperties,
properties?: 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") { if (typeof style_set_style_or_properties === "object") {
properties = styleSetStyleOrProperties properties = style_set_style_or_properties
} }
if (typeof styleOrProperties === "object") { if (typeof style_or_properties === "object") {
properties = styleOrProperties properties = style_or_properties
} }
const size = fontSizes[properties?.size || "sm"] const size = font_sizes[properties?.size || "sm"]
const color = properties?.color || style.foreground const color = properties?.color || style.foreground
return { return {
family: fontFamilies[fontFamily], family: font_families[font_family],
...properties, ...properties,
color, color,
size, size,
@ -252,13 +252,13 @@ export interface BorderProperties {
export function border( export function border(
layer: Layer, layer: Layer,
styleSet: StyleSets, style_set: StyleSets,
style: Styles, style: Styles,
properties?: BorderProperties properties?: BorderProperties
): Border ): Border
export function border( export function border(
layer: Layer, layer: Layer,
styleSet: StyleSets, style_set: StyleSets,
properties?: BorderProperties properties?: BorderProperties
): Border ): Border
export function border( export function border(
@ -269,17 +269,17 @@ export function border(
export function border(layer: Layer, properties?: BorderProperties): Border export function border(layer: Layer, properties?: BorderProperties): Border
export function border( export function border(
layer: Layer, layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, style_set_or_properties?: StyleSets | Styles | BorderProperties,
styleOrProperties?: Styles | BorderProperties, style_or_properties?: Styles | BorderProperties,
properties?: BorderProperties properties?: BorderProperties
): Border { ): Border {
const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) const style = get_style(layer, style_set_or_properties, style_or_properties)
if (typeof styleSetStyleOrProperties === "object") { if (typeof style_set_or_properties === "object") {
properties = styleSetStyleOrProperties properties = style_set_or_properties
} }
if (typeof styleOrProperties === "object") { if (typeof style_or_properties === "object") {
properties = styleOrProperties properties = style_or_properties
} }
return { 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 { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
export default function contact_finder(colorScheme: ColorScheme): any { export default function contact_finder(theme: ColorScheme): any {
const layer = colorScheme.middle const layer = theme.middle
const sideMargin = 6 const side_margin = 6
const contactButton = { const contact_button = {
background: background(layer, "variant"), background: background(layer, "variant"),
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
iconWidth: 8, icon_width: 8,
buttonWidth: 16, button_width: 16,
cornerRadius: 8, corner_radius: 8,
} }
const pickerStyle = picker(colorScheme) const picker_style = picker(theme)
const pickerInput = { const picker_input = {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, corner_radius: 6,
text: text(layer, "mono"), text: text(layer, "mono"),
placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }), placeholder_text: text(layer, "mono", "on", "disabled", { size: "xs" }),
selection: colorScheme.players[0], selection: theme.players[0],
border: border(layer), border: border(layer),
padding: { padding: {
bottom: 4, bottom: 4,
@ -29,40 +29,40 @@ export default function contact_finder(colorScheme: ColorScheme): any {
top: 4, top: 4,
}, },
margin: { margin: {
left: sideMargin, left: side_margin,
right: sideMargin, right: side_margin,
}, },
} }
return { return {
picker: { picker: {
emptyContainer: {}, empty_container: {},
item: { item: {
...pickerStyle.item, ...picker_style.item,
margin: { left: sideMargin, right: sideMargin }, margin: { left: side_margin, right: side_margin },
}, },
noMatches: pickerStyle.noMatches, no_matches: picker_style.noMatches,
inputEditor: pickerInput, input_editor: picker_input,
emptyInputEditor: pickerInput, empty_input_editor: picker_input,
}, },
rowHeight: 28, row_height: 28,
contactAvatar: { contact_avatar: {
cornerRadius: 10, corner_radius: 10,
width: 18, width: 18,
}, },
contactUsername: { contact_username: {
padding: { padding: {
left: 8, left: 8,
}, },
}, },
contactButton: { contact_button: {
...contactButton, ...contact_button,
hover: { hover: {
background: background(layer, "variant", "hovered"), background: background(layer, "variant", "hovered"),
}, },
}, },
disabledContactButton: { disabled_contact_button: {
...contactButton, ...contact_button,
background: background(layer, "disabled"), background: background(layer, "disabled"),
color: foreground(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 { 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" 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 nameMargin = 8
const sidePadding = 12 const sidePadding = 12
const layer = colorScheme.middle const layer = theme.middle
const contactButton = { const contactButton = {
background: background(layer, "on"), background: background(layer, "on"),
color: foreground(layer, "on"), color: foreground(layer, "on"),
iconWidth: 8, icon_width: 8,
buttonWidth: 16, button_width: 16,
cornerRadius: 8, corner_radius: 8,
} }
const projectRow = { const projectRow = {
guestAvatarSpacing: 4, guest_avatar_spacing: 4,
height: 24, height: 24,
guestAvatar: { guest_avatar: {
cornerRadius: 8, corner_radius: 8,
width: 14, width: 14,
}, },
name: { name: {
@ -43,14 +49,14 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
return { return {
background: background(layer), background: background(layer),
padding: { top: 12 }, padding: { top: 12 },
userQueryEditor: { user_query_editor: {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, corner_radius: 6,
text: text(layer, "mono", "on"), text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", { placeholder_text: text(layer, "mono", "on", "disabled", {
size: "xs", size: "xs",
}), }),
selection: colorScheme.players[0], selection: theme.players[0],
border: border(layer, "on"), border: border(layer, "on"),
padding: { padding: {
bottom: 4, bottom: 4,
@ -62,16 +68,16 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
left: 6, left: 6,
}, },
}, },
userQueryEditorHeight: 33, user_query_editor_height: 33,
addContactButton: { add_contact_button: {
margin: { left: 6, right: 12 }, margin: { left: 6, right: 12 },
color: foreground(layer, "on"), color: foreground(layer, "on"),
buttonWidth: 28, button_width: 28,
iconWidth: 16, icon_width: 16,
}, },
rowHeight: 28, row_height: 28,
sectionIconSize: 8, section_icon_size: 8,
headerRow: toggleable({ header_row: toggleable({
base: interactive({ base: interactive({
base: { base: {
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm" }),
@ -106,11 +112,11 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
leaveCall: interactive({ leave_call: interactive({
base: { base: {
background: background(layer), background: background(layer),
border: border(layer), border: border(layer),
cornerRadius: 6, corner_radius: 6,
margin: { margin: {
top: 1, top: 1,
}, },
@ -130,7 +136,7 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
contactRow: { contact_row: {
inactive: { inactive: {
default: { default: {
padding: { padding: {
@ -149,31 +155,30 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
}, },
}, },
}, },
contact_avatar: {
contactAvatar: { corner_radius: 10,
cornerRadius: 10,
width: 18, width: 18,
}, },
contactStatusFree: { contact_status_free: {
cornerRadius: 4, corner_radius: 4,
padding: 4, padding: 4,
margin: { top: 12, left: 12 }, margin: { top: 12, left: 12 },
background: foreground(layer, "positive"), background: foreground(layer, "positive"),
}, },
contactStatusBusy: { contact_status_busy: {
cornerRadius: 4, corner_radius: 4,
padding: 4, padding: 4,
margin: { top: 12, left: 12 }, margin: { top: 12, left: 12 },
background: foreground(layer, "negative"), background: foreground(layer, "negative"),
}, },
contactUsername: { contact_username: {
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm" }),
margin: { margin: {
left: nameMargin, left: nameMargin,
}, },
}, },
contactButtonSpacing: nameMargin, contact_button_spacing: nameMargin,
contactButton: interactive({ contact_button: interactive({
base: { ...contactButton }, base: { ...contactButton },
state: { state: {
hovered: { hovered: {
@ -181,35 +186,35 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
disabledButton: { disabled_button: {
...contactButton, ...contactButton,
background: background(layer, "on"), background: background(layer, "on"),
color: foreground(layer, "on"), color: foreground(layer, "on"),
}, },
callingIndicator: { calling_indicator: {
...text(layer, "mono", "variant", { size: "xs" }), ...text(layer, "mono", "variant", { size: "xs" }),
}, },
treeBranch: toggleable({ tree_branch: toggleable({
base: interactive({ base: interactive({
base: { base: {
color: borderColor(layer), color: border_color(layer),
width: 1, width: 1,
}, },
state: { state: {
hovered: { hovered: {
color: borderColor(layer), color: border_color(layer),
}, },
}, },
}), }),
state: { state: {
active: { active: {
default: { default: {
color: borderColor(layer), color: border_color(layer),
}, },
}, },
}, },
}), }),
projectRow: toggleable({ project_row: toggleable({
base: interactive({ base: interactive({
base: { base: {
...projectRow, ...projectRow,

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

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

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

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

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

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

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

@ -10,7 +10,7 @@ export default function feedback(colorScheme: ColorScheme): any {
base: { base: {
...text(layer, "mono", "on"), ...text(layer, "mono", "on"),
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, corner_radius: 6,
border: border(layer, "on"), border: border(layer, "on"),
margin: { margin: {
right: 4, 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 layer = colorScheme.middle
const baseContainer = { const baseContainer = {
background: background(layer), background: background(layer),
cornerRadius: 8, corner_radius: 8,
padding: { padding: {
left: 8, left: 8,
right: 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: { callerAvatar: {
height: avatarSize, height: avatarSize,
width: avatarSize, width: avatarSize,
cornerRadius: avatarSize / 2, corner_radius: avatarSize / 2,
}, },
callerMetadata: { callerMetadata: {
margin: { left: 10 }, margin: { left: 10 },
@ -33,7 +33,7 @@ export default function incoming_call_notification(
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }), ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
buttonWidth: 96, button_width: 96,
acceptButton: { acceptButton: {
background: background(layer, "accent"), background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true }), 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), background: background(layer),
border: border(layer), border: border(layer),
shadow: colorScheme.modalShadow, shadow: colorScheme.modalShadow,
cornerRadius: 12, corner_radius: 12,
padding: { padding: {
bottom: 4, bottom: 4,
}, },
@ -53,7 +53,7 @@ export default function picker(colorScheme: ColorScheme): any {
left: 4, left: 4,
right: 4, right: 4,
}, },
cornerRadius: 8, corner_radius: 8,
text: text(layer, "sans", "variant"), text: text(layer, "sans", "variant"),
highlightText: text(layer, "sans", "accent", { highlightText: text(layer, "sans", "accent", {
weight: "bold", 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 { return {
background: background(layer), background: background(layer),
tabIconSpacing: 4, tabIconSpacing: 4,
tabIconWidth: 13, tab_icon_width: 13,
tabSummarySpacing: 10, tabSummarySpacing: 10,
emptyMessage: text(layer, "sans", "variant", { size: "md" }), 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: { base: {
background: background(layer), background: background(layer),
border: border(layer, "active"), border: border(layer, "active"),
cornerRadius: 4, corner_radius: 4,
margin: { margin: {
top: 16, top: 16,
left: 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: { ownerAvatar: {
height: avatarSize, height: avatarSize,
width: avatarSize, width: avatarSize,
cornerRadius: avatarSize / 2, corner_radius: avatarSize / 2,
}, },
ownerMetadata: { ownerMetadata: {
margin: { left: 10 }, margin: { left: 10 },
@ -34,7 +34,7 @@ export default function project_shared_notification(
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }), ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
buttonWidth: 96, button_width: 96,
openButton: { openButton: {
background: background(layer, "accent"), background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true }), 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 // Search input
const editor = { const editor = {
background: background(layer), background: background(layer),
cornerRadius: 8, corner_radius: 8,
minWidth: 200, minWidth: 200,
maxWidth: 500, maxWidth: 500,
placeholderText: text(layer, "mono", "disabled"), placeholderText: text(layer, "mono", "disabled"),
@ -41,7 +41,7 @@ export default function search(colorScheme: ColorScheme): any {
base: { base: {
...text(layer, "mono", "on"), ...text(layer, "mono", "on"),
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, corner_radius: 6,
border: border(layer, "on"), border: border(layer, "on"),
margin: { margin: {
right: 4, right: 4,
@ -115,8 +115,8 @@ export default function search(colorScheme: ColorScheme): any {
dismissButton: interactive({ dismissButton: interactive({
base: { base: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
iconWidth: 12, icon_width: 12,
buttonWidth: 14, button_width: 14,
padding: { padding: {
left: 10, left: 10,
right: 10, right: 10,

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

@ -1,10 +1,7 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { StyleTree } from "../types"
import { background } from "./components" import { background } from "./components"
export default function sharedScreen( export default function sharedScreen(colorScheme: ColorScheme) {
colorScheme: ColorScheme
): StyleTree.SharedScreen {
const layer = colorScheme.highest const layer = colorScheme.highest
return { return {
background: background(layer), 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: { base: {
...text(layer, "sans", { size: "xs" }), ...text(layer, "sans", { size: "xs" }),
border: border(layer, "active"), border: border(layer, "active"),
cornerRadius: 4, corner_radius: 4,
padding: { padding: {
top: 3, top: 3,
bottom: 3, bottom: 3,
@ -38,9 +38,9 @@ export default function simple_message_notification(
dismissButton: interactive({ dismissButton: interactive({
base: { base: {
color: foreground(layer), color: foreground(layer),
iconWidth: 8, icon_width: 8,
iconHeight: 8, iconHeight: 8,
buttonWidth: 8, button_width: 8,
buttonHeight: 8, buttonHeight: 8,
}, },
state: { 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 layer = colorScheme.lowest
const statusContainer = { const statusContainer = {
cornerRadius: 6, corner_radius: 6,
padding: { top: 3, bottom: 3, left: 6, right: 6 }, padding: { top: 3, bottom: 3, left: 6, right: 6 },
} }
const diagnosticStatusContainer = { const diagnosticStatusContainer = {
cornerRadius: 6, corner_radius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 }, padding: { top: 1, bottom: 1, left: 6, right: 6 },
} }
@ -42,7 +42,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
base: { base: {
...diagnosticStatusContainer, ...diagnosticStatusContainer,
iconSpacing: 4, iconSpacing: 4,
iconWidth: 14, icon_width: 14,
height: 18, height: 18,
message: text(layer, "sans"), message: text(layer, "sans"),
iconColor: foreground(layer), iconColor: foreground(layer),
@ -64,7 +64,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
diagnosticSummary: interactive({ diagnosticSummary: interactive({
base: { base: {
height: 20, height: 20,
iconWidth: 16, icon_width: 16,
iconSpacing: 2, iconSpacing: 2,
summarySpacing: 6, summarySpacing: 6,
text: text(layer, "sans", { size: "sm" }), text: text(layer, "sans", { size: "sm" }),
@ -72,7 +72,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
iconColorWarning: foreground(layer, "warning"), iconColorWarning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"), iconColorError: foreground(layer, "negative"),
containerOk: { containerOk: {
cornerRadius: 6, corner_radius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 }, padding: { top: 3, bottom: 3, left: 7, right: 7 },
}, },
containerWarning: { containerWarning: {
@ -143,7 +143,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
}, },
}), }),
badge: { badge: {
cornerRadius: 3, corner_radius: 3,
padding: 2, padding: 2,
margin: { bottom: -1, right: -1 }, margin: { bottom: -1, right: -1 },
border: border(layer), 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, spacing: 8,
// Tab type icons (e.g. Project Search) // Tab type icons (e.g. Project Search)
typeIconWidth: 14, type_icon_width: 14,
// Close icons // Close icons
closeIconWidth: 8, close_icon_width: 8,
iconClose: foreground(layer, "variant"), iconClose: foreground(layer, "variant"),
iconCloseActive: foreground(layer, "hovered"), iconCloseActive: foreground(layer, "hovered"),
@ -92,8 +92,8 @@ export default function tab_bar(colorScheme: ColorScheme): any {
base: interactive({ base: interactive({
base: { base: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
iconWidth: 12, icon_width: 12,
buttonWidth: activePaneActiveTab.height, button_width: activePaneActiveTab.height,
}, },
state: { state: {
hovered: { hovered: {

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

@ -1,7 +1,6 @@
import { ColorScheme } from "../theme/color_scheme" 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. * Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors * 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({ const button = toggleable({
base: interactive({ base: interactive({
base: { base: {
cornerRadius: 6, corner_radius: 6,
height: button_height, height: button_height,
width: online ? 37 : 24, width: online ? 37 : 24,
padding: { padding: {
@ -180,13 +180,13 @@ export function titlebar(theme: ColorScheme): any {
leaderAvatar: { leaderAvatar: {
width: avatarWidth, width: avatarWidth,
outerWidth: avatarOuterWidth, outerWidth: avatarOuterWidth,
cornerRadius: avatarWidth / 2, corner_radius: avatarWidth / 2,
outerCornerRadius: avatarOuterWidth / 2, outerCornerRadius: avatarOuterWidth / 2,
}, },
followerAvatar: { followerAvatar: {
width: followerAvatarWidth, width: followerAvatarWidth,
outerWidth: followerAvatarOuterWidth, outerWidth: followerAvatarOuterWidth,
cornerRadius: followerAvatarWidth / 2, corner_radius: followerAvatarWidth / 2,
outerCornerRadius: followerAvatarOuterWidth / 2, outerCornerRadius: followerAvatarOuterWidth / 2,
}, },
inactiveAvatarGrayscale: true, inactiveAvatarGrayscale: true,
@ -202,7 +202,7 @@ export function titlebar(theme: ColorScheme): any {
top: 2, top: 2,
bottom: 2, bottom: 2,
}, },
cornerRadius: 6, corner_radius: 6,
}, },
avatarRibbon: { avatarRibbon: {
height: 3, height: 3,
@ -234,7 +234,7 @@ export function titlebar(theme: ColorScheme): any {
left: 8, left: 8,
right: 8, right: 8,
}, },
cornerRadius: 6, corner_radius: 6,
}, },
leave_call_button: icon_button(theme, { 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 // Jewel that notifies you that there are new contact requests
toggleContactsBadge: { toggleContactsBadge: {
cornerRadius: 3, corner_radius: 3,
padding: 2, padding: 2,
margin: { top: 3, left: 3 }, margin: { top: 3, left: 3 },
border: border(theme.lowest), border: border(theme.lowest),

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, secondaryTextSpacing: 10,
padding: { left: 8, right: 8, top: 2, bottom: 2 }, padding: { left: 8, right: 8, top: 2, bottom: 2 },
cornerRadius: 6, corner_radius: 6,
background: background(layer, "on"), background: background(layer, "on"),
}, },
state: { 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 }, padding: { top: 4, bottom: 4, left: 8, right: 8 },
margin: { top: 6, left: 6 }, margin: { top: 6, left: 6 },
shadow: colorScheme.popoverShadow, shadow: colorScheme.popoverShadow,
cornerRadius: 6, corner_radius: 6,
text: text(layer, "sans", { size: "xs" }), text: text(layer, "sans", { size: "xs" }),
keystroke: { keystroke: {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 4, corner_radius: 4,
margin: { left: 6 }, margin: { left: 6 },
padding: { left: 4, right: 4 }, padding: { left: 4, right: 4 },
...text(layer, "mono", "on", { size: "xs", weight: "bold" }), ...text(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({ dismissButton: interactive({
base: { base: {
color: foreground(layer), color: foreground(layer),
iconWidth: 8, icon_width: 8,
iconHeight: 8, iconHeight: 8,
buttonWidth: 8, button_width: 8,
buttonHeight: 8, buttonHeight: 8,
}, },
state: { 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 layer = colorScheme.highest
const checkboxBase = { const checkboxBase = {
cornerRadius: 4, corner_radius: 4,
padding: { padding: {
left: 3, left: 3,
right: 3, right: 3,
@ -57,7 +57,7 @@ export default function welcome(colorScheme: ColorScheme): any {
checkboxGroup: { checkboxGroup: {
border: border(layer, "variant"), border: border(layer, "variant"),
background: withOpacity(background(layer, "hovered"), 0.25), background: withOpacity(background(layer, "hovered"), 0.25),
cornerRadius: 4, corner_radius: 4,
padding: { padding: {
left: 12, left: 12,
top: 2, top: 2,
@ -68,7 +68,7 @@ export default function welcome(colorScheme: ColorScheme): any {
base: { base: {
background: background(layer), background: background(layer),
border: border(layer, "active"), border: border(layer, "active"),
cornerRadius: 4, corner_radius: 4,
margin: { margin: {
top: 4, top: 4,
bottom: 4, bottom: 4,

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

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

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

@ -252,11 +252,7 @@ function buildStyleSet(
} }
} }
function buildStyleDefinition( function buildStyleDefinition(bgBase: number, fgBase: number, step = 0.08) {
bgBase: number,
fgBase: number,
step = 0.08
) {
return { return {
background: { background: {
default: bgBase, 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 // Typescript magic to convert any string from camelCase to snake_case at compile time
type SnakeCase<S> = S extends string type SnakeCase<S> = S extends string
? S extends `${infer T}${infer U}` ? S extends `${infer T}${infer U}`
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S : S
: S : S
type SnakeCased<Type> = { type SnakeCased<Type> = {

36
styles/tsconfig.json
View file

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