noctemyth 0.3.0 → 1.0.0

package/src/components/nav.scss

@@ -170,8 +170,9 @@
           );
       }
     }
+
     &:hover,
-    &.is-hovered,
+    &.is-hover,
     &.is-hovered {
       color: var(--#{variables.$prefix}nav-menu-item-color-hover-fore);
       text-shadow:
@@ -266,6 +267,7 @@
           );
       }
     }
+
     &:active,
     &.is-active {
       color: var(--#{variables.$prefix}nav-menu-item-color-active-fore);
@@ -365,6 +367,7 @@
           );
       }
     }
+
     &[disabled],
     fieldset[disabled],
     &.is-disabled {
@@ -642,7 +645,7 @@
   }
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}nav-color-fore: var(
@@ -700,64 +703,5 @@
         );
       }
     }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}nav-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-fore)
-        );
-        --#{variables.$prefix}nav-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-back,
-          var(--#{variables.$prefix}color-#{$colorName}-back)
-        );
-        --#{variables.$prefix}nav-color-border: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-border,
-          var(--#{variables.$prefix}color-#{$colorName}-border)
-        );
-
-        --#{variables.$prefix}nav-menu-item-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-fore)
-        );
-        --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
-        );
-        --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
-        );
-        --#{variables.$prefix}nav-menu-item-color-active-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-active-fore)
-        );
-        --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
-        );
-        --#{variables.$prefix}nav-menu-item-color-shadow: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-shadow,
-          var(--#{variables.$prefix}color-#{$colorName}-shadow)
-        );
-        --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-shadow,
-          var(--#{variables.$prefix}color-#{$colorName}-focus-shadow)
-        );
-        --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-shadow,
-          var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
-        );
-        --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-shadow,
-          var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
-        );
-        --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
-          --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-shadow,
-          var(--#{variables.$prefix}color-#{$colorName}-disabled-shadow)
-        );
-      }
-    }
   }
 }

package/src/components/paragraph.scss

@@ -6,7 +6,6 @@
   @include mixins.element();
   line-height: 1.5;
   display: block;
-  margin: 0;
   margin-block: 0.5rem;
   margin-inline: 0;
 }

package/src/components/progress.scss

@@ -28,6 +28,7 @@
     color: var(--#{variables.$prefix}progress-color-fore);
     height: 1rem;
     position: relative;
+    vertical-align: baseline;
     &::before {
       content: "";
       position: absolute;
@@ -46,7 +47,7 @@
         }
       }
 
