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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/base/form/form.css +25 -17
  3. package/dist/base/form/form.css.map +1 -1
  4. package/dist/base/link/link.css +5 -5
  5. package/dist/base/link/link.css.map +1 -1
  6. package/dist/component/button/button.css +24 -24
  7. package/dist/component/button/button.css.map +1 -1
  8. package/dist/graupl.css +112 -76
  9. package/dist/graupl.css.map +1 -1
  10. package/dist/state/focus/focus.css +2 -2
  11. package/dist/state/focus/focus.css.map +1 -1
  12. package/dist/theme/theme.css +56 -28
  13. package/dist/theme/theme.css.map +1 -1
  14. package/docs/.vitepress/theme/custom.scss +28 -28
  15. package/index.html +5 -0
  16. package/package.json +1 -1
  17. package/scss/base/form/_index.scss +12 -0
  18. package/scss/base/form/_variables.scss +7 -7
  19. package/scss/base/link/_variables.scss +4 -4
  20. package/scss/component/button/_index.scss +15 -15
  21. package/scss/component/button/_variables.scss +9 -9
  22. package/scss/state/focus/_variables.scss +2 -2
  23. package/scss/theme/_index.scss +66 -28
  24. package/scss/theme/_variables.scss +289 -115
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  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.
4
4
 
5
+ ## [1.0.0-alpha.2](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2024-04-18)
6
+
7
+
8
+ ### Features
9
+
10
+ * use full spectrum of available colour shades ([24ed3f3](https://github.com/Graupl/graupl/commit/24ed3f370ea43cc2454fd664a87eb83c9c9d00db))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * **form:** handle disabled fieldsets ([5a50979](https://github.com/Graupl/graupl/commit/5a50979d52461ecd46b303d353ab10f5fc67fafb))
16
+
5
17
  ## [1.0.0-alpha.1](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.0...v1.0.0-alpha.1) (2024-04-17)
6
18
 
7
19
 
package/dist/base/form/form.css CHANGED
@@ -26,52 +26,60 @@
26
26
  border-radius:var(--graupl-fieldset-border-radius, var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem)));
27
27
  font-size:var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
28
28
  }
29
+ fieldset:disabled input,
30
+ fieldset:disabled textarea,
31
+ fieldset:disabled select{
32
+ cursor:not-allowed;
33
+ }
29
34
  }
30
35
  @layer graupl.theme{
31
36
  input,
32
37
  textarea,
33
38
  select{
34
- 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%)))));
35
- background:var(--graupl-input-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
36
- color:var(--graupl-input-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
37
- 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%)))));
39
+ 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%)))));
40
+ 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%)))));
41
+ 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%)))));
42
+ 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%)))));
38
43
  }
39
44
  input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{
40
- 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%)))));
45
+ 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%)))));
41
46
  }
42
47
  input::placeholder,
43
48
  textarea::placeholder,
44
49
  select::placeholder{
45
- 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%)))));
50
+ 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%)))));
46
51
  }
47
52
  input:disabled,
48
53
  textarea:disabled,
49
54
  select:disabled{
50
- 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%)))));
51
- 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%)))));
55
+ 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%)))));
56
+ 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%)))));
52
57
  }
53
58
  input:disabled::-moz-placeholder, textarea:disabled::-moz-placeholder, select:disabled::-moz-placeholder{
54
- 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%))))));
59
+ 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%))))));
55
60
  }
56
61
  input:disabled::placeholder,
57
62
  textarea:disabled::placeholder,
58
63
  select:disabled::placeholder{
59
- 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%))))));
64
+ 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%))))));
60
65
  }
61
66
  label{
62
- 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%))))));
67
+ 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%))))));
63
68
  }
64
69
  label:has(+ input:disabled, + textarea:disabled, + select:disabled){
65
- 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%))))));
70
+ 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%))))));
66
71
  }
67
72
  fieldset{
68
- 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%))))));
69
- 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%))))));
70
- 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%))))));
73
+ 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%))))));
74
+ 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%))))));
75
+ 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%))))));
71
76
  }
72
77
  fieldset:disabled{
73
- 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%))))));
74
- 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%))))));
78
+ 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%))))));
79
+ 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%))))));
80
+ }
81
+ fieldset:disabled label{
82
+ 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%))))));
75
83
  }
76
84
  }
77
85
 
package/dist/base/form/form.css.map CHANGED
@@ -1 +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;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"}
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"}
package/dist/base/link/link.css CHANGED
@@ -7,19 +7,19 @@
7
7
  }
