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

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,12 +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) {
-  @layer #{root-defaults.$prefix}.#{$layer} {
-    @content;
-  }
-}

package/src/scss/mixins/_screen.scss

@@ -1,56 +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:list";
-@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) {
-  $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);
-  $mixin-name: map.get($screen-size-trigger, "mixin");
-  $mixin-args: map.get($screen-size-trigger, "args");
-  $mixin: meta.get-mixin($mixin-name);
-
-  @include meta.apply($mixin, $mixin-args...) {
-    @content;
-  }
-}

package/src/scss/mixins/_utility.scss

@@ -1,30 +0,0 @@
-// @graupl/graupl utility mixins.
-//
-// Mixins to help generate utility classes.
-
-@use "./screen";
-@use "../functions/important";
-@use "../defaults" as root-defaults;
-@use "sass:map";
-
-@mixin create($selector, $property, $value, $breakpoint: false) {
-  #{$selector} {
-    @if $breakpoint {
-      @include screen.up($breakpoint) {
-        @each $prop in $property {
-          #{$prop}: important.insert($value);
-        }
-
-        // Allow for custom overrides and additional styles.
-        @content;
-      }
-    } @else {
-      @each $prop in $property {
-        #{$prop}: important.insert($value);
-      }
-
-      // Allow for custom overrides and additional styles.
-      @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";

package/src/scss/theme/color/_defaults.scss

@@ -1,143 +0,0 @@
-// @graupl/graupl color theme 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 "sass:map";
-@use "sass:list";
-
-$theme-selector-prefix: "." !default;
-$theme-selector-suffix: "-mode" !default;
-
-// The site will have colours, defaulting to primary, secondary, and tertiary.
-// Each colour will have a shade mapping, defaulting to 100-900.
-// Users can add custom colours/overrides for both colours and shades.
-
-// The site will use themes, defaulting to light and dark.
-// Users can add custom themes/overrides.
-
-// Each theme will have a mapping of colours, defaulting to cover all colours and shades.
-// Users can add custom mappings/overrides.
-
-// The combinations of colours, themes, and shades will be combined into a giant map.
-// It will be sorted by theme > color > shade where each shade is derived from the mapping.
-// Users can override any part of this giant map, allowing for fine-tuned control of theme colours.
-
-// Colours.
-$default-colors: (
-  primary: (
-    100: hsl(219deg 100% 95%),
-    200: hsl(219deg 90% 80%),
-    300: hsl(219deg 80% 65%),
-    400: hsl(219deg 75% 55%),
-    500: hsl(219deg 75% 50%),
-    600: hsl(219deg 75% 45%),
-    700: hsl(219deg 80% 35%),
-    800: hsl(219deg 90% 20%),
-    900: hsl(219deg 100% 10%),
-  ),
-  secondary: (
-    100: hsl(235deg 40% 95%),
-    200: hsl(235deg 30% 80%),
-    300: hsl(235deg 20% 65%),
-    400: hsl(235deg 15% 55%),
-    500: hsl(235deg 15% 50%),
-    600: hsl(235deg 15% 45%),
-    700: hsl(235deg 20% 35%),
-    800: hsl(235deg 30% 20%),
-    900: hsl(235deg 40% 10%),
-  ),
-  tertiary: (
-    100: hsl(340deg 85% 95%),
-    200: hsl(340deg 75% 80%),
-    300: hsl(340deg 65% 65%),
-    400: hsl(340deg 60% 55%),
-    500: hsl(340deg 60% 50%),
-    600: hsl(340deg 60% 45%),
-    700: hsl(340deg 65% 35%),
-    800: hsl(340deg 75% 20%),
-    900: hsl(340deg 85% 10%),
-  ),
-);
-$custom-colors: () !default;
-$colors: map.deep-merge($default-colors, $custom-colors);
-
-// Themes.
-$default-themes: (light, dark);
-$custom-themes: () !default;
-$themes: list.join($default-themes, $custom-themes);
-$default-theme: light !default;
-
-// Theme mappings.
-$default-theme-mappings: (
-  light: (
-    100: 100,
-    200: 200,
-    300: 300,
-    400: 400,
-    500: 500,
-    600: 600,
-    700: 700,
-    800: 800,
-    900: 900,
-  ),
-  dark: (
-    100: 900,
-    200: 800,
-    300: 700,
-    400: 600,
-    500: 500,
-    600: 400,
-    700: 300,
-    800: 200,
-    900: 100,
-  ),
-);
-$custom-theme-mappings: () !default;
-$theme-mappings: map.deep-merge(
-  $default-theme-mappings,
-  $custom-theme-mappings
-);
-
-// Theme map.
-$default-theme-map: ();
-
-@each $theme in $themes {
-  $theme-map: ();
-
-  @each $color-name, $color-map in $colors {
-    $color-theme-map: ();
-
-    @each $shade, $value in $color-map {
-      $color-theme-map: map.merge(
-        $color-theme-map,
-        (
-          $shade: (
-              color: $color-name,
-              shade: map.get($theme-mappings, $theme, $shade),
-            ),
-        )
-      );
-    }
-
-    $theme-map: map.merge(
-      $theme-map,
-      (
-        $color-name: $color-theme-map,
-      )
-    );
-  }
-
-  $default-theme-map: map.merge(
-    $default-theme-map,
-    (
-      $theme: $theme-map,
-    )
-  );
-}
-
-$custom-theme-map: () !default;
-$theme-map: map.deep-merge($default-theme-map, $custom-theme-map);

package/src/scss/theme/color/_index.scss

@@ -1,42 +0,0 @@
-// @graupl/graupl color theme styles.
-
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "sass:map";
-@use "../../functions/theme";
-
-@include layer(theme) {
-  :root {
-    background: $root-background;
-    color: $root-color;
-
-    // Generate the default colour properties.
-    @each $color, $map in defaults.$colors {
-      @each $shade, $value in $map {
-        --#{root-defaults.$prefix}#{$color}--#{$shade}: #{$value};
-      }
-    }
-
-    // Generate the active theme properties.
-    @each $color, $map in map.get($themes, defaults.$default-theme) {
-      @each $shade, $value in $map {
-        --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
-      }
-    }
-  }
-
-  // Generate the available theme properties.
-  @each $theme-name, $theme in $themes {
-    #{defaults.$theme-selector-prefix}#{$theme-name}#{defaults.$theme-selector-suffix} {
-      @each $color, $map in $theme {
-        @each $shade, $value in $map {
-          --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
-        }
-      }
-
-      color-scheme: #{$theme-name};
-    }
-  }
-}