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

package/src/scss/_normalize.scss

@@ -1,197 +0,0 @@
-// @graupl/graupl normalize.
-//
-// This file is manually forked from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-//
-// We wanted to scope normalize.css to a normalize layer along with some customizations, so we forked it here.
-//
-// @use cannot be used in this file because you cannot insert it into a layer.
-//
-// @import would technically work, but it is not recommended by Sass and will eventually be removed.
-// Using @import would cause headaches down the line, so a manual fork was the best option.
-
-@use "mixins/layer" as *;
-
-@include layer(normalize) {
-  // Correct box sizing of all elements to ensure everything is consistent.
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  // Document.
-
-  // 1. Correct the line height in all browsers.
-  // 2. Prevent adjustments of font size after orientation changes in iOS.
-  html {
-    line-height: 1.15; // 1.
-    text-size-adjust: 100%; // 2.
-  }
-
-  // Secions.
-
-  // Remove the margin in all browsers.
-  body {
-    margin: 0;
-  }
-
-  // Grouping content.
-
-  // Add the correct box sizing in Firefox.
-  hr {
-    box-sizing: content-box;
-    height: 0;
-  }
-
-  // 1. Correct the inheritance and scaling of font size in all browsers.
-  // 2. Correct the odd `em` font sizing in all browsers.
-  pre {
-    font-family: monospace; // 1.
-    font-size: 1em; // 2.
-  }
-
-  // Text-level semantics.
-
-  // 1. Remove the bottom border in Chrome 57-
-  // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-  abbr[title] {
-    border-bottom: 0; // 1.
-    text-decoration: underline dotted; // 2.
-  }
-
-  // Add the correct font weight in Chrome, Edge, and Safari.
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  // 1. Correct the inheritance and scaling of font size in all browsers.
-  // 2. Correct the odd `em` font sizing in all browsers.
-  code,
-  kbd,
-  samp {
-    font-family: monospace; // 1.
-    font-size: 1em; // 2.
-  }
-
-  // Add the correct font size in all browsers.
-  small {
-    font-size: 80%;
-  }
-
-  // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-  sub,
-  sup {
-    position: relative;
-    font-size: 75%;
-    line-height: 0;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  // Forms.
-
-  // 1. Change the font styles in all browsers.
-  // 2. Remove the margin in Firefox and Safari.
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    margin: 0; // 2.
-    font-family: inherit; // 1.
-    font-size: 100%; // 1.
-    line-height: 1.15; // 1.
-  }
-
-  // Remove the inheritance of text transform in Firefox.
-  button,
-  select {
-    /* 1 */
-    text-transform: none;
-  }
-
-  // Correct the inability to style clickable types in iOS and Safari.
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    appearance: button;
-  }
-
-  // Remove the inner border and padding in Firefox.
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-  }
-
-  // Restore the focus styles unset by the previous rule.
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-
-  // Correct the padding in Firefox.
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-
-  // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
-  legend {
-    padding: 0;
-  }
-
-  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-  progress {
-    vertical-align: baseline;
-  }
-
-  // Correct the cursor style of increment and decrement buttons in Chrome.
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  // 1. Correct the odd appearance in Chrome and Safari.
-  // 2. Correct the outline style in Safari.
-  [type="search"] {
-    appearance: textfield; // 1.
-    outline-offset: -2px; // 2.
-  }
-
-  // Remove the inner padding in Chrome and Safari on macOS.
-  [type="search"]::-webkit-search-decoration {
-    appearance: none;
-  }
-
-  // 1. Correct the inability to style clickable types in iOS and Safari.
-  // 2. Change font properties to `inherit` in Safari.
-  ::-webkit-file-upload-button {
-    appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  // Interactive.
-
-  // Add the correct display in Edge, IE 10+, and Firefox.
-  details {
-    display: block;
-  }
-
-  // Add the correct display in all browsers.
-  summary {
-    display: list-item;
-  }
-}

package/src/scss/_variables.scss

