Introducing toolkit and color themes

app/theme/base.css

@@ -0,0 +1,118 @@
+/* Common styles for all themes */
+
+:root {
+    color      : var(--text);
+    font-family: Arial, sans-serif;
+    font-size  : 16px;
+}
+
+body {
+    background: var(--background);
+    margin    : 0;
+    overflow  : hidden;
+}
+
+*:focus {
+    box-shadow:
+        0 0 0 1px var(--background),
+        0 0 0 3px var(--focus-ring),
+        0 0 0 4px var(--background);
+    outline   : none;
+    z-index   : 1;
+}
+
+
+
+/********************************** Button ***********************************/
+
+[role="button"] {
+    align-items    : center;
+    background     : var(--button);
+    border-color   :
+        var(--border-light)
+        var(--border-dark )
+        var(--border-dark )
+        var(--border-light)
+    ;
+    border-radius  : 3px;
+    border-style   : solid;
+    border-width   : 1px;
+    display        : flex;
+    justify-content: center;
+    padding        : 4px;
+}
+
+[role="button"][aria-pressed="true"]:not([active]) {
+    background  : var(--button-pressed);
+    border-color:
+        var(--border-dark )
+        var(--border-light)
+        var(--border-light)
+        var(--border-dark )
+    ;
+    padding: 5px 3px 3px 5px;
+}
+
+[role="button"]:not([active]):hover {
+    background: var(--button-hover);
+}
+
+[role="button"][active]:not([aria-pressed="true"]) {
+    background  : var(--button-pressed);
+    border-color:
+        var(--border-dark )
+        var(--border-light)
+        var(--border-light)
+        var(--border-dark )
+    ;
+    padding: 5px 3px 3px 5px;
+}
+
+[role="button"][aria-pressed="true"][active] {
+    background  : var(--button-pressed);
+    border-color:
+        var(--border-dark )
+        var(--border-light)
+        var(--border-light)
+        var(--border-dark )
+    ;
+    padding: 6px 2px 2px 6px;
+}
+
+
+
+/********************************** MenuBar **********************************/
+
+[role="menubar"] {
+    border-bottom: 1px solid var(--border-weak);
+    column-gap   : 4px;
+    padding      : 4px;
+}
+
+[role="menubar"] > [role="menuitem"] {
+    border-radius: 3px;
+    padding      : 4px;
+}
+
+[role="menubar"] > * [role="menuitem"] {
+    border-radius: 3px;
+    padding      : 4px;
+}
+
+[role="menubar"] [role="menuitem"]:hover,
+[role="menubar"] [role="menuitem"]:focus,
+[role="menubar"] [role="menuitem"][aria-expanded="true"] {
+    background: var(--button-hover);
+}
+
+[role="menubar"] [role="menu"] {
+    background   : var(--background);
+    border-radius: 4px;
+    box-shadow   :
+        0 0 0 1px var(--border-strong),
+        4px 4px 5px var(--shadow)
+    ;
+    min-height   : 16px;
+    min-width    : 16px;
+    padding      : 4px;
+}

app/theme/dark.css

@@ -0,0 +1,13 @@
+:root {
+    --background    : #222222;
+    --border-dark   : #555555;
+    --border-light  : #999999;
+    --border-weak   : #666666;
+    --border-strong : #999999;
+    --button        : #444444;
+    --button-hover  : #4c4c4c;
+    --button-pressed: #555555;
+    --focus-ring    : #0099ff;
+    --shadow        : #00000080;
+    --text          : #cccccc;
+}

app/theme/light.css

@@ -0,0 +1,13 @@
+:root {
+    --background    : #ffffff;
+    --border-dark   : #666666;
+    --border-light  : #aaaaaa;
+    --border-weak   : #aaaaaa;
+    --border-strong : #666666;
+    --button        : #cccccc;
+    --button-hover  : #d5d5d5;
+    --button-pressed: #dddddd;
+    --focus-ring    : #0099ff;
+    --shadow        : #00000055;
+    --text          : #000000;
+}

app/theme/virtual.css

@@ -0,0 +1,15 @@
+:root {
+    --background    : #000000;
+    --border-dark   : #550000;
+    --border-light  : #aa0000;
+    --border-weak   : #550000;
+    --border-strong : #aa0000;
+    --button        : #000000;
+    --button-hover  : #550000;
+    --button-pressed: #aa0000;
+    --focus-ring    : #ff0000;
+    --shadow        : #ff000080;
+    --text          : #ff0000;
+}
+
+body { filter: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9InYiPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VHcmFwaGljIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMSAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMSAwIiAvPjwvZmlsdGVyPjwvc3ZnPg==#v"); }