Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update inputs, tabs, pickers, autocomplete

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

188
assets/themes/dark.json
View file

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

188
assets/themes/light.json
View file

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

2
styles/src/styleTree/app.ts
View file

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

19
styles/src/styleTree/commandPalette.ts
View file

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

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

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

45
styles/src/styleTree/search.ts
View file

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

14
styles/src/styleTree/selectorModal.ts
View file

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

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

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

12
styles/src/themes/dark.ts
View file

@ -21,6 +21,18 @@ const backgroundColor = {
active: withOpacity(colors.neutral[0], 0.12), active: withOpacity(colors.neutral[0], 0.12),
focused: colors.neutral[825], 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: { ok: {
base: colors.green[600], base: colors.green[600],
hovered: colors.green[600], hovered: colors.green[600],

14
styles/src/themes/light.ts
View file

@ -12,7 +12,7 @@ const backgroundColor = {
300: { 300: {
base: colors.neutral[25], base: colors.neutral[25],
hovered: colors.neutral[75], hovered: colors.neutral[75],
active: colors.neutral[125], active: colors.neutral[100],
focused: colors.neutral[75], focused: colors.neutral[75],
}, },
500: { 500: {
@ -21,6 +21,18 @@ const backgroundColor = {
active: withOpacity(colors.neutral[900], 0.06), active: withOpacity(colors.neutral[900], 0.06),
focused: colors.neutral[50], 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: { ok: {
base: colors.green[100], base: colors.green[100],
hovered: colors.green[100], hovered: colors.green[100],

2
styles/src/themes/theme.ts
View file

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