Sketchbook icons colors (arduino#1095)

kittaakos · Jun 29, 2022 · 5499c25 · 5499c25
1 parent 1e46962
commit 5499c25
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 43 deletions.
diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon-filled.svg b/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon-filled.svg
diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon.svg b/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon.svg
diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css
@@ -13,12 +13,23 @@
     margin-bottom: 20px;
 }
 
-
-.cloud-sketchbook-tree-icon {
-    background: url("./cloud-sketchbook-tree-icon.svg") center center no-repeat;
+.p-TabBar-tabIcon.cloud-sketchbook-tree-icon {
+    background-color: var(--theia-foreground);
+    -webkit-mask: url(./cloud-sketchbook-tree-icon.svg);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
     width: var(--theia-icon-size);
     height: var(--theia-icon-size);
-    background-size: auto 90%;
+    -webkit-mask-size: 100%;
+}
+
+.p-mod-current
+.cloud-sketchbook-tree-icon {
+    background-color: var(--theia-foreground);
+    -webkit-mask: url(./cloud-sketchbook-tree-icon-filled.svg);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
 }
 
 .sketchbook-trees-container
@@ -65,7 +76,7 @@
 .p-Widget.p-TabBar.p-DockPanel-tabBar
 > ul
 > li.p-TabBar-tab.p-mod-current {
-    border-bottom: 2px solid var(--theia-statusBar-background);
+    border-bottom: 2px solid var(--theia-activityBar-activeBorder);
 }
 
 .sketchbook-trees-container .center {
@@ -89,13 +100,19 @@
 }
 
 .pull-sketch-icon {
-    background: url("./pull-sketch-icon.svg") center center no-repeat;
+    background-color: var(--theia-foreground);
+    -webkit-mask: url(./pull-sketch-icon.svg);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
     width: var(--theia-icon-size);
     height: var(--theia-icon-size);
 }
 
 .push-sketch-icon {
-    background: url("./push-sketch-icon.svg") center center no-repeat;
+    background-color: var(--theia-foreground);
+    -webkit-mask: url(./push-sketch-icon.svg);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
     width: var(--theia-icon-size);
     height: var(--theia-icon-size);
 }
@@ -181,4 +198,4 @@
 
 .arduino-share-sketch-dialog .sketch-link-embed textarea {
     width: 100%;
-}
+}
diff --git a/arduino-ide-extension/src/browser/style/sketchbook-tree-icon-filled.svg b/arduino-ide-extension/src/browser/style/sketchbook-tree-icon-filled.svg
diff --git a/arduino-ide-extension/src/browser/style/sketchbook-tree-icon.svg b/arduino-ide-extension/src/browser/style/sketchbook-tree-icon.svg
diff --git a/arduino-ide-extension/src/browser/style/sketchbook.css b/arduino-ide-extension/src/browser/style/sketchbook.css
@@ -1,27 +1,43 @@
 .sketchbook-tab-icon {
-    -webkit-mask: url('./sketchbook.svg');
-    mask: url('./sketchbook.svg');
+  -webkit-mask: url('./sketchbook.svg');
+  mask: url('./sketchbook.svg');
 }
 
 .sketch-folder-icon {
-    background: url('./sketch-folder-icon.svg') center center no-repeat;
-    background-position-x: 1px;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
+  background: url('./sketch-folder-icon.svg') center center no-repeat;
+  background-position-x: 1px;
+  width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
+}
+
+.p-TabBar-tabIcon.sketchbook-tree-icon {
+  background-color: var(--theia-foreground);
+  -webkit-mask: url(./sketchbook-tree-icon.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  width: 19px !important;
+  height: var(--theia-icon-size);
+  -webkit-mask-size: 100%;
 }
 
+.p-mod-current
 .sketchbook-tree-icon {
-    background: url('./sketchbook-tree-icon.svg') center center no-repeat;
-    width: 19px !important;
-    height: var(--theia-icon-size);
+  background-color: var(--theia-foreground);
+  -webkit-mask: url(./sketchbook-tree-icon-filled.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100%;
 }
 
 .sketchbook-trees-container {
-    height: 100%;
+  height: 100%;
 }
 
 .sketchbook-tree__opts {
-  background: url('./sketchbook-opts-icon.svg') center center no-repeat;
+  background-color: var(--theia-foreground);
+  -webkit-mask: url(./sketchbook-opts-icon.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
   width: var(--theia-icon-size);
   height: var(--theia-icon-size);
 }
@@ -44,4 +60,4 @@
 .theia-TreeNode:hover .sketchbook-commands-icons,
 .theia-TreeNode.theia-mod-selected .sketchbook-commands-icons {
   display: block;
-}
+}