Merge branch 'main' into Z-1292/show_search_results_in_scrollbar
This commit is contained in:
Piotr Osiewicz
@@ -0,0 +1,62 @@
|
||||
import contact_finder from "./contact_finder"
|
||||
import contacts_popover from "./contacts_popover"
|
||||
import command_palette from "./command_palette"
|
||||
import project_panel from "./project_panel"
|
||||
import search from "./search"
|
||||
import picker from "./picker"
|
||||
import workspace from "./workspace"
|
||||
import context_menu from "./context_menu"
|
||||
import shared_screen from "./shared_screen"
|
||||
import project_diagnostics from "./project_diagnostics"
|
||||
import contact_notification from "./contact_notification"
|
||||
import update_notification from "./update_notification"
|
||||
import simple_message_notification from "./simple_message_notification"
|
||||
import project_shared_notification from "./project_shared_notification"
|
||||
import tooltip from "./tooltip"
|
||||
import terminal from "./terminal"
|
||||
import contact_list from "./contact_list"
|
||||
import toolbar_dropdown_menu from "./toolbar_dropdown_menu"
|
||||
import incoming_call_notification from "./incoming_call_notification"
|
||||
import welcome from "./welcome"
|
||||
import copilot from "./copilot"
|
||||
import assistant from "./assistant"
|
||||
import { titlebar } from "./titlebar"
|
||||
import editor from "./editor"
|
||||
import feedback from "./feedback"
|
||||
import { useTheme } from "../common"
|
||||
|
||||
export default function app(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
meta: {
|
||||
name: theme.name,
|
||||
is_light: theme.is_light,
|
||||
},
|
||||
command_palette: command_palette(),
|
||||
contact_notification: contact_notification(),
|
||||
project_shared_notification: project_shared_notification(),
|
||||
incoming_call_notification: incoming_call_notification(),
|
||||
picker: picker(),
|
||||
workspace: workspace(),
|
||||
titlebar: titlebar(),
|
||||
copilot: copilot(),
|
||||
welcome: welcome(),
|
||||
context_menu: context_menu(),
|
||||
editor: editor(),
|
||||
project_diagnostics: project_diagnostics(),
|
||||
project_panel: project_panel(),
|
||||
contacts_popover: contacts_popover(),
|
||||
contact_finder: contact_finder(),
|
||||
contact_list: contact_list(),
|
||||
toolbar_dropdown_menu: toolbar_dropdown_menu(),
|
||||
search: search(),
|
||||
shared_screen: shared_screen(),
|
||||
update_notification: update_notification(),
|
||||
simple_message_notification: simple_message_notification(),
|
||||
tooltip: tooltip(),
|
||||
terminal: terminal(),
|
||||
assistant: assistant(),
|
||||
feedback: feedback()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
import { text, border, background, foreground } from "./components"
|
||||
import { interactive } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function assistant(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
container: {
|
||||
background: background(theme.highest),
|
||||
padding: { left: 12 },
|
||||
},
|
||||
message_header: {
|
||||
margin: { bottom: 6, top: 6 },
|
||||
background: background(theme.highest),
|
||||
},
|
||||
hamburger_button: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
asset: "icons/hamburger_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 12, right: 8.5 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
split_button: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
asset: "icons/split_message_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 8.5, right: 8.5 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
quote_button: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
asset: "icons/quote_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 8.5, right: 8.5 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
assist_button: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
asset: "icons/assist_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 8.5, right: 8.5 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
zoom_in_button: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
asset: "icons/maximize_8.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 10, right: 10 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
zoom_out_button: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
asset: "icons/minimize_8.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 10, right: 10 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
plus_button: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
asset: "icons/plus_12.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 10, right: 10 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
title: {
|
||||
...text(theme.highest, "sans", "default", { size: "sm" }),
|
||||
},
|
||||
saved_conversation: {
|
||||
container: interactive({
|
||||
base: {
|
||||
background: background(theme.highest, "on"),
|
||||
padding: { top: 4, bottom: 4 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
saved_at: {
|
||||
margin: { left: 8 },
|
||||
...text(theme.highest, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
title: {
|
||||
margin: { left: 16 },
|
||||
...text(theme.highest, "sans", "default", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
user_sender: {
|
||||
default: {
|
||||
...text(theme.highest, "sans", "default", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
assistant_sender: {
|
||||
default: {
|
||||
...text(theme.highest, "sans", "accent", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
system_sender: {
|
||||
default: {
|
||||
...text(theme.highest, "sans", "variant", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
sent_at: {
|
||||
margin: { top: 2, left: 8 },
|
||||
...text(theme.highest, "sans", "default", { size: "2xs" }),
|
||||
},
|
||||
model: interactive({
|
||||
base: {
|
||||
background: background(theme.highest, "on"),
|
||||
margin: { left: 12, right: 12, top: 12 },
|
||||
padding: 4,
|
||||
corner_radius: 4,
|
||||
...text(theme.highest, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
border: border(theme.highest, "on", { overlay: true }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
remaining_tokens: {
|
||||
background: background(theme.highest, "on"),
|
||||
margin: { top: 12, right: 24 },
|
||||
padding: 4,
|
||||
corner_radius: 4,
|
||||
...text(theme.highest, "sans", "positive", { size: "xs" }),
|
||||
},
|
||||
no_remaining_tokens: {
|
||||
background: background(theme.highest, "on"),
|
||||
margin: { top: 12, right: 24 },
|
||||
padding: 4,
|
||||
corner_radius: 4,
|
||||
...text(theme.highest, "sans", "negative", { size: "xs" }),
|
||||
},
|
||||
error_icon: {
|
||||
margin: { left: 8 },
|
||||
color: foreground(theme.highest, "negative"),
|
||||
width: 12,
|
||||
},
|
||||
api_key_editor: {
|
||||
background: background(theme.highest, "on"),
|
||||
corner_radius: 6,
|
||||
text: text(theme.highest, "mono", "on"),
|
||||
placeholder_text: text(theme.highest, "mono", "on", "disabled", {
|
||||
size: "xs",
|
||||
}),
|
||||
selection: theme.players[0],
|
||||
border: border(theme.highest, "on"),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
},
|
||||
api_key_prompt: {
|
||||
padding: 10,
|
||||
...text(theme.highest, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { with_opacity } from "../theme/color"
|
||||
import { text, background } from "./components"
|
||||
import { toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function command_palette(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const key = toggleable({
|
||||
base: {
|
||||
text: text(theme.highest, "mono", "variant", "default", {
|
||||
size: "xs",
|
||||
}),
|
||||
corner_radius: 2,
|
||||
background: background(theme.highest, "on"),
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 2,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
active: {
|
||||
text: text(theme.highest, "mono", "on", "default", {
|
||||
size: "xs",
|
||||
}),
|
||||
background: with_opacity(background(theme.highest, "on"), 0.2),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
keystroke_spacing: 8,
|
||||
// TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
|
||||
key: {
|
||||
inactive: { ...key.inactive },
|
||||
active: key.active,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,302 @@
|
||||
import { font_families, font_sizes, FontWeight } from "../common"
|
||||
import { Layer, Styles, StyleSets, Style } from "../theme/create_theme"
|
||||
|
||||
function is_style_set(key: any): key is StyleSets {
|
||||
return [
|
||||
"base",
|
||||
"variant",
|
||||
"on",
|
||||
"accent",
|
||||
"positive",
|
||||
"warning",
|
||||
"negative",
|
||||
].includes(key)
|
||||
}
|
||||
|
||||
function is_style(key: any): key is Styles {
|
||||
return [
|
||||
"default",
|
||||
"active",
|
||||
"disabled",
|
||||
"hovered",
|
||||
"pressed",
|
||||
"inverted",
|
||||
].includes(key)
|
||||
}
|
||||
function get_style(
|
||||
layer: Layer,
|
||||
possible_style_set_or_style?: any,
|
||||
possible_style?: any
|
||||
): Style {
|
||||
let style_set: StyleSets = "base"
|
||||
let style: Styles = "default"
|
||||
if (is_style_set(possible_style_set_or_style)) {
|
||||
style_set = possible_style_set_or_style
|
||||
} else if (is_style(possible_style_set_or_style)) {
|
||||
style = possible_style_set_or_style
|
||||
}
|
||||
|
||||
if (is_style(possible_style)) {
|
||||
style = possible_style
|
||||
}
|
||||
|
||||
return layer[style_set][style]
|
||||
}
|
||||
|
||||
export function background(layer: Layer, style?: Styles): string
|
||||
export function background(
|
||||
layer: Layer,
|
||||
style_set?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function background(
|
||||
layer: Layer,
|
||||
style_set_or_styles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return get_style(layer, style_set_or_styles, style).background
|
||||
}
|
||||
|
||||
export function border_color(layer: Layer, style?: Styles): string
|
||||
export function border_color(
|
||||
layer: Layer,
|
||||
style_set?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function border_color(
|
||||
layer: Layer,
|
||||
style_set_or_styles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return get_style(layer, style_set_or_styles, style).border
|
||||
}
|
||||
|
||||
export function foreground(layer: Layer, style?: Styles): string
|
||||
export function foreground(
|
||||
layer: Layer,
|
||||
style_set?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function foreground(
|
||||
layer: Layer,
|
||||
style_set_or_styles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return get_style(layer, style_set_or_styles, style).foreground
|
||||
}
|
||||
|
||||
export interface TextStyle extends Object {
|
||||
family: keyof typeof font_families
|
||||
color: string
|
||||
size: number
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
}
|
||||
|
||||
export interface TextProperties {
|
||||
size?: keyof typeof font_sizes
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
color?: string
|
||||
features?: FontFeatures
|
||||
}
|
||||
|
||||
interface FontFeatures {
|
||||
/** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */
|
||||
calt?: boolean
|
||||
/** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */
|
||||
case?: boolean
|
||||
/** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */
|
||||
cpsp?: boolean
|
||||
/** Fractions: Replaces figures separated by a slash with diagonal fractions */
|
||||
frac?: boolean
|
||||
/** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */
|
||||
liga?: boolean
|
||||
/** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */
|
||||
onum?: boolean
|
||||
/** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */
|
||||
ordn?: boolean
|
||||
/** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */
|
||||
pnum?: boolean
|
||||
/** Stylistic set 01 */
|
||||
ss01?: boolean
|
||||
/** Stylistic set 02 */
|
||||
ss02?: boolean
|
||||
/** Stylistic set 03 */
|
||||
ss03?: boolean
|
||||
/** Stylistic set 04 */
|
||||
ss04?: boolean
|
||||
/** Stylistic set 05 */
|
||||
ss05?: boolean
|
||||
/** Stylistic set 06 */
|
||||
ss06?: boolean
|
||||
/** Stylistic set 07 */
|
||||
ss07?: boolean
|
||||
/** Stylistic set 08 */
|
||||
ss08?: boolean
|
||||
/** Stylistic set 09 */
|
||||
ss09?: boolean
|
||||
/** Stylistic set 10 */
|
||||
ss10?: boolean
|
||||
/** Stylistic set 11 */
|
||||
ss11?: boolean
|
||||
/** Stylistic set 12 */
|
||||
ss12?: boolean
|
||||
/** Stylistic set 13 */
|
||||
ss13?: boolean
|
||||
/** Stylistic set 14 */
|
||||
ss14?: boolean
|
||||
/** Stylistic set 15 */
|
||||
ss15?: boolean
|
||||
/** Stylistic set 16 */
|
||||
ss16?: boolean
|
||||
/** Stylistic set 17 */
|
||||
ss17?: boolean
|
||||
/** Stylistic set 18 */
|
||||
ss18?: boolean
|
||||
/** Stylistic set 19 */
|
||||
ss19?: boolean
|
||||
/** Stylistic set 20 */
|
||||
ss20?: boolean
|
||||
/** Subscript: Replaces default glyphs with subscript glyphs */
|
||||
subs?: boolean
|
||||
/** Superscript: Replaces default glyphs with superscript glyphs */
|
||||
sups?: boolean
|
||||
/** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */
|
||||
swsh?: boolean
|
||||
/** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */
|
||||
titl?: boolean
|
||||
/** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */
|
||||
tnum?: boolean
|
||||
/** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */
|
||||
zero?: boolean
|
||||
}
|
||||
|
||||
export function text(
|
||||
layer: Layer,
|
||||
font_family: keyof typeof font_families,
|
||||
style_set: StyleSets,
|
||||
style: Styles,
|
||||
properties?: TextProperties
|
||||
): TextStyle
|
||||
export function text(
|
||||
layer: Layer,
|
||||
font_family: keyof typeof font_families,
|
||||
style_set: StyleSets,
|
||||
properties?: TextProperties
|
||||
): TextStyle
|
||||
export function text(
|
||||
layer: Layer,
|
||||
font_family: keyof typeof font_families,
|
||||
style: Styles,
|
||||
properties?: TextProperties
|
||||
): TextStyle
|
||||
export function text(
|
||||
layer: Layer,
|
||||
font_family: keyof typeof font_families,
|
||||
properties?: TextProperties
|
||||
): TextStyle
|
||||
export function text(
|
||||
layer: Layer,
|
||||
font_family: keyof typeof font_families,
|
||||
style_set_style_or_properties?: StyleSets | Styles | TextProperties,
|
||||
style_or_properties?: Styles | TextProperties,
|
||||
properties?: TextProperties
|
||||
) {
|
||||
const style = get_style(
|
||||
layer,
|
||||
style_set_style_or_properties,
|
||||
style_or_properties
|
||||
)
|
||||
|
||||
if (typeof style_set_style_or_properties === "object") {
|
||||
properties = style_set_style_or_properties
|
||||
}
|
||||
if (typeof style_or_properties === "object") {
|
||||
properties = style_or_properties
|
||||
}
|
||||
|
||||
const size = font_sizes[properties?.size || "sm"]
|
||||
const color = properties?.color || style.foreground
|
||||
|
||||
return {
|
||||
family: font_families[font_family],
|
||||
...properties,
|
||||
color,
|
||||
size,
|
||||
}
|
||||
}
|
||||
|
||||
export interface Border {
|
||||
color: string
|
||||
width: number
|
||||
top?: boolean
|
||||
bottom?: boolean
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
overlay?: boolean
|
||||
}
|
||||
|
||||
export interface BorderProperties {
|
||||
width?: number
|
||||
top?: boolean
|
||||
bottom?: boolean
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
overlay?: boolean
|
||||
}
|
||||
|
||||
export function border(
|
||||
layer: Layer,
|
||||
style_set: StyleSets,
|
||||
style: Styles,
|
||||
properties?: BorderProperties
|
||||
): Border
|
||||
export function border(
|
||||
layer: Layer,
|
||||
style_set: StyleSets,
|
||||
properties?: BorderProperties
|
||||
): Border
|
||||
export function border(
|
||||
layer: Layer,
|
||||
style: Styles,
|
||||
properties?: BorderProperties
|
||||
): Border
|
||||
export function border(layer: Layer, properties?: BorderProperties): Border
|
||||
export function border(
|
||||
layer: Layer,
|
||||
style_set_or_properties?: StyleSets | Styles | BorderProperties,
|
||||
style_or_properties?: Styles | BorderProperties,
|
||||
properties?: BorderProperties
|
||||
): Border {
|
||||
const style = get_style(layer, style_set_or_properties, style_or_properties)
|
||||
|
||||
if (typeof style_set_or_properties === "object") {
|
||||
properties = style_set_or_properties
|
||||
}
|
||||
if (typeof style_or_properties === "object") {
|
||||
properties = style_or_properties
|
||||
}
|
||||
|
||||
return {
|
||||
color: style.border,
|
||||
width: 1,
|
||||
...properties,
|
||||
}
|
||||
}
|
||||
|
||||
export function svg(
|
||||
color: string,
|
||||
asset: string,
|
||||
width: number,
|
||||
height: number
|
||||
) {
|
||||
return {
|
||||
color,
|
||||
asset,
|
||||
dimensions: {
|
||||
width,
|
||||
height,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import picker from "./picker"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function contact_finder(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const side_margin = 6
|
||||
const contact_button = {
|
||||
background: background(theme.middle, "variant"),
|
||||
color: foreground(theme.middle, "variant"),
|
||||
icon_width: 8,
|
||||
button_width: 16,
|
||||
corner_radius: 8,
|
||||
}
|
||||
|
||||
const picker_style = picker()
|
||||
const picker_input = {
|
||||
background: background(theme.middle, "on"),
|
||||
corner_radius: 6,
|
||||
text: text(theme.middle, "mono"),
|
||||
placeholder_text: text(theme.middle, "mono", "on", "disabled", {
|
||||
size: "xs",
|
||||
}),
|
||||
selection: theme.players[0],
|
||||
border: border(theme.middle),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
left: side_margin,
|
||||
right: side_margin,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
picker: {
|
||||
empty_container: {},
|
||||
item: {
|
||||
...picker_style.item,
|
||||
margin: { left: side_margin, right: side_margin },
|
||||
},
|
||||
no_matches: picker_style.no_matches,
|
||||
input_editor: picker_input,
|
||||
empty_input_editor: picker_input,
|
||||
header: picker_style.header,
|
||||
footer: picker_style.footer,
|
||||
},
|
||||
row_height: 28,
|
||||
contact_avatar: {
|
||||
corner_radius: 10,
|
||||
width: 18,
|
||||
},
|
||||
contact_username: {
|
||||
padding: {
|
||||
left: 8,
|
||||
},
|
||||
},
|
||||
contact_button: {
|
||||
...contact_button,
|
||||
hover: {
|
||||
background: background(theme.middle, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
disabled_contact_button: {
|
||||
...contact_button,
|
||||
background: background(theme.middle, "disabled"),
|
||||
color: foreground(theme.middle, "disabled"),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,247 @@
|
||||
import {
|
||||
background,
|
||||
border,
|
||||
border_color,
|
||||
foreground,
|
||||
text,
|
||||
} from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
export default function contacts_panel(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const name_margin = 8
|
||||
const side_padding = 12
|
||||
|
||||
const layer = theme.middle
|
||||
|
||||
const contact_button = {
|
||||
background: background(layer, "on"),
|
||||
color: foreground(layer, "on"),
|
||||
icon_width: 8,
|
||||
button_width: 16,
|
||||
corner_radius: 8,
|
||||
}
|
||||
const project_row = {
|
||||
guest_avatar_spacing: 4,
|
||||
height: 24,
|
||||
guest_avatar: {
|
||||
corner_radius: 8,
|
||||
width: 14,
|
||||
},
|
||||
name: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: name_margin,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
guests: {
|
||||
margin: {
|
||||
left: name_margin,
|
||||
right: name_margin,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
left: side_padding,
|
||||
right: side_padding,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
background: background(layer),
|
||||
padding: { top: 12 },
|
||||
user_query_editor: {
|
||||
background: background(layer, "on"),
|
||||
corner_radius: 6,
|
||||
text: text(layer, "mono", "on"),
|
||||
placeholder_text: text(layer, "mono", "on", "disabled", {
|
||||
size: "xs",
|
||||
}),
|
||||
selection: theme.players[0],
|
||||
border: border(layer, "on"),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
left: 6,
|
||||
},
|
||||
},
|
||||
user_query_editor_height: 33,
|
||||
add_contact_button: {
|
||||
margin: { left: 6, right: 12 },
|
||||
color: foreground(layer, "on"),
|
||||
button_width: 28,
|
||||
icon_width: 16,
|
||||
},
|
||||
row_height: 28,
|
||||
section_icon_size: 8,
|
||||
header_row: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: { top: 14 },
|
||||
padding: {
|
||||
left: side_padding,
|
||||
right: side_padding,
|
||||
},
|
||||
background: background(layer, "default"), // posiewic: breaking change
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
}, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(layer, "mono", "active", { size: "sm" }),
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
leave_call: interactive({
|
||||
base: {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
corner_radius: 6,
|
||||
margin: {
|
||||
top: 1,
|
||||
},
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "hovered", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
contact_row: {
|
||||
inactive: {
|
||||
default: {
|
||||
padding: {
|
||||
left: side_padding,
|
||||
right: side_padding,
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
padding: {
|
||||
left: side_padding,
|
||||
right: side_padding,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
contact_avatar: {
|
||||
corner_radius: 10,
|
||||
width: 18,
|
||||
},
|
||||
contact_status_free: {
|
||||
corner_radius: 4,
|
||||
padding: 4,
|
||||
margin: { top: 12, left: 12 },
|
||||
background: foreground(layer, "positive"),
|
||||
},
|
||||
contact_status_busy: {
|
||||
corner_radius: 4,
|
||||
padding: 4,
|
||||
margin: { top: 12, left: 12 },
|
||||
background: foreground(layer, "negative"),
|
||||
},
|
||||
contact_username: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: name_margin,
|
||||
},
|
||||
},
|
||||
contact_button_spacing: name_margin,
|
||||
contact_button: interactive({
|
||||
base: { ...contact_button },
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
disabled_button: {
|
||||
...contact_button,
|
||||
background: background(layer, "on"),
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
calling_indicator: {
|
||||
...text(layer, "mono", "variant", { size: "xs" }),
|
||||
},
|
||||
tree_branch: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: border_color(layer),
|
||||
width: 1,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: border_color(layer),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: border_color(layer),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
project_row: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...project_row,
|
||||
background: background(layer),
|
||||
icon: {
|
||||
margin: { left: name_margin },
|
||||
color: foreground(layer, "variant"),
|
||||
width: 12,
|
||||
},
|
||||
name: {
|
||||
...project_row.name,
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: { background: background(layer, "active") },
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { background, foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function contact_notification(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const avatar_size = 12
|
||||
const header_padding = 8
|
||||
|
||||
return {
|
||||
header_avatar: {
|
||||
height: avatar_size,
|
||||
width: avatar_size,
|
||||
corner_radius: 6,
|
||||
},
|
||||
header_message: {
|
||||
...text(theme.lowest, "sans", { size: "xs" }),
|
||||
margin: { left: header_padding, right: header_padding },
|
||||
},
|
||||
header_height: 18,
|
||||
body_message: {
|
||||
...text(theme.lowest, "sans", { size: "xs" }),
|
||||
margin: { left: avatar_size + header_padding, top: 6, bottom: 6 },
|
||||
},
|
||||
button: interactive({
|
||||
base: {
|
||||
...text(theme.lowest, "sans", "on", { size: "xs" }),
|
||||
background: background(theme.lowest, "on"),
|
||||
padding: 4,
|
||||
corner_radius: 6,
|
||||
margin: { left: 6 },
|
||||
},
|
||||
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(theme.lowest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
dismiss_button: {
|
||||
default: {
|
||||
color: foreground(theme.lowest, "variant"),
|
||||
icon_width: 8,
|
||||
icon_height: 8,
|
||||
button_width: 8,
|
||||
button_height: 8,
|
||||
hover: {
|
||||
color: foreground(theme.lowest, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useTheme } from "../theme"
|
||||
import { background, border } from "./components"
|
||||
|
||||
export default function contacts_popover(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
background: background(theme.middle),
|
||||
corner_radius: 6,
|
||||
padding: { top: 6, bottom: 6 },
|
||||
shadow: theme.popover_shadow,
|
||||
border: border(theme.middle),
|
||||
width: 300,
|
||||
height: 400,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { background, border, border_color, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function context_menu(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
background: background(theme.middle),
|
||||
corner_radius: 10,
|
||||
padding: 4,
|
||||
shadow: theme.popover_shadow,
|
||||
border: border(theme.middle),
|
||||
keystroke_margin: 30,
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
icon_spacing: 8,
|
||||
icon_width: 14,
|
||||
padding: { left: 6, right: 6, top: 2, bottom: 2 },
|
||||
corner_radius: 6,
|
||||
label: text(theme.middle, "sans", { size: "sm" }),
|
||||
keystroke: {
|
||||
...text(theme.middle, "sans", "variant", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(theme.middle, "hovered"),
|
||||
label: text(theme.middle, "sans", "hovered", {
|
||||
size: "sm",
|
||||
}),
|
||||
keystroke: {
|
||||
...text(theme.middle, "sans", "hovered", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
background: background(theme.middle, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(theme.middle, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(theme.middle, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(theme.middle, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
separator: {
|
||||
background: border_color(theme.middle),
|
||||
margin: { top: 2, bottom: 2 },
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
import { background, border, foreground, svg, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
export default function copilot(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const content_width = 264
|
||||
|
||||
const cta_button =
|
||||
// Copied from welcome screen. FIXME: Move this into a ZDS component
|
||||
interactive({
|
||||
base: {
|
||||
background: background(theme.middle),
|
||||
border: border(theme.middle, "default"),
|
||||
corner_radius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(theme.middle, "sans", "default", { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.middle, "sans", "default", { size: "sm" }),
|
||||
background: background(theme.middle, "hovered"),
|
||||
border: border(theme.middle, "active"),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
out_link_icon: interactive({
|
||||
base: {
|
||||
icon: svg(
|
||||
foreground(theme.middle, "variant"),
|
||||
"icons/link_out_12.svg",
|
||||
12,
|
||||
12
|
||||
),
|
||||
container: {
|
||||
corner_radius: 6,
|
||||
padding: { left: 6 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(theme.middle, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
modal: {
|
||||
title_text: {
|
||||
default: {
|
||||
...text(theme.middle, "sans", {
|
||||
size: "xs",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
titlebar: {
|
||||
background: background(theme.lowest),
|
||||
border: border(theme.middle, "active"),
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
background: background(theme.lowest),
|
||||
padding: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 8,
|
||||
},
|
||||
},
|
||||
close_icon: interactive({
|
||||
base: {
|
||||
icon: svg(
|
||||
foreground(theme.middle, "variant"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
container: {
|
||||
corner_radius: 2,
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: svg(
|
||||
foreground(theme.middle, "on"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
icon: svg(
|
||||
foreground(theme.middle, "base"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
dimensions: {
|
||||
width: 280,
|
||||
height: 280,
|
||||
},
|
||||
},
|
||||
|
||||
auth: {
|
||||
content_width,
|
||||
|
||||
cta_button,
|
||||
|
||||
header: {
|
||||
icon: svg(
|
||||
foreground(theme.middle, "default"),
|
||||
"icons/zed_plus_copilot_32.svg",
|
||||
92,
|
||||
32
|
||||
),
|
||||
container: {
|
||||
margin: {
|
||||
top: 35,
|
||||
bottom: 5,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
prompting: {
|
||||
subheading: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
margin: {
|
||||
top: 6,
|
||||
bottom: 12,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
|
||||
hint: {
|
||||
...text(theme.middle, "sans", {
|
||||
size: "xs",
|
||||
color: "#838994",
|
||||
}),
|
||||
margin: {
|
||||
top: 6,
|
||||
bottom: 2,
|
||||
},
|
||||
},
|
||||
|
||||
device_code: {
|
||||
text: text(theme.middle, "mono", { size: "sm" }),
|
||||
cta: {
|
||||
...cta_button,
|
||||
background: background(theme.lowest),
|
||||
border: border(theme.lowest, "inverted"),
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
margin: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
},
|
||||
left: content_width / 2,
|
||||
left_container: {
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 0,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
right: (content_width * 1) / 3,
|
||||
right_container: interactive({
|
||||
base: {
|
||||
border: border(theme.lowest, "inverted", {
|
||||
bottom: false,
|
||||
right: false,
|
||||
top: false,
|
||||
left: true,
|
||||
}),
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 5,
|
||||
left: 8,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
border: border(theme.middle, "active", {
|
||||
bottom: false,
|
||||
right: false,
|
||||
top: false,
|
||||
left: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
not_authorized: {
|
||||
subheading: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
|
||||
margin: {
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
|
||||
warning: {
|
||||
...text(theme.middle, "sans", {
|
||||
size: "xs",
|
||||
color: foreground(theme.middle, "warning"),
|
||||
}),
|
||||
border: border(theme.middle, "warning"),
|
||||
background: background(theme.middle, "warning"),
|
||||
corner_radius: 2,
|
||||
padding: {
|
||||
top: 4,
|
||||
left: 4,
|
||||
bottom: 4,
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
bottom: 16,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
authorized: {
|
||||
subheading: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
|
||||
margin: {
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
|
||||
hint: {
|
||||
...text(theme.middle, "sans", {
|
||||
size: "xs",
|
||||
color: "#838994",
|
||||
}),
|
||||
margin: {
|
||||
top: 24,
|
||||
bottom: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
import { with_opacity } from "../theme/color"
|
||||
import { Layer, StyleSets } from "../theme/create_theme"
|
||||
import {
|
||||
background,
|
||||
border,
|
||||
border_color,
|
||||
foreground,
|
||||
text,
|
||||
} from "./components"
|
||||
import hover_popover from "./hover_popover"
|
||||
|
||||
import { build_syntax } from "../theme/syntax"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function editor(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const { is_light } = theme
|
||||
|
||||
const layer = theme.highest
|
||||
|
||||
const autocomplete_item = {
|
||||
corner_radius: 6,
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 6,
|
||||
right: 6,
|
||||
top: 2,
|
||||
},
|
||||
}
|
||||
|
||||
function diagnostic(layer: Layer, style_set: StyleSets) {
|
||||
return {
|
||||
text_scale_factor: 0.857,
|
||||
header: {
|
||||
border: border(layer, {
|
||||
top: true,
|
||||
}),
|
||||
},
|
||||
message: {
|
||||
text: text(layer, "sans", style_set, "default", { size: "sm" }),
|
||||
highlight_text: text(layer, "sans", style_set, "default", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const syntax = build_syntax()
|
||||
|
||||
return {
|
||||
text_color: syntax.primary.color,
|
||||
background: background(layer),
|
||||
active_line_background: with_opacity(background(layer, "on"), 0.75),
|
||||
highlighted_line_background: background(layer, "on"),
|
||||
// Inline autocomplete suggestions, Co-pilot suggestions, etc.
|
||||
hint: syntax.hint,
|
||||
suggestion: syntax.predictive,
|
||||
code_actions: {
|
||||
indicator: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "variant", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: foreground(layer, "accent"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "accent", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "accent", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
vertical_scale: 0.55,
|
||||
},
|
||||
folds: {
|
||||
icon_margin_scale: 2.5,
|
||||
folded_icon: "icons/chevron_right_8.svg",
|
||||
foldable_icon: "icons/chevron_down_8.svg",
|
||||
indicator: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "base"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: foreground(layer, "default"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
ellipses: {
|
||||
text_color: theme.ramps.neutral(0.71).hex(),
|
||||
corner_radius_factor: 0.15,
|
||||
background: {
|
||||
// Copied from hover_popover highlight
|
||||
default: {
|
||||
color: theme.ramps.neutral(0.5).alpha(0.0).hex(),
|
||||
},
|
||||
|
||||
hovered: {
|
||||
color: theme.ramps.neutral(0.5).alpha(0.5).hex(),
|
||||
},
|
||||
|
||||
clicked: {
|
||||
color: theme.ramps.neutral(0.5).alpha(0.7).hex(),
|
||||
},
|
||||
},
|
||||
},
|
||||
fold_background: foreground(layer, "variant"),
|
||||
},
|
||||
diff: {
|
||||
deleted: is_light
|
||||
? theme.ramps.red(0.5).hex()
|
||||
: theme.ramps.red(0.4).hex(),
|
||||
modified: is_light
|
||||
? theme.ramps.yellow(0.5).hex()
|
||||
: theme.ramps.yellow(0.5).hex(),
|
||||
inserted: is_light
|
||||
? theme.ramps.green(0.4).hex()
|
||||
: theme.ramps.green(0.5).hex(),
|
||||
removed_width_em: 0.275,
|
||||
width_em: 0.15,
|
||||
corner_radius: 0.05,
|
||||
},
|
||||
/** Highlights matching occurrences of what is under the cursor
|
||||
* as well as matched brackets
|
||||
*/
|
||||
document_highlight_read_background: with_opacity(
|
||||
foreground(layer, "accent"),
|
||||
0.1
|
||||
),
|
||||
document_highlight_write_background: theme.ramps
|
||||
.neutral(0.5)
|
||||
.alpha(0.4)
|
||||
.hex(), // TODO: This was blend * 2
|
||||
error_color: background(layer, "negative"),
|
||||
gutter_background: background(layer),
|
||||
gutter_padding_factor: 3.5,
|
||||
line_number: with_opacity(foreground(layer), 0.35),
|
||||
line_number_active: foreground(layer),
|
||||
rename_fade: 0.6,
|
||||
unnecessary_code_fade: 0.5,
|
||||
selection: theme.players[0],
|
||||
whitespace: theme.ramps.neutral(0.5).hex(),
|
||||
guest_selections: [
|
||||
theme.players[1],
|
||||
theme.players[2],
|
||||
theme.players[3],
|
||||
theme.players[4],
|
||||
theme.players[5],
|
||||
theme.players[6],
|
||||
theme.players[7],
|
||||
],
|
||||
autocomplete: {
|
||||
background: background(theme.middle),
|
||||
corner_radius: 8,
|
||||
padding: 4,
|
||||
margin: {
|
||||
left: -14,
|
||||
},
|
||||
border: border(theme.middle),
|
||||
shadow: theme.popover_shadow,
|
||||
match_highlight: foreground(theme.middle, "accent"),
|
||||
item: autocomplete_item,
|
||||
hovered_item: {
|
||||
...autocomplete_item,
|
||||
match_highlight: foreground(theme.middle, "accent", "hovered"),
|
||||
background: background(theme.middle, "hovered"),
|
||||
},
|
||||
selected_item: {
|
||||
...autocomplete_item,
|
||||
match_highlight: foreground(theme.middle, "accent", "active"),
|
||||
background: background(theme.middle, "active"),
|
||||
},
|
||||
},
|
||||
diagnostic_header: {
|
||||
background: background(theme.middle),
|
||||
icon_width_factor: 1.5,
|
||||
text_scale_factor: 0.857,
|
||||
border: border(theme.middle, {
|
||||
bottom: true,
|
||||
top: true,
|
||||
}),
|
||||
code: {
|
||||
...text(theme.middle, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: 10,
|
||||
},
|
||||
},
|
||||
source: {
|
||||
text: text(theme.middle, "sans", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
message: {
|
||||
highlight_text: text(theme.middle, "sans", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
text: text(theme.middle, "sans", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
diagnostic_path_header: {
|
||||
background: background(theme.middle),
|
||||
text_scale_factor: 0.857,
|
||||
filename: text(theme.middle, "mono", { size: "sm" }),
|
||||
path: {
|
||||
...text(theme.middle, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
error_diagnostic: diagnostic(theme.middle, "negative"),
|
||||
warning_diagnostic: diagnostic(theme.middle, "warning"),
|
||||
information_diagnostic: diagnostic(theme.middle, "accent"),
|
||||
hint_diagnostic: diagnostic(theme.middle, "warning"),
|
||||
invalid_error_diagnostic: diagnostic(theme.middle, "base"),
|
||||
invalid_hint_diagnostic: diagnostic(theme.middle, "base"),
|
||||
invalid_information_diagnostic: diagnostic(theme.middle, "base"),
|
||||
invalid_warning_diagnostic: diagnostic(theme.middle, "base"),
|
||||
hover_popover: hover_popover(),
|
||||
link_definition: {
|
||||
color: syntax.link_uri.color,
|
||||
underline: syntax.link_uri.underline,
|
||||
},
|
||||
jump_icon: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "on"),
|
||||
icon_width: 20,
|
||||
button_width: 20,
|
||||
corner_radius: 6,
|
||||
padding: {
|
||||
top: 6,
|
||||
bottom: 6,
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
scrollbar: {
|
||||
width: 12,
|
||||
min_height_factor: 1.0,
|
||||
track: {
|
||||
border: border(layer, "variant", { left: true }),
|
||||
},
|
||||
thumb: {
|
||||
background: with_opacity(background(layer, "inverted"), 0.3),
|
||||
border: {
|
||||
width: 1,
|
||||
color: border_color(layer, "variant"),
|
||||
top: false,
|
||||
right: true,
|
||||
left: true,
|
||||
bottom: false,
|
||||
},
|
||||
},
|
||||
git: {
|
||||
deleted: is_light
|
||||
? with_opacity(theme.ramps.red(0.5).hex(), 0.8)
|
||||
: with_opacity(theme.ramps.red(0.4).hex(), 0.8),
|
||||
modified: is_light
|
||||
? with_opacity(theme.ramps.yellow(0.5).hex(), 0.8)
|
||||
: with_opacity(theme.ramps.yellow(0.4).hex(), 0.8),
|
||||
inserted: is_light
|
||||
? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
|
||||
: with_opacity(theme.ramps.green(0.4).hex(), 0.8),
|
||||
},
|
||||
selections: is_light
|
||||
? with_opacity(theme.ramps.blue(0.5).hex(), 0.8)
|
||||
: with_opacity(theme.ramps.blue(0.4).hex(), 0.8)
|
||||
},
|
||||
composition_mark: {
|
||||
underline: {
|
||||
thickness: 1.0,
|
||||
color: border_color(layer),
|
||||
},
|
||||
},
|
||||
syntax,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function feedback(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
submit_button: interactive({
|
||||
base: {
|
||||
...text(theme.highest, "mono", "on"),
|
||||
background: background(theme.highest, "on"),
|
||||
corner_radius: 6,
|
||||
border: border(theme.highest, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "on", "pressed"),
|
||||
background: background(theme.highest, "on", "pressed"),
|
||||
border: border(theme.highest, "on", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "on", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
border: border(theme.highest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
button_margin: 8,
|
||||
info_text_default: text(theme.highest, "sans", "default", {
|
||||
size: "xs",
|
||||
}),
|
||||
link_text_default: text(theme.highest, "sans", "default", {
|
||||
size: "xs",
|
||||
underline: true,
|
||||
}),
|
||||
link_text_hover: text(theme.highest, "sans", "hovered", {
|
||||
size: "xs",
|
||||
underline: true,
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useTheme } from "../theme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function hover_popover(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const base_container = {
|
||||
background: background(theme.middle),
|
||||
corner_radius: 8,
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
shadow: theme.popover_shadow,
|
||||
border: border(theme.middle),
|
||||
margin: {
|
||||
left: -8,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
container: base_container,
|
||||
info_container: {
|
||||
...base_container,
|
||||
background: background(theme.middle, "accent"),
|
||||
border: border(theme.middle, "accent"),
|
||||
},
|
||||
warning_container: {
|
||||
...base_container,
|
||||
background: background(theme.middle, "warning"),
|
||||
border: border(theme.middle, "warning"),
|
||||
},
|
||||
error_container: {
|
||||
...base_container,
|
||||
background: background(theme.middle, "negative"),
|
||||
border: border(theme.middle, "negative"),
|
||||
},
|
||||
block_style: {
|
||||
padding: { top: 4 },
|
||||
},
|
||||
prose: text(theme.middle, "sans", { size: "sm" }),
|
||||
diagnostic_source_highlight: {
|
||||
color: foreground(theme.middle, "accent"),
|
||||
},
|
||||
highlight: theme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { useTheme } from "../theme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function incoming_call_notification(): unknown {
|
||||
const theme = useTheme()
|
||||
|
||||
const avatar_size = 48
|
||||
return {
|
||||
window_height: 74,
|
||||
window_width: 380,
|
||||
background: background(theme.middle),
|
||||
caller_container: {
|
||||
padding: 12,
|
||||
},
|
||||
caller_avatar: {
|
||||
height: avatar_size,
|
||||
width: avatar_size,
|
||||
corner_radius: avatar_size / 2,
|
||||
},
|
||||
caller_metadata: {
|
||||
margin: { left: 10 },
|
||||
},
|
||||
caller_username: {
|
||||
...text(theme.middle, "sans", { size: "sm", weight: "bold" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
caller_message: {
|
||||
...text(theme.middle, "sans", "variant", { size: "xs" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
worktree_roots: {
|
||||
...text(theme.middle, "sans", "variant", {
|
||||
size: "xs",
|
||||
weight: "bold",
|
||||
}),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
button_width: 96,
|
||||
accept_button: {
|
||||
background: background(theme.middle, "accent"),
|
||||
border: border(theme.middle, { left: true, bottom: true }),
|
||||
...text(theme.middle, "sans", "positive", {
|
||||
size: "xs",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
decline_button: {
|
||||
border: border(theme.middle, { left: true }),
|
||||
...text(theme.middle, "sans", "negative", {
|
||||
size: "xs",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import { with_opacity } from "../theme/color"
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function picker(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const container = {
|
||||
background: background(theme.lowest),
|
||||
border: border(theme.lowest),
|
||||
shadow: theme.modal_shadow,
|
||||
corner_radius: 12,
|
||||
padding: {
|
||||
bottom: 4,
|
||||
},
|
||||
}
|
||||
const input_editor = {
|
||||
placeholder_text: text(theme.lowest, "sans", "on", "disabled"),
|
||||
selection: theme.players[0],
|
||||
text: text(theme.lowest, "mono", "on"),
|
||||
border: border(theme.lowest, { bottom: true }),
|
||||
padding: {
|
||||
bottom: 8,
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 8,
|
||||
},
|
||||
margin: {
|
||||
bottom: 4,
|
||||
},
|
||||
}
|
||||
const empty_input_editor: any = { ...input_editor }
|
||||
delete empty_input_editor.border
|
||||
delete empty_input_editor.margin
|
||||
|
||||
return {
|
||||
...container,
|
||||
empty_container: {
|
||||
...container,
|
||||
padding: {},
|
||||
},
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
corner_radius: 8,
|
||||
text: text(theme.lowest, "sans", "variant"),
|
||||
highlight_text: text(theme.lowest, "sans", "accent", {
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: with_opacity(
|
||||
background(theme.lowest, "hovered"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
background: with_opacity(
|
||||
background(theme.lowest, "pressed"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: with_opacity(
|
||||
background(theme.lowest, "base", "active"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
hovered: {
|
||||
background: with_opacity(
|
||||
background(theme.lowest, "hovered"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
background: with_opacity(
|
||||
background(theme.lowest, "pressed"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
input_editor,
|
||||
empty_input_editor,
|
||||
no_matches: {
|
||||
text: text(theme.lowest, "sans", "variant"),
|
||||
padding: {
|
||||
bottom: 8,
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 8,
|
||||
},
|
||||
},
|
||||
header: {
|
||||
text: text(theme.lowest, "sans", "variant", { size: "xs" }),
|
||||
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
footer: {
|
||||
text: text(theme.lowest, "sans", "variant", { size: "xs" }),
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { useTheme } from "../theme"
|
||||
import { background, text } from "./components"
|
||||
|
||||
export default function project_diagnostics(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
background: background(theme.highest),
|
||||
tab_icon_spacing: 4,
|
||||
tab_icon_width: 13,
|
||||
tab_summary_spacing: 10,
|
||||
empty_message: text(theme.highest, "sans", "variant", { size: "md" }),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import { with_opacity } from "../theme/color"
|
||||
import {
|
||||
Border,
|
||||
TextStyle,
|
||||
background,
|
||||
border,
|
||||
foreground,
|
||||
text,
|
||||
} from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import merge from "ts-deepmerge"
|
||||
import { useTheme } from "../theme"
|
||||
export default function project_panel(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const { is_light } = theme
|
||||
|
||||
type EntryStateProps = {
|
||||
background?: string
|
||||
border?: Border
|
||||
text?: TextStyle
|
||||
icon_color?: string
|
||||
}
|
||||
|
||||
type EntryState = {
|
||||
default: EntryStateProps
|
||||
hovered?: EntryStateProps
|
||||
clicked?: EntryStateProps
|
||||
}
|
||||
|
||||
const entry = (unselected?: EntryState, selected?: EntryState) => {
|
||||
const git_status = {
|
||||
git: {
|
||||
modified: is_light
|
||||
? theme.ramps.yellow(0.6).hex()
|
||||
: theme.ramps.yellow(0.5).hex(),
|
||||
inserted: is_light
|
||||
? theme.ramps.green(0.45).hex()
|
||||
: theme.ramps.green(0.5).hex(),
|
||||
conflict: is_light
|
||||
? theme.ramps.red(0.6).hex()
|
||||
: theme.ramps.red(0.5).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
const base_properties = {
|
||||
height: 22,
|
||||
background: background(theme.middle),
|
||||
icon_color: foreground(theme.middle, "variant"),
|
||||
icon_size: 7,
|
||||
icon_spacing: 5,
|
||||
text: text(theme.middle, "sans", "variant", { size: "sm" }),
|
||||
status: {
|
||||
...git_status,
|
||||
},
|
||||
}
|
||||
|
||||
const selected_style: EntryState | undefined = selected
|
||||
? selected
|
||||
: unselected
|
||||
|
||||
const unselected_default_style = merge(
|
||||
base_properties,
|
||||
unselected?.default ?? {},
|
||||
{}
|
||||
)
|
||||
const unselected_hovered_style = merge(
|
||||
base_properties,
|
||||
{ background: background(theme.middle, "hovered") },
|
||||
unselected?.hovered ?? {}
|
||||
)
|
||||
const unselected_clicked_style = merge(
|
||||
base_properties,
|
||||
{ background: background(theme.middle, "pressed") },
|
||||
unselected?.clicked ?? {}
|
||||
)
|
||||
const selected_default_style = merge(
|
||||
base_properties,
|
||||
{
|
||||
background: background(theme.lowest),
|
||||
text: text(theme.lowest, "sans", { size: "sm" }),
|
||||
},
|
||||
selected_style?.default ?? {}
|
||||
)
|
||||
const selected_hovered_style = merge(
|
||||
base_properties,
|
||||
{
|
||||
background: background(theme.lowest, "hovered"),
|
||||
text: text(theme.lowest, "sans", { size: "sm" }),
|
||||
},
|
||||
selected_style?.hovered ?? {}
|
||||
)
|
||||
const selected_clicked_style = merge(
|
||||
base_properties,
|
||||
{
|
||||
background: background(theme.lowest, "pressed"),
|
||||
text: text(theme.lowest, "sans", { size: "sm" }),
|
||||
},
|
||||
selected_style?.clicked ?? {}
|
||||
)
|
||||
|
||||
return toggleable({
|
||||
state: {
|
||||
inactive: interactive({
|
||||
state: {
|
||||
default: unselected_default_style,
|
||||
hovered: unselected_hovered_style,
|
||||
clicked: unselected_clicked_style,
|
||||
},
|
||||
}),
|
||||
active: interactive({
|
||||
state: {
|
||||
default: selected_default_style,
|
||||
hovered: selected_hovered_style,
|
||||
clicked: selected_clicked_style,
|
||||
},
|
||||
}),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const default_entry = entry()
|
||||
|
||||
return {
|
||||
open_project_button: interactive({
|
||||
base: {
|
||||
background: background(theme.middle),
|
||||
border: border(theme.middle, "active"),
|
||||
corner_radius: 4,
|
||||
margin: {
|
||||
top: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(theme.middle, "sans", "default", { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.middle, "sans", "default", { size: "sm" }),
|
||||
background: background(theme.middle, "hovered"),
|
||||
border: border(theme.middle, "active"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.middle, "sans", "default", { size: "sm" }),
|
||||
background: background(theme.middle, "pressed"),
|
||||
border: border(theme.middle, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
background: background(theme.middle),
|
||||
padding: { left: 6, right: 6, top: 0, bottom: 6 },
|
||||
indent_width: 12,
|
||||
entry: default_entry,
|
||||
dragged_entry: {
|
||||
...default_entry.inactive.default,
|
||||
text: text(theme.middle, "sans", "on", { size: "sm" }),
|
||||
background: with_opacity(background(theme.middle, "on"), 0.9),
|
||||
border: border(theme.middle),
|
||||
},
|
||||
ignored_entry: entry(
|
||||
{
|
||||
default: {
|
||||
text: text(theme.middle, "sans", "disabled"),
|
||||
},
|
||||
},
|
||||
{
|
||||
default: {
|
||||
icon_color: foreground(theme.middle, "variant"),
|
||||
},
|
||||
}
|
||||
),
|
||||
cut_entry: entry(
|
||||
{
|
||||
default: {
|
||||
text: text(theme.middle, "sans", "disabled"),
|
||||
},
|
||||
},
|
||||
{
|
||||
default: {
|
||||
background: background(theme.middle, "active"),
|
||||
text: text(theme.middle, "sans", "disabled", {
|
||||
size: "sm",
|
||||
}),
|
||||
},
|
||||
}
|
||||
),
|
||||
filename_editor: {
|
||||
background: background(theme.middle, "on"),
|
||||
text: text(theme.middle, "sans", "on", { size: "sm" }),
|
||||
selection: theme.players[0],
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { useTheme } from "../theme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function project_shared_notification(): unknown {
|
||||
const theme = useTheme()
|
||||
|
||||
const avatar_size = 48
|
||||
return {
|
||||
window_height: 74,
|
||||
window_width: 380,
|
||||
background: background(theme.middle),
|
||||
owner_container: {
|
||||
padding: 12,
|
||||
},
|
||||
owner_avatar: {
|
||||
height: avatar_size,
|
||||
width: avatar_size,
|
||||
corner_radius: avatar_size / 2,
|
||||
},
|
||||
owner_metadata: {
|
||||
margin: { left: 10 },
|
||||
},
|
||||
owner_username: {
|
||||
...text(theme.middle, "sans", { size: "sm", weight: "bold" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
message: {
|
||||
...text(theme.middle, "sans", "variant", { size: "xs" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
worktree_roots: {
|
||||
...text(theme.middle, "sans", "variant", {
|
||||
size: "xs",
|
||||
weight: "bold",
|
||||
}),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
button_width: 96,
|
||||
open_button: {
|
||||
background: background(theme.middle, "accent"),
|
||||
border: border(theme.middle, { left: true, bottom: true }),
|
||||
...text(theme.middle, "sans", "accent", {
|
||||
size: "xs",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
dismiss_button: {
|
||||
border: border(theme.middle, { left: true }),
|
||||
...text(theme.middle, "sans", "variant", {
|
||||
size: "xs",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import { with_opacity } from "../theme/color"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function search(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
// Search input
|
||||
const editor = {
|
||||
background: background(theme.highest),
|
||||
corner_radius: 8,
|
||||
min_width: 200,
|
||||
max_width: 500,
|
||||
placeholder_text: text(theme.highest, "mono", "disabled"),
|
||||
selection: theme.players[0],
|
||||
text: text(theme.highest, "mono", "default"),
|
||||
border: border(theme.highest),
|
||||
margin: {
|
||||
right: 12,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 12,
|
||||
right: 8,
|
||||
},
|
||||
}
|
||||
|
||||
const include_exclude_editor = {
|
||||
...editor,
|
||||
min_width: 100,
|
||||
max_width: 250,
|
||||
}
|
||||
|
||||
return {
|
||||
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
||||
match_background: with_opacity(
|
||||
foreground(theme.highest, "accent"),
|
||||
0.4
|
||||
),
|
||||
option_button: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(theme.highest, "mono", "on"),
|
||||
background: background(theme.highest, "on"),
|
||||
corner_radius: 6,
|
||||
border: border(theme.highest, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "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"),
|
||||
border: border(theme.highest, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(theme.highest, "mono", "accent"),
|
||||
},
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "accent", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "accent", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
editor,
|
||||
invalid_editor: {
|
||||
...editor,
|
||||
border: border(theme.highest, "negative"),
|
||||
},
|
||||
include_exclude_editor,
|
||||
invalid_include_exclude_editor: {
|
||||
...include_exclude_editor,
|
||||
border: border(theme.highest, "negative"),
|
||||
},
|
||||
match_index: {
|
||||
...text(theme.highest, "mono", "variant"),
|
||||
padding: {
|
||||
left: 6,
|
||||
},
|
||||
},
|
||||
option_button_group: {
|
||||
padding: {
|
||||
left: 12,
|
||||
right: 12,
|
||||
},
|
||||
},
|
||||
include_exclude_inputs: {
|
||||
...text(theme.highest, "mono", "variant"),
|
||||
padding: {
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
results_status: {
|
||||
...text(theme.highest, "mono", "on"),
|
||||
size: 18,
|
||||
},
|
||||
dismiss_button: interactive({
|
||||
base: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
icon_width: 12,
|
||||
button_width: 14,
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(theme.highest, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { useTheme } from "../theme"
|
||||
import { background } from "./components"
|
||||
|
||||
export default function sharedScreen() {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
background: background(theme.highest),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function simple_message_notification(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const header_padding = 8
|
||||
|
||||
return {
|
||||
message: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
margin: { left: header_padding, right: header_padding },
|
||||
},
|
||||
action_message: interactive({
|
||||
base: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
border: border(theme.middle, "active"),
|
||||
corner_radius: 4,
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
|
||||
margin: { left: header_padding, top: 6, bottom: 6 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.middle, "sans", "default", { size: "xs" }),
|
||||
background: background(theme.middle, "hovered"),
|
||||
border: border(theme.middle, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
dismiss_button: interactive({
|
||||
base: {
|
||||
color: foreground(theme.middle),
|
||||
icon_width: 8,
|
||||
icon_height: 8,
|
||||
button_width: 8,
|
||||
button_height: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.middle, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../common"
|
||||
export default function status_bar(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const layer = theme.lowest
|
||||
|
||||
const status_container = {
|
||||
corner_radius: 6,
|
||||
padding: { top: 3, bottom: 3, left: 6, right: 6 },
|
||||
}
|
||||
|
||||
const diagnostic_status_container = {
|
||||
corner_radius: 6,
|
||||
padding: { top: 1, bottom: 1, left: 6, right: 6 },
|
||||
}
|
||||
|
||||
return {
|
||||
height: 30,
|
||||
item_spacing: 8,
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
border: border(layer, { top: true, overlay: true }),
|
||||
cursor_position: text(layer, "sans", "variant"),
|
||||
active_language: interactive({
|
||||
base: {
|
||||
padding: { left: 6, right: 6 },
|
||||
...text(layer, "sans", "variant"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "on"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
auto_update_progress_message: text(layer, "sans", "variant"),
|
||||
auto_update_done_message: text(layer, "sans", "variant"),
|
||||
lsp_status: interactive({
|
||||
base: {
|
||||
...diagnostic_status_container,
|
||||
icon_spacing: 4,
|
||||
icon_width: 14,
|
||||
height: 18,
|
||||
message: text(layer, "sans"),
|
||||
icon_color: foreground(layer),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
message: text(layer, "sans"),
|
||||
icon_color: foreground(layer),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
diagnostic_message: interactive({
|
||||
base: {
|
||||
...text(layer, "sans"),
|
||||
},
|
||||
state: { hovered: text(layer, "sans", "hovered") },
|
||||
}),
|
||||
diagnostic_summary: interactive({
|
||||
base: {
|
||||
height: 20,
|
||||
icon_width: 16,
|
||||
icon_spacing: 2,
|
||||
summary_spacing: 6,
|
||||
text: text(layer, "sans", { size: "sm" }),
|
||||
icon_color_ok: foreground(layer, "variant"),
|
||||
icon_color_warning: foreground(layer, "warning"),
|
||||
icon_color_error: foreground(layer, "negative"),
|
||||
container_ok: {
|
||||
corner_radius: 6,
|
||||
padding: { top: 3, bottom: 3, left: 7, right: 7 },
|
||||
},
|
||||
container_warning: {
|
||||
...diagnostic_status_container,
|
||||
background: background(layer, "warning"),
|
||||
border: border(layer, "warning"),
|
||||
},
|
||||
container_error: {
|
||||
...diagnostic_status_container,
|
||||
background: background(layer, "negative"),
|
||||
border: border(layer, "negative"),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon_color_ok: foreground(layer, "on"),
|
||||
container_ok: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
container_warning: {
|
||||
background: background(layer, "warning", "hovered"),
|
||||
border: border(layer, "warning", "hovered"),
|
||||
},
|
||||
container_error: {
|
||||
background: background(layer, "negative", "hovered"),
|
||||
border: border(layer, "negative", "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
panel_buttons: {
|
||||
group_left: {},
|
||||
group_bottom: {},
|
||||
group_right: {},
|
||||
button: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...status_container,
|
||||
icon_size: 16,
|
||||
icon_color: foreground(layer, "variant"),
|
||||
label: {
|
||||
margin: { left: 6 },
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon_color: foreground(layer, "hovered"),
|
||||
background: background(layer, "variant"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
icon_color: foreground(layer, "active"),
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
icon_color: foreground(layer, "hovered"),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
icon_color: foreground(layer, "pressed"),
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
badge: {
|
||||
corner_radius: 3,
|
||||
padding: 2,
|
||||
margin: { bottom: -1, right: -1 },
|
||||
border: border(layer),
|
||||
background: background(layer, "accent"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { with_opacity } from "../theme/color"
|
||||
import { text, border, background, foreground } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../common"
|
||||
|
||||
export default function tab_bar(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const height = 32
|
||||
|
||||
const active_layer = theme.highest
|
||||
const layer = theme.middle
|
||||
|
||||
const tab = {
|
||||
height,
|
||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||
background: background(layer),
|
||||
border: border(layer, {
|
||||
right: true,
|
||||
bottom: true,
|
||||
overlay: true,
|
||||
}),
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 12,
|
||||
},
|
||||
spacing: 8,
|
||||
|
||||
// Tab type icons (e.g. Project Search)
|
||||
type_icon_width: 14,
|
||||
|
||||
// Close icons
|
||||
close_icon_width: 8,
|
||||
icon_close: foreground(layer, "variant"),
|
||||
icon_close_active: foreground(layer, "hovered"),
|
||||
|
||||
// Indicators
|
||||
icon_conflict: foreground(layer, "warning"),
|
||||
icon_dirty: foreground(layer, "accent"),
|
||||
|
||||
// When two tabs of the same name are open, a label appears next to them
|
||||
description: {
|
||||
margin: { left: 8 },
|
||||
...text(layer, "sans", "disabled", { size: "2xs" }),
|
||||
},
|
||||
}
|
||||
|
||||
const active_pane_active_tab = {
|
||||
...tab,
|
||||
background: background(active_layer),
|
||||
text: text(active_layer, "sans", "active", { size: "sm" }),
|
||||
border: {
|
||||
...tab.border,
|
||||
bottom: false,
|
||||
},
|
||||
}
|
||||
|
||||
const inactive_pane_inactive_tab = {
|
||||
...tab,
|
||||
background: background(layer),
|
||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||
}
|
||||
|
||||
const inactive_pane_active_tab = {
|
||||
...tab,
|
||||
background: background(active_layer),
|
||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||
border: {
|
||||
...tab.border,
|
||||
bottom: false,
|
||||
},
|
||||
}
|
||||
|
||||
const dragged_tab = {
|
||||
...active_pane_active_tab,
|
||||
background: with_opacity(tab.background, 0.9),
|
||||
border: undefined as any,
|
||||
shadow: theme.popover_shadow,
|
||||
}
|
||||
|
||||
return {
|
||||
height,
|
||||
background: background(layer),
|
||||
active_pane: {
|
||||
active_tab: active_pane_active_tab,
|
||||
inactive_tab: tab,
|
||||
},
|
||||
inactive_pane: {
|
||||
active_tab: inactive_pane_active_tab,
|
||||
inactive_tab: inactive_pane_inactive_tab,
|
||||
},
|
||||
dragged_tab,
|
||||
pane_button: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
icon_width: 12,
|
||||
button_width: active_pane_active_tab.height,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: foreground(layer, "accent"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
pane_button_container: {
|
||||
background: tab.background,
|
||||
border: {
|
||||
...tab.border,
|
||||
right: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function terminal() {
|
||||
const theme = useTheme()
|
||||
|
||||
/**
|
||||
* Colors are controlled per-cell in the terminal grid.
|
||||
* Cells can be set to any of these more 'theme-capable' colors
|
||||
* or can be set directly with RGB values.
|
||||
* Here are the common interpretations of these names:
|
||||
* https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
|
||||
*/
|
||||
return {
|
||||
black: theme.ramps.neutral(0).hex(),
|
||||
red: theme.ramps.red(0.5).hex(),
|
||||
green: theme.ramps.green(0.5).hex(),
|
||||
yellow: theme.ramps.yellow(0.5).hex(),
|
||||
blue: theme.ramps.blue(0.5).hex(),
|
||||
magenta: theme.ramps.magenta(0.5).hex(),
|
||||
cyan: theme.ramps.cyan(0.5).hex(),
|
||||
white: theme.ramps.neutral(1).hex(),
|
||||
bright_black: theme.ramps.neutral(0.4).hex(),
|
||||
bright_red: theme.ramps.red(0.25).hex(),
|
||||
bright_green: theme.ramps.green(0.25).hex(),
|
||||
bright_yellow: theme.ramps.yellow(0.25).hex(),
|
||||
bright_blue: theme.ramps.blue(0.25).hex(),
|
||||
bright_magenta: theme.ramps.magenta(0.25).hex(),
|
||||
bright_cyan: theme.ramps.cyan(0.25).hex(),
|
||||
bright_white: theme.ramps.neutral(1).hex(),
|
||||
/**
|
||||
* Default color for characters
|
||||
*/
|
||||
foreground: theme.ramps.neutral(1).hex(),
|
||||
/**
|
||||
* Default color for the rectangle background of a cell
|
||||
*/
|
||||
background: theme.ramps.neutral(0).hex(),
|
||||
modal_background: theme.ramps.neutral(0.1).hex(),
|
||||
/**
|
||||
* Default color for the cursor
|
||||
*/
|
||||
cursor: theme.players[0].cursor,
|
||||
dim_black: theme.ramps.neutral(1).hex(),
|
||||
dim_red: theme.ramps.red(0.75).hex(),
|
||||
dim_green: theme.ramps.green(0.75).hex(),
|
||||
dim_yellow: theme.ramps.yellow(0.75).hex(),
|
||||
dim_blue: theme.ramps.blue(0.75).hex(),
|
||||
dim_magenta: theme.ramps.magenta(0.75).hex(),
|
||||
dim_cyan: theme.ramps.cyan(0.75).hex(),
|
||||
dim_white: theme.ramps.neutral(0.6).hex(),
|
||||
bright_foreground: theme.ramps.neutral(1).hex(),
|
||||
dim_foreground: theme.ramps.neutral(0).hex(),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
import { icon_button, toggleable_icon_button } from "../component/icon_button"
|
||||
import { toggleable_text_button } from "../component/text_button"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
import { with_opacity } from "../theme/color"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
const ITEM_SPACING = 8
|
||||
const TITLEBAR_HEIGHT = 32
|
||||
|
||||
function build_spacing(
|
||||
container_height: number,
|
||||
element_height: number,
|
||||
spacing: number
|
||||
) {
|
||||
return {
|
||||
group: spacing,
|
||||
item: spacing / 2,
|
||||
half_item: spacing / 4,
|
||||
margin_y: (container_height - element_height) / 2,
|
||||
margin_x: (container_height - element_height) / 2,
|
||||
}
|
||||
}
|
||||
|
||||
function call_controls() {
|
||||
const theme = useTheme()
|
||||
|
||||
const button_height = 18
|
||||
|
||||
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
|
||||
const margin_y = {
|
||||
top: space.margin_y,
|
||||
bottom: space.margin_y,
|
||||
}
|
||||
|
||||
return {
|
||||
toggle_microphone_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...margin_y,
|
||||
left: space.group,
|
||||
right: space.half_item,
|
||||
},
|
||||
active_color: "negative",
|
||||
}),
|
||||
|
||||
toggle_speakers_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...margin_y,
|
||||
left: space.half_item,
|
||||
right: space.half_item,
|
||||
},
|
||||
}),
|
||||
|
||||
screen_share_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...margin_y,
|
||||
left: space.half_item,
|
||||
right: space.group,
|
||||
},
|
||||
active_color: "accent",
|
||||
}),
|
||||
|
||||
muted: foreground(theme.lowest, "negative"),
|
||||
speaking: foreground(theme.lowest, "accent"),
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the User Menu when toggled
|
||||
*
|
||||
* When logged in shows the user's avatar and a chevron,
|
||||
* When logged out only shows a chevron.
|
||||
*/
|
||||
function user_menu() {
|
||||
const theme = useTheme()
|
||||
|
||||
const button_height = 18
|
||||
|
||||
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
|
||||
|
||||
const build_button = ({ online }: { online: boolean }) => {
|
||||
const button = toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
corner_radius: 6,
|
||||
height: button_height,
|
||||
width: online ? 37 : 24,
|
||||
padding: {
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
margin: {
|
||||
left: space.item,
|
||||
right: space.item,
|
||||
},
|
||||
...text(theme.lowest, "sans", { size: "xs" }),
|
||||
background: background(theme.lowest),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.lowest, "sans", "hovered", {
|
||||
size: "xs",
|
||||
}),
|
||||
background: background(theme.lowest, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.lowest, "sans", "pressed", {
|
||||
size: "xs",
|
||||
}),
|
||||
background: background(theme.lowest, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(theme.lowest, "sans", "active", { size: "xs" }),
|
||||
background: background(theme.middle),
|
||||
},
|
||||
hovered: {
|
||||
...text(theme.lowest, "sans", "active", { size: "xs" }),
|
||||
background: background(theme.middle, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.lowest, "sans", "active", { size: "xs" }),
|
||||
background: background(theme.middle, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
user_menu: button,
|
||||
avatar: {
|
||||
icon_width: 16,
|
||||
icon_height: 16,
|
||||
corner_radius: 4,
|
||||
outer_width: 16,
|
||||
outer_corner_radius: 16,
|
||||
},
|
||||
icon: {
|
||||
margin: {
|
||||
top: 2,
|
||||
left: online ? space.item : 0,
|
||||
right: space.group,
|
||||
bottom: 2,
|
||||
},
|
||||
width: 11,
|
||||
height: 11,
|
||||
color: foreground(theme.lowest),
|
||||
},
|
||||
}
|
||||
}
|
||||
return {
|
||||
user_menu_button_online: build_button({ online: true }),
|
||||
user_menu_button_offline: build_button({ online: false }),
|
||||
}
|
||||
}
|
||||
|
||||
export function titlebar(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const avatar_width = 15
|
||||
const avatar_outer_width = avatar_width + 4
|
||||
const follower_avatar_width = 14
|
||||
const follower_avatar_outer_width = follower_avatar_width + 4
|
||||
|
||||
return {
|
||||
item_spacing: ITEM_SPACING,
|
||||
face_pile_spacing: 2,
|
||||
height: TITLEBAR_HEIGHT,
|
||||
background: background(theme.lowest),
|
||||
border: border(theme.lowest, { bottom: true }),
|
||||
padding: {
|
||||
left: 80,
|
||||
right: 0,
|
||||
},
|
||||
|
||||
// Project
|
||||
project_name_divider: text(theme.lowest, "sans", "variant"),
|
||||
|
||||
project_menu_button: toggleable_text_button(theme, {
|
||||
color: 'base',
|
||||
}),
|
||||
git_menu_button: toggleable_text_button(theme, {
|
||||
color: 'variant',
|
||||
}),
|
||||
|
||||
// Collaborators
|
||||
leader_avatar: {
|
||||
width: avatar_width,
|
||||
outer_width: avatar_outer_width,
|
||||
corner_radius: avatar_width / 2,
|
||||
outer_corner_radius: avatar_outer_width / 2,
|
||||
},
|
||||
follower_avatar: {
|
||||
width: follower_avatar_width,
|
||||
outer_width: follower_avatar_outer_width,
|
||||
corner_radius: follower_avatar_width / 2,
|
||||
outer_corner_radius: follower_avatar_outer_width / 2,
|
||||
},
|
||||
inactive_avatar_grayscale: true,
|
||||
follower_avatar_overlap: 8,
|
||||
leader_selection: {
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
padding: {
|
||||
left: 2,
|
||||
right: 2,
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
},
|
||||
corner_radius: 6,
|
||||
},
|
||||
avatar_ribbon: {
|
||||
height: 3,
|
||||
width: 14,
|
||||
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
|
||||
},
|
||||
|
||||
sign_in_button: toggleable_text_button(theme, {}),
|
||||
offline_icon: {
|
||||
color: foreground(theme.lowest, "variant"),
|
||||
width: 16,
|
||||
margin: {
|
||||
left: ITEM_SPACING,
|
||||
},
|
||||
padding: {
|
||||
right: 4,
|
||||
},
|
||||
},
|
||||
|
||||
// When the collaboration server is out of date, show a warning
|
||||
outdated_warning: {
|
||||
...text(theme.lowest, "sans", "warning", { size: "xs" }),
|
||||
background: with_opacity(background(theme.lowest, "warning"), 0.3),
|
||||
border: border(theme.lowest, "warning"),
|
||||
margin: {
|
||||
left: ITEM_SPACING,
|
||||
},
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
corner_radius: 6,
|
||||
},
|
||||
|
||||
leave_call_button: icon_button({
|
||||
margin: {
|
||||
left: ITEM_SPACING / 2,
|
||||
right: ITEM_SPACING,
|
||||
},
|
||||
}),
|
||||
|
||||
...call_controls(),
|
||||
|
||||
toggle_contacts_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
left: ITEM_SPACING,
|
||||
},
|
||||
}),
|
||||
|
||||
// Jewel that notifies you that there are new contact requests
|
||||
toggle_contacts_badge: {
|
||||
corner_radius: 3,
|
||||
padding: 2,
|
||||
margin: { top: 3, left: 3 },
|
||||
border: border(theme.lowest),
|
||||
background: foreground(theme.lowest, "accent"),
|
||||
},
|
||||
share_button: toggleable_text_button(theme, {}),
|
||||
user_menu: user_menu(),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
export default function dropdown_menu(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
row_height: 30,
|
||||
background: background(theme.middle),
|
||||
border: border(theme.middle),
|
||||
shadow: theme.popover_shadow,
|
||||
header: interactive({
|
||||
base: {
|
||||
...text(theme.middle, "sans", { size: "sm" }),
|
||||
secondary_text: text(theme.middle, "sans", {
|
||||
size: "sm",
|
||||
color: "#aaaaaa",
|
||||
}),
|
||||
secondary_text_spacing: 10,
|
||||
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
||||
corner_radius: 6,
|
||||
background: background(theme.middle, "on"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(theme.middle, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(theme.middle, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
section_header: {
|
||||
...text(theme.middle, "sans", { size: "sm" }),
|
||||
padding: { left: 8, right: 8, top: 8, bottom: 8 },
|
||||
},
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(theme.middle, "sans", { size: "sm" }),
|
||||
secondary_text_spacing: 10,
|
||||
secondary_text: text(theme.middle, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(theme.middle, "hovered"),
|
||||
...text(theme.middle, "sans", "hovered", {
|
||||
size: "sm",
|
||||
}),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(theme.middle, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(theme.middle, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useTheme } from "../theme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function tooltip(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
background: background(theme.middle),
|
||||
border: border(theme.middle),
|
||||
padding: { top: 4, bottom: 4, left: 8, right: 8 },
|
||||
margin: { top: 6, left: 6 },
|
||||
shadow: theme.popover_shadow,
|
||||
corner_radius: 6,
|
||||
text: text(theme.middle, "sans", { size: "xs" }),
|
||||
keystroke: {
|
||||
background: background(theme.middle, "on"),
|
||||
corner_radius: 4,
|
||||
margin: { left: 6 },
|
||||
padding: { left: 4, right: 4 },
|
||||
...text(theme.middle, "mono", "on", { size: "xs", weight: "bold" }),
|
||||
},
|
||||
max_text_width: 200,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function update_notification(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const header_padding = 8
|
||||
|
||||
return {
|
||||
message: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
margin: { left: header_padding, right: header_padding },
|
||||
},
|
||||
action_message: interactive({
|
||||
base: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
margin: { left: header_padding, top: 6, bottom: 6 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.middle, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
dismiss_button: interactive({
|
||||
base: {
|
||||
color: foreground(theme.middle),
|
||||
icon_width: 8,
|
||||
icon_height: 8,
|
||||
button_width: 8,
|
||||
button_height: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.middle, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import { with_opacity } from "../theme/color"
|
||||
import {
|
||||
border,
|
||||
background,
|
||||
foreground,
|
||||
text,
|
||||
TextProperties,
|
||||
svg,
|
||||
} from "./components"
|
||||
import { interactive } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function welcome(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const checkbox_base = {
|
||||
corner_radius: 4,
|
||||
padding: {
|
||||
left: 3,
|
||||
right: 3,
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
},
|
||||
// shadow: theme.popover_shadow,
|
||||
border: border(theme.highest),
|
||||
margin: {
|
||||
right: 8,
|
||||
top: 5,
|
||||
bottom: 5,
|
||||
},
|
||||
}
|
||||
|
||||
const interactive_text_size: TextProperties = { size: "sm" }
|
||||
|
||||
return {
|
||||
page_width: 320,
|
||||
logo: svg(
|
||||
foreground(theme.highest, "default"),
|
||||
"icons/logo_96.svg",
|
||||
64,
|
||||
64
|
||||
),
|
||||
logo_subheading: {
|
||||
...text(theme.highest, "sans", "variant", { size: "md" }),
|
||||
margin: {
|
||||
top: 10,
|
||||
bottom: 7,
|
||||
},
|
||||
},
|
||||
button_group: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
heading_group: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 12,
|
||||
},
|
||||
},
|
||||
checkbox_group: {
|
||||
border: border(theme.highest, "variant"),
|
||||
background: with_opacity(
|
||||
background(theme.highest, "hovered"),
|
||||
0.25
|
||||
),
|
||||
corner_radius: 4,
|
||||
padding: {
|
||||
left: 12,
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
},
|
||||
},
|
||||
button: interactive({
|
||||
base: {
|
||||
background: background(theme.highest),
|
||||
border: border(theme.highest, "active"),
|
||||
corner_radius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(
|
||||
theme.highest,
|
||||
"sans",
|
||||
"default",
|
||||
interactive_text_size
|
||||
),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(
|
||||
theme.highest,
|
||||
"sans",
|
||||
"default",
|
||||
interactive_text_size
|
||||
),
|
||||
background: background(theme.highest, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
usage_note: {
|
||||
...text(theme.highest, "sans", "variant", { size: "2xs" }),
|
||||
padding: {
|
||||
top: -4,
|
||||
},
|
||||
},
|
||||
checkbox_container: {
|
||||
margin: {
|
||||
top: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 8,
|
||||
},
|
||||
},
|
||||
checkbox: {
|
||||
label: {
|
||||
...text(theme.highest, "sans", interactive_text_size),
|
||||
// Also supports margin, container, border, etc.
|
||||
},
|
||||
icon: svg(
|
||||
foreground(theme.highest, "on"),
|
||||
"icons/check_12.svg",
|
||||
12,
|
||||
12
|
||||
),
|
||||
default: {
|
||||
...checkbox_base,
|
||||
background: background(theme.highest, "default"),
|
||||
border: border(theme.highest, "active"),
|
||||
},
|
||||
checked: {
|
||||
...checkbox_base,
|
||||
background: background(theme.highest, "hovered"),
|
||||
border: border(theme.highest, "active"),
|
||||
},
|
||||
hovered: {
|
||||
...checkbox_base,
|
||||
background: background(theme.highest, "hovered"),
|
||||
border: border(theme.highest, "active"),
|
||||
},
|
||||
hovered_and_checked: {
|
||||
...checkbox_base,
|
||||
background: background(theme.highest, "hovered"),
|
||||
border: border(theme.highest, "active"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import { with_opacity } from "../theme/color"
|
||||
import {
|
||||
background,
|
||||
border,
|
||||
border_color,
|
||||
foreground,
|
||||
svg,
|
||||
text,
|
||||
} from "./components"
|
||||
import statusBar from "./status_bar"
|
||||
import tabBar from "./tab_bar"
|
||||
import { interactive } from "../element"
|
||||
import { titlebar } from "./titlebar"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function workspace(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const { is_light } = theme
|
||||
|
||||
return {
|
||||
background: background(theme.lowest),
|
||||
blank_pane: {
|
||||
logo_container: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
logo: svg(
|
||||
with_opacity("#000000", theme.is_light ? 0.6 : 0.8),
|
||||
"icons/logo_96.svg",
|
||||
256,
|
||||
256
|
||||
),
|
||||
|
||||
logo_shadow: svg(
|
||||
with_opacity(
|
||||
theme.is_light
|
||||
? "#FFFFFF"
|
||||
: theme.lowest.base.default.background,
|
||||
theme.is_light ? 1 : 0.6
|
||||
),
|
||||
"icons/logo_96.svg",
|
||||
256,
|
||||
256
|
||||
),
|
||||
keyboard_hints: {
|
||||
margin: {
|
||||
top: 96,
|
||||
},
|
||||
corner_radius: 4,
|
||||
},
|
||||
keyboard_hint: interactive({
|
||||
base: {
|
||||
...text(theme.lowest, "sans", "variant", { size: "sm" }),
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3,
|
||||
},
|
||||
corner_radius: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.lowest, "sans", "active", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
keyboard_hint_width: 320,
|
||||
},
|
||||
joining_project_avatar: {
|
||||
corner_radius: 40,
|
||||
width: 80,
|
||||
},
|
||||
joining_project_message: {
|
||||
padding: 12,
|
||||
...text(theme.lowest, "sans", { size: "lg" }),
|
||||
},
|
||||
external_location_message: {
|
||||
background: background(theme.middle, "accent"),
|
||||
border: border(theme.middle, "accent"),
|
||||
corner_radius: 6,
|
||||
padding: 12,
|
||||
margin: { bottom: 8, right: 8 },
|
||||
...text(theme.middle, "sans", "accent", { size: "xs" }),
|
||||
},
|
||||
leader_border_opacity: 0.7,
|
||||
leader_border_width: 2.0,
|
||||
tab_bar: tabBar(),
|
||||
modal: {
|
||||
margin: {
|
||||
bottom: 52,
|
||||
top: 52,
|
||||
},
|
||||
cursor: "Arrow",
|
||||
},
|
||||
zoomed_background: {
|
||||
cursor: "Arrow",
|
||||
background: is_light
|
||||
? with_opacity(background(theme.lowest), 0.8)
|
||||
: with_opacity(background(theme.highest), 0.6),
|
||||
},
|
||||
zoomed_pane_foreground: {
|
||||
margin: 16,
|
||||
shadow: theme.modal_shadow,
|
||||
border: border(theme.lowest, { overlay: true }),
|
||||
},
|
||||
zoomed_panel_foreground: {
|
||||
margin: 16,
|
||||
border: border(theme.lowest, { overlay: true }),
|
||||
},
|
||||
dock: {
|
||||
left: {
|
||||
border: border(theme.lowest, { right: true }),
|
||||
},
|
||||
bottom: {
|
||||
border: border(theme.lowest, { top: true }),
|
||||
},
|
||||
right: {
|
||||
border: border(theme.lowest, { left: true }),
|
||||
},
|
||||
},
|
||||
pane_divider: {
|
||||
color: border_color(theme.lowest),
|
||||
width: 1,
|
||||
},
|
||||
status_bar: statusBar(),
|
||||
titlebar: titlebar(),
|
||||
toolbar: {
|
||||
height: 34,
|
||||
background: background(theme.highest),
|
||||
border: border(theme.highest, { bottom: true }),
|
||||
item_spacing: 8,
|
||||
nav_button: interactive({
|
||||
base: {
|
||||
color: foreground(theme.highest, "on"),
|
||||
icon_width: 12,
|
||||
button_width: 24,
|
||||
corner_radius: 6,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.highest, "on", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
disabled: {
|
||||
color: foreground(theme.highest, "on", "disabled"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
||||
},
|
||||
breadcrumb_height: 24,
|
||||
breadcrumbs: interactive({
|
||||
base: {
|
||||
...text(theme.highest, "sans", "variant"),
|
||||
corner_radius: 6,
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.highest, "on", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
disconnected_overlay: {
|
||||
...text(theme.lowest, "sans"),
|
||||
background: with_opacity(background(theme.lowest), 0.8),
|
||||
},
|
||||
notification: {
|
||||
margin: { top: 10 },
|
||||
background: background(theme.middle),
|
||||
corner_radius: 6,
|
||||
padding: 12,
|
||||
border: border(theme.middle),
|
||||
shadow: theme.popover_shadow,
|
||||
},
|
||||
notifications: {
|
||||
width: 400,
|
||||
margin: { right: 10, bottom: 10 },
|
||||
},
|
||||
drop_target_overlay_color: with_opacity(
|
||||
foreground(theme.lowest, "variant"),
|
||||
0.5
|
||||
),
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user