Use theme variables across remaining RmlUi styles

res/rml/command_console.rcss

@@ -1,8 +1,6 @@
-*, *:before, *:after {
-    box-sizing: border-box;
-}
-
 body {
+    --console-command-color: #FFD966;
+
     display: block;
     width: 100%;
     height: 100%;
@@ -19,11 +17,11 @@ console {
     width: 50%;
     display: flex;
     flex-direction: column;
-    background-color: rgba(0, 0, 0, 60%);
+    background-color: rgba(var(--color-black-rgb), 60%);
     pointer-events: auto;
-    font-family: "Noto Mono";
-    font-size: 14dp;
-    color: #FFFFFF;
+    font-family: var(--font-family-monospace);
+    font-size: var(--font-size-sm);
+    color: var(--color-white);
     transition: background-color 0.8s linear-in-out;
 }
 
@@ -31,7 +29,7 @@ output {
     display: block;
     overflow: hidden;
     max-height: 480dp;
-    padding: 4dp 8dp;
+    padding: var(--space-xs) var(--space-sm);
     line-height: 1.4em;
 }
 
@@ -46,11 +44,11 @@ console:not([open]) {
 }
 
 console:not([open])[fading] {
-    background-color: rgba(0, 0, 0, 0%);
+    background-color: rgba(var(--color-black-rgb), 0%);
 }
 
 console[open] {
-    background-color: rgba(0, 0, 0, 60%);
+    background-color: rgba(var(--color-black-rgb), 60%);
     transition: none;
 }
 
@@ -75,19 +73,19 @@ output[open] line {
 }
 
 line.cmd {
-    color: #FFD966;
+    color: var(--console-command-color);
 }
 
 console input {
     display: none;
     width: 100%;
-    background-color: rgba(0, 0, 0, 40%);
+    background-color: rgba(var(--color-black-rgb), 40%);
     border: 0dp;
-    border-top: 1dp rgba(255, 255, 255, 20%);
-    color: #FFFFFF;
-    font-family: "Noto Mono";
-    font-size: 14dp;
-    padding: 4dp 8dp;
+    border-top: 1dp rgba(var(--color-white-rgb), 20%);
+    color: var(--color-white);
+    font-family: var(--font-family-monospace);
+    font-size: var(--font-size-sm);
+    padding: var(--space-xs) var(--space-sm);
 }
 
 console[open] input {

res/rml/mod_browser.rcss

@@ -148,7 +148,7 @@ catalog-official-badge {
     background-color: rgba(var(--color-accent-rgb), 28%);
     color: var(--color-info);
     font-style: normal;
-    font-size: 9dp;
+    font-size: var(--font-size-3xs);
 }
 
 catalog-card-body > section > b {
@@ -290,7 +290,7 @@ catalog-detail-status h2 {
     display: block;
     margin: 0;
     font-family: var(--font-family-heading);
-    font-size: 25dp;
+    font-size: var(--font-size-4xl);
     font-weight: bold;
 }
 
@@ -394,7 +394,7 @@ catalog-source-actions button {
 
 .catalog-install-action icon {
     flex: 0 0 22dp;
-    font-size: 22dp;
+    font-size: var(--font-size-3xl);
     line-height: 1;
 }
 
@@ -621,7 +621,7 @@ catalog-detail-body h3 {
     display: block;
     margin: 0 0 10dp 0;
     font-family: var(--font-family-heading);
-    font-size: 21dp;
+    font-size: var(--font-size-2xl);
     font-weight: bold;
 }
 
@@ -816,7 +816,7 @@ catalog-screenshot-actions button {
 
     catalog-filters h1,
     catalog-results header h1 {
-        font-size: 23dp;
+        font-size: var(--font-size-4xl);
     }
 
     catalog-filters h2 {

res/rml/mods.rcss

@@ -89,7 +89,7 @@ mod-entry {
 }
 
 mod-entry.current {
-    box-shadow: rgba(146, 135, 91, 40%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-border-rgb), 40%) 0 0 0 1dp;
 }
 
 mod-entry:hover,
@@ -212,7 +212,7 @@ mod-actions button {
     font-size: var(--font-size-md);
     padding: 6dp 14dp;
     background-color: rgba(var(--color-surface-rgb), 80%);
-    box-shadow: rgba(146, 135, 91, 60%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-border-rgb), 60%) 0 0 0 1dp;
 }
 
 mod-header.no-banner {

res/rml/overlay.rcss

@@ -56,15 +56,6 @@ toast[open] {
     transform: scale(1);
 }
 
-/*toast:hover {
-    cursor: pointer;
-    background-color: rgba(61, 59, 36, 80%);
-}
-
-toast:active {
-    background-color: rgba(45, 43, 26, 80%);
-}*/
-
 b {
     font-weight: bold;
 }
@@ -376,7 +367,7 @@ logo img {
     left: 0;
     width: 100%;
     height: 100%;
-    filter: drop-shadow(#0008 0 0 14dp);
+    filter: drop-shadow(rgba(var(--color-black-rgb), 53.333333%) 0 0 14dp);
     transform-origin: center;
 }
 

res/rml/popover.rcss

@@ -22,7 +22,7 @@ popover {
     border-color: var(--color-border);
     background-color: rgba(var(--color-surface-rgb), 96%);
     backdrop-filter: blur(5dp);
-    box-shadow: 0 6dp 24dp 2dp rgba(0, 0, 0, 55%);
+    box-shadow: 0 6dp 24dp 2dp rgba(var(--color-black-rgb), 55%);
     filter: opacity(0);
     transform: scale(0.95);
     transform-origin: center;
@@ -47,7 +47,7 @@ color-sv {
     width: 240dp;
     height: 150dp;
     border-radius: var(--radius-panel);
-    box-shadow: rgba(146, 135, 91, 50%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-border-rgb), 50%) 0 0 0 1dp;
     drag: drag;
     focus: auto;
 }
@@ -59,7 +59,7 @@ color-alpha {
     width: 240dp;
     height: 14dp;
     border-radius: var(--radius-control);
-    box-shadow: rgba(146, 135, 91, 50%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-border-rgb), 50%) 0 0 0 1dp;
     drag: drag;
     focus: auto;
 }
@@ -67,13 +67,13 @@ color-alpha {
 color-sv:focus-visible,
 color-hue:focus-visible,
 color-alpha:focus-visible {
-    box-shadow: #C2A42D 0 0 0 2dp;
+    box-shadow: var(--color-accent) 0 0 0 2dp;
 }
 
 color-sv.adjusting,
 color-hue.adjusting,
 color-alpha.adjusting {
-    box-shadow: #FFFFFF 0 0 0 3dp;
+    box-shadow: var(--color-white) 0 0 0 3dp;
 }
 
 color-hue {
@@ -88,7 +88,7 @@ color-cursor {
     border-radius: var(--radius-control);
     border-width: 2dp;
     border-color: var(--color-white);
-    box-shadow: 0 0 4dp 1dp rgba(0, 0, 0, 70%);
+    box-shadow: 0 0 4dp 1dp rgba(var(--color-black-rgb), 70%);
     pointer-events: none;
 }
 
@@ -127,7 +127,7 @@ color-chip {
     width: 20dp;
     height: 20dp;
     border-radius: 5dp;
-    box-shadow: rgba(255, 255, 255, 45%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-white-rgb), 45%) 0 0 0 1dp;
 }
 
 button.color-swatch-button color-chip {
@@ -155,7 +155,7 @@ button {
     background-color: var(--button-background);
     padding: var(--space-xs) var(--space-sm);
     border-radius: var(--radius-panel);
-    box-shadow: rgba(146, 135, 91, 30%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-border-rgb), 30%) 0 0 0 1dp;
     color: var(--button-color);
     cursor: pointer;
     focus: auto;
@@ -164,7 +164,7 @@ button {
 button:hover,
 button:focus-visible {
     background-color: var(--button-background-hover);
-    box-shadow: #C2A42D 0 0 0 2dp;
+    box-shadow: var(--color-accent) 0 0 0 2dp;
 }
 
 button:active {

res/rml/prelaunch.rcss

@@ -1,6 +1,8 @@
 body {
     --color-prelaunch-accent: #FEE685;
     --color-prelaunch-muted: #A6A09B;
+    --color-disc-error: #FFC9C9;
+    --color-disc-mismatch: #FFD6A7;
     --color-ready: #D8F999;
     --menu-button-decorator: horizontal-gradient(rgba(var(--color-black-rgb), 0%) rgba(var(--color-black-rgb), 0%));
     --menu-button-decorator-hover: horizontal-gradient(#FEE685FF #FEE68500);
@@ -281,7 +283,7 @@ body.mirrored version-info {
 }
 
 #disc-status[status=bad] {
-    color: #FFC9C9;
+    color: var(--color-disc-error);
 }
 
 #disc-status[status=verifying] {
@@ -289,7 +291,7 @@ body.mirrored version-info {
 }
 
 #disc-status[status=mismatch] {
-    color: #FFD6A7;
+    color: var(--color-disc-mismatch);
 }
 
 #disc-status[status=unknown] {

res/rml/theme.rcss

@@ -64,6 +64,11 @@ body {
     --color-error-rgb: 204, 68, 68;
     --color-error: rgb(var(--color-error-rgb));
 
+    --color-progress-done: #44AA22;
+    --color-progress-ongoing: #2255BB;
+    --color-danger-border: #852221;
+    --color-danger-heading: #B3261E;
+
     --button-color: var(--color-text);
     --button-background: rgba(var(--color-control-rgb), 20%);
     --button-background-hover: rgba(var(--color-interactive-rgb), 20%);

res/rml/touch_controls.rcss

@@ -1,4 +1,14 @@
 body {
+    --color-oil-border: rgba(42, 32, 18, 82%);
+    --color-oil-background: rgba(18, 14, 10, 70%);
+    --color-oil-fill: rgb(255, 232, 74);
+    --color-button-a: rgba(34, 112, 123, 62%);
+    --color-button-b: rgba(161, 61, 66, 58%);
+    --color-button-x: rgba(83, 115, 151, 56%);
+    --color-button-y: rgba(113, 91, 150, 54%);
+    --color-stick-background: rgba(18, 20, 24, 35%);
+    --color-stick-knob: rgba(238, 236, 226, 55%);
+
     --button-color: rgba(248, 244, 232, 90%);
     --button-background: rgba(22, 24, 28, 48%);
     --button-background-active: rgba(63, 78, 90, 68%);
@@ -37,8 +47,6 @@ button {
     background-color: var(--button-background);
     color: var(--button-color);
     text-align: center;
-    /* backdrop-filter: blur(7dp); */
-    /* box-shadow: 0 6dp 18dp rgba(0, 0, 0, 28%); */
     transform-origin: center;
     transition: background-color border-color filter transform 0.08s linear-in-out,
                 opacity 0.2s linear-in-out;
@@ -143,8 +151,6 @@ action-bar {
     border-color: var(--button-border-color);
     border-radius: 23dp;
     background-color: var(--button-background);
-    /* backdrop-filter: blur(7dp); */
-    /* box-shadow: 0 -6dp 18dp rgba(0, 0, 0, 28%); */
     overflow: hidden;
     opacity: 1;
     transform-origin: center;
@@ -235,10 +241,9 @@ separator {
     width: 34dp;
     height: 8dp;
     padding: var(--space-2xs);
-    border: 1dp rgba(42, 32, 18, 82%);
+    border: 1dp var(--color-oil-border);
     border-radius: var(--radius-small);
-    background-color: rgba(18, 14, 10, 70%);
-    /* box-shadow: 0 2dp 6dp rgba(0, 0, 0, 35%); */
+    background-color: var(--color-oil-background);
 }
 
 oil-fill {
@@ -246,7 +251,7 @@ oil-fill {
     width: 0%;
     height: 100%;
     border-radius: 2dp;
-    background-color: rgb(255, 232, 74);
+    background-color: var(--color-oil-fill);
 }
 
 .face.has-item span {
@@ -258,19 +263,19 @@ oil-fill {
 .face.a {
     border-radius: 37dp;
     font-size: 31dp;
-    background-color: rgba(34, 112, 123, 62%);
+    background-color: var(--color-button-a);
 }
 
 .face.b {
-    background-color: rgba(161, 61, 66, 58%);
+    background-color: var(--color-button-b);
 }
 
 .face.x {
-    background-color: rgba(83, 115, 151, 56%);
+    background-color: var(--color-button-x);
 }
 
 .face.y {
-    background-color: rgba(113, 91, 150, 54%);
+    background-color: var(--color-button-y);
 }
 
 button.control.docked-top,
@@ -307,11 +312,9 @@ touch-stick {
     width: 124dp;
     height: 124dp;
     border-radius: 62dp;
-    background-color: rgba(18, 20, 24, 35%);
+    background-color: var(--color-stick-background);
     border-width: 1dp;
     border-color: rgba(var(--color-white-rgb), 20%);
-    /* backdrop-filter: blur(7dp); */
-    /* box-shadow: 0 8dp 24dp rgba(0, 0, 0, 24%); */
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.18s linear-in-out;
@@ -337,7 +340,7 @@ stick-knob {
     width: 48dp;
     height: 48dp;
     border-radius: 24dp;
-    background-color: rgba(238, 236, 226, 55%);
+    background-color: var(--color-stick-knob);
     border-width: 1dp;
     border-color: rgba(var(--color-white-rgb), 45%);
 }

res/rml/touch_controls_editor.rcss

@@ -1,8 +1,10 @@
 body.touch-editor {
+    --color-editor-backdrop: rgba(4, 6, 8, 34%);
+    --color-editor-handle: rgba(34, 37, 42, 86%);
     --color-editor-accent-rgb: 255, 232, 128;
     --color-editor-highlight-rgb: 255, 244, 190;
 
-    background-color: rgba(4, 6, 8, 34%);
+    background-color: var(--color-editor-backdrop);
     z-index: 8;
 }
 
@@ -48,7 +50,7 @@ resize-handle {
     border-width: 2dp;
     border-color: rgba(var(--color-editor-highlight-rgb), 96%);
     border-radius: 11dp;
-    background-color: rgba(34, 37, 42, 86%);
+    background-color: var(--color-editor-handle);
     pointer-events: auto;
 }
 

res/rml/window.rcss

@@ -262,7 +262,7 @@ button {
     opacity: 0.9;
     padding: var(--space-sm) var(--space-lg);
     border-radius: var(--radius-window);
-    box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-border-rgb), 25%) 0 0 0 1dp;
     font-size: var(--font-size-2xl);
     transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out;
     cursor: pointer;
@@ -272,7 +272,7 @@ button {
 button:not(:disabled):hover,
 button:not(:disabled):focus-visible {
     background-color: var(--button-background-hover);
-    box-shadow: #C2A42D 0 0 0 2dp;
+    box-shadow: var(--color-accent) 0 0 0 2dp;
 }
 
 button:not(:disabled):selected {
@@ -283,7 +283,7 @@ button:not(:disabled):selected {
 button:not(:disabled):active {
     opacity: 1;
     background-color: var(--button-background-active);
-    box-shadow: #C2A42D 0 0 0 2dp;
+    box-shadow: var(--color-accent) 0 0 0 2dp;
 }
 
 button:disabled {
@@ -305,7 +305,7 @@ select-button {
     opacity: 0.9;
     padding: var(--space-sm) var(--space-lg);
     border-radius: var(--radius-window);
-    box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-border-rgb), 25%) 0 0 0 1dp;
     transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out;
     cursor: pointer;
     focus: auto;
@@ -314,7 +314,7 @@ select-button {
 select-button:not(:disabled):hover,
 select-button:not(:disabled):focus-visible {
     background-color: var(--button-background-hover);
-    box-shadow: #C2A42D 0 0 0 2dp;
+    box-shadow: var(--color-accent) 0 0 0 2dp;
 }
 
 select-button:not(:disabled):selected {
@@ -325,7 +325,7 @@ select-button:not(:disabled):selected {
 select-button:not(:disabled):active {
     opacity: 1;
     background-color: var(--button-background-active);
-    box-shadow: #C2A42D 0 0 0 2dp;
+    box-shadow: var(--color-accent) 0 0 0 2dp;
 }
 
 select-button:disabled {
@@ -362,7 +362,7 @@ select-button.group-button icon {
     width: 24dp;
     height: 24dp;
     font-size: var(--font-size-4xl);
-    color: inherit;
+    color: var(--button-color);
     decorator: text("" center center);
 }
 
@@ -382,7 +382,7 @@ select-button.color-input color-swatch {
     width: 48dp;
     height: 24dp;
     border-radius: var(--radius-control);
-    box-shadow: rgba(255, 255, 255, 45%) 0 0 0 1dp;
+    box-shadow: rgba(var(--color-white-rgb), 45%) 0 0 0 1dp;
 }
 
 select-button.color-input color-swatch.empty {
@@ -508,11 +508,11 @@ progress fill {
 }
 
 progress.progress-done fill {
-    background-color: #44aa22;
+    background-color: var(--color-progress-done);
 }
 
 progress.progress-ongoing fill {
-    background-color: #2255bb;
+    background-color: var(--color-progress-ongoing);
 }
 
 button.achievement-clear {
@@ -559,7 +559,7 @@ modal-dialog {
 }
 
 window.modal.danger {
-    border: 2dp #852221;
+    border: 2dp var(--color-danger-border);
 }
 
 modal-header {
@@ -589,7 +589,7 @@ modal-title {
 
 window.modal.danger modal-title,
 window.modal.danger modal-header icon {
-    color: #B3261E;
+    color: var(--color-danger-heading);
 }
 
 modal-body {

src/dusk/ui/command_console.cpp

@@ -18,6 +18,7 @@ namespace {
 const Rml::String kDocumentSource = R"RML(
 <rml>
 <head>
+    <link type="text/rcss" href="res/rml/theme.rcss" />
     <link type="text/rcss" href="res/rml/command_console.rcss" />
 </head>
 <body>