@graupl/graupl 1.0.0-beta.2 → 1.0.0-beta.20

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

@@ -1,17 +0,0 @@
-// @graupl/graupl 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.
-
-// Container selectors.
-$container-selector: ".container" !default;
-$container-breakout-selector: ".breakout" !default;
-$container-feature-selector: ".feature" !default;
-$container-full-width-selector: ".full-width" !default;
-
-// Container properties.
-$container-breakout-width: 15ch !default;
-$container-feature-width: 20ch !default;

package/src/scss/layout/container/_index.scss

@@ -1,41 +0,0 @@
-// @graupl/graupl container layout styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-
-@include layer(layout) {
-  #{defaults.$container-selector},
-  #{defaults.$container-selector} > #{defaults.$container-full-width-selector} {
-    display: grid;
-    grid-template-columns:
-      [full-width-start] $container-full-width-section-width
-      [feature-start] $container-feature-section-width
-      [breakout-start] $container-breakout-section-width
-      [content-start] $container-content-section-width
-      [content-end]
-      $container-breakout-section-width [breakout-end]
-      $container-feature-section-width [feature-end]
-      $container-full-width-section-width [full-width-end];
-
-    > :not(
-        #{defaults.$container-breakout-selector},
-        #{defaults.$container-full-width-selector},
-        #{defaults.$container-feature-selector}
-      ) {
-      grid-column: content;
-    }
-
-    #{defaults.$container-breakout-selector} {
-      grid-column: breakout;
-    }
-
-    #{defaults.$container-feature-selector} {
-      grid-column: feature;
-    }
-
-    #{defaults.$container-full-width-selector} {
-      grid-column: full-width;
-    }
-  }
-}

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

