From 02249dc2e880c24c062437025abbb9ffae96c246 Mon Sep 17 00:00:00 2001 From: Keith Simmons Date: Fri, 27 May 2022 11:30:58 -0700 Subject: [PATCH] Rework darkest color in base16, shadows, and add hoverPopover styleTree --- styles/src/styleTree/chatPanel.ts | 7 +- styles/src/styleTree/components.ts | 13 +- styles/src/styleTree/editor.ts | 2 + styles/src/styleTree/hoverPopover.ts | 20 ++++ styles/src/styleTree/picker.ts | 4 +- styles/src/styleTree/workspace.ts | 4 +- styles/src/themes/common/base16.ts | 173 +++++++++++++-------------- styles/src/themes/common/theme.ts | 4 +- 8 files changed, 128 insertions(+), 99 deletions(-) create mode 100644 styles/src/styleTree/hoverPopover.ts diff --git a/styles/src/styleTree/chatPanel.ts b/styles/src/styleTree/chatPanel.ts index 778cd67584..693d464b39 100644 --- a/styles/src/styleTree/chatPanel.ts +++ b/styles/src/styleTree/chatPanel.ts @@ -4,9 +4,10 @@ import { backgroundColor, border, player, - shadow, + modalShadow, text, - TextColor + TextColor, + popoverShadow } from "./components"; export default function chatPanel(theme: Theme) { @@ -69,7 +70,7 @@ export default function chatPanel(theme: Theme) { cornerRadius: 6, padding: 4, border: border(theme, "primary"), - shadow: shadow(theme), + shadow: popoverShadow(theme), }, }, signInPrompt: text(theme, "sans", "secondary", { underline: true }), diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index 2a26537750..214c255e4b 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -1,4 +1,5 @@ import chroma from "chroma-js"; +import { isIPv4 } from "net"; import Theme, { BackgroundColorSet } from "../themes/common/theme"; import { fontFamilies, fontSizes, FontWeight } from "../tokens"; import { Color } from "../utils/color"; @@ -84,10 +85,18 @@ export function backgroundColor( return theme.backgroundColor[name][state || "base"].value; } -export function shadow(theme: Theme) { +export function modalShadow(theme: Theme) { return { blur: 16, - color: chroma("black").alpha(theme.shadowAlpha.value).hex(), + color: theme.shadow.value, offset: [0, 2], }; } + +export function popoverShadow(theme: Theme) { + return { + blur: 4, + color: theme.shadow.value, + offset: [1, 2], + }; +} diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 3edd205f9a..d669e4e734 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -4,6 +4,7 @@ import { border, iconColor, player, + popoverShadow, text, TextColor } from "./components"; @@ -80,6 +81,7 @@ export default function editor(theme: Theme) { cornerRadius: 8, padding: 4, border: border(theme, "secondary"), + shadow: popoverShadow(theme), item: autocompleteItem, hoveredItem: { ...autocompleteItem, diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts new file mode 100644 index 0000000000..72383abffd --- /dev/null +++ b/styles/src/styleTree/hoverPopover.ts @@ -0,0 +1,20 @@ +import Theme from "../themes/common/theme"; +import { backgroundColor, border, popoverShadow } from "./components"; + +export default function HoverPopover(theme: Theme) { + return { + background: backgroundColor(theme, 500), + cornerRadius: 8, + padding: { + left: 8, + right: 8, + top: 4, + bottom: 4 + }, + shadow: popoverShadow(theme), + border: border(theme, "primary"), + margin: { + left: -14, + }, + } +} \ No newline at end of file diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index adb53458d3..b3ff654e34 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -1,5 +1,5 @@ import Theme from "../themes/common/theme"; -import { backgroundColor, border, player, shadow, text } from "./components"; +import { backgroundColor, border, player, modalShadow, text } from "./components"; export default function picker(theme: Theme) { return { @@ -48,6 +48,6 @@ export default function picker(theme: Theme) { top: 7, }, }, - shadow: shadow(theme), + shadow: modalShadow(theme), }; } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 261656e62a..17c51bad4c 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,6 +1,6 @@ import Theme from "../themes/common/theme"; import { withOpacity } from "../utils/color"; -import { backgroundColor, border, iconColor, shadow, text } from "./components"; +import { backgroundColor, border, iconColor, modalShadow, text } from "./components"; import statusBar from "./statusBar"; export function workspaceBackground(theme: Theme) { @@ -164,7 +164,7 @@ export default function workspace(theme: Theme) { cornerRadius: 6, padding: 12, border: border(theme, "primary"), - shadow: shadow(theme), + shadow: modalShadow(theme), }, notifications: { width: 380, diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts index ded4384c02..0bdf455be3 100644 --- a/styles/src/themes/common/base16.ts +++ b/styles/src/themes/common/base16.ts @@ -14,7 +14,6 @@ export function createTheme( name: string, isLight: boolean, ramps: { [rampName: string]: Scale }, - blend?: number ): Theme { if (isLight) { for (var rampName in ramps) { @@ -25,100 +24,99 @@ export function createTheme( ramps.neutral = ramps.neutral.domain([0, 7]); } - if (blend === undefined) { - blend = isLight ? 0.12 : 0.24; - } + let blend = isLight ? 0.12 : 0.24; - function rampColor(ramp: Scale, index: number): ColorToken { + function sample(ramp: Scale, index: number): ColorToken { return color(ramp(index).hex()); } + const darkest = color(ramps.neutral(isLight ? 7 : 0).hex()); const backgroundColor = { // Title bar 100: { - base: rampColor(ramps.neutral, 1.25), - hovered: rampColor(ramps.neutral, 1.5), - active: rampColor(ramps.neutral, 1.75), + base: sample(ramps.neutral, 1.25), + hovered: sample(ramps.neutral, 1.5), + active: sample(ramps.neutral, 1.75), }, // Midground (panels, etc) 300: { - base: rampColor(ramps.neutral, 1), - hovered: rampColor(ramps.neutral, 1.25), - active: rampColor(ramps.neutral, 1.5), + base: sample(ramps.neutral, 1), + hovered: sample(ramps.neutral, 1.25), + active: sample(ramps.neutral, 1.5), }, // Editor 500: { - base: rampColor(ramps.neutral, 0), - hovered: rampColor(ramps.neutral, 0.25), - active: rampColor(ramps.neutral, 0.5), + base: sample(ramps.neutral, 0), + hovered: sample(ramps.neutral, 0.25), + active: sample(ramps.neutral, 0.5), }, on300: { - base: rampColor(ramps.neutral, 0), - hovered: rampColor(ramps.neutral, 0.25), - active: rampColor(ramps.neutral, 0.5), + base: sample(ramps.neutral, 0), + hovered: sample(ramps.neutral, 0.25), + active: sample(ramps.neutral, 0.5), }, on500: { - base: rampColor(ramps.neutral, 1.25), - hovered: rampColor(ramps.neutral, 1.5), - active: rampColor(ramps.neutral, 1.75), + base: sample(ramps.neutral, 1.25), + hovered: sample(ramps.neutral, 1.5), + active: sample(ramps.neutral, 1.75), }, ok: { - base: withOpacity(rampColor(ramps.green, 0.5), 0.15), - hovered: withOpacity(rampColor(ramps.green, 0.5), 0.2), - active: withOpacity(rampColor(ramps.green, 0.5), 0.25), + base: withOpacity(sample(ramps.green, 0.5), 0.15), + hovered: withOpacity(sample(ramps.green, 0.5), 0.2), + active: withOpacity(sample(ramps.green, 0.5), 0.25), }, error: { - base: withOpacity(rampColor(ramps.red, 0.5), 0.15), - hovered: withOpacity(rampColor(ramps.red, 0.5), 0.2), - active: withOpacity(rampColor(ramps.red, 0.5), 0.25), + base: withOpacity(sample(ramps.red, 0.5), 0.15), + hovered: withOpacity(sample(ramps.red, 0.5), 0.2), + active: withOpacity(sample(ramps.red, 0.5), 0.25), }, warning: { - base: withOpacity(rampColor(ramps.yellow, 0.5), 0.15), - hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.2), - active: withOpacity(rampColor(ramps.yellow, 0.5), 0.25), + base: withOpacity(sample(ramps.yellow, 0.5), 0.15), + hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2), + active: withOpacity(sample(ramps.yellow, 0.5), 0.25), }, info: { - base: withOpacity(rampColor(ramps.blue, 0.5), 0.15), - hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.2), - active: withOpacity(rampColor(ramps.blue, 0.5), 0.25), + base: withOpacity(sample(ramps.blue, 0.5), 0.15), + hovered: withOpacity(sample(ramps.blue, 0.5), 0.2), + active: withOpacity(sample(ramps.blue, 0.5), 0.25), }, }; const borderColor = { - primary: rampColor(ramps.neutral, isLight ? 1.5 : 0), - secondary: rampColor(ramps.neutral, isLight ? 1.25 : 1), - muted: rampColor(ramps.neutral, isLight ? 1 : 3), - active: rampColor(ramps.neutral, isLight ? 4 : 3), - onMedia: withOpacity(rampColor(ramps.neutral, 0), 0.1), - ok: withOpacity(rampColor(ramps.green, 0.5), 0.15), - error: withOpacity(rampColor(ramps.red, 0.5), 0.15), - warning: withOpacity(rampColor(ramps.yellow, 0.5), 0.15), - info: withOpacity(rampColor(ramps.blue, 0.5), 0.15), + primary: sample(ramps.neutral, isLight ? 1.5 : 0), + secondary: sample(ramps.neutral, isLight ? 1.25 : 1), + muted: sample(ramps.neutral, isLight ? 1 : 3), + active: sample(ramps.neutral, isLight ? 4 : 3), + onMedia: withOpacity(darkest, 0.1), + ok: withOpacity(sample(ramps.green, 0.5), 0.15), + error: withOpacity(sample(ramps.red, 0.5), 0.15), + warning: withOpacity(sample(ramps.yellow, 0.5), 0.15), + info: withOpacity(sample(ramps.blue, 0.5), 0.15), }; const textColor = { - primary: rampColor(ramps.neutral, 6), - secondary: rampColor(ramps.neutral, 5), - muted: rampColor(ramps.neutral, 5), - placeholder: rampColor(ramps.neutral, 4), - active: rampColor(ramps.neutral, 7), - feature: rampColor(ramps.blue, 0.5), - ok: rampColor(ramps.green, 0.5), - error: rampColor(ramps.red, 0.5), - warning: rampColor(ramps.yellow, 0.5), - info: rampColor(ramps.blue, 0.5), - onMedia: rampColor(ramps.neutral, isLight ? 0 : 7), + primary: sample(ramps.neutral, 6), + secondary: sample(ramps.neutral, 5), + muted: sample(ramps.neutral, 5), + placeholder: sample(ramps.neutral, 4), + active: sample(ramps.neutral, 7), + feature: sample(ramps.blue, 0.5), + ok: sample(ramps.green, 0.5), + error: sample(ramps.red, 0.5), + warning: sample(ramps.yellow, 0.5), + info: sample(ramps.blue, 0.5), + onMedia: darkest, }; const player = { - 1: buildPlayer(rampColor(ramps.blue, 0.5)), - 2: buildPlayer(rampColor(ramps.green, 0.5)), - 3: buildPlayer(rampColor(ramps.magenta, 0.5)), - 4: buildPlayer(rampColor(ramps.orange, 0.5)), - 5: buildPlayer(rampColor(ramps.violet, 0.5)), - 6: buildPlayer(rampColor(ramps.cyan, 0.5)), - 7: buildPlayer(rampColor(ramps.red, 0.5)), - 8: buildPlayer(rampColor(ramps.yellow, 0.5)), + 1: buildPlayer(sample(ramps.blue, 0.5)), + 2: buildPlayer(sample(ramps.green, 0.5)), + 3: buildPlayer(sample(ramps.magenta, 0.5)), + 4: buildPlayer(sample(ramps.orange, 0.5)), + 5: buildPlayer(sample(ramps.violet, 0.5)), + 6: buildPlayer(sample(ramps.cyan, 0.5)), + 7: buildPlayer(sample(ramps.red, 0.5)), + 8: buildPlayer(sample(ramps.yellow, 0.5)), }; const editor = { @@ -126,16 +124,16 @@ export function createTheme( indent_guide: borderColor.muted, indent_guide_active: borderColor.secondary, line: { - active: rampColor(ramps.neutral, 1), - highlighted: rampColor(ramps.neutral, 1.25), // TODO: Where is this used? + active: sample(ramps.neutral, 1), + highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used? }, highlight: { selection: player[1].selectionColor, - occurrence: withOpacity(rampColor(ramps.neutral, 3.5), blend), - activeOccurrence: withOpacity(rampColor(ramps.neutral, 3.5), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751 + occurrence: withOpacity(sample(ramps.neutral, 3.5), blend), + activeOccurrence: withOpacity(sample(ramps.neutral, 3.5), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751 matchingBracket: backgroundColor[500].active, // TODO: Not hooked up - match: rampColor(ramps.violet, 0.15), - activeMatch: withOpacity(rampColor(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751 + match: sample(ramps.violet, 0.15), + activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751 related: backgroundColor[500].hovered, }, gutter: { @@ -146,59 +144,59 @@ export function createTheme( const syntax: Syntax = { primary: { - color: rampColor(ramps.neutral, 7), + color: sample(ramps.neutral, 7), weight: fontWeights.normal, }, comment: { - color: rampColor(ramps.neutral, 5), + color: sample(ramps.neutral, 5), weight: fontWeights.normal, }, punctuation: { - color: rampColor(ramps.neutral, 6), + color: sample(ramps.neutral, 6), weight: fontWeights.normal, }, constant: { - color: rampColor(ramps.neutral, 4), + color: sample(ramps.neutral, 4), weight: fontWeights.normal, }, keyword: { - color: rampColor(ramps.blue, 0.5), + color: sample(ramps.blue, 0.5), weight: fontWeights.normal, }, function: { - color: rampColor(ramps.yellow, 0.5), + color: sample(ramps.yellow, 0.5), weight: fontWeights.normal, }, type: { - color: rampColor(ramps.cyan, 0.5), + color: sample(ramps.cyan, 0.5), weight: fontWeights.normal, }, variant: { - color: rampColor(ramps.blue, 0.5), + color: sample(ramps.blue, 0.5), weight: fontWeights.normal, }, property: { - color: rampColor(ramps.blue, 0.5), + color: sample(ramps.blue, 0.5), weight: fontWeights.normal, }, enum: { - color: rampColor(ramps.orange, 0.5), + color: sample(ramps.orange, 0.5), weight: fontWeights.normal, }, operator: { - color: rampColor(ramps.orange, 0.5), + color: sample(ramps.orange, 0.5), weight: fontWeights.normal, }, string: { - color: rampColor(ramps.orange, 0.5), + color: sample(ramps.orange, 0.5), weight: fontWeights.normal, }, number: { - color: rampColor(ramps.green, 0.5), + color: sample(ramps.green, 0.5), weight: fontWeights.normal, }, boolean: { - color: rampColor(ramps.green, 0.5), + color: sample(ramps.green, 0.5), weight: fontWeights.normal, }, predictive: { @@ -206,7 +204,7 @@ export function createTheme( weight: fontWeights.normal, }, title: { - color: rampColor(ramps.yellow, 0.5), + color: sample(ramps.yellow, 0.5), weight: fontWeights.bold, }, emphasis: { @@ -218,21 +216,20 @@ export function createTheme( weight: fontWeights.bold, }, linkUri: { - color: rampColor(ramps.green, 0.5), + color: sample(ramps.green, 0.5), weight: fontWeights.normal, underline: true, }, linkText: { - color: rampColor(ramps.orange, 0.5), + color: sample(ramps.orange, 0.5), weight: fontWeights.normal, italic: true, }, }; - const shadowAlpha: NumberToken = { - value: blend, - type: "number", - }; + const shadow = withOpacity( + color(ramps.neutral(isLight ? 7 : 0).darken().hex()), + blend); return { name, @@ -243,6 +240,6 @@ export function createTheme( editor, syntax, player, - shadowAlpha, + shadow, }; } diff --git a/styles/src/themes/common/theme.ts b/styles/src/themes/common/theme.ts index 5f32844cc7..fe47ce8153 100644 --- a/styles/src/themes/common/theme.ts +++ b/styles/src/themes/common/theme.ts @@ -153,6 +153,6 @@ export default interface Theme { 6: Player; 7: Player; 8: Player; - }; - shadowAlpha: NumberToken; + }, + shadow: ColorToken; }