mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-25 01:34:02 +00:00
Format
This commit is contained in:
parent
33c9f14852
commit
d91a9615b5
27 changed files with 354 additions and 244 deletions
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
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"),
|
||||
},
|
||||
},
|
||||
})
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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"]
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue