zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-08 07:35:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #999 from zed-industries/update-theme-system

Browse Source 
Rework color schemes
This commit is contained in:
Keith Simmons 2022-05-16 15:28:18 -07:00 committed by GitHub
commit 25427f0ff8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 1031 additions and 5803 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
assets/themes/cave-dark.json
View File

@ -23,7 +23,7 @@
"size": 14
},
"active": {
"background": "#5852605c",
"background": "#3f3b45",
"text": {
"family": "Zed Sans",
"color": "#e2dfe7",
@ -31,7 +31,7 @@
}
},
"hover": {
"background": "#5852603d"
"background": "#332f38"
}
},
"border": {
@ -215,7 +215,7 @@
"size": 14
},
"icon_color": "#e2dfe7",
"background": "#5852603d"
"background": "#332f38"
}
},
"diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7,
"right": 7
},
"background": "#5852603d"
"background": "#332f38"
},
"container_warning": {
"corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#8b8792",
"hover": {
"icon_color": "#e2dfe7",
"background": "#5852603d"
"background": "#332f38"
},
"active": {
"icon_color": "#efecf4",
"background": "#5852605c"
"background": "#3f3b45"
}
},
"badge": {
@ -361,7 +361,7 @@
"avatar_width": 18,
"avatar_margin": 8,
"height": 33,
"background": "#26232a",
"background": "#332f38",
"padding": {
"left": 80,
"right": 6
@ -426,15 +426,15 @@
},
"color": "#8b8792",
"hover": {
"background": "#5852603d",
"background": "#3f3b45",
"color": "#8b8792"
},
"active": {
"background": "#5852605c",
"background": "#4c4653",
"color": "#efecf4"
},
"active_hover": {
"background": "#5852603d",
"background": "#3f3b45",
"color": "#efecf4"
}
},
@ -515,16 +515,16 @@
"editor": {
"text_color": "#efecf4",
"background": "#19171c",
"active_line_background": "#efecf412",
"active_line_background": "#26232a",
"code_actions_indicator": "#8b8792",
"diff_background_deleted": "#be467826",
"diff_background_inserted": "#2a929226",
"document_highlight_read_background": "#efecf41f",
"document_highlight_write_background": "#efecf43d",
"document_highlight_read_background": "#5852603d",
"document_highlight_write_background": "#5852607a",
"error_color": "#be4678",
"gutter_background": "#19171c",
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#efecf41f",
"highlighted_line_background": "#332f38",
"line_number": "#7e7887",
"line_number_active": "#efecf4",
"rename_fade": 0.6,
@ -588,7 +588,7 @@
"right": 6,
"top": 2
},
"background": "#26232a3d"
"background": "#1c1a20"
},
"margin": {
"left": -14
@ -606,7 +606,7 @@
"right": 6,
"top": 2
},
"background": "#26232a5c"
"background": "#201d23"
}
},
"diagnostic_header": {
@ -642,7 +642,7 @@
}
},
"diagnostic_path_header": {
"background": "#efecf412",
"background": "#26232a",
"text_scale_factor": 0.857,
"filename": {
"family": "Zed Mono",
@ -852,7 +852,7 @@
"weight": "normal"
},
"punctuation": {
"color": "#8b8792",
"color": "#e2dfe7",
"weight": "normal"
},
"constant": {
@ -989,7 +989,7 @@
"size": 14
},
"hover": {
"background": "#5852603d",
"background": "#332f38",
"text": {
"family": "Zed Mono",
"color": "#e2dfe7",
@ -997,7 +997,7 @@
}
},
"active": {
"background": "#5852605c",
"background": "#3f3b45",
"text": {
"family": "Zed Mono",
"color": "#e2dfe7",
@ -1005,7 +1005,7 @@
}
},
"active_hover": {
"background": "#5852603d",
"background": "#332f38",
"text": {
"family": "Zed Mono",
"color": "#efecf4",
@ -1014,7 +1014,7 @@
}
},
"filename_editor": {
"background": "#26232a5c",
"background": "#201d23",
"text": {
"family": "Zed Mono",
"color": "#e2dfe7",
@ -1098,7 +1098,7 @@
"right": 8
}
},
"background": "#5852603d",
"background": "#332f38",
"corner_radius": 6
},
"active_item": {
@ -1133,7 +1133,7 @@
"right": 8
}
},
"background": "#5852603d",
"background": "#332f38",
"corner_radius": 6
},
"menu": {
@ -1307,7 +1307,7 @@
"family": "Zed Mono",
"color": "#e2dfe7",
"size": 14,
"background": "#5852605c"
"background": "#4c4653"
}
},
"contact_row": {
@ -1316,7 +1316,7 @@
"right": 12
},
"active": {
"background": "#5852605c"
"background": "#4c4653"
}
},
"tree_branch": {
@ -1343,17 +1343,17 @@
},
"contact_button_spacing": 8,
"contact_button": {
"background": "#26232a",
"background": "#332f38",
"color": "#e2dfe7",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#5852603d"
"background": "#3f3b45"
}
},
"disabled_contact_button": {
"background": "#26232a",
"background": "#332f38",
"color": "#8b8792",
"icon_width": 8,
"button_width": 16,
@ -1387,10 +1387,10 @@
},
"background": "#26232a",
"hover": {
"background": "#5852603d"
"background": "#332f38"
},
"active": {
"background": "#5852605c"
"background": "#3f3b45"
}
},
"unshared_project_row": {
@ -1421,10 +1421,10 @@
},
"background": "#26232a",
"hover": {
"background": "#5852603d"
"background": "#332f38"
},
"active": {
"background": "#5852605c"
"background": "#3f3b45"
}
}
},
@ -1452,7 +1452,7 @@
"size": 14
},
"active": {
"background": "#5852605c",
"background": "#3f3b45",
"text": {
"family": "Zed Sans",
"color": "#e2dfe7",
@ -1460,7 +1460,7 @@
}
},
"hover": {
"background": "#5852603d"
"background": "#332f38"
}
},
"border": {
@ -1527,17 +1527,17 @@
}
},
"contact_button": {
"background": "#26232a",
"background": "#332f38",
"color": "#e2dfe7",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#5852603d"
"background": "#3f3b45"
}
},
"disabled_contact_button": {
"background": "#26232a",
"background": "#332f38",
"color": "#8b8792",
"icon_width": 8,
"button_width": 16,
@ -1545,14 +1545,14 @@
}
},
"search": {
"match_background": "#955ae77a",
"match_background": "#3d1576",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"option_button": {
"family": "Zed Mono",
"color": "#8b8792",
"size": 14,
"background": "#26232a",
"background": "#332f38",
"corner_radius": 6,
"border": {
"color": "#26232a",
@ -1571,7 +1571,7 @@
"family": "Zed Mono",
"color": "#efecf4",
"size": 14,
"background": "#5852607a",
"background": "#4c4653",
"border": {
"color": "#655f6d",
"width": 1
@ -1581,7 +1581,7 @@
"family": "Zed Mono",
"color": "#efecf4",
"size": 14,
"background": "#5852603d",
"background": "#3f3b45",
"border": {
"color": "#655f6d",
"width": 1
@ -1717,7 +1717,7 @@
"left": 6
},
"hover": {
"background": "#26232a3d"
"background": "#1c1a20"
}
},
"dismiss_button": {

154
assets/themes/cave-light.json
View File

@ -23,7 +23,7 @@
"size": 14
},
"active": {
"background": "#8b87922e",
"background": "#b7b3bd",
"text": {
"family": "Zed Sans",
"color": "#26232a",
@ -31,11 +31,11 @@
}
},
"hover": {
"background": "#8b87921f"
"background": "#ccc9d2"
}
},
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1
},
"empty": {
@ -69,7 +69,7 @@
"size": 14
},
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"padding": {
@ -107,7 +107,7 @@
"size": 14
},
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"left": true,
"bottom": true,
@ -133,7 +133,7 @@
"size": 14
},
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"left": true,
"bottom": false,
@ -152,13 +152,13 @@
"cursor": "Arrow"
},
"sidebar_resize_handle": {
"background": "#efecf4",
"background": "#8b8792",
"padding": {
"left": 1
}
},
"pane_divider": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"status_bar": {
@ -171,7 +171,7 @@
"right": 6
},
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true,
"overlay": true
@ -215,7 +215,7 @@
"size": 14
},
"icon_color": "#26232a",
"background": "#8b87921f"
"background": "#ccc9d2"
}
},
"diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7,
"right": 7
},
"background": "#8b87921f"
"background": "#ccc9d2"
},
"container_warning": {
"corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#585260",
"hover": {
"icon_color": "#26232a",
"background": "#8b87921f"
"background": "#ccc9d2"
},
"active": {
"icon_color": "#19171c",
"background": "#8b87922e"
"background": "#b7b3bd"
}
},
"badge": {
@ -361,7 +361,7 @@
"avatar_width": 18,
"avatar_margin": 8,
"height": 33,
"background": "#e2dfe7",
"background": "#ccc9d2",
"padding": {
"left": 80,
"right": 6
@ -383,14 +383,14 @@
"width": 12
},
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"bottom": true,
"overlay": true
},
"sign_in_prompt": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1
},
"corner_radius": 6,
@ -426,15 +426,15 @@
},
"color": "#585260",
"hover": {
"background": "#8b87921f",
"background": "#b7b3bd",
"color": "#585260"
},
"active": {
"background": "#8b87922e",
"background": "#a19da7",
"color": "#19171c"
},
"active_hover": {
"background": "#8b87921f",
"background": "#b7b3bd",
"color": "#19171c"
}
},
@ -458,7 +458,7 @@
"height": 34,
"background": "#efecf4",
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1,
"bottom": true
},
@ -492,7 +492,7 @@
"corner_radius": 6,
"padding": 12,
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1
},
"shadow": {
@ -515,16 +515,16 @@
"editor": {
"text_color": "#19171c",
"background": "#efecf4",
"active_line_background": "#19171c12",
"active_line_background": "#e2dfe7",
"code_actions_indicator": "#585260",
"diff_background_deleted": "#be467826",
"diff_background_inserted": "#2a929226",
"document_highlight_read_background": "#19171c0f",
"document_highlight_write_background": "#19171c1f",
"document_highlight_read_background": "#8b87921f",
"document_highlight_write_background": "#8b87923d",
"error_color": "#be4678",
"gutter_background": "#efecf4",
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#19171c1f",
"highlighted_line_background": "#ccc9d2",
"line_number": "#655f6d",
"line_number_active": "#19171c",
"rename_fade": 0.6,
@ -568,7 +568,7 @@
"corner_radius": 8,
"padding": 4,
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"item": {
@ -588,7 +588,7 @@
"right": 6,
"top": 2
},
"background": "#e2dfe71f"
"background": "#ece9f1"
},
"margin": {
"left": -14
@ -606,7 +606,7 @@
"right": 6,
"top": 2
},
"background": "#e2dfe72e"
"background": "#e9e6ee"
}
},
"diagnostic_header": {
@ -614,7 +614,7 @@
"icon_width_factor": 1.5,
"text_scale_factor": 0.857,
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1,
"bottom": true,
"top": true
@ -642,7 +642,7 @@
}
},
"diagnostic_path_header": {
"background": "#19171c12",
"background": "#e2dfe7",
"text_scale_factor": 0.857,
"filename": {
"family": "Zed Mono",
@ -662,7 +662,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true
}
@ -685,7 +685,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true
}
@ -708,7 +708,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true
}
@ -731,7 +731,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true
}
@ -754,7 +754,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true
}
@ -777,7 +777,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true
}
@ -800,7 +800,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true
}
@ -823,7 +823,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1,
"top": true
}
@ -852,7 +852,7 @@
"weight": "normal"
},
"punctuation": {
"color": "#585260",
"color": "#26232a",
"weight": "normal"
},
"constant": {
@ -949,7 +949,7 @@
"corner_radius": 4,
"background": "#efecf4",
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"padding": {
@ -989,7 +989,7 @@
"size": 14
},
"hover": {
"background": "#8b87921f",
"background": "#ccc9d2",
"text": {
"family": "Zed Mono",
"color": "#26232a",
@ -997,7 +997,7 @@
}
},
"active": {
"background": "#8b87922e",
"background": "#b7b3bd",
"text": {
"family": "Zed Mono",
"color": "#26232a",
@ -1005,7 +1005,7 @@
}
},
"active_hover": {
"background": "#8b87921f",
"background": "#ccc9d2",
"text": {
"family": "Zed Mono",
"color": "#19171c",
@ -1014,7 +1014,7 @@
}
},
"filename_editor": {
"background": "#e2dfe72e",
"background": "#e9e6ee",
"text": {
"family": "Zed Mono",
"color": "#26232a",
@ -1098,7 +1098,7 @@
"right": 8
}
},
"background": "#8b87921f",
"background": "#ccc9d2",
"corner_radius": 6
},
"active_item": {
@ -1133,7 +1133,7 @@
"right": 8
}
},
"background": "#8b87921f",
"background": "#ccc9d2",
"corner_radius": 6
},
"menu": {
@ -1141,7 +1141,7 @@
"corner_radius": 6,
"padding": 4,
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1
},
"shadow": {
@ -1232,7 +1232,7 @@
"selection": "#576ddb3d"
},
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"padding": {
@ -1266,7 +1266,7 @@
"selection": "#576ddb3d"
},
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"padding": {
@ -1307,7 +1307,7 @@
"family": "Zed Mono",
"color": "#26232a",
"size": 14,
"background": "#8b87922e"
"background": "#a19da7"
}
},
"contact_row": {
@ -1316,17 +1316,17 @@
"right": 12
},
"active": {
"background": "#8b87922e"
"background": "#a19da7"
}
},
"tree_branch": {
"color": "#7e7887",
"color": "#655f6d",
"width": 1,
"hover": {
"color": "#7e7887"
"color": "#655f6d"
},
"active": {
"color": "#7e7887"
"color": "#655f6d"
}
},
"contact_avatar": {
@ -1343,17 +1343,17 @@
},
"contact_button_spacing": 8,
"contact_button": {
"background": "#e2dfe7",
"background": "#ccc9d2",
"color": "#26232a",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#8b87921f"
"background": "#b7b3bd"
}
},
"disabled_contact_button": {
"background": "#e2dfe7",
"background": "#ccc9d2",
"color": "#585260",
"icon_width": 8,
"button_width": 16,
@ -1387,10 +1387,10 @@
},
"background": "#e2dfe7",
"hover": {
"background": "#8b87921f"
"background": "#ccc9d2"
},
"active": {
"background": "#8b87922e"
"background": "#b7b3bd"
}
},
"unshared_project_row": {
@ -1421,10 +1421,10 @@
},
"background": "#e2dfe7",
"hover": {
"background": "#8b87921f"
"background": "#ccc9d2"
},
"active": {
"background": "#8b87922e"
"background": "#b7b3bd"
}
}
},
@ -1452,7 +1452,7 @@
"size": 14
},
"active": {
"background": "#8b87922e",
"background": "#b7b3bd",
"text": {
"family": "Zed Sans",
"color": "#26232a",
@ -1460,11 +1460,11 @@
}
},
"hover": {
"background": "#8b87921f"
"background": "#ccc9d2"
}
},
"border": {
"color": "#efecf4",
"color": "#8b8792",
"width": 1
},
"empty": {
@ -1498,7 +1498,7 @@
"size": 14
},
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"padding": {
@ -1527,17 +1527,17 @@
}
},
"contact_button": {
"background": "#e2dfe7",
"background": "#ccc9d2",
"color": "#26232a",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#8b87921f"
"background": "#b7b3bd"
}
},
"disabled_contact_button": {
"background": "#e2dfe7",
"background": "#ccc9d2",
"color": "#585260",
"icon_width": 8,
"button_width": 16,
@ -1545,17 +1545,17 @@
}
},
"search": {
"match_background": "#955ae73d",
"match_background": "#d5bdfa",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"option_button": {
"family": "Zed Mono",
"color": "#585260",
"size": 14,
"background": "#e2dfe7",
"background": "#ccc9d2",
"corner_radius": 6,
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"margin": {
@ -1571,9 +1571,9 @@
"family": "Zed Mono",
"color": "#19171c",
"size": 14,
"background": "#8b87923d",
"background": "#a19da7",
"border": {
"color": "#7e7887",
"color": "#655f6d",
"width": 1
}
},
@ -1581,9 +1581,9 @@
"family": "Zed Mono",
"color": "#19171c",
"size": 14,
"background": "#8b87921f",
"background": "#b7b3bd",
"border": {
"color": "#7e7887",
"color": "#655f6d",
"width": 1
}
}
@ -1608,7 +1608,7 @@
"size": 14
},
"border": {
"color": "#e2dfe7",
"color": "#8b8792",
"width": 1
},
"margin": {
@ -1717,7 +1717,7 @@
"left": 6
},
"hover": {
"background": "#e2dfe71f"
"background": "#ece9f1"
}
},
"dismiss_button": {

1734
assets/themes/dark.json
View File

File diff suppressed because it is too large Load Diff

1734
assets/themes/light.json
View File

File diff suppressed because it is too large Load Diff

86
assets/themes/solarized-dark.json
View File

@ -23,7 +23,7 @@
"size": 14
},
"active": {
"background": "#586e755c",
"background": "#30525c",
"text": {
"family": "Zed Sans",
"color": "#eee8d5",
@ -31,7 +31,7 @@
}
},
"hover": {
"background": "#586e753d"
"background": "#1b444f"
}
},
"border": {
@ -215,7 +215,7 @@
"size": 14
},
"icon_color": "#eee8d5",
"background": "#586e753d"
"background": "#1b444f"
}
},
"diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7,
"right": 7
},
"background": "#586e753d"
"background": "#1b444f"
},
"container_warning": {
"corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#93a1a1",
"hover": {
"icon_color": "#eee8d5",
"background": "#586e753d"
"background": "#1b444f"
},
"active": {
"icon_color": "#fdf6e3",
"background": "#586e755c"
"background": "#30525c"
}
},
"badge": {
@ -361,7 +361,7 @@
"avatar_width": 18,
"avatar_margin": 8,
"height": 33,
"background": "#073642",
"background": "#1b444f",
"padding": {
"left": 80,
"right": 6
@ -426,15 +426,15 @@
},
"color": "#93a1a1",
"hover": {
"background": "#586e753d",
"background": "#30525c",
"color": "#93a1a1"
},
"active": {
"background": "#586e755c",
"background": "#446068",
"color": "#fdf6e3"
},
"active_hover": {
"background": "#586e753d",
"background": "#30525c",
"color": "#fdf6e3"
}
},
@ -515,16 +515,16 @@
"editor": {
"text_color": "#fdf6e3",
"background": "#002b36",
"active_line_background": "#fdf6e312",
"active_line_background": "#073642",
"code_actions_indicator": "#93a1a1",
"diff_background_deleted": "#dc322f26",
"diff_background_inserted": "#85990026",
"document_highlight_read_background": "#fdf6e31f",
"document_highlight_write_background": "#fdf6e33d",
"document_highlight_read_background": "#586e753d",
"document_highlight_write_background": "#586e757a",
"error_color": "#dc322f",
"gutter_background": "#002b36",
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#fdf6e31f",
"highlighted_line_background": "#1b444f",
"line_number": "#839496",
"line_number_active": "#fdf6e3",
"rename_fade": 0.6,
@ -588,7 +588,7 @@
"right": 6,
"top": 2
},
"background": "#0736423d"
"background": "#022e39"
},
"margin": {
"left": -14
@ -606,7 +606,7 @@
"right": 6,
"top": 2
},
"background": "#0736425c"
"background": "#04313c"
}
},
"diagnostic_header": {
@ -642,7 +642,7 @@
}
},
"diagnostic_path_header": {
"background": "#fdf6e312",
"background": "#073642",
"text_scale_factor": 0.857,
"filename": {
"family": "Zed Mono",
@ -852,7 +852,7 @@
"weight": "normal"
},
"punctuation": {
"color": "#93a1a1",
"color": "#eee8d5",
"weight": "normal"
},
"constant": {
@ -989,7 +989,7 @@
"size": 14
},
"hover": {
"background": "#586e753d",
"background": "#1b444f",
"text": {
"family": "Zed Mono",
"color": "#eee8d5",
@ -997,7 +997,7 @@
}
},
"active": {
"background": "#586e755c",
"background": "#30525c",
"text": {
"family": "Zed Mono",
"color": "#eee8d5",
@ -1005,7 +1005,7 @@
}
},
"active_hover": {
"background": "#586e753d",
"background": "#1b444f",
"text": {
"family": "Zed Mono",
"color": "#fdf6e3",
@ -1014,7 +1014,7 @@
}
},
"filename_editor": {
"background": "#0736425c",
"background": "#04313c",
"text": {
"family": "Zed Mono",
"color": "#eee8d5",
@ -1098,7 +1098,7 @@
"right": 8
}
},
"background": "#586e753d",
"background": "#1b444f",
"corner_radius": 6
},
"active_item": {
@ -1133,7 +1133,7 @@
"right": 8
}
},
"background": "#586e753d",
"background": "#1b444f",
"corner_radius": 6
},
"menu": {
@ -1307,7 +1307,7 @@
"family": "Zed Mono",
"color": "#eee8d5",
"size": 14,
"background": "#586e755c"
"background": "#446068"
}
},
"contact_row": {
@ -1316,7 +1316,7 @@
"right": 12
},
"active": {
"background": "#586e755c"
"background": "#446068"
}
},
"tree_branch": {
@ -1343,17 +1343,17 @@
},
"contact_button_spacing": 8,
"contact_button": {
"background": "#073642",
"background": "#1b444f",
"color": "#eee8d5",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#586e753d"
"background": "#30525c"
}
},
"disabled_contact_button": {
"background": "#073642",
"background": "#1b444f",
"color": "#93a1a1",
"icon_width": 8,
"button_width": 16,
@ -1387,10 +1387,10 @@
},
"background": "#073642",
"hover": {
"background": "#586e753d"
"background": "#1b444f"
},
"active": {
"background": "#586e755c"
"background": "#30525c"
}
},
"unshared_project_row": {
@ -1421,10 +1421,10 @@
},
"background": "#073642",
"hover": {
"background": "#586e753d"
"background": "#1b444f"
},
"active": {
"background": "#586e755c"
"background": "#30525c"
}
}
},
@ -1452,7 +1452,7 @@
"size": 14
},
"active": {
"background": "#586e755c",
"background": "#30525c",
"text": {
"family": "Zed Sans",
"color": "#eee8d5",
@ -1460,7 +1460,7 @@
}
},
"hover": {
"background": "#586e753d"
"background": "#1b444f"
}
},
"border": {
@ -1527,17 +1527,17 @@
}
},
"contact_button": {
"background": "#073642",
"background": "#1b444f",
"color": "#eee8d5",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#586e753d"
"background": "#30525c"
}
},
"disabled_contact_button": {
"background": "#073642",
"background": "#1b444f",
"color": "#93a1a1",
"icon_width": 8,
"button_width": 16,
@ -1545,14 +1545,14 @@
}
},
"search": {
"match_background": "#6c71c47a",
"match_background": "#1b1f6b",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"option_button": {
"family": "Zed Mono",
"color": "#93a1a1",
"size": 14,
"background": "#073642",
"background": "#1b444f",
"corner_radius": 6,
"border": {
"color": "#073642",
@ -1571,7 +1571,7 @@
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#586e757a",
"background": "#446068",
"border": {
"color": "#657b83",
"width": 1
@ -1581,7 +1581,7 @@
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#586e753d",
"background": "#30525c",
"border": {
"color": "#657b83",
"width": 1
@ -1717,7 +1717,7 @@
"left": 6
},
"hover": {
"background": "#0736423d"
"background": "#022e39"
}
},
"dismiss_button": {

154
assets/themes/solarized-light.json
View File

@ -23,7 +23,7 @@
"size": 14
},
"active": {
"background": "#93a1a12e",
"background": "#c1c5bb",
"text": {
"family": "Zed Sans",
"color": "#073642",
@ -31,11 +31,11 @@
}
},
"hover": {
"background": "#93a1a11f"
"background": "#d7d6c8"
}
},
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1
},
"empty": {
@ -69,7 +69,7 @@
"size": 14
},
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"padding": {
@ -107,7 +107,7 @@
"size": 14
},
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"left": true,
"bottom": true,
@ -133,7 +133,7 @@
"size": 14
},
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"left": true,
"bottom": false,
@ -152,13 +152,13 @@
"cursor": "Arrow"
},
"sidebar_resize_handle": {
"background": "#fdf6e3",
"background": "#93a1a1",
"padding": {
"left": 1
}
},
"pane_divider": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"status_bar": {
@ -171,7 +171,7 @@
"right": 6
},
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true,
"overlay": true
@ -215,7 +215,7 @@
"size": 14
},
"icon_color": "#073642",
"background": "#93a1a11f"
"background": "#d7d6c8"
}
},
"diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7,
"right": 7
},
"background": "#93a1a11f"
"background": "#d7d6c8"
},
"container_warning": {
"corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#586e75",
"hover": {
"icon_color": "#073642",
"background": "#93a1a11f"
"background": "#d7d6c8"
},
"active": {
"icon_color": "#002b36",
"background": "#93a1a12e"
"background": "#c1c5bb"
}
},
"badge": {
@ -361,7 +361,7 @@
"avatar_width": 18,
"avatar_margin": 8,
"height": 33,
"background": "#eee8d5",
"background": "#d7d6c8",
"padding": {
"left": 80,
"right": 6
@ -383,14 +383,14 @@
"width": 12
},
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"bottom": true,
"overlay": true
},
"sign_in_prompt": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1
},
"corner_radius": 6,
@ -426,15 +426,15 @@
},
"color": "#586e75",
"hover": {
"background": "#93a1a11f",
"background": "#c1c5bb",
"color": "#586e75"
},
"active": {
"background": "#93a1a12e",
"background": "#aab3ae",
"color": "#002b36"
},
"active_hover": {
"background": "#93a1a11f",
"background": "#c1c5bb",
"color": "#002b36"
}
},
@ -458,7 +458,7 @@
"height": 34,
"background": "#fdf6e3",
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1,
"bottom": true
},
@ -492,7 +492,7 @@
"corner_radius": 6,
"padding": 12,
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1
},
"shadow": {
@ -515,16 +515,16 @@
"editor": {
"text_color": "#002b36",
"background": "#fdf6e3",
"active_line_background": "#002b3612",
"active_line_background": "#eee8d5",
"code_actions_indicator": "#586e75",
"diff_background_deleted": "#dc322f26",
"diff_background_inserted": "#85990026",
"document_highlight_read_background": "#002b360f",
"document_highlight_write_background": "#002b361f",
"document_highlight_read_background": "#93a1a11f",
"document_highlight_write_background": "#93a1a13d",
"error_color": "#dc322f",
"gutter_background": "#fdf6e3",
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#002b361f",
"highlighted_line_background": "#d7d6c8",
"line_number": "#657b83",
"line_number_active": "#002b36",
"rename_fade": 0.6,
@ -568,7 +568,7 @@
"corner_radius": 8,
"padding": 4,
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"item": {
@ -588,7 +588,7 @@
"right": 6,
"top": 2
},
"background": "#eee8d51f"
"background": "#f9f3e0"
},
"margin": {
"left": -14
@ -606,7 +606,7 @@
"right": 6,
"top": 2
},
"background": "#eee8d52e"
"background": "#f6efdc"
}
},
"diagnostic_header": {
@ -614,7 +614,7 @@
"icon_width_factor": 1.5,
"text_scale_factor": 0.857,
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1,
"bottom": true,
"top": true
@ -642,7 +642,7 @@
}
},
"diagnostic_path_header": {
"background": "#002b3612",
"background": "#eee8d5",
"text_scale_factor": 0.857,
"filename": {
"family": "Zed Mono",
@ -662,7 +662,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true
}
@ -685,7 +685,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true
}
@ -708,7 +708,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true
}
@ -731,7 +731,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true
}
@ -754,7 +754,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true
}
@ -777,7 +777,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true
}
@ -800,7 +800,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true
}
@ -823,7 +823,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1,
"top": true
}
@ -852,7 +852,7 @@
"weight": "normal"
},
"punctuation": {
"color": "#586e75",
"color": "#073642",
"weight": "normal"
},
"constant": {
@ -949,7 +949,7 @@
"corner_radius": 4,
"background": "#fdf6e3",
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"padding": {
@ -989,7 +989,7 @@
"size": 14
},
"hover": {
"background": "#93a1a11f",
"background": "#d7d6c8",
"text": {
"family": "Zed Mono",
"color": "#073642",
@ -997,7 +997,7 @@
}
},
"active": {
"background": "#93a1a12e",
"background": "#c1c5bb",
"text": {
"family": "Zed Mono",
"color": "#073642",
@ -1005,7 +1005,7 @@
}
},
"active_hover": {
"background": "#93a1a11f",
"background": "#d7d6c8",
"text": {
"family": "Zed Mono",
"color": "#002b36",
@ -1014,7 +1014,7 @@
}
},
"filename_editor": {
"background": "#eee8d52e",
"background": "#f6efdc",
"text": {
"family": "Zed Mono",
"color": "#073642",
@ -1098,7 +1098,7 @@
"right": 8
}
},
"background": "#93a1a11f",
"background": "#d7d6c8",
"corner_radius": 6
},
"active_item": {
@ -1133,7 +1133,7 @@
"right": 8
}
},
"background": "#93a1a11f",
"background": "#d7d6c8",
"corner_radius": 6
},
"menu": {
@ -1141,7 +1141,7 @@
"corner_radius": 6,
"padding": 4,
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1
},
"shadow": {
@ -1232,7 +1232,7 @@
"selection": "#268bd23d"
},
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"padding": {
@ -1266,7 +1266,7 @@
"selection": "#268bd23d"
},
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"padding": {
@ -1307,7 +1307,7 @@
"family": "Zed Mono",
"color": "#073642",
"size": 14,
"background": "#93a1a12e"
"background": "#aab3ae"
}
},
"contact_row": {
@ -1316,17 +1316,17 @@
"right": 12
},
"active": {
"background": "#93a1a12e"
"background": "#aab3ae"
}
},
"tree_branch": {
"color": "#839496",
"color": "#657b83",
"width": 1,
"hover": {
"color": "#839496"
"color": "#657b83"
},
"active": {
"color": "#839496"
"color": "#657b83"
}
},
"contact_avatar": {
@ -1343,17 +1343,17 @@
},
"contact_button_spacing": 8,
"contact_button": {
"background": "#eee8d5",
"background": "#d7d6c8",
"color": "#073642",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#93a1a11f"
"background": "#c1c5bb"
}
},
"disabled_contact_button": {
"background": "#eee8d5",
"background": "#d7d6c8",
"color": "#586e75",
"icon_width": 8,
"button_width": 16,
@ -1387,10 +1387,10 @@
},
"background": "#eee8d5",
"hover": {
"background": "#93a1a11f"
"background": "#d7d6c8"
},
"active": {
"background": "#93a1a12e"
"background": "#c1c5bb"
}
},
"unshared_project_row": {
@ -1421,10 +1421,10 @@
},
"background": "#eee8d5",
"hover": {
"background": "#93a1a11f"
"background": "#d7d6c8"
},
"active": {
"background": "#93a1a12e"
"background": "#c1c5bb"
}
}
},
@ -1452,7 +1452,7 @@
"size": 14
},
"active": {
"background": "#93a1a12e",
"background": "#c1c5bb",
"text": {
"family": "Zed Sans",
"color": "#073642",
@ -1460,11 +1460,11 @@
}
},
"hover": {
"background": "#93a1a11f"
"background": "#d7d6c8"
}
},
"border": {
"color": "#fdf6e3",
"color": "#93a1a1",
"width": 1
},
"empty": {
@ -1498,7 +1498,7 @@
"size": 14
},
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"padding": {
@ -1527,17 +1527,17 @@
}
},
"contact_button": {
"background": "#eee8d5",
"background": "#d7d6c8",
"color": "#073642",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#93a1a11f"
"background": "#c1c5bb"
}
},
"disabled_contact_button": {
"background": "#eee8d5",
"background": "#d7d6c8",
"color": "#586e75",
"icon_width": 8,
"button_width": 16,
@ -1545,17 +1545,17 @@
}
},
"search": {
"match_background": "#6c71c43d",
"match_background": "#bcc0f6",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"option_button": {
"family": "Zed Mono",
"color": "#586e75",
"size": 14,
"background": "#eee8d5",
"background": "#d7d6c8",
"corner_radius": 6,
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"margin": {
@ -1571,9 +1571,9 @@
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#93a1a13d",
"background": "#aab3ae",
"border": {
"color": "#839496",
"color": "#657b83",
"width": 1
}
},
@ -1581,9 +1581,9 @@
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#93a1a11f",
"background": "#c1c5bb",
"border": {
"color": "#839496",
"color": "#657b83",
"width": 1
}
}
@ -1608,7 +1608,7 @@
"size": 14
},
"border": {
"color": "#eee8d5",
"color": "#93a1a1",
"width": 1
},
"margin": {
@ -1717,7 +1717,7 @@
"left": 6
},
"hover": {
"background": "#eee8d51f"
"background": "#f9f3e0"
}
},
"dismiss_button": {

86
assets/themes/sulphurpool-dark.json
View File

@ -23,7 +23,7 @@
"size": 14
},
"active": {
"background": "#5e66875c",
"background": "#444c6f",
"text": {
"family": "Zed Sans",
"color": "#dfe2f1",
@ -31,7 +31,7 @@
}
},
"hover": {
"background": "#5e66873d"
"background": "#363f62"
}
},
"border": {
@ -215,7 +215,7 @@
"size": 14
},
"icon_color": "#dfe2f1",
"background": "#5e66873d"
"background": "#363f62"
}
},
"diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7,
"right": 7
},
"background": "#5e66873d"
"background": "#363f62"
},
"container_warning": {
"corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#979db4",
"hover": {
"icon_color": "#dfe2f1",
"background": "#5e66873d"
"background": "#363f62"
},
"active": {
"icon_color": "#f5f7ff",
"background": "#5e66875c"
"background": "#444c6f"
}
},
"badge": {
@ -361,7 +361,7 @@
"avatar_width": 18,
"avatar_margin": 8,
"height": 33,
"background": "#293256",
"background": "#363f62",
"padding": {
"left": 80,
"right": 6
@ -426,15 +426,15 @@
},
"color": "#979db4",
"hover": {
"background": "#5e66873d",
"background": "#444c6f",
"color": "#979db4"
},
"active": {
"background": "#5e66875c",
"background": "#51597b",
"color": "#f5f7ff"
},
"active_hover": {
"background": "#5e66873d",
"background": "#444c6f",
"color": "#f5f7ff"
}
},
@ -515,16 +515,16 @@
"editor": {
"text_color": "#f5f7ff",
"background": "#202746",
"active_line_background": "#f5f7ff12",
"active_line_background": "#293256",
"code_actions_indicator": "#979db4",
"diff_background_deleted": "#c9492226",
"diff_background_inserted": "#ac973926",
"document_highlight_read_background": "#f5f7ff1f",
"document_highlight_write_background": "#f5f7ff3d",
"document_highlight_read_background": "#5e66873d",
"document_highlight_write_background": "#5e66877a",
"error_color": "#c94922",
"gutter_background": "#202746",
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#f5f7ff1f",
"highlighted_line_background": "#363f62",
"line_number": "#898ea4",
"line_number_active": "#f5f7ff",
"rename_fade": 0.6,
@ -588,7 +588,7 @@
"right": 6,
"top": 2
},
"background": "#2932563d"
"background": "#222a4a"
},
"margin": {
"left": -14
@ -606,7 +606,7 @@
"right": 6,
"top": 2
},
"background": "#2932565c"
"background": "#252d4e"
}
},
"diagnostic_header": {
@ -642,7 +642,7 @@
}
},
"diagnostic_path_header": {
"background": "#f5f7ff12",
"background": "#293256",
"text_scale_factor": 0.857,
"filename": {
"family": "Zed Mono",
@ -852,7 +852,7 @@
"weight": "normal"
},
"punctuation": {
"color": "#979db4",
"color": "#dfe2f1",
"weight": "normal"
},
"constant": {
@ -989,7 +989,7 @@
"size": 14
},
"hover": {
"background": "#5e66873d",
"background": "#363f62",
"text": {
"family": "Zed Mono",
"color": "#dfe2f1",
@ -997,7 +997,7 @@
}
},
"active": {
"background": "#5e66875c",
"background": "#444c6f",
"text": {
"family": "Zed Mono",
"color": "#dfe2f1",
@ -1005,7 +1005,7 @@
}
},
"active_hover": {
"background": "#5e66873d",
"background": "#363f62",
"text": {
"family": "Zed Mono",
"color": "#f5f7ff",
@ -1014,7 +1014,7 @@
}
},
"filename_editor": {
"background": "#2932565c",
"background": "#252d4e",
"text": {
"family": "Zed Mono",
"color": "#dfe2f1",
@ -1098,7 +1098,7 @@
"right": 8
}
},
"background": "#5e66873d",
"background": "#363f62",
"corner_radius": 6
},
"active_item": {
@ -1133,7 +1133,7 @@
"right": 8
}
},
"background": "#5e66873d",
"background": "#363f62",
"corner_radius": 6
},
"menu": {
@ -1307,7 +1307,7 @@
"family": "Zed Mono",
"color": "#dfe2f1",
"size": 14,
"background": "#5e66875c"
"background": "#51597b"
}
},
"contact_row": {
@ -1316,7 +1316,7 @@
"right": 12
},
"active": {
"background": "#5e66875c"
"background": "#51597b"
}
},
"tree_branch": {
@ -1343,17 +1343,17 @@
},
"contact_button_spacing": 8,
"contact_button": {
"background": "#293256",
"background": "#363f62",
"color": "#dfe2f1",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#5e66873d"
"background": "#444c6f"
}
},
"disabled_contact_button": {
"background": "#293256",
"background": "#363f62",
"color": "#979db4",
"icon_width": 8,
"button_width": 16,
@ -1387,10 +1387,10 @@
},
"background": "#293256",
"hover": {
"background": "#5e66873d"
"background": "#363f62"
},
"active": {
"background": "#5e66875c"
"background": "#444c6f"
}
},
"unshared_project_row": {
@ -1421,10 +1421,10 @@
},
"background": "#293256",
"hover": {
"background": "#5e66873d"
"background": "#363f62"
},
"active": {
"background": "#5e66875c"
"background": "#444c6f"
}
}
},
@ -1452,7 +1452,7 @@
"size": 14
},
"active": {
"background": "#5e66875c",
"background": "#444c6f",
"text": {
"family": "Zed Sans",
"color": "#dfe2f1",
@ -1460,7 +1460,7 @@
}
},
"hover": {
"background": "#5e66873d"
"background": "#363f62"
}
},
"border": {
@ -1527,17 +1527,17 @@
}
},
"contact_button": {
"background": "#293256",
"background": "#363f62",
"color": "#dfe2f1",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#5e66873d"
"background": "#444c6f"
}
},
"disabled_contact_button": {
"background": "#293256",
"background": "#363f62",
"color": "#979db4",
"icon_width": 8,
"button_width": 16,
@ -1545,14 +1545,14 @@
}
},
"search": {
"match_background": "#6679cc7a",
"match_background": "#1a2a6d",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"option_button": {
"family": "Zed Mono",
"color": "#979db4",
"size": 14,
"background": "#293256",
"background": "#363f62",
"corner_radius": 6,
"border": {
"color": "#293256",
@ -1571,7 +1571,7 @@
"family": "Zed Mono",
"color": "#f5f7ff",
"size": 14,
"background": "#5e66877a",
"background": "#51597b",
"border": {
"color": "#6b7394",
"width": 1
@ -1581,7 +1581,7 @@
"family": "Zed Mono",
"color": "#f5f7ff",
"size": 14,
"background": "#5e66873d",
"background": "#444c6f",
"border": {
"color": "#6b7394",
"width": 1
@ -1717,7 +1717,7 @@
"left": 6
},
"hover": {
"background": "#2932563d"
"background": "#222a4a"
}
},
"dismiss_button": {

154
assets/themes/sulphurpool-light.json
View File

@ -23,7 +23,7 @@
"size": 14
},
"active": {
"background": "#979db42e",
"background": "#bbc0d3",
"text": {
"family": "Zed Sans",
"color": "#293256",
@ -31,11 +31,11 @@
}
},
"hover": {
"background": "#979db41f"
"background": "#cdd1e2"
}
},
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1
},
"empty": {
@ -69,7 +69,7 @@
"size": 14
},
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"padding": {
@ -107,7 +107,7 @@
"size": 14
},
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"left": true,
"bottom": true,
@ -133,7 +133,7 @@
"size": 14
},
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"left": true,
"bottom": false,
@ -152,13 +152,13 @@
"cursor": "Arrow"
},
"sidebar_resize_handle": {
"background": "#f5f7ff",
"background": "#979db4",
"padding": {
"left": 1
}
},
"pane_divider": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"status_bar": {
@ -171,7 +171,7 @@
"right": 6
},
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true,
"overlay": true
@ -215,7 +215,7 @@
"size": 14
},
"icon_color": "#293256",
"background": "#979db41f"
"background": "#cdd1e2"
}
},
"diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7,
"right": 7
},
"background": "#979db41f"
"background": "#cdd1e2"
},
"container_warning": {
"corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#5e6687",
"hover": {
"icon_color": "#293256",
"background": "#979db41f"
"background": "#cdd1e2"
},
"active": {
"icon_color": "#202746",
"background": "#979db42e"
"background": "#bbc0d3"
}
},
"badge": {
@ -361,7 +361,7 @@
"avatar_width": 18,
"avatar_margin": 8,
"height": 33,
"background": "#dfe2f1",
"background": "#cdd1e2",
"padding": {
"left": 80,
"right": 6
@ -383,14 +383,14 @@
"width": 12
},
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"bottom": true,
"overlay": true
},
"sign_in_prompt": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1
},
"corner_radius": 6,
@ -426,15 +426,15 @@
},
"color": "#5e6687",
"hover": {
"background": "#979db41f",
"background": "#bbc0d3",
"color": "#5e6687"
},
"active": {
"background": "#979db42e",
"background": "#a9aec3",
"color": "#202746"
},
"active_hover": {
"background": "#979db41f",
"background": "#bbc0d3",
"color": "#202746"
}
},
@ -458,7 +458,7 @@
"height": 34,
"background": "#f5f7ff",
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1,
"bottom": true
},
@ -492,7 +492,7 @@
"corner_radius": 6,
"padding": 12,
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1
},
"shadow": {
@ -515,16 +515,16 @@
"editor": {
"text_color": "#202746",
"background": "#f5f7ff",
"active_line_background": "#20274612",
"active_line_background": "#dfe2f1",
"code_actions_indicator": "#5e6687",
"diff_background_deleted": "#c9492226",
"diff_background_inserted": "#ac973926",
"document_highlight_read_background": "#2027460f",
"document_highlight_write_background": "#2027461f",
"document_highlight_read_background": "#979db41f",
"document_highlight_write_background": "#979db43d",
"error_color": "#c94922",
"gutter_background": "#f5f7ff",
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#2027461f",
"highlighted_line_background": "#cdd1e2",
"line_number": "#6b7394",
"line_number_active": "#202746",
"rename_fade": 0.6,
@ -568,7 +568,7 @@
"corner_radius": 8,
"padding": 4,
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"item": {
@ -588,7 +588,7 @@
"right": 6,
"top": 2
},
"background": "#dfe2f11f"
"background": "#f0f2fc"
},
"margin": {
"left": -14
@ -606,7 +606,7 @@
"right": 6,
"top": 2
},
"background": "#dfe2f12e"
"background": "#eaedf8"
}
},
"diagnostic_header": {
@ -614,7 +614,7 @@
"icon_width_factor": 1.5,
"text_scale_factor": 0.857,
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1,
"bottom": true,
"top": true
@ -642,7 +642,7 @@
}
},
"diagnostic_path_header": {
"background": "#20274612",
"background": "#dfe2f1",
"text_scale_factor": 0.857,
"filename": {
"family": "Zed Mono",
@ -662,7 +662,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true
}
@ -685,7 +685,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true
}
@ -708,7 +708,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true
}
@ -731,7 +731,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true
}
@ -754,7 +754,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true
}
@ -777,7 +777,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true
}
@ -800,7 +800,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true
}
@ -823,7 +823,7 @@
"text_scale_factor": 0.857,
"header": {
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1,
"top": true
}
@ -852,7 +852,7 @@
"weight": "normal"
},
"punctuation": {
"color": "#5e6687",
"color": "#293256",
"weight": "normal"
},
"constant": {
@ -949,7 +949,7 @@
"corner_radius": 4,
"background": "#f5f7ff",
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"padding": {
@ -989,7 +989,7 @@
"size": 14
},
"hover": {
"background": "#979db41f",
"background": "#cdd1e2",
"text": {
"family": "Zed Mono",
"color": "#293256",
@ -997,7 +997,7 @@
}
},
"active": {
"background": "#979db42e",
"background": "#bbc0d3",
"text": {
"family": "Zed Mono",
"color": "#293256",
@ -1005,7 +1005,7 @@
}
},
"active_hover": {
"background": "#979db41f",
"background": "#cdd1e2",
"text": {
"family": "Zed Mono",
"color": "#202746",
@ -1014,7 +1014,7 @@
}
},
"filename_editor": {
"background": "#dfe2f12e",
"background": "#eaedf8",
"text": {
"family": "Zed Mono",
"color": "#293256",
@ -1098,7 +1098,7 @@
"right": 8
}
},
"background": "#979db41f",
"background": "#cdd1e2",
"corner_radius": 6
},
"active_item": {
@ -1133,7 +1133,7 @@
"right": 8
}
},
"background": "#979db41f",
"background": "#cdd1e2",
"corner_radius": 6
},
"menu": {
@ -1141,7 +1141,7 @@
"corner_radius": 6,
"padding": 4,
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1
},
"shadow": {
@ -1232,7 +1232,7 @@
"selection": "#3d8fd13d"
},
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"padding": {
@ -1266,7 +1266,7 @@
"selection": "#3d8fd13d"
},
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"padding": {
@ -1307,7 +1307,7 @@
"family": "Zed Mono",
"color": "#293256",
"size": 14,
"background": "#979db42e"
"background": "#a9aec3"
}
},
"contact_row": {
@ -1316,17 +1316,17 @@
"right": 12
},
"active": {
"background": "#979db42e"
"background": "#a9aec3"
}
},
"tree_branch": {
"color": "#898ea4",
"color": "#6b7394",
"width": 1,
"hover": {
"color": "#898ea4"
"color": "#6b7394"
},
"active": {
"color": "#898ea4"
"color": "#6b7394"
}
},
"contact_avatar": {
@ -1343,17 +1343,17 @@
},
"contact_button_spacing": 8,
"contact_button": {
"background": "#dfe2f1",
"background": "#cdd1e2",
"color": "#293256",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#979db41f"
"background": "#bbc0d3"
}
},
"disabled_contact_button": {
"background": "#dfe2f1",
"background": "#cdd1e2",
"color": "#5e6687",
"icon_width": 8,
"button_width": 16,
@ -1387,10 +1387,10 @@
},
"background": "#dfe2f1",
"hover": {
"background": "#979db41f"
"background": "#cdd1e2"
},
"active": {
"background": "#979db42e"
"background": "#bbc0d3"
}
},
"unshared_project_row": {
@ -1421,10 +1421,10 @@
},
"background": "#dfe2f1",
"hover": {
"background": "#979db41f"
"background": "#cdd1e2"
},
"active": {
"background": "#979db42e"
"background": "#bbc0d3"
}
}
},
@ -1452,7 +1452,7 @@
"size": 14
},
"active": {
"background": "#979db42e",
"background": "#bbc0d3",
"text": {
"family": "Zed Sans",
"color": "#293256",
@ -1460,11 +1460,11 @@
}
},
"hover": {
"background": "#979db41f"
"background": "#cdd1e2"
}
},
"border": {
"color": "#f5f7ff",
"color": "#979db4",
"width": 1
},
"empty": {
@ -1498,7 +1498,7 @@
"size": 14
},
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"padding": {
@ -1527,17 +1527,17 @@
}
},
"contact_button": {
"background": "#dfe2f1",
"background": "#cdd1e2",
"color": "#293256",
"icon_width": 8,
"button_width": 16,
"corner_radius": 8,
"hover": {
"background": "#979db41f"
"background": "#bbc0d3"
}
},
"disabled_contact_button": {
"background": "#dfe2f1",
"background": "#cdd1e2",
"color": "#5e6687",
"icon_width": 8,
"button_width": 16,
@ -1545,17 +1545,17 @@
}
},
"search": {
"match_background": "#6679cc3d",
"match_background": "#bcc6f7",
"tab_icon_spacing": 8,
"tab_icon_width": 14,
"option_button": {
"family": "Zed Mono",
"color": "#5e6687",
"size": 14,
"background": "#dfe2f1",
"background": "#cdd1e2",
"corner_radius": 6,
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"margin": {
@ -1571,9 +1571,9 @@
"family": "Zed Mono",
"color": "#202746",
"size": 14,
"background": "#979db43d",
"background": "#a9aec3",
"border": {
"color": "#898ea4",
"color": "#6b7394",
"width": 1
}
},
@ -1581,9 +1581,9 @@
"family": "Zed Mono",
"color": "#202746",
"size": 14,
"background": "#979db41f",
"background": "#bbc0d3",
"border": {
"color": "#898ea4",
"color": "#6b7394",
"width": 1
}
}
@ -1608,7 +1608,7 @@
"size": 14
},
"border": {
"color": "#dfe2f1",
"color": "#979db4",
"width": 1
},
"margin": {
@ -1717,7 +1717,7 @@
"left": 6
},
"hover": {
"background": "#dfe2f11f"
"background": "#f0f2fc"
}
},
"dismiss_button": {

2
crates/theme/src/theme.rs
View File

@ -12,7 +12,7 @@ use std::{collections::HashMap, sync::Arc};
pub use theme_registry::*;
pub const DEFAULT_THEME_NAME: &'static str = "dark";
pub const DEFAULT_THEME_NAME: &'static str = "cave-dark";
#[derive(Deserialize, Default)]
pub struct Theme {

405
styles/dist/dark.json vendored
View File

@ -1,698 +1,531 @@
{
"meta": {
"themeName": "dark"
"themeName": "cave-dark"
},
"text": {
"primary": {
"value": "#f1f1f1",
"description": "Step: 50",
"value": "#e2dfe7",
"type": "color"
},
"secondary": {
"value": "#9c9c9c",
"description": "Step: 350",
"value": "#8b8792",
"type": "color"
},
"muted": {
"value": "#808080",
"description": "Step: 450",
"value": "#8b8792",
"type": "color"
},
"placeholder": {
"value": "#474747",
"description": "Step: 650",
"value": "#7e7887",
"type": "color"
},
"active": {
"value": "#ffffff",
"description": "Step: 0",
"value": "#efecf4",
"type": "color"
},
"feature": {
"value": "#4f8ff7",
"description": "Step: 400",
"value": "#576ddb",
"type": "color"
},
"ok": {
"value": "#1b9447",
"description": "Step: 600",
"value": "#2a9292",
"type": "color"
},
"error": {
"value": "#f15656",
"description": "Step: 400",
"value": "#be4678",
"type": "color"
},
"warning": {
"value": "#f7bb57",
"description": "Step: 300",
"value": "#a06e3b",
"type": "color"
},
"info": {
"value": "#2472f2",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
}
},
"icon": {
"primary": {
"value": "#c6c6c6",
"description": "Step: 200",
"value": "#e2dfe7",
"type": "color"
},
"secondary": {
"value": "#9c9c9c",
"description": "Step: 350",
"value": "#8b8792",
"type": "color"
},
"muted": {
"value": "#555555",
"description": "Step: 600",
"value": "#8b8792",
"type": "color"
},
"placeholder": {
"value": "#393939",
"description": "Step: 700",
"value": "#7e7887",
"type": "color"
},
"active": {
"value": "#ffffff",
"description": "Step: 0",
"value": "#efecf4",
"type": "color"
},
"feature": {
"value": "#2472f2",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
},
"ok": {
"value": "#1b9447",
"description": "Step: 600",
"value": "#2a9292",
"type": "color"
},
"error": {
"value": "#eb2d2d",
"description": "Step: 500",
"value": "#be4678",
"type": "color"
},
"warning": {
"value": "#f6a724",
"description": "Step: 400",
"value": "#a06e3b",
"type": "color"
},
"info": {
"value": "#135acd",
"description": "Step: 600",
"value": "#576ddb",
"type": "color"
}
},
"background": {
"100": {
"base": {
"value": "#2b2b2b",
"description": "Step: 750",
"value": "#26232a",
"type": "color"
},
"hovered": {
"value": "#323232",
"description": "Step: 725",
"value": "#5852603d",
"type": "color"
},
"active": {
"value": "#1c1c1c",
"description": "Step: 800",
"type": "color"
},
"focused": {
"value": "#404040",
"description": "Step: 675",
"value": "#5852605c",
"type": "color"
}
},
"300": {
"base": {
"value": "#1c1c1c",
"description": "Step: 800",
"value": "#26232a",
"type": "color"
},
"hovered": {
"value": "#232323",
"description": "Step: 775",
"value": "#5852603d",
"type": "color"
},
"active": {
"value": "#2b2b2b",
"description": "Step: 750",
"type": "color"
},
"focused": {
"value": "#232323",
"description": "Step: 775",
"value": "#5852605c",
"type": "color"
}
},
"500": {
"base": {
"value": "#000000",
"description": "Step: 900",
"value": "#19171c",
"type": "color"
},
"hovered": {
"value": "#ffffff14",
"description": "Step: 0",
"value": "#26232a3d",
"type": "color"
},
"active": {
"value": "#ffffff1f",
"description": "Step: 0",
"type": "color"
},
"focused": {
"value": "#151515",
"description": "Step: 825",
"value": "#26232a5c",
"type": "color"
}
},
"on300": {
"base": {
"value": "#0e0e0e80",
"description": "Step: 850",
"value": "#19171c",
"type": "color"
},
"hovered": {
"value": "#070707",
"description": "Step: 875",
"value": "#26232a3d",
"type": "color"
},
"active": {
"value": "#000000",
"description": "Step: 900",
"type": "color"
},
"focused": {
"value": "#070707",
"description": "Step: 875",
"value": "#26232a7a",
"type": "color"
}
},
"on500": {
"base": {
"value": "#0e0e0e",
"description": "Step: 850",
"value": "#26232a",
"type": "color"
},
"hovered": {
"value": "#1c1c1c",
"description": "Step: 800",
"value": "#5852603d",
"type": "color"
},
"active": {
"value": "#232323",
"description": "Step: 775",
"type": "color"
},
"focused": {
"value": "#1c1c1c",
"description": "Step: 800",
"value": "#5852607a",
"type": "color"
}
},
"ok": {
"base": {
"value": "#1b944726",
"description": "Step: 600",
"value": "#2a929226",
"type": "color"
},
"hovered": {
"value": "#1b944733",
"description": "Step: 600",
"value": "#2a929233",
"type": "color"
},
"active": {
"value": "#1b944740",
"description": "Step: 600",
"type": "color"
},
"focused": {
"value": "#1b944733",
"description": "Step: 600",
"value": "#2a929240",
"type": "color"
}
},
"error": {
"base": {
"value": "#c9181826",
"description": "Step: 600",
"value": "#be467826",
"type": "color"
},
"hovered": {
"value": "#c9181833",
"description": "Step: 600",
"value": "#be467833",
"type": "color"
},
"active": {
"value": "#c9181840",
"description": "Step: 600",
"type": "color"
},
"focused": {
"value": "#c9181833",
"description": "Step: 600",
"value": "#be467840",
"type": "color"
}
},
"warning": {
"base": {
"value": "#f6a72426",
"description": "Step: 400",
"value": "#a06e3b26",
"type": "color"
},
"hovered": {
"value": "#f6a72433",
"description": "Step: 400",
"value": "#a06e3b33",
"type": "color"
},
"active": {
"value": "#f6a72440",
"description": "Step: 400",
"type": "color"
},
"focused": {
"value": "#f6a72433",
"description": "Step: 400",
"value": "#a06e3b40",
"type": "color"
}
},
"info": {
"base": {
"value": "#2472f226",
"description": "Step: 500",
"value": "#576ddb26",
"type": "color"
},
"hovered": {
"value": "#2472f233",
"description": "Step: 500",
"value": "#576ddb33",
"type": "color"
},
"active": {
"value": "#2472f240",
"description": "Step: 500",
"type": "color"
},
"focused": {
"value": "#2472f233",
"description": "Step: 500",
"value": "#576ddb40",
"type": "color"
}
}
},
"border": {
"primary": {
"value": "#070707",
"description": "Step: 875",
"value": "#19171c",
"type": "color"
},
"secondary": {
"value": "#232323",
"description": "Step: 775",
"value": "#26232a",
"type": "color"
},
"muted": {
"value": "#404040",
"description": "Step: 675",
"type": "color"
},
"focused": {
"value": "#484bed",
"description": "Step: 500",
"value": "#655f6d",
"type": "color"
},
"active": {
"value": "#000000",
"description": "Step: 900",
"value": "#655f6d",
"type": "color"
},
"onMedia": {
"value": "#0707071a",
"description": "Step: 875",
"value": "#19171c1a",
"type": "color"
},
"ok": {
"value": "#1b944726",
"description": "Step: 600",
"value": "#2a929226",
"type": "color"
},
"error": {
"value": "#eb2d2d26",
"description": "Step: 500",
"value": "#be467826",
"type": "color"
},
"warning": {
"value": "#f6a72426",
"description": "Step: 400",
"value": "#a06e3b26",
"type": "color"
},
"info": {
"value": "#2472f226",
"description": "Step: 500",
"value": "#576ddb26",
"type": "color"
}
},
"editor": {
"background": {
"value": "#000000",
"description": "Step: 900",
"value": "#19171c",
"type": "color"
},
"indent_guide": {
"value": "#404040",
"description": "Step: 675",
"value": "#655f6d",
"type": "color"
},
"indent_guide_active": {
"value": "#232323",
"description": "Step: 775",
"value": "#26232a",
"type": "color"
},
"line": {
"active": {
"value": "#ffffff12",
"description": "Step: 0",
"value": "#efecf412",
"type": "color"
},
"highlighted": {
"value": "#ffffff1f",
"description": "Step: 0",
"value": "#efecf41f",
"type": "color"
},
"inserted": {
"value": "#1b944740",
"description": "Step: 600",
"value": "#2a929240",
"type": "color"
},
"deleted": {
"value": "#c9181840",
"description": "Step: 600",
"value": "#be467840",
"type": "color"
},
"modified": {
"value": "#2472f240",
"description": "Step: 500",
"value": "#576ddb40",
"type": "color"
}
},
"highlight": {
"selection": {
"value": "#2472f23d",
"description": "Step: 500",
"value": "#576ddb3d",
"type": "color"
},
"occurrence": {
"value": "#ffffff1f",
"description": "Step: 0",
"value": "#efecf41f",
"type": "color"
},
"activeOccurrence": {
"value": "#ffffff29",
"description": "Step: 0",
"value": "#efecf43d",
"type": "color"
},
"matchingBracket": {
"value": "#ffffff1f",
"description": "Step: 0",
"value": "#26232a5c",
"type": "color"
},
"match": {
"value": "#3f15a380",
"description": "Step: 700",
"value": "#955ae77a",
"type": "color"
},
"activeMatch": {
"value": "#5316e0b3",
"description": "Step: 600",
"value": "#955ae7b8",
"type": "color"
},
"related": {
"value": "#151515",
"description": "Step: 825",
"value": "#26232a3d",
"type": "color"
}
},
"gutter": {
"primary": {
"value": "#474747",
"description": "Step: 650",
"value": "#7e7887",
"type": "color"
},
"active": {
"value": "#ffffff",
"description": "Step: 0",
"value": "#efecf4",
"type": "color"
}
}
},
"syntax": {
"primary": {
"value": "#d5d5d5",
"description": "Step: 150",
"value": "#efecf4",
"type": "color"
},
"comment": {
"value": "#aaaaaa",
"description": "Step: 300",
"value": "#8b8792",
"type": "color"
},
"keyword": {
"value": "#4f8ff7",
"description": "Step: 400",
"value": "#576ddb",
"type": "color"
},
"function": {
"value": "#f9da82",
"description": "Step: 200",
"value": "#a06e3b",
"type": "color"
},
"type": {
"value": "#3eeeda",
"description": "Step: 300",
"value": "#398bc6",
"type": "color"
},
"variant": {
"value": "#53c1f5",
"description": "Step: 300",
"value": "#576ddb",
"type": "color"
},
"property": {
"value": "#4f8ff7",
"description": "Step: 400",
"value": "#576ddb",
"type": "color"
},
"enum": {
"value": "#ee670a",
"description": "Step: 500",
"value": "#aa573c",
"type": "color"
},
"operator": {
"value": "#ee670a",
"description": "Step: 500",
"value": "#aa573c",
"type": "color"
},
"string": {
"value": "#f99d5f",
"description": "Step: 300",
"value": "#aa573c",
"type": "color"
},
"number": {
"value": "#aeef4b",
"description": "Step: 300",
"value": "#2a9292",
"type": "color"
},
"boolean": {
"value": "#aeef4b",
"description": "Step: 300",
"value": "#2a9292",
"type": "color"
}
},
"player": {
"1": {
"baseColor": {
"value": "#2472f2",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
},
"cursorColor": {
"value": "#2472f2",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
},
"selectionColor": {
"value": "#2472f23d",
"description": "Step: 500",
"value": "#576ddb3d",
"type": "color"
},
"borderColor": {
"value": "#2472f2cc",
"description": "Step: 500",
"value": "#576ddbcc",
"type": "color"
}
},
"2": {
"baseColor": {
"value": "#79ba16",
"description": "Step: 500",
"value": "#2a9292",
"type": "color"
},
"cursorColor": {
"value": "#79ba16",
"description": "Step: 500",
"value": "#2a9292",
"type": "color"
},
"selectionColor": {
"value": "#79ba163d",
"description": "Step: 500",
"value": "#2a92923d",
"type": "color"
},
"borderColor": {
"value": "#79ba16cc",
"description": "Step: 500",
"value": "#2a9292cc",
"type": "color"
}
},
"3": {
"baseColor": {
"value": "#d430e0",
"description": "Step: 500",
"value": "#bf40bf",
"type": "color"
},
"cursorColor": {
"value": "#d430e0",
"description": "Step: 500",
"value": "#bf40bf",
"type": "color"
},
"selectionColor": {
"value": "#d430e03d",
"description": "Step: 500",
"value": "#bf40bf3d",
"type": "color"
},
"borderColor": {
"value": "#d430e0cc",
"description": "Step: 500",
"value": "#bf40bfcc",
"type": "color"
}
},
"4": {
"baseColor": {
"value": "#ee670a",
"description": "Step: 500",
"value": "#aa573c",
"type": "color"
},
"cursorColor": {
"value": "#ee670a",
"description": "Step: 500",
"value": "#aa573c",
"type": "color"
},
"selectionColor": {
"value": "#ee670a3d",
"description": "Step: 500",
"value": "#aa573c3d",
"type": "color"
},
"borderColor": {
"value": "#ee670acc",
"description": "Step: 500",
"value": "#aa573ccc",
"type": "color"
}
},
"5": {
"baseColor": {
"value": "#993bf3",
"description": "Step: 500",
"value": "#955ae7",
"type": "color"
},
"cursorColor": {
"value": "#993bf3",
"description": "Step: 500",
"value": "#955ae7",
"type": "color"
},
"selectionColor": {
"value": "#993bf33d",
"description": "Step: 500",
"value": "#955ae73d",
"type": "color"
},
"borderColor": {
"value": "#993bf3cc",
"description": "Step: 500",
"value": "#955ae7cc",
"type": "color"
}
},
"6": {
"baseColor": {
"value": "#16d6c1",
"description": "Step: 400",
"value": "#398bc6",
"type": "color"
},
"cursorColor": {
"value": "#16d6c1",
"description": "Step: 400",
"value": "#398bc6",
"type": "color"
},
"selectionColor": {
"value": "#16d6c13d",
"description": "Step: 400",
"value": "#398bc63d",
"type": "color"
},
"borderColor": {
"value": "#16d6c1cc",
"description": "Step: 400",
"value": "#398bc6cc",
"type": "color"
}
},
"7": {
"baseColor": {
"value": "#ef59a3",
"description": "Step: 400",
"value": "#be4678",
"type": "color"
},
"cursorColor": {
"value": "#ef59a3",
"description": "Step: 400",
"value": "#be4678",
"type": "color"
},
"selectionColor": {
"value": "#ef59a33d",
"description": "Step: 400",
"value": "#be46783d",
"type": "color"
},
"borderColor": {
"value": "#ef59a3cc",
"description": "Step: 400",
"value": "#be4678cc",
"type": "color"
}
},
"8": {
"baseColor": {
"value": "#f7bf17",
"description": "Step: 400",
"value": "#a06e3b",
"type": "color"
},
"cursorColor": {
"value": "#f7bf17",
"description": "Step: 400",
"value": "#a06e3b",
"type": "color"
},
"selectionColor": {
"value": "#f7bf173d",
"description": "Step: 400",
"value": "#a06e3b3d",
"type": "color"
},
"borderColor": {
"value": "#f7bf17cc",
"description": "Step: 400",
"value": "#a06e3bcc",
"type": "color"
}
}
},
"shadowAlpha": {
"value": 0.32,
"value": 0.24,
"type": "number"
}
}

403
styles/dist/light.json vendored
View File

@ -1,692 +1,525 @@
{
"meta": {
"themeName": "light"
"themeName": "cave-light"
},
"text": {
"primary": {
"value": "#2b2b2b",
"description": "Step: 750",
"value": "#26232a",
"type": "color"
},
"secondary": {
"value": "#474747",
"description": "Step: 650",
"value": "#585260",
"type": "color"
},
"muted": {
"value": "#636363",
"description": "Step: 550",
"value": "#585260",
"type": "color"
},
"placeholder": {
"value": "#808080",
"description": "Step: 450",
"value": "#655f6d",
"type": "color"
},
"active": {
"value": "#000000",
"description": "Step: 900",
"value": "#19171c",
"type": "color"
},
"feature": {
"value": "#484bed",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
},
"ok": {
"value": "#20b456",
"description": "Step: 500",
"value": "#2a9292",
"type": "color"
},
"error": {
"value": "#eb2d2d",
"description": "Step: 500",
"value": "#be4678",
"type": "color"
},
"warning": {
"value": "#d3a20b",
"description": "Step: 500",
"value": "#a06e3b",
"type": "color"
},
"info": {
"value": "#2472f2",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
}
},
"icon": {
"primary": {
"value": "#393939",
"description": "Step: 700",
"value": "#26232a",
"type": "color"
},
"secondary": {
"value": "#717171",
"description": "Step: 500",
"value": "#585260",
"type": "color"
},
"muted": {
"value": "#9c9c9c",
"description": "Step: 350",
"value": "#585260",
"type": "color"
},
"placeholder": {
"value": "#aaaaaa",
"description": "Step: 300",
"value": "#655f6d",
"type": "color"
},
"active": {
"value": "#000000",
"description": "Step: 900",
"value": "#19171c",
"type": "color"
},
"feature": {
"value": "#484bed",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
},
"ok": {
"value": "#1b9447",
"description": "Step: 600",
"value": "#2a9292",
"type": "color"
},
"error": {
"value": "#c91818",
"description": "Step: 600",
"value": "#be4678",
"type": "color"
},
"warning": {
"value": "#f7bf17",
"description": "Step: 400",
"value": "#a06e3b",
"type": "color"
},
"info": {
"value": "#135acd",
"description": "Step: 600",
"value": "#576ddb",
"type": "color"
}
},
"background": {
"100": {
"base": {
"value": "#eaeaea",
"description": "Step: 75",
"value": "#e2dfe7",
"type": "color"
},
"hovered": {
"value": "#e3e3e3",
"description": "Step: 100",
"value": "#8b87921f",
"type": "color"
},
"active": {
"value": "#d5d5d5",
"description": "Step: 150",
"type": "color"
},
"focused": {
"value": "#e3e3e3",
"description": "Step: 100",
"value": "#8b87922e",
"type": "color"
}
},
"300": {
"base": {
"value": "#f8f8f8",
"description": "Step: 25",
"value": "#e2dfe7",
"type": "color"
},
"hovered": {
"value": "#eaeaea",
"description": "Step: 75",
"value": "#8b87921f",
"type": "color"
},
"active": {
"value": "#e3e3e3",
"description": "Step: 100",
"type": "color"
},
"focused": {
"value": "#eaeaea",
"description": "Step: 75",
"value": "#8b87922e",
"type": "color"
}
},
"500": {
"base": {
"value": "#ffffff",
"description": "Step: 0",
"value": "#efecf4",
"type": "color"
},
"hovered": {
"value": "#00000008",
"description": "Step: 900",
"value": "#e2dfe71f",
"type": "color"
},
"active": {
"value": "#0000000f",
"description": "Step: 900",
"type": "color"
},
"focused": {
"value": "#f1f1f1",
"description": "Step: 50",
"value": "#e2dfe72e",
"type": "color"
}
},
"on300": {
"base": {
"value": "#f1f1f1",
"description": "Step: 50",
"value": "#efecf4",
"type": "color"
},
"hovered": {
"value": "#e3e3e3",
"description": "Step: 100",
"value": "#e2dfe71f",
"type": "color"
},
"active": {
"value": "#d5d5d5",
"description": "Step: 150",
"type": "color"
},
"focused": {
"value": "#e3e3e3",
"description": "Step: 100",
"value": "#e2dfe73d",
"type": "color"
}
},
"on500": {
"base": {
"value": "#f1f1f1",
"description": "Step: 50",
"value": "#e2dfe7",
"type": "color"
},
"hovered": {
"value": "#f8f8f8",
"description": "Step: 25",
"value": "#8b87921f",
"type": "color"
},
"active": {
"value": "#ffffff",
"description": "Step: 0",
"type": "color"
},
"focused": {
"value": "#f8f8f8",
"description": "Step: 25",
"value": "#8b87923d",
"type": "color"
}
},
"ok": {
"base": {
"value": "#1b944726",
"description": "Step: 600",
"value": "#2a929226",
"type": "color"
},
"hovered": {
"value": "#1b944733",
"description": "Step: 600",
"value": "#2a929233",
"type": "color"
},
"active": {
"value": "#1b944740",
"description": "Step: 600",
"type": "color"
},
"focused": {
"value": "#1b944733",
"description": "Step: 600",
"value": "#2a929240",
"type": "color"
}
},
"error": {
"base": {
"value": "#c9181826",
"description": "Step: 600",
"value": "#be467826",
"type": "color"
},
"hovered": {
"value": "#c9181833",
"description": "Step: 600",
"value": "#be467833",
"type": "color"
},
"active": {
"value": "#c9181840",
"description": "Step: 600",
"type": "color"
},
"focused": {
"value": "#c9181833",
"description": "Step: 600",
"value": "#be467840",
"type": "color"
}
},
"warning": {
"base": {
"value": "#f6a72426",
"description": "Step: 400",
"value": "#a06e3b26",
"type": "color"
},
"hovered": {
"value": "#f6a72433",
"description": "Step: 400",
"value": "#a06e3b33",
"type": "color"
},
"active": {
"value": "#f6a72440",
"description": "Step: 400",
"type": "color"
},
"focused": {
"value": "#f6a72433",
"description": "Step: 400",
"value": "#a06e3b40",
"type": "color"
}
},
"info": {
"base": {
"value": "#2472f226",
"description": "Step: 500",
"value": "#576ddb26",
"type": "color"
},
"hovered": {
"value": "#2472f233",
"description": "Step: 500",
"value": "#576ddb33",
"type": "color"
},
"active": {
"value": "#2472f240",
"description": "Step: 500",
"type": "color"
},
"focused": {
"value": "#2472f233",
"description": "Step: 500",
"value": "#576ddb40",
"type": "color"
}
}
},
"border": {
"primary": {
"value": "#d5d5d5",
"description": "Step: 150",
"value": "#efecf4",
"type": "color"
},
"secondary": {
"value": "#d5d5d5",
"description": "Step: 150",
"value": "#e2dfe7",
"type": "color"
},
"muted": {
"value": "#e3e3e3",
"description": "Step: 100",
"type": "color"
},
"focused": {
"value": "#484bed",
"description": "Step: 500",
"value": "#7e7887",
"type": "color"
},
"active": {
"value": "#b8b8b8",
"description": "Step: 250",
"value": "#7e7887",
"type": "color"
},
"onMedia": {
"value": "#b8b8b84d",
"description": "Step: 250",
"value": "#efecf41a",
"type": "color"
},
"ok": {
"value": "#1b944726",
"description": "Step: 600",
"value": "#2a929226",
"type": "color"
},
"error": {
"value": "#eb2d2d26",
"description": "Step: 500",
"value": "#be467826",
"type": "color"
},
"warning": {
"value": "#f6a72426",
"description": "Step: 400",
"value": "#a06e3b26",
"type": "color"
},
"info": {
"value": "#2472f226",
"description": "Step: 500",
"value": "#576ddb26",
"type": "color"
}
},
"editor": {
"background": {
"value": "#ffffff",
"description": "Step: 0",
"value": "#efecf4",
"type": "color"
},
"indent_guide": {
"value": "#e3e3e3",
"description": "Step: 100",
"value": "#7e7887",
"type": "color"
},
"indent_guide_active": {
"value": "#d5d5d5",
"description": "Step: 150",
"value": "#e2dfe7",
"type": "color"
},
"line": {
"active": {
"value": "#0000000f",
"description": "Step: 900",
"value": "#19171c12",
"type": "color"
},
"highlighted": {
"value": "#0000001f",
"description": "Step: 900",
"value": "#19171c1f",
"type": "color"
},
"inserted": {
"value": "#1b944740",
"description": "Step: 600",
"value": "#2a929240",
"type": "color"
},
"deleted": {
"value": "#c9181840",
"description": "Step: 600",
"value": "#be467840",
"type": "color"
},
"modified": {
"value": "#2472f240",
"description": "Step: 500",
"value": "#576ddb40",
"type": "color"
}
},
"highlight": {
"selection": {
"value": "#2472f23d",
"description": "Step: 500",
"value": "#576ddb3d",
"type": "color"
},
"occurrence": {
"value": "#0000000f",
"description": "Step: 900",
"value": "#19171c0f",
"type": "color"
},
"activeOccurrence": {
"value": "#00000029",
"description": "Step: 900",
"value": "#19171c1f",
"type": "color"
},
"matchingBracket": {
"value": "#ffffff",
"description": "Step: 0",
"value": "#e2dfe72e",
"type": "color"
},
"match": {
"value": "#fce9b7",
"description": "Step: 100",
"value": "#955ae73d",
"type": "color"
},
"activeMatch": {
"value": "#f9da82",
"description": "Step: 200",
"value": "#955ae75c",
"type": "color"
},
"related": {
"value": "#ffffff",
"description": "Step: 0",
"value": "#e2dfe71f",
"type": "color"
}
},
"gutter": {
"primary": {
"value": "#aaaaaa",
"description": "Step: 300",
"value": "#655f6d",
"type": "color"
},
"active": {
"value": "#000000",
"description": "Step: 900",
"value": "#19171c",
"type": "color"
}
}
},
"syntax": {
"primary": {
"value": "#1c1c1c",
"description": "Step: 800",
"value": "#19171c",
"type": "color"
},
"comment": {
"value": "#717171",
"description": "Step: 500",
"value": "#585260",
"type": "color"
},
"keyword": {
"value": "#1819a1",
"description": "Step: 700",
"value": "#576ddb",
"type": "color"
},
"function": {
"value": "#bb550e",
"description": "Step: 600",
"value": "#a06e3b",
"type": "color"
},
"type": {
"value": "#a8820e",
"description": "Step: 600",
"value": "#398bc6",
"type": "color"
},
"variant": {
"value": "#97142a",
"description": "Step: 700",
"value": "#576ddb",
"type": "color"
},
"property": {
"value": "#106c4e",
"description": "Step: 700",
"value": "#576ddb",
"type": "color"
},
"enum": {
"value": "#eb2d2d",
"description": "Step: 500",
"value": "#aa573c",
"type": "color"
},
"operator": {
"value": "#eb2d2d",
"description": "Step: 500",
"value": "#aa573c",
"type": "color"
},
"string": {
"value": "#eb2d2d",
"description": "Step: 500",
"value": "#aa573c",
"type": "color"
},
"number": {
"value": "#484bed",
"description": "Step: 500",
"value": "#2a9292",
"type": "color"
},
"boolean": {
"value": "#eb2d2d",
"description": "Step: 500",
"value": "#2a9292",
"type": "color"
}
},
"player": {
"1": {
"baseColor": {
"value": "#2472f2",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
},
"cursorColor": {
"value": "#2472f2",
"description": "Step: 500",
"value": "#576ddb",
"type": "color"
},
"selectionColor": {
"value": "#2472f23d",
"description": "Step: 500",
"value": "#576ddb3d",
"type": "color"
},
"borderColor": {
"value": "#2472f2cc",
"description": "Step: 500",
"value": "#576ddbcc",
"type": "color"
}
},
"2": {
"baseColor": {
"value": "#12d796",
"description": "Step: 400",
"value": "#2a9292",
"type": "color"
},
"cursorColor": {
"value": "#12d796",
"description": "Step: 400",
"value": "#2a9292",
"type": "color"
},
"selectionColor": {
"value": "#12d7963d",
"description": "Step: 400",
"value": "#2a92923d",
"type": "color"
},
"borderColor": {
"value": "#12d796cc",
"description": "Step: 400",
"value": "#2a9292cc",
"type": "color"
}
},
"3": {
"baseColor": {
"value": "#de57e8",
"description": "Step: 400",
"value": "#bf40bf",
"type": "color"
},
"cursorColor": {
"value": "#de57e8",
"description": "Step: 400",
"value": "#bf40bf",
"type": "color"
},
"selectionColor": {
"value": "#de57e83d",
"description": "Step: 400",
"value": "#bf40bf3d",
"type": "color"
},
"borderColor": {
"value": "#de57e8cc",
"description": "Step: 400",
"value": "#bf40bfcc",
"type": "color"
}
},
"4": {
"baseColor": {
"value": "#f9812e",
"description": "Step: 400",
"value": "#aa573c",
"type": "color"
},
"cursorColor": {
"value": "#f9812e",
"description": "Step: 400",
"value": "#aa573c",
"type": "color"
},
"selectionColor": {
"value": "#f9812e3d",
"description": "Step: 400",
"value": "#aa573c3d",
"type": "color"
},
"borderColor": {
"value": "#f9812ecc",
"description": "Step: 400",
"value": "#aa573ccc",
"type": "color"
}
},
"5": {
"baseColor": {
"value": "#b066f8",
"description": "Step: 400",
"value": "#955ae7",
"type": "color"
},
"cursorColor": {
"value": "#b066f8",
"description": "Step: 400",
"value": "#955ae7",
"type": "color"
},
"selectionColor": {
"value": "#b066f83d",
"description": "Step: 400",
"value": "#955ae73d",
"type": "color"
},
"borderColor": {
"value": "#b066f8cc",
"description": "Step: 400",
"value": "#955ae7cc",
"type": "color"
}
},
"6": {
"baseColor": {
"value": "#16d6c1",
"description": "Step: 400",
"value": "#398bc6",
"type": "color"
},
"cursorColor": {
"value": "#16d6c1",
"description": "Step: 400",
"value": "#398bc6",
"type": "color"
},
"selectionColor": {
"value": "#16d6c13d",
"description": "Step: 400",
"value": "#398bc63d",
"type": "color"
},
"borderColor": {
"value": "#16d6c1cc",
"description": "Step: 400",
"value": "#398bc6cc",
"type": "color"
}
},
"7": {
"baseColor": {
"value": "#ef59a3",
"description": "Step: 400",
"value": "#be4678",
"type": "color"
},
"cursorColor": {
"value": "#ef59a3",
"description": "Step: 400",
"value": "#be4678",
"type": "color"
},
"selectionColor": {
"value": "#ef59a33d",
"description": "Step: 400",
"value": "#be46783d",
"type": "color"
},
"borderColor": {
"value": "#ef59a3cc",
"description": "Step: 400",
"value": "#be4678cc",
"type": "color"
}
},
"8": {
"baseColor": {
"value": "#f7bf17",
"description": "Step: 400",
"value": "#a06e3b",
"type": "color"
},
"cursorColor": {
"value": "#f7bf17",
"description": "Step: 400",
"value": "#a06e3b",
"type": "color"
},
"selectionColor": {
"value": "#f7bf173d",
"description": "Step: 400",
"value": "#a06e3b3d",
"type": "color"
},
"borderColor": {
"value": "#f7bf17cc",
"description": "Step: 400",
"value": "#a06e3bcc",
"type": "color"
}
}

40
styles/dist/solarized-dark.json vendored
View File

@ -99,10 +99,6 @@
"active": {
"value": "#586e755c",
"type": "color"
},
"focused": {
"value": "#586e753d",
"type": "color"
}
},
"300": {
@ -117,10 +113,6 @@
"active": {
"value": "#586e755c",
"type": "color"
},
"focused": {
"value": "#586e753d",
"type": "color"
}
},
"500": {
@ -135,10 +127,6 @@
"active": {
"value": "#0736425c",
"type": "color"
},
"focused": {
"value": "#0736423d",
"type": "color"
}
},
"on300": {
@ -153,10 +141,6 @@
"active": {
"value": "#0736427a",
"type": "color"
},
"focused": {
"value": "#0736423d",
"type": "color"
}
},
"on500": {
@ -171,10 +155,6 @@
"active": {
"value": "#586e757a",
"type": "color"
},
"focused": {
"value": "#586e753d",
"type": "color"
}
},
"ok": {
@ -189,10 +169,6 @@
"active": {
"value": "#85990040",
"type": "color"
},
"focused": {
"value": "#85990033",
"type": "color"
}
},
"error": {
@ -207,10 +183,6 @@
"active": {
"value": "#dc322f40",
"type": "color"
},
"focused": {
"value": "#dc322f33",
"type": "color"
}
},
"warning": {
@ -225,10 +197,6 @@
"active": {
"value": "#b5890040",
"type": "color"
},
"focused": {
"value": "#b5890033",
"type": "color"
}
},
"info": {
@ -243,10 +211,6 @@
"active": {
"value": "#268bd240",
"type": "color"
},
"focused": {
"value": "#268bd233",
"type": "color"
}
}
},
@ -263,10 +227,6 @@
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#657b83",
"type": "color"
},
"active": {
"value": "#657b83",
"type": "color"

40
styles/dist/solarized-light.json vendored
View File

@ -99,10 +99,6 @@
"active": {
"value": "#93a1a12e",
"type": "color"
},
"focused": {
"value": "#93a1a11f",
"type": "color"
}
},
"300": {
@ -117,10 +113,6 @@
"active": {
"value": "#93a1a12e",
"type": "color"
},
"focused": {
"value": "#93a1a11f",
"type": "color"
}
},
"500": {
@ -135,10 +127,6 @@
"active": {
"value": "#eee8d52e",
"type": "color"
},
"focused": {
"value": "#eee8d51f",
"type": "color"
}
},
"on300": {
@ -153,10 +141,6 @@
"active": {
"value": "#eee8d53d",
"type": "color"
},
"focused": {
"value": "#eee8d51f",
"type": "color"
}
},
"on500": {
@ -171,10 +155,6 @@
"active": {
"value": "#93a1a13d",
"type": "color"
},
"focused": {
"value": "#93a1a11f",
"type": "color"
}
},
"ok": {
@ -189,10 +169,6 @@
"active": {
"value": "#85990040",
"type": "color"
},
"focused": {
"value": "#85990033",
"type": "color"
}
},
"error": {
@ -207,10 +183,6 @@
"active": {
"value": "#dc322f40",
"type": "color"
},
"focused": {
"value": "#dc322f33",
"type": "color"
}
},
"warning": {
@ -225,10 +197,6 @@
"active": {
"value": "#b5890040",
"type": "color"
},
"focused": {
"value": "#b5890033",
"type": "color"
}
},
"info": {
@ -243,10 +211,6 @@
"active": {
"value": "#268bd240",
"type": "color"
},
"focused": {
"value": "#268bd233",
"type": "color"
}
}
},
@ -263,10 +227,6 @@
"value": "#839496",
"type": "color"
},
"focused": {
"value": "#839496",
"type": "color"
},
"active": {
"value": "#839496",
"type": "color"

892
styles/dist/tokens.json vendored
View File

File diff suppressed because it is too large Load Diff

11
styles/src/buildThemes.ts
View File

@ -2,19 +2,24 @@ import * as fs from "fs";
import * as path from "path";
import app from "./styleTree/app";
import { dark as caveDark, light as caveLight } from "./themes/cave";
import dark from "./themes/dark";
import light from "./themes/light";
import { dark as solarizedDark, light as solarizedLight } from "./themes/solarized";
import { dark as sulphurpoolDark, light as sulphurpoolLight } from "./themes/sulphurpool";
import snakeCase from "./utils/snakeCase";
const themes = [
dark, light,
caveDark, caveLight,
solarizedDark, solarizedLight,
sulphurpoolDark, sulphurpoolLight
];
const themeDirectory = `${__dirname}/../../assets/themes/`;
// Clear existing themes
for (const file of fs.readdirSync(themeDirectory)) {
fs.unlinkSync(path.join(themeDirectory, file));
}
// Write new themes to theme directory
for (let theme of themes) {
let styleTree = snakeCase(app(theme));
let styleTreeJSON = JSON.stringify(styleTree, null, 2);

4
styles/src/buildTokens.ts
View File

@ -1,8 +1,8 @@
import * as fs from "fs";
import * as path from "path";
import dark from "./themes/dark";
import light from "./themes/light";
import { light as solarizedLight, dark as solarizedDark } from "./themes/solarized";
// Use cave as "light" and "dark" themes
import { light, dark } from "./themes/cave";
import Theme from "./themes/theme";
import { colors, fontFamilies, fontSizes, fontWeights, sizes } from "./tokens";

214
styles/src/themes/base16.ts
View File

@ -1,116 +1,123 @@
import { ColorToken, fontWeights, NumberToken } from "../tokens";
import chroma from "chroma-js";
import { Scale, Color } from "chroma-js";
import { color, ColorToken, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
export interface Accents {
"red": ColorToken,
"orange": ColorToken,
"yellow": ColorToken,
"green": ColorToken,
"cyan": ColorToken,
"blue": ColorToken,
"violet": ColorToken,
"magenta": ColorToken,
export function colorRamp(color: Color): Scale {
let hue = color.hsl()[0];
let endColor = chroma.hsl(hue, 0.88, 0.96);
let startColor = chroma.hsl(hue, 0.68, 0.12);
return chroma
.scale([startColor, color, endColor])
.mode("hsl");
}
export function createTheme(name: string, isLight: boolean, neutral: ColorToken[], accent: Accents): Theme {
// Neutral. 8 stops from 0 to 1.
export function createTheme(name: string, isLight: boolean, ramps: { [rampName: string]: Scale }, blend?: number): Theme {
if (isLight) {
neutral = [...neutral].reverse();
for (var rampName in ramps) {
ramps[rampName] = ramps[rampName].domain([1, 0]);
}
ramps.neutral = ramps.neutral.domain([7, 0]);
} else {
ramps.neutral = ramps.neutral.domain([0, 7]);
}
if (blend === undefined) {
blend = isLight ? 0.12 : 0.24;
}
function rampColor(ramp: Scale, index: number): ColorToken {
return color(ramp(index).hex());
}
let blend = isLight ? 0.12 : 0.24;
const backgroundColor = {
// Title bar
100: {
base: neutral[1],
hovered: withOpacity(neutral[2], blend),
active: withOpacity(neutral[2], blend * 1.5),
focused: withOpacity(neutral[2], blend),
base: rampColor(ramps.neutral, 1.25),
hovered: rampColor(ramps.neutral, 1.5),
active: rampColor(ramps.neutral, 1.75),
},
// Midground (panels, etc)
300: {
base: neutral[1],
hovered: withOpacity(neutral[2], blend),
active: withOpacity(neutral[2], blend * 1.5),
focused: withOpacity(neutral[2], blend),
base: rampColor(ramps.neutral, 1),
hovered: rampColor(ramps.neutral, 1.25),
active: rampColor(ramps.neutral, 1.5),
},
// Editor
500: {
base: neutral[0],
hovered: withOpacity(neutral[1], blend),
active: withOpacity(neutral[1], blend * 1.5),
focused: withOpacity(neutral[1], blend),
base: rampColor(ramps.neutral, 0),
hovered: rampColor(ramps.neutral, 0.25),
active: rampColor(ramps.neutral, 0.5),
},
on300: {
base: neutral[0],
hovered: withOpacity(neutral[1], blend),
active: withOpacity(neutral[1], blend * 2),
focused: withOpacity(neutral[1], blend),
base: rampColor(ramps.neutral, 0),
hovered: rampColor(ramps.neutral, 0.25),
active: rampColor(ramps.neutral, 0.5),
},
on500: {
base: neutral[1],
hovered: withOpacity(neutral[2], blend),
active: withOpacity(neutral[2], blend * 2),
focused: withOpacity(neutral[2], blend),
base: rampColor(ramps.neutral, 1.25),
hovered: rampColor(ramps.neutral, 1.5),
active: rampColor(ramps.neutral, 1.75),
},
ok: {
base: withOpacity(accent.green, 0.15),
hovered: withOpacity(accent.green, 0.20),
active: withOpacity(accent.green, 0.25),
focused: withOpacity(accent.green, 0.20),
base: withOpacity(rampColor(ramps.green, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.green, 0.5), 0.20),
active: withOpacity(rampColor(ramps.green, 0.5), 0.25),
},
error: {
base: withOpacity(accent.red, 0.15),
hovered: withOpacity(accent.red, 0.20),
active: withOpacity(accent.red, 0.25),
focused: withOpacity(accent.red, 0.20),
base: withOpacity(rampColor(ramps.red, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.red, 0.5), 0.20),
active: withOpacity(rampColor(ramps.red, 0.5), 0.25),
},
warning: {
base: withOpacity(accent.yellow, 0.15),
hovered: withOpacity(accent.yellow, 0.20),
active: withOpacity(accent.yellow, 0.25),
focused: withOpacity(accent.yellow, 0.20),
base: withOpacity(rampColor(ramps.yellow, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.20),
active: withOpacity(rampColor(ramps.yellow, 0.5), 0.25),
},
info: {
base: withOpacity(accent.blue, 0.15),
hovered: withOpacity(accent.blue, 0.20),
active: withOpacity(accent.blue, 0.25),
focused: withOpacity(accent.blue, 0.20),
base: withOpacity(rampColor(ramps.blue, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.20),
active: withOpacity(rampColor(ramps.blue, 0.5), 0.25),
},
};
const borderColor = {
primary: neutral[0],
secondary: neutral[1],
muted: neutral[3],
focused: neutral[3],
active: neutral[3],
onMedia: withOpacity(neutral[0], 0.1),
ok: withOpacity(accent.green, 0.15),
error: withOpacity(accent.red, 0.15),
warning: withOpacity(accent.yellow, 0.15),
info: withOpacity(accent.blue, 0.15),
primary: rampColor(ramps.neutral, isLight ? 2 : 0),
secondary: rampColor(ramps.neutral, isLight ? 2 : 1),
muted: rampColor(ramps.neutral, isLight ? 4 : 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),
};
const textColor = {
primary: neutral[6],
secondary: neutral[5],
muted: neutral[5],
placeholder: neutral[4],
active: neutral[7],
feature: accent.blue,
ok: accent.green,
error: accent.red,
warning: accent.yellow,
info: accent.blue,
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),
};
const player = {
1: buildPlayer(accent.blue),
2: buildPlayer(accent.green),
3: buildPlayer(accent.magenta),
4: buildPlayer(accent.orange),
5: buildPlayer(accent.violet),
6: buildPlayer(accent.cyan),
7: buildPlayer(accent.red),
8: buildPlayer(accent.yellow),
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)),
};
const editor = {
@ -118,20 +125,17 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: withOpacity(neutral[7], 0.07),
highlighted: withOpacity(neutral[7], 0.12),
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
active: rampColor(ramps.neutral, 1),
highlighted: rampColor(ramps.neutral, 1.25), // TODO: Where is this used?
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(neutral[7], blend / 2),
activeOccurrence: withOpacity(neutral[7], blend),
matchingBracket: backgroundColor[500].active,
match: withOpacity(accent.violet, blend * 2),
activeMatch: withOpacity(accent.violet, blend * 3),
related: backgroundColor[500].focused,
occurrence: withOpacity(rampColor(ramps.neutral, 2), blend),
activeOccurrence: withOpacity(rampColor(ramps.neutral, 2), 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
related: backgroundColor[500].hovered,
},
gutter: {
primary: textColor.placeholder,
@ -141,59 +145,59 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
const syntax: Syntax = {
primary: {
color: neutral[7],
color: rampColor(ramps.neutral, 7),
weight: fontWeights.normal,
},
comment: {
color: neutral[5],
color: rampColor(ramps.neutral, 5),
weight: fontWeights.normal,
},
punctuation: {
color: neutral[5],
color: rampColor(ramps.neutral, 6),
weight: fontWeights.normal,
},
constant: {
color: neutral[4],
color: rampColor(ramps.neutral, 4),
weight: fontWeights.normal,
},
keyword: {
color: accent.blue,
color: rampColor(ramps.blue, 0.5),
weight: fontWeights.normal,
},
function: {
color: accent.yellow,
color: rampColor(ramps.yellow, 0.5),
weight: fontWeights.normal,
},
type: {
color: accent.cyan,
color: rampColor(ramps.cyan, 0.5),
weight: fontWeights.normal,
},
variant: {
color: accent.blue,
color: rampColor(ramps.blue, 0.5),
weight: fontWeights.normal,
},
property: {
color: accent.blue,
color: rampColor(ramps.blue, 0.5),
weight: fontWeights.normal,
},
enum: {
color: accent.orange,
color: rampColor(ramps.orange, 0.5),
weight: fontWeights.normal,
},
operator: {
color: accent.orange,
color: rampColor(ramps.orange, 0.5),
weight: fontWeights.normal,
},
string: {
color: accent.orange,
color: rampColor(ramps.orange, 0.5),
weight: fontWeights.normal,
},
number: {
color: accent.green,
color: rampColor(ramps.green, 0.5),
weight: fontWeights.normal,
},
boolean: {
color: accent.green,
color: rampColor(ramps.green, 0.5),
weight: fontWeights.normal,
},
predictive: {
@ -201,7 +205,7 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
weight: fontWeights.normal,
},
title: {
color: accent.yellow,
color: rampColor(ramps.yellow, 0.5),
weight: fontWeights.bold,
},
emphasis: {
@ -213,12 +217,12 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
weight: fontWeights.bold,
},
linkUri: {
color: accent.green,
color: rampColor(ramps.green, 0.5),
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: accent.orange,
color: rampColor(ramps.orange, 0.5),
weight: fontWeights.normal,
italic: true,
},

40
styles/src/themes/cave.ts
View File

@ -1,29 +1,19 @@
import { createTheme } from "./base16";
import { color } from "../tokens";
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./base16";
const name = "cave";
const neutrals = [
color("#19171c"),
color("#26232a"),
color("#585260"),
color("#655f6d"),
color("#7e7887"),
color("#8b8792"),
color("#e2dfe7"),
color("#efecf4"),
];
const ramps = {
neutral: chroma.scale(["#19171c", "#26232a", "#585260", "#655f6d", "#7e7887", "#8b8792", "#e2dfe7", "#efecf4"]),
red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")),
green: colorRamp(chroma("#2a9292")),
cyan: colorRamp(chroma("#398bc6")),
blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
}
const colors = {
"red": color("#be4678"),
"orange": color("#aa573c"),
"yellow": color("#a06e3b"),
"green": color("#2a9292"),
"cyan": color("#398bc6"),
"blue": color("#576ddb"),
"violet": color("#955ae7"),
"magenta": color("#bf40bf"),
};
export const dark = createTheme(`${name}-dark`, false, neutrals, colors);
export const light = createTheme(`${name}-light`, true, neutrals, colors);
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);

240
styles/src/themes/dark.ts
View File

@ -1,240 +0,0 @@
import { colors, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
const backgroundColor = {
100: {
base: colors.neutral[750],
hovered: colors.neutral[725],
active: colors.neutral[800],
focused: colors.neutral[675],
},
300: {
base: colors.neutral[800],
hovered: colors.neutral[775],
active: colors.neutral[750],
focused: colors.neutral[775],
},
500: {
base: colors.neutral[900],
hovered: withOpacity(colors.neutral[0], 0.08),
active: withOpacity(colors.neutral[0], 0.12),
focused: colors.neutral[825],
},
on300: {
base: withOpacity(colors.neutral[850], 0.5),
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: withOpacity(colors.green[600], 0.15),
hovered: withOpacity(colors.green[600], 0.20),
active: withOpacity(colors.green[600], 0.25),
focused: withOpacity(colors.green[600], 0.20),
},
error: {
base: withOpacity(colors.red[600], 0.15),
hovered: withOpacity(colors.red[600], 0.20),
active: withOpacity(colors.red[600], 0.25),
focused: withOpacity(colors.red[600], 0.20),
},
warning: {
base: withOpacity(colors.amber[400], 0.15),
hovered: withOpacity(colors.amber[400], 0.20),
active: withOpacity(colors.amber[400], 0.25),
focused: withOpacity(colors.amber[400], 0.20),
},
info: {
base: withOpacity(colors.blue[500], 0.15),
hovered: withOpacity(colors.blue[500], 0.20),
active: withOpacity(colors.blue[500], 0.25),
focused: withOpacity(colors.blue[500], 0.20),
},
};
const borderColor = {
primary: colors.neutral[875],
secondary: colors.neutral[775],
muted: colors.neutral[675],
focused: colors.indigo[500],
active: colors.neutral[900],
onMedia: withOpacity(colors.neutral[875], 0.1),
ok: withOpacity(colors.green[600], 0.15),
error: withOpacity(colors.red[500], 0.15),
warning: withOpacity(colors.amber[400], 0.15),
info: withOpacity(colors.blue[500], 0.15),
};
const textColor = {
primary: colors.neutral[50],
secondary: colors.neutral[350],
muted: colors.neutral[450],
placeholder: colors.neutral[650],
active: colors.neutral[0],
feature: colors.blue[400],
ok: colors.green[600],
error: colors.red[400],
warning: colors.amber[300],
info: colors.blue[500],
};
const iconColor = {
primary: colors.neutral[200],
secondary: colors.neutral[350],
muted: colors.neutral[600],
placeholder: colors.neutral[700],
active: colors.neutral[0],
feature: colors.blue[500],
ok: colors.green[600],
error: colors.red[500],
warning: colors.amber[400],
info: colors.blue[600],
};
const player = {
1: buildPlayer(colors.blue[500]),
2: buildPlayer(colors.lime[500]),
3: buildPlayer(colors.fuschia[500]),
4: buildPlayer(colors.orange[500]),
5: buildPlayer(colors.purple[500]),
6: buildPlayer(colors.teal[400]),
7: buildPlayer(colors.pink[400]),
8: buildPlayer(colors.yellow[400]),
};
const editor = {
background: backgroundColor[500].base,
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: withOpacity(colors.neutral[0], 0.07),
highlighted: withOpacity(colors.neutral[0], 0.12),
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(colors.neutral[0], 0.12),
activeOccurrence: withOpacity(colors.neutral[0], 0.16),
matchingBracket: backgroundColor[500].active,
match: withOpacity(colors.violet[700], 0.5),
activeMatch: withOpacity(colors.violet[600], 0.7),
related: backgroundColor[500].focused,
},
gutter: {
primary: textColor.placeholder,
active: textColor.active,
},
};
const syntax: Syntax = {
primary: {
color: colors.neutral[150],
weight: fontWeights.normal,
},
comment: {
color: colors.neutral[300],
weight: fontWeights.normal,
},
punctuation: {
color: colors.neutral[200],
weight: fontWeights.normal,
},
constant: {
color: colors.neutral[150],
weight: fontWeights.normal,
},
keyword: {
color: colors.blue[400],
weight: fontWeights.normal,
},
function: {
color: colors.yellow[200],
weight: fontWeights.normal,
},
type: {
color: colors.teal[300],
weight: fontWeights.normal,
},
variant: {
color: colors.sky[300],
weight: fontWeights.normal,
},
property: {
color: colors.blue[400],
weight: fontWeights.normal,
},
enum: {
color: colors.orange[500],
weight: fontWeights.normal,
},
operator: {
color: colors.orange[500],
weight: fontWeights.normal,
},
string: {
color: colors.orange[300],
weight: fontWeights.normal,
},
number: {
color: colors.lime[300],
weight: fontWeights.normal,
},
boolean: {
color: colors.lime[300],
weight: fontWeights.normal,
},
predictive: {
color: textColor.muted,
weight: fontWeights.normal,
},
title: {
color: colors.amber[500],
weight: fontWeights.bold,
},
emphasis: {
color: textColor.feature,
weight: fontWeights.normal,
},
"emphasis.strong": {
color: textColor.feature,
weight: fontWeights.bold,
},
linkUri: {
color: colors.lime[500],
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: colors.orange[500],
weight: fontWeights.normal,
italic: true,
},
};
const shadowAlpha: NumberToken = {
value: 0.32,
type: "number",
};
const theme: Theme = {
name: "dark",
backgroundColor,
borderColor,
textColor,
iconColor,
editor,
syntax,
player,
shadowAlpha,
};
export default theme;

30
styles/src/themes/gruvbox.ts Normal file
View File

@ -0,0 +1,30 @@
import chroma from "chroma-js";
import { createTheme } from "./base16";
const name = "cave";
const colors = {
"red": chroma("#be4678"),
"orange": chroma("#aa573c"),
"yellow": chroma("#a06e3b"),
"green": chroma("#2a9292"),
"cyan": chroma("#398bc6"),
"blue": chroma("#576ddb"),
"violet": chroma("#955ae7"),
"magenta": chroma("#bf40bf"),
};
const ramps = {
neutral: chroma.scale(["#19171c", "#26232a", "#585260", "#655f6d", "#7e7887", "#8b8792", "#e2dfe7", "#efecf4"]),
red: chroma.scale([colors.red.darken(3), colors.red, colors.red.brighten(3)]),
orange: chroma.scale([colors.orange.darken(3), colors.orange, colors.orange.brighten(3)]),
yellow: chroma.scale([colors.yellow.darken(3), colors.yellow, colors.yellow.brighten(3)]),
green: chroma.scale([colors.green.darken(3), colors.green, colors.green.brighten(3)]),
cyan: chroma.scale([colors.cyan.darken(3), colors.cyan, colors.cyan.brighten(3)]),
blue: chroma.scale([colors.blue.darken(3), colors.blue, colors.blue.brighten(3)]),
violet: chroma.scale([colors.violet.darken(3), colors.violet, colors.violet.brighten(3)]),
magenta: chroma.scale([colors.magenta.darken(3), colors.magenta, colors.magenta.brighten(3)]),
}
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);

240
styles/src/themes/light.ts
View File

@ -1,240 +0,0 @@
import { colors, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
const backgroundColor = {
100: {
base: colors.neutral[75],
hovered: colors.neutral[100],
active: colors.neutral[150],
focused: colors.neutral[100],
},
300: {
base: colors.neutral[25],
hovered: colors.neutral[75],
active: colors.neutral[100],
focused: colors.neutral[75],
},
500: {
base: colors.neutral[0],
hovered: withOpacity(colors.neutral[900], 0.03),
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: withOpacity(colors.green[600], 0.15),
hovered: withOpacity(colors.green[600], 0.20),
active: withOpacity(colors.green[600], 0.25),
focused: withOpacity(colors.green[600], 0.20),
},
error: {
base: withOpacity(colors.red[600], 0.15),
hovered: withOpacity(colors.red[600], 0.20),
active: withOpacity(colors.red[600], 0.25),
focused: withOpacity(colors.red[600], 0.20),
},
warning: {
base: withOpacity(colors.amber[400], 0.15),
hovered: withOpacity(colors.amber[400], 0.20),
active: withOpacity(colors.amber[400], 0.25),
focused: withOpacity(colors.amber[400], 0.20),
},
info: {
base: withOpacity(colors.blue[500], 0.15),
hovered: withOpacity(colors.blue[500], 0.20),
active: withOpacity(colors.blue[500], 0.25),
focused: withOpacity(colors.blue[500], 0.20),
},
};
const borderColor = {
primary: colors.neutral[150],
secondary: colors.neutral[150],
muted: colors.neutral[100],
focused: colors.indigo[500],
active: colors.neutral[250],
onMedia: withOpacity(colors.neutral[250], 0.3),
ok: withOpacity(colors.green[600], 0.15),
error: withOpacity(colors.red[500], 0.15),
warning: withOpacity(colors.amber[400], 0.15),
info: withOpacity(colors.blue[500], 0.15),
};
const textColor = {
primary: colors.neutral[750],
secondary: colors.neutral[650],
muted: colors.neutral[550],
placeholder: colors.neutral[450],
active: colors.neutral[900],
feature: colors.indigo[500],
ok: colors.green[500],
error: colors.red[500],
warning: colors.yellow[500],
info: colors.blue[500],
};
const iconColor = {
primary: colors.neutral[700],
secondary: colors.neutral[500],
muted: colors.neutral[350],
placeholder: colors.neutral[300],
active: colors.neutral[900],
feature: colors.indigo[500],
ok: colors.green[600],
error: colors.red[600],
warning: colors.yellow[400],
info: colors.blue[600],
};
const player = {
1: buildPlayer(colors.blue[500]),
2: buildPlayer(colors.emerald[400]),
3: buildPlayer(colors.fuschia[400]),
4: buildPlayer(colors.orange[400]),
5: buildPlayer(colors.purple[400]),
6: buildPlayer(colors.teal[400]),
7: buildPlayer(colors.pink[400]),
8: buildPlayer(colors.yellow[400]),
};
const editor = {
background: backgroundColor[500].base,
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: withOpacity(colors.neutral[900], 0.06),
highlighted: withOpacity(colors.neutral[900], 0.12),
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(colors.neutral[900], 0.06),
activeOccurrence: withOpacity(colors.neutral[900], 0.16),
matchingBracket: colors.neutral[0],
match: colors.yellow[100],
activeMatch: colors.yellow[200],
related: colors.neutral[0],
},
gutter: {
primary: colors.neutral[300],
active: textColor.active,
},
};
const syntax: Syntax = {
primary: {
color: colors.neutral[800],
weight: fontWeights.normal,
},
comment: {
color: colors.neutral[500],
weight: fontWeights.normal,
},
punctuation: {
color: colors.neutral[600],
weight: fontWeights.normal,
},
constant: {
color: colors.neutral[800],
weight: fontWeights.normal,
},
keyword: {
color: colors.indigo[700],
weight: fontWeights.normal,
},
function: {
color: colors.orange[600],
weight: fontWeights.normal,
},
type: {
color: colors.yellow[600],
weight: fontWeights.normal,
},
variant: {
color: colors.rose[700],
weight: fontWeights.normal,
},
property: {
color: colors.emerald[700],
weight: fontWeights.normal,
},
enum: {
color: colors.red[500],
weight: fontWeights.normal,
},
operator: {
color: colors.red[500],
weight: fontWeights.normal,
},
string: {
color: colors.red[500],
weight: fontWeights.normal,
},
number: {
color: colors.indigo[500],
weight: fontWeights.normal,
},
boolean: {
color: colors.red[500],
weight: fontWeights.normal,
},
predictive: {
color: textColor.placeholder,
weight: fontWeights.normal,
},
title: {
color: colors.sky[500],
weight: fontWeights.bold,
},
emphasis: {
color: textColor.feature,
weight: fontWeights.normal,
},
"emphasis.strong": {
color: textColor.feature,
weight: fontWeights.bold,
},
linkUri: {
color: colors.lime[500],
weight: fontWeights.normal,
underline: true
},
linkText: {
color: colors.red[500],
weight: fontWeights.normal,
italic: true
},
};
const shadowAlpha: NumberToken = {
value: 0.12,
type: "number",
};
const theme: Theme = {
name: "light",
backgroundColor,
borderColor,
textColor,
iconColor,
editor,
syntax,
player,
shadowAlpha,
};
export default theme;

40
styles/src/themes/solarized.ts
View File

@ -1,29 +1,19 @@
import { createTheme } from "./base16";
import { color } from "../tokens";
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./base16";
const name = "solarized";
const neutrals = [
color("#002b36"),
color("#073642"),
color("#586e75"),
color("#657b83"),
color("#839496"),
color("#93a1a1"),
color("#eee8d5"),
color("#fdf6e3"),
];
const ramps = {
neutral: chroma.scale(["#002b36", "#073642", "#586e75", "#657b83", "#839496", "#93a1a1", "#eee8d5", "#fdf6e3"]),
red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")),
green: colorRamp(chroma("#859900")),
cyan: colorRamp(chroma("#2aa198")),
blue: colorRamp(chroma("#268bd2")),
violet: colorRamp(chroma("#6c71c4")),
magenta: colorRamp(chroma("#d33682")),
}
const colors = {
"red": color("#dc322f"),
"orange": color("#cb4b16"),
"yellow": color("#b58900"),
"green": color("#859900"),
"cyan": color("#2aa198"),
"blue": color("#268bd2"),
"violet": color("#6c71c4"),
"magenta": color("#d33682"),
};
export const dark = createTheme(`${name}-dark`, false, neutrals, colors);
export const light = createTheme(`${name}-light`, true, neutrals, colors);
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);

40
styles/src/themes/sulphurpool.ts
View File

@ -1,29 +1,19 @@
import { createTheme } from "./base16";
import { color } from "../tokens";
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./base16";
const name = "sulphurpool";
const neutrals = [
color("#202746"),
color("#293256"),
color("#5e6687"),
color("#6b7394"),
color("#898ea4"),
color("#979db4"),
color("#dfe2f1"),
color("#f5f7ff"),
]
const ramps = {
neutral: chroma.scale(["#202746", "#293256", "#5e6687", "#6b7394", "#898ea4", "#979db4", "#dfe2f1", "#f5f7ff"]),
red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")),
green: colorRamp(chroma("#ac9739")),
cyan: colorRamp(chroma("#22a2c9")),
blue: colorRamp(chroma("#3d8fd1")),
violet: colorRamp(chroma("#6679cc")),
magenta: colorRamp(chroma("#9c637a")),
}
const colors = {
"red": color("#c94922"),
"orange": color("#c76b29"),
"yellow": color("#c08b30"),
"green": color("#ac9739"),
"cyan": color("#22a2c9"),
"blue": color("#3d8fd1"),
"violet": color("#6679cc"),
"magenta": color("#9c637a"),
};
export const dark = createTheme(`${name}-dark`, false, neutrals, colors);
export const light = createTheme(`${name}-light`, true, neutrals, colors);
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);

5
styles/src/themes/theme.ts
View File

@ -32,7 +32,6 @@ export interface BackgroundColorSet {
base: ColorToken;
hovered: ColorToken;
active: ColorToken;
focused: ColorToken;
}
export interface Syntax {
@ -85,7 +84,6 @@ export default interface Theme {
primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
focused: ColorToken;
active: ColorToken;
/**
* Used for rendering borders on top of media like avatars, images, video, etc.
@ -127,9 +125,6 @@ export default interface Theme {
line: {
active: ColorToken;
highlighted: ColorToken;
inserted: ColorToken;
deleted: ColorToken;
modified: ColorToken;
};
highlight: {
selection: ColorToken;