@graupl/graupl 1.0.0-alpha.9 → 1.0.0-beta.0

package/src/scss/_normalize.scss

@@ -0,0 +1,197 @@
+// @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,4 +1,7 @@
-// Variables referencing custom properties.
+// @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";
@@ -31,18 +34,15 @@ $border-style: var(--#{defaults.$prefix}-border-style, defaults.$border-style);
 
 // Transition properties.
 $transition-durations: (
-  fast:
-    var(
+  fast: var(
       --#{defaults.$prefix}-transition-duration-fast,
       map.get(defaults.$transition-durations, fast)
     ),
-  default:
-    var(
+  default: var(
       --#{defaults.$prefix}-transition-duration-default,
       map.get(defaults.$transition-durations, default)
     ),
-  slow:
-    var(
+  slow: var(
       --#{defaults.$prefix}-transition-duration-slow,
       map.get(defaults.$transition-durations, slow)
     ),

package/src/scss/base/_index.scss

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

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

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

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

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