Init v1

sass/helpers/_all.sass

@@ -1,12 +0,0 @@
-/* Bulma Helpers */
-@charset "utf-8"
-
-@import "color"
-@import "flexbox"
-@import "float"
-@import "other"
-@import "overflow"
-@import "position"
-@import "spacing"
-@import "typography"
-@import "visibility"

sass/helpers/_index.scss

@@ -0,0 +1,15 @@
+/* Bulma Helpers */
+@charset "utf-8";
+
+@forward "aspect-ratio";
+@forward "border";
+@forward "color";
+@forward "flexbox";
+@forward "float";
+@forward "gap";
+@forward "overflow";
+@forward "position";
+@forward "spacing";
+@forward "typography";
+@forward "visibility";
+@forward "other";

sass/helpers/aspect-ratio.scss

@@ -0,0 +1,10 @@
+@use "../utilities/initial-variables" as iv;
+
+@each $pair in iv.$aspect-ratios {
+  $w: nth($pair, 1);
+  $h: nth($pair, 2);
+
+  .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
+    aspect-ratio: #{$w} / #{$h};
+  }
+}

sass/helpers/border.scss

@@ -0,0 +1,15 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+$radii: (
+  "small": "radius-small",
+  "normal": "radius",
+  "large": "radius-large",
+  "rounded": "radius-rounded",
+);
+
+@each $name, $var in $radii {
+  .#{iv.$helpers-has-prefix}radius-#{$name} {
+    border-radius: cv.getVar($var);
+  }
+}

sass/helpers/color.sass

@@ -1,39 +0,0 @@
-@import "../utilities/derived-variables"
-
-@each $name, $pair in $colors
-  $color: nth($pair, 1)
-  .has-text-#{$name}
-    color: $color !important
-  a.has-text-#{$name}
-    &:hover,
-    &:focus
-      color: bulmaDarken($color, 10%) !important
-  .has-background-#{$name}
-    background-color: $color !important
-  @if length($pair) >= 4
-    $color-light: nth($pair, 3)
-    $color-dark: nth($pair, 4)
-    // Light
-    .has-text-#{$name}-light
-      color: $color-light !important
-    a.has-text-#{$name}-light
-      &:hover,
-      &:focus
-        color: bulmaDarken($color-light, 10%) !important
-    .has-background-#{$name}-light
-      background-color: $color-light !important
-    // Dark
-    .has-text-#{$name}-dark
-      color: $color-dark !important
-    a.has-text-#{$name}-dark
-      &:hover,
-      &:focus
-        color: bulmaLighten($color-dark, 10%) !important
-    .has-background-#{$name}-dark
-      background-color: $color-dark !important
-
-@each $name, $shade in $shades
-  .has-text-#{$name}
-    color: $shade !important
-  .has-background-#{$name}
-    background-color: $shade !important

sass/helpers/color.scss

