Refactor CSS files by replacing custom SCSS variables for padding, font sizes, and border radii with their corresponding hardcoded pixel values to simplify styling

Author: robertpiosik

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

@@ -5,7 +5,7 @@
   width: 16px;
   background-color: var(--vscode-checkbox-background);
   border: 1px solid var(--vscode-checkbox-border);
-  border-radius: var(--border-radius-3px);
+  border-radius: 3px;
   position: relative;
   cursor: pointer;
   flex-shrink: 0;

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

@@ -9,8 +9,8 @@
   background: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   border: 1px solid var(--cwc-border-color);
-  padding: var(--padding-4px) var(--padding-8px);
-  border-radius: var(--border-radius-4px);
+  padding: 4px 8px;
+  border-radius: 4px;
   cursor: pointer;
   width: 100%;
 

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

@@ -10,24 +10,24 @@
 
   &__inner {
     background-color: var(--vscode-quickInput-background);
-    border-radius: var(--border-radius-8px);
+    border-radius: 8px;
     border: 1px solid var(--vscode-widget-border);
     box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
-    padding: var(--padding-4px);
+    padding: 4px;
   }
 }
 
 .item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--padding-12px);
-  padding: 0 var(--padding-6px);
+  gap: 12px;
+  padding: 0 6px;
   height: 24px;
   cursor: pointer;
   color: var(--vscode-quickInput-foreground);
   white-space: nowrap;
-  border-radius: var(--border-radius-4px);
+  border-radius: 4px;
 
   &:hover,
   &[data-selected='true'] {
@@ -40,5 +40,5 @@
 
 .shortcut {
   color: var(--vscode-descriptionForeground);
-  font-size: var(--font-size-12px);
+  font-size: 12px;
 }

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

@@ -2,8 +2,8 @@
   border: 1px solid var(--cwc-border-color);
   background: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
-  padding: var(--padding-4px) var(--padding-7px);
-  border-radius: var(--border-radius-4px);
+  padding: 4px 7px;
+  border-radius: 4px;
   width: 100%;
   outline: none;
 

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

@@ -2,8 +2,8 @@
   border: 1px solid var(--cwc-border-color);
   background: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
-  padding: var(--padding-4px) var(--padding-7px);
-  border-radius: var(--border-radius-4px);
+  padding: 4px 7px;
+  border-radius: 4px;
   width: 100%;
   resize: none;
   overflow: hidden;

packages/ui/src/components/editor/panel/BrowserExtensionMessage/BrowserExtensionMessage.module.scss

@@ -2,16 +2,15 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: var(--padding-6px) var(--padding-8px) var(--padding-8px)
-    var(--padding-8px);
-  margin-bottom: calc(var(--padding-5px) * -1);
+  padding: 6px 8px 8px 8px;
+  margin-bottom: calc(5px * -1);
   background: linear-gradient(
     135deg,
     rgba(255, 0, 221, 0.1) 0%,
     rgba(37, 94, 209, 0.1) 100%
   );
   color: var(--vscode-inputOption-activeForeground);
-  --border-radius: var(--border-radius-8px);
+  --border-radius: 8px;
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
 }
@@ -28,7 +27,7 @@
     white-space: nowrap;
 
     &:first-child {
-      margin-right: var(--padding-10px);
+      margin-right: 10px;
     }
   }
 }

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

@@ -2,13 +2,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--padding-3px);
+  gap: 3px;
   min-height: 28px;
-  font-size: var(--font-size-13px);
-  padding: var(--padding-4px) var(--padding-16px);
+  font-size: 13px;
+  padding: 4px 16px;
   font-family: system-ui, sans-serif;
   border: none;
-  border-radius: var(--border-radius-4px);
+  border-radius: 4px;
   cursor: pointer;
   background-color: var(--vscode-button-background);
   color: var(--vscode-button-foreground);
