mirror of
https://github.com/zed-industries/zed.git
synced 2024-09-16 00:47:39 +03:00
Format
This commit is contained in:
Nate Butler
Mikayla Maki
parent
1f3feacb21
commit
5c034ab63c
@ -1,3 +1,3 @@
|
||||
import { interactive } from "./interactive";
|
||||
import { interactive } from "./interactive"
|
||||
|
||||
export { interactive }
|
||||
|
||||
@ -1,59 +1,56 @@
|
||||
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', () => {
|
||||
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' },
|
||||
base: { fontSize: 10, color: "#FFFFFF" },
|
||||
state: {
|
||||
hovered: { color: '#EEEEEE' },
|
||||
clicked: { color: '#CCCCCC' },
|
||||
}
|
||||
hovered: { color: "#EEEEEE" },
|
||||
clicked: { color: "#CCCCCC" },
|
||||
},
|
||||
})
|
||||
|
||||
expect(result).toEqual({
|
||||
default: { color: '#FFFFFF', fontSize: 10 },
|
||||
hovered: { color: '#EEEEEE', fontSize: 10 },
|
||||
clicked: { color: '#CCCCCC', fontSize: 10 },
|
||||
default: { color: "#FFFFFF", fontSize: 10 },
|
||||
hovered: { color: "#EEEEEE", fontSize: 10 },
|
||||
clicked: { color: "#CCCCCC", fontSize: 10 },
|
||||
})
|
||||
})
|
||||
|
||||
it('creates an Interactive<Element> with no base properties', () => {
|
||||
|
||||
it("creates an Interactive<Element> with no base properties", () => {
|
||||
const result = interactive({
|
||||
state: {
|
||||
default: { color: '#FFFFFF', fontSize: 10 },
|
||||
hovered: { color: '#EEEEEE' },
|
||||
clicked: { color: '#CCCCCC' },
|
||||
}
|
||||
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 },
|
||||
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', () => {
|
||||
it("throws error when both default and base are missing", () => {
|
||||
const state = {
|
||||
hovered: { color: 'blue' },
|
||||
hovered: { color: "blue" },
|
||||
}
|
||||
|
||||
expect(() => interactive({ state })).toThrow(
|
||||
NO_DEFAULT_OR_BASE_ERROR
|
||||
)
|
||||
expect(() => interactive({ state })).toThrow(NO_DEFAULT_OR_BASE_ERROR)
|
||||
})
|
||||
|
||||
it('throws error when no other state besides default is present', () => {
|
||||
it("throws error when no other state besides default is present", () => {
|
||||
const state = {
|
||||
default: { fontSize: 10 },
|
||||
}
|
||||
|
||||
expect(() => interactive({ state })).toThrow(
|
||||
NOT_ENOUGH_STATES_ERROR
|
||||
)
|
||||
expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR)
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,20 +1,27 @@
|
||||
import merge from "ts-deepmerge"
|
||||
|
||||
type InteractiveState = "default" | "hovered" | "clicked" | "selected" | "disabled";
|
||||
type InteractiveState =
|
||||
| "default"
|
||||
| "hovered"
|
||||
| "clicked"
|
||||
| "selected"
|
||||
| "disabled"
|
||||
|
||||
type Interactive<T> = {
|
||||
default: T,
|
||||
hovered?: T,
|
||||
clicked?: T,
|
||||
selected?: T,
|
||||
disabled?: T,
|
||||
};
|
||||
default: T
|
||||
hovered?: T
|
||||
clicked?: T
|
||||
selected?: 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."
|
||||
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> {
|
||||
base?: T,
|
||||
base?: T
|
||||
state: Partial<Record<InteractiveState, T>>
|
||||
}
|
||||
|
||||
@ -29,46 +36,61 @@ interface InteractiveProps<T> {
|
||||
* @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 `state`.
|
||||
*/
|
||||
export function interactive<T extends Object>({ base, state }: InteractiveProps<T>): Interactive<T> {
|
||||
if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR);
|
||||
export function interactive<T extends Object>({
|
||||
base,
|
||||
state,
|
||||
}: InteractiveProps<T>): Interactive<T> {
|
||||
if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR)
|
||||
|
||||
let defaultState: T;
|
||||
let defaultState: T
|
||||
|
||||
if (state.default && base) {
|
||||
defaultState = merge(base, state.default) as T;
|
||||
defaultState = merge(base, state.default) as T
|
||||
} else {
|
||||
defaultState = base ? base : state.default as T;
|
||||
defaultState = base ? base : (state.default as T)
|
||||
}
|
||||
|
||||
let interactiveObj: Interactive<T> = {
|
||||
default: defaultState,
|
||||
};
|
||||
}
|
||||
|
||||
let stateCount = 0;
|
||||
let stateCount = 0
|
||||
|
||||
if (state.hovered !== undefined) {
|
||||
interactiveObj.hovered = merge(interactiveObj.default, state.hovered) as T;
|
||||
stateCount++;
|
||||
interactiveObj.hovered = merge(
|
||||
interactiveObj.default,
|
||||
state.hovered
|
||||
) as T
|
||||
stateCount++
|
||||
}
|
||||
|
||||
if (state.clicked !== undefined) {
|
||||
interactiveObj.clicked = merge(interactiveObj.default, state.clicked) as T;
|
||||
stateCount++;
|
||||
interactiveObj.clicked = merge(
|
||||
interactiveObj.default,
|
||||
state.clicked
|
||||
) as T
|
||||
stateCount++
|
||||
}
|
||||
|
||||
if (state.selected !== undefined) {
|
||||
interactiveObj.selected = merge(interactiveObj.default, state.selected) as T;
|
||||
stateCount++;
|
||||
interactiveObj.selected = merge(
|
||||
interactiveObj.default,
|
||||
state.selected
|
||||
) as T
|
||||
stateCount++
|
||||
}
|
||||
|
||||
if (state.disabled !== undefined) {
|
||||
interactiveObj.disabled = merge(interactiveObj.default, state.disabled) as T;
|
||||
stateCount++;
|
||||
interactiveObj.disabled = merge(
|
||||
interactiveObj.default,
|
||||
state.disabled
|
||||
) as T
|
||||
stateCount++
|
||||
}
|
||||
|
||||
if (stateCount < 1) {
|
||||
throw new Error(NOT_ENOUGH_STATES_ERROR);
|
||||
throw new Error(NOT_ENOUGH_STATES_ERROR)
|
||||
}
|
||||
|
||||
return interactiveObj;
|
||||
return interactiveObj
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { text } from "./components"
|
||||
import contactFinder from "./contactFinder"
|
||||
import contactsPopover from "./contactsPopover"
|
||||
import commandPalette from "./commandPalette"
|
||||
|
||||
@ -16,17 +16,27 @@ export default function assistant(colorScheme: ColorScheme) {
|
||||
background: editor(colorScheme).background,
|
||||
},
|
||||
userSender: {
|
||||
default:
|
||||
{ ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) },
|
||||
default: {
|
||||
...text(layer, "sans", "default", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
assistantSender: {
|
||||
default: {
|
||||
...text(layer, "sans", "accent", { size: "sm", weight: "bold" })
|
||||
...text(layer, "sans", "accent", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
systemSender: {
|
||||
default: {
|
||||
...text(layer, "sans", "variant", { size: "sm", weight: "bold" })
|
||||
...text(layer, "sans", "variant", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
},
|
||||
sentAt: {
|
||||
@ -43,11 +53,12 @@ export default function assistant(colorScheme: ColorScheme) {
|
||||
padding: 4,
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
}, state: {
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
remainingTokens: {
|
||||
background: background(layer, "on"),
|
||||
|
||||
@ -8,10 +8,12 @@ export default function commandPalette(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest
|
||||
return {
|
||||
keystrokeSpacing: 8,
|
||||
key:
|
||||
toggleable(interactive({
|
||||
key: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
text: text(layer, "mono", "variant", "default", { size: "xs" }),
|
||||
text: text(layer, "mono", "variant", "default", {
|
||||
size: "xs",
|
||||
}),
|
||||
cornerRadius: 2,
|
||||
background: background(layer, "on"),
|
||||
padding: {
|
||||
@ -25,15 +27,15 @@ export default function commandPalette(colorScheme: ColorScheme) {
|
||||
bottom: 1,
|
||||
left: 2,
|
||||
},
|
||||
}, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }
|
||||
}), {
|
||||
},
|
||||
state: { hovered: { cornerRadius: 4, padding: { top: 17 } } },
|
||||
}),
|
||||
{
|
||||
default: {
|
||||
text: text(layer, "mono", "on", "default", { size: "xs" }),
|
||||
background: withOpacity(background(layer, "on"), 0.2),
|
||||
}
|
||||
|
||||
})
|
||||
,
|
||||
|
||||
},
|
||||
}
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,297 +2,297 @@ import { fontFamilies, fontSizes, FontWeight } from "../common"
|
||||
import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
|
||||
|
||||
function isStyleSet(key: any): key is StyleSets {
|
||||
return [
|
||||
"base",
|
||||
"variant",
|
||||
"on",
|
||||
"accent",
|
||||
"positive",
|
||||
"warning",
|
||||
"negative",
|
||||
].includes(key)
|
||||
return [
|
||||
"base",
|
||||
"variant",
|
||||
"on",
|
||||
"accent",
|
||||
"positive",
|
||||
"warning",
|
||||
"negative",
|
||||
].includes(key)
|
||||
}
|
||||
|
||||
function isStyle(key: any): key is Styles {
|
||||
return [
|
||||
"default",
|
||||
"active",
|
||||
"disabled",
|
||||
"hovered",
|
||||
"pressed",
|
||||
"inverted",
|
||||
].includes(key)
|
||||
return [
|
||||
"default",
|
||||
"active",
|
||||
"disabled",
|
||||
"hovered",
|
||||
"pressed",
|
||||
"inverted",
|
||||
].includes(key)
|
||||
}
|
||||
function getStyle(
|
||||
layer: Layer,
|
||||
possibleStyleSetOrStyle?: any,
|
||||
possibleStyle?: any
|
||||
layer: Layer,
|
||||
possibleStyleSetOrStyle?: any,
|
||||
possibleStyle?: any
|
||||
): Style {
|
||||
let styleSet: StyleSets = "base"
|
||||
let style: Styles = "default"
|
||||
if (isStyleSet(possibleStyleSetOrStyle)) {
|
||||
styleSet = possibleStyleSetOrStyle
|
||||
} else if (isStyle(possibleStyleSetOrStyle)) {
|
||||
style = possibleStyleSetOrStyle
|
||||
}
|
||||
let styleSet: StyleSets = "base"
|
||||
let style: Styles = "default"
|
||||
if (isStyleSet(possibleStyleSetOrStyle)) {
|
||||
styleSet = possibleStyleSetOrStyle
|
||||
} else if (isStyle(possibleStyleSetOrStyle)) {
|
||||
style = possibleStyleSetOrStyle
|
||||
}
|
||||
|
||||
if (isStyle(possibleStyle)) {
|
||||
style = possibleStyle
|
||||
}
|
||||
if (isStyle(possibleStyle)) {
|
||||
style = possibleStyle
|
||||
}
|
||||
|
||||
return layer[styleSet][style]
|
||||
return layer[styleSet][style]
|
||||
}
|
||||
|
||||
export function background(layer: Layer, style?: Styles): string
|
||||
export function background(
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function background(
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return getStyle(layer, styleSetOrStyles, style).background
|
||||
return getStyle(layer, styleSetOrStyles, style).background
|
||||
}
|
||||
|
||||
export function borderColor(layer: Layer, style?: Styles): string
|
||||
export function borderColor(
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function borderColor(
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return getStyle(layer, styleSetOrStyles, style).border
|
||||
return getStyle(layer, styleSetOrStyles, style).border
|
||||
}
|
||||
|
||||
export function foreground(layer: Layer, style?: Styles): string
|
||||
export function foreground(
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
layer: Layer,
|
||||
styleSet?: StyleSets,
|
||||
style?: Styles
|
||||
): string
|
||||
export function foreground(
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
layer: Layer,
|
||||
styleSetOrStyles?: StyleSets | Styles,
|
||||
style?: Styles
|
||||
): string {
|
||||
return getStyle(layer, styleSetOrStyles, style).foreground
|
||||
return getStyle(layer, styleSetOrStyles, style).foreground
|
||||
}
|
||||
|
||||
interface Text extends Object {
|
||||
family: keyof typeof fontFamilies
|
||||
color: string
|
||||
size: number
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
family: keyof typeof fontFamilies
|
||||
color: string
|
||||
size: number
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
}
|
||||
|
||||
export interface TextProperties {
|
||||
size?: keyof typeof fontSizes
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
color?: string
|
||||
features?: FontFeatures
|
||||
size?: keyof typeof fontSizes
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
color?: string
|
||||
features?: FontFeatures
|
||||
}
|
||||
|
||||
interface FontFeatures {
|
||||
/** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */
|
||||
calt?: boolean
|
||||
/** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */
|
||||
case?: boolean
|
||||
/** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */
|
||||
cpsp?: boolean
|
||||
/** Fractions: Replaces figures separated by a slash with diagonal fractions */
|
||||
frac?: boolean
|
||||
/** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */
|
||||
liga?: boolean
|
||||
/** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */
|
||||
onum?: boolean
|
||||
/** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */
|
||||
ordn?: boolean
|
||||
/** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */
|
||||
pnum?: boolean
|
||||
/** Stylistic set 01 */
|
||||
ss01?: boolean
|
||||
/** Stylistic set 02 */
|
||||
ss02?: boolean
|
||||
/** Stylistic set 03 */
|
||||
ss03?: boolean
|
||||
/** Stylistic set 04 */
|
||||
ss04?: boolean
|
||||
/** Stylistic set 05 */
|
||||
ss05?: boolean
|
||||
/** Stylistic set 06 */
|
||||
ss06?: boolean
|
||||
/** Stylistic set 07 */
|
||||
ss07?: boolean
|
||||
/** Stylistic set 08 */
|
||||
ss08?: boolean
|
||||
/** Stylistic set 09 */
|
||||
ss09?: boolean
|
||||
/** Stylistic set 10 */
|
||||
ss10?: boolean
|
||||
/** Stylistic set 11 */
|
||||
ss11?: boolean
|
||||
/** Stylistic set 12 */
|
||||
ss12?: boolean
|
||||
/** Stylistic set 13 */
|
||||
ss13?: boolean
|
||||
/** Stylistic set 14 */
|
||||
ss14?: boolean
|
||||
/** Stylistic set 15 */
|
||||
ss15?: boolean
|
||||
/** Stylistic set 16 */
|
||||
ss16?: boolean
|
||||
/** Stylistic set 17 */
|
||||
ss17?: boolean
|
||||
/** Stylistic set 18 */
|
||||
ss18?: boolean
|
||||
/** Stylistic set 19 */
|
||||
ss19?: boolean
|
||||
/** Stylistic set 20 */
|
||||
ss20?: boolean
|
||||
/** Subscript: Replaces default glyphs with subscript glyphs */
|
||||
subs?: boolean
|
||||
/** Superscript: Replaces default glyphs with superscript glyphs */
|
||||
sups?: boolean
|
||||
/** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */
|
||||
swsh?: boolean
|
||||
/** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */
|
||||
titl?: boolean
|
||||
/** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */
|
||||
tnum?: boolean
|
||||
/** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */
|
||||
zero?: boolean
|
||||
/** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */
|
||||
calt?: boolean
|
||||
/** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */
|
||||
case?: boolean
|
||||
/** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */
|
||||
cpsp?: boolean
|
||||
/** Fractions: Replaces figures separated by a slash with diagonal fractions */
|
||||
frac?: boolean
|
||||
/** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */
|
||||
liga?: boolean
|
||||
/** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */
|
||||
onum?: boolean
|
||||
/** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */
|
||||
ordn?: boolean
|
||||
/** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */
|
||||
pnum?: boolean
|
||||
/** Stylistic set 01 */
|
||||
ss01?: boolean
|
||||
/** Stylistic set 02 */
|
||||
ss02?: boolean
|
||||
/** Stylistic set 03 */
|
||||
ss03?: boolean
|
||||
/** Stylistic set 04 */
|
||||
ss04?: boolean
|
||||
/** Stylistic set 05 */
|
||||
ss05?: boolean
|
||||
/** Stylistic set 06 */
|
||||
ss06?: boolean
|
||||
/** Stylistic set 07 */
|
||||
ss07?: boolean
|
||||
/** Stylistic set 08 */
|
||||
ss08?: boolean
|
||||
/** Stylistic set 09 */
|
||||
ss09?: boolean
|
||||
/** Stylistic set 10 */
|
||||
ss10?: boolean
|
||||
/** Stylistic set 11 */
|
||||
ss11?: boolean
|
||||
/** Stylistic set 12 */
|
||||
ss12?: boolean
|
||||
/** Stylistic set 13 */
|
||||
ss13?: boolean
|
||||
/** Stylistic set 14 */
|
||||
ss14?: boolean
|
||||
/** Stylistic set 15 */
|
||||
ss15?: boolean
|
||||
/** Stylistic set 16 */
|
||||
ss16?: boolean
|
||||
/** Stylistic set 17 */
|
||||
ss17?: boolean
|
||||
/** Stylistic set 18 */
|
||||
ss18?: boolean
|
||||
/** Stylistic set 19 */
|
||||
ss19?: boolean
|
||||
/** Stylistic set 20 */
|
||||
ss20?: boolean
|
||||
/** Subscript: Replaces default glyphs with subscript glyphs */
|
||||
subs?: boolean
|
||||
/** Superscript: Replaces default glyphs with superscript glyphs */
|
||||
sups?: boolean
|
||||
/** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */
|
||||
swsh?: boolean
|
||||
/** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */
|
||||
titl?: boolean
|
||||
/** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */
|
||||
tnum?: boolean
|
||||
/** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */
|
||||
zero?: boolean
|
||||
}
|
||||
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSet: StyleSets,
|
||||
style: Styles,
|
||||
properties?: TextProperties
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSet: StyleSets,
|
||||
style: Styles,
|
||||
properties?: TextProperties
|
||||
): Text
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSet: StyleSets,
|
||||
properties?: TextProperties
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSet: StyleSets,
|
||||
properties?: TextProperties
|
||||
): Text
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
style: Styles,
|
||||
properties?: TextProperties
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
style: Styles,
|
||||
properties?: TextProperties
|
||||
): Text
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
properties?: TextProperties
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
properties?: TextProperties
|
||||
): Text
|
||||
export function text(
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
|
||||
styleOrProperties?: Styles | TextProperties,
|
||||
properties?: TextProperties
|
||||
layer: Layer,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
|
||||
styleOrProperties?: Styles | TextProperties,
|
||||
properties?: TextProperties
|
||||
) {
|
||||
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
|
||||
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
|
||||
|
||||
if (typeof styleSetStyleOrProperties === "object") {
|
||||
properties = styleSetStyleOrProperties
|
||||
}
|
||||
if (typeof styleOrProperties === "object") {
|
||||
properties = styleOrProperties
|
||||
}
|
||||
if (typeof styleSetStyleOrProperties === "object") {
|
||||
properties = styleSetStyleOrProperties
|
||||
}
|
||||
if (typeof styleOrProperties === "object") {
|
||||
properties = styleOrProperties
|
||||
}
|
||||
|
||||
let size = fontSizes[properties?.size || "sm"]
|
||||
let color = properties?.color || style.foreground
|
||||
let size = fontSizes[properties?.size || "sm"]
|
||||
let color = properties?.color || style.foreground
|
||||
|
||||
return {
|
||||
family: fontFamilies[fontFamily],
|
||||
...properties,
|
||||
color,
|
||||
size,
|
||||
}
|
||||
return {
|
||||
family: fontFamilies[fontFamily],
|
||||
...properties,
|
||||
color,
|
||||
size,
|
||||
}
|
||||
}
|
||||
|
||||
export interface Border {
|
||||
color: string
|
||||
width: number
|
||||
top?: boolean
|
||||
bottom?: boolean
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
overlay?: boolean
|
||||
color: string
|
||||
width: number
|
||||
top?: boolean
|
||||
bottom?: boolean
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
overlay?: boolean
|
||||
}
|
||||
|
||||
export interface BorderProperties {
|
||||
width?: number
|
||||
top?: boolean
|
||||
bottom?: boolean
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
overlay?: boolean
|
||||
width?: number
|
||||
top?: boolean
|
||||
bottom?: boolean
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
overlay?: boolean
|
||||
}
|
||||
|
||||
export function border(
|
||||
layer: Layer,
|
||||
styleSet: StyleSets,
|
||||
style: Styles,
|
||||
properties?: BorderProperties
|
||||
layer: Layer,
|
||||
styleSet: StyleSets,
|
||||
style: Styles,
|
||||
properties?: BorderProperties
|
||||
): Border
|
||||
export function border(
|
||||
layer: Layer,
|
||||
styleSet: StyleSets,
|
||||
properties?: BorderProperties
|
||||
layer: Layer,
|
||||
styleSet: StyleSets,
|
||||
properties?: BorderProperties
|
||||
): Border
|
||||
export function border(
|
||||
layer: Layer,
|
||||
style: Styles,
|
||||
properties?: BorderProperties
|
||||
layer: Layer,
|
||||
style: Styles,
|
||||
properties?: BorderProperties
|
||||
): Border
|
||||
export function border(layer: Layer, properties?: BorderProperties): Border
|
||||
export function border(
|
||||
layer: Layer,
|
||||
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
|
||||
styleOrProperties?: Styles | BorderProperties,
|
||||
properties?: BorderProperties
|
||||
layer: Layer,
|
||||
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
|
||||
styleOrProperties?: Styles | BorderProperties,
|
||||
properties?: BorderProperties
|
||||
): Border {
|
||||
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
|
||||
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
|
||||
|
||||
if (typeof styleSetStyleOrProperties === "object") {
|
||||
properties = styleSetStyleOrProperties
|
||||
}
|
||||
if (typeof styleOrProperties === "object") {
|
||||
properties = styleOrProperties
|
||||
}
|
||||
if (typeof styleSetStyleOrProperties === "object") {
|
||||
properties = styleSetStyleOrProperties
|
||||
}
|
||||
if (typeof styleOrProperties === "object") {
|
||||
properties = styleOrProperties
|
||||
}
|
||||
|
||||
return {
|
||||
color: style.border,
|
||||
width: 1,
|
||||
...properties,
|
||||
}
|
||||
return {
|
||||
color: style.border,
|
||||
width: 1,
|
||||
...properties,
|
||||
}
|
||||
}
|
||||
|
||||
export function svg(
|
||||
color: string,
|
||||
asset: String,
|
||||
width: Number,
|
||||
height: Number
|
||||
color: string,
|
||||
asset: String,
|
||||
width: Number,
|
||||
height: Number
|
||||
) {
|
||||
return {
|
||||
color,
|
||||
asset,
|
||||
dimensions: {
|
||||
width,
|
||||
height,
|
||||
},
|
||||
}
|
||||
return {
|
||||
color,
|
||||
asset,
|
||||
dimensions: {
|
||||
width,
|
||||
height,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,24 +72,28 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
rowHeight: 28,
|
||||
sectionIconSize: 8,
|
||||
headerRow: toggleable(interactive({
|
||||
base: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: { top: 14 },
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
headerRow: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: { top: 14 },
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
},
|
||||
background: background(layer, "default"), // posiewic: breaking change
|
||||
},
|
||||
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.
|
||||
}),
|
||||
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),
|
||||
@ -105,24 +109,22 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
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: {
|
||||
@ -131,8 +133,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
padding: {
|
||||
left: sidePadding,
|
||||
right: sidePadding,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -165,7 +167,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
disabledButton: {
|
||||
...contactButton,
|
||||
@ -175,44 +177,48 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
callingIndicator: {
|
||||
...text(layer, "mono", "variant", { size: "xs" }),
|
||||
},
|
||||
treeBranch: toggleable(interactive({
|
||||
base: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
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,
|
||||
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" }),
|
||||
},
|
||||
},
|
||||
name: {
|
||||
...projectRow.name,
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}, state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
}
|
||||
}),
|
||||
}),
|
||||
{
|
||||
default: { background: background(layer, "active") }
|
||||
})
|
||||
default: { background: background(layer, "active") },
|
||||
}
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,22 +21,21 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
|
||||
...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 }
|
||||
},
|
||||
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"),
|
||||
}
|
||||
}
|
||||
}),
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
dismissButton: {
|
||||
default: {
|
||||
@ -48,7 +47,7 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
|
||||
hover: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,41 +12,45 @@ export default function contextMenu(colorScheme: ColorScheme) {
|
||||
shadow: colorScheme.popoverShadow,
|
||||
border: border(layer),
|
||||
keystrokeMargin: 30,
|
||||
item: toggleable(interactive({
|
||||
base: {
|
||||
iconSpacing: 8,
|
||||
iconWidth: 14,
|
||||
padding: { left: 6, right: 6, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
label: text(layer, "sans", { size: "sm" }),
|
||||
keystroke: {
|
||||
...text(layer, "sans", "variant", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
}
|
||||
}, state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
label: text(layer, "sans", "hovered", { size: "sm" }),
|
||||
item: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
iconSpacing: 8,
|
||||
iconWidth: 14,
|
||||
padding: { left: 6, right: 6, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
label: text(layer, "sans", { size: "sm" }),
|
||||
keystroke: {
|
||||
...text(layer, "sans", "hovered", {
|
||||
...text(layer, "sans", "variant", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
}
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
label: text(layer, "sans", "hovered", { size: "sm" }),
|
||||
keystroke: {
|
||||
...text(layer, "sans", "hovered", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
{
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
}
|
||||
}), {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
}),
|
||||
),
|
||||
|
||||
separator: {
|
||||
background: borderColor(layer),
|
||||
|
||||
@ -25,7 +25,7 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", { size: "sm" })
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
@ -33,39 +33,37 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
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 },
|
||||
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"),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon: {
|
||||
color:
|
||||
foreground(layer, "hovered")
|
||||
}
|
||||
},
|
||||
}
|
||||
}),
|
||||
},
|
||||
}),
|
||||
|
||||
modal: {
|
||||
titleText: {
|
||||
default: {
|
||||
...text(layer, "sans", { size: "xs", weight: "bold" })
|
||||
}
|
||||
...text(layer, "sans", { size: "xs", weight: "bold" }),
|
||||
},
|
||||
},
|
||||
titlebar: {
|
||||
background: background(colorScheme.lowest),
|
||||
@ -87,8 +85,7 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
},
|
||||
},
|
||||
closeIcon: interactive({
|
||||
base:
|
||||
{
|
||||
base: {
|
||||
icon: svg(
|
||||
foreground(layer, "variant"),
|
||||
"icons/x_mark_8.svg",
|
||||
@ -106,7 +103,7 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
margin: {
|
||||
right: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
@ -125,7 +122,7 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
8
|
||||
),
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
dimensions: {
|
||||
width: 280,
|
||||
@ -214,8 +211,9 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
bottom: 5,
|
||||
left: 8,
|
||||
right: 0,
|
||||
}
|
||||
}, state: {
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
border: border(layer, "active", {
|
||||
bottom: false,
|
||||
@ -224,8 +222,8 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
left: true,
|
||||
}),
|
||||
},
|
||||
}
|
||||
})
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -50,23 +50,26 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
// 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"),
|
||||
indicator: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "on"),
|
||||
state: {
|
||||
clicked: {
|
||||
color: foreground(layer, "base"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}),
|
||||
}),
|
||||
{
|
||||
default: {
|
||||
color: foreground(layer, "on"),
|
||||
}
|
||||
}),
|
||||
},
|
||||
}
|
||||
),
|
||||
|
||||
verticalScale: 0.55,
|
||||
},
|
||||
@ -74,29 +77,34 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
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"),
|
||||
indicator: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
hovered: {
|
||||
color: foreground(layer, "on"),
|
||||
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() },
|
||||
default: {
|
||||
color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
|
||||
},
|
||||
|
||||
hover: {
|
||||
color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
|
||||
@ -245,12 +253,13 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
bottom: 6,
|
||||
left: 6,
|
||||
right: 6,
|
||||
}
|
||||
}, state: {
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
scrollbar: {
|
||||
|
||||
@ -20,8 +20,9 @@ export default function feedback(colorScheme: ColorScheme) {
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
}
|
||||
}, state: {
|
||||
},
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
@ -32,7 +33,7 @@ export default function feedback(colorScheme: ColorScheme) {
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
button_margin: 8,
|
||||
info_text_default: text(layer, "sans", "default", { size: "xs" }),
|
||||
|
||||
@ -40,29 +40,35 @@ export default function picker(colorScheme: ColorScheme): any {
|
||||
...container,
|
||||
padding: {},
|
||||
},
|
||||
item: toggleable(interactive({
|
||||
base: {
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
item: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
text: text(layer, "sans", "variant"),
|
||||
highlightText: text(layer, "sans", "accent", {
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 4,
|
||||
right: 4,
|
||||
state: {
|
||||
hovered: {
|
||||
background: withOpacity(
|
||||
background(layer, "hovered"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
},
|
||||
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(
|
||||
@ -70,9 +76,9 @@ export default function picker(colorScheme: ColorScheme): any {
|
||||
0.5
|
||||
),
|
||||
//text: text(layer, "sans", "base", "active"),
|
||||
}
|
||||
}),
|
||||
|
||||
},
|
||||
}
|
||||
),
|
||||
|
||||
inputEditor,
|
||||
emptyInputEditor,
|
||||
|
||||
@ -29,18 +29,19 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
}
|
||||
|
||||
let entry = toggleable(interactive({
|
||||
base: {
|
||||
...baseEntry,
|
||||
text: text(layer, "mono", "variant", { size: "sm" }),
|
||||
status,
|
||||
}, state:
|
||||
{
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
}
|
||||
}
|
||||
}),
|
||||
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
|
||||
@ -52,8 +53,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
//background: background(layer, "active"),
|
||||
text: text(layer, "mono", "active", { size: "sm" }),
|
||||
},
|
||||
|
||||
});
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
openProjectButton: interactive({
|
||||
@ -72,14 +73,15 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", { size: "sm" })
|
||||
}, state: {
|
||||
...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 },
|
||||
@ -111,7 +113,6 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "disabled", { size: "sm" }),
|
||||
},
|
||||
|
||||
},
|
||||
},
|
||||
filenameEditor: {
|
||||
|
||||
@ -37,41 +37,44 @@ export default function search(colorScheme: ColorScheme) {
|
||||
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: {
|
||||
right: 4,
|
||||
optionButton: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
state: {
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}, 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"),
|
||||
},
|
||||
}
|
||||
}), {
|
||||
default: {
|
||||
...text(layer, "mono", "on", "inverted"),
|
||||
background: background(layer, "on", "inverted"),
|
||||
border: border(layer, "on", "inverted"),
|
||||
},
|
||||
|
||||
}),
|
||||
),
|
||||
editor,
|
||||
invalidEditor: {
|
||||
...editor,
|
||||
@ -113,11 +116,12 @@ export default function search(colorScheme: ColorScheme) {
|
||||
left: 10,
|
||||
right: 10,
|
||||
},
|
||||
}, state: {
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,13 +26,14 @@ export default function simpleMessageNotification(
|
||||
},
|
||||
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
}, state: {
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
dismissButton: interactive({
|
||||
base: {
|
||||
@ -41,11 +42,12 @@ export default function simpleMessageNotification(
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8,
|
||||
}, state: {
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
}
|
||||
})
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,15 +29,14 @@ export default function statusBar(colorScheme: ColorScheme) {
|
||||
activeLanguage: interactive({
|
||||
base: {
|
||||
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({
|
||||
@ -47,92 +46,93 @@ export default function statusBar(colorScheme: ColorScheme) {
|
||||
iconWidth: 14,
|
||||
height: 18,
|
||||
message: text(layer, "sans"),
|
||||
iconColor: foreground(layer)
|
||||
iconColor: foreground(layer),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
message: text(layer, "sans"),
|
||||
iconColor: foreground(layer),
|
||||
background: background(layer, "hovered"),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
diagnosticMessage: interactive({
|
||||
base: {
|
||||
...text(layer, "sans")
|
||||
...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"),
|
||||
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: {
|
||||
cornerRadius: 6,
|
||||
padding: { top: 3, bottom: 3, left: 7, right: 7 },
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
containerWarning: {
|
||||
...diagnosticStatusContainer,
|
||||
background: background(layer, "warning"),
|
||||
border: border(layer, "warning"),
|
||||
background: background(layer, "warning", "hovered"),
|
||||
border: border(layer, "warning", "hovered"),
|
||||
},
|
||||
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"),
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
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" }),
|
||||
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"),
|
||||
}
|
||||
}
|
||||
}),
|
||||
state: {
|
||||
hovered: {
|
||||
iconColor: foreground(layer, "hovered"),
|
||||
background: background(layer, "variant"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
{
|
||||
default: {
|
||||
iconColor: foreground(layer, "active"),
|
||||
background: background(layer, "active"),
|
||||
}
|
||||
}),
|
||||
},
|
||||
}
|
||||
),
|
||||
badge: {
|
||||
cornerRadius: 3,
|
||||
padding: 2,
|
||||
|
||||
@ -89,23 +89,24 @@ export default function tabBar(colorScheme: ColorScheme) {
|
||||
inactiveTab: inactivePaneInactiveTab,
|
||||
},
|
||||
draggedTab,
|
||||
paneButton: toggleable(interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: activePaneActiveTab.height,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
}
|
||||
}
|
||||
}),
|
||||
paneButton: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: activePaneActiveTab.height,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
{
|
||||
default: {
|
||||
color: foreground(layer, "accent"),
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
),
|
||||
paneButtonContainer: {
|
||||
background: tab.background,
|
||||
|
||||
@ -1,41 +1,47 @@
|
||||
import { DeepPartial } from 'utility-types';
|
||||
import merge from 'ts-deepmerge';
|
||||
import merge from "ts-deepmerge"
|
||||
|
||||
interface Toggleable<T> {
|
||||
inactive: T
|
||||
active: T,
|
||||
type ToggleState = "inactive" | "active"
|
||||
|
||||
type Toggleable<T> = Record<ToggleState, T>
|
||||
|
||||
const NO_INACTIVE_OR_BASE_ERROR =
|
||||
"A toggleable object must have an inactive state, or a base property."
|
||||
const NO_ACTIVE_ERROR = "A toggleable object must have an active state."
|
||||
|
||||
interface ToggleableProps<T> {
|
||||
base?: T
|
||||
state: Partial<Record<ToggleState, T>>
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function for creating Toggleable objects.
|
||||
* @template T The type of the object being toggled.
|
||||
* @param inactive The initial state of the toggleable object.
|
||||
* @param modifications The modifications to be applied to the initial state to create the active state.
|
||||
* @param props Object containing the base (inactive) state and state modifications to create the active state.
|
||||
* @returns A Toggleable object containing both the inactive and active states.
|
||||
* @example
|
||||
* ```
|
||||
* toggleable({day: 1, month: "January"}, {day: 3})
|
||||
* ```
|
||||
* This returns the following object:
|
||||
* ```
|
||||
* Toggleable<_>{
|
||||
* inactive: { day: 1, month: "January" },
|
||||
* active: { day: 3, month: "January" }
|
||||
* }
|
||||
* ```
|
||||
* The function also works for nested structures:
|
||||
* ```
|
||||
* toggleable({first_level: "foo", second_level: {nested_member: "nested"}}, {second_level: {nested_member: "another nested thing"}})
|
||||
* ```
|
||||
* Which returns:
|
||||
* ```
|
||||
* Toggleable<_> {
|
||||
* inactive: {first_level: "foo", second_level: {nested_member: "nested"}},
|
||||
* active: { first_level: "foo", second_level: {nested_member: "another nested thing"}}
|
||||
* }
|
||||
* toggleable({
|
||||
* base: { background: "#000000", text: "#CCCCCC" },
|
||||
* state: { active: { text: "#CCCCCC" } },
|
||||
* })
|
||||
* ```
|
||||
*/
|
||||
export function toggleable<T extends Object>(inactive: T, modifications: DeepPartial<T>): Toggleable<T> {
|
||||
let active: T = merge(inactive, modifications) as T;
|
||||
return { active: active, inactive: inactive };
|
||||
export function toggleable<T extends object>(
|
||||
props: ToggleableProps<T>
|
||||
): Toggleable<T> {
|
||||
const { base, state } = props
|
||||
|
||||
if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
|
||||
if (!state.active) throw new Error(NO_ACTIVE_ERROR)
|
||||
|
||||
const inactiveState = base
|
||||
? ((state.inactive ? merge(base, state.inactive) : base) as T)
|
||||
: (state.inactive as T)
|
||||
|
||||
const toggleObj: Toggleable<T> = {
|
||||
inactive: inactiveState,
|
||||
active: merge(base ?? {}, state.active) as T,
|
||||
}
|
||||
|
||||
return toggleObj
|
||||
}
|
||||
|
||||
@ -13,44 +13,50 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
|
||||
header: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
|
||||
secondaryText: text(layer, "sans", {
|
||||
size: "sm",
|
||||
color: "#aaaaaa",
|
||||
}),
|
||||
secondaryTextSpacing: 10,
|
||||
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
background: background(layer, "on"),
|
||||
border: border(layer, "on", { overlay: true })
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
}
|
||||
}
|
||||
})
|
||||
,
|
||||
},
|
||||
},
|
||||
}),
|
||||
sectionHeader: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 8, right: 8, top: 8, bottom: 8 },
|
||||
},
|
||||
item: toggleable(interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryTextSpacing: 10,
|
||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 }
|
||||
}, state: {
|
||||
item: toggleable(
|
||||
interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryTextSpacing: 10,
|
||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
{
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
}
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
}
|
||||
}), {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
})
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,12 +14,13 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
|
||||
actionMessage: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 }
|
||||
}, state: {
|
||||
margin: { left: headerPadding, top: 6, bottom: 6 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
dismissButton: interactive({
|
||||
base: {
|
||||
@ -27,13 +28,13 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
|
||||
iconWidth: 8,
|
||||
iconHeight: 8,
|
||||
buttonWidth: 8,
|
||||
buttonHeight: 8
|
||||
}, state: {
|
||||
buttonHeight: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,13 +79,14 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", interactive_text_size)
|
||||
}, state: {
|
||||
...text(layer, "sans", "default", interactive_text_size),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "default", interactive_text_size),
|
||||
background: background(layer, "hovered"),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
usageNote: {
|
||||
|
||||
@ -12,44 +12,50 @@ import {
|
||||
import statusBar from "./statusBar"
|
||||
import tabBar from "./tabBar"
|
||||
import { interactive } from "../element"
|
||||
import merge from 'ts-deepmerge';
|
||||
import merge from "ts-deepmerge"
|
||||
export default function workspace(colorScheme: ColorScheme) {
|
||||
const layer = colorScheme.lowest
|
||||
const isLight = colorScheme.isLight
|
||||
const itemSpacing = 8
|
||||
const titlebarButton = toggleable(interactive({
|
||||
base: {
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 8,
|
||||
right: 8,
|
||||
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),
|
||||
},
|
||||
...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"),
|
||||
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"),
|
||||
},
|
||||
},
|
||||
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
|
||||
@ -86,23 +92,23 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
},
|
||||
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" }),
|
||||
}
|
||||
}
|
||||
}),
|
||||
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,
|
||||
},
|
||||
@ -214,18 +220,15 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
|
||||
// Sign in buttom
|
||||
// FlatButton, Variant
|
||||
signInPrompt:
|
||||
merge(titlebarButton,
|
||||
{
|
||||
inactive: {
|
||||
default: {
|
||||
margin: {
|
||||
left: itemSpacing,
|
||||
},
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
signInPrompt: merge(titlebarButton, {
|
||||
inactive: {
|
||||
default: {
|
||||
margin: {
|
||||
left: itemSpacing,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
// Offline Indicator
|
||||
offlineIcon: {
|
||||
@ -259,54 +262,57 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
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"),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
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")
|
||||
}
|
||||
},
|
||||
color: foreground(layer, "variant", "active"),
|
||||
},
|
||||
}
|
||||
),
|
||||
userMenuButton: merge(titlebarButton, {
|
||||
inactive: {
|
||||
default: {
|
||||
buttonWidth: 20,
|
||||
iconWidth: 12
|
||||
}
|
||||
}, active: { // posiewic: these properties are not currently set on main
|
||||
iconWidth: 12,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
// posiewic: these properties are not currently set on main
|
||||
default: {
|
||||
iconWidth: 12,
|
||||
button_width: 20,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
|
||||
toggleContactsBadge: {
|
||||
cornerRadius: 3,
|
||||
padding: 2,
|
||||
@ -324,27 +330,31 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
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"),
|
||||
},
|
||||
}
|
||||
}),
|
||||
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,
|
||||
@ -355,13 +365,18 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
}
|
||||
}, state: {
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||
background: background(colorScheme.highest, "on", "hovered"),
|
||||
background: background(
|
||||
colorScheme.highest,
|
||||
"on",
|
||||
"hovered"
|
||||
),
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
disconnectedOverlay: {
|
||||
...text(layer, "sans"),
|
||||
|
||||
@ -1,9 +1,19 @@
|
||||
import { SingleBoxShadowToken, SingleColorToken, SingleOtherToken, TokenTypes } from "@tokens-studio/types"
|
||||
import { ColorScheme, Shadow, SyntaxHighlightStyle, ThemeSyntax } from "../colorScheme"
|
||||
import {
|
||||
SingleBoxShadowToken,
|
||||
SingleColorToken,
|
||||
SingleOtherToken,
|
||||
TokenTypes,
|
||||
} from "@tokens-studio/types"
|
||||
import {
|
||||
ColorScheme,
|
||||
Shadow,
|
||||
SyntaxHighlightStyle,
|
||||
ThemeSyntax,
|
||||
} from "../colorScheme"
|
||||
import { LayerToken, layerToken } from "./layer"
|
||||
import { PlayersToken, playersToken } from "./players"
|
||||
import { colorToken } from "./token"
|
||||
import { Syntax } from "../syntax";
|
||||
import { Syntax } from "../syntax"
|
||||
import editor from "../../styleTree/editor"
|
||||
|
||||
interface ColorSchemeTokens {
|
||||
@ -18,27 +28,32 @@ interface ColorSchemeTokens {
|
||||
syntax?: Partial<ThemeSyntaxColorTokens>
|
||||
}
|
||||
|
||||
const createShadowToken = (shadow: Shadow, tokenName: string): SingleBoxShadowToken => {
|
||||
const createShadowToken = (
|
||||
shadow: Shadow,
|
||||
tokenName: string
|
||||
): SingleBoxShadowToken => {
|
||||
return {
|
||||
name: tokenName,
|
||||
type: TokenTypes.BOX_SHADOW,
|
||||
value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`
|
||||
};
|
||||
};
|
||||
value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`,
|
||||
}
|
||||
}
|
||||
|
||||
const popoverShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
|
||||
const shadow = colorScheme.popoverShadow;
|
||||
return createShadowToken(shadow, "popoverShadow");
|
||||
};
|
||||
const shadow = colorScheme.popoverShadow
|
||||
return createShadowToken(shadow, "popoverShadow")
|
||||
}
|
||||
|
||||
const modalShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
|
||||
const shadow = colorScheme.modalShadow;
|
||||
return createShadowToken(shadow, "modalShadow");
|
||||
};
|
||||
const shadow = colorScheme.modalShadow
|
||||
return createShadowToken(shadow, "modalShadow")
|
||||
}
|
||||
|
||||
type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken>
|
||||
|
||||
function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens {
|
||||
function syntaxHighlightStyleColorTokens(
|
||||
syntax: Syntax
|
||||
): ThemeSyntaxColorTokens {
|
||||
const styleKeys = Object.keys(syntax) as (keyof Syntax)[]
|
||||
|
||||
return styleKeys.reduce((acc, styleKey) => {
|
||||
@ -46,13 +61,16 @@ function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens
|
||||
// This can happen because we have a "constructor" property on the syntax object
|
||||
// and a "constructor" property on the prototype of the syntax object
|
||||
// To work around this just assert that the type of the style is not a function
|
||||
if (!syntax[styleKey] || typeof syntax[styleKey] === 'function') return acc;
|
||||
const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>;
|
||||
return { ...acc, [styleKey]: colorToken(styleKey, color) };
|
||||
}, {} as ThemeSyntaxColorTokens);
|
||||
if (!syntax[styleKey] || typeof syntax[styleKey] === "function")
|
||||
return acc
|
||||
const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>
|
||||
return { ...acc, [styleKey]: colorToken(styleKey, color) }
|
||||
}, {} as ThemeSyntaxColorTokens)
|
||||
}
|
||||
|
||||
const syntaxTokens = (colorScheme: ColorScheme): ColorSchemeTokens['syntax'] => {
|
||||
const syntaxTokens = (
|
||||
colorScheme: ColorScheme
|
||||
): ColorSchemeTokens["syntax"] => {
|
||||
const syntax = editor(colorScheme).syntax
|
||||
|
||||
return syntaxHighlightStyleColorTokens(syntax)
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { SingleColorToken } from "@tokens-studio/types";
|
||||
import { Layer, Style, StyleSet } from "../colorScheme";
|
||||
import { colorToken } from "./token";
|
||||
import { SingleColorToken } from "@tokens-studio/types"
|
||||
import { Layer, Style, StyleSet } from "../colorScheme"
|
||||
import { colorToken } from "./token"
|
||||
|
||||
interface StyleToken {
|
||||
background: SingleColorToken,
|
||||
border: SingleColorToken,
|
||||
foreground: SingleColorToken,
|
||||
background: SingleColorToken
|
||||
border: SingleColorToken
|
||||
foreground: SingleColorToken
|
||||
}
|
||||
|
||||
interface StyleSetToken {
|
||||
@ -37,24 +37,27 @@ export const styleToken = (style: Style, name: string): StyleToken => {
|
||||
return token
|
||||
}
|
||||
|
||||
export const styleSetToken = (styleSet: StyleSet, name: string): StyleSetToken => {
|
||||
const token: StyleSetToken = {} as StyleSetToken;
|
||||
export const styleSetToken = (
|
||||
styleSet: StyleSet,
|
||||
name: string
|
||||
): StyleSetToken => {
|
||||
const token: StyleSetToken = {} as StyleSetToken
|
||||
|
||||
for (const style in styleSet) {
|
||||
const s = style as keyof StyleSet;
|
||||
token[s] = styleToken(styleSet[s], `${name}${style}`);
|
||||
const s = style as keyof StyleSet
|
||||
token[s] = styleToken(styleSet[s], `${name}${style}`)
|
||||
}
|
||||
|
||||
return token;
|
||||
return token
|
||||
}
|
||||
|
||||
export const layerToken = (layer: Layer, name: string): LayerToken => {
|
||||
const token: LayerToken = {} as LayerToken;
|
||||
const token: LayerToken = {} as LayerToken
|
||||
|
||||
for (const styleSet in layer) {
|
||||
const s = styleSet as keyof Layer;
|
||||
token[s] = styleSetToken(layer[s], `${name}${styleSet}`);
|
||||
const s = styleSet as keyof Layer
|
||||
token[s] = styleSetToken(layer[s], `${name}${styleSet}`)
|
||||
}
|
||||
|
||||
return token;
|
||||
return token
|
||||
}
|
||||
|
||||
@ -6,13 +6,21 @@ export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
|
||||
|
||||
export type PlayersToken = Record<keyof Players, PlayerToken>
|
||||
|
||||
function buildPlayerToken(colorScheme: ColorScheme, index: number): PlayerToken {
|
||||
|
||||
function buildPlayerToken(
|
||||
colorScheme: ColorScheme,
|
||||
index: number
|
||||
): PlayerToken {
|
||||
const playerNumber = index.toString() as keyof Players
|
||||
|
||||
return {
|
||||
selection: colorToken(`player${index}Selection`, colorScheme.players[playerNumber].selection),
|
||||
cursor: colorToken(`player${index}Cursor`, colorScheme.players[playerNumber].cursor),
|
||||
selection: colorToken(
|
||||
`player${index}Selection`,
|
||||
colorScheme.players[playerNumber].selection
|
||||
),
|
||||
cursor: colorToken(
|
||||
`player${index}Cursor`,
|
||||
colorScheme.players[playerNumber].cursor
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,5 +32,5 @@ export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({
|
||||
"4": buildPlayerToken(colorScheme, 4),
|
||||
"5": buildPlayerToken(colorScheme, 5),
|
||||
"6": buildPlayerToken(colorScheme, 6),
|
||||
"7": buildPlayerToken(colorScheme, 7)
|
||||
"7": buildPlayerToken(colorScheme, 7),
|
||||
})
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import { SingleColorToken, TokenTypes } from "@tokens-studio/types"
|
||||
|
||||
export function colorToken(name: string, value: string, description?: string): SingleColorToken {
|
||||
export function colorToken(
|
||||
name: string,
|
||||
value: string,
|
||||
description?: string
|
||||
): SingleColorToken {
|
||||
const token: SingleColorToken = {
|
||||
name,
|
||||
type: TokenTypes.COLOR,
|
||||
@ -8,7 +12,8 @@ export function colorToken(name: string, value: string, description?: string): S
|
||||
description,
|
||||
}
|
||||
|
||||
if (!token.value || token.value === '') throw new Error("Color token must have a value")
|
||||
if (!token.value || token.value === "")
|
||||
throw new Error("Color token must have a value")
|
||||
|
||||
return token
|
||||
}
|
||||
|
||||
@ -1 +1,10 @@
|
||||
export function slugify(t: string): string { return t.toString().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '').replace(/\-\-+/g, '-').replace(/^-+/, '').replace(/-+$/, '') }
|
||||
export function slugify(t: string): string {
|
||||
return t
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, "-")
|
||||
.replace(/[^\w\-]+/g, "")
|
||||
.replace(/\-\-+/g, "-")
|
||||
.replace(/^-+/, "")
|
||||
.replace(/-+$/, "")
|
||||
}
|
||||
|
||||
@ -23,30 +23,14 @@
|
||||
"skipLibCheck": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
],
|
||||
"@element/*": [
|
||||
"./src/element/*"
|
||||
],
|
||||
"@component/*": [
|
||||
"./src/component/*"
|
||||
],
|
||||
"@styleTree/*": [
|
||||
"./src/styleTree/*"
|
||||
],
|
||||
"@theme/*": [
|
||||
"./src/theme/*"
|
||||
],
|
||||
"@themes/*": [
|
||||
"./src/themes/*"
|
||||
],
|
||||
"@util/*": [
|
||||
"./src/util/*"
|
||||
]
|
||||
"@/*": ["./*"],
|
||||
"@element/*": ["./src/element/*"],
|
||||
"@component/*": ["./src/component/*"],
|
||||
"@styleTree/*": ["./src/styleTree/*"],
|
||||
"@theme/*": ["./src/theme/*"],
|
||||
"@themes/*": ["./src/themes/*"],
|
||||
"@util/*": ["./src/util/*"]
|
||||
}
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { configDefaults, defineConfig } from 'vitest/config'
|
||||
import { configDefaults, defineConfig } from "vitest/config"
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
exclude: [...configDefaults.exclude, 'target/*'],
|
||||
include: ['src/**/*.{spec,test}.ts'],
|
||||
exclude: [...configDefaults.exclude, "target/*"],
|
||||
include: ["src/**/*.{spec,test}.ts"],
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user