@graupl/graupl 1.0.0-beta.2 → 1.0.0-beta.20

package/src/scss/component/navigation/_index.scss

@@ -1,189 +0,0 @@
-// @graupl/graupl navigation component styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../defaults" as root-defaults;
-@use "../menu/defaults" as menu-defaults;
-@use "../menu/variables" as menu-variables;
-@use "../../mixins/layer" as *;
-@use "../../mixins/screen";
-
-@include layer(component) {
-  // Navigation.
-  #{defaults.$navigation-selector} {
-    display: grid;
-    grid-template-areas:
-      "branding - toggle"
-      "menu menu menu";
-    grid-template-columns: auto 1fr auto;
-    isolation: isolate;
-
-    #{menu-defaults.$menu-selector} {
-      grid-area: menu;
-
-      &#{menu-defaults.$menu-show-selector} {
-        --#{root-defaults.$prefix}menu-display: #{menu-variables.$menu-show-display};
-      }
-
-      &#{menu-defaults.$menu-hide-selector} {
-        --#{root-defaults.$prefix}menu-display: #{menu-variables.$menu-hide-display};
-      }
-    }
-  }
-
-  // Navigation toggle.
-  #{defaults.$navigation-toggle-selector} {
-    display: flex;
-    grid-area: toggle;
-    align-items: center;
-    justify-content: center;
-    min-width: $navigation-toggle-min-width;
-    min-height: $navigation-toggle-min-height;
-    padding: $navigation-toggle-padding;
-    border: $navigation-toggle-border;
-    border-radius: $navigation-toggle-border-radius;
-
-    &::before {
-      content: $navigation-toggle-content;
-      display: block;
-    }
-  }
-
-  // Navigation branding.
-  #{defaults.$navigation-branding-selector} {
-    display: flex;
-    grid-area: branding;
-    align-items: center;
-    justify-content: flex-start;
-    padding: $navigation-branding-padding;
-    font-size: $navigation-branding-font-size;
-    font-weight: $navigation-branding-font-weight;
-    text-decoration: $navigation-branding-text-decoration;
-    text-decoration-style: $navigation-branding-text-decoration-style;
-    text-decoration-thickness: $navigation-branding-text-decoration-thickness;
-
-    &:visited {
-      --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-visited-text-decoration};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-visited-text-decoration-thickness};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-visited-text-decoration-style};
-    }
-
-    &:focus-visible {
-      --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-focus-text-decoration};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-focus-text-decoration-thickness};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-focus-text-decoration-style};
-    }
-
-    &:hover {
-      --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-hover-text-decoration};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-hover-text-decoration-thickness};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-hover-text-decoration-style};
-    }
-
-    &:active {
-      --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-active-text-decoration};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-active-text-decoration-thickness};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-active-text-decoration-style};
-    }
-
-    &:disabled,
-    &[disabled] {
-      &,
-      &:visited,
-      &:focus-visible,
-      &:hover,
-      &:active {
-        --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-disabled-text-decoration};
-        --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-disabled-text-decoration-thickness};
-        --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-disabled-text-decoration-style};
-      }
-    }
-  }
-
-  @include screen.trigger(navigation-collapse) {
-    // Navigation.
-    #{defaults.$navigation-selector} {
-      --#{root-defaults.$prefix}menu-flex-direction: column;
-      --#{root-defaults.$prefix}submenu-position: relative;
-      --#{root-defaults.$prefix}menu-item-min-width: 100%;
-      --#{root-defaults.$prefix}submenu-inset: auto;
-    }
-  }
-
-  @include screen.trigger(navigation-expand) {
-    // Navigation.
-    #{defaults.$navigation-selector} {
-      --#{root-defaults.$prefix}menu-hide-display: #{menu-variables.$menu-show-display};
-
-      grid-template-areas: "branding - menu";
-    }
-
-    // Navigation toggle.
-    #{defaults.$navigation-toggle-selector} {
-      display: none;
-    }
-  }
-}
-
-@include layer(theme) {
-  // Navigation.
-  #{defaults.$navigation-selector} {
-    --#{root-defaults.$prefix}menu-background: #{$navigation-background};
-    --#{root-defaults.$prefix}menu-color: #{$navigation-color};
-    --#{root-defaults.$prefix}submenu-background: #{$navigation-background};
-    --#{root-defaults.$prefix}submenu-color: #{$navigation-color};
-
-    background: $navigation-background;
-    color: $navigation-color;
-  }
-
-  // Navigation toggle.
-  #{defaults.$navigation-toggle-selector} {
-    border-color: $navigation-toggle-border-color;
-    background: $navigation-toggle-background;
-    color: $navigation-toggle-color;
-
-    &:hover {
-      --#{root-defaults.$prefix}navigation-toggle-background: #{$navigation-toggle-hover-background};
-      --#{root-defaults.$prefix}navigation-toggle-color: #{$navigation-toggle-hover-color};
-    }
-  }
-
-  // Navigation branding.
-  #{defaults.$navigation-branding-selector} {
-    color: $navigation-branding-color;
-    text-decoration-color: $navigation-branding-text-decoration-color;
-
-    &:visited {
-      --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-visited-color};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-visited-text-decoration-color};
-    }
-
-    &:focus-visible {
-      --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-focus-color};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-focus-text-decoration-color};
-    }
-
-    &:hover {
-      --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-hover-color};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-hover-text-decoration-color};
-    }
-
-    &:active {
-      --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-active-color};
-      --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-active-text-decoration-color};
-    }
-
-    &:disabled,
-    &[disabled] {
-      &,
-      &:visited,
-      &:focus-visible,
-      &:hover,
-      &:active {
-        --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-disabled-color};
-        --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-disabled-text-decoration-color};
-      }
-    }
-  }
-}

