This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Assembler CSS Play? #8
Comments
UpdateI made an Assembler CSS play! Here's the code! |
|
We are currently in crunch mode, preparing a mega-update for Expressive Animator, but once that update is live, we can consider developing something similar to Tailwind Play. PS. I've downloaded the zip file, but it seems to be empty. |
Weird, I'll just paste the code then: HTML code (index.html)<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettier/2.3.2/standalone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettier/2.3.2/parser-babel.min.js"></script>
<meta charset="utf-8" />
<title>monaco editor</title>
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css"
/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="editors">
<div class="editor">
<h2 id="editor_title">HTML</h2>
<div id="html"></div>
</div>
<div class="editor">
<h2 id="editor_title">CSS</h2>
<div id="css"></div>
</div>
</div>
<div id="loading"><button></button><span>Loading</span></div>
<iframe frameborder="0" id="preview"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js"></script>
<script src="https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js"></script>
<script src="script.js" type="module" defer></script>
</body>
</html>CSS code:root {
--font: "Montserrat", sans-serif;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
width: 100vw;
height: 100vh;
background: #0b2c44;
}
.editors {
flex: 1;
}
.editors .editor {
height: 50%;
display: flex;
flex-direction: column;
}
#editor_title {
font-family: var(--font);
padding: 3px 10px;
color: white;
}
#html,
#css,
#js,
#javascript {
flex: 1;
position: relative;
}
iframe {
flex: 1.5;
background: white;
}
#editor_title {
font-size: 1.2rem;
z-index: 1000;
background: linear-gradient(to right, #1c5684, #361c84);
opacity: 0.6;
transition: opacity 0.3s ease;
border-radius: 4px;
}
.editors .editor:is(:hover, :focus, :focus-within) #editor_title {
opacity: 1;
}
.editors {
border-right: 4px solid #361c84;
}
html {
overflow: hidden;
}
#loading button {
height: 15px;
width: 15px;
background: rgba(0, 0, 0, 0);
border-radius: 50%;
border-top: 4px solid #5a9fd7;
border-right: 2px solid transparent;
border-bottom: none;
border-left: none;
position: absolute;
left: 10px;
animation: spinner5 400ms linear infinite;
}
#loading span {
position: absolute;
left: 35px;
color: white;
font-family: var(--font);
}
#loading {
width: 60%;
position: absolute;
z-index: 1000;
background: #361c84;
right: 0;
bottom: 0;
height: 5%;
display: flex;
align-items: center;
transition: opacity 0.3s ease;
}
#loading {
opacity: 0;
pointer-events: none;
}
#loading.shown {
opacity: 1;
pointer-events: auto;
}
@keyframes spinner5 {
to {
transform: rotate(360deg);
}
}JS code (script.js, run as module)import * as _$ from "https://unpkg.com/bijou.js";
import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
import parserHTML from "https://unpkg.com/prettier@2.3.2/esm/parser-html.mjs";
import parserCSS from "https://unpkg.com/prettier@2.3.2/esm/parser-postcss.mjs";
var editors = [];
const options = {
cursorSmoothCaretAnimation: true,
dragAndDrop: true,
fontLigatures: true,
fontFamily: "Fira Code",
cursorBlinking: "smooth",
smoothScrolling: true,
renderWhitespace: "selection",
minimap: { enabled: false },
multiCursorModifier: "ctrlCmd",
copyWithSyntaxHighlighting: true,
formatOnType: true,
formatOnPaste: true,
scrollBeyondLastLine: false,
automaticLayout: true
};
function init() {
return new Promise((res) => {
require.config({
paths: {
vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs"
}
});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
let proxy = URL.createObjectURL(
new Blob(
[
`
self.MonacoEnvironment = {
baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min'
};
importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/base/worker/workerMain.min.js');
`
],
{ type: "text/javascript" }
)
);
require(["vs/editor/editor.main"], editorContext);
});
}
init();
async function editorContext() {
var data = await fetch("theme.json").then((res) => res.json());
monaco.editor.defineTheme("custom", data);
monaco.editor.setTheme("custom");
create({
language: "html",
selector: "#html",
value: ""
});
create({
language: "css",
selector: "#css",
value: ""
});
(() => {
editors[0].addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B,
function () {
const value = editors[0].getValue();
console.log("Beautifying");
console.log("Cursor position is:");
var position = editors[0].getPosition();
console.log(position);
console.log("Cursor index is:");
var model = monaco.editor.createModel(value);
var index = model.getOffsetAt(position);
console.log(index);
var val = prettier.formatWithCursor(value, {
cursorOffset: index,
plugins: [parserHTML],
parser: "html"
});
editors[0].setValue(val.formatted);
var newModel = monaco.editor.createModel(val.formatted);
var newIndex = model.getPositionAt(val.cursorOffset);
console.log({ newModel, newIndex });
editors[0].setPosition(newIndex);
}
);
editors[1].addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B,
function () {
const value = editors[1].getValue();
console.log("Beautifying");
console.log("Cursor position is:");
var position = editors[1].getPosition();
console.log(position);
console.log("Cursor index is:");
var model = monaco.editor.createModel(value);
var index = model.getOffsetAt(position);
console.log(index);
var val = prettier.formatWithCursor(value, {
cursorOffset: index,
parser: "css",
plugins: [parserCSS]
});
editors[1].setValue(val.formatted);
var newModel = monaco.editor.createModel(val.formatted);
var newIndex = model.getPositionAt(val.cursorOffset);
console.log({ newModel, newIndex });
editors[1].setPosition(newIndex);
}
);
editors.forEach((editor) => {
editor.getModel().onDidChangeContent(_$.debounce(update, 500));
});
})();
async function getEditorContent() {
var content = await fetch("content.json").then((res) => res.json());
localforage
.getItem("values")
.then((res) => {
if (res == null) {
localforage.setItem("values", [content.html, content.css]);
return getEditorContent();
}
res.forEach((val, idx) => editors[idx].setValue(val));
console.log("Updating");
update();
})
.catch();
}
getEditorContent();
function create({ value = "", language, selector }) {
let editor = monaco.editor.create(document.querySelector(selector), {
value: value,
language: language,
theme: "custom",
...options
});
editors.push(editor);
}
}
// window.onkeyup = _$.debounce(update, 500);
async function update() {
startLoading();
const values = [editors[0].getValue(), editors[1].getValue()];
localforage.setItem("values", values);
const color_pallette = (await fetch("content.json").then((res) => res.json()))
.pallette;
let html = `
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@asmcss/assembler/dist/assembler.min.js"></script>
</head>
<body>
${editors[0].getValue()}
</body>
</html>
<style>
${editors[1].getValue()}
</style>
<style>
${color_pallette}
</style>
<script>
console = {
log: (...data) => send({type: 'log', data: data}),
warn: (...data) => send({type: 'warn', data: data}),
error: (...data) => send({type: 'error', data: data}),
info: (...data) => send({type: 'info', data: data})
}
function send(message){
//var parent = window.parent;
// parent.postMessage({from: "iframe_msg", message});
}
</script>
`;
let ifr = document.querySelector("iframe");
ifr.onload = () => setTimeout(stopLoading, 500);
ifr.src = "data:text/html," + encodeURIComponent(html);
}
function startLoading() {
document.querySelector("#loading").classList.add("shown");
}
function stopLoading() {
document.querySelector("#loading").classList.remove("shown");
}
window.addEventListener("message", ({ data }) => {
if (data.from !== "iframe_msg") return;
const message = data.message;
console.log(`Got message:`, message);
});content.json (Used for default code when the user loads the page for the 1st time){
"pallette": ":root {\r\n --red-50: #ffebee;\r\n --red-100: #ffcdd2;\r\n --red-200: #ef9a9a;\r\n --red-300: #e57373;\r\n --red-400: #ef5350;\r\n --red-500: #f44336;\r\n --red-600: #e53935;\r\n --red-700: #d32f2f;\r\n --red-800: #c62828;\r\n --red-900: #b71c1c;\r\n --red-a100: #ff8a80;\r\n --red-a200: #ff5252;\r\n --red-a400: #ff1744;\r\n --red-a700: #d50000;\r\n --red: var(--red-500);\r\n\r\n --pink-50: #fce4ec;\r\n --pink-100: #f8bbd0;\r\n --pink-200: #f48fb1;\r\n --pink-300: #f06292;\r\n --pink-400: #ec407a;\r\n --pink-500: #e91e63;\r\n --pink-600: #d81b60;\r\n --pink-700: #c2185b;\r\n --pink-800: #ad1457;\r\n --pink-900: #880e4f;\r\n --pink-a100: #ff80ab;\r\n --pink-a200: #ff4081;\r\n --pink-a400: #f50057;\r\n --pink-a700: #c51162;\r\n --pink: var(--pink-500);\r\n\r\n --purple-50: #f3e5f5;\r\n --purple-100: #e1bee7;\r\n --purple-200: #ce93d8;\r\n --purple-300: #ba68c8;\r\n --purple-400: #ab47bc;\r\n --purple-500: #9c27b0;\r\n --purple-600: #8e24aa;\r\n --purple-700: #7b1fa2;\r\n --purple-800: #6a1b9a;\r\n --purple-900: #4a148c;\r\n --purple-a100: #ea80fc;\r\n --purple-a200: #e040fb;\r\n --purple-a400: #d500f9;\r\n --purple-a700: #a0f;\r\n --purple: var(--purple-500);\r\n\r\n --deep-purple-50: #ede7f6;\r\n --deep-purple-100: #d1c4e9;\r\n --deep-purple-200: #b39ddb;\r\n --deep-purple-300: #9575cd;\r\n --deep-purple-400: #7e57c2;\r\n --deep-purple-500: #673ab7;\r\n --deep-purple-600: #5e35b1;\r\n --deep-purple-700: #512da8;\r\n --deep-purple-800: #4527a0;\r\n --deep-purple-900: #311b92;\r\n --deep-purple-a100: #b388ff;\r\n --deep-purple-a200: #7c4dff;\r\n --deep-purple-a400: #651fff;\r\n --deep-purple-a700: #6200ea;\r\n --deep-purple: var(--deep-purple-500);\r\n\r\n --indigo-50: #e8eaf6;\r\n --indigo-100: #c5cae9;\r\n --indigo-200: #9fa8da;\r\n --indigo-300: #7986cb;\r\n --indigo-400: #5c6bc0;\r\n --indigo-500: #3f51b5;\r\n --indigo-600: #3949ab;\r\n --indigo-700: #303f9f;\r\n --indigo-800: #283593;\r\n --indigo-900: #1a237e;\r\n --indigo-a100: #8c9eff;\r\n --indigo-a200: #536dfe;\r\n --indigo-a400: #3d5afe;\r\n --indigo-a700: #304ffe;\r\n --indigo: var(--indigo-500);\r\n\r\n --blue-50: #e3f2fd;\r\n --blue-100: #bbdefb;\r\n --blue-200: #90caf9;\r\n --blue-300: #64b5f6;\r\n --blue-400: #42a5f5;\r\n --blue-500: #2196f3;\r\n --blue-600: #1e88e5;\r\n --blue-700: #1976d2;\r\n --blue-800: #1565c0;\r\n --blue-900: #0d47a1;\r\n --blue-a100: #82b1ff;\r\n --blue-a200: #448aff;\r\n --blue-a400: #2979ff;\r\n --blue-a700: #2962ff;\r\n --blue: var(--blue-500);\r\n\r\n --light-blue-50: #e1f5fe;\r\n --light-blue-100: #b3e5fc;\r\n --light-blue-200: #81d4fa;\r\n --light-blue-300: #4fc3f7;\r\n --light-blue-400: #29b6f6;\r\n --light-blue-500: #03a9f4;\r\n --light-blue-600: #039be5;\r\n --light-blue-700: #0288d1;\r\n --light-blue-800: #0277bd;\r\n --light-blue-900: #01579b;\r\n --light-blue-a100: #80d8ff;\r\n --light-blue-a200: #40c4ff;\r\n --light-blue-a400: #00b0ff;\r\n --light-blue-a700: #0091ea;\r\n --light-blue: var(--light-blue-500);\r\n\r\n --cyan-50: #e0f7fa;\r\n --cyan-100: #b2ebf2;\r\n --cyan-200: #80deea;\r\n --cyan-300: #4dd0e1;\r\n --cyan-400: #26c6da;\r\n --cyan-500: #00bcd4;\r\n --cyan-600: #00acc1;\r\n --cyan-700: #0097a7;\r\n --cyan-800: #00838f;\r\n --cyan-900: #006064;\r\n --cyan-a100: #84ffff;\r\n --cyan-a200: #18ffff;\r\n --cyan-a400: #00e5ff;\r\n --cyan-a700: #00b8d4;\r\n --cyan: var(--cyan-500);\r\n\r\n --teal-50: #e0f2f1;\r\n --teal-100: #b2dfdb;\r\n --teal-200: #80cbc4;\r\n --teal-300: #4db6ac;\r\n --teal-400: #26a69a;\r\n --teal-500: #009688;\r\n --teal-600: #00897b;\r\n --teal-700: #00796b;\r\n --teal-800: #00695c;\r\n --teal-900: #004d40;\r\n --teal-a100: #a7ffeb;\r\n --teal-a200: #64ffda;\r\n --teal-a400: #1de9b6;\r\n --teal-a700: #00bfa5;\r\n --teal: var(--teal-500);\r\n\r\n --green-50: #e8f5e9;\r\n --green-100: #c8e6c9;\r\n --green-200: #a5d6a7;\r\n --green-300: #81c784;\r\n --green-400: #66bb6a;\r\n --green-500: #4caf50;\r\n --green-600: #43a047;\r\n --green-700: #388e3c;\r\n --green-800: #2e7d32;\r\n --green-900: #1b5e20;\r\n --green-a100: #b9f6ca;\r\n --green-a200: #69f0ae;\r\n --green-a400: #00e676;\r\n --green-a700: #00c853;\r\n --green: var(--green-500);\r\n\r\n --light-green-50: #f1f8e9;\r\n --light-green-100: #dcedc8;\r\n --light-green-200: #c5e1a5;\r\n --light-green-300: #aed581;\r\n --light-green-400: #9ccc65;\r\n --light-green-500: #8bc34a;\r\n --light-green-600: #7cb342;\r\n --light-green-700: #689f38;\r\n --light-green-800: #558b2f;\r\n --light-green-900: #33691e;\r\n --light-green-a100: #ccff90;\r\n --light-green-a200: #b2ff59;\r\n --light-green-a400: #76ff03;\r\n --light-green-a700: #64dd17;\r\n --light-green: var(--light-green-500);\r\n\r\n --lime-50: #f9fbe7;\r\n --lime-100: #f0f4c3;\r\n --lime-200: #e6ee9c;\r\n --lime-300: #dce775;\r\n --lime-400: #d4e157;\r\n --lime-500: #cddc39;\r\n --lime-600: #c0ca33;\r\n --lime-700: #afb42b;\r\n --lime-800: #9e9d24;\r\n --lime-900: #827717;\r\n --lime-a100: #f4ff81;\r\n --lime-a200: #eeff41;\r\n --lime-a400: #c6ff00;\r\n --lime-a700: #aeea00;\r\n --lime: var(--lime-500);\r\n\r\n --yellow-50: #fffde7;\r\n --yellow-100: #fff9c4;\r\n --yellow-200: #fff59d;\r\n --yellow-300: #fff176;\r\n --yellow-400: #ffee58;\r\n --yellow-500: #ffeb3b;\r\n --yellow-600: #fdd835;\r\n --yellow-700: #fbc02d;\r\n --yellow-800: #f9a825;\r\n --yellow-900: #f57f17;\r\n --yellow-a100: #ffff8d;\r\n --yellow-a200: #ff0;\r\n --yellow-a400: #ffea00;\r\n --yellow-a700: #ffd600;\r\n --yellow: var(--yellow-500);\r\n\r\n --amber-50: #fff8e1;\r\n --amber-100: #ffecb3;\r\n --amber-200: #ffe082;\r\n --amber-300: #ffd54f;\r\n --amber-400: #ffca28;\r\n --amber-500: #ffc107;\r\n --amber-600: #ffb300;\r\n --amber-700: #ffa000;\r\n --amber-800: #ff8f00;\r\n --amber-900: #ff6f00;\r\n --amber-a100: #ffe57f;\r\n --amber-a200: #ffd740;\r\n --amber-a400: #ffc400;\r\n --amber-a700: #ffab00;\r\n --amber: var(--amber-500);\r\n\r\n --orange-50: #fff3e0;\r\n --orange-100: #ffe0b2;\r\n --orange-200: #ffcc80;\r\n --orange-300: #ffb74d;\r\n --orange-400: #ffa726;\r\n --orange-500: #ff9800;\r\n --orange-600: #fb8c00;\r\n --orange-700: #f57c00;\r\n --orange-800: #ef6c00;\r\n --orange-900: #e65100;\r\n --orange-a100: #ffd180;\r\n --orange-a200: #ffab40;\r\n --orange-a400: #ff9100;\r\n --orange-a700: #ff6d00;\r\n --orange: var(--orange-500);\r\n\r\n --deep-orange-50: #fbe9e7;\r\n --deep-orange-100: #ffccbc;\r\n --deep-orange-200: #ffab91;\r\n --deep-orange-300: #ff8a65;\r\n --deep-orange-400: #ff7043;\r\n --deep-orange-500: #ff5722;\r\n --deep-orange-600: #f4511e;\r\n --deep-orange-700: #e64a19;\r\n --deep-orange-800: #d84315;\r\n --deep-orange-900: #bf360c;\r\n --deep-orange-a100: #ff9e80;\r\n --deep-orange-a200: #ff6e40;\r\n --deep-orange-a400: #ff3d00;\r\n --deep-orange-a700: #dd2c00;\r\n --deep-orange: var(--deep-orange-500);\r\n\r\n --brown-50: #efebe9;\r\n --brown-100: #d7ccc8;\r\n --brown-200: #bcaaa4;\r\n --brown-300: #a1887f;\r\n --brown-400: #8d6e63;\r\n --brown-500: #795548;\r\n --brown-600: #6d4c41;\r\n --brown-700: #5d4037;\r\n --brown-800: #4e342e;\r\n --brown-900: #3e2723;\r\n --brown: var(--brown-500);\r\n\r\n --grey-50: #fafafa;\r\n --grey-100: #f5f5f5;\r\n --grey-200: #eee;\r\n --grey-300: #e0e0e0;\r\n --grey-400: #bdbdbd;\r\n --grey-500: #9e9e9e;\r\n --grey-600: #757575;\r\n --grey-700: #616161;\r\n --grey-800: #424242;\r\n --grey-900: #212121;\r\n --grey: var(--grey-500);\r\n\r\n --blue-grey-50: #eceff1;\r\n --blue-grey-100: #cfd8dc;\r\n --blue-grey-200: #b0bec5;\r\n --blue-grey-300: #90a4ae;\r\n --blue-grey-400: #78909c;\r\n --blue-grey-500: #607d8b;\r\n --blue-grey-600: #546e7a;\r\n --blue-grey-700: #455a64;\r\n --blue-grey-800: #37474f;\r\n --blue-grey-900: #263238;\r\n --blue-grey: var(--blue-grey-500);\r\n}",
"html": "<div x-style=\"grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3\">\r\n <button x-style=\"^button\">Submit</button>\r\n <button x-style=\"^button:red\">Submit</button>\r\n <button x-style=\"^button:blue\">Submit</button>\r\n <button x-style=\"^button:indigo; radius:pill\">Submit</button>\r\n <button x-style=\"^button:amber; color:black\">Submit</button>\r\n <button x-style=\"^button:indigo\" disabled>Submit</button>\r\n</div>",
"css": ":root {\r\n --reset--mixin: \"appearance:none; outline:none; decoration:none\";\r\n --button-color--mixin: \"bg-color:@${0}-500; bg-color.hover:@${0}-600;\\\r\n bg-color.active:@${0}-700; bg-color.disabled:@${0}-500; \\\r\n ring.focus:4px @${0}-300\";\r\n\r\n --button--mixin: \"inline-flex; ^reset; ^button-color:${0=grey}; \\\r\n justify-content:center; align-items:center; \\\r\n cursor:pointer; cursor.disabled:not-allowed; py:4; px:6; \\\r\n opacity.disabled:50%; transition:all 0.25s; \\\r\n border; color:white; uppercase; radius\";\r\n}\r\n"
}theme.json (The custom theme for monaco){
"base": "vs-dark",
"inherit": true,
"rules": [
{
"background": "011627",
"token": ""
},
{
"foreground": "637777",
"token": "comment"
},
{
"foreground": "addb67",
"token": "string"
},
{
"foreground": "ecc48d",
"token": "vstring.quoted"
},
{
"foreground": "ecc48d",
"token": "variable.other.readwrite.js"
},
{
"foreground": "5ca7e4",
"token": "string.regexp"
},
{
"foreground": "5ca7e4",
"token": "string.regexp keyword.other"
},
{
"foreground": "5f7e97",
"token": "meta.function punctuation.separator.comma"
},
{
"foreground": "f78c6c",
"token": "constant.numeric"
},
{
"foreground": "f78c6c",
"token": "constant.character.numeric"
},
{
"foreground": "addb67",
"token": "variable"
},
{
"foreground": "c792ea",
"token": "keyword"
},
{
"foreground": "c792ea",
"token": "punctuation.accessor"
},
{
"foreground": "c792ea",
"token": "storage"
},
{
"foreground": "c792ea",
"token": "meta.var.expr"
},
{
"foreground": "c792ea",
"token": "meta.class meta.method.declaration meta.var.expr storage.type.jsm"
},
{
"foreground": "c792ea",
"token": "storage.type.property.js"
},
{
"foreground": "c792ea",
"token": "storage.type.property.ts"
},
{
"foreground": "c792ea",
"token": "storage.type.property.tsx"
},
{
"foreground": "82aaff",
"token": "storage.type"
},
{
"foreground": "ffcb8b",
"token": "entity.name.class"
},
{
"foreground": "ffcb8b",
"token": "meta.class entity.name.type.class"
},
{
"foreground": "addb67",
"token": "entity.other.inherited-class"
},
{
"foreground": "82aaff",
"token": "entity.name.function"
},
{
"foreground": "addb67",
"token": "punctuation.definition.variable"
},
{
"foreground": "d3423e",
"token": "punctuation.section.embedded"
},
{
"foreground": "d6deeb",
"token": "punctuation.terminator.expression"
},
{
"foreground": "d6deeb",
"token": "punctuation.definition.arguments"
},
{
"foreground": "d6deeb",
"token": "punctuation.definition.array"
},
{
"foreground": "d6deeb",
"token": "punctuation.section.array"
},
{
"foreground": "d6deeb",
"token": "meta.array"
},
{
"foreground": "d9f5dd",
"token": "punctuation.definition.list.begin"
},
{
"foreground": "d9f5dd",
"token": "punctuation.definition.list.end"
},
{
"foreground": "d9f5dd",
"token": "punctuation.separator.arguments"
},
{
"foreground": "d9f5dd",
"token": "punctuation.definition.list"
},
{
"foreground": "d3423e",
"token": "string.template meta.template.expression"
},
{
"foreground": "d6deeb",
"token": "string.template punctuation.definition.string"
},
{
"foreground": "c792ea",
"fontStyle": "italic",
"token": "italic"
},
{
"foreground": "addb67",
"fontStyle": "bold",
"token": "bold"
},
{
"foreground": "82aaff",
"token": "constant.language"
},
{
"foreground": "82aaff",
"token": "punctuation.definition.constant"
},
{
"foreground": "82aaff",
"token": "variable.other.constant"
},
{
"foreground": "7fdbca",
"token": "support.function.construct"
},
{
"foreground": "7fdbca",
"token": "keyword.other.new"
},
{
"foreground": "82aaff",
"token": "constant.character"
},
{
"foreground": "82aaff",
"token": "constant.other"
},
{
"foreground": "f78c6c",
"token": "constant.character.escape"
},
{
"foreground": "addb67",
"token": "entity.other.inherited-class"
},
{
"foreground": "d7dbe0",
"token": "variable.parameter"
},
{
"foreground": "7fdbca",
"token": "entity.name.tag"
},
{
"foreground": "cc2996",
"token": "punctuation.definition.tag.html"
},
{
"foreground": "cc2996",
"token": "punctuation.definition.tag.begin"
},
{
"foreground": "cc2996",
"token": "punctuation.definition.tag.end"
},
{
"foreground": "addb67",
"token": "entity.other.attribute-name"
},
{
"foreground": "addb67",
"token": "entity.name.tag.custom"
},
{
"foreground": "82aaff",
"token": "support.function"
},
{
"foreground": "82aaff",
"token": "support.constant"
},
{
"foreground": "7fdbca",
"token": "upport.constant.meta.property-value"
},
{
"foreground": "addb67",
"token": "support.type"
},
{
"foreground": "addb67",
"token": "support.class"
},
{
"foreground": "addb67",
"token": "support.variable.dom"
},
{
"foreground": "7fdbca",
"token": "support.constant"
},
{
"foreground": "7fdbca",
"token": "keyword.other.special-method"
},
{
"foreground": "7fdbca",
"token": "keyword.other.new"
},
{
"foreground": "7fdbca",
"token": "keyword.other.debugger"
},
{
"foreground": "7fdbca",
"token": "keyword.control"
},
{
"foreground": "c792ea",
"token": "keyword.operator.comparison"
},
{
"foreground": "c792ea",
"token": "keyword.control.flow.js"
},
{
"foreground": "c792ea",
"token": "keyword.control.flow.ts"
},
{
"foreground": "c792ea",
"token": "keyword.control.flow.tsx"
},
{
"foreground": "c792ea",
"token": "keyword.control.ruby"
},
{
"foreground": "c792ea",
"token": "keyword.control.module.ruby"
},
{
"foreground": "c792ea",
"token": "keyword.control.class.ruby"
},
{
"foreground": "c792ea",
"token": "keyword.control.def.ruby"
},
{
"foreground": "c792ea",
"token": "keyword.control.loop.js"
},
{
"foreground": "c792ea",
"token": "keyword.control.loop.ts"
},
{
"foreground": "c792ea",
"token": "keyword.control.import.js"
},
{
"foreground": "c792ea",
"token": "keyword.control.import.ts"
},
{
"foreground": "c792ea",
"token": "keyword.control.import.tsx"
},
{
"foreground": "c792ea",
"token": "keyword.control.from.js"
},
{
"foreground": "c792ea",
"token": "keyword.control.from.ts"
},
{
"foreground": "c792ea",
"token": "keyword.control.from.tsx"
},
{
"foreground": "ffffff",
"background": "ff2c83",
"token": "invalid"
},
{
"foreground": "ffffff",
"background": "d3423e",
"token": "invalid.deprecated"
},
{
"foreground": "7fdbca",
"token": "keyword.operator"
},
{
"foreground": "c792ea",
"token": "keyword.operator.relational"
},
{
"foreground": "c792ea",
"token": "keyword.operator.assignement"
},
{
"foreground": "c792ea",
"token": "keyword.operator.arithmetic"
},
{
"foreground": "c792ea",
"token": "keyword.operator.bitwise"
},
{
"foreground": "c792ea",
"token": "keyword.operator.increment"
},
{
"foreground": "c792ea",
"token": "keyword.operator.ternary"
},
{
"foreground": "637777",
"token": "comment.line.double-slash"
},
{
"foreground": "cdebf7",
"token": "object"
},
{
"foreground": "ff5874",
"token": "constant.language.null"
},
{
"foreground": "d6deeb",
"token": "meta.brace"
},
{
"foreground": "c792ea",
"token": "meta.delimiter.period"
},
{
"foreground": "d9f5dd",
"token": "punctuation.definition.string"
},
{
"foreground": "ff5874",
"token": "constant.language.boolean"
},
{
"foreground": "ffffff",
"token": "object.comma"
},
{
"foreground": "7fdbca",
"token": "variable.parameter.function"
},
{
"foreground": "80cbc4",
"token": "support.type.vendor.property-name"
},
{
"foreground": "80cbc4",
"token": "support.constant.vendor.property-value"
},
{
"foreground": "80cbc4",
"token": "support.type.property-name"
},
{
"foreground": "80cbc4",
"token": "meta.property-list entity.name.tag"
},
{
"foreground": "57eaf1",
"token": "meta.property-list entity.name.tag.reference"
},
{
"foreground": "f78c6c",
"token": "constant.other.color.rgb-value punctuation.definition.constant"
},
{
"foreground": "ffeb95",
"token": "constant.other.color"
},
{
"foreground": "ffeb95",
"token": "keyword.other.unit"
},
{
"foreground": "c792ea",
"token": "meta.selector"
},
{
"foreground": "fad430",
"token": "entity.other.attribute-name.id"
},
{
"foreground": "80cbc4",
"token": "meta.property-name"
},
{
"foreground": "c792ea",
"token": "entity.name.tag.doctype"
},
{
"foreground": "c792ea",
"token": "meta.tag.sgml.doctype"
},
{
"foreground": "d9f5dd",
"token": "punctuation.definition.parameters"
},
{
"foreground": "ecc48d",
"token": "string.quoted"
},
{
"foreground": "ecc48d",
"token": "string.quoted.double"
},
{
"foreground": "ecc48d",
"token": "string.quoted.single"
},
{
"foreground": "addb67",
"token": "support.constant.math"
},
{
"foreground": "addb67",
"token": "support.type.property-name.json"
},
{
"foreground": "addb67",
"token": "support.constant.json"
},
{
"foreground": "c789d6",
"token": "meta.structure.dictionary.value.json string.quoted.double"
},
{
"foreground": "80cbc4",
"token": "string.quoted.double.json punctuation.definition.string.json"
},
{
"foreground": "ff5874",
"token": "meta.structure.dictionary.json meta.structure.dictionary.value constant.language"
},
{
"foreground": "d6deeb",
"token": "variable.other.ruby"
},
{
"foreground": "ecc48d",
"token": "entity.name.type.class.ruby"
},
{
"foreground": "ecc48d",
"token": "keyword.control.class.ruby"
},
{
"foreground": "ecc48d",
"token": "meta.class.ruby"
},
{
"foreground": "7fdbca",
"token": "constant.language.symbol.hashkey.ruby"
},
{
"foreground": "e0eddd",
"background": "a57706",
"fontStyle": "italic",
"token": "meta.diff"
},
{
"foreground": "e0eddd",
"background": "a57706",
"fontStyle": "italic",
"token": "meta.diff.header"
},
{
"foreground": "ef535090",
"fontStyle": "italic",
"token": "markup.deleted"
},
{
"foreground": "a2bffc",
"fontStyle": "italic",
"token": "markup.changed"
},
{
"foreground": "a2bffc",
"fontStyle": "italic",
"token": "meta.diff.header.git"
},
{
"foreground": "a2bffc",
"fontStyle": "italic",
"token": "meta.diff.header.from-file"
},
{
"foreground": "a2bffc",
"fontStyle": "italic",
"token": "meta.diff.header.to-file"
},
{
"foreground": "219186",
"background": "eae3ca",
"token": "markup.inserted"
},
{
"foreground": "d3201f",
"token": "other.package.exclude"
},
{
"foreground": "d3201f",
"token": "other.remove"
},
{
"foreground": "269186",
"token": "other.add"
},
{
"foreground": "ff5874",
"token": "constant.language.python"
},
{
"foreground": "82aaff",
"token": "variable.parameter.function.python"
},
{
"foreground": "82aaff",
"token": "meta.function-call.arguments.python"
},
{
"foreground": "b2ccd6",
"token": "meta.function-call.python"
},
{
"foreground": "b2ccd6",
"token": "meta.function-call.generic.python"
},
{
"foreground": "d6deeb",
"token": "punctuation.python"
},
{
"foreground": "addb67",
"token": "entity.name.function.decorator.python"
},
{
"foreground": "8eace3",
"token": "source.python variable.language.special"
},
{
"foreground": "82b1ff",
"token": "markup.heading.markdown"
},
{
"foreground": "c792ea",
"fontStyle": "italic",
"token": "markup.italic.markdown"
},
{
"foreground": "addb67",
"fontStyle": "bold",
"token": "markup.bold.markdown"
},
{
"foreground": "697098",
"token": "markup.quote.markdown"
},
{
"foreground": "80cbc4",
"token": "markup.inline.raw.markdown"
},
{
"foreground": "ff869a",
"token": "markup.underline.link.markdown"
},
{
"foreground": "ff869a",
"token": "markup.underline.link.image.markdown"
},
{
"foreground": "d6deeb",
"token": "string.other.link.title.markdown"
},
{
"foreground": "d6deeb",
"token": "string.other.link.description.markdown"
},
{
"foreground": "82b1ff",
"token": "punctuation.definition.string.markdown"
},
{
"foreground": "82b1ff",
"token": "punctuation.definition.string.begin.markdown"
},
{
"foreground": "82b1ff",
"token": "punctuation.definition.string.end.markdown"
},
{
"foreground": "82b1ff",
"token": "meta.link.inline.markdown punctuation.definition.string"
},
{
"foreground": "7fdbca",
"token": "punctuation.definition.metadata.markdown"
},
{
"foreground": "82b1ff",
"token": "beginning.punctuation.definition.list.markdown"
}
],
"colors": {
"editor.foreground": "#d6deeb",
"editor.background": "#011627",
"editor.selectionBackground": "#5f7e9779",
"editor.lineHighlightBackground": "#010E17",
"editorCursor.foreground": "#80a4c2",
"editorWhitespace.foreground": "#2e2040",
"editorIndentGuide.background": "#5e81ce52",
"editor.selectionHighlightBorder": "#122d42"
}
}
|
|
Oh, and Control+b beautifies the code in the active editor using Prettier Also, code is stored locally using localforage |
|
Working version here |
|
@msarca Bump! 😃 |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
It would be really cool to have a live play, much like TailwindCSS's play, this would greatly speed up a lot of the development process for us devs!
The text was updated successfully, but these errors were encountered: