styles/src/element/index.ts 🔗
@@ -1,3 +1,3 @@
-import { interactive } from "./interactive";
+import { interactive } from "./interactive"
export { interactive }
Format
Nate Butler created
Change summary
styles/src/element/index.ts | 2
styles/src/element/interactive.test.ts | 61 +-
styles/src/element/interactive.ts | 76 +-
styles/src/styleTree/app.ts | 1
styles/src/styleTree/assistant.ts | 25
styles/src/styleTree/commandPalette.ts | 22
styles/src/styleTree/components.ts | 434 ++++++++--------
styles/src/styleTree/contactList.ts | 106 ++-
styles/src/styleTree/contactNotification.ts | 31
styles/src/styleTree/contextMenu.ts | 60 +-
styles/src/styleTree/copilot.ts | 66 +-
styles/src/styleTree/editor.ts | 67 +-
styles/src/styleTree/feedback.ts | 7
styles/src/styleTree/picker.ts | 54 +
styles/src/styleTree/projectPanel.ts | 37
styles/src/styleTree/search.ts | 72 +-
styles/src/styleTree/simpleMessageNotification.ts | 12
styles/src/styleTree/statusBar.ts | 134 ++--
styles/src/styleTree/tabBar.ts | 29
styles/src/styleTree/toggle.ts | 64 +-
styles/src/styleTree/toolbarDropdownMenu.ts | 54 +
styles/src/styleTree/updateNotification.ts | 17
styles/src/styleTree/welcome.ts | 9
styles/src/styleTree/workspace.ts | 235 ++++----
styles/src/theme/tokens/colorScheme.ts | 56 +
styles/src/theme/tokens/layer.ts | 33
styles/src/theme/tokens/players.ts | 18
styles/src/theme/tokens/token.ts | 9
styles/src/utils/slugify.ts | 11
styles/tsconfig.json | 32
styles/vitest.config.ts | 6
31 files changed, 979 insertions(+), 861 deletions(-)
Detailed changes
styles/src/element/interactive.test.ts 🔗
@@ -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)
})
})
styles/src/element/interactive.ts 🔗
@@ -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
}
styles/src/styleTree/app.ts 🔗
@@ -1,4 +1,3 @@
-import { text } from "./components"
import contactFinder from "./contactFinder"
import contactsPopover from "./contactsPopover"
import commandPalette from "./commandPalette"
styles/src/styleTree/assistant.ts 🔗
@@ -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"),
styles/src/styleTree/commandPalette.ts 🔗
@@ -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),
- }
-
- })
- ,
-
+ },
+ }
+ ),
}
}
styles/src/styleTree/components.ts 🔗
@@ -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,
+ },
+ }
}
styles/src/styleTree/contactList.ts 🔗
@@ -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,
- },
- name: {
- ...projectRow.name,
- ...text(layer, "mono", { size: "sm" }),
+ 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"),
+ state: {
+ hovered: {
+ background: background(layer, "hovered"),
+ },
},
- }
- }),
+ }),
{
- default: { background: background(layer, "active") }
- })
+ default: { background: background(layer, "active") },
+ }
+ ),
}
}
styles/src/styleTree/contactNotification.ts 🔗
@@ -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"),
},
- }
+ },
},
}
}
styles/src/styleTree/contextMenu.ts 🔗
@@ -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),
styles/src/styleTree/copilot.ts 🔗
@@ -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,
}),
},
- }
- })
+ },
+ }),
},
},
styles/src/styleTree/editor.ts 🔗
@@ -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: {
styles/src/styleTree/feedback.ts 🔗
@@ -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" }),
styles/src/styleTree/picker.ts 🔗
@@ -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,
styles/src/styleTree/projectPanel.ts 🔗
@@ -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: {
styles/src/styleTree/search.ts 🔗
@@ -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"),
- }
- }
+ },
+ },
}),
}
}
styles/src/styleTree/simpleMessageNotification.ts 🔗
@@ -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"),
},
- }
- })
+ },
+ }),
}
}
styles/src/styleTree/statusBar.ts 🔗
@@ -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,
styles/src/styleTree/tabBar.ts 🔗
@@ -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,
styles/src/styleTree/toggle.ts 🔗
@@ -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
}
styles/src/styleTree/toolbarDropdownMenu.ts 🔗
@@ -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"),
- },
- })
+ ),
}
}
styles/src/styleTree/updateNotification.ts 🔗
@@ -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"),
},
},
- })
-
+ }),
}
}
styles/src/styleTree/welcome.ts 🔗
@@ -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: {
styles/src/styleTree/workspace.ts 🔗
@@ -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"),
styles/src/theme/tokens/colorScheme.ts 🔗
@@ -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)
styles/src/theme/tokens/layer.ts 🔗
@@ -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
}
styles/src/theme/tokens/players.ts 🔗
@@ -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),
})
styles/src/theme/tokens/token.ts 🔗
@@ -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
}
styles/src/utils/slugify.ts 🔗
@@ -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(/-+$/, "")
+}
styles/tsconfig.json 🔗
@@ -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"]
}
styles/vitest.config.ts 🔗
@@ -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"],
},
})