@graupl/graupl 1.0.0-alpha.8 → 1.0.0-beta.0

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

@@ -0,0 +1,189 @@
+// @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

@@ -0,0 +1,237 @@
+// @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,3 +1,5 @@
+// @graupl/graupl important functions.
+//
 // A function to determine if the !important flag should be added to a property.
 
 @use "../defaults";

package/src/scss/functions/_screen.scss

@@ -0,0 +1,30 @@
+// @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) {
+  $screen-size: map.get(root-defaults.$screen-sizes, $size);
+
+  @return $screen-size;
+}
+
+@function max($size) {
+  $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,18 +1,39 @@
+// @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) {
-  $color-map: map.get(color.$theme-active, $color);
-  $value: map.get($color-map, $shade);
+@function get($color, $shade, $theme: active) {
+  @if $shade == transparent or $color == transparent {
+    @return transparent;
+  }
 
-  @return $value;
+  @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() {
-  $variants: map.keys(color.$theme-active);
+@function variants($theme: active) {
+  @if map.has-key(color.$themes, $theme) {
+    @return map.keys(map.get(color.$themes, $theme));
+  }
 
-  @return $variants;
+  @return null;
 }

package/src/scss/layout/_index.scss

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

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

@@ -1,9 +1,17 @@
-// Default values for Graupl.
+// @graupl/graupl columns layout default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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;

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

@@ -1,13 +1,13 @@
-// Graupl Columns layout.
+// @graupl/graupl columns layout styles.
 
 @use "variables" as *;
 @use "defaults";
 @use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
-@use "../../mixins/media-queries" as *;
+@use "../../mixins/screen";
 
 @include layer(layout) {
-  .columns {
+  #{defaults.$columns-selector} {
     display: grid;
     grid-template-columns: $columns-grid-template-columns;
     gap: $columns-row-gap $columns-column-gap;
@@ -18,19 +18,41 @@
   }
 
   @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    .count-#{$i} {
+    #{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};
+        }
+      }
     }
 
-    .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(xs) {
-    .columns {
+  @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,4 +1,7 @@
-// Variables referencing custom properties.
+// @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;
@@ -29,7 +32,8 @@ $columns-min-width: var(
     (
         #{root-variables.$content-max-width} - #{$columns-column-gap} *
           (#{$columns-count} - 1)
-      ) / #{$columns-count}
+      ) /
+      #{$columns-count}
   )
 );
 /* stylelint-enable  scss/operator-no-newline-after */

package/src/scss/layout/container/_defaults.scss

@@ -1,8 +1,17 @@
-// Default values for Graupl.
+// @graupl/graupl container layout default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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.
+
+// Container selectors.
+$container-selector: ".container" !default;
+$container-breakout-selector: ".breakout" !default;
+$container-feature-selector: ".feature" !default;
+$container-full-width-selector: ".full-width" !default;
 
+// Container properties.
 $container-breakout-width: 15ch !default;
 $container-feature-width: 20ch !default;