@cagovweb/state-template 6.4.2 → 6.4.3

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 (32) hide show
  1. package/dist/css/cagov.core.css +8134 -7222
  2. package/dist/css/cagov.core.flat.css +27154 -0
  3. package/dist/css/cagov.core.min.css +1 -5
  4. package/dist/css/colortheme-delta.css +54 -1
  5. package/dist/css/colortheme-delta.min.css +1 -1
  6. package/dist/css/colortheme-eureka.css +53 -1
  7. package/dist/css/colortheme-eureka.min.css +1 -1
  8. package/dist/css/colortheme-mono.css +54 -1
  9. package/dist/css/colortheme-mono.min.css +1 -1
  10. package/dist/css/colortheme-oceanside.css +54 -1
  11. package/dist/css/colortheme-oceanside.min.css +1 -1
  12. package/dist/css/colortheme-orangecounty.css +54 -1
  13. package/dist/css/colortheme-orangecounty.min.css +1 -1
  14. package/dist/css/colortheme-pasorobles.css +54 -1
  15. package/dist/css/colortheme-pasorobles.min.css +1 -1
  16. package/dist/css/colortheme-sacramento.css +71 -18
  17. package/dist/css/colortheme-sacramento.min.css +1 -1
  18. package/dist/css/colortheme-santabarbara.css +54 -1
  19. package/dist/css/colortheme-santabarbara.min.css +1 -1
  20. package/dist/css/colortheme-santacruz.css +54 -1
  21. package/dist/css/colortheme-santacruz.min.css +1 -1
  22. package/dist/css/colortheme-shasta.css +54 -1
  23. package/dist/css/colortheme-shasta.min.css +1 -1
  24. package/dist/css/colortheme-sierra.css +54 -1
  25. package/dist/css/colortheme-sierra.min.css +1 -1
  26. package/dist/css/colortheme-trinity.css +54 -1
  27. package/dist/css/colortheme-trinity.min.css +1 -1
  28. package/dist/fonts/CaGov.woff2 +0 -0
  29. package/dist/js/cagov.core.js +17 -2
  30. package/dist/js/cagov.core.min.js +2 -2
  31. package/dist/readme.md +2 -2
  32. package/package.json +1 -1
package/dist/css/colortheme-delta.css CHANGED
@@ -1,7 +1,12 @@
1
1
  /* -----------------------------------------
2
- DELTA
2
+ DELTA COLOR THEME
3
3
  ----------------------------------------- */
4
+
4
5
  :root {
6
+ /* color variations are hardcoded for older browsers
7
+ color-mix is used for the newer browsers */
8
+
9
+ /* Highlight */
5
10
  --color-p1: #a5bdc5;
6
11
  --color-p1-dark: #99b4bd;
7
12
  --color-p1-darker: #8fadb7;
@@ -9,6 +14,8 @@
9
14
  --color-p1-light: #b7cad1;
10
15
  --color-p1-lighter: #c9d7dc;
11
16
  --color-p1-lightest: #dbe5e8;
17
+
18
+ /* Primary */
12
19
  --color-p2: #577786;
13
20
  --color-p2-dark: #4f6c7a;
14
21
  --color-p2-darker: #496470;
@@ -16,6 +23,8 @@
16
23
  --color-p2-light: #79929e;
17
24
  --color-p2-lighter: #9aadb6;
18
25
  --color-p2-lightest: #bcc9cf;
26
+
27
+ /* Standout */
19
28
  --color-p3: #46565e;
20
29
  --color-p3-dark: #3d4b52;
21
30
  --color-p3-darker: #37434a;
@@ -23,17 +32,61 @@
23
32
  --color-p3-light: #6b787e;
24
33
  --color-p3-lighter: #909a9e;
25
34
  --color-p3-lightest: #b5bbbf;
35
+
36
+ /* Secondary 1 */
26
37
  --color-s1: #f5f9fa;
27
38
  --color-s1-darker: #ebf3f5;
28
39
  --color-s1-lighter: #fafcfd;
40
+
41
+ /* Secondary 2 */
29
42
  --color-s2: #ccd4d6;
30
43
  --color-s2-dark: #b8c3c6;
31
44
  --color-s2-darker: #a4b3b6;
45
+
46
+ /* Secondary 3 */
32
47
  --color-s3: #a7b7bc;
33
48
  --color-s3-dark: #93a6ad;
34
49
  --color-s3-light: #cad4d7;
35
50
  --color-s3-lighter: #dce2e4;
51
+
52
+ /* Megamenu sub navigation background */
36
53
  --sub-nav-bg: var(--color-s1);
54
+
55
+ /* Mobile navigation drawer background */
37
56
  --mobile-drawer: var(--color-p3);
38
57
  --mobile-drawer-active: var(--color-p3-light);
39
58
  }
