440 lines
12 KiB
TypeScript
440 lines
12 KiB
TypeScript
import type { HueName, ThemeDocument } from "./schema.js"
|
|
|
|
export const DEFAULT_CATEGORICAL = [
|
|
"blue",
|
|
"purple",
|
|
"green",
|
|
"orange",
|
|
"red",
|
|
"cyan",
|
|
] as const satisfies readonly HueName[]
|
|
|
|
export const DEFAULT_THEME = {
|
|
version: 2,
|
|
light: {
|
|
hue: {
|
|
gray: {
|
|
100: "#f3f4f6",
|
|
200: "#e5e7eb",
|
|
300: "#d1d5db",
|
|
400: "#9ca3af",
|
|
500: "#6b7280",
|
|
600: "#4b5563",
|
|
700: "#374151",
|
|
800: "#1f2937",
|
|
900: "#111827",
|
|
},
|
|
red: {
|
|
100: "#fee2e2",
|
|
200: "#fecaca",
|
|
300: "#fca5a5",
|
|
400: "#f87171",
|
|
500: "#ef4444",
|
|
600: "#dc2626",
|
|
700: "#b91c1c",
|
|
800: "#991b1b",
|
|
900: "#7f1d1d",
|
|
},
|
|
orange: {
|
|
100: "#ffedd5",
|
|
200: "#fed7aa",
|
|
300: "#fdba74",
|
|
400: "#fb923c",
|
|
500: "#f97316",
|
|
600: "#ea580c",
|
|
700: "#c2410c",
|
|
800: "#9a3412",
|
|
900: "#7c2d12",
|
|
},
|
|
yellow: {
|
|
100: "#fef9c3",
|
|
200: "#fef08a",
|
|
300: "#fde047",
|
|
400: "#facc15",
|
|
500: "#eab308",
|
|
600: "#ca8a04",
|
|
700: "#a16207",
|
|
800: "#854d0e",
|
|
900: "#713f12",
|
|
},
|
|
green: {
|
|
100: "#dcfce7",
|
|
200: "#bbf7d0",
|
|
300: "#86efac",
|
|
400: "#4ade80",
|
|
500: "#22c55e",
|
|
600: "#16a34a",
|
|
700: "#15803d",
|
|
800: "#166534",
|
|
900: "#14532d",
|
|
},
|
|
cyan: {
|
|
100: "#cffafe",
|
|
200: "#a5f3fc",
|
|
300: "#67e8f9",
|
|
400: "#22d3ee",
|
|
500: "#06b6d4",
|
|
600: "#0891b2",
|
|
700: "#0e7490",
|
|
800: "#155e75",
|
|
900: "#164e63",
|
|
},
|
|
blue: {
|
|
100: "#dbeafe",
|
|
200: "#bfdbfe",
|
|
300: "#93c5fd",
|
|
400: "#60a5fa",
|
|
500: "#3b82f6",
|
|
600: "#2563eb",
|
|
700: "#1d4ed8",
|
|
800: "#1e40af",
|
|
900: "#1e3a8a",
|
|
},
|
|
purple: {
|
|
100: "#f3e8ff",
|
|
200: "#e9d5ff",
|
|
300: "#d8b4fe",
|
|
400: "#c084fc",
|
|
500: "#a855f7",
|
|
600: "#9333ea",
|
|
700: "#7e22ce",
|
|
800: "#6b21a8",
|
|
900: "#581c87",
|
|
},
|
|
accent: "$hue.blue",
|
|
interactive: "$hue.blue",
|
|
neutral: "$hue.gray",
|
|
},
|
|
categorical: DEFAULT_CATEGORICAL,
|
|
text: {
|
|
default: "$hue.neutral.800",
|
|
subdued: "$hue.neutral.600",
|
|
action: {
|
|
primary: { default: "$hue.neutral.200", $disabled: "$hue.neutral.500" },
|
|
destructive: { default: "$hue.red.200", $disabled: "$hue.neutral.500" },
|
|
},
|
|
formfield: {
|
|
default: "$hue.neutral.800",
|
|
$focused: "$text.action.primary.default",
|
|
$pressed: "$hue.neutral.200",
|
|
$disabled: "$hue.neutral.500",
|
|
$selected: "$hue.interactive.700",
|
|
},
|
|
feedback: {
|
|
error: { default: "$hue.red.700", subdued: "$hue.red.600" },
|
|
warning: { default: "$hue.yellow.800", subdued: "$hue.yellow.700" },
|
|
success: { default: "$hue.green.700", subdued: "$hue.green.600" },
|
|
info: { default: "$hue.cyan.700", subdued: "$hue.cyan.600" },
|
|
},
|
|
},
|
|
background: {
|
|
default: "$hue.neutral.200",
|
|
surface: {
|
|
offset: "$hue.neutral.300",
|
|
overlay: "$hue.neutral.400",
|
|
},
|
|
action: {
|
|
primary: {
|
|
default: "$hue.interactive.600",
|
|
$hovered: "$hue.interactive.700",
|
|
$focused: "$hue.interactive.700",
|
|
$pressed: "$hue.interactive.800",
|
|
$selected: "$hue.interactive.700",
|
|
$disabled: "$hue.neutral.300",
|
|
},
|
|
destructive: {
|
|
default: "$hue.red.600",
|
|
$hovered: "$hue.red.700",
|
|
$focused: "$hue.red.700",
|
|
$pressed: "$hue.red.800",
|
|
$selected: "$hue.red.700",
|
|
$disabled: "$hue.neutral.300",
|
|
},
|
|
},
|
|
formfield: {
|
|
default: "$background.default",
|
|
$hovered: "$background.surface.offset",
|
|
$focused: "$background.action.primary.default",
|
|
$pressed: "$hue.interactive.800",
|
|
$disabled: "$background.default",
|
|
$selected: "$background.formfield.default",
|
|
},
|
|
feedback: {
|
|
error: { default: "$background.default" },
|
|
warning: { default: "$background.default" },
|
|
success: { default: "$background.default" },
|
|
info: { default: "$background.default" },
|
|
},
|
|
},
|
|
border: { default: "$hue.neutral.300" },
|
|
scrollbar: { default: "$hue.neutral.400" },
|
|
diff: {
|
|
text: {
|
|
added: "$hue.green.700",
|
|
removed: "$hue.red.700",
|
|
context: "$hue.neutral.900",
|
|
hunkHeader: "$hue.purple.600",
|
|
},
|
|
background: { added: "$hue.green.100", removed: "$hue.red.100", context: "$hue.neutral.100" },
|
|
highlight: { added: "$hue.green.600", removed: "$hue.red.600" },
|
|
lineNumber: {
|
|
text: "$hue.neutral.600",
|
|
background: { added: "$hue.green.200", removed: "$hue.red.200" },
|
|
},
|
|
},
|
|
syntax: {
|
|
comment: "$hue.neutral.600",
|
|
keyword: "$hue.purple.600",
|
|
function: "$hue.accent.600",
|
|
variable: "$hue.neutral.900",
|
|
string: "$hue.green.700",
|
|
number: "$hue.yellow.800",
|
|
type: "$hue.yellow.500",
|
|
operator: "$hue.cyan.600",
|
|
punctuation: "$hue.neutral.900",
|
|
},
|
|
markdown: {
|
|
text: "$hue.neutral.900",
|
|
heading: "$hue.purple.600",
|
|
link: "$hue.accent.600",
|
|
linkText: "$hue.cyan.600",
|
|
code: "$hue.green.700",
|
|
blockQuote: "$hue.neutral.600",
|
|
emphasis: "$hue.yellow.500",
|
|
strong: "$hue.neutral.900",
|
|
horizontalRule: "$hue.neutral.300",
|
|
listItem: "$hue.accent.600",
|
|
listEnumeration: "$hue.cyan.600",
|
|
image: "$hue.accent.600",
|
|
imageText: "$hue.cyan.600",
|
|
codeBlock: "$hue.neutral.900",
|
|
},
|
|
"@context:elevated": {
|
|
text: { action: { primary: { default: "$hue.neutral.100" } } },
|
|
background: {
|
|
default: "$background.surface.offset",
|
|
action: { primary: { default: "$hue.interactive.500", $hovered: "$background.surface.overlay" } },
|
|
},
|
|
},
|
|
"@context:overlay": {
|
|
text: { action: { primary: { default: "$hue.neutral.100" } } },
|
|
background: {
|
|
default: "$background.surface.overlay",
|
|
action: { primary: { default: "$hue.interactive.500" } },
|
|
},
|
|
},
|
|
},
|
|
dark: {
|
|
hue: {
|
|
gray: {
|
|
100: "#f3f4f6",
|
|
200: "#e5e7eb",
|
|
300: "#d1d5db",
|
|
400: "#9ca3af",
|
|
500: "#6b7280",
|
|
600: "#4b5563",
|
|
700: "#374151",
|
|
800: "#1f2937",
|
|
900: "#111827",
|
|
},
|
|
red: {
|
|
100: "#fee2e2",
|
|
200: "#fecaca",
|
|
300: "#fca5a5",
|
|
400: "#f87171",
|
|
500: "#ef4444",
|
|
600: "#dc2626",
|
|
700: "#b91c1c",
|
|
800: "#991b1b",
|
|
900: "#7f1d1d",
|
|
},
|
|
orange: {
|
|
100: "#ffedd5",
|
|
200: "#fed7aa",
|
|
300: "#fdba74",
|
|
400: "#fb923c",
|
|
500: "#f97316",
|
|
600: "#ea580c",
|
|
700: "#c2410c",
|
|
800: "#9a3412",
|
|
900: "#7c2d12",
|
|
},
|
|
yellow: {
|
|
100: "#fef9c3",
|
|
200: "#fef08a",
|
|
300: "#fde047",
|
|
400: "#facc15",
|
|
500: "#eab308",
|
|
600: "#ca8a04",
|
|
700: "#a16207",
|
|
800: "#854d0e",
|
|
900: "#713f12",
|
|
},
|
|
green: {
|
|
100: "#dcfce7",
|
|
200: "#bbf7d0",
|
|
300: "#86efac",
|
|
400: "#4ade80",
|
|
500: "#22c55e",
|
|
600: "#16a34a",
|
|
700: "#15803d",
|
|
800: "#166534",
|
|
900: "#14532d",
|
|
},
|
|
cyan: {
|
|
100: "#cffafe",
|
|
200: "#a5f3fc",
|
|
300: "#67e8f9",
|
|
400: "#22d3ee",
|
|
500: "#06b6d4",
|
|
600: "#0891b2",
|
|
700: "#0e7490",
|
|
800: "#155e75",
|
|
900: "#164e63",
|
|
},
|
|
blue: {
|
|
100: "#dbeafe",
|
|
200: "#bfdbfe",
|
|
300: "#93c5fd",
|
|
400: "#60a5fa",
|
|
500: "#3b82f6",
|
|
600: "#2563eb",
|
|
700: "#1d4ed8",
|
|
800: "#1e40af",
|
|
900: "#1e3a8a",
|
|
},
|
|
purple: {
|
|
100: "#f3e8ff",
|
|
200: "#e9d5ff",
|
|
300: "#d8b4fe",
|
|
400: "#c084fc",
|
|
500: "#a855f7",
|
|
600: "#9333ea",
|
|
700: "#7e22ce",
|
|
800: "#6b21a8",
|
|
900: "#581c87",
|
|
},
|
|
accent: "$hue.blue",
|
|
interactive: "$hue.blue",
|
|
neutral: "$hue.gray",
|
|
},
|
|
categorical: DEFAULT_CATEGORICAL,
|
|
text: {
|
|
default: "$hue.neutral.200",
|
|
subdued: "$hue.neutral.400",
|
|
action: {
|
|
primary: { default: "$hue.neutral.200", $disabled: "$hue.neutral.500" },
|
|
destructive: { default: "$hue.red.200", $disabled: "$hue.neutral.500" },
|
|
},
|
|
formfield: {
|
|
default: "$hue.neutral.200",
|
|
$focused: "$text.action.primary.default",
|
|
$pressed: "$hue.neutral.200",
|
|
$disabled: "$hue.neutral.500",
|
|
$selected: "$hue.interactive.500",
|
|
},
|
|
feedback: {
|
|
error: { default: "$hue.red.300", subdued: "$hue.red.400" },
|
|
warning: { default: "$hue.yellow.200", subdued: "$hue.yellow.300" },
|
|
success: { default: "$hue.green.300", subdued: "$hue.green.400" },
|
|
info: { default: "$hue.cyan.300", subdued: "$hue.cyan.400" },
|
|
},
|
|
},
|
|
background: {
|
|
default: "$hue.neutral.800",
|
|
surface: {
|
|
offset: "$hue.neutral.700",
|
|
overlay: "$hue.neutral.600",
|
|
},
|
|
action: {
|
|
primary: {
|
|
default: "$hue.interactive.500",
|
|
$hovered: "$hue.interactive.600",
|
|
$focused: "$hue.interactive.600",
|
|
$pressed: "$hue.interactive.800",
|
|
$selected: "$hue.interactive.600",
|
|
$disabled: "$hue.neutral.800",
|
|
},
|
|
destructive: {
|
|
default: "$hue.red.600",
|
|
$hovered: "$hue.red.700",
|
|
$focused: "$hue.red.700",
|
|
$pressed: "$hue.red.800",
|
|
$selected: "$hue.red.700",
|
|
$disabled: "$hue.neutral.800",
|
|
},
|
|
},
|
|
formfield: {
|
|
default: "$background.default",
|
|
$hovered: "$background.surface.offset",
|
|
$focused: "$background.action.primary.default",
|
|
$pressed: "$hue.interactive.800",
|
|
$disabled: "$background.default",
|
|
$selected: "$background.formfield.default",
|
|
},
|
|
feedback: {
|
|
error: { default: "$background.default" },
|
|
warning: { default: "$background.default" },
|
|
success: { default: "$background.default" },
|
|
info: { default: "$background.default" },
|
|
},
|
|
},
|
|
border: { default: "$hue.neutral.700" },
|
|
scrollbar: { default: "$hue.neutral.600" },
|
|
diff: {
|
|
text: {
|
|
added: "$hue.green.300",
|
|
removed: "$hue.red.300",
|
|
context: "$hue.neutral.100",
|
|
hunkHeader: "$hue.purple.400",
|
|
},
|
|
background: { added: "$hue.green.900", removed: "$hue.red.900", context: "$hue.neutral.900" },
|
|
highlight: { added: "$hue.green.400", removed: "$hue.red.400" },
|
|
lineNumber: {
|
|
text: "$hue.neutral.400",
|
|
background: { added: "$hue.green.800", removed: "$hue.red.800" },
|
|
},
|
|
},
|
|
syntax: {
|
|
comment: "$hue.neutral.400",
|
|
keyword: "$hue.purple.400",
|
|
function: "$hue.accent.400",
|
|
variable: "$hue.neutral.100",
|
|
string: "$hue.green.300",
|
|
number: "$hue.yellow.200",
|
|
type: "$hue.yellow.500",
|
|
operator: "$hue.cyan.400",
|
|
punctuation: "$hue.neutral.100",
|
|
},
|
|
markdown: {
|
|
text: "$hue.neutral.100",
|
|
heading: "$hue.purple.400",
|
|
link: "$hue.accent.400",
|
|
linkText: "$hue.cyan.400",
|
|
code: "$hue.green.300",
|
|
blockQuote: "$hue.neutral.400",
|
|
emphasis: "$hue.yellow.500",
|
|
strong: "$hue.neutral.100",
|
|
horizontalRule: "$hue.neutral.700",
|
|
listItem: "$hue.accent.400",
|
|
listEnumeration: "$hue.cyan.400",
|
|
image: "$hue.accent.400",
|
|
imageText: "$hue.cyan.400",
|
|
codeBlock: "$hue.neutral.100",
|
|
},
|
|
"@context:elevated": {
|
|
text: { action: { primary: { default: "$hue.neutral.200" } } },
|
|
background: {
|
|
default: "$background.surface.offset",
|
|
action: { primary: { default: "$hue.interactive.400", $hovered: "$background.surface.overlay" } },
|
|
},
|
|
},
|
|
"@context:overlay": {
|
|
text: { action: { primary: { default: "$hue.neutral.200" } } },
|
|
background: {
|
|
default: "$background.surface.overlay",
|
|
action: { primary: { default: "$hue.interactive.400" } },
|
|
},
|
|
},
|
|
},
|
|
} satisfies ThemeDocument
|