Detailed changes
@@ -51,7 +51,7 @@
"empty": {
"text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"padding": {
@@ -66,20 +66,20 @@
"corner_radius": 6,
"placeholder_text": {
"family": "Zed Sans",
- "color": "#2b2b2b",
+ "color": "#474747",
"size": 14
},
"selection": {
"cursor": "#2472f2",
- "selection": "#103063"
+ "selection": "#2472f24d"
},
"text": {
"family": "Zed Mono",
"color": "#f1f1f1",
- "size": 16
+ "size": 14
},
"border": {
- "color": "#151515",
+ "color": "#232323",
"width": 1
},
"padding": {
@@ -209,7 +209,7 @@
}
},
"pane_divider": {
- "color": "#070707",
+ "color": "#232323",
"width": 1
},
"status_bar": {
@@ -221,17 +221,17 @@
},
"cursor_position": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"diagnostic_message": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"lsp_message": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
}
},
@@ -240,7 +240,7 @@
"height": 32,
"background": "#2b2b2b",
"share_icon_color": "#9c9c9c",
- "share_icon_active_color": "#ffffff",
+ "share_icon_active_color": "#1096d3",
"title": {
"family": "Zed Sans",
"color": "#f1f1f1",
@@ -297,7 +297,7 @@
"height": 34,
"background": "#000000",
"border": {
- "color": "#151515",
+ "color": "#232323",
"width": 1,
"bottom": true
},
@@ -312,7 +312,7 @@
"breadcrumbs": {
"family": "Zed Mono",
"color": "#9c9c9c",
- "size": 16,
+ "size": 14,
"padding": {
"left": 6
}
@@ -331,48 +331,48 @@
"code_actions_indicator": "#9c9c9c",
"diff_background_deleted": "#f15656",
"diff_background_inserted": "#1b9447",
- "document_highlight_read_background": "#2b2b2b",
- "document_highlight_write_background": "#2b2b2b",
+ "document_highlight_read_background": "#14a89829",
+ "document_highlight_write_background": "#14a89852",
"error_color": "#f15656",
"gutter_background": "#000000",
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#070707",
- "line_number": "#636363",
+ "line_number": "#808080",
"line_number_active": "#ffffff",
"rename_fade": 0.6,
"unnecessary_code_fade": 0.5,
"selection": {
"cursor": "#2472f2",
- "selection": "#103063"
+ "selection": "#2472f24d"
},
"guest_selections": [
{
"cursor": "#79ba16",
- "selection": "#38530f"
+ "selection": "#79ba164d"
},
{
"cursor": "#484bed",
- "selection": "#121269"
+ "selection": "#484bed4d"
},
{
"cursor": "#ee670a",
- "selection": "#5d2f0e"
+ "selection": "#ee670a4d"
},
{
"cursor": "#993bf3",
- "selection": "#3e1169"
+ "selection": "#993bf34d"
},
{
"cursor": "#16d6c1",
- "selection": "#0e4f48"
+ "selection": "#16d6c14d"
},
{
"cursor": "#ef59a3",
- "selection": "#fbc6e1"
+ "selection": "#ef59a34d"
},
{
"cursor": "#f7bf17",
- "selection": "#fce9b7"
+ "selection": "#f7bf174d"
}
],
"autocomplete": {
@@ -380,7 +380,7 @@
"corner_radius": 6,
"padding": 6,
"border": {
- "color": "#151515",
+ "color": "#232323",
"width": 1
},
"item": {
@@ -425,14 +425,14 @@
"icon_width_factor": 1.5,
"text_scale_factor": 0.857,
"border": {
- "color": "#151515",
+ "color": "#232323",
"width": 1,
"bottom": true,
"top": true
},
"code": {
"family": "Zed Mono",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"margin": {
"left": 10
@@ -462,7 +462,7 @@
},
"path": {
"family": "Zed Mono",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"margin": {
"left": 12
@@ -573,12 +573,12 @@
"message": {
"text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"weight": "bold"
}
@@ -596,12 +596,12 @@
"message": {
"text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"weight": "bold"
}
@@ -619,12 +619,12 @@
"message": {
"text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"weight": "bold"
}
@@ -642,12 +642,12 @@
"message": {
"text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"weight": "bold"
}
@@ -680,7 +680,7 @@
"color": "#ee670a",
"italic": true
},
- "list_marker": "#20b0f2"
+ "list_marker": "#c6c6c6"
}
},
"project_diagnostics": {
@@ -690,11 +690,11 @@
"empty_message": {
"family": "Zed Sans",
"color": "#f1f1f1",
- "size": 14
+ "size": 18
},
"status_bar_item": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"margin": {
"right": 10
@@ -768,7 +768,7 @@
},
"channel_name_hash": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"padding": {
"right": 8
@@ -787,7 +787,7 @@
},
"hash": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"margin": {
"right": 8
@@ -804,7 +804,7 @@
"padding": 4,
"hash": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"margin": {
"right": 8
@@ -821,7 +821,7 @@
"padding": 4,
"hash": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"margin": {
"right": 8
@@ -839,7 +839,7 @@
"padding": 4,
"hash": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"margin": {
"right": 8
@@ -856,7 +856,7 @@
"padding": 4,
"hash": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14,
"margin": {
"right": 8
@@ -903,7 +903,7 @@
},
"timestamp": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"padding": {
@@ -922,12 +922,12 @@
"pending_message": {
"body": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"timestamp": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"size": 14
},
"padding": {
@@ -935,7 +935,7 @@
},
"sender": {
"family": "Zed Sans",
- "color": "#636363",
+ "color": "#808080",
"weight": "bold",
"size": 14,
"margin": {
@@ -949,19 +949,19 @@
"text": {
"family": "Zed Mono",
"color": "#f1f1f1",
- "size": 16
+ "size": 14
},
"placeholder_text": {
"family": "Zed Mono",
- "color": "#2b2b2b",
+ "color": "#474747",
"size": 14
},
"selection": {
"cursor": "#2472f2",
- "selection": "#103063"
+ "selection": "#2472f24d"
},
"border": {
- "color": "#151515",
+ "color": "#232323",
"width": 1
},
"padding": {
@@ -980,7 +980,7 @@
"right": 12
},
"host_row_height": 28,
- "tree_branch_color": "#232323",
+ "tree_branch_color": "#404040",
"tree_branch_width": 1,
"host_avatar": {
"corner_radius": 10,
@@ -988,8 +988,8 @@
},
"host_username": {
"family": "Zed Mono",
- "color": "#636363",
- "size": 16,
+ "color": "#f1f1f1",
+ "size": 14,
"padding": {
"left": 8
}
@@ -1003,8 +1003,8 @@
},
"name": {
"family": "Zed Mono",
- "color": "#9c9c9c",
- "size": 16,
+ "color": "#474747",
+ "size": 14,
"margin": {
"right": 6
}
@@ -1022,15 +1022,17 @@
},
"name": {
"family": "Zed Mono",
- "color": "#f1f1f1",
- "size": 16,
+ "color": "#9c9c9c",
+ "size": 14,
"margin": {
"right": 6
}
},
"padding": {
"left": 8
- }
+ },
+ "background": "#1c1c1c",
+ "corner_radius": 6
},
"hovered_shared_project": {
"guest_avatar_spacing": 4,
@@ -1041,8 +1043,8 @@
},
"name": {
"family": "Zed Mono",
- "color": "#f1f1f1",
- "size": 16,
+ "color": "#9c9c9c",
+ "size": 14,
"margin": {
"right": 6
}
@@ -1050,7 +1052,7 @@
"padding": {
"left": 8
},
- "background": "#0e0e0e",
+ "background": "#232323",
"corner_radius": 6
},
"unshared_project": {
@@ -1062,8 +1064,8 @@
},
"name": {
"family": "Zed Mono",
- "color": "#9c9c9c",
- "size": 16,
+ "color": "#474747",
+ "size": 14,
"margin": {
"right": 6
}
@@ -1081,8 +1083,8 @@
},
"name": {
"family": "Zed Mono",
- "color": "#9c9c9c",
- "size": 16,
+ "color": "#474747",
+ "size": 14,
"margin": {
"right": 6
}
@@ -1090,18 +1092,17 @@
"padding": {
"left": 8
},
- "background": "#0e0e0e",
"corner_radius": 6
}
},
"search": {
- "match_background": "#0a2633",
+ "match_background": "#1096d329",
"tab_icon_spacing": 4,
"tab_icon_width": 14,
"active_hovered_option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
- "size": 16,
+ "size": 14,
"background": "#2b2b2b",
"corner_radius": 6,
"border": {
@@ -1122,7 +1123,7 @@
"active_option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
- "size": 16,
+ "size": 14,
"background": "#2b2b2b",
"corner_radius": 6,
"border": {
@@ -1147,20 +1148,20 @@
"max_width": 500,
"placeholder_text": {
"family": "Zed Mono",
- "color": "#2b2b2b",
- "size": 16
+ "color": "#474747",
+ "size": 14
},
"selection": {
"cursor": "#2472f2",
- "selection": "#103063"
+ "selection": "#2472f24d"
},
"text": {
"family": "Zed Mono",
"color": "#f1f1f1",
- "size": 16
+ "size": 14
},
"border": {
- "color": "#070707",
+ "color": "#232323",
"width": 1
},
"margin": {
@@ -1176,7 +1177,7 @@
"hovered_option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
- "size": 16,
+ "size": 14,
"background": "#2b2b2b",
"corner_radius": 6,
"border": {
@@ -1201,17 +1202,17 @@
"max_width": 500,
"placeholder_text": {
"family": "Zed Mono",
- "color": "#2b2b2b",
- "size": 16
+ "color": "#474747",
+ "size": 14
},
"selection": {
"cursor": "#2472f2",
- "selection": "#103063"
+ "selection": "#2472f24d"
},
"text": {
"family": "Zed Mono",
"color": "#f1f1f1",
- "size": 16
+ "size": 14
},
"border": {
"color": "#eb2d2d",
@@ -1229,14 +1230,14 @@
},
"match_index": {
"family": "Zed Mono",
- "color": "#636363",
- "size": 16,
+ "color": "#808080",
+ "size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
- "size": 16,
+ "size": 14,
"background": "#1c1c1c",
"corner_radius": 6,
"border": {
@@ -71,12 +71,12 @@
},
"selection": {
"cursor": "#2472f2",
- "selection": "#c5dafc"
+ "selection": "#2472f24d"
},
"text": {
"family": "Zed Mono",
"color": "#2b2b2b",
- "size": 16
+ "size": 14
},
"border": {
"color": "#e3e3e3",
@@ -209,7 +209,7 @@
}
},
"pane_divider": {
- "color": "#c6c6c6",
+ "color": "#e3e3e3",
"width": 1
},
"status_bar": {
@@ -240,7 +240,7 @@
"height": 32,
"background": "#e3e3e3",
"share_icon_color": "#717171",
- "share_icon_active_color": "#000000",
+ "share_icon_active_color": "#1179a8",
"title": {
"family": "Zed Sans",
"color": "#2b2b2b",
@@ -312,7 +312,7 @@
"breadcrumbs": {
"family": "Zed Mono",
"color": "#555555",
- "size": 16,
+ "size": 14,
"padding": {
"left": 6
}
@@ -331,8 +331,8 @@
"code_actions_indicator": "#717171",
"diff_background_deleted": "#fcc6c6",
"diff_background_inserted": "#b7f9ce",
- "document_highlight_read_background": "#f1f1f1",
- "document_highlight_write_background": "#f1f1f1",
+ "document_highlight_read_background": "#14a89829",
+ "document_highlight_write_background": "#14a89852",
"error_color": "#eb2d2d",
"gutter_background": "#ffffff",
"gutter_padding_factor": 3.5,
@@ -343,36 +343,36 @@
"unnecessary_code_fade": 0.5,
"selection": {
"cursor": "#2472f2",
- "selection": "#c5dafc"
+ "selection": "#2472f24d"
},
"guest_selections": [
{
"cursor": "#79ba16",
- "selection": "#dffab5"
+ "selection": "#79ba164d"
},
{
"cursor": "#484bed",
- "selection": "#cdcdfc"
+ "selection": "#484bed4d"
},
{
"cursor": "#ee670a",
- "selection": "#fcd6bd"
+ "selection": "#ee670a4d"
},
{
"cursor": "#993bf3",
- "selection": "#e4cbfc"
+ "selection": "#993bf34d"
},
{
"cursor": "#16d6c1",
- "selection": "#b1faf2"
+ "selection": "#16d6c14d"
},
{
"cursor": "#ef59a3",
- "selection": "#fbc6e1"
+ "selection": "#ef59a34d"
},
{
"cursor": "#f7bf17",
- "selection": "#fce9b7"
+ "selection": "#f7bf174d"
}
],
"autocomplete": {
@@ -680,7 +680,7 @@
"color": "#ee670a",
"italic": true
},
- "list_marker": "#20b0f2"
+ "list_marker": "#393939"
}
},
"project_diagnostics": {
@@ -690,7 +690,7 @@
"empty_message": {
"family": "Zed Sans",
"color": "#2b2b2b",
- "size": 14
+ "size": 18
},
"status_bar_item": {
"family": "Zed Sans",
@@ -949,7 +949,7 @@
"text": {
"family": "Zed Mono",
"color": "#2b2b2b",
- "size": 16
+ "size": 14
},
"placeholder_text": {
"family": "Zed Mono",
@@ -958,7 +958,7 @@
},
"selection": {
"cursor": "#2472f2",
- "selection": "#c5dafc"
+ "selection": "#2472f24d"
},
"border": {
"color": "#e3e3e3",
@@ -988,8 +988,8 @@
},
"host_username": {
"family": "Zed Mono",
- "color": "#808080",
- "size": 16,
+ "color": "#2b2b2b",
+ "size": 14,
"padding": {
"left": 8
}
@@ -1003,8 +1003,8 @@
},
"name": {
"family": "Zed Mono",
- "color": "#555555",
- "size": 16,
+ "color": "#aaaaaa",
+ "size": 14,
"margin": {
"right": 6
}
@@ -1022,15 +1022,17 @@
},
"name": {
"family": "Zed Mono",
- "color": "#2b2b2b",
- "size": 16,
+ "color": "#555555",
+ "size": 14,
"margin": {
"right": 6
}
},
"padding": {
"left": 8
- }
+ },
+ "background": "#f1f1f1",
+ "corner_radius": 6
},
"hovered_shared_project": {
"guest_avatar_spacing": 4,
@@ -1041,8 +1043,8 @@
},
"name": {
"family": "Zed Mono",
- "color": "#2b2b2b",
- "size": 16,
+ "color": "#555555",
+ "size": 14,
"margin": {
"right": 6
}
@@ -1050,7 +1052,7 @@
"padding": {
"left": 8
},
- "background": "#f1f1f1",
+ "background": "#e3e3e3",
"corner_radius": 6
},
"unshared_project": {
@@ -1062,8 +1064,8 @@
},
"name": {
"family": "Zed Mono",
- "color": "#555555",
- "size": 16,
+ "color": "#aaaaaa",
+ "size": 14,
"margin": {
"right": 6
}
@@ -1081,8 +1083,8 @@
},
"name": {
"family": "Zed Mono",
- "color": "#555555",
- "size": 16,
+ "color": "#aaaaaa",
+ "size": 14,
"margin": {
"right": 6
}
@@ -1090,18 +1092,17 @@
"padding": {
"left": 8
},
- "background": "#f1f1f1",
"corner_radius": 6
}
},
"search": {
- "match_background": "#ffffff",
+ "match_background": "#1096d329",
"tab_icon_spacing": 4,
"tab_icon_width": 14,
"active_hovered_option_button": {
"family": "Zed Mono",
"color": "#555555",
- "size": 16,
+ "size": 14,
"background": "#e3e3e3",
"corner_radius": 6,
"border": {
@@ -1122,7 +1123,7 @@
"active_option_button": {
"family": "Zed Mono",
"color": "#555555",
- "size": 16,
+ "size": 14,
"background": "#e3e3e3",
"corner_radius": 6,
"border": {
@@ -1148,19 +1149,19 @@
"placeholder_text": {
"family": "Zed Mono",
"color": "#aaaaaa",
- "size": 16
+ "size": 14
},
"selection": {
"cursor": "#2472f2",
- "selection": "#c5dafc"
+ "selection": "#2472f24d"
},
"text": {
"family": "Zed Mono",
"color": "#2b2b2b",
- "size": 16
+ "size": 14
},
"border": {
- "color": "#c6c6c6",
+ "color": "#e3e3e3",
"width": 1
},
"margin": {
@@ -1176,7 +1177,7 @@
"hovered_option_button": {
"family": "Zed Mono",
"color": "#555555",
- "size": 16,
+ "size": 14,
"background": "#e3e3e3",
"corner_radius": 6,
"border": {
@@ -1202,16 +1203,16 @@
"placeholder_text": {
"family": "Zed Mono",
"color": "#aaaaaa",
- "size": 16
+ "size": 14
},
"selection": {
"cursor": "#2472f2",
- "selection": "#c5dafc"
+ "selection": "#2472f24d"
},
"text": {
"family": "Zed Mono",
"color": "#2b2b2b",
- "size": 16
+ "size": 14
},
"border": {
"color": "#f9a0a0",
@@ -1230,13 +1231,13 @@
"match_index": {
"family": "Zed Mono",
"color": "#808080",
- "size": 16,
+ "size": 14,
"padding": 6
},
"option_button": {
"family": "Zed Mono",
"color": "#555555",
- "size": 16,
+ "size": 14,
"background": "#f1f1f1",
"corner_radius": 6,
"border": {
@@ -1,6 +1,8 @@
{
- "watch": ["./**/*"],
- "ext": "ts",
- "ignore": [],
- "exec": "ts-node buildThemes.ts"
+ "watch": [
+ "./**/*"
+ ],
+ "ext": "ts",
+ "ignore": [],
+ "exec": "ts-node src/buildThemes.ts"
}
@@ -1,16 +1,9 @@
import chroma from "chroma-js";
-import Theme, { BackgroundColor } from "../themes/theme";
-import { fontFamilies, fontSizes, FontFamily, FontWeight, FontSize } from "../tokens";
+import Theme, { BackgroundColorSet } from "../themes/theme";
+import { fontFamilies, fontSizes, FontWeight } from "../tokens";
import { Color } from "../utils/color";
export type TextColor = keyof Theme["textColor"];
-export interface Text {
- family: FontFamily,
- color: Color,
- size: FontSize,
- weight?: FontWeight,
- underline?: boolean,
-}
export function text(
theme: Theme,
fontFamily: keyof typeof fontFamilies,
@@ -20,18 +13,20 @@ export function text(
weight?: FontWeight;
underline?: boolean;
}
-): Text {
- let extraProperties = {
- ...properties,
- size: fontSizes[properties.size || "sm"].value,
- };
+) {
+ let size = fontSizes[properties?.size || "sm"].value;
return {
family: fontFamilies[fontFamily].value,
color: theme.textColor[color].value,
- ...extraProperties,
+ ...properties,
+ size,
};
}
+export function textColor(theme: Theme, color: TextColor) {
+ return theme.textColor[color].value;
+}
+export type BorderColor = keyof Theme["borderColor"];
export interface BorderOptions {
width?: number;
top?: boolean;
@@ -42,7 +37,7 @@ export interface BorderOptions {
}
export function border(
theme: Theme,
- color: keyof Theme["borderColor"],
+ color: BorderColor,
options?: BorderOptions
) {
return {
@@ -51,25 +46,25 @@ export function border(
...options,
};
}
-
-export function borderColor(theme: Theme, color: keyof Theme["borderColor"]) {
+export function borderColor(theme: Theme, color: BorderColor) {
return theme.borderColor[color].value;
}
-export function iconColor(theme: Theme, color: keyof Theme["iconColor"]) {
+export type IconColor = keyof Theme["iconColor"];
+export function iconColor(theme: Theme, color: IconColor) {
return theme.iconColor[color].value;
}
+export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
export interface Player {
selection: {
cursor: Color;
selection: Color;
};
}
-
export function player(
theme: Theme,
- playerNumber: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+ playerNumber: PlayerIndex,
): Player {
return {
selection: {
@@ -79,10 +74,12 @@ export function player(
};
}
+export type BackgroundColor = keyof Theme["backgroundColor"];
+export type BackgroundState = keyof BackgroundColorSet;
export function backgroundColor(
theme: Theme,
- name: keyof Theme["backgroundColor"],
- state?: keyof BackgroundColor
+ name: BackgroundColor,
+ state?: BackgroundState,
): Color {
return theme.backgroundColor[name][state || "base"].value;
}
@@ -1,6 +1,6 @@
import Theme from "../themes/theme";
import { panel } from "./app";
-import { borderColor, text } from "./components";
+import { backgroundColor, borderColor, text } from "./components";
export default function(theme: Theme) {
const project = {
@@ -11,7 +11,7 @@ export default function(theme: Theme) {
width: 14,
},
name: {
- ...text(theme, "mono", "secondary"),
+ ...text(theme, "mono", "placeholder", { size: "sm" }),
margin: {
right: 6,
},
@@ -23,9 +23,11 @@ export default function(theme: Theme) {
const sharedProject = {
...project,
+ background: backgroundColor(theme, 300),
+ cornerRadius: 6,
name: {
...project.name,
- ...text(theme, "mono", "primary"),
+ ...text(theme, "mono", "secondary", { size: "sm" }),
},
};
@@ -39,7 +41,7 @@ export default function(theme: Theme) {
width: 18,
},
hostUsername: {
- ...text(theme, "mono", "muted"),
+ ...text(theme, "mono", "primary", { size: "sm" }),
padding: {
left: 8,
},
@@ -48,13 +50,12 @@ export default function(theme: Theme) {
sharedProject,
hoveredSharedProject: {
...sharedProject,
- background: theme.editor.line.active.value,
+ background: backgroundColor(theme, 300, "hovered"),
cornerRadius: 6,
},
unsharedProject: project,
hoveredUnsharedProject: {
...project,
- background: theme.editor.line.active.value,
cornerRadius: 6,
},
}
@@ -27,7 +27,7 @@ export default function search(theme: Theme) {
placeholderText: text(theme, "mono", "placeholder"),
selection: player(theme, 1).selection,
text: text(theme, "mono", "primary"),
- border: border(theme, "primary"),
+ border: border(theme, "secondary"),
margin: {
right: 5,
},
@@ -79,7 +79,7 @@ export default function workspace(theme: Theme) {
border: border(theme, "primary", { left: true }),
},
paneDivider: {
- color: border(theme, "primary").color,
+ color: border(theme, "secondary").color,
width: 1,
},
status_bar: {
@@ -98,7 +98,7 @@ export default function workspace(theme: Theme) {
height: 32,
background: backgroundColor(theme, 100),
shareIconColor: iconColor(theme, "secondary"),
- shareIconActiveColor: iconColor(theme, "active"),
+ shareIconActiveColor: iconColor(theme, "feature"),
title: text(theme, "sans", "primary"),
avatar: {
cornerRadius: 10,
@@ -1,4 +1,4 @@
-import { Color, colors, fontWeights, NumberToken } from "../tokens";
+import { colors, fontWeights, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
@@ -49,8 +49,8 @@ const backgroundColor = {
const borderColor = {
primary: colors.neutral[875],
- secondary: colors.neutral[825],
- muted: colors.neutral[775],
+ secondary: colors.neutral[775],
+ muted: colors.neutral[675],
focused: colors.neutral[500],
active: colors.neutral[900],
ok: colors.green[500],
@@ -62,8 +62,8 @@ const borderColor = {
const textColor = {
primary: colors.neutral[50],
secondary: colors.neutral[350],
- muted: colors.neutral[550],
- placeholder: colors.neutral[750],
+ muted: colors.neutral[450],
+ placeholder: colors.neutral[650],
active: colors.neutral[0],
//TODO: (design) define feature and it's correct value
feature: colors.sky[500],
@@ -1,5 +1,5 @@
import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
-import { Color, withOpacity } from "../utils/color";
+import { withOpacity } from "../utils/color";
export interface SyntaxHighlightStyle {
color: ColorToken;
@@ -21,12 +21,12 @@ export function buildPlayer(
return {
baseColor: color,
cursorColor: withOpacity(color, cursorOpacity || 1.0),
- selectionColor: withOpacity(color, selectionOpacity || 0.1),
+ selectionColor: withOpacity(color, selectionOpacity || 0.3),
borderColor: withOpacity(color, borderOpacity || 0.8),
}
}
-export interface BackgroundColor {
+export interface BackgroundColorSet {
base: ColorToken;
hovered: ColorToken;
active: ColorToken;
@@ -55,19 +55,18 @@ export interface Syntax {
emphasisStrong: SyntaxHighlightStyle;
linkUrl: SyntaxHighlightStyle;
linkText: SyntaxHighlightStyle;
- listMarker: SyntaxHighlightStyle;
};
export default interface Theme {
name: string;
backgroundColor: {
- 100: BackgroundColor;
- 300: BackgroundColor;
- 500: BackgroundColor;
- ok: BackgroundColor;
- error: BackgroundColor;
- warning: BackgroundColor;
- info: BackgroundColor;
+ 100: BackgroundColorSet;
+ 300: BackgroundColorSet;
+ 500: BackgroundColorSet;
+ ok: BackgroundColorSet;
+ error: BackgroundColorSet;
+ warning: BackgroundColorSet;
+ info: BackgroundColorSet;
};
borderColor: {
primary: ColorToken;