BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

semantic color naming

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-15 19:48:42 +01:00
parent 69c5b00b1f
commit 94c1574d96
10 changed files with 4942 additions and 4905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/API.ts
View File

@ -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)];
}
}

1
src/DomElements.ts
View File

@ -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",

154
src/EditorSetup.ts
View File

@ -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),
]

18
src/InterfaceLogic.ts
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

2
src/main.ts
View File

@ -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
View File

@ -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;

32
src/tailwind.css
View File

@ -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;