@@ -1,53 +0,0 @@
-// @graupl/graupl variables.
-//
-// These values are to be used to directly style components and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "sass:map";
-
-// Layout properties.
-$content-max-width: var(
-  --#{defaults.$prefix}content-max-width,
-  defaults.$content-max-width
-);
-
-// Spacing properties.
-$spacer: var(--#{defaults.$prefix}spacer, defaults.$spacer);
-$spacers: ();
-
-@each $key, $value in defaults.$spacer-multipliers {
-  $space: var(
-    --#{defaults.$prefix}spacer-#{$key},
-    calc(#{$value} * #{$spacer})
-  );
-  $spacers: map.set($spacers, $key, $space);
-}
-
-// Border properties.
-$border-radius: var(
-  --#{defaults.$prefix}border-radius,
-  defaults.$border-radius
-);
-$border-width: var(--#{defaults.$prefix}border-width, defaults.$border-width);
-$border-style: var(--#{defaults.$prefix}border-style, defaults.$border-style);
-
-// Transition properties.
-$transition-durations: (
-  fast: var(
-      --#{defaults.$prefix}transition-duration-fast,
-      map.get(defaults.$transition-durations, fast)
-    ),
-  default: var(
-      --#{defaults.$prefix}transition-duration-default,
-      map.get(defaults.$transition-durations, default)
-    ),
-  slow: var(
-      --#{defaults.$prefix}transition-duration-slow,
-      map.get(defaults.$transition-durations, slow)
-    ),
-);
-$transition-timing-function: var(
-  --#{defaults.$prefix}transition-timing-function,
-  defaults.$transition-timing-function
-);

package/src/scss/base/_index.scss

@@ -1,6 +0,0 @@
-// @graupl/graupl base styles.
-
-@forward "button";
-@forward "form";
-@forward "link";
-@forward "table";

package/src/scss/base/button/_defaults.scss

@@ -1,60 +0,0 @@
-// @graupl/graupl button base default values.
-//
-// Generally, these should not be used directly when styling bases 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";
-
-// Button selectors.
-$button-selector: ".button" !default;
-$button-link-selector: ".link" !default;
-$button-theme-selector-prefix: "." !default;
-
-// State selectors.
-$button-active-selector: ".active" !default;
-$button-disabled-selector: ".disabled" !default;
-$button-focus-selector: ".focus" !default;
-$button-hover-selector: ".hover" !default;
-$button-visited-selector: ".visited" !default;
-
-// Button properties.
-$button-transform: none !default;
-$button-visited-transform: $button-transform !default;
-$button-focus-transform: $button-transform !default;
-$button-hover-transform: $button-transform !default;
-$button-active-transform: scale(0.95) !default;
-$button-disabled-transform: $button-transform !default;
-
-// Button state theme defaults.
-// This map is used to define the default colour shades for the
-// themed button bases.
-//
-// e.g.
-// Primary buttons will use primary--900 as the text colour, primary--100 as the background
-// and primary--900 as the border colour.
-//
-// Secondary/tertiary buttons will use the same shade for their respective colours.
-$base-button-state-theme-map: (
-  color: 900,
-  border-color: 700,
-  visited-color: 900,
-  visited-border-color: 700,
-  focus-color: 900,
-  focus-border-color: 700,
-  hover-color: 100,
-  hover-background: 700,
-  hover-border-color: 700,
-  active-color: 100,
-  active-background: 700,
-  active-border-color: 700,
-  disabled-color: 200,
-  disabled-border-color: 200,
-);
-$custom-button-state-theme-map: () !default;
-$button-state-theme-map: map.merge(
-  $base-button-state-theme-map,
-  $custom-button-state-theme-map
-);

package/src/scss/base/button/_index.scss

@@ -1,107 +0,0 @@
-// @graupl/graupl button base styles.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../link/defaults" as link-defaults;
-@use "../../base/link/variables" as link;
-@use "variables" as *;
-@use "mixins" as *;
-@use "../../mixins/layer" as *;
-
-#{defaults.$button-selector} {
-  @include apply-button;
-
-  &#{defaults.$button-link-selector} {
-    --#{root-defaults.$prefix}button-padding: #{link.$link-padding};
-    --#{root-defaults.$prefix}button-transition: #{link.$link-transition};
-    --#{root-defaults.$prefix}button-transition-reduced-motion: #{link.$link-transition-reduced-motion};
-    --#{root-defaults.$prefix}button-transform: #{link.$link-transform};
-    --#{root-defaults.$prefix}button-visited-transform: #{link.$link-visited-transform};
-    --#{root-defaults.$prefix}button-focus-transform: #{link.$link-transform};
-    --#{root-defaults.$prefix}button-hover-transform: #{link.$link-hover-transform};
-    --#{root-defaults.$prefix}button-active-transform: #{link.$link-active-transform};
-    --#{root-defaults.$prefix}button-border-width: #{link.$link-border-width};
-    --#{root-defaults.$prefix}button-border-style: #{link.$link-border-style};
-    --#{root-defaults.$prefix}button-border-radius: #{link.$link-border-radius};
-    --#{root-defaults.$prefix}button-min-width: #{link.$link-min-width};
-    --#{root-defaults.$prefix}button-min-height: #{link.$link-min-height};
-    --#{root-defaults.$prefix}button-font-size: inherit;
-
-    text-decoration: link.$link-text-decoration;
-    text-decoration-thickness: link.$link-text-decoration-thickness;
-    text-decoration-style: link.$link-text-decoration-style;
-  }
-}
-
-@include layer(base) {
-  #{defaults.$button-selector}#{defaults.$button-link-selector} {
-    --#{root-defaults.$prefix}button-color: #{link.$link-color};
-    --#{root-defaults.$prefix}button-visited-color: #{link.$link-visited-color};
-    --#{root-defaults.$prefix}button-focus-color: #{link.$link-focus-color};
-    --#{root-defaults.$prefix}button-hover-color: #{link.$link-hover-color};
-    --#{root-defaults.$prefix}button-active-color: #{link.$link-active-color};
-    --#{root-defaults.$prefix}button-disabled-color: #{link.$link-disabled-color};
-    --#{root-defaults.$prefix}button-background: #{link.$link-background};
-    --#{root-defaults.$prefix}button-visited-background: #{link.$link-visited-background};
-    --#{root-defaults.$prefix}button-focus-background: #{link.$link-focus-background};
-    --#{root-defaults.$prefix}button-hover-background: #{link.$link-hover-background};
-    --#{root-defaults.$prefix}button-active-background: #{link.$link-active-background};
-    --#{root-defaults.$prefix}button-disabled-background: #{link.$link-disabled-background};
-    --#{root-defaults.$prefix}button-border-color: #{link.$link-border-color};
-    --#{root-defaults.$prefix}button-visited-border-color: #{link.$link-visited-border-color};
-    --#{root-defaults.$prefix}button-focus-border-color: #{link.$link-focus-border-color};
-    --#{root-defaults.$prefix}button-hover-border-color: #{link.$link-hover-border-color};
-    --#{root-defaults.$prefix}button-active-border-color: #{link.$link-active-border-color};
-    --#{root-defaults.$prefix}button-disabled-border-color: #{link.$link-disabled-border-color};
-  }
-
-  #{link-defaults.$link-selector} {
-    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
-      --#{root-defaults.$prefix}link-padding: #{$button-padding};
-      --#{root-defaults.$prefix}link-transition: #{$button-transition};
-      --#{root-defaults.$prefix}link-transition-reduced-motion: #{$button-transition-reduced-motion};
-      --#{root-defaults.$prefix}link-transform: #{$button-transform};
-      --#{root-defaults.$prefix}link-visited-transform: #{$button-visited-transform};
-      --#{root-defaults.$prefix}link-focus-transform: #{$button-focus-transform};
-      --#{root-defaults.$prefix}link-hover-transform: #{$button-hover-transform};
-      --#{root-defaults.$prefix}link-active-transform: #{$button-active-transform};
-      --#{root-defaults.$prefix}link-disabled-transform: #{$button-disabled-transform};
-      --#{root-defaults.$prefix}link-border-width: #{$button-border-width};
-      --#{root-defaults.$prefix}link-border-style: #{$button-border-style};
-      --#{root-defaults.$prefix}link-border-radius: #{$button-border-radius};
-      --#{root-defaults.$prefix}link-min-width: #{$button-min-width};
-      --#{root-defaults.$prefix}link-min-height: #{$button-min-height};
-      --#{root-defaults.$prefix}link-text-decoration: none;
-      --#{root-defaults.$prefix}link-visited-text-decoration: none;
-      --#{root-defaults.$prefix}link-focus-text-decoration: none;
-      --#{root-defaults.$prefix}link-hover-text-decoration: none;
-      --#{root-defaults.$prefix}link-active-text-decoration: none;
-      --#{root-defaults.$prefix}link-disabled-text-decoration: none;
-    }
-  }
-}
-
-@include layer(theme) {
-  #{link-defaults.$link-selector} {
-    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
-      --#{root-defaults.$prefix}link-color: #{$button-color};
-      --#{root-defaults.$prefix}link-visited-color: #{$button-visited-color};
-      --#{root-defaults.$prefix}link-focus-color: #{$button-focus-color};
-      --#{root-defaults.$prefix}link-hover-color: #{$button-hover-color};
-      --#{root-defaults.$prefix}link-active-color: #{$button-active-color};
-      --#{root-defaults.$prefix}link-disabled-color: #{$button-disabled-color};
-      --#{root-defaults.$prefix}link-background: #{$button-background};
-      --#{root-defaults.$prefix}link-visited-background: #{$button-visited-background};
-      --#{root-defaults.$prefix}link-focus-background: #{$button-focus-background};
-      --#{root-defaults.$prefix}link-hover-background: #{$button-hover-background};
-      --#{root-defaults.$prefix}link-active-background: #{$button-active-background};
-      --#{root-defaults.$prefix}link-disabled-background: #{$button-disabled-background};
-      --#{root-defaults.$prefix}link-border-color: #{$button-border-color};
-      --#{root-defaults.$prefix}link-visited-border-color: #{$button-visited-border-color};
-      --#{root-defaults.$prefix}link-focus-border-color: #{$button-focus-border-color};
-      --#{root-defaults.$prefix}link-hover-border-color: #{$button-hover-border-color};
-      --#{root-defaults.$prefix}link-active-border-color: #{$button-active-border-color};
-      --#{root-defaults.$prefix}link-disabled-border-color: #{$button-disabled-border-color};
-    }
-  }
-}

