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

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

@@ -1,114 +0,0 @@
-// @graupl/core 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;
-@use "../../defaults" as root-defaults;
-@use "sass:map";
-
-$container-gap: var(
-  --#{root-defaults.$prefix}container-gap,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$container-content-max-width: var(
-  --#{root-defaults.$prefix}container-content-max-width,
-  #{root-variables.$content-max-width}
-);
-$container-sidebar-width: var(
-  --#{root-defaults.$prefix}container-sidebar-width,
-  #{defaults.$container-sidebar-width}
-);
-$container-breakout-max-width: var(
-  --#{root-defaults.$prefix}container-breakout-max-width,
-  calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
-);
-$container-feature-max-width: var(
-  --#{root-defaults.$prefix}container-feature-max-width,
-  calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
-);
-$container-full-width-section-min-width: var(
-  --#{root-defaults.$prefix}container-full-width-section-min-width,
-  #{$container-gap}
-);
-$container-full-width-section-max-width: var(
-  --#{root-defaults.$prefix}container-full-width-section-max-width,
-  1fr
-);
-$container-feature-section-min-width: var(
-  --#{root-defaults.$prefix}container-feature-section-min-width,
-  0rem
-);
-$container-feature-section-max-width: var(
-  --#{root-defaults.$prefix}container-feature-section-max-width,
-  calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
-);
-$container-breakout-section-min-width: var(
-  --#{root-defaults.$prefix}container-breakout-section-min-width,
-  0rem
-);
-$container-breakout-section-max-width: var(
-  --#{root-defaults.$prefix}container-breakout-section-max-width,
-  calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
-);
-/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-$container-content-section-min-width: var(
-  --#{root-defaults.$prefix}container-content-section-min-width,
-  calc(
-    100% - (#{$container-full-width-section-min-width} * 2) -
-      (#{$container-feature-section-min-width} * 2) -
-      (#{$container-breakout-section-min-width} * 2)
-  )
-);
-/* stylelint-enable  scss/operator-no-newline-after */
-$container-content-section-max-width: var(
-  --#{root-defaults.$prefix}container-content-section-max-width,
-  #{$container-content-max-width}
-);
-$container-full-width-section-width: var(
-  --#{root-defaults.$prefix}container-full-width-section-width,
-  minmax(
-    #{$container-full-width-section-min-width},
-    #{$container-full-width-section-max-width}
-  )
-);
-$container-feature-section-width: var(
-  --#{root-defaults.$prefix}container-feature-section-width,
-  minmax(
-    #{$container-feature-section-min-width},
-    #{$container-feature-section-max-width}
-  )
-);
-$container-breakout-section-width: var(
-  --#{root-defaults.$prefix}container-breakout-section-width,
-  minmax(
-    #{$container-breakout-section-min-width},
-    #{$container-breakout-section-max-width}
-  )
-);
-$container-content-section-width: var(
-  --#{root-defaults.$prefix}container-content-section-width,
-  min(
-    #{$container-content-section-min-width},
-    #{$container-content-section-max-width}
-  )
-);
-$container-sidebar-left-section-width: var(
-  --#{root-defaults.$prefix}container-sidebar-left-section-width,
-  $container-sidebar-width
-);
-$container-sidebar-right-section-width: var(
-  --#{root-defaults.$prefix}container-sidebar-right-section-width,
-  $container-sidebar-width
-);
-/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-$container-inner-content-section-width: var(
-  --#{root-defaults.$prefix}container-inner-content-section-width,
-  calc(
-    #{$container-content-section-width} -
-      #{$container-sidebar-left-section-width} -
-      #{$container-sidebar-right-section-width}
-  )
-);
-/* stylelint-enable  scss/operator-no-newline-after */

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

@@ -1,28 +0,0 @@
-// @graupl/core 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.
-
-@use "../../defaults" as root-defaults;
-
-// Flex columns selectors.
-$flex-columns-selector-base: root-defaults.$component-selector-base !default;
-$flex-columns-selector: "flex-columns" !default;
-$flex-columns-column-selector-base: $flex-columns-selector-base !default;
-$flex-columns-column-selector: "col-" !default;
-$flex-columns-fill-selector-base: $flex-columns-selector-base !default;
-$flex-columns-fill-selector: "fill" !default;
-$flex-columns-screen-aware-separator: root-defaults.$screen-aware-selector-separator !default;
-$flex-columns-container-aware-separator: root-defaults.$container-aware-selector-separator !default;
-$flex-columns-screen-aware-selector-prefix: root-defaults.$screen-aware-selector-prefix !default;
-$flex-columns-container-aware-selector-prefix: root-defaults.$container-aware-selector-prefix !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;
-$flex-columns-container-type: "inline-size" !default;

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

@@ -1,184 +0,0 @@
-// @graupl/core flex columns layout styles.
-//
-// This module provides the layout styles for the flex columns component.
-//
-// The flex columns component is a flex container that provides a responsive grid layout for content.
-// The flex columns will adjust their sizes accordingly based on the classes applied to them.
-//
-// These are effectively bootstrap columns, but leaning more on the way flex natively works in the browser.
-// This means that columns will size themselves taking the gap between them into account.
-//
-// The following classes are generated by default:
-// - `.flex-columns`: The main flex columns component.
-// - `.col-1`: Sets the size of a column in the flex columns component to 1.
-// - `.col-2`: Sets the size of a column in the flex columns component to 2.
-// - `.col-3`: Sets the size of a column in the flex columns component to 3.
-// - `.col-4`: Sets the size of a column in the flex columns component to 4.
-// - `.col-5`: Sets the size of a column in the flex columns component to 5.
-// - `.col-6`: Sets the size of a column in the flex columns component to 6.
-// - `.col-7`: Sets the size of a column in the flex columns component to 7.
-// - `.col-8`: Sets the size of a column in the flex columns component to 8.
-// - `.col-9`: Sets the size of a column in the flex columns component to 9.
-// - `.col-10`: Sets the size of a column in the flex columns component to 10.
-// - `.col-11`: Sets the size of a column in the flex columns component to 11.
-// - `.col-12`: Sets the size of a column in the flex columns component to 12.
-// - `.fill`: A class to set a column to fill the remaining space.
-// - `.[screen-name]:col-#`: A class to set the size of a column at a specific screen size.
-// - `.[container-name]:col-#`: A class to set the size of a column at a specific container size.
-//
-// The following custom properties control the generated classes:
-// - `--graupl-flex-columns-row-gap`: The gap between the rows of the flex columns.
-// - `--graupl-flex-columns-column-gap`: The gap between the columns of the flex columns.
-// - `--graupl-flex-columns-size`: The size of a column.
-// - `--graupl-flex-columns-max-width`: The maximum width of a column.
-//
-// The following variables control the generated classes:
-// - `$flex-columns-selector-base`: The base selector for the flex columns component.
-// - `$flex-columns-selector`: The selector for the flex columns component.
-// - `$flex-columns-column-selector-base`: The base selector for the column class.
-// - `$flex-columns-column-selector`: The selector for the column class.
-// - `$flex-columns-fill-selector-base`: The base selector for the fill class.
-// - `$flex-columns-fill-selector`: The selector for the fill class.
-// - `$flex-columns-screen-aware-separator`: The separator for the screen-aware column class.
-// - `$flex-columns-container-aware-separator`: The separator for the container-aware column class.
-// - `$flex-columns-screen-aware-selector-prefix`: The prefix for the screen-aware column class.
-// - `$flex-columns-container-aware-selector-prefix`: The prefix for the container-aware column class.
-// - `$flex-columns-min-count`: The minimum number of columns used to generate `.col-#` classes.
-// - `$flex-columns-max-count`: The maximum number of columns used to generate `.col-#` classes.
-// - `$flex-columns-size`: The default size of a column.
-// - `$flex-columns-max-width`: The default maximum width of a column.
-//
-// @example
-//   <div class="flex-columns">
-//     <div class="col-3">Column 1</div>
-//     <div class="col-6">Column 2</div>
-//     <div class="col-3">Column 3</div>
-//   </div>
-//
-// @example
-//   <div class="flex-columns">
-//     <div class="col-3">Column 1</div>
-//     <div class="col-3 fill">Column 2</div>
-//     <div class="col-3">Column 3</div>
-//   </div>
-//
-// @example
-//   <div class="flex-columns">
-//     <div class="col-3 md:col-2">Column 1</div>
-//     <div class="col-6 md:col-8">Column 2</div>
-//     <div class="col-3 md:col-2">Column 3</div>
-//   </div>
-
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/screen";
-@use "../../mixins/container";
-@use "../../mixins/utility";
-@use "defaults";
-@use "sass:map";
-@use "variables" as *;
-
-@include layer(layout) {
-  // `.flex-columns`
-  #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $flex-columns-row-gap $flex-columns-column-gap;
-    container-type: $flex-columns-container-type;
-
-    > * {
-      flex: 1 1 $flex-columns-size;
-      max-width: $flex-columns-max-width;
-    }
-
-    // `.fill`
-    #{defaults.$flex-columns-fill-selector-base}#{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
-  {
-    // e.g. `.col-1` or `.col-12`
-    #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$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 */
-      container-type: $flex-columns-container-type;
-    }
-
-    @include container.trigger(force-single-column) {
-      // e.g. `.col-1` or `.col-12`
-      #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {
-        --#{root-defaults.$prefix}flex-columns-size: 100%;
-        --#{root-defaults.$prefix}flex-columns-max-width: auto;
-      }
-    }
-  }
-
-  @each $screen-name in map.keys(root-defaults.$screen-sizes) {
-    @for $i
-      from defaults.$flex-columns-min-count
-      through defaults.$flex-columns-max-count
-    {
-      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-      @include utility.create-mapped(
-        // e.g. `.md:col-1` or `.xl:col-12`
-        #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-screen-aware-selector-prefix}#{$screen-name}#{defaults.$flex-columns-screen-aware-separator}#{defaults.$flex-columns-column-selector}#{$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}
-            )
-        ),
-        $screen: $screen-name
-      ) {
-        // `&.fill`
-        &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {
-          --#{root-defaults.$prefix}flex-columns-max-width: unset;
-        }
-      }
-      /* stylelint-enable  scss/operator-no-newline-after */
-    }
-  }
-
-  @each $container-name in map.keys(root-defaults.$container-sizes) {
-    @for $i
-      from defaults.$flex-columns-min-count
-      through defaults.$flex-columns-max-count
-    {
-      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-      @include utility.create-mapped(
-        // e.g. `.cq:md:col-1` or `.cq:xl:col-12`
-        #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-container-aware-selector-prefix}#{$container-name}#{defaults.$flex-columns-container-aware-separator}#{defaults.$flex-columns-column-selector}#{$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}
-            )
-        ),
-        $container: $container-name
-      ) {
-        // `&.fill`
-        &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {
-          --#{root-defaults.$prefix}flex-columns-max-width: unset;
-        }
-      }
-      /* stylelint-enable  scss/operator-no-newline-after */
-    }
-  }
-}

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

