zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-25 08:55: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
parent f633e98081
commit ffc271e100
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"),