diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts index f6bff04142..1a78de0587 100644 --- a/styles/src/styleTree/app.ts +++ b/styles/src/styleTree/app.ts @@ -38,7 +38,7 @@ export default function app(colorScheme: ColorScheme): Object { contactFinder: contactFinder(colorScheme), search: search(colorScheme), breadcrumbs: { - ...text(colorScheme.lowest.top, "sans"), + ...text(colorScheme.lowest.top, "sans", "variant"), padding: { left: 6, }, diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index a9fbf98695..70af97e845 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -2,14 +2,13 @@ import { ColorScheme } from "../themes/common/colorScheme"; import { text, border, background } from "./components"; export default function commandPalette(colorScheme: ColorScheme) { - let layer = colorScheme.highest.bottom; + let layer = colorScheme.highest.top; return { keystrokeSpacing: 8, key: { text: text(layer, "mono", { size: "xs" }), cornerRadius: 4, background: background(layer, "on"), - border: border(layer), padding: { top: 2, bottom: 2, @@ -20,7 +19,8 @@ export default function commandPalette(colorScheme: ColorScheme) { left: 2, }, active: { - text: text(layer, "mono", "on", "active", { size: "xs" }), + text: text(layer, "mono", "active", { size: "xs" }), + background: background(layer, "on", "active"), }, }, }; diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts index 40ba6b3179..2dc7091883 100644 --- a/styles/src/styleTree/contactFinder.ts +++ b/styles/src/styleTree/contactFinder.ts @@ -3,10 +3,10 @@ import { ColorScheme } from "../themes/common/colorScheme"; import { background, foreground } from "./components"; export default function contactFinder(colorScheme: ColorScheme) { - let layer = colorScheme.middle.bottom; + let layer = colorScheme.highest.top; const contactButton = { - background: background(layer), - color: foreground(layer), + background: background(layer, "variant"), + color: foreground(layer, "variant"), iconWidth: 8, buttonWidth: 16, cornerRadius: 8, @@ -27,7 +27,7 @@ export default function contactFinder(colorScheme: ColorScheme) { contactButton: { ...contactButton, hover: { - background: background(layer, "hovered"), + background: background(layer, "variant", "hovered"), }, }, disabledContactButton: { diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 1c1e4495c3..738824b16f 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -7,7 +7,7 @@ import { export default function picker(colorScheme: ColorScheme) { let elevation = colorScheme.highest; - let layer = elevation.middle; + let layer = elevation.top; return { background: background(layer), cornerRadius: 8, diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 219b0081c2..c539b8a7fb 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -96,10 +96,10 @@ export default function statusBar(colorScheme: ColorScheme) { item: { ...statusContainer, iconSize: 16, - iconColor: foreground(layer), + iconColor: foreground(layer, "variant"), hover: { iconColor: foreground(layer, "hovered"), - background: background(layer, "hovered"), + background: background(layer, "variant"), }, active: { iconColor: foreground(layer, "active"), @@ -111,7 +111,7 @@ export default function statusBar(colorScheme: ColorScheme) { padding: 2, margin: { bottom: -1, right: -1 }, border: border(layer), - background: background(layer), + background: background(layer, "info"), }, }, };