@@ -0,0 +1,364 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+
+$digits: (
+  "00",
+  "05",
+  "10",
+  "15",
+  "20",
+  "25",
+  "30",
+  "35",
+  "40",
+  "45",
+  "50",
+  "55",
+  "60",
+  "65",
+  "70",
+  "75",
+  "80",
+  "85",
+  "90",
+  "95",
+  "100"
+);
+
+.#{iv.$helpers-has-prefix}background {
+  background-color: cv.getVar("background");
+}
+
+@each $name, $color in dv.$colors {
+  $background: hsl(
+    #{cv.getVar($name, "", "-h")},
+    #{cv.getVar($name, "", "-s")},
+    calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")})
+  );
+
+  $color: hsl(
+    #{cv.getVar($name, "", "-h")},
+    #{cv.getVar($name, "", "-s")},
+    calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")})
+  );
+
+  [class*="#{iv.$helpers-prefix}color-#{$name}"],
+  [class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-l")},
+        "color-l-delta": 0%,
+      )
+    );
+    color: $color !important;
+  }
+
+  [class*="#{iv.$helpers-prefix}background-#{$name}"],
+  [class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-l")},
+        "background-l-delta": 0%,
+      )
+    );
+    background-color: $background !important;
+  }
+
+  // Invert
+  .#{iv.$helpers-prefix}color-#{$name}-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-invert-l")},
+      )
+    );
+  }
+
+  // On Scheme
+  .#{iv.$helpers-prefix}color-#{$name}-on-scheme,
+  .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-on-scheme-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-on-scheme,
+  .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-on-scheme-l")},
+      )
+    );
+  }
+
+  // Light
+  .#{iv.$helpers-prefix}color-#{$name}-light,
+  .#{iv.$helpers-has-prefix}text-#{$name}-light {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-light-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-light,
+  .#{iv.$helpers-has-prefix}background-#{$name}-light {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-light-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-light-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-light-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-light-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-light-invert-l")},
+      )
+    );
+  }
+
+  // Dark
+  .#{iv.$helpers-prefix}color-#{$name}-dark,
+  .#{iv.$helpers-has-prefix}text-#{$name}-dark {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-dark-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-dark,
+  .#{iv.$helpers-has-prefix}background-#{$name}-dark {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-dark-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-dark-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-dark-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-dark-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-dark-invert-l")},
+      )
+    );
+  }
+
+  // Soft/Bold
+  .#{iv.$helpers-prefix}color-#{$name}-soft,
+  .#{iv.$helpers-has-prefix}text-#{$name}-soft {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar("soft-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-soft,
+  .#{iv.$helpers-has-prefix}background-#{$name}-soft {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar("soft-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-bold,
+  .#{iv.$helpers-has-prefix}text-#{$name}-bold {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar("bold-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-bold,
+  .#{iv.$helpers-has-prefix}background-#{$name}-bold {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar("bold-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-soft-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar("soft-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-soft-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar("soft-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-bold-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar("bold-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-bold-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar("bold-invert-l")},
+      )
+    );
+  }
+
+  @each $digit in $digits {
+    .#{iv.$helpers-prefix}color-#{$name}-#{$digit},
+    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
+      @include cv.register-vars(
+        (
+          "color-l": #{cv.getVar($name, "", "-#{$digit}-l")},
+        )
+      );
+    }
+
+    .#{iv.$helpers-prefix}background-#{$name}-#{$digit},
+    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
+      @include cv.register-vars(
+        (
+          "background-l": #{cv.getVar($name, "", "-#{$digit}-l")},
+        )
+      );
+    }
+
+    .#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
+    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
+      @include cv.register-vars(
+        (
+          "color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
+        )
+      );
+    }
+
+    .#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
+    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
+      @include cv.register-vars(
+        (
+          "background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
+        )
+      );
+    }
+  }
+
+  // Hover
+  a.#{iv.$helpers-prefix}color-#{$name},
+  button.#{iv.$helpers-prefix}color-#{$name},
+  #{iv.$helpers-prefix}color-#{$name}.is-hoverable,
+  a.#{iv.$helpers-has-prefix}text-#{$name},
+  button.#{iv.$helpers-has-prefix}text-#{$name},
+  #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
+    &:hover,
+    &:focus-visible {
+      @include cv.register-vars(
+        (
+          "color-l-delta": #{cv.getVar("hover-color-l-delta")},
+        )
+      );
+    }
+
+    &:active {
+      @include cv.register-vars(
+        (
+          "color-l-delta": #{cv.getVar("active-color-l-delta")},
+        )
+      );
+    }
+  }
+
+  a.#{iv.$helpers-prefix}background-#{$name},
+  button.#{iv.$helpers-prefix}background-#{$name},
+  #{iv.$helpers-prefix}background-#{$name}.is-hoverable,
+  a.#{iv.$helpers-has-prefix}background-#{$name},
+  button.#{iv.$helpers-has-prefix}background-#{$name},
+  #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
+    &:hover,
+    &:focus-visible {
+      @include cv.register-vars(
+        (
+          "background-l-delta": #{cv.getVar("hover-background-l-delta")},
+        )
+      );
+    }
+
+    &:active {
+      @include cv.register-vars(
+        (
+          "background-l-delta": #{cv.getVar("active-background-l-delta")},
+        )
+      );
+    }
+  }
+
+  // Palettes
+  .#{iv.$helpers-prefix}palette-#{$name} {
+    --h: #{cv.getVar($name, "", "-h")};
+    --s: #{cv.getVar($name, "", "-s")};
+    --l: #{cv.getVar($name, "", "-l")};
+    --color: hsl(var(--h), var(--s), var(--l));
+
+    @each $digit in $digits {
+      --#{$digit}-l: #{cv.getVar($name, "", "-#{$digit}-l")};
+      --color-#{$digit}: hsl(var(--h), var(--s), var(--#{$digit}-l));
+    }
+  }
+}
+
+@each $name, $shade in dv.$shades {
+  .#{iv.$helpers-prefix}color-#{$name},
+  .#{iv.$helpers-has-prefix}text-#{$name} {
+    color: $shade !important;
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name},
+  .#{iv.$helpers-has-prefix}background-#{$name} {
+    background-color: $shade !important;
+  }
+}

