@graupl/graupl 1.0.0-alpha.2 → 1.0.0-alpha.4

package/CHANGELOG.md

@@ -2,6 +2,50 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.0.0-alpha.4](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2024-04-22)
+
+
+### Features
+
+* **theme:** add variables for root font and background ([a7997e8](https://github.com/Graupl/graupl/commit/a7997e85b939dac5a2105d931d3a97010de14a6a))
+
+
+### Code Refactoring
+
+* **utilities:** use bg- and text- for color utilities ([9709b32](https://github.com/Graupl/graupl/commit/9709b32a6651b92dd49d5a151cf13d94ca3720bf))
+
+## [1.0.0-alpha.3](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2024-04-20)
+
+
+### Features
+
+* **theme:** add ability to generate new theme colours automatically ([df0ad39](https://github.com/Graupl/graupl/commit/df0ad391ff0b122c55867b518ccfaa7cd6141ced))
+* **utilities:** add background and color utilities ([ef14a15](https://github.com/Graupl/graupl/commit/ef14a15e0d5934249829a9d6ef04014aa63a0e08)), closes [#11](https://github.com/Graupl/graupl/issues/11)
+
+
+### Bug Fixes
+
+* **accessibility:** add reduced motion handling on buttons ([2a33df0](https://github.com/Graupl/graupl/commit/2a33df00ddddf267f813160644b1f8c6a847e7a4))
+* **buttons:** handle disabled state ([1b2e859](https://github.com/Graupl/graupl/commit/1b2e859d57cdad9a3f2021ff6c7917800f80f34a)), closes [#9](https://github.com/Graupl/graupl/issues/9)
+* **state:** correct layer order for states to override ([afd87e4](https://github.com/Graupl/graupl/commit/afd87e4ec7c3957040b3701eaeb482768a366083))
+
+
+### Code Refactoring
+
+* change .columns- to .count- ([45d0970](https://github.com/Graupl/graupl/commit/45d0970fcca3c39a57a10e0cb7c4c18a2b36f31e))
+
+
+### Documentation
+
+* add basic example of how to override defaults ([a808eeb](https://github.com/Graupl/graupl/commit/a808eebfd7ab7e97be6b491b94886c68757bde1a)), closes [#10](https://github.com/Graupl/graupl/issues/10)
+* correct link to github ([847c074](https://github.com/Graupl/graupl/commit/847c07413ebdcbc32009e3b51f77eb1e2e5e4481))
+
+
+### Build System
+
+* **npm:** define exports ([e321b9c](https://github.com/Graupl/graupl/commit/e321b9c54a608795badc1f1f2f1468583694ccff))
+* **postcss:** re-enable cssnano ([cdd9cfc](https://github.com/Graupl/graupl/commit/cdd9cfc29a2c2d57447da86ba9258714070e61fd))
+
 ## [1.0.0-alpha.2](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2024-04-18)
 
 

package/dist/base/form/form.css

@@ -1,86 +1,2 @@
-@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)));
-  }
-  fieldset:disabled input,
-  fieldset:disabled textarea,
-  fieldset:disabled select{
-    cursor:not-allowed;
-  }
-}
-@layer graupl.theme{
-  input,
-  textarea,
-  select{
-    border-color:var(--graupl-input-border-color, var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)))));
-    background:var(--graupl-input-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-    color:var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    accent-color:var(--graupl-input-accent-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, 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--600, var(--graupl-theme-light--secondary--600, 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--600, var(--graupl-theme-light--secondary--600, 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--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));
-    color:var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));
-  }
-  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--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
-  }
-  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--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
-  }
-  label{
-    color:var(--graupl-label-color, var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, 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--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
-  }
-  fieldset{
-    border-color:var(--graupl-fieldset-border-color, var(--graupl-input-border-color, var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))))));
-    background:var(--graupl-fieldset-background, var(--graupl-input-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
-    color:var(--graupl-fieldset-color, var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, 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--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));
-    color:var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
-  }
-  fieldset:disabled label{
-    color:var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
-  }
-}
-
+@layer graupl.base{input,select,textarea{border-radius:var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-input-border-width,var(--graupl-border-width,2px));font-size:var(--graupl-input-font-size,var(--graupl-font-size-default,1rem));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)))}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}label{font-size:var(--graupl-label-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)))}fieldset{border-radius:var(--graupl-fieldset-border-radius,var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem)));border-style:var(--graupl-fieldset-border-style,var(--graupl-botton-border-style,var(--graupl-border-style,solid)));border-width:var(--graupl-fieldset-border-width,var(--graupl-input-border-width,var(--graupl-border-width,2px)));display:flex;flex-flow:var(--graupl-fieldset-direction,column) wrap;font-size:var(--graupl-fieldset-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)));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))))}fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{cursor:not-allowed}}@layer graupl.theme{input,select,textarea{accent-color:var(--graupl-input-accent-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));background:var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b))));color:var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}input::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input::placeholder,select::placeholder,textarea::placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input:disabled,select:disabled,textarea:disabled{border-color:var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb))));color:var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d))))}input:disabled::-moz-placeholder,select:disabled::-moz-placeholder,textarea:disabled::-moz-placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}input:disabled::placeholder,select:disabled::placeholder,textarea:disabled::placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}label{color:var(--graupl-label-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}label:has(+input:disabled,+textarea:disabled,+select:disabled){color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset{background:var(--graupl-fieldset-background,var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-fieldset-border-color,var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))));color:var(--graupl-fieldset-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}fieldset:disabled{border-color:var(--graupl-fieldset-disabled-border-color,var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))));color:var(--graupl-fieldset-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset:disabled label{color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}}
 /*# sourceMappingURL=form.css.map */

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

