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

package/src/scss/utilities/justification/_index.scss

@@ -0,0 +1,29 @@
+// Graupl justification utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each justify content property, create a utility class.
+  @each $name, $property in defaults.$justify-content-properties {
+    .#{defaults.$justify-content-class-prefix}#{$name} {
+      justify-content: important.insert($property);
+    }
+  }
+
+  // For each justify items property, create a utility class.
+  @each $name, $property in defaults.$justify-items-properties {
+    .#{defaults.$justify-items-class-prefix}#{$name} {
+      justify-items: important.insert($property);
+    }
+  }
+
+  // For each justify self property, create a utility class.
+  @each $name, $property in defaults.$justify-self-properties {
+    .#{defaults.$justify-self-class-prefix}#{$name} {
+      justify-self: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/justification/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/list/_defaults.scss

@@ -0,0 +1,34 @@
+// Default values for Graupl.
+//
+// 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.
+
+@use "sass:map";
+
+// List style type properties.
+$list-style-type-class-prefix: "list-style-" !default;
+$base-list-style-type-properties: (
+  none: none,
+  disc: disc,
+  decimal: decimal,
+  circle: circle,
+  square: square,
+);
+$custom-list-style-type-properties: () !default;
+$list-style-type-properties: map.merge(
+  $base-list-style-type-properties,
+  $custom-list-style-type-properties
+);
+
+// List style position properties.
+$list-style-postion-class-prefix: "list-style-" !default;
+$base-list-style-postion-properties: (
+  inside: inside,
+  outside: outside,
+);
+$custom-list-style-postion-properties: () !default;
+$list-style-postion-properties: map.merge(
+  $base-list-style-postion-properties,
+  $custom-list-style-postion-properties
+);

package/src/scss/utilities/list/_index.scss

@@ -0,0 +1,22 @@
+// Graupl visibility utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each list style type property, create a utility class.
+  @each $name, $property in defaults.$list-style-type-properties {
+    .#{defaults.$list-style-type-class-prefix}#{$name} {
+      list-style-type: important.insert($property);
+    }
+  }
+
+  // For each list style position property, create a utility class.
+  @each $name, $property in defaults.$list-style-postion-properties {
+    .#{defaults.$list-style-type-class-prefix}#{$name} {
+      list-style-position: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/list/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/position/_defaults.scss

@@ -0,0 +1,21 @@
+// Default values for Graupl.
+//
+// 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.
+
+@use "sass:map";
+
+$position-class-prefix: "position-" !default;
+$base-position-properties: (
+  static: static,
+  fixed: fixed,
+  absolute: absolute,
+  relative: relative,
+  sticky: sticky,
+);
+$custom-position-properties: () !default;
+$position-properties: map.merge(
+  $base-position-properties,
+  $custom-position-properties
+);

package/src/scss/utilities/position/_index.scss

@@ -0,0 +1,15 @@
+// Graupl position utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each position property, create a utility class.
+  @each $name, $property in defaults.$position-properties {
+    .#{defaults.$position-class-prefix}#{$name} {
+      position: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/position/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/spacing/_defaults.scss

@@ -0,0 +1,44 @@
+// Default values for Graupl.
+//
+// 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.
+
+@use "sass:map";
+
+$base-spacing-properties: (
+  g: gap,
+  rg: row-gap,
+  cg: column-gap,
+  p: padding,
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+  px: padding-left padding-right,
+  py: padding-top padding-bottom,
+  pbs: padding-block-start,
+  pbe: padding-block-end,
+  pbse: padding-block-start padding-block-end,
+  pis: padding-inline-start,
+  pie: padding-inline-end,
+  pise: padding-inline-start padding-inline-end,
+  m: margin,
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  mx: margin-left margin-right,
+  my: margin-top margin-bottom,
+  mbs: margin-block-start,
+  mbe: margin-block-end,
+  mbse: margin-block-start margin-block-end,
+  mis: margin-inline-start,
+  mie: margin-inline-end,
+  mise: margin-inline-start margin-inline-end,
+);
+$custom-spacing-properties: () !default;
+$spacing-properties: map.merge(
+  $base-spacing-properties,
+  $custom-spacing-properties
+);

package/src/scss/utilities/spacing/_index.scss

@@ -0,0 +1,64 @@
+// Graupl spacing utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+
+@include layer(utilities) {
+  // For each spacing property, create a utility class.
+  @each $name, $property in defaults.$spacing-properties {
+    @each $key, $value in root-variables.$spacers {
+      .#{$name}-#{$key} {
+        // If we're dealing with gap, column-gap, or row-gap inside of .columns, we should update
+        // the columns-column-gap property instead of the raw property.
+        @if $name == "g" {
+          &.columns {
+            --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+                $value
+              )};
+            --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          &:not(.columns) {
+            @each $prop in $property {
+              #{$prop}: important.insert($value);
+            }
+          }
+        } @else if $name == "cg" {
+          &.columns {
+            --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          &:not(.columns) {
+            @each $prop in $property {
+              #{$prop}: important.insert($value);
+            }
+          }
+        } @else if $name == "rg" {
+          &.columns {
+            --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          &:not(.columns) {
+            @each $prop in $property {
+              #{$prop}: important.insert($value);
+            }
+          }
+        } @else {
+          @each $prop in $property {
+            #{$prop}: important.insert($value);
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/utilities/spacing/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/typography/_defaults.scss

@@ -0,0 +1,25 @@
+// Default values for Graupl.
+//
+// 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.
+
+@use "sass:map";
+
+// Text size properties.
+$text-class-prefix: "text-" !default;
+
+// Font weight properties.
+$font-weight-class-prefix: "font-" !default;
+
+// Font style properties.
+$font-style-class-prefix: "font-" !default;
+$base-font-style-properties: (
+  normal: normal,
+  italic: italic,
+);
+$custom-font-style-properties: () !default;
+$font-style-properties: map.merge(
+  $base-font-style-properties,
+  $custom-font-style-properties
+);

package/src/scss/utilities/typography/_index.scss

@@ -0,0 +1,95 @@
+// Graupl typography utilities.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+@use "../../theme/typography/variables" as typography;
+
+@include layer(utilities) {
+  // For each font size property, create a utility class.
+  @each $size, $value in typography.$font-sizes {
+    .#{defaults.$text-class-prefix}#{$size} {
+      font-size: important.insert($value);
+    }
+  }
+
+  // Create utility classes for each type of text style in Graupl.
+  // These will apply not only the font size, but also the margin, font weight, and line height.
+  // This will allow for a more consistent and maintainable typography system.
+  .#{defaults.$text-class-prefix}paragraph {
+    margin: important.insert(typography.$paragraph-margin);
+    font-size: important.insert(typography.$paragraph-font-size);
+    font-weight: important.insert(typography.$paragraph-font-weight);
+    line-height: important.insert(typography.$paragraph-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}small {
+    margin: important.insert(typography.$small-margin);
+    font-size: important.insert(typography.$small-font-size);
+    font-weight: important.insert(typography.$small-font-weight);
+    line-height: important.insert(typography.$small-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h1 {
+    margin: important.insert(typography.$h1-margin);
+    font-family: important.insert(typography.$h1-font-family);
+    font-size: important.insert(typography.$h1-font-size);
+    font-weight: important.insert(typography.$h1-font-weight);
+    line-height: important.insert(typography.$h1-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h2 {
+    margin: important.insert(typography.$h2-margin);
+    font-family: important.insert(typography.$h2-font-family);
+    font-size: important.insert(typography.$h2-font-size);
+    font-weight: important.insert(typography.$h2-font-weight);
+    line-height: important.insert(typography.$h2-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h3 {
+    margin: important.insert(typography.$h3-margin);
+    font-family: important.insert(typography.$h3-font-family);
+    font-size: important.insert(typography.$h3-font-size);
+    font-weight: important.insert(typography.$h3-font-weight);
+    line-height: important.insert(typography.$h3-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h4 {
+    margin: important.insert(typography.$h4-margin);
+    font-family: important.insert(typography.$h4-font-family);
+    font-size: important.insert(typography.$h4-font-size);
+    font-weight: important.insert(typography.$h4-font-weight);
+    line-height: important.insert(typography.$h4-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h5 {
+    margin: important.insert(typography.$h5-margin);
+    font-family: important.insert(typography.$h5-font-family);
+    font-size: important.insert(typography.$h5-font-size);
+    font-weight: important.insert(typography.$h5-font-weight);
+    line-height: important.insert(typography.$h5-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h6 {
+    margin: important.insert(typography.$h6-margin);
+    font-family: important.insert(typography.$h6-font-family);
+    font-size: important.insert(typography.$h6-font-size);
+    font-weight: important.insert(typography.$h6-font-weight);
+    line-height: important.insert(typography.$h6-line-height);
+  }
+
+  // For each font weight property, create a utility class.
+  @each $size, $value in typography.$font-weights {
+    .#{defaults.$font-weight-class-prefix}#{$size} {
+      font-weight: important.insert($value);
+    }
+  }
+
+  // For each font style property, create a utility class.
+  @each $size, $value in defaults.$font-style-properties {
+    .#{defaults.$font-style-class-prefix}#{$size} {
+      font-style: important.insert($value);
+    }
+  }
+}

package/src/scss/utilities/typography/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/visibility/_defaults.scss

@@ -0,0 +1,20 @@
+// Default values for Graupl.
+//
+// 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.
+
+@use "sass:map";
+
+// Visibility properties.
+$visibility-class-prefix: "visibility-" !default;
+$base-visibility-properties: (
+  visible: visible,
+  hidden: hidden,
+  collapse: collapse,
+);
+$custom-visibility-properties: () !default;
+$visibility-properties: map.merge(
+  $base-visibility-properties,
+  $custom-visibility-properties
+);

package/src/scss/utilities/visibility/_index.scss

@@ -0,0 +1,15 @@
+// Graupl visibility utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each visibility property, create a utility class.
+  @each $name, $property in defaults.$visibility-properties {
+    .#{defaults.$visibility-class-prefix}#{$name} {
+      visibility: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/visibility/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/stylelint.config.js

@@ -8,6 +8,8 @@ const config = {
   rules: {
     "prettier/prettier": true,
     "scss/comment-no-empty": null,
+    "selector-max-compound-selectors": 4,
+    "selector-no-qualifying-type": null,
   },
 };
 

package/dist/base/form/form.css

@@ -1,78 +0,0 @@
-@layer graupl.base{
-  input,
-  textarea,
-  select{
-    padding:var(--graupl-input-padding, var(--graupl-input-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-input-padding-x, var(--graupl-gap, 1rem)));
-    border-width:var(--graupl-input-border-width, var(--graupl-border-width, 2px));
-    border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
-    border-radius:var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem));
-    font-size:var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem));
-  }
-  input:disabled,
-  textarea:disabled,
-  select:disabled{
-    cursor:not-allowed;
-  }
-  label{
-    font-size:var(--graupl-label-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
-  }
-  fieldset{
-    display:flex;
-    flex-flow:var(--graupl-fieldset-direction, column) wrap;
-    gap:var(--graupl-fieldset-gap, calc(var(--graupl-gap, 1rem) / 4));
-    padding:var(--graupl-fieldset-padding, var(--graupl-fieldset-padding-y, var(--graupl-input-padding-y, calc(var(--graupl-gap, 1rem) / 2))) var(--graupl-fieldset-padding-x, var(--graupl-input-padding-x, var(--graupl-gap, 1rem))));
-    border-width:var(--graupl-fieldset-border-width, var(--graupl-input-border-width, var(--graupl-border-width, 2px)));
-    border-style:var(--graupl-fieldset-border-style, var(--graupl-botton-border-style, var(--graupl-border-style, solid)));
-    border-radius:var(--graupl-fieldset-border-radius, var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem)));
-    font-size:var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
-  }
-}
-@layer graupl.theme{
-  input,
-  textarea,
-  select{
-    border-color:var(--graupl-input-border-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%)))));
-    background:var(--graupl-input-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-    color:var(--graupl-input-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    accent-color:var(--graupl-input-accent-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
-  }
-  input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{
-    color:var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--light, var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));
-  }
-  input::placeholder,
-  textarea::placeholder,
-  select::placeholder{
-    color:var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--light, var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));
-  }
-  input:disabled,
-  textarea:disabled,
-  select:disabled{
-    border-color:var(--graupl-input-disabled-border-color, var(--graupl-theme-active--shade--light, var(--graupl-theme-light--shade--light, var(--graupl-primary--200, hsl(219, 90%, 80%)))));
-    color:var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--light, var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));
-  }
-  input:disabled::-moz-placeholder, textarea:disabled::-moz-placeholder, select:disabled::-moz-placeholder{
-    color:var(--graupl-input-disabled-placeholder-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--light, var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%))))));
-  }
-  input:disabled::placeholder,
-  textarea:disabled::placeholder,
-  select:disabled::placeholder{
-    color:var(--graupl-input-disabled-placeholder-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--light, var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%))))));
-  }
-  label{
-    color:var(--graupl-label-color, var(--graupl-input-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%))))));
-  }
-  label:has(+ input:disabled, + textarea:disabled, + select:disabled){
-    color:var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--light, var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%))))));
-  }
-  fieldset{
-    border-color:var(--graupl-fieldset-border-color, var(--graupl-input-border-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))))));
-    background:var(--graupl-fieldset-background, var(--graupl-input-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
-    color:var(--graupl-fieldset-color, var(--graupl-input-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%))))));
-  }
-  fieldset:disabled{
-    border-color:var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--shade--light, var(--graupl-theme-light--shade--light, var(--graupl-primary--200, hsl(219, 90%, 80%))))));
-    color:var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--light, var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%))))));
-  }
-}
-
-/*# sourceMappingURL=form.css.map */

