Update Button and StatusBar component styles with custom variables and gradients

- should use gradients, so that the right side is always colored as 'default' (gray background with blue foreground of actions)

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── prompt
                        └── StatusBar
                            ├── StatusBar.module.scss
                            └── StatusBar.tsx

Author: robertpiosik

packages/ui/src/components/editor/common/Button/Button.module.scss

@@ -34,16 +34,16 @@
   }
 
   &--secondary {
-    background-color: var(--vscode-button-secondaryBackground);
-    color: var(--vscode-button-secondaryForeground);
+    background-color: var(--cwc-bg-secondary);
+    color: var(--cwc-text-color);
 
     &:hover {
-      background-color: var(--vscode-button-secondaryHoverBackground);
+      background-color: var(--cwc-bg-primary);
     }
 
     &:disabled {
       &:hover {
-        background-color: var(--vscode-button-secondaryBackground);
+        background-color: var(--cwc-bg-secondary);
       }
     }
   }

packages/ui/src/components/editor/prompt/StatusBar/StatusBar.module.scss

@@ -30,66 +30,58 @@
 
 .theme-default {
   color: var(--cwc-text-color);
-  background-color: var(--cwc-bg-tertiary);
+  background: var(--cwc-bg-tertiary);
   --theme-description-color: var(--cwc-text-color-dimmed);
-
-  .action {
-    color: var(--vscode-textLink-foreground);
-  }
-
-  .action:hover {
-    background-color: var(--cwc-bg-tertiary);
-  }
 }
 
 .theme-warning {
   color: var(--cwc-yellow-foreground);
-  background-color: var(--cwc-yellow-background);
+  background: linear-gradient(
+    45deg,
+    var(--cwc-yellow-background) 10px,
+    var(--cwc-bg-tertiary) 40px
+  );
   --theme-description-color: var(--cwc-yellow-foreground-dimmed);
-
-  .action:hover {
-    background-color: var(--cwc-yellow-background);
-  }
 }
 
 .theme-success {
   color: var(--cwc-green-foreground);
-  background-color: var(--cwc-green-background);
+  background: linear-gradient(
+    45deg,
+    var(--cwc-green-background) 10px,
+    var(--cwc-bg-tertiary) 40px
+  );
   --theme-description-color: var(--cwc-green-foreground-dimmed);
-
-  .action:hover {
-    background-color: var(--cwc-green-background);
-  }
 }
 
 .theme-error {
   color: var(--cwc-red-foreground);
-  background-color: var(--cwc-red-background);
+  background: linear-gradient(
+    45deg,
+    var(--cwc-red-background) 10px,
+    var(--cwc-bg-tertiary) 40px
+  );
   --theme-description-color: var(--cwc-red-foreground-dimmed);
-
-  .action:hover {
-    background-color: var(--cwc-red-background);
-  }
 }
 
 .theme-blue {
   color: var(--cwc-blue-foreground);
-  background-color: var(--cwc-blue-background);
+  background: linear-gradient(
+    45deg,
+    var(--cwc-blue-background) 10px,
+    var(--cwc-bg-tertiary) 40px
+  );
   --theme-description-color: var(--cwc-blue-foreground-dimmed);
-
-  .action:hover {
-    background-color: var(--cwc-blue-background);
-  }
 }
 
 .theme-purple {
   color: var(--cwc-purple-foreground);
-  background-color: var(--cwc-purple-background);
+  background: linear-gradient(
+    45deg,
+    var(--cwc-purple-background) 10px,
+    var(--cwc-bg-tertiary) 40px
+  );
   --theme-description-color: var(--cwc-purple-foreground-dimmed);
-
-  .action:hover {
-    background-color: var(--cwc-purple-background);
-  }
 }
 
 .content {
@@ -142,8 +134,9 @@
   cursor: pointer;
   white-space: nowrap;
   padding: 0 7px 0 4px;
+  color: var(--cwc-text-color);
 
   &:hover {
-    background-color: var(--vscode-list-hoverBackground);
+    background-color: var(--cwc-bg-tertiary);
   }
 }