@@ -48,7 +48,7 @@
 
   &--small {
     min-height: 24px;
-    font-size: var(--font-size-12px);
-    padding: var(--padding-2px) var(--padding-8px);
+    font-size: 12px;
+    padding: 2px 8px;
   }
 }

packages/ui/src/components/editor/panel/Configurations/Configurations.module.scss

@@ -5,7 +5,7 @@
 
 .header {
   height: var(--list-item-height);
-  padding: 0 var(--padding-12px);
+  padding: 0 12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -18,7 +18,7 @@
   &__left {
     display: flex;
     align-items: center;
-    gap: var(--padding-4px);
+    gap: 4px;
   }
 
   &__right {
@@ -27,7 +27,7 @@
 }
 
 .missing-config {
-  padding: var(--padding-2px) var(--padding-12px) 0 var(--padding-12px);
+  padding: 2px 12px 0 12px;
   font-weight: 500;
   font-style: italic;
 }
@@ -41,9 +41,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: var(--padding-4px);
+    gap: 4px;
     height: var(--list-item-height);
-    padding: 0 var(--padding-12px);
+    padding: 0 12px;
 
     &:hover {
       background-color: var(--vscode-list-hoverBackground);
@@ -60,7 +60,7 @@
     &__left {
       display: flex;
       align-items: center;
-      gap: var(--padding-5px);
+      gap: 5px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -124,8 +124,7 @@
 
 .footer {
   display: flex;
-  padding: var(--padding-8px) var(--padding-12px) var(--padding-12px)
-    var(--padding-12px);
+  padding: 8px 12px 12px 12px;
 
   > button {
     flex: 1;

packages/ui/src/components/editor/panel/ContextUtilisation/ContextUtilisation.module.scss

@@ -1,28 +1,28 @@
 .container {
   display: flex;
   align-items: center;
-  gap: var(--padding-8px);
-  padding: 0 var(--padding-10px);
+  gap: 8px;
+  padding: 0 10px;
   color: var(--vscode-descriptionForeground);
 }
 
 .label {
-  font-size: var(--font-size-11px);
+  font-size: 11px;
   white-space: nowrap;
 }
 
 .bar {
   flex: 1;
   height: 3px;
   background-color: var(--vscode-dropdown-border);
-  border-radius: var(--border-radius-999px);
+  border-radius: 999px;
   overflow: hidden;
 
   &__progress {
     height: 100%;
     background-color: var(--vscode-focusBorder);
-    border-top-right-radius: var(--border-radius-999px);
-    border-bottom-right-radius: var(--border-radius-999px);
+    border-top-right-radius: 999px;
+    border-bottom-right-radius: 999px;
 
     &--warning {
       background-color: var(--vscode-editorWarning-foreground);

packages/ui/src/components/editor/panel/Dropdown/Dropdown.module.scss

@@ -5,11 +5,11 @@
 .button {
   display: flex;
   align-items: center;
-  gap: var(--padding-3px);
-  padding: 0 var(--padding-5px) 0 var(--padding-7px);
+  gap: 3px;
+  padding: 0 5px 0 7px;
   height: 24px;
   border: 1px solid var(--cwc-border-color-dimmed);
-  border-radius: var(--border-radius-4px);
+  border-radius: 4px;
   cursor: pointer;
   color: var(--vscode-foreground);
   width: 100%;
@@ -28,18 +28,18 @@
     white-space: nowrap;
     flex-grow: 1;
     text-align: left;
-    font-size: var(--font-size-13px);
+    font-size: 13px;
   }
 
   &__info {
-    font-size: var(--font-size-11px);
+    font-size: 11px;
     color: var(--vscode-descriptionForeground);
     white-space: nowrap;
-    padding-left: var(--padding-3px);
+    padding-left: 3px;
   }
 
   &__icon {
-    font-size: var(--font-size-14px) !important;
+    font-size: 14px !important;
     color: var(--vscode-icon-foreground);
   }
 }