package/src/scss/component/navigation/_variables.scss

@@ -1,237 +0,0 @@
-// @graupl/graupl navigation component variables.
-//
-// These values are to be used to directly style components and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../variables" as root-variables;
-@use "../../theme/color/variables" as color;
-@use "../../theme/typography/variables" as typography;
-@use "sass:map";
-
-// Navigation colors.
-$navigation-background: var(
-  --#{root-defaults.$prefix}navigation-background,
-  #{color.$root-background}
-);
-$navigation-color: var(
-  --#{root-defaults.$prefix}navigation-color,
-  #{color.$root-color}
-);
-
-// Navigation toggle size.
-$navigation-toggle-min-width: var(
-  --#{root-defaults.$prefix}navigation-toggle-min-width,
-  #{root-defaults.$interactive-min-width}
-);
-$navigation-toggle-min-height: var(
-  --#{root-defaults.$prefix}navigation-toggle-min-height,
-  #{root-defaults.$interactive-min-height}
-);
-
-// Navigation toggle spacing.
-$navigation-toggle-padding-x: var(
-  --#{root-defaults.$prefix}navigation-toggle-padding-x,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$navigation-toggle-padding-y: var(
-  --#{root-defaults.$prefix}navigation-toggle-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$navigation-toggle-padding: var(
-  --#{root-defaults.$prefix}navigation-toggle-padding,
-  #{$navigation-toggle-padding-y} #{$navigation-toggle-padding-x}
-);
-
-// Navigation toggle colors.
-$navigation-toggle-background: var(
-  --#{root-defaults.$prefix}navigation-toggle-background,
-  #{$navigation-background}
-);
-$navigation-toggle-color: var(
-  --#{root-defaults.$prefix}navigation-toggle-color,
-  #{$navigation-color}
-);
-$navigation-toggle-hover-background: var(
-  --#{root-defaults.$prefix}navigation-toggle-hover-background,
-  #{$navigation-color}
-);
-$navigation-toggle-hover-color: var(
-  --#{root-defaults.$prefix}navigation-toggle-hover-color,
-  #{$navigation-background}
-);
-
-// Navigation toggle border properties.
-$navigation-toggle-border-width: var(
-  --#{root-defaults.$prefix}navigation-toggle-border-width,
-  #{root-variables.$border-width}
-);
-$navigation-toggle-border-style: var(
-  --#{root-defaults.$prefix}navigation-toggle-border-style,
-  #{root-variables.$border-style}
-);
-$navigation-toggle-border: var(
-  --#{root-defaults.$prefix}navigation-toggle-border,
-  #{$navigation-toggle-border-width} #{$navigation-toggle-border-style}
-);
-$navigation-toggle-border-color: var(
-  --#{root-defaults.$prefix}navigation-toggle-border-color,
-  #{$navigation-toggle-color}
-);
-$navigation-toggle-border-radius: var(
-  --#{root-defaults.$prefix}navigation-toggle-border-radius,
-  #{root-variables.$border-radius}
-);
-
-// Navigation branding properties.
-$navigation-branding-font-size: var(
-  --#{root-defaults.$prefix}navigation-branding-font-size,
-  #{map.get(typography.$font-sizes, "lg")}
-);
-$navigation-branding-font-weight: var(
-  --#{root-defaults.$prefix}navigation-branding-font-weight,
-  #{typography.$font-weight-bold}
-);
-$navigation-branding-padding-x: var(
-  --#{root-defaults.$prefix}navigation-branding-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$navigation-branding-padding-y: var(
-  --#{root-defaults.$prefix}navigation-branding-padding-y,
-  #{map.get(root-variables.$spacers, 2)}
-);
-$navigation-branding-padding: var(
-  --#{root-defaults.$prefix}navigation-branding-padding,
-  #{$navigation-branding-padding-y} #{$navigation-branding-padding-x}
-);
-
-// Navigation branding colors.
-$navigation-branding-color: var(
-  --#{root-defaults.$prefix}navigation-branding-color,
-  #{$navigation-color}
-);
-$navigation-branding-visited-color: var(
-  --#{root-defaults.$prefix}navigation-branding-visited-color,
-  #{$navigation-color}
-);
-$navigation-branding-focus-color: var(
-  --#{root-defaults.$prefix}navigation-branding-focus-color,
-  #{$navigation-color}
-);
-$navigation-branding-hover-color: var(
-  --#{root-defaults.$prefix}navigation-branding-hover-color,
-  #{$navigation-color}
-);
-$navigation-branding-active-color: var(
-  --#{root-defaults.$prefix}navigation-branding-active-color,
-  #{$navigation-color}
-);
-$navigation-branding-disabled-color: var(
-  --#{root-defaults.$prefix}navigation-branding-disabled-color,
-  #{$navigation-color}
-);
-
-// Navigation branding text decoration properties.
-$navigation-branding-text-decoration: var(
-  --#{root-defaults.$prefix}navigation-branding-text-decoration,
-  #{defaults.$navigation-branding-text-decoration}
-);
-$navigation-branding-visited-text-decoration: var(
-  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration,
-  #{defaults.$navigation-branding-visited-text-decoration}
-);
-$navigation-branding-focus-text-decoration: var(
-  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration,
-  #{defaults.$navigation-branding-focus-text-decoration}
-);
-$navigation-branding-hover-text-decoration: var(
-  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration,
-  #{defaults.$navigation-branding-hover-text-decoration}
-);
-$navigation-branding-active-text-decoration: var(
-  --#{root-defaults.$prefix}navigation-branding-active-text-decoration,
-  #{defaults.$navigation-branding-active-text-decoration}
-);
-$navigation-branding-disabled-text-decoration: var(
-  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration,
-  #{defaults.$navigation-branding-disabled-text-decoration}
-);
-$navigation-branding-text-decoration-style: var(
-  --#{root-defaults.$prefix}navigation-branding-text-decoration-style,
-  #{defaults.$navigation-branding-text-decoration-style}
-);
-$navigation-branding-visited-text-decoration-style: var(
-  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-style,
-  #{defaults.$navigation-branding-visited-text-decoration-style}
-);
-$navigation-branding-focus-text-decoration-style: var(
-  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-style,
-  #{defaults.$navigation-branding-focus-text-decoration-style}
-);
-$navigation-branding-hover-text-decoration-style: var(
-  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-style,
-  #{defaults.$navigation-branding-hover-text-decoration-style}
-);
-$navigation-branding-active-text-decoration-style: var(
-  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-style,
-  #{defaults.$navigation-branding-active-text-decoration-style}
-);
-$navigation-branding-disabled-text-decoration-style: var(
-  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-style,
-  #{defaults.$navigation-branding-disabled-text-decoration-style}
-);
-$navigation-branding-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$navigation-branding-visited-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$navigation-branding-focus-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$navigation-branding-hover-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$navigation-branding-active-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$navigation-branding-disabled-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$navigation-branding-text-decoration-color: var(
-  --#{root-defaults.$prefix}navigation-branding-text-decoration-color,
-  #{$navigation-branding-color}
-);
-$navigation-branding-visited-text-decoration-color: var(
-  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-color,
-  #{$navigation-branding-visited-color}
-);
-$navigation-branding-focus-text-decoration-color: var(
-  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-color,
-  #{$navigation-branding-focus-color}
-);
-$navigation-branding-hover-text-decoration-color: var(
-  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-color,
-  #{$navigation-branding-hover-color}
-);
-$navigation-branding-active-text-decoration-color: var(
-  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-color,
-  #{$navigation-branding-active-color}
-);
-$navigation-branding-disabled-text-decoration-color: var(
-  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-color,
-  #{$navigation-branding-disabled-color}
-);
-
-// Navigation toggle properties.
-$navigation-toggle-content: var(
-  --#{root-defaults.$prefix}navigation-toggle-content,
-  #{defaults.$navigation-toggle-content}
-);