8
8
  @layer graupl.theme{
9
9
  a{
10
- color:var(--graupl-link-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
10
+ 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%)))));
11
11
  }
12
12
  a:hover{
13
- color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
13
+ 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%)))));
14
14
  }
15
15
  a:active{
16
- color:var(--graupl-link-active-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
16
+ 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%)))));
17
17
  }
18
18
  a:visited{
19
- color:var(--graupl-link-visited-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
19
+ 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%)))));
20
20
  }
21
21
  a:visited:hover{
22
- color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
22
+ 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%)))));
23
23
  }
24
24
  }
25
25
 
package/dist/base/link/link.css.map CHANGED
@@ -1 +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,uJCCS;ECLX;EFME;IACE,gKCEa;ECNjB;EFOE;IACE,iKCEc;ECPlB;EFQE;IACE,+JCEe;ECRnB;EFQI;IACE,gKCTW;ECGjB;AACF","file":"link.css"}
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"}
package/dist/component/button/button.css CHANGED
@@ -22,40 +22,40 @@
22
22
  }
23
23
  @layer graupl.theme{
24
24
  .button{
25
- 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%)))));
26
- background:var(--graupl-button-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
27
- color:var(--graupl-button-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
25
+ 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%)))));
26
+ 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%)))));
27
+ 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%)))));
28
28
  }
29
29
  .button:hover{
30
- 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%)))));
31
- background:var(--graupl-button-hover-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
32
- color:var(--graupl-button-hover-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
30
+ 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%)))));
31
+ 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%)))));
32
+ 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%)))));
33
33
  }
34
34
  .button:active{
35
- 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%)))));
36
- background:var(--graupl-button-active-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
37
- color:var(--graupl-button-active-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
35
+ 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%)))));
36
+ 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%)))));
37
+ 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%)))));
38
38
  }
39
39
  .button.primary{
40
- --graupl-button-hover-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
41
- --graupl-button-active-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
42
- --graupl-button-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
43
- --graupl-button-hover-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
44
- --graupl-button-active-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
40
+ --graupl-button-hover-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
41
+ --graupl-button-active-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
42
+ --graupl-button-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
43
+ --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%))));
44
+ --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%))));
45
45
  }
46
46
  .button.secondary{
47
- --graupl-button-hover-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
48
- --graupl-button-active-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
49
- --graupl-button-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
50
- --graupl-button-hover-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
51
- --graupl-button-active-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
47
+ --graupl-button-hover-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
48
+ --graupl-button-active-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
49
+ --graupl-button-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
50
+ --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%))));
51
+ --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%))));
52
52
  }
53
53
  .button.tertiary{
54
- --graupl-button-hover-background:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
55
- --graupl-button-active-background:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
56
- --graupl-button-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
57
- --graupl-button-hover-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
58
- --graupl-button-active-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
54
+ --graupl-button-hover-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
55
+ --graupl-button-active-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
56
+ --graupl-button-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
57
+ --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%))));
58
+ --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%))));
59
59
  }
60
60
  }
61
61
 
package/dist/component/button/button.css.map CHANGED
@@ -1 +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,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"}
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"}
package/dist/graupl.css CHANGED
@@ -26,52 +26,60 @@
26
26
  border-radius:var(--graupl-fieldset-border-radius, var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem)));
27
27
  font-size:var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
28
28
  }
29
+ fieldset:disabled input,
30
+ fieldset:disabled textarea,
31
+ fieldset:disabled select{
32
+ cursor:not-allowed;
33
+ }
29
34
  }
30
35
  @layer graupl.theme{
31
36
  input,
32
37
  textarea,
33
38
  select{
34
- 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%)))));
35
- background:var(--graupl-input-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
36
- color:var(--graupl-input-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
37
- 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%)))));
39
+ 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%)))));
40
+ 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%)))));
41
+ 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%)))));
42
+ 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%)))));
38
43
  }
39
44
  input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{
40
- 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%)))));
45
+ 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%)))));
41
46
  }
42
47
  input::placeholder,
43
48
  textarea::placeholder,
44
49
  select::placeholder{
45
- 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%)))));
50
+ 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%)))));
46
51
  }
47
52
  input:disabled,
48
53
  textarea:disabled,
49
54
  select:disabled{
50
- 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%)))));
51
- 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%)))));
55
+ 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%)))));
56
+ 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%)))));
52
57
  }
