Use photon widget styles for light color scheme

ext/src/ui/dark-widgets.css

@@ -1,94 +0,0 @@
-button,
-input,
-textarea,
-.select-wrapper {
-    background-color: #474749;
-    border: initial;
-    border-radius: 2px;
-    color: white;
-    overflow: hidden;
-}
-button:not(:disabled):hover,
-.select-wrapper:not(:disabled):hover {
-    background-color: #505054;
-}
-button:not(:disabled):hover:active,
-.select-wrapper:not(:disabled):hover:active {
-    background-color: #5c5c5e;
-}
-
-:-moz-any(button, input, textarea, select):focus {
-    box-shadow: 0 0 0 1px #0a84ff inset,
-                0 0 0 1px #0a84ff,
-                0 0 0 4px rgba(10, 132, 255, 0.3);
-}
-
-:-moz-any(button, input, textarea, select)::-moz-focus-inner {
-    all: initial;
-}
-
-button:disabled,
-input:disabled {
-    opacity: 0.35;
-}
-
-button,
-input,
-textarea,
-select {
-    padding: 4px 8px;
-}
-
-/* No inset for spinbox control */
-input[type="number"] {
-    padding-inline-end: initial;
-}
-
-button,
-select {
-    /* Override mac.css height */
-    height: initial !important;
-}
-
-button:default {
-    background-color: var(--blue-60);
-    color: white !important;
-}
-button:default:hover {
-    background-color: var(--blue-70);
-}
-button:default:hover:active {
-    background-color: var(--blue-80);
-}
-
-.select-wrapper {
-    --arrow-width: 20px;
-    position: relative;
-    display: inline-block;
-}
-.select-wrapper::after {
-    align-items: center;
-    content: "▼";
-    display: flex;
-    height: 100%;
-    margin-right: 4px;
-    justify-content: center;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: var(--arrow-width);
-}
-select {
-    -moz-appearance: none;
-    background: inherit;
-    border: initial;
-    color: inherit;
-    padding-right: calc(8px + var(--arrow-width));
-}
-option {
-    color: white !important;
-}
-option:disabled {
-    color: rgba(255, 255, 255, 0.25) !important;
-}

ext/src/ui/options/index.tsx

@@ -32,37 +32,6 @@ browser.runtime.getPlatformInfo()
                 link.href = "styles/mac.css";
                 break;
             }
-
-            // Fix issue with input[type="number"] height
-            case "linux": {
-                link.href = "styles/linux.css";
-
-                const input = document.createElement("input");
-                const inputWrapper = document.createElement("div");
-
-                inputWrapper.append(input);
-                document.documentElement.append(inputWrapper);
-
-                input.type = "text";
-                const textInputHeight = window.getComputedStyle(input).height;
-                input.type = "number";
-                const numberInputHeight = window.getComputedStyle(input).height;
-
-                inputWrapper.remove();
-
-                if (numberInputHeight !== textInputHeight) {
-                    const style = document.createElement("style");
-                    style.textContent = `
-                        input[type="number"] {
-                            height: ${textInputHeight};
-                        }
-                    `;
-
-                    document.body.append(style);
-                }
-
-                break;
-            }
         }
 
         if (link.href) {

ext/src/ui/options/styles/index.css

@@ -8,51 +8,22 @@
         --border-color: var(--grey-50);
         --secondary-color: var(--grey-10-a60);
     }
-
-    a              { color: var(--blue-40); }
-    a:hover        { color: var(--blue-50); }
-    a:hover:active { color: var(--blue-60); }
-
-    body {
-        background: #202023 !important;
-        color: white !important;
-    }
-
-    .editable-list {
-        background-color: #202023 !important;
-        color: white !important;
-    }
-    .editable-list__item:not(.editable-list__item--selected) .editable-list__title {
-        padding: 0 8px !important;
-    }
-    .editable-list__item:nth-child(even) {
-        background-color: initial !important;
-    }
-    .editable-list__item:nth-child(odd) {
-        background-color: var(--grey-80) !important;
-    }
-
-    .about,
-    .about > summary {
-        background-color: rgba(255, 255, 255, 0.1) !important;
-    }
-    .about hr {
-        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
-    }
-
-    .about__link > img {
-        filter: invert(1);
-    }
-}
-
-*:invalid {
-    box-shadow: 0 0 1.5px 1px var(--red-50);
 }
 
 #root {
     padding: 20px 10px;
 }
 
