@graupl/graupl 1.0.0-alpha.11 → 1.0.0-alpha.12

package/scss/utilities/spacing.scss

@@ -1,3 +1,3 @@
-// Graupl spacing utilities.
+// @graupl/graupl spacing utilities.
 
 @forward "../../src/scss/utilities/spacing";

package/scss/utilities/typography.scss

@@ -1,3 +1,3 @@
-// Graupl typography utilities.
+// @graupl/graupl typography utilities.
 
 @forward "../../src/scss/utilities/typography";

package/scss/utilities/visibility.scss

@@ -1,3 +1,3 @@
-// Graupl visibility utilities.
+// @graupl/graupl visibility utilities.
 
 @forward "../../src/scss/utilities/visibility";

package/scss/utilities.scss

@@ -1,3 +1,3 @@
-// Graupl utilities.
+// @graupl/graupl utilities.
 
 @forward "../src/scss/utilities";

package/src/scss/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

package/src/scss/_index.scss

@@ -1,10 +1,11 @@
-// Graupl Components.
-//
-// Forwards all components for easy development.
+// @graupl/graupl styles.
 
 // Forward the layer initialization.
 @forward "init";
 
+// Forward normalize.
+@forward "normalize";
+
 // Forward all layers.
 @forward "base";
 @forward "layout";

package/src/scss/_init.scss

@@ -1,3 +1,3 @@
-// Graupl layer initialization.
+// @graupl/graupl layer initialization styles.
 
-@layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;
+@layer graupl.normalize, graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;

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";

package/src/scss/base/_index.scss

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

package/src/scss/{component → base}/button/_defaults.scss

@@ -1,11 +1,20 @@
-// Default values for Graupl.
+// @graupl/graupl button base default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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;
+
+// Button properties.
+$button-transform: none !default;
 $button-hover-transform: none !default;
 $button-hover-transform-reduced-motion: none !default;
 $button-active-transform: scale(0.95) !default;
@@ -13,7 +22,7 @@ $button-active-transform-reduced-motion: scale(0.98) !default;
 
 // Button state theme defaults.
 // This map is used to define the default colour shades for the
-// themed button components.
+// themed button bases.
 //
 // e.g.
 // Primary buttons will use primary--900 as the text colour, primary--100 as the background

package/src/scss/{component → base}/button/_index.scss

@@ -1,4 +1,4 @@
-// Graupl Button Component.
+// @gruapl/graupl button base styles.
 
 @use "defaults";
 @use "../../defaults" as root-defaults;
@@ -9,14 +9,15 @@
 @use "../../mixins/media-queries" as *;
 @use "sass:map";
 