sass/helpers/flexbox.sass

@@ -1,35 +0,0 @@
-$flex-direction-values: row, row-reverse, column, column-reverse
-@each $value in $flex-direction-values
-  .is-flex-direction-#{$value}
-    flex-direction: $value !important
-
-$flex-wrap-values: nowrap, wrap, wrap-reverse
-@each $value in $flex-wrap-values
-  .is-flex-wrap-#{$value}
-    flex-wrap: $value !important
-
-$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
-@each $value in $justify-content-values
-  .is-justify-content-#{$value}
-    justify-content: $value !important
-
-$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
-@each $value in $align-content-values
-  .is-align-content-#{$value}
-    align-content: $value !important
-
-$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
-@each $value in $align-items-values
-  .is-align-items-#{$value}
-    align-items: $value !important
-
-$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
-@each $value in $align-self-values
-  .is-align-self-#{$value}
-    align-self: $value !important
-
-$flex-operators: grow, shrink
-@each $operator in $flex-operators
-  @for $i from 0 through 5
-    .is-flex-#{$operator}-#{$i}
-      flex-#{$operator}: $i !important

sass/helpers/flexbox.scss

@@ -0,0 +1,62 @@
+@use "../utilities/initial-variables" as iv;
+
+$flex-direction-values: row, row-reverse, column, column-reverse;
+
+@each $value in $flex-direction-values {
+  .#{iv.$helpers-prefix}flex-direction-#{$value} {
+    flex-direction: $value !important;
+  }
+}
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse;
+
+@each $value in $flex-wrap-values {
+  .#{iv.$helpers-prefix}flex-wrap-#{$value} {
+    flex-wrap: $value !important;
+  }
+}
+
+$justify-content-values: flex-start, flex-end, center, space-between,
+  space-around, space-evenly, start, end, left, right;
+
+@each $value in $justify-content-values {
+  .#{iv.$helpers-prefix}justify-content-#{$value} {
+    justify-content: $value !important;
+  }
+}
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around,
+  space-evenly, stretch, start, end, baseline;
+
+@each $value in $align-content-values {
+  .#{iv.$helpers-prefix}align-content-#{$value} {
+    align-content: $value !important;
+  }
+}
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end,
+  self-start, self-end;
+
+@each $value in $align-items-values {
+  .#{iv.$helpers-prefix}align-items-#{$value} {
+    align-items: $value !important;
+  }
+}
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
+
+@each $value in $align-self-values {
+  .#{iv.$helpers-prefix}align-self-#{$value} {
+    align-self: $value !important;
+  }
+}
+
+$flex-operators: grow, shrink;
+
+@each $operator in $flex-operators {
+  @for $i from 0 through 5 {
+    .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
+      flex-#{$operator}: $i !important;
+    }
+  }
+}

sass/helpers/float.sass

@@ -1,10 +0,0 @@
-@import "../utilities/mixins"
-
-.is-clearfix
-  +clearfix
-
-.is-pulled-left
-  float: left !important
-
-.is-pulled-right
-  float: right !important

sass/helpers/float.scss

