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

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

@@ -1,137 +0,0 @@
-// @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/packages/core/src/scss/layout/columns/_variables.scss

@@ -1,55 +0,0 @@
-// @graupl/core 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;
-@use "../../defaults" as root-defaults;
-@use "sass:map";
-
-$columns-row-gap: var(
-  --#{root-defaults.$prefix}columns-row-gap,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$columns-column-gap: var(
-  --#{root-defaults.$prefix}columns-column-gap,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$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
-// 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. */
-$columns-min-width: var(
-  --#{root-defaults.$prefix}columns-min-width,
-  calc(
-    (
-        #{$columns-content-max-width} - #{$columns-column-gap} *
-          (#{$columns-count} - 1)
-      ) /
-      #{$columns-count}
-  )
-);
-/* stylelint-enable  scss/operator-no-newline-after */
-$columns-max-width: var(
-  --#{root-defaults.$prefix}columns-max-width,
-  #{defaults.$columns-max-width}
-);
-$columns-grid-template-columns: var(
-  --#{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,
-  #{defaults.$columns-span}
-);

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

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