CSS Variable Refactor

projects/swimlane/ngx-ui/src/lib/assets/icons/iconfont/scss/icons.scss

@@ -18,28 +18,28 @@ Generated using nucleoapp.com
 
 [class^='icon-']:before,
 [class*='icon-']:before {
-  line-height: 1;
+  line-height: var(--font-line-height-100);
   font: normal normal normal 1em/1 'ngx-icon';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 /* size examples - relative units */
 .ngx-icon-sm {
-  font-size: 0.8em;
+  font-size: var(--font-size-xs);
 }
 
 .ngx-icon-lg {
-  font-size: 1.2em;
+  font-size: var(--font-size-l);
 }
 
 /* size examples - absolute units */
 .ngx-icon-16 {
-  font-size: 16px;
+  font-size: var(--font-size-m);
 }
 
 .ngx-icon-32 {
-  font-size: 32px;
+  font-size: var(--font-size-4xl);
 }
 
 /* rotate the icon infinitely */

projects/swimlane/ngx-ui/src/lib/components/button-group/button-group.component.scss

@@ -6,20 +6,20 @@
   position: relative;
 
   // default colors
-  --button-bg: #{colors.$color-blue-grey-600};
-  --button-border: #{colors.$color-blue-grey-600};
+  --button-bg: var(--grey-600);
+  --button-border: var(--grey-600);
   --button-text: white;
-  --button-hover: #{colors.$color-blue-grey-700};
+  --button-hover: var(--grey-700);
 
   &.ngx-button-group--contained--primary {
-    --button-bg: #{colors.$color-blue-400};
-    --button-border: #{colors.$color-blue-400};
+    --button-bg: var(--blue-400);
+    --button-border: var(--blue-400);
     --button-text: white;
-    --button-hover: #{colors.$color-blue};
+    --button-hover: var(--blue-500);
   }
 
   > ngx-dropdown {
-    padding-bottom: 0;
+    padding-bottom: var(--spacing-0);
     position: unset; // align dropdown menu with button group
 
     > ngx-dropdown-toggle {
@@ -41,11 +41,11 @@
 
       button {
         // matching button style in dropdown menu
-        padding: 5px 20px;
+        padding: var(--spacing-4) var(--spacing-20);
         white-space: nowrap;
         width: 100%;
         text-align: left;
-        font-size: 0.9em;
+        font-size: var(--font-size-m);
       }
     }
   }

projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle-group.component.scss

@@ -6,33 +6,33 @@
 
   &__container {
     &__label {
-      font-weight: 600;
-      font-size: 12px;
+      font-weight: var(--font-weight-semibold);
+      font-size: var(--font-size-xs);
       line-height: 12px;
-      color: colors.$color-blue-grey-350;
+      color: var(--grey-350);
     }
 
     &__toggle-buttons {
       position: relative;
       display: flex;
       flex-wrap: nowrap;
 
-      border: 1px solid colors.$color-blue-grey-600;
-      border-radius: 4px;
+      border: 1px solid var(--grey-600);
+      border-radius: var(--radius-4);
 
-      padding: 2px;
-      gap: 2px;
+      padding: var(--spacing-2);
+      gap: var(--spacing-2);
 
       &__animation-holder {
         position: absolute;
 
         top: 0;
 
-        margin: 2px;
+        margin: var(--spacing-2);
         height: calc(100% - 4px);
 
-        border-radius: 2px;
-        background-color: colors.$color-blue-grey-700;
+        border-radius: var(--radius-2);
+        background-color: var(--grey-700);
         transition: all 0.25s cubic-bezier(0.35, 0, 0.25, 1);
       }
     }

projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle.component.scss

@@ -5,22 +5,22 @@
   position: relative;
   z-index: 3;
   padding: 1px 10px;
-  border-radius: 2px;
-  color: colors.$color-blue-grey-350;
+  border-radius: var(--radius-2);
+  color: var(--grey-350);
   white-space: nowrap;
   transition: background-color 0.25s cubic-bezier(0.35, 0, 0.25, 1), font-weight 0.25s ease-in;
 
   &.checked {
-    font-weight: 600;
-    color: colors.$color-blue-grey-050;
-    background-color: colors.$color-blue-grey-700;
+    font-weight: var(--font-weight-semibold);
+    color: var(--grey-050);
+    background-color: var(--grey-700);
   }
 
   &:hover:not(.checked):not([disabled]) {
-    background: rgba(colors.$color-blue-grey-650, 0.1);
+    background: rgba(var(--grey-650), 0.1);
   }
 
   &:focus-visible {
-    outline: 2px solid colors.$color-blue-grey-500;
+    outline: 2px solid var(--grey-500);
   }
 }

projects/swimlane/ngx-ui/src/lib/components/button/button.component.scss

@@ -7,14 +7,14 @@
   &,
   &.btn {
     transition: background-color 0.25s ease-out;
-    padding: 0;
+    padding: var(--spacing-0);
   }
 
   button {
     padding: 0.35em 0.55em;
     width: 100%;
     outline-offset: 2px;
-    border-radius: 2px;
+    border-radius: var(--radius-2);
 
     > .content {
       text-overflow: ellipsis;
@@ -46,19 +46,19 @@
   }
 
   &.in-progress {
-    color: colors.$color-white !important;
+    color: var(--white) !important;
   }
 
   &.success {
-    background-color: colors.$color-green !important;
-    background: colors.$color-green !important;
-    border: 1px solid colors.$color-green !important;
+    background-color: var(--green-500) !important;
+    background: var(--green-500) !important;
+    border: 1px solid var(--green-500) !important;
   }
 
   &.fail {
-    background-color: colors.$color-red !important;
-    background: colors.$color-red !important;
-    border: 1px solid colors.$color-red !important;
+    background-color: var(--red-500) !important;
+    background: var(--red-500) !important;
+    border: 1px solid var(--red-500) !important;
   }
 
   &.in-progress,
@@ -98,31 +98,31 @@
       .icon {
         height: 1em;
         width: 1em;
-        font-weight: bold;
-        color: colors.$color-white;
+        font-weight: var(--font-weight-bold);
+        color: var(--white);
         overflow: hidden;
-        font-size: 1em;
+        font-size: var(--font-size-m);
       }
     }
   }
 
   // focus ring colors
   &.btn-primary button {
-    outline-color: colors.$color-blue;
+    outline-color: var(--blue-500);
   }
 
   &.btn-warning button {
-    outline-color: colors.$color-orange;
+    outline-color: var(--orange-500);
   }
 
   &.btn-danger button {
-    outline-color: colors.$color-red-400;
+    outline-color: var(--red-400);
   }
 
   &.btn-bordered,
   &.btn-primary.btn-bordered {
     button {
-      outline-color: colors.$color-blue-400;
+      outline-color: var(--blue-400);
     }
   }
 }

