zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-16 00:47:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Format

Browse Source
This commit is contained in:
Nate Butler 2023-08-29 16:02:04 -04:00
parent 33c9f14852
commit d91a9615b5
27 changed files with 354 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
styles/src/build_themes.ts
View File

@ -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`)

4
styles/src/build_tokens.ts
View File

@ -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)

55
styles/src/component/button.ts
View File

@ -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,

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

@ -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,
}),
},
})

8
styles/src/component/indicator.ts
View File

@ -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 },

2
styles/src/component/input.ts
View File

@ -18,6 +18,6 @@ export const input = () => {
bottom: 3,
left: 12,
right: 8,
}
},
}
}

23
styles/src/component/margin.ts
View File

@ -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,
}
}

23
styles/src/component/padding.ts
View File

@ -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,
}
}

20
styles/src/component/tab.ts
View File

@ -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,
},
}
}
},
},
})
}

67
styles/src/component/tab_bar_button.ts
View File

@ -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,
},
},
},
state: {
hovered: {
container: {
corner_radius: 4,
padding: {
top: 4, bottom: 4, left: 4, right: 4
},
margin: {
left: button_spacing / 2,
right: button_spacing / 2,
},
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"),
},
},
})
)
},
})
}

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

@ -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"
),
},
},
})
}

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

@ -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: {

23
styles/src/style_tree/collab_modals.ts
View File

@ -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"),
},
}
},
}
}

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

@ -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,
}
}
},
},
}
}

9
styles/src/style_tree/component_test.ts
View File

@ -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,
}
},
}
}

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

@ -3,5 +3,4 @@ import { background, border } from "./components"
export default function contacts_popover(): any {
const theme = useTheme()
}

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

@ -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: {

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

@ -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,

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

@ -152,7 +152,7 @@ export default function picker(): any {
0.5
),
},
}
},
}),
}
}

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

@ -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"),

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

@ -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(),
}
}

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

@ -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: {

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

@ -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,
}
}

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

@ -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

17
styles/src/theme/create_theme.ts
View File

@ -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

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

@ -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"

4
styles/tsconfig.json
View File

@ -23,7 +23,5 @@
"skipLibCheck": true,
"useUnknownInCatchVariables": false
},
"exclude": [
"node_modules"
]
"exclude": ["node_modules"]
}