@@ -1,30 +0,0 @@
-// @graupl/core 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}
-);
-$flex-columns-container-type: var(
-  --#{root-defaults.$prefix}flex-columns-container-type,
-  #{defaults.$flex-columns-container-type}
-);

package/packages/core/src/scss/mixins/_animation.scss

@@ -1,15 +0,0 @@
-// @graupl/core animation media query mixins.
-
-// A media query for targeting users who have not requested reduced motion.
-@mixin on {
-  @media (prefers-reduced-motion: no-preference) {
-    @content;
-  }
-}
-
-// A media query for targeting users who have requested reduced motion.
-@mixin off {
-  @media (prefers-reduced-motion: reduce) {
-    @content;
-  }
-}

package/packages/core/src/scss/mixins/_container.scss

@@ -1,80 +0,0 @@
-// @graupl/core container mixins.
-//
-// A series of mixins to generate breakpoints.
-
-// @use "../defaults" as root-defaults;
-@use "../functions/container";
-@use "../defaults" as root-defaults;
-@use "sass:map";
-@use "sass:meta";
-
-// A mixin to generate a minimum container width media query.
-@mixin up($size) {
-  $container-size: container.min($size);
-
-  @container (#{$container-size} <= width) {
-    @content;
-  }
-}
-
-// A mixin to generate a maximum container width media query.
-@mixin down($size) {
-  $container-size: container.max($size);
-
-  @container (width <= #{$container-size}) {
-    @content;
-  }
-}
-
-// A mixin to generate a range of container widths media query.
-@mixin between($min, $max) {
-  $container-size: container.range($min, $max);
-  $min: map.get($container-size, "min");
-  $max: map.get($container-size, "max");
-
-  @container (#{$min} <= width <= #{$max}) {
-    @content;
-  }
-}
-
-@mixin only($size) {
-  @include between($size, $size) {
-    @content;
-  }
-}
-
-@mixin trigger($trigger) {
-  @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {
-    @error "The container size trigger \"#{$trigger}\" does not exist.";
-  }
-
-  $container-size-trigger: map.get(
-    root-defaults.$container-size-triggers,
-    $trigger
-  );
-
-  @if not map.has-key($container-size-trigger, "mixin") {
-    @error "The container size trigger \"#{$trigger}\" does not have a mixin key.";
-  }
-
-  @if not map.has-key($container-size-trigger, "args") {
-    @error "The container size trigger \"#{$trigger}\" does not have an args key.";
-  }
-
-  $mixin-name: map.get($container-size-trigger, "mixin");
-  $mixin-args: map.get($container-size-trigger, "args");
-
-  @if not meta.mixin-exists($mixin-name) {
-    @error "The mixin \"#{$mixin-name}\" does not exist.";
-  }
-
-  $mixin: meta.get-mixin($mixin-name);
-
-  @if meta.accepts-content($mixin) {
-    @include meta.apply($mixin, $mixin-args...) {
-      @content;
-    }
-  } @else {
-    @warn "The mixin \"#{$mixin-name}\" does not accept content.";
-  }
-}

