fix(styles): fix styles

mallowigi · mallowigi · commit b8fe5fcb227c · 2024-02-23T20:49:23.000+02:00
diff --git a/README.md b/README.md
@@ -0,0 +1,140 @@
+![Logo](https://github.com/mallowigi/material-dev-tools/blob/3b1650b8f229210098b07f523846bc05167fbd77/icon128.png?raw=true)
+
+# Material DevTools Collection
+
+This is a porting of the famous Material Theme (https://www.material-theme.com) for Chrome DevTools. It completely redesigns the Chrome DevTools panels to the
+Material Theme Colors. And just like its inspiration, it also provides options to switch to other themes as well in the blink of an eye!
+
+## Features
+
+### Available Themes
+
+- Material Oceanic
+- Material Darker
+- Material Lighter
+- Material Palenight
+- Material Deep Ocean
+- Material Forest
+- Material Sky Blue
+- Material Sandy Beach
+- Material Volcano
+- Material Space
+- Monokai Pro
+- Dracula
+- GitHub
+- GitHub Dark
+- Arc Dark
+- Atom One Dark
+- Atom One Light
+- Night Owl
+- Light Owl
+- Solarized Dark
+- Solarized Light
+- Moonlight
+- SynthWave '84
+
+### Other Features
+
+- Custom Font Family
+- Custom Font Size
+- Accent Color
+- Accent Scrollbars
+
+## Installation
+
+1. Open Developer Tools
+2. Open the Settings > Experiments > "Allow extensions to load custom stylesheets"
+3. Close and reopen the DevTools
+
+## Local development
+
+1. Clone the project
+
+```bash
+  git clone https://github.com/mallowigi/material-dev-tools
+```
+
+2. Install dependencies
+
+```bash
+  npm install
+```
+
+3. Start the server
+
+```bash
+  npm run dev
+```
+
+4. Open the Chrome Extensions Management Page.
+
+5. Select _Load unpacked extension_
+
+6. Select the `build/chrome-mv3/dev` directory.
+
+7. Verify that the extension is loaded and that the icon show up in the Toolbar.
+
+8. Run the styles compiler
+
+```bash
+npm run styles
+```
+
+## Themes Management
+
+If you want to add new themes or modify the existing themes:
+
+1. Open the `public/themes.yml` file
+
+2. Modify themes
+
+3. Run `gulp themes`
+
+```bash
+npm run themes
+```
+
+4. Reopen the settings to reload the colors
+
+5. Reopen the devtools
+
+## Important files
+
+- `/new/default.scss` -> SCSS variables reading the CSS variables generated by Svelte
+- `/new/light.scss`, `/new/dark.scss` -> the dark and light equivalents
+- `/src/utils/styleBuilder.ts` -> file that generates the `:root` CSS variables from the `themes.json`
+- `/src/devtools.svelte` -> generates the `:root` inside the Devtools panel
+- `public/themes.yml` -> Themes Manifest, will generate `themes.json` used by the extension
+
+## FAQ
+
+#### I have installed the extension but nothing happened.
+
+Make sure you've enabled the Chromium Experiment `Allow extensions to load custom stylesheets`, and reload the DevTools.
+
+#### I selected the X theme but it looks ugly!
+
+Please make sure you've selected the `DARK` or `LIGHT` theme in the DevTools settings, according to the selected theme.
+
+## Authors
+
+- [Elior Boukhobza](https://www.github.com/mallowigi)
+- [Mike King](https://github.com/micjamking)
+
+## Acknowledgements
+
+- [Prismo Framework](https://docs.plasmo.com/framework)
+- [Original concept](https://github.com/micjamking)
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
+
+## Badges
+
+Add badges from somewhere like: [shields.io](https://shields.io/)
+
+[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
+[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)
+[![AGPL License](https://img.shields.io/badge/license-AGPL-blue.svg)](http://www.gnu.org/licenses/agpl-3.0)
+
diff --git a/new/app/themed/accessibility/_axBreadcrumbs.scss b/new/app/themed/accessibility/_axBreadcrumbs.scss
@@ -1,8 +1,8 @@
 .ax-breadcrumbs .ax-node::before {
-  background-color: $foreground;
+  color: $foreground;
 
   &:hover {
-    background-color: $accent1;
+    color: $accent1;
   }
 }
 
diff --git a/new/app/themed/colorpicker/_index.scss b/new/app/themed/colorpicker/_index.scss
@@ -26,7 +26,7 @@
 }
 
 .contrast-details-value [is='ui-icon'] {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 [is='ui-icon'].smallicon-no {
diff --git a/new/app/themed/console/_consoleView.scss b/new/app/themed/console/_consoleView.scss
@@ -34,7 +34,7 @@
 }
 
 .expand-group-icon {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .console-message-wrapper:last-of-type {
diff --git a/new/app/themed/elements/_computedStyleWidgetTree.scss b/new/app/themed/elements/_computedStyleWidgetTree.scss
@@ -1,5 +1,5 @@
 .goto-source-icon {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .goto-source-icon:hover {
diff --git a/new/app/themed/elements/_elementsTreeOutline.scss b/new/app/themed/elements/_elementsTreeOutline.scss
@@ -80,7 +80,7 @@
 }
 
 .elements-disclosure li.parent::before {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .elements-disclosure li.hovered:not(.selected) .selection {
@@ -155,7 +155,7 @@
 }
 
 .gutter-menu-icon {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
diff --git a/new/app/themed/keybinds/_keybindsSettingsTab.scss b/new/app/themed/keybinds/_keybindsSettingsTab.scss
@@ -46,3 +46,8 @@ header {
 .keybinds-set-select label p {
   color: $fg;
 }
+
+.keybinds-list-item:not(.keybinds-category-header):hover,
+.keybinds-list-item:not(.keybinds-editing):focus-within {
+  background-color: $tree;
+}
diff --git a/new/app/themed/security/_lockIcon.scss b/new/app/themed/security/_lockIcon.scss
@@ -1,39 +1,39 @@
 .lock-icon,
 .security-property {
-  background-color: $second;
+  color: $second;
 }
 
 .lock-icon-secure {
-  background-color: $string-color;
+  color: $string-color;
 }
 
 .lock-icon-unknown,
 .lock-icon-neutral {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .lock-icon-insecure {
-  background-color: $error-color;
+  color: $error-color;
 }
 
 .security-property-secure {
-  background-color: $string-color;
+  color: $string-color;
 }
 
 .security-property-neutral {
-  background-color: $error-color;
+  color: $error-color;
 }
 
 .security-property-insecure {
-  background-color: $error-color;
+  color: $error-color;
 }
 
 .security-property-info {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .security-property-unknown {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .url-scheme-secure {
diff --git a/new/app/themed/ui/_checkbox.scss b/new/app/themed/ui/_checkbox.scss
@@ -94,9 +94,14 @@ input[type='checkbox']:not(.dt-checkbox-themed):not(.enabled-button) {
 
 .dt-checkbox-text,
 .devices-list-title {
-  overflow: visible;
+  overflow: unset;
+}
 
-  &::before {
-    margin-top: -2px;
-  }
+.filter-checkbox-filter > [is='dt-checkbox'] {
+  overflow: unset;
+}
+
+input[type='checkbox'] {
+  accent-color: $accent1;
+  color: $bg;
 }
diff --git a/new/app/themed/ui/_chromeselect.scss b/new/app/themed/ui/_chromeselect.scss
@@ -3,6 +3,7 @@
   border-radius: 4px;
   color: $fg;
   background: $contrast;
+  background-image: none !important;
   box-shadow: none;
 
   &:focus {
@@ -14,3 +15,19 @@
     color: $selFg;
   }
 }
+
+.workspace-settings-tab .settings-info-message {
+  background: $second;
+}
+
+.harmony-input:not([type]),
+.harmony-input[type='number'],
+.harmony-input[type='text'] {
+  border-color: $hl;
+
+  &:focus,
+  &:active {
+    border: 2px solid $accent1 !important;
+    outline: 2px solid $accent1 !important;
+  }
+}
diff --git a/new/app/themed/ui/_tabbedPane.scss b/new/app/themed/ui/_tabbedPane.scss
@@ -93,7 +93,7 @@
 }
 
 .tabbed-pane-header-tabs-drop-down-container > .chevron-icon {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .tabbed-pane-header-tabs-drop-down-container:hover {
@@ -118,3 +118,11 @@
   text-overflow: clip;
   overflow: visible;
 }
+
+.tabbed-pane-header {
+  background: $contrast;
+}
+
+.item.highlighted {
+  background-color: $selBg;
+}
diff --git a/new/app/themed/ui/_toolbar.scss b/new/app/themed/ui/_toolbar.scss
@@ -9,15 +9,15 @@
 }
 
 .toolbar-dropdown-arrow {
-  background-color: $foreground;
+  $color: $foreground;
 }
 
 .toolbar-text {
   color: $primary;
 }
 
 .toolbar-button.dark-text .toolbar-dropdown-arrow {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .toolbar-render-as-links * {
@@ -30,19 +30,20 @@
 }
 
 .toolbar-glyph {
-  background-color: $primary;
+  background-color: transparent;
+  border-radius: 50%;
 }
 
 .toolbar-button.dark-text .toolbar-dropdown-arrow {
-  background-color: $foreground;
+  color: $foreground;
 }
 
 .toolbar-button.dark-text .toolbar-text {
   color: $primary !important;
 }
 
 :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph {
-  background-color: $accent2;
+  background-color: $trans-accent2;
 }
 
 :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text {
@@ -51,15 +52,15 @@
 
 .toolbar-button.toolbar-state-on .toolbar-glyph,
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover:not(:active) {
-  background-color: $accent1;
+  background-color: $trans-accent;
 }
 
 .toolbar-button.toolbar-state-on .toolbar-text {
   color: $accent1;
 }
 
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-glyph {
-  background-color: $accent2;
+  background-color: $trans-accent2;
 }
 
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-text {
@@ -68,7 +69,7 @@
 
 .toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-glyph,
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:active:hover {
-  background-color: $accent2;
+  background-color: $trans-accent2;
 }
 
 .toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-text {
@@ -81,7 +82,7 @@
 
 .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
 .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
-  background-color: $error-color !important;
+  background-color: $trans-accent3 !important;
 }
 
 .toolbar-item.checkbox:hover {
diff --git a/new/light.scss b/new/light.scss
diff --git a/src/devtools.svelte b/src/devtools.svelte

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`	`1`	`.ax-breadcrumbs .ax-node::before {`
`2`		`- background-color: $foreground;`
	`2`	`+ color: $foreground;`
`3`	`3`
`4`	`4`	`&:hover {`
`5`		`- background-color: $accent1;`
	`5`	`+ color: $accent1;`
`6`	`6`	`}`
`7`	`7`	`}`
`8`	`8`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`.contrast-details-value [is='ui-icon'] {`
`29`		`- background-color: $foreground;`
	`29`	`+ color: $foreground;`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`[is='ui-icon'].smallicon-no {`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`.expand-group-icon {`
`37`		`- background-color: $foreground;`
	`37`	`+ color: $foreground;`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.console-message-wrapper:last-of-type {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.goto-source-icon {`
`2`		`- background-color: $foreground;`
	`2`	`+ color: $foreground;`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.goto-source-icon:hover {`
Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`.elements-disclosure li.parent::before {`
`83`		`- background-color: $foreground;`
	`83`	`+ color: $foreground;`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`.elements-disclosure li.hovered:not(.selected) .selection {`
`@@ -155,7 +155,7 @@`
`155`	`155`	`}`
`156`	`156`
`157`	`157`	`.gutter-menu-icon {`
`158`		`- background-color: $foreground;`
	`158`	`+ color: $foreground;`
`159`	`159`	`}`
`160`	`160`
`161`	`161`	`li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {`
Original file line number	Diff line number	Diff line change
`@@ -46,3 +46,8 @@ header {`
`46`	`46`	`.keybinds-set-select label p {`
`47`	`47`	`color: $fg;`
`48`	`48`	`}`
	`49`	`+`
	`50`	`+.keybinds-list-item:not(.keybinds-category-header):hover,`
	`51`	`+.keybinds-list-item:not(.keybinds-editing):focus-within {`
	`52`	`+ background-color: $tree;`
	`53`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,39 +1,39 @@`
`1`	`1`	`.lock-icon,`
`2`	`2`	`.security-property {`
`3`		`- background-color: $second;`
	`3`	`+ color: $second;`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`.lock-icon-secure {`
`7`		`- background-color: $string-color;`
	`7`	`+ color: $string-color;`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.lock-icon-unknown,`
`11`	`11`	`.lock-icon-neutral {`
`12`		`- background-color: $foreground;`
	`12`	`+ color: $foreground;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.lock-icon-insecure {`
`16`		`- background-color: $error-color;`
	`16`	`+ color: $error-color;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.security-property-secure {`
`20`		`- background-color: $string-color;`
	`20`	`+ color: $string-color;`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.security-property-neutral {`
`24`		`- background-color: $error-color;`
	`24`	`+ color: $error-color;`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.security-property-insecure {`
`28`		`- background-color: $error-color;`
	`28`	`+ color: $error-color;`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`.security-property-info {`
`32`		`- background-color: $foreground;`
	`32`	`+ color: $foreground;`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.security-property-unknown {`
`36`		`- background-color: $foreground;`
	`36`	`+ color: $foreground;`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`.url-scheme-secure {`