feat: add vscode themes support (early stage wip)

software-mansion · Dec 27, 2024 · 49a999c · 49a999c
1 parent 3838dc8
commit 49a999c
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 265 deletions.
diff --git a/packages/vscode-extension/src/webview/components/DeviceSelect.css b/packages/vscode-extension/src/webview/components/DeviceSelect.css
@@ -15,7 +15,7 @@
   border: 0px solid transparent;
   border-radius: 18px;
   gap: 5px;
-  background-color: var(--swm-device-select-background);
+  background-color: var(--swm-device-select-trigger);
   color: var(--swm-device-select-trigger-text);
   user-select: none;
   width: var(--swm-device-select-width);
@@ -48,6 +48,7 @@
   border-radius: 18px 18px 0 0;
   padding-top: 4px;
   max-height: var(--radix-select-content-available-height);
+  box-shadow: var(--swm-backdrop-shadow);
 }
 
 .device-select-viewport {
@@ -127,6 +128,7 @@
 }
 .device-select-rich-item-icon-selected {
   background-color: var(--swm-device-icon-background-selected);
+  color: var(--swm-device-icon-selected);
 }
 
 .device-select-label {

diff --git a/packages/vscode-extension/src/webview/components/IconButtonWithOptions.css b/packages/vscode-extension/src/webview/components/IconButtonWithOptions.css
@@ -1,5 +1,5 @@
 .dropdown-arrow {
-  color: var(--swm-button);
+  color: var(--swm-icon-button);
   position: absolute;
   left: 0;
   right: 0;

diff --git a/packages/vscode-extension/src/webview/components/shared/Button.css b/packages/vscode-extension/src/webview/components/shared/Button.css
@@ -10,6 +10,7 @@
   border: 0px solid transparent;
   border-radius: 10px;
   color: var(--swm-button);
+  background-color: var(--swm-button-background);
   transition: all 200ms 0ms ease-in-out;
   user-select: none;
   gap: 8px;

diff --git a/packages/vscode-extension/src/webview/components/shared/IconButton.css b/packages/vscode-extension/src/webview/components/shared/IconButton.css
@@ -10,7 +10,7 @@
   background: none;
   border: 0px solid transparent;
   border-radius: 36px;
-  color: var(--swm-button);
+  color: var(--swm-icon-button);
   transition: all 200ms 0ms ease-in-out;
   flex-shrink: 0;
 }
@@ -22,12 +22,13 @@
 }
 
 .icon-button:hover {
-  background-color: var(--swm-button-hover);
+  color: var(--swm-icon-button-hover);
+  background-color: var(--swm-icon-button-hover-background);
 }
 
 .icon-button:active {
-  color: var(--swm-button-active);
-  background-color: var(--swm-button-active-background);
+  color: var(--swm-icon-button-active);
+  background-color: var(--swm-icon-button-active-background);
   transform: scale(0.9);
 }
 

diff --git a/packages/vscode-extension/src/webview/components/shared/RadioGroup.css b/packages/vscode-extension/src/webview/components/shared/RadioGroup.css
@@ -33,7 +33,7 @@ button {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--swm-popover-background);
+  background-color: var(--swm-button-background);
 }
 
 .radio-group-label {

diff --git a/packages/vscode-extension/src/webview/components/shared/SearchSelect.css b/packages/vscode-extension/src/webview/components/shared/SearchSelect.css
@@ -35,7 +35,7 @@
 .matches-container {
   height: 200px;
   overflow: auto;
-  border: 2px solid var(--deep-link-history-border);
+  border: 2px solid var(--swm-button-background);
   border-radius: 4px;
   display: flex;
   flex-direction: column;

diff --git a/packages/vscode-extension/src/webview/components/shared/SwitchGroup.css b/packages/vscode-extension/src/webview/components/shared/SwitchGroup.css
@@ -15,13 +15,13 @@
 .switch-root {
   width: var(--switch-width);
   height: var(--switch-height);
-  background-color: var(--swm-switch-root-disabled);
+  background-color: var(--swm-switch-root-background);
   border-radius: 9999px;
   position: relative;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .switch-root[data-state="checked"] {
-  background-color: var(--navy-light-60);
+  background-color: var(--swm-button-background);
 }
 
 .switch-thumb {