@codesandbox/sandpack-themes
Version:
<img style="width:100%" src="https://user-images.githubusercontent.com/4838076/165913019-2903e055-0399-4b2a-ba10-db9ae9ded1e2.jpg" alt="Component toolkit for live running code editing experiences" />
569 lines (551 loc) • 16.9 kB
JavaScript
'use strict';
var amethyst = {
colors: {
surface1: "#000000",
surface2: "#0a0a23",
surface3: "#3b3b4f",
clickable: "#dfdfe2",
base: "#ffffff",
disabled: "#858591",
hover: "#ffffff",
accent: "#a26cd6",
error: "#ffffff",
errorSurface: "#3b3b4f"
},
syntax: {
plain: "#ffffff",
comment: {
color: "#858591",
fontStyle: "italic"
},
keyword: "#a26cdd",
tag: "#f07178",
punctuation: "#99c9ff",
definition: "#ffffff",
property: "#99c9ff",
static: "#f78c6c",
string: "#57d1b7"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "12px",
lineHeight: "18px"
}
};
var aquaBlue = {
colors: {
surface1: "#f8f9fb",
surface2: "#EBEDF0",
surface3: "#e4e7eb",
clickable: "#737373",
base: "#323232",
disabled: "#C5C5C5",
hover: "#1f2933",
accent: "#2e7692"
},
syntax: {
plain: "#1F2933",
comment: { color: "#A7B6C2", fontStyle: "italic" },
keyword: "#1A56DB",
tag: "#1A56DB",
punctuation: "#394b59",
definition: "#A23DAD",
property: "#2e7692",
static: "#1A56DB",
string: "#1992D4"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var atomDark = {
colors: {
surface1: "#282c34",
surface2: "#21252b",
surface3: "#2c313c",
clickable: "#a8b1c2",
base: "#a8b1c2",
disabled: "#4d4d4d",
hover: "#e8effc",
accent: "#c678dd",
error: "#e06c75",
errorSurface: "#ffeceb"
},
syntax: {
plain: "#a8b1c2",
comment: {
color: "#757575",
fontStyle: "italic"
},
keyword: "#c678dd",
tag: "#e06c75",
punctuation: "#a8b1c2",
definition: "#62aeef",
property: "#d19a66",
static: "#a8b1c2",
string: "#98c379"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var cobalt2 = {
colors: {
surface1: "#193549",
surface2: "#0d3a58",
surface3: "#1f4662",
clickable: "#aaaaaa",
base: "#ffffff",
disabled: "#C5C5C5",
hover: "#ffffff",
accent: "#ffc600",
error: "#a22929",
errorSurface: "#0d3a58"
},
syntax: {
plain: "#ffffff",
comment: {
color: "#0088ff",
fontStyle: "italic"
},
keyword: "#ff9d00",
tag: "#9effff",
punctuation: "#e1efff",
definition: "#ffc600",
property: "#ffc600",
static: "#ffee80",
string: "#a5ff90"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Operator Mono", "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var cyberpunk = {
colors: {
surface1: "#051c30",
surface2: "#042f40",
surface3: "#042f40",
clickable: "#aaaaaa",
base: "#ffffff",
disabled: "#C5C5C5",
hover: "#ffffff",
accent: "#fdf500",
error: "#ff003c",
errorSurface: "#051c30"
},
syntax: {
plain: "#ffffff",
comment: {
color: "#1ac5b0",
fontStyle: "italic"
},
keyword: "#fdf500",
tag: "#ffc600",
punctuation: "#afd7fa",
definition: "#ffc600",
property: "#fdf500",
static: "#e455ae",
string: "#37ebf3"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var dracula = {
colors: {
surface1: "#282a36",
surface2: "#44475a",
surface3: "#44475a",
clickable: "#6272a4",
base: "#f8f8f2",
disabled: "#6272a4",
hover: "#f8f8f2",
accent: "#bd93f9",
error: "#f8f8f2",
errorSurface: "#44475a"
},
syntax: {
plain: "#f8f8f2",
comment: {
color: "#6272a4",
fontStyle: "italic"
},
keyword: "#ff79c6",
tag: "#ff79c6",
punctuation: "#ff79c6",
definition: "#f8f8f2",
property: "#50fa7b",
static: "#bd93f9",
string: "#f1fa8c"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
// ecoLight is inspired by love for green and associative environmental colors
var ecoLight = {
colors: {
surface1: "#eae8e8",
surface2: "#00997761",
surface3: "#ffffff5e",
clickable: "#421010",
base: "#421010",
disabled: "#C5C5C5",
hover: "#4D4D4D",
accent: "#009977",
error: "#ff453a",
errorSurface: "#e8cac6"
},
syntax: {
plain: "#151515",
comment: {
color: "#a9a7a7",
fontStyle: "italic"
},
keyword: "#0971F1",
tag: "#097104",
punctuation: "#3B3B3B",
definition: "#042d60",
property: "#9013fe",
static: "#FF453A",
string: "#f5a623"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var freeCodeCampDark = {
colors: {
surface1: "#2a2a40",
surface2: "#0a0a23",
surface3: "#3b3b4f",
clickable: "#dfdfe2",
base: "#ffffff",
disabled: "#858591",
hover: "#ffffff",
accent: "#dbb8ff",
error: "#ffffff",
errorSurface: "#3b3b4f"
},
syntax: {
plain: "#ffffff",
comment: {
color: "#858591",
fontStyle: "italic"
},
keyword: "#dbb8ff",
tag: "#f07178",
punctuation: "#99c9ff",
definition: "#ffffff",
property: "#99c9ff",
static: "#f78c6c",
string: "#acd157"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var githubLight = {
colors: {
surface1: "#ffffff",
surface2: "#F3F3F3",
surface3: "#f5f5f5",
clickable: "#959da5",
base: "#24292e",
disabled: "#d1d4d8",
hover: "#24292e",
accent: "#24292e"
},
syntax: {
keyword: "#d73a49",
property: "#005cc5",
plain: "#24292e",
static: "#032f62",
string: "#032f62",
definition: "#6f42c1",
punctuation: "#24292e",
tag: "#22863a",
comment: {
color: "#6a737d",
fontStyle: "normal"
}
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
// Reference: https://github.com/gruvbox-community/gruvbox
var gruvboxDark = {
colors: {
surface1: "#282828",
surface2: "#3c3836",
surface3: "#3c3836",
clickable: "#ebdbb2",
base: "#ebdbb2",
disabled: "#928374",
hover: "#fe8019",
accent: "#d65d0e",
error: "#ff453a",
errorSurface: "#3c3836"
},
syntax: {
plain: "#ebdbb2",
comment: {
color: "#928374",
fontStyle: "italic"
},
keyword: "#ff453a",
tag: "#83a598",
punctuation: "#ebdbb2",
definition: "#83a598",
property: "#fabd2f",
static: "#ebdbb2",
string: "#b8bb26"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
// Reference: https://github.com/gruvbox-community/gruvbox
var gruvboxLight = {
colors: {
surface1: "#fbf1c7",
surface2: "#ebdbb2",
surface3: "#ebdbb2",
clickable: "#808080",
base: "#3c3836",
disabled: "#928374",
hover: "#af3a03",
accent: "#d65d0e",
error: "#9d0006",
errorSurface: "#ebdbb2"
},
syntax: {
plain: "#3c3836",
comment: {
color: "#928374",
fontStyle: "italic"
},
keyword: "#9d0006",
tag: "#076678",
punctuation: "#3c3836",
definition: "#076678",
property: "#b57614",
static: "#3c3836",
string: "#79740e"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var levelUp = {
colors: {
surface1: "#191324",
surface2: "#261e33",
surface3: "#524763",
clickable: "#aaaaaa",
base: "#ffffff",
disabled: "#aaaaaa",
hover: "#ffffff",
accent: "#82d8d8",
error: "#e54b4b",
errorSurface: "#191324"
},
syntax: {
plain: "#ffffff",
comment: {
color: "#82d8d8",
fontStyle: "italic"
},
keyword: "#e54b4b",
tag: "#ff26be",
punctuation: "#9588aa",
definition: "#82d8d8",
property: "#82d8d8",
static: "#82d8d8",
string: "#a8fe39"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"MonoLisa", "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var monokaiPro = {
colors: {
surface1: "#2D2A2E",
surface2: "#444344",
surface3: "#484747",
clickable: "#939293",
base: "#C1C0C1",
disabled: "#444344",
hover: "#FCFCFA",
accent: "#FFD866",
error: "#ffcdca",
errorSurface: "#c24038"
},
syntax: {
plain: "rgb(252, 252, 250)",
comment: { color: "#757575", fontStyle: "italic" },
keyword: "rgb(255, 97, 136)",
tag: "rgb(120, 220, 232)",
punctuation: "rgb(147, 146, 147)",
definition: "rgb(169, 220, 118)",
property: { color: "rgb(120, 220, 232)", fontStyle: "italic" },
static: "rgb(171, 157, 242)",
string: "rgb(255, 216, 102)"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var neoCyan = {
colors: {
surface1: "#2b3935",
surface2: "#191324",
surface3: "#524763",
clickable: "#aaaaaa",
base: "#ffffff",
disabled: "#aaaaaa",
hover: "#ffffff",
accent: "#82d8d8",
error: "#e54b4b",
errorSurface: "#191324"
},
syntax: {
plain: "#ffffff",
comment: {
color: "#82d8d8",
fontStyle: "italic"
},
keyword: "#e54b4b",
tag: "#ff26be",
punctuation: "#9588aa",
definition: "#82d8d8",
property: "#82d8d8",
static: "#82d8d8",
string: "#a8fe39"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"MonoLisa", "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "12px",
lineHeight: "18px"
}
};
var nightOwl = {
colors: {
surface1: "#011627",
surface2: "#243b4c",
surface3: "#112331",
clickable: "#6988a1",
base: "#808080",
disabled: "#4D4D4D",
hover: "#c5e4fd",
accent: "#c5e4fd",
error: "#ffcdca",
errorSurface: "#811e18"
},
syntax: {
plain: "#d6deeb",
comment: { color: "#999999", fontStyle: "italic" },
keyword: { color: "#c792ea", fontStyle: "italic" },
tag: "#7fdbca",
punctuation: "#7fdbca",
definition: "#82aaff",
property: { color: "#addb67", fontStyle: "italic" },
static: "#f78c6c",
string: "#ecc48d"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
var sandpackDark = {
colors: {
surface1: "#151515",
surface2: "#252525",
surface3: "#2F2F2F",
clickable: "#999999",
base: "#808080",
disabled: "#4D4D4D",
hover: "#C5C5C5",
accent: "#90e86f",
error: "#E1CFF8",
errorSurface: "#b08df8"
},
syntax: {
plain: "#f0fdaf",
comment: {
color: "#757575",
fontStyle: "italic"
},
keyword: "#e5fd78",
tag: "#f0fdaf",
punctuation: "#ffffff",
definition: "#eeeeee",
property: "#90e86f",
static: "#ffffff",
string: "#dafecf"
},
font: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
size: "13px",
lineHeight: "20px"
}
};
exports.amethyst = amethyst;
exports.aquaBlue = aquaBlue;
exports.atomDark = atomDark;
exports.cobalt2 = cobalt2;
exports.cyberpunk = cyberpunk;
exports.dracula = dracula;
exports.ecoLight = ecoLight;
exports.freeCodeCampDark = freeCodeCampDark;
exports.githubLight = githubLight;
exports.gruvboxDark = gruvboxDark;
exports.gruvboxLight = gruvboxLight;
exports.levelUp = levelUp;
exports.monokaiPro = monokaiPro;
exports.neoCyan = neoCyan;
exports.nightOwl = nightOwl;
exports.sandpackDark = sandpackDark;