Remove Sass vars represented as CSS Properties (#1202)

user-interviews · May 1, 2024 · 0fbaddd · 0fbaddd
1 parent 1c4cfd7
commit 0fbaddd
Show file tree

Hide file tree

Showing 75 changed files with 889 additions and 1,080 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -13,22 +13,22 @@ const preview = {
   ],
   parameters: {
     backgrounds: {
-      default: '$ux-white',
+      default: '--ux-white',
       values: [
         {
-          name: '$ux-white',
+          name: '--ux-white',
           value: colors.UX_WHITE,
         },
         {
-          name: '$ux-cream',
+          name: '--ux-cream',
           value: colors.UX_CREAM,
         },
         {
-          name: '$ux-emerald-600',
+          name: '--ux-emerald-600',
           value: colors.UX_EMERALD_600,
         },
         {
-          name: '$ux-neutral-800',
+          name: '--ux-neutral-800',
           value: colors.UX_NEUTRAL_800,
         }
       ],

diff --git a/scss/baseline.scss b/scss/baseline.scss
@@ -1,8 +1,5 @@
-@import './colors/palette';
-@import './typography';
-
 body {
-  font-family: $synth-font-family;
-  font-size: $synth-font-size-base;
-  color: $ux-gray-900;
+  font-family: var(--synth-font-family);
+  font-size: var(--synth-font-size-base);
+  color: var(--ux-gray-900);
 }
diff --git a/scss/borders.scss b/scss/borders.scss
diff --git a/scss/box_shadow.scss b/scss/box_shadow.scss
diff --git a/scss/buttons.scss b/scss/buttons.scss
@@ -1,20 +1,20 @@
 @import './colors';
 
 .btn-link--neutral {
-  color: $ux-gray-500;
+  color: var(--ux-gray-500);
 
   &:hover {
-    color: $ux-gray-700;
+    color: var(--ux-gray-700);
   }
 }
 
 .btn-outline-secondary {
-  color: $ux-blue;
-  border-color: $ux-blue;
+  color: var(--ux-blue);
+  border-color: var(--ux-blue);
 
   &:hover {
-    background-color: $ux-blue;
-    color: $ux-white;
+    background-color: var(--ux-blue);
+    color: var(--ux-white);
   }
 }
 
@@ -26,13 +26,13 @@ $warning: $ux-yellow-400;
 
 @mixin btn-focus-outline {
   box-shadow: none !important;
-  outline: 2px solid $ux-blue-500;
+  outline: 2px solid var(--ux-blue-500);
   outline-offset: 2px;
 }
 
 @mixin btn-focus-outline--dark-bg {
   box-shadow: none !important;
-  outline: 2px solid $ux-white;
+  outline: 2px solid var(--ux-white);
   outline-offset: 2px;
 }
 
@@ -133,11 +133,11 @@ $warning: $ux-yellow-400;
     $btn-outline-primary-hover-border,
     $btn-outline-primary-hover-color,
   );
-  border-color: $btn-outline-primary-border;
+  border-color: var(--btn-outline-primary-border);
 
   &:active {
-    background-color: $btn-outline-primary-active-background;
-    border-color: $btn-outline-primary-active-border-color;
+    background-color: var(--btn-outline-primary-active-background);
+    border-color: var(--btn-outline-primary-active-border-color);
   }
 
   &:focus-visible {
@@ -170,11 +170,11 @@ $warning: $ux-yellow-400;
     $btn-outline-primary-hover-border,
     $btn-outline-primary-hover-color,
   );
-  border-color: $btn-outline-primary-border;
+  border-color: var(--btn-outline-primary-border);
 
   &:active {
-    background-color: $btn-outline-primary-active-background;
-    border-color: $btn-outline-primary-active-border-color;
+    background-color: var(--btn-outline-primary-active-background);
+    border-color: var(--btn-outline-primary-active-border-color);
   }
 
   &:focus-visible {
@@ -225,7 +225,7 @@ $warning: $ux-yellow-400;
 
   &:active, &.btn-tertiary:focus {
     box-shadow: none;
-    border-color: $synth-hyperlink-color;
+    border-color: var(--synth-hyperlink-color);
   }
 }
 
@@ -286,11 +286,11 @@ $warning: $ux-yellow-400;
     $btn-outline-danger-hover-border,
     $btn-outline-danger-hover-color,
   );
-  border-color: $btn-outline-danger-border;
+  border-color: var(--btn-outline-danger-border);
 
   &:active {
-    background-color: $btn-outline-danger-active-background;
-    border-color: $btn-outline-danger-active-border-color;
+    background-color: var(--btn-outline-danger-active-background);
+    border-color: var(--btn-outline-danger-active-border-color);
   }
 
   &:focus-visible {
@@ -359,11 +359,11 @@ $warning: $ux-yellow-400;
     $btn-outline-warning-hover-border,
     $btn-outline-warning-hover-color,
   );
-  border-color: $btn-outline-warning-border;
+  border-color: var(--btn-outline-warning-border);
 
   &:active {
-    background-color: $btn-outline-warning-active-background;
-    border-color: $btn-outline-warning-active-border-color;
+    background-color: var(--btn-outline-warning-active-background);
+    border-color: var(--btn-outline-warning-active-border-color);
   }
 
   &:focus-visible {
@@ -403,7 +403,7 @@ $warning: $ux-yellow-400;
   );
 
   &:disabled {
-    color: $ux-gray-500;
+    color: var(--ux-gray-500);
   }
 
   &:focus-visible {
@@ -436,17 +436,17 @@ $warning: $ux-yellow-400;
     $btn-outline-transparent-hover-border,
     $btn-outline-transparent-hover-color,
   );
-  border-color: $btn-outline-transparent-border;
+  border-color: var(--btn-outline-transparent-border);
 
   &:active {
-    background-color: $btn-outline-transparent-active-background;
-    border-color: $btn-outline-transparent-active-border-color;
+    background-color: var(--btn-outline-transparent-active-background);
+    border-color: var(--btn-outline-transparent-active-border-color);
   }
 
   &:disabled {
-    background-color: $ux-gray-300;
+    background-color: var(--ux-gray-300);
     border: $ux-gray-400;
-    color: $ux-gray-800;
+    color: var(--ux-gray-800);
   }
 
   &:focus-visible {
@@ -486,7 +486,7 @@ $warning: $ux-yellow-400;
   );
 
   &:disabled {
-    color: $ux-white;
+    color: var(--ux-white);
   }
 
   &:focus-visible {
@@ -526,7 +526,7 @@ $warning: $ux-yellow-400;
   );
 
   &:disabled {
-    color: $ux-white;
+    color: var(--ux-white);
   }
 
   &:focus-visible {
@@ -566,7 +566,7 @@ $warning: $ux-yellow-400;
   );
 
   &:disabled {
-    color: $ux-white;
+    color: var(--ux-white);
   }
 
   &:focus-visible {
@@ -606,7 +606,7 @@ $warning: $ux-yellow-400;
   );
 
   &:disabled {
-    color: $ux-white;
+    color: var(--ux-white);
   }
 
   &:focus-visible {
@@ -648,7 +648,7 @@ $warning: $ux-yellow-400;
   text-decoration: none;
 
   &:disabled {
-    color: $ux-blue;
+    color: var(--ux-blue);
     opacity: 0.5;
   }
 

diff --git a/scss/colors.scss b/scss/colors.scss
@@ -1,4 +1,3 @@
-@import './colors/flash';
 @import './colors/inputs';
 @import './colors/mod_rainbow';
 @import './colors/palette';

diff --git a/scss/colors/flash.scss b/scss/colors/flash.scss
diff --git a/scss/colors/mod_rainbow.scss b/scss/colors/mod_rainbow.scss
@@ -1,35 +1,35 @@
-@mixin mod-rainbow($selector: '', $lighten: 0%, $color: $ux-white) {
+@mixin mod-rainbow($selector: '', $lighten: 0%, $color: #fff) {
   &.ui-mod #{$selector} {
     color: $color;
   }
 
   &.ui-mod--0 #{$selector} {
-    background-color: $ux-gray-300;
-    color: $ux-gray-800;
+    background-color: var(--ux-gray-300);
+    color: var(--ux-gray-800);
   }
 
   &.ui-mod--1 #{$selector} {
-    background-color: $ux-green-300;
-    color: $ux-green-900;
+    background-color: var(--ux-green-300);
+    color: var(--ux-green-900);
   }
 
   &.ui-mod--2 #{$selector} {
-    background-color: $ux-orange-200;
-    color: $ux-orange-900;
+    background-color: var(--ux-orange-200);
+    color: var(--ux-orange-900);
   }
 
   &.ui-mod--3 #{$selector} {
-    background-color: $ux-yellow-300;
-    color: $ux-yellow-900;
+    background-color: var(--ux-yellow-300);
+    color: var(--ux-yellow-900);
   }
 
   &.ui-mod--4 #{$selector} {
-    background-color: $ux-red-200;
-    color: $ux-red-900;
+    background-color: var(--ux-red-200);
+    color: var(--ux-red-900);
   }
 
   &.ui-mod--5 #{$selector} {
-    background-color: $ux-purple-200;
-    color: $ux-purple-900;
+    background-color: var(--ux-purple-200);
+    color: var(--ux-purple-900);
   }
 }