53
58
  input:disabled::-moz-placeholder, textarea:disabled::-moz-placeholder, select:disabled::-moz-placeholder{
54
- 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%))))));
59
+ 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%))))));
55
60
  }
56
61
  input:disabled::placeholder,
57
62
  textarea:disabled::placeholder,
58
63
  select:disabled::placeholder{
59
- 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%))))));
64
+ 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%))))));
60
65
  }
61
66
  label{
62
- 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%))))));
67
+ 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%))))));
63
68
  }
64
69
  label:has(+ input:disabled, + textarea:disabled, + select:disabled){
65
- 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%))))));
70
+ 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%))))));
66
71
  }
67
72
  fieldset{
68
- 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%))))));
69
- 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%))))));
70
- 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%))))));
73
+ 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%))))));
74
+ 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%))))));
75
+ 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%))))));
71
76
  }
72
77
  fieldset:disabled{
73
- 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%))))));
74
- 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%))))));
78
+ 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%))))));
79
+ 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%))))));
80
+ }
81
+ fieldset:disabled label{
82
+ 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%))))));
75
83
  }
76
84
  }
77
85
  @layer graupl.base{
@@ -83,19 +91,19 @@
83
91
  }
84
92
  @layer graupl.theme{
85
93
  a{
86
- color:var(--graupl-link-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
94
+ 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%)))));
87
95
  }
88
96
  a:hover{
89
- color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
97
+ 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%)))));
90
98
  }
91
99
  a:active{
92
- color:var(--graupl-link-active-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
100
+ 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%)))));
93
101
  }
94
102
  a:visited{
95
- color:var(--graupl-link-visited-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
103
+ 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%)))));
96
104
  }
97
105
  a:visited:hover{
98
- color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
106
+ 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%)))));
99
107
  }
100
108
  }
101
109
  @layer graupl.layout{
@@ -197,87 +205,115 @@
197
205
  }
198
206
  @layer graupl.theme{
199
207
  .button{
200
- 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%)))));
201
- background:var(--graupl-button-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
202
- color:var(--graupl-button-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
208
+ 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%)))));
209
+ 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%)))));
210
+ 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%)))));
203
211
  }
204
212
  .button:hover{
205
- 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%)))));
206
- background:var(--graupl-button-hover-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
207
- color:var(--graupl-button-hover-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
213
+ 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%)))));
214
+ 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%)))));
215
+ 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%)))));
208
216
  }
209
217
  .button:active{
210
- 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%)))));
211
- background:var(--graupl-button-active-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
212
- color:var(--graupl-button-active-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
218
+ 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%)))));
219
+ 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%)))));
220
+ 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%)))));
213
221
  }
214
222
  .button.primary{
215
- --graupl-button-hover-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
216
- --graupl-button-active-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
217
- --graupl-button-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
218
- --graupl-button-hover-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
219
- --graupl-button-active-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
223
+ --graupl-button-hover-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
224
+ --graupl-button-active-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
225
+ --graupl-button-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
226
+ --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%))));
227
+ --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%))));
220
228
  }
221
229
  .button.secondary{
222
- --graupl-button-hover-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
223
- --graupl-button-active-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
224
- --graupl-button-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
225
- --graupl-button-hover-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
226
- --graupl-button-active-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
230
+ --graupl-button-hover-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
231
+ --graupl-button-active-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
232
+ --graupl-button-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
233
+ --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%))));
234
+ --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%))));
227
235
  }
228
236
  .button.tertiary{
229
- --graupl-button-hover-background:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
230
- --graupl-button-active-background:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
231
- --graupl-button-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
232
- --graupl-button-hover-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
233
- --graupl-button-active-border-color:var(--graupl-theme-active--tertiary, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
237
+ --graupl-button-hover-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
238
+ --graupl-button-active-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
239
+ --graupl-button-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
240
+ --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%))));
241
+ --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%))));
234
242
  }
235
243
  }
236
244
  @layer graupl.state{
237
245
  *:focus-visible{
238
246
  border-color:transparent;
239
- outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
247
+ outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
240
248
  outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
241
- box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
249
+ box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
242
250
  }
243
251
  }
244
252
  @layer graupl.theme{
245
253
  :root{
246
- background:var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))));
247
- color:var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%))));
254
+ background:var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));
255
+ color:var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));
248
256
  font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
249
257
  font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
250
258
  }
