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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/base/form/form.css +25 -17
  3. package/dist/base/form/form.css.map +1 -1
  4. package/dist/base/link/link.css +5 -5
  5. package/dist/base/link/link.css.map +1 -1
  6. package/dist/component/button/button.css +24 -24
  7. package/dist/component/button/button.css.map +1 -1
  8. package/dist/graupl.css +112 -76
  9. package/dist/graupl.css.map +1 -1
  10. package/dist/state/focus/focus.css +2 -2
  11. package/dist/state/focus/focus.css.map +1 -1
  12. package/dist/theme/theme.css +56 -28
  13. package/dist/theme/theme.css.map +1 -1
  14. package/docs/.vitepress/theme/custom.scss +28 -28
  15. package/index.html +5 -0
  16. package/package.json +1 -1
  17. package/scss/base/form/_index.scss +12 -0
  18. package/scss/base/form/_variables.scss +7 -7
  19. package/scss/base/link/_variables.scss +4 -4
  20. package/scss/component/button/_index.scss +15 -15
  21. package/scss/component/button/_variables.scss +9 -9
  22. package/scss/state/focus/_variables.scss +2 -2
  23. package/scss/theme/_index.scss +66 -28
  24. package/scss/theme/_variables.scss +289 -115
package/dist/theme/theme.css CHANGED
@@ -1,40 +1,68 @@
1
1
  @layer graupl.theme{
2
2
  :root{
3
- background:var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))));
4
- color:var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%))));
3
+ background:var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));
4
+ color:var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));
5
5
  font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
6
6
  font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
7
7
  }
8
8
  .dark-mode{
9
- --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
10
- --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
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(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%)));
18
- --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
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%)));
9
+ --graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100, var(--graupl-primary--900, hsl(219, 100%, 10%)));
10
+ --graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200, var(--graupl-primary--800, hsl(219, 90%, 20%)));
11
+ --graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300, var(--graupl-primary--700, hsl(219, 80%, 35%)));
12
+ --graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400, var(--graupl-primary--600, hsl(219, 75%, 45%)));
13
+ --graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
14
+ --graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600, var(--graupl-primary--400, hsl(219, 75%, 55%)));
15
+ --graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700, var(--graupl-primary--300, hsl(219, 80%, 65%)));
16
+ --graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800, var(--graupl-primary--200, hsl(219, 90%, 80%)));
17
+ --graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900, var(--graupl-primary--100, hsl(219, 100%, 95%)));
18
+ --graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
19
+ --graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
20
+ --graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
21
+ --graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
22
+ --graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
23
+ --graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
24
+ --graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
25
+ --graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
26
+ --graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
27
+ --graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
28
+ --graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
29
+ --graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
30
+ --graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
31
+ --graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
32
+ --graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
33
+ --graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
34
+ --graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
35
+ --graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
22
36
  color-scheme:dark;
23
37
  }
24
38
  .light-mode{
25
- --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
26
- --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
27
- --graupl-theme-active--primary--light:var(--graupl-theme-light--primary--light, var(--graupl-primary--600, hsl(219, 75%, 45%)));
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%)));
34
- --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
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%)));
39
+ --graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)));
40
+ --graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)));
41
+ --graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)));
42
+ --graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)));
43
+ --graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
44
+ --graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)));
45
+ --graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)));
46
+ --graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)));
47
+ --graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)));
48
+ --graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
49
+ --graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
50
+ --graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
51
+ --graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
52
+ --graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
53
+ --graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
54
+ --graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
55
+ --graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
56
+ --graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
57
+ --graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
58
+ --graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
59
+ --graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
60
+ --graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
61
+ --graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
62
+ --graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
63
+ --graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
64
+ --graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
65
+ --graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
38
66
  color-scheme:light;
39
67
  }
40
68
  }
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,+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"}
1
+ {"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI;ECDF;IACE,6ICkMyB;IDjMzB,wICiOyB;IDhOzB,wIC0cU;IDzcV,0EC0cQ;EC/cV;EFSA;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;EEbF;EFiBA;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;EErBF;AACF","file":"theme.css"}
package/docs/.vitepress/theme/custom.scss CHANGED
@@ -1,35 +1,35 @@
1
1
  @use "../../../scss/theme/variables" as theme;