package/packages/core/src/scss/mixins/_layer.scss

@@ -1,16 +0,0 @@
-// @graupl/core 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.
-
-@use "../defaults" as root-defaults;
-
-@mixin layer($layer) {
-  @if root-defaults.$use-layers {
-    @layer #{root-defaults.$id}.#{$layer} {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}

package/packages/core/src/scss/mixins/_screen.scss

@@ -1,77 +0,0 @@
-// @graupl/core screen mixins.
-//
-// A series of mixins to generate breakpoints.
-
-// @use "../defaults" as root-defaults;
-@use "../functions/screen";
-@use "../defaults" as root-defaults;
-@use "sass:map";
-@use "sass:meta";
-
-// A mixin to generate a minimum screen width media query.
-@mixin up($size) {
-  $screen-size: screen.min($size);
-
-  @media screen and (#{$screen-size} <= width) {
-    @content;
-  }
-}
-
-// A mixin to generate a maximum screen width media query.
-@mixin down($size) {
-  $screen-size: screen.max($size);
-
-  @media screen and (width <= #{$screen-size}) {
-    @content;
-  }
-}
-
-// A mixin to generate a range of screen widths media query.
-@mixin between($min, $max) {
-  $screen-size: screen.range($min, $max);
-  $min: map.get($screen-size, "min");
-  $max: map.get($screen-size, "max");
-
-  @media screen and (#{$min} <= width <= #{$max}) {
-    @content;
-  }
-}
-
-@mixin only($size) {
-  @include between($size, $size) {
-    @content;
-  }
-}
-
-@mixin trigger($trigger) {
-  @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {
-    @error "The screen size trigger \"#{$trigger}\" does not exist.";
-  }
-
-  $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);
-
-  @if not map.has-key($screen-size-trigger, "mixin") {
-    @error "The screen size trigger \"#{$trigger}\" does not have a mixin key.";
-  }
-
-  @if not map.has-key($screen-size-trigger, "args") {
-    @error "The screen size trigger \"#{$trigger}\" does not have an args key.";
-  }
-
-  $mixin-name: map.get($screen-size-trigger, "mixin");
-  $mixin-args: map.get($screen-size-trigger, "args");
-
-  @if not meta.mixin-exists($mixin-name) {
-    @error "The mixin \"#{$mixin-name}\" does not exist.";
-  }
-
-  $mixin: meta.get-mixin($mixin-name);
-
-  @if meta.accepts-content($mixin) {
-    @include meta.apply($mixin, $mixin-args...) {
-      @content;
-    }
-  } @else {
-    @warn "The mixin \"#{$mixin-name}\" does not accept content.";
-  }
-}

package/packages/core/src/scss/mixins/_state.scss

@@ -1,18 +0,0 @@
-// @graupl/core state mixins.
-//
-// A series of mixins to tie styles to a state.
-
-@use "../defaults" as root-defaults;
-@use "sass:map";
-
-/// Applies styles to a specific state.
-///
-/// @param {string} $state
-///   The name of the state to apply the styles to.
-@mixin state($state) {
-  @each $selector in map.get(root-defaults.$state-selectors, $state) {
-    &#{$selector} {
-      @content;
-    }
-  }
-}

package/packages/core/src/scss/mixins/_theme.scss

@@ -1,15 +0,0 @@
-// @graupl/core theme mixins.
-//
-// A series of mixins to tie styles to a theme-mode.
-
-@use "../theme/color/defaults" as color-defaults;
-
-/// Applies styles to a specific theme mode.
-///
-/// @param {string} $theme-name
-///   The name of the theme mode to apply the styles to.
-@mixin theme($theme-name) {
-  #{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {
-    @content;
-  }
-}