package/dist/base/form/form.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/form/_index.scss","../../../scss/base/form/_variables.scss","form.css"],"names":[],"mappings":"AASI;ECHF;;;IAGE,4JCGY;IDFZ,8EC2EiB;ID1EjB,iFC8EiB;ID7EjB,sFCiFkB;IDhFlB,8ECGc;ECNhB;EFKE;;;IACE,kBAAA;EEDJ;EFKA;IACE,6GCDc;ECFhB;EFMA;IACE,YAAA;IACA,uDAAA;IACA,iECCW;IDAX,mOCSe;IDRf,mHCoEoB;IDnEpB,sHCuEoB;IDtEpB,4HC0EqB;IDzErB,gHCSiB;ECbnB;AACF;AHpBI;EC4BF;;;IAGE,4KCuEiB;IDtEjB,+JCMe;IDLf,mJCeU;IDdV,sKCsFiB;EC3FnB;EFOE;IACE,wLCeoB;EClBxB;EFEE;;;IACE,wLCeoB;EClBxB;EFME;;;IACE,yLCiEwB;IDhExB,qLCgBiB;EClBrB;EFII;IACE,qOCiB2B;ECjBjC;EFDI;;;IACE,qOCiB2B;ECjBjC;EFKA;IACE,8KCKU;ECRZ;EFKE;IACE,yNCYiB;ECfrB;EFOA;IACE,iNCmDoB;IDlDpB,kMClBkB;IDmBlB,iLCJa;ECDf;EFOE;IACE,uOCkD2B;IDjD3B,4NCKoB;ECVxB;AACF","file":"form.css"}

