@hotosm/ui 0.3.3-b4 → 0.3.3-b6
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.
- package/dist/chunks/chunk.KYUGYPDJ.js +1 -0
- package/dist/chunks/{chunk.TPOAILO5.js → chunk.NTQ5XOYF.js} +126 -21
- package/dist/components/header/header.component.js +1 -1
- package/dist/components/header/header.js +1 -1
- package/dist/hotosm-ui.js +1 -1
- package/dist/style.css +9 -6
- package/dist/themes/hot-button-override.css +246 -0
- package/package.json +1 -1
- package/dist/chunks/chunk.65UBVOFP.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{e as a,f as b}from"../../chunks/chunk.
|
|
1
|
+
import{e as a,f as b}from"../../chunks/chunk.NTQ5XOYF.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.M3ZIZPKF.js";import"../../chunks/chunk.D4UQX7IV.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Header,b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a}from"../../chunks/chunk.
|
|
1
|
+
import{a}from"../../chunks/chunk.KYUGYPDJ.js";import"../../chunks/chunk.NTQ5XOYF.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.M3ZIZPKF.js";import"../../chunks/chunk.D4UQX7IV.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
|
package/dist/hotosm-ui.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as m}from"./chunks/chunk.MCLA4YSC.js";import"./chunks/chunk.CFJBM2JT.js";import"./chunks/chunk.W65BP3JY.js";import{a as i}from"./chunks/chunk.3P72BRDN.js";import"./chunks/chunk.2E5B6OR3.js";import{a}from"./chunks/chunk.FICDKF3C.js";import"./chunks/chunk.EOKB5QI4.js";import"./chunks/chunk.ILRWC26B.js";import"./chunks/chunk.GTNRNZDH.js";import{a as r}from"./chunks/chunk.
|
|
1
|
+
import{a as m}from"./chunks/chunk.MCLA4YSC.js";import"./chunks/chunk.CFJBM2JT.js";import"./chunks/chunk.W65BP3JY.js";import{a as i}from"./chunks/chunk.3P72BRDN.js";import"./chunks/chunk.2E5B6OR3.js";import{a}from"./chunks/chunk.FICDKF3C.js";import"./chunks/chunk.EOKB5QI4.js";import"./chunks/chunk.ILRWC26B.js";import"./chunks/chunk.GTNRNZDH.js";import{a as r}from"./chunks/chunk.KYUGYPDJ.js";import{a as o,b as t,c as e,d as n}from"./chunks/chunk.NTQ5XOYF.js";import"./chunks/chunk.2FEIL35F.js";import"./chunks/chunk.6Y3X2E2V.js";import"./chunks/chunk.M3ZIZPKF.js";import"./chunks/chunk.D4UQX7IV.js";import"./chunks/chunk.TNLBUOUK.js";import"./chunks/chunk.NI7UJOOZ.js";export{a as Consent,r as Header,m as Logo,i as Tracking,o as injectCSSIntoShadowDOM,e as injectHOTThemeIntoAllComponents,t as injectHOTThemeIntoButtons,n as setupAutoInjection};
|
package/dist/style.css
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
/*
|
|
1
|
+
/* First import WebAwesome base styles */
|
|
2
|
+
@import url('https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/webawesome.css');
|
|
3
|
+
|
|
4
|
+
/* Then import our HOT theme variables */
|
|
5
5
|
@import 'themes/hot.css';
|
|
6
|
-
|
|
6
|
+
|
|
7
|
+
/* Then our WebAwesome overrides */
|
|
7
8
|
@import 'themes/hot-wa-override.css';
|
|
8
|
-
|
|
9
|
+
|
|
10
|
+
/* Finally our specific button component override */
|
|
11
|
+
@import 'themes/hot-button-override.css';
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
/* HOT Button Component Override using CSS Parts */
|
|
2
|
+
/* This file specifically targets wa-button components to ensure hot-red-color is used as primary */
|
|
3
|
+
|
|
4
|
+
/* Import the HOT theme variables */
|
|
5
|
+
@import 'hot.css';
|
|
6
|
+
|
|
7
|
+
/* CSS Parts override for wa-button component */
|
|
8
|
+
wa-button {
|
|
9
|
+
/* Ensure the component uses HOT theme variables */
|
|
10
|
+
--wa-color-brand-95: var(--hot-color-red-50);
|
|
11
|
+
--wa-color-brand-90: var(--hot-color-red-100);
|
|
12
|
+
--wa-color-brand-80: var(--hot-color-red-200);
|
|
13
|
+
--wa-color-brand-70: var(--hot-color-red-300);
|
|
14
|
+
--wa-color-brand-60: var(--hot-color-red-400);
|
|
15
|
+
--wa-color-brand-50: var(--hot-color-red-500);
|
|
16
|
+
--wa-color-brand-40: var(--hot-color-red-600);
|
|
17
|
+
--wa-color-brand-30: var(--hot-color-red-700);
|
|
18
|
+
--wa-color-brand-20: var(--hot-color-red-800);
|
|
19
|
+
--wa-color-brand-10: var(--hot-color-red-900);
|
|
20
|
+
--wa-color-brand-05: var(--hot-color-red-950);
|
|
21
|
+
--wa-color-brand: var(--hot-color-red-500);
|
|
22
|
+
--wa-color-brand-key: 50;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Primary button variant using CSS parts */
|
|
26
|
+
wa-button[variant="primary"]::part(base) {
|
|
27
|
+
background: linear-gradient(135deg, var(--hot-color-red-500), var(--hot-color-red-600));
|
|
28
|
+
border: 1px solid var(--hot-color-red-600);
|
|
29
|
+
color: white;
|
|
30
|
+
box-shadow: 0 2px 4px rgba(211, 63, 63, 0.3);
|
|
31
|
+
transition: all 0.2s ease;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
wa-button[variant="primary"]::part(base):hover {
|
|
35
|
+
background: linear-gradient(135deg, var(--hot-color-red-600), var(--hot-color-red-700));
|
|
36
|
+
border-color: var(--hot-color-red-700);
|
|
37
|
+
box-shadow: 0 4px 8px rgba(211, 63, 63, 0.4);
|
|
38
|
+
transform: translateY(-1px);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
wa-button[variant="primary"]::part(base):active {
|
|
42
|
+
background: linear-gradient(135deg, var(--hot-color-red-700), var(--hot-color-red-800));
|
|
43
|
+
border-color: var(--hot-color-red-800);
|
|
44
|
+
box-shadow: 0 1px 3px rgba(211, 63, 63, 0.3);
|
|
45
|
+
transform: translateY(0);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
wa-button[variant="primary"]::part(base):focus-visible {
|
|
49
|
+
outline: 2px solid var(--hot-color-red-400);
|
|
50
|
+
outline-offset: 2px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Brand variant (alternative to primary) */
|
|
54
|
+
wa-button[variant="brand"]::part(base) {
|
|
55
|
+
background: linear-gradient(135deg, var(--hot-color-red-500), var(--hot-color-red-600));
|
|
56
|
+
border: 1px solid var(--hot-color-red-600);
|
|
57
|
+
color: white;
|
|
58
|
+
box-shadow: 0 2px 4px rgba(211, 63, 63, 0.3);
|
|
59
|
+
transition: all 0.2s ease;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
wa-button[variant="brand"]::part(base):hover {
|
|
63
|
+
background: linear-gradient(135deg, var(--hot-color-red-600), var(--hot-color-red-700));
|
|
64
|
+
border-color: var(--hot-color-red-700);
|
|
65
|
+
box-shadow: 0 4px 8px rgba(211, 63, 63, 0.4);
|
|
66
|
+
transform: translateY(-1px);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
wa-button[variant="brand"]::part(base):active {
|
|
70
|
+
background: linear-gradient(135deg, var(--hot-color-red-700), var(--hot-color-red-800));
|
|
71
|
+
border-color: var(--hot-color-red-800);
|
|
72
|
+
box-shadow: 0 1px 3px rgba(211, 63, 63, 0.3);
|
|
73
|
+
transform: translateY(0);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Outline variant with hot-red-color */
|
|
77
|
+
wa-button[variant="outline"]::part(base) {
|
|
78
|
+
background: transparent;
|
|
79
|
+
border: 2px solid var(--hot-color-red-500);
|
|
80
|
+
color: var(--hot-color-red-500);
|
|
81
|
+
transition: all 0.2s ease;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
wa-button[variant="outline"]::part(base):hover {
|
|
85
|
+
background: var(--hot-color-red-50);
|
|
86
|
+
border-color: var(--hot-color-red-600);
|
|
87
|
+
color: var(--hot-color-red-600);
|
|
88
|
+
box-shadow: 0 2px 4px rgba(211, 63, 63, 0.2);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
wa-button[variant="outline"]::part(base):active {
|
|
92
|
+
background: var(--hot-color-red-100);
|
|
93
|
+
border-color: var(--hot-color-red-700);
|
|
94
|
+
color: var(--hot-color-red-700);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Text variant with hot-red-color */
|
|
98
|
+
wa-button[variant="text"]::part(base) {
|
|
99
|
+
background: transparent;
|
|
100
|
+
border: none;
|
|
101
|
+
color: var(--hot-color-red-500);
|
|
102
|
+
transition: all 0.2s ease;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
wa-button[variant="text"]::part(base):hover {
|
|
106
|
+
background: var(--hot-color-red-50);
|
|
107
|
+
color: var(--hot-color-red-600);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
wa-button[variant="text"]::part(base):active {
|
|
111
|
+
background: var(--hot-color-red-100);
|
|
112
|
+
color: var(--hot-color-red-700);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* Custom HOT red button class */
|
|
116
|
+
wa-button.hot-red::part(base) {
|
|
117
|
+
background: linear-gradient(135deg, var(--hot-color-red-500), var(--hot-color-red-600));
|
|
118
|
+
border: 1px solid var(--hot-color-red-600);
|
|
119
|
+
color: white;
|
|
120
|
+
font-weight: 600;
|
|
121
|
+
box-shadow: 0 2px 4px rgba(211, 63, 63, 0.3);
|
|
122
|
+
transition: all 0.2s ease;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
wa-button.hot-red::part(base):hover {
|
|
126
|
+
background: linear-gradient(135deg, var(--hot-color-red-600), var(--hot-color-red-700));
|
|
127
|
+
border-color: var(--hot-color-red-700);
|
|
128
|
+
box-shadow: 0 4px 12px rgba(211, 63, 63, 0.4);
|
|
129
|
+
transform: translateY(-2px);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
wa-button.hot-red::part(base):active {
|
|
133
|
+
background: linear-gradient(135deg, var(--hot-color-red-700), var(--hot-color-red-800));
|
|
134
|
+
border-color: var(--hot-color-red-800);
|
|
135
|
+
box-shadow: 0 1px 3px rgba(211, 63, 63, 0.3);
|
|
136
|
+
transform: translateY(0);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Enhanced button label styling */
|
|
140
|
+
wa-button::part(label) {
|
|
141
|
+
font-family: var(--hot-font-sans);
|
|
142
|
+
font-weight: 500;
|
|
143
|
+
letter-spacing: 0.025em;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Button states */
|
|
147
|
+
wa-button:state(disabled)::part(base) {
|
|
148
|
+
opacity: 0.5;
|
|
149
|
+
cursor: not-allowed;
|
|
150
|
+
transform: none;
|
|
151
|
+
box-shadow: none;
|
|
152
|
+
background: var(--hot-color-gray-200);
|
|
153
|
+
border-color: var(--hot-color-gray-300);
|
|
154
|
+
color: var(--hot-color-gray-500);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
wa-button:state(loading)::part(base) {
|
|
158
|
+
cursor: wait;
|
|
159
|
+
position: relative;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Size variants with hot-red-color */
|
|
163
|
+
wa-button[size="small"]::part(base) {
|
|
164
|
+
padding: 0.5rem 1rem;
|
|
165
|
+
font-size: 0.875rem;
|
|
166
|
+
border-radius: 0.25rem;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
wa-button[size="large"]::part(base) {
|
|
170
|
+
padding: 0.875rem 1.75rem;
|
|
171
|
+
font-size: 1.125rem;
|
|
172
|
+
border-radius: 0.5rem;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* Icon button with hot-red-color */
|
|
176
|
+
wa-button[appearance="icon"]::part(base) {
|
|
177
|
+
border-radius: 50%;
|
|
178
|
+
padding: 0.75rem;
|
|
179
|
+
min-width: 2.5rem;
|
|
180
|
+
min-height: 2.5rem;
|
|
181
|
+
display: flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
justify-content: center;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
wa-button[appearance="icon"][variant="primary"]::part(base) {
|
|
187
|
+
background: var(--hot-color-red-500);
|
|
188
|
+
border-color: var(--hot-color-red-600);
|
|
189
|
+
color: white;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
wa-button[appearance="icon"][variant="primary"]::part(base):hover {
|
|
193
|
+
background: var(--hot-color-red-600);
|
|
194
|
+
border-color: var(--hot-color-red-700);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Focus styles for accessibility */
|
|
198
|
+
wa-button::part(base):focus-visible {
|
|
199
|
+
outline: 2px solid var(--hot-color-red-400);
|
|
200
|
+
outline-offset: 2px;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* Custom animation for hot-red buttons */
|
|
204
|
+
@keyframes hot-red-pulse {
|
|
205
|
+
0% {
|
|
206
|
+
box-shadow: 0 2px 4px rgba(211, 63, 63, 0.3);
|
|
207
|
+
}
|
|
208
|
+
50% {
|
|
209
|
+
box-shadow: 0 4px 8px rgba(211, 63, 63, 0.5);
|
|
210
|
+
}
|
|
211
|
+
100% {
|
|
212
|
+
box-shadow: 0 2px 4px rgba(211, 63, 63, 0.3);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
wa-button.hot-red-pulse::part(base) {
|
|
217
|
+
animation: hot-red-pulse 2s infinite;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* High contrast mode support */
|
|
221
|
+
@media (prefers-contrast: high) {
|
|
222
|
+
wa-button[variant="primary"]::part(base) {
|
|
223
|
+
border: 2px solid var(--hot-color-red-900);
|
|
224
|
+
background: var(--hot-color-red-700);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
wa-button[variant="outline"]::part(base) {
|
|
228
|
+
border: 2px solid var(--hot-color-red-700);
|
|
229
|
+
color: var(--hot-color-red-700);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Reduced motion support */
|
|
234
|
+
@media (prefers-reduced-motion: reduce) {
|
|
235
|
+
wa-button::part(base) {
|
|
236
|
+
transition: none;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
wa-button::part(base):hover {
|
|
240
|
+
transform: none;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
wa-button.hot-red-pulse::part(base) {
|
|
244
|
+
animation: none;
|
|
245
|
+
}
|
|
246
|
+
}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{f as e}from"./chunk.TPOAILO5.js";var r=e;customElements.define("hot-header",e);export{r as a};
|