@hubpav/hwio-ui 0.7.11 → 0.9.0

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/package.json +4 -4
  2. package/src/components/HWioApplicationTile.astro +49 -0
  3. package/src/components/HWioButton.astro +9 -4
  4. package/src/components/HWioChoiceCards.astro +3 -3
  5. package/src/components/HWioContactSection.astro +1 -1
  6. package/src/components/HWioCookieConsent.astro +9 -9
  7. package/src/components/HWioCutout.astro +58 -0
  8. package/src/components/HWioFaq.astro +1 -1
  9. package/src/components/HWioFeatureCard.astro +1 -1
  10. package/src/components/HWioFooter.astro +7 -4
  11. package/src/components/HWioHeader.astro +13 -6
  12. package/src/components/HWioHeroSplit.astro +14 -7
  13. package/src/components/HWioIsoScene.astro +93 -0
  14. package/src/components/HWioKeyFigure.astro +45 -0
  15. package/src/components/HWioLanguageSwitcher.astro +11 -1
  16. package/src/components/HWioLogoStrip.astro +1 -1
  17. package/src/components/HWioMegaLinks.astro +54 -0
  18. package/src/components/HWioPhoto.astro +36 -0
  19. package/src/components/HWioPricingTiers.astro +1 -1
  20. package/src/components/HWioProcessSteps.astro +1 -1
  21. package/src/components/HWioReveal.astro +15 -0
  22. package/src/components/HWioSection.astro +1 -0
  23. package/src/components/HWioStatsBand.astro +2 -2
  24. package/src/components/HWioStoryCard.astro +38 -0
  25. package/src/styles/prose.css +3 -3
  26. package/src/styles/styles.css +325 -37
  27. package/src/styles/themes/er3o.css +92 -1
  28. package/src/styles/themes/hwio-dark.css +127 -19
  29. package/src/styles/themes/hwio-forestry-dark.css +127 -19
  30. package/src/styles/themes/hwio-forestry.css +121 -13
  31. package/src/styles/themes/hwio.css +122 -14
  32. package/src/types.ts +9 -0
package/src/styles/themes/er3o.css CHANGED
@@ -40,10 +40,101 @@
40
40
  --hwio-container-pad: 27px;
41
41
  --er3o-gradient-from: #01CC9B;
42
42
  --er3o-gradient-to: #14A0C0;
43
+ --hwio-chart-1: initial;
44
+ --hwio-chart-2: initial;
45
+ --hwio-chart-3: initial;
46
+ --hwio-chart-failure: initial;
47
+ --hwio-chart-forecast: initial;
48
+ --hwio-chart-highlight: initial;
49
+ --hwio-chart-label: initial;
50
+ --hwio-chart-outline: initial;
51
+ --hwio-chart-outline-width: initial;
43
52
  --hwio-footer-hover: #ffffff;
44
- --hwio-nav-active: #296ea7;
53
+ --hwio-gradient: initial;
54
+ --hwio-gradient-figure: initial;
55
+ --hwio-icon: initial;
56
+ --hwio-icon-bg: initial;
57
+ --hwio-kicker-on-alt: initial;
45
58
  --hwio-kicker-on-neutral: #01CC9B;
46
59
  --hwio-link: #0C6678;
