Update inputs, tabs, pickers, autocomplete

This commit is contained in:
Nate Butler 2022-04-19 02:34:45 -04:00
parent d99c74d874
commit 408f8d4297
11 changed files with 294 additions and 214 deletions

View file

@ -1,16 +1,16 @@
{
"selector": {
"background": "#1c1c1c",
"corner_radius": 6,
"corner_radius": 8,
"padding": 8,
"item": {
"padding": {
"bottom": 4,
"left": 16,
"right": 16,
"left": 12,
"right": 12,
"top": 4
},
"corner_radius": 6,
"corner_radius": 8,
"text": {
"family": "Zed Sans",
"color": "#9c9c9c",
@ -26,11 +26,11 @@
"active_item": {
"padding": {
"bottom": 4,
"left": 16,
"right": 16,
"left": 12,
"right": 12,
"top": 4
},
"corner_radius": 6,
"corner_radius": 8,
"text": {
"family": "Zed Sans",
"color": "#f1f1f1",
@ -56,14 +56,14 @@
},
"padding": {
"bottom": 4,
"left": 16,
"right": 16,
"left": 12,
"right": 12,
"top": 8
}
},
"input_editor": {
"background": "#000000",
"corner_radius": 6,
"corner_radius": 8,
"placeholder_text": {
"family": "Zed Sans",
"color": "#474747",
@ -114,9 +114,9 @@
"icon_conflict": "#f6a724",
"icon_dirty": "#135acd",
"icon_width": 8,
"spacing": 10,
"spacing": 8,
"text": {
"family": "Zed Mono",
"family": "Zed Sans",
"color": "#9c9c9c",
"size": 14
},
@ -128,8 +128,8 @@
"overlay": true
},
"padding": {
"left": 12,
"right": 12
"left": 8,
"right": 8
}
},
"active_tab": {
@ -140,9 +140,9 @@
"icon_conflict": "#f6a724",
"icon_dirty": "#135acd",
"icon_width": 8,
"spacing": 10,
"spacing": 8,
"text": {
"family": "Zed Mono",
"family": "Zed Sans",
"color": "#ffffff",
"size": 14
},
@ -154,8 +154,8 @@
"overlay": true
},
"padding": {
"left": 12,
"right": 12
"left": 8,
"right": 8
}
},
"left_sidebar": {
@ -272,18 +272,36 @@
"family": "Zed Sans",
"color": "#9c9c9c",
"size": 12,
"underline": true,
"border": {
"color": "#070707",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"right": 8
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#ffffff",
"size": 12,
"underline": true,
"border": {
"color": "#070707",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"right": 8
"left": 6,
"right": 6
}
},
"offline_icon": {
@ -383,8 +401,8 @@
],
"autocomplete": {
"background": "#000000",
"corner_radius": 6,
"padding": 6,
"corner_radius": 8,
"padding": 4,
"border": {
"color": "#232323",
"width": 1
@ -713,21 +731,23 @@
"key": {
"text": {
"family": "Zed Mono",
"color": "#f1f1f1",
"color": "#ffffff",
"size": 12
},
"corner_radius": 3,
"background": "#2472f2",
"corner_radius": 4,
"background": "#0e0e0e",
"border": {
"color": "#2472f2",
"color": "#232323",
"width": 1
},
"padding": {
"left": 3,
"right": 3
"top": 3,
"bottom": 3,
"left": 8,
"right": 8
},
"margin": {
"left": 3
"left": 2
}
}
},
@ -1127,53 +1147,53 @@
},
"search": {
"match_background": "#3f15a380",
"tab_icon_spacing": 4,
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
"color": "#ffffff",
"size": 14,
"background": "#2b2b2b",
"corner_radius": 6,
"background": "#232323",
"corner_radius": 4,
"border": {
"color": "#070707",
"color": "#404040",
"width": 1
},
"margin": {
"left": 1,
"right": 1
"left": 2,
"right": 2
},
"padding": {
"bottom": 1,
"left": 6,
"right": 6,
"top": 1
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
"color": "#ffffff",
"size": 14,
"background": "#2b2b2b",
"corner_radius": 6,
"background": "#232323",
"corner_radius": 4,
"border": {
"color": "#070707",
"color": "#404040",
"width": 1
},
"margin": {
"left": 1,
"right": 1
"left": 2,
"right": 2
},
"padding": {
"bottom": 1,
"left": 6,
"right": 6,
"top": 1
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"editor": {
"background": "#000000",
"corner_radius": 6,
"corner_radius": 8,
"min_width": 200,
"max_width": 500,
"placeholder_text": {
@ -1187,7 +1207,7 @@
},
"text": {
"family": "Zed Mono",
"color": "#f1f1f1",
"color": "#ffffff",
"size": 14
},
"border": {
@ -1195,39 +1215,39 @@
"width": 1
},
"margin": {
"right": 5
"right": 6
},
"padding": {
"top": 3,
"bottom": 3,
"left": 14,
"right": 14
"left": 12,
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
"color": "#ffffff",
"size": 14,
"background": "#2b2b2b",
"corner_radius": 6,
"background": "#0e0e0e",
"corner_radius": 4,
"border": {
"color": "#070707",
"color": "#404040",
"width": 1
},
"margin": {
"left": 1,
"right": 1
"left": 2,
"right": 2
},
"padding": {
"bottom": 1,
"left": 6,
"right": 6,
"top": 1
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#000000",
"corner_radius": 6,
"corner_radius": 8,
"min_width": 200,
"max_width": 500,
"placeholder_text": {
@ -1241,7 +1261,7 @@
},
"text": {
"family": "Zed Mono",
"color": "#f1f1f1",
"color": "#ffffff",
"size": 14
},
"border": {
@ -1249,13 +1269,13 @@
"width": 1
},
"margin": {
"right": 5
"right": 6
},
"padding": {
"top": 3,
"bottom": 3,
"left": 14,
"right": 14
"left": 12,
"right": 8
}
},
"match_index": {
@ -1268,27 +1288,27 @@
"family": "Zed Mono",
"color": "#9c9c9c",
"size": 14,
"background": "#1c1c1c",
"corner_radius": 6,
"background": "#0e0e0e",
"corner_radius": 4,
"border": {
"color": "#070707",
"color": "#232323",
"width": 1
},
"margin": {
"left": 1,
"right": 1
"left": 2,
"right": 2
},
"padding": {
"bottom": 1,
"left": 6,
"right": 6,
"top": 1
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 2,
"right": 2
"left": 4,
"right": 4
}
},
"results_status": {
@ -1299,7 +1319,7 @@
},
"breadcrumbs": {
"family": "Zed Sans",
"color": "#f1f1f1",
"color": "#9c9c9c",
"size": 14,
"padding": {
"left": 6

View file

@ -1,16 +1,16 @@
{
"selector": {
"background": "#f8f8f8",
"corner_radius": 6,
"corner_radius": 8,
"padding": 8,
"item": {
"padding": {
"bottom": 4,
"left": 16,
"right": 16,
"left": 12,
"right": 12,
"top": 4
},
"corner_radius": 6,
"corner_radius": 8,
"text": {
"family": "Zed Sans",
"color": "#474747",
@ -26,11 +26,11 @@
"active_item": {
"padding": {
"bottom": 4,
"left": 16,
"right": 16,
"left": 12,
"right": 12,
"top": 4
},
"corner_radius": 6,
"corner_radius": 8,
"text": {
"family": "Zed Sans",
"color": "#2b2b2b",
@ -42,7 +42,7 @@
"weight": "bold",
"size": 14
},
"background": "#dcdcdc"
"background": "#e3e3e3"
},
"border": {
"color": "#d5d5d5",
@ -56,14 +56,14 @@
},
"padding": {
"bottom": 4,
"left": 16,
"right": 16,
"left": 12,
"right": 12,
"top": 8
}
},
"input_editor": {
"background": "#ffffff",
"corner_radius": 6,
"corner_radius": 8,
"placeholder_text": {
"family": "Zed Sans",
"color": "#808080",
@ -114,9 +114,9 @@
"icon_conflict": "#f7bf17",
"icon_dirty": "#135acd",
"icon_width": 8,
"spacing": 10,
"spacing": 8,
"text": {
"family": "Zed Mono",
"family": "Zed Sans",
"color": "#474747",
"size": 14
},
@ -128,8 +128,8 @@
"overlay": true
},
"padding": {
"left": 12,
"right": 12
"left": 8,
"right": 8
}
},
"active_tab": {
@ -140,9 +140,9 @@
"icon_conflict": "#f7bf17",
"icon_dirty": "#135acd",
"icon_width": 8,
"spacing": 10,
"spacing": 8,
"text": {
"family": "Zed Mono",
"family": "Zed Sans",
"color": "#000000",
"size": 14
},
@ -154,8 +154,8 @@
"overlay": true
},
"padding": {
"left": 12,
"right": 12
"left": 8,
"right": 8
}
},
"left_sidebar": {
@ -272,18 +272,36 @@
"family": "Zed Sans",
"color": "#474747",
"size": 12,
"underline": true,
"border": {
"color": "#d5d5d5",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"right": 8
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#000000",
"size": 12,
"underline": true,
"border": {
"color": "#d5d5d5",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"right": 8
"left": 6,
"right": 6
}
},
"offline_icon": {
@ -383,8 +401,8 @@
],
"autocomplete": {
"background": "#ffffff",
"corner_radius": 6,
"padding": 6,
"corner_radius": 8,
"padding": 4,
"border": {
"color": "#d5d5d5",
"width": 1
@ -713,21 +731,23 @@
"key": {
"text": {
"family": "Zed Mono",
"color": "#2b2b2b",
"color": "#000000",
"size": 12
},
"corner_radius": 3,
"background": "#c5dafc",
"corner_radius": 4,
"background": "#f1f1f1",
"border": {
"color": "#9ec1fa",
"color": "#d5d5d5",
"width": 1
},
"padding": {
"left": 3,
"right": 3
"top": 3,
"bottom": 3,
"left": 8,
"right": 8
},
"margin": {
"left": 3
"left": 2
}
}
},
@ -1127,53 +1147,53 @@
},
"search": {
"match_background": "#fce9b7",
"tab_icon_spacing": 4,
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"active_hovered_option_button": {
"family": "Zed Mono",
"color": "#474747",
"color": "#000000",
"size": 14,
"background": "#eaeaea",
"corner_radius": 6,
"background": "#ffffff",
"corner_radius": 4,
"border": {
"color": "#d5d5d5",
"color": "#e3e3e3",
"width": 1
},
"margin": {
"left": 1,
"right": 1
"left": 2,
"right": 2
},
"padding": {
"bottom": 1,
"left": 6,
"right": 6,
"top": 1
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#474747",
"color": "#000000",
"size": 14,
"background": "#eaeaea",
"corner_radius": 6,
"background": "#ffffff",
"corner_radius": 4,
"border": {
"color": "#d5d5d5",
"color": "#e3e3e3",
"width": 1
},
"margin": {
"left": 1,
"right": 1
"left": 2,
"right": 2
},
"padding": {
"bottom": 1,
"left": 6,
"right": 6,
"top": 1
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"editor": {
"background": "#ffffff",
"corner_radius": 6,
"corner_radius": 8,
"min_width": 200,
"max_width": 500,
"placeholder_text": {
@ -1187,7 +1207,7 @@
},
"text": {
"family": "Zed Mono",
"color": "#2b2b2b",
"color": "#000000",
"size": 14
},
"border": {
@ -1195,39 +1215,39 @@
"width": 1
},
"margin": {
"right": 5
"right": 6
},
"padding": {
"top": 3,
"bottom": 3,
"left": 14,
"right": 14
"left": 12,
"right": 8
}
},
"hovered_option_button": {
"family": "Zed Mono",
"color": "#474747",
"color": "#000000",
"size": 14,
"background": "#eaeaea",
"corner_radius": 6,
"background": "#f1f1f1",
"corner_radius": 4,
"border": {
"color": "#d5d5d5",
"color": "#e3e3e3",
"width": 1
},
"margin": {
"left": 1,
"right": 1
"left": 2,
"right": 2
},
"padding": {
"bottom": 1,
"left": 6,
"right": 6,
"top": 1
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": {
"background": "#ffffff",
"corner_radius": 6,
"corner_radius": 8,
"min_width": 200,
"max_width": 500,
"placeholder_text": {
@ -1241,7 +1261,7 @@
},
"text": {
"family": "Zed Mono",
"color": "#2b2b2b",
"color": "#000000",
"size": 14
},
"border": {
@ -1249,13 +1269,13 @@
"width": 1
},
"margin": {
"right": 5
"right": 6
},
"padding": {
"top": 3,
"bottom": 3,
"left": 14,
"right": 14
"left": 12,
"right": 8
}
},
"match_index": {
@ -1268,27 +1288,27 @@
"family": "Zed Mono",
"color": "#474747",
"size": 14,
"background": "#f8f8f8",
"corner_radius": 6,
"background": "#f1f1f1",
"corner_radius": 4,
"border": {
"color": "#d5d5d5",
"width": 1
},
"margin": {
"left": 1,
"right": 1
"left": 2,
"right": 2
},
"padding": {
"bottom": 1,
"left": 6,
"right": 6,
"top": 1
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": {
"padding": {
"left": 2,
"right": 2
"left": 4,
"right": 4
}
},
"results_status": {
@ -1299,7 +1319,7 @@
},
"breadcrumbs": {
"family": "Zed Sans",
"color": "#2b2b2b",
"color": "#474747",
"size": 14,
"padding": {
"left": 6

View file

@ -36,7 +36,7 @@ export default function app(theme: Theme): Object {
contactsPanel: contactsPanel(theme),
search: search(theme),
breadcrumbs: {
...text(theme, "sans", "primary"),
...text(theme, "sans", "secondary"),
padding: {
left: 6,
},

View file

@ -1,20 +1,23 @@
import Theme from "../themes/theme";
import { text, backgroundColor, border } from "./components";
import { colors } from "../tokens";
import { text, backgroundColor, border, borderColor } from "./components";
export default function commandPalette(theme: Theme) {
return {
keystrokeSpacing: 8,
key: {
text: text(theme, "mono", "primary", { size: "xs" }),
cornerRadius: 3,
background: backgroundColor(theme, "info", "base"),
border: border(theme, "info"),
text: text(theme, "mono", "active", { size: "xs" }),
cornerRadius: 4,
background: backgroundColor(theme, "on300"),
border: border(theme, "secondary"),
padding: {
left: 3,
right: 3,
top: 3,
bottom: 3,
left: 8,
right: 8,
},
margin: {
left: 3
left: 2
},
}
}

View file

@ -67,8 +67,8 @@ export default function editor(theme: Theme) {
],
autocomplete: {
background: backgroundColor(theme, 500),
cornerRadius: 6,
padding: 6,
cornerRadius: 8,
padding: 4,
border: border(theme, "secondary"),
item: autocompleteItem,
hoveredItem: {

View file

@ -4,57 +4,62 @@ import { backgroundColor, border, player, text } from "./components";
export default function search(theme: Theme) {
const optionButton = {
...text(theme, "mono", "secondary"),
background: backgroundColor(theme, 300),
cornerRadius: 6,
border: border(theme, "primary"),
background: backgroundColor(theme, "on500"),
cornerRadius: 4,
border: border(theme, "secondary"),
margin: {
left: 1,
right: 1,
left: 2,
right: 2,
},
padding: {
bottom: 1,
left: 6,
right: 6,
top: 1,
bottom: 3,
left: 8,
right: 8,
top: 3,
},
};
const editor = {
background: backgroundColor(theme, 500),
cornerRadius: 6,
cornerRadius: 8,
minWidth: 200,
maxWidth: 500,
placeholderText: text(theme, "mono", "placeholder"),
selection: player(theme, 1).selection,
text: text(theme, "mono", "primary"),
text: text(theme, "mono", "active"),
border: border(theme, "secondary"),
margin: {
right: 5,
right: 6,
},
padding: {
top: 3,
bottom: 3,
left: 14,
right: 14,
left: 12,
right: 8,
},
};
return {
matchBackground: theme.editor.highlight.match.value,
tabIconSpacing: 4,
tabIconSpacing: 8,
tabIconWidth: 14,
activeHoveredOptionButton: {
...optionButton,
background: backgroundColor(theme, 100),
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "active"),
border: border(theme, "muted"),
},
activeOptionButton: {
...optionButton,
background: backgroundColor(theme, 100),
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "active"),
border: border(theme, "muted"),
},
editor,
hoveredOptionButton: {
...optionButton,
background: backgroundColor(theme, 100),
...text(theme, "mono", "active"),
border: border(theme, "muted"),
},
invalidEditor: {
...editor,
@ -67,8 +72,8 @@ export default function search(theme: Theme) {
optionButton,
optionButtonGroup: {
padding: {
left: 2,
right: 2,
left: 4,
right: 4,
},
},
resultsStatus: {

View file

@ -5,11 +5,11 @@ export default function selectorModal(theme: Theme): Object {
const item = {
padding: {
bottom: 4,
left: 16,
right: 16,
left: 12,
right: 12,
top: 4,
},
cornerRadius: 6,
cornerRadius: 8,
text: text(theme, "sans", "secondary"),
highlightText: text(theme, "sans", "feature", { weight: "bold" }),
};
@ -22,7 +22,7 @@ export default function selectorModal(theme: Theme): Object {
return {
background: backgroundColor(theme, 300),
cornerRadius: 6,
cornerRadius: 8,
padding: 8,
item,
activeItem,
@ -31,14 +31,14 @@ export default function selectorModal(theme: Theme): Object {
text: text(theme, "sans", "placeholder"),
padding: {
bottom: 4,
left: 16,
right: 16,
left: 12,
right: 12,
top: 8,
},
},
inputEditor: {
background: backgroundColor(theme, 500),
cornerRadius: 6,
cornerRadius: 8,
placeholderText: text(theme, "sans", "placeholder"),
selection: player(theme, 1).selection,
text: text(theme, "mono", "primary"),

View file

@ -4,9 +4,15 @@ import { backgroundColor, border, iconColor, text } from "./components";
export default function workspace(theme: Theme) {
const signInPrompt = {
...text(theme, "sans", "secondary", { size: "xs" }),
underline: true,
border: border(theme, "primary"),
cornerRadius: 6,
margin: {
top: 1,
right: 6,
},
padding: {
right: 8,
left: 6,
right: 6,
},
};
@ -18,23 +24,23 @@ export default function workspace(theme: Theme) {
iconConflict: iconColor(theme, "warning"),
iconDirty: iconColor(theme, "info"),
iconWidth: 8,
spacing: 10,
text: text(theme, "mono", "secondary", { size: "sm" }),
spacing: 8,
text: text(theme, "sans", "secondary", { size: "sm" }),
border: border(theme, "primary", {
left: true,
bottom: true,
overlay: true,
}),
padding: {
left: 12,
right: 12,
left: 8,
right: 8,
},
};
const activeTab = {
...tab,
background: backgroundColor(theme, 500),
text: text(theme, "mono", "active", { size: "sm" }),
text: text(theme, "sans", "active", { size: "sm" }),
border: {
...tab.border,
bottom: false,

View file

@ -21,6 +21,18 @@ const backgroundColor = {
active: withOpacity(colors.neutral[0], 0.12),
focused: colors.neutral[825],
},
on300: {
base: colors.neutral[850],
hovered: colors.neutral[875],
active: colors.neutral[900],
focused: colors.neutral[875],
},
on500: {
base: colors.neutral[850],
hovered: colors.neutral[800],
active: colors.neutral[775],
focused: colors.neutral[800],
},
ok: {
base: colors.green[600],
hovered: colors.green[600],

View file

@ -12,7 +12,7 @@ const backgroundColor = {
300: {
base: colors.neutral[25],
hovered: colors.neutral[75],
active: colors.neutral[125],
active: colors.neutral[100],
focused: colors.neutral[75],
},
500: {
@ -21,6 +21,18 @@ const backgroundColor = {
active: withOpacity(colors.neutral[900], 0.06),
focused: colors.neutral[50],
},
on300: {
base: colors.neutral[50],
hovered: colors.neutral[100],
active: colors.neutral[150],
focused: colors.neutral[100],
},
on500: {
base: colors.neutral[50],
hovered: colors.neutral[25],
active: colors.neutral[0],
focused: colors.neutral[25],
},
ok: {
base: colors.green[100],
hovered: colors.green[100],

View file

@ -63,6 +63,8 @@ export default interface Theme {
100: BackgroundColorSet;
300: BackgroundColorSet;
500: BackgroundColorSet;
on300: BackgroundColorSet;
on500: BackgroundColorSet;
ok: BackgroundColorSet;
error: BackgroundColorSet;
warning: BackgroundColorSet;