Update dark, light themes.

This commit is contained in:
Nate Butler 2022-04-03 21:15:14 -04:00
parent 2d51b103d2
commit b6f85e4895
7 changed files with 230 additions and 160 deletions

View File

@ -18,7 +18,7 @@
},
"highlight_text": {
"family": "Zed Sans",
"color": "#2db4f3",
"color": "#1096d3",
"weight": "bold",
"size": 14
}
@ -38,7 +38,7 @@
},
"highlight_text": {
"family": "Zed Sans",
"color": "#2db4f3",
"color": "#1096d3",
"weight": "bold",
"size": 14
},
@ -70,8 +70,8 @@
"size": 14
},
"selection": {
"cursor": "#4287f6",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#103063"
},
"text": {
"family": "Zed Mono",
@ -111,8 +111,8 @@
"background": "#1c1c1c",
"icon_close": "#555555",
"icon_close_active": "#ffffff",
"icon_conflict": "#f7b241",
"icon_dirty": "#4287f6",
"icon_conflict": "#f6a724",
"icon_dirty": "#135acd",
"icon_width": 8,
"spacing": 10,
"text": {
@ -137,8 +137,8 @@
"background": "#000000",
"icon_close": "#555555",
"icon_close_active": "#ffffff",
"icon_conflict": "#f7b241",
"icon_dirty": "#4287f6",
"icon_conflict": "#f6a724",
"icon_dirty": "#135acd",
"icon_width": 8,
"spacing": 10,
"text": {
@ -289,7 +289,7 @@
},
"outdated_warning": {
"family": "Zed Sans",
"color": "#f8c570",
"color": "#f7bb57",
"size": 13
}
},
@ -297,7 +297,7 @@
"height": 34,
"background": "#000000",
"border": {
"color": "#070707",
"color": "#151515",
"width": 1,
"bottom": true
},
@ -325,54 +325,54 @@
}
},
"editor": {
"text_color": "#f1f1f1",
"text_color": "#d5d5d5",
"background": "#000000",
"active_line_background": "#0e0e0e",
"code_actions_indicator": "#9c9c9c",
"diff_background_deleted": "#f78c8c",
"diff_background_inserted": "#22c55e",
"document_highlight_read_background": "#777af4",
"document_highlight_write_background": "#777af4",
"error_color": "#f78c8c",
"diff_background_deleted": "#f15656",
"diff_background_inserted": "#1b9447",
"document_highlight_read_background": "#2b2b2b",
"document_highlight_write_background": "#2b2b2b",
"error_color": "#f15656",
"gutter_background": "#000000",
"gutter_padding_factor": 2.5,
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#070707",
"line_number": "#636363",
"line_number_active": "#ffffff",
"rename_fade": 0.6,
"unnecessary_code_fade": 0.5,
"selection": {
"cursor": "#4287f6",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#103063"
},
"guest_selections": [
{
"cursor": "#87d116",
"selection": "#dbf9ac"
"cursor": "#79ba16",
"selection": "#38530f"
},
{
"cursor": "#777af4",
"selection": "#d4d5fd"
"cursor": "#484bed",
"selection": "#121269"
},
{
"cursor": "#f98a3d",
"selection": "#fde0cd"
"cursor": "#ee670a",
"selection": "#5d2f0e"
},
{
"cursor": "#b671f8",
"selection": "#e9d4fd"
"cursor": "#993bf3",
"selection": "#3e1169"
},
{
"cursor": "#16ddc7",
"selection": "#b4faf2"
"cursor": "#16d6c1",
"selection": "#0e4f48"
},
{
"cursor": "#f58ac0",
"selection": "#fcd4e8"
"cursor": "#ef59a3",
"selection": "#fbc6e1"
},
{
"cursor": "#f6bc09",
"selection": "#fceabc"
"cursor": "#f7bf17",
"selection": "#fce9b7"
}
],
"autocomplete": {
@ -406,7 +406,7 @@
"left": -14
},
"match_highlight": {
"color": "#59c3f5",
"color": "#4f8ff7",
"weight": "normal"
},
"selected_item": {
@ -481,12 +481,12 @@
"message": {
"text": {
"family": "Zed Sans",
"color": "#f78c8c",
"color": "#f15656",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
"color": "#f78c8c",
"color": "#f15656",
"size": 14,
"weight": "bold"
}
@ -504,12 +504,12 @@
"message": {
"text": {
"family": "Zed Sans",
"color": "#f8c570",
"color": "#f7bb57",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
"color": "#f8c570",
"color": "#f7bb57",
"size": 14,
"weight": "bold"
}
@ -527,12 +527,12 @@
"message": {
"text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"size": 14,
"weight": "bold"
}
@ -550,12 +550,12 @@
"message": {
"text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"size": 14,
"weight": "bold"
}
@ -653,7 +653,35 @@
}
}
},
"syntax": {}
"syntax": {
"keyword": "#4f8ff7",
"function": "#f9da82",
"string": "#f99d5f",
"type": "#3eeeda",
"number": "#aeef4b",
"comment": "#aaaaaa",
"property": "#4f8ff7",
"variant": "#53c1f5",
"constant": "#d5d5d5",
"title": {
"color": "#de900c",
"weight": "bold"
},
"emphasis": "#1096d3",
"emphasis_strong": {
"color": "#1096d3",
"weight": "bold"
},
"link_uri": {
"color": "#79ba16",
"underline": true
},
"link_text": {
"color": "#ee670a",
"italic": true
},
"list_marker": "#20b0f2"
}
},
"project_diagnostics": {
"tab_icon_spacing": 4,
@ -929,8 +957,8 @@
"size": 14
},
"selection": {
"cursor": "#4287f6",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#103063"
},
"border": {
"color": "#151515",
@ -1067,7 +1095,7 @@
}
},
"search": {
"match_background": "#87d116",
"match_background": "#0a2633",
"tab_icon_spacing": 4,
"tab_icon_width": 14,
"active_hovered_option_button": {
@ -1123,8 +1151,8 @@
"size": 16
},
"selection": {
"cursor": "#4287f6",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#103063"
},
"text": {
"family": "Zed Mono",
@ -1177,8 +1205,8 @@
"size": 16
},
"selection": {
"cursor": "#4287f6",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#103063"
},
"text": {
"family": "Zed Mono",
@ -1186,7 +1214,7 @@
"size": 16
},
"border": {
"color": "#f47171",
"color": "#eb2d2d",
"width": 1
},
"margin": {

View File

@ -18,7 +18,7 @@
},
"highlight_text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"weight": "bold",
"size": 14
}
@ -38,7 +38,7 @@
},
"highlight_text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"weight": "bold",
"size": 14
},
@ -70,8 +70,8 @@
"size": 14
},
"selection": {
"cursor": "#6099f7",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#c5dafc"
},
"text": {
"family": "Zed Mono",
@ -111,8 +111,8 @@
"background": "#f1f1f1",
"icon_close": "#555555",
"icon_close_active": "#000000",
"icon_conflict": "#f6bc09",
"icon_dirty": "#4287f6",
"icon_conflict": "#f7bf17",
"icon_dirty": "#135acd",
"icon_width": 8,
"spacing": 10,
"text": {
@ -137,8 +137,8 @@
"background": "#ffffff",
"icon_close": "#555555",
"icon_close_active": "#000000",
"icon_conflict": "#f6bc09",
"icon_dirty": "#4287f6",
"icon_conflict": "#f7bf17",
"icon_dirty": "#135acd",
"icon_width": 8,
"spacing": 10,
"text": {
@ -289,7 +289,7 @@
},
"outdated_warning": {
"family": "Zed Sans",
"color": "#e5af09",
"color": "#d3a20b",
"size": 13
}
},
@ -297,7 +297,7 @@
"height": 34,
"background": "#ffffff",
"border": {
"color": "#c6c6c6",
"color": "#e3e3e3",
"width": 1,
"bottom": true
},
@ -327,52 +327,52 @@
"editor": {
"text_color": "#2b2b2b",
"background": "#ffffff",
"active_line_background": "#e3e3e3",
"active_line_background": "#f1f1f1",
"code_actions_indicator": "#717171",
"diff_background_deleted": "#fdd4d4",
"diff_background_inserted": "#befad2",
"document_highlight_read_background": "#e3e3e3",
"document_highlight_write_background": "#e3e3e3",
"error_color": "#f47171",
"diff_background_deleted": "#fcc6c6",
"diff_background_inserted": "#b7f9ce",
"document_highlight_read_background": "#f1f1f1",
"document_highlight_write_background": "#f1f1f1",
"error_color": "#eb2d2d",
"gutter_background": "#ffffff",
"gutter_padding_factor": 2.5,
"highlighted_line_background": "#e3e3e3",
"line_number": "#808080",
"gutter_padding_factor": 3.5,
"highlighted_line_background": "#f1f1f1",
"line_number": "#aaaaaa",
"line_number_active": "#000000",
"rename_fade": 0.6,
"unnecessary_code_fade": 0.5,
"selection": {
"cursor": "#6099f7",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#c5dafc"
},
"guest_selections": [
{
"cursor": "#87d116",
"selection": "#dbf9ac"
"cursor": "#79ba16",
"selection": "#dffab5"
},
{
"cursor": "#777af4",
"selection": "#d4d5fd"
"cursor": "#484bed",
"selection": "#cdcdfc"
},
{
"cursor": "#f98a3d",
"selection": "#fde0cd"
"cursor": "#ee670a",
"selection": "#fcd6bd"
},
{
"cursor": "#b671f8",
"selection": "#e9d4fd"
"cursor": "#993bf3",
"selection": "#e4cbfc"
},
{
"cursor": "#16ddc7",
"selection": "#b4faf2"
"cursor": "#16d6c1",
"selection": "#b1faf2"
},
{
"cursor": "#f58ac0",
"selection": "#fcd4e8"
"cursor": "#ef59a3",
"selection": "#fbc6e1"
},
{
"cursor": "#f6bc09",
"selection": "#fceabc"
"cursor": "#f7bf17",
"selection": "#fce9b7"
}
],
"autocomplete": {
@ -400,13 +400,13 @@
"right": 6,
"top": 2
},
"background": "#f1f1f1"
"background": "#f8f8f8"
},
"margin": {
"left": -14
},
"match_highlight": {
"color": "#59c3f5",
"color": "#103063",
"weight": "normal"
},
"selected_item": {
@ -417,7 +417,7 @@
"right": 6,
"top": 2
},
"background": "#e3e3e3"
"background": "#f1f1f1"
}
},
"diagnostic_header": {
@ -453,7 +453,7 @@
}
},
"diagnostic_path_header": {
"background": "#e3e3e3",
"background": "#f1f1f1",
"text_scale_factor": 0.857,
"filename": {
"family": "Zed Mono",
@ -481,12 +481,12 @@
"message": {
"text": {
"family": "Zed Sans",
"color": "#f47171",
"color": "#eb2d2d",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
"color": "#f47171",
"color": "#eb2d2d",
"size": 14,
"weight": "bold"
}
@ -504,12 +504,12 @@
"message": {
"text": {
"family": "Zed Sans",
"color": "#e5af09",
"color": "#d3a20b",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
"color": "#e5af09",
"color": "#d3a20b",
"size": 14,
"weight": "bold"
}
@ -527,12 +527,12 @@
"message": {
"text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"size": 14,
"weight": "bold"
}
@ -550,12 +550,12 @@
"message": {
"text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"size": 14
},
"highlight_text": {
"family": "Zed Sans",
"color": "#6099f7",
"color": "#2472f2",
"size": 14,
"weight": "bold"
}
@ -653,7 +653,35 @@
}
}
},
"syntax": {}
"syntax": {
"keyword": "#103063",
"function": "#1b9447",
"string": "#bb550e",
"type": "#138a7d",
"number": "#14a898",
"comment": "#555555",
"property": "#134697",
"variant": "#1179a8",
"constant": "#393939",
"title": {
"color": "#1096d3",
"weight": "bold"
},
"emphasis": "#2472f2",
"emphasis_strong": {
"color": "#2472f2",
"weight": "bold"
},
"link_uri": {
"color": "#14a898",
"underline": true
},
"link_text": {
"color": "#ee670a",
"italic": true
},
"list_marker": "#20b0f2"
}
},
"project_diagnostics": {
"tab_icon_spacing": 4,
@ -929,8 +957,8 @@
"size": 14
},
"selection": {
"cursor": "#6099f7",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#c5dafc"
},
"border": {
"color": "#e3e3e3",
@ -1022,7 +1050,7 @@
"padding": {
"left": 8
},
"background": "#e3e3e3",
"background": "#f1f1f1",
"corner_radius": 6
},
"unshared_project": {
@ -1062,7 +1090,7 @@
"padding": {
"left": 8
},
"background": "#e3e3e3",
"background": "#f1f1f1",
"corner_radius": 6
}
},
@ -1123,8 +1151,8 @@
"size": 16
},
"selection": {
"cursor": "#6099f7",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#c5dafc"
},
"text": {
"family": "Zed Mono",
@ -1177,8 +1205,8 @@
"size": 16
},
"selection": {
"cursor": "#6099f7",
"selection": "#d0e2fd"
"cursor": "#2472f2",
"selection": "#c5dafc"
},
"text": {
"family": "Zed Mono",
@ -1186,7 +1214,7 @@
"size": 16
},
"border": {
"color": "#fbbdbd",
"color": "#f9a0a0",
"width": 1
},
"margin": {

View File

@ -49,7 +49,7 @@ export default function editor(theme: Theme) {
documentHighlightWriteBackground: theme.editor.highlight.occurrence.value,
errorColor: theme.textColor.error.value,
gutterBackground: backgroundColor(theme, 500),
gutterPaddingFactor: 2.5,
gutterPaddingFactor: 3.5,
highlightedLineBackground: theme.editor.line.highlighted.value,
lineNumber: theme.editor.gutter.primary.value,
lineNumberActive: theme.editor.gutter.active.value,
@ -129,7 +129,21 @@ export default function editor(theme: Theme) {
invalidInformationDiagnostic: diagnostic(theme, "muted"),
invalidWarningDiagnostic: diagnostic(theme, "muted"),
syntax: {
}
keyword: theme.syntax.keyword.color.value,
function: theme.syntax.function.color.value,
string: theme.syntax.string.color.value,
type: theme.syntax.type.color.value,
number: theme.syntax.number.color.value,
comment: theme.syntax.comment.color.value,
property: theme.syntax.property.color.value,
variant: theme.syntax.variant.color.value,
constant: theme.syntax.constant.color.value,
title: { color: theme.syntax.title.color.value, weight: "bold" },
emphasis: theme.textColor.feature.value,
"emphasis.strong": { color: theme.textColor.feature.value, weight: "bold" },
link_uri: { color: theme.syntax.linkUrl.color.value, underline: true },
link_text: { color: theme.syntax.linkText.color.value, italic: true },
list_marker: theme.syntax.listMarker.color.value,
},
};
}

