@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

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

@@ -9,11 +9,13 @@
 @use "../../defaults" as root-defaults;
 
 // Columns selectors.
-$columns-selector-base: root-defaults.$component-selector-base !default;
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$columns-selector-base: $selector-base !default;
 $columns-selector: "columns" !default;
-$columns-count-selector-base: $columns-selector-base !default;
+$columns-count-selector-base: $selector-base !default;
 $columns-count-selector-prefix: "count-" !default;
-$columns-span-selector-base: $columns-selector-base !default;
+$columns-span-selector-base: $selector-base !default;
 $columns-span-selector-prefix: "span-" !default;
 
 // Columns properties.

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

@@ -28,28 +28,34 @@
 // - `.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 custom properties can be used to customize the columns component:
+// | Property                                 | Description                                          | Default Value                                                                                                                                          |
+// | ---                                      | ---                                                  | ---                                                                                                                                                    |
+// | `--graupl-columns-row-gap`               | The gap between the rows of the columns.             | `var(--graupl-spacer-5)`                                                                                                                               |
+// | `--graupl-columns-column-gap`            | The gap between the columns of the columns.          | `var(--graupl-spacer-5)`                                                                                                                               |
+// | `--graupl-columns-count`                 | The maximum number of columns.                       | `3`                                                                                                                                                    |
+// | `--graupl-columns-content-max-width`     | The maximum width of the content inside the columns. | `var(--graupl-content-max-width)`                                                                                                                      |
+// | `--graupl-columns-min-width`             | The minimum width of each column.                    | `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` |
+// | `--graupl-columns-max-width`             | The maximum width of each column.                    | `1fr`                                                                                                                                                  |
+// | `--graupl-columns-grid-template-columns` | The grid template columns for the columns.           | `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))`                                                           |
+// | `--graupl-columns-span`                  | The span of each column.                             | `1`                                                                                                                                                    |
 //
-// 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.
+// The following sass variables can be used to customize the generation of the columns component:
+// | Variable                         | Description                                                        | Default Value    |
+// | ---                              | ---                                                                | ---              |
+// | `$selector-base`                 | The base selector for the component.                               | `"."`            |
+// | `$modifier-selector-base`        | The base selector for component modifiers.                         | `"."`            |
+// | `$columns-selector-base`         | The base selector for the columns component.                       | `$selector-base` |
+// | `$columns-selector`              | The selector for the columns component.                            | `"columns"`      |
+// | `$columns-count-selector-base`   | The base selector for the count class.                             | `$selector-base` |
+// | `$columns-count-selector-prefix` | The prefix for the count class.                                    | `"count-"`       |
+// | `$columns-span-selector-base`    | The base selector for the span class.                              | `$selector-base` |
+// | `$columns-span-selector-prefix`  | The prefix for the span class.                                     | `"span-"`        |
+// | `$columns-max-width`             | The maximum width of each column.                                  | `1fr`            |
+// | `$columns-count`                 | The default number of columns.                                     | `3`              |
+// | `$columns-min-count`             | The minimum number of columns used to generate `.count-#` classes. | `1`              |
+// | `$columns-max-count`             | The maximum number of columns used to generate `.count-#` classes. | `6`              |
+// | `$columns-span`                  | The default span of each column.                                   | `1`              |
 //
 // @example
 //   <div class="columns">

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

@@ -8,18 +8,25 @@
 @use "../../defaults" as root-defaults;
 @use "sass:map";
 
+// --graupl-columns-row-gap
 $columns-row-gap: var(
   --#{root-defaults.$prefix}columns-row-gap,
   #{map.get(root-variables.$spacers, 5)}
 );
+
+// --graupl-columns-column-gap
 $columns-column-gap: var(
   --#{root-defaults.$prefix}columns-column-gap,
   #{map.get(root-variables.$spacers, 5)}
 );
+
+// --graupl-columns-count
 $columns-count: var(
   --#{root-defaults.$prefix}columns-count,
   #{defaults.$columns-count}
 );
+
+// --graupl-columns-content-max-width
 $columns-content-max-width: var(
   --#{root-defaults.$prefix}columns-content-max-width,
   #{root-variables.$content-max-width}
@@ -30,6 +37,7 @@ $columns-content-max-width: var(
 // columns minus one (to account for the gaps between columns).
 // 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. */
+// --graupl-columns-min-width
 $columns-min-width: var(
   --#{root-defaults.$prefix}columns-min-width,
   calc(
@@ -41,14 +49,19 @@ $columns-min-width: var(
   )
 );
 /* stylelint-enable  scss/operator-no-newline-after */
+// --graupl-columns-max-width
 $columns-max-width: var(
   --#{root-defaults.$prefix}columns-max-width,
   #{defaults.$columns-max-width}
 );
+
+// --graupl-columns-grid-template-columns
 $columns-grid-template-columns: var(
   --#{root-defaults.$prefix}columns-grid-template-columns,
   repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
 );
+
+// --graupl-columns-span
 $columns-span: var(
   --#{root-defaults.$prefix}columns-span,
   #{defaults.$columns-span}

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

@@ -7,29 +7,46 @@
 // Those should be defined as custom properties in the `_variables.scss` file.
 
 @use "../../defaults" as root-defaults;
+@use "sass:list";
 
 // Container selectors.
-$container-selector-base: root-defaults.$component-selector-base !default;
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$force-container-chaining: false !default;
+$generate-forced-container-selectors: true !default;
+$show-warnings: true !default;
+$container-selector-base: $selector-base !default;
 $container-selector: "container" !default;
-$container-breakout-selector-base: $container-selector-base !default;
+$container-breakout-selector-base: $selector-base !default;
 $container-breakout-selector: "breakout" !default;
-$container-feature-selector-base: $container-selector-base !default;
+$container-feature-selector-base: $selector-base !default;
 $container-feature-selector: "feature" !default;
-$container-full-width-selector-base: $container-selector-base !default;
+$container-full-width-selector-base: $selector-base !default;
 $container-full-width-selector: "full-width" !default;
-$container-contain-selector-base: $container-selector-base !default;
+$container-contain-selector-base: $modifier-selector-base !default;
 $container-contain-selector: "contain" !default;
-$container-sidebars-selector-base: $container-selector-base !default;
+$container-sidebars-selector-base: $modifier-selector-base !default;
 $container-sidebars-selector: "sidebars" !default;
-$container-content-selector-base: $container-selector-base !default;
+$container-content-selector-base: $selector-base !default;
 $container-content-selector: "content" !default;
-$container-sidebar-selector-base: $container-selector-base !default;
+$container-sidebar-selector-base: $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;
+$container-breakout-width: 4ch !default;
+$container-feature-width: 10ch !default;
+$container-sidebar-width: 26ch !default;
+
+// Forced container selectors.
+$-forced-container-selectors: (article, aside, div, section);
+$forced-container-selectors: () !default;
+
+@if $generate-forced-container-selectors {
+  $forced-container-selectors: list.join(
+    $-forced-container-selectors,
+    $forced-container-selectors
+  );
+}