251
259
  .dark-mode{
252
- --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
253
- --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
254
- --graupl-theme-active--primary--light:var(--graupl-theme-dark--primary--light, var(--graupl-primary--400, hsl(219, 75%, 55%)));
255
- --graupl-theme-active--secondary:var(--graupl-theme-dark--secondary, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
256
- --graupl-theme-active--secondary--dark:var(--graupl-theme-dark--secondary--dark, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
257
- --graupl-theme-active--secondary--light:var(--graupl-theme-dark--secondary--light, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
258
- --graupl-theme-active--tertiary:var(--graupl-theme-dark--tertiary, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
259
- --graupl-theme-active--tertiary--dark:var(--graupl-theme-dark--tertiary--dark, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
260
- --graupl-theme-active--tertiary--light:var(--graupl-theme-dark--tertiary--light, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
261
- --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
262
- --graupl-theme-active--dark:var(--graupl-theme-dark--dark, var(--graupl-primary--100, hsl(219, 100%, 95%)));
263
- --graupl-theme-active--shade--light:var(--graupl-theme-dark--shade--light, var(--graupl-primary--800, hsl(219, 90%, 20%)));
264
- --graupl-theme-active--shade--dark:var(--graupl-theme-dark--shade--dark, var(--graupl-primary--700, hsl(219, 80%, 35%)));
260
+ --graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100, var(--graupl-primary--900, hsl(219, 100%, 10%)));
261
+ --graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200, var(--graupl-primary--800, hsl(219, 90%, 20%)));
262
+ --graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300, var(--graupl-primary--700, hsl(219, 80%, 35%)));
263
+ --graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400, var(--graupl-primary--600, hsl(219, 75%, 45%)));
264
+ --graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
265
+ --graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600, var(--graupl-primary--400, hsl(219, 75%, 55%)));
266
+ --graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700, var(--graupl-primary--300, hsl(219, 80%, 65%)));
267
+ --graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800, var(--graupl-primary--200, hsl(219, 90%, 80%)));
268
+ --graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900, var(--graupl-primary--100, hsl(219, 100%, 95%)));
269
+ --graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
270
+ --graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
271
+ --graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
272
+ --graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
273
+ --graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
274
+ --graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
275
+ --graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
276
+ --graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
277
+ --graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
278
+ --graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
279
+ --graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
280
+ --graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
281
+ --graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
282
+ --graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
283
+ --graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
284
+ --graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
285
+ --graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
286
+ --graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
265
287
  color-scheme:dark;
266
288
  }
267
289
  .light-mode{
268
- --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
269
- --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
270
- --graupl-theme-active--primary--light:var(--graupl-theme-light--primary--light, var(--graupl-primary--600, hsl(219, 75%, 45%)));
271
- --graupl-theme-active--secondary:var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
272
- --graupl-theme-active--secondary--dark:var(--graupl-theme-light--secondary--dark, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
273
- --graupl-theme-active--secondary--light:var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
274
- --graupl-theme-active--tertiary:var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
275
- --graupl-theme-active--tertiary--dark:var(--graupl-theme-light--tertiary--dark, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
276
- --graupl-theme-active--tertiary--light:var(--graupl-theme-light--tertiary--light, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
277
- --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
278
- --graupl-theme-active--dark:var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)));
279
- --graupl-theme-active--shade--light:var(--graupl-theme-light--shade--light, var(--graupl-primary--200, hsl(219, 90%, 80%)));
280
- --graupl-theme-active--shade--dark:var(--graupl-theme-light--shade--dark, var(--graupl-primary--300, hsl(219, 80%, 65%)));
290
+ --graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)));
291
+ --graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)));
292
+ --graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)));
293
+ --graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)));
294
+ --graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
295
+ --graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)));
296
+ --graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)));
297
+ --graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)));
298
+ --graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)));
299
+ --graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
300
+ --graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
301
+ --graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
302
+ --graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
303
+ --graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
304
+ --graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
305
+ --graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
306
+ --graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
307
+ --graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
308
+ --graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
309
+ --graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
310
+ --graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
311
+ --graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
312
+ --graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
313
+ --graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
314
+ --graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
315
+ --graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
316
+ --graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
281
317
  color-scheme:light;
282
318
  }
283
319
  }