+body {
+    background: var(--box-background) !important;
+    color: var(--box-color) !important;
+}
+
+a              { color: var(--blue-40); }
+a:hover        { color: var(--blue-50); }
+a:hover:active { color: var(--blue-60); }
+
+
 button.ghost {
     width: 24px !important;
     height: 24px !important;
@@ -64,7 +35,6 @@ button.ghost {
 
 button.ghost:not(:hover) {
     background-color: initial;
-    border: initial;
 }
 
 
@@ -346,9 +316,9 @@ button.ghost:not(:hover) {
 
 
 .editable-list {
-    background-color: -moz-field;
+    background-color: var(--box-background);
     border: 1px solid var(--border-color);
-    color: -moz-fieldtext;
+    color: var(--box-color);
     justify-content: end;
     padding: 5px;
 }
@@ -380,32 +350,29 @@ button.ghost:not(:hover) {
 .editable-list__item {
     align-items: center;
     display: flex;
-    height: 30px;
+    height: 34px;
     padding: 0 5px;
 }
 
-.editable-list__item:nth-child(even) {
-    background-color: -moz-eventreerow;
-}
 .editable-list__item:nth-child(odd) {
-    background-color: -moz-oddtreerow;
+    background-color: var(--grey-20);
 }
 
 .editable-list__item--selected {
-    background-color: -moz-cellhighlight !important;
+    background-color: var(--blue-50-a30) !important;
-    color: -moz-cellhighlighttext !important;
 }
 
 .editable-list__title {
     flex: 1;
     font-family: monospace;
     overflow: hidden;
+    padding: 4px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .editable-list__item:not(.editable-list__item--selected) > .editable-list__title {
-    padding: 0 5px;
+    padding: 0 8px;
 }
 
 .editable-list__title + button {
@@ -433,7 +400,6 @@ button.ghost:not(:hover) {
 .about {
     border-radius: 2px;
     margin-bottom: 40px;
-    overflow: hidden;
 }
 
 .about > summary {
@@ -504,3 +470,22 @@ button.ghost:not(:hover) {
     text-transform: uppercase;
     vertical-align: text-top;
 }
+
+
+@media (prefers-color-scheme: dark) {
+    .editable-list__item:nth-child(odd) {
+        background-color: var(--grey-80);
+    }
+
+    .about,
+    .about > summary {
+        background-color: rgba(255, 255, 255, 0.1) !important;
+    }
+    .about hr {
+        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+    }
+
+    .about__link > img {
+        filter: invert(1);
+    }
+}

ext/src/ui/options/styles/linux.css

@@ -1,15 +0,0 @@
-:root {
-    --border-color: graytext;
-    --secondary-color: graytext;
-}
-
-body {
-    padding: 20px 0;
-}
-
-#root {
-    background-color: -moz-dialog;
-    border-radius: 5px;
-    color: -moz-dialogtext;
-    overflow: hidden;
-}

ext/src/ui/options/styles/mac.css

@@ -8,26 +8,6 @@ input {
     font: inherit;
 }
 
-button:not([disabled]):hover:active {
-  color: -moz-mac-buttonactivetext;
-}
-button[default]:not([disabled]):not(:-moz-window-inactive) {
-  color: -moz-mac-defaultbuttontext;
-}
-button[default]:not(:hover):active {
-  color: ButtonText;
-}
-
-button,
-select {
-    height: 22px;
-}
-
-button.ghost {
-    width: 22px !important;
-    height: 22px !important;
-}
-
 input[type="checkbox"],
 input[type="radio"] {
     height: 16px;

ext/src/ui/photon-colors.css

@@ -21,7 +21,7 @@
 
   --blue-40: #45a1ff;
   --blue-50: #0a84ff;
-  --blue-50-a30: rgba(10, 132, 255, 0.3);
+  --blue-50-a30: #0a84ff4d;
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;
@@ -41,12 +41,14 @@
 
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;
+  --yellow-60-a30: #d7b6004d;
   --yellow-70: #a47f00;
   --yellow-80: #715100;
   --yellow-90: #3e2800;
 
   --red-50: #ff0039;
   --red-60: #d70022;
+  --red-60-a30: #d700225d;
   --red-70: #a4000f;
   --red-80: #5a0002;
   --red-90: #3e0200;
@@ -60,6 +62,7 @@
   --grey-10: #f9f9fa;
   --grey-10-a10: rgba(249, 249, 250, 0.1);
   --grey-10-a20: rgba(249, 249, 250, 0.2);
+  --grey-10-a30: rgba(249, 249, 250, 0.3);
   --grey-10-a40: rgba(249, 249, 250, 0.4);
   --grey-10-a60: rgba(249, 249, 250, 0.6);
   --grey-10-a80: rgba(249, 249, 250, 0.8);

ext/src/ui/photon-widgets.css

@@ -0,0 +1,162 @@
+:root {
+    --shadow-10: 0 1px 4px rgba(12, 12, 13, 0.1);
+    --shadow-20: 0 2px 8px rgba(12, 12, 13, 0.1);
+    --shadow-30: 0 4px 16px rgba(12, 12, 13, 0.1);
+
+    --box-background: var(--white-100);
+    --box-color: var(--grey-90);
+
+    --focus-box-shadow:
+        0 0 0 1px var(--blue-50)
+      , 0 0 0 4px var(--blue-50-a30);
+
+    --button-background: var(--grey-90-a10);
+    --button-background-hover: var(--grey-90-a20);
+    --button-background-active: var(--grey-90-a30);
+    --button-background-primary: var(--blue-60);
+    --button-background-primary-hover: var(--blue-70);
+    --button-background-primary-active: var(--blue-80);
+    --button-color: var(--grey-90);
+    --button-color-primary: var(--white-100);
+
+    --field-background: var(--box-background);
+    --field-color: var(--box-color);
+    --field-placeholder-color: var(--grey-50);
+    --field-border-color: var(--grey-90-a20);
+    --field-border-color-hover: var(--grey-90-a30);
+
+    --field-box-shadow-warning:
+        0 0 0 1px var(--yellow-60)
+      , 0 0 0 4px var(--yellow-60-a30);
+    --field-box-shadow-error:
+        0 0 0 1px var(--red-60)
+      , 0 0 0 4px var(--red-60-a30);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --box-background: #202023;
+        --box-color: var(--white-100);
+
+        --button-background: #474749;
+        --button-background-hover: #505054;
+        --button-background-active: #5c5c5e;
+        --button-color: var(--white-100);
+
+        --field-placeholder-color: var(--grey-30);
+        --field-border-color: var(--grey-10-a20);
+        --field-border-color-hover: var(--grey-10-a30);
+    }
+}
+
+
+button,
+input,
+textarea,
+.select-wrapper {
+    border: 1px solid transparent;
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+button,
+.select-wrapper {
+    background-color: var(--button-background);
+    color: var(--button-color);
+}
+button:not(:disabled):hover,
+.select-wrapper:not(:disabled):hover {
+    background-color: var(--button-background-hover);
+}
+button:not(:disabled):active,
+.select-wrapper:not(:disabled):hover:active {
+    background-color: var(--button-background-active);
+}
+
+input,
+textarea {
+    background-color: var(--field-background);
+    border: 1px solid var(--field-border-color);
+    color: var(--field-color);
+}
+
+input:hover,
+textarea:hover {
+    border-color: var(--field-border-color-hover);
+}
+
+:-moz-any(button, input, textarea, select):focus {
+    border-color: var(--blue-50);
+    box-shadow: var(--focus-box-shadow);
+    outline: initial;
+}
+
+:-moz-any(button, input, textarea, select):focus::-moz-focus-inner {
+    border: initial;
+}
+
+input:invalid,
+textarea:invalid {
+    box-shadow: var(--field-box-shadow-error) !important;
+    border-color: var(--red-60) !important;
+}
+
+button:disabled,
+input:disabled {
+    opacity: 0.35;
+}
+
+button,
+input,
+textarea,
+select {
+    padding: 4px 8px;
+}
+
+/* No inset for spinbox control */
+input[type="number"] {
+    padding-inline-end: 2px;
+}
+
+button:default {
+    background-color: var(--button-background-primary);
+    color: white !important;
+}
+button:default:hover {
+    background-color: var(--button-background-primary-hover);
+}
+button:default:hover:active {
+    background-color: var(--button-background-primary-active);
+}
+
+.select-wrapper {
+    --arrow-width: 20px;
+    position: relative;
+    display: inline-block;
+}
+.select-wrapper::after {
+    align-items: center;
+    content: "▼";
+    display: flex;
+    height: 100%;
+    margin-right: 4px;
+    justify-content: center;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: var(--arrow-width);
+}
+select {
+    -moz-appearance: none;
+    background: inherit;
+    border: initial;
+    color: inherit;
+    padding-right: calc(8px + var(--arrow-width));
+}
+option {
+    color: white !important;
+}
+option:disabled {
+    color: rgba(255, 255, 255, 0.25) !important;
+}

ext/src/ui/template.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
 
         <link rel="stylesheet" href="../photon-colors.css">
-        <link rel="stylesheet" href="../dark-widgets.css" media="(prefers-color-scheme: dark)">
+        <link rel="stylesheet" href="../photon-widgets.css">
         <link rel="stylesheet" href="styles/index.css">
     </head>
     <body>