@@ -1,50 +0,0 @@
-// @graupl/graupl 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-breakout-max-width: var(
-  --#{root-defaults.$prefix}container-breakout-max-width,
-  calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
-);
-$container-breakout-width: var(
-  --#{root-defaults.$prefix}container-breakout-width,
-  calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
-);
-$container-feature-max-width: var(
-  --#{root-defaults.$prefix}container-feature-max-width,
-  calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
-);
-$container-feature-width: var(
-  --#{root-defaults.$prefix}container-feature-width,
-  calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
-);
-$container-content-section-width: var(
-  --#{root-defaults.$prefix}container-content-section-width,
-  min(#{$container-content-max-width}, calc(100% - #{$container-gap} * 2))
-);
-$container-full-width-section-width: var(
-  --#{root-defaults.$prefix}container-full-width-section-width,
-  minmax(#{$container-gap}, 1fr)
-);
-$container-breakout-section-width: var(
-  --#{root-defaults.$prefix}container-breakout-section-width,
-  minmax(0, #{$container-breakout-width})
-);
-$container-feature-section-width: var(
-  --#{root-defaults.$prefix}container-feature-section-width,
-  minmax(0, #{$container-feature-width})
-);

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

@@ -1,18 +0,0 @@
-// @graupl/graupl 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.
-
-// Flex columns selectors.
-$flex-columns-selector: ".flex-columns" !default;
-$flex-columns-column-selector-prefix: ".col-" !default;
-$flex-columns-fill-selector: ".fill" !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;

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

@@ -1,80 +0,0 @@
-// @graupl/graupl flex columns layout styles.
-
-@use "variables" as *;
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/screen";
-
-@include layer(layout) {
-  // Flex columns.
-  #{defaults.$flex-columns-selector} {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $flex-columns-row-gap $flex-columns-column-gap;
-
-    > * {
-      flex: 1 1 $flex-columns-size;
-      max-width: $flex-columns-max-width;
-    }
-
-    #{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
-  {
-    #{defaults.$flex-columns-column-selector-prefix}#{$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 */
-    }
-
-    @include screen.trigger(force-single-column) {
-      #{defaults.$flex-columns-column-selector-prefix}#{$i} {
-        --#{root-defaults.$prefix}flex-columns-size: 100%;
-        --#{root-defaults.$prefix}flex-columns-max-width: auto;
-      }
-    }
-  }
-
-  @each $screen, $query in root-defaults.$screen-sizes {
-    @for $i
-      from defaults.$flex-columns-min-count
-      through defaults.$flex-columns-max-count
-    {
-      // For the screen-specific sizes, we can't use custom properties.
-      // It appears that custom properties that are already set, cannot be overwritten
-      // inside of a media query.
-      //
-      // If you do something like `.col-6 .col-lg-3`, the custom properties will only ever
-      // be set to the `.col-6` value.
-      @include screen.up($screen) {
-        #{defaults.$flex-columns-column-selector-prefix}#{$screen}-#{$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}
-          );
-          /* stylelint-enable  scss/operator-no-newline-after */
-          --#{root-defaults.$prefix}flex-columns-max-width: calc(
-            100% / #{defaults.$flex-columns-max-count} * #{$i}
-          );
-
-          &#{defaults.$flex-columns-fill-selector} {
-            --#{root-defaults.$prefix}flex-columns-max-width: unset;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,26 +0,0 @@
-// @graupl/graupl 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}
-);

package/src/scss/mixins/_animation.scss

@@ -1,15 +0,0 @@
-// @graupl/graupl 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/src/scss/mixins/_layer.scss

@@ -1,16 +0,0 @@
-// @graupl/graupl 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/src/scss/mixins/_screen.scss

@@ -1,77 +0,0 @@
-// @graupl/graupl 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/src/scss/mixins/_state.scss

@@ -1,18 +0,0 @@
-// @graupl/graupl 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/src/scss/mixins/_theme.scss

@@ -1,15 +0,0 @@
-// @graupl/graupl 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;
-  }
-}

package/src/scss/mixins/_utility.scss

@@ -1,132 +0,0 @@
-// @graupl/graupl utility mixins.
-//
-// Mixins to help generate utility classes.
-
-@use "./screen";
-@use "./state";
-@use "./theme";
-@use "../functions/important";
-@use "../functions/utility";
-@use "../defaults" as root-defaults;
-
-/// Insert a map of properties and values into a utility class.
-///
-/// @param {Map} $map
-///   The map of properties and values to apply to the selector.
-@mixin _insert($map) {
-  @each $prop, $value in $map {
-    #{$prop}: important.insert($value);
-  }
-
-  // Allow for custom overrides and additional styles.
-  @content;
-}
-
-/// Handles wrapping utilities with a conditional state.
-///
-/// @param {?string} $state
-///   The state to wrap.
-@mixin _handle-state($state: null) {
-  @if $state {
-    @include state.state($state) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-/// Handles wrapping utilities with a conditional screen.
-///
-/// @param {?string} $screen
-///   The screen to wrap.
-@mixin _handle-screen($screen: null) {
-  @if $screen {
-    @include screen.up($screen) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-/// Handles wrapping utilities with a conditional theme.
-///
-/// @param {?string} $theme
-///   The theme mode to wrap.
-@mixin _handle-theme($theme: null) {
-  @if $theme {
-    @include theme.theme($theme) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-/// Create a utility class with a list of properties and a single value.
-///
-/// @param {string}      $selector
-///   The selector to apply the utility class to.
-/// @param {string|List} $property
-///   The property/properties to apply to the selector.
-/// @param {string}      $value
-///   The value to apply to the property/properties.
-/// @param {?string}     $screen
-///   The screen to apply the utility class to.
-/// @param {?string}     $theme
-///   The theme mode to apply the utility class to.
-/// @param {?string}     $state
-///   The state to apply the utility class to.
-@mixin create(
-  $selector,
-  $property,
-  $value,
-  $screen: null,
-  $theme: null,
-  $state: null
-) {
-  $map: utility.convert-property-values-to-map($property, $value);
-
-  @include create-mapped(
-    $selector,
-    $map,
-    $screen: $screen,
-    $theme: $theme,
-    $state: $state
-  ) {
-    @content;
-  }
-}
-
-/// Create a utility class with a map of properties and values.
-///
-/// @param {string}  $selector
-///   The selector to apply the utility class to.
-/// @param {Map}     $map
-///   The map of properties and values to apply to the selector.
-/// @param {?string} $screen
-///   The screen to apply the utility class to.
-/// @param {?string} $theme
-///   The theme mode to apply the utility class to.
-/// @param {?string} $state
-///   The state to apply the utility class to.
-@mixin create-mapped(
-  $selector,
-  $map,
-  $screen: null,
-  $theme: null,
-  $state: null
-) {
-  @include _handle-theme($theme) {
-    #{$selector} {
-      @include _handle-screen($screen) {
-        @include _handle-state($state) {
-          @include _insert($map) {
-            @content;
-          }
-        }
-      }
-    }
-  }
-}

package/src/scss/mixins/_visually-hidden.scss

@@ -1,20 +0,0 @@
-// @graupl/graupl visually hidden mixins.
-
-@mixin apply() {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  margin: -1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  border: 0 !important;
-  white-space: nowrap !important;
-  clip-path: inset(50%) !important;
-}
-
-@mixin focusable() {
-  &:not(:focus, :focus-within) {
-    @include apply;
-  }
-}

package/src/scss/state/_index.scss

@@ -1,3 +0,0 @@
-// @graupl/graupl state styles.
-
-@forward "focus";

package/src/scss/state/focus/_defaults.scss

@@ -1,10 +0,0 @@
-// @graupl/graupl focus state 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.
-
-$focus-outline-style: dotted !default;
-$focus-box-shadow-style: inset !default;

package/src/scss/state/focus/_index.scss

@@ -1,13 +0,0 @@
-// @graupl/graupl focus state styles.
-
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "mixins" as *;
-@use "../../defaults" as root-defaults;
-@use "sass:map";
-
-@each $state in map.get(root-defaults.$state-selectors, focus) {
-  *#{$state} {
-    @include apply-focus;
-  }
-}

package/src/scss/state/focus/_mixins.scss

@@ -1,15 +0,0 @@
-// @graupl/graupl focus state mixins.
-
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "../../defaults" as root-defaults;
-@use "sass:map";
-
-@mixin apply-focus() {
-  @include layer(state) {
-    border-color: transparent;
-    outline: $focus-outline-width $focus-outline-style $focus-outline-color;
-    outline-offset: $focus-outline-offset;
-    box-shadow: $focus-box-shadow;
-  }
-}

package/src/scss/state/focus/_variables.scss

@@ -1,44 +0,0 @@
-// @graupl/graupl focus state variables.
-//
-// These values are to be used to directly style components and provide a
-// cleaner way to reference custom properties.
-
-@use "../../variables" as root-variables;
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../functions/theme";
-
-$focus-width: var(
-  --#{root-defaults.$prefix}focus-width,
-  #{root-variables.$border-width}
-);
-$focus-outline-color: var(
-  --#{root-defaults.$prefix}focus-outline-color,
-  #{theme.get(primary, 900)}
-);
-$focus-outline-width: var(
-  --#{root-defaults.$prefix}focus-outline-width,
-  #{$focus-width}
-);
-$focus-outline-style: var(
-  --#{root-defaults.$prefix}focus-outline-style,
-  #{defaults.$focus-outline-style}
-);
-$focus-outline-offset: var(
-  --#{root-defaults.$prefix}focus-outline-offset,
-  calc(-1 * #{$focus-outline-width})
-);
-$focus-box-shadow-color: var(
-  --#{root-defaults.$prefix}focus-box-shadow-color,
-  #{theme.get(primary, 100)}
-);
-$focus-box-shadow-style: var(
-  --#{root-defaults.$prefix}focus-box-shadow-style,
-  #{defaults.$focus-box-shadow-style}
-);
-$focus-box-shadow: var(
-  --#{root-defaults.$prefix}focus-box-shadow,
-  #{$focus-width $focus-width} 0 0 #{$focus-box-shadow-style}
-    #{$focus-box-shadow-color},
-  0 0 0 #{$focus-width} #{$focus-box-shadow-style} #{$focus-box-shadow-color}
-);

package/src/scss/theme/_index.scss

@@ -1,4 +0,0 @@
-// @graupl/graupl theme styles.
-
-@forward "color";
-@forward "typography";