2
2
 
3
3
  :root {
4
- --vp-c-brand: #{theme.$theme-light--primary--dark};
5
- --vp-c-brand-1: #{theme.$theme-light--primary--dark};
6
- --vp-c-brand-2: #{theme.$theme-light--primary--dark};
7
- --vp-c-brand-3: #{theme.$theme-light--primary--dark};
8
- --vp-c-bg: #{theme.$theme-light--light};
9
- --vp-c-bg-alt: #{theme.$theme-light--light};
10
- --vp-c-bg-elv: #{theme.$theme-light--light};
11
- --vp-c-bg-soft: #{theme.$theme-light--light};
12
- --vp-c-border: #{theme.$theme-light--secondary--dark};
13
- --vp-c-divider: #{theme.$theme-light--secondary--dark};
14
- --vp-c-gutter: #{theme.$theme-light--secondary--dark};
15
- --vp-c-text-1: #{theme.$theme-light--dark};
16
- --vp-c-text-2: #{theme.$theme-light--dark};
17
- --vp-c-text-3: #{theme.$theme-light--dark};
4
+ --vp-c-brand: #{theme.$theme-light--primary--700};
5
+ --vp-c-brand-1: #{theme.$theme-light--primary--700};
6
+ --vp-c-brand-2: #{theme.$theme-light--primary--700};
7
+ --vp-c-brand-3: #{theme.$theme-light--primary--700};
8
+ --vp-c-bg: #{theme.$theme-light--primary--100};
9
+ --vp-c-bg-alt: #{theme.$theme-light--primary--100};
10
+ --vp-c-bg-elv: #{theme.$theme-light--primary--100};
11
+ --vp-c-bg-soft: #{theme.$theme-light--primary--100};
12
+ --vp-c-border: #{theme.$theme-light--tertiary--700};
13
+ --vp-c-divider: #{theme.$theme-light--secondary--700};
14
+ --vp-c-gutter: #{theme.$theme-light--secondary--700};
15
+ --vp-c-text-1: #{theme.$theme-light--primary--900};
16
+ --vp-c-text-2: #{theme.$theme-light--primary--900};
17
+ --vp-c-text-3: #{theme.$theme-light--primary--900};
18
18
  }
19
19
 
20
20
  .dark {
21
- --vp-c-brand: #{theme.$theme-light--primary--light};
22
- --vp-c-brand-1: #{theme.$theme-light--primary--light};
23
- --vp-c-brand-2: #{theme.$theme-light--primary--light};
24
- --vp-c-brand-3: #{theme.$theme-light--primary--light};
25
- --vp-c-bg: #{theme.$theme-light--dark};
26
- --vp-c-bg-alt: #{theme.$theme-light--dark};
27
- --vp-c-bg-elv: #{theme.$theme-light--dark};
28
- --vp-c-bg-soft: #{theme.$theme-light--dark};
29
- --vp-c-border: #{theme.$theme-light--secondary--light};
30
- --vp-c-divider: #{theme.$theme-light--secondary--light};
31
- --vp-c-gutter: #{theme.$theme-light--secondary--light};
32
- --vp-c-text-1: #{theme.$theme-light--light};
33
- --vp-c-text-2: #{theme.$theme-light--light};
34
- --vp-c-text-3: #{theme.$theme-light--light};
21
+ --vp-c-brand: #{theme.$theme-light--primary--300};
22
+ --vp-c-brand-1: #{theme.$theme-light--primary--300};
23
+ --vp-c-brand-2: #{theme.$theme-light--primary--300};
24
+ --vp-c-brand-3: #{theme.$theme-light--primary--300};
25
+ --vp-c-bg: #{theme.$theme-light--primary--900};
26
+ --vp-c-bg-alt: #{theme.$theme-light--primary--900};
27
+ --vp-c-bg-elv: #{theme.$theme-light--primary--900};
28
+ --vp-c-bg-soft: #{theme.$theme-light--primary--900};
29
+ --vp-c-border: #{theme.$theme-light--tertiary--300};
30
+ --vp-c-divider: #{theme.$theme-light--secondary--300};
31
+ --vp-c-gutter: #{theme.$theme-light--secondary--300};
32
+ --vp-c-text-1: #{theme.$theme-light--primary--100};
33
+ --vp-c-text-2: #{theme.$theme-light--primary--100};
34
+ --vp-c-text-3: #{theme.$theme-light--primary--100};
35
35
  }