@@ -0,0 +1,28 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$helpers-prefix}clearfix {
+  @include mx.clearfix;
+}
+
+.#{iv.$helpers-prefix}float-left,
+.#{iv.$helpers-prefix}pulled-left {
+  float: left !important;
+}
+
+.#{iv.$helpers-prefix}float-right,
+.#{iv.$helpers-prefix}pulled-right {
+  float: right !important;
+}
+
+.#{iv.$helpers-prefix}float-none {
+  float: none !important;
+}
+
+$clears: both left none right;
+
+@each $clear in $clears {
+  .#{iv.$helpers-prefix}clear-#{$clear} {
+    clear: $clear !important;
+  }
+}

sass/helpers/gap.scss

@@ -0,0 +1,24 @@
+@use "sass:math";
+@use "sass:string";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}gapless {
+  gap: 0 !important;
+}
+
+$gaps: "gap", "column-gap", "row-gap";
+$gap-base: 0.5rem;
+
+@each $gap in $gaps {
+  @for $i from 0 through 8 {
+    .#{iv.$helpers-prefix}#{$gap}-#{$i} {
+      #{$gap}: ($gap-base * $i) !important;
+    }
+
+    @if $i < 8 {
+      .#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
+        #{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important;
+      }
+    }
+  }
+}

sass/helpers/other.sass

@@ -1,14 +0,0 @@
-@import "../utilities/mixins"
-
-.is-radiusless
-  border-radius: 0 !important
-
-.is-shadowless
-  box-shadow: none !important
-
-.is-clickable
-  cursor: pointer !important
-  pointer-events: all !important
-
-.is-unselectable
-  @extend %unselectable

sass/helpers/other.scss

@@ -0,0 +1,19 @@
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}radiusless {
+  border-radius: 0 !important;
+}
+
+.#{iv.$helpers-prefix}shadowless {
+  box-shadow: none !important;
+}
+
+.#{iv.$helpers-prefix}clickable {
+  cursor: pointer !important;
+  pointer-events: all !important;
+}
+
+.#{iv.$helpers-prefix}unselectable {
+  @extend %unselectable;
+}

sass/helpers/overflow.sass

@@ -1,2 +0,0 @@
-.is-clipped
-  overflow: hidden !important

sass/helpers/overflow.scss

@@ -0,0 +1,21 @@
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}clipped {
+  overflow: hidden !important;
+}
+
+$overflows: auto clip hidden scroll visible;
+
+@each $overflow in $overflows {
+  .#{iv.$helpers-prefix}overflow-#{$overflow} {
+    overflow: $overflow !important;
+  }
+
+  .#{iv.$helpers-prefix}overflow-x-#{$overflow} {
+    overflow-x: $overflow !important;
+  }
+
+  .#{iv.$helpers-prefix}overflow-y-#{$overflow} {
+    overflow-y: $overflow !important;
+  }
+}

sass/helpers/position.sass

@@ -1,7 +0,0 @@
-@import "../utilities/mixins"
-
-.is-overlay
-  @extend %overlay
-
-.is-relative
-  position: relative !important

sass/helpers/position.scss

@@ -0,0 +1,19 @@
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}overlay,
+.#{iv.$helpers-prefix}overlay {
+  @extend %overlay;
+}
+
+.#{iv.$helpers-prefix}relative {
+  position: relative !important;
+}
+
+$positions: absolute fixed relative static sticky;
+
+@each $position in $positions {
+  .#{iv.$helpers-prefix}position-#{$position} {
+    position: $position !important;
+  }
+}

sass/helpers/spacing.sass

@@ -1,31 +0,0 @@
-.is-marginless
-  margin: 0 !important
-
-.is-paddingless
-  padding: 0 !important
-
-$spacing-shortcuts: ("margin": "m", "padding": "p") !default
-$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
-$spacing-horizontal: "x" !default
-$spacing-vertical: "y" !default
-$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
-
-@each $property, $shortcut in $spacing-shortcuts
-  @each $name, $value in $spacing-values
-    // All directions
-    .#{$shortcut}-#{$name}
-      #{$property}: $value !important
-    // Cardinal directions
-    @each $direction, $suffix in $spacing-directions
-      .#{$shortcut}#{$suffix}-#{$name}
-        #{$property}-#{$direction}: $value !important
-    // Horizontal axis
-    @if $spacing-horizontal != null
-      .#{$shortcut}#{$spacing-horizontal}-#{$name}
-        #{$property}-left: $value !important
-        #{$property}-right: $value !important
-    // Vertical axis
-    @if $spacing-vertical != null
-      .#{$shortcut}#{$spacing-vertical}-#{$name}
-        #{$property}-top: $value !important
-        #{$property}-bottom: $value !important