59
+
60
+ /* color-mix is used for the newer browsers */
61
+ @supports (color: color-mix) {
62
+ :root {
63
+ --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
64
+ --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
65
+ --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
66
+ --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
67
+ --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
68
+ --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
69
+ --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
70
+ --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
71
+ --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
72
+ --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
73
+ --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
74
+ --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
75
+ --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
76
+ --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
77
+ --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
78
+ --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
79
+ --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
80
+ --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
81
+ --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
82
+ --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
83
+ --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
84
+ --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
85
+ --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
86
+ --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
87
+ --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
88
+ --sub-nav-bg: var(--color-s1);
89
+ --mobile-drawer: var(--color-p3);
90
+ --mobile-drawer-active: var(--color-p3-light);
91
+ }
92
+ }
package/dist/css/colortheme-delta.min.css CHANGED
@@ -1 +1 @@
1
- :root{--color-p1: #a5bdc5;--color-p1-dark: #99b4bd;--color-p1-darker: #8fadb7;--color-p1-darkest: #7a9da9;--color-p1-light: #b7cad1;--color-p1-lighter: #c9d7dc;--color-p1-lightest: #dbe5e8;--color-p2: #577786;--color-p2-dark: #4f6c7a;--color-p2-darker: #496470;--color-p2-darkest: #3b515b;--color-p2-light: #79929e;--color-p2-lighter: #9aadb6;--color-p2-lightest: #bcc9cf;--color-p3: #46565e;--color-p3-dark: #3d4b52;--color-p3-darker: #37434a;--color-p3-darkest: #283135;--color-p3-light: #6b787e;--color-p3-lighter: #909a9e;--color-p3-lightest: #b5bbbf;--color-s1: #f5f9fa;--color-s1-darker: #ebf3f5;--color-s1-lighter: #fafcfd;--color-s2: #ccd4d6;--color-s2-dark: #b8c3c6;--color-s2-darker: #a4b3b6;--color-s3: #a7b7bc;--color-s3-dark: #93a6ad;--color-s3-light: #cad4d7;--color-s3-lighter: #dce2e4;--sub-nav-bg: var(--color-s1);--mobile-drawer: var(--color-p3);--mobile-drawer-active: var(--color-p3-light)}
1
+ :root{--color-p1:#a5bdc5;--color-p1-dark:#99b4bd;--color-p1-darker:#8fadb7;--color-p1-darkest:#7a9da9;--color-p1-light:#b7cad1;--color-p1-lighter:#c9d7dc;--color-p1-lightest:#dbe5e8;--color-p2:#577786;--color-p2-dark:#4f6c7a;--color-p2-darker:#496470;--color-p2-darkest:#3b515b;--color-p2-light:#79929e;--color-p2-lighter:#9aadb6;--color-p2-lightest:#bcc9cf;--color-p3:#46565e;--color-p3-dark:#3d4b52;--color-p3-darker:#37434a;--color-p3-darkest:#283135;--color-p3-light:#6b787e;--color-p3-lighter:#909a9e;--color-p3-lightest:#b5bbbf;--color-s1:#f5f9fa;--color-s1-darker:#ebf3f5;--color-s1-lighter:#fafcfd;--color-s2:#ccd4d6;--color-s2-dark:#b8c3c6;--color-s2-darker:#a4b3b6;--color-s3:#a7b7bc;--color-s3-dark:#93a6ad;--color-s3-light:#cad4d7;--color-s3-lighter:#dce2e4;--sub-nav-bg:var(--color-s1);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
package/dist/css/colortheme-eureka.css CHANGED
@@ -1,7 +1,11 @@
1
1
  /* -----------------------------------------
2
- EUREKA
2
+ EUREKA COLOR THEME
3
3
  ----------------------------------------- */
4
4
  :root {
5
+ /* color variations are hardcoded for older browsers
6
+ color-mix is used for the newer browsers */
7
+
8
+ /* Highlight */
5
9
  --color-p1: #d9b295;
6
10
  --color-p1-dark: #d4a786;
7
11
  --color-p1-darker: #d09f7b;
@@ -9,6 +13,8 @@
9
13
  --color-p1-light: #e1c1aa;
10
14
  --color-p1-lighter: #e8d1bf;
11
15
  --color-p1-lightest: #f0e0d5;
16
+
17
+ /* Primary */
12
18
  --color-p2: #3e4b4d;
13
19
  --color-p2-dark: #354042;
14
20
  --color-p2-darker: #2e3839;
@@ -16,6 +22,8 @@
16
22
  --color-p2-light: #656f71;
17
23
  --color-p2-lighter: #8b9394;
18
24
  --color-p2-lightest: #b2b7b8;
25
+
26
+ /* Standout */
19
27
  --color-p3: #21272a;
20
28
  --color-p3-dark: #181c1f;
21
29
  --color-p3-darker: #111416;
@@ -23,17 +31,61 @@
23
31
  --color-p3-light: #4d5255;
24
32
  --color-p3-lighter: #7a7d7f;
25
33
  --color-p3-lightest: #a6a9aa;
34
+
35
+ /* Secondary 1 */
26
36
  --color-s1: #f9f4f0;
27
37
  --color-s1-darker: #f5ece5;
28
38
  --color-s1-lighter: #fcfaf8;
39
+
40
+ /* Secondary 2 */
29
41
  --color-s2: #e2dfda;
30
42
  --color-s2-dark: #d2cec6;
31
43
  --color-s2-darker: #c3bcb2;
44
+
45
+ /* Secondary 3 */
32
46
  --color-s3: #ccc8bf;
33
47
  --color-s3-dark: #bcb7ab;
34
48
  --color-s3-light: #e0ded9;
35
49
  --color-s3-lighter: #ebe9e5;
50
+
51
+ /* Megamenu sub navigation background */
36
52
  --sub-nav-bg: var(--color-s1);
53
+
54
+ /* Mobile navigation drawer background */
37
55
  --mobile-drawer: var(--color-p3);
38
56
  --mobile-drawer-active: var(--color-p3-light);
39
57
  }
58
+
59
+ /* color-mix is used for the newer browsers */
60
+ @supports (color: color-mix) {
61
+ :root {
62
+ --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
63
+ --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
64
+ --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
65
+ --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
66
+ --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
67
+ --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
68
+ --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
69
+ --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
70
+ --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
71
+ --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
72
+ --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
73
+ --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
74
+ --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
75
+ --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
76
+ --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
77
+ --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
78
+ --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
79
+ --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
80
+ --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
81
+ --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
82
+ --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
83
+ --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
84
+ --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
85
+ --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
86
+ --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
87
+ --sub-nav-bg: var(--color-s1);
88
+ --mobile-drawer: var(--color-p3);
89
+ --mobile-drawer-active: var(--color-p3-light);
90
+ }
91
+ }
package/dist/css/colortheme-eureka.min.css CHANGED
@@ -1 +1 @@
1
- :root{--color-p1: #d9b295;--color-p1-dark: #d4a786;--color-p1-darker: #d09f7b;--color-p1-darkest: #c68c60;--color-p1-light: #e1c1aa;--color-p1-lighter: #e8d1bf;--color-p1-lightest: #f0e0d5;--color-p2: #3e4b4d;--color-p2-dark: #354042;--color-p2-darker: #2e3839;--color-p2-darkest: #1e2425;--color-p2-light: #656f71;--color-p2-lighter: #8b9394;--color-p2-lightest: #b2b7b8;--color-p3: #21272a;--color-p3-dark: #181c1f;--color-p3-darker: #111416;--color-p3-darkest: #020202;--color-p3-light: #4d5255;--color-p3-lighter: #7a7d7f;--color-p3-lightest: #a6a9aa;--color-s1: #f9f4f0;--color-s1-darker: #f5ece5;--color-s1-lighter: #fcfaf8;--color-s2: #e2dfda;--color-s2-dark: #d2cec6;--color-s2-darker: #c3bcb2;--color-s3: #ccc8bf;--color-s3-dark: #bcb7ab;--color-s3-light: #e0ded9;--color-s3-lighter: #ebe9e5;--sub-nav-bg: var(--color-s1);--mobile-drawer: var(--color-p3);--mobile-drawer-active: var(--color-p3-light)}
1
+ :root{--color-p1:#d9b295;--color-p1-dark:#d4a786;--color-p1-darker:#d09f7b;--color-p1-darkest:#c68c60;--color-p1-light:#e1c1aa;--color-p1-lighter:#e8d1bf;--color-p1-lightest:#f0e0d5;--color-p2:#3e4b4d;--color-p2-dark:#354042;--color-p2-darker:#2e3839;--color-p2-darkest:#1e2425;--color-p2-light:#656f71;--color-p2-lighter:#8b9394;--color-p2-lightest:#b2b7b8;--color-p3:#21272a;--color-p3-dark:#181c1f;--color-p3-darker:#111416;--color-p3-darkest:#020202;--color-p3-light:#4d5255;--color-p3-lighter:#7a7d7f;--color-p3-lightest:#a6a9aa;--color-s1:#f9f4f0;--color-s1-darker:#f5ece5;--color-s1-lighter:#fcfaf8;--color-s2:#e2dfda;--color-s2-dark:#d2cec6;--color-s2-darker:#c3bcb2;--color-s3:#ccc8bf;--color-s3-dark:#bcb7ab;--color-s3-light:#e0ded9;--color-s3-lighter:#ebe9e5;--sub-nav-bg:var(--color-s1);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--sub-nav-bg:var(--color-s1);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
package/dist/css/colortheme-mono.css CHANGED
@@ -1,7 +1,12 @@
1
1
  /* -----------------------------------------
2
- MONO
2
+ MONO COLOR THEME
3
3
  ----------------------------------------- */
4
+
4
5
  :root {
6
+ /* color variations are hardcoded for older browsers
7
+ color-mix is used for the newer browsers */
8
+
9
+ /* Highlight */
5
10
  --color-p1: #ffce2b;
6
11
  --color-p1-dark: #ffc917;
7
12
  --color-p1-darker: #ffc607;
@@ -9,6 +14,8 @@
9
14
  --color-p1-light: #ffd855;
10
15
  --color-p1-lighter: #ffe280;
11
16
  --color-p1-lightest: #ffebaa;
17
+
18
+ /* Primary */
12
19
  --color-p2: #545351;
13
20
  --color-p2-dark: #4a4947;
14
21
  --color-p2-darker: #42413f;
@@ -16,6 +23,8 @@
16
23
  --color-p2-light: #767574;
17
24
  --color-p2-lighter: #989897;
18
25
  --color-p2-lightest: #bbbab9;
26
+
27
+ /* Standout */
19
28
  --color-p3: #191919;
20
29
  --color-p3-dark: #0f0f0f;
21
30
  --color-p3-darker: #070707;
@@ -23,17 +32,61 @@
23
32
  --color-p3-light: #474747;
24
33
  --color-p3-lighter: #757575;
25
34
  --color-p3-lightest: #a3a3a3;
35
+
36
+ /* Secondary 1 */
26
37
  --color-s1: #ededef;
27
38
  --color-s1-darker: #e5e5e8;
28
39
  --color-s1-lighter: #f6f6f7;
40
+
41
+ /* Secondary 2 */
29
42
  --color-s2: #d4d4cd;
30
43
  --color-s2-dark: #c3c3ba;
31
44
  --color-s2-darker: #b3b3a7;
45
+
46
+ /* Secondary 3 */
32
47
  --color-s3: #b3b2ac;
33
48
  --color-s3-dark: #a2a199;
34
49
  --color-s3-light: #d1d1cd;
35
50
  --color-s3-lighter: #e1e0de;
51
+
52
+ /* Megamenu sub navigation background */
36
53
  --sub-nav-bg: var(--color-s1-lighter);
54
+
55
+ /* Mobile navigation drawer background */
37
56
  --mobile-drawer: var(--color-p3);
38
57
  --mobile-drawer-active: var(--color-p3-light);
39
58
  }
59
+
60
+ /* color-mix is used for the newer browsers */
61
+ @supports (color: color-mix) {
62
+ :root {
63
+ --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
64
+ --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
65
+ --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
66
+ --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
67
+ --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
68
+ --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
69
+ --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
70
+ --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
71
+ --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
72
+ --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
73
+ --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
74
+ --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
75
+ --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
76
+ --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
77
+ --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
78
+ --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
79
+ --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
80
+ --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
81
+ --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
82
+ --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
83
+ --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
84
+ --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
85
+ --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
86
+ --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
87
+ --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
88
+ --sub-nav-bg: var(--color-s1-lighter);
89
+ --mobile-drawer: var(--color-p3);
90
+ --mobile-drawer-active: var(--color-p3-light);
91
+ }
92
+ }
package/dist/css/colortheme-mono.min.css CHANGED
@@ -1 +1 @@
1
- :root{--color-p1: #ffce2b;--color-p1-dark: #ffc917;--color-p1-darker: #ffc607;--color-p1-darkest: #e3ae00;--color-p1-light: #ffd855;--color-p1-lighter: #ffe280;--color-p1-lightest: #ffebaa;--color-p2: #545351;--color-p2-dark: #4a4947;--color-p2-darker: #42413f;--color-p2-darkest: #302f2e;--color-p2-light: #767574;--color-p2-lighter: #989897;--color-p2-lightest: #bbbab9;--color-p3: #191919;--color-p3-dark: #0f0f0f;--color-p3-darker: #070707;--color-p3-darkest: black;--color-p3-light: #474747;--color-p3-lighter: #757575;--color-p3-lightest: #a3a3a3;--color-s1: #ededef;--color-s1-darker: #e5e5e8;--color-s1-lighter: #f6f6f7;--color-s2: #d4d4cd;--color-s2-dark: #c3c3ba;--color-s2-darker: #b3b3a7;--color-s3: #b3b2ac;--color-s3-dark: #a2a199;--color-s3-light: #d1d1cd;--color-s3-lighter: #e1e0de;--sub-nav-bg: var(--color-s1-lighter);--mobile-drawer: var(--color-p3);--mobile-drawer-active: var(--color-p3-light)}
1
+ :root{--color-p1:#ffce2b;--color-p1-dark:#ffc917;--color-p1-darker:#ffc607;--color-p1-darkest:#e3ae00;--color-p1-light:#ffd855;--color-p1-lighter:#ffe280;--color-p1-lightest:#ffebaa;--color-p2:#545351;--color-p2-dark:#4a4947;--color-p2-darker:#42413f;--color-p2-darkest:#302f2e;--color-p2-light:#767574;--color-p2-lighter:#989897;--color-p2-lightest:#bbbab9;--color-p3:#191919;--color-p3-dark:#0f0f0f;--color-p3-darker:#070707;--color-p3-darkest:black;--color-p3-light:#474747;--color-p3-lighter:#757575;--color-p3-lightest:#a3a3a3;--color-s1:#ededef;--color-s1-darker:#e5e5e8;--color-s1-lighter:#f6f6f7;--color-s2:#d4d4cd;--color-s2-dark:#c3c3ba;--color-s2-darker:#b3b3a7;--color-s3:#b3b2ac;--color-s3-dark:#a2a199;--color-s3-light:#d1d1cd;--color-s3-lighter:#e1e0de;--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
package/dist/css/colortheme-oceanside.css CHANGED
@@ -1,7 +1,12 @@
1
1
  /* -----------------------------------------
2
- OCEANSIDE
2
+ OCEANSIDE COLOR THEME
3
3
  ----------------------------------------- */
4
+
4
5
  :root {
6
+ /* color variations are hardcoded for older browsers
7
+ color-mix is used for the newer browsers */
8
+
9
+ /* Highlight */
5
10
  --color-p1: #fdb81e;
6
11
  --color-p1-dark: #fdb20a;
7
12
  --color-p1-darker: #f5aa02;
@@ -9,6 +14,8 @@
9
14
  --color-p1-light: #fdc64b;
10
15
  --color-p1-lighter: #fed478;
11
16
  --color-p1-lightest: #fee3a5;
17
+
18
+ /* Primary */
12
19
  --color-p2: #046b99;
13
20
  --color-p2-dark: #035d85;
14
21
  --color-p2-darker: #035376;
@@ -16,6 +23,8 @@
16
23
  --color-p2-light: #3689ad;
17
24
  --color-p2-lighter: #68a6c2;
18
25
  --color-p2-lightest: #9bc4d6;
26
+
27
+ /* Standout */
19
28
  --color-p3: #323a45;
20
29
  --color-p3-dark: #293039;
21
30
  --color-p3-darker: #232930;
@@ -23,17 +32,61 @@
23
32
  --color-p3-light: #5b616a;
24
33
  --color-p3-lighter: #84898f;
25
34
  --color-p3-lightest: #adb0b5;
35
+
36
+ /* Secondary 1 */
26
37
  --color-s1: #eef8fb;
27
38
  --color-s1-darker: #e2f3f8;
28
39
  --color-s1-lighter: #f7fcfd;
40
+
41
+ /* Secondary 2 */
29
42
  --color-s2: #87b8ce;
30
43
  --color-s2-dark: #6ea9c4;
31
44
  --color-s2-darker: #549ab9;
45
+
46
+ /* Secondary 3 */
32
47
  --color-s3: #4993b5;
33
48
  --color-s3-dark: #3f7e9c;
34
49
  --color-s3-light: #92bed3;
35
50
  --color-s3-lighter: #b6d4e1;
51
+
52
+ /* Megamenu sub navigation background */
36
53
  --sub-nav-bg: var(--color-s1-lighter);
54
+
55
+ /* Mobile navigation drawer background */
37
56
  --mobile-drawer: var(--color-p2-darker);
38
57
  --mobile-drawer-active: var(--color-p2);
39
58
  }
59
+
60
+ /* color-mix is used for the newer browsers */
61
+ @supports (color: color-mix) {
62
+ :root {
63
+ --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
64
+ --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
65
+ --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
66
+ --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
67
+ --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
68
+ --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
69
+ --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
70
+ --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
71
+ --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
72
+ --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
73
+ --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
74
+ --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
75
+ --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
76
+ --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
77
+ --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
78
+ --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
79
+ --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
80
+ --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
81
+ --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
82
+ --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
83
+ --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
84
+ --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
85
+ --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
86
+ --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
87
+ --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
88
+ --sub-nav-bg: var(--color-s1-lighter);
89
+ --mobile-drawer: var(--color-p2-darker);
90
+ --mobile-drawer-active: var(--color-p2);
91
+ }
92
+ }
package/dist/css/colortheme-oceanside.min.css CHANGED
@@ -1 +1 @@
1
- :root{--color-p1: #fdb81e;--color-p1-dark: #fdb20a;--color-p1-darker: #f5aa02;--color-p1-darkest: #d29102;--color-p1-light: #fdc64b;--color-p1-lighter: #fed478;--color-p1-lightest: #fee3a5;--color-p2: #046b99;--color-p2-dark: #035d85;--color-p2-darker: #035376;--color-p2-darkest: #023a53;--color-p2-light: #3689ad;--color-p2-lighter: #68a6c2;--color-p2-lightest: #9bc4d6;--color-p3: #323a45;--color-p3-dark: #293039;--color-p3-darker: #232930;--color-p3-darkest: #14171c;--color-p3-light: #5b616a;--color-p3-lighter: #84898f;--color-p3-lightest: #adb0b5;--color-s1: #eef8fb;--color-s1-darker: #e2f3f8;--color-s1-lighter: #f7fcfd;--color-s2: #87b8ce;--color-s2-dark: #6ea9c4;--color-s2-darker: #549ab9;--color-s3: #4993b5;--color-s3-dark: #3f7e9c;--color-s3-light: #92bed3;--color-s3-lighter: #b6d4e1;--sub-nav-bg: var(--color-s1-lighter);--mobile-drawer: var(--color-p2-darker);--mobile-drawer-active: var(--color-p2)}
1
+ :root{--color-p1:#fdb81e;--color-p1-dark:#fdb20a;--color-p1-darker:#f5aa02;--color-p1-darkest:#d29102;--color-p1-light:#fdc64b;--color-p1-lighter:#fed478;--color-p1-lightest:#fee3a5;--color-p2:#046b99;--color-p2-dark:#035d85;--color-p2-darker:#035376;--color-p2-darkest:#023a53;--color-p2-light:#3689ad;--color-p2-lighter:#68a6c2;--color-p2-lightest:#9bc4d6;--color-p3:#323a45;--color-p3-dark:#293039;--color-p3-darker:#232930;--color-p3-darkest:#14171c;--color-p3-light:#5b616a;--color-p3-lighter:#84898f;--color-p3-lightest:#adb0b5;--color-s1:#eef8fb;--color-s1-darker:#e2f3f8;--color-s1-lighter:#f7fcfd;--color-s2:#87b8ce;--color-s2-dark:#6ea9c4;--color-s2-darker:#549ab9;--color-s3:#4993b5;--color-s3-dark:#3f7e9c;--color-s3-light:#92bed3;--color-s3-lighter:#b6d4e1;--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p2-darker);--mobile-drawer-active:var(--color-p2);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p2-darker);--mobile-drawer-active:var(--color-p2);}}
package/dist/css/colortheme-orangecounty.css CHANGED
@@ -1,7 +1,12 @@
1
1
  /* -----------------------------------------
2
- ORANGE COUNTY
2
+ ORANGE COUNTY COLOR THEME
3
3
  ----------------------------------------- */
4
+
4
5
  :root {
6
+ /* color variations are hardcoded for older browsers
7
+ color-mix is used for the newer browsers */
8
+
9
+ /* Highlight */
5
10
  --color-p1: #fbad23;
6
11
  --color-p1-dark: #fba60f;
7
12
  --color-p1-darker: #f69f04;
@@ -9,6 +14,8 @@
9
14
  --color-p1-light: #fcbd4f;
10
15
  --color-p1-lighter: #fdce7b;
11
16
  --color-p1-lightest: #fddea7;
17
+
18
+ /* Primary */
12
19
  --color-p2: #a15801;
13
20
  --color-p2-dark: #8d4d01;
14
21
  --color-p2-darker: #7e4501;
@@ -16,6 +23,8 @@
16
23
  --color-p2-light: #b47934;
17
24
  --color-p2-lighter: #c79b67;
18
25
  --color-p2-lightest: #d9bc99;
26
+
27
+ /* Standout */
19
28
  --color-p3: #483723;
20
29
  --color-p3-dark: #3a2d1c;
21
30
  --color-p3-darker: #302517;
@@ -23,17 +32,61 @@
23
32
  --color-p3-light: #6d5f4f;
24
33
  --color-p3-lighter: #91877b;
25
34
  --color-p3-lightest: #b6afa7;
35
+
36
+ /* Secondary 1 */
26
37
  --color-s1: #fbf0e7;
27
38
  --color-s1-darker: #f9e8da;
28
39
  --color-s1-lighter: #fdf8f3;
40
+
41
+ /* Secondary 2 */
29
42
  --color-s2: #f6e7cc;
30
43
  --color-s2-dark: #f1d9ae;
31
44
  --color-s2-darker: #ebca8f;
45
+
46
+ /* Secondary 3 */
32
47
  --color-s3: #f7d7a6;
33
48
  --color-s3-dark: #f4c885;
34
49
  --color-s3-light: #fae7ca;
35
50
  --color-s3-lighter: #fcefdb;
51
+
52
+ /* Megamenu sub navigation background */
36
53
  --sub-nav-bg: var(--color-s1-lighter);
54
+
55
+ /* Mobile navigation drawer background */
37
56
  --mobile-drawer: var(--color-p3);
38
57
  --mobile-drawer-active: var(--color-p3-light);
39
58
  }
59
+
60
+ /* color-mix is used for the newer browsers */
61
+ @supports (color: color-mix) {
62
+ :root {
63
+ --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
64
+ --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
65
+ --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
66
+ --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
67
+ --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
68
+ --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
69
+ --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
70
+ --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
71
+ --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
72
+ --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
73
+ --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
74
+ --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
75
+ --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
76
+ --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
77
+ --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
78
+ --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
79
+ --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
80
+ --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
81
+ --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
82
+ --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
83
+ --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
84
+ --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
85
+ --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
86
+ --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
87
+ --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
88
+ --sub-nav-bg: var(--color-s1-lighter);
89
+ --mobile-drawer: var(--color-p3);
90
+ --mobile-drawer-active: var(--color-p3-light);
91
+ }
92
+ }
package/dist/css/colortheme-orangecounty.min.css CHANGED
@@ -1 +1 @@
1
- :root{--color-p1: #fbad23;--color-p1-dark: #fba60f;--color-p1-darker: #f69f04;--color-p1-darkest: #d38804;--color-p1-light: #fcbd4f;--color-p1-lighter: #fdce7b;--color-p1-lightest: #fddea7;--color-p2: #a15801;--color-p2-dark: #8d4d01;--color-p2-darker: #7e4501;--color-p2-darkest: #5a3101;--color-p2-light: #b47934;--color-p2-lighter: #c79b67;--color-p2-lightest: #d9bc99;--color-p3: #483723;--color-p3-dark: #3a2d1c;--color-p3-darker: #302517;--color-p3-darkest: #18120c;--color-p3-light: #6d5f4f;--color-p3-lighter: #91877b;--color-p3-lightest: #b6afa7;--color-s1: #fbf0e7;--color-s1-darker: #f9e8da;--color-s1-lighter: #fdf8f3;--color-s2: #f6e7cc;--color-s2-dark: #f1d9ae;--color-s2-darker: #ebca8f;--color-s3: #f7d7a6;--color-s3-dark: #f4c885;--color-s3-light: #fae7ca;--color-s3-lighter: #fcefdb;--sub-nav-bg: var(--color-s1-lighter);--mobile-drawer: var(--color-p3);--mobile-drawer-active: var(--color-p3-light)}
1
+ :root{--color-p1:#fbad23;--color-p1-dark:#fba60f;--color-p1-darker:#f69f04;--color-p1-darkest:#d38804;--color-p1-light:#fcbd4f;--color-p1-lighter:#fdce7b;--color-p1-lightest:#fddea7;--color-p2:#a15801;--color-p2-dark:#8d4d01;--color-p2-darker:#7e4501;--color-p2-darkest:#5a3101;--color-p2-light:#b47934;--color-p2-lighter:#c79b67;--color-p2-lightest:#d9bc99;--color-p3:#483723;--color-p3-dark:#3a2d1c;--color-p3-darker:#302517;--color-p3-darkest:#18120c;--color-p3-light:#6d5f4f;--color-p3-lighter:#91877b;--color-p3-lightest:#b6afa7;--color-s1:#fbf0e7;--color-s1-darker:#f9e8da;--color-s1-lighter:#fdf8f3;--color-s2:#f6e7cc;--color-s2-dark:#f1d9ae;--color-s2-darker:#ebca8f;--color-s3:#f7d7a6;--color-s3-dark:#f4c885;--color-s3-light:#fae7ca;--color-s3-lighter:#fcefdb;--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
package/dist/css/colortheme-pasorobles.css CHANGED
@@ -1,7 +1,12 @@
1
1
  /* -----------------------------------------
2
- PASOROBLES
2
+ PASOROBLES COLOR THEME
3
3
  ----------------------------------------- */
4
+
4
5
  :root {
6
+ /* color variations are hardcoded for older browsers
7
+ color-mix is used for the newer browsers */
8
+
9
+ /* Highlight */
5
10
  --color-p1: #fbad23;
6
11
  --color-p1-dark: #fba60f;
7
12
  --color-p1-darker: #f69f04;
@@ -9,6 +14,8 @@
9
14
  --color-p1-light: #fcbd4f;
10
15
  --color-p1-lighter: #fdce7b;
11
16
  --color-p1-lightest: #fddea7;
17
+
18
+ /* Primary */
12
19
  --color-p2: #691808;
13
20
  --color-p2-dark: #561407;
14
21
  --color-p2-darker: #481005;
@@ -16,6 +23,8 @@
16
23
  --color-p2-light: #874639;
17
24
  --color-p2-lighter: #a5746b;
18
25
  --color-p2-lightest: #c3a39c;
26
+
27
+ /* Standout */
19
28
  --color-p3: #313131;
20
29
  --color-p3-dark: #272727;
21
30
  --color-p3-darker: #1f1f1f;
@@ -23,17 +32,61 @@
23
32
  --color-p3-light: #5a5a5a;
24
33
  --color-p3-lighter: #838383;
25
34
  --color-p3-lightest: #adadad;
35
+
36
+ /* Secondary 1 */
26
37
  --color-s1: #f5f5f5;
27
38
  --color-s1-darker: #ededed;
28
39
  --color-s1-lighter: #fafafa;
40
+
41
+ /* Secondary 2 */
29
42
  --color-s2: #ccc;
30
43
  --color-s2-dark: #bababa;
31
44
  --color-s2-darker: #a8a8a8;
45
+
46
+ /* Secondary 3 */
32
47
  --color-s3: #e6dcdc;
33
48
  --color-s3-dark: #d7c7c7;
34
49
  --color-s3-light: #f0eaea;
35
50
  --color-s3-lighter: #f5f1f1;
51
+
52
+ /* Megamenu sub navigation background */
36
53
  --sub-nav-bg: var(--color-s1);
54
+
55
+ /* Mobile navigation drawer background */
37
56
  --mobile-drawer: var(--color-p3);
38
57
  --mobile-drawer-active: var(--color-p3-light);
39
58
  }
59
+
60
+ /* color-mix is used for the newer browsers */
61
+ @supports (color: color-mix) {
62
+ :root {
63
+ --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
64
+ --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
65
+ --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
66
+ --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
67
+ --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
68
+ --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
69
+ --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
70
+ --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
71
+ --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
72
+ --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
73
+ --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
74
+ --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
75
+ --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
76
+ --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
77
+ --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
78
+ --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
79
+ --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
80
+ --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
81
+ --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
82
+ --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
83
+ --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
84
+ --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
85
+ --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
86
+ --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
87
+ --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
88
+ --sub-nav-bg: var(--color-s1);
89
+ --mobile-drawer: var(--color-p3);
90
+ --mobile-drawer-active: var(--color-p3-light);
91
+ }
92
+ }
package/dist/css/colortheme-pasorobles.min.css CHANGED
@@ -1 +1 @@
1
- :root{--color-p1: #fbad23;--color-p1-dark: #fba60f;--color-p1-darker: #f69f04;--color-p1-darkest: #d38804;--color-p1-light: #fcbd4f;--color-p1-lighter: #fdce7b;--color-p1-lightest: #fddea7;--color-p2: #691808;--color-p2-dark: #561407;--color-p2-darker: #481005;--color-p2-darkest: #270903;--color-p2-light: #874639;--color-p2-lighter: #a5746b;--color-p2-lightest: #c3a39c;--color-p3: #313131;--color-p3-dark: #272727;--color-p3-darker: #1f1f1f;--color-p3-darkest: #0d0d0d;--color-p3-light: #5a5a5a;--color-p3-lighter: #838383;--color-p3-lightest: #adadad;--color-s1: #f5f5f5;--color-s1-darker: #ededed;--color-s1-lighter: #fafafa;--color-s2: #ccc;--color-s2-dark: #bababa;--color-s2-darker: #a8a8a8;--color-s3: #e6dcdc;--color-s3-dark: #d7c7c7;--color-s3-light: #f0eaea;--color-s3-lighter: #f5f1f1;--sub-nav-bg: var(--color-s1);--mobile-drawer: var(--color-p3);--mobile-drawer-active: var(--color-p3-light)}
1
+ :root{--color-p1:#fbad23;--color-p1-dark:#fba60f;--color-p1-darker:#f69f04;--color-p1-darkest:#d38804;--color-p1-light:#fcbd4f;--color-p1-lighter:#fdce7b;--color-p1-lightest:#fddea7;--color-p2:#691808;--color-p2-dark:#561407;--color-p2-darker:#481005;--color-p2-darkest:#270903;--color-p2-light:#874639;--color-p2-lighter:#a5746b;--color-p2-lightest:#c3a39c;--color-p3:#313131;--color-p3-dark:#272727;--color-p3-darker:#1f1f1f;--color-p3-darkest:#0d0d0d;--color-p3-light:#5a5a5a;--color-p3-lighter:#838383;--color-p3-lightest:#adadad;--color-s1:#f5f5f5;--color-s1-darker:#ededed;--color-s1-lighter:#fafafa;--color-s2:#ccc;--color-s2-dark:#bababa;--color-s2-darker:#a8a8a8;--color-s3:#e6dcdc;--color-s3-dark:#d7c7c7;--color-s3-light:#f0eaea;--color-s3-lighter:#f5f1f1;--sub-nav-bg:var(--color-s1);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}