@graupl/graupl 1.0.0-beta.1 → 1.0.0-beta.10

package/packages/core/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/packages/core/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 → packages/core/src}/scss/functions/_screen.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl screen functions.
+// @graupl/core screen functions.
 //
 // A series of functions to determine ranges of screen sizes.
 
@@ -7,12 +7,20 @@
 @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);

package/{src → packages/core/src}/scss/functions/_theme.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl theme functions.
+// @graupl/core theme functions.
 //
 // Functions to help with getting information about the theme.
 
@@ -6,7 +6,7 @@
 @use "../theme/color/variables" as color;
 
 // A function to get the specific theme shades.
-@function get($color, $shade, $theme: active) {
+@function get($color, $shade: null, $theme: active) {
   @if $shade == transparent or $color == transparent {
     @return transparent;
   }

package/packages/core/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 → packages/core/src}/scss/layout/_index.scss

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

package/{src → packages/core/src}/scss/layout/columns/_defaults.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl columns layout default values.
+// @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.
@@ -6,10 +6,15 @@
 // 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: ".columns" !default;
-$columns-count-selector-prefix: ".count-" !default;
-$columns-span-selector-prefix: ".span-" !default;
+$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;

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

@@ -0,0 +1,137 @@
+// @graupl/core columns layout styles.
+//
+// This module provides the layout styles for the columns component.
+//
+// The columns component is a grid container that provides a responsive grid layout for content.
+// The columns will automatically adjust their size and number of columns based on the available space.
+//
+// Nesting a columns component directly inside of another columns component will implement a subgrid
+// area. In standard usage, this effectively locks the child columns to be a single column layout.
+// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate
+// the columns widths, not the columns' parent width. This works as designed.
+//
+// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.
+// This is controlled by the `force-single-column` screen trigger.
+//
+// The following classes are generated by default:
+// - `.columns`: The main columns component.
+// - `.count-1`: Sets the number of columns in the columns component to 1.
+// - `.count-2`: Sets the number of columns in the columns component to 2.
+// - `.count-3`: Sets the number of columns in the columns component to 3.
+// - `.count-4`: Sets the number of columns in the columns component to 4.
+// - `.count-5`: Sets the number of columns in the columns component to 5.
+// - `.count-6`: Sets the number of columns in the columns component to 6.
+// - `.span-1`: Sets the span of a column in the columns component to 1.
+// - `.span-2`: Sets the span of a column in the columns component to 2.
+// - `.span-3`: Sets the span of a column in the columns component to 3.
+// - `.span-4`: Sets the span of a column in the columns component to 4.
+// - `.span-5`: Sets the span of a column in the columns component to 5.
+// - `.span-6`: Sets the span of a column in the columns component to 6.
+//
+// The following custom properties control the generated classes:
+// - `--graupl-columns-row-gap`: The gap between the rows of the columns.
+// - `--graupl-columns-column-gap`: The gap between the columns of the columns.
+// - `--graupl-columns-count`: The maximum number of columns.
+// - `--graupl-columns-content-max-width`: The maximum width of the content inside the columns.
+// - `--graupl-columns-min-width`: The minimum width of each column.
+// - `--graupl-columns-max-width`: The maximum width of each column.
+// - `--graupl-columns-grid-template-columns`: The grid template columns for the columns.
+// - `--graupl-columns-span`: The span of each column.
+//
+// The following variables control the generated classes:
+// - `$columns-selector-base`: The base selector for the columns component.
+// - `$columns-selector`: The selector for the columns component.
+// - `$columns-count-selector-base`: The base selector for the count class.
+// - `$columns-count-selector-prefix`: The prefix for the count class.
+// - `$columns-span-selector-base`: The base selector for the span class.
+// - `$columns-span-selector-prefix`: The prefix for the span class.
+// - `$columns-max-width`: The maximum width of each column.
+// - `$columns-count`: The default number of columns.
+// - `$columns-min-count`: The minimum number of columns used to generate `.count-#` classes.
+// - `$columns-max-count`: The maximum number of columns used to generate `.count-#` classes.
+// - `$columns-span`: The default span of each column.
+//
+// @example
+//   <div class="columns">
+//     <div>Column 1</div>
+//     <div>Column 2</div>
+//     <div>Column 3</div>
+//   </div>
+//
+// @example
+//   <div class="columns count-4">
+//     <div>Column 1</div>
+//     <div class="span-2">Column 2</div>
+//     <div>Column 3</div>
+//   </div>
+
+@use "variables" as *;
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/container";
+
+@include layer(layout) {
+  // .columns
+  #{defaults.$columns-selector-base}#{defaults.$columns-selector} {
+    display: grid;
+    grid-template-columns: $columns-grid-template-columns;
+    gap: $columns-row-gap $columns-column-gap;
+
+    > * {
+      grid-column: span $columns-span;
+    }
+
+    // Set any child columns to subgrid.
+    // This is necessary to avoid breaking the layout.
+    //
+    // .columns
+    #{defaults.$columns-selector-base}#{defaults.$columns-selector} {
+      grid-template-columns: subgrid;
+    }
+  }
+
+  @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
+    // .count-#{$i}
+    #{defaults.$columns-count-selector-base}#{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 {
+        // .span-#{$j}
+        #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {
+          --#{root-defaults.$prefix}columns-span: #{$i};
+        }
+      }
+    }
+
+    // .span-#{$i}
+    #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {
+      --#{root-defaults.$prefix}columns-span: #{$i};
+    }
+  }
+
+  // Disable columns on small screens to avoid horizontal bleeding.
+  @include container.trigger(force-single-column) {
+    // .columns
+    #{defaults.$columns-selector-base}#{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
+      {
+        // .span-#{$i}
+        #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {
+          --#{root-defaults.$prefix}columns-span: 1;
+        }
+      }
+    }
+  }
+}

