Minor tweaks to playground color scheme (#5754)

## Summary

I kind of hate the light mode theme, but they now use colors from our
actual palette:

<img width="1792" alt="Screen Shot 2023-07-13 at 10 15 14 PM"
src="f1da0153-d6ed-4b65-9419-b824f2cad614">
<img width="1792" alt="Screen Shot 2023-07-13 at 10 15 12 PM"
src="d9452e10-796b-4b7f-bf3f-7af6e0b14fc0">
<img width="1792" alt="Screen Shot 2023-07-13 at 10 15 10 PM"
src="f75e7c1c-3b5a-4a78-8bb8-d8b4d40a337d">
<img width="1792" alt="Screen Shot 2023-07-13 at 10 15 07 PM"
src="52c23108-b9c2-4a1f-adf0-e11098dbdc5d">
This commit is contained in:
Charlie Marsh 2023-07-13 22:37:18 -04:00 committed by GitHub
parent 73228e914c
commit 12489d3305
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 758 deletions

View file

@ -5,6 +5,27 @@
import { useMonaco } from "@monaco-editor/react";
import { useEffect } from "react";
export const WHITE = "#ffffff";
export const RADIATE = "#d7ff64";
export const FLARE = "#6340ac";
export const ROCK = "#78876e";
export const GALAXY = "#261230";
export const SPACE = "#30173d";
export const COMET = "#6f5d6f";
export const COSMIC = "#de5fe9";
export const SUN = "#ffac2f";
export const ELECTRON = "#46ebe1";
export const AURORA = "#46eb74";
export const CONSTELLATION = "#5f6de9";
export const NEUTRON = "#cff3cf";
export const PROTON = "#f6afbc";
export const NEBULA = "#cdcbfb";
export const SUPERNOVA = "#f1aff6";
export const STARLIGHT = "#f4f4f1";
export const LUNAR = "#fbf2fc";
export const ASTEROID = "#e3cee3";
export const CRATER = "#f0dfdf";
export default function MonacoThemes() {
const monaco = useMonaco();
@ -251,395 +272,21 @@ export default function MonacoThemes() {
token: "comment",
},
{
foreground: "#86b300",
foreground: ROCK,
token: "string",
},
{
foreground: "#86b300",
token: "constant.other.symbol",
},
{
foreground: "#4cbf99",
token: "string.regexp",
},
{
foreground: "#4cbf99",
token: "constant.character",
},
{
foreground: "#4cbf99",
token: "constant.other",
},
{
foreground: "#a37acc",
token: "constant.numeric",
},
{
foreground: "#a37acc",
token: "constant.language",
},
{
foreground: "#5c6166",
token: "variable",
},
{
foreground: "#5c6166",
token: "variable.parameter.function-call",
},
{
foreground: "#f07171",
token: "variable.member",
},
{
fontStyle: "italic",
foreground: "#55b4d4",
token: "variable.language",
},
{
foreground: "#fa8d3e",
token: "storage",
},
{
foreground: "#fa8d3e",
foreground: SUN,
token: "keyword",
},
{
foreground: "#ed9366",
token: "keyword.operator",
},
{
foreground: "#5c6166b3",
token: "punctuation.separator",
},
{
foreground: "#5c6166b3",
token: "punctuation.terminator",
},
{
foreground: "#5c6166",
token: "punctuation.section",
},
{
foreground: "#ed9366",
token: "punctuation.accessor",
},
{
foreground: "#fa8d3e",
token: "punctuation.definition.template-expression",
},
{
foreground: "#fa8d3e",
token: "punctuation.section.embedded",
},
{
foreground: "#5c6166",
token: "meta.embedded",
},
{
foreground: "#399ee6",
token: "source.java storage.type",
},
{
foreground: "#399ee6",
token: "source.haskell storage.type",
},
{
foreground: "#399ee6",
token: "source.c storage.type",
},
{
foreground: "#55b4d4",
token: "entity.other.inherited-class",
},
{
foreground: "#fa8d3e",
token: "storage.type.function",
},
{
foreground: "#55b4d4",
token: "source.java storage.type.primitive",
},
{
foreground: "#f2ae49",
token: "entity.name.function",
},
{
foreground: "#a37acc",
token: "variable.parameter",
},
{
foreground: "#a37acc",
token: "meta.parameter",
},
{
foreground: "#f2ae49",
token: "variable.function",
},
{
foreground: "#f2ae49",
token: "variable.annotation",
},
{
foreground: "#f2ae49",
token: "meta.function-call.generic",
},
{
foreground: "#f2ae49",
token: "support.function.go",
},
{
foreground: "#f07171",
token: "support.function",
},
{
foreground: "#f07171",
token: "support.macro",
},
{
foreground: "#86b300",
token: "entity.name.import",
},
{
foreground: "#86b300",
token: "entity.name.package",
},
{
foreground: "#399ee6",
token: "entity.name",
},
{
foreground: "#55b4d4",
token: "entity.name.tag",
},
{
foreground: "#55b4d4",
token: "meta.tag.sgml",
},
{
foreground: "#399ee6",
token: "support.class.component",
},
{
foreground: "#55b4d480",
token: "punctuation.definition.tag.end",
},
{
foreground: "#55b4d480",
token: "punctuation.definition.tag.begin",
},
{
foreground: "#55b4d480",
token: "punctuation.definition.tag",
},
{
foreground: "#f2ae49",
token: "entity.other.attribute-name",
},
{
fontStyle: "italic",
foreground: "#ed9366",
token: "support.constant",
},
{
foreground: "#55b4d4",
token: "support.type",
},
{
foreground: "#55b4d4",
token: "support.class",
},
{
foreground: "#55b4d4",
token: "source.go storage.type",
},
{
foreground: "#e6ba7e",
token: "meta.decorator variable.other",
},
{
foreground: "#e6ba7e",
token: "meta.decorator punctuation.decorator",
},
{
foreground: "#e6ba7e",
token: "storage.type.annotation",
},
{
foreground: "#e65050",
token: "invalid",
},
{
foreground: "#c594c5",
token: "meta.diff",
},
{
foreground: "#c594c5",
token: "meta.diff.header",
},
{
foreground: "#f2ae49",
token: "source.ruby variable.other.readwrite",
},
{
foreground: "#399ee6",
token: "source.css entity.name.tag",
},
{
foreground: "#399ee6",
token: "source.sass entity.name.tag",
},
{
foreground: "#399ee6",
token: "source.scss entity.name.tag",
},
{
foreground: "#399ee6",
token: "source.less entity.name.tag",
},
{
foreground: "#399ee6",
token: "source.stylus entity.name.tag",
},
{
foreground: "#787b8099",
token: "source.css support.type",
},
{
foreground: "#787b8099",
token: "source.sass support.type",
},
{
foreground: "#787b8099",
token: "source.scss support.type",
},
{
foreground: "#787b8099",
token: "source.less support.type",
},
{
foreground: "#787b8099",
token: "source.stylus support.type",
},
{
fontStyle: "normal",
foreground: "#55b4d4",
token: "support.type.property-name",
},
{
foreground: "#787b8099",
token: "constant.numeric.line-number.find-in-files - match",
},
{
foreground: "#fa8d3e",
token: "constant.numeric.line-number.match",
},
{
foreground: "#86b300",
token: "entity.name.filename.find-in-files",
},
{
foreground: "#e65050",
token: "message.error",
},
{
fontStyle: "bold",
foreground: "#86b300",
token: "markup.heading",
},
{
fontStyle: "bold",
foreground: "#86b300",
token: "markup.heading entity.name",
},
{
foreground: "#55b4d4",
token: "markup.underline.link",
},
{
foreground: "#55b4d4",
token: "string.other.link",
},
{
fontStyle: "italic",
foreground: "#f07171",
token: "markup.italic",
},
{
fontStyle: "bold",
foreground: "#f07171",
token: "markup.bold",
},
{
fontStyle: "bold italic",
token: "markup.italic markup.bold",
},
{
fontStyle: "bold italic",
token: "markup.bold markup.italic",
},
{
background: "#5c616605",
token: "markup.raw",
},
{
background: "#5c61660f",
token: "markup.raw.inline",
},
{
fontStyle: "bold",
background: "#5c61660f",
foreground: "#787b8099",
token: "meta.separator",
},
{
foreground: "#4cbf99",
fontStyle: "italic",
token: "markup.quote",
},
{
foreground: "#f2ae49",
token: "markup.list punctuation.definition.list.begin",
},
{
foreground: "#6cbf43",
token: "markup.inserted",
},
{
foreground: "#478acc",
token: "markup.changed",
},
{
foreground: "#ff7383",
token: "markup.deleted",
},
{
foreground: "#e6ba7e",
token: "markup.strike",
},
{
background: "#5c61660f",
foreground: "#55b4d4",
token: "markup.table",
},
{
foreground: "#ed9366",
token: "text.html.markdown markup.inline.raw",
},
{
background: "#787b8099",
foreground: "#787b8099",
token: "text.html.markdown meta.dummy.line-break",
},
{
background: "#5c6166",
foreground: "#787b8099",
token: "punctuation.definition.markdown",
},
// Manual changes.
{
foreground: "#fa8d3e",
foreground: CONSTELLATION,
token: "number",
},
{
token: "tag",
foreground: ROCK,
},
],
encodedTokensColors: [],
});
@ -886,394 +533,28 @@ export default function MonacoThemes() {
token: "comment",
},
{
foreground: "#aad94c",
foreground: RADIATE,
token: "string",
},
{
foreground: "#aad94c",
token: "constant.other.symbol",
foreground: ELECTRON,
token: "number",
},
{
foreground: "#95e6cb",
token: "string.regexp",
foreground: STARLIGHT,
token: "identifier",
},
{
foreground: "#95e6cb",
token: "constant.character",
},
{
foreground: "#95e6cb",
token: "constant.other",
},
{
foreground: "#d2a6ff",
token: "constant.numeric",
},
{
foreground: "#d2a6ff",
token: "constant.language",
},
{
foreground: "#bfbdb6",
token: "variable",
},
{
foreground: "#bfbdb6",
token: "variable.parameter.function-call",
},
{
foreground: "#f07178",
token: "variable.member",
},
{
fontStyle: "italic",
foreground: "#39bae6",
token: "variable.language",
},
{
foreground: "#ff8f40",
token: "storage",
},
{
foreground: "#ff8f40",
foreground: SUN,
token: "keyword",
},
{
foreground: "#f29668",
token: "keyword.operator",
foreground: PROTON,
token: "tag",
},
{
foreground: "#bfbdb6b3",
token: "punctuation.separator",
},
{
foreground: "#bfbdb6b3",
token: "punctuation.terminator",
},
{
foreground: "#bfbdb6",
token: "punctuation.section",
},
{
foreground: "#f29668",
token: "punctuation.accessor",
},
{
foreground: "#ff8f40",
token: "punctuation.definition.template-expression",
},
{
foreground: "#ff8f40",
token: "punctuation.section.embedded",
},
{
foreground: "#bfbdb6",
token: "meta.embedded",
},
{
foreground: "#59c2ff",
token: "source.java storage.type",
},
{
foreground: "#59c2ff",
token: "source.haskell storage.type",
},
{
foreground: "#59c2ff",
token: "source.c storage.type",
},
{
foreground: "#39bae6",
token: "entity.other.inherited-class",
},
{
foreground: "#ff8f40",
token: "storage.type.function",
},
{
foreground: "#39bae6",
token: "source.java storage.type.primitive",
},
{
foreground: "#ffb454",
token: "entity.name.function",
},
{
foreground: "#d2a6ff",
token: "variable.parameter",
},
{
foreground: "#d2a6ff",
token: "meta.parameter",
},
{
foreground: "#ffb454",
token: "variable.function",
},
{
foreground: "#ffb454",
token: "variable.annotation",
},
{
foreground: "#ffb454",
token: "meta.function-call.generic",
},
{
foreground: "#ffb454",
token: "support.function.go",
},
{
foreground: "#f07178",
token: "support.function",
},
{
foreground: "#f07178",
token: "support.macro",
},
{
foreground: "#aad94c",
token: "entity.name.import",
},
{
foreground: "#aad94c",
token: "entity.name.package",
},
{
foreground: "#59c2ff",
token: "entity.name",
},
{
foreground: "#39bae6",
token: "entity.name.tag",
},
{
foreground: "#39bae6",
token: "meta.tag.sgml",
},
{
foreground: "#59c2ff",
token: "support.class.component",
},
{
foreground: "#39bae680",
token: "punctuation.definition.tag.end",
},
{
foreground: "#39bae680",
token: "punctuation.definition.tag.begin",
},
{
foreground: "#39bae680",
token: "punctuation.definition.tag",
},
{
foreground: "#ffb454",
token: "entity.other.attribute-name",
},
{
fontStyle: "italic",
foreground: "#f29668",
token: "support.constant",
},
{
foreground: "#39bae6",
token: "support.type",
},
{
foreground: "#39bae6",
token: "support.class",
},
{
foreground: "#39bae6",
token: "source.go storage.type",
},
{
foreground: "#e6b673",
token: "meta.decorator variable.other",
},
{
foreground: "#e6b673",
token: "meta.decorator punctuation.decorator",
},
{
foreground: "#e6b673",
token: "storage.type.annotation",
},
{
foreground: "#d95757",
token: "invalid",
},
{
foreground: "#c594c5",
token: "meta.diff",
},
{
foreground: "#c594c5",
token: "meta.diff.header",
},
{
foreground: "#ffb454",
token: "source.ruby variable.other.readwrite",
},
{
foreground: "#59c2ff",
token: "source.css entity.name.tag",
},
{
foreground: "#59c2ff",
token: "source.sass entity.name.tag",
},
{
foreground: "#59c2ff",
token: "source.scss entity.name.tag",
},
{
foreground: "#59c2ff",
token: "source.less entity.name.tag",
},
{
foreground: "#59c2ff",
token: "source.stylus entity.name.tag",
},
{
foreground: "#acb6bf8c",
token: "source.css support.type",
},
{
foreground: "#acb6bf8c",
token: "source.sass support.type",
},
{
foreground: "#acb6bf8c",
token: "source.scss support.type",
},
{
foreground: "#acb6bf8c",
token: "source.less support.type",
},
{
foreground: "#acb6bf8c",
token: "source.stylus support.type",
},
{
fontStyle: "normal",
foreground: "#39bae6",
token: "support.type.property-name",
},
{
foreground: "#acb6bf8c",
token: "constant.numeric.line-number.find-in-files - match",
},
{
foreground: "#ff8f40",
token: "constant.numeric.line-number.match",
},
{
foreground: "#aad94c",
token: "entity.name.filename.find-in-files",
},
{
foreground: "#d95757",
token: "message.error",
},
{
fontStyle: "bold",
foreground: "#aad94c",
token: "markup.heading",
},
{
fontStyle: "bold",
foreground: "#aad94c",
token: "markup.heading entity.name",
},
{
foreground: "#39bae6",
token: "markup.underline.link",
},
{
foreground: "#39bae6",
token: "string.other.link",
},
{
fontStyle: "italic",
foreground: "#f07178",
token: "markup.italic",
},
{
fontStyle: "bold",
foreground: "#f07178",
token: "markup.bold",
},
{
fontStyle: "bold italic",
token: "markup.italic markup.bold",
},
{
fontStyle: "bold italic",
token: "markup.bold markup.italic",
},
{
background: "#bfbdb605",
token: "markup.raw",
},
{
background: "#bfbdb60f",
token: "markup.raw.inline",
},
{
fontStyle: "bold",
background: "#bfbdb60f",
foreground: "#acb6bf8c",
token: "meta.separator",
},
{
foreground: "#95e6cb",
fontStyle: "italic",
token: "markup.quote",
},
{
foreground: "#ffb454",
token: "markup.list punctuation.definition.list.begin",
},
{
foreground: "#7fd962",
token: "markup.inserted",
},
{
foreground: "#73b8ff",
token: "markup.changed",
},
{
foreground: "#f26d78",
token: "markup.deleted",
},
{
foreground: "#e6b673",
token: "markup.strike",
},
{
background: "#bfbdb60f",
foreground: "#39bae6",
token: "markup.table",
},
{
foreground: "#f29668",
token: "text.html.markdown markup.inline.raw",
},
{
background: "#acb6bf8c",
foreground: "#acb6bf8c",
token: "text.html.markdown meta.dummy.line-break",
},
{
background: "#bfbdb6",
foreground: "#acb6bf8c",
token: "punctuation.definition.markdown",
},
// Manual changes.
{
foreground: "#fa8d3e",
token: "number",
foreground: ASTEROID,
token: "delimiter",
},
],
encodedTokensColors: [],

View file

@ -7,7 +7,7 @@ module.exports = {
theme: {
extend: {
colors: {
"ayu-accent": "#fa8d3e",
"ayu-accent": "#ffac2f",
"ayu-background": {
DEFAULT: "#f8f9fa",
dark: "#0b0e14",