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

package/src/scss/layout/container/_index.scss

@@ -1,11 +1,12 @@
-// Graupl Container layout.
+// @gruapl/graupl container layout styles.
 
+@use "defaults";
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 
 @include layer(layout) {
-  .container,
-  .container > .full-width {
+  #{defaults.$container-selector},
+  #{defaults.$container-selector} > #{defaults.$container-full-width-selector} {
     display: grid;
     grid-template-columns:
       [full-width-start] $container-full-width-section-width
@@ -17,19 +18,23 @@
       $container-feature-section-width [feature-end]
       $container-full-width-section-width [full-width-end];
 
-    > :not(.breakout, .full-width, .feature) {
+    > :not(
+        #{defaults.$container-breakout-selector},
+        #{defaults.$container-full-width-selector},
+        #{defaults.$container-feature-selector}
+      ) {
       grid-column: content;
     }
 
-    .breakout {
+    #{defaults.$container-breakout-selector} {
       grid-column: breakout;
     }
 
-    .feature {
+    #{defaults.$container-feature-selector} {
       grid-column: feature;
     }
 
-    .full-width {
+    #{defaults.$container-full-width-selector} {
       grid-column: full-width;
     }
   }

package/src/scss/layout/container/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @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;

package/src/scss/mixins/_layer.scss

@@ -1,4 +1,4 @@
-// Layer mixins.
+// @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.

package/src/scss/mixins/_media-queries.scss

@@ -1,4 +1,4 @@
-// Media query mixins.
+// @graupl/graupl media query mixins.
 
 @use "../defaults" as root-defaults;
 @use "sass:map";
@@ -17,6 +17,7 @@
   }
 }
 
+// A media query for targetting specific screen sizes.
 @mixin screen($size) {
   $screen-size: map.get(root-defaults.$screen-sizes, $size);
 

package/src/scss/state/_index.scss

@@ -1,3 +1,3 @@
-// Graupl states.
+// @gruapl/graupl state styles.
 
 @forward "focus";

package/src/scss/state/focus/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl focus state 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.
 
 $focus-outline-style: dotted !default;
 $focus-box-shadow-style: inset !default;

package/src/scss/state/focus/_index.scss

@@ -1,4 +1,4 @@
-// Focus state styles.
+// @gruapl/graupl focus state styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

package/src/scss/state/focus/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @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";

package/src/scss/theme/_index.scss

@@ -1,4 +1,4 @@
-// Graupl theme.
+// @gruapl/graupl theme styles.
 
 @forward "color";
 @forward "typography";

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

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl color theme 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/theme/color/_index.scss

@@ -1,4 +1,4 @@
-// Color theme styles.
+// @gruapl/graupl color theme styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;
@@ -9,7 +9,7 @@
 @include layer(theme) {
   :root {
     background: $root-background;
-    color: $root-font-color;
+    color: $root-color;
 
     @each $color, $map in $theme-light {
       @each $shade, $value in $map {

package/src/scss/theme/color/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl color theme 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;
@@ -111,8 +114,8 @@ $theme-active: ();
 }
 
 // Colour properties.
-$root-font-color: var(
-  --#{root-defaults.$prefix}-root-font-color,
+$root-color: var(
+  --#{root-defaults.$prefix}-root-color,
   #{map.get(map.get($theme-active, primary), 900)}
 );
 $root-background: var(

package/src/scss/theme/typography/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl typography theme 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/theme/typography/_index.scss

@@ -1,4 +1,4 @@
-// Typography theme styles.
+// @gruapl/graupl typography theme styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

package/src/scss/theme/typography/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl typography theme 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;

package/src/scss/utilities/_index.scss

@@ -1,4 +1,4 @@
-// Graupl utilities.
+// @gruapl/graupl utilities styles.
 
 @forward "alignment";
 @forward "color";

package/src/scss/utilities/alignment/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl alignment utilities 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/utilities/alignment/_index.scss

@@ -1,4 +1,4 @@
-// Graupl alignment utilities.
+// @gruapl/graupl alignment utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/alignment/_variables.scss

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl alignment utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

package/src/scss/utilities/color/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl color utilities 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/utilities/color/_index.scss

@@ -1,4 +1,4 @@
-// Graupl color utilities.
+// @gruapl/graupl color utilities styles.
 
 @use "variables" as *;
 @use "defaults";

package/src/scss/utilities/color/_variables.scss

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl color utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

package/src/scss/utilities/display/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl display utilities 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/utilities/display/_index.scss

@@ -1,4 +1,4 @@
-// Graupl display utilities.
+// @gruapl/graupl display utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/display/_variables.scss

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl display utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

package/src/scss/utilities/flex/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl flex utilities 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/utilities/flex/_index.scss

@@ -1,4 +1,4 @@
-// Graupl flex utilities.
+// @gruapl/graupl flex utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/flex/_variables.scss

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl flex utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

package/src/scss/utilities/inset/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl inset utilities 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/utilities/inset/_index.scss

@@ -1,4 +1,4 @@
-// Graupl inset utilities.
+// @gruapl/graupl inset utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/inset/_variables.scss

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl inset utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

package/src/scss/utilities/justification/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl justification utilities 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/utilities/justification/_index.scss

@@ -1,4 +1,4 @@
-// Graupl justification utilities.
+// @gruapl/graupl justification utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl justification utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

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

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl list utilities 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/utilities/list/_index.scss

@@ -1,4 +1,4 @@
-// Graupl visibility utilities.
+// @gruapl/graupl list utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl list utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

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

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl position utilities 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/utilities/position/_index.scss

@@ -1,4 +1,4 @@
-// Graupl position utilities.
+// @gruapl/graupl position utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl position utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

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

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl spacing utilities 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/utilities/spacing/_index.scss

@@ -1,4 +1,4 @@
-// Graupl spacing utilities.
+// @gruapl/graupl spacing utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;
@@ -60,5 +60,12 @@
         }
       }
     }
+
+    // Create the "auto" utility class.
+    .#{$name}-auto {
+      @each $prop in $property {
+        #{$prop}: important.insert(auto);
+      }
+    }
   }
 }

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl spacing utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

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

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl typography utilities 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/utilities/typography/_index.scss

