zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-28 19:54:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Nate Butler 2022-04-01 23:58:04 -04:00 committed by Keith Simmons
parent c812adde7f
commit 381d50bac6
11 changed files with 576 additions and 562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

351
crates/zed/assets/themes/dark.json
View File

File diff suppressed because it is too large Load Diff

411
crates/zed/assets/themes/light.json
View File

File diff suppressed because it is too large Load Diff

2
styles/buildThemes.ts
View File

@ -1,8 +1,8 @@
import * as fs from "fs"; import * as fs from "fs";
import * as path from "path"; import * as path from "path";
import app from "./styleTree/app";
import dark from "./themes/dark"; import dark from "./themes/dark";
import light from "./themes/light"; import light from "./themes/light";
import app from "./styleTree/app";
import decamelizeTree from "./utils/decamelizeTree"; import decamelizeTree from "./utils/decamelizeTree";
const themes = [dark, light]; const themes = [dark, light];

8
styles/styleTree/chatPanel.ts
View File

@ -31,7 +31,7 @@ export default function chatPanel(theme: Theme) {
const message = { const message = {
body: text(theme, "sans", "secondary"), body: text(theme, "sans", "secondary"),
timestamp: text(theme, "sans", "muted"), timestamp: text(theme, "sans", "muted", { size: "sm" }),
padding: { padding: {
bottom: 6, bottom: 6,
}, },
@ -91,12 +91,12 @@ export default function chatPanel(theme: Theme) {
}, },
}, },
inputEditor: { inputEditor: {
background: backgroundColor(theme, 300), background: backgroundColor(theme, 500),
cornerRadius: 6, cornerRadius: 6,
text: text(theme, "mono", "primary"), text: text(theme, "mono", "primary"),
placeholderText: text(theme, "mono", "muted"), placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
selection: player(theme, 1).selection, selection: player(theme, 1).selection,
border: border(theme, "primary"), border: border(theme, "secondary"),
padding: { padding: {
bottom: 7, bottom: 7,
left: 8, left: 8,

14
styles/styleTree/editor.ts
View File

@ -5,7 +5,7 @@ import {
iconColor, iconColor,
player, player,
text, text,
TextColor, TextColor
} from "./components"; } from "./components";
export default function editor(theme: Theme) { export default function editor(theme: Theme) {
@ -39,7 +39,7 @@ export default function editor(theme: Theme) {
return { return {
textColor: theme.textColor.secondary.value, textColor: theme.textColor.secondary.value,
background: backgroundColor(theme, 300), background: backgroundColor(theme, 500),
activeLineBackground: theme.editor.line.active.value, activeLineBackground: theme.editor.line.active.value,
codeActionsIndicator: iconColor(theme, "secondary"), codeActionsIndicator: iconColor(theme, "secondary"),
diffBackgroundDeleted: backgroundColor(theme, "error"), diffBackgroundDeleted: backgroundColor(theme, "error"),
@ -47,7 +47,7 @@ export default function editor(theme: Theme) {
documentHighlightReadBackground: theme.editor.highlight.occurrence.value, documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
documentHighlightWriteBackground: theme.editor.highlight.occurrence.value, documentHighlightWriteBackground: theme.editor.highlight.occurrence.value,
errorColor: theme.textColor.error.value, errorColor: theme.textColor.error.value,
gutterBackground: backgroundColor(theme, 300), gutterBackground: backgroundColor(theme, 500),
gutterPaddingFactor: 2.5, gutterPaddingFactor: 2.5,
highlightedLineBackground: theme.editor.line.highlighted.value, highlightedLineBackground: theme.editor.line.highlighted.value,
lineNumber: theme.editor.gutter.primary.value, lineNumber: theme.editor.gutter.primary.value,
@ -65,14 +65,14 @@ export default function editor(theme: Theme) {
player(theme, 8).selection, player(theme, 8).selection,
], ],
autocomplete: { autocomplete: {
background: backgroundColor(theme, 100), background: backgroundColor(theme, 500),
cornerRadius: 6, cornerRadius: 6,
padding: 6, padding: 6,
border: border(theme, "secondary"), border: border(theme, "secondary"),
item: autocompleteItem, item: autocompleteItem,
hoveredItem: { hoveredItem: {
...autocompleteItem, ...autocompleteItem,
background: backgroundColor(theme, 100, "hovered"), background: backgroundColor(theme, 500, "hovered"),
}, },
margin: { margin: {
left: -14, left: -14,
@ -83,11 +83,11 @@ export default function editor(theme: Theme) {
}, },
selectedItem: { selectedItem: {
...autocompleteItem, ...autocompleteItem,
background: backgroundColor(theme, 100, "active"), background: backgroundColor(theme, 500, "active"),
}, },
}, },
diagnosticHeader: { diagnosticHeader: {
background: theme.editor.background.value, background: backgroundColor(theme, 300),
iconWidthFactor: 1.5, iconWidthFactor: 1.5,
textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these. textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
border: border(theme, "secondary", { border: border(theme, "secondary", {

7
styles/styleTree/projectPanel.ts
View File

@ -1,7 +1,7 @@
import { panel } from "./app";
import { backgroundColor, iconColor, text, TextColor } from "./components";
import Theme from "../themes/theme"; import Theme from "../themes/theme";
import { Color } from "../utils/color"; import { Color } from "../utils/color";
import { panel } from "./app";
import { backgroundColor, iconColor, text, TextColor } from "./components";
export default function projectPanel(theme: Theme) { export default function projectPanel(theme: Theme) {
function entry(theme: Theme, textColor: TextColor, background?: Color) { function entry(theme: Theme, textColor: TextColor, background?: Color) {
@ -11,7 +11,7 @@ export default function projectPanel(theme: Theme) {
iconColor: iconColor(theme, "muted"), iconColor: iconColor(theme, "muted"),
iconSize: 8, iconSize: 8,
iconSpacing: 8, iconSpacing: 8,
text: text(theme, "mono", textColor), text: text(theme, "mono", textColor, { size: "sm" }),
}; };
} }
@ -31,6 +31,7 @@ export default function projectPanel(theme: Theme) {
), ),
padding: { padding: {
top: 6, top: 6,
left: 12,
}, },
}; };
} }

29
styles/styleTree/workspace.ts
View File

@ -12,14 +12,15 @@ export default function workspace(theme: Theme) {
}; };
const tab = { const tab = {
height: 34, height: 32,
background: backgroundColor(theme, 300),
iconClose: iconColor(theme, "secondary"), iconClose: iconColor(theme, "secondary"),
iconCloseActive: iconColor(theme, "active"), iconCloseActive: iconColor(theme, "active"),
iconConflict: iconColor(theme, "warning"), iconConflict: iconColor(theme, "warning"),
iconDirty: iconColor(theme, "info"), iconDirty: iconColor(theme, "info"),
iconWidth: 8, iconWidth: 8,
spacing: 10, spacing: 10,
text: text(theme, "mono", "secondary"), text: text(theme, "mono", "secondary", { size: "sm" }),
border: border(theme, "primary", { border: border(theme, "primary", {
left: true, left: true,
bottom: true, bottom: true,
@ -33,8 +34,8 @@ export default function workspace(theme: Theme) {
const activeTab = { const activeTab = {
...tab, ...tab,
background: backgroundColor(theme, 300), background: backgroundColor(theme, 500),
text: text(theme, "mono", "primary"), text: text(theme, "mono", "active", { size: "sm" }),
border: { border: {
...tab.border, ...tab.border,
bottom: false, bottom: false,
@ -48,11 +49,12 @@ export default function workspace(theme: Theme) {
}; };
const sidebar = { const sidebar = {
width: 30, width: 30,
background: backgroundColor(theme, 300),
border: border(theme, "primary", { right: true }), border: border(theme, "primary", { right: true }),
item: sidebarItem, item: sidebarItem,
activeItem: { activeItem: {
...sidebarItem, ...sidebarItem,
iconColor: iconColor(theme, "primary"), iconColor: iconColor(theme, "active"),
}, },
resizeHandle: { resizeHandle: {
background: border(theme, "primary").color, background: border(theme, "primary").color,
@ -63,7 +65,7 @@ export default function workspace(theme: Theme) {
}; };
return { return {
background: backgroundColor(theme, 500), background: backgroundColor(theme, 300),
leaderBorderOpacity: 0.7, leaderBorderOpacity: 0.7,
leaderBorderWidth: 2.0, leaderBorderWidth: 2.0,
tab, tab,
@ -94,6 +96,7 @@ export default function workspace(theme: Theme) {
titlebar: { titlebar: {
avatarWidth: 18, avatarWidth: 18,
height: 32, height: 32,
background: backgroundColor(theme, 100),
shareIconColor: iconColor(theme, "secondary"), shareIconColor: iconColor(theme, "secondary"),
shareIconActiveColor: iconColor(theme, "active"), shareIconActiveColor: iconColor(theme, "active"),
title: text(theme, "sans", "primary"), title: text(theme, "sans", "primary"),
@ -107,29 +110,32 @@ export default function workspace(theme: Theme) {
avatarRibbon: { avatarRibbon: {
height: 3, height: 3,
width: 12, width: 12,
// TODO: The background for this ideally should be
// set with a token, not hardcoded in rust
}, },
border: border(theme, "primary", { bottom: true }), border: border(theme, "primary", { bottom: true }),
signInPrompt, signInPrompt,
hoveredSignInPrompt: { hoveredSignInPrompt: {
...signInPrompt, ...signInPrompt,
...text(theme, "mono", "active"), ...text(theme, "mono", "active"),
size: 13,
}, },
offlineIcon: { offlineIcon: {
color: iconColor(theme, "muted"), color: iconColor(theme, "secondary"),
width: 16, width: 16,
padding: { padding: {
right: 4, right: 4,
}, },
}, },
outdatedWarning: { outdatedWarning: {
...text(theme, "sans", "muted"), ...text(theme, "sans", "warning"),
size: 13, size: 13,
}, },
}, },
toolbar: { toolbar: {
height: 34, height: 34,
background: backgroundColor(theme, 300), background: backgroundColor(theme, 500),
border: border(theme, "primary", { bottom: true }), border: border(theme, "muted", { bottom: true }),
itemSpacing: 8, itemSpacing: 8,
padding: { left: 16, right: 8, top: 4, bottom: 4 }, padding: { left: 16, right: 8, top: 4, bottom: 4 },
}, },
@ -138,8 +144,7 @@ export default function workspace(theme: Theme) {
padding: { left: 6 }, padding: { left: 6 },
}, },
disconnectedOverlay: { disconnectedOverlay: {
...text(theme, "sans", "primary"), ...text(theme, "sans", "active"),
color: "#ffffff",
background: "#000000aa", background: "#000000aa",
}, },
}; };

24
styles/themes/dark.ts
View File

@ -3,10 +3,10 @@ import Theme, { Syntax } from "./theme";
const backgroundColor = { const backgroundColor = {
100: { 100: {
base: colors.neutral[750], base: colors.neutral[700],
hovered: colors.neutral[750], hovered: colors.neutral[700],
active: colors.neutral[750], active: colors.neutral[700],
focused: colors.neutral[750], focused: colors.neutral[700],
}, },
300: { 300: {
base: colors.neutral[800], base: colors.neutral[800],
@ -52,10 +52,10 @@ const borderColor = {
muted: colors.neutral[750], muted: colors.neutral[750],
focused: colors.neutral[100], focused: colors.neutral[100],
active: colors.neutral[500], active: colors.neutral[500],
ok: colors.neutral[1000], ok: colors.green[500],
error: colors.neutral[1000], error: colors.red[500],
warning: colors.neutral[1000], warning: colors.amber[500],
info: colors.neutral[1000], info: colors.blue[500],
}; };
const textColor = { const textColor = {
@ -65,7 +65,7 @@ const textColor = {
placeholder: colors.neutral[750], placeholder: colors.neutral[750],
active: colors.neutral[0], active: colors.neutral[0],
//TODO: (design) define feature and it's correct value //TODO: (design) define feature and it's correct value
feature: colors.sky[500], feature: colors.lime[400],
ok: colors.green[600], ok: colors.green[600],
error: colors.red[400], error: colors.red[400],
warning: colors.amber[300], warning: colors.amber[300],
@ -81,9 +81,9 @@ const iconColor = {
//TODO: (design) define feature and it's correct value //TODO: (design) define feature and it's correct value
feature: colors.sky[500], feature: colors.sky[500],
ok: colors.green[600], ok: colors.green[600],
error: colors.red[400], error: colors.red[500],
warning: colors.amber[300], warning: colors.amber[400],
info: colors.blue[500], info: colors.blue[600],
}; };
const player = { const player = {

288
styles/themes/light.ts
View File

@ -5,73 +5,72 @@ import Theme, { Syntax } from "./theme";
const backgroundColor = { const backgroundColor = {
100: { 100: {
base: colors.neutral[750], base: colors.neutral[100],
hovered: colors.neutral[750], hovered: colors.neutral[150],
active: colors.neutral[750], active: colors.neutral[200],
focused: colors.neutral[750], focused: colors.neutral[150],
}, },
300: { 300: {
base: colors.neutral[800], base: colors.neutral[50],
hovered: colors.neutral[800], hovered: colors.neutral[100],
active: colors.neutral[800], active: colors.neutral[150],
focused: colors.neutral[800], focused: colors.neutral[100],
}, },
500: { 500: {
base: colors.neutral[900], base: colors.neutral[0],
hovered: colors.neutral[900], hovered: colors.neutral[50],
active: colors.neutral[900], active: colors.neutral[100],
focused: colors.neutral[900], focused: colors.neutral[50],
}, },
ok: { ok: {
base: colors.green[600], base: colors.green[100],
hovered: colors.green[600], hovered: colors.green[100],
active: colors.green[600], active: colors.green[100],
focused: colors.green[600], focused: colors.green[100],
}, },
error: { error: {
base: colors.red[400], base: colors.red[100],
hovered: colors.red[400], hovered: colors.red[100],
active: colors.red[400], active: colors.red[100],
focused: colors.red[400], focused: colors.red[100],
}, },
warning: { warning: {
base: colors.amber[300], base: colors.yellow[100],
hovered: colors.amber[300], hovered: colors.yellow[100],
active: colors.amber[300], active: colors.yellow[100],
focused: colors.amber[300], focused: colors.yellow[100],
}, },
info: { info: {
base: colors.blue[500], base: colors.blue[100],
hovered: colors.blue[500], hovered: colors.blue[100],
active: colors.blue[500], active: colors.blue[100],
focused: colors.blue[500], focused: colors.blue[100],
}, },
}; };
const borderColor = { const borderColor = {
primary: colors.neutral[850], primary: colors.neutral[200],
secondary: colors.neutral[700], secondary: colors.neutral[100],
muted: colors.neutral[750], muted: colors.neutral[50],
focused: colors.neutral[100], focused: colors.neutral[100],
active: colors.neutral[500], active: colors.neutral[250],
ok: colors.neutral[1000], ok: colors.green[200],
error: colors.neutral[1000], error: colors.red[200],
warning: colors.neutral[1000], warning: colors.yellow[200],
info: colors.neutral[1000], info: colors.blue[200],
}; };
const textColor = { const textColor = {
primary: colors.neutral[150], primary: colors.neutral[800],
secondary: colors.neutral[350], secondary: colors.neutral[700],
muted: colors.neutral[550], muted: colors.neutral[600],
placeholder: colors.neutral[750], placeholder: colors.neutral[500],
active: colors.neutral[0], active: colors.neutral[900],
//TODO: (design) define feature and it's correct value feature: colors.blue[600],
feature: colors.sky[500], ok: colors.green[800],
ok: colors.green[600], error: colors.red[800],
error: colors.red[400], warning: colors.yellow[800],
warning: colors.amber[300], info: colors.blue[800],
info: colors.blue[500],
}; };
const iconColor = { const iconColor = {
@ -79,63 +78,62 @@ const iconColor = {
secondary: colors.neutral[500], secondary: colors.neutral[500],
muted: colors.neutral[600], muted: colors.neutral[600],
placeholder: colors.neutral[700], placeholder: colors.neutral[700],
active: colors.neutral[50], active: colors.neutral[900],
//TODO: (design) define feature and it's correct value feature: colors.sky[600],
feature: colors.sky[500],
ok: colors.green[600], ok: colors.green[600],
error: colors.red[400], error: colors.red[600],
warning: colors.amber[300], warning: colors.yellow[400],
info: colors.blue[500], info: colors.blue[600],
}; };
const player = { const player = {
1: { 1: {
baseColor: colors.blue[600], baseColor: colors.blue[600],
cursorColor: colors.blue[600], cursorColor: colors.blue[500],
selectionColor: colors.blue[600], selectionColor: colors.blue[100],
borderColor: colors.blue[600], borderColor: colors.blue[500],
}, },
2: { 2: {
baseColor: colors.indigo[500], baseColor: colors.indigo[500],
cursorColor: colors.indigo[500], cursorColor: colors.indigo[500],
selectionColor: colors.indigo[500], selectionColor: colors.indigo[100],
borderColor: colors.indigo[500], borderColor: colors.indigo[500],
}, },
3: { 3: {
baseColor: colors.green[500], baseColor: colors.green[500],
cursorColor: colors.green[500], cursorColor: colors.green[500],
selectionColor: colors.green[500], selectionColor: colors.green[100],
borderColor: colors.green[500], borderColor: colors.green[500],
}, },
4: { 4: {
baseColor: colors.orange[500], baseColor: colors.orange[500],
cursorColor: colors.orange[500], cursorColor: colors.orange[500],
selectionColor: colors.orange[500], selectionColor: colors.orange[100],
borderColor: colors.orange[500], borderColor: colors.orange[500],
}, },
5: { 5: {
baseColor: colors.purple[500], baseColor: colors.purple[500],
cursorColor: colors.purple[500], cursorColor: colors.purple[500],
selectionColor: colors.purple[500], selectionColor: colors.purple[100],
borderColor: colors.purple[500], borderColor: colors.purple[500],
}, },
6: { 6: {
baseColor: colors.teal[400], baseColor: colors.teal[400],
cursorColor: colors.teal[400], cursorColor: colors.teal[400],
selectionColor: colors.teal[400], selectionColor: colors.teal[100],
borderColor: colors.teal[400], borderColor: colors.teal[400],
}, },
7: { 7: {
baseColor: colors.pink[400], baseColor: colors.pink[400],
cursorColor: colors.pink[400], cursorColor: colors.pink[400],
selectionColor: colors.pink[400], selectionColor: colors.pink[100],
borderColor: colors.pink[400], borderColor: colors.pink[400],
}, },
8: { 8: {
baseColor: colors.yellow[400], baseColor: colors.yellow[400],
cursorColor: colors.yellow[400], cursorColor: colors.yellow[400],
selectionColor: colors.yellow[400], selectionColor: colors.yellow[100],
borderColor: colors.yellow[400], borderColor: colors.yellow[400],
}, },
}; };
@ -145,118 +143,118 @@ const editor = {
indent_guide: borderColor.muted, indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary, indent_guide_active: borderColor.secondary,
line: { line: {
active: colors.neutral[0], active: colors.neutral[0],
highlighted: colors.neutral[0], highlighted: colors.neutral[0],
inserted: backgroundColor.ok.active, inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active, deleted: backgroundColor.error.active,
modified: backgroundColor.info.active, modified: backgroundColor.info.active,
}, },
highlight: { highlight: {
selection: player[1].selectionColor, selection: player[1].selectionColor,
occurrence: backgroundColor[500].active, occurrence: backgroundColor[500].active,
activeOccurrence: colors.neutral[0], activeOccurrence: colors.neutral[0],
matchingBracket: colors.neutral[0], matchingBracket: colors.neutral[0],
match: colors.neutral[0], match: colors.neutral[0],
activeMatch: colors.neutral[0], activeMatch: colors.neutral[0],
related: colors.neutral[0], related: colors.neutral[0],
}, },
gutter: { gutter: {
primary: colors.neutral[0], primary: colors.neutral[0],
active: colors.neutral[0], active: colors.neutral[0],
}, },
}; };
const syntax: Syntax = { const syntax: Syntax = {
primary: { primary: {
color: textColor.primary, color: textColor.primary,
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
comment: { comment: {
color: colors.lime[200], color: colors.lime[200],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
punctuation: { punctuation: {
color: textColor.primary, color: textColor.primary,
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
constant: { constant: {
color: colors.neutral[150], color: colors.neutral[150],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
keyword: { keyword: {
color: colors.sky[400], color: colors.sky[400],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
function: { function: {
color: colors.yellow[200], color: colors.yellow[200],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
type: { type: {
color: colors.teal[300], color: colors.teal[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
variant: { variant: {
color: colors.teal[300], color: colors.teal[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
property: { property: {
color: colors.sky[300], color: colors.sky[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
enum: { enum: {
color: colors.sky[400], color: colors.sky[400],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
operator: { operator: {
color: colors.sky[400], color: colors.sky[400],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
string: { string: {
color: colors.orange[300], color: colors.orange[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
number: { number: {
color: colors.neutral[150], color: colors.neutral[150],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
boolean: { boolean: {
color: colors.neutral[150], color: colors.neutral[150],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
predictive: { predictive: {
color: textColor.muted, color: textColor.muted,
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
title: { title: {
color: colors.sky[500], color: colors.sky[500],
weight: fontWeights.bold, weight: fontWeights.bold,
}, },
emphasis: { emphasis: {
color: textColor.active, color: textColor.active,
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
emphasisStrong: { emphasisStrong: {
color: textColor.active, color: textColor.active,
weight: fontWeights.bold, weight: fontWeights.bold,
}, },
linkUrl: { linkUrl: {
color: colors.lime[500], color: colors.lime[500],
weight: fontWeights.normal, weight: fontWeights.normal,
// TODO: add underline // TODO: add underline
}, },
linkText: { linkText: {
color: colors.orange[500], color: colors.orange[500],
weight: fontWeights.normal, weight: fontWeights.normal,
// TODO: add italic // TODO: add italic
}, },
listMarker: { listMarker: {
color: colors.sky[400], color: colors.sky[400],
weight: fontWeights.normal, weight: fontWeights.normal,
} },
}; };
const shadowAlpha: NumberToken = { const shadowAlpha: NumberToken = {
value: 0.32, value: 0.12,
type: "number", type: "number",
}; };

2
styles/themes/theme.ts
View File

@ -1,4 +1,4 @@
import { FontWeightToken, ColorToken, NumberToken } from "../tokens"; import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
export interface SyntaxHighlightStyle { export interface SyntaxHighlightStyle {
color: ColorToken; color: ColorToken;

2
styles/tokens.ts
View File

@ -72,7 +72,7 @@ export interface ColorToken {
step?: number, step?: number,
} }
export const colors = { export const colors = {
neutral: colorRamp(["black", "white"], { steps: 21, increment: 50 }), neutral: colorRamp(["white", "black"], { steps: 19, increment: 50 }),
rose: colorRamp("#F43F5EFF"), rose: colorRamp("#F43F5EFF"),
red: colorRamp("#EF4444FF"), red: colorRamp("#EF4444FF"),
orange: colorRamp("#F97316FF"), orange: colorRamp("#F97316FF"),