sass/helpers/spacing.scss

@@ -0,0 +1,64 @@
+@use "../utilities/initial-variables" as iv;
+
+.marginless {
+  margin: 0 !important;
+}
+
+.paddingless {
+  padding: 0 !important;
+}
+
+$spacing-shortcuts: (
+  "margin": "m",
+  "padding": "p",
+) !default;
+$spacing-directions: (
+  "top": "t",
+  "right": "r",
+  "bottom": "b",
+  "left": "l",
+) !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: (
+  "0": 0,
+  "1": 0.25rem,
+  "2": 0.5rem,
+  "3": 0.75rem,
+  "4": 1rem,
+  "5": 1.5rem,
+  "6": 3rem,
+  "auto": auto,
+) !default;
+
+@each $property, $shortcut in $spacing-shortcuts {
+  @each $name, $value in $spacing-values {
+    // All directions
+    .#{$shortcut}-#{$name} {
+      #{$property}: $value !important;
+    }
+
+    // Cardinal directions
+    @each $direction, $suffix in $spacing-directions {
+      .#{$shortcut}#{$suffix}-#{$name} {
+        #{$property}-#{$direction}: $value !important;
+      }
+    }
+
+    // Horizontal axis
+    @if $spacing-horizontal != null {
+      .#{$shortcut}#{$spacing-horizontal}-#{$name} {
+        #{$property}-left: $value !important;
+        #{$property}-right: $value !important;
+      }
+    }
+
+    // Vertical axis
+    @if $spacing-vertical != null {
+      .#{$shortcut}#{$spacing-vertical}-#{$name} {
+        #{$property}-top: $value !important;
+        #{$property}-bottom: $value !important;
+      }
+    }
+  }
+}

sass/helpers/typography.sass

@@ -1,103 +0,0 @@
-@import "../utilities/mixins"
-
-=typography-size($target:'')
-  @each $size in $sizes
-    $i: index($sizes, $size)
-    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
-      font-size: $size !important
-
-+typography-size()
-
-+mobile
-  +typography-size('mobile')
-
-+tablet
-  +typography-size('tablet')
-
-+touch
-  +typography-size('touch')
-
-+desktop
-  +typography-size('desktop')
-
-+widescreen
-  +typography-size('widescreen')
-
-+fullhd
-  +typography-size('fullhd')
-
-$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
-
-@each $alignment, $text-align in $alignments
-  .has-text-#{$alignment}
-    text-align: #{$text-align} !important
-
-@each $alignment, $text-align in $alignments
-  +mobile
-    .has-text-#{$alignment}-mobile
-      text-align: #{$text-align} !important
-  +tablet
-    .has-text-#{$alignment}-tablet
-      text-align: #{$text-align} !important
-  +tablet-only
-    .has-text-#{$alignment}-tablet-only
-      text-align: #{$text-align} !important
-  +touch
-    .has-text-#{$alignment}-touch
-      text-align: #{$text-align} !important
-  +desktop
-    .has-text-#{$alignment}-desktop
-      text-align: #{$text-align} !important
-  +desktop-only
-    .has-text-#{$alignment}-desktop-only
-      text-align: #{$text-align} !important
-  +widescreen
-    .has-text-#{$alignment}-widescreen
-      text-align: #{$text-align} !important
-  +widescreen-only
-    .has-text-#{$alignment}-widescreen-only
-      text-align: #{$text-align} !important
-  +fullhd
-    .has-text-#{$alignment}-fullhd
-      text-align: #{$text-align} !important
-
-.is-capitalized
-  text-transform: capitalize !important
-
-.is-lowercase
-  text-transform: lowercase !important
-
-.is-uppercase
-  text-transform: uppercase !important
-
-.is-italic
-  font-style: italic !important
-  
-.is-underlined
-  text-decoration: underline !important
-
-.has-text-weight-light
-  font-weight: $weight-light !important
-.has-text-weight-normal
-  font-weight: $weight-normal !important
-.has-text-weight-medium
-  font-weight: $weight-medium !important
-.has-text-weight-semibold
-  font-weight: $weight-semibold !important
-.has-text-weight-bold
-  font-weight: $weight-bold !important
-
-.is-family-primary
-  font-family: $family-primary !important
-
-.is-family-secondary
-  font-family: $family-secondary !important
-
-.is-family-sans-serif
-  font-family: $family-sans-serif !important
-
-.is-family-monospace
-  font-family: $family-monospace !important
-
-.is-family-code
-  font-family: $family-code !important

