semantic color naming
This commit is contained in:
144
index.html
144
index.html
@ -64,59 +64,58 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
<body id="all" class="z-0 overflow-y-hidden bg-background">
|
||||
<h1 class="text-3xl text-color5">Portez donc un whisky à ce juge blond qui fume</h1>
|
||||
<body id="all" class="z-0 overflow-y-hidden bg-black">
|
||||
<!-- The header is hidden on smaller devices -->
|
||||
<header class="py-0 block neutral-900">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-color5">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-selection_background">
|
||||
<a class="flex title-font font-medium items-center mb-0">
|
||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 rounded-full fill-color2" alt="Topos Frog Logo" />
|
||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-color6 text-2xl placeholder-color2" id="renamer" type="text" placeholder="Topos">
|
||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 rounded-full fill-background" alt="Topos Frog Logo" />
|
||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-color10 text-2xl placeholder-background" id="renamer" type="text" placeholder="Topos">
|
||||
|
||||
</a>
|
||||
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:gray-800 px-2 py-2 rounded-lg text-color2">
|
||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:gray-800 px-2 py-2 rounded-lg hover:bg-brightwhite text-white">
|
||||
<svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
|
||||
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
|
||||
</svg>
|
||||
<svg id="pause-icon" class="hidden w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg id="pause-icon" class="hidden w-7 h-7 text-selection_foreground" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
|
||||
</svg>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 inline-block">Play</p>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 inline-block text-selection_foreground">Play</p>
|
||||
</a>
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:gray-800 px-2 py-2 rounded-lg text-color2">
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:gray-800 px-2 py-2 rounded-lg hover:bg-color3 text-background">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
|
||||
<rect x="6.5" y="6.5" width="7" height="7" fill="black" rx="1" ry="1"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Stop</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block text-background">Stop</p>
|
||||
</a>
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 px-2 py-2 rounded-lg text-color2">
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 px-2 py-2 rounded-lg hover:bg-color3 text-background">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Eval</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block text-background">Eval</p>
|
||||
</a>
|
||||
|
||||
<a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 px-2 py-2 rounded-lg text-color2">
|
||||
<a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 px-2 py-2 rounded-lg hover:bg-color3 text-background">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Clear</p>
|
||||
</a>
|
||||
|
||||
<a title="Share button" id="share-button" class="flex flex-row mr-2 px-2 py-2 rounded-lg text-color2">
|
||||
<a title="Share button" id="share-button" class="flex flex-row mr-2 px-2 py-2 rounded-lg hover:bg-color3 text-background">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Share</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block text-background">Share</p>
|
||||
</a>
|
||||
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row px-2 py-2 rounded-lg text-color2">
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row px-2 py-2 rounded-lg hover:bg-color3 text-background">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Docs</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block text-background">Docs</p>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
@ -126,12 +125,13 @@
|
||||
|
||||
<div id="documentation" class="hidden">
|
||||
<div id="documentation-page" class="flex flex-row transparent">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-[--var(color1)]">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-color4">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-foreground">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-foreground">
|
||||
<details class="" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Welcome </p>
|
||||
<p rel="noopener noreferrer" id="docs_introduction"
|
||||
class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg text-color1">Welcome </p>
|
||||
<p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Interface</p>
|
||||
<p rel="noopener noreferrer" id="docs_interaction" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Interaction</p>
|
||||
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
|
||||
@ -238,9 +238,9 @@
|
||||
|
||||
<div id="app">
|
||||
<!-- This modal is used for switching between buffers -->
|
||||
<div id="modal-buffers" class="invisible gray-900 opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center white">
|
||||
<p class="text-semibold lg:text-2xl text-sm pb-4">Known universes</p>
|
||||
<div id="modal-buffers" class="invisible opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
|
||||
<p class="text-semibold lg:text-2xl text-sm pb-4 text-color2">Known universes</p>
|
||||
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
|
||||
<div id="disclaimer" class="pb-4">
|
||||
<form id="universe-creator">
|
||||
@ -271,21 +271,22 @@
|
||||
md:top-0 md:bottom-0 h-screen w-full"
|
||||
>
|
||||
<div class="grid w-full grid-col-3">
|
||||
<div class="white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8">
|
||||
<div class="white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8 bg-foreground">
|
||||
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg
|
||||
gray-800 justify-center lg:text-center lg:pl-0 pl-8 mx-4
|
||||
text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
|
||||
gray-800 justify-center lg:text-center lg:pl-0 pl-8 mx-4
|
||||
bg-selection_foreground
|
||||
text-sm lg:text-xl border-b py-4 text-color2">Topos Application Settings</h1>
|
||||
<div class="flex lg:flex-row flex-col mr-4 ml-4">
|
||||
<!-- Font Size Selection -->
|
||||
<div class="gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p>
|
||||
<div class="gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4 text-color2">Font Settings</p>
|
||||
<div class="mb-6 mx-4 font-semibold">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm text-color10">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="gray-50 border border-gray-300 text-gray-900
|
||||
text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 gray-700
|
||||
border-gray-600 placeholder-gray-400 focus:border-blue-500">
|
||||
</div>
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm">Font:</label>
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm text-color10">Font:</label>
|
||||
<select id="font-family" class="gray-50 ml-4 border border-gray-300 mb-2
|
||||
text-gray-900 text-sm rounded-lg focus:border-blue-500 block p-2.5 gray-700 border-gray-600 placeholder-gray-400 ">
|
||||
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||
@ -299,78 +300,79 @@
|
||||
<option value="Steps Mono">Steps Mono</option>
|
||||
<option value="Steps Mono Thin">Steps Mono Thin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm">Theme:</label>
|
||||
<select id="theme-selector" class="gray-50 ml-4 border border-gray-300 mb-2
|
||||
text-gray-900 text-sm rounded-lg focus:border-blue-500 block p-2.5 gray-700 border-gray-600 placeholder-gray-400 ">
|
||||
<label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm text-color10">Theme:</label>
|
||||
<select id="theme-selector" class="gray-50 ml-4 border mb-2
|
||||
text-sm rounded-lg block p-2.5">
|
||||
</select>
|
||||
<div id="theme-previewer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor mode selection -->
|
||||
<div class="gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p>
|
||||
<div class="gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-color2">Editor options</p>
|
||||
<!-- Checkboxes -->
|
||||
<div class="pr-4">
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 gray-700 border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Vim Mode</label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Vim Mode</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 gray-700 border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Show Line Numbers</label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Show Line Numbers</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 gray-700 border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Show Time Position</label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Show Time Position</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 gray-700 border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Show Hovering Tips</label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Show Hovering Tips</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 gray-700 border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Show Completions</label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Show Completions</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 gray-700 border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Load Demo Song</label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Load Demo Song</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p>
|
||||
<div class="gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-color2">File Management</p>
|
||||
<div class="flex flex-col space-y-2 pb-2">
|
||||
<button id="download-universes" class="gray-800 hover:gray-900 font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="download-universes" class="bg-color3 font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Download universes</span>
|
||||
<span class="text-color0">Download universes</span>
|
||||
</button>
|
||||
<button id="upload-universes" class="gray-800 hover:gray-900 font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="upload-universes" class="bg-color3 font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Upload universes</span>
|
||||
<span class="text-color0">Upload universes</span>
|
||||
</button>
|
||||
<button id="destroy-universes" class="red-800 hover:red-900 font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="destroy-universes" class="bg-color7 font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<span>Destroy universes</span>
|
||||
<span class="text-color0">Destroy universes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Midi settings -->
|
||||
<div id="midi-settings-container" class="gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4">
|
||||
<div id="midi-settings-container" class="gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4 bg-color bg-selection_foreground">
|
||||
<div class="lg:flex lg:flex-row w-fit">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-color2">MIDI I/O Settings</p>
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">MIDI Clock: </label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">MIDI Clock: </label>
|
||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2">
|
||||
<option value="-1">Internal</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Clock PPQN: </label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Clock PPQN: </label>
|
||||
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2">
|
||||
<option value="24">24</option>
|
||||
<option value="48">48</option>
|
||||
@ -378,28 +380,28 @@
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 gray-700 border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Send MIDI Clock</label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Send MIDI Clock</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:flex block flex-row">
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">MIDI input: </label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">MIDI input: </label>
|
||||
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2">
|
||||
<option value="-1">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 gray-100 border-gray-300 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 gray-700 border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-">Route channels to scripts</label>
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-color10">Route channels to scripts</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audio nudge slider -->
|
||||
<div id="midi-settings-container" class="gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
|
||||
<div id="midi-settings-container" class="gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-color2">Audio/Event Nudging</p>
|
||||
<div class="flex flex-column pb-2">
|
||||
<p class="pt-0.5 ml-4">Clock:</p>
|
||||
<p class="pt-0.5 ml-4 text-color10">Clock:</p>
|
||||
<input
|
||||
type="range" id="audio_nudge"
|
||||
name="audiorangeInput"
|
||||
@ -412,26 +414,26 @@
|
||||
name="nudgenumber"
|
||||
id="nudgenumber"
|
||||
for="audiorangeInput"
|
||||
class="gray-500 rounded-lg ml-2 mr-4 px-4 py-1 "
|
||||
class="gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-color10"
|
||||
>0</output>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column">
|
||||
|
||||
<p class="pt-0.5 ml-4">Audio:</p>
|
||||
<p class="pt-0.5 ml-4 text-color10">Audio:</p>
|
||||
<input
|
||||
type="range" id="dough_nudge"
|
||||
name="doughrangeInput"
|
||||
min="0" max="100"
|
||||
value="0"
|
||||
class="w-full ml-4"
|
||||
class="w-full ml-4 text-color10"
|
||||
oninput="doughnumber.value=dough_nudge.value"
|
||||
>
|
||||
<output
|
||||
name="doughnumber"
|
||||
id="doughnumber"
|
||||
for="doughrangeInput"
|
||||
class="gray-500 rounded-lg ml-2 mr-4 px-4 py-1 "
|
||||
class="gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-color10"
|
||||
>0</output>
|
||||
</div>
|
||||
|
||||
@ -439,7 +441,7 @@
|
||||
|
||||
<div class="flex space-x-6 border-t border-gray-200 rounded-b border-gray-600 mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
||||
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
|
||||
hover:gray-700 gray-800 mt-4 mb-4 focus:ring-4
|
||||
hover:bg-background bg-background gray-800 mt-4 mb-4 focus:ring-4
|
||||
font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -453,37 +455,37 @@
|
||||
flex flex-col items-center w-14
|
||||
h-screen py-2 border-r
|
||||
rtl:border-l max-h-fit
|
||||
rtl:border-r-0 neutral-900
|
||||
rtl:border-r-0 bg-selection_background
|
||||
border-neutral-700 border-none"
|
||||
>
|
||||
<nav class="flex flex-col space-y-6">
|
||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-color2">
|
||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-background hover:bg-color2">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/>
|
||||
</svg>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-color2">
|
||||
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-background hover:bg-selection_foreground">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
||||
<path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/>
|
||||
<path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-color2">
|
||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-background hover:bg-selection_foreground">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-color2">
|
||||
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-background hover:bg-selection_foreground">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Application Settings" id="settings-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-color2">
|
||||
<a title="Application Settings" id="settings-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-background hover:bg-selection_foreground">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { sendToServer, type OSCMessage, oscMessages } from "./IO/OSC";
|
||||
import { getAllScaleNotes, nearScales, seededRandom } from "zifferjs";
|
||||
import colorschemes from "./colors.json";
|
||||
import {
|
||||
MidiCCEvent,
|
||||
MidiConnection,
|
||||
@ -2276,4 +2277,9 @@ export class UserAPI {
|
||||
this.app.readTheme(color_scheme);
|
||||
console.log("Changing color scheme for: ", color_scheme)
|
||||
}
|
||||
|
||||
public randomTheme = (): string => {
|
||||
let theme_names = Object.keys(colorschemes);
|
||||
return theme_names[Math.floor(Math.random() * theme_names.length)];
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +44,7 @@ export const singleElements = {
|
||||
midi_channels_scripts: "midi-channels-scripts",
|
||||
midi_clock_ppqn: "midi-clock-ppqn-input",
|
||||
theme_selector: "theme-selector",
|
||||
theme_previewer: "theme-previewer",
|
||||
load_demo_songs: "load-demo-songs",
|
||||
normal_mode_button: "normal-mode",
|
||||
vim_mode_button: "vim-mode",
|
||||
|
||||
@ -36,99 +36,104 @@ import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
|
||||
import { javascriptLanguage } from "@codemirror/lang-javascript";
|
||||
|
||||
export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => {
|
||||
const color0 = theme["color0"],
|
||||
color1 = theme["color1"],
|
||||
color2 = theme["color2"],
|
||||
color3 = theme["color3"],
|
||||
color4 = theme["color4"],
|
||||
color5 = theme["color5"],
|
||||
color6 = theme["color6"],
|
||||
color7 = theme["color7"],
|
||||
color8 = theme["color8"],
|
||||
color9 = theme["color9"],
|
||||
color10 = theme["color10"],
|
||||
color11 = theme["color11"],
|
||||
color12 = theme["color12"],
|
||||
color13 = theme["color13"],
|
||||
color14 = theme["color14"],
|
||||
color15 = theme["color15"];
|
||||
const black = theme["black"],
|
||||
red = theme["red"],
|
||||
green = theme["green"],
|
||||
yellow = theme["yellow"],
|
||||
blue = theme["blue"],
|
||||
magenta = theme["magenta"],
|
||||
cyan = theme["cyan"],
|
||||
white = theme["white"],
|
||||
brightblack = theme["brightblack"],
|
||||
brightred = theme["brightred"],
|
||||
brightgreen = theme["brightgreen"],
|
||||
brightyellow = theme["brightyellow"],
|
||||
brightblue = theme["brightblue"],
|
||||
brightmagenta = theme["brightmagenta"],
|
||||
brightcyan = theme["brightcyan"],
|
||||
brightwhite = theme["brightwhite"],
|
||||
background = theme["background"],
|
||||
selection_foreground = theme["selection_foreground"],
|
||||
cursor = theme["cursor"],
|
||||
foreground = theme["foreground"],
|
||||
selection_background = theme["selection_background"];
|
||||
const toposTheme = EditorView.theme( {
|
||||
"&": {
|
||||
color: color5,
|
||||
color: background,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: color6,
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: color6,
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: color0,
|
||||
border: `0.5px solid ${color0}`,
|
||||
backgroundColor: selection_background,
|
||||
border: `0.5px solid ${selection_background}`,
|
||||
},
|
||||
".cm-panels": {
|
||||
backgroundColor: color0,
|
||||
color: color4,
|
||||
backgroundColor: selection_background,
|
||||
color: red,
|
||||
},
|
||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${color3}`,
|
||||
outline: `1px solid ${magenta}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: color0,
|
||||
backgroundColor: red,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
// backgroundColor: highlightBackground
|
||||
backgroundColor: "rgb(76,76,106, 0.1)",
|
||||
backgroundColor: `${selection_background}`,
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: color4,
|
||||
outline: `1px solid ${color10}`,
|
||||
backgroundColor: yellow,
|
||||
outline: `1px solid ${red}`,
|
||||
},
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: color2,
|
||||
color: yellow,
|
||||
// outline: `1px solid ${base02}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: color3,
|
||||
color: yellow,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: color4,
|
||||
color: selection_background,
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: color0,
|
||||
color: color2,
|
||||
backgroundColor: foreground,
|
||||
color: white,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${color7}`,
|
||||
color: `${blue}`,
|
||||
},
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: color12,
|
||||
backgroundColor: yellow,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: color13,
|
||||
borderBottomColor: color14,
|
||||
borderTopColor: yellow,
|
||||
borderBottomColor: yellow,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: color0,
|
||||
color: color3,
|
||||
backgroundColor: blue,
|
||||
color: blue,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -136,99 +141,98 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
|
||||
);
|
||||
|
||||
let toposHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.keyword, color: color3 },
|
||||
{ tag: t.keyword, color: yellow },
|
||||
{
|
||||
tag: [t.name, t.deleted, t.character, t.macroName],
|
||||
color: color2,
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.propertyName], color: color4 },
|
||||
{ tag: [t.variableName], color: color5 },
|
||||
{ tag: [t.function(t.variableName)], color: color2 },
|
||||
{ tag: [t.labelName], color: color3 },
|
||||
{ tag: [t.propertyName], color: red },
|
||||
{ tag: [t.variableName], color: red },
|
||||
{ tag: [t.function(t.variableName)], color: blue },
|
||||
{ tag: [t.labelName], color: red },
|
||||
{
|
||||
tag: [t.color, t.constant(t.name), t.standard(t.name)],
|
||||
color: color4,
|
||||
tag: [t.color, t.constant(t.name), t.standard(t.name)], color: yellow,
|
||||
},
|
||||
{ tag: [t.definition(t.name), t.separator], color: color6 },
|
||||
{ tag: [t.brace], color: color3 },
|
||||
{ tag: [t.definition(t.name), t.separator], color: magenta },
|
||||
{ tag: [t.brace], color: magenta },
|
||||
{
|
||||
tag: [t.annotation],
|
||||
color: color10,
|
||||
color: white ,
|
||||
},
|
||||
{
|
||||
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
|
||||
color: color7,
|
||||
color: yellow ,
|
||||
},
|
||||
{
|
||||
tag: [t.typeName, t.className],
|
||||
color: color7,
|
||||
color: magenta,
|
||||
},
|
||||
{
|
||||
tag: [t.operator, t.operatorKeyword],
|
||||
color: color8,
|
||||
color: blue ,
|
||||
},
|
||||
{
|
||||
tag: [t.tagName],
|
||||
color: color7,
|
||||
color: blue,
|
||||
},
|
||||
{
|
||||
tag: [t.squareBracket],
|
||||
color: color13,
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.angleBracket],
|
||||
color: color2,
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.attributeName],
|
||||
color: color5,
|
||||
color: red,
|
||||
},
|
||||
{
|
||||
tag: [t.regexp],
|
||||
color: color4,
|
||||
color: brightgreen,
|
||||
},
|
||||
{
|
||||
tag: [t.quote],
|
||||
color: color4,
|
||||
color: green,
|
||||
},
|
||||
{ tag: [t.string], color: color14 },
|
||||
{ tag: [t.string], color: green },
|
||||
{
|
||||
tag: t.link,
|
||||
color: color4,
|
||||
color: green,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: color5,
|
||||
color: green,
|
||||
},
|
||||
{ tag: [t.meta], color: color2 },
|
||||
{ tag: [t.comment], color: color2, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: color5 },
|
||||
{ tag: t.strong, fontWeight: "bold", color: color4 },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: color10 },
|
||||
{ tag: [t.meta], color: brightblack },
|
||||
{ tag: [t.comment], color: brightblack, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: black },
|
||||
{ tag: t.strong, fontWeight: "bold", color: magenta },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: magenta },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: color5 },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: color5 },
|
||||
{ tag: t.heading, fontWeight: "bold", color: magenta },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: magenta },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: color4,
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: color4,
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: color2 },
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green},
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: color3,
|
||||
color: green,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: color3,
|
||||
color: green,
|
||||
},
|
||||
{ tag: t.invalid, color: color2, borderBottom: `1px dotted ${color3}` },
|
||||
{ tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` },
|
||||
]);
|
||||
return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
|
||||
]
|
||||
|
||||
@ -294,6 +294,13 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
app.interface.theme_selector.addEventListener("change", () => {
|
||||
app.settings.theme = (app.interface.theme_selector as HTMLSelectElement).value;
|
||||
app.readTheme(app.settings.theme);
|
||||
// @ts-ignore
|
||||
let selected_theme = colors[app.settings.theme as string];
|
||||
let theme_preview = "";
|
||||
for (const [key, _] of Object.entries(selected_theme)) {
|
||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</div>`;
|
||||
}
|
||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
||||
});
|
||||
|
||||
app.interface.settings_button.addEventListener("click", () => {
|
||||
@ -313,6 +320,17 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
app.interface.theme_selector.innerHTML = all_themes.map((color) => {
|
||||
return `<option value="${color}">${color}</option>`
|
||||
}).join("");
|
||||
// Set the selected theme in the selector to app.settings.theme
|
||||
// @ts-ignore
|
||||
app.interface.theme_selector.value = app.settings.theme;
|
||||
|
||||
// @ts-ignore
|
||||
let selected_theme = colors[app.settings.theme as string];
|
||||
let theme_preview = "";
|
||||
for (const [key, _] of Object.entries(selected_theme)) {
|
||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</div>`;
|
||||
}
|
||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
||||
// Populate the font family selector
|
||||
const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement;
|
||||
doughNudgeRange.value = app.dough_nudge.toString();
|
||||
|
||||
9330
src/colors.json
9330
src/colors.json
File diff suppressed because it is too large
Load Diff
@ -211,7 +211,7 @@ export class Editor {
|
||||
loadUniverserFromUrl(this);
|
||||
|
||||
// Set the color scheme for the application
|
||||
this.readTheme("WildCherry");
|
||||
this.readTheme(app.settings.theme);
|
||||
}
|
||||
|
||||
private getBuffer(type: string): any {
|
||||
|
||||
128
src/style.css
128
src/style.css
@ -435,22 +435,22 @@ video {
|
||||
}
|
||||
|
||||
:root {
|
||||
--color0: 40 42 54;
|
||||
--color1: 68 71 90;
|
||||
--color2: 248 248 242;
|
||||
--color3: 98 114 164;
|
||||
--color4: 139 233 253;
|
||||
--color5: 80 250 123;
|
||||
--color6: 255 184 108;
|
||||
--color7: 255 121 198;
|
||||
--color8: 189 147 249;
|
||||
--color9: 255 85 85;
|
||||
--color10: 241 250 140;
|
||||
--color11: 139 233 253;
|
||||
--color12: 80 250 123;
|
||||
--color13: 255 184 108;
|
||||
--color14: 255 121 198;
|
||||
--color15: 189 147 249;
|
||||
--black: 40 42 54;
|
||||
--red: 68 71 90;
|
||||
--green: 248 248 242;
|
||||
--yellow: 98 114 164;
|
||||
--blue: 139 233 253;
|
||||
--magenta: 80 250 123;
|
||||
--cyan: 255 184 108;
|
||||
--white: 255 121 198;
|
||||
--brightblack: 189 147 249;
|
||||
--brightred: 255 85 85;
|
||||
--brightgreen: 241 250 140;
|
||||
--brightyellow: 139 233 253;
|
||||
--brightblue: 80 250 123;
|
||||
--brightmagenta: 255 184 108;
|
||||
--brightcyan: 255 121 198;
|
||||
--brightwhite: 189 147 249;
|
||||
--background: 40 42 54;
|
||||
--selection_foreground: 68 71 90;
|
||||
--cursor: 139 233 253;
|
||||
@ -1151,41 +1151,23 @@ video {
|
||||
background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-color5 {
|
||||
.bg-selection_foreground {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--color5) / var(--tw-bg-opacity));
|
||||
background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-color6 {
|
||||
.bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--color6) / var(--tw-bg-opacity));
|
||||
background-color: rgb(var(--black) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-color3 {
|
||||
.bg-selection_background {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--color3) / var(--tw-bg-opacity));
|
||||
background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-color2 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--color2) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-color4 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--color4) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[--var\(color1\)\] {
|
||||
background-color: var(--var(color1));
|
||||
}
|
||||
|
||||
.fill-color2 {
|
||||
fill: rgb(var(--color2) / 1);
|
||||
}
|
||||
|
||||
.fill-color3 {
|
||||
fill: rgb(var(--color3) / 1);
|
||||
.fill-background {
|
||||
fill: rgb(var(--background) / 1);
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
@ -1379,11 +1361,6 @@ video {
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -1412,29 +1389,29 @@ video {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.text-color5 {
|
||||
.text-background {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(var(--color5) / var(--tw-text-opacity));
|
||||
color: rgb(var(--background) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-color1 {
|
||||
.text-black {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(var(--color1) / var(--tw-text-opacity));
|
||||
color: rgb(var(--black) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-color3 {
|
||||
.text-red {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(var(--color3) / var(--tw-text-opacity));
|
||||
color: rgb(var(--red) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-color2 {
|
||||
.text-selection_foreground {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(var(--color2) / var(--tw-text-opacity));
|
||||
color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-color6 {
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(var(--color6) / var(--tw-text-opacity));
|
||||
color: rgb(var(--white) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
@ -1449,14 +1426,14 @@ video {
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.placeholder-color2::-moz-placeholder {
|
||||
.placeholder-background::-moz-placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(var(--color2) / var(--tw-placeholder-opacity));
|
||||
color: rgb(var(--background) / var(--tw-placeholder-opacity));
|
||||
}
|
||||
|
||||
.placeholder-color2::placeholder {
|
||||
.placeholder-background::placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(var(--color2) / var(--tw-placeholder-opacity));
|
||||
color: rgb(var(--background) / var(--tw-placeholder-opacity));
|
||||
}
|
||||
|
||||
.opacity-50 {
|
||||
@ -1498,6 +1475,35 @@ video {
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
.hover\:bg-background:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--background) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-selection_foreground:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-white:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--white) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-brightwhite:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--brightwhite) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:fill-black:hover {
|
||||
fill: rgb(var(--black) / 1);
|
||||
}
|
||||
|
||||
.hover\:text-black:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(var(--black) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.focus\:outline-none:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--color0: 40 42 54;
|
||||
--color1: 68 71 90;
|
||||
--color2: 248 248 242;
|
||||
--color3: 98 114 164;
|
||||
--color4: 139 233 253;
|
||||
--color5: 80 250 123;
|
||||
--color6: 255 184 108;
|
||||
--color7: 255 121 198;
|
||||
--color8: 189 147 249;
|
||||
--color9: 255 85 85;
|
||||
--color10: 241 250 140;
|
||||
--color11: 139 233 253;
|
||||
--color12: 80 250 123;
|
||||
--color13: 255 184 108;
|
||||
--color14: 255 121 198;
|
||||
--color15: 189 147 249;
|
||||
--black: 40 42 54;
|
||||
--red: 68 71 90;
|
||||
--green: 248 248 242;
|
||||
--yellow: 98 114 164;
|
||||
--blue: 139 233 253;
|
||||
--magenta: 80 250 123;
|
||||
--cyan: 255 184 108;
|
||||
--white: 255 121 198;
|
||||
--brightblack: 189 147 249;
|
||||
--brightred: 255 85 85;
|
||||
--brightgreen: 241 250 140;
|
||||
--brightyellow: 139 233 253;
|
||||
--brightblue: 80 250 123;
|
||||
--brightmagenta: 255 184 108;
|
||||
--brightcyan: 255 121 198;
|
||||
--brightwhite: 189 147 249;
|
||||
--background: 40 42 54;
|
||||
--selection_foreground: 68 71 90;
|
||||
--cursor: 139 233 253;
|
||||
|
||||
@ -8,22 +8,22 @@ export default {
|
||||
],
|
||||
theme: {
|
||||
colors: {
|
||||
color0: "rgb(var(--color0) / <alpha-value>)",
|
||||
color1: "rgb(var(--color1) / <alpha-value>)",
|
||||
color2: "rgb(var(--color2) / <alpha-value>)",
|
||||
color3: "rgb(var(--color3) / <alpha-value>)",
|
||||
color4: "rgb(var(--color4) / <alpha-value>)",
|
||||
color5: "rgb(var(--color5) / <alpha-value>)",
|
||||
color6: "rgb(var(--color6) / <alpha-value>)",
|
||||
color7: "rgb(var(--color7) / <alpha-value>)",
|
||||
color8: "rgb(var(--color8) / <alpha-value>)",
|
||||
color9: "rgb(var(--color9) / <alpha-value>)",
|
||||
color10: "rgb(var(--color10) / <alpha-value>)",
|
||||
color11: "rgb(var(--color11) / <alpha-value>)",
|
||||
color12: "rgb(var(--color12) / <alpha-value>)",
|
||||
color13: "rgb(var(--color13) / <alpha-value>)",
|
||||
color14: "rgb(var(--color14) / <alpha-value>)",
|
||||
color15: "rgb(var(--color15) / <alpha-value>)",
|
||||
black: "rgb(var(--black) / <alpha-value>)",
|
||||
red: "rgb(var(--red) / <alpha-value>)",
|
||||
green: "rgb(var(--green) / <alpha-value>)",
|
||||
yellow: "rgb(var(--yellow) / <alpha-value>)",
|
||||
blue: "rgb(var(--blue) / <alpha-value>)",
|
||||
magenta: "rgb(var(--magenta) / <alpha-value>)",
|
||||
cyan: "rgb(var(--cyan) / <alpha-value>)",
|
||||
white: "rgb(var(--white) / <alpha-value>)",
|
||||
brightblack: "rgb(var(--brightblack) / <alpha-value>)",
|
||||
brightred: "rgb(var(--brightred) / <alpha-value>)",
|
||||
brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
|
||||
brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
|
||||
brightblue: "rgb(var(--brightblue) / <alpha-value>)",
|
||||
brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
|
||||
brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
|
||||
brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
|
||||
background: "rgb(var(--background) / <alpha-value>)",
|
||||
selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
|
||||
cursor: "rgb(var(--cursor) / <alpha-value>)",
|
||||
|
||||
Reference in New Issue
Block a user