mirror of
https://github.com/zed-industries/zed.git
synced 2024-09-18 18:08:07 +03:00
Set up vitest and add tests for interactive
This commit is contained in:
parent
4bd89c4c8c
commit
5369f2c25a
1
styles/.gitignore
vendored
1
styles/.gitignore
vendored
@ -1 +1,2 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
|
coverage/
|
||||||
|
2306
styles/package-lock.json
generated
2306
styles/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,8 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "ts-node ./src/buildThemes.ts",
|
"build": "ts-node ./src/buildThemes.ts",
|
||||||
"build-licenses": "ts-node ./src/buildLicenses.ts",
|
"build-licenses": "ts-node ./src/buildLicenses.ts",
|
||||||
"build-tokens": "ts-node ./src/buildTokens.ts"
|
"build-tokens": "ts-node ./src/buildTokens.ts",
|
||||||
|
"test": "vitest"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
@ -22,12 +23,16 @@
|
|||||||
"toml": "^3.0.0",
|
"toml": "^3.0.0",
|
||||||
"ts-deepmerge": "^6.0.3",
|
"ts-deepmerge": "^6.0.3",
|
||||||
"ts-node": "^10.9.1",
|
"ts-node": "^10.9.1",
|
||||||
"utility-types": "^3.10.0"
|
"utility-types": "^3.10.0",
|
||||||
|
"vitest": "^0.32.0"
|
||||||
},
|
},
|
||||||
"prettier": {
|
"prettier": {
|
||||||
"semi": false,
|
"semi": false,
|
||||||
"printWidth": 80,
|
"printWidth": 80,
|
||||||
"htmlWhitespaceSensitivity": "strict",
|
"htmlWhitespaceSensitivity": "strict",
|
||||||
"tabWidth": 4
|
"tabWidth": 4
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitest/coverage-v8": "^0.32.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
3
styles/src/element/interactive/index.ts
Normal file
3
styles/src/element/interactive/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { interactive } from "./interactive";
|
||||||
|
|
||||||
|
export { interactive }
|
59
styles/src/element/interactive/interactive.test.ts
Normal file
59
styles/src/element/interactive/interactive.test.ts
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { NOT_ENOUGH_STATES_ERROR, NO_DEFAULT_OR_BASE_ERROR, interactive } from './interactive'
|
||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
|
||||||
|
describe('interactive', () => {
|
||||||
|
|
||||||
|
it('creates an Interactive<Element> with base properties and states', () => {
|
||||||
|
|
||||||
|
const result = interactive({
|
||||||
|
base: { fontSize: 10, color: '#FFFFFF' },
|
||||||
|
state: {
|
||||||
|
hovered: { color: '#EEEEEE' },
|
||||||
|
clicked: { color: '#CCCCCC' },
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toEqual({
|
||||||
|
default: { color: '#FFFFFF', fontSize: 10 },
|
||||||
|
hovered: { color: '#EEEEEE', fontSize: 10 },
|
||||||
|
clicked: { color: '#CCCCCC', fontSize: 10 },
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('creates an Interactive<Element> with no base properties', () => {
|
||||||
|
|
||||||
|
const result = interactive({
|
||||||
|
state: {
|
||||||
|
default: { color: '#FFFFFF', fontSize: 10 },
|
||||||
|
hovered: { color: '#EEEEEE' },
|
||||||
|
clicked: { color: '#CCCCCC' },
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toEqual({
|
||||||
|
default: { color: '#FFFFFF', fontSize: 10 },
|
||||||
|
hovered: { color: '#EEEEEE', fontSize: 10 },
|
||||||
|
clicked: { color: '#CCCCCC', fontSize: 10 },
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('throws error when both default and base are missing', () => {
|
||||||
|
const state = {
|
||||||
|
hovered: { color: 'blue' },
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(() => interactive({ state })).toThrow(
|
||||||
|
NO_DEFAULT_OR_BASE_ERROR
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('throws error when no other state besides default is present', () => {
|
||||||
|
const state = {
|
||||||
|
default: { fontSize: 10 },
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(() => interactive({ state })).toThrow(
|
||||||
|
NOT_ENOUGH_STATES_ERROR
|
||||||
|
)
|
||||||
|
})
|
||||||
|
})
|
@ -10,24 +10,27 @@ type Interactive<T> = {
|
|||||||
disabled?: T,
|
disabled?: T,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const NO_DEFAULT_OR_BASE_ERROR = "An interactive object must have a default state, or a base property."
|
||||||
|
export const NOT_ENOUGH_STATES_ERROR = "An interactive object must have a default and at least one other state."
|
||||||
|
|
||||||
interface InteractiveProps<T> {
|
interface InteractiveProps<T> {
|
||||||
base?: T,
|
base?: T,
|
||||||
state: Partial<Record<InteractiveState, T>>
|
state: Partial<Record<InteractiveState, T>>
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Helper function for creating Interactive<T> objects that works pretty much like Toggle<T>.
|
* Helper function for creating Interactive<T> objects that works with Toggle<T>-like behavior.
|
||||||
* It takes a object to be used as a value for `default` field and then fills out other fields
|
* It takes a default object to be used as the value for `default` field and fills out other fields
|
||||||
* with fields from either `base` or `modifications`.
|
* with fields from either `base` or from the `state` object which contains values for specific states.
|
||||||
* Notably, it does not touch `hover`, `clicked` and `disabled` if there are no modifications for it.
|
* Notably, it does not touch `hover`, `clicked`, `selected` and `disabled` states if there are no modifications for them.
|
||||||
*
|
*
|
||||||
* @param defaultObj Object to be used as the value for `default` field.
|
* @param defaultObj Object to be used as the value for the `default` field.
|
||||||
* @param base Object containing base fields to be included in the resulting object.
|
* @param base Optional object containing base fields to be included in the resulting object.
|
||||||
* @param modifications Object containing modified fields to be included in the resulting object.
|
* @param state Object containing optional modified fields to be included in the resulting object for each state.
|
||||||
* @returns Interactive<T> object with fields from `base` and `modifications`.
|
* @returns Interactive<T> object with fields from `base` and `state`.
|
||||||
*/
|
*/
|
||||||
export function interactive<T extends Object>({ base, state }: InteractiveProps<T>): Interactive<T> {
|
export function interactive<T extends Object>({ base, state }: InteractiveProps<T>): Interactive<T> {
|
||||||
if (!base && !state.default) throw new Error("An interactive object must have a default state, or a base property.");
|
if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR);
|
||||||
|
|
||||||
let defaultState: T;
|
let defaultState: T;
|
||||||
|
|
||||||
@ -64,7 +67,7 @@ export function interactive<T extends Object>({ base, state }: InteractiveProps<
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (stateCount < 1) {
|
if (stateCount < 1) {
|
||||||
throw new Error("An interactive object must have a default and at least one other state.");
|
throw new Error(NOT_ENOUGH_STATES_ERROR);
|
||||||
}
|
}
|
||||||
|
|
||||||
return interactiveObj;
|
return interactiveObj;
|
@ -1,94 +1,94 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { text, border, background, foreground } from "./components"
|
import { text, border, background, foreground } from "./components"
|
||||||
import editor from "./editor"
|
import editor from "./editor"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
|
|
||||||
export default function assistant(colorScheme: ColorScheme) {
|
export default function assistant(colorScheme: ColorScheme) {
|
||||||
const layer = colorScheme.highest
|
const layer = colorScheme.highest
|
||||||
return {
|
return {
|
||||||
container: {
|
container: {
|
||||||
background: editor(colorScheme).background,
|
background: editor(colorScheme).background,
|
||||||
padding: { left: 12 },
|
padding: { left: 12 },
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
border: border(layer, "default", { bottom: true, top: true }),
|
border: border(layer, "default", { bottom: true, top: true }),
|
||||||
margin: { bottom: 6, top: 6 },
|
margin: { bottom: 6, top: 6 },
|
||||||
background: editor(colorScheme).background,
|
background: editor(colorScheme).background,
|
||||||
},
|
},
|
||||||
userSender: {
|
userSender: {
|
||||||
default:
|
default:
|
||||||
{ ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) },
|
{ ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) },
|
||||||
},
|
},
|
||||||
assistantSender: {
|
assistantSender: {
|
||||||
default: {
|
default: {
|
||||||
...text(layer, "sans", "accent", { size: "sm", weight: "bold" })
|
...text(layer, "sans", "accent", { size: "sm", weight: "bold" })
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
systemSender: {
|
systemSender: {
|
||||||
default: {
|
default: {
|
||||||
...text(layer, "sans", "variant", { size: "sm", weight: "bold" })
|
...text(layer, "sans", "variant", { size: "sm", weight: "bold" })
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
sentAt: {
|
sentAt: {
|
||||||
margin: { top: 2, left: 8 },
|
margin: { top: 2, left: 8 },
|
||||||
...text(layer, "sans", "default", { size: "2xs" }),
|
...text(layer, "sans", "default", { size: "2xs" }),
|
||||||
},
|
},
|
||||||
modelInfoContainer: {
|
modelInfoContainer: {
|
||||||
margin: { right: 16, top: 4 },
|
margin: { right: 16, top: 4 },
|
||||||
},
|
},
|
||||||
model: interactive({
|
model: interactive({
|
||||||
base: {
|
base: {
|
||||||
background: background(layer, "on"),
|
background: background(layer, "on"),
|
||||||
border: border(layer, "on", { overlay: true }),
|
border: border(layer, "on", { overlay: true }),
|
||||||
padding: 4,
|
padding: 4,
|
||||||
cornerRadius: 4,
|
cornerRadius: 4,
|
||||||
...text(layer, "sans", "default", { size: "xs" }),
|
...text(layer, "sans", "default", { size: "xs" }),
|
||||||
}, state: {
|
}, state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
background: background(layer, "on", "hovered"),
|
background: background(layer, "on", "hovered"),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
remainingTokens: {
|
remainingTokens: {
|
||||||
background: background(layer, "on"),
|
background: background(layer, "on"),
|
||||||
border: border(layer, "on", { overlay: true }),
|
border: border(layer, "on", { overlay: true }),
|
||||||
padding: 4,
|
padding: 4,
|
||||||
margin: { left: 4 },
|
margin: { left: 4 },
|
||||||
cornerRadius: 4,
|
cornerRadius: 4,
|
||||||
...text(layer, "sans", "positive", { size: "xs" }),
|
...text(layer, "sans", "positive", { size: "xs" }),
|
||||||
},
|
},
|
||||||
noRemainingTokens: {
|
noRemainingTokens: {
|
||||||
background: background(layer, "on"),
|
background: background(layer, "on"),
|
||||||
border: border(layer, "on", { overlay: true }),
|
border: border(layer, "on", { overlay: true }),
|
||||||
padding: 4,
|
padding: 4,
|
||||||
margin: { left: 4 },
|
margin: { left: 4 },
|
||||||
cornerRadius: 4,
|
cornerRadius: 4,
|
||||||
...text(layer, "sans", "negative", { size: "xs" }),
|
...text(layer, "sans", "negative", { size: "xs" }),
|
||||||
},
|
},
|
||||||
errorIcon: {
|
errorIcon: {
|
||||||
margin: { left: 8 },
|
margin: { left: 8 },
|
||||||
color: foreground(layer, "negative"),
|
color: foreground(layer, "negative"),
|
||||||
width: 12,
|
width: 12,
|
||||||
},
|
},
|
||||||
apiKeyEditor: {
|
apiKeyEditor: {
|
||||||
background: background(layer, "on"),
|
background: background(layer, "on"),
|
||||||
cornerRadius: 6,
|
cornerRadius: 6,
|
||||||
text: text(layer, "mono", "on"),
|
text: text(layer, "mono", "on"),
|
||||||
placeholderText: text(layer, "mono", "on", "disabled", {
|
placeholderText: text(layer, "mono", "on", "disabled", {
|
||||||
size: "xs",
|
size: "xs",
|
||||||
}),
|
}),
|
||||||
selection: colorScheme.players[0],
|
selection: colorScheme.players[0],
|
||||||
border: border(layer, "on"),
|
border: border(layer, "on"),
|
||||||
padding: {
|
padding: {
|
||||||
bottom: 4,
|
bottom: 4,
|
||||||
left: 8,
|
left: 8,
|
||||||
right: 8,
|
right: 8,
|
||||||
top: 4,
|
top: 4,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
apiKeyPrompt: {
|
apiKeyPrompt: {
|
||||||
padding: 10,
|
padding: 10,
|
||||||
...text(layer, "sans", "default", { size: "xs" }),
|
...text(layer, "sans", "default", { size: "xs" }),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,38 +2,38 @@ import { ColorScheme } from "../theme/colorScheme"
|
|||||||
import { withOpacity } from "../theme/color"
|
import { withOpacity } from "../theme/color"
|
||||||
import { text, background } from "./components"
|
import { text, background } from "./components"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
|
|
||||||
export default function commandPalette(colorScheme: ColorScheme) {
|
export default function commandPalette(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.highest
|
let layer = colorScheme.highest
|
||||||
return {
|
return {
|
||||||
keystrokeSpacing: 8,
|
keystrokeSpacing: 8,
|
||||||
key:
|
key:
|
||||||
toggleable(interactive({
|
toggleable(interactive({
|
||||||
base: {
|
base: {
|
||||||
text: text(layer, "mono", "variant", "default", { size: "xs" }),
|
text: text(layer, "mono", "variant", "default", { size: "xs" }),
|
||||||
cornerRadius: 2,
|
cornerRadius: 2,
|
||||||
background: background(layer, "on"),
|
background: background(layer, "on"),
|
||||||
padding: {
|
padding: {
|
||||||
top: 1,
|
top: 1,
|
||||||
bottom: 1,
|
bottom: 1,
|
||||||
left: 6,
|
left: 6,
|
||||||
right: 6,
|
right: 6,
|
||||||
},
|
},
|
||||||
margin: {
|
margin: {
|
||||||
top: 1,
|
top: 1,
|
||||||
bottom: 1,
|
bottom: 1,
|
||||||
left: 2,
|
left: 2,
|
||||||
},
|
},
|
||||||
}, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }
|
}, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }
|
||||||
}), {
|
}), {
|
||||||
default: {
|
default: {
|
||||||
text: text(layer, "mono", "on", "default", { size: "xs" }),
|
text: text(layer, "mono", "on", "default", { size: "xs" }),
|
||||||
background: withOpacity(background(layer, "on"), 0.2),
|
background: withOpacity(background(layer, "on"), 0.2),
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
,
|
,
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,218 +1,218 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { background, border, borderColor, foreground, text } from "./components"
|
import { background, border, borderColor, foreground, text } from "./components"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
export default function contactsPanel(colorScheme: ColorScheme) {
|
export default function contactsPanel(colorScheme: ColorScheme) {
|
||||||
const nameMargin = 8
|
const nameMargin = 8
|
||||||
const sidePadding = 12
|
const sidePadding = 12
|
||||||
|
|
||||||
let layer = colorScheme.middle
|
let layer = colorScheme.middle
|
||||||
|
|
||||||
const contactButton = {
|
const contactButton = {
|
||||||
background: background(layer, "on"),
|
background: background(layer, "on"),
|
||||||
color: foreground(layer, "on"),
|
color: foreground(layer, "on"),
|
||||||
iconWidth: 8,
|
iconWidth: 8,
|
||||||
buttonWidth: 16,
|
buttonWidth: 16,
|
||||||
cornerRadius: 8,
|
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(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, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
default: {
|
|
||||||
...text(layer, "mono", "active", { size: "sm" }),
|
|
||||||
background: background(layer, "active"),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
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"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
),
|
const projectRow = {
|
||||||
contactRow: {
|
guestAvatarSpacing: 4,
|
||||||
inactive: {
|
height: 24,
|
||||||
default: {
|
guestAvatar: {
|
||||||
padding: {
|
cornerRadius: 8,
|
||||||
left: sidePadding,
|
width: 14,
|
||||||
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(interactive({
|
|
||||||
base: {
|
|
||||||
color: borderColor(layer),
|
|
||||||
width: 1,
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
hovered: {
|
|
||||||
color: borderColor(layer),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
default: {
|
|
||||||
color: borderColor(layer),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
),
|
|
||||||
projectRow: toggleable(interactive({
|
|
||||||
base: {
|
|
||||||
...projectRow,
|
|
||||||
background: background(layer),
|
|
||||||
icon: {
|
|
||||||
margin: { left: nameMargin },
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
width: 12,
|
|
||||||
},
|
},
|
||||||
name: {
|
name: {
|
||||||
...projectRow.name,
|
...text(layer, "mono", { size: "sm" }),
|
||||||
...text(layer, "mono", { size: "sm" }),
|
margin: {
|
||||||
|
left: nameMargin,
|
||||||
|
right: 6,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}, state: {
|
guests: {
|
||||||
hovered: {
|
margin: {
|
||||||
background: background(layer, "hovered"),
|
left: nameMargin,
|
||||||
|
right: nameMargin,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
padding: {
|
||||||
}),
|
left: sidePadding,
|
||||||
{
|
right: sidePadding,
|
||||||
default: { background: background(layer, "active") }
|
},
|
||||||
})
|
}
|
||||||
}
|
|
||||||
|
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(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, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
...text(layer, "mono", "active", { size: "sm" }),
|
||||||
|
background: background(layer, "active"),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
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(interactive({
|
||||||
|
base: {
|
||||||
|
color: borderColor(layer),
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
hovered: {
|
||||||
|
color: borderColor(layer),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
color: borderColor(layer),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
),
|
||||||
|
projectRow: toggleable(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"),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: { background: background(layer, "active") }
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,54 +1,54 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { background, foreground, text } from "./components"
|
import { background, foreground, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
const avatarSize = 12
|
const avatarSize = 12
|
||||||
const headerPadding = 8
|
const headerPadding = 8
|
||||||
|
|
||||||
export default function contactNotification(colorScheme: ColorScheme): Object {
|
export default function contactNotification(colorScheme: ColorScheme): Object {
|
||||||
let layer = colorScheme.lowest
|
let layer = colorScheme.lowest
|
||||||
return {
|
return {
|
||||||
headerAvatar: {
|
headerAvatar: {
|
||||||
height: avatarSize,
|
height: avatarSize,
|
||||||
width: avatarSize,
|
width: avatarSize,
|
||||||
cornerRadius: 6,
|
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 }
|
|
||||||
},
|
},
|
||||||
|
headerMessage: {
|
||||||
state: {
|
...text(layer, "sans", { size: "xs" }),
|
||||||
hovered: {
|
margin: { left: headerPadding, right: headerPadding },
|
||||||
background: background(layer, "on", "hovered"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
|
|
||||||
dismissButton: {
|
|
||||||
default: {
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
iconWidth: 8,
|
|
||||||
iconHeight: 8,
|
|
||||||
buttonWidth: 8,
|
|
||||||
buttonHeight: 8,
|
|
||||||
hover: {
|
|
||||||
color: foreground(layer, "hovered"),
|
|
||||||
},
|
},
|
||||||
}
|
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,56 +1,56 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { background, border, borderColor, text } from "./components"
|
import { background, border, borderColor, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
|
|
||||||
export default function contextMenu(colorScheme: ColorScheme) {
|
export default function contextMenu(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.middle
|
let layer = colorScheme.middle
|
||||||
return {
|
return {
|
||||||
background: background(layer),
|
background: background(layer),
|
||||||
cornerRadius: 10,
|
cornerRadius: 10,
|
||||||
padding: 4,
|
padding: 4,
|
||||||
shadow: colorScheme.popoverShadow,
|
shadow: colorScheme.popoverShadow,
|
||||||
border: border(layer),
|
border: border(layer),
|
||||||
keystrokeMargin: 30,
|
keystrokeMargin: 30,
|
||||||
item: toggleable(interactive({
|
item: toggleable(interactive({
|
||||||
base: {
|
base: {
|
||||||
iconSpacing: 8,
|
iconSpacing: 8,
|
||||||
iconWidth: 14,
|
iconWidth: 14,
|
||||||
padding: { left: 6, right: 6, top: 2, bottom: 2 },
|
padding: { left: 6, right: 6, top: 2, bottom: 2 },
|
||||||
cornerRadius: 6,
|
cornerRadius: 6,
|
||||||
label: text(layer, "sans", { size: "sm" }),
|
label: text(layer, "sans", { size: "sm" }),
|
||||||
keystroke: {
|
keystroke: {
|
||||||
...text(layer, "sans", "variant", {
|
...text(layer, "sans", "variant", {
|
||||||
size: "sm",
|
size: "sm",
|
||||||
weight: "bold",
|
weight: "bold",
|
||||||
}),
|
}),
|
||||||
padding: { left: 3, right: 3 },
|
padding: { left: 3, right: 3 },
|
||||||
}
|
}
|
||||||
}, state: {
|
}, state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
background: background(layer, "hovered"),
|
background: background(layer, "hovered"),
|
||||||
label: text(layer, "sans", "hovered", { size: "sm" }),
|
label: text(layer, "sans", "hovered", { size: "sm" }),
|
||||||
keystroke: {
|
keystroke: {
|
||||||
...text(layer, "sans", "hovered", {
|
...text(layer, "sans", "hovered", {
|
||||||
size: "sm",
|
size: "sm",
|
||||||
weight: "bold",
|
weight: "bold",
|
||||||
}),
|
}),
|
||||||
padding: { left: 3, right: 3 },
|
padding: { left: 3, right: 3 },
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}), {
|
}), {
|
||||||
default: {
|
default: {
|
||||||
background: background(layer, "active"),
|
background: background(layer, "active"),
|
||||||
},
|
},
|
||||||
hovered: {
|
hovered: {
|
||||||
background: background(layer, "active"),
|
background: background(layer, "active"),
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
separator: {
|
separator: {
|
||||||
background: borderColor(layer),
|
background: borderColor(layer),
|
||||||
margin: { top: 2, bottom: 2 },
|
margin: { top: 2, bottom: 2 },
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,286 +1,286 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { background, border, foreground, svg, text } from "./components"
|
import { background, border, foreground, svg, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
export default function copilot(colorScheme: ColorScheme) {
|
export default function copilot(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.middle
|
let layer = colorScheme.middle
|
||||||
|
|
||||||
let content_width = 264
|
let content_width = 264
|
||||||
|
|
||||||
let ctaButton =
|
let ctaButton =
|
||||||
// Copied from welcome screen. FIXME: Move this into a ZDS component
|
// Copied from welcome screen. FIXME: Move this into a ZDS component
|
||||||
interactive({
|
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: {
|
base: {
|
||||||
border: border(colorScheme.lowest, "inverted", {
|
background: background(layer),
|
||||||
bottom: false,
|
border: border(layer, "default"),
|
||||||
right: false,
|
cornerRadius: 4,
|
||||||
top: false,
|
margin: {
|
||||||
left: true,
|
top: 4,
|
||||||
}),
|
bottom: 4,
|
||||||
padding: {
|
left: 8,
|
||||||
top: 3,
|
right: 8,
|
||||||
bottom: 5,
|
},
|
||||||
left: 8,
|
padding: {
|
||||||
right: 0,
|
top: 3,
|
||||||
}
|
bottom: 3,
|
||||||
}, state: {
|
left: 7,
|
||||||
hovered: {
|
right: 7,
|
||||||
border: border(layer, "active", {
|
},
|
||||||
bottom: false,
|
...text(layer, "sans", "default", { size: "sm" })
|
||||||
right: false,
|
},
|
||||||
top: false,
|
state: {
|
||||||
left: true,
|
hovered: {
|
||||||
}),
|
...text(layer, "sans", "default", { size: "sm" }),
|
||||||
},
|
background: background(layer, "hovered"),
|
||||||
|
border: border(layer, "active"),
|
||||||
|
},
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
notAuthorized: {
|
return {
|
||||||
subheading: {
|
outLinkIcon:
|
||||||
...text(layer, "sans", { size: "xs" }),
|
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")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
margin: {
|
modal: {
|
||||||
top: 16,
|
titleText: {
|
||||||
bottom: 16,
|
default: {
|
||||||
left: 0,
|
...text(layer, "sans", { size: "xs", weight: "bold" })
|
||||||
right: 0,
|
}
|
||||||
},
|
},
|
||||||
|
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,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
warning: {
|
auth: {
|
||||||
...text(layer, "sans", {
|
content_width,
|
||||||
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: {
|
ctaButton,
|
||||||
subheading: {
|
|
||||||
...text(layer, "sans", { size: "xs" }),
|
|
||||||
|
|
||||||
margin: {
|
header: {
|
||||||
top: 16,
|
icon: svg(
|
||||||
bottom: 16,
|
foreground(layer, "default"),
|
||||||
},
|
"icons/zed_plus_copilot_32.svg",
|
||||||
},
|
92,
|
||||||
|
32
|
||||||
|
),
|
||||||
|
container: {
|
||||||
|
margin: {
|
||||||
|
top: 35,
|
||||||
|
bottom: 5,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
hint: {
|
prompting: {
|
||||||
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
subheading: {
|
||||||
margin: {
|
...text(layer, "sans", { size: "xs" }),
|
||||||
top: 24,
|
margin: {
|
||||||
bottom: 4,
|
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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -4,290 +4,290 @@ import { background, border, borderColor, foreground, text } from "./components"
|
|||||||
import hoverPopover from "./hoverPopover"
|
import hoverPopover from "./hoverPopover"
|
||||||
|
|
||||||
import { buildSyntax } from "../theme/syntax"
|
import { buildSyntax } from "../theme/syntax"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
|
|
||||||
export default function editor(colorScheme: ColorScheme) {
|
export default function editor(colorScheme: ColorScheme) {
|
||||||
const { isLight } = colorScheme
|
const { isLight } = colorScheme
|
||||||
|
|
||||||
let layer = colorScheme.highest
|
let layer = colorScheme.highest
|
||||||
|
|
||||||
const autocompleteItem = {
|
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(interactive({
|
|
||||||
base: {
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
}, state: {
|
|
||||||
clicked: {
|
|
||||||
color: foreground(layer, "base"),
|
|
||||||
},
|
|
||||||
hovered: {
|
|
||||||
color: foreground(layer, "on"),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
default: {
|
|
||||||
color: foreground(layer, "on"),
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
|
|
||||||
verticalScale: 0.55,
|
|
||||||
},
|
|
||||||
folds: {
|
|
||||||
iconMarginScale: 2.5,
|
|
||||||
foldedIcon: "icons/chevron_right_8.svg",
|
|
||||||
foldableIcon: "icons/chevron_down_8.svg",
|
|
||||||
indicator: toggleable(interactive({
|
|
||||||
base: {
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
}, state: {
|
|
||||||
clicked: {
|
|
||||||
color: foreground(layer, "base"),
|
|
||||||
},
|
|
||||||
hovered: {
|
|
||||||
color: foreground(layer, "on"),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
default: {
|
|
||||||
color: foreground(layer, "on"),
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
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() },
|
|
||||||
|
|
||||||
hover: {
|
|
||||||
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,
|
cornerRadius: 6,
|
||||||
padding: {
|
padding: {
|
||||||
top: 6,
|
bottom: 2,
|
||||||
bottom: 6,
|
left: 6,
|
||||||
left: 6,
|
right: 6,
|
||||||
right: 6,
|
top: 2,
|
||||||
}
|
|
||||||
}, 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
|
function diagnostic(layer: Layer, styleSet: StyleSets) {
|
||||||
? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8)
|
return {
|
||||||
: withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8),
|
textScaleFactor: 0.857,
|
||||||
modified: isLight
|
header: {
|
||||||
? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8)
|
border: border(layer, {
|
||||||
: withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8),
|
top: true,
|
||||||
inserted: isLight
|
}),
|
||||||
? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
|
},
|
||||||
: withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
|
message: {
|
||||||
},
|
text: text(layer, "sans", styleSet, "default", { size: "sm" }),
|
||||||
},
|
highlightText: text(layer, "sans", styleSet, "default", {
|
||||||
compositionMark: {
|
size: "sm",
|
||||||
underline: {
|
weight: "bold",
|
||||||
thickness: 1.0,
|
}),
|
||||||
color: borderColor(layer),
|
},
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
syntax,
|
|
||||||
}
|
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(interactive({
|
||||||
|
base: {
|
||||||
|
color: foreground(layer, "variant"),
|
||||||
|
}, state: {
|
||||||
|
clicked: {
|
||||||
|
color: foreground(layer, "base"),
|
||||||
|
},
|
||||||
|
hovered: {
|
||||||
|
color: foreground(layer, "on"),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
color: foreground(layer, "on"),
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
verticalScale: 0.55,
|
||||||
|
},
|
||||||
|
folds: {
|
||||||
|
iconMarginScale: 2.5,
|
||||||
|
foldedIcon: "icons/chevron_right_8.svg",
|
||||||
|
foldableIcon: "icons/chevron_down_8.svg",
|
||||||
|
indicator: toggleable(interactive({
|
||||||
|
base: {
|
||||||
|
color: foreground(layer, "variant"),
|
||||||
|
}, state: {
|
||||||
|
clicked: {
|
||||||
|
color: foreground(layer, "base"),
|
||||||
|
},
|
||||||
|
hovered: {
|
||||||
|
color: foreground(layer, "on"),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
color: foreground(layer, "on"),
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
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() },
|
||||||
|
|
||||||
|
hover: {
|
||||||
|
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,48 +1,48 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { background, border, text } from "./components"
|
import { background, border, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
|
|
||||||
export default function feedback(colorScheme: ColorScheme) {
|
export default function feedback(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.highest
|
let layer = colorScheme.highest
|
||||||
|
|
||||||
return {
|
return {
|
||||||
submit_button: interactive({
|
submit_button: interactive({
|
||||||
base: {
|
base: {
|
||||||
...text(layer, "mono", "on"),
|
...text(layer, "mono", "on"),
|
||||||
background: background(layer, "on"),
|
background: background(layer, "on"),
|
||||||
cornerRadius: 6,
|
cornerRadius: 6,
|
||||||
border: border(layer, "on"),
|
border: border(layer, "on"),
|
||||||
margin: {
|
margin: {
|
||||||
right: 4,
|
right: 4,
|
||||||
},
|
},
|
||||||
padding: {
|
padding: {
|
||||||
bottom: 2,
|
bottom: 2,
|
||||||
left: 10,
|
left: 10,
|
||||||
right: 10,
|
right: 10,
|
||||||
top: 2,
|
top: 2,
|
||||||
}
|
}
|
||||||
}, state: {
|
}, state: {
|
||||||
clicked: {
|
clicked: {
|
||||||
...text(layer, "mono", "on", "pressed"),
|
...text(layer, "mono", "on", "pressed"),
|
||||||
background: background(layer, "on", "pressed"),
|
background: background(layer, "on", "pressed"),
|
||||||
border: border(layer, "on", "pressed"),
|
border: border(layer, "on", "pressed"),
|
||||||
},
|
},
|
||||||
hovered: {
|
hovered: {
|
||||||
...text(layer, "mono", "on", "hovered"),
|
...text(layer, "mono", "on", "hovered"),
|
||||||
background: background(layer, "on", "hovered"),
|
background: background(layer, "on", "hovered"),
|
||||||
border: border(layer, "on", "hovered"),
|
border: border(layer, "on", "hovered"),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
button_margin: 8,
|
button_margin: 8,
|
||||||
info_text_default: text(layer, "sans", "default", { size: "xs" }),
|
info_text_default: text(layer, "sans", "default", { size: "xs" }),
|
||||||
link_text_default: text(layer, "sans", "default", {
|
link_text_default: text(layer, "sans", "default", {
|
||||||
size: "xs",
|
size: "xs",
|
||||||
underline: true,
|
underline: true,
|
||||||
}),
|
}),
|
||||||
link_text_hover: text(layer, "sans", "hovered", {
|
link_text_hover: text(layer, "sans", "hovered", {
|
||||||
size: "xs",
|
size: "xs",
|
||||||
underline: true,
|
underline: true,
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,88 +2,88 @@ import { ColorScheme } from "../theme/colorScheme"
|
|||||||
import { withOpacity } from "../theme/color"
|
import { withOpacity } from "../theme/color"
|
||||||
import { background, border, text } from "./components"
|
import { background, border, text } from "./components"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
|
|
||||||
export default function picker(colorScheme: ColorScheme): any {
|
export default function picker(colorScheme: ColorScheme): any {
|
||||||
let layer = colorScheme.lowest
|
let layer = colorScheme.lowest
|
||||||
const container = {
|
const container = {
|
||||||
background: background(layer),
|
background: background(layer),
|
||||||
border: border(layer),
|
border: border(layer),
|
||||||
shadow: colorScheme.modalShadow,
|
shadow: colorScheme.modalShadow,
|
||||||
cornerRadius: 12,
|
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(interactive({
|
|
||||||
base: {
|
|
||||||
padding: {
|
padding: {
|
||||||
bottom: 4,
|
bottom: 4,
|
||||||
left: 12,
|
},
|
||||||
right: 12,
|
}
|
||||||
top: 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: {
|
margin: {
|
||||||
top: 1,
|
bottom: 4,
|
||||||
left: 4,
|
|
||||||
right: 4,
|
|
||||||
},
|
},
|
||||||
cornerRadius: 8,
|
}
|
||||||
text: text(layer, "sans", "variant"),
|
const emptyInputEditor: any = { ...inputEditor }
|
||||||
highlightText: text(layer, "sans", "accent", { weight: "bold" }),
|
delete emptyInputEditor.border
|
||||||
}
|
delete emptyInputEditor.margin
|
||||||
, state: {
|
|
||||||
hovered: {
|
return {
|
||||||
background: withOpacity(background(layer, "hovered"), 0.5),
|
...container,
|
||||||
}
|
emptyContainer: {
|
||||||
}
|
...container,
|
||||||
}),
|
padding: {},
|
||||||
{
|
},
|
||||||
default: {
|
item: toggleable(interactive({
|
||||||
background: withOpacity(
|
base: {
|
||||||
background(layer, "base", "active"),
|
padding: {
|
||||||
0.5
|
bottom: 4,
|
||||||
),
|
left: 12,
|
||||||
//text: text(layer, "sans", "base", "active"),
|
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),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
background: withOpacity(
|
||||||
|
background(layer, "base", "active"),
|
||||||
|
0.5
|
||||||
|
),
|
||||||
|
//text: text(layer, "sans", "base", "active"),
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
|
||||||
inputEditor,
|
inputEditor,
|
||||||
emptyInputEditor,
|
emptyInputEditor,
|
||||||
noMatches: {
|
noMatches: {
|
||||||
text: text(layer, "sans", "variant"),
|
text: text(layer, "sans", "variant"),
|
||||||
padding: {
|
padding: {
|
||||||
bottom: 8,
|
bottom: 8,
|
||||||
left: 16,
|
left: 16,
|
||||||
right: 16,
|
right: 16,
|
||||||
top: 8,
|
top: 8,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,123 +1,123 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { withOpacity } from "../theme/color"
|
import { withOpacity } from "../theme/color"
|
||||||
import { background, border, foreground, text } from "./components"
|
import { background, border, foreground, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
export default function projectPanel(colorScheme: ColorScheme) {
|
export default function projectPanel(colorScheme: ColorScheme) {
|
||||||
const { isLight } = colorScheme
|
const { isLight } = colorScheme
|
||||||
|
|
||||||
let layer = colorScheme.middle
|
let layer = colorScheme.middle
|
||||||
|
|
||||||
let baseEntry = {
|
let baseEntry = {
|
||||||
height: 22,
|
height: 22,
|
||||||
iconColor: foreground(layer, "variant"),
|
|
||||||
iconSize: 7,
|
|
||||||
iconSpacing: 5,
|
|
||||||
}
|
|
||||||
|
|
||||||
let 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(),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
let entry = toggleable(interactive({
|
|
||||||
base: {
|
|
||||||
...baseEntry,
|
|
||||||
text: text(layer, "mono", "variant", { size: "sm" }),
|
|
||||||
status,
|
|
||||||
}, state:
|
|
||||||
{
|
|
||||||
hovered: {
|
|
||||||
background: background(layer, "variant", "hovered"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
default: {
|
|
||||||
/*background: colorScheme.isLight
|
|
||||||
? withOpacity(background(layer, "active"), 0.5)
|
|
||||||
: background(layer, "active") ,*/ // todo posiewic
|
|
||||||
text: text(layer, "mono", "active", { size: "sm" }),
|
|
||||||
},
|
|
||||||
hovered: {
|
|
||||||
//background: background(layer, "active"),
|
|
||||||
text: text(layer, "mono", "active", { size: "sm" }),
|
|
||||||
},
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
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"),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
background: background(layer),
|
|
||||||
padding: { left: 6, right: 6, top: 0, bottom: 6 },
|
|
||||||
indentWidth: 12,
|
|
||||||
entry,
|
|
||||||
draggedEntry: {
|
|
||||||
...baseEntry,
|
|
||||||
text: text(layer, "mono", "on", { size: "sm" }),
|
|
||||||
background: withOpacity(background(layer, "on"), 0.9),
|
|
||||||
border: border(layer),
|
|
||||||
status,
|
|
||||||
},
|
|
||||||
ignoredEntry: {
|
|
||||||
...entry,
|
|
||||||
iconColor: foreground(layer, "disabled"),
|
|
||||||
text: text(layer, "mono", "disabled"),
|
|
||||||
active: {
|
|
||||||
...entry.active,
|
|
||||||
iconColor: foreground(layer, "variant"),
|
iconColor: foreground(layer, "variant"),
|
||||||
},
|
iconSize: 7,
|
||||||
},
|
iconSpacing: 5,
|
||||||
cutEntry: {
|
}
|
||||||
...entry,
|
|
||||||
text: text(layer, "mono", "disabled"),
|
|
||||||
active: {
|
|
||||||
...entry.active,
|
|
||||||
default: {
|
|
||||||
...entry.active.default,
|
|
||||||
background: background(layer, "active"),
|
|
||||||
text: text(layer, "mono", "disabled", { size: "sm" }),
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
let status = {
|
||||||
},
|
git: {
|
||||||
filenameEditor: {
|
modified: isLight
|
||||||
background: background(layer, "on"),
|
? colorScheme.ramps.yellow(0.6).hex()
|
||||||
text: text(layer, "mono", "on", { size: "sm" }),
|
: colorScheme.ramps.yellow(0.5).hex(),
|
||||||
selection: colorScheme.players[0],
|
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(),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
let entry = toggleable(interactive({
|
||||||
|
base: {
|
||||||
|
...baseEntry,
|
||||||
|
text: text(layer, "mono", "variant", { size: "sm" }),
|
||||||
|
status,
|
||||||
|
}, state:
|
||||||
|
{
|
||||||
|
hovered: {
|
||||||
|
background: background(layer, "variant", "hovered"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
/*background: colorScheme.isLight
|
||||||
|
? withOpacity(background(layer, "active"), 0.5)
|
||||||
|
: background(layer, "active") ,*/ // todo posiewic
|
||||||
|
text: text(layer, "mono", "active", { size: "sm" }),
|
||||||
|
},
|
||||||
|
hovered: {
|
||||||
|
//background: background(layer, "active"),
|
||||||
|
text: text(layer, "mono", "active", { size: "sm" }),
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
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"),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
background: background(layer),
|
||||||
|
padding: { left: 6, right: 6, top: 0, bottom: 6 },
|
||||||
|
indentWidth: 12,
|
||||||
|
entry,
|
||||||
|
draggedEntry: {
|
||||||
|
...baseEntry,
|
||||||
|
text: text(layer, "mono", "on", { size: "sm" }),
|
||||||
|
background: withOpacity(background(layer, "on"), 0.9),
|
||||||
|
border: border(layer),
|
||||||
|
status,
|
||||||
|
},
|
||||||
|
ignoredEntry: {
|
||||||
|
...entry,
|
||||||
|
iconColor: foreground(layer, "disabled"),
|
||||||
|
text: text(layer, "mono", "disabled"),
|
||||||
|
active: {
|
||||||
|
...entry.active,
|
||||||
|
iconColor: foreground(layer, "variant"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cutEntry: {
|
||||||
|
...entry,
|
||||||
|
text: text(layer, "mono", "disabled"),
|
||||||
|
active: {
|
||||||
|
...entry.active,
|
||||||
|
default: {
|
||||||
|
...entry.active.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,123 +1,123 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { withOpacity } from "../theme/color"
|
import { withOpacity } from "../theme/color"
|
||||||
import { background, border, foreground, text } from "./components"
|
import { background, border, foreground, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
|
|
||||||
export default function search(colorScheme: ColorScheme) {
|
export default function search(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.highest
|
let layer = colorScheme.highest
|
||||||
|
|
||||||
// Search input
|
// Search input
|
||||||
const editor = {
|
const editor = {
|
||||||
background: background(layer),
|
background: background(layer),
|
||||||
cornerRadius: 8,
|
cornerRadius: 8,
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
maxWidth: 500,
|
maxWidth: 500,
|
||||||
placeholderText: text(layer, "mono", "disabled"),
|
placeholderText: text(layer, "mono", "disabled"),
|
||||||
selection: colorScheme.players[0],
|
selection: colorScheme.players[0],
|
||||||
text: text(layer, "mono", "default"),
|
text: text(layer, "mono", "default"),
|
||||||
border: border(layer),
|
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(interactive({
|
|
||||||
base: {
|
|
||||||
...text(layer, "mono", "on"),
|
|
||||||
background: background(layer, "on"),
|
|
||||||
cornerRadius: 6,
|
|
||||||
border: border(layer, "on"),
|
|
||||||
margin: {
|
margin: {
|
||||||
right: 4,
|
right: 12,
|
||||||
},
|
},
|
||||||
padding: {
|
padding: {
|
||||||
bottom: 2,
|
top: 3,
|
||||||
left: 10,
|
bottom: 3,
|
||||||
right: 10,
|
left: 12,
|
||||||
top: 2,
|
right: 8,
|
||||||
},
|
},
|
||||||
}, 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"),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}), {
|
|
||||||
default: {
|
|
||||||
...text(layer, "mono", "on", "inverted"),
|
|
||||||
background: background(layer, "on", "inverted"),
|
|
||||||
border: border(layer, "on", "inverted"),
|
|
||||||
},
|
|
||||||
|
|
||||||
}),
|
const includeExcludeEditor = {
|
||||||
editor,
|
...editor,
|
||||||
invalidEditor: {
|
minWidth: 100,
|
||||||
...editor,
|
maxWidth: 250,
|
||||||
border: border(layer, "negative"),
|
}
|
||||||
},
|
|
||||||
includeExcludeEditor,
|
return {
|
||||||
invalidIncludeExcludeEditor: {
|
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
||||||
...includeExcludeEditor,
|
matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
|
||||||
border: border(layer, "negative"),
|
optionButton: toggleable(interactive({
|
||||||
},
|
base: {
|
||||||
matchIndex: {
|
...text(layer, "mono", "on"),
|
||||||
...text(layer, "mono", "variant"),
|
background: background(layer, "on"),
|
||||||
padding: {
|
cornerRadius: 6,
|
||||||
left: 6,
|
border: border(layer, "on"),
|
||||||
},
|
margin: {
|
||||||
},
|
right: 4,
|
||||||
optionButtonGroup: {
|
},
|
||||||
padding: {
|
padding: {
|
||||||
left: 12,
|
bottom: 2,
|
||||||
right: 12,
|
left: 10,
|
||||||
},
|
right: 10,
|
||||||
},
|
top: 2,
|
||||||
includeExcludeInputs: {
|
},
|
||||||
...text(layer, "mono", "variant"),
|
}, state: {
|
||||||
padding: {
|
clicked: {
|
||||||
right: 6,
|
...text(layer, "mono", "on", "pressed"),
|
||||||
},
|
background: background(layer, "on", "pressed"),
|
||||||
},
|
border: border(layer, "on", "pressed"),
|
||||||
resultsStatus: {
|
},
|
||||||
...text(layer, "mono", "on"),
|
hovered: {
|
||||||
size: 18,
|
...text(layer, "mono", "on", "hovered"),
|
||||||
},
|
background: background(layer, "on", "hovered"),
|
||||||
dismissButton: interactive({
|
border: border(layer, "on", "hovered"),
|
||||||
base: {
|
},
|
||||||
color: foreground(layer, "variant"),
|
}
|
||||||
iconWidth: 12,
|
}), {
|
||||||
buttonWidth: 14,
|
default: {
|
||||||
padding: {
|
...text(layer, "mono", "on", "inverted"),
|
||||||
left: 10,
|
background: background(layer, "on", "inverted"),
|
||||||
right: 10,
|
border: border(layer, "on", "inverted"),
|
||||||
|
},
|
||||||
|
|
||||||
|
}),
|
||||||
|
editor,
|
||||||
|
invalidEditor: {
|
||||||
|
...editor,
|
||||||
|
border: border(layer, "negative"),
|
||||||
},
|
},
|
||||||
}, state: {
|
includeExcludeEditor,
|
||||||
hovered: {
|
invalidIncludeExcludeEditor: {
|
||||||
color: foreground(layer, "hovered"),
|
...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"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,51 +1,51 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { background, border, foreground, text } from "./components"
|
import { background, border, foreground, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
|
|
||||||
const headerPadding = 8
|
const headerPadding = 8
|
||||||
|
|
||||||
export default function simpleMessageNotification(
|
export default function simpleMessageNotification(
|
||||||
colorScheme: ColorScheme
|
colorScheme: ColorScheme
|
||||||
): Object {
|
): Object {
|
||||||
let layer = colorScheme.middle
|
let layer = colorScheme.middle
|
||||||
return {
|
return {
|
||||||
message: {
|
message: {
|
||||||
...text(layer, "sans", { size: "xs" }),
|
...text(layer, "sans", { size: "xs" }),
|
||||||
margin: { left: headerPadding, right: headerPadding },
|
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,
|
|
||||||
},
|
},
|
||||||
|
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 },
|
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||||
}, state: {
|
}, state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
...text(layer, "sans", "default", { size: "xs" }),
|
...text(layer, "sans", "default", { size: "xs" }),
|
||||||
background: background(layer, "hovered"),
|
background: background(layer, "hovered"),
|
||||||
border: border(layer, "active"),
|
border: border(layer, "active"),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
dismissButton: interactive({
|
dismissButton: interactive({
|
||||||
base: {
|
base: {
|
||||||
color: foreground(layer),
|
color: foreground(layer),
|
||||||
iconWidth: 8,
|
iconWidth: 8,
|
||||||
iconHeight: 8,
|
iconHeight: 8,
|
||||||
buttonWidth: 8,
|
buttonWidth: 8,
|
||||||
buttonHeight: 8,
|
buttonHeight: 8,
|
||||||
}, state: {
|
}, state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
color: foreground(layer, "hovered"),
|
color: foreground(layer, "hovered"),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,145 +1,145 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { background, border, foreground, text } from "./components"
|
import { background, border, foreground, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
export default function statusBar(colorScheme: ColorScheme) {
|
export default function statusBar(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.lowest
|
let layer = colorScheme.lowest
|
||||||
|
|
||||||
const statusContainer = {
|
const statusContainer = {
|
||||||
cornerRadius: 6,
|
cornerRadius: 6,
|
||||||
padding: { top: 3, bottom: 3, left: 6, right: 6 },
|
padding: { top: 3, bottom: 3, left: 6, right: 6 },
|
||||||
}
|
}
|
||||||
|
|
||||||
const diagnosticStatusContainer = {
|
const diagnosticStatusContainer = {
|
||||||
cornerRadius: 6,
|
cornerRadius: 6,
|
||||||
padding: { top: 1, bottom: 1, left: 6, right: 6 },
|
padding: { top: 1, bottom: 1, left: 6, right: 6 },
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
height: 30,
|
height: 30,
|
||||||
itemSpacing: 8,
|
itemSpacing: 8,
|
||||||
padding: {
|
padding: {
|
||||||
top: 1,
|
top: 1,
|
||||||
bottom: 1,
|
bottom: 1,
|
||||||
left: 6,
|
left: 6,
|
||||||
right: 6,
|
right: 6,
|
||||||
},
|
},
|
||||||
border: border(layer, { top: true, overlay: true }),
|
border: border(layer, { top: true, overlay: true }),
|
||||||
cursorPosition: text(layer, "sans", "variant"),
|
cursorPosition: text(layer, "sans", "variant"),
|
||||||
activeLanguage: interactive({
|
activeLanguage: interactive({
|
||||||
base: {
|
base: {
|
||||||
padding: { left: 6, right: 6 },
|
padding: { left: 6, right: 6 },
|
||||||
...text(layer, "sans", "variant")
|
...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: {
|
state: {
|
||||||
background: background(layer, "warning", "hovered"),
|
hovered: {
|
||||||
border: border(layer, "warning", "hovered"),
|
...text(layer, "sans", "on"),
|
||||||
},
|
}
|
||||||
containerError: {
|
}
|
||||||
background: background(layer, "negative", "hovered"),
|
},
|
||||||
border: border(layer, "negative", "hovered"),
|
),
|
||||||
|
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"),
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
),
|
|
||||||
panelButtons: {
|
|
||||||
groupLeft: {},
|
|
||||||
groupBottom: {},
|
|
||||||
groupRight: {},
|
|
||||||
button: toggleable(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"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
default: {
|
|
||||||
iconColor: foreground(layer, "active"),
|
|
||||||
background: background(layer, "active"),
|
|
||||||
}
|
|
||||||
}),
|
}),
|
||||||
badge: {
|
diagnosticMessage: interactive({
|
||||||
cornerRadius: 3,
|
base: {
|
||||||
padding: 2,
|
...text(layer, "sans")
|
||||||
margin: { bottom: -1, right: -1 },
|
},
|
||||||
border: border(layer),
|
state: { hovered: text(layer, "sans", "hovered") }
|
||||||
background: background(layer, "accent"),
|
},
|
||||||
},
|
),
|
||||||
},
|
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(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"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
iconColor: foreground(layer, "active"),
|
||||||
|
background: background(layer, "active"),
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
badge: {
|
||||||
|
cornerRadius: 3,
|
||||||
|
padding: 2,
|
||||||
|
margin: { bottom: -1, right: -1 },
|
||||||
|
border: border(layer),
|
||||||
|
background: background(layer, "accent"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,117 +2,117 @@ import { ColorScheme } from "../theme/colorScheme"
|
|||||||
import { withOpacity } from "../theme/color"
|
import { withOpacity } from "../theme/color"
|
||||||
import { text, border, background, foreground } from "./components"
|
import { text, border, background, foreground } from "./components"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
|
|
||||||
export default function tabBar(colorScheme: ColorScheme) {
|
export default function tabBar(colorScheme: ColorScheme) {
|
||||||
const height = 32
|
const height = 32
|
||||||
|
|
||||||
let activeLayer = colorScheme.highest
|
let activeLayer = colorScheme.highest
|
||||||
let layer = colorScheme.middle
|
let layer = colorScheme.middle
|
||||||
|
|
||||||
const tab = {
|
const tab = {
|
||||||
height,
|
height,
|
||||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||||
background: background(layer),
|
background: background(layer),
|
||||||
border: border(layer, {
|
border: border(layer, {
|
||||||
right: true,
|
right: true,
|
||||||
bottom: true,
|
bottom: true,
|
||||||
overlay: true,
|
overlay: true,
|
||||||
}),
|
}),
|
||||||
padding: {
|
padding: {
|
||||||
left: 8,
|
left: 8,
|
||||||
right: 12,
|
right: 12,
|
||||||
},
|
},
|
||||||
spacing: 8,
|
spacing: 8,
|
||||||
|
|
||||||
// Tab type icons (e.g. Project Search)
|
// Tab type icons (e.g. Project Search)
|
||||||
typeIconWidth: 14,
|
typeIconWidth: 14,
|
||||||
|
|
||||||
// Close icons
|
// Close icons
|
||||||
closeIconWidth: 8,
|
closeIconWidth: 8,
|
||||||
iconClose: foreground(layer, "variant"),
|
iconClose: foreground(layer, "variant"),
|
||||||
iconCloseActive: foreground(layer, "hovered"),
|
iconCloseActive: foreground(layer, "hovered"),
|
||||||
|
|
||||||
// Indicators
|
// Indicators
|
||||||
iconConflict: foreground(layer, "warning"),
|
iconConflict: foreground(layer, "warning"),
|
||||||
iconDirty: foreground(layer, "accent"),
|
iconDirty: foreground(layer, "accent"),
|
||||||
|
|
||||||
// When two tabs of the same name are open, a label appears next to them
|
// When two tabs of the same name are open, a label appears next to them
|
||||||
description: {
|
description: {
|
||||||
margin: { left: 8 },
|
margin: { left: 8 },
|
||||||
...text(layer, "sans", "disabled", { size: "2xs" }),
|
...text(layer, "sans", "disabled", { size: "2xs" }),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const activePaneActiveTab = {
|
const activePaneActiveTab = {
|
||||||
...tab,
|
...tab,
|
||||||
background: background(activeLayer),
|
background: background(activeLayer),
|
||||||
text: text(activeLayer, "sans", "active", { size: "sm" }),
|
text: text(activeLayer, "sans", "active", { size: "sm" }),
|
||||||
border: {
|
border: {
|
||||||
...tab.border,
|
...tab.border,
|
||||||
bottom: false,
|
bottom: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const inactivePaneInactiveTab = {
|
const inactivePaneInactiveTab = {
|
||||||
...tab,
|
...tab,
|
||||||
background: background(layer),
|
background: background(layer),
|
||||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||||
}
|
}
|
||||||
|
|
||||||
const inactivePaneActiveTab = {
|
const inactivePaneActiveTab = {
|
||||||
...tab,
|
...tab,
|
||||||
background: background(activeLayer),
|
background: background(activeLayer),
|
||||||
text: text(layer, "sans", "variant", { size: "sm" }),
|
text: text(layer, "sans", "variant", { size: "sm" }),
|
||||||
border: {
|
border: {
|
||||||
...tab.border,
|
...tab.border,
|
||||||
bottom: false,
|
bottom: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const draggedTab = {
|
const draggedTab = {
|
||||||
...activePaneActiveTab,
|
...activePaneActiveTab,
|
||||||
background: withOpacity(tab.background, 0.9),
|
background: withOpacity(tab.background, 0.9),
|
||||||
border: undefined as any,
|
border: undefined as any,
|
||||||
shadow: colorScheme.popoverShadow,
|
shadow: colorScheme.popoverShadow,
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
height,
|
height,
|
||||||
background: background(layer),
|
background: background(layer),
|
||||||
activePane: {
|
activePane: {
|
||||||
activeTab: activePaneActiveTab,
|
activeTab: activePaneActiveTab,
|
||||||
inactiveTab: tab,
|
inactiveTab: tab,
|
||||||
},
|
},
|
||||||
inactivePane: {
|
inactivePane: {
|
||||||
activeTab: inactivePaneActiveTab,
|
activeTab: inactivePaneActiveTab,
|
||||||
inactiveTab: inactivePaneInactiveTab,
|
inactiveTab: inactivePaneInactiveTab,
|
||||||
},
|
},
|
||||||
draggedTab,
|
draggedTab,
|
||||||
paneButton: toggleable(interactive({
|
paneButton: toggleable(interactive({
|
||||||
base: {
|
base: {
|
||||||
color: foreground(layer, "variant"),
|
color: foreground(layer, "variant"),
|
||||||
iconWidth: 12,
|
iconWidth: 12,
|
||||||
buttonWidth: activePaneActiveTab.height,
|
buttonWidth: activePaneActiveTab.height,
|
||||||
},
|
},
|
||||||
state: {
|
state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
color: foreground(layer, "hovered"),
|
color: foreground(layer, "hovered"),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
default: {
|
default: {
|
||||||
color: foreground(layer, "accent"),
|
color: foreground(layer, "accent"),
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
paneButtonContainer: {
|
paneButtonContainer: {
|
||||||
background: tab.background,
|
background: tab.background,
|
||||||
border: {
|
border: {
|
||||||
...tab.border,
|
...tab.border,
|
||||||
right: false,
|
right: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,56 +1,56 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { background, border, text } from "./components"
|
import { background, border, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
export default function dropdownMenu(colorScheme: ColorScheme) {
|
export default function dropdownMenu(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.middle
|
let layer = colorScheme.middle
|
||||||
|
|
||||||
return {
|
return {
|
||||||
rowHeight: 30,
|
rowHeight: 30,
|
||||||
background: background(layer),
|
background: background(layer),
|
||||||
border: border(layer),
|
border: border(layer),
|
||||||
shadow: colorScheme.popoverShadow,
|
shadow: colorScheme.popoverShadow,
|
||||||
header: interactive({
|
header: interactive({
|
||||||
base: {
|
base: {
|
||||||
...text(layer, "sans", { size: "sm" }),
|
...text(layer, "sans", { size: "sm" }),
|
||||||
secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
|
secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
|
||||||
secondaryTextSpacing: 10,
|
secondaryTextSpacing: 10,
|
||||||
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
||||||
cornerRadius: 6,
|
cornerRadius: 6,
|
||||||
background: background(layer, "on"),
|
background: background(layer, "on"),
|
||||||
border: border(layer, "on", { overlay: true })
|
border: border(layer, "on", { overlay: true })
|
||||||
},
|
},
|
||||||
state: {
|
state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
background: background(layer, "hovered"),
|
background: background(layer, "hovered"),
|
||||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
,
|
,
|
||||||
sectionHeader: {
|
sectionHeader: {
|
||||||
...text(layer, "sans", { size: "sm" }),
|
...text(layer, "sans", { size: "sm" }),
|
||||||
padding: { left: 8, right: 8, top: 8, bottom: 8 },
|
padding: { left: 8, right: 8, top: 8, bottom: 8 },
|
||||||
},
|
},
|
||||||
item: toggleable(interactive({
|
item: toggleable(interactive({
|
||||||
base: {
|
base: {
|
||||||
...text(layer, "sans", { size: "sm" }),
|
...text(layer, "sans", { size: "sm" }),
|
||||||
secondaryTextSpacing: 10,
|
secondaryTextSpacing: 10,
|
||||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||||
padding: { left: 18, right: 18, top: 2, bottom: 2 }
|
padding: { left: 18, right: 18, top: 2, bottom: 2 }
|
||||||
}, state: {
|
}, state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
background: background(layer, "hovered"),
|
background: background(layer, "hovered"),
|
||||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}), {
|
}), {
|
||||||
default: {
|
default: {
|
||||||
background: background(layer, "active"),
|
background: background(layer, "active"),
|
||||||
},
|
},
|
||||||
hovered: {
|
hovered: {
|
||||||
background: background(layer, "active"),
|
background: background(layer, "active"),
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,39 +1,39 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { foreground, text } from "./components"
|
import { foreground, text } from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
|
|
||||||
const headerPadding = 8
|
const headerPadding = 8
|
||||||
|
|
||||||
export default function updateNotification(colorScheme: ColorScheme): Object {
|
export default function updateNotification(colorScheme: ColorScheme): Object {
|
||||||
let layer = colorScheme.middle
|
let layer = colorScheme.middle
|
||||||
return {
|
return {
|
||||||
message: {
|
message: {
|
||||||
...text(layer, "sans", { size: "xs" }),
|
...text(layer, "sans", { size: "xs" }),
|
||||||
margin: { left: headerPadding, right: headerPadding },
|
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"),
|
|
||||||
},
|
},
|
||||||
},
|
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,133 +1,133 @@
|
|||||||
import { ColorScheme } from "../theme/colorScheme"
|
import { ColorScheme } from "../theme/colorScheme"
|
||||||
import { withOpacity } from "../theme/color"
|
import { withOpacity } from "../theme/color"
|
||||||
import {
|
import {
|
||||||
border,
|
border,
|
||||||
background,
|
background,
|
||||||
foreground,
|
foreground,
|
||||||
text,
|
text,
|
||||||
TextProperties,
|
TextProperties,
|
||||||
svg,
|
svg,
|
||||||
} from "./components"
|
} from "./components"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
|
|
||||||
export default function welcome(colorScheme: ColorScheme) {
|
export default function welcome(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.highest
|
let layer = colorScheme.highest
|
||||||
|
|
||||||
let checkboxBase = {
|
let 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,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
let 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,
|
cornerRadius: 4,
|
||||||
margin: {
|
|
||||||
top: 4,
|
|
||||||
bottom: 4,
|
|
||||||
},
|
|
||||||
padding: {
|
padding: {
|
||||||
top: 3,
|
left: 3,
|
||||||
bottom: 3,
|
right: 3,
|
||||||
left: 7,
|
top: 3,
|
||||||
right: 7,
|
bottom: 3,
|
||||||
},
|
},
|
||||||
...text(layer, "sans", "default", interactive_text_size)
|
// shadow: colorScheme.popoverShadow,
|
||||||
}, state: {
|
border: border(layer),
|
||||||
hovered: {
|
margin: {
|
||||||
...text(layer, "sans", "default", interactive_text_size),
|
right: 8,
|
||||||
background: background(layer, "hovered"),
|
top: 5,
|
||||||
}
|
bottom: 5,
|
||||||
}
|
},
|
||||||
}),
|
}
|
||||||
|
|
||||||
usageNote: {
|
let interactive_text_size: TextProperties = { size: "sm" }
|
||||||
...text(layer, "sans", "variant", { size: "2xs" }),
|
|
||||||
padding: {
|
return {
|
||||||
top: -4,
|
pageWidth: 320,
|
||||||
},
|
logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64),
|
||||||
},
|
logoSubheading: {
|
||||||
checkboxContainer: {
|
...text(layer, "sans", "variant", { size: "md" }),
|
||||||
margin: {
|
margin: {
|
||||||
top: 4,
|
top: 10,
|
||||||
},
|
bottom: 7,
|
||||||
padding: {
|
},
|
||||||
bottom: 8,
|
},
|
||||||
},
|
buttonGroup: {
|
||||||
},
|
margin: {
|
||||||
checkbox: {
|
top: 8,
|
||||||
label: {
|
bottom: 16,
|
||||||
...text(layer, "sans", interactive_text_size),
|
},
|
||||||
// Also supports margin, container, border, etc.
|
},
|
||||||
},
|
headingGroup: {
|
||||||
icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
|
margin: {
|
||||||
default: {
|
top: 8,
|
||||||
...checkboxBase,
|
bottom: 12,
|
||||||
background: background(layer, "default"),
|
},
|
||||||
border: border(layer, "active"),
|
},
|
||||||
},
|
checkboxGroup: {
|
||||||
checked: {
|
border: border(layer, "variant"),
|
||||||
...checkboxBase,
|
background: withOpacity(background(layer, "hovered"), 0.25),
|
||||||
background: background(layer, "hovered"),
|
cornerRadius: 4,
|
||||||
border: border(layer, "active"),
|
padding: {
|
||||||
},
|
left: 12,
|
||||||
hovered: {
|
top: 2,
|
||||||
...checkboxBase,
|
bottom: 2,
|
||||||
background: background(layer, "hovered"),
|
},
|
||||||
border: border(layer, "active"),
|
},
|
||||||
},
|
button: interactive({
|
||||||
hoveredAndChecked: {
|
base: {
|
||||||
...checkboxBase,
|
background: background(layer),
|
||||||
background: background(layer, "hovered"),
|
border: border(layer, "active"),
|
||||||
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"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,383 +2,383 @@ import { ColorScheme } from "../theme/colorScheme"
|
|||||||
import { withOpacity } from "../theme/color"
|
import { withOpacity } from "../theme/color"
|
||||||
import { toggleable } from "./toggle"
|
import { toggleable } from "./toggle"
|
||||||
import {
|
import {
|
||||||
background,
|
background,
|
||||||
border,
|
border,
|
||||||
borderColor,
|
borderColor,
|
||||||
foreground,
|
foreground,
|
||||||
svg,
|
svg,
|
||||||
text,
|
text,
|
||||||
} from "./components"
|
} from "./components"
|
||||||
import statusBar from "./statusBar"
|
import statusBar from "./statusBar"
|
||||||
import tabBar from "./tabBar"
|
import tabBar from "./tabBar"
|
||||||
import { interactive } from "./interactive"
|
import { interactive } from "../element/interactive"
|
||||||
import merge from 'ts-deepmerge';
|
import merge from 'ts-deepmerge';
|
||||||
export default function workspace(colorScheme: ColorScheme) {
|
export default function workspace(colorScheme: ColorScheme) {
|
||||||
const layer = colorScheme.lowest
|
const layer = colorScheme.lowest
|
||||||
const isLight = colorScheme.isLight
|
const isLight = colorScheme.isLight
|
||||||
const itemSpacing = 8
|
const itemSpacing = 8
|
||||||
const titlebarButton = toggleable(interactive({
|
const titlebarButton = toggleable(interactive({
|
||||||
base: {
|
|
||||||
cornerRadius: 6,
|
|
||||||
padding: {
|
|
||||||
top: 1,
|
|
||||||
bottom: 1,
|
|
||||||
left: 8,
|
|
||||||
right: 8,
|
|
||||||
},
|
|
||||||
...text(layer, "sans", "variant", { size: "xs" }),
|
|
||||||
background: background(layer, "variant"),
|
|
||||||
border: border(layer),
|
|
||||||
}, state: {
|
|
||||||
hovered: {
|
|
||||||
...text(layer, "sans", "variant", "hovered", { size: "xs" }),
|
|
||||||
background: background(layer, "variant", "hovered"),
|
|
||||||
border: border(layer, "variant", "hovered"),
|
|
||||||
},
|
|
||||||
clicked: {
|
|
||||||
...text(layer, "sans", "variant", "pressed", { size: "xs" }),
|
|
||||||
background: background(layer, "variant", "pressed"),
|
|
||||||
border: border(layer, "variant", "pressed"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
default: {
|
|
||||||
...text(layer, "sans", "variant", "active", { size: "xs" }),
|
|
||||||
background: background(layer, "variant", "active"),
|
|
||||||
border: border(layer, "variant", "active"),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const avatarWidth = 18
|
|
||||||
const avatarOuterWidth = avatarWidth + 4
|
|
||||||
const followerAvatarWidth = 14
|
|
||||||
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
|
||||||
|
|
||||||
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: {
|
|
||||||
itemSpacing,
|
|
||||||
facePileSpacing: 2,
|
|
||||||
height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images.
|
|
||||||
background: background(layer),
|
|
||||||
border: border(layer, { bottom: true }),
|
|
||||||
padding: {
|
|
||||||
left: 80,
|
|
||||||
right: itemSpacing,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Project
|
|
||||||
title: text(layer, "sans", "variant"),
|
|
||||||
highlight_color: text(layer, "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: 12,
|
|
||||||
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
|
|
||||||
},
|
|
||||||
|
|
||||||
// Sign in buttom
|
|
||||||
// FlatButton, Variant
|
|
||||||
signInPrompt:
|
|
||||||
merge(titlebarButton,
|
|
||||||
{
|
|
||||||
inactive: {
|
|
||||||
default: {
|
|
||||||
margin: {
|
|
||||||
left: itemSpacing,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
|
|
||||||
|
|
||||||
// Offline Indicator
|
|
||||||
offlineIcon: {
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
width: 16,
|
|
||||||
margin: {
|
|
||||||
left: itemSpacing,
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
right: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
// Notice that the collaboration server is out of date
|
|
||||||
outdatedWarning: {
|
|
||||||
...text(layer, "sans", "warning", { size: "xs" }),
|
|
||||||
background: withOpacity(background(layer, "warning"), 0.3),
|
|
||||||
border: border(layer, "warning"),
|
|
||||||
margin: {
|
|
||||||
left: itemSpacing,
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
left: 8,
|
|
||||||
right: 8,
|
|
||||||
},
|
|
||||||
cornerRadius: 6,
|
|
||||||
},
|
|
||||||
callControl: interactive({
|
|
||||||
base: {
|
base: {
|
||||||
cornerRadius: 6,
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
iconWidth: 12,
|
|
||||||
buttonWidth: 20,
|
|
||||||
}, state: {
|
|
||||||
hovered: {
|
|
||||||
background: background(layer, "variant", "hovered"),
|
|
||||||
color: foreground(layer, "variant", "hovered"),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
toggleContactsButton: toggleable(interactive({
|
|
||||||
base: {
|
|
||||||
margin: { left: itemSpacing },
|
|
||||||
cornerRadius: 6,
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
iconWidth: 14,
|
|
||||||
buttonWidth: 20,
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
clicked: {
|
|
||||||
background: background(layer, "variant", "pressed"),
|
|
||||||
color: foreground(layer, "variant", "pressed"),
|
|
||||||
},
|
|
||||||
hovered: {
|
|
||||||
background: background(layer, "variant", "hovered"),
|
|
||||||
color: foreground(layer, "variant", "hovered"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
default: {
|
|
||||||
background: background(layer, "variant", "active"),
|
|
||||||
color: foreground(layer, "variant", "active")
|
|
||||||
}
|
|
||||||
},
|
|
||||||
),
|
|
||||||
userMenuButton: merge(titlebarButton, {
|
|
||||||
inactive: {
|
|
||||||
default: {
|
|
||||||
buttonWidth: 20,
|
|
||||||
iconWidth: 12
|
|
||||||
}
|
|
||||||
}, active: { // posiewic: these properties are not currently set on main
|
|
||||||
default: {
|
|
||||||
iconWidth: 12,
|
|
||||||
button_width: 20,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
|
|
||||||
|
|
||||||
toggleContactsBadge: {
|
|
||||||
cornerRadius: 3,
|
|
||||||
padding: 2,
|
|
||||||
margin: { top: 3, left: 3 },
|
|
||||||
border: border(layer),
|
|
||||||
background: foreground(layer, "accent"),
|
|
||||||
},
|
|
||||||
shareButton: {
|
|
||||||
...titlebarButton,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
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,
|
cornerRadius: 6,
|
||||||
}, state: {
|
padding: {
|
||||||
|
top: 1,
|
||||||
|
bottom: 1,
|
||||||
|
left: 8,
|
||||||
|
right: 8,
|
||||||
|
},
|
||||||
|
...text(layer, "sans", "variant", { size: "xs" }),
|
||||||
|
background: background(layer, "variant"),
|
||||||
|
border: border(layer),
|
||||||
|
}, state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
...text(layer, "sans", "variant", "hovered", { size: "xs" }),
|
||||||
background: background(
|
background: background(layer, "variant", "hovered"),
|
||||||
colorScheme.highest,
|
border: border(layer, "variant", "hovered"),
|
||||||
"on",
|
|
||||||
"hovered"
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
disabled: {
|
clicked: {
|
||||||
color: foreground(colorScheme.highest, "on", "disabled"),
|
...text(layer, "sans", "variant", "pressed", { size: "xs" }),
|
||||||
},
|
background: background(layer, "variant", "pressed"),
|
||||||
}
|
border: border(layer, "variant", "pressed"),
|
||||||
}),
|
}
|
||||||
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"),
|
default: {
|
||||||
background: withOpacity(background(layer), 0.8),
|
...text(layer, "sans", "variant", "active", { size: "xs" }),
|
||||||
},
|
background: background(layer, "variant", "active"),
|
||||||
notification: {
|
border: border(layer, "variant", "active"),
|
||||||
margin: { top: 10 },
|
}
|
||||||
background: background(colorScheme.middle),
|
},
|
||||||
cornerRadius: 6,
|
);
|
||||||
padding: 12,
|
const avatarWidth = 18
|
||||||
border: border(colorScheme.middle),
|
const avatarOuterWidth = avatarWidth + 4
|
||||||
shadow: colorScheme.popoverShadow,
|
const followerAvatarWidth = 14
|
||||||
},
|
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
||||||
notifications: {
|
|
||||||
width: 400,
|
return {
|
||||||
margin: { right: 10, bottom: 10 },
|
background: background(colorScheme.lowest),
|
||||||
},
|
blankPane: {
|
||||||
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
|
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: {
|
||||||
|
itemSpacing,
|
||||||
|
facePileSpacing: 2,
|
||||||
|
height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images.
|
||||||
|
background: background(layer),
|
||||||
|
border: border(layer, { bottom: true }),
|
||||||
|
padding: {
|
||||||
|
left: 80,
|
||||||
|
right: itemSpacing,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Project
|
||||||
|
title: text(layer, "sans", "variant"),
|
||||||
|
highlight_color: text(layer, "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: 12,
|
||||||
|
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
|
||||||
|
},
|
||||||
|
|
||||||
|
// Sign in buttom
|
||||||
|
// FlatButton, Variant
|
||||||
|
signInPrompt:
|
||||||
|
merge(titlebarButton,
|
||||||
|
{
|
||||||
|
inactive: {
|
||||||
|
default: {
|
||||||
|
margin: {
|
||||||
|
left: itemSpacing,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
|
||||||
|
// Offline Indicator
|
||||||
|
offlineIcon: {
|
||||||
|
color: foreground(layer, "variant"),
|
||||||
|
width: 16,
|
||||||
|
margin: {
|
||||||
|
left: itemSpacing,
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
right: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Notice that the collaboration server is out of date
|
||||||
|
outdatedWarning: {
|
||||||
|
...text(layer, "sans", "warning", { size: "xs" }),
|
||||||
|
background: withOpacity(background(layer, "warning"), 0.3),
|
||||||
|
border: border(layer, "warning"),
|
||||||
|
margin: {
|
||||||
|
left: itemSpacing,
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
left: 8,
|
||||||
|
right: 8,
|
||||||
|
},
|
||||||
|
cornerRadius: 6,
|
||||||
|
},
|
||||||
|
callControl: interactive({
|
||||||
|
base: {
|
||||||
|
cornerRadius: 6,
|
||||||
|
color: foreground(layer, "variant"),
|
||||||
|
iconWidth: 12,
|
||||||
|
buttonWidth: 20,
|
||||||
|
}, state: {
|
||||||
|
hovered: {
|
||||||
|
background: background(layer, "variant", "hovered"),
|
||||||
|
color: foreground(layer, "variant", "hovered"),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
toggleContactsButton: toggleable(interactive({
|
||||||
|
base: {
|
||||||
|
margin: { left: itemSpacing },
|
||||||
|
cornerRadius: 6,
|
||||||
|
color: foreground(layer, "variant"),
|
||||||
|
iconWidth: 14,
|
||||||
|
buttonWidth: 20,
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
clicked: {
|
||||||
|
background: background(layer, "variant", "pressed"),
|
||||||
|
color: foreground(layer, "variant", "pressed"),
|
||||||
|
},
|
||||||
|
hovered: {
|
||||||
|
background: background(layer, "variant", "hovered"),
|
||||||
|
color: foreground(layer, "variant", "hovered"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
background: background(layer, "variant", "active"),
|
||||||
|
color: foreground(layer, "variant", "active")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
userMenuButton: merge(titlebarButton, {
|
||||||
|
inactive: {
|
||||||
|
default: {
|
||||||
|
buttonWidth: 20,
|
||||||
|
iconWidth: 12
|
||||||
|
}
|
||||||
|
}, active: { // posiewic: these properties are not currently set on main
|
||||||
|
default: {
|
||||||
|
iconWidth: 12,
|
||||||
|
button_width: 20,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
|
||||||
|
toggleContactsBadge: {
|
||||||
|
cornerRadius: 3,
|
||||||
|
padding: 2,
|
||||||
|
margin: { top: 3, left: 3 },
|
||||||
|
border: border(layer),
|
||||||
|
background: foreground(layer, "accent"),
|
||||||
|
},
|
||||||
|
shareButton: {
|
||||||
|
...titlebarButton,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
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),
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
8
styles/vitest.config.ts
Normal file
8
styles/vitest.config.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { configDefaults, defineConfig } from 'vitest/config'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
test: {
|
||||||
|
exclude: [...configDefaults.exclude, 'target/*'],
|
||||||
|
include: ['src/**/*.{spec,test}.ts'],
|
||||||
|
},
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user