sass/helpers/typography.scss

@@ -0,0 +1,168 @@
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+@mixin typography-size($target: "") {
+  @each $size in dv.$sizes {
+    $i: index(dv.$sizes, $size);
+
+    .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
+      font-size: $size !important;
+    }
+  }
+}
+
+@include typography-size;
+
+@include mx.mobile {
+  @include typography-size("mobile");
+}
+
+@include mx.tablet {
+  @include typography-size("tablet");
+}
+
+@include mx.touch {
+  @include typography-size("touch");
+}
+
+@include mx.desktop {
+  @include typography-size("desktop");
+}
+
+@include mx.widescreen {
+  @include typography-size("widescreen");
+}
+
+@include mx.fullhd {
+  @include typography-size("fullhd");
+}
+
+$alignments: (
+  "centered": "center",
+  "justified": "justify",
+  "left": "left",
+  "right": "right",
+);
+
+@each $alignment, $text-align in $alignments {
+  .#{iv.$helpers-has-prefix}text-#{$alignment} {
+    text-align: #{$text-align} !important;
+  }
+}
+
+@each $alignment, $text-align in $alignments {
+  @include mx.mobile {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.tablet {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.tablet-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.touch {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.desktop {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.desktop-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.widescreen {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.widescreen-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.fullhd {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
+      text-align: #{$text-align} !important;
+    }
+  }
+}
+
+.#{iv.$helpers-prefix}capitalized {
+  text-transform: capitalize !important;
+}
+
+.#{iv.$helpers-prefix}lowercase {
+  text-transform: lowercase !important;
+}
+
+.#{iv.$helpers-prefix}uppercase {
+  text-transform: uppercase !important;
+}
+
+.#{iv.$helpers-prefix}italic {
+  font-style: italic !important;
+}
+
+.#{iv.$helpers-prefix}underlined {
+  text-decoration: underline !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-light {
+  font-weight: iv.$weight-light !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-normal {
+  font-weight: iv.$weight-normal !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-medium {
+  font-weight: iv.$weight-medium !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-semibold {
+  font-weight: iv.$weight-semibold !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-bold {
+  font-weight: iv.$weight-bold !important;
+}
+
+.#{iv.$helpers-prefix}family-primary {
+  font-family: dv.$family-primary !important;
+}
+
+.#{iv.$helpers-prefix}family-secondary {
+  font-family: dv.$family-secondary !important;
+}
+
+.#{iv.$helpers-prefix}family-sans-serif {
+  font-family: iv.$family-sans-serif !important;
+}
+
+.#{iv.$helpers-prefix}family-monospace {
+  font-family: iv.$family-monospace !important;
+}
+
+.#{iv.$helpers-prefix}family-code {
+  font-family: dv.$family-code !important;
+}

sass/helpers/visibility.sass