package/{src → packages/core/src}/scss/layout/columns/_variables.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl columns layout variables.
+// @graupl/core columns layout variables.
 //
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
@@ -20,6 +20,10 @@ $columns-count: var(
   --#{root-defaults.$prefix}columns-count,
   #{defaults.$columns-count}
 );
+$columns-content-max-width: var(
+  --#{root-defaults.$prefix}columns-content-max-width,
+  #{root-variables.$content-max-width}
+);
 
 // 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
@@ -30,7 +34,7 @@ $columns-min-width: var(
   --#{root-defaults.$prefix}columns-min-width,
   calc(
     (
-        #{root-variables.$content-max-width} - #{$columns-column-gap} *
+        #{$columns-content-max-width} - #{$columns-column-gap} *
           (#{$columns-count} - 1)
       ) /
       #{$columns-count}

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

@@ -0,0 +1,35 @@
+// @graupl/core container 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;
+
+// Container selectors.
+$container-selector-base: root-defaults.$component-selector-base !default;
+$container-selector: "container" !default;
+$container-breakout-selector-base: $container-selector-base !default;
+$container-breakout-selector: "breakout" !default;
+$container-feature-selector-base: $container-selector-base !default;
+$container-feature-selector: "feature" !default;
+$container-full-width-selector-base: $container-selector-base !default;
+$container-full-width-selector: "full-width" !default;
+$container-contain-selector-base: $container-selector-base !default;
+$container-contain-selector: "contain" !default;
+$container-sidebars-selector-base: $container-selector-base !default;
+$container-sidebars-selector: "sidebars" !default;
+$container-content-selector-base: $container-selector-base !default;
+$container-content-selector: "content" !default;
+$container-sidebar-selector-base: $container-selector-base !default;
+$container-sidebar-selector: "sidebar" !default;
+$container-left-selector-suffix: "-left" !default;
+$container-right-selector-suffix: "-right" !default;
+$container-inner-selector-prefix: "inner-" !default;
+
+// Container properties.
+$container-breakout-width: 15ch !default;
+$container-feature-width: 20ch !default;
+$container-sidebar-width: 20ch !default;