✨ feat: All semantic color references to _theme.scss will now use _co…

…nfig.scss for customization #174
Spiderpig86 · Jul 2, 2023 · d3e0f9a · d3e0f9a
1 parent 000e814
commit d3e0f9a
Show file tree

Hide file tree

Showing 19 changed files with 82 additions and 91 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -51,6 +51,19 @@
 /*
     Group selectors that share common styling.
 */
+/* Breakpoints */
+/* Fonts */
+/* Images */
+/************
+ * DEFAULTS *
+ ************/
+/*
+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
+*/
+/*
+  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
+*/
+/* VALUE APIS */
 /*
     Global Mixins
 */
@@ -67,18 +80,6 @@
 /*
     Bring to front on focus.
 */
-/* Breakpoints */
-/* Fonts */
-/* Images */
-/************
- * DEFAULTS *
- ************/
-/*
-    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
-*/
-/*
-  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
-*/
 /* Media Queries */
 /* Variant of mixin that takes in mapping of class name to value */
 /**
@@ -98,7 +99,6 @@
  *           }
  *       }
  */
-/* VALUE APIS */
 /* BASE STYLING + RESET FOR CIRRUS */
 :root {
   /* v1 Colors */

diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -50,6 +50,19 @@
 /*
     Group selectors that share common styling.
 */
+/* Breakpoints */
+/* Fonts */
+/* Images */
+/************
+ * DEFAULTS *
+ ************/
+/*
+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
+*/
+/*
+  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
+*/
+/* VALUE APIS */
 /*
     Global Mixins
 */
@@ -66,18 +79,6 @@
 /*
     Bring to front on focus.
 */
-/* Breakpoints */
-/* Fonts */
-/* Images */
-/************
- * DEFAULTS *
- ************/
-/*
-    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
-*/
-/*
-  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
-*/
 /* Media Queries */
 /* Variant of mixin that takes in mapping of class name to value */
 /**
@@ -97,7 +98,6 @@
  *           }
  *       }
  */
-/* VALUE APIS */
 /* BASE STYLING + RESET FOR CIRRUS */
 :root {
   /* v1 Colors */

diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -51,6 +51,19 @@
 /*
     Group selectors that share common styling.
 */
+/* Breakpoints */
+/* Fonts */
+/* Images */
+/************
+ * DEFAULTS *
+ ************/
+/*
+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
+*/
+/*
+  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
+*/
+/* VALUE APIS */
 /*
     Global Mixins
 */
@@ -67,18 +80,6 @@
 /*
     Bring to front on focus.
 */
-/* Breakpoints */
-/* Fonts */
-/* Images */
-/************
- * DEFAULTS *
- ************/
-/*
-    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
-*/
-/*
-  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
-*/
 /* Media Queries */
 /* Variant of mixin that takes in mapping of class name to value */
 /**
@@ -98,7 +99,6 @@
  *           }
  *       }
  */
-/* VALUE APIS */
 /* BASE STYLING + RESET FOR CIRRUS */
 :root {
   /* v1 Colors */

diff --git a/src/components/avatar.scss b/src/components/avatar.scss
@@ -11,7 +11,7 @@
         font-weight: lighter;
         width: 3.2rem;
         height: 3.2rem;
-        background-color: $cirrus-primary;
+        background-color: fill('primary');
         overflow: hidden;
 
         /* Draw text on image just like in Gmail */

diff --git a/src/components/button.scss b/src/components/button.scss
@@ -137,7 +137,7 @@
         /* Regular */
         &.btn-transparent {
             --btn-color: transparent;
-            --btn-fg: #{hex-to-rgb($cirrus-dark)};
+            --btn-fg: #{hex-to-rgb(fill('dark'))};
             --btn-border-color: transparent;
             --btn-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5);
 
@@ -146,26 +146,26 @@
                 --btn-color: 0, 0, 0;
             }
             &.outline {
-                --btn-fg: #{hex-to-rgb($cirrus-dark)};
+                --btn-fg: #{hex-to-rgb(fill('dark'))};
             }
         }
 
         &.btn-light {
-            --btn-color: #{hex-to-rgb($cirrus-light)};
-            --btn-fg: #{hex-to-rgb($cirrus-dark)};
-            --btn-border-color: #{hex-to-rgb($cirrus-light)};
-            --btn-shadow: 0 0 0 0.2rem #{transparentize($cirrus-light, 0.5)};
+            --btn-color: #{hex-to-rgb(fill('light'))};
+            --btn-fg: #{hex-to-rgb(fill('dark'))};
+            --btn-border-color: #{hex-to-rgb(fill('light'))};
+            --btn-shadow: 0 0 0 0.2rem #{transparentize(fill('light'), 0.5)};
 
             &:hover {
-                --btn-color: #{hex-to-rgb(darken($cirrus-light, 10%))};
+                --btn-color: #{hex-to-rgb(darken(fill('light'), 10%))};
             }
         }
 
         &.btn-black {
             --btn-color: 0, 0, 0;
-            --btn-fg: #{hex-to-rgb($cirrus-light)};
+            --btn-fg: #{hex-to-rgb(fill('light'))};
             --btn-border-color: 0, 0, 0;
-            --btn-shadow: 0 0 0 0.2rem #{transparentize($cirrus-dark, 0.5)};
+            --btn-shadow: 0 0 0 0.2rem #{transparentize(fill('dark'), 0.5)};
 
             &:hover {
                 --btn-color: 0, 0, 0;

diff --git a/src/components/form-ext.scss b/src/components/form-ext.scss
@@ -44,7 +44,7 @@
 
             /* Checked state */
             &:checked ~ .form-ext-label:before {
-                background-color: $cirrus-primary;
+                background-color: fill('primary');
             }
 
             @each $color, $value in $control-themes {
@@ -105,8 +105,8 @@
             input[type='checkbox']:checked + * .form-ext-toggle__toggler,
             input[type='radio']:checked + .form-ext-toggle__toggler,
             input[type='radio']:checked + * .form-ext-toggle__toggler {
-                background-color: $cirrus-primary;
-                border-color: $cirrus-primary;
+                background-color: fill('primary');
+                border-color: fill('primary');
                 color: #fff;
                 position: relative;
                 transition: all 0.4s ease;
@@ -205,7 +205,7 @@
             }
 
             &:before {
-                background-color: $cirrus-light;
+                background-color: fill('light');
                 border: 1px solid fill('gray', '300');
                 border-radius: 0.25rem;
                 pointer-events: none;

diff --git a/src/components/header.scss b/src/components/header.scss
@@ -235,7 +235,7 @@
             /* Dropdown menu location adjustment located below for sizes above phones */
             /* Dropdown menu indicator */
             &::after {
-                border: 2px solid $cirrus-primary; /* Must be first to create the triangle shape */
+                border: 2px solid fill('primary'); /* Must be first to create the triangle shape */
                 border-right: 0; /* Create the triangle effect */
                 border-top: 0;
                 display: block;

diff --git a/src/components/links.scss b/src/components/links.scss
@@ -4,14 +4,14 @@
     /* LINKS */
 
     a {
-        color: $cirrus-link;
+        color: fill('link');
         font-weight: 600;
         padding: 2px;
         text-decoration: none;
         transition: all 0.3s;
 
         &:hover {
-            color: $cirrus-link-dark;
+            color: fill('link-dark');
             transition: all 0.3s;
         }
 

diff --git a/src/components/lists.scss b/src/components/lists.scss
@@ -90,13 +90,13 @@
 
         .menu-item:hover > a {
             background-color: rgba(208, 208, 208, 0.3);
-            color: $cirrus-primary;
+            color: fill('primary');
             transition: all var(--animation-duration);
         }
 
         .menu-item.selected > a {
             color: #fff;
-            background-color: $cirrus-primary;
+            background-color: fill('primary');
         }
 
         .menu-item .menu-addon {

diff --git a/src/components/modal.scss b/src/components/modal.scss
@@ -31,7 +31,7 @@
                 right: 0;
                 bottom: 0;
                 display: block;
-                background-color: transparentize($color: $cirrus-dark, $amount: 0.5);
+                background-color: transparentize($color: fill('dark'), $amount: 0.5);
             }
 
             .modal-container,
@@ -69,7 +69,7 @@
             padding: 0;
             display: block;
             border-radius: 3px;
-            box-shadow: 0 0.4rem 1rem transparentize($color: $cirrus-dark, $amount: 0.7);
+            box-shadow: 0 0.4rem 1rem transparentize($color: fill('dark'), $amount: 0.7);
             z-index: 1;
             color: var(--cirrus-fg);
             max-width: 40rem; /* 640px */

diff --git a/src/components/pagination.scss b/src/components/pagination.scss
@@ -16,13 +16,13 @@
                 p,
                 #{$header-selectors} {
                     transition: all 0.3s;
-                    color: $cirrus-primary;
+                    color: fill('primary');
                 }
             }
 
             &:not(.selected):hover *:not([disabled]):not(.disabled):not(.ellipses) {
                 transition: all 0.3s;
-                color: $cirrus-primary;
+                color: fill('primary');
             }
 
             &.pagination-next {
@@ -73,7 +73,7 @@
 
                 /* Color the selected pagination item with accent color */
                 &.selected {
-                    background-color: $cirrus-primary;
+                    background-color: fill('primary');
                     color: #fff;
                     a {
                         color: #fff;

diff --git a/src/components/progress.scss b/src/components/progress.scss
@@ -2,7 +2,7 @@
 @use '../internal' as *;
 
 @if should-generate-classes($PROGRESS) {
-    $progress-primary: $cirrus-primary;
+    $progress-primary: fill('primary');
     $progress-background: fill('gray', '200');
     $progress-border-radius: 0.25rem;
 

diff --git a/src/components/table.scss b/src/components/table.scss
@@ -31,7 +31,7 @@
 
             &.selected {
                 /* Style a selected row */
-                background-color: $cirrus-primary;
+                background-color: fill('primary');
                 color: #fff;
             }
         }

diff --git a/src/components/tabs.scss b/src/components/tabs.scss
@@ -52,7 +52,7 @@
 
                     &.selected a,
                     &.selected .tab-item-content {
-                        color: $cirrus-primary;
+                        color: fill('primary');
                         border-color: fill('gray', '300');
                         border-bottom-color: transparent !important;
                     }
@@ -115,8 +115,8 @@
 
             &.selected a,
             &.selected .tab-item-content {
-                border-bottom-color: $cirrus-primary;
-                color: $cirrus-primary;
+                border-bottom-color: fill('primary');
+                color: fill('primary');
                 border-width: 2px;
                 transition: all 0.3s;
             }

diff --git a/src/components/tags.scss b/src/components/tags.scss
@@ -12,7 +12,7 @@ $TAG_BASE_PADDING_Y: 0.5; // .5rem;
     $padding_y: #{$TAG_BASE_PADDING_Y + 1 * $TAG_PADDING_DIFF};
 
     align-items: center;
-    background-color: $cirrus-light;
+    background-color: fill('light');
     border-radius: 0.25rem;
     color: currentColor;
     display: inline-flex;
@@ -58,7 +58,7 @@ $TAG_BASE_PADDING_Y: 0.5; // .5rem;
     /* Draw the delete button */
     &.tag__delete::before,
     &.tag__delete::after {
-        background-color: $cirrus-light;
+        background-color: fill('light');
         content: '';
         display: block;
         left: 50%;
@@ -86,7 +86,7 @@ $TAG_BASE_PADDING_Y: 0.5; // .5rem;
     /* TAG THEMES */
     &.tag--white {
         background-color: #fff;
-        color: $cirrus-dark;
+        color: fill('dark');
     }
 
     &.tag--black {
@@ -95,7 +95,7 @@ $TAG_BASE_PADDING_Y: 0.5; // .5rem;
     }
 
     &.tag--primary {
-        background-color: $cirrus-primary;
+        background-color: fill('primary');
         color: #fff;
     }