Detailed changes
@@ -21,9 +21,7 @@ function clear_themes(theme_directory: string) {
}
}
-const all_themes: Theme[] = themes.map((theme) =>
- create_theme(theme)
-)
+const all_themes: Theme[] = themes.map((theme) => create_theme(theme))
function write_themes(themes: Theme[], output_directory: string) {
clear_themes(output_directory)
@@ -34,10 +32,7 @@ function write_themes(themes: Theme[], output_directory: string) {
const style_tree = app()
const style_tree_json = JSON.stringify(style_tree, null, 2)
const temp_path = path.join(temp_directory, `${theme.name}.json`)
- const out_path = path.join(
- output_directory,
- `${theme.name}.json`
- )
+ const out_path = path.join(output_directory, `${theme.name}.json`)
fs.writeFileSync(temp_path, style_tree_json)
fs.renameSync(temp_path, out_path)
console.log(`- ${out_path} created`)
@@ -83,8 +83,6 @@ function write_tokens(themes: Theme[], tokens_directory: string) {
console.log(`- ${METADATA_FILE} created`)
}
-const all_themes: Theme[] = themes.map((theme) =>
- create_theme(theme)
-)
+const all_themes: Theme[] = themes.map((theme) => create_theme(theme))
write_tokens(all_themes, TOKENS_DIRECTORY)
@@ -5,7 +5,7 @@ import { TextStyle, background } from "../style_tree/components"
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace Button {
export type Options = {
- layer: Layer,
+ layer: Layer
background: keyof Theme["lowest"]
color: keyof Theme["lowest"]
variant: Button.Variant
@@ -16,13 +16,13 @@ export namespace Button {
bottom?: number
left?: number
right?: number
- },
+ }
states: {
- enabled?: boolean,
- hovered?: boolean,
- pressed?: boolean,
- focused?: boolean,
- disabled?: boolean,
+ enabled?: boolean
+ hovered?: boolean
+ pressed?: boolean
+ focused?: boolean
+ disabled?: boolean
}
}
@@ -38,26 +38,26 @@ export namespace Button {
export const CORNER_RADIUS = 6
export const variant = {
- Default: 'filled',
- Outline: 'outline',
- Ghost: 'ghost'
+ Default: "filled",
+ Outline: "outline",
+ Ghost: "ghost",
} as const
- export type Variant = typeof variant[keyof typeof variant]
+ export type Variant = (typeof variant)[keyof typeof variant]
export const shape = {
- Rectangle: 'rectangle',
- Square: 'square'
+ Rectangle: "rectangle",
+ Square: "square",
} as const
- export type Shape = typeof shape[keyof typeof shape]
+ export type Shape = (typeof shape)[keyof typeof shape]
export const size = {
Small: "sm",
- Medium: "md"
+ Medium: "md",
} as const
- export type Size = typeof size[keyof typeof size]
+ export type Size = (typeof size)[keyof typeof size]
export type BaseStyle = {
corder_radius: number
@@ -67,8 +67,8 @@ export namespace Button {
bottom: number
left: number
right: number
- },
- margin: Button.Options['margin']
+ }
+ margin: Button.Options["margin"]
button_height: number
}
@@ -81,15 +81,18 @@ export namespace Button {
shape: Button.shape.Rectangle,
states: {
hovered: true,
- pressed: true
- }
+ pressed: true,
+ },
}
): BaseStyle => {
const theme = useTheme()
const layer = options.layer ?? theme.middle
const color = options.color ?? "base"
- const background_color = options.variant === Button.variant.Ghost ? null : background(layer, options.background ?? color)
+ const background_color =
+ options.variant === Button.variant.Ghost
+ ? null
+ : background(layer, options.background ?? color)
const m = {
top: options.margin?.top ?? 0,
@@ -106,8 +109,14 @@ export namespace Button {
padding: {
top: padding,
bottom: padding,
- left: options.shape === Button.shape.Rectangle ? padding + Button.RECTANGLE_PADDING : padding,
- right: options.shape === Button.shape.Rectangle ? padding + Button.RECTANGLE_PADDING : padding
+ left:
+ options.shape === Button.shape.Rectangle
+ ? padding + Button.RECTANGLE_PADDING
+ : padding,
+ right:
+ options.shape === Button.shape.Rectangle
+ ? padding + Button.RECTANGLE_PADDING
+ : padding,
},
margin: m,
button_height: 16,
@@ -11,10 +11,7 @@ export type Margin = {
}
interface IconButtonOptions {
- layer?:
- | Theme["lowest"]
- | Theme["middle"]
- | Theme["highest"]
+ layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
color?: keyof Theme["lowest"]
margin?: Partial<Margin>
variant?: Button.Variant
@@ -26,15 +23,20 @@ type ToggleableIconButtonOptions = IconButtonOptions & {
active_layer?: Layer
}
-export function icon_button({ color, margin, layer, variant, size }: IconButtonOptions = {
- variant: Button.variant.Default,
- size: Button.size.Medium,
-}) {
+export function icon_button(
+ { color, margin, layer, variant, size }: IconButtonOptions = {
+ variant: Button.variant.Default,
+ size: Button.size.Medium,
+ }
+) {
const theme = useTheme()
if (!color) color = "base"
- const background_color = variant === Button.variant.Ghost ? null : background(layer ?? theme.lowest, color)
+ const background_color =
+ variant === Button.variant.Ghost
+ ? null
+ : background(layer ?? theme.lowest, color)
const m = {
top: margin?.top ?? 0,
@@ -77,7 +79,14 @@ export function icon_button({ color, margin, layer, variant, size }: IconButtonO
})
}
-export function toggleable_icon_button({ color, active_color, margin, variant, size, active_layer }: ToggleableIconButtonOptions) {
+export function toggleable_icon_button({
+ color,
+ active_color,
+ margin,
+ variant,
+ size,
+ active_layer,
+}: ToggleableIconButtonOptions) {
if (!color) color = "base"
return toggleable({
@@ -87,7 +96,7 @@ export function toggleable_icon_button({ color, active_color, margin, variant, s
color: active_color ? active_color : color,
margin,
layer: active_layer,
- size
+ size,
}),
},
})
@@ -1,7 +1,13 @@
import { foreground } from "../style_tree/components"
import { Layer, StyleSets } from "../theme"
-export const indicator = ({ layer, color }: { layer: Layer, color: StyleSets }) => ({
+export const indicator = ({
+ layer,
+ color,
+}: {
+ layer: Layer
+ color: StyleSets
+}) => ({
corner_radius: 4,
padding: 4,
margin: { top: 12, left: 12 },
@@ -18,6 +18,6 @@ export const input = () => {
bottom: 3,
left: 12,
right: 8,
- }
+ },
}
}
@@ -16,19 +16,26 @@ export type MarginStyle = {
export const margin_style = (options: MarginOptions): MarginStyle => {
const { all, top, bottom, left, right } = options
- if (all !== undefined) return {
- top: all,
- bottom: all,
- left: all,
- right: all
- }
+ if (all !== undefined)
+ return {
+ top: all,
+ bottom: all,
+ left: all,
+ right: all,
+ }
- if (top === undefined && bottom === undefined && left === undefined && right === undefined) throw new Error("Margin must have at least one value")
+ if (
+ top === undefined &&
+ bottom === undefined &&
+ left === undefined &&
+ right === undefined
+ )
+ throw new Error("Margin must have at least one value")
return {
top: top || 0,
bottom: bottom || 0,
left: left || 0,
- right: right || 0
+ right: right || 0,
}
}
@@ -16,19 +16,26 @@ export type PaddingStyle = {
export const padding_style = (options: PaddingOptions): PaddingStyle => {
const { all, top, bottom, left, right } = options
- if (all !== undefined) return {
- top: all,
- bottom: all,
- left: all,
- right: all
- }
+ if (all !== undefined)
+ return {
+ top: all,
+ bottom: all,
+ left: all,
+ right: all,
+ }
- if (top === undefined && bottom === undefined && left === undefined && right === undefined) throw new Error("Padding must have at least one value")
+ if (
+ top === undefined &&
+ bottom === undefined &&
+ left === undefined &&
+ right === undefined
+ )
+ throw new Error("Padding must have at least one value")
return {
top: top || 0,
bottom: bottom || 0,
left: left || 0,
- right: right || 0
+ right: right || 0,
}
}
@@ -9,7 +9,7 @@ type TabProps = {
export const tab = ({ layer }: TabProps) => {
const active_color = text(layer, "sans", "base").color
const inactive_border: Border = {
- color: '#FFFFFF00',
+ color: "#FFFFFF00",
width: 1,
bottom: true,
left: false,
@@ -27,7 +27,7 @@ export const tab = ({ layer }: TabProps) => {
top: 8,
left: 8,
right: 8,
- bottom: 6
+ bottom: 6,
},
border: inactive_border,
}
@@ -35,17 +35,17 @@ export const tab = ({ layer }: TabProps) => {
const i = interactive({
state: {
default: {
- ...base
+ ...base,
},
hovered: {
...base,
- ...text(layer, "sans", "base", "hovered")
+ ...text(layer, "sans", "base", "hovered"),
},
clicked: {
...base,
- ...text(layer, "sans", "base", "pressed")
+ ...text(layer, "sans", "base", "pressed"),
},
- }
+ },
})
return toggleable({
@@ -60,14 +60,14 @@ export const tab = ({ layer }: TabProps) => {
hovered: {
...i,
...text(layer, "sans", "base", "hovered"),
- border: active_border
+ border: active_border,
},
clicked: {
...i,
...text(layer, "sans", "base", "pressed"),
- border: active_border
+ border: active_border,
},
- }
- }
+ },
+ },
})
}
@@ -12,44 +12,47 @@ type TabBarButtonProps = TabBarButtonOptions & {
state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
}
-export function tab_bar_button(theme: Theme, { icon, color = "base" }: TabBarButtonProps) {
+export function tab_bar_button(
+ theme: Theme,
+ { icon, color = "base" }: TabBarButtonProps
+) {
const button_spacing = 8
- return (
- interactive({
- base: {
- icon: {
- color: foreground(theme.middle, color),
- asset: icon,
- dimensions: {
- width: 15,
- height: 15,
- },
+ return interactive({
+ base: {
+ icon: {
+ color: foreground(theme.middle, color),
+ asset: icon,
+ dimensions: {
+ width: 15,
+ height: 15,
},
- container: {
- corner_radius: 4,
- padding: {
- top: 4, bottom: 4, left: 4, right: 4
- },
- margin: {
- left: button_spacing / 2,
- right: button_spacing / 2,
- },
+ },
+ container: {
+ corner_radius: 4,
+ padding: {
+ top: 4,
+ bottom: 4,
+ left: 4,
+ right: 4,
+ },
+ margin: {
+ left: button_spacing / 2,
+ right: button_spacing / 2,
},
},
- state: {
- hovered: {
- container: {
- background: background(theme.middle, color, "hovered"),
-
- }
+ },
+ state: {
+ hovered: {
+ container: {
+ background: background(theme.middle, color, "hovered"),
},
- clicked: {
- container: {
- background: background(theme.middle, color, "pressed"),
- }
+ },
+ clicked: {
+ container: {
+ background: background(theme.middle, color, "pressed"),
},
},
- })
- )
+ },
+ })
}
@@ -10,10 +10,7 @@ import { Button } from "./button"
import { Margin } from "./icon_button"
interface TextButtonOptions {
- layer?:
- | Theme["lowest"]
- | Theme["middle"]
- | Theme["highest"]
+ layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
variant?: Button.Variant
color?: keyof Theme["lowest"]
margin?: Partial<Margin>
@@ -36,7 +33,10 @@ export function text_button({
const theme = useTheme()
if (!color) color = "base"
- const background_color = variant === Button.variant.Ghost ? null : background(layer ?? theme.lowest, color)
+ const background_color =
+ variant === Button.variant.Ghost
+ ? null
+ : background(layer ?? theme.lowest, color)
const text_options: TextProperties = {
size: "xs",
@@ -67,20 +67,38 @@ export function text_button({
state: {
default: {
background: background_color,
- color:
- disabled
- ? foreground(layer ?? theme.lowest, "disabled")
- : foreground(layer ?? theme.lowest, color),
- },
- hovered:
- disabled ? {} : {
- background: background(layer ?? theme.lowest, color, "hovered"),
- color: foreground(layer ?? theme.lowest, color, "hovered"),
- },
- clicked: disabled ? {} : {
- background: background(layer ?? theme.lowest, color, "pressed"),
- color: foreground(layer ?? theme.lowest, color, "pressed"),
+ color: disabled
+ ? foreground(layer ?? theme.lowest, "disabled")
+ : foreground(layer ?? theme.lowest, color),
},
+ hovered: disabled
+ ? {}
+ : {
+ background: background(
+ layer ?? theme.lowest,
+ color,
+ "hovered"
+ ),
+ color: foreground(
+ layer ?? theme.lowest,
+ color,
+ "hovered"
+ ),
+ },
+ clicked: disabled
+ ? {}
+ : {
+ background: background(
+ layer ?? theme.lowest,
+ color,
+ "pressed"
+ ),
+ color: foreground(
+ layer ?? theme.lowest,
+ color,
+ "pressed"
+ ),
+ },
},
})
}
@@ -8,50 +8,48 @@ type RoleCycleButton = TextStyle & {
}
// TODO: Replace these with zed types
type RemainingTokens = TextStyle & {
- background: string,
- margin: { top: number, right: number },
+ background: string
+ margin: { top: number; right: number }
padding: {
- right: number,
- left: number,
- top: number,
- bottom: number,
- },
- corner_radius: number,
+ right: number
+ left: number
+ top: number
+ bottom: number
+ }
+ corner_radius: number
}
export default function assistant(): any {
const theme = useTheme()
- const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
- return (
- interactive({
- base: {
+ const interactive_role = (
+ color: StyleSets
+ ): Interactive<RoleCycleButton> => {
+ return interactive({
+ base: {
+ ...text(theme.highest, "sans", color, { size: "sm" }),
+ },
+ state: {
+ hovered: {
...text(theme.highest, "sans", color, { size: "sm" }),
+ background: background(theme.highest, color, "hovered"),
},
- state: {
- hovered: {
- ...text(theme.highest, "sans", color, { size: "sm" }),
- background: background(theme.highest, color, "hovered"),
- },
- clicked: {
- ...text(theme.highest, "sans", color, { size: "sm" }),
- background: background(theme.highest, color, "pressed"),
- }
+ clicked: {
+ ...text(theme.highest, "sans", color, { size: "sm" }),
+ background: background(theme.highest, color, "pressed"),
},
- })
- )
+ },
+ })
}
const tokens_remaining = (color: StyleSets): RemainingTokens => {
- return (
- {
- ...text(theme.highest, "mono", color, { size: "xs" }),
- background: background(theme.highest, "on", "default"),
- margin: { top: 12, right: 20 },
- padding: { right: 4, left: 4, top: 1, bottom: 1 },
- corner_radius: 6,
- }
- )
+ return {
+ ...text(theme.highest, "mono", color, { size: "xs" }),
+ background: background(theme.highest, "on", "default"),
+ margin: { top: 12, right: 20 },
+ padding: { right: 4, left: 4, top: 1, bottom: 1 },
+ corner_radius: 6,
+ }
}
return {
@@ -93,7 +91,10 @@ export default function assistant(): any {
base: {
background: background(theme.middle),
padding: { top: 4, bottom: 4 },
- border: border(theme.middle, "default", { top: true, overlay: true }),
+ border: border(theme.middle, "default", {
+ top: true,
+ overlay: true,
+ }),
},
state: {
hovered: {
@@ -101,7 +102,7 @@ export default function assistant(): any {
},
clicked: {
background: background(theme.middle, "pressed"),
- }
+ },
},
}),
saved_at: {
@@ -39,7 +39,12 @@ export default function channel_modal(): any {
row_height: ITEM_HEIGHT,
header: {
background: background(theme.lowest),
- border: border(theme.middle, { "bottom": true, "top": false, left: false, right: false }),
+ border: border(theme.middle, {
+ bottom: true,
+ top: false,
+ left: false,
+ right: false,
+ }),
padding: {
top: SPACING,
left: SPACING - BUTTON_OFFSET,
@@ -48,7 +53,7 @@ export default function channel_modal(): any {
corner_radii: {
top_right: 12,
top_left: 12,
- }
+ },
},
body: {
background: background(theme.middle),
@@ -57,12 +62,11 @@ export default function channel_modal(): any {
left: SPACING,
right: SPACING,
bottom: SPACING,
-
},
corner_radii: {
bottom_right: 12,
bottom_left: 12,
- }
+ },
},
modal: {
background: background(theme.middle),
@@ -74,7 +78,6 @@ export default function channel_modal(): any {
right: 0,
top: 0,
},
-
},
// FIXME: due to a bug in the picker's size calculation, this must be 600
max_height: 600,
@@ -83,7 +86,7 @@ export default function channel_modal(): any {
...text(theme.middle, "sans", "on", { size: "lg" }),
padding: {
left: BUTTON_OFFSET,
- }
+ },
},
picker: {
empty_container: {},
@@ -108,8 +111,8 @@ export default function channel_modal(): any {
background: background(theme.middle),
padding: {
left: 7,
- right: 7
- }
+ right: 7,
+ },
},
cancel_invite_button: {
...text(theme.middle, "sans", { size: "xs" }),
@@ -125,7 +128,7 @@ export default function channel_modal(): any {
padding: {
left: 4,
right: 4,
- }
+ },
},
contact_avatar: {
corner_radius: 10,
@@ -147,6 +150,6 @@ export default function channel_modal(): any {
background: background(theme.middle, "disabled"),
color: foreground(theme.middle, "disabled"),
},
- }
+ },
}
}
@@ -27,7 +27,7 @@ export default function contacts_panel(): any {
color: foreground(layer, "on"),
icon_width: 14,
button_width: 16,
- corner_radius: 8
+ corner_radius: 8,
}
const project_row = {
@@ -275,7 +275,7 @@ export default function contacts_panel(): any {
list_empty_label_container: {
margin: {
left: NAME_MARGIN,
- }
+ },
},
list_empty_icon: {
color: foreground(layer, "variant"),
@@ -289,7 +289,7 @@ export default function contacts_panel(): any {
top: SPACING / 2,
bottom: SPACING / 2,
left: SPACING,
- right: SPACING
+ right: SPACING,
},
},
state: {
@@ -330,7 +330,7 @@ export default function contacts_panel(): any {
right: 4,
},
background: background(layer, "hovered"),
- ...text(layer, "sans", "hovered", { size: "xs" })
+ ...text(layer, "sans", "hovered", { size: "xs" }),
},
contact_status_free: indicator({ layer, color: "positive" }),
contact_status_busy: indicator({ layer, color: "negative" }),
@@ -404,7 +404,7 @@ export default function contacts_panel(): any {
channel_editor: {
padding: {
left: NAME_MARGIN,
- }
- }
+ },
+ },
}
}
@@ -1,4 +1,3 @@
-
import { useTheme } from "../common"
import { text_button } from "../component/text_button"
import { icon_button } from "../component/icon_button"
@@ -14,14 +13,14 @@ export default function contacts_panel(): any {
base: text_button({}),
state: {
active: {
- ...text_button({ color: "accent" })
- }
- }
+ ...text_button({ color: "accent" }),
+ },
+ },
}),
disclosure: {
...text(theme.lowest, "sans", "base"),
button: icon_button({ variant: "ghost" }),
spacing: 4,
- }
+ },
}
}
@@ -3,5 +3,4 @@ import { background, border } from "./components"
export default function contacts_popover(): any {
const theme = useTheme()
-
}
@@ -307,7 +307,7 @@ export default function editor(): any {
? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
: with_opacity(theme.ramps.green(0.4).hex(), 0.8),
},
- selections: foreground(layer, "accent")
+ selections: foreground(layer, "accent"),
},
composition_mark: {
underline: {
@@ -37,7 +37,7 @@ export default function feedback(): any {
...text(theme.highest, "mono", "on", "disabled"),
background: background(theme.highest, "on", "disabled"),
border: border(theme.highest, "on", "disabled"),
- }
+ },
},
}),
button_margin: 8,
@@ -152,7 +152,7 @@ export default function picker(): any {
0.5
),
},
- }
+ },
}),
}
}
@@ -64,17 +64,17 @@ export default function project_panel(): any {
const unselected_default_style = merge(
base_properties,
unselected?.default ?? {},
- {},
+ {}
)
const unselected_hovered_style = merge(
base_properties,
{ background: background(theme.middle, "hovered") },
- unselected?.hovered ?? {},
+ unselected?.hovered ?? {}
)
const unselected_clicked_style = merge(
base_properties,
{ background: background(theme.middle, "pressed") },
- unselected?.clicked ?? {},
+ unselected?.clicked ?? {}
)
const selected_default_style = merge(
base_properties,
@@ -82,7 +82,7 @@ export default function project_panel(): any {
background: background(theme.lowest),
text: text(theme.lowest, "sans", { size: "sm" }),
},
- selected_style?.default ?? {},
+ selected_style?.default ?? {}
)
const selected_hovered_style = merge(
base_properties,
@@ -90,7 +90,7 @@ export default function project_panel(): any {
background: background(theme.lowest, "hovered"),
text: text(theme.lowest, "sans", { size: "sm" }),
},
- selected_style?.hovered ?? {},
+ selected_style?.hovered ?? {}
)
const selected_clicked_style = merge(
base_properties,
@@ -98,7 +98,7 @@ export default function project_panel(): any {
background: background(theme.lowest, "pressed"),
text: text(theme.lowest, "sans", { size: "sm" }),
},
- selected_style?.clicked ?? {},
+ selected_style?.clicked ?? {}
)
return toggleable({
@@ -175,7 +175,7 @@ export default function project_panel(): any {
default: {
icon_color: foreground(theme.middle, "variant"),
},
- },
+ }
),
cut_entry: entry(
{
@@ -190,7 +190,7 @@ export default function project_panel(): any {
size: "sm",
}),
},
- },
+ }
),
filename_editor: {
background: background(theme.middle, "on"),
@@ -60,7 +60,8 @@ export default function search(): any {
corner_radius: 2,
margin: { right: 2 },
border: {
- width: 1., color: background(theme.highest, "on")
+ width: 1,
+ color: background(theme.highest, "on"),
},
padding: {
left: 4,
@@ -74,14 +75,16 @@ export default function search(): any {
...text(theme.highest, "mono", "variant", "hovered"),
background: background(theme.highest, "on", "hovered"),
border: {
- width: 1., color: background(theme.highest, "on", "hovered")
+ width: 1,
+ color: background(theme.highest, "on", "hovered"),
},
},
clicked: {
...text(theme.highest, "mono", "variant", "pressed"),
background: background(theme.highest, "on", "pressed"),
border: {
- width: 1., color: background(theme.highest, "on", "pressed")
+ width: 1,
+ color: background(theme.highest, "on", "pressed"),
},
},
},
@@ -96,11 +99,19 @@ export default function search(): any {
border: border(theme.highest, "accent"),
},
hovered: {
- background: background(theme.highest, "accent", "hovered"),
+ background: background(
+ theme.highest,
+ "accent",
+ "hovered"
+ ),
border: border(theme.highest, "accent", "hovered"),
},
clicked: {
- background: background(theme.highest, "accent", "pressed"),
+ background: background(
+ theme.highest,
+ "accent",
+ "pressed"
+ ),
border: border(theme.highest, "accent", "pressed"),
},
},
@@ -117,7 +128,8 @@ export default function search(): any {
corner_radius: 2,
margin: { right: 2 },
border: {
- width: 1., color: background(theme.highest, "on")
+ width: 1,
+ color: background(theme.highest, "on"),
},
padding: {
left: 4,
@@ -131,14 +143,16 @@ export default function search(): any {
...text(theme.highest, "mono", "variant", "hovered"),
background: background(theme.highest, "on", "hovered"),
border: {
- width: 1., color: background(theme.highest, "on", "hovered")
+ width: 1,
+ color: background(theme.highest, "on", "hovered"),
},
},
clicked: {
...text(theme.highest, "mono", "variant", "pressed"),
background: background(theme.highest, "on", "pressed"),
border: {
- width: 1., color: background(theme.highest, "on", "pressed")
+ width: 1,
+ color: background(theme.highest, "on", "pressed"),
},
},
},
@@ -153,11 +167,19 @@ export default function search(): any {
border: border(theme.highest, "accent"),
},
hovered: {
- background: background(theme.highest, "accent", "hovered"),
+ background: background(
+ theme.highest,
+ "accent",
+ "hovered"
+ ),
border: border(theme.highest, "accent", "hovered"),
},
clicked: {
- background: background(theme.highest, "accent", "pressed"),
+ background: background(
+ theme.highest,
+ "accent",
+ "pressed"
+ ),
border: border(theme.highest, "accent", "pressed"),
},
},
@@ -168,9 +190,20 @@ export default function search(): any {
// Disabled elements should use a disabled state of an interactive element, not a toggleable element with the inactive state being disabled
action_button: toggleable({
state: {
- inactive: text_button({ variant: "ghost", layer: theme.highest, disabled: true, margin: { right: SEARCH_ROW_SPACING }, text_properties: { size: "sm" } }),
- active: text_button({ variant: "ghost", layer: theme.highest, margin: { right: SEARCH_ROW_SPACING }, text_properties: { size: "sm" } })
- }
+ inactive: text_button({
+ variant: "ghost",
+ layer: theme.highest,
+ disabled: true,
+ margin: { right: SEARCH_ROW_SPACING },
+ text_properties: { size: "sm" },
+ }),
+ active: text_button({
+ variant: "ghost",
+ layer: theme.highest,
+ margin: { right: SEARCH_ROW_SPACING },
+ text_properties: { size: "sm" },
+ }),
+ },
}),
editor,
invalid_editor: {
@@ -216,12 +249,12 @@ export default function search(): any {
dimensions: {
width: 14,
height: 14,
- }
+ },
},
container: {
margin: { right: 4 },
padding: { left: 1, right: 1 },
- }
+ },
},
// Toggle group buttons - Text | Regex | Semantic
mode_button: toggleable({
@@ -233,7 +266,7 @@ export default function search(): any {
border: {
...border(theme.highest, "on"),
left: false,
- right: false
+ right: false,
},
margin: {
top: 1,
@@ -247,13 +280,25 @@ export default function search(): any {
},
state: {
hovered: {
- ...text(theme.highest, "mono", "variant", "hovered", { size: "sm" }),
- background: background(theme.highest, "variant", "hovered"),
+ ...text(theme.highest, "mono", "variant", "hovered", {
+ size: "sm",
+ }),
+ background: background(
+ theme.highest,
+ "variant",
+ "hovered"
+ ),
border: border(theme.highest, "on", "hovered"),
},
clicked: {
- ...text(theme.highest, "mono", "variant", "pressed", { size: "sm" }),
- background: background(theme.highest, "variant", "pressed"),
+ ...text(theme.highest, "mono", "variant", "pressed", {
+ size: "sm",
+ }),
+ background: background(
+ theme.highest,
+ "variant",
+ "pressed"
+ ),
border: border(theme.highest, "on", "pressed"),
},
},
@@ -262,15 +307,19 @@ export default function search(): any {
active: {
default: {
...text(theme.highest, "mono", "on", { size: "sm" }),
- background: background(theme.highest, "on")
+ background: background(theme.highest, "on"),
},
hovered: {
- ...text(theme.highest, "mono", "on", "hovered", { size: "sm" }),
- background: background(theme.highest, "on", "hovered")
+ ...text(theme.highest, "mono", "on", "hovered", {
+ size: "sm",
+ }),
+ background: background(theme.highest, "on", "hovered"),
},
clicked: {
- ...text(theme.highest, "mono", "on", "pressed", { size: "sm" }),
- background: background(theme.highest, "on", "pressed")
+ ...text(theme.highest, "mono", "on", "pressed", {
+ size: "sm",
+ }),
+ background: background(theme.highest, "on", "pressed"),
},
},
},
@@ -300,8 +349,8 @@ export default function search(): any {
},
},
state: {
- hovered: {}
- }
+ hovered: {},
+ },
}),
active: interactive({
base: {
@@ -325,22 +374,30 @@ export default function search(): any {
state: {
hovered: {
...text(theme.highest, "mono", "on", "hovered"),
- background: background(theme.highest, "on", "hovered"),
+ background: background(
+ theme.highest,
+ "on",
+ "hovered"
+ ),
border: border(theme.highest, "on", "hovered"),
},
clicked: {
...text(theme.highest, "mono", "on", "pressed"),
- background: background(theme.highest, "on", "pressed"),
+ background: background(
+ theme.highest,
+ "on",
+ "pressed"
+ ),
border: border(theme.highest, "on", "pressed"),
},
},
- })
- }
+ }),
+ },
}),
search_bar_row_height: 34,
search_row_spacing: 8,
option_button_height: 22,
modes_container: {},
- ...search_results()
+ ...search_results(),
}
}
@@ -34,9 +34,11 @@ export default function status_bar(): any {
...text(layer, "mono", "base", { size: "xs" }),
},
active_language: text_button({
- color: "base"
+ color: "base",
+ }),
+ auto_update_progress_message: text(layer, "sans", "base", {
+ size: "xs",
}),
- auto_update_progress_message: text(layer, "sans", "base", { size: "xs" }),
auto_update_done_message: text(layer, "sans", "base", { size: "xs" }),
lsp_status: interactive({
base: {
@@ -125,7 +127,7 @@ export default function status_bar(): any {
},
clicked: {
background: background(layer, "pressed"),
- }
+ },
},
}),
state: {
@@ -93,7 +93,7 @@ export default function tab_bar(): any {
border: border(theme.lowest, "on", {
bottom: true,
overlay: true,
- })
+ }),
},
state: {
hovered: {
@@ -101,7 +101,7 @@ export default function tab_bar(): any {
background: background(theme.highest, "on", "hovered"),
},
disabled: {
- color: foreground(theme.highest, "on", "disabled")
+ color: foreground(theme.highest, "on", "disabled"),
},
},
})
@@ -162,6 +162,6 @@ export default function tab_bar(): any {
right: false,
},
},
- nav_button: nav_button
+ nav_button: nav_button,
}
}
@@ -187,10 +187,10 @@ export function titlebar(): any {
project_name_divider: text(theme.lowest, "sans", "variant"),
project_menu_button: toggleable_text_button(theme, {
- color: 'base',
+ color: "base",
}),
git_menu_button: toggleable_text_button(theme, {
- color: 'variant',
+ color: "variant",
}),
// Collaborators
@@ -13,16 +13,16 @@ export interface Theme {
is_light: boolean
/**
- * App background, other elements that should sit directly on top of the background.
- */
+ * App background, other elements that should sit directly on top of the background.
+ */
lowest: Layer
/**
- * Panels, tabs, other UI surfaces that sit on top of the background.
- */
+ * Panels, tabs, other UI surfaces that sit on top of the background.
+ */
middle: Layer
/**
- * Editors like code buffers, conversation editors, etc.
- */
+ * Editors like code buffers, conversation editors, etc.
+ */
highest: Layer
ramps: RampSet
@@ -206,7 +206,10 @@ function build_color_family(ramps: RampSet): ColorFamily {
for (const ramp in ramps) {
const ramp_value = ramps[ramp as keyof RampSet]
- const lightnessValues = [ramp_value(0).get('hsl.l') * 100, ramp_value(1).get('hsl.l') * 100]
+ const lightnessValues = [
+ ramp_value(0).get("hsl.l") * 100,
+ ramp_value(1).get("hsl.l") * 100,
+ ]
const low = Math.min(...lightnessValues)
const high = Math.max(...lightnessValues)
const range = high - low
@@ -4,11 +4,7 @@ import {
SingleOtherToken,
TokenTypes,
} from "@tokens-studio/types"
-import {
- Shadow,
- SyntaxHighlightStyle,
- ThemeSyntax,
-} from "../create_theme"
+import { Shadow, SyntaxHighlightStyle, ThemeSyntax } from "../create_theme"
import { LayerToken, layer_token } from "./layer"
import { PlayersToken, players_token } from "./players"
import { color_token } from "./token"
@@ -23,7 +23,5 @@
"skipLibCheck": true,
"useUnknownInCatchVariables": false
},
- "exclude": [
- "node_modules"
- ]
+ "exclude": ["node_modules"]
}