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

View File

@ -1,58 +1,58 @@
import { colorRamp } from "./lib";
export default {
fontFamily: {
sans: "Zed Sans",
mono: "Zed Mono",
},
fontSize: {
"3xs": {
value: "8",
type: "fontSizes",
fontFamily: {
sans: "Zed Sans",
mono: "Zed Mono",
},
"2xs": {
value: "10",
type: "fontSizes",
fontSize: {
"3xs": {
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: {
value: "12",
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"),
},
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"),
},
};

View File

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

View File

@ -1,242 +1,146 @@
export type Color = string;
export type Weight =
| "thin"
| "extra_light"
| "light"
| "normal"
| "medium"
| "semibold"
| "bold"
| "extra_bold"
| "black";
interface SyntaxHighlightStyle {
color: { value: Color };
weight: { value: Weight };
export interface NumberToken {
value: number,
type: "number"
}
interface Player {
baseColor: {
export type Color = string;
export interface ColorToken {
value: Color;
};
cursorColor: {
value: Color;
};
selectionColor: {
value: Color;
};
borderColor: {
value: Color;
};
type: "color";
step?: number
}
export type Weight =
| "thin"
| "extra_light"
| "light"
| "normal"
| "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 {
base: {
value: Color;
};
hovered: {
value: Color;
};
active: {
value: Color;
};
focused: {
value: Color;
};
base: ColorToken;
hovered: ColorToken;
active: ColorToken;
focused: ColorToken;
}
export default interface Theme {
backgroundColor: {
100: BackgroundColor;
300: BackgroundColor;
500: BackgroundColor;
ok: BackgroundColor;
error: BackgroundColor;
warning: BackgroundColor;
info: BackgroundColor;
};
borderColor: {
primary: {
value: Color;
backgroundColor: {
100: BackgroundColor;
300: BackgroundColor;
500: BackgroundColor;
ok: BackgroundColor;
error: BackgroundColor;
warning: BackgroundColor;
info: BackgroundColor;
};
secondary: {
value: Color;
borderColor: {
primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
focused: ColorToken;
active: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
};
muted: {
value: Color;
textColor: {
primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
placeholder: ColorToken;
active: ColorToken;
feature: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
};
focused: {
value: Color;
iconColor: {
primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
placeholder: ColorToken;
active: ColorToken;
feature: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
};
active: {
value: Color;
editor: {
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: {
primary: SyntaxHighlightStyle;
comment: SyntaxHighlightStyle;
punctuation: SyntaxHighlightStyle;
constant: SyntaxHighlightStyle;
keyword: SyntaxHighlightStyle;
function: SyntaxHighlightStyle;
type: SyntaxHighlightStyle;
variant: SyntaxHighlightStyle;
property: SyntaxHighlightStyle;
enum: SyntaxHighlightStyle;
operator: SyntaxHighlightStyle;
string: SyntaxHighlightStyle;
number: SyntaxHighlightStyle;
boolean: SyntaxHighlightStyle;
predictive: SyntaxHighlightStyle;
};
syntax: {
primary: SyntaxHighlightStyle;
comment: SyntaxHighlightStyle;
punctuation: SyntaxHighlightStyle;
constant: SyntaxHighlightStyle;
keyword: SyntaxHighlightStyle;
function: SyntaxHighlightStyle;
type: SyntaxHighlightStyle;
variant: SyntaxHighlightStyle;
property: SyntaxHighlightStyle;
enum: SyntaxHighlightStyle;
operator: SyntaxHighlightStyle;
string: SyntaxHighlightStyle;
number: SyntaxHighlightStyle;
boolean: SyntaxHighlightStyle;
predictive: SyntaxHighlightStyle;
};
player: {
1: Player;
2: Player;
3: Player;
4: Player;
5: Player;
6: Player;
7: Player;
8: Player;
};
shadowAlpha: {
value: number;
};
player: {
1: Player;
2: Player;
3: Player;
4: Player;
5: Player;
6: Player;
7: Player;
8: Player;
};
shadowAlpha: NumberToken;
}