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

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.
@@ -9,17 +9,21 @@
 @use "sass:map";
 
 $columns-row-gap: var(
-  --#{root-defaults.$prefix}-columns-row-gap,
+  --#{root-defaults.$prefix}columns-row-gap,
   #{map.get(root-variables.$spacers, 5)}
 );
 $columns-column-gap: var(
-  --#{root-defaults.$prefix}-columns-column-gap,
+  --#{root-defaults.$prefix}columns-column-gap,
   #{map.get(root-variables.$spacers, 5)}
 );
 $columns-count: var(
-  --#{root-defaults.$prefix}-columns-count,
+  --#{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
@@ -27,10 +31,10 @@ $columns-count: var(
 // 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,
+  --#{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}
@@ -38,14 +42,14 @@ $columns-min-width: var(
 );
 /* stylelint-enable  scss/operator-no-newline-after */
 $columns-max-width: var(
-  --#{root-defaults.$prefix}-columns-max-width,
+  --#{root-defaults.$prefix}columns-max-width,
   #{defaults.$columns-max-width}
 );
 $columns-grid-template-columns: var(
-  --#{root-defaults.$prefix}-columns-grid-template-columns,
+  --#{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,
+  --#{root-defaults.$prefix}columns-span,
   #{defaults.$columns-span}
 );

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;