oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Format

Browse Source
This commit is contained in:
Nate Butler
2023-06-20 16:05:23 -07:00
committed by Mikayla Maki
parent 1f3feacb21
commit 5c034ab63c
31 changed files with 978 additions and 860 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/app.ts
-1
View File
@@ -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
+18 -7
View File
@@ -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
+12 -10
View File
@@ -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
+217 -217
View File
@@ -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
+56 -50
View File
@@ -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") },
}
),
}
}
styles/src/styleTree/contactNotification.ts
+15 -16
View File
@@ -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
+32 -28
View File
@@ -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
+32 -34
View File
@@ -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
+38 -29
View File
@@ -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
+4 -3
View File
@@ -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
+30 -24
View File
@@ -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
+19 -18
View File
@@ -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
+38 -34
View File
@@ -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
+7 -5
View File
@@ -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
+67 -67
View File
@@ -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
+15 -14
View File
@@ -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
+35 -29
View File
@@ -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
+30 -24
View File
@@ -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
+9 -8
View File
@@ -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
+5 -4
View File
@@ -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
+125 -110
View File
@@ -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"),