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

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 (28) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/base/form/form.css +78 -0
  3. package/dist/base/form/form.css.map +1 -0
  4. package/dist/base/link/link.css +3 -3
  5. package/dist/base/link/link.css.map +1 -1
  6. package/dist/component/button/button.css +12 -5
  7. package/dist/component/button/button.css.map +1 -1
  8. package/dist/graupl.css +124 -10
  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/theme/theme.css +18 -2
  13. package/dist/theme/theme.css.map +1 -1
  14. package/index.html +77 -5
  15. package/package.json +1 -1
  16. package/scss/base/_index.scss +1 -0
  17. package/scss/base/form/_defaults.scss +9 -0
  18. package/scss/base/form/_index.scss +78 -0
  19. package/scss/base/form/_variables.scss +133 -0
  20. package/scss/base/form/form.scss +3 -0
  21. package/scss/base/link/_variables.scss +2 -2
  22. package/scss/component/button/_index.scss +8 -0
  23. package/scss/layout/columns/_defaults.scss +1 -0
  24. package/scss/layout/columns/_index.scss +8 -0
  25. package/scss/layout/columns/_variables.scss +4 -0
  26. package/scss/theme/_defaults.scss +11 -0
  27. package/scss/theme/_index.scss +18 -0
  28. package/scss/theme/_variables.scss +120 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
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.1](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.0...v1.0.0-alpha.1) (2024-04-17)
6
+
7
+
8
+ ### Features
9
+
10
+ * add form base styles and components ([daee446](https://github.com/Graupl/graupl/commit/daee4461842c2a412f45478035855bb3a6a65ee5))
11
+ * add tertiary colour for more options ([37cb0de](https://github.com/Graupl/graupl/commit/37cb0de0ba2162b5640ee64a41e000a1758fd591))
12
+ * **layout:** add ability to span columns ([677c781](https://github.com/Graupl/graupl/commit/677c7811f6edd59df58e8ba727220624c74d1d52))
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * **theme:** add correct color scheme to theme modes ([b740200](https://github.com/Graupl/graupl/commit/b7402007ee889082a729d7dd7f8dec63c08bf0c8))
18
+
5
19
  ## 1.0.0-alpha.0 (2024-04-15)
6
20
 
7
21
 
package/dist/base/form/form.css ADDED
@@ -0,0 +1,78 @@
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
+ }
30
+ @layer graupl.theme{
31
+ input,
32
+ textarea,
33
+ 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%)))));
38
+ }
39
+ 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%)))));
41
+ }
42
+ input::placeholder,
43
+ textarea::placeholder,
44
+ 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%)))));
46
+ }
47
+ input:disabled,
48
+ textarea:disabled,
49
+ 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%)))));
52
+ }
53
+ 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%))))));
55
+ }
56
+ input:disabled::placeholder,
57
+ textarea:disabled::placeholder,
58
+ 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%))))));
60
+ }
61
+ 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%))))));
63
+ }
64
+ 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%))))));
66
+ }
67
+ 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%))))));
71
+ }
72
+ 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%))))));
75
+ }
76
+ }
77
+
78
+ /*# 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;AACF;AHpBI;EC4BF;;;IAGE,4KCuEiB;IDtEjB,+JCMe;IDLf,mJCeU;IDdV,sKCsFiB;EC3FnB;EFOE;IACE,wLCeoB;EClBxB;EFEE;;;IACE,wLCeoB;EClBxB;EFME;;;IACE,yLCiEwB;IDhExB,qLCgBiB;EClBrB;EFII;IACE,qOCiB2B;ECjBjC;EFDI;;;IACE,qOCiB2B;ECjBjC;EFKA;IACE,8KCKU;ECRZ;EFKE;IACE,yNCYiB;ECfrB;EFOA;IACE,iNCmDoB;IDlDpB,kMClBkB;IDmBlB,iLCJa;ECDf;EFOE;IACE,uOCkD2B;IDjD3B,4NCKoB;ECVxB;AACF","file":"form.css"}
package/dist/base/link/link.css CHANGED
@@ -10,16 +10,16 @@
10
10
  color:var(--graupl-link-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, 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, var(--graupl-theme-light--tertiary, 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, var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
17
17
  }
18
18
  a:visited{
19
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%)))));
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, var(--graupl-theme-light--tertiary, 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,uJCCS;ECLX;EFME;IACE,gKCEa;ECNjB;EFOE;IACE,iKCEc;ECPlB;EFQE;IACE,+JCEe;ECRnB;EFQI;IACE,gKCTW;ECGjB;AACF","file":"link.css"}
package/dist/component/button/button.css CHANGED
@@ -44,11 +44,18 @@
44
44
  --graupl-button-active-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, 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, 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%))));
52
+ }
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%))));
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,kKCwDkB;IDvDlB,gKCagB;IDZhB,oJC0BW;EClCb;EFUE;IACE,wKCuDsB;IDtDtB,oKCYoB;IDXpB,4JCyBe;ECjCnB;EFWE;IACE,yKCqDuB;IDpDvB,qKCUqB;IDTrB,6JCuBgB;EChCpB;EFYE;IACE,wJAAA;IACA,yJAAA;IACA,oJAAA;IACA,0JAAA;IACA,2JAAA;EEVJ;EFaE;IACE,8JAAA;IACA,+JAAA;IACA,0JAAA;IACA,gKAAA;IACA,iKAAA;EEXJ;EFcE;IACE,2JAAA;IACA,4JAAA;IACA,uJAAA;IACA,6JAAA;IACA,8JAAA;EEZJ;AACF","file":"button.css"}
package/dist/graupl.css CHANGED
@@ -1,3 +1,79 @@
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
+ }
30
+ @layer graupl.theme{
31
+ input,
32
+ textarea,
33
+ 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%)))));
38
+ }
39
+ 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%)))));
41
+ }
42
+ input::placeholder,
43
+ textarea::placeholder,
44
+ 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%)))));
46
+ }
47
+ input:disabled,
48
+ textarea:disabled,
49
+ 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%)))));
52
+ }
53
+ 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%))))));
55
+ }
56
+ input:disabled::placeholder,
57
+ textarea:disabled::placeholder,
58
+ 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%))))));
60
+ }
61
+ 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%))))));
63
+ }
64
+ 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%))))));
66
+ }
67
+ 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%))))));
71
+ }
72
+ 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%))))));
75
+ }
76
+ }
1
77
  @layer graupl.base{
2
78
  a{
3
79
  -webkit-text-decoration:var(--graupl-link-text-decoration, underline);
@@ -10,16 +86,16 @@
10
86
  color:var(--graupl-link-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
11
87
  }
12
88
  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%)))));
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%)))));
14
90
  }
15
91
  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%)))));
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%)))));
17
93
  }
18
94
  a:visited{
19
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%)))));
20
96
  }
21
97
  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%)))));
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%)))));
23
99
  }
24
100
  }
25
101
  @layer graupl.layout{
@@ -64,18 +140,33 @@
64
140
  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
141
  gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
66
142
  }
143
+ .columns > *{
144
+ grid-column:span var(--graupl-columns-span, 1);
145
+ }
67
146
  .columns-1{
68
147
  --graupl-columns-count:1;
69
148
  }
149
+ .span-1{
150
+ --graupl-columns-span:1;
151
+ }
70
152
  .columns-2{
71
153
  --graupl-columns-count:2;
72
154
  }
155
+ .span-2{
156
+ --graupl-columns-span:2;
157
+ }
73
158
  .columns-3{
74
159
  --graupl-columns-count:3;
75
160
  }
161
+ .span-3{
162
+ --graupl-columns-span:3;
163
+ }
76
164
  .columns-4{
77
165
  --graupl-columns-count:4;
78
166
  }
167
+ .span-4{
168
+ --graupl-columns-span:4;
169
+ }
79
170
  @media screen and (max-width: 48ch){
80
171
  .columns{
81
172
  --graupl-columns-min-width:1fr;
@@ -128,11 +219,18 @@
128
219
  --graupl-button-active-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
129
220
  }
130
221
  .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%))));
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%))));
227
+ }
228
+ .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%))));
136
234
  }
137
235
  }
138
236
  @layer graupl.state{
@@ -154,17 +252,33 @@
154
252
  --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
155
253
  --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
156
254
  --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%)));
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%)));
158
261
  --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
159
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%)));
265
+ color-scheme:dark;
160
266
  }
161
267
  .light-mode{
162
268
  --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
163
269
  --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
164
270
  --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%)));
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%)));
166
277
  --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
167
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%)));
281
+ color-scheme:light;
168
282
  }
169
283
  }
170
284
 
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;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"}
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"}
package/dist/theme/theme.css CHANGED
@@ -9,17 +9,33 @@
9
9
  --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
10
10
  --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
11
11
  --graupl-theme-active--primary--light:var(--graupl-theme-dark--primary--light, var(--graupl-primary--400, hsl(219, 75%, 55%)));
12
- --graupl-theme-active--secondary:var(--graupl-theme-dark--secondary, var(--graupl-secondary--300, hsl(340, 65%, 65%)));
12
+ --graupl-theme-active--secondary:var(--graupl-theme-dark--secondary, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
13
+ --graupl-theme-active--secondary--dark:var(--graupl-theme-dark--secondary--dark, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
14
+ --graupl-theme-active--secondary--light:var(--graupl-theme-dark--secondary--light, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
15
+ --graupl-theme-active--tertiary:var(--graupl-theme-dark--tertiary, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
16
+ --graupl-theme-active--tertiary--dark:var(--graupl-theme-dark--tertiary--dark, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
17
+ --graupl-theme-active--tertiary--light:var(--graupl-theme-dark--tertiary--light, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
13
18
  --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
14
19
  --graupl-theme-active--dark:var(--graupl-theme-dark--dark, var(--graupl-primary--100, hsl(219, 100%, 95%)));
20
+ --graupl-theme-active--shade--light:var(--graupl-theme-dark--shade--light, var(--graupl-primary--800, hsl(219, 90%, 20%)));
21
+ --graupl-theme-active--shade--dark:var(--graupl-theme-dark--shade--dark, var(--graupl-primary--700, hsl(219, 80%, 35%)));
22
+ color-scheme:dark;
15
23
  }
16
24
  .light-mode{
17
25
  --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
18
26
  --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
19
27
  --graupl-theme-active--primary--light:var(--graupl-theme-light--primary--light, var(--graupl-primary--600, hsl(219, 75%, 45%)));
20
- --graupl-theme-active--secondary:var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)));
28
+ --graupl-theme-active--secondary:var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
29
+ --graupl-theme-active--secondary--dark:var(--graupl-theme-light--secondary--dark, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
30
+ --graupl-theme-active--secondary--light:var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
31
+ --graupl-theme-active--tertiary:var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
32
+ --graupl-theme-active--tertiary--dark:var(--graupl-theme-light--tertiary--dark, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
33
+ --graupl-theme-active--tertiary--light:var(--graupl-theme-light--tertiary--light, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
21
34
  --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
22
35
  --graupl-theme-active--dark:var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)));
36
+ --graupl-theme-active--shade--light:var(--graupl-theme-light--shade--light, var(--graupl-primary--200, hsl(219, 90%, 80%)));
37
+ --graupl-theme-active--shade--dark:var(--graupl-theme-light--shade--dark, var(--graupl-primary--300, hsl(219, 80%, 65%)));
38
+ color-scheme:light;
23
39
  }
24
40
  }
25
41
 
package/dist/theme/theme.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI;ECDF;IACE,+HCoJkB;IDnJlB,wHC+JiB;ID9JjB,wICoKU;IDnKV,0ECoKQ;ECzKV;EFSA;IACE,gHAAA;IACA,4HAAA;IACA,8HAAA;IACA,sHAAA;IACA,6GAAA;IACA,2GAAA;EEPF;EFWA;IACE,iHAAA;IACA,6HAAA;IACA,+HAAA;IACA,uHAAA;IACA,8GAAA;IACA,4GAAA;EETF;AACF","file":"theme.css"}
1
+ {"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI;ECDF;IACE,+HCgPkB;ID/OlB,wHC6PiB;ID5PjB,wIC4RU;ID3RV,0EC4RQ;ECjSV;EFSA;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;EERF;EFYA;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;EEXF;AACF","file":"theme.css"}
package/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="en" class="light-mode">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,14 +16,86 @@
16
16
  <h1>Hello Graupl!</h1>
17
17
  <p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
18
18
  <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
19
- <p>Graupl support light and dark modes out-of-the-box.</p>
19
+ <p>Graupl supports light and dark modes out-of-the-box.</p>
20
20
  <h2>Buttons</h2>
21
- <p>There are 3 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.</p>
22
- <div class="columns">
23
- <button class="button">Button</button>
21
+ <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.</p>
22
+ <div class="columns columns-4">
23
+ <button class="button">Default Button</button>
24
24
  <button class="button primary">Primary Button</button>
25
25
  <button class="button secondary">Secondary Button</button>
26
+ <button class="button tertiary">Tertiary Button</button>
26
27
  </div>
28
+ <h2>Form elements</h2>
29
+ <p>Graupl provides default styling for all form elements.</p>
30
+ <label for="input">Input</label>
31
+ <input type="text" placeholder="Input" id="input">
32
+ <label for="input-readonly">Readonly Input</label>
33
+ <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input"readonly>
34
+ <label for="input-disabled">Disabled Input</label>
35
+ <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
36
+ <label for="textarea">Textarea</label>
37
+ <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
38
+ <label for="textarea-readonly">Readonly Textarea</label>
39
+ <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly" readonly>Readonly Textarea</textarea>
40
+ <label for="textarea-disabled">Disabled Textarea</label>
41
+ <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
42
+ <label for="select">Select</label>
43
+ <select id="select">
44
+ <option value="1">Option 1</option>
45
+ <option value="2">Option 2</option>
46
+ <optgroup label="Group 1">
47
+ <option value="3">Option 3</option>
48
+ <option value="4">Option 4</option>
49
+ <option value="5">Option 5</option>
50
+ </optgroup>
51
+ </select>
52
+ <label for="select-disabled">Disabled Select</label>
53
+ <select id="select-disabled" disabled>
54
+ <option value="1">Option 1</option>
55
+ <option value="2">Option 2</option>
56
+ <optgroup label="Group 1">
57
+ <option value="3">Option 3</option>
58
+ <option value="4">Option 4</option>
59
+ <option value="5">Option 5</option>
60
+ </optgroup>
61
+ </select>
62
+ <label for"multi-select">Multi-select</label>
63
+ <select id="multi-select" multiple>
64
+ <option value="1">Option 1</option>
65
+ <option value="2">Option 2</option>
66
+ <optgroup label="Group 1">
67
+ <option value="3">Option 3</option>
68
+ <option value="4">Option 4</option>
69
+ <option value="5">Option 5</option>
70
+ </optgroup>
71
+ </select>
72
+ <label for="multi-select-disabled">Disabled Multi-select</label>
73
+ <select id="multi-select-disabled" multiple disabled>
74
+ <option value="1">Option 1</option>
75
+ <option value="2">Option 2</option>
76
+ <optgroup label="Group 1">
77
+ <option value="3">Option 3</option>
78
+ <option value="4">Option 4</option>
79
+ <option value="5">Option 5</option>
80
+ </optgroup>
81
+ </select>
82
+ <fieldset>
83
+ <legend>Checkboxes</legend>
84
+ <label for="checkbox">
85
+ <input type="checkbox" id="checkbox"> Checkbox</label>
86
+ <label for="checkbox-checked">
87
+ <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
88
+ <label for="checkbox-disabled">
89
+ <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
90
+ </fieldset>
91
+ <fieldset>
92
+ <legend>Radio Buttons</legend>
93
+ <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
94
+ <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
95
+ <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled Radio</label>
96
+ </fieldset>
97
+ <label for="range">Range</label>
98
+ <input type="range" class="range" id="range">
27
99
  </main>
28
100
  </body>
29
101
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@graupl/graupl",
3
- "version": "1.0.0-alpha.0",
3
+ "version": "1.0.0-alpha.1",
4
4
  "description": "A modular and modern CSS framework.",
5
5
  "type": "module",
6
6
  "scripts": {
package/scss/base/_index.scss CHANGED
@@ -1,3 +1,4 @@
1
1
  // Graupl base.
2
2
 
3
+ @forward "form";
3
4
  @forward "link";
package/scss/base/form/_defaults.scss ADDED
@@ -0,0 +1,9 @@
1
+ // Default values for Graupl.
2
+ //
3
+ // Generally, these should not be used directly when styling components.
4
+ // They are mainly used to provide default fallbacks for custom properties
5
+ // which can be found in the `variables.scss` file.
6
+
7
+ @forward "../../defaults";
8
+
9
+ $fieldset-direction: column !default;
package/scss/base/form/_index.scss ADDED
@@ -0,0 +1,78 @@
1
+ // Graupl form base styles.
2
+
3
+ @use "variables" as *;
4
+ @use "../../mixins/layer" as *;
5
+
6
+ @include layer(base) {
7
+ input,
8
+ textarea,
9
+ select {
10
+ padding: $input-padding;
11
+ border-width: $input-border-width;
12
+ border-style: $input-border-style;
13
+ border-radius: $input-border-radius;
14
+ font-size: $input-font-size;
15
+
16
+ &:disabled {
17
+ cursor: not-allowed;
18
+ }
19
+ }
20
+
21
+ label {
22
+ font-size: $label-font-size;
23
+ }
24
+
25
+ fieldset {
26
+ display: flex;
27
+ flex-flow: $fieldset-direction wrap;
28
+ gap: $fieldset-gap;
29
+ padding: $fieldset-padding;
30
+ border-width: $fieldset-border-width;
31
+ border-style: $fieldset-border-style;
32
+ border-radius: $fieldset-border-radius;
33
+ font-size: $fieldset-font-size;
34
+ }
35
+ }
36
+
37
+ @include layer(theme) {
38
+ input,
39
+ textarea,
40
+ select {
41
+ border-color: $input-border-color;
42
+ background: $input-background;
43
+ color: $input-color;
44
+ accent-color: $input-accent-color;
45
+
46
+ &::placeholder {
47
+ color: $input-placeholder-color;
48
+ }
49
+
50
+ &:disabled {
51
+ border-color: $input-disabled-border-color;
52
+ color: $input-disabled-color;
53
+
54
+ &::placeholder {
55
+ color: $input-disabled-placeholder-color;
56
+ }
57
+ }
58
+ }
59
+
60
+ label {
61
+ color: $label-color;
62
+
63
+ &:has(+ input:disabled, + textarea:disabled, + select:disabled) {
64
+ color: $label-disabled-color;
65
+ }
66
+ }
67
+
68
+ fieldset {
69
+ border-color: $fieldset-border-color;
70
+ background: $fieldset-background;
71
+ color: $fieldset-color;
72
+
73
+ &:disabled {
74
+ border-color: $fieldset-disabled-border-color;
75
+ color: $fieldset-disabled-color;
76
+ }
77
+ }
78
+ }
package/scss/base/form/_variables.scss ADDED
@@ -0,0 +1,133 @@
1
+ // Variables referencing custom properties.
2
+
3
+ @use "../../variables" as base;
4
+ @use "../../theme/variables" as theme;
5
+ @use "defaults";
6
+ @use "sass:map";
7
+
8
+ $input-padding-x: var(--#{defaults.$prefix}-input-padding-x, #{base.$gap});
9
+ $input-padding-y: var(
10
+ --#{defaults.$prefix}-input-padding-y,
11
+ calc(#{base.$gap} / 2)
12
+ );
13
+ $input-padding: var(
14
+ --#{defaults.$prefix}-input-padding,
15
+ #{$input-padding-y} #{$input-padding-x}
16
+ );
17
+ $input-font-size: var(
18
+ --#{defaults.$prefix}-input-font-size,
19
+ #{map.get(base.$font-size, default)}
20
+ );
21
+ $label-font-size: var(
22
+ --#{defaults.$prefix}-label-font-size,
23
+ #{$input-font-size}
24
+ );
25
+ $fieldset-direction: var(
26
+ --#{defaults.$prefix}-fieldset-direction,
27
+ #{defaults.$fieldset-direction}
28
+ );
29
+ $fieldset-gap: var(--#{defaults.$prefix}-fieldset-gap, calc(#{base.$gap} / 4));
30
+ $fieldset-padding-x: var(
31
+ --#{defaults.$prefix}-fieldset-padding-x,
32
+ #{$input-padding-x}
33
+ );
34
+ $fieldset-padding-y: var(
35
+ --#{defaults.$prefix}-fieldset-padding-y,
36
+ #{$input-padding-y}
37
+ );
38
+ $fieldset-padding: var(
39
+ --#{defaults.$prefix}-fieldset-padding,
40
+ #{$fieldset-padding-y} #{$fieldset-padding-x}
41
+ );
42
+ $fieldset-font-size: var(
43
+ --#{defaults.$prefix}-fieldset-font-size,
44
+ #{$input-font-size}
45
+ );
46
+
47
+ // Background properties.
48
+ $input-background: var(
49
+ --#{defaults.$prefix}-input-background,
50
+ #{theme.$theme-active--light}
51
+ );
52
+ $fieldset-background: var(
53
+ --#{defaults.$prefix}-fieldset-background,
54
+ #{$input-background}
55
+ );
56
+
57
+ // Text properties.
58
+ $input-color: var(
59
+ --#{defaults.$prefix}-input-color,
60
+ #{theme.$theme-active--dark}
61
+ );
62
+ $input-placeholder-color: var(
63
+ --#{defaults.$prefix}-input-placeholder-color,
64
+ #{theme.$theme-active--secondary--light}
65
+ );
66
+ $label-color: var(--#{defaults.$prefix}-label-color, #{$input-color});
67
+ $fieldset-color: var(--#{defaults.$prefix}-fieldset-color, #{$input-color});
68
+ $input-disabled-color: var(
69
+ --#{defaults.$prefix}-input-disabled-color,
70
+ #{theme.$theme-active--secondary--light}
71
+ );
72
+ $input-disabled-placeholder-color: var(
73
+ --#{defaults.$prefix}-input-disabled-placeholder-color,
74
+ #{$input-disabled-color}
75
+ );
76
+ $label-disabled-color: var(
77
+ --#{defaults.$prefix}-label-disabled-color,
78
+ #{$input-disabled-color}
79
+ );
80
+ $fieldset-disabled-color: var(
81
+ --#{defaults.$prefix}-fieldset-disabled-color,
82
+ #{$input-disabled-color}
83
+ );
84
+
85
+ // Border properties.
86
+ $input-border-width: var(
87
+ --#{defaults.$prefix}-input-border-width,
88
+ #{base.$border-width}
89
+ );
90
+ $input-border-style: var(
91
+ --#{defaults.$prefix}-botton-border-style,
92
+ #{base.$border-style}
93
+ );
94
+ $input-border-radius: var(
95
+ --#{defaults.$prefix}-input-border-radius,
96
+ #{base.$border-radius}
97
+ );
98
+ $fieldset-border-width: var(
99
+ --#{defaults.$prefix}-fieldset-border-width,
100
+ #{$input-border-width}
101
+ );
102
+ $fieldset-border-style: var(
103
+ --#{defaults.$prefix}-fieldset-border-style,
104
+ #{$input-border-style}
105
+ );
106
+ $fieldset-border-radius: var(
107
+ --#{defaults.$prefix}-fieldset-border-radius,
108
+ #{$input-border-radius}
109
+ );
110
+
111
+ // Border colour properties.
112
+ $input-border-color: var(
113
+ --#{defaults.$prefix}-input-border-color,
114
+ #{theme.$theme-active--secondary}
115
+ );
116
+ $input-disabled-border-color: var(
117
+ --#{defaults.$prefix}-input-disabled-border-color,
118
+ #{theme.$theme-active--shade--light}
119
+ );
120
+ $fieldset-border-color: var(
121
+ --#{defaults.$prefix}-fieldset-border-color,
122
+ #{$input-border-color}
123
+ );
124
+ $fieldset-disabled-border-color: var(
125
+ --#{defaults.$prefix}-fieldset-disabled-border-color,
126
+ #{$input-disabled-border-color}
127
+ );
128
+
129
+ // Accent color properties.
130
+ $input-accent-color: var(
131
+ --#{defaults.$prefix}-input-accent-color,
132
+ #{theme.$theme-active--primary}
133
+ );
package/scss/base/form/form.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl form base styles.
2
+
3
+ @forward "index";
package/scss/base/link/_variables.scss CHANGED
@@ -19,11 +19,11 @@ $link-color: var(
19
19
  );
20
20
  $link-hover-color: var(
21
21
  --#{defaults.$prefix}-link-hover-color,
22
- #{theme.$theme-active--secondary}
22
+ #{theme.$theme-active--tertiary}
23
23
  );
24
24
  $link-active-color: var(
25
25
  --#{defaults.$prefix}-link-active-color,
26
- #{theme.$theme-active--secondary}
26
+ #{theme.$theme-active--tertiary}
27
27
  );
28
28
  $link-visited-color: var(
29
29
  --#{defaults.$prefix}-link-visited-color,
package/scss/component/button/_index.scss CHANGED
@@ -63,5 +63,13 @@
63
63
  --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--secondary};
64
64
  --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--secondary};
65
65
  }
66
+
67
+ &.tertiary {
68
+ --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--tertiary};
69
+ --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--tertiary};
70
+ --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--tertiary};
71
+ --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--tertiary};
72
+ --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--tertiary};
73
+ }
66
74
  }
67
75
  }
package/scss/layout/columns/_defaults.scss CHANGED
@@ -11,3 +11,4 @@ $columns-count: 3 !default;
11
11
  $columns-disable-width: 48ch !default;
12
12
  $columns-min-count: 1 !default;
13
13
  $columns-max-count: 4 !default;
14
+ $columns-span: 1 !default;
package/scss/layout/columns/_index.scss CHANGED
@@ -13,12 +13,20 @@
13
13
  repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
14
14
  );
15
15
  gap: $columns-gap;
16
+
17
+ > * {
18
+ grid-column: span $columns-span;
19
+ }
16
20
  }
17
21
 
18
22
  @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
19
23
  .columns-#{$i} {
20
24
  --#{defaults.$prefix}-columns-count: #{$i};
21
25
  }
26
+
27
+ .span-#{$i} {
28
+ --#{defaults.$prefix}-columns-span: #{$i};
29
+ }
22
30
  }
23
31
 
24
32
  // Disable columns on small screens to avoid horizontal bleeding.
package/scss/layout/columns/_variables.scss CHANGED
@@ -18,3 +18,7 @@ $columns-max-width: var(
18
18
  --#{defaults.$prefix}-columns-max-width,
19
19
  #{defaults.$columns-max-width}
20
20
  );
21
+ $columns-span: var(
22
+ --#{defaults.$prefix}-columns-span,
23
+ #{defaults.$columns-span}
24
+ );
package/scss/theme/_defaults.scss CHANGED
@@ -20,6 +20,17 @@ $primary: (
20
20
  900: hsl(219deg 100% 10%),
21
21
  ) !default;
22
22
  $secondary: (
23
+ 100: hsl(235deg 40% 95%),
24
+ 200: hsl(235deg 30% 80%),
25
+ 300: hsl(235deg 20% 65%),
26
+ 400: hsl(235deg 15% 55%),
27
+ 500: hsl(235deg 15% 50%),
28
+ 600: hsl(235deg 15% 45%),
29
+ 700: hsl(235deg 20% 35%),
30
+ 800: hsl(235deg 30% 20%),
31
+ 900: hsl(235deg 40% 10%),
32
+ ) !default;
33
+ $tertiary: (
23
34
  100: hsl(340deg 85% 95%),
24
35
  200: hsl(340deg 75% 80%),
25
36
  300: hsl(340deg 65% 65%),
package/scss/theme/_index.scss CHANGED
@@ -19,8 +19,17 @@
19
19
  --#{defaults.$prefix}-theme-active--primary--dark: #{$theme-dark--primary--dark};
20
20
  --#{defaults.$prefix}-theme-active--primary--light: #{$theme-dark--primary--light};
21
21
  --#{defaults.$prefix}-theme-active--secondary: #{$theme-dark--secondary};
22
+ --#{defaults.$prefix}-theme-active--secondary--dark: #{$theme-dark--secondary--dark};
23
+ --#{defaults.$prefix}-theme-active--secondary--light: #{$theme-dark--secondary--light};
24
+ --#{defaults.$prefix}-theme-active--tertiary: #{$theme-dark--tertiary};
25
+ --#{defaults.$prefix}-theme-active--tertiary--dark: #{$theme-dark--tertiary--dark};
26
+ --#{defaults.$prefix}-theme-active--tertiary--light: #{$theme-dark--tertiary--light};
22
27
  --#{defaults.$prefix}-theme-active--light: #{$theme-dark--light};
23
28
  --#{defaults.$prefix}-theme-active--dark: #{$theme-dark--dark};
29
+ --#{defaults.$prefix}-theme-active--shade--light: #{$theme-dark--shade--light};
30
+ --#{defaults.$prefix}-theme-active--shade--dark: #{$theme-dark--shade--dark};
31
+
32
+ color-scheme: dark;
24
33
  }
25
34
 
26
35
  // Set the active theme for light mode.
@@ -29,7 +38,16 @@
29
38
  --#{defaults.$prefix}-theme-active--primary--dark: #{$theme-light--primary--dark};
30
39
  --#{defaults.$prefix}-theme-active--primary--light: #{$theme-light--primary--light};
31
40
  --#{defaults.$prefix}-theme-active--secondary: #{$theme-light--secondary};
41
+ --#{defaults.$prefix}-theme-active--secondary--dark: #{$theme-light--secondary--dark};
42
+ --#{defaults.$prefix}-theme-active--secondary--light: #{$theme-light--secondary--light};
43
+ --#{defaults.$prefix}-theme-active--tertiary: #{$theme-light--tertiary};
44
+ --#{defaults.$prefix}-theme-active--tertiary--dark: #{$theme-light--tertiary--dark};
45
+ --#{defaults.$prefix}-theme-active--tertiary--light: #{$theme-light--tertiary--light};
32
46
  --#{defaults.$prefix}-theme-active--light: #{$theme-light--light};
33
47
  --#{defaults.$prefix}-theme-active--dark: #{$theme-light--dark};
48
+ --#{defaults.$prefix}-theme-active--shade--light: #{$theme-light--shade--light};
49
+ --#{defaults.$prefix}-theme-active--shade--dark: #{$theme-light--shade--dark};
50
+
51
+ color-scheme: light;
34
52
  }
35
53
  }
package/scss/theme/_variables.scss CHANGED
@@ -74,7 +74,57 @@ $secondary: (
74
74
  ),
75
75
  );
76
76
 
77
+ // Tertiary theme colours.
78
+ $tertiary: (
79
+ 100:
80
+ var(
81
+ --#{defaults.$prefix}-tertiary--100,
82
+ #{map.get(defaults.$tertiary, 100)}
83
+ ),
84
+ 200:
85
+ var(
86
+ --#{defaults.$prefix}-tertiary--200,
87
+ #{map.get(defaults.$tertiary, 200)}
88
+ ),
89
+ 300:
90
+ var(
91
+ --#{defaults.$prefix}-tertiary--300,
92
+ #{map.get(defaults.$tertiary, 300)}
93
+ ),
94
+ 400:
95
+ var(
96
+ --#{defaults.$prefix}-tertiary--400,
97
+ #{map.get(defaults.$tertiary, 400)}
98
+ ),
99
+ 500:
100
+ var(
101
+ --#{defaults.$prefix}-tertiary--500,
102
+ #{map.get(defaults.$tertiary, 500)}
103
+ ),
104
+ 600:
105
+ var(
106
+ --#{defaults.$prefix}-tertiary--600,
107
+ #{map.get(defaults.$tertiary, 600)}
108
+ ),
109
+ 700:
110
+ var(
111
+ --#{defaults.$prefix}-tertiary--700,
112
+ #{map.get(defaults.$tertiary, 700)}
113
+ ),
114
+ 800:
115
+ var(
116
+ --#{defaults.$prefix}-tertiary--800,
117
+ #{map.get(defaults.$tertiary, 800)}
118
+ ),
119
+ 900:
120
+ var(
121
+ --#{defaults.$prefix}-tertiary--900,
122
+ #{map.get(defaults.$tertiary, 900)}
123
+ ),
124
+ );
125
+
77
126
  // Theme colours.
127
+ // Colour primary.
78
128
  $theme-light--primary: var(
79
129
  --#{defaults.$prefix}-theme-light--primary,
80
130
  #{map.get($primary, 700)}
@@ -111,6 +161,8 @@ $theme-active--primary--light: var(
111
161
  --#{defaults.$prefix}-theme-active--primary--light,
112
162
  #{$theme-light--primary--light}
113
163
  );
164
+
165
+ // Color secondary.
114
166
  $theme-light--secondary: var(
115
167
  --#{defaults.$prefix}-theme-light--secondary,
116
168
  #{map.get($secondary, 700)}
@@ -147,6 +199,46 @@ $theme-active--secondary--light: var(
147
199
  --#{defaults.$prefix}-theme-active--secondary--light,
148
200
  #{$theme-light--secondary--light}
149
201
  );
202
+
203
+ // Colour tertiary.
204
+ $theme-light--tertiary: var(
205
+ --#{defaults.$prefix}-theme-light--tertiary,
206
+ #{map.get($tertiary, 700)}
207
+ );
208
+ $theme-light--tertiary--dark: var(
209
+ --#{defaults.$prefix}-theme-light--tertiary--dark,
210
+ #{map.get($tertiary, 800)}
211
+ );
212
+ $theme-light--tertiary--light: var(
213
+ --#{defaults.$prefix}-theme-light--tertiary--light,
214
+ #{map.get($tertiary, 600)}
215
+ );
216
+ $theme-dark--tertiary: var(
217
+ --#{defaults.$prefix}-theme-dark--tertiary,
218
+ #{map.get($tertiary, 300)}
219
+ );
220
+ $theme-dark--tertiary--dark: var(
221
+ --#{defaults.$prefix}-theme-dark--tertiary--dark,
222
+ #{map.get($tertiary, 200)}
223
+ );
224
+ $theme-dark--tertiary--light: var(
225
+ --#{defaults.$prefix}-theme-dark--tertiary--light,
226
+ #{map.get($tertiary, 400)}
227
+ );
228
+ $theme-active--tertiary: var(
229
+ --#{defaults.$prefix}-theme-active--tertiary,
230
+ #{$theme-light--tertiary}
231
+ );
232
+ $theme-active--tertiary--dark: var(
233
+ --#{defaults.$prefix}-theme-active--tertiary--dark,
234
+ #{$theme-light--tertiary--dark}
235
+ );
236
+ $theme-active--tertiary--light: var(
237
+ --#{defaults.$prefix}-theme-active--tertiary--light,
238
+ #{$theme-light--tertiary--light}
239
+ );
240
+
241
+ // Colour light.
150
242
  $theme-light--light: var(
151
243
  --#{defaults.$prefix}-theme-light--light,
152
244
  #{map.get($primary, 100)}
@@ -159,6 +251,8 @@ $theme-active--light: var(
159
251
  --#{defaults.$prefix}-theme-active--light,
160
252
  #{$theme-light--light}
161
253
  );
254
+
255
+ // Colour dark.
162
256
  $theme-light--dark: var(
163
257
  --#{defaults.$prefix}-theme-light--dark,
164
258
  #{map.get($primary, 900)}
@@ -172,6 +266,32 @@ $theme-active--dark: var(
172
266
  #{$theme-light--dark}
173
267
  );
174
268
 
269
+ // Colour shade.
270
+ $theme-light--shade--light: var(
271
+ --#{defaults.$prefix}-theme-light--shade--light,
272
+ #{map.get($primary, 200)}
273
+ );
274
+ $theme-light--shade--dark: var(
275
+ --#{defaults.$prefix}-theme-light--shade--dark,
276
+ #{map.get($primary, 300)}
277
+ );
278
+ $theme-dark--shade--light: var(
279
+ --#{defaults.$prefix}-theme-dark--shade--light,
280
+ #{map.get($primary, 800)}
281
+ );
282
+ $theme-dark--shade--dark: var(
283
+ --#{defaults.$prefix}-theme-dark--shade--dark,
284
+ #{map.get($primary, 700)}
285
+ );
286
+ $theme-active--shade--light: var(
287
+ --#{defaults.$prefix}-theme-active--shade--light,
288
+ #{$theme-light--shade--light}
289
+ );
290
+ $theme-active--shade--dark: var(
291
+ --#{defaults.$prefix}-theme-active--shade--dark,
292
+ #{$theme-light--shade--dark}
293
+ );
294
+
175
295
  // Font properties.
176
296
  $font-family: var(--#{defaults.$prefix}-font-family, #{defaults.$font-family});
177
297
  $font-size: var(--#{defaults.$prefix}-font-size, #{defaults.$font-size});