@@ -1 +1 @@
-{"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;EFOI;;;IAGE,kBAAA;EELN;AACF;AHzBI;ECoCF;;;IAGE,sLC+DiB;ID9DjB,6KCFe;IDGf,mKCOU;IDNV,gLC8EiB;ECtFnB;EFUE;IACE,oLCOoB;ECbxB;EFKE;;;IACE,oLCOoB;ECbxB;EFSE;;;IACE,+LCyDwB;IDxDxB,iLCQiB;ECbrB;EFOI;IACE,iOCS2B;ECZjC;EFEI;;;IACE,iOCS2B;ECZjC;EFQA;IACE,8LCHU;ECHZ;EFQE;IACE,qNCIiB;ECVrB;EFUA;IACE,2NC2CoB;ID1CpB,gNC1BkB;ID2BlB,iMCZa;ECIf;EFUE;IACE,6OC0C2B;IDzC3B,wNCHoB;ECLxB;EFUI;IACE,qNCVe;ECErB;AACF","file":"form.css"}
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/form/_index.scss","../../../scss/base/form/_variables.scss","form.css"],"names":[],"mappings":"AASI,mBCHF,sBAME,mFCiFkB,CDlFlB,+EC8EiB,CD/EjB,4EC2EiB,CDxEjB,4ECGc,CDPd,sJECF,CFKE,iDACE,kBEDJ,CFKA,MACE,0GEHF,CFMA,SAOE,wHC0EqB,CD3ErB,mHCuEoB,CDxEpB,gHCoEoB,CDxEpB,YAAA,CACA,sDAAA,CAMA,6GCSiB,CDdjB,8DCCW,CDAX,2NEAF,CFOI,4EAGE,kBELN,CACF,CHzBI,oBCoCF,sBAME,iKC8EiB,CDhFjB,6JCFe,CDCf,uKC+DiB,CD7DjB,mJEPF,CFUE,4EACE,qKENJ,CFKE,6DACE,qKENJ,CFSE,iDACE,gLCyDwB,CDxDxB,kKELJ,CFOI,uGACE,iNEHN,CFEI,wFACE,iNEHN,CFQA,MACE,6KENF,CFQE,+DACE,qMENJ,CFUA,SAEE,+LC1BkB,CDyBlB,2MC2CoB,CDzCpB,gLERF,CFUE,kBACE,6NC0C2B,CDzC3B,wMERJ,CFUI,wBACE,qMERN,CACF","file":"form.css"}

package/dist/base/link/link.css

