@hubpav/hwio-brand 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 (9) hide show
  1. package/dist/design/er3o.md +45 -25
  2. package/dist/design/hwio-forestry.md +103 -77
  3. package/dist/design/hwio.md +104 -78
  4. package/dist/docusaurus.css +19 -19
  5. package/dist/tokens.json +530 -137
  6. package/dist/vars.css +163 -57
  7. package/package.json +1 -1
  8. package/src/brand.json +397 -108
  9. package/src/design/body.md +13 -12
package/dist/vars.css CHANGED
@@ -2,24 +2,24 @@
2
2
  :root, [data-theme="hwio"] {
3
3
  color-scheme: light;
4
4
  --hwio-color-base-100: #ffffff;
5
- --hwio-color-base-200: #F1FAFF;
6
- --hwio-color-base-300: #e5e7eb;
5
+ --hwio-color-base-200: #f7f7f7;
6
+ --hwio-color-base-300: #dcdcdc;
7
7
  --hwio-color-base-content: #252532;
8
- --hwio-color-primary: #06367a;
8
+ --hwio-color-primary: #016ad4;
9
9
  --hwio-color-primary-content: #ffffff;
10
- --hwio-color-secondary: #016ad4;
10
+ --hwio-color-secondary: #06367a;
11
11
  --hwio-color-secondary-content: #ffffff;
12
12
  --hwio-color-accent: #e30427;
13
13
  --hwio-color-accent-content: #ffffff;
14
14
  --hwio-color-neutral: #252532;
15
- --hwio-color-neutral-content: #f3f4f6;
16
- --hwio-color-info: #009cfa;
17
- --hwio-color-info-content: #06367a;
18
- --hwio-color-success: #15803d;
15
+ --hwio-color-neutral-content: #ffffff;
16
+ --hwio-color-info: #016ad4;
17
+ --hwio-color-info-content: #ffffff;
18
+ --hwio-color-success: #2e7d4f;
19
19
  --hwio-color-success-content: #ffffff;
20
- --hwio-color-warning: #b45309;
21
- --hwio-color-warning-content: #ffffff;
22
- --hwio-color-error: #dc2626;
20
+ --hwio-color-warning: #c76a00;
21
+ --hwio-color-warning-content: #252532;
22
+ --hwio-color-error: #e30427;
23
23
  --hwio-color-error-content: #ffffff;
24
24
  --hwio-radius-selector: 2rem;
25
25
  --hwio-radius-field: 0.5rem;
@@ -30,30 +30,56 @@
30
30
  --hwio-depth: 0;
31
31
  --hwio-noise: 0;
32
32
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
33
- --hwio-kicker-on-neutral: #fb7185;
33
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
34
+ --hwio-gradient-figure: linear-gradient(90deg, #e30427, #3976c5);
35
+ --hwio-chart-1: #016ad4;
36
+ --hwio-chart-2: #009cfa;
37
+ --hwio-chart-3: #6b6a6a;
38
+ --hwio-chart-highlight: #06367a;
39
+ --hwio-chart-forecast: #e8e8e8;
40
+ --hwio-chart-failure: #e30427;
41
+ --hwio-chart-label: #252532;
42
+ --hwio-chart-outline: #016ad4;
43
+ --hwio-chart-outline-width: 1px;
44
+ --hwio-motion-easing: ease-out;
45
+ --hwio-motion-fast: 200ms;
46
+ --hwio-motion-base: 300ms;
47
+ --hwio-motion-slow: 400ms;
48
+ --hwio-motion-reveal: 400ms;
49
+ --hwio-text-secondary: #6b6a6a;
50
+ --hwio-text-secondary-on-neutral: #d1d5db;
51
+ --hwio-kicker-on-neutral: #d1d5db;
52
+ --hwio-link: #016ad4;
53
+ --hwio-link-hover: #06367a;
54
+ --hwio-nav-hover: #016ad4;
55
+ --hwio-footer-hover: #009cfa;
56
+ --hwio-mist: #e8e8e8;
57
+ --hwio-icon: #06367a;
58
+ --hwio-icon-bg: var(--color-base-200);
59
+ --hwio-note-opacity: 1;
34
60
  }
35
61
  [data-theme="hwio-dark"] {
36
62
  color-scheme: dark;
37
- --hwio-color-base-100: #0f0f14;
38
- --hwio-color-base-200: #1a1a22;
39
- --hwio-color-base-300: #23232f;
40
- --hwio-color-base-content: #e7e7ee;
63
+ --hwio-color-base-100: #16161d;
64
+ --hwio-color-base-200: #252532;
65
+ --hwio-color-base-300: #3b3b46;
66
+ --hwio-color-base-content: #ffffff;
41
67
  --hwio-color-primary: #009cfa;
42
- --hwio-color-primary-content: #0f0f14;
68
+ --hwio-color-primary-content: #16161d;
43
69
  --hwio-color-secondary: #009cfa;
44
- --hwio-color-secondary-content: #0f0f14;
70
+ --hwio-color-secondary-content: #16161d;
45
71
  --hwio-color-accent: #f43f5e;
46
- --hwio-color-accent-content: #0f0f14;
47
- --hwio-color-neutral: #23232f;
48
- --hwio-color-neutral-content: #e7e7ee;
72
+ --hwio-color-accent-content: #16161d;
73
+ --hwio-color-neutral: #252532;
74
+ --hwio-color-neutral-content: #ffffff;
49
75
  --hwio-color-info: #009cfa;
50
- --hwio-color-info-content: #06367a;
51
- --hwio-color-success: #15803d;
52
- --hwio-color-success-content: #ffffff;
53
- --hwio-color-warning: #b45309;
54
- --hwio-color-warning-content: #ffffff;
55
- --hwio-color-error: #dc2626;
56
- --hwio-color-error-content: #ffffff;
76
+ --hwio-color-info-content: #16161d;
77
+ --hwio-color-success: #34c47a;
78
+ --hwio-color-success-content: #16161d;
79
+ --hwio-color-warning: #f59e0b;
80
+ --hwio-color-warning-content: #16161d;
81
+ --hwio-color-error: #f43f5e;
82
+ --hwio-color-error-content: #16161d;
57
83
  --hwio-radius-selector: 2rem;
58
84
  --hwio-radius-field: 0.5rem;
59
85
  --hwio-radius-box: 1rem;
@@ -63,29 +89,56 @@
63
89
  --hwio-depth: 0;
64
90
  --hwio-noise: 0;
65
91
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
66
- --hwio-kicker-on-neutral: #fb7185;
92
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
93
+ --hwio-gradient-figure: linear-gradient(90deg, #f43f5e, #009cfa);
94
+ --hwio-chart-1: #009cfa;
95
+ --hwio-chart-2: #016ad4;
96
+ --hwio-chart-3: #d1d5db;
97
+ --hwio-chart-highlight: #ffffff;
98
+ --hwio-chart-forecast: #2e2e3a;
99
+ --hwio-chart-failure: #f43f5e;
100
+ --hwio-chart-label: #ffffff;
101
+ --hwio-chart-outline: transparent;
102
+ --hwio-chart-outline-width: 0px;
103
+ --hwio-motion-easing: ease-out;
104
+ --hwio-motion-fast: 200ms;
105
+ --hwio-motion-base: 300ms;
106
+ --hwio-motion-slow: 400ms;
107
+ --hwio-motion-reveal: 400ms;
108
+ --hwio-text-secondary: #d1d5db;
109
+ --hwio-text-secondary-on-neutral: #d1d5db;
110
+ --hwio-kicker-on-neutral: #d1d5db;
111
+ --hwio-link: #009cfa;
112
+ --hwio-link-hover: #ffffff;
113
+ --hwio-nav-hover: #009cfa;
114
+ --hwio-footer-hover: #009cfa;
115
+ --hwio-mist: #2e2e3a;
116
+ --hwio-icon: #ffffff;
117
+ --hwio-icon-bg: var(--color-base-200);
118
+ --hwio-note-opacity: 1;
119
+ --hwio-kicker-on-alt: #d1d5db;
67
120
  }
68
121
  [data-theme="hwio-forestry"] {
69
122
  color-scheme: light;
70
123
  --hwio-color-base-100: #ffffff;
71
- --hwio-color-base-200: #F1FAFF;
72
- --hwio-color-base-300: #e5e7eb;
124
+ --hwio-color-base-200: #f7f7f7;
125
+ --hwio-color-base-300: #dcdcdc;
73
126
  --hwio-color-base-content: #252532;
74
127
  --hwio-color-primary: #2B7036;
75
128
  --hwio-color-primary-content: #ffffff;
76
- --hwio-color-secondary: #016ad4;
129
+ --hwio-color-secondary: #06367a;
77
130
  --hwio-color-secondary-content: #ffffff;
78
131
  --hwio-color-accent: #2B7036;
79
132
  --hwio-color-accent-content: #ffffff;
80
133
  --hwio-color-neutral: #252532;
81
- --hwio-color-neutral-content: #f3f4f6;
82
- --hwio-color-info: #009cfa;
83
- --hwio-color-info-content: #06367a;
84
- --hwio-color-success: #15803d;
134
+ --hwio-color-neutral-content: #ffffff;
135
+ --hwio-color-info: #016ad4;
136
+ --hwio-color-info-content: #ffffff;
137
+ --hwio-color-success: #2e7d4f;
85
138
  --hwio-color-success-content: #ffffff;
86
- --hwio-color-warning: #b45309;
87
- --hwio-color-warning-content: #ffffff;
88
- --hwio-color-error: #dc2626;
139
+ --hwio-color-warning: #c76a00;
140
+ --hwio-color-warning-content: #252532;
141
+ --hwio-color-error: #e30427;
89
142
  --hwio-color-error-content: #ffffff;
90
143
  --hwio-radius-selector: 2rem;
91
144
  --hwio-radius-field: 0.5rem;
@@ -96,30 +149,56 @@
96
149
  --hwio-depth: 0;
97
150
  --hwio-noise: 0;
98
151
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
99
- --hwio-kicker-on-neutral: #fb7185;
152
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
153
+ --hwio-gradient-figure: linear-gradient(90deg, #e30427, #3976c5);
154
+ --hwio-chart-1: #016ad4;
155
+ --hwio-chart-2: #009cfa;
156
+ --hwio-chart-3: #6b6a6a;
157
+ --hwio-chart-highlight: #06367a;
158
+ --hwio-chart-forecast: #e8e8e8;
159
+ --hwio-chart-failure: #e30427;
160
+ --hwio-chart-label: #252532;
161
+ --hwio-chart-outline: #016ad4;
162
+ --hwio-chart-outline-width: 1px;
163
+ --hwio-motion-easing: ease-out;
164
+ --hwio-motion-fast: 200ms;
165
+ --hwio-motion-base: 300ms;
166
+ --hwio-motion-slow: 400ms;
167
+ --hwio-motion-reveal: 400ms;
168
+ --hwio-text-secondary: #6b6a6a;
169
+ --hwio-text-secondary-on-neutral: #d1d5db;
170
+ --hwio-kicker-on-neutral: #d1d5db;
171
+ --hwio-link: #016ad4;
172
+ --hwio-link-hover: #06367a;
173
+ --hwio-nav-hover: #2B7036;
174
+ --hwio-footer-hover: #009cfa;
175
+ --hwio-mist: #e8e8e8;
176
+ --hwio-icon: #06367a;
177
+ --hwio-icon-bg: var(--color-base-200);
178
+ --hwio-note-opacity: 1;
100
179
  }
101
180
  [data-theme="hwio-forestry-dark"] {
102
181
  color-scheme: dark;
103
- --hwio-color-base-100: #0f0f14;
104
- --hwio-color-base-200: #1a1a22;
105
- --hwio-color-base-300: #23232f;
106
- --hwio-color-base-content: #e7e7ee;
182
+ --hwio-color-base-100: #16161d;
183
+ --hwio-color-base-200: #252532;
184
+ --hwio-color-base-300: #3b3b46;
185
+ --hwio-color-base-content: #ffffff;
107
186
  --hwio-color-primary: #5aa864;
108
- --hwio-color-primary-content: #0f0f14;
187
+ --hwio-color-primary-content: #16161d;
109
188
  --hwio-color-secondary: #009cfa;
110
- --hwio-color-secondary-content: #0f0f14;
189
+ --hwio-color-secondary-content: #16161d;
111
190
  --hwio-color-accent: #5aa864;
112
- --hwio-color-accent-content: #0f0f14;
113
- --hwio-color-neutral: #23232f;
114
- --hwio-color-neutral-content: #e7e7ee;
191
+ --hwio-color-accent-content: #16161d;
192
+ --hwio-color-neutral: #252532;
193
+ --hwio-color-neutral-content: #ffffff;
115
194
  --hwio-color-info: #009cfa;
116
- --hwio-color-info-content: #06367a;
117
- --hwio-color-success: #15803d;
118
- --hwio-color-success-content: #ffffff;
119
- --hwio-color-warning: #b45309;
120
- --hwio-color-warning-content: #ffffff;
121
- --hwio-color-error: #dc2626;
122
- --hwio-color-error-content: #ffffff;
195
+ --hwio-color-info-content: #16161d;
196
+ --hwio-color-success: #34c47a;
197
+ --hwio-color-success-content: #16161d;
198
+ --hwio-color-warning: #f59e0b;
199
+ --hwio-color-warning-content: #16161d;
200
+ --hwio-color-error: #f43f5e;
201
+ --hwio-color-error-content: #16161d;
123
202
  --hwio-radius-selector: 2rem;
124
203
  --hwio-radius-field: 0.5rem;
125
204
  --hwio-radius-box: 1rem;
@@ -129,7 +208,34 @@
129
208
  --hwio-depth: 0;
130
209
  --hwio-noise: 0;
131
210
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
132
- --hwio-kicker-on-neutral: #fb7185;
211
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
212
+ --hwio-gradient-figure: linear-gradient(90deg, #f43f5e, #009cfa);
213
+ --hwio-chart-1: #009cfa;
214
+ --hwio-chart-2: #016ad4;
215
+ --hwio-chart-3: #d1d5db;
216
+ --hwio-chart-highlight: #ffffff;
217
+ --hwio-chart-forecast: #2e2e3a;
218
+ --hwio-chart-failure: #f43f5e;
219
+ --hwio-chart-label: #ffffff;
220
+ --hwio-chart-outline: transparent;
221
+ --hwio-chart-outline-width: 0px;
222
+ --hwio-motion-easing: ease-out;
223
+ --hwio-motion-fast: 200ms;
224
+ --hwio-motion-base: 300ms;
225
+ --hwio-motion-slow: 400ms;
226
+ --hwio-motion-reveal: 400ms;
227
+ --hwio-text-secondary: #d1d5db;
228
+ --hwio-text-secondary-on-neutral: #d1d5db;
229
+ --hwio-kicker-on-neutral: #d1d5db;
230
+ --hwio-link: #009cfa;
231
+ --hwio-link-hover: #ffffff;
232
+ --hwio-nav-hover: #5aa864;
233
+ --hwio-footer-hover: #009cfa;
234
+ --hwio-mist: #2e2e3a;
235
+ --hwio-icon: #ffffff;
236
+ --hwio-icon-bg: var(--color-base-200);
237
+ --hwio-note-opacity: 1;
238
+ --hwio-kicker-on-alt: #d1d5db;
133
239
  }
134
240
  [data-theme="er3o"] {
135
241
  color-scheme: light;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hubpav/hwio-brand",
3
- "version": "0.7.11",
3
+ "version": "0.9.0",
4
4
  "description": "HARDWARIO brand source of truth: palette, theme roles, fonts, logos and the sites registry, generated into CSS and JSON for any stack.",
5
5
  "license": "MIT",
6
6
  "type": "module",