@graupl/graupl 1.0.0-alpha.11 → 1.0.0-alpha.13

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/_theme.scss

@@ -1,3 +1,5 @@
+// @graupl/graupl theme functions.
+//
 // Functions to help with getting information about the theme.
 
 @use "sass:map";
@@ -5,6 +7,22 @@
 
 // A function to get the specific theme shades.
 @function get($color, $shade) {
+  @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;
+  }
+
   $color-map: map.get(color.$theme-active, $color);
   $value: map.get($color-map, $shade);
 

package/src/scss/layout/_index.scss

@@ -1,4 +1,5 @@
-// Graupl layouts.
+// @gruapl/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,4 +1,4 @@
-// Graupl Columns layout.
+// @gruapl/graupl columns layout styles.
 
 @use "variables" as *;
 @use "defaults";
@@ -7,7 +7,7 @@
 @use "../../mixins/media-queries" as *;
 
 @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 {
+    #{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;

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;

package/src/scss/layout/container/_index.scss

@@ -1,11 +1,12 @@
-// Graupl Container layout.
+// @gruapl/graupl container layout styles.
 
+@use "defaults";
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 
 @include layer(layout) {
-  .container,
-  .container > .full-width {
+  #{defaults.$container-selector},
+  #{defaults.$container-selector} > #{defaults.$container-full-width-selector} {
     display: grid;
     grid-template-columns:
       [full-width-start] $container-full-width-section-width
@@ -17,19 +18,23 @@
       $container-feature-section-width [feature-end]
       $container-full-width-section-width [full-width-end];
 
-    > :not(.breakout, .full-width, .feature) {
+    > :not(
+        #{defaults.$container-breakout-selector},
+        #{defaults.$container-full-width-selector},
+        #{defaults.$container-feature-selector}
+      ) {
       grid-column: content;
     }
 
-    .breakout {
+    #{defaults.$container-breakout-selector} {
       grid-column: breakout;
     }
 
-    .feature {
+    #{defaults.$container-feature-selector} {
       grid-column: feature;
     }
 
-    .full-width {
+    #{defaults.$container-full-width-selector} {
       grid-column: full-width;
     }
   }

package/src/scss/layout/container/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl container 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;

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

@@ -0,0 +1,18 @@
+// @graupl/graupl flex 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.
+
+// Flex columns selectors.
+$flex-columns-selector: ".flex-columns" !default;
+$flex-columns-column-selector-prefix: ".col-" !default;
+$flex-columns-fill-selector: ".fill" !default;
+
+// Flex columns properties.
+$flex-columns-min-count: 1 !default;
+$flex-columns-max-count: 12 !default;
+$flex-columns-size: auto !default;
+$flex-columns-max-width: unset !default;

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

@@ -0,0 +1,77 @@
+// @gruapl/graupl flex columns layout styles.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+
+@include layer(layout) {
+  // Flex columns.
+  #{defaults.$flex-columns-selector} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $flex-columns-row-gap $flex-columns-column-gap;
+
+    > * {
+      flex: 1 1 $flex-columns-size;
+      max-width: $flex-columns-max-width;
+    }
+
+    #{defaults.$flex-columns-fill-selector} {
+      --#{root-defaults.$prefix}-flex-columns-max-width: unset;
+    }
+  }
+
+  @for $i
+    from defaults.$flex-columns-min-count
+    through defaults.$flex-columns-max-count
+  {
+    #{defaults.$flex-columns-column-selector-prefix}#{$i} {
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      --#{root-defaults.$prefix}-flex-columns-size: calc(
+        (100% / #{defaults.$flex-columns-max-count} * #{$i}) -
+          #{$flex-columns-column-gap}
+      );
+      --#{root-defaults.$prefix}-flex-columns-max-width: calc(
+        100% / #{defaults.$flex-columns-max-count} * #{$i}
+      );
+      /* stylelint-enable  scss/operator-no-newline-after */
+    }
+
+    @include screen(xs) {
+      #{defaults.$flex-columns-column-selector-prefix}#{$i} {
+        --#{root-defaults.$prefix}-flex-columns-size: 100%;
+        --#{root-defaults.$prefix}-flex-columns-max-width: auto;
+      }
+    }
+  }
+
+  @each $screen, $query in root-defaults.$screen-sizes {
+    @for $i
+      from defaults.$flex-columns-min-count
+      through defaults.$flex-columns-max-count
+    {
+      // For the screen-specific sizes, we can't use custom properties.
+      // It appears that custom properties that are already set, cannot be overwritten
+      // inside of a media query.
+      //
+      // If you do something like `.col-6 .col-lg-3`, the custom properties will only ever
+      // be set to the `.col-6` value.
+      @include screen($screen) {
+        #{defaults.$flex-columns-column-selector-prefix}#{$screen}-#{$i} {
+          --#{root-defaults.$prefix}-flex-columns-size: calc(
+            (100% / #{defaults.$flex-columns-max-count} * #{$i}) - #{$flex-columns-column-gap}
+          );
+          --#{root-defaults.$prefix}-flex-columns-max-width: calc(
+            100% / #{defaults.$flex-columns-max-count} * #{$i}
+          );
+
+          &#{defaults.$flex-columns-fill-selector} {
+            --#{root-defaults.$prefix}-flex-columns-max-width: unset;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+// @graupl/graupl flex 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 "../../defaults" as root-defaults;
+@use "../columns/variables" as columns-variables;
+
+// Flex columns properties.
+$flex-columns-row-gap: var(
+  --#{root-defaults.$prefix}-flex-columns-row-gap,
+  #{columns-variables.$columns-row-gap}
+);
+$flex-columns-column-gap: var(
+  --#{root-defaults.$prefix}-flex-columns-column-gap,
+  #{columns-variables.$columns-column-gap}
+);
+$flex-columns-size: var(
+  --#{root-defaults.$prefix}-flex-columns-size,
+  #{defaults.$flex-columns-size}
+);
+$flex-columns-max-width: var(
+  --#{root-defaults.$prefix}-flex-columns-max-width,
+  #{defaults.$flex-columns-max-width}
+);

package/src/scss/mixins/_layer.scss

@@ -1,4 +1,4 @@
-// Layer mixins.
+// @graupl/graupl layer mixins.
 //
 // These should be used to define the layers of your components to ensure that
 // they are output in the correct order in the final compiled CSS.

package/src/scss/mixins/_media-queries.scss

@@ -1,4 +1,4 @@
-// Media query mixins.
+// @graupl/graupl media query mixins.
 
 @use "../defaults" as root-defaults;
 @use "sass:map";
@@ -17,6 +17,7 @@
   }
 }
 
+// A media query for targetting specific screen sizes.
 @mixin screen($size) {
   $screen-size: map.get(root-defaults.$screen-sizes, $size);
 
@@ -24,3 +25,11 @@
     @content;
   }
 }
+
+@mixin screen-trigger($size) {
+  $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $size);
+
+  @media screen and #{$screen-size-trigger} {
+    @content;
+  }
+}

package/src/scss/state/_index.scss

@@ -1,3 +1,3 @@
-// Graupl states.
+// @gruapl/graupl state styles.
 
 @forward "focus";

package/src/scss/state/focus/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl focus state 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.
 
 $focus-outline-style: dotted !default;
 $focus-box-shadow-style: inset !default;

package/src/scss/state/focus/_index.scss

@@ -1,4 +1,4 @@
-// Focus state styles.
+// @gruapl/graupl focus state styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

package/src/scss/state/focus/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl focus state variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @use "../../variables" as root-variables;
 @use "defaults";

package/src/scss/theme/_index.scss

@@ -1,4 +1,4 @@
-// Graupl theme.
+// @gruapl/graupl theme styles.
 
 @forward "color";
 @forward "typography";

package/src/scss/theme/color/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl color theme 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.
 
 @use "sass:map";