package/dist/graupl.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../scss/mixins/_layer.scss","../scss/base/form/_index.scss","../scss/base/form/_variables.scss","graupl.css","../scss/base/link/_index.scss","../scss/base/link/_variables.scss","../scss/layout/container/_index.scss","../scss/layout/columns/_index.scss","../scss/layout/columns/_variables.scss","../scss/component/button/_index.scss","../scss/component/button/_variables.scss","../scss/state/focus/_index.scss","../scss/state/focus/_variables.scss","../scss/theme/_index.scss","../scss/theme/_variables.scss"],"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;AH7DI;EIHF;IACE,qEAAA;YAAA,6DAAA;IACA,uGCG6B;EFgE/B;AACF;AHnEI;EIIF;IACE,uJCCS;EFiEX;EChEE;IACE,gKCEa;EFgEjB;EC/DE;IACE,iKCEc;EF+DlB;EC9DE;IACE,+JCEe;EF8DnB;EC9DI;IACE,gKCTW;EFyEjB;AACF;AHpFI;EMFF;;IAEE,+FAAA;IACA;;;KAAA;IAIA;;;KAAA;IAIA;;;KAAA;IAKA,YAAA;IACA,6XACE;EHuFJ;EG/EE;;IACE,mBAAA;EHkFJ;EG/EE;;IACE,oBAAA;EHkFJ;EG/EE;;IACE,mBAAA;EHkFJ;EG/EE;;IACE,sBAAA;EHkFJ;AACF;AHxHI;EODF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;ELkIZ;EIvHE;IACE,8CAAA;EJyHJ;EIpHE;IACE,wBAAA;EJsHJ;EInHE;IACE,uBAAA;EJqHJ;EI1HE;IACE,wBAAA;EJ4HJ;EIzHE;IACE,uBAAA;EJ2HJ;EIhIE;IACE,wBAAA;EJkIJ;EI/HE;IACE,uBAAA;EJiIJ;EItIE;IACE,wBAAA;EJwIJ;EIrIE;IACE,uBAAA;EJuIJ;EIlIA;IACE;MACE,8BAAA;IJoIF;EACF;AACF;AH/JI;ESDF;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;ENmKF;EMjKE;IACE,oDCemB;EPoJvB;EMhKE;IACE,4DCeoB;EPmJxB;AACF;AHrLI;ESwBF;IACE,kKCwDkB;IDvDlB,gKCagB;IDZhB,oJC0BW;EPsIb;EM9JE;IACE,wKCuDsB;IDtDtB,oKCYoB;IDXpB,4JCyBe;EPuInB;EM7JE;IACE,yKCqDuB;IDpDvB,qKCUqB;IDTrB,6JCuBgB;EPwIpB;EM5JE;IACE,wJAAA;IACA,yJAAA;IACA,oJAAA;IACA,0JAAA;IACA,2JAAA;EN8JJ;EM3JE;IACE,8JAAA;IACA,+JAAA;IACA,0JAAA;IACA,gKAAA;IACA,iKAAA;EN6JJ;EM1JE;IACE,2JAAA;IACA,4JAAA;IACA,uJAAA;IACA,6JAAA;IACA,8JAAA;EN4JJ;AACF;AH3NI;EWHF;IACE,wBAAA;IACA,qSAAA;IACA,2JCUmB;IDTnB,onBCqBe;ET4MjB;AACF;AHnOI;EaDF;IACE,+HCgPkB;ID/OlB,wHC6PiB;ID5PjB,wIC4RU;ID3RV,0EC4RQ;EXrDV;EUnOA;IACE,gHAAA;IACA,4HAAA;IACA,8HAAA;IACA,sHAAA;IACA,kIAAA;IACA,oIAAA;IACA,mHAAA;IACA,+HAAA;IACA,iIAAA;IACA,6GAAA;IACA,2GAAA;IACA,0HAAA;IACA,wHAAA;IAEA,iBAAA;EVoOF;EUhOA;IACE,iHAAA;IACA,6HAAA;IACA,+HAAA;IACA,uHAAA;IACA,mIAAA;IACA,qIAAA;IACA,oHAAA;IACA,gIAAA;IACA,kIAAA;IACA,8GAAA;IACA,4GAAA;IACA,2HAAA;IACA,yHAAA;IAEA,kBAAA;EViOF;AACF","file":"graupl.css"}
1
+ {"version":3,"sources":["../scss/mixins/_layer.scss","../scss/base/form/_index.scss","../scss/base/form/_variables.scss","graupl.css","../scss/base/link/_index.scss","../scss/base/link/_variables.scss","../scss/layout/container/_index.scss","../scss/layout/columns/_index.scss","../scss/layout/columns/_variables.scss","../scss/component/button/_index.scss","../scss/component/button/_variables.scss","../scss/state/focus/_index.scss","../scss/state/focus/_variables.scss","../scss/theme/_index.scss","../scss/theme/_variables.scss"],"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;AHrEI;EIHF;IACE,qEAAA;YAAA,6DAAA;IACA,uGCG6B;EFwE/B;AACF;AH3EI;EIIF;IACE,iKCCS;EFyEX;ECxEE;IACE,0KCEa;EFwEjB;ECvEE;IACE,2KCEc;EFuElB;ECtEE;IACE,yKCEe;EFsEnB;ECtEI;IACE,0KCTW;EFiFjB;AACF;AH5FI;EMFF;;IAEE,+FAAA;IACA;;;KAAA;IAIA;;;KAAA;IAIA;;;KAAA;IAKA,YAAA;IACA,6XACE;EH+FJ;EGvFE;;IACE,mBAAA;EH0FJ;EGvFE;;IACE,oBAAA;EH0FJ;EGvFE;;IACE,mBAAA;EH0FJ;EGvFE;;IACE,sBAAA;EH0FJ;AACF;AHhII;EODF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;EL0IZ;EI/HE;IACE,8CAAA;EJiIJ;EI5HE;IACE,wBAAA;EJ8HJ;EI3HE;IACE,uBAAA;EJ6HJ;EIlIE;IACE,wBAAA;EJoIJ;EIjIE;IACE,uBAAA;EJmIJ;EIxIE;IACE,wBAAA;EJ0IJ;EIvIE;IACE,uBAAA;EJyIJ;EI9IE;IACE,wBAAA;EJgJJ;EI7IE;IACE,uBAAA;EJ+IJ;EI1IA;IACE;MACE,8BAAA;IJ4IF;EACF;AACF;AHvKI;ESDF;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;EN2KF;EMzKE;IACE,oDCemB;EP4JvB;EMxKE;IACE,4DCeoB;EP2JxB;AACF;AH7LI;ESwBF;IACE,kLCwDkB;IDvDlB,8KCagB;IDZhB,oKC0BW;EP8Ib;EMtKE;IACE,wLCuDsB;IDtDtB,oLCYoB;IDXpB,0KCyBe;EP+InB;EMrKE;IACE,yLCqDuB;IDpDvB,qLCUqB;IDTrB,2KCuBgB;EPgJpB;EMpKE;IACE,kKAAA;IACA,mKAAA;IACA,8JAAA;IACA,oKAAA;IACA,qKAAA;ENsKJ;EMnKE;IACE,wKAAA;IACA,yKAAA;IACA,oKAAA;IACA,0KAAA;IACA,2KAAA;ENqKJ;EMlKE;IACE,qKAAA;IACA,sKAAA;IACA,iKAAA;IACA,uKAAA;IACA,wKAAA;ENoKJ;AACF;AHnOI;EWHF;IACE,wBAAA;IACA,qTAAA;IACA,2JCUmB;IDTnB,gpBCqBe;EToNjB;AACF;AH3OI;EaDF;IACE,6ICkMyB;IDjMzB,wICiOyB;IDhOzB,wIC0cU;IDzcV,0EC0cQ;EX3NV;EU3OA;IAEE,2HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,2HAAA;IAGA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IAGA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IAEA,iBAAA;EVuOF;EUnOA;IAEE,4HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,4HAAA;IAGA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IAGA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IAEA,kBAAA;EV+NF;AACF","file":"graupl.css"}
package/dist/state/focus/focus.css CHANGED
@@ -1,9 +1,9 @@
1
1
  @layer graupl.state{
2
2
  *:focus-visible{
3
3
  border-color:transparent;
4
- outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
4
+ outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
5
5
  outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
6
- box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
6
+ box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
7
7
  }
8
8
  }
9
9
 
package/dist/state/focus/focus.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI;ECHF;IACE,wBAAA;IACA,qSAAA;IACA,2JCUmB;IDTnB,onBCqBe;ECxBjB;AACF","file":"focus.css"}
1
+ {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI;ECHF;IACE,wBAAA;IACA,qTAAA;IACA,2JCUmB;IDTnB,gpBCqBe;ECxBjB;AACF","file":"focus.css"}