@@ -1,122 +0,0 @@
-@import "../utilities/mixins"
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display} !important
-  +mobile
-    .is-#{$display}-mobile
-      display: #{$display} !important
-  +tablet
-    .is-#{$display}-tablet
-      display: #{$display} !important
-  +tablet-only
-    .is-#{$display}-tablet-only
-      display: #{$display} !important
-  +touch
-    .is-#{$display}-touch
-      display: #{$display} !important
-  +desktop
-    .is-#{$display}-desktop
-      display: #{$display} !important
-  +desktop-only
-    .is-#{$display}-desktop-only
-      display: #{$display} !important
-  +widescreen
-    .is-#{$display}-widescreen
-      display: #{$display} !important
-  +widescreen-only
-    .is-#{$display}-widescreen-only
-      display: #{$display} !important
-  +fullhd
-    .is-#{$display}-fullhd
-      display: #{$display} !important
-
-.is-hidden
-  display: none !important
-
-.is-sr-only
-  border: none !important
-  clip: rect(0, 0, 0, 0) !important
-  height: 0.01em !important
-  overflow: hidden !important
-  padding: 0 !important
-  position: absolute !important
-  white-space: nowrap !important
-  width: 0.01em !important
-
-+mobile
-  .is-hidden-mobile
-    display: none !important
-
-+tablet
-  .is-hidden-tablet
-    display: none !important
-
-+tablet-only
-  .is-hidden-tablet-only
-    display: none !important
-
-+touch
-  .is-hidden-touch
-    display: none !important
-
-+desktop
-  .is-hidden-desktop
-    display: none !important
-
-+desktop-only
-  .is-hidden-desktop-only
-    display: none !important
-
-+widescreen
-  .is-hidden-widescreen
-    display: none !important
-
-+widescreen-only
-  .is-hidden-widescreen-only
-    display: none !important
-
-+fullhd
-  .is-hidden-fullhd
-    display: none !important
-
-.is-invisible
-  visibility: hidden !important
-
-+mobile
-  .is-invisible-mobile
-    visibility: hidden !important
-
-+tablet
-  .is-invisible-tablet
-    visibility: hidden !important
-
-+tablet-only
-  .is-invisible-tablet-only
-    visibility: hidden !important
-
-+touch
-  .is-invisible-touch
-    visibility: hidden !important
-
-+desktop
-  .is-invisible-desktop
-    visibility: hidden !important
-
-+desktop-only
-  .is-invisible-desktop-only
-    visibility: hidden !important
-
-+widescreen
-  .is-invisible-widescreen
-    visibility: hidden !important
-
-+widescreen-only
-  .is-invisible-widescreen-only
-    visibility: hidden !important
-
-+fullhd
-  .is-invisible-fullhd
-    visibility: hidden !important

sass/helpers/visibility.scss