package/index.html CHANGED
@@ -94,6 +94,11 @@
94
94
  <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
95
95
  <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled Radio</label>
96
96
  </fieldset>
97
+ <fieldset disabled>
98
+ <legend>Disabled Fieldset</legend>
99
+ <label for="disabled-fieldset-checkbox">
100
+ <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
101
+ </fieldset>
97
102
  <label for="range">Range</label>
98
103
  <input type="range" class="range" id="range">
99
104
  </main>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@graupl/graupl",
3
- "version": "1.0.0-alpha.1",
3
+ "version": "1.0.0-alpha.2",
4
4
  "description": "A modular and modern CSS framework.",
5
5
  "type": "module",
6
6
  "scripts": {
package/scss/base/form/_index.scss CHANGED
@@ -31,6 +31,14 @@
31
31
  border-style: $fieldset-border-style;
32
32
  border-radius: $fieldset-border-radius;
33
33
  font-size: $fieldset-font-size;
34
+
35
+ &:disabled {
36
+ input,
37
+ textarea,
38
+ select {
39
+ cursor: not-allowed;
40
+ }
41
+ }
34
42
  }
35
43
  }
36
44
 
@@ -73,6 +81,10 @@
73
81
  &:disabled {
74
82
  border-color: $fieldset-disabled-border-color;
75
83
  color: $fieldset-disabled-color;
84
+
85
+ label {
86
+ color: $label-disabled-color;
87
+ }
76
88
  }
77
89
  }
78
90
  }
package/scss/base/form/_variables.scss CHANGED
@@ -47,7 +47,7 @@ $fieldset-font-size: var(
47
47
  // Background properties.
48
48
  $input-background: var(
49
49
  --#{defaults.$prefix}-input-background,
50
- #{theme.$theme-active--light}
50
+ #{theme.$theme-active--primary--100}
51
51
  );
52
52
  $fieldset-background: var(
53
53
  --#{defaults.$prefix}-fieldset-background,
@@ -57,17 +57,17 @@ $fieldset-background: var(
57
57
  // Text properties.
58
58
  $input-color: var(
59
59
  --#{defaults.$prefix}-input-color,
60
- #{theme.$theme-active--dark}
60
+ #{theme.$theme-active--primary--900}
61
61
  );
62
62
  $input-placeholder-color: var(
63
63
  --#{defaults.$prefix}-input-placeholder-color,
64
- #{theme.$theme-active--secondary--light}
64
+ #{theme.$theme-active--secondary--600}
65
65
  );
66
66
  $label-color: var(--#{defaults.$prefix}-label-color, #{$input-color});
67
67
  $fieldset-color: var(--#{defaults.$prefix}-fieldset-color, #{$input-color});
68
68
  $input-disabled-color: var(
69
69
  --#{defaults.$prefix}-input-disabled-color,
70
- #{theme.$theme-active--secondary--light}
70
+ #{theme.$theme-active--secondary--400}
71
71
  );
72
72
  $input-disabled-placeholder-color: var(
73
73
  --#{defaults.$prefix}-input-disabled-placeholder-color,
@@ -111,11 +111,11 @@ $fieldset-border-radius: var(
111
111
  // Border colour properties.
112
112
  $input-border-color: var(
113
113
  --#{defaults.$prefix}-input-border-color,
114
- #{theme.$theme-active--secondary}
114
+ #{theme.$theme-active--secondary--700}
115
115
  );
116
116
  $input-disabled-border-color: var(
117
117
  --#{defaults.$prefix}-input-disabled-border-color,
118
- #{theme.$theme-active--shade--light}
118
+ #{theme.$theme-active--secondary--200}
119
119
  );
120
120
  $fieldset-border-color: var(
121
121
  --#{defaults.$prefix}-fieldset-border-color,
@@ -129,5 +129,5 @@ $fieldset-disabled-border-color: var(
129
129
  // Accent color properties.
130
130
  $input-accent-color: var(
131
131
  --#{defaults.$prefix}-input-accent-color,
132
- #{theme.$theme-active--primary}
132
+ #{theme.$theme-active--primary--700}
133
133
  );
package/scss/base/link/_variables.scss CHANGED
@@ -15,17 +15,17 @@ $link-text-decoration-thickness: var(
15
15
  );
16
16
  $link-color: var(
17
17
  --#{defaults.$prefix}-link-color,
18
- #{theme.$theme-active--primary}
18
+ #{theme.$theme-active--primary--700}
19
19
  );
20
20
  $link-hover-color: var(
21
21
  --#{defaults.$prefix}-link-hover-color,
22
- #{theme.$theme-active--tertiary}
22
+ #{theme.$theme-active--tertiary--700}
23
23
  );
24
24
  $link-active-color: var(
25
25
  --#{defaults.$prefix}-link-active-color,
26
- #{theme.$theme-active--tertiary}
26
+ #{theme.$theme-active--tertiary--700}
27
27
  );
28
28
  $link-visited-color: var(
29
29
  --#{defaults.$prefix}-link-visited-color,
30
- #{theme.$theme-active--primary}
30
+ #{theme.$theme-active--primary--700}
31
31
  );
package/scss/component/button/_index.scss CHANGED
@@ -49,27 +49,27 @@
49
49
  }
50
50
 
51
51
  &.primary {
52
- --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--primary};
53
- --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--primary};
54
- --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--primary};
55
- --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--primary};
56
- --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--primary};
52
+ --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--primary--700};
53
+ --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--primary--700};
54
+ --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--primary--700};
55
+ --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--primary--700};
56
+ --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--primary--700};
57
57
  }
