diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index b4bc25bb8b..694f434968 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -1,26 +1,29 @@ import { ColorScheme } from "../themes/common/colorScheme"; -import { text, border, background } from "./components"; +import { withOpacity } from "../utils/color"; +import { text, background } from "./components"; export default function commandPalette(colorScheme: ColorScheme) { let layer = colorScheme.highest.top; return { keystrokeSpacing: 8, key: { - text: text(layer, "mono", { size: "xs" }), - cornerRadius: 4, - background: background(layer, "on"), + text: text(layer, "mono", "on", "default", { size: "xs" }), + cornerRadius: 2, + background: withOpacity(background(layer, "on"), 0.5), padding: { - top: 2, - bottom: 2, - left: 8, - right: 8, + top: 1, + bottom: 1, + left: 6, + right: 6, }, margin: { + top: 1, + bottom: 1, left: 2, }, active: { - text: text(layer, "mono", { size: "xs" }), - background: background(layer), + text: text(layer, "mono", "on", "active", { size: "xs" }), + background: withOpacity(background(layer, "on"), 0.2), }, }, }; diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 69648bf402..5a41187662 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -10,8 +10,7 @@ export default function picker(colorScheme: ColorScheme) { let layer = elevation.top; return { background: background(layer), - cornerRadius: 8, - padding: 8, + cornerRadius: 12, item: { padding: { bottom: 4, @@ -19,8 +18,12 @@ export default function picker(colorScheme: ColorScheme) { right: 12, top: 4, }, - cornerRadius: 8, - text: text(layer, "sans"), + margin: { + left: 4, + right: 4 + }, + cornerRadius: 6, + text: text(layer, "sans", "variant"), highlightText: text(layer, "sans", "info", { weight: "bold" }), active: { background: background(layer, "active"), @@ -35,25 +38,26 @@ export default function picker(colorScheme: ColorScheme) { empty: { text: text(layer, "sans", "variant"), padding: { - bottom: 4, - left: 12, - right: 12, + bottom: 8, + left: 16, + right: 16, top: 8, }, }, inputEditor: { - background: background(layer, "on"), - cornerRadius: 8, placeholderText: text(layer, "sans", "on", "disabled"), selection: colorScheme.players[0], text: text(layer, "mono", "on"), - border: border(layer, "on"), + border: border(layer, { bottom: true }), padding: { - bottom: 7, + bottom: 8, left: 16, right: 16, - top: 7, + top: 8, }, + margin: { + bottom: 4 + } }, shadow: elevation.shadow, }; diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts index 5c1d2b0e90..e3aef2a330 100644 --- a/styles/src/themes/common/ramps.ts +++ b/styles/src/themes/common/ramps.ts @@ -57,7 +57,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: { let middle = elevation( resampleSet( baseSet, - evenSamples(0.125, 1) + evenSamples(0.08, 1) ), isLight, { @@ -71,7 +71,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: { let highest = elevation( resampleSet( baseSet, - evenSamples(0.25, 1) + evenSamples(0.16, 1) ), isLight, { @@ -634,10 +634,10 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer { disabled: 0.1, }, foreground: { - default: 0.9, + default: 0.6, hovered: 0.9, pressed: 0.9, - active: 0.5, + active: 0.3, disabled: 0.2, }, });