-      @each $color in variables.$colors {
+      @each $color in variables.$allColors {
         $colorName: map.get($color, "name");
         &.is-#{$colorName} {
           --#{variables.$prefix}progress-color-fore: var(

package/src/css-variables/animation.scss

@@ -1,6 +1,6 @@
 @use "../variables/index.scss" as variables;
 
-:root {
+:where(:root) {
   --#{variables.$prefix}animation-speed-heavy: #{variables.$animation-speed-heavy};
   --#{variables.$prefix}animation-speed-slower: #{variables.$animation-speed-slower};
   --#{variables.$prefix}animation-speed-slow: #{variables.$animation-speed-slow};

package/src/css-variables/border.scss

@@ -1,7 +1,7 @@
 @use "../variables/index.scss" as variables;
 @use "sass:map";
 
-:root {
+:where(:root) {
   @each $borderWidth in variables.$borderWidths {
     $name: map.get($borderWidth, "name");
     $value: map.get($borderWidth, "value");

package/src/css-variables/color.scss

@@ -14,28 +14,15 @@
     @if (string.length($p) == 1) {
       $p: "0" + $p;
     }
-    $lightness: variables.$color-lightness-50;
-    $chroma: variables.$color-chroma-colorful;
-
-    @if ($i < 10) {
-      $lightness-offset: (10 - $i) * variables.$color-lightness-offset-darker;
-      $lightness: variables.$color-lightness-50 + $lightness-offset;
-      $chroma-offset: (10 - $i) *
-        variables.$color-chroma-colorful-offset-darker;
-      $chroma: $chroma + $chroma-offset;
-    } @else if ($i > 10) {
-      $lightness-offset: ($i - 10) * variables.$color-lightness-offset-lighter;
-      $lightness: variables.$color-lightness-50 + $lightness-offset;
-      $chroma-offset: ($i - 10) *
-        variables.$color-chroma-colorful-offset-lighter;
-      $chroma: $chroma + $chroma-offset;
-    }
+    $chroma: var(--#{variables.$prefix}color-chroma-colorful-#{$p});
 
     @if ($name == "default" or $name == "gray") {
-      $chroma: variables.$color-chroma-gray;
+      $chroma: var(--#{variables.$prefix}color-chroma-gray);
     }
 
-    $oklch: #{$lightness} #{$chroma} #{$hue};
+    $oklch: var(--#{variables.$prefix}color-lightness-#{$p})
+      #{$chroma}
+      var(--#{variables.$prefix}color-hue-#{$name});
 
     --#{variables.$prefix}color-#{$name}-#{$p}: oklch(#{$oklch});
   }
@@ -67,8 +54,12 @@
     $light: map.get($fore, "light");
     $dark: map.get($fore, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-fore: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
@@ -81,8 +72,12 @@
     $light: map.get($back, "light");
     $dark: map.get($back, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-back: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
@@ -95,8 +90,12 @@
     $light: map.get($border, "light");
     $dark: map.get($border, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-border: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
@@ -109,8 +108,12 @@
     $light: map.get($placeholder, "light");
     $dark: map.get($placeholder, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-placeholder: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
@@ -123,14 +126,57 @@
     $light: map.get($shadow, "light");
     $dark: map.get($shadow, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-shadow: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
       );
     }
   }
+
+  $scrollbar: map.get($colorShade, "scrollbar");
+  @if ($scrollbar != null) {
+    $scrollbarThumb: map.get($scrollbar, "thumb");
+    @if ($scrollbarThumb != null) {
+      $light: map.get($scrollbarThumb, "light");
+      $dark: map.get($scrollbarThumb, "dark");
+      @if ($light != null and $dark != null) {
+        $lightStr: functions.colorLightnessNumberToString(
+          $light + $lightnessOffset
+        );
+        $darkStr: functions.colorLightnessNumberToString(
+          $dark + $lightnessOffset
+        );
+        --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-scrollbar-thumb: light-dark(
+          var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+          var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+        );
+      }
+    }
+
+    $scrollbarTrack: map.get($scrollbar, "track");
+    @if ($scrollbarTrack != null) {
+      $light: map.get($scrollbarTrack, "light");
+      $dark: map.get($scrollbarTrack, "dark");
+      @if ($light != null and $dark != null) {
+        $lightStr: functions.colorLightnessNumberToString(
+          $light + $lightnessOffset
+        );
+        $darkStr: functions.colorLightnessNumberToString(
+          $dark + $lightnessOffset
+        );
+        --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-scrollbar-track: light-dark(
+          var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+          var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+        );
+      }
+    }
+  }
 }
 
 @mixin setColorShade(
@@ -379,6 +425,68 @@
   }
   //#endregion dialogue
 
+  //#region figure
+  $figure: map.get($colorShade, "figure");
+  @if ($figure != null) {
+    @include setColor(
+      $figure,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "figure"
+    );
+
+    $figureContent: map.get($figure, "figureContent");
+    @if ($figureContent != null) {
+      @include setColor(
+        $figureContent,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "figure-content"
+      );
+
+      $figureContentSelection: map.get($figureContent, "selection");
+      @if ($figureContentSelection != null) {
+        @include setColor(
+          $figureContentSelection,
+          $lightnessOffset,
+          $srcColorName,
+          $destColorName,
+          $name,
+          "figure-content-selection"
+        );
+      }
+    }
+
+    $figureCaption: map.get($figure, "figureCaption");
+    @if ($figureCaption != null) {
+      @include setColor(
+        $figureCaption,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "figure-caption"
+      );
+
+      $figureCaptionSelection: map.get($figureCaption, "selection");
+      @if ($figureCaptionSelection != null) {
+        @include setColor(
+          $figureCaptionSelection,
+          $lightnessOffset,
+          $srcColorName,
+          $destColorName,
+          $name,
+          "figure-caption-selection"
+        );
+      }
+    }
+  }
+  //#endregion figure
+
   //#region footer
   $footer: map.get($colorShade, "footer");
   @if ($footer != null) {
@@ -657,7 +765,10 @@
       @each $semanticColor in variables.$semanticColors {
         $semanticColorName: map.get($semanticColor, "name");
         $semanticColorColorName: map.get($semanticColor, "colorName");
-        $semanticColorLightnessOffset: map.get($semanticColor, "lightnessOffset");
+        $semanticColorLightnessOffset: map.get(
+          $semanticColor,
+          "lightnessOffset"
+        );
         $color: functions.getColorFromColors(
           variables.$colors,
           $semanticColorColorName
@@ -676,8 +787,69 @@
   }
 }
 
+@mixin setColorColorfulChromaCssVariables() {
+  $p: "0";
+  @for $i from 1 through 19 {
+    $p: "" + ($i * 5);
+    @if (string.length($p) == 1) {
+      $p: "0" + $p;
+    }
+    $chroma: variables.$color-chroma-colorful-50;
+
+    @if ($i < 10) {
+      $chroma-offset: (10 - $i) *
+        variables.$color-chroma-colorful-offset-darker;
+      $chroma: variables.$color-chroma-colorful-50 + $chroma-offset;
+    } @else if ($i > 10) {
+      $chroma-offset: (10 - $i) *
+        variables.$color-chroma-colorful-offset-lighter;
+      $chroma: variables.$color-chroma-colorful-50 + $chroma-offset;
+    }
+
+    --#{variables.$prefix}color-chroma-colorful-#{$p}: #{$chroma};
+  }
+}
+
+@mixin setColorLightnessCssVariables() {
+  $steps: 18;
+  $value-step: calc(
+    (variables.$color-lightness-95 - variables.$color-lightness-05) / $steps
+  );
+  @for $i from 0 through $steps {
+    $current-label: calc(5 + ($i * 5));
+
+    $formatted-label: "#{$current-label}";
+
+    @if ($current-label < 10) {
+      $formatted-label: "0#{$current-label}";
+    }
+
+    $current-value: calc(variables.$color-lightness-05 + ($value-step * $i));
+
+    --#{variables.$prefix}color-lightness-#{$formatted-label}: #{$current-value};
+  }
+}
+
 :where(:root) {
   color-scheme: light dark;
+
+  --#{variables.$prefix}color-hue-gray: #{variables.$color-hue-gray};
+  --#{variables.$prefix}color-hue-red: #{variables.$color-hue-red};
+  --#{variables.$prefix}color-hue-coral: #{variables.$color-hue-coral};
+  --#{variables.$prefix}color-hue-orange: #{variables.$color-hue-orange};
+  --#{variables.$prefix}color-hue-yellow: #{variables.$color-hue-yellow};
+  --#{variables.$prefix}color-hue-lime: #{variables.$color-hue-lime};
+  --#{variables.$prefix}color-hue-green: #{variables.$color-hue-green};
+  --#{variables.$prefix}color-hue-cyan: #{variables.$color-hue-cyan};
+  --#{variables.$prefix}color-hue-blue: #{variables.$color-hue-blue};
+  --#{variables.$prefix}color-hue-violet: #{variables.$color-hue-violet};
+  --#{variables.$prefix}color-hue-magenta: #{variables.$color-hue-magenta};
+
+  @include setColorLightnessCssVariables();
+
+  --#{variables.$prefix}color-chroma-gray: #{variables.$color-chroma-gray};
+  @include setColorColorfulChromaCssVariables();
+
   @each $color in variables.$colors {
     $name: map.get($color, "name");
     @if ($name == "gray") {

package/src/css-variables/components/header.scss

@@ -1,6 +1,7 @@
 @use "../../variables/index.scss" as variables;
 
 :root {
+  --#{variables.$prefix}header-min-height: #{variables.$header-min-height};
   --#{variables.$prefix}header-backdrop-filter: #{variables.$header-backdrop-filter};
   --#{variables.$prefix}header-z-index-is-sticky: #{variables.$header-z-index-is-sticky};
   --#{variables.$prefix}header-z-index-is-fixed: #{variables.$header-z-index-is-fixed};

package/src/css-variables/index.scss

@@ -3,5 +3,6 @@
 @forward "./border.scss";
 @forward "./color.scss";
 @forward "./components/index.scss";
+@forward "./layout.scss";
 @forward "./miscellaneous.scss";
 @forward "./typography.scss";

package/src/css-variables/layout.scss

@@ -0,0 +1,11 @@
+@use "../variables/index.scss" as variables;
+
+:where(:root) {
+  --#{variables.$prefix}responsive-breakpoint-xsmall: #{variables.$responsive-breakpoint-xsmall};
+  --#{variables.$prefix}responsive-breakpoint-small: #{variables.$responsive-breakpoint-small};
+  --#{variables.$prefix}responsive-breakpoint-medium: #{variables.$responsive-breakpoint-medium};
+  --#{variables.$prefix}responsive-breakpoint-large: #{variables.$responsive-breakpoint-large};
+  --#{variables.$prefix}responsive-breakpoint-xlarge: #{variables.$responsive-breakpoint-xlarge};
+
+  --#{variables.$prefix}responsive-breakpoint-max-width-offset: #{variables.$responsive-breakpoint-max-width-offset};
+}

package/src/css-variables/miscellaneous.scss

@@ -1,8 +1,8 @@
 @use "../variables/index.scss" as variables;
 
-:root {
-  --#{variables.$prefix}z-index-dub:  #{variables.$z-index-dub};
+:where(:root) {
+  --#{variables.$prefix}z-index-dub: #{variables.$z-index-dub};
 
-  --#{variables.$prefix}z-index-modal:  #{variables.$z-index-modal};
-  --#{variables.$prefix}z-index-modal-content:  #{variables.$z-index-modal-content};
+  --#{variables.$prefix}z-index-modal: #{variables.$z-index-modal};
+  --#{variables.$prefix}z-index-modal-content: #{variables.$z-index-modal-content};
 }

package/src/css-variables/typography.scss

@@ -1,6 +1,6 @@
 @use "../variables/index.scss" as variables;
 
-:root {
+:where(:root) {
   --#{variables.$prefix}font-family-serif: #{variables.$font-family-serif};
   --#{variables.$prefix}font-family-sans-serif: #{variables.$font-family-sans-serif};
   --#{variables.$prefix}font-family-monospace: #{variables.$font-family-monospace};

package/src/layouts/columns.scss

@@ -4,67 +4,70 @@
 @use "../functions/index.scss" as functions;
 
 :where(.columns) {
-  --#{variables.$prefix}gutter-x: 0rem;
-  --#{variables.$prefix}gutter-y: 0rem;
+  --#{variables.$prefix}columns-gutter-x: 0rem;
+  --#{variables.$prefix}columns-gutter-y: 0rem;
   @include mixins.element();
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-top: calc(var(--#{variables.$prefix}gutter-y) * -0.5);
-  margin-bottom: calc(var(--#{variables.$prefix}gutter-y) * -0.5);
-  margin-right: calc(var(--#{variables.$prefix}gutter-x) * -0.5);
-  margin-left: calc(var(--#{variables.$prefix}gutter-x) * -0.5);
-  @for $p from 0 through 20 {
-    $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
-    &.has-gutter-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
-    }
-    &.has-gutter-x-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
+  margin-top: calc(var(--#{variables.$prefix}columns-gutter-y) * -0.5);
+  margin-bottom: calc(var(--#{variables.$prefix}columns-gutter-y) * -0.5);
+  margin-right: calc(var(--#{variables.$prefix}columns-gutter-x) * -0.5);
+  margin-left: calc(var(--#{variables.$prefix}columns-gutter-x) * -0.5);
+
+  @if (not variables.$is-skelton) {
+    @for $p from 0 through 20 {
+      $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
+      &.has-gutter-#{$escapedQuarter}rem {
+        --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
+        --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
+      }
+      &.has-gutter-x-#{$escapedQuarter}rem {
+        --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
+      }
+      &.has-gutter-y-#{$escapedQuarter}rem {
+        --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
+        --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
+      }
     }
-    &.has-gutter-y-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
+
+    &.is-direction-row {
+      flex-direction: row;
     }
-    @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
+    &.is-direction-row-reverse {
+      flex-direction: row-reverse;
     }
-    @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
+    &.is-direction-column {
+      flex-direction: column;
     }
-    @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
+    &.is-direction-column-reverse {
+      flex-direction: column-reverse;
     }
-  }
-
-  &.is-direction-row {
-    flex-direction: row;
-  }
-  &.is-direction-row-reverse {
-    flex-direction: row-reverse;
-  }
-  &.is-direction-column {
-    flex-direction: column;
-  }
-  &.is-direction-column-reverse {
-    flex-direction: column-reverse;
-  }
 
-  @include mixins.is-responsive("is", "-direction-row") {
-    flex-direction: row;
-  }
-  @include mixins.is-responsive("is", "-direction-row-reverse") {
-    flex-direction: row-reverse;
-  }
-  @include mixins.is-responsive("is", "-direction-column") {
-    flex-direction: column;
-  }
-  @include mixins.is-responsive("is", "-direction-column-reverse") {
-    flex-direction: column-reverse;
+    @include mixins.is-responsive("is", "-direction-row") {
+      flex-direction: row;
+    }
+    @include mixins.is-responsive("is", "-direction-row-reverse") {
+      flex-direction: row-reverse;
+    }
+    @include mixins.is-responsive("is", "-direction-column") {
+      flex-direction: column;
+    }
+    @include mixins.is-responsive("is", "-direction-column-reverse") {
+      flex-direction: column-reverse;
+    }
   }
 
-  .column {
+  :where(.column) {
     @include mixins.element();
     @include mixins.column();
     flex-grow: 1;
@@ -76,8 +79,9 @@
       width: 100%;
     }
   }
+
   @for $num from 1 through variables.$columns-count {
-    .column-#{$num} {
+    :where(.column-#{$num}) {
       @include mixins.element();
       @include mixins.column();
       flex-basis: math.percentage(math.div($num, variables.$columns-count));
@@ -85,7 +89,8 @@
       width: math.percentage(math.div($num, variables.$columns-count));
     }
   }
-  .column,
+
+  :where(.column),
   [class^="column-"] {
     @for $num from 1 through variables.$columns-count {
       @include mixins.is-responsive("is", "-" + $num) {