✨ feat(opacity.scss): Add utility classes for background opacity

Spiderpig86 · Dec 28, 2021 · 60c1a33 · 60c1a33
1 parent f0249ed
commit 60c1a33
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 162 deletions.
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -8,7 +8,6 @@
 @import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 /* v1 Color scheme for Cirrus */
-/* v2 Colors */
 /*
   Functions
   TODO Refactor to different categories
@@ -19,6 +18,9 @@
 /*
     Generates delimited class name prefix.
 */
+/*
+    Group selectors that share common styling.
+*/
 /* Spacing */
 /* Breakpoints */
 /* Fonts */
@@ -44,15 +46,6 @@
  *           }
  *       }
  */
-/*
-    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.
-*/
-/*
-    Group selectors that share common styling.
-*/
 /*
     Global Mixins
 */
@@ -69,6 +62,13 @@
 /*
     Bring to front on focus.
 */
+/* v2 Colors */
+/*
+    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.
+*/
 :root {
   /* v1 Colors */
   --cirrus-fg: #374054;

diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -9,7 +9,6 @@
 @import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 /* v1 Color scheme for Cirrus */
-/* v2 Colors */
 /*
   Functions
   TODO Refactor to different categories
@@ -20,6 +19,9 @@
 /*
     Generates delimited class name prefix.
 */
+/*
+    Group selectors that share common styling.
+*/
 /* Spacing */
 /* Breakpoints */
 /* Fonts */
@@ -45,15 +47,6 @@
  *           }
  *       }
  */
-/*
-    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.
-*/
-/*
-    Group selectors that share common styling.
-*/
 /*
     Global Mixins
 */
@@ -70,6 +63,13 @@
 /*
     Bring to front on focus.
 */
+/* v2 Colors */
+/*
+    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.
+*/
 :root {
   /* v1 Colors */
   --cirrus-fg: #374054;

diff --git a/src/internal/_config.scss b/src/internal/_config.scss
@@ -103,6 +103,119 @@ $default-config: (
                 font-size: 130%,
             ),
         ),
+    colors: (
+        pinks: (
+            '100': #f8e7f1,
+            '200': #f3d2e3,
+            '300': #ecb7d3,
+            '400': #eb8cbc,
+            '500': #dd5a9c,
+            '600': #d12e81,
+            '700': #a21f61,
+            '800': #831b50,
+            '900': #741648,
+        ),
+        reds: (
+            '100': #fde7e9,
+            '200': #fbd4d5,
+            '300': #f7b1b1,
+            '400': #f19393,
+            '500': #e85c61,
+            '600': #db3839,
+            '700': #b31e1d,
+            '800': #9b1313,
+            '900': #890e10,
+        ),
+        oranges: (
+            '100': #fdeed1,
+            '200': #fbdbaa,
+            '300': #f6b65c,
+            '400': #f19736,
+            '500': #e4771c,
+            '600': #c45307,
+            '700': #9b3908,
+            '800': #842b09,
+            '900': #890e10,
+        ),
+        yellows: (
+            '100': #fffde4,
+            '200': #f9e978,
+            '300': #f6da52,
+            '400': #e8bb24,
+            '500': #d29507,
+            '600': #9d6b0c,
+            '700': #7c4d09,
+            '800': #6c3e0c,
+            '900': #5d320f,
+        ),
+        greens: (
+            '100': #e1f7eb,
+            '200': #c2ecd6,
+            '300': #98d9b7,
+            '400': #64c192,
+            '500': #44a675,
+            '600': #33855d,
+            '700': #27684a,
+            '800': #275440,
+            '900': #234535,
+        ),
+        teals: (
+            '100': #ddf2f5,
+            '200': #b5e6eb,
+            '300': #7fced5,
+            '400': #59bac3,
+            '500': #1e9ca8,
+            '600': #0f7d8a,
+            '700': #0a616a,
+            '800': #105157,
+            '900': #114448,
+        ),
+        blues: (
+            '100': #e1effc,
+            '200': #bfdcfc,
+            '300': #8bc2f8,
+            '400': #5fa7f3,
+            '500': #3c91ec,
+            '600': #1b74d9,
+            '700': #1e5898,
+            '800': #1e4c80,
+            '900': #1c3c63,
+        ),
+        indigos: (
+            '100': #e2efff,
+            '200': #c4dbfd,
+            '300': #a1befa,
+            '400': #89a3f7,
+            '500': #6c83e9,
+            '600': #5966d9,
+            '700': #4c4f9e,
+            '800': #42417b,
+            '900': #3a3462,
+        ),
+        purples: (
+            '100': #f0e9fb,
+            '200': #e2d4f8,
+            '300': #cbb2f6,
+            '400': #b89af4,
+            '500': #9c73ed,
+            '600': #8256e1,
+            '700': #6340b6,
+            '800': #50388e,
+            '900': #413170,
+        ),
+        grays: (
+            '000': #f8f9fa,
+            '100': #f1f3f5,
+            '200': #e9ecef,
+            '300': #dee2e6,
+            '400': #ced4da,
+            '500': #adb5bd,
+            '600': #868e96,
+            '700': #495057,
+            '800': #343a40,
+            '900': #212529,
+        ),
+    ),
     fonts: (
         sizes: (
             heading: (
@@ -458,6 +571,31 @@ $viewport-flags: map.get($all-config, viewports);
 $excludes: map.get($all-config, excludes);
 $includes: map.get($all-config, includes);
 
+// COLORS
+/* v2 Colors */
+$pinks: functions.map-get-deep($all-config, 'colors.pinks');
+$reds: functions.map-get-deep($all-config, 'colors.reds');
+$oranges: functions.map-get-deep($all-config, 'colors.oranges');
+$yellows: functions.map-get-deep($all-config, 'colors.yellows');
+$greens: functions.map-get-deep($all-config, 'colors.greens');
+$teals: functions.map-get-deep($all-config, 'colors.teals');
+$blues: functions.map-get-deep($all-config, 'colors.blues');
+$indigos: functions.map-get-deep($all-config, 'colors.indigos');
+$purples: functions.map-get-deep($all-config, 'colors.purples');
+$grays: functions.map-get-deep($all-config, 'colors.grays');
+$v2Palettes: (
+    'pink': $pinks,
+    'red': $reds,
+    'orange': $oranges,
+    'yellow': $yellows,
+    'green': $greens,
+    'teal': $teals,
+    'blue': $blues,
+    'indigo': $indigos,
+    'purple': $purples,
+    'gray': $grays,
+);
+
 // COMPONENTS
 $avatar-sizes: map.get($all-config, avatar-sizes);
 $button-sizes: map.get($all-config, button-sizes);

diff --git a/src/internal/_index.scss b/src/internal/_index.scss
@@ -1,8 +1,8 @@
 // Main dependencies
 @forward 'internal/theme';
 @forward 'internal/functions';
-@forward 'internal/config';
 @forward 'internal/flags';
 @forward 'internal/selectors';
 @forward 'internal/size';
-@forward 'internal/mixins';
+@forward 'internal/mixins';
+@forward 'internal/config';