mirror of
https://github.com/zed-industries/zed.git
synced 2024-10-26 08:31:04 +00:00
Merge pull request #2276 from zed-industries/improve-picker-state-contrast
Improve picker state contrast
This commit is contained in:
commit
6d0f8290a4
5 changed files with 115 additions and 103 deletions
|
@ -1,4 +1,5 @@
|
|||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function picker(colorScheme: ColorScheme) {
|
||||
|
@ -53,14 +54,17 @@ export default function picker(colorScheme: ColorScheme) {
|
|||
text: text(layer, "sans", "variant"),
|
||||
highlightText: text(layer, "sans", "accent", { weight: "bold" }),
|
||||
active: {
|
||||
background: background(layer, "base", "active"),
|
||||
background: withOpacity(
|
||||
background(layer, "base", "active"),
|
||||
0.5
|
||||
),
|
||||
text: text(layer, "sans", "base", "active"),
|
||||
highlightText: text(layer, "sans", "accent", {
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
hover: {
|
||||
background: background(layer, "hovered"),
|
||||
background: withOpacity(background(layer, "hovered"), 0.5),
|
||||
},
|
||||
},
|
||||
inputEditor,
|
||||
|
|
|
@ -3,80 +3,80 @@ import { withOpacity } from "../utils/color"
|
|||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function projectPanel(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.middle
|
||||
let layer = colorScheme.middle
|
||||
|
||||
let baseEntry = {
|
||||
height: 24,
|
||||
iconColor: foreground(layer, "variant"),
|
||||
iconSize: 8,
|
||||
iconSpacing: 8,
|
||||
}
|
||||
let baseEntry = {
|
||||
height: 24,
|
||||
iconColor: foreground(layer, "variant"),
|
||||
iconSize: 8,
|
||||
iconSpacing: 8,
|
||||
}
|
||||
|
||||
let entry = {
|
||||
...baseEntry,
|
||||
text: text(layer, "mono", "variant", { size: "sm" }),
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "active", { size: "sm" }),
|
||||
},
|
||||
activeHover: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "active", { size: "sm" }),
|
||||
},
|
||||
}
|
||||
let entry = {
|
||||
...baseEntry,
|
||||
text: text(layer, "mono", "variant", { size: "sm" }),
|
||||
hover: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
active: {
|
||||
background: colorScheme.isLight ? withOpacity(background(layer, "active"), 0.5) : background(layer, "active"),
|
||||
text: text(layer, "mono", "active", { size: "sm" }),
|
||||
},
|
||||
activeHover: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "active", { size: "sm" }),
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
openProjectButton: {
|
||||
background: background(layer),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
hover: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
background: background(layer),
|
||||
padding: { left: 12, right: 12, top: 6, bottom: 6 },
|
||||
indentWidth: 8,
|
||||
entry,
|
||||
draggedEntry: {
|
||||
...baseEntry,
|
||||
text: text(layer, "mono", "on", { size: "sm" }),
|
||||
background: withOpacity(background(layer, "on"), 0.9),
|
||||
border: border(layer),
|
||||
},
|
||||
ignoredEntry: {
|
||||
...entry,
|
||||
text: text(layer, "mono", "disabled"),
|
||||
},
|
||||
cutEntry: {
|
||||
...entry,
|
||||
text: text(layer, "mono", "disabled"),
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "disabled", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
filenameEditor: {
|
||||
background: background(layer, "on"),
|
||||
text: text(layer, "mono", "on", { size: "sm" }),
|
||||
selection: colorScheme.players[0],
|
||||
},
|
||||
}
|
||||
return {
|
||||
openProjectButton: {
|
||||
background: background(layer),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
hover: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
background: background(layer),
|
||||
padding: { left: 12, right: 12, top: 6, bottom: 6 },
|
||||
indentWidth: 8,
|
||||
entry,
|
||||
draggedEntry: {
|
||||
...baseEntry,
|
||||
text: text(layer, "mono", "on", { size: "sm" }),
|
||||
background: withOpacity(background(layer, "on"), 0.9),
|
||||
border: border(layer),
|
||||
},
|
||||
ignoredEntry: {
|
||||
...entry,
|
||||
text: text(layer, "mono", "disabled"),
|
||||
},
|
||||
cutEntry: {
|
||||
...entry,
|
||||
text: text(layer, "mono", "disabled"),
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "disabled", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
filenameEditor: {
|
||||
background: background(layer, "on"),
|
||||
text: text(layer, "mono", "on", { size: "sm" }),
|
||||
selection: colorScheme.players[0],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,8 +29,8 @@ export default function statusBar(colorScheme: ColorScheme) {
|
|||
padding: { left: 6, right: 6 },
|
||||
...text(layer, "sans", "variant"),
|
||||
hover: {
|
||||
...text(layer, "sans", "on")
|
||||
}
|
||||
...text(layer, "sans", "on"),
|
||||
},
|
||||
},
|
||||
autoUpdateProgressMessage: text(layer, "sans", "variant"),
|
||||
autoUpdateDoneMessage: text(layer, "sans", "variant"),
|
||||
|
|
|
@ -1,11 +1,15 @@
|
|||
|
||||
import { ColorScheme } from "../themes/common/colorScheme";
|
||||
import { withOpacity } from "../utils/color";
|
||||
import { border, background, foreground, text, TextProperties } from "./components";
|
||||
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import {
|
||||
border,
|
||||
background,
|
||||
foreground,
|
||||
text,
|
||||
TextProperties,
|
||||
} from "./components"
|
||||
|
||||
export default function welcome(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest;
|
||||
let layer = colorScheme.highest
|
||||
|
||||
let checkboxBase = {
|
||||
cornerRadius: 4,
|
||||
|
@ -20,9 +24,9 @@ export default function welcome(colorScheme: ColorScheme) {
|
|||
margin: {
|
||||
right: 8,
|
||||
top: 5,
|
||||
bottom: 5
|
||||
bottom: 5,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
let interactive_text_size: TextProperties = { size: "sm" }
|
||||
|
||||
|
@ -34,7 +38,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
|||
dimensions: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
}
|
||||
},
|
||||
},
|
||||
logoSubheading: {
|
||||
...text(layer, "sans", "variant", { size: "md" }),
|
||||
|
@ -46,13 +50,13 @@ export default function welcome(colorScheme: ColorScheme) {
|
|||
buttonGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 16
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
headingGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 12
|
||||
bottom: 12,
|
||||
},
|
||||
},
|
||||
checkboxGroup: {
|
||||
|
@ -62,7 +66,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
|||
padding: {
|
||||
left: 12,
|
||||
top: 2,
|
||||
bottom: 2
|
||||
bottom: 2,
|
||||
},
|
||||
},
|
||||
button: {
|
||||
|
@ -71,7 +75,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
|||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4
|
||||
bottom: 4,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
|
@ -90,8 +94,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
|||
...text(layer, "sans", "variant", { size: "2xs" }),
|
||||
padding: {
|
||||
top: -4,
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
checkboxContainer: {
|
||||
margin: {
|
||||
|
@ -99,7 +102,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
|||
},
|
||||
padding: {
|
||||
bottom: 8,
|
||||
}
|
||||
},
|
||||
},
|
||||
checkbox: {
|
||||
label: {
|
||||
|
@ -112,28 +115,28 @@ export default function welcome(colorScheme: ColorScheme) {
|
|||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
}
|
||||
},
|
||||
},
|
||||
default: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "default"),
|
||||
border: border(layer, "active")
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
checked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
hoveredAndChecked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
}
|
||||
}
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
@ -55,7 +55,12 @@ export default function workspace(colorScheme: ColorScheme) {
|
|||
},
|
||||
},
|
||||
logoShadow: {
|
||||
color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6),
|
||||
color: withOpacity(
|
||||
colorScheme.isLight
|
||||
? "#FFFFFF"
|
||||
: colorScheme.lowest.base.default.background,
|
||||
colorScheme.isLight ? 1 : 0.6
|
||||
),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 256,
|
||||
|
@ -74,12 +79,12 @@ export default function workspace(colorScheme: ColorScheme) {
|
|||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3
|
||||
bottom: 3,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
hover: {
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
}
|
||||
},
|
||||
},
|
||||
keyboardHintWidth: 320,
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue