@graupl/graupl 1.0.0-alpha.0 → 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 (33) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/base/form/form.css +86 -0
  3. package/dist/base/form/form.css.map +1 -0
  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 +26 -19
  7. package/dist/component/button/button.css.map +1 -1
  8. package/dist/graupl.css +190 -40
  9. package/dist/graupl.css.map +1 -1
  10. package/dist/layout/columns/columns.css +15 -0
  11. package/dist/layout/columns/columns.css.map +1 -1
  12. package/dist/state/focus/focus.css +2 -2
  13. package/dist/state/focus/focus.css.map +1 -1
  14. package/dist/theme/theme.css +58 -14
  15. package/dist/theme/theme.css.map +1 -1
  16. package/docs/.vitepress/theme/custom.scss +28 -28
  17. package/index.html +82 -5
  18. package/package.json +1 -1
  19. package/scss/base/_index.scss +1 -0
  20. package/scss/base/form/_defaults.scss +9 -0
  21. package/scss/base/form/_index.scss +90 -0
  22. package/scss/base/form/_variables.scss +133 -0
  23. package/scss/base/form/form.scss +3 -0
  24. package/scss/base/link/_variables.scss +4 -4
  25. package/scss/component/button/_index.scss +18 -10
  26. package/scss/component/button/_variables.scss +9 -9
  27. package/scss/layout/columns/_defaults.scss +1 -0
  28. package/scss/layout/columns/_index.scss +8 -0
  29. package/scss/layout/columns/_variables.scss +4 -0
  30. package/scss/state/focus/_variables.scss +2 -2
  31. package/scss/theme/_defaults.scss +11 -0
  32. package/scss/theme/_index.scss +70 -14
  33. package/scss/theme/_variables.scss +356 -62
package/CHANGELOG.md CHANGED
@@ -2,6 +2,32 @@
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
+
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)
18
+
19
+
20
+ ### Features
21
+
22
+ * add form base styles and components ([daee446](https://github.com/Graupl/graupl/commit/daee4461842c2a412f45478035855bb3a6a65ee5))
23
+ * add tertiary colour for more options ([37cb0de](https://github.com/Graupl/graupl/commit/37cb0de0ba2162b5640ee64a41e000a1758fd591))
24
+ * **layout:** add ability to span columns ([677c781](https://github.com/Graupl/graupl/commit/677c7811f6edd59df58e8ba727220624c74d1d52))
25
+
26
+
27
+ ### Bug Fixes
28
+
29
+ * **theme:** add correct color scheme to theme modes ([b740200](https://github.com/Graupl/graupl/commit/b7402007ee889082a729d7dd7f8dec63c08bf0c8))
30
+
5
31
  ## 1.0.0-alpha.0 (2024-04-15)
6
32
 
7
33
 
package/dist/base/form/form.css ADDED
@@ -0,0 +1,86 @@
1
+ @layer graupl.base{
2
+ input,
3
+ textarea,
4
+ select{
5
+ 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)));
6
+ border-width:var(--graupl-input-border-width, var(--graupl-border-width, 2px));
7
+ border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
8
+ border-radius:var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem));
9
+ font-size:var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem));
10
+ }
11
+ input:disabled,
12
+ textarea:disabled,
13
+ select:disabled{
14
+ cursor:not-allowed;
15
+ }
16
+ label{
17
+ font-size:var(--graupl-label-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
18
+ }
19
+ fieldset{
20
+ display:flex;
21
+ flex-flow:var(--graupl-fieldset-direction, column) wrap;
22
+ gap:var(--graupl-fieldset-gap, calc(var(--graupl-gap, 1rem) / 4));
23
+ 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))));
24
+ border-width:var(--graupl-fieldset-border-width, var(--graupl-input-border-width, var(--graupl-border-width, 2px)));
25
+ border-style:var(--graupl-fieldset-border-style, var(--graupl-botton-border-style, var(--graupl-border-style, solid)));
26
+ border-radius:var(--graupl-fieldset-border-radius, var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem)));
27
+ font-size:var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
28
+ }
29
+ fieldset:disabled input,
30
+ fieldset:disabled textarea,
31
+ fieldset:disabled select{
32
+ cursor:not-allowed;
33
+ }
34
+ }
35
+ @layer graupl.theme{
36
+ input,
37
+ textarea,
38
+ select{
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%)))));
43
+ }
44
+ input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{
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%)))));
46
+ }
47
+ input::placeholder,
48
+ textarea::placeholder,
49
+ select::placeholder{
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%)))));
51
+ }
52
+ input:disabled,
53
+ textarea:disabled,
54
+ select:disabled{
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%)))));
57
+ }
58
+ input:disabled::-moz-placeholder, textarea:disabled::-moz-placeholder, select:disabled::-moz-placeholder{
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%))))));
60
+ }
61
+ input:disabled::placeholder,
62
+ textarea:disabled::placeholder,
63
+ select:disabled::placeholder{
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%))))));
65
+ }
66
+ label{
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%))))));
68
+ }
69
+ label:has(+ input:disabled, + textarea:disabled, + select:disabled){
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%))))));
71
+ }
72
+ fieldset{
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%))))));
76
+ }
77
+ fieldset:disabled{
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%))))));
83
+ }
84
+ }
85
+
86
+ /*# sourceMappingURL=form.css.map */
package/dist/base/form/form.css.map ADDED
@@ -0,0 +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"}
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--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--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--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--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--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--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,mKCEa;ECNjB;EFOE;IACE,oKCEc;ECPlB;EFQE;IACE,+JCEe;ECRnB;EFQI;IACE,mKCTW;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,33 +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(340, 65%, 35%))));
48
- --graupl-button-active-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
49
- --graupl-button-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
50
- --graupl-button-hover-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
51
- --graupl-button-active-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 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
+ }
53
+ .button.tertiary{
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%))));
52
59
  }
53
60
  }
54
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;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
@@ -1,3 +1,87 @@
1
+ @layer graupl.base{
2
+ input,
3
+ textarea,
4
+ select{
5
+ 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)));
6
+ border-width:var(--graupl-input-border-width, var(--graupl-border-width, 2px));
7
+ border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
8
+ border-radius:var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem));
9
+ font-size:var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem));
10
+ }
11
+ input:disabled,
12
+ textarea:disabled,
13
+ select:disabled{
14
+ cursor:not-allowed;
15
+ }
16
+ label{
17
+ font-size:var(--graupl-label-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
18
+ }
19
+ fieldset{
20
+ display:flex;
21
+ flex-flow:var(--graupl-fieldset-direction, column) wrap;
22
+ gap:var(--graupl-fieldset-gap, calc(var(--graupl-gap, 1rem) / 4));
23
+ 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))));
24
+ border-width:var(--graupl-fieldset-border-width, var(--graupl-input-border-width, var(--graupl-border-width, 2px)));
25
+ border-style:var(--graupl-fieldset-border-style, var(--graupl-botton-border-style, var(--graupl-border-style, solid)));
26
+ border-radius:var(--graupl-fieldset-border-radius, var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem)));
27
+ font-size:var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
28
+ }
29
+ fieldset:disabled input,
30
+ fieldset:disabled textarea,
31
+ fieldset:disabled select{
32
+ cursor:not-allowed;
33
+ }
34
+ }
35
+ @layer graupl.theme{
36
+ input,
37
+ textarea,
38
+ select{
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%)))));
43
+ }
44
+ input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{
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%)))));
46
+ }
47
+ input::placeholder,
48
+ textarea::placeholder,
49
+ select::placeholder{
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%)))));
51
+ }
52
+ input:disabled,
53
+ textarea:disabled,
54
+ select:disabled{
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%)))));
57
+ }
58
+ input:disabled::-moz-placeholder, textarea:disabled::-moz-placeholder, select:disabled::-moz-placeholder{
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%))))));
60
+ }
61
+ input:disabled::placeholder,
62
+ textarea:disabled::placeholder,
63
+ select:disabled::placeholder{
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%))))));
65
+ }
66
+ label{
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%))))));
68
+ }
69
+ label:has(+ input:disabled, + textarea:disabled, + select:disabled){
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%))))));
71
+ }
72
+ fieldset{
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%))))));
76
+ }
77
+ fieldset:disabled{
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%))))));
83
+ }
84
+ }
1
85
  @layer graupl.base{
2
86
  a{
3
87
  -webkit-text-decoration:var(--graupl-link-text-decoration, underline);
@@ -7,19 +91,19 @@
7
91
  }
8
92
  @layer graupl.theme{
9
93
  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%)))));
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%)))));
11
95
  }
12
96
  a:hover{
13
- color:var(--graupl-link-hover-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--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%)))));
14
98
  }
15
99
  a:active{
16
- color:var(--graupl-link-active-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--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%)))));
17
101
  }
18
102
  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%)))));
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%)))));
20
104
  }
21
105
  a:visited:hover{
22
- color:var(--graupl-link-hover-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--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%)))));
23
107
  }
24
108
  }
25
109
  @layer graupl.layout{
@@ -64,18 +148,33 @@
64
148
  grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
65
149
  gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
66
150
  }
151
+ .columns > *{
152
+ grid-column:span var(--graupl-columns-span, 1);
153
+ }
67
154
  .columns-1{
68
155
  --graupl-columns-count:1;
69
156
  }
157
+ .span-1{
158
+ --graupl-columns-span:1;
159
+ }
70
160
  .columns-2{
71
161
  --graupl-columns-count:2;
72
162
  }
163
+ .span-2{
164
+ --graupl-columns-span:2;
165
+ }
73
166
  .columns-3{
74
167
  --graupl-columns-count:3;
75
168
  }
169
+ .span-3{
170
+ --graupl-columns-span:3;
171
+ }
76
172
  .columns-4{
77
173
  --graupl-columns-count:4;
78
174
  }
175
+ .span-4{
176
+ --graupl-columns-span:4;
177
+ }
79
178
  @media screen and (max-width: 48ch){
80
179
  .columns{
81
180
  --graupl-columns-min-width:1fr;
@@ -106,65 +205,116 @@
106
205
  }
107
206
  @layer graupl.theme{
108
207
  .button{
109
- 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%)))));
110
- background:var(--graupl-button-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
111
- 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%)))));
112
211
  }
113
212
  .button:hover{
114
- 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%)))));
115
- background:var(--graupl-button-hover-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
116
- 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%)))));
117
216
  }
118
217
  .button:active{
119
- 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%)))));
120
- background:var(--graupl-button-active-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
121
- 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%)))));
122
221
  }
123
222
  .button.primary{
124
- --graupl-button-hover-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
125
- --graupl-button-active-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
126
- --graupl-button-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
127
- --graupl-button-hover-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
128
- --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%))));
129
228
  }
130
229
  .button.secondary{
131
- --graupl-button-hover-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
132
- --graupl-button-active-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
133
- --graupl-button-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
134
- --graupl-button-hover-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
135
- --graupl-button-active-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 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%))));
235
+ }
236
+ .button.tertiary{
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%))));
136
242
  }
137
243
  }
138
244
  @layer graupl.state{
139
245
  *:focus-visible{
140
246
  border-color:transparent;
141
- 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%)))));
142
248
  outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
143
- 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%))))));
144
250
  }
145
251
  }
146
252
  @layer graupl.theme{
147
253
  :root{
148
- background:var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))));
149
- 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%))));
150
256
  font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
151
257
  font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
152
258
  }
153
259
  .dark-mode{
154
- --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
155
- --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
156
- --graupl-theme-active--primary--light:var(--graupl-theme-dark--primary--light, var(--graupl-primary--400, hsl(219, 75%, 55%)));
157
- --graupl-theme-active--secondary:var(--graupl-theme-dark--secondary, var(--graupl-secondary--300, hsl(340, 65%, 65%)));
158
- --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
159
- --graupl-theme-active--dark:var(--graupl-theme-dark--dark, var(--graupl-primary--100, hsl(219, 100%, 95%)));
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%)));
287
+ color-scheme:dark;
160
288
  }
161
289
  .light-mode{
162
- --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
163
- --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
164
- --graupl-theme-active--primary--light:var(--graupl-theme-light--primary--light, var(--graupl-primary--600, hsl(219, 75%, 45%)));
165
- --graupl-theme-active--secondary:var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)));
166
- --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
167
- --graupl-theme-active--dark:var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)));
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%)));
317
+ color-scheme:light;
168
318
  }
169
319
  }
170
320
 
package/dist/graupl.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../scss/mixins/_layer.scss","../scss/base/link/_index.scss","../scss/base/link/_variables.scss","graupl.css","../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;IACE,qEAAA;YAAA,6DAAA;IACA,uGCG6B;ECN/B;AACF;AHGI;ECIF;IACE,uJCCS;ECLX;EFME;IACE,mKCEa;ECNjB;EFOE;IACE,oKCEc;ECPlB;EFQE;IACE,+JCEe;ECRnB;EFQI;IACE,mKCTW;ECGjB;AACF;AHdI;EIFF;;IAEE,+FAAA;IACA;;;KAAA;IAIA;;;KAAA;IAIA;;;KAAA;IAKA,YAAA;IACA,6XACE;EDiBJ;ECTE;;IACE,mBAAA;EDYJ;ECTE;;IACE,oBAAA;EDYJ;ECTE;;IACE,mBAAA;EDYJ;ECTE;;IACE,sBAAA;EDYJ;AACF;AHlDI;EKDF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;EH4DZ;EE/CE;IACE,wBAAA;EFiDJ;EElDE;IACE,wBAAA;EFoDJ;EErDE;IACE,wBAAA;EFuDJ;EExDE;IACE,wBAAA;EF0DJ;EErDA;IACE;MACE,8BAAA;IFuDF;EACF;AACF;AH1EI;EODF;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;EJ8EF;EI5EE;IACE,oDCemB;EL+DvB;EI3EE;IACE,4DCeoB;EL8DxB;AACF;AHhGI;EOwBF;IACE,kKCwDkB;IDvDlB,gKCagB;IDZhB,oJC0BW;ELiDb;EIzEE;IACE,wKCuDsB;IDtDtB,oKCYoB;IDXpB,4JCyBe;ELkDnB;EIxEE;IACE,yKCqDuB;IDpDvB,qKCUqB;IDTrB,6JCuBgB;ELmDpB;EIvEE;IACE,wJAAA;IACA,yJAAA;IACA,oJAAA;IACA,0JAAA;IACA,2JAAA;EJyEJ;EItEE;IACE,8JAAA;IACA,+JAAA;IACA,0JAAA;IACA,gKAAA;IACA,iKAAA;EJwEJ;AACF;AH/HI;ESHF;IACE,wBAAA;IACA,qSAAA;IACA,2JCUmB;IDTnB,onBCqBe;EPgHjB;AACF;AHvII;EWDF;IACE,+HCoJkB;IDnJlB,wHC+JiB;ID9JjB,wICoKU;IDnKV,0ECoKQ;ETzBV;EQvIA;IACE,gHAAA;IACA,4HAAA;IACA,8HAAA;IACA,sHAAA;IACA,6GAAA;IACA,2GAAA;ERyIF;EQrIA;IACE,iHAAA;IACA,6HAAA;IACA,+HAAA;IACA,uHAAA;IACA,8GAAA;IACA,4GAAA;ERuIF;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/layout/columns/columns.css CHANGED
@@ -4,18 +4,33 @@
4
4
  grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
5
5
  gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
6
6
  }
7
+ .columns > *{
8
+ grid-column:span var(--graupl-columns-span, 1);
9
+ }
7
10
  .columns-1{
8
11
  --graupl-columns-count:1;
9
12
  }
13
+ .span-1{
14
+ --graupl-columns-span:1;
15
+ }
10
16
  .columns-2{
11
17
  --graupl-columns-count:2;
12
18
  }
19
+ .span-2{
20
+ --graupl-columns-span:2;
21
+ }
13
22
  .columns-3{
14
23
  --graupl-columns-count:3;
15
24
  }
25
+ .span-3{
26
+ --graupl-columns-span:3;
27
+ }
16
28
  .columns-4{
17
29
  --graupl-columns-count:4;
18
30
  }
31
+ .span-4{
32
+ --graupl-columns-span:4;
33
+ }
19
34
  @media screen and (max-width: 48ch){
20
35
  .columns{
21
36
  --graupl-columns-min-width:1fr;
package/dist/layout/columns/columns.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI;ECDF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;ECAZ;EFaE;IACE,wBAAA;EEXJ;EFUE;IACE,wBAAA;EERJ;EFOE;IACE,wBAAA;EELJ;EFIE;IACE,wBAAA;EEFJ;EFOA;IACE;MACE,8BAAA;IELF;EACF;AACF","file":"columns.css"}
1
+ {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI;ECDF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;ECAZ;EFWE;IACE,8CAAA;EETJ;EFcE;IACE,wBAAA;EEZJ;EFeE;IACE,uBAAA;EEbJ;EFQE;IACE,wBAAA;EENJ;EFSE;IACE,uBAAA;EEPJ;EFEE;IACE,wBAAA;EEAJ;EFGE;IACE,uBAAA;EEDJ;EFJE;IACE,wBAAA;EEMJ;EFHE;IACE,uBAAA;EEKJ;EFAA;IACE;MACE,8BAAA;IEEF;EACF;AACF","file":"columns.css"}