Nate Butler created
through `contact_notification`styles/src/component/icon_button.ts | 6
styles/src/component/text_button.ts | 6
styles/src/element/interactive.ts | 40 ++--
styles/src/element/toggle.ts | 8
styles/src/style_tree/assistant.ts | 44 ++--
styles/src/style_tree/command_palette.ts | 4
styles/src/style_tree/components.ts | 130 ++++++------
styles/src/style_tree/contact_finder.ts | 56 +++---
styles/src/style_tree/contact_list.ts | 85 ++++----
styles/src/style_tree/contact_notification.ts | 35 +-
styles/src/style_tree/contacts_popover.ts | 2
styles/src/style_tree/context_menu.ts | 10
styles/src/style_tree/copilot.ts | 8
styles/src/style_tree/editor.ts | 28 +-
styles/src/style_tree/feedback.ts | 2
styles/src/style_tree/hover_popover.ts | 2
styles/src/style_tree/incoming_call_notification.ts | 4
styles/src/style_tree/picker.ts | 4
styles/src/style_tree/project_diagnostics.ts | 2
styles/src/style_tree/project_panel.ts | 2
styles/src/style_tree/project_shared_notification.ts | 4
styles/src/style_tree/search.ts | 8
styles/src/style_tree/shared_screen.ts | 5
styles/src/style_tree/simple_message_notification.ts | 6
styles/src/style_tree/status_bar.ts | 12
styles/src/style_tree/tab_bar.ts | 8
styles/src/style_tree/terminal.ts | 3
styles/src/style_tree/titlebar.ts | 12
styles/src/style_tree/toolbar_dropdown_menu.ts | 2
styles/src/style_tree/tooltip.ts | 4
styles/src/style_tree/update_notification.ts | 4
styles/src/style_tree/welcome.ts | 6
styles/src/style_tree/workspace.ts | 22 +-
styles/src/theme/color_scheme.ts | 6
styles/src/types/element.ts | 4
styles/src/types/index.ts | 5
styles/src/types/property.ts | 9
styles/src/types/style_tree.ts | 33 ---
styles/src/types/util.ts | 17 -
styles/src/utils/snake_case.ts | 4
styles/tsconfig.json | 36 --
41 files changed, 302 insertions(+), 386 deletions(-)
@@ -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>
}
@@ -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
@@ -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
}
@@ -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
}
@@ -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" }),
},
@@ -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 },
@@ -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 {
@@ -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"),
},
@@ -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,
@@ -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"),
},
},
},
@@ -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),
@@ -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 },
},
}
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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 }),
@@ -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",
@@ -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" }),
}
@@ -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,
@@ -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 }),
@@ -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,
@@ -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),
@@ -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: {
@@ -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),
@@ -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: {
@@ -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
@@ -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),
@@ -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: {
@@ -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" }),
@@ -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: {
@@ -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,
@@ -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,
@@ -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,
@@ -1,4 +0,0 @@
-import { Clean } from "./util"
-import * as zed from "./zed"
-
-export type Text = Clean<zed.TextStyle>
@@ -1,5 +0,0 @@
-import * as StyleTree from "./styleTree"
-import * as Property from "./property"
-import * as Element from "./element"
-
-export { StyleTree, Property, Element }
@@ -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>
@@ -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>>
@@ -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]
-}
@@ -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> = {
@@ -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"]
}