@@ -0,0 +1,221 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$helpers-prefix}display-none,
+.#{iv.$helpers-prefix}hidden {
+  display: none !important;
+}
+
+$displays: block flex inline inline-block inline-flex grid;
+
+@each $display in $displays {
+  .#{iv.$helpers-prefix}display-#{$display},
+  .#{iv.$helpers-prefix}#{$display} {
+    display: $display !important;
+  }
+
+  @include mx.mobile {
+    .#{iv.$helpers-prefix}display-#{$display}-mobile,
+    .#{iv.$helpers-prefix}#{$display}-mobile {
+      display: $display !important;
+    }
+  }
+
+  @include mx.tablet {
+    .#{iv.$helpers-prefix}display-#{$display}-tablet,
+    .#{iv.$helpers-prefix}#{$display}-tablet {
+      display: $display !important;
+    }
+  }
+
+  @include mx.tablet-only {
+    .#{iv.$helpers-prefix}display-#{$display}-tablet-only,
+    .#{iv.$helpers-prefix}#{$display}-tablet-only {
+      display: $display !important;
+    }
+  }
+
+  @include mx.touch {
+    .#{iv.$helpers-prefix}display-#{$display}-touch,
+    .#{iv.$helpers-prefix}#{$display}-touch {
+      display: $display !important;
+    }
+  }
+
+  @include mx.desktop {
+    .#{iv.$helpers-prefix}display-#{$display}-desktop,
+    .#{iv.$helpers-prefix}#{$display}-desktop {
+      display: $display !important;
+    }
+  }
+
+  @include mx.desktop-only {
+    .#{iv.$helpers-prefix}display-#{$display}-desktop-only,
+    .#{iv.$helpers-prefix}#{$display}-desktop-only {
+      display: $display !important;
+    }
+  }
+
+  @include mx.widescreen {
+    .#{iv.$helpers-prefix}display-#{$display}-widescreen,
+    .#{iv.$helpers-prefix}#{$display}-widescreen {
+      display: $display !important;
+    }
+  }
+
+  @include mx.widescreen-only {
+    .#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
+    .#{iv.$helpers-prefix}#{$display}-widescreen-only {
+      display: $display !important;
+    }
+  }
+
+  @include mx.fullhd {
+    .#{iv.$helpers-prefix}display-#{$display}-fullhd,
+    .#{iv.$helpers-prefix}#{$display}-fullhd {
+      display: $display !important;
+    }
+  }
+}
+
+.#{iv.$helpers-prefix}sr-only {
+  border: none !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 0.01em !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 0.01em !important;
+}
+
+@include mx.mobile {
+  .#{iv.$helpers-prefix}display-none-mobile,
+  .#{iv.$helpers-prefix}hidden-mobile {
+    display: none !important;
+  }
+}
+
+@include mx.tablet {
+  .#{iv.$helpers-prefix}display-none-tablet,
+  .#{iv.$helpers-prefix}hidden-tablet {
+    display: none !important;
+  }
+}
+
+@include mx.tablet-only {
+  .#{iv.$helpers-prefix}display-none-tablet-only,
+  .#{iv.$helpers-prefix}hidden-tablet-only {
+    display: none !important;
+  }
+}
+
+@include mx.touch {
+  .#{iv.$helpers-prefix}display-none-touch,
+  .#{iv.$helpers-prefix}hidden-touch {
+    display: none !important;
+  }
+}
+
+@include mx.desktop {
+  .#{iv.$helpers-prefix}display-none-desktop,
+  .#{iv.$helpers-prefix}hidden-desktop {
+    display: none !important;
+  }
+}
+
+@include mx.desktop-only {
+  .#{iv.$helpers-prefix}display-none-desktop-only,
+  .#{iv.$helpers-prefix}hidden-desktop-only {
+    display: none !important;
+  }
+}
+
+@include mx.widescreen {
+  .#{iv.$helpers-prefix}display-none-widescreen,
+  .#{iv.$helpers-prefix}hidden-widescreen {
+    display: none !important;
+  }
+}
+
+@include mx.widescreen-only {
+  .#{iv.$helpers-prefix}display-none-widescreen-only,
+  .#{iv.$helpers-prefix}hidden-widescreen-only {
+    display: none !important;
+  }
+}
+
+@include mx.fullhd {
+  .#{iv.$helpers-prefix}display-none-fullhd,
+  .#{iv.$helpers-prefix}hidden-fullhd {
+    display: none !important;
+  }
+}
+
+.#{iv.$helpers-prefix}visibility-hidden,
+.#{iv.$helpers-prefix}invisible {
+  visibility: hidden !important;
+}
+
+@include mx.mobile {
+  .#{iv.$helpers-prefix}visibility-hidden-mobile,
+  .#{iv.$helpers-prefix}invisible-mobile {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.tablet {
+  .#{iv.$helpers-prefix}visibility-hidden-tablet,
+  .#{iv.$helpers-prefix}invisible-tablet {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.tablet-only {
+  .#{iv.$helpers-prefix}visibility-hidden-tablet-only,
+  .#{iv.$helpers-prefix}invisible-tablet-only {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.touch {
+  .#{iv.$helpers-prefix}visibility-hidden-touch,
+  .#{iv.$helpers-prefix}invisible-touch {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.desktop {
+  .#{iv.$helpers-prefix}visibility-hidden-desktop,
+  .#{iv.$helpers-prefix}invisible-desktop {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.desktop-only {
+  .#{iv.$helpers-prefix}visibility-hidden-desktop-only,
+  .#{iv.$helpers-prefix}invisible-desktop-only {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.widescreen {
+  .#{iv.$helpers-prefix}visibility-hidden-widescreen,
+  .#{iv.$helpers-prefix}invisible-widescreen {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.widescreen-only {
+  .#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
+  .#{iv.$helpers-prefix}invisible-widescreen-only {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.fullhd {
+  .#{iv.$helpers-prefix}visibility-hidden-fullhd,
+  .#{iv.$helpers-prefix}invisible-fullhd {
+    visibility: hidden !important;
+  }
+}