60
+ --hwio-link-hover: initial;
61
+ --hwio-mist: initial;
62
+ --hwio-motion-base: initial;
63
+ --hwio-motion-easing: initial;
64
+ --hwio-motion-fast: initial;
65
+ --hwio-motion-reveal: initial;
66
+ --hwio-motion-slow: initial;
67
+ --hwio-nav-active: #296ea7;
68
+ --hwio-nav-hover: initial;
69
+ --hwio-note-opacity: initial;
70
+ --hwio-text-secondary: initial;
71
+ --hwio-text-secondary-on-neutral: initial;
72
+ /* Type preset "er3o" */
73
+ --hwio-type-display-size: 2.5rem;
74
+ --hwio-type-display-weight: 700;
75
+ --hwio-type-display-leading: 1.05;
76
+ --hwio-type-display-tracking: -0.03em;
77
+ --hwio-type-heading-size: 2rem;
78
+ --hwio-type-heading-weight: 700;
79
+ --hwio-type-heading-leading: 1.1;
80
+ --hwio-type-heading-tracking: -0.025em;
81
+ --hwio-type-subheading-size: 1.375rem;
82
+ --hwio-type-subheading-weight: 700;
83
+ --hwio-type-subheading-leading: 1.2;
84
+ --hwio-type-subheading-tracking: -0.01em;
85
+ --hwio-type-title-size: 1.125rem;
86
+ --hwio-type-title-weight: 700;
87
+ --hwio-type-title-leading: 1.3;
88
+ --hwio-type-title-tracking: -0.005em;
89
+ --hwio-type-lead-size: 1.1875rem;
90
+ --hwio-type-lead-weight: 400;
91
+ --hwio-type-lead-leading: 1.55;
92
+ --hwio-type-lead-tracking: 0;
93
+ --hwio-type-body-size: 1.0625rem;
94
+ --hwio-type-body-weight: 400;
95
+ --hwio-type-body-leading: 1.6;
96
+ --hwio-type-body-tracking: 0;
97
+ --hwio-type-caption-size: 0.875rem;
98
+ --hwio-type-caption-weight: 400;
99
+ --hwio-type-caption-leading: 1.4;
100
+ --hwio-type-caption-tracking: 0;
101
+ --hwio-type-kicker-size: 0.875rem;
102
+ --hwio-type-kicker-weight: 600;
103
+ --hwio-type-kicker-leading: 1.4;
104
+ --hwio-type-kicker-tracking: 0;
105
+ --hwio-type-kicker-case: none;
106
+ --hwio-type-chip-size: 0.875rem;
107
+ --hwio-type-chip-weight: 500;
108
+ --hwio-type-chip-tracking: 0;
109
+ --hwio-type-chip-case: none;
110
+ --hwio-type-figure-size: 2.25rem;
111
+ --hwio-type-figure-weight: 700;
112
+ --hwio-type-figure-leading: 1;
113
+ --hwio-type-figure-tracking: -0.03em;
114
+ --hwio-type-button-size: 0.9375rem;
115
+ --hwio-type-button-weight: 600;
116
+ --hwio-type-button-leading: 1;
117
+ --hwio-type-button-tracking: 0;
118
+ --hwio-weight-nav: 500;
119
+ --hwio-weight-label: 600;
120
+ --hwio-weight-strong: 600;
121
+ --hwio-weight-footer-title: 500;
122
+ --hwio-choice-title-size: 1.75rem;
123
+ --hwio-choice-title-leading: 1.15;
124
+ --hwio-choice-title-tracking: -0.02em;
125
+ }
126
+
127
+ @media (width >= 48rem) {
128
+ [data-theme="er3o"] {
129
+ --hwio-type-display-size: 3rem;
130
+ --hwio-type-heading-size: 2.5rem;
131
+ }
132
+ }
133
+ @media (width >= 64rem) {
134
+ [data-theme="er3o"] {
135
+ --hwio-type-display-size: 3.5rem;
136
+ --hwio-type-figure-size: 2.5rem;
137
+ }
47
138
  }
48
139
 