@@ -1,4 +1,4 @@
-// Graupl typography utilities.
+// @gruapl/graupl typography utilities styles.
 
 @use "variables" as *;
 @use "defaults";

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl typography utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

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

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl visibility utilities 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/utilities/visibility/_index.scss

@@ -1,4 +1,4 @@
-// Graupl visibility utilities.
+// @gruapl/graupl visibility utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl visibility utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @forward "defaults";

package/dist/component/button.css

@@ -1,2 +0,0 @@
-@layer graupl.component{.button{align-items:center;border-radius:var(--graupl-button-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-button-border-width,var(--graupl-border-width,2px));cursor:pointer;display:flex;font-size:var(--graupl-button-font-size,var(--graupl-font-base,calc(var(--graupl-font-base, 1rem)*1)));justify-content:center;min-height:var(--graupl-button-min-height,44px);min-width:var(--graupl-button-min-width,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))) var(--graupl-button-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))));transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform,none)}.button:active{transform:var(--graupl-button-active-transform,scale(.95))}.button:disabled{cursor:not-allowed}.button:disabled:active,.button:disabled:hover{transform:none}@media (prefers-reduced-motion:reduce){.button{transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform-reduced-motion,none)}.button:active{transform:var(--graupl-button-active-transform-reduced-motion,scale(.98))}}}@layer graupl.theme{.button{background:var(--graupl-button-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-button-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}.button:hover{background:var(--graupl-button-hover-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-hover-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-hover-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:active{background:var(--graupl-button-active-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-active-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-active-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:disabled,.button:disabled:active,.button:disabled:hover{background:var(--graupl-button-disabled-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.primary{--graupl-button-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-button-active-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.button.secondary{--graupl-button-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-button-active-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.button.tertiary{--graupl-button-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-button-active-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}}
-/*# sourceMappingURL=button.css.map */

package/dist/component/button.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/scss/mixins/_layer.scss","../../src/scss/component/button/_index.scss","../../src/scss/component/button/_variables.scss","button.css","../../src/scss/mixins/_media-queries.scss"],"names":[],"mappings":"AASI,wBCEF,QAEE,kBAAA,CAQA,oFCyFmB,CD1FnB,+ECsFkB,CDvFlB,6ECmFkB,CD/ElB,cAAA,CAXA,YAAA,CAUA,sGCSe,CDjBf,sBAAA,CAEA,+CCDgB,CDAhB,6CCJe,CDMf,uNCUa,CDTb,mVEHF,CFUE,cACE,mDERJ,CFWE,eACE,0DETJ,CFYE,iBACE,kBEVJ,CFYI,+CAEE,cEXN,CCbA,uCH8BE,QACE,sKEdF,CFgBE,cACE,kEEdJ,CFiBE,eACE,yEEfJ,CACF,CACF,CH9BI,oBCkDF,QAEE,4LCKgB,CDNhB,kKCwDkB,CDtDlB,oJEjBF,CFmBE,cAEE,oKCIoB,CDLpB,wKCuDsB,CDrDtB,0JEjBJ,CFoBE,eAEE,qKCEqB,CDHrB,yKCqDuB,CDnDvB,2JElBJ,CF0BI,gEAGE,qMCNqB,CDKrB,2KC6CuB,CD3CvB,6JEpBN,CFyBI,gBAEI,yIAAA,CAAA,gJAAA,CAAA,+IAAA,CAAA,oJAAA,CAAA,sJAAA,CAAA,gJAAA,CAAA,qJAAA,CAAA,uJAAA,CAAA,kJAAA,CAAA,yJEfR,CFaI,kBAEI,+IAAA,CAAA,sJAAA,CAAA,qJAAA,CAAA,0JAAA,CAAA,4JAAA,CAAA,sJAAA,CAAA,2JAAA,CAAA,6JAAA,CAAA,wJAAA,CAAA,+JEHR,CFCI,iBAEI,4IAAA,CAAA,mJAAA,CAAA,kJAAA,CAAA,uJAAA,CAAA,yJAAA,CAAA,mJAAA,CAAA,wJAAA,CAAA,0JAAA,CAAA,qJAAA,CAAA,4JESR,CACF","file":"button.css"}