package/src/scss/functions/_important.scss

@@ -1,13 +0,0 @@
-// @graupl/graupl important functions.
-//
-// A function to determine if the !important flag should be added to a property.
-
-@use "../defaults";
-
-@function insert($value) {
-  @if defaults.$use-important {
-    @return #{$value !important};
-  }
-
-  @return #{$value};
-}

package/src/scss/functions/_screen.scss

@@ -1,38 +0,0 @@
-// @graupl/graupl screen functions.
-//
-// A series of functions to determine ranges of screen sizes.
-
-@use "../defaults" as root-defaults;
-@use "sass:map";
-@use "sass:list";
-
-@function min($size) {
-  @if not map.has-key(root-defaults.$screen-sizes, $size) {
-    @error "The screen size \"#{$size}\" does not exist.";
-  }
-
-  $screen-size: map.get(root-defaults.$screen-sizes, $size);
-
-  @return $screen-size;
-}
-
-@function max($size) {
-  @if not map.has-key(root-defaults.$screen-sizes, $size) {
-    @error "The screen size \"#{$size}\" does not exist.";
-  }
-
-  $keys: map.keys(root-defaults.$screen-sizes);
-  $index: list.index($keys, "#{$size}");
-  $key: list.nth($keys, $index + 1);
-  $screen-size: map.get(root-defaults.$screen-sizes, $key);
-  $screen-size: $screen-size - 1;
-
-  @return $screen-size;
-}
-
-@function range($min, $max) {
-  $min-size: min($min);
-  $max-size: max($max);
-
-  @return (min: $min-size, max: $max-size);
-}