package/src/scss/base/button/_mixins.scss

@@ -1,166 +0,0 @@
-// @graupl/graupl button base styles.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../theme/color/variables" as color;
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "../../mixins/animation";
-@use "../../functions/theme";
-@use "sass:map";
-
-@mixin apply-button(
-  $min-width: $button-min-width,
-  $min-height: $button-min-height,
-  $padding: $button-padding,
-  $transform: $button-transform,
-  $transition: $button-transition,
-  $border: $button-border,
-  $border-radius: $button-border-radius,
-  $font-size: $button-font-size,
-  $visited-transform: $button-visited-transform,
-  $focus-transform: $button-focus-transform,
-  $hover-transform: $button-hover-transform,
-  $active-transform: $button-active-transform,
-  $disabled-transform: $button-disabled-transform,
-  $border-color: $button-border-color,
-  $background: $button-background,
-  $color: $button-color,
-  $visited-border-color: $button-visited-border-color,
-  $visited-background: $button-visited-background,
-  $visited-color: $button-visited-color,
-  $focus-border-color: $button-focus-border-color,
-  $focus-background: $button-focus-background,
-  $focus-color: $button-focus-color,
-  $hover-border-color: $button-hover-border-color,
-  $hover-background: $button-hover-background,
-  $hover-color: $button-hover-color,
-  $active-border-color: $button-active-border-color,
-  $active-background: $button-active-background,
-  $active-color: $button-active-color,
-  $disabled-border-color: $button-disabled-border-color,
-  $disabled-background: $button-disabled-background,
-  $disabled-color: $button-disabled-color
-) {
-  @include layer(base) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: $min-width;
-    min-height: $min-height;
-    padding: $padding;
-    transform: $transform;
-    transition: $transition;
-    border: $border;
-    border-radius: $border-radius;
-    font-size: $font-size;
-    cursor: pointer;
-
-    @each $selector in map.get(root-defaults.$state-selectors, visited) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-transform: #{$visited-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, focus) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-transform: #{$focus-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, hover) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-transform: #{$hover-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, active) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-transform: #{$active-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
-      &#{$selector} {
-        @each $state, $selectors in root-defaults.$state-selectors {
-          @each $selector in $selectors {
-            &,
-            &#{$selector} {
-              --#{root-defaults.$prefix}button-transform: #{$disabled-transform};
-
-              cursor: not-allowed;
-            }
-          }
-        }
-      }
-    }
-
-    @include animation.off {
-      --#{root-defaults.$prefix}button-transition: #{$button-transition-reduced-motion};
-    }
-  }
-
-  @include layer(theme) {
-    border-color: $border-color;
-    background: $background;
-    color: $color;
-
-    @each $color, $map in map.get(color.$themes, active) {
-      &#{defaults.$button-theme-selector-prefix}#{$color} {
-        @each $prop, $shade in defaults.$button-state-theme-map {
-          --#{root-defaults.$prefix}button-#{$prop}: #{theme.get(
-              $color,
-              $shade
-            )};
-        }
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, visited) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-border-color: #{$visited-border-color};
-        --#{root-defaults.$prefix}button-background: #{$visited-background};
-        --#{root-defaults.$prefix}button-color: #{$visited-color};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, focus) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-border-color: #{$focus-border-color};
-        --#{root-defaults.$prefix}button-background: #{$focus-background};
-        --#{root-defaults.$prefix}button-color: #{$focus-color};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, hover) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-border-color: #{$hover-border-color};
-        --#{root-defaults.$prefix}button-background: #{$hover-background};
-        --#{root-defaults.$prefix}button-color: #{$hover-color};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, active) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-border-color: #{$active-border-color};
-        --#{root-defaults.$prefix}button-background: #{$active-background};
-        --#{root-defaults.$prefix}button-color: #{$active-color};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
-      &#{$selector} {
-        @each $state, $selectors in root-defaults.$state-selectors {
-          @each $selector in $selectors {
-            &,
-            &#{$selector} {
-              --#{root-defaults.$prefix}button-border-color: #{$disabled-border-color};
-              --#{root-defaults.$prefix}button-background: #{$disabled-background};
-              --#{root-defaults.$prefix}button-color: #{$disabled-color};
-            }
-          }
-        }
-      }
-    }
-  }
-}