49
140
  /* ENEROOO carries its gradient as a theme rule: DaisyUI slots are single colours. Only the filled
package/src/styles/themes/hwio-dark.css CHANGED
@@ -4,26 +4,26 @@
4
4
  default: false;
5
5
  prefersdark: false;
6
6
  color-scheme: dark;
7
- --color-base-100: #0f0f14;
8
- --color-base-200: #1a1a22;
9
- --color-base-300: #23232f;
10
- --color-base-content: #e7e7ee;
7
+ --color-base-100: #16161d;
8
+ --color-base-200: #252532;
9
+ --color-base-300: #3b3b46;
10
+ --color-base-content: #ffffff;
11
11
  --color-primary: #009cfa;
12
- --color-primary-content: #0f0f14;
12
+ --color-primary-content: #16161d;
13
13
  --color-secondary: #009cfa;
14
- --color-secondary-content: #0f0f14;
14
+ --color-secondary-content: #16161d;
15
15
  --color-accent: #f43f5e;
16
- --color-accent-content: #0f0f14;
17
- --color-neutral: #23232f;
18
- --color-neutral-content: #e7e7ee;
16
+ --color-accent-content: #16161d;
17
+ --color-neutral: #252532;
18
+ --color-neutral-content: #ffffff;
19
19
  --color-info: #009cfa;
20
- --color-info-content: #06367a;
21
- --color-success: #15803d;
22
- --color-success-content: #ffffff;
23
- --color-warning: #b45309;
24
- --color-warning-content: #ffffff;
25
- --color-error: #dc2626;
26
- --color-error-content: #ffffff;
20
+ --color-info-content: #16161d;
21
+ --color-success: #34c47a;
22
+ --color-success-content: #16161d;
23
+ --color-warning: #f59e0b;
24
+ --color-warning-content: #16161d;
25
+ --color-error: #f43f5e;
26
+ --color-error-content: #16161d;
27
27
  --radius-selector: 2rem;
28
28
  --radius-field: 0.5rem;
29
29
  --radius-box: 1rem;
@@ -36,7 +36,115 @@
36
36
 
37
37
  [data-theme="hwio-dark"] {
38
38
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
39
- --hwio-container: 1275px;
40
- --hwio-container-pad: 27px;
41
- --hwio-kicker-on-neutral: #fb7185;
39
+ --hwio-container: 1328px;
40
+ --hwio-container-pad: 24px;
41
+ --hwio-grid-columns: 12;
42
+ --hwio-grid-width: 1280px;
43
+ --hwio-grid-gutter: 24px;
44
+ --er3o-gradient-from: initial;
45
+ --er3o-gradient-to: initial;
46
+ --hwio-chart-1: #009cfa;
47
+ --hwio-chart-2: #016ad4;
48
+ --hwio-chart-3: #d1d5db;
49
+ --hwio-chart-failure: #f43f5e;
50
+ --hwio-chart-forecast: #2e2e3a;
51
+ --hwio-chart-highlight: #ffffff;
52
+ --hwio-chart-label: #ffffff;
53
+ --hwio-chart-outline: transparent;
54
+ --hwio-chart-outline-width: 0px;
55
+ --hwio-footer-hover: #009cfa;
56
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
57
+ --hwio-gradient-figure: linear-gradient(90deg, #f43f5e, #009cfa);
58
+ --hwio-icon: #ffffff;
59
+ --hwio-icon-bg: var(--color-base-200);
60
+ --hwio-kicker-on-alt: #d1d5db;
61
+ --hwio-kicker-on-neutral: #d1d5db;
62
+ --hwio-link: #009cfa;
63
+ --hwio-link-hover: #ffffff;
64
+ --hwio-mist: #2e2e3a;
65
+ --hwio-motion-base: 300ms;
66
+ --hwio-motion-easing: ease-out;
67
+ --hwio-motion-fast: 200ms;
68
+ --hwio-motion-reveal: 400ms;
69
+ --hwio-motion-slow: 400ms;
70
+ --hwio-nav-active: initial;
71
+ --hwio-nav-hover: #009cfa;
72
+ --hwio-note-opacity: 1;
73
+ --hwio-text-secondary: #d1d5db;
74
+ --hwio-text-secondary-on-neutral: #d1d5db;
75
+ /* Type preset "hwio" */
76
+ --hwio-type-display-size: 2.5rem;
77
+ --hwio-type-display-weight: 700;
78
+ --hwio-type-display-leading: 1.2;
79
+ --hwio-type-display-tracking: -0.02em;
80
+ --hwio-type-heading-size: 2rem;
81
+ --hwio-type-heading-weight: 600;
82
+ --hwio-type-heading-leading: 1.3;
83
+ --hwio-type-heading-tracking: -0.015em;
84
+ --hwio-type-subheading-size: 1.5rem;
85
+ --hwio-type-subheading-weight: 600;
86
+ --hwio-type-subheading-leading: 1.3;
87
+ --hwio-type-subheading-tracking: -0.01em;
88
+ --hwio-type-title-size: 1.25rem;
89
+ --hwio-type-title-weight: 700;
90
+ --hwio-type-title-leading: 1.3;
91
+ --hwio-type-title-tracking: 0;
92
+ --hwio-type-lead-size: 1.1875rem;
93
+ --hwio-type-lead-weight: 400;
94
+ --hwio-type-lead-leading: 1.55;
95
+ --hwio-type-lead-tracking: 0;
96
+ --hwio-type-body-size: 1rem;
97
+ --hwio-type-body-weight: 400;
98
+ --hwio-type-body-leading: 1.6;
99
+ --hwio-type-body-tracking: 0;
100
+ --hwio-type-caption-size: 0.8125rem;
101
+ --hwio-type-caption-weight: 400;
102
+ --hwio-type-caption-leading: 1.4;
103
+ --hwio-type-caption-tracking: 0;
104
+ --hwio-type-kicker-size: 0.8125rem;
105
+ --hwio-type-kicker-weight: 700;
106
+ --hwio-type-kicker-leading: 1.4;
107
+ --hwio-type-kicker-tracking: 0.07em;
108
+ --hwio-type-kicker-case: uppercase;
109
+ --hwio-type-chip-size: 0.75rem;
110
+ --hwio-type-chip-weight: 700;
111
+ --hwio-type-chip-leading: 1.4;
112
+ --hwio-type-chip-tracking: 0.07em;
113
+ --hwio-type-chip-case: uppercase;
114
+ --hwio-type-figure-size: 2.5rem;
115
+ --hwio-type-figure-weight: 700;
116
+ --hwio-type-figure-leading: 1.2;
117
+ --hwio-type-figure-tracking: -0.02em;
118
+ --hwio-type-button-size: 0.9375rem;
119
+ --hwio-type-button-weight: 700;
120
+ --hwio-type-button-leading: 1;
121
+ --hwio-type-button-tracking: 0;
122
+ --hwio-weight-nav: 400;
123
+ --hwio-weight-label: 700;
124
+ --hwio-weight-strong: 700;
125
+ --hwio-weight-footer-title: 700;
126
+ --hwio-choice-title-size: var(--hwio-type-subheading-size);
127
+ --hwio-choice-title-leading: var(--hwio-type-subheading-leading);
128
+ --hwio-choice-title-tracking: var(--hwio-type-subheading-tracking);
129
+ }
130
+
131
+ @media (width >= 48rem) {
132
+ [data-theme="hwio-dark"] {
133
+ --hwio-type-display-size: 3rem;
134
+ }
135
+ }
136
+ @media (width >= 64rem) {
137
+ [data-theme="hwio-dark"] {
138
+ --hwio-type-display-size: 3.75rem;
139
+ --hwio-type-heading-size: 2.5rem;
140
+ --hwio-type-heading-leading: 1.2;
141
+ --hwio-type-subheading-size: 1.75rem;
142
+ }
143
+ }
144
+ @media (width >= 80rem) {
145
+ [data-theme="hwio-dark"] {
146
+ --hwio-type-display-size: 4.5rem;
147
+ --hwio-type-heading-size: 3rem;
148
+ --hwio-type-subheading-size: 2rem;
149
+ }
42
150
  }