58
58
 
59
59
  &.secondary {
60
- --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--secondary};
61
- --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--secondary};
62
- --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--secondary};
63
- --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--secondary};
64
- --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--secondary};
60
+ --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--secondary--700};
61
+ --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--secondary--700};
62
+ --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--secondary--700};
63
+ --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--secondary--700};
64
+ --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--secondary--700};
65
65
  }
66
66
 
67
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};
68
+ --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--tertiary--700};
69
+ --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--tertiary--700};
70
+ --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--tertiary--700};
71
+ --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--tertiary--700};
72
+ --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--tertiary--700};
73
73
  }
74
74
  }
75
75
  }
package/scss/component/button/_variables.scss CHANGED
@@ -48,29 +48,29 @@ $button-active-transform: var(
48
48
  // Background properties.
49
49
  $button-background: var(
50
50
  --#{defaults.$prefix}-button-background,
51
- #{theme.$theme-active--light}
51
+ #{theme.$theme-active--primary--100}
52
52
  );
53
53
  $button-hover-background: var(
54
54
  --#{defaults.$prefix}-button-hover-background,
55
- #{theme.$theme-active--dark}
55
+ #{theme.$theme-active--primary--900}
56
56
  );
57
57
  $button-active-background: var(
58
58
  --#{defaults.$prefix}-button-active-background,
59
- #{theme.$theme-active--dark}
59
+ #{theme.$theme-active--primary--900}
60
60
  );
61
61
 
62
62
  // Text properties.
63
63
  $button-color: var(
64
64
  --#{defaults.$prefix}-button-color,
65
- #{theme.$theme-active--dark}
65
+ #{theme.$theme-active--primary--900}
66
66
  );
67
67
  $button-hover-color: var(
68
68
  --#{defaults.$prefix}-button-hover-color,
69
- #{theme.$theme-active--light}
69
+ #{theme.$theme-active--primary--100}
70
70
  );
71
71
  $button-active-color: var(
72
72
  --#{defaults.$prefix}-button-active-color,
73
- #{theme.$theme-active--light}
73
+ #{theme.$theme-active--primary--100}
74
74
  );
75
75
 
76
76
  // Border properties.
@@ -90,13 +90,13 @@ $button-border-radius: var(
90
90
  // Border colour properties.
91
91
  $button-border-color: var(
92
92
  --#{defaults.$prefix}-button-border-color,
93
- #{theme.$theme-active--dark}
93
+ #{theme.$theme-active--primary--900}
94
94
  );
95
95
  $button-hover-border-color: var(
96
96
  --#{defaults.$prefix}-button-hover-border-color,
97
- #{theme.$theme-active--dark}
97
+ #{theme.$theme-active--primary--900}
98
98
  );
99
99
  $button-active-border-color: var(
100
100
  --#{defaults.$prefix}-button-active-border-color,
101
- #{theme.$theme-active--dark}
101
+ #{theme.$theme-active--primary--900}
102
102
  );
package/scss/state/focus/_variables.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  $focus-width: var(--#{defaults.$prefix}-focus-width, #{base.$border-width});
8
8
  $focus-outline-color: var(
9
9
  --#{defaults.$prefix}-focus-outline-color,
10
- #{theme.$theme-active--dark}
10
+ #{theme.$theme-active--primary--900}
11
11
  );
12
12
  $focus-outline-width: var(
13
13
  --#{defaults.$prefix}-focus-outline-width,
@@ -23,7 +23,7 @@ $focus-outline-offset: var(
23
23
  );
24
24
  $focus-box-shadow-color: var(
25
25
  --#{defaults.$prefix}-focus-box-shadow-color,
26
- #{theme.$theme-active--light}
26
+ #{theme.$theme-active--primary--100}
27
27
  );
28
28
  $focus-box-shadow-style: var(
29
29
  --#{defaults.$prefix}-focus-box-shadow-style,
package/scss/theme/_index.scss CHANGED
@@ -7,46 +7,84 @@
7
7
 
8
8
  @include layer(theme) {
9
9
  :root {
10
- background: $theme-active--light;
11
- color: $theme-active--dark;
10
+ background: $theme-active--primary--100;
11
+ color: $theme-active--primary--900;
12
12
  font-family: $font-family;
13
13
  font-size: $font-size;
14
14
  }
15
15
 
16
16
  // Set the active theme for dark mode.
17
17
  .dark-mode {
18
- --#{defaults.$prefix}-theme-active--primary: #{$theme-dark--primary};
19
- --#{defaults.$prefix}-theme-active--primary--dark: #{$theme-dark--primary--dark};
20
- --#{defaults.$prefix}-theme-active--primary--light: #{$theme-dark--primary--light};
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};
27
- --#{defaults.$prefix}-theme-active--light: #{$theme-dark--light};
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};
18
+ // Primary colours.
19
+ --#{defaults.$prefix}-theme-active--primary--100: #{$theme-dark--primary--100};
20
+ --#{defaults.$prefix}-theme-active--primary--200: #{$theme-dark--primary--200};
21
+ --#{defaults.$prefix}-theme-active--primary--300: #{$theme-dark--primary--300};
22
+ --#{defaults.$prefix}-theme-active--primary--400: #{$theme-dark--primary--400};
23
+ --#{defaults.$prefix}-theme-active--primary--500: #{$theme-dark--primary--500};
24
+ --#{defaults.$prefix}-theme-active--primary--600: #{$theme-dark--primary--600};
25
+ --#{defaults.$prefix}-theme-active--primary--700: #{$theme-dark--primary--700};
26
+ --#{defaults.$prefix}-theme-active--primary--800: #{$theme-dark--primary--800};
27
+ --#{defaults.$prefix}-theme-active--primary--900: #{$theme-dark--primary--900};
28
+
29
+ // Secondary colours.
30
+ --#{defaults.$prefix}-theme-active--secondary--100: #{$theme-dark--secondary--100};
31
+ --#{defaults.$prefix}-theme-active--secondary--200: #{$theme-dark--secondary--200};
32
+ --#{defaults.$prefix}-theme-active--secondary--300: #{$theme-dark--secondary--300};
33
+ --#{defaults.$prefix}-theme-active--secondary--400: #{$theme-dark--secondary--400};
34
+ --#{defaults.$prefix}-theme-active--secondary--500: #{$theme-dark--secondary--500};
35
+ --#{defaults.$prefix}-theme-active--secondary--600: #{$theme-dark--secondary--600};
36
+ --#{defaults.$prefix}-theme-active--secondary--700: #{$theme-dark--secondary--700};
37
+ --#{defaults.$prefix}-theme-active--secondary--800: #{$theme-dark--secondary--800};
38
+ --#{defaults.$prefix}-theme-active--secondary--900: #{$theme-dark--secondary--900};
39
+
40
+ // Tertiary colours.
41
+ --#{defaults.$prefix}-theme-active--tertiary--100: #{$theme-dark--tertiary--100};
42
+ --#{defaults.$prefix}-theme-active--tertiary--200: #{$theme-dark--tertiary--200};
43
+ --#{defaults.$prefix}-theme-active--tertiary--300: #{$theme-dark--tertiary--300};
44
+ --#{defaults.$prefix}-theme-active--tertiary--400: #{$theme-dark--tertiary--400};
45
+ --#{defaults.$prefix}-theme-active--tertiary--500: #{$theme-dark--tertiary--500};
46
+ --#{defaults.$prefix}-theme-active--tertiary--600: #{$theme-dark--tertiary--600};
47
+ --#{defaults.$prefix}-theme-active--tertiary--700: #{$theme-dark--tertiary--700};
48
+ --#{defaults.$prefix}-theme-active--tertiary--800: #{$theme-dark--tertiary--800};
49
+ --#{defaults.$prefix}-theme-active--tertiary--900: #{$theme-dark--tertiary--900};
31
50
 
32
51
  color-scheme: dark;
33
52
  }
34
53
 
35
54
  // Set the active theme for light mode.
36
55
  .light-mode {
37
- --#{defaults.$prefix}-theme-active--primary: #{$theme-light--primary};
38
- --#{defaults.$prefix}-theme-active--primary--dark: #{$theme-light--primary--dark};
39
- --#{defaults.$prefix}-theme-active--primary--light: #{$theme-light--primary--light};
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};
46
- --#{defaults.$prefix}-theme-active--light: #{$theme-light--light};
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};
56
+ // Primary colours.
57
+ --#{defaults.$prefix}-theme-active--primary--100: #{$theme-light--primary--100};
58
+ --#{defaults.$prefix}-theme-active--primary--200: #{$theme-light--primary--200};
59
+ --#{defaults.$prefix}-theme-active--primary--300: #{$theme-light--primary--300};
60
+ --#{defaults.$prefix}-theme-active--primary--400: #{$theme-light--primary--400};
61
+ --#{defaults.$prefix}-theme-active--primary--500: #{$theme-light--primary--500};
62
+ --#{defaults.$prefix}-theme-active--primary--600: #{$theme-light--primary--600};
63
+ --#{defaults.$prefix}-theme-active--primary--700: #{$theme-light--primary--700};
64
+ --#{defaults.$prefix}-theme-active--primary--800: #{$theme-light--primary--800};
65
+ --#{defaults.$prefix}-theme-active--primary--900: #{$theme-light--primary--900};
66
+
67
+ // Secondary colours.
68
+ --#{defaults.$prefix}-theme-active--secondary--100: #{$theme-light--secondary--100};
69
+ --#{defaults.$prefix}-theme-active--secondary--200: #{$theme-light--secondary--200};
70
+ --#{defaults.$prefix}-theme-active--secondary--300: #{$theme-light--secondary--300};
71
+ --#{defaults.$prefix}-theme-active--secondary--400: #{$theme-light--secondary--400};
72
+ --#{defaults.$prefix}-theme-active--secondary--500: #{$theme-light--secondary--500};
73
+ --#{defaults.$prefix}-theme-active--secondary--600: #{$theme-light--secondary--600};
74
+ --#{defaults.$prefix}-theme-active--secondary--700: #{$theme-light--secondary--700};
75
+ --#{defaults.$prefix}-theme-active--secondary--800: #{$theme-light--secondary--800};
76
+ --#{defaults.$prefix}-theme-active--secondary--900: #{$theme-light--secondary--900};
77
+
78
+ // Tertiary colours.
79
+ --#{defaults.$prefix}-theme-active--tertiary--100: #{$theme-light--tertiary--100};
80
+ --#{defaults.$prefix}-theme-active--tertiary--200: #{$theme-light--tertiary--200};
81
+ --#{defaults.$prefix}-theme-active--tertiary--300: #{$theme-light--tertiary--300};
82
+ --#{defaults.$prefix}-theme-active--tertiary--400: #{$theme-light--tertiary--400};
83
+ --#{defaults.$prefix}-theme-active--tertiary--500: #{$theme-light--tertiary--500};
84
+ --#{defaults.$prefix}-theme-active--tertiary--600: #{$theme-light--tertiary--600};
85
+ --#{defaults.$prefix}-theme-active--tertiary--700: #{$theme-light--tertiary--700};
86
+ --#{defaults.$prefix}-theme-active--tertiary--800: #{$theme-light--tertiary--800};
87
+ --#{defaults.$prefix}-theme-active--tertiary--900: #{$theme-light--tertiary--900};
50
88
 
51
89
  color-scheme: light;
52
90
  }