package/src/scss/functions/_theme.scss

@@ -1,39 +0,0 @@
-// @graupl/graupl theme functions.
-//
-// Functions to help with getting information about the theme.
-
-@use "sass:map";
-@use "../theme/color/variables" as color;
-
-// A function to get the specific theme shades.
-@function get($color, $shade, $theme: active) {
-  @if $shade == transparent or $color == transparent {
-    @return transparent;
-  }
-
-  @if $shade == none or $color == none {
-    @return none;
-  }
-
-  @if $shade == inherit or $color == inherit {
-    @return inherit;
-  }
-
-  @if $shade == initial or $color == initial {
-    @return initial;
-  }
-
-  @if map.has-key(color.$themes, $theme, $color, $shade) {
-    @return map.get(map.get(map.get(color.$themes, $theme), $color), $shade);
-  }
-
-  @return null;
-}
-
-@function variants($theme: active) {
-  @if map.has-key(color.$themes, $theme) {
-    @return map.keys(map.get(color.$themes, $theme));
-  }
-
-  @return null;
-}

package/src/scss/functions/_utility.scss

@@ -1,28 +0,0 @@
-// @graupl/graupl utility functions.
-//
-// Functions to help generate utility classes.
-
-@use "sass:map";
-
-/// Convert a property and value to a map.
-///
-/// This mixin is used internally.
-///
-/// @param {string|List} $property
-///   The property/properties to convert to keys.
-/// @param {string}      $value
-///   The value to use for keys.
-@function convert-property-values-to-map($property, $value) {
-  $map: ();
-
-  @each $prop in $property {
-    $map: map.merge(
-      $map,
-      (
-        $prop: $value,
-      )
-    );
-  }
-
-  @return $map;
-}

package/src/scss/layout/_index.scss

