WIP convert to snake_case
This commit is contained in:
Nate Butler
@@ -1,75 +0,0 @@
|
||||
import contactFinder from "./contactFinder"
|
||||
import contactsPopover from "./contactsPopover"
|
||||
import commandPalette from "./commandPalette"
|
||||
import editor from "./editor"
|
||||
import projectPanel from "./projectPanel"
|
||||
import search from "./search"
|
||||
import picker from "./picker"
|
||||
import workspace from "./workspace"
|
||||
import contextMenu from "./contextMenu"
|
||||
import sharedScreen from "./sharedScreen"
|
||||
import projectDiagnostics from "./projectDiagnostics"
|
||||
import contactNotification from "./contactNotification"
|
||||
import updateNotification from "./updateNotification"
|
||||
import simpleMessageNotification from "./simpleMessageNotification"
|
||||
import projectSharedNotification from "./projectSharedNotification"
|
||||
import tooltip from "./tooltip"
|
||||
import terminal from "./terminal"
|
||||
import contactList from "./contactList"
|
||||
import toolbarDropdownMenu from "./toolbarDropdownMenu"
|
||||
import incomingCallNotification from "./incomingCallNotification"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import feedback from "./feedback"
|
||||
import welcome from "./welcome"
|
||||
import copilot from "./copilot"
|
||||
import assistant from "./assistant"
|
||||
import { titlebar } from "./titlebar"
|
||||
|
||||
export default function app(colorScheme: ColorScheme): any {
|
||||
return {
|
||||
meta: {
|
||||
name: colorScheme.name,
|
||||
isLight: colorScheme.isLight,
|
||||
},
|
||||
commandPalette: commandPalette(colorScheme),
|
||||
contactNotification: contactNotification(colorScheme),
|
||||
projectSharedNotification: projectSharedNotification(colorScheme),
|
||||
incomingCallNotification: incomingCallNotification(colorScheme),
|
||||
picker: picker(colorScheme),
|
||||
workspace: workspace(colorScheme),
|
||||
titlebar: titlebar(colorScheme),
|
||||
copilot: copilot(colorScheme),
|
||||
welcome: welcome(colorScheme),
|
||||
contextMenu: contextMenu(colorScheme),
|
||||
editor: editor(colorScheme),
|
||||
projectDiagnostics: projectDiagnostics(colorScheme),
|
||||
projectPanel: projectPanel(colorScheme),
|
||||
contactsPopover: contactsPopover(colorScheme),
|
||||
contactFinder: contactFinder(colorScheme),
|
||||
contactList: contactList(colorScheme),
|
||||
toolbarDropdownMenu: toolbarDropdownMenu(colorScheme),
|
||||
search: search(colorScheme),
|
||||
sharedScreen: sharedScreen(colorScheme),
|
||||
updateNotification: updateNotification(colorScheme),
|
||||
simpleMessageNotification: simpleMessageNotification(colorScheme),
|
||||
tooltip: tooltip(colorScheme),
|
||||
terminal: terminal(colorScheme),
|
||||
assistant: assistant(colorScheme),
|
||||
feedback: feedback(colorScheme),
|
||||
colorScheme: {
|
||||
...colorScheme,
|
||||
players: Object.values(colorScheme.players),
|
||||
ramps: {
|
||||
neutral: colorScheme.ramps.neutral.colors(100, "hex"),
|
||||
red: colorScheme.ramps.red.colors(100, "hex"),
|
||||
orange: colorScheme.ramps.orange.colors(100, "hex"),
|
||||
yellow: colorScheme.ramps.yellow.colors(100, "hex"),
|
||||
green: colorScheme.ramps.green.colors(100, "hex"),
|
||||
cyan: colorScheme.ramps.cyan.colors(100, "hex"),
|
||||
blue: colorScheme.ramps.blue.colors(100, "hex"),
|
||||
violet: colorScheme.ramps.violet.colors(100, "hex"),
|
||||
magenta: colorScheme.ramps.magenta.colors(100, "hex"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,281 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { text, border, background, foreground } from "./components"
|
||||
import editor from "./editor"
|
||||
import { interactive } from "../element"
|
||||
|
||||
export default function assistant(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.highest
|
||||
return {
|
||||
container: {
|
||||
background: editor(colorScheme).background,
|
||||
padding: { left: 12 },
|
||||
},
|
||||
messageHeader: {
|
||||
margin: { bottom: 6, top: 6 },
|
||||
background: editor(colorScheme).background,
|
||||
},
|
||||
hamburgerButton: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(layer, "variant"),
|
||||
asset: "icons/hamburger_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 12, right: 8.5 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
splitButton: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(layer, "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(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
quoteButton: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(layer, "variant"),
|
||||
asset: "icons/quote_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 8.5, right: 8.5 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
assistButton: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(layer, "variant"),
|
||||
asset: "icons/assist_15.svg",
|
||||
dimensions: {
|
||||
width: 15,
|
||||
height: 15,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 8.5, right: 8.5 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
zoomInButton: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(layer, "variant"),
|
||||
asset: "icons/maximize_8.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 10, right: 10 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
zoomOutButton: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(layer, "variant"),
|
||||
asset: "icons/minimize_8.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 10, right: 10 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
plusButton: interactive({
|
||||
base: {
|
||||
icon: {
|
||||
color: foreground(layer, "variant"),
|
||||
asset: "icons/plus_12.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
padding: { left: 10, right: 10 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
title: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
},
|
||||
savedConversation: {
|
||||
container: interactive({
|
||||
base: {
|
||||
background: background(layer, "on"),
|
||||
padding: { top: 4, bottom: 4 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
savedAt: {
|
||||
margin: { left: 8 },
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
title: {
|
||||
margin: { left: 16 },
|
||||
...text(layer, "sans", "default", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
userSender: {
|
||||
default: {
|
||||
...text(layer, "sans", "default", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
assistantSender: {
|
||||
default: {
|
||||
...text(layer, "sans", "accent", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
systemSender: {
|
||||
default: {
|
||||
...text(layer, "sans", "variant", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
sentAt: {
|
||||
margin: { top: 2, left: 8 },
|
||||
...text(layer, "sans", "default", { size: "2xs" }),
|
||||
},
|
||||
model: interactive({
|
||||
base: {
|
||||
background: background(layer, "on"),
|
||||
margin: { left: 12, right: 12, top: 12 },
|
||||
padding: 4,
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
remainingTokens: {
|
||||
background: background(layer, "on"),
|
||||
margin: { top: 12, right: 24 },
|
||||
padding: 4,
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "positive", { size: "xs" }),
|
||||
},
|
||||
noRemainingTokens: {
|
||||
background: background(layer, "on"),
|
||||
margin: { top: 12, right: 24 },
|
||||
padding: 4,
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "negative", { size: "xs" }),
|
||||
},
|
||||
errorIcon: {
|
||||
margin: { left: 8 },
|
||||
color: foreground(layer, "negative"),
|
||||
width: 12,
|
||||
},
|
||||
apiKeyEditor: {
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
text: text(layer, "mono", "on"),
|
||||
placeholderText: text(layer, "mono", "on", "disabled", {
|
||||
size: "xs",
|
||||
}),
|
||||
selection: colorScheme.players[0],
|
||||
border: border(layer, "on"),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
},
|
||||
apiKeyPrompt: {
|
||||
padding: 10,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { text, background } from "./components"
|
||||
import { toggleable } from "../element"
|
||||
|
||||
export default function commandPalette(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.highest
|
||||
|
||||
const key = toggleable({
|
||||
base: {
|
||||
text: text(layer, "mono", "variant", "default", { size: "xs" }),
|
||||
cornerRadius: 2,
|
||||
background: background(layer, "on"),
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 2,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
active: {
|
||||
text: text(layer, "mono", "on", "default", { size: "xs" }),
|
||||
background: withOpacity(background(layer, "on"), 0.2),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
keystrokeSpacing: 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,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,306 +0,0 @@
|
||||
import { fontFamilies, fontSizes, FontWeight } from "../common"
|
||||
import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
|
||||
|
||||
function isStyleSet(key: any): key is StyleSets {
|
||||
return [
|
||||
"base",
|
||||
"variant",
|
||||
"on",
|
||||
"accent",
|
||||
"positive",
|
||||
"warning",
|
||||
"negative",
|
||||
].includes(key)
|
||||
}
|
||||
|
||||
function isStyle(key: any): key is Styles {
|
||||
return [
|
||||
"default",
|
||||
"active",
|
||||
"disabled",
|
||||
"hovered",
|
||||
"pressed",
|
||||
"inverted",
|
||||
].includes(key)
|
||||
}
|
||||
function getStyle(
|
||||
layer: Layer,
|
||||
possibleStyleSetOrStyle?: any,
|
||||
possibleStyle?: any
|
||||
): Style {
|
||||
let styleSet: StyleSets = "base"
|
||||
let style: Styles = "default"
|
||||
if (isStyleSet(possibleStyleSetOrStyle)) {
|
||||
styleSet = possibleStyleSetOrStyle
|
||||
} else if (isStyle(possibleStyleSetOrStyle)) {
|
||||
style = possibleStyleSetOrStyle
|
||||
}
|
||||
|
||||
if (isStyle(possibleStyle)) {
|
||||
style = possibleStyle
|
||||
}
|
||||
|
||||
return layer[styleSet][style]
|
||||
}
|
||||
|
||||
export function background(layer: Layer, style?: Styles): string
|
||||
export function background(
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function background(
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return getStyle(layer, styleSetOrStyles, style).background
|
||||
}
|
||||
|
||||
export function borderColor(layer: Layer, style?: Styles): string
|
||||
export function borderColor(
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function borderColor(
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return getStyle(layer, styleSetOrStyles, style).border
|
||||
}
|
||||
|
||||
export function foreground(layer: Layer, style?: Styles): string
|
||||
export function foreground(
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function foreground(
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return getStyle(layer, styleSetOrStyles, style).foreground
|
||||
}
|
||||
|
||||
interface Text extends Object {
|
||||
family: keyof typeof fontFamilies
|
||||
color: string
|
||||
size: number
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
}
|
||||
|
||||
export interface TextStyle extends Object {
|
||||
family: keyof typeof fontFamilies
|
||||
color: string
|
||||
size: number
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
}
|
||||
|
||||
export interface TextProperties {
|
||||
size?: keyof typeof fontSizes
|
||||
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,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSet: StyleSets,
|
||||
style: Styles,
|
||||
properties?: TextProperties
|
||||
): Text
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSet: StyleSets,
|
||||
properties?: TextProperties
|
||||
): Text
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
style: Styles,
|
||||
properties?: TextProperties
|
||||
): Text
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
properties?: TextProperties
|
||||
): Text
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
|
||||
styleOrProperties?: Styles | TextProperties,
|
||||
properties?: TextProperties
|
||||
) {
|
||||
const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
|
||||
|
||||
if (typeof styleSetStyleOrProperties === "object") {
|
||||
properties = styleSetStyleOrProperties
|
||||
}
|
||||
if (typeof styleOrProperties === "object") {
|
||||
properties = styleOrProperties
|
||||
}
|
||||
|
||||
const size = fontSizes[properties?.size || "sm"]
|
||||
const color = properties?.color || style.foreground
|
||||
|
||||
return {
|
||||
family: fontFamilies[fontFamily],
|
||||
...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,
|
||||
styleSet: StyleSets,
|
||||
style: Styles,
|
||||
properties?: BorderProperties
|
||||
): Border
|
||||
export function border(
|
||||
layer: Layer,
|
||||
styleSet: 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,
|
||||
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
|
||||
styleOrProperties?: Styles | BorderProperties,
|
||||
properties?: BorderProperties
|
||||
): Border {
|
||||
const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
|
||||
|
||||
if (typeof styleSetStyleOrProperties === "object") {
|
||||
properties = styleSetStyleOrProperties
|
||||
}
|
||||
if (typeof styleOrProperties === "object") {
|
||||
properties = styleOrProperties
|
||||
}
|
||||
|
||||
return {
|
||||
color: style.border,
|
||||
width: 1,
|
||||
...properties,
|
||||
}
|
||||
}
|
||||
|
||||
export function svg(
|
||||
color: string,
|
||||
asset: string,
|
||||
width: number,
|
||||
height: number
|
||||
) {
|
||||
return {
|
||||
color,
|
||||
asset,
|
||||
dimensions: {
|
||||
width,
|
||||
height,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import picker from "./picker"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function contactFinder(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
|
||||
const sideMargin = 6
|
||||
const contactButton = {
|
||||
background: background(layer, "variant"),
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 8,
|
||||
buttonWidth: 16,
|
||||
cornerRadius: 8,
|
||||
}
|
||||
|
||||
const pickerStyle = picker(colorScheme)
|
||||
const pickerInput = {
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
text: text(layer, "mono"),
|
||||
placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
|
||||
selection: colorScheme.players[0],
|
||||
border: border(layer),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
left: sideMargin,
|
||||
right: sideMargin,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
picker: {
|
||||
emptyContainer: {},
|
||||
item: {
|
||||
...pickerStyle.item,
|
||||
margin: { left: sideMargin, right: sideMargin },
|
||||
},
|
||||
noMatches: pickerStyle.noMatches,
|
||||
inputEditor: pickerInput,
|
||||
emptyInputEditor: pickerInput,
|
||||
},
|
||||
rowHeight: 28,
|
||||
contactAvatar: {
|
||||
cornerRadius: 10,
|
||||
width: 18,
|
||||
},
|
||||
contactUsername: {
|
||||
padding: {
|
||||
left: 8,
|
||||
},
|
||||
},
|
||||
contactButton: {
|
||||
...contactButton,
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
disabledContactButton: {
|
||||
...contactButton,
|
||||
background: background(layer, "disabled"),
|
||||
color: foreground(layer, "disabled"),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,240 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, borderColor, foreground, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
export default function contactsPanel(colorScheme: ColorScheme): any {
|
||||
const nameMargin = 8
|
||||
const sidePadding = 12
|
||||
|
||||
const layer = colorScheme.middle
|
||||
|
||||
const contactButton = {
|
||||
background: background(layer, "on"),
|
||||
color: foreground(layer, "on"),
|
||||
iconWidth: 8,
|
||||
buttonWidth: 16,
|
||||
cornerRadius: 8,
|
||||
}
|
||||
const projectRow = {
|
||||
guestAvatarSpacing: 4,
|
||||
height: 24,
|
||||
guestAvatar: {
|
||||
cornerRadius: 8,
|
||||
width: 14,
|
||||
},
|
||||
name: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: nameMargin,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
guests: {
|
||||
margin: {
|
||||
left: nameMargin,
|
||||
right: nameMargin,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
background: background(layer),
|
||||
padding: { top: 12 },
|
||||
userQueryEditor: {
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
text: text(layer, "mono", "on"),
|
||||
placeholderText: text(layer, "mono", "on", "disabled", {
|
||||
size: "xs",
|
||||
}),
|
||||
selection: colorScheme.players[0],
|
||||
border: border(layer, "on"),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
left: 6,
|
||||
},
|
||||
},
|
||||
userQueryEditorHeight: 33,
|
||||
addContactButton: {
|
||||
margin: { left: 6, right: 12 },
|
||||
color: foreground(layer, "on"),
|
||||
buttonWidth: 28,
|
||||
iconWidth: 16,
|
||||
},
|
||||
rowHeight: 28,
|
||||
sectionIconSize: 8,
|
||||
headerRow: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: { top: 14 },
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
},
|
||||
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"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
leaveCall: interactive({
|
||||
base: {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
cornerRadius: 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"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
contactRow: {
|
||||
inactive: {
|
||||
default: {
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
contactAvatar: {
|
||||
cornerRadius: 10,
|
||||
width: 18,
|
||||
},
|
||||
contactStatusFree: {
|
||||
cornerRadius: 4,
|
||||
padding: 4,
|
||||
margin: { top: 12, left: 12 },
|
||||
background: foreground(layer, "positive"),
|
||||
},
|
||||
contactStatusBusy: {
|
||||
cornerRadius: 4,
|
||||
padding: 4,
|
||||
margin: { top: 12, left: 12 },
|
||||
background: foreground(layer, "negative"),
|
||||
},
|
||||
contactUsername: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: nameMargin,
|
||||
},
|
||||
},
|
||||
contactButtonSpacing: nameMargin,
|
||||
contactButton: interactive({
|
||||
base: { ...contactButton },
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
disabledButton: {
|
||||
...contactButton,
|
||||
background: background(layer, "on"),
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
callingIndicator: {
|
||||
...text(layer, "mono", "variant", { size: "xs" }),
|
||||
},
|
||||
treeBranch: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: borderColor(layer),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: borderColor(layer),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
projectRow: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...projectRow,
|
||||
background: background(layer),
|
||||
icon: {
|
||||
margin: { left: nameMargin },
|
||||
color: foreground(layer, "variant"),
|
||||
width: 12,
|
||||
},
|
||||
name: {
|
||||
...projectRow.name,
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: { background: background(layer, "active") },
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
const avatarSize = 12
|
||||
const headerPadding = 8
|
||||
|
||||
export default function contactNotification(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.lowest
|
||||
return {
|
||||
headerAvatar: {
|
||||
height: avatarSize,
|
||||
width: avatarSize,
|
||||
cornerRadius: 6,
|
||||
},
|
||||
headerMessage: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, right: headerPadding },
|
||||
},
|
||||
headerHeight: 18,
|
||||
bodyMessage: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
|
||||
},
|
||||
button: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", "on", { size: "xs" }),
|
||||
background: background(layer, "on"),
|
||||
padding: 4,
|
||||
cornerRadius: 6,
|
||||
margin: { left: 6 },
|
||||
},
|
||||
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
dismissButton: {
|
||||
default: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border } from "./components"
|
||||
|
||||
export default function contactsPopover(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
return {
|
||||
background: background(layer),
|
||||
cornerRadius: 6,
|
||||
padding: { top: 6, bottom: 6 },
|
||||
shadow: colorScheme.popoverShadow,
|
||||
border: border(layer),
|
||||
width: 300,
|
||||
height: 400,
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, borderColor, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function contextMenu(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
return {
|
||||
background: background(layer),
|
||||
cornerRadius: 10,
|
||||
padding: 4,
|
||||
shadow: colorScheme.popoverShadow,
|
||||
border: border(layer),
|
||||
keystrokeMargin: 30,
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
iconSpacing: 8,
|
||||
iconWidth: 14,
|
||||
padding: { left: 6, right: 6, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
label: text(layer, "sans", { size: "sm" }),
|
||||
keystroke: {
|
||||
...text(layer, "sans", "variant", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
label: text(layer, "sans", "hovered", { size: "sm" }),
|
||||
keystroke: {
|
||||
...text(layer, "sans", "hovered", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
separator: {
|
||||
background: borderColor(layer),
|
||||
margin: { top: 2, bottom: 2 },
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,284 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, svg, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
export default function copilot(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
|
||||
const content_width = 264
|
||||
|
||||
const ctaButton =
|
||||
// Copied from welcome screen. FIXME: Move this into a ZDS component
|
||||
interactive({
|
||||
base: {
|
||||
background: background(layer),
|
||||
border: border(layer, "default"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
outLinkIcon: interactive({
|
||||
base: {
|
||||
icon: svg(
|
||||
foreground(layer, "variant"),
|
||||
"icons/link_out_12.svg",
|
||||
12,
|
||||
12
|
||||
),
|
||||
container: {
|
||||
cornerRadius: 6,
|
||||
padding: { left: 6 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
modal: {
|
||||
titleText: {
|
||||
default: {
|
||||
...text(layer, "sans", { size: "xs", weight: "bold" }),
|
||||
},
|
||||
},
|
||||
titlebar: {
|
||||
background: background(colorScheme.lowest),
|
||||
border: border(layer, "active"),
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
container: {
|
||||
background: background(colorScheme.lowest),
|
||||
padding: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 8,
|
||||
},
|
||||
},
|
||||
closeIcon: interactive({
|
||||
base: {
|
||||
icon: svg(
|
||||
foreground(layer, "variant"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
container: {
|
||||
cornerRadius: 2,
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: svg(
|
||||
foreground(layer, "on"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
icon: svg(
|
||||
foreground(layer, "base"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
dimensions: {
|
||||
width: 280,
|
||||
height: 280,
|
||||
},
|
||||
},
|
||||
|
||||
auth: {
|
||||
content_width,
|
||||
|
||||
ctaButton,
|
||||
|
||||
header: {
|
||||
icon: svg(
|
||||
foreground(layer, "default"),
|
||||
"icons/zed_plus_copilot_32.svg",
|
||||
92,
|
||||
32
|
||||
),
|
||||
container: {
|
||||
margin: {
|
||||
top: 35,
|
||||
bottom: 5,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
prompting: {
|
||||
subheading: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: {
|
||||
top: 6,
|
||||
bottom: 12,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
|
||||
hint: {
|
||||
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
||||
margin: {
|
||||
top: 6,
|
||||
bottom: 2,
|
||||
},
|
||||
},
|
||||
|
||||
deviceCode: {
|
||||
text: text(layer, "mono", { size: "sm" }),
|
||||
cta: {
|
||||
...ctaButton,
|
||||
background: background(colorScheme.lowest),
|
||||
border: border(colorScheme.lowest, "inverted"),
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
margin: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
},
|
||||
left: content_width / 2,
|
||||
leftContainer: {
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 0,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
right: (content_width * 1) / 3,
|
||||
rightContainer: interactive({
|
||||
base: {
|
||||
border: border(colorScheme.lowest, "inverted", {
|
||||
bottom: false,
|
||||
right: false,
|
||||
top: false,
|
||||
left: true,
|
||||
}),
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 5,
|
||||
left: 8,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
border: border(layer, "active", {
|
||||
bottom: false,
|
||||
right: false,
|
||||
top: false,
|
||||
left: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
notAuthorized: {
|
||||
subheading: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
|
||||
margin: {
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
|
||||
warning: {
|
||||
...text(layer, "sans", {
|
||||
size: "xs",
|
||||
color: foreground(layer, "warning"),
|
||||
}),
|
||||
border: border(layer, "warning"),
|
||||
background: background(layer, "warning"),
|
||||
cornerRadius: 2,
|
||||
padding: {
|
||||
top: 4,
|
||||
left: 4,
|
||||
bottom: 4,
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
bottom: 16,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
authorized: {
|
||||
subheading: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
|
||||
margin: {
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
|
||||
hint: {
|
||||
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
||||
margin: {
|
||||
top: 24,
|
||||
bottom: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,314 +0,0 @@
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { ColorScheme, Layer, StyleSets } from "../theme/colorScheme"
|
||||
import { background, border, borderColor, foreground, text } from "./components"
|
||||
import hoverPopover from "./hoverPopover"
|
||||
|
||||
import { buildSyntax } from "../theme/syntax"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function editor(colorScheme: ColorScheme): any {
|
||||
const { isLight } = colorScheme
|
||||
|
||||
const layer = colorScheme.highest
|
||||
|
||||
const autocompleteItem = {
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 6,
|
||||
right: 6,
|
||||
top: 2,
|
||||
},
|
||||
}
|
||||
|
||||
function diagnostic(layer: Layer, styleSet: StyleSets) {
|
||||
return {
|
||||
textScaleFactor: 0.857,
|
||||
header: {
|
||||
border: border(layer, {
|
||||
top: true,
|
||||
}),
|
||||
},
|
||||
message: {
|
||||
text: text(layer, "sans", styleSet, "default", { size: "sm" }),
|
||||
highlightText: text(layer, "sans", styleSet, "default", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const syntax = buildSyntax(colorScheme)
|
||||
|
||||
return {
|
||||
textColor: syntax.primary.color,
|
||||
background: background(layer),
|
||||
activeLineBackground: withOpacity(background(layer, "on"), 0.75),
|
||||
highlightedLineBackground: background(layer, "on"),
|
||||
// Inline autocomplete suggestions, Co-pilot suggestions, etc.
|
||||
suggestion: syntax.predictive,
|
||||
codeActions: {
|
||||
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"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
verticalScale: 0.55,
|
||||
},
|
||||
folds: {
|
||||
iconMarginScale: 2.5,
|
||||
foldedIcon: "icons/chevron_right_8.svg",
|
||||
foldableIcon: "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: {
|
||||
textColor: colorScheme.ramps.neutral(0.71).hex(),
|
||||
cornerRadiusFactor: 0.15,
|
||||
background: {
|
||||
// Copied from hover_popover highlight
|
||||
default: {
|
||||
color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
|
||||
},
|
||||
|
||||
hovered: {
|
||||
color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
|
||||
},
|
||||
|
||||
clicked: {
|
||||
color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(),
|
||||
},
|
||||
},
|
||||
},
|
||||
foldBackground: foreground(layer, "variant"),
|
||||
},
|
||||
diff: {
|
||||
deleted: isLight
|
||||
? colorScheme.ramps.red(0.5).hex()
|
||||
: colorScheme.ramps.red(0.4).hex(),
|
||||
modified: isLight
|
||||
? colorScheme.ramps.yellow(0.5).hex()
|
||||
: colorScheme.ramps.yellow(0.5).hex(),
|
||||
inserted: isLight
|
||||
? colorScheme.ramps.green(0.4).hex()
|
||||
: colorScheme.ramps.green(0.5).hex(),
|
||||
removedWidthEm: 0.275,
|
||||
widthEm: 0.15,
|
||||
cornerRadius: 0.05,
|
||||
},
|
||||
/** Highlights matching occurrences of what is under the cursor
|
||||
* as well as matched brackets
|
||||
*/
|
||||
documentHighlightReadBackground: withOpacity(
|
||||
foreground(layer, "accent"),
|
||||
0.1
|
||||
),
|
||||
documentHighlightWriteBackground: colorScheme.ramps
|
||||
.neutral(0.5)
|
||||
.alpha(0.4)
|
||||
.hex(), // TODO: This was blend * 2
|
||||
errorColor: background(layer, "negative"),
|
||||
gutterBackground: background(layer),
|
||||
gutterPaddingFactor: 3.5,
|
||||
lineNumber: withOpacity(foreground(layer), 0.35),
|
||||
lineNumberActive: foreground(layer),
|
||||
renameFade: 0.6,
|
||||
unnecessaryCodeFade: 0.5,
|
||||
selection: colorScheme.players[0],
|
||||
whitespace: colorScheme.ramps.neutral(0.5).hex(),
|
||||
guestSelections: [
|
||||
colorScheme.players[1],
|
||||
colorScheme.players[2],
|
||||
colorScheme.players[3],
|
||||
colorScheme.players[4],
|
||||
colorScheme.players[5],
|
||||
colorScheme.players[6],
|
||||
colorScheme.players[7],
|
||||
],
|
||||
autocomplete: {
|
||||
background: background(colorScheme.middle),
|
||||
cornerRadius: 8,
|
||||
padding: 4,
|
||||
margin: {
|
||||
left: -14,
|
||||
},
|
||||
border: border(colorScheme.middle),
|
||||
shadow: colorScheme.popoverShadow,
|
||||
matchHighlight: foreground(colorScheme.middle, "accent"),
|
||||
item: autocompleteItem,
|
||||
hoveredItem: {
|
||||
...autocompleteItem,
|
||||
matchHighlight: foreground(
|
||||
colorScheme.middle,
|
||||
"accent",
|
||||
"hovered"
|
||||
),
|
||||
background: background(colorScheme.middle, "hovered"),
|
||||
},
|
||||
selectedItem: {
|
||||
...autocompleteItem,
|
||||
matchHighlight: foreground(
|
||||
colorScheme.middle,
|
||||
"accent",
|
||||
"active"
|
||||
),
|
||||
background: background(colorScheme.middle, "active"),
|
||||
},
|
||||
},
|
||||
diagnosticHeader: {
|
||||
background: background(colorScheme.middle),
|
||||
iconWidthFactor: 1.5,
|
||||
textScaleFactor: 0.857,
|
||||
border: border(colorScheme.middle, {
|
||||
bottom: true,
|
||||
top: true,
|
||||
}),
|
||||
code: {
|
||||
...text(colorScheme.middle, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: 10,
|
||||
},
|
||||
},
|
||||
source: {
|
||||
text: text(colorScheme.middle, "sans", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
message: {
|
||||
highlightText: text(colorScheme.middle, "sans", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
text: text(colorScheme.middle, "sans", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
diagnosticPathHeader: {
|
||||
background: background(colorScheme.middle),
|
||||
textScaleFactor: 0.857,
|
||||
filename: text(colorScheme.middle, "mono", { size: "sm" }),
|
||||
path: {
|
||||
...text(colorScheme.middle, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
|
||||
warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
|
||||
informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
|
||||
hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
|
||||
invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
|
||||
invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
|
||||
invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
|
||||
invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
|
||||
hoverPopover: hoverPopover(colorScheme),
|
||||
linkDefinition: {
|
||||
color: syntax.linkUri.color,
|
||||
underline: syntax.linkUri.underline,
|
||||
},
|
||||
jumpIcon: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "on"),
|
||||
iconWidth: 20,
|
||||
buttonWidth: 20,
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
top: 6,
|
||||
bottom: 6,
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
scrollbar: {
|
||||
width: 12,
|
||||
minHeightFactor: 1.0,
|
||||
track: {
|
||||
border: border(layer, "variant", { left: true }),
|
||||
},
|
||||
thumb: {
|
||||
background: withOpacity(background(layer, "inverted"), 0.3),
|
||||
border: {
|
||||
width: 1,
|
||||
color: borderColor(layer, "variant"),
|
||||
top: false,
|
||||
right: true,
|
||||
left: true,
|
||||
bottom: false,
|
||||
},
|
||||
},
|
||||
git: {
|
||||
deleted: isLight
|
||||
? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8)
|
||||
: withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8),
|
||||
modified: isLight
|
||||
? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8)
|
||||
: withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8),
|
||||
inserted: isLight
|
||||
? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
|
||||
: withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
|
||||
},
|
||||
},
|
||||
compositionMark: {
|
||||
underline: {
|
||||
thickness: 1.0,
|
||||
color: borderColor(layer),
|
||||
},
|
||||
},
|
||||
syntax,
|
||||
}
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
export default function feedback(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.highest
|
||||
|
||||
return {
|
||||
submit_button: interactive({
|
||||
base: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
button_margin: 8,
|
||||
info_text_default: text(layer, "sans", "default", { size: "xs" }),
|
||||
link_text_default: text(layer, "sans", "default", {
|
||||
size: "xs",
|
||||
underline: true,
|
||||
}),
|
||||
link_text_hover: text(layer, "sans", "hovered", {
|
||||
size: "xs",
|
||||
underline: true,
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function HoverPopover(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
const baseContainer = {
|
||||
background: background(layer),
|
||||
cornerRadius: 8,
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
shadow: colorScheme.popoverShadow,
|
||||
border: border(layer),
|
||||
margin: {
|
||||
left: -8,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
container: baseContainer,
|
||||
infoContainer: {
|
||||
...baseContainer,
|
||||
background: background(layer, "accent"),
|
||||
border: border(layer, "accent"),
|
||||
},
|
||||
warningContainer: {
|
||||
...baseContainer,
|
||||
background: background(layer, "warning"),
|
||||
border: border(layer, "warning"),
|
||||
},
|
||||
errorContainer: {
|
||||
...baseContainer,
|
||||
background: background(layer, "negative"),
|
||||
border: border(layer, "negative"),
|
||||
},
|
||||
blockStyle: {
|
||||
padding: { top: 4 },
|
||||
},
|
||||
prose: text(layer, "sans", { size: "sm" }),
|
||||
diagnosticSourceHighlight: { color: foreground(layer, "accent") },
|
||||
highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function incomingCallNotification(
|
||||
colorScheme: ColorScheme
|
||||
): unknown {
|
||||
const layer = colorScheme.middle
|
||||
const avatarSize = 48
|
||||
return {
|
||||
windowHeight: 74,
|
||||
windowWidth: 380,
|
||||
background: background(layer),
|
||||
callerContainer: {
|
||||
padding: 12,
|
||||
},
|
||||
callerAvatar: {
|
||||
height: avatarSize,
|
||||
width: avatarSize,
|
||||
cornerRadius: avatarSize / 2,
|
||||
},
|
||||
callerMetadata: {
|
||||
margin: { left: 10 },
|
||||
},
|
||||
callerUsername: {
|
||||
...text(layer, "sans", { size: "sm", weight: "bold" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
callerMessage: {
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
worktreeRoots: {
|
||||
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
buttonWidth: 96,
|
||||
acceptButton: {
|
||||
background: background(layer, "accent"),
|
||||
border: border(layer, { left: true, bottom: true }),
|
||||
...text(layer, "sans", "positive", {
|
||||
size: "xs",
|
||||
weight: "extra_bold",
|
||||
}),
|
||||
},
|
||||
declineButton: {
|
||||
border: border(layer, { left: true }),
|
||||
...text(layer, "sans", "negative", {
|
||||
size: "xs",
|
||||
weight: "extra_bold",
|
||||
}),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function picker(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.lowest
|
||||
const container = {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
shadow: colorScheme.modalShadow,
|
||||
cornerRadius: 12,
|
||||
padding: {
|
||||
bottom: 4,
|
||||
},
|
||||
}
|
||||
const inputEditor = {
|
||||
placeholderText: text(layer, "sans", "on", "disabled"),
|
||||
selection: colorScheme.players[0],
|
||||
text: text(layer, "mono", "on"),
|
||||
border: border(layer, { bottom: true }),
|
||||
padding: {
|
||||
bottom: 8,
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 8,
|
||||
},
|
||||
margin: {
|
||||
bottom: 4,
|
||||
},
|
||||
}
|
||||
const emptyInputEditor: any = { ...inputEditor }
|
||||
delete emptyInputEditor.border
|
||||
delete emptyInputEditor.margin
|
||||
|
||||
return {
|
||||
...container,
|
||||
emptyContainer: {
|
||||
...container,
|
||||
padding: {},
|
||||
},
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
text: text(layer, "sans", "variant"),
|
||||
highlightText: text(layer, "sans", "accent", {
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: withOpacity(
|
||||
background(layer, "hovered"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
background: withOpacity(
|
||||
background(layer, "pressed"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: withOpacity(
|
||||
background(layer, "base", "active"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
hovered: {
|
||||
background: withOpacity(
|
||||
background(layer, "hovered"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
background: withOpacity(
|
||||
background(layer, "pressed"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
inputEditor,
|
||||
emptyInputEditor,
|
||||
noMatches: {
|
||||
text: text(layer, "sans", "variant"),
|
||||
padding: {
|
||||
bottom: 8,
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 8,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, text } from "./components"
|
||||
|
||||
export default function projectDiagnostics(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.highest
|
||||
return {
|
||||
background: background(layer),
|
||||
tabIconSpacing: 4,
|
||||
tabIconWidth: 13,
|
||||
tabSummarySpacing: 10,
|
||||
emptyMessage: text(layer, "sans", "variant", { size: "md" }),
|
||||
}
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import {
|
||||
Border,
|
||||
TextStyle,
|
||||
background,
|
||||
border,
|
||||
foreground,
|
||||
text,
|
||||
} from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import merge from "ts-deepmerge"
|
||||
export default function projectPanel(colorScheme: ColorScheme): any {
|
||||
const { isLight } = colorScheme
|
||||
|
||||
const layer = colorScheme.middle
|
||||
|
||||
type EntryStateProps = {
|
||||
background?: string
|
||||
border?: Border
|
||||
text?: TextStyle
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
type EntryState = {
|
||||
default: EntryStateProps
|
||||
hovered?: EntryStateProps
|
||||
clicked?: EntryStateProps
|
||||
}
|
||||
|
||||
const entry = (unselected?: EntryState, selected?: EntryState) => {
|
||||
const git_status = {
|
||||
git: {
|
||||
modified: isLight
|
||||
? colorScheme.ramps.yellow(0.6).hex()
|
||||
: colorScheme.ramps.yellow(0.5).hex(),
|
||||
inserted: isLight
|
||||
? colorScheme.ramps.green(0.45).hex()
|
||||
: colorScheme.ramps.green(0.5).hex(),
|
||||
conflict: isLight
|
||||
? colorScheme.ramps.red(0.6).hex()
|
||||
: colorScheme.ramps.red(0.5).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
const base_properties = {
|
||||
height: 22,
|
||||
background: background(layer),
|
||||
iconColor: foreground(layer, "variant"),
|
||||
iconSize: 7,
|
||||
iconSpacing: 5,
|
||||
text: text(layer, "mono", "variant", { size: "sm" }),
|
||||
status: {
|
||||
...git_status,
|
||||
},
|
||||
}
|
||||
|
||||
const selectedStyle: EntryState | undefined = selected
|
||||
? selected
|
||||
: unselected
|
||||
|
||||
const unselected_default_style = merge(
|
||||
base_properties,
|
||||
unselected?.default ?? {},
|
||||
{}
|
||||
)
|
||||
const unselected_hovered_style = merge(
|
||||
base_properties,
|
||||
unselected?.hovered ?? {},
|
||||
{ background: background(layer, "variant", "hovered") }
|
||||
)
|
||||
const unselected_clicked_style = merge(
|
||||
base_properties,
|
||||
unselected?.clicked ?? {},
|
||||
{ background: background(layer, "variant", "pressed") }
|
||||
)
|
||||
const selected_default_style = merge(
|
||||
base_properties,
|
||||
selectedStyle?.default ?? {},
|
||||
{ background: background(layer) }
|
||||
)
|
||||
const selected_hovered_style = merge(
|
||||
base_properties,
|
||||
selectedStyle?.hovered ?? {},
|
||||
{ background: background(layer, "variant", "hovered") }
|
||||
)
|
||||
const selected_clicked_style = merge(
|
||||
base_properties,
|
||||
selectedStyle?.clicked ?? {},
|
||||
{ background: background(layer, "variant", "pressed") }
|
||||
)
|
||||
|
||||
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 defaultEntry = entry()
|
||||
|
||||
return {
|
||||
openProjectButton: interactive({
|
||||
base: {
|
||||
background: background(layer),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "pressed"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
background: background(layer),
|
||||
padding: { left: 6, right: 6, top: 0, bottom: 6 },
|
||||
indentWidth: 12,
|
||||
entry: defaultEntry,
|
||||
draggedEntry: {
|
||||
...defaultEntry.inactive.default,
|
||||
text: text(layer, "mono", "on", { size: "sm" }),
|
||||
background: withOpacity(background(layer, "on"), 0.9),
|
||||
border: border(layer),
|
||||
},
|
||||
ignoredEntry: entry(
|
||||
{
|
||||
default: {
|
||||
text: text(layer, "mono", "disabled"),
|
||||
},
|
||||
},
|
||||
{
|
||||
default: {
|
||||
iconColor: foreground(layer, "variant"),
|
||||
},
|
||||
}
|
||||
),
|
||||
cutEntry: entry(
|
||||
{
|
||||
default: {
|
||||
text: text(layer, "mono", "disabled"),
|
||||
},
|
||||
},
|
||||
{
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "disabled", { size: "sm" }),
|
||||
},
|
||||
}
|
||||
),
|
||||
filenameEditor: {
|
||||
background: background(layer, "on"),
|
||||
text: text(layer, "mono", "on", { size: "sm" }),
|
||||
selection: colorScheme.players[0],
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function projectSharedNotification(
|
||||
colorScheme: ColorScheme
|
||||
): unknown {
|
||||
const layer = colorScheme.middle
|
||||
|
||||
const avatarSize = 48
|
||||
return {
|
||||
windowHeight: 74,
|
||||
windowWidth: 380,
|
||||
background: background(layer),
|
||||
ownerContainer: {
|
||||
padding: 12,
|
||||
},
|
||||
ownerAvatar: {
|
||||
height: avatarSize,
|
||||
width: avatarSize,
|
||||
cornerRadius: avatarSize / 2,
|
||||
},
|
||||
ownerMetadata: {
|
||||
margin: { left: 10 },
|
||||
},
|
||||
ownerUsername: {
|
||||
...text(layer, "sans", { size: "sm", weight: "bold" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
message: {
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
worktreeRoots: {
|
||||
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
|
||||
margin: { top: -3 },
|
||||
},
|
||||
buttonWidth: 96,
|
||||
openButton: {
|
||||
background: background(layer, "accent"),
|
||||
border: border(layer, { left: true, bottom: true }),
|
||||
...text(layer, "sans", "accent", {
|
||||
size: "xs",
|
||||
weight: "extra_bold",
|
||||
}),
|
||||
},
|
||||
dismissButton: {
|
||||
border: border(layer, { left: true }),
|
||||
...text(layer, "sans", "variant", {
|
||||
size: "xs",
|
||||
weight: "extra_bold",
|
||||
}),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function search(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.highest
|
||||
|
||||
// Search input
|
||||
const editor = {
|
||||
background: background(layer),
|
||||
cornerRadius: 8,
|
||||
minWidth: 200,
|
||||
maxWidth: 500,
|
||||
placeholderText: text(layer, "mono", "disabled"),
|
||||
selection: colorScheme.players[0],
|
||||
text: text(layer, "mono", "default"),
|
||||
border: border(layer),
|
||||
margin: {
|
||||
right: 12,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 12,
|
||||
right: 8,
|
||||
},
|
||||
}
|
||||
|
||||
const includeExcludeEditor = {
|
||||
...editor,
|
||||
minWidth: 100,
|
||||
maxWidth: 250,
|
||||
}
|
||||
|
||||
return {
|
||||
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
||||
matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
|
||||
optionButton: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(layer, "mono", "accent"),
|
||||
},
|
||||
hovered: {
|
||||
...text(layer, "mono", "accent", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "mono", "accent", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
editor,
|
||||
invalidEditor: {
|
||||
...editor,
|
||||
border: border(layer, "negative"),
|
||||
},
|
||||
includeExcludeEditor,
|
||||
invalidIncludeExcludeEditor: {
|
||||
...includeExcludeEditor,
|
||||
border: border(layer, "negative"),
|
||||
},
|
||||
matchIndex: {
|
||||
...text(layer, "mono", "variant"),
|
||||
padding: {
|
||||
left: 6,
|
||||
},
|
||||
},
|
||||
optionButtonGroup: {
|
||||
padding: {
|
||||
left: 12,
|
||||
right: 12,
|
||||
},
|
||||
},
|
||||
includeExcludeInputs: {
|
||||
...text(layer, "mono", "variant"),
|
||||
padding: {
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
resultsStatus: {
|
||||
...text(layer, "mono", "on"),
|
||||
size: 18,
|
||||
},
|
||||
dismissButton: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 14,
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { StyleTree } from "../types"
|
||||
import { background } from "./components"
|
||||
|
||||
export default function sharedScreen(
|
||||
colorScheme: ColorScheme
|
||||
): StyleTree.SharedScreen {
|
||||
const layer = colorScheme.highest
|
||||
return {
|
||||
background: background(layer),
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
const headerPadding = 8
|
||||
|
||||
export default function simpleMessageNotification(
|
||||
colorScheme: ColorScheme
|
||||
): unknown {
|
||||
const layer = colorScheme.middle
|
||||
return {
|
||||
message: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, right: headerPadding },
|
||||
},
|
||||
actionMessage: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
dismissButton: interactive({
|
||||
base: {
|
||||
color: foreground(layer),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
export default function statusBar(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.lowest
|
||||
|
||||
const statusContainer = {
|
||||
cornerRadius: 6,
|
||||
padding: { top: 3, bottom: 3, left: 6, right: 6 },
|
||||
}
|
||||
|
||||
const diagnosticStatusContainer = {
|
||||
cornerRadius: 6,
|
||||
padding: { top: 1, bottom: 1, left: 6, right: 6 },
|
||||
}
|
||||
|
||||
return {
|
||||
height: 30,
|
||||
itemSpacing: 8,
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
border: border(layer, { top: true, overlay: true }),
|
||||
cursorPosition: text(layer, "sans", "variant"),
|
||||
activeLanguage: interactive({
|
||||
base: {
|
||||
padding: { left: 6, right: 6 },
|
||||
...text(layer, "sans", "variant"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "on"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
autoUpdateProgressMessage: text(layer, "sans", "variant"),
|
||||
autoUpdateDoneMessage: text(layer, "sans", "variant"),
|
||||
lspStatus: interactive({
|
||||
base: {
|
||||
...diagnosticStatusContainer,
|
||||
iconSpacing: 4,
|
||||
iconWidth: 14,
|
||||
height: 18,
|
||||
message: text(layer, "sans"),
|
||||
iconColor: foreground(layer),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
message: text(layer, "sans"),
|
||||
iconColor: foreground(layer),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
diagnosticMessage: interactive({
|
||||
base: {
|
||||
...text(layer, "sans"),
|
||||
},
|
||||
state: { hovered: text(layer, "sans", "hovered") },
|
||||
}),
|
||||
diagnosticSummary: interactive({
|
||||
base: {
|
||||
height: 20,
|
||||
iconWidth: 16,
|
||||
iconSpacing: 2,
|
||||
summarySpacing: 6,
|
||||
text: text(layer, "sans", { size: "sm" }),
|
||||
iconColorOk: foreground(layer, "variant"),
|
||||
iconColorWarning: foreground(layer, "warning"),
|
||||
iconColorError: foreground(layer, "negative"),
|
||||
containerOk: {
|
||||
cornerRadius: 6,
|
||||
padding: { top: 3, bottom: 3, left: 7, right: 7 },
|
||||
},
|
||||
containerWarning: {
|
||||
...diagnosticStatusContainer,
|
||||
background: background(layer, "warning"),
|
||||
border: border(layer, "warning"),
|
||||
},
|
||||
containerError: {
|
||||
...diagnosticStatusContainer,
|
||||
background: background(layer, "negative"),
|
||||
border: border(layer, "negative"),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
iconColorOk: foreground(layer, "on"),
|
||||
containerOk: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
containerWarning: {
|
||||
background: background(layer, "warning", "hovered"),
|
||||
border: border(layer, "warning", "hovered"),
|
||||
},
|
||||
containerError: {
|
||||
background: background(layer, "negative", "hovered"),
|
||||
border: border(layer, "negative", "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
panelButtons: {
|
||||
groupLeft: {},
|
||||
groupBottom: {},
|
||||
groupRight: {},
|
||||
button: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...statusContainer,
|
||||
iconSize: 16,
|
||||
iconColor: foreground(layer, "variant"),
|
||||
label: {
|
||||
margin: { left: 6 },
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
iconColor: foreground(layer, "hovered"),
|
||||
background: background(layer, "variant"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
iconColor: foreground(layer, "active"),
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
iconColor: foreground(layer, "hovered"),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
iconColor: foreground(layer, "pressed"),
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
badge: {
|
||||
cornerRadius: 3,
|
||||
padding: 2,
|
||||
margin: { bottom: -1, right: -1 },
|
||||
border: border(layer),
|
||||
background: background(layer, "accent"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { text, border, background, foreground } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
|
||||
export default function tabBar(colorScheme: ColorScheme): any {
|
||||
const height = 32
|
||||
|
||||
const activeLayer = colorScheme.highest
|
||||
const layer = colorScheme.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)
|
||||
typeIconWidth: 14,
|
||||
|
||||
// Close icons
|
||||
closeIconWidth: 8,
|
||||
iconClose: foreground(layer, "variant"),
|
||||
iconCloseActive: foreground(layer, "hovered"),
|
||||
|
||||
// Indicators
|
||||
iconConflict: foreground(layer, "warning"),
|
||||
iconDirty: 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 activePaneActiveTab = {
|
||||
...tab,
|
||||
background: background(activeLayer),
|
||||
text: text(activeLayer, "sans", "active", { size: "sm" }),
|
||||
border: {
|
||||
...tab.border,
|
||||
bottom: false,
|
||||
},
|
||||
}
|
||||
|
||||
const inactivePaneInactiveTab = {
|
||||
...tab,
|
||||
background: background(layer),
|
||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||
}
|
||||
|
||||
const inactivePaneActiveTab = {
|
||||
...tab,
|
||||
background: background(activeLayer),
|
||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||
border: {
|
||||
...tab.border,
|
||||
bottom: false,
|
||||
},
|
||||
}
|
||||
|
||||
const draggedTab = {
|
||||
...activePaneActiveTab,
|
||||
background: withOpacity(tab.background, 0.9),
|
||||
border: undefined as any,
|
||||
shadow: colorScheme.popoverShadow,
|
||||
}
|
||||
|
||||
return {
|
||||
height,
|
||||
background: background(layer),
|
||||
activePane: {
|
||||
activeTab: activePaneActiveTab,
|
||||
inactiveTab: tab,
|
||||
},
|
||||
inactivePane: {
|
||||
activeTab: inactivePaneActiveTab,
|
||||
inactiveTab: inactivePaneInactiveTab,
|
||||
},
|
||||
draggedTab,
|
||||
paneButton: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: activePaneActiveTab.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"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
paneButtonContainer: {
|
||||
background: tab.background,
|
||||
border: {
|
||||
...tab.border,
|
||||
right: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { StyleTree } from "../types"
|
||||
|
||||
export default function terminal(theme: ColorScheme): StyleTree.TerminalStyle {
|
||||
/**
|
||||
* 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(),
|
||||
}
|
||||
}
|
||||
@@ -1,266 +0,0 @@
|
||||
import { ColorScheme } from "../common"
|
||||
import { icon_button, toggleable_icon_button } from "../component/icon_button"
|
||||
import { toggleable_text_button } from "../component/text_button"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { withOpacity } 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,
|
||||
marginY: (container_height - element_height) / 2,
|
||||
marginX: (container_height - element_height) / 2,
|
||||
}
|
||||
}
|
||||
|
||||
function call_controls(theme: ColorScheme) {
|
||||
const button_height = 18
|
||||
|
||||
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
|
||||
const marginY = {
|
||||
top: space.marginY,
|
||||
bottom: space.marginY,
|
||||
}
|
||||
|
||||
return {
|
||||
toggle_microphone_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...marginY,
|
||||
left: space.group,
|
||||
right: space.half_item,
|
||||
},
|
||||
active_color: "negative",
|
||||
}),
|
||||
|
||||
toggle_speakers_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...marginY,
|
||||
left: space.half_item,
|
||||
right: space.half_item,
|
||||
},
|
||||
}),
|
||||
|
||||
screen_share_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
...marginY,
|
||||
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(theme: ColorScheme) {
|
||||
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: {
|
||||
cornerRadius: 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 {
|
||||
userMenuButtonOnline: build_button({ online: true }),
|
||||
userMenuButtonOffline: build_button({ online: false }),
|
||||
}
|
||||
}
|
||||
|
||||
export function titlebar(theme: ColorScheme): any {
|
||||
const avatarWidth = 15
|
||||
const avatarOuterWidth = avatarWidth + 4
|
||||
const followerAvatarWidth = 14
|
||||
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
||||
|
||||
return {
|
||||
item_spacing: ITEM_SPACING,
|
||||
facePileSpacing: 2,
|
||||
height: TITLEBAR_HEIGHT,
|
||||
background: background(theme.lowest),
|
||||
border: border(theme.lowest, { bottom: true }),
|
||||
padding: {
|
||||
left: 80,
|
||||
right: 0,
|
||||
},
|
||||
|
||||
// Project
|
||||
title: text(theme.lowest, "sans", "variant"),
|
||||
highlight_color: text(theme.lowest, "sans", "active").color,
|
||||
|
||||
// Collaborators
|
||||
leaderAvatar: {
|
||||
width: avatarWidth,
|
||||
outerWidth: avatarOuterWidth,
|
||||
cornerRadius: avatarWidth / 2,
|
||||
outerCornerRadius: avatarOuterWidth / 2,
|
||||
},
|
||||
followerAvatar: {
|
||||
width: followerAvatarWidth,
|
||||
outerWidth: followerAvatarOuterWidth,
|
||||
cornerRadius: followerAvatarWidth / 2,
|
||||
outerCornerRadius: followerAvatarOuterWidth / 2,
|
||||
},
|
||||
inactiveAvatarGrayscale: true,
|
||||
followerAvatarOverlap: 8,
|
||||
leaderSelection: {
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
padding: {
|
||||
left: 2,
|
||||
right: 2,
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
},
|
||||
cornerRadius: 6,
|
||||
},
|
||||
avatarRibbon: {
|
||||
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, {}),
|
||||
offlineIcon: {
|
||||
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
|
||||
outdatedWarning: {
|
||||
...text(theme.lowest, "sans", "warning", { size: "xs" }),
|
||||
background: withOpacity(background(theme.lowest, "warning"), 0.3),
|
||||
border: border(theme.lowest, "warning"),
|
||||
margin: {
|
||||
left: ITEM_SPACING,
|
||||
},
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
cornerRadius: 6,
|
||||
},
|
||||
|
||||
leave_call_button: icon_button(theme, {
|
||||
margin: {
|
||||
left: ITEM_SPACING / 2,
|
||||
right: ITEM_SPACING,
|
||||
},
|
||||
}),
|
||||
|
||||
...call_controls(theme),
|
||||
|
||||
toggle_contacts_button: toggleable_icon_button(theme, {
|
||||
margin: {
|
||||
left: ITEM_SPACING,
|
||||
},
|
||||
}),
|
||||
|
||||
// Jewel that notifies you that there are new contact requests
|
||||
toggleContactsBadge: {
|
||||
cornerRadius: 3,
|
||||
padding: 2,
|
||||
margin: { top: 3, left: 3 },
|
||||
border: border(theme.lowest),
|
||||
background: foreground(theme.lowest, "accent"),
|
||||
},
|
||||
shareButton: toggleable_text_button(theme, {}),
|
||||
user_menu: user_menu(theme),
|
||||
}
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
export default function dropdownMenu(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
|
||||
return {
|
||||
rowHeight: 30,
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
shadow: colorScheme.popoverShadow,
|
||||
header: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryText: text(layer, "sans", {
|
||||
size: "sm",
|
||||
color: "#aaaaaa",
|
||||
}),
|
||||
secondaryTextSpacing: 10,
|
||||
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
background: background(layer, "on"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
sectionHeader: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 8, right: 8, top: 8, bottom: 8 },
|
||||
},
|
||||
item: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryTextSpacing: 10,
|
||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function tooltip(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
return {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
padding: { top: 4, bottom: 4, left: 8, right: 8 },
|
||||
margin: { top: 6, left: 6 },
|
||||
shadow: colorScheme.popoverShadow,
|
||||
cornerRadius: 6,
|
||||
text: text(layer, "sans", { size: "xs" }),
|
||||
keystroke: {
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 4,
|
||||
margin: { left: 6 },
|
||||
padding: { left: 4, right: 4 },
|
||||
...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
|
||||
},
|
||||
maxTextWidth: 200,
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { foreground, text } from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
const headerPadding = 8
|
||||
|
||||
export default function updateNotification(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.middle
|
||||
return {
|
||||
message: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, right: headerPadding },
|
||||
},
|
||||
actionMessage: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
dismissButton: interactive({
|
||||
base: {
|
||||
color: foreground(layer),
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import {
|
||||
border,
|
||||
background,
|
||||
foreground,
|
||||
text,
|
||||
TextProperties,
|
||||
svg,
|
||||
} from "./components"
|
||||
import { interactive } from "../element"
|
||||
|
||||
export default function welcome(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.highest
|
||||
|
||||
const checkboxBase = {
|
||||
cornerRadius: 4,
|
||||
padding: {
|
||||
left: 3,
|
||||
right: 3,
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
},
|
||||
// shadow: colorScheme.popoverShadow,
|
||||
border: border(layer),
|
||||
margin: {
|
||||
right: 8,
|
||||
top: 5,
|
||||
bottom: 5,
|
||||
},
|
||||
}
|
||||
|
||||
const interactive_text_size: TextProperties = { size: "sm" }
|
||||
|
||||
return {
|
||||
pageWidth: 320,
|
||||
logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64),
|
||||
logoSubheading: {
|
||||
...text(layer, "sans", "variant", { size: "md" }),
|
||||
margin: {
|
||||
top: 10,
|
||||
bottom: 7,
|
||||
},
|
||||
},
|
||||
buttonGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
headingGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 12,
|
||||
},
|
||||
},
|
||||
checkboxGroup: {
|
||||
border: border(layer, "variant"),
|
||||
background: withOpacity(background(layer, "hovered"), 0.25),
|
||||
cornerRadius: 4,
|
||||
padding: {
|
||||
left: 12,
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
},
|
||||
},
|
||||
button: interactive({
|
||||
base: {
|
||||
background: background(layer),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", interactive_text_size),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", interactive_text_size),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
usageNote: {
|
||||
...text(layer, "sans", "variant", { size: "2xs" }),
|
||||
padding: {
|
||||
top: -4,
|
||||
},
|
||||
},
|
||||
checkboxContainer: {
|
||||
margin: {
|
||||
top: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 8,
|
||||
},
|
||||
},
|
||||
checkbox: {
|
||||
label: {
|
||||
...text(layer, "sans", interactive_text_size),
|
||||
// Also supports margin, container, border, etc.
|
||||
},
|
||||
icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
|
||||
default: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "default"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
checked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
hoveredAndChecked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,200 +0,0 @@
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import {
|
||||
background,
|
||||
border,
|
||||
borderColor,
|
||||
foreground,
|
||||
svg,
|
||||
text,
|
||||
} from "./components"
|
||||
import statusBar from "./statusBar"
|
||||
import tabBar from "./tabBar"
|
||||
import { interactive } from "../element"
|
||||
|
||||
import { titlebar } from "./titlebar"
|
||||
export default function workspace(colorScheme: ColorScheme): any {
|
||||
const layer = colorScheme.lowest
|
||||
const isLight = colorScheme.isLight
|
||||
|
||||
return {
|
||||
background: background(colorScheme.lowest),
|
||||
blankPane: {
|
||||
logoContainer: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
logo: svg(
|
||||
withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
|
||||
"icons/logo_96.svg",
|
||||
256,
|
||||
256
|
||||
),
|
||||
|
||||
logoShadow: svg(
|
||||
withOpacity(
|
||||
colorScheme.isLight
|
||||
? "#FFFFFF"
|
||||
: colorScheme.lowest.base.default.background,
|
||||
colorScheme.isLight ? 1 : 0.6
|
||||
),
|
||||
"icons/logo_96.svg",
|
||||
256,
|
||||
256
|
||||
),
|
||||
keyboardHints: {
|
||||
margin: {
|
||||
top: 96,
|
||||
},
|
||||
cornerRadius: 4,
|
||||
},
|
||||
keyboardHint: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
keyboardHintWidth: 320,
|
||||
},
|
||||
joiningProjectAvatar: {
|
||||
cornerRadius: 40,
|
||||
width: 80,
|
||||
},
|
||||
joiningProjectMessage: {
|
||||
padding: 12,
|
||||
...text(layer, "sans", { size: "lg" }),
|
||||
},
|
||||
externalLocationMessage: {
|
||||
background: background(colorScheme.middle, "accent"),
|
||||
border: border(colorScheme.middle, "accent"),
|
||||
cornerRadius: 6,
|
||||
padding: 12,
|
||||
margin: { bottom: 8, right: 8 },
|
||||
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
|
||||
},
|
||||
leaderBorderOpacity: 0.7,
|
||||
leaderBorderWidth: 2.0,
|
||||
tabBar: tabBar(colorScheme),
|
||||
modal: {
|
||||
margin: {
|
||||
bottom: 52,
|
||||
top: 52,
|
||||
},
|
||||
cursor: "Arrow",
|
||||
},
|
||||
zoomedBackground: {
|
||||
cursor: "Arrow",
|
||||
background: isLight
|
||||
? withOpacity(background(colorScheme.lowest), 0.8)
|
||||
: withOpacity(background(colorScheme.highest), 0.6),
|
||||
},
|
||||
zoomedPaneForeground: {
|
||||
margin: 16,
|
||||
shadow: colorScheme.modalShadow,
|
||||
border: border(colorScheme.lowest, { overlay: true }),
|
||||
},
|
||||
zoomedPanelForeground: {
|
||||
margin: 16,
|
||||
border: border(colorScheme.lowest, { overlay: true }),
|
||||
},
|
||||
dock: {
|
||||
left: {
|
||||
border: border(layer, { right: true }),
|
||||
},
|
||||
bottom: {
|
||||
border: border(layer, { top: true }),
|
||||
},
|
||||
right: {
|
||||
border: border(layer, { left: true }),
|
||||
},
|
||||
},
|
||||
paneDivider: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
},
|
||||
statusBar: statusBar(colorScheme),
|
||||
titlebar: titlebar(colorScheme),
|
||||
toolbar: {
|
||||
height: 34,
|
||||
background: background(colorScheme.highest),
|
||||
border: border(colorScheme.highest, { bottom: true }),
|
||||
itemSpacing: 8,
|
||||
navButton: interactive({
|
||||
base: {
|
||||
color: foreground(colorScheme.highest, "on"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 24,
|
||||
cornerRadius: 6,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||
background: background(
|
||||
colorScheme.highest,
|
||||
"on",
|
||||
"hovered"
|
||||
),
|
||||
},
|
||||
disabled: {
|
||||
color: foreground(
|
||||
colorScheme.highest,
|
||||
"on",
|
||||
"disabled"
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
||||
},
|
||||
breadcrumbHeight: 24,
|
||||
breadcrumbs: interactive({
|
||||
base: {
|
||||
...text(colorScheme.highest, "sans", "variant"),
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||
background: background(
|
||||
colorScheme.highest,
|
||||
"on",
|
||||
"hovered"
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
disconnectedOverlay: {
|
||||
...text(layer, "sans"),
|
||||
background: withOpacity(background(layer), 0.8),
|
||||
},
|
||||
notification: {
|
||||
margin: { top: 10 },
|
||||
background: background(colorScheme.middle),
|
||||
cornerRadius: 6,
|
||||
padding: 12,
|
||||
border: border(colorScheme.middle),
|
||||
shadow: colorScheme.popoverShadow,
|
||||
},
|
||||
notifications: {
|
||||
width: 400,
|
||||
margin: { right: 10, bottom: 10 },
|
||||
},
|
||||
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user