style fixes

app/scripts/plugins/theme-vars.js

@@ -24,13 +24,14 @@ const ThemeVars = {
 
     apply(cssStyle) {
         this.init();
-        const lines = ThemeVarsScss.split('\n');
-        for (const line of lines) {
-            const match = line.match(/\s*([^:]+):\s*(.*?),?\s*$/);
-            if (!match) {
-                continue;
+        const matches = ThemeVarsScss.replace(/[\n\s]+/g, '').matchAll(/([\w\-]+):([^:]+),(\$)?/g);
+        for (let [, name, def, last] of matches) {
+            if (last && def.endsWith(')')) {
+                // definitions are written like this:
+                //      map-merge((def:val, def:val, ..., last-def:val),$t)
+                // so, the last item has "),$" captured, here we're removing that bracket
+                def = def.substr(0, def.length - 1);
             }
-            const [, name, def] = match;
             const propName = '--' + name;
             const currentValue = cssStyle.getPropertyValue(propName);
             if (currentValue) {

app/styles/areas/_open.scss

@@ -388,6 +388,7 @@
     &__item {
         padding: $base-padding;
         cursor: pointer;
+        border-radius: var(--block-border-radius);
         &:hover {
             background-color: var(--action-background-color-focus-tr);
         }

app/styles/base/_properties.scss

@@ -5,4 +5,5 @@ body {
     --block-border-radius: 5px;
     --selected-item-text-color: var(--text-color);
     --open-icon-color: var(--text-color);
+    --dropdown-box-shadow-color: rgba(0, 0, 0, 0.1);
 }

app/styles/base/_theme-vars.scss

@@ -1,27 +1,57 @@
-/* prettier-ignore */
 /* This file is also parsed in JS to build theme styles, see theme-vars.js */
 @function set-theme-vars($t) {
     @return map-merge(
-        $t,
         (
-            muted-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, mute-percent)),
-            muted-color-border: mix(map-get($t, medium-color), map-get($t, background-color), semi-mute-percent(map-get($t, mute-percent))),
+            muted-color:
+                mix(
+                    map-get($t, medium-color),
+                    map-get($t, background-color),
+                    map-get($t, mute-percent)
+                ),
+            muted-color-border:
+                mix(
+                    map-get($t, medium-color),
+                    map-get($t, background-color),
+                    semi-mute-percent(map-get($t, mute-percent))
+                ),
             text-selection-bg-color: rgba(map-get($t, action-color), 0.3),
             text-selection-bg-color-error: rgba(map-get($t, error-color), 0.8),
             text-semi-muted-color: mix(map-get($t, action-color), map-get($t, text-color), 0.5),
-            text-contrast-action-color: text-contrast-color(map-get($t, action-color), map-get($t, color-lightness-shift), map-get($t, background-color), map-get($t, text-color)),
-            text-contrast-error-color: text-contrast-color(map-get($t, error-color), map-get($t, color-lightness-shift), map-get($t, background-color), map-get($t, text-color)),
+            text-contrast-action-color:
+                text-contrast-color(
+                    map-get($t, action-color),
+                    map-get($t, color-lightness-shift),
+                    map-get($t, background-color),
+                    map-get($t, text-color)
+                ),
+            text-contrast-error-color:
+                text-contrast-color(
+                    map-get($t, error-color),
+                    map-get($t, color-lightness-shift),
+                    map-get($t, background-color),
+                    map-get($t, text-color)
+                ),
             base-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 50%),
             accent-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 65%),
-            light-border-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, light-border-percent)),
-            form-box-border-color-focus: mix(map-get($t, action-color), map-get($t, text-color), 70%),
-            form-box-shadow-color-focus: rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.7),
-            form-box-shadow-color-hover: rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.5),
+            light-border-color:
+                mix(
+                    map-get($t, medium-color),
+                    map-get($t, background-color),
+                    map-get($t, light-border-percent)
+                ),
+            form-box-border-color-focus:
+                mix(map-get($t, action-color), map-get($t, text-color), 70%),
+            form-box-shadow-color-focus:
+                rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.7),
+            form-box-shadow-color-hover:
+                rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.5),
             form-box-shadow-color-focus-error: lightness-alpha(map-get($t, error-color), -5%, -0.3),
-            dropdown-box-shadow-color: rgba(map-get($t, medium-color), 0.05),
-            secondary-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 10%),
-            intermediate-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 3%),
-            intermediate-pressed-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 2.6%),
+            secondary-background-color:
+                mix(map-get($t, medium-color), map-get($t, background-color), 10%),
+            intermediate-background-color:
+                mix(map-get($t, medium-color), map-get($t, background-color), 3%),
+            intermediate-pressed-background-color:
+                mix(map-get($t, medium-color), map-get($t, background-color), 2.6%),
             disabled-background-color: shade(map-get($t, background-color), 5%),
             action-background-color-focus: shade(map-get($t, action-color), 20%),
             action-background-color-focus-tr: rgba(shade(map-get($t, action-color), 20%), 0.1),
@@ -34,9 +64,13 @@
             modal-background-color: rgba(map-get($t, background-color), map-get($t, modal-opacity)),
             modal-background-color-tr: rgba(map-get($t, background-color), 0),
             selected-item-color: mix(map-get($t, action-color), map-get($t, background-color), 85%),
-            selected-on-secondary-item-color: mix(map-get($t, medium-color), map-get($t, background-color), 30%),
-            selectable-on-secondary-item-color: mix(map-get($t, medium-color), map-get($t, background-color), 14%),
-            clickable-on-secondary-color: mix(map-get($t, medium-color), map-get($t, background-color), 75%),
-        )
+            selected-on-secondary-item-color:
+                mix(map-get($t, medium-color), map-get($t, background-color), 30%),
+            selectable-on-secondary-item-color:
+                mix(map-get($t, medium-color), map-get($t, background-color), 14%),
+            clickable-on-secondary-color:
+                mix(map-get($t, medium-color), map-get($t, background-color), 75%)
+        ),
+        $t
     );
 }

app/styles/base/_variables.scss

@@ -61,7 +61,7 @@ $titlebar-padding-large: 40px;
 
 // Shadows
 @function dropdown-box-shadow() {
-    @return 0 0 50px var(--dropdown-box-shadow-color);
+    @return 0 0.15rem 0.5rem 0.25rem var(--dropdown-box-shadow-color);
 }
 
 // Animations