🍸 style: Inline conditions for generating classes to avoid conflictin…

…g variable names

src/builds/core.scss

@@ -18,16 +18,4 @@
 @use "../components/table";
 
 // Utilities
-@use "../utils/absolute";
-@use "../utils/blur";
-@use "../utils/border";
-@use "../utils/clearfix";
-@use "../utils/display";
-@use "../utils/flex";
-@use "../utils/misc";
-@use "../utils/opacity";
-@use "../utils/overflow";
-@use "../utils/position";
-@use "../utils/shadows";
-@use "../utils/transitions";
-@use "../utils/zindex";
+@use "../utils";

src/components/accordion.scss

@@ -2,9 +2,7 @@
 
 /* Accordion */
 /* Use with <detail> and <summary> HTML tags */
-$generate-utility: should-generate-classes($ACCORDION);
-
-@if $generate-utility {
+@if should-generate-classes($ACCORDION) {
     details.accordion {
         border-bottom: 1px solid fill('gray', '300');
         display: block;

src/components/avatar.scss

@@ -1,9 +1,7 @@
 @use '../internal' as *;
 
 /* Avatar */
-$generate-utility: should-generate-classes($AVATAR);
-
-@if $generate-utility {
+@if should-generate-classes($AVATAR) {
     .avatar {
         border-radius: 50%;
         position: relative;

src/components/breadcrumb.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($BREADCRUMB);
-
-@if $generate-utility {
+@if should-generate-classes($BREADCRUMB) {
     $separators: (
         'arrow': '\02192',
         'bullet': '\02022',

src/components/button.scss

@@ -14,9 +14,7 @@
     width: $width;
 }
 
-$generate-utility: should-generate-classes($BUTTON);
-
-@if $generate-utility {
+@if should-generate-classes($BUTTON) {
     /* BUTTONS */
 
     /* Button styling */

src/components/card.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($CARD);
-
-@if $generate-utility {
+@if should-generate-classes($CARD) {
     /* CARDS */
     .card {
         background-color: #fff;

src/components/code.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($CODE);
-
-@if $generate-utility {
+@if should-generate-classes($CODE) {
     /* CODE */
     code {
         --cirrus-code-label-fg: #{fill('gray', '600')};

src/components/footer.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($FOOTER);
-
-@if $generate-utility {
+@if should-generate-classes($FOOTER) {
     /* FOOTER */
     .footer {
         background-color: fill('gray', '800');

src/components/form-ext.scss

@@ -1,10 +1,7 @@
 @use '../internal' as *;
 
 /* Mixins */
-
-$generate-utility: should-generate-classes($FORMS-EXT);
-
-@if $generate-utility {
+@if should-generate-classes($FORMS-EXT) {
     /* EXTENDED FORM */
 
 

src/components/forms.scss

@@ -74,10 +74,7 @@
     }
 }
 
-
-$generate-utility: should-generate-classes($FORMS);
-
-@if $generate-utility {
+@if should-generate-classes($FORMS) {
     /* FORMS */
 
     /*

src/components/frames.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($FRAMES);
-
-@if $generate-utility {
+@if should-generate-classes($FRAMES) {
 /* Separate CSS file, but same part as Layout */
 
 /* The base container that is similar in structure to a card but more flexible */

src/components/header.scss

@@ -24,9 +24,7 @@
     white-space: nowrap;
 }
 
-$generate-utility: should-generate-classes($HEADER);
-
-@if $generate-utility {
+@if should-generate-classes($HEADER) {
 
     /* HEADER */
     .header {

src/components/link-ext.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($LINKS-EXT);
-
-@if $generate-utility {
+@if should-generate-classes($LINKS-EXT) {
     /* EXTENDED LINKS */
     /* Animated links */
     .u,

src/components/links.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($LINKS);
-
-@if $generate-utility {
+@if should-generate-classes($LINKS) {
     /* LINKS */
 
     a {

src/components/lists.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($LISTS);
-
-@if $generate-utility {
+@if should-generate-classes($LISTS) {
     /* LISTS */
 
     ul,

src/components/modal.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($MODAL);
-
-@if $generate-utility {
+@if should-generate-classes($MODAL) {
     /* The base of the modal dialog, which is an overlay of the webpage */
     .modal {
         position: fixed; /* Scrolls with the user */

src/components/pagination.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($PAGINATION);
-
-@if $generate-utility {
+@if should-generate-classes($PAGINATION) {
     /* PAGINATION */
     /* Parent contianer for page navigation */
     .pagination {

src/components/placeholder.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($PLACEHOLDER);
-
-@if $generate-utility {
+@if should-generate-classes($PLACEHOLDER) {
     /* PLACEHOLDER */
     /* Designed to be embedded in any parent container as placeholder when content is absent. */
 

src/components/progress.scss

@@ -1,9 +1,7 @@
 @use 'sass:map';
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($PROGRESS);
-
-@if $generate-utility {
+@if should-generate-classes($PROGRESS) {
     $progress-primary: $cirrus-primary;
     $progress-background: fill('gray', '200');
     $progress-border-radius: 0.25rem;

src/components/table.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($TABLE);
-
-@if $generate-utility {
+@if should-generate-classes($TABLE) {
     /* TABLE */
 
     .table-container {

src/components/tabs.scss

@@ -1,9 +1,7 @@
 @use '../internal' as *;
 @use '../base/spacing.scss';
 
-$generate-utility: should-generate-classes($TABS);
-
-@if $generate-utility {
+@if should-generate-classes($TABS) {
     /* TABS AND TAB CONTAINER */
     .tab-container {
         display: flex;

src/components/tags.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($TAGS);
-
-@if $generate-utility {
+@if should-generate-classes($TAGS) {
 
 $TAG_PADDING_DIFF: 0.125;
 $TAG_BASE_PADDING_X: 0.5; // .5rem;

src/components/tiles.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($TILES);
-
-@if $generate-utility {
+@if should-generate-classes($TILES) {
     /* TILES */
     .tile {
         display: flex;

src/components/toast.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($TOAST);
-
-@if $generate-utility {
+@if should-generate-classes($TOAST) {
     .toast {
         display: block;
         width: 100%;

src/components/tooltips.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($TOOLTIPS);
-
-@if $generate-utility {
+@if should-generate-classes($TOOLTIPS) {
     /* TOOLTIPS */
     .tooltip {
         position: relative; /* let's the pseudoelement that we are displaying relative to the button. */

src/utils/_index.scss

@@ -0,0 +1,13 @@
+@forward "./utils/absolute";
+@forward "./utils/blur";
+@forward "./utils/border";
+@forward "./utils/clearfix";
+@forward "./utils/display";
+@forward "./utils/flex";
+@forward "./utils/misc";
+@forward "./utils/opacity";
+@forward "./utils/overflow";
+@forward "./utils/position";
+@forward "./utils/shadows";
+@forward "./utils/transitions";
+@forward "./utils/zindex";

src/utils/absolute.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($ABSOLUTES);
-
-@if $generate-utility {
+@if should-generate-classes($ABSOLUTES) {
     $directions: top, left, right, bottom;
 
     @each $direction in $directions {

src/utils/blur.scss

@@ -1,9 +1,7 @@
 // Utility classes for shadows
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($BLUR);
-
-@if $generate-utility {
+@if should-generate-classes($BLUR) {
     @include generate-styles-with-viewports($generate-viewports: #{get-viewport-flag($BLUR)}) using ($viewport) {
         $suffix: if($viewport != '', '-#{$viewport}', '');
 

src/utils/border.scss

@@ -11,8 +11,7 @@
     );
 }
 
-$generate-utility: should-generate-classes($BORDER-OPACITY);
-@if $generate-utility {
+@if should-generate-classes($BORDER-OPACITY) {
     @include generate-classes-for-viewport-with-map(
         $opacities,
         '--border-opacity',
@@ -22,8 +21,7 @@ $generate-utility: should-generate-classes($BORDER-OPACITY);
     );
 }
 
-$generate-utility: should-generate-classes($ROUND);
-@if $generate-utility {
+@if should-generate-classes($ROUND) {
     @each $class, $value in $round {
         .u-round-#{$class} {
             border-radius: #{$value};

src/utils/clearfix.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($CLEARFIX);
-
-@if $generate-utility {
+@if should-generate-classes($CLEARFIX) {
     $clears: left, right, both;
 
     @include generate-classes-for-viewport($clears, 'clear', 'u-clear-', $generate-viewports: #{get-viewport-flag($CLEARFIX)});

src/utils/display.scss

@@ -1,8 +1,6 @@
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($DISPLAY);
-
-@if $generate-utility {
+@if should-generate-classes($DISPLAY) {
   $display-utils-config: none, inline, inline-block, block, flex, inline-flex, table, table-row, table-column, table-cell;
 
   @include generate-classes-for-viewport($display-utils-config, 'display', $generate-viewports: #{get-viewport-flag($DISPLAY)});

src/utils/flex.scss

@@ -2,9 +2,7 @@
 
 @use '../internal' as *;
 
-$generate-utility: should-generate-classes($FLEX);
-
-@if $generate-utility {
+@if should-generate-classes($FLEX) {
     $flex-directions: row, row-reverse, column, column-reverse;
     $justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly;
     $align-items: stretch, flex-start, center, flex-end, baseline;
@@ -65,9 +63,7 @@ $generate-utility: should-generate-classes($FLEX);
 }
 
 // TODO: Move to gap.scss
-$generate-utility: should-generate-classes($GAP);
-
-@if $generate-utility {
+@if should-generate-classes($GAP) {
     // Generate flex gap class map
     $gaps-both: ();
     // TODO: Consider if we need to generate for row and col only

src/utils/misc.scss

@@ -3,8 +3,7 @@
 /* UTILS */
 /* Utility classes to help solve some very annoying issues */
 
-$generate-utility: should-generate-classes($FLOAT);
-@if $generate-utility {
+@if should-generate-classes($FLOAT) {
     $pull-directions: (left, right);
     @include generate-classes-for-viewport(
                     $pull-directions,
@@ -14,9 +13,7 @@ $generate-utility: should-generate-classes($FLOAT);
     );
 }
 
-
-$generate-utility: should-generate-classes($TEXT);
-@if $generate-utility {
+@if should-generate-classes($TEXT) {
     $text-directions: (justify, left, right, center);
     @include generate-classes-for-viewport(
                     $text-directions,