@@ -1,5 +0,0 @@
-// @graupl/graupl layout styles.
-
-@forward "container";
-@forward "columns";
-@forward "flex-columns";

package/src/scss/layout/columns/_defaults.scss

@@ -1,19 +0,0 @@
-// @graupl/graupl columns layout default values.
-//
-// Generally, these should not be used directly when styling components unless a static value is needed.
-// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
-//
-// They should not be used to define direct property values (i.e. font-size, color, etc.).
-// Those should be defined as custom properties in the `_variables.scss` file.
-
-// Columns selectors.
-$columns-selector: ".columns" !default;
-$columns-count-selector-prefix: ".count-" !default;
-$columns-span-selector-prefix: ".span-" !default;
-
-// Columns properties.
-$columns-max-width: 1fr !default;
-$columns-count: 3 !default;
-$columns-min-count: 1 !default;
-$columns-max-count: 6 !default;
-$columns-span: 1 !default;

package/src/scss/layout/columns/_index.scss

@@ -1,58 +0,0 @@
-// @graupl/graupl columns layout styles.
-
-@use "variables" as *;
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/screen";
-
-@include layer(layout) {
-  #{defaults.$columns-selector} {
-    display: grid;
-    grid-template-columns: $columns-grid-template-columns;
-    gap: $columns-row-gap $columns-column-gap;
-
-    > * {
-      grid-column: span $columns-span;
-    }
-  }
-
-  @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    #{defaults.$columns-count-selector-prefix}#{$i} {
-      --#{root-defaults.$prefix}columns-count: #{$i};
-
-      // For span values bigger than the actual column count, set them to the
-      // maximum column count so they don't break the layout.
-      @for $j from $i + 1 through defaults.$columns-max-count {
-        #{defaults.$columns-span-selector-prefix}#{$j} {
-          --#{root-defaults.$prefix}columns-span: #{$i};
-        }
-      }
-    }
-
-    #{defaults.$columns-span-selector-prefix}#{$i} {
-      --#{root-defaults.$prefix}columns-span: #{$i};
-    }
-  }
-
-  // Disable columns on small screens to avoid horizontal bleeding.
-  @include screen.trigger(force-single-column) {
-    #{defaults.$columns-selector} {
-      --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};
-
-      > * {
-        --#{root-defaults.$prefix}columns-span: 1;
-      }
-
-      // All spans should be set to 1 to avoid adding columns.
-      @for $i
-        from defaults.$columns-min-count
-        through defaults.$columns-max-count
-      {
-        #{defaults.$columns-span-selector-prefix}#{$i} {
-          --#{root-defaults.$prefix}columns-span: 1;
-        }
-      }
-    }
-  }
-}

package/src/scss/layout/columns/_variables.scss

@@ -1,51 +0,0 @@
-// @graupl/graupl columns layout variables.
-//
-// These values are to be used to directly style components and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../variables" as root-variables;
-@use "../../defaults" as root-defaults;
-@use "sass:map";
-
-$columns-row-gap: var(
-  --#{root-defaults.$prefix}columns-row-gap,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$columns-column-gap: var(
-  --#{root-defaults.$prefix}columns-column-gap,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$columns-count: var(
-  --#{root-defaults.$prefix}columns-count,
-  #{defaults.$columns-count}
-);
-
-// Calculate the min-width of each column based on the content-max-width and column-gap.
-// We take the maximum width of the page and subtract the gap width multiplied by the number of
-// columns minus one (to account for the gaps between columns).
-// We then divide this by the number of columns to get the min-width of each column.
-/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-$columns-min-width: var(
-  --#{root-defaults.$prefix}columns-min-width,
-  calc(
-    (
-        #{root-variables.$content-max-width} - #{$columns-column-gap} *
-          (#{$columns-count} - 1)
-      ) /
-      #{$columns-count}
-  )
-);
-/* stylelint-enable  scss/operator-no-newline-after */
-$columns-max-width: var(
-  --#{root-defaults.$prefix}columns-max-width,
-  #{defaults.$columns-max-width}
-);
-$columns-grid-template-columns: var(
-  --#{root-defaults.$prefix}columns-grid-template-columns,
-  repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
-);
-$columns-span: var(
-  --#{root-defaults.$prefix}columns-span,
-  #{defaults.$columns-span}
-);