Update search style

Nate Butler created 3 years ago

Change summary

assets/themes/cave-dark.json         | 29 ++++++++++++++---------------
assets/themes/cave-light.json        | 29 ++++++++++++++---------------
assets/themes/dark.json              | 21 ++++++++++-----------
assets/themes/light.json             | 21 ++++++++++-----------
assets/themes/solarized-dark.json    | 29 ++++++++++++++---------------
assets/themes/solarized-light.json   | 29 ++++++++++++++---------------
assets/themes/sulphurpool-dark.json  | 29 ++++++++++++++---------------
assets/themes/sulphurpool-light.json | 29 ++++++++++++++---------------
styles/src/styleTree/search.ts       | 21 +++++++++++----------
9 files changed, 115 insertions(+), 122 deletions(-)

Detailed changes

assets/themes/cave-dark.json

@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#26232a"
+        "background": "#26232a52"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#26232a"
+        "background": "#26232a7a"
       }
     },
     "diagnostic_header": {
@@ -1334,26 +1334,25 @@
       "color": "#8b8792",
       "size": 14,
       "background": "#26232a",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#26232a",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#efecf4",
         "size": 14,
-        "background": "#655f6d",
+        "background": "#585260a3",
         "border": {
           "color": "#655f6d",
           "width": 1
@@ -1363,7 +1362,7 @@
         "family": "Zed Mono",
         "color": "#efecf4",
         "size": 14,
-        "background": "#655f6d",
+        "background": "#58526052",
         "border": {
           "color": "#655f6d",
           "width": 1
@@ -1394,7 +1393,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1427,7 +1426,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1444,8 +1443,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

assets/themes/cave-light.json

@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#e2dfe7"
+        "background": "#e2dfe71f"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#e2dfe7"
+        "background": "#e2dfe72e"
       }
     },
     "diagnostic_header": {
@@ -1334,26 +1334,25 @@
       "color": "#585260",
       "size": 14,
       "background": "#e2dfe7",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#e2dfe7",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#19171c",
         "size": 14,
-        "background": "#7e7887",
+        "background": "#8b87923d",
         "border": {
           "color": "#7e7887",
           "width": 1
@@ -1363,7 +1362,7 @@
         "family": "Zed Mono",
         "color": "#19171c",
         "size": 14,
-        "background": "#7e7887",
+        "background": "#8b87921f",
         "border": {
           "color": "#7e7887",
           "width": 1
@@ -1394,7 +1393,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1427,7 +1426,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1444,8 +1443,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

assets/themes/dark.json

@@ -1334,20 +1334,19 @@
       "color": "#9c9c9c",
       "size": 14,
       "background": "#0e0e0e",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#232323",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
@@ -1394,7 +1393,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1427,7 +1426,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1444,8 +1443,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

assets/themes/light.json

@@ -1334,20 +1334,19 @@
       "color": "#474747",
       "size": 14,
       "background": "#f1f1f1",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#d5d5d5",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
@@ -1394,7 +1393,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1427,7 +1426,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1444,8 +1443,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

assets/themes/solarized-dark.json

@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#073642"
+        "background": "#07364252"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#073642"
+        "background": "#0736427a"
       }
     },
     "diagnostic_header": {
@@ -1334,26 +1334,25 @@
       "color": "#93a1a1",
       "size": 14,
       "background": "#073642",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#073642",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#fdf6e3",
         "size": 14,
-        "background": "#657b83",
+        "background": "#586e75a3",
         "border": {
           "color": "#657b83",
           "width": 1
@@ -1363,7 +1362,7 @@
         "family": "Zed Mono",
         "color": "#fdf6e3",
         "size": 14,
-        "background": "#657b83",
+        "background": "#586e7552",
         "border": {
           "color": "#657b83",
           "width": 1
@@ -1394,7 +1393,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1427,7 +1426,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1444,8 +1443,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

assets/themes/solarized-light.json

@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#eee8d5"
+        "background": "#eee8d51f"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#eee8d5"
+        "background": "#eee8d52e"
       }
     },
     "diagnostic_header": {
@@ -1334,26 +1334,25 @@
       "color": "#586e75",
       "size": 14,
       "background": "#eee8d5",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#eee8d5",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#002b36",
         "size": 14,
-        "background": "#839496",
+        "background": "#93a1a13d",
         "border": {
           "color": "#839496",
           "width": 1
@@ -1363,7 +1362,7 @@
         "family": "Zed Mono",
         "color": "#002b36",
         "size": 14,
-        "background": "#839496",
+        "background": "#93a1a11f",
         "border": {
           "color": "#839496",
           "width": 1
@@ -1394,7 +1393,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1427,7 +1426,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1444,8 +1443,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

assets/themes/sulphurpool-dark.json

@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#293256"
+        "background": "#29325652"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#293256"
+        "background": "#2932567a"
       }
     },
     "diagnostic_header": {
@@ -1334,26 +1334,25 @@
       "color": "#979db4",
       "size": 14,
       "background": "#293256",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#293256",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#f5f7ff",
         "size": 14,
-        "background": "#6b7394",
+        "background": "#5e6687a3",
         "border": {
           "color": "#6b7394",
           "width": 1
@@ -1363,7 +1362,7 @@
         "family": "Zed Mono",
         "color": "#f5f7ff",
         "size": 14,
-        "background": "#6b7394",
+        "background": "#5e668752",
         "border": {
           "color": "#6b7394",
           "width": 1
@@ -1394,7 +1393,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1427,7 +1426,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1444,8 +1443,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

assets/themes/sulphurpool-light.json

@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#dfe2f1"
+        "background": "#dfe2f11f"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#dfe2f1"
+        "background": "#dfe2f12e"
       }
     },
     "diagnostic_header": {
@@ -1334,26 +1334,25 @@
       "color": "#5e6687",
       "size": 14,
       "background": "#dfe2f1",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#dfe2f1",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#202746",
         "size": 14,
-        "background": "#898ea4",
+        "background": "#979db43d",
         "border": {
           "color": "#898ea4",
           "width": 1
@@ -1363,7 +1362,7 @@
         "family": "Zed Mono",
         "color": "#202746",
         "size": 14,
-        "background": "#898ea4",
+        "background": "#979db41f",
         "border": {
           "color": "#898ea4",
           "width": 1
@@ -1394,7 +1393,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1427,7 +1426,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1444,8 +1443,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

styles/src/styleTree/search.ts

@@ -2,6 +2,8 @@ import Theme from "../themes/theme";
 import { backgroundColor, border, player, text } from "./components";
 
 export default function search(theme: Theme) {
+
+  // Search input
   const editor = {
     background: backgroundColor(theme, 500),
     cornerRadius: 8,
@@ -12,7 +14,7 @@ export default function search(theme: Theme) {
     text: text(theme, "mono", "active"),
     border: border(theme, "secondary"),
     margin: {
-      right: 6,
+      right: 12,
     },
     padding: {
       top: 3,
@@ -29,17 +31,16 @@ export default function search(theme: Theme) {
     optionButton: {
       ...text(theme, "mono", "secondary"),
       background: backgroundColor(theme, "on500"),
-      cornerRadius: 4,
+      cornerRadius: 6,
       border: border(theme, "secondary"),
       margin: {
-        left: 2,
-        right: 2,
+        right: 4,
       },
       padding: {
-        bottom: 3,
-        left: 8,
-        right: 8,
-        top: 3,
+        bottom: 2,
+        left: 10,
+        right: 10,
+        top: 2,
       },
       active: {
         ...text(theme, "mono", "active"),
@@ -63,8 +64,8 @@ export default function search(theme: Theme) {
     },
     optionButtonGroup: {
       padding: {
-        left: 4,
-        right: 4,
+        left: 12,
+        right: 12,
       },
     },
     resultsStatus: {