package/dist/base/link/link.css

@@ -1,26 +0,0 @@
-@layer graupl.base{
-  a{
-    -webkit-text-decoration:var(--graupl-link-text-decoration, underline);
-            text-decoration:var(--graupl-link-text-decoration, underline);
-    text-decoration-thickness:var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 2px));
-  }
-}
-@layer graupl.theme{
-  a{
-    color:var(--graupl-link-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
-  }
-  a:hover{
-    color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
-  }
-  a:active{
-    color:var(--graupl-link-active-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
-  }
-  a:visited{
-    color:var(--graupl-link-visited-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
-  }
-  a:visited:hover{
-    color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
-  }
-}
-
-/*# sourceMappingURL=link.css.map */

package/dist/base/link/link.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/link/_index.scss","../../../scss/base/link/_variables.scss","link.css"],"names":[],"mappings":"AASI;ECHF;IACE,qEAAA;YAAA,6DAAA;IACA,uGCG6B;ECN/B;AACF;AHGI;ECIF;IACE,uJCCS;ECLX;EFME;IACE,gKCEa;ECNjB;EFOE;IACE,iKCEc;ECPlB;EFQE;IACE,+JCEe;ECRnB;EFQI;IACE,gKCTW;ECGjB;AACF","file":"link.css"}

package/dist/component/button/button.css

@@ -1,62 +0,0 @@
-@layer graupl.component{
-  .button{
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    min-width:var(--graupl-button-min-width, 44px);
-    min-height:var(--graupl-button-min-height, 44px);
-    padding:var(--graupl-button-padding, var(--graupl-button-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-button-padding-x, var(--graupl-gap, 1rem)));
-    transition:var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), border-color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));
-    border-width:var(--graupl-button-border-width, var(--graupl-border-width, 2px));
-    border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
-    border-radius:var(--graupl-button-border-radius, var(--graupl-border-radius, 0.125rem));
-    font-size:var(--graupl-button-font-size, var(--graupl-font-size-default, 1rem));
-    cursor:pointer;
-  }
-  .button:hover{
-    transform:var(--graupl-button-hover-transform, none);
-  }
-  .button:active{
-    transform:var(--graupl-button-active-transform, scale(0.95));
-  }
-}
-@layer graupl.theme{
-  .button{
-    border-color:var(--graupl-button-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-    color:var(--graupl-button-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-  }
-  .button:hover{
-    border-color:var(--graupl-button-hover-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-hover-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    color:var(--graupl-button-hover-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-  }
-  .button:active{
-    border-color:var(--graupl-button-active-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-active-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    color:var(--graupl-button-active-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-  }
-  .button.primary{
-    --graupl-button-hover-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-active-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-hover-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-active-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-  }
-  .button.secondary{
-    --graupl-button-hover-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-    --graupl-button-active-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-    --graupl-button-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-    --graupl-button-hover-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-    --graupl-button-active-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-  }
-  .button.tertiary{
-    --graupl-button-hover-background:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-    --graupl-button-active-background:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-    --graupl-button-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-    --graupl-button-hover-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-    --graupl-button-active-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-  }
-}
-
-/*# sourceMappingURL=button.css.map */

package/dist/component/button/button.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/component/button/_index.scss","../../../scss/component/button/_variables.scss","button.css"],"names":[],"mappings":"AASI;ECDF;IACE,YAAA;IACA,kBAAA;IACA,sBAAA;IACA,8CCJe;IDKf,gDCDgB;IDEhB,+JCOa;IDNb,0cCcgB;IDbhB,+EC4DkB;ID3DlB,iFC+DkB;ID9DlB,uFCkEmB;IDjEnB,+ECMe;IDLf,cAAA;EELF;EFOE;IACE,oDCemB;ECpBvB;EFQE;IACE,4DCeoB;ECrBxB;AACF;AHbI;ECwBF;IACE,kKCwDkB;IDvDlB,gKCagB;IDZhB,oJC0BW;EClCb;EFUE;IACE,wKCuDsB;IDtDtB,oKCYoB;IDXpB,4JCyBe;ECjCnB;EFWE;IACE,yKCqDuB;IDpDvB,qKCUqB;IDTrB,6JCuBgB;EChCpB;EFYE;IACE,wJAAA;IACA,yJAAA;IACA,oJAAA;IACA,0JAAA;IACA,2JAAA;EEVJ;EFaE;IACE,8JAAA;IACA,+JAAA;IACA,0JAAA;IACA,gKAAA;IACA,iKAAA;EEXJ;EFcE;IACE,2JAAA;IACA,4JAAA;IACA,uJAAA;IACA,6JAAA;IACA,8JAAA;EEZJ;AACF","file":"button.css"}

package/dist/layout/columns/columns.css

@@ -1,41 +0,0 @@
-@layer graupl.layout{
-  .columns{
-    display:grid;
-    grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
-    gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
-  }
-  .columns > *{
-    grid-column:span var(--graupl-columns-span, 1);
-  }
-  .columns-1{
-    --graupl-columns-count:1;
-  }
-  .span-1{
-    --graupl-columns-span:1;
-  }
-  .columns-2{
-    --graupl-columns-count:2;
-  }
-  .span-2{
-    --graupl-columns-span:2;
-  }
-  .columns-3{
-    --graupl-columns-count:3;
-  }
-  .span-3{
-    --graupl-columns-span:3;
-  }
-  .columns-4{
-    --graupl-columns-count:4;
-  }
-  .span-4{
-    --graupl-columns-span:4;
-  }
-  @media screen and (max-width: 48ch){
-    .columns{
-      --graupl-columns-min-width:1fr;
-    }
-  }
-}
-
-/*# sourceMappingURL=columns.css.map */