-@include layer(component) {
-  .button {
+@include layer(base) {
+  #{defaults.$button-selector} {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: $button-min-width;
     min-height: $button-min-height;
     padding: $button-padding;
+    transform: $button-transform;
     transition: $button-transition;
     border-width: $button-border-width;
     border-style: $button-border-style;
@@ -25,14 +26,25 @@
     cursor: pointer;
 
     &:hover {
-      transform: $button-hover-transform;
+      --#{root-defaults.$prefix}-button-transform: #{$button-hover-transform};
     }
 
     &:active {
-      transform: $button-active-transform;
+      --#{root-defaults.$prefix}-button-transform: #{$button-active-transform};
     }
 
-    &:disabled {
+    &:not(#{defaults.$button-link-selector}) {
+      --#{root-defaults.$prefix}-link-text-decoration: none;
+      --#{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-hover-transform: #{$button-hover-transform};
+      --#{root-defaults.$prefix}-link-active-transform: #{$button-active-transform};
+    }
+
+    &:disabled,
+    &[disabled] {
       cursor: not-allowed;
 
       &:hover,
@@ -41,10 +53,16 @@
       }
     }
 
-    &.link {
+    &#{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-hover-transform: #{link.$link-hover-transform};
+      --#{root-defaults.$prefix}-button-active-transform: #{link.$link-active-transform};
+
       min-width: auto;
       min-height: auto;
-      padding: 0;
       border: 0;
       font-size: inherit;
       text-decoration: link.$link-text-decoration;
@@ -53,43 +71,37 @@
   }
 
   @include animation-off {
-    .button {
-      transition: $button-transition-reduced-motion;
-
-      &:hover {
-        transform: $button-hover-transform-reduced-motion;
-      }
-
-      &:active {
-        transform: $button-active-transform-reduced-motion;
-      }
+    #{defaults.$button-selector} {
+      --#{root-defaults.$prefix}-button-transition: #{$button-transition-reduced-motion};
+      --#{root-defaults.$prefix}-button-hover-transform: #{$button-hover-transform-reduced-motion};
+      --#{root-defaults.$prefix}-button-active-transform: #{$button-active-transform-reduced-motion};
     }
   }
 }
 
 @include layer(theme) {
-  .button {
+  #{defaults.$button-selector} {
     border-color: $button-border-color;
     background: $button-background;
     color: $button-color;
 
     @each $color, $map in color.$theme-active {
-      &.#{$color} {
+      &#{defaults.$button-theme-selector-prefix}#{$color} {
         @each $prop, $shade in defaults.$button-state-theme-map {
           --#{root-defaults.$prefix}-button-#{$prop}: #{map.get($map, $shade)};
         }
       }
     }
 
-    &.link {
+    &#{defaults.$button-link-selector} {
       --#{root-defaults.$prefix}-button-color: #{link.$link-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: none;
-      --#{root-defaults.$prefix}-button-hover-background: none;
-      --#{root-defaults.$prefix}-button-active-background: none;
-      --#{root-defaults.$prefix}-button-disabled-background: none;
+      --#{root-defaults.$prefix}-button-background: #{link.$link-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: none;
       --#{root-defaults.$prefix}-button-hover-border-color: none;
       --#{root-defaults.$prefix}-button-active-border-color: none;
@@ -98,7 +110,7 @@
       --#{root-defaults.$prefix}-button-active-transform: none;
     }
 
-    &:not(.link) {
+    &:not(#{defaults.$button-link-selector}) {
       --#{root-defaults.$prefix}-link-color: #{$button-color};
       --#{root-defaults.$prefix}-link-hover-color: #{$button-hover-color};
       --#{root-defaults.$prefix}-link-active-color: #{$button-active-color};
@@ -118,7 +130,8 @@
       --#{root-defaults.$prefix}-button-color: #{$button-active-color};
     }
 
-    &:disabled {
+    &:disabled,
+    &[disabled] {
       --#{root-defaults.$prefix}-button-border-color: #{$button-disabled-border-color};
       --#{root-defaults.$prefix}-button-background: #{$button-disabled-background};
       --#{root-defaults.$prefix}-button-color: #{$button-disabled-color};

package/src/scss/{component → base}/button/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl button base variables.
+//
+// These values are to be used to directly style bases and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "../../variables" as root-variables;
@@ -46,6 +49,10 @@ $button-transition-reduced-motion: var(
 );
 
 // Transform properties.
+$button-transform: var(
+  --#{root-defaults.$prefix}-button-transform,
+  #{defaults.$button-transform}
+);
 $button-hover-transform: var(
   --#{root-defaults.$prefix}-button-hover-transform,
   #{defaults.$button-hover-transform}

package/src/scss/base/form/_defaults.scss

@@ -1,7 +1,17 @@
-// Default values for Graupl.
+// @graupl/graupl form base default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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.
+
+// Form selectors.
+$input-selector: "input" !default;
+$textarea-selector: "textarea" !default;
+$select-selector: "select" !default;
+$label-selector: "label" !default;
+$fieldset-selector: "fieldset" !default;
 
+// Fieldset properties.
 $fieldset-direction: column !default;

package/src/scss/base/form/_index.scss

@@ -1,12 +1,13 @@
-// Graupl form base styles.
+// @gruapl/graupl form base styles.
 
+@use "defaults";
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 
 @include layer(base) {
-  input,
-  textarea,
-  select {
+  #{defaults.$input-selector},
+  #{defaults.$textarea-selector},
+  #{defaults.$select-selector} {
     padding: $input-padding;
     border-width: $input-border-width;
     border-style: $input-border-style;
@@ -18,11 +19,11 @@
     }
   }
 
-  label {
+  #{defaults.$label-selector} {
     font-size: $label-font-size;
   }
 
-  fieldset {
+  #{defaults.$fieldset-selector} {
     display: flex;
     flex-flow: $fieldset-direction wrap;
     gap: $fieldset-gap;
@@ -33,9 +34,9 @@
     font-size: $fieldset-font-size;
 
     &:disabled {
-      input,
-      textarea,
-      select {
+      #{defaults.$input-selector},
+      #{defaults.$textarea-selector},
+      #{defaults.$select-selector} {
         cursor: not-allowed;
       }
     }
@@ -43,9 +44,9 @@
 }
 
 @include layer(theme) {
-  input,
-  textarea,
-  select {
+  #{defaults.$input-selector},
+  #{defaults.$textarea-selector},
+  #{defaults.$select-selector} {
     border-color: $input-border-color;
     background: $input-background;
     color: $input-color;
@@ -65,15 +66,19 @@
     }
   }
 
-  label {
+  #{defaults.$label-selector} {
     color: $label-color;
 
-    &:has(+ input:disabled, + textarea:disabled, + select:disabled) {
+    &:has(
+        + #{defaults.$input-selector}:disabled,
+        + #{defaults.$textarea-selector}:disabled,
+        + #{defaults.$select-selector}:disabled
+      ) {
       color: $label-disabled-color;
     }
   }
 
-  fieldset {
+  #{defaults.$fieldset-selector} {
     border-color: $fieldset-border-color;
     background: $fieldset-background;
     color: $fieldset-color;
@@ -82,7 +87,7 @@
       border-color: $fieldset-disabled-border-color;
       color: $fieldset-disabled-color;
 
-      label {
+      #{defaults.$label-selector} {
         color: $label-disabled-color;
       }
     }

package/src/scss/base/form/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl form base variables.
+//
+// These values are to be used to directly style bases and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "../../variables" as root-variables;

package/src/scss/base/link/_defaults.scss

@@ -1,7 +1,19 @@
-// Default values for Graupl.
+// @graupl/graupl link base default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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.
+
+// Link selectors.
+$link-selector: "a" !default;
 
+// Link properties.
 $link-text-decoration: underline;
+$link-hover-text-decoration: underline;
+$link-transform: none !default;
+$link-hover-transform: none !default;
+$link-hover-transform-reduced-motion: none !default;
+$link-active-transform: none !default;
+$link-active-transform-reduced-motion: none !default;