View File

@ -135,7 +135,7 @@ export default function workspace(theme: Theme) {
toolbar: {
height: 34,
background: backgroundColor(theme, 500),
border: border(theme, "primary", { bottom: true }),
border: border(theme, "secondary", { bottom: true }),
itemSpacing: 8,
padding: { left: 16, right: 8, top: 4, bottom: 4 },
},

View File

@ -88,39 +88,39 @@ const iconColor = {
const player = {
1: {
baseColor: colors.blue[600],
cursorColor: colors.blue[600],
selectionColor: colors.blue[100],
borderColor: colors.blue[600],
baseColor: colors.blue[500],
cursorColor: colors.blue[500],
selectionColor: colors.blue[800],
borderColor: colors.blue[800],
},
2: {
baseColor: colors.lime[500],
cursorColor: colors.lime[500],
selectionColor: colors.lime[100],
selectionColor: colors.lime[800],
borderColor: colors.lime[500],
},
3: {
baseColor: colors.indigo[500],
cursorColor: colors.indigo[500],
selectionColor: colors.indigo[100],
selectionColor: colors.indigo[800],
borderColor: colors.indigo[500],
},
4: {
baseColor: colors.orange[500],
cursorColor: colors.orange[500],
selectionColor: colors.orange[100],
selectionColor: colors.orange[800],
borderColor: colors.orange[500],
},
5: {
baseColor: colors.purple[500],
cursorColor: colors.purple[500],
selectionColor: colors.purple[100],
selectionColor: colors.purple[800],
borderColor: colors.purple[500],
},
6: {
baseColor: colors.teal[400],
cursorColor: colors.teal[400],
selectionColor: colors.teal[100],
selectionColor: colors.teal[800],
borderColor: colors.teal[400],
},
7: {
@ -151,11 +151,11 @@ const editor = {
},
highlight: {
selection: player[1].selectionColor,
occurrence: colors.indigo[500], // TODO: Why does indigo[500], indigo[100], and indigo[900] all give me the same color? @kethku
activeOccurrence: colors.indigo[400], // TODO: We don't seem to be using this right now in rust
occurrence: colors.neutral[750],
activeOccurrence: colors.neutral[700],
matchingBracket: backgroundColor[500].active,
match: colors.lime[500],
activeMatch: colors.lime[400],
match: colors.sky[900],
activeMatch: colors.sky[800],
related: backgroundColor[500].focused,
},
gutter: {
@ -166,15 +166,15 @@ const editor = {
const syntax: Syntax = {
primary: {
color: textColor.primary,
color: colors.neutral[150],
weight: fontWeights.normal,
},
comment: {
color: colors.lime[200],
color: colors.neutral[300],
weight: fontWeights.normal,
},
punctuation: {
color: textColor.primary,
color: colors.neutral[200],
weight: fontWeights.normal,
},
constant: {
@ -182,7 +182,7 @@ const syntax: Syntax = {
weight: fontWeights.normal,
},
keyword: {
color: colors.sky[400],
color: colors.blue[400],
weight: fontWeights.normal,
},
function: {
@ -194,19 +194,19 @@ const syntax: Syntax = {
weight: fontWeights.normal,
},
variant: {
color: colors.teal[300],
weight: fontWeights.normal,
},
property: {
color: colors.sky[300],
weight: fontWeights.normal,
},
property: {
color: colors.blue[400],
weight: fontWeights.normal,
},
enum: {
color: colors.sky[400],
color: colors.orange[500],
weight: fontWeights.normal,
},
operator: {
color: colors.sky[400],
color: colors.orange[500],
weight: fontWeights.normal,
},
string: {
@ -214,11 +214,11 @@ const syntax: Syntax = {
weight: fontWeights.normal,
},
number: {
color: colors.neutral[150],
color: colors.lime[300],
weight: fontWeights.normal,
},
boolean: {
color: colors.neutral[150],
color: colors.lime[300],
weight: fontWeights.normal,
},
predictive: {
@ -226,7 +226,7 @@ const syntax: Syntax = {
weight: fontWeights.normal,
},
title: {
color: colors.sky[500],
color: colors.amber[500],
weight: fontWeights.bold,
},
emphasis: {

View File

@ -18,9 +18,9 @@ const backgroundColor = {
},
500: {
base: colors.neutral[0],
hovered: colors.neutral[50],
active: colors.neutral[100],
focused: colors.neutral[50],
hovered: colors.neutral[25],
active: colors.neutral[50],
focused: colors.neutral[75],
},
ok: {
base: colors.green[100],
@ -159,66 +159,66 @@ const editor = {
related: colors.neutral[0],
},
gutter: {
primary: textColor.muted,
primary: colors.neutral[300],
active: textColor.active,
},
};
const syntax: Syntax = {
primary: {
color: textColor.primary,
color: colors.neutral[750],
weight: fontWeights.normal,
},
comment: {
color: colors.lime[200],
color: colors.neutral[600],
weight: fontWeights.normal,
},
punctuation: {
color: textColor.primary,
color: colors.neutral[700],
weight: fontWeights.normal,
},
constant: {
color: colors.neutral[150],
color: colors.neutral[700],
weight: fontWeights.normal,
},
keyword: {
color: colors.sky[400],
color: colors.blue[800],
weight: fontWeights.normal,
},
function: {
color: colors.yellow[200],
color: colors.green[600],
weight: fontWeights.normal,
},
type: {
color: colors.teal[300],
color: colors.teal[600],
weight: fontWeights.normal,
},
variant: {
color: colors.teal[300],
color: colors.sky[600],
weight: fontWeights.normal,
},
property: {
color: colors.sky[300],
color: colors.blue[700],
weight: fontWeights.normal,
},
enum: {
color: colors.sky[400],
color: colors.orange[600],
weight: fontWeights.normal,
},
operator: {
color: colors.sky[400],
color: colors.orange[600],
weight: fontWeights.normal,
},
string: {
color: colors.orange[300],
color: colors.orange[600],
weight: fontWeights.normal,
},
number: {
color: colors.neutral[150],
color: colors.teal[500],
weight: fontWeights.normal,
},
boolean: {
color: colors.neutral[150],
color: colors.amber[600],
weight: fontWeights.normal,
},
predictive: {
@ -238,7 +238,7 @@ const syntax: Syntax = {
weight: fontWeights.bold,
},
linkUrl: {
color: colors.lime[500],
color: colors.teal[500],
weight: fontWeights.normal,
// TODO: add underline
},

View File

@ -17,14 +17,14 @@ export function colorRamp(
} else {
let hue = Math.round(chroma(color).hsl()[0]);
let startColor = chroma.hsl(hue, 0.88, 0.96);
let endColor = chroma.hsl(hue, 0.68, 0.32);
let endColor = chroma.hsl(hue, 0.68, 0.12);
scale = chroma
.scale([startColor, color, endColor])
.domain([0, 0.5, 1])
.mode("hsl")
.gamma(1)
.correctLightness(true)
.padding([0, 0.15]);
// .correctLightness(true)
.padding([0, 0]);
}
const ramp: ColorRamp = {};