@graupl/core 1.0.0-beta.10

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

@@ -0,0 +1,190 @@
+// @graupl/core 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-width: $navigation-toggle-border-width;
+    border-style: $navigation-toggle-border-style;
+    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

@@ -0,0 +1,290 @@
+// @graupl/core 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.$background}
+);
+$navigation-color: var(
+  --#{root-defaults.$prefix}navigation-color,
+  #{color.$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-top-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$navigation-toggle-border-right-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$navigation-toggle-border-bottom-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$navigation-toggle-border-left-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-left-width,
+  #{root-variables.$border-left-width}
+);
+$navigation-toggle-border-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-width,
+  #{$navigation-toggle-border-top-width}
+    #{$navigation-toggle-border-right-width}
+    #{$navigation-toggle-border-bottom-width}
+    #{$navigation-toggle-border-left-width}
+);
+$navigation-toggle-border-top-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$navigation-toggle-border-right-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$navigation-toggle-border-bottom-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$navigation-toggle-border-left-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$navigation-toggle-border-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-style,
+  #{$navigation-toggle-border-top-style}
+    #{$navigation-toggle-border-right-style}
+    #{$navigation-toggle-border-bottom-style}
+    #{$navigation-toggle-border-left-style}
+);
+$navigation-toggle-border-color: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-color,
+  #{$navigation-toggle-color}
+);
+$navigation-toggle-border-top-left-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$navigation-toggle-border-top-right-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$navigation-toggle-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$navigation-toggle-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
+$navigation-toggle-border-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-radius,
+  #{$navigation-toggle-border-top-left-radius}
+    #{$navigation-toggle-border-top-right-radius}
+    #{$navigation-toggle-border-bottom-right-radius}
+    #{$navigation-toggle-border-bottom-left-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-branding-color}
+);
+$navigation-branding-focus-color: var(
+  --#{root-defaults.$prefix}navigation-branding-focus-color,
+  #{$navigation-branding-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-branding-hover-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-initial-text-decoration}
+);
+$navigation-branding-visited-text-decoration: var(
+  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration,
+  #{$navigation-branding-text-decoration}
+);
+$navigation-branding-focus-text-decoration: var(
+  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration,
+  #{$navigation-branding-text-decoration}
+);
+$navigation-branding-hover-text-decoration: var(
+  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration,
+  #{defaults.$navigation-branding-final-text-decoration}
+);
+$navigation-branding-active-text-decoration: var(
+  --#{root-defaults.$prefix}navigation-branding-active-text-decoration,
+  #{$navigation-branding-hover-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-initial-text-decoration-style}
+);
+$navigation-branding-visited-text-decoration-style: var(
+  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-style,
+  #{$navigation-branding-text-decoration-style}
+);
+$navigation-branding-focus-text-decoration-style: var(
+  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-style,
+  #{$navigation-branding-text-decoration-style}
+);
+$navigation-branding-hover-text-decoration-style: var(
+  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-style,
+  #{defaults.$navigation-branding-final-text-decoration-style}
+);
+$navigation-branding-active-text-decoration-style: var(
+  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-style,
+  #{$navigation-branding-hover-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,
+  #{$navigation-branding-text-decoration-thickness}
+);
+$navigation-branding-focus-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-thickness,
+  #{$navigation-branding-text-decoration-thickness}
+);
+$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,
+  #{$navigation-branding-hover-text-decoration-thickness}
+);
+$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/_container.scss

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

package/src/scss/functions/_important.scss

@@ -0,0 +1,36 @@
+// @graupl/core important functions.
+//
+// A function to determine if the !important flag should be added to a property.
+
+@use "../defaults";
+
+/// Determine if an important flag is required and insert it into a property value.
+///
+/// @param {String} $value
+///   The value to insert the important flag into.
+/// @param {Boolean} $use-important
+///   A flag to determine if the important flag should be overridden.
+///
+/// @return {String}
+///   The value with the important flag added.
+@function insert($value, $override: null) {
+  // If override is set, use it.
+  /* stylelint-disable scss/at-if-no-null */
+  @if $override != null {
+    // Convert the override to a string.
+    // We have to do this because true/false values are weird in Sass.
+    // Using the raw boolean value, it will always return true for some reason.
+    @if "#{$override}" == "true" {
+      @return #{$value} !important;
+    } @else {
+      @return #{$value};
+    }
+  }
+  /* stylelint-enable scss/at-if-no-null */
+
+  @if defaults.$use-important {
+    @return #{$value} !important;
+  }
+
+  @return #{$value};
+}

package/src/scss/functions/_screen.scss

@@ -0,0 +1,38 @@
+// @graupl/core 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

@@ -0,0 +1,39 @@
+// @graupl/core 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: null, $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

@@ -0,0 +1,28 @@
+// @graupl/core 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

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

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

@@ -0,0 +1,24 @@
+// @graupl/core 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.
+
+@use "../../defaults" as root-defaults;
+
+// Columns selectors.
+$columns-selector-base: root-defaults.$component-selector-base !default;
+$columns-selector: "columns" !default;
+$columns-count-selector-base: $columns-selector-base !default;
+$columns-count-selector-prefix: "count-" !default;
+$columns-span-selector-base: $columns-selector-base !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;