@@ -1,26 +1,2 @@
-@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--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
-  }
-  a:hover{
-    color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
-  }
-  a:active{
-    color:var(--graupl-link-active-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
-  }
-  a:visited{
-    color:var(--graupl-link-visited-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
-  }
-  a:visited:hover{
-    color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
-  }
-}
-
+@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--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:active{color:var(--graupl-link-active-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:visited{color:var(--graupl-link-visited-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:visited:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}}
 /*# sourceMappingURL=link.css.map */

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

@@ -1 +1 @@
-{"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,iKCCS;ECLX;EFME;IACE,0KCEa;ECNjB;EFOE;IACE,2KCEc;ECPlB;EFQE;IACE,yKCEe;ECRnB;EFQI;IACE,0KCTW;ECGjB;AACF","file":"link.css"}
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/link/_index.scss","link.css"],"names":[],"mappings":"AASI,mBCHF,EACE,oEAAA,CAAA,4DAAA,CACA,qGCHF,CACF,CFGI,oBCIF,EACE,kJCJF,CDME,QACE,2JCJJ,CDOE,SACE,4JCLJ,CDQE,UACE,0JCNJ,CDQI,gBACE,2JCNN,CACF","file":"link.css"}

package/dist/component/button/button.css

@@ -1,62 +1,2 @@
-@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--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-    color:var(--graupl-button-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-  }
-  .button:hover{
-    border-color:var(--graupl-button-hover-border-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-hover-background, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    color:var(--graupl-button-hover-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-  }
-  .button:active{
-    border-color:var(--graupl-button-active-border-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-active-background, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    color:var(--graupl-button-active-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-  }
-  .button.primary{
-    --graupl-button-hover-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-active-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-hover-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-active-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-  }
-  .button.secondary{
-    --graupl-button-hover-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-    --graupl-button-active-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-    --graupl-button-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-    --graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-    --graupl-button-active-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
-  }
-  .button.tertiary{
-    --graupl-button-hover-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-    --graupl-button-active-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-    --graupl-button-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-    --graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-    --graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
-  }
-}
-
+@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-size-default,1rem));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,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,.15s) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),border-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),border-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-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-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-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-border-color: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-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--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-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-border-color: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-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--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-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-border-color: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-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--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/button.css.map

@@ -1 +1 @@
-{"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,kLCwDkB;IDvDlB,8KCagB;IDZhB,oKC0BW;EClCb;EFUE;IACE,wLCuDsB;IDtDtB,oLCYoB;IDXpB,0KCyBe;ECjCnB;EFWE;IACE,yLCqDuB;IDpDvB,qLCUqB;IDTrB,2KCuBgB;EChCpB;EFYE;IACE,kKAAA;IACA,mKAAA;IACA,8JAAA;IACA,oKAAA;IACA,qKAAA;EEVJ;EFaE;IACE,wKAAA;IACA,yKAAA;IACA,oKAAA;IACA,0KAAA;IACA,2KAAA;EEXJ;EFcE;IACE,qKAAA;IACA,sKAAA;IACA,iKAAA;IACA,uKAAA;IACA,wKAAA;EEZJ;AACF","file":"button.css"}
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/component/button/_index.scss","../../../scss/component/button/_variables.scss","button.css","../../../scss/mixins/_media-queries.scss"],"names":[],"mappings":"AASI,wBCCF,QAEE,kBAAA,CAQA,oFCsFmB,CDvFnB,+ECmFkB,CDpFlB,6ECgFkB,CD5ElB,cAAA,CAXA,YAAA,CAUA,6ECIe,CDZf,sBAAA,CAEA,+CCHgB,CDEhB,6CCNe,CDQf,yJCKa,CDJb,0bEFF,CFSE,cACE,mDEPJ,CFUE,eACE,0DERJ,CFWE,iBACE,kBETJ,CFWI,+CAEE,cEVN,CChBA,uCHgCE,QACE,iOEbF,CFeE,cACE,kEEbJ,CFgBE,eACE,yEEdJ,CACF,CACF,CH9BI,oBCiDF,QAEE,8JCEgB,CDHhB,kKCqDkB,CDnDlB,oJEhBF,CFkBE,cAEE,oKCCoB,CDFpB,wKCoDsB,CDlDtB,0JEhBJ,CFmBE,eAEE,qKCDqB,CDArB,yKCkDuB,CDhDvB,2JEjBJ,CFyBI,gEAGE,uKCTqB,CDQrB,2KC0CuB,CDxCvB,6JEnBN,CFwBI,gBACE,oJAAA,CACA,qJAAA,CACA,gJAAA,CACA,sJAAA,CACA,uJAAA,CACA,yJEtBN,CFgBI,kBACE,0JAAA,CACA,2JAAA,CACA,sJAAA,CACA,4JAAA,CACA,6JAAA,CACA,+JEdN,CFQI,iBACE,uJAAA,CACA,wJAAA,CACA,mJAAA,CACA,yJAAA,CACA,0JAAA,CACA,4JENN,CACF","file":"button.css"}