mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-10-26 08:31:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request #2276 from zed-industries/improve-picker-state-contrast

Browse source 
Improve picker state contrast
This commit is contained in:
Nate Butler 2023-03-13 13:48:04 -04:00 committed by GitHub
commit 6d0f8290a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 115 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
styles/src/styleTree/picker.ts
View file

@ -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,

146
styles/src/styleTree/projectPanel.ts
View file

@ -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],
},
}
}

4
styles/src/styleTree/statusBar.ts
View file

@ -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"),

49
styles/src/styleTree/welcome.ts
View file

@ -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"),
},
},
}
}

11
styles/src/styleTree/workspace.ts
View file

@ -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,
},