fix: add fallback for --design-unit CSS variable

@vscode-elements/elements does not define --design-unit (was provided
by @vscode/webview-ui-toolkit). Add fallback value of 4 so spacing
utilities (mr-*, ml-*, pt-*, etc.) resolve correctly.

Author: chagong

src/project-settings/assets/classpath/style.scss

@@ -51,7 +51,7 @@
   }
 
   &[open][position='above'] #add-new-jdk {
-    margin: calc(var(--design-unit) * 1px) 0;
+    margin: calc(var(--design-unit, 4) * 1px) 0;
   }
 
   p {
@@ -66,7 +66,7 @@
       display: flex;
       align-items: flex-end;
       .codicon {
-        margin-right: calc(var(--design-unit) * 1px);
+        margin-right: calc(var(--design-unit, 4) * 1px);
       }
     }
   }
@@ -87,7 +87,7 @@
     align-items: center;
   }
   .setting-section-grid-cell-left {
-    padding-right: calc(var(--design-unit) * 4px);
+    padding-right: calc(var(--design-unit, 4) * 4px);
   }
   .setting-section-grid-cell-readonly {
     justify-content: space-between;
@@ -119,7 +119,7 @@
 }
 
 .setting-list-actions {
-  height: calc(var(--design-unit) * 8px);
+  height: calc(var(--design-unit, 4) * 8px);
 }
 
 // Ghost/icon button style (transparent background, like old appearance="icon")

src/project-settings/assets/utils.scss

@@ -1,36 +1,36 @@
 @for $i from 0 through 12 {
     .pl-#{$i} {
-        padding-left: calc(var(--design-unit) * #{$i}px);
+        padding-left: calc(var(--design-unit, 4) * #{$i}px);
     }
 
     .pr-#{$i} {
-        padding-right: calc(var(--design-unit) * #{$i}px);
+        padding-right: calc(var(--design-unit, 4) * #{$i}px);
     }
 
     .pt-#{$i} {
-        padding-top: calc(var(--design-unit) * #{$i}px);
+        padding-top: calc(var(--design-unit, 4) * #{$i}px);
     }
 
     .pb-#{$i} {
-        padding-bottom: calc(var(--design-unit) * #{$i}px);
+        padding-bottom: calc(var(--design-unit, 4) * #{$i}px);
     }
 }
 
 @for $i from 0 through 12 {
     .ml-#{$i} {
-        margin-left: calc(var(--design-unit) * #{$i}px);
+        margin-left: calc(var(--design-unit, 4) * #{$i}px);
     }
 
     .mr-#{$i} {
-        margin-right: calc(var(--design-unit) * #{$i}px);
+        margin-right: calc(var(--design-unit, 4) * #{$i}px);
     }
 
     .mt-#{$i} {
-        margin-top: calc(var(--design-unit) * #{$i}px);
+        margin-top: calc(var(--design-unit, 4) * #{$i}px);
     }
 
     .mb-#{$i} {
-        margin-bottom: calc(var(--design-unit) * #{$i}px);
+        margin-bottom: calc(var(--design-unit, 4) * #{$i}px);
     }
 }