package/src/styles/themes/hwio-forestry-dark.css CHANGED
@@ -4,26 +4,26 @@
4
4
  default: false;
5
5
  prefersdark: false;
6
6
  color-scheme: dark;
7
- --color-base-100: #0f0f14;
8
- --color-base-200: #1a1a22;
9
- --color-base-300: #23232f;
10
- --color-base-content: #e7e7ee;
7
+ --color-base-100: #16161d;
8
+ --color-base-200: #252532;
9
+ --color-base-300: #3b3b46;
10
+ --color-base-content: #ffffff;
11
11
  --color-primary: #5aa864;
12
- --color-primary-content: #0f0f14;
12
+ --color-primary-content: #16161d;
13
13
  --color-secondary: #009cfa;
14
- --color-secondary-content: #0f0f14;
14
+ --color-secondary-content: #16161d;
15
15
  --color-accent: #5aa864;
16
- --color-accent-content: #0f0f14;
17
- --color-neutral: #23232f;
18
- --color-neutral-content: #e7e7ee;
16
+ --color-accent-content: #16161d;
17
+ --color-neutral: #252532;
18
+ --color-neutral-content: #ffffff;
19
19
  --color-info: #009cfa;
20
- --color-info-content: #06367a;
21
- --color-success: #15803d;
22
- --color-success-content: #ffffff;
23
- --color-warning: #b45309;
24
- --color-warning-content: #ffffff;
25
- --color-error: #dc2626;
26
- --color-error-content: #ffffff;
20
+ --color-info-content: #16161d;
21
+ --color-success: #34c47a;
22
+ --color-success-content: #16161d;
23
+ --color-warning: #f59e0b;
24
+ --color-warning-content: #16161d;
25
+ --color-error: #f43f5e;
26
+ --color-error-content: #16161d;
27
27
  --radius-selector: 2rem;