projects/swimlane/ngx-ui/src/lib/components/button/file-button.component.scss

@@ -1,10 +1,10 @@
 @use 'colors/colors' as colors;
 @use 'components/buttons' as buttons;
 
-$upload-button-text-color: colors.$color-grey-100;
-$upload-button-progress-fill: colors.$color-blue-400;
-$upload-button-progress-bg: colors.$color-grey-500;
-$upload-button-success-fill: colors.$color-blue-400;
+$upload-button-text-color: var(--grey-100);
+$upload-button-progress-fill: var(--blue-400);
+$upload-button-progress-bg: var(--grey-500);
+$upload-button-success-fill: var(--blue-400);
 
 /**
  * File upload button
@@ -34,8 +34,8 @@ $upload-button-success-fill: colors.$color-blue-400;
     }
 
     .ngx-file-button-text {
-      font-size: 0.9rem;
-      margin-left: 8px;
+      font-size: var(--font-size-m);
+      margin-left: var(--spacing-8);
       color: $upload-button-progress-bg;
     }
   }
@@ -52,10 +52,10 @@ $upload-button-success-fill: colors.$color-blue-400;
       background: buttons.$button-fill-color;
       border: none;
       border-radius: 50px;
-      padding: 5px 0;
+      padding: var(--spacing-4) var(--spacing-0);
       transition: 0.3s all ease;
       position: relative;
-      margin: 0;
+      margin: var(--spacing-0);
 
       &:hover:not([disabled]),
       &:focus:not([disabled]),
@@ -66,9 +66,9 @@ $upload-button-success-fill: colors.$color-blue-400;
 
       .ngx-file-button-label {
         color: $upload-button-text-color;
-        font-size: 18px;
-        font-weight: 400;
-        line-height: 40px;
+        font-size: var(--font-size-l);
+        font-weight: var(--font-weight-regular);
+        line-height: var(--font-line-height-400);
         max-height: 40px;
         transition: 0.3s all ease;
         cursor: pointer;
@@ -100,8 +100,8 @@ $upload-button-success-fill: colors.$color-blue-400;
     }
 
     .icon-check {
-      font-size: 25px;
-      color: colors.$color-grey-100;
+      font-size: var(--font-size-2xl);
+      color: var(--grey-100);
       position: absolute;
       top: 0;
       left: 0;
@@ -112,16 +112,16 @@ $upload-button-success-fill: colors.$color-blue-400;
     }
 
     &.active {
-      padding: 0;
+      padding: var(--spacing-0);
 
       .ngx-file-button-button {
         background: $upload-button-progress-bg;
-        margin-top: 25px;
+        margin-top: var(--spacing-24);
       }
 
       .ngx-file-button-fill {
         display: block;
-        margin-top: 25px;
+        margin-top: var(--spacing-24);
         transition: 100ms all ease 100ms;
       }
 
@@ -132,8 +132,8 @@ $upload-button-success-fill: colors.$color-blue-400;
 
     &.success {
       .ngx-file-button-button {
-        margin: 0;
-        padding: 25px;
+        margin: var(--spacing-0);
+        padding: var(--spacing-24);
         width: 50px;
         background: $upload-button-success-fill;
       }