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

wip

Browse Source
This commit is contained in:
Keith Simmons 2022-03-31 19:05:21 -07:00
parent e3366c490e
commit ce8d5bc0db
3 changed files with 305 additions and 613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
styles/core.ts
View File

@ -1,58 +1,58 @@
import { colorRamp } from "./lib"; import { colorRamp } from "./lib";
export default { export default {
fontFamily: { fontFamily: {
sans: "Zed Sans", sans: "Zed Sans",
mono: "Zed Mono", mono: "Zed Mono",
},
fontSize: {
"3xs": {
value: "8",
type: "fontSizes",
}, },
"2xs": { fontSize: {
value: "10", "3xs": {
type: "fontSizes", value: "8",
type: "fontSizes",
},
"2xs": {
value: "10",
type: "fontSizes",
},
xs: {
value: "12",
type: "fontSizes",
},
sm: {
value: "14",
type: "fontSizes",
},
md: {
value: "16",
type: "fontSizes",
},
lg: {
value: "18",
type: "fontSizes",
},
xl: {
value: "20",
type: "fontSizes",
},
}, },
xs: { color: {
value: "12", neutral: colorRamp(["black", "white"], { steps: 21, increment: 50 }),
type: "fontSizes", rose: colorRamp("#F43F5EFF"),
red: colorRamp("#EF4444FF"),
orange: colorRamp("#F97316FF"),
amber: colorRamp("#F59E0BFF"),
yellow: colorRamp("#EAB308FF"),
lime: colorRamp("#84CC16FF"),
green: colorRamp("#22C55EFF"),
emerald: colorRamp("#10B981FF"),
teal: colorRamp("#14B8A6FF"),
cyan: colorRamp("#06BBD4FF"),
sky: colorRamp("#0EA5E9FF"),
blue: colorRamp("#3B82F6FF"),
indigo: colorRamp("#6366F1FF"),
violet: colorRamp("#8B5CF6FF"),
purple: colorRamp("#A855F7FF"),
fuschia: colorRamp("#D946E4FF"),
pink: colorRamp("#EC4899FF"),
}, },
sm: {
value: "14",
type: "fontSizes",
},
md: {
value: "16",
type: "fontSizes",
},
lg: {
value: "18",
type: "fontSizes",
},
xl: {
value: "20",
type: "fontSizes",
},
},
color: {
neutral: colorRamp(["black", "white"], { steps: 21, increment: 50 }),
rose: colorRamp("#F43F5EFF"),
red: colorRamp("#EF4444FF"),
orange: colorRamp("#F97316FF"),
amber: colorRamp("#F59E0BFF"),
yellow: colorRamp("#EAB308FF"),
lime: colorRamp("#84CC16FF"),
green: colorRamp("#22C55EFF"),
emerald: colorRamp("#10B981FF"),
teal: colorRamp("#14B8A6FF"),
cyan: colorRamp("#06BBD4FF"),
sky: colorRamp("#0EA5E9FF"),
blue: colorRamp("#3B82F6FF"),
indigo: colorRamp("#6366F1FF"),
violet: colorRamp("#8B5CF6FF"),
purple: colorRamp("#A855F7FF"),
fuschia: colorRamp("#D946E4FF"),
pink: colorRamp("#EC4899FF"),
},
}; };

462
styles/dark.ts
View File

@ -1,442 +1,230 @@
import core from "./core"; import core from "./core";
import Theme from "./theme"; import Theme from "./theme";
const { color } = core;
const backgroundColor = { const backgroundColor = {
100: { 100: {
base: { base: color.neutral[750],
value: core.color.neutral[999].value, hovered: color.neutral[750],
}, active: color.neutral[750],
hovered: { focused: color.neutral[750],
value: core.color.neutral[999].value,
},
active: {
value: core.color.neutral[999].value,
},
focused: {
value: core.color.neutral[999].value,
},
}, },
300: { 300: {
base: { base: color.neutral[800],
value: core.color.neutral[999].value, hovered: color.neutral[800],
}, active: color.neutral[800],
hovered: { focused: color.neutral[800],
value: core.color.neutral[999].value,
},
active: {
value: core.color.neutral[999].value,
},
focused: {
value: core.color.neutral[999].value,
},
}, },
500: { 500: {
base: { base: color.neutral[900],
value: core.color.neutral[999].value, hovered: color.neutral[900],
}, active: color.neutral[900],
hovered: { focused: color.neutral[900],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
ok: { ok: {
base: { base: color.green[600],
value: "#000000", hovered: color.green[600],
}, active: color.green[600],
hovered: { focused: color.green[600],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
error: { error: {
base: { base: color.red[400],
value: "#000000", hovered: color.red[400],
}, active: color.red[400],
hovered: { focused: color.red[400],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
warning: { warning: {
base: { base: color.amber[300],
value: "#000000", hovered: color.amber[300],
}, active: color.amber[300],
hovered: { focused: color.amber[300],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
info: { info: {
base: { base: color.blue[500],
value: "#000000", hovered: color.blue[500],
}, active: color.blue[500],
hovered: { focused: color.blue[500],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
}; };
const borderColor = { const borderColor = {
primary: { primary: color.neutral[850],
value: "#000000", secondary: color.neutral[700],
}, muted: color.neutral[750],
secondary: { focused: color.neutral[100],
value: "#000000", active: color.neutral[500],
}, ok: color.neutral[999],
muted: { error: color.neutral[999],
value: "#000000", warning: color.neutral[999],
}, info: color.neutral[999],
focused: {
value: "#000000",
},
active: {
value: "#000000",
},
ok: {
value: "#000000",
},
error: {
value: "#000000",
},
warning: {
value: "#000000",
},
info: {
value: "#000000",
},
}; };
const textColor = { const textColor = {
primary: { primary: color.neutral[150],
value: core.color.neutral[150].value, secondary: color.neutral[350],
}, muted: color.neutral[550],
secondary: { placeholder: color.neutral[750],
value: core.color.neutral[350].value, active: color.neutral[0],
}, //TODO: (design) define feature and it's correct value
muted: { feature: color.sky[500],
value: core.color.neutral[550].value, ok: color.green[600],
}, error: color.red[400],
placeholder: { warning: color.amber[300],
value: core.color.neutral[750].value, info: color.blue[500],
},
active: {
value: core.color.neutral[0].value,
},
feature: {
//TODO: (design) define feature and it's correct value
value: core.color.sky[500].value,
},
ok: {
value: core.color.green[600].value,
},
error: {
value: core.color.red[400].value,
},
warning: {
value: core.color.amber[300].value,
},
info: {
value: core.color.blue[500].value,
},
}; };
const iconColor = { const iconColor = {
primary: { primary: color.neutral[300],
value: core.color.neutral[300].value, secondary: color.neutral[500],
}, muted: color.neutral[600],
secondary: { placeholder: color.neutral[700],
value: core.color.neutral[500].value, active: color.neutral[50],
}, //TODO: (design) define feature and it's correct value
muted: { feature: color.sky[500],
value: core.color.neutral[600].value, ok: color.green[600],
}, error: color.red[400],
placeholder: { warning: color.amber[300],
value: core.color.neutral[700].value, info: color.blue[500],
},
active: {
value: core.color.neutral[50].value,
},
feature: {
//TODO: (design) define feature and it's correct value
value: core.color.sky[500].value,
},
ok: {
value: core.color.green[600].value,
},
error: {
value: core.color.red[400].value,
},
warning: {
value: core.color.amber[300].value,
},
info: {
value: core.color.blue[500].value,
},
}; };
const editor = { const editor = {
background: { background: backgroundColor[500].base,
value: backgroundColor[500].base.value, indent_guide: color.neutral[999],
}, indent_guide_active: color.neutral[999],
indent_guide: {
value: core.color.neutral[999].value,
},
indent_guide_active: {
value: core.color.neutral[999].value,
},
line: { line: {
active: { active: color.neutral[999],
value: core.color.neutral[999].value, highlighted: color.neutral[999],
}, inserted: color.neutral[999],
highlighted: { deleted: color.neutral[999],
value: core.color.neutral[999].value, modified: color.neutral[999],
},
inserted: {
value: core.color.neutral[999].value,
},
deleted: {
value: core.color.neutral[999].value,
},
modified: {
value: core.color.neutral[999].value,
},
}, },
highlight: { highlight: {
selection: { selection: color.neutral[999],
value: core.color.neutral[999].value, occurrence: color.neutral[999],
}, activeOccurrence: color.neutral[999],
occurrence: { matchingBracket: color.neutral[999],
value: core.color.neutral[999].value, match: color.neutral[999],
}, activeMatch: color.neutral[999],
activeOccurrence: { related: color.neutral[999],
value: core.color.neutral[999].value,
},
matchingBracket: {
value: core.color.neutral[999].value,
},
match: {
value: core.color.neutral[999].value,
},
activeMatch: {
value: core.color.neutral[999].value,
},
related: {
value: core.color.neutral[999].value,
},
}, },
gutter: { gutter: {
primary: { primary: color.neutral[999],
value: core.color.neutral[999].value, active: color.neutral[999],
},
active: {
value: core.color.neutral[999].value,
},
}, },
}; };
const syntax = { const syntax = {
primary: { primary: {
color: { color: textColor.primary,
value: core.color.neutral[150]
},
weight: { value: "normal" }, weight: { value: "normal" },
}, },
comment: { comment: {
color: { value: "000000" }, color: color.lime[200],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
punctuation: { punctuation: {
color: { value: "000000" }, color: textColor.primary,
weight: { value: "normal" }, weight: { value: "normal" },
}, },
constant: { constant: {
color: { value: "000000" }, color: color.neutral[150],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
keyword: { keyword: {
color: { value: "000000" }, color: color.sky[400],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
function: { function: {
color: { value: "000000" }, color: color.yellow[200],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
type: { type: {
color: { value: "000000" }, color: color.teal[300],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
variant: { variant: {
color: { value: "000000" }, color: color.teal[300],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
property: { property: {
color: { value: "000000" }, color: color.sky[300],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
enum: { enum: {
color: { value: "000000" }, color: color.sky[400],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
operator: { operator: {
color: { value: "000000" }, color: color.sky[400],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
string: { string: {
color: { value: "000000" }, color: color.orange[300],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
number: { number: {
color: { value: "000000" }, color: color.neutral[150],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
boolean: { boolean: {
color: { value: "000000" }, color: color.neutral[150],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
predictive: { predictive: {
color: { value: "000000" }, color: textColor.muted,
weight: { value: "normal" }, weight: { value: "normal" },
}, },
}; };
const player = { const player = {
1: { 1: {
baseColor: { baseColor: color.blue[600],
value: core.color.neutral[999].value, cursorColor: color.blue[600],
}, selectionColor: color.blue[600],
cursorColor: { borderColor: color.blue[600],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
2: { 2: {
baseColor: { baseColor: color.indigo[500],
value: core.color.neutral[999].value, cursorColor: color.indigo[500],
}, selectionColor: color.indigo[500],
cursorColor: { borderColor: color.indigo[500],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
3: { 3: {
baseColor: { baseColor: color.green[500],
value: core.color.neutral[999].value, cursorColor: color.green[500],
}, selectionColor: color.green[500],
cursorColor: { borderColor: color.green[500],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
4: { 4: {
baseColor: { baseColor: color.orange[500],
value: core.color.neutral[999].value, cursorColor: color.orange[500],
}, selectionColor: color.orange[500],
cursorColor: { borderColor: color.orange[500],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
5: { 5: {
baseColor: { baseColor: color.purple[500],
value: core.color.neutral[999].value, cursorColor: color.purple[500],
}, selectionColor: color.purple[500],
cursorColor: { borderColor: color.purple[500],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
6: { 6: {
baseColor: { baseColor: color.teal[400],
value: core.color.neutral[999].value, cursorColor: color.teal[400],
}, selectionColor: color.teal[400],
cursorColor: { borderColor: color.teal[400],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
7: { 7: {
baseColor: { baseColor: color.pink[400],
value: core.color.neutral[999].value, cursorColor: color.pink[400],
}, selectionColor: color.pink[400],
cursorColor: { borderColor: color.pink[400],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
8: { 8: {
baseColor: { baseColor: color.yellow[400],
value: core.color.neutral[999].value, cursorColor: color.yellow[400],
}, selectionColor: color.yellow[400],
cursorColor: { borderColor: color.yellow[400],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
}; };

354
styles/theme.ts
View File

@ -1,242 +1,146 @@
export type Color = string; export interface NumberToken {
export type Weight = value: number,
| "thin" type: "number"
| "extra_light"
| "light"
| "normal"
| "medium"
| "semibold"
| "bold"
| "extra_bold"
| "black";
interface SyntaxHighlightStyle {
color: { value: Color };
weight: { value: Weight };
} }
interface Player { export type Color = string;
baseColor: { export interface ColorToken {
value: Color; value: Color;
}; type: "color";
cursorColor: { step?: number
value: Color; }
}; export type Weight =
selectionColor: { | "thin"
value: Color; | "extra_light"
}; | "light"
borderColor: { | "normal"
value: Color; | "medium"
}; | "semibold"
| "bold"
| "extra_bold"
| "black";
export interface WeightToken {
value: Weight,
type: "fontWeight"
}
export interface SyntaxHighlightStyle {
color: ColorToken;
weight: WeightToken;
}
export interface Player {
baseColor: ColorToken;
cursorColor: ColorToken;
selectionColor: ColorToken;
borderColor: ColorToken;
} }
export interface BackgroundColor { export interface BackgroundColor {
base: { base: ColorToken;
value: Color; hovered: ColorToken;
}; active: ColorToken;
hovered: { focused: ColorToken;
value: Color;
};
active: {
value: Color;
};
focused: {
value: Color;
};
} }
export default interface Theme { export default interface Theme {
backgroundColor: { backgroundColor: {
100: BackgroundColor; 100: BackgroundColor;
300: BackgroundColor; 300: BackgroundColor;
500: BackgroundColor; 500: BackgroundColor;
ok: BackgroundColor; ok: BackgroundColor;
error: BackgroundColor; error: BackgroundColor;
warning: BackgroundColor; warning: BackgroundColor;
info: BackgroundColor; info: BackgroundColor;
};
borderColor: {
primary: {
value: Color;
}; };
secondary: { borderColor: {
value: Color; primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
focused: ColorToken;
active: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
}; };
muted: { textColor: {
value: Color; primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
placeholder: ColorToken;
active: ColorToken;
feature: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
}; };
focused: { iconColor: {
value: Color; primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
placeholder: ColorToken;
active: ColorToken;
feature: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
}; };
active: { editor: {
value: Color; background: ColorToken;
indent_guide: ColorToken;
indent_guide_active: ColorToken;
line: {
active: ColorToken;
highlighted: ColorToken;
inserted: ColorToken;
deleted: ColorToken;
modified: ColorToken;
};
highlight: {
selection: ColorToken;
occurrence: ColorToken;
activeOccurrence: ColorToken;
matchingBracket: ColorToken;
match: ColorToken;
activeMatch: ColorToken;
related: ColorToken;
};
gutter: {
primary: ColorToken;
active: ColorToken;
};
}; };
ok: {
value: Color;
};
error: {
value: Color;
};
warning: {
value: Color;
};
info: {
value: Color;
};
};
textColor: {
primary: {
value: Color;
};
secondary: {
value: Color;
};
muted: {
value: Color;
};
placeholder: {
value: Color;
};
active: {
value: Color;
};
feature: {
value: Color;
};
ok: {
value: Color;
};
error: {
value: Color;
};
warning: {
value: Color;
};
info: {
value: Color;
};
};
iconColor: {
primary: {
value: Color;
};
secondary: {
value: Color;
};
muted: {
value: Color;
};
placeholder: {
value: Color;
};
active: {
value: Color;
};
feature: {
value: Color;
};
ok: {
value: Color;
};
error: {
value: Color;
};
warning: {
value: Color;
};
info: {
value: Color;
};
};
editor: {
background: {
value: Color;
};
indent_guide: {
value: Color;
};
indent_guide_active: {
value: Color;
};
line: {
active: {
value: Color;
};
highlighted: {
value: Color;
};
inserted: {
value: Color;
};
deleted: {
value: Color;
};
modified: {
value: Color;
};
};
highlight: {
selection: {
value: Color;
};
occurrence: {
value: Color;
};
activeOccurrence: {
value: Color;
};
matchingBracket: {
value: Color;
};
match: {
value: Color;
};
activeMatch: {
value: Color;
};
related: {
value: Color;
};
};
gutter: {
primary: {
value: Color;
};
active: {
value: Color;
};
};
};
syntax: { syntax: {
primary: SyntaxHighlightStyle; primary: SyntaxHighlightStyle;
comment: SyntaxHighlightStyle; comment: SyntaxHighlightStyle;
punctuation: SyntaxHighlightStyle; punctuation: SyntaxHighlightStyle;
constant: SyntaxHighlightStyle; constant: SyntaxHighlightStyle;
keyword: SyntaxHighlightStyle; keyword: SyntaxHighlightStyle;
function: SyntaxHighlightStyle; function: SyntaxHighlightStyle;
type: SyntaxHighlightStyle; type: SyntaxHighlightStyle;
variant: SyntaxHighlightStyle; variant: SyntaxHighlightStyle;
property: SyntaxHighlightStyle; property: SyntaxHighlightStyle;
enum: SyntaxHighlightStyle; enum: SyntaxHighlightStyle;
operator: SyntaxHighlightStyle; operator: SyntaxHighlightStyle;
string: SyntaxHighlightStyle; string: SyntaxHighlightStyle;
number: SyntaxHighlightStyle; number: SyntaxHighlightStyle;
boolean: SyntaxHighlightStyle; boolean: SyntaxHighlightStyle;
predictive: SyntaxHighlightStyle; predictive: SyntaxHighlightStyle;
}; };
player: { player: {
1: Player; 1: Player;
2: Player; 2: Player;
3: Player; 3: Player;
4: Player; 4: Player;
5: Player; 5: Player;
6: Player; 6: Player;
7: Player; 7: Player;
8: Player; 8: Player;
}; };
shadowAlpha: { shadowAlpha: NumberToken;
value: number;
};
} }