28
28
  --radius-field: 0.5rem;
29
29
  --radius-box: 1rem;
@@ -36,7 +36,115 @@
36
36
 
37
37
  [data-theme="hwio-forestry-dark"] {
38
38
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
39
- --hwio-container: 1275px;
40
- --hwio-container-pad: 27px;
41
- --hwio-kicker-on-neutral: #fb7185;
39
+ --hwio-container: 1328px;
40
+ --hwio-container-pad: 24px;
41
+ --hwio-grid-columns: 12;
42
+ --hwio-grid-width: 1280px;
43
+ --hwio-grid-gutter: 24px;
44
+ --er3o-gradient-from: initial;
45
+ --er3o-gradient-to: initial;
46
+ --hwio-chart-1: #009cfa;
47
+ --hwio-chart-2: #016ad4;
48
+ --hwio-chart-3: #d1d5db;
49
+ --hwio-chart-failure: #f43f5e;
50
+ --hwio-chart-forecast: #2e2e3a;
51
+ --hwio-chart-highlight: #ffffff;
52
+ --hwio-chart-label: #ffffff;
53
+ --hwio-chart-outline: transparent;
54
+ --hwio-chart-outline-width: 0px;
55
+ --hwio-footer-hover: #009cfa;
56
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
57
+ --hwio-gradient-figure: linear-gradient(90deg, #f43f5e, #009cfa);
58
+ --hwio-icon: #ffffff;
59
+ --hwio-icon-bg: var(--color-base-200);
60
+ --hwio-kicker-on-alt: #d1d5db;
61
+ --hwio-kicker-on-neutral: #d1d5db;
62
+ --hwio-link: #009cfa;
63
+ --hwio-link-hover: #ffffff;
64
+ --hwio-mist: #2e2e3a;
65
+ --hwio-motion-base: 300ms;
66
+ --hwio-motion-easing: ease-out;
67
+ --hwio-motion-fast: 200ms;
68
+ --hwio-motion-reveal: 400ms;
69
+ --hwio-motion-slow: 400ms;
70
+ --hwio-nav-active: initial;
71
+ --hwio-nav-hover: #5aa864;
72
+ --hwio-note-opacity: 1;
73
+ --hwio-text-secondary: #d1d5db;
74
+ --hwio-text-secondary-on-neutral: #d1d5db;
75
+ /* Type preset "hwio" */
76
+ --hwio-type-display-size: 2.5rem;
77
+ --hwio-type-display-weight: 700;
78
+ --hwio-type-display-leading: 1.2;
79
+ --hwio-type-display-tracking: -0.02em;
80
+ --hwio-type-heading-size: 2rem;
81
+ --hwio-type-heading-weight: 600;
82
+ --hwio-type-heading-leading: 1.3;
83
+ --hwio-type-heading-tracking: -0.015em;
84
+ --hwio-type-subheading-size: 1.5rem;
85
+ --hwio-type-subheading-weight: 600;
86
+ --hwio-type-subheading-leading: 1.3;
87
+ --hwio-type-subheading-tracking: -0.01em;
88
+ --hwio-type-title-size: 1.25rem;
89
+ --hwio-type-title-weight: 700;
90
+ --hwio-type-title-leading: 1.3;
91
+ --hwio-type-title-tracking: 0;
92
+ --hwio-type-lead-size: 1.1875rem;
93
+ --hwio-type-lead-weight: 400;
94
+ --hwio-type-lead-leading: 1.55;
95
+ --hwio-type-lead-tracking: 0;
96
+ --hwio-type-body-size: 1rem;
97
+ --hwio-type-body-weight: 400;
98
+ --hwio-type-body-leading: 1.6;
99
+ --hwio-type-body-tracking: 0;
100
+ --hwio-type-caption-size: 0.8125rem;
101
+ --hwio-type-caption-weight: 400;
102
+ --hwio-type-caption-leading: 1.4;
103
+ --hwio-type-caption-tracking: 0;
104
+ --hwio-type-kicker-size: 0.8125rem;
105
+ --hwio-type-kicker-weight: 700;
106
+ --hwio-type-kicker-leading: 1.4;
107
+ --hwio-type-kicker-tracking: 0.07em;
108
+ --hwio-type-kicker-case: uppercase;
109
+ --hwio-type-chip-size: 0.75rem;
110
+ --hwio-type-chip-weight: 700;
111
+ --hwio-type-chip-leading: 1.4;
112
+ --hwio-type-chip-tracking: 0.07em;
113
+ --hwio-type-chip-case: uppercase;
114
+ --hwio-type-figure-size: 2.5rem;
115
+ --hwio-type-figure-weight: 700;
116
+ --hwio-type-figure-leading: 1.2;
117
+ --hwio-type-figure-tracking: -0.02em;
118
+ --hwio-type-button-size: 0.9375rem;
119
+ --hwio-type-button-weight: 700;
120
+ --hwio-type-button-leading: 1;
121
+ --hwio-type-button-tracking: 0;
122
+ --hwio-weight-nav: 400;
123
+ --hwio-weight-label: 700;
124
+ --hwio-weight-strong: 700;
125
+ --hwio-weight-footer-title: 700;
126
+ --hwio-choice-title-size: var(--hwio-type-subheading-size);
127
+ --hwio-choice-title-leading: var(--hwio-type-subheading-leading);
128
+ --hwio-choice-title-tracking: var(--hwio-type-subheading-tracking);
129
+ }
130
+
131
+ @media (width >= 48rem) {
132
+ [data-theme="hwio-forestry-dark"] {
133
+ --hwio-type-display-size: 3rem;
134
+ }
135
+ }
136
+ @media (width >= 64rem) {
137
+ [data-theme="hwio-forestry-dark"] {
138
+ --hwio-type-display-size: 3.75rem;
139
+ --hwio-type-heading-size: 2.5rem;
140
+ --hwio-type-heading-leading: 1.2;
141
+ --hwio-type-subheading-size: 1.75rem;
142
+ }
143
+ }
144
+ @media (width >= 80rem) {
145
+ [data-theme="hwio-forestry-dark"] {
146
+ --hwio-type-display-size: 4.5rem;
147
+ --hwio-type-heading-size: 3rem;
148
+ --hwio-type-subheading-size: 2rem;
149
+ }
42
150
  }
package/src/styles/themes/hwio-forestry.css CHANGED
@@ -5,24 +5,24 @@
5
5
  prefersdark: false;
6
6
  color-scheme: light;
7
7
  --color-base-100: #ffffff;
8
- --color-base-200: #F1FAFF;
9
- --color-base-300: #e5e7eb;
8
+ --color-base-200: #f7f7f7;
9
+ --color-base-300: #dcdcdc;
10
10
  --color-base-content: #252532;
11
11
  --color-primary: #2B7036;
12
12
  --color-primary-content: #ffffff;
13
- --color-secondary: #016ad4;
13
+ --color-secondary: #06367a;
14
14
  --color-secondary-content: #ffffff;
15
15
  --color-accent: #2B7036;
16
16
  --color-accent-content: #ffffff;
17
17
  --color-neutral: #252532;
18
- --color-neutral-content: #f3f4f6;
19
- --color-info: #009cfa;
20
- --color-info-content: #06367a;
21
- --color-success: #15803d;
18
+ --color-neutral-content: #ffffff;
19
+ --color-info: #016ad4;
20
+ --color-info-content: #ffffff;
21
+ --color-success: #2e7d4f;
22
22
  --color-success-content: #ffffff;
23
- --color-warning: #b45309;
24
- --color-warning-content: #ffffff;
25
- --color-error: #dc2626;
23
+ --color-warning: #c76a00;
24
+ --color-warning-content: #252532;
25
+ --color-error: #e30427;
26
26
  --color-error-content: #ffffff;
27
27
  --radius-selector: 2rem;
28
28
  --radius-field: 0.5rem;
@@ -36,7 +36,115 @@
36
36
 
37
37
  [data-theme="hwio-forestry"] {
38
38
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
39
- --hwio-container: 1275px;
40
- --hwio-container-pad: 27px;
41
- --hwio-kicker-on-neutral: #fb7185;
39
+ --hwio-container: 1328px;
40
+ --hwio-container-pad: 24px;
41
+ --hwio-grid-columns: 12;
42
+ --hwio-grid-width: 1280px;
43
+ --hwio-grid-gutter: 24px;
44
+ --er3o-gradient-from: initial;
45
+ --er3o-gradient-to: initial;
46
+ --hwio-chart-1: #016ad4;
47
+ --hwio-chart-2: #009cfa;
48
+ --hwio-chart-3: #6b6a6a;
49
+ --hwio-chart-failure: #e30427;
50
+ --hwio-chart-forecast: #e8e8e8;
51
+ --hwio-chart-highlight: #06367a;
52
+ --hwio-chart-label: #252532;
53
+ --hwio-chart-outline: #016ad4;
54
+ --hwio-chart-outline-width: 1px;
55
+ --hwio-footer-hover: #009cfa;
56
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
57
+ --hwio-gradient-figure: linear-gradient(90deg, #e30427, #3976c5);
58
+ --hwio-icon: #06367a;
59
+ --hwio-icon-bg: var(--color-base-200);
60
+ --hwio-kicker-on-alt: initial;
61
+ --hwio-kicker-on-neutral: #d1d5db;
62
+ --hwio-link: #016ad4;
63
+ --hwio-link-hover: #06367a;
64
+ --hwio-mist: #e8e8e8;
65
+ --hwio-motion-base: 300ms;
66
+ --hwio-motion-easing: ease-out;
67
+ --hwio-motion-fast: 200ms;
68
+ --hwio-motion-reveal: 400ms;
69
+ --hwio-motion-slow: 400ms;
70
+ --hwio-nav-active: initial;
71
+ --hwio-nav-hover: #2B7036;
72
+ --hwio-note-opacity: 1;
73
+ --hwio-text-secondary: #6b6a6a;
74
+ --hwio-text-secondary-on-neutral: #d1d5db;
75
+ /* Type preset "hwio" */
76
+ --hwio-type-display-size: 2.5rem;
77
+ --hwio-type-display-weight: 700;
78
+ --hwio-type-display-leading: 1.2;
79
+ --hwio-type-display-tracking: -0.02em;
80
+ --hwio-type-heading-size: 2rem;
81
+ --hwio-type-heading-weight: 600;
82
+ --hwio-type-heading-leading: 1.3;
83
+ --hwio-type-heading-tracking: -0.015em;
84
+ --hwio-type-subheading-size: 1.5rem;
85
+ --hwio-type-subheading-weight: 600;
86
+ --hwio-type-subheading-leading: 1.3;
87
+ --hwio-type-subheading-tracking: -0.01em;
88
+ --hwio-type-title-size: 1.25rem;
89
+ --hwio-type-title-weight: 700;
90
+ --hwio-type-title-leading: 1.3;
91
+ --hwio-type-title-tracking: 0;
92
+ --hwio-type-lead-size: 1.1875rem;
93
+ --hwio-type-lead-weight: 400;
94
+ --hwio-type-lead-leading: 1.55;
95
+ --hwio-type-lead-tracking: 0;
96
+ --hwio-type-body-size: 1rem;
97
+ --hwio-type-body-weight: 400;
98
+ --hwio-type-body-leading: 1.6;
99
+ --hwio-type-body-tracking: 0;
100
+ --hwio-type-caption-size: 0.8125rem;
101
+ --hwio-type-caption-weight: 400;
102
+ --hwio-type-caption-leading: 1.4;
103
+ --hwio-type-caption-tracking: 0;
104
+ --hwio-type-kicker-size: 0.8125rem;
105
+ --hwio-type-kicker-weight: 700;
106
+ --hwio-type-kicker-leading: 1.4;
107
+ --hwio-type-kicker-tracking: 0.07em;
108
+ --hwio-type-kicker-case: uppercase;
109
+ --hwio-type-chip-size: 0.75rem;
110
+ --hwio-type-chip-weight: 700;
111
+ --hwio-type-chip-leading: 1.4;
112
+ --hwio-type-chip-tracking: 0.07em;
113
+ --hwio-type-chip-case: uppercase;
114
+ --hwio-type-figure-size: 2.5rem;
115
+ --hwio-type-figure-weight: 700;
116
+ --hwio-type-figure-leading: 1.2;
117
+ --hwio-type-figure-tracking: -0.02em;
118
+ --hwio-type-button-size: 0.9375rem;
119
+ --hwio-type-button-weight: 700;
120
+ --hwio-type-button-leading: 1;
121
+ --hwio-type-button-tracking: 0;
122
+ --hwio-weight-nav: 400;
123
+ --hwio-weight-label: 700;
124
+ --hwio-weight-strong: 700;
125
+ --hwio-weight-footer-title: 700;
126
+ --hwio-choice-title-size: var(--hwio-type-subheading-size);
127
+ --hwio-choice-title-leading: var(--hwio-type-subheading-leading);
128
+ --hwio-choice-title-tracking: var(--hwio-type-subheading-tracking);
129
+ }
130
+
131
+ @media (width >= 48rem) {
132
+ [data-theme="hwio-forestry"] {
133
+ --hwio-type-display-size: 3rem;
134
+ }
135
+ }
136
+ @media (width >= 64rem) {
137
+ [data-theme="hwio-forestry"] {
138
+ --hwio-type-display-size: 3.75rem;
139
+ --hwio-type-heading-size: 2.5rem;
140
+ --hwio-type-heading-leading: 1.2;
141
+ --hwio-type-subheading-size: 1.75rem;
142
+ }
143
+ }
144
+ @media (width >= 80rem) {
145
+ [data-theme="hwio-forestry"] {
146
+ --hwio-type-display-size: 4.5rem;
147
+ --hwio-type-heading-size: 3rem;
148
+ --hwio-type-subheading-size: 2rem;
149
+ }
42
150
  }