@luxfi/core 5.1.3 → 5.1.4
Sign up to get free protection for your applications and to get access to all the features.
- package/commerce/AUTO-GEN-bullion-by-family.json +33 -33
- package/commerce/EDIT-ME-bullion-market-prices.ts +11 -11
- package/commerce/assign-prices.ts +49 -49
- package/commerce/assign-videos-by-family-group.ts +14 -14
- package/commerce/bullion-price-1oz.ts +5 -5
- package/commerce/index.ts +18 -18
- package/commerce/lux-service-options.ts +6 -6
- package/components/access-code-input.tsx +71 -71
- package/components/auth/auth-listener.tsx +29 -29
- package/components/auth/auth-token/clear-auth-token.tsx +12 -12
- package/components/auth/auth-token/set-auth-token.tsx +16 -16
- package/components/auth/common-auth-domains.ts +16 -16
- package/components/auth/login-panel.tsx +104 -104
- package/components/chat-widget.tsx +80 -80
- package/components/commerce/bag-button.tsx +98 -98
- package/components/commerce/buy-drawer/drawer.tsx +44 -44
- package/components/commerce/buy-drawer/index.tsx +46 -46
- package/components/commerce/checkout-button.tsx +116 -116
- package/components/commerce/checkout-panel/close-button.tsx +26 -26
- package/components/commerce/checkout-panel/dt-bag-carousel.tsx +36 -36
- package/components/commerce/checkout-panel/dt-checkout-panel.tsx +66 -66
- package/components/commerce/checkout-panel/index.tsx +123 -123
- package/components/commerce/checkout-panel/links-row.tsx +21 -21
- package/components/commerce/checkout-panel/mb-checkout-panel.tsx +54 -54
- package/components/commerce/checkout-panel/steps-indicator.tsx +39 -39
- package/components/commerce/checkout-panel/thank-you.tsx +18 -18
- package/components/commerce/checkout-widget/const.ts +13 -13
- package/components/commerce/checkout-widget/index.tsx +86 -86
- package/components/commerce/checkout-widget/obs-string-set.ts +48 -48
- package/components/commerce/checkout-widget/use-anim-clx-set.ts +56 -56
- package/components/commerce/checkout-widget/use-lagging-item-ref.ts +29 -29
- package/components/commerce/desktop-bag-popup.tsx +78 -78
- package/components/commerce/mobile-bag-drawer.tsx +51 -51
- package/components/commerce/mobile-login-button.tsx +101 -0
- package/components/commerce/mobile-menu-toggle-button.tsx +35 -35
- package/components/commerce/mobile-nav-menu-ai.tsx +98 -0
- package/components/commerce/mobile-nav-menu-item.tsx +46 -0
- package/components/commerce/mobile-nav-menu.tsx +79 -64
- package/components/contact-dialog/contact-form.tsx +112 -112
- package/components/contact-dialog/disclaimer.tsx +13 -13
- package/components/contact-dialog/index.tsx +64 -64
- package/components/copyright.tsx +21 -21
- package/components/footer.tsx +77 -77
- package/components/header/desktop.tsx +54 -54
- package/components/header/guts.tsx +27 -0
- package/components/header/index.tsx +47 -26
- package/components/header/mobile.tsx +165 -161
- package/components/header/theme-toggle.tsx +26 -26
- package/components/icons/avatar.tsx +11 -0
- package/components/icons/bag-icon.tsx +10 -10
- package/components/icons/github.tsx +14 -14
- package/components/icons/index.tsx +43 -35
- package/components/icons/left-arrow.tsx +11 -0
- package/components/icons/lux-logo.tsx +10 -10
- package/components/icons/right-arrow.tsx +10 -0
- package/components/icons/search.tsx +12 -0
- package/components/icons/secure-delivery.tsx +13 -13
- package/components/icons/social-icon.tsx +35 -35
- package/components/icons/social-svg.css +3 -3
- package/components/icons/youtube-logo.tsx +59 -59
- package/components/index.ts +27 -27
- package/components/logo.tsx +81 -81
- package/components/mini-chart/index.tsx +7 -7
- package/components/mini-chart/mini-chart-props.ts +43 -43
- package/components/mini-chart/mini-chart.tsx +85 -85
- package/components/mini-chart/wrapper.tsx +23 -23
- package/components/not-found/index.tsx +27 -27
- package/components/not-found/not-found-content.mdx +5 -5
- package/components/scripts.tsx +24 -24
- package/conf/index.ts +50 -50
- package/environment.d.ts +5 -5
- package/next/analytics/fpixel.ts +15 -15
- package/next/analytics/google-analytics.ts +13 -13
- package/next/analytics/index.ts +3 -3
- package/next/analytics/pixel-analytics.tsx +54 -54
- package/next/font/get-app-router-font-classes.ts +12 -12
- package/next/font/load-and-return-lux-next-fonts-on-import.ts +68 -68
- package/next/font/next-font-desc.ts +27 -27
- package/next/font/pages-router-font-vars.tsx +18 -18
- package/next/head-metadata/from-next/metadata-types.ts +158 -158
- package/next/head-metadata/from-next/opengraph-types.ts +267 -267
- package/next/head-metadata/from-next/twitter-types.ts +92 -92
- package/next/head-metadata/index.tsx +208 -208
- package/next/middleware/determine-device-mw.ts +16 -16
- package/package.json +73 -72
- package/root-layout/WHY_THIS_IS_SEPARATE.txt +1 -1
- package/root-layout/index.tsx +121 -120
- package/server-actions/firebase-app.ts +14 -14
- package/server-actions/index.ts +5 -5
- package/server-actions/store-contact.ts +51 -51
- package/site-def/footer/community.tsx +67 -67
- package/site-def/footer/company.ts +37 -37
- package/site-def/footer/ecosystem.ts +37 -37
- package/site-def/footer/index.tsx +26 -26
- package/site-def/footer/legal.ts +28 -28
- package/site-def/footer/network.ts +45 -45
- package/site-def/footer/svg/warpcast-logo.svg +11 -11
- package/site-def/index.ts +2 -2
- package/site-def/main-nav.tsx +292 -0
- package/style/cart-animation.css +29 -29
- package/style/checkout-animation.css +23 -23
- package/style/lux-colors.css +85 -85
- package/style/lux-global.css +30 -30
- package/tailwind/fontFamily.tailwind.lux.ts +18 -18
- package/tailwind/index.ts +2 -2
- package/tailwind/lux-tw-fonts.ts +39 -39
- package/tailwind/tailwind.config.lux-preset.ts +10 -10
- package/tsconfig.json +10 -28
- package/types/chatbot-config.ts +6 -6
- package/types/chatbot-suggested-question.ts +7 -7
- package/types/commerce-config.ts +10 -10
- package/types/contact-info.ts +10 -10
- package/types/index.ts +5 -5
- package/types/site-def.ts +45 -45
- package/site-def/main-nav.ts +0 -35
@@ -0,0 +1,292 @@
|
|
1
|
+
import type { LinkDef } from '@hanzo/ui/types'
|
2
|
+
import { bag as Bag } from '../components/icons'
|
3
|
+
import LuxLogo from '../components/icons/lux-logo'
|
4
|
+
|
5
|
+
export interface LinkDefExtended extends LinkDef {
|
6
|
+
isAIMenu?: boolean
|
7
|
+
icon?: any,
|
8
|
+
childMenu?: LinkDef[]
|
9
|
+
|
10
|
+
}
|
11
|
+
|
12
|
+
export default [
|
13
|
+
{
|
14
|
+
title: "AI",
|
15
|
+
icon: <Bag />,
|
16
|
+
href: "https://lux.chat",
|
17
|
+
newTab: false,
|
18
|
+
isAIMenu: true,
|
19
|
+
},
|
20
|
+
{
|
21
|
+
title: "Shop",
|
22
|
+
icon: <Bag />,
|
23
|
+
href: "https://lux.shop",
|
24
|
+
newTab: false,
|
25
|
+
childMenu: [
|
26
|
+
{
|
27
|
+
title: "Silver",
|
28
|
+
icon: <LuxLogo />,
|
29
|
+
href: "https://lux.example",
|
30
|
+
newTab: false,
|
31
|
+
},
|
32
|
+
{
|
33
|
+
title: "Key",
|
34
|
+
icon: <LuxLogo />,
|
35
|
+
href: "https://lux.market/key",
|
36
|
+
newTab: false,
|
37
|
+
},
|
38
|
+
{
|
39
|
+
title: "Validators",
|
40
|
+
icon: <LuxLogo />,
|
41
|
+
href: "lux.market/validator",
|
42
|
+
newTab: false,
|
43
|
+
},
|
44
|
+
{
|
45
|
+
title: "Coins",
|
46
|
+
icon: <LuxLogo />,
|
47
|
+
href: "lux.market/coin",
|
48
|
+
newTab: false,
|
49
|
+
}
|
50
|
+
]
|
51
|
+
},
|
52
|
+
{
|
53
|
+
title: "Credit",
|
54
|
+
icon: <LuxLogo />,
|
55
|
+
href: "https://lux.credit",
|
56
|
+
newTab: false,
|
57
|
+
childMenu: [
|
58
|
+
{
|
59
|
+
title: "View All Cards",
|
60
|
+
icon: <LuxLogo />,
|
61
|
+
href: "https://lux.credit",
|
62
|
+
newTab: false,
|
63
|
+
},
|
64
|
+
{
|
65
|
+
title: "Pass",
|
66
|
+
icon: <LuxLogo />,
|
67
|
+
href: "https://lux.credit",
|
68
|
+
newTab: false,
|
69
|
+
},
|
70
|
+
{
|
71
|
+
title: "Validators",
|
72
|
+
icon: <LuxLogo />,
|
73
|
+
href: "https://lux.credit",
|
74
|
+
newTab: false,
|
75
|
+
},
|
76
|
+
{
|
77
|
+
title: "Coins",
|
78
|
+
icon: <LuxLogo />,
|
79
|
+
href: "https://lux.credit",
|
80
|
+
newTab: false,
|
81
|
+
},
|
82
|
+
{
|
83
|
+
title: "ComPare Cards",
|
84
|
+
icon: <LuxLogo />,
|
85
|
+
href: "https://lux.credit",
|
86
|
+
newTab: false,
|
87
|
+
}
|
88
|
+
]
|
89
|
+
},
|
90
|
+
{
|
91
|
+
title: "Company",
|
92
|
+
icon: <LuxLogo />,
|
93
|
+
href: "https://lux.partners",
|
94
|
+
newTab: false,
|
95
|
+
childMenu:[
|
96
|
+
{
|
97
|
+
title: "About",
|
98
|
+
icon: <LuxLogo />,
|
99
|
+
href: "https://lux.partners",
|
100
|
+
newTab: false,
|
101
|
+
},
|
102
|
+
{
|
103
|
+
title: "Brand",
|
104
|
+
icon: <LuxLogo />,
|
105
|
+
href: "https://lux.partners",
|
106
|
+
newTab: false,
|
107
|
+
},
|
108
|
+
{
|
109
|
+
title: "Open Source",
|
110
|
+
icon: <LuxLogo />,
|
111
|
+
href: "https://github.com/luxfi",
|
112
|
+
newTab: false,
|
113
|
+
},
|
114
|
+
{
|
115
|
+
title: "Careers",
|
116
|
+
icon: <LuxLogo />,
|
117
|
+
href: "https://lux.partners",
|
118
|
+
newTab: false,
|
119
|
+
},
|
120
|
+
{
|
121
|
+
title: "Partnership",
|
122
|
+
icon: <LuxLogo />,
|
123
|
+
href: "https://lux.partners",
|
124
|
+
newTab: false,
|
125
|
+
},
|
126
|
+
{
|
127
|
+
title: "Press",
|
128
|
+
icon: <LuxLogo />,
|
129
|
+
href: "https://lux.partners",
|
130
|
+
newTab: false,
|
131
|
+
},
|
132
|
+
{
|
133
|
+
title: "Help",
|
134
|
+
icon: <LuxLogo />,
|
135
|
+
href: "https://lux.partners",
|
136
|
+
newTab: false,
|
137
|
+
}
|
138
|
+
]
|
139
|
+
},
|
140
|
+
{
|
141
|
+
title: "Ecosystem",
|
142
|
+
icon: <LuxLogo />,
|
143
|
+
href: "https://lux.link",
|
144
|
+
newTab: false,
|
145
|
+
childMenu:[
|
146
|
+
{
|
147
|
+
title: "Market",
|
148
|
+
icon: <LuxLogo />,
|
149
|
+
href: "https://lux.link",
|
150
|
+
newTab: false,
|
151
|
+
},
|
152
|
+
{
|
153
|
+
title: "Exchange",
|
154
|
+
icon: <LuxLogo />,
|
155
|
+
href: "https://lux.link",
|
156
|
+
newTab: false,
|
157
|
+
},
|
158
|
+
{
|
159
|
+
title: "Finance",
|
160
|
+
icon: <LuxLogo />,
|
161
|
+
href: "https://lux.link",
|
162
|
+
newTab: false,
|
163
|
+
},
|
164
|
+
{
|
165
|
+
title: "Shop",
|
166
|
+
icon: <LuxLogo />,
|
167
|
+
href: "https://lux.market",
|
168
|
+
newTab: false,
|
169
|
+
},
|
170
|
+
{
|
171
|
+
title: "AI Chat",
|
172
|
+
icon: <LuxLogo />,
|
173
|
+
href: "https://lux.chat",
|
174
|
+
newTab: false,
|
175
|
+
},
|
176
|
+
{
|
177
|
+
title: "Credit",
|
178
|
+
icon: <LuxLogo />,
|
179
|
+
href: "https://lux.credit",
|
180
|
+
newTab: false,
|
181
|
+
},
|
182
|
+
{
|
183
|
+
title: "Quest",
|
184
|
+
icon: <LuxLogo />,
|
185
|
+
href: "https://lux.link",
|
186
|
+
newTab: false,
|
187
|
+
}
|
188
|
+
]
|
189
|
+
},
|
190
|
+
{
|
191
|
+
title: "Network",
|
192
|
+
icon: <LuxLogo />,
|
193
|
+
href: "https://lux.network",
|
194
|
+
newTab: false,
|
195
|
+
childMenu:[
|
196
|
+
{
|
197
|
+
title: "Bridge",
|
198
|
+
icon: <LuxLogo />,
|
199
|
+
href: "https://lux.network",
|
200
|
+
newTab: false,
|
201
|
+
},
|
202
|
+
{
|
203
|
+
title: "Explorer",
|
204
|
+
icon: <LuxLogo />,
|
205
|
+
href: "https://lux.network",
|
206
|
+
newTab: false,
|
207
|
+
},
|
208
|
+
{
|
209
|
+
title: "Wallet",
|
210
|
+
icon: <LuxLogo />,
|
211
|
+
href: "https://lux.network",
|
212
|
+
newTab: false,
|
213
|
+
},
|
214
|
+
{
|
215
|
+
title: "Safe",
|
216
|
+
icon: <LuxLogo />,
|
217
|
+
href: "https://lux.network",
|
218
|
+
newTab: false,
|
219
|
+
},
|
220
|
+
{
|
221
|
+
title: "Validator",
|
222
|
+
icon: <LuxLogo />,
|
223
|
+
href: "https://lux.validator",
|
224
|
+
newTab: false,
|
225
|
+
},
|
226
|
+
{
|
227
|
+
title: "Coin",
|
228
|
+
icon: <LuxLogo />,
|
229
|
+
href: "https://lux.coin",
|
230
|
+
newTab: false,
|
231
|
+
},
|
232
|
+
{
|
233
|
+
title: "Open Source",
|
234
|
+
icon: <LuxLogo />,
|
235
|
+
href: "https://lux.opensource",
|
236
|
+
newTab: false,
|
237
|
+
},
|
238
|
+
{
|
239
|
+
title: "Launch Subnet",
|
240
|
+
icon: <LuxLogo />,
|
241
|
+
href: "https://lux.launchsubnet",
|
242
|
+
newTab: false,
|
243
|
+
}
|
244
|
+
]
|
245
|
+
},
|
246
|
+
{
|
247
|
+
title: "Community",
|
248
|
+
icon: <LuxLogo />,
|
249
|
+
href: "https://lux.community",
|
250
|
+
newTab: false,
|
251
|
+
childMenu:[
|
252
|
+
{
|
253
|
+
title: "Lux Channel",
|
254
|
+
icon: <LuxLogo />,
|
255
|
+
href: "https://lux.channel",
|
256
|
+
newTab: false,
|
257
|
+
},
|
258
|
+
{
|
259
|
+
title: "Lux Discussions",
|
260
|
+
icon: <LuxLogo />,
|
261
|
+
href: "https://lux.discussions",
|
262
|
+
newTab: false,
|
263
|
+
},{
|
264
|
+
title: "Twitter",
|
265
|
+
icon: <LuxLogo />,
|
266
|
+
href: "https://twitter.com/luxdefi",
|
267
|
+
newTab: false,
|
268
|
+
},{
|
269
|
+
title: "Faceboook",
|
270
|
+
icon: <LuxLogo />,
|
271
|
+
href: "https://lux.facebook",
|
272
|
+
newTab: false,
|
273
|
+
},{
|
274
|
+
title: "Instagram",
|
275
|
+
icon: <LuxLogo />,
|
276
|
+
href: "https://lux.instagram",
|
277
|
+
newTab: false,
|
278
|
+
},{
|
279
|
+
title: "Linkedin",
|
280
|
+
icon: <LuxLogo />,
|
281
|
+
href: "https://lux.linkedin",
|
282
|
+
newTab: false,
|
283
|
+
},{
|
284
|
+
title: "Youtube",
|
285
|
+
icon: <LuxLogo />,
|
286
|
+
href: "https://lux.youtube",
|
287
|
+
newTab: false,
|
288
|
+
},
|
289
|
+
]
|
290
|
+
},
|
291
|
+
] satisfies LinkDefExtended[]
|
292
|
+
|
package/style/cart-animation.css
CHANGED
@@ -1,29 +1,29 @@
|
|
1
|
-
@keyframes wiggle-larger {
|
2
|
-
0% { transform: rotate(0deg); }
|
3
|
-
18% { transform: rotate(10deg) scale(0.9); }
|
4
|
-
32% { transform: rotate(0deg) scale(1.05);; }
|
5
|
-
50% { transform: rotate(-10deg) scale(1.05); }
|
6
|
-
68% { transform: rotate(0deg) scale(1.1); }
|
7
|
-
84% { transform: rotate(10deg) scale(1); }
|
8
|
-
100% { transform: rotate(0deg) scale(1);}
|
9
|
-
}
|
10
|
-
|
11
|
-
@keyframes wiggle-smaller {
|
12
|
-
0% { transform: rotate(0deg); }
|
13
|
-
18% { transform: rotate(10deg) scale(1.05); }
|
14
|
-
32% { transform: rotate(0deg) scale(0.9);; }
|
15
|
-
50% { transform: rotate(-10deg) scale(0.9); }
|
16
|
-
68% { transform: rotate(0deg) scale(0.85); }
|
17
|
-
84% { transform: rotate(10deg) scale(1); }
|
18
|
-
100% { transform: rotate(0deg) scale(1);}
|
19
|
-
}
|
20
|
-
|
21
|
-
.wiggle-larger-animation,
|
22
|
-
.item-added-to-cart-animation {
|
23
|
-
animation: wiggle-larger 350ms;
|
24
|
-
}
|
25
|
-
|
26
|
-
.wiggle-smaller-animation,
|
27
|
-
.item-removed-from-cart-animation {
|
28
|
-
animation: wiggle-smaller 300ms;
|
29
|
-
}
|
1
|
+
@keyframes wiggle-larger {
|
2
|
+
0% { transform: rotate(0deg); }
|
3
|
+
18% { transform: rotate(10deg) scale(0.9); }
|
4
|
+
32% { transform: rotate(0deg) scale(1.05);; }
|
5
|
+
50% { transform: rotate(-10deg) scale(1.05); }
|
6
|
+
68% { transform: rotate(0deg) scale(1.1); }
|
7
|
+
84% { transform: rotate(10deg) scale(1); }
|
8
|
+
100% { transform: rotate(0deg) scale(1);}
|
9
|
+
}
|
10
|
+
|
11
|
+
@keyframes wiggle-smaller {
|
12
|
+
0% { transform: rotate(0deg); }
|
13
|
+
18% { transform: rotate(10deg) scale(1.05); }
|
14
|
+
32% { transform: rotate(0deg) scale(0.9);; }
|
15
|
+
50% { transform: rotate(-10deg) scale(0.9); }
|
16
|
+
68% { transform: rotate(0deg) scale(0.85); }
|
17
|
+
84% { transform: rotate(10deg) scale(1); }
|
18
|
+
100% { transform: rotate(0deg) scale(1);}
|
19
|
+
}
|
20
|
+
|
21
|
+
.wiggle-larger-animation,
|
22
|
+
.item-added-to-cart-animation {
|
23
|
+
animation: wiggle-larger 350ms;
|
24
|
+
}
|
25
|
+
|
26
|
+
.wiggle-smaller-animation,
|
27
|
+
.item-removed-from-cart-animation {
|
28
|
+
animation: wiggle-smaller 300ms;
|
29
|
+
}
|
@@ -1,23 +1,23 @@
|
|
1
|
-
@keyframes checkout-widget-fade-in {
|
2
|
-
0% { transform: scale(0.5); opacity: 0; }
|
3
|
-
100% { transform: scale(1); opacity: 1;}
|
4
|
-
}
|
5
|
-
|
6
|
-
.checkout-widget-appears {
|
7
|
-
animation-name: checkout-widget-fade-in;
|
8
|
-
animation-duration: 200ms;
|
9
|
-
}
|
10
|
-
|
11
|
-
.checkout-widget-disappears {
|
12
|
-
animation-name: checkout-widget-fade-in;
|
13
|
-
animation-duration: 200ms;
|
14
|
-
animation-direction: reverse;
|
15
|
-
animation-fill-mode: forwards;
|
16
|
-
}
|
17
|
-
|
18
|
-
.checkout-widget-appears-after-buy-drawer-closes {
|
19
|
-
animation-fill-mode: backwards;
|
20
|
-
/* Drawer is hardcoded to open in 0.5s. We can start slightly sooner. */
|
21
|
-
animation-delay: 400ms;
|
22
|
-
}
|
23
|
-
|
1
|
+
@keyframes checkout-widget-fade-in {
|
2
|
+
0% { transform: scale(0.5); opacity: 0; }
|
3
|
+
100% { transform: scale(1); opacity: 1;}
|
4
|
+
}
|
5
|
+
|
6
|
+
.checkout-widget-appears {
|
7
|
+
animation-name: checkout-widget-fade-in;
|
8
|
+
animation-duration: 200ms;
|
9
|
+
}
|
10
|
+
|
11
|
+
.checkout-widget-disappears {
|
12
|
+
animation-name: checkout-widget-fade-in;
|
13
|
+
animation-duration: 200ms;
|
14
|
+
animation-direction: reverse;
|
15
|
+
animation-fill-mode: forwards;
|
16
|
+
}
|
17
|
+
|
18
|
+
.checkout-widget-appears-after-buy-drawer-closes {
|
19
|
+
animation-fill-mode: backwards;
|
20
|
+
/* Drawer is hardcoded to open in 0.5s. We can start slightly sooner. */
|
21
|
+
animation-delay: 400ms;
|
22
|
+
}
|
23
|
+
|
package/style/lux-colors.css
CHANGED
@@ -1,85 +1,85 @@
|
|
1
|
-
@tailwind base;
|
2
|
-
/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
|
3
|
-
|
4
|
-
@layer base {
|
5
|
-
|
6
|
-
:root, .hanzo-ui-light-theme {
|
7
|
-
--hz-ui-fg-0: hsl(0 0% 0%);
|
8
|
-
--hz-ui-fg-body: hsl(0 0% 10%);
|
9
|
-
--hz-ui-fg-1: hsl(0 0% 20%);
|
10
|
-
--hz-ui-fg-2: hsl(0 0% 35%);
|
11
|
-
--hz-ui-fg-3: hsl(0 0% 50%);
|
12
|
-
--hz-ui-fg-4: hsl(0 0% 70%);
|
13
|
-
--hz-ui-fg-5: hsl(0 0% 90%);
|
14
|
-
|
15
|
-
--hz-ui-bg-0: hsl(0 0% 100%);
|
16
|
-
--hz-ui-bg-1: hsl(0 0% 90%);
|
17
|
-
--hz-ui-bg-2: hsl(0 0% 75%);
|
18
|
-
--hz-ui-bg-3: hsl(0 0% 55%);
|
19
|
-
|
20
|
-
--hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
|
21
|
-
|
22
|
-
--hz-ui-bg-inverted: var(--hz-ui-fg-0);
|
23
|
-
--hz-ui-bg-inverted-hover: hsla(0, 0%, 0%, 0.85);
|
24
|
-
|
25
|
-
--hz-ui-fg-inverted: var(--hz-ui-bg-0);
|
26
|
-
|
27
|
-
--hz-ui-secondary-0: hsl(262, 7%, 82%);
|
28
|
-
--hz-ui-secondary-1: hsl(258, 7%, 72%);
|
29
|
-
--hz-ui-secondary-2: hsl(254, 7%, 62%);
|
30
|
-
--hz-ui-secondary-3: hsl(250, 5%, 53%);
|
31
|
-
|
32
|
-
--hz-ui-primary: var(--hz-ui-bg-inverted);
|
33
|
-
--hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
|
34
|
-
--hz-ui-primary-fg: var(--hz-ui-fg-inverted);
|
35
|
-
|
36
|
-
--hz-ui-secondary: var(--hz-ui-secondary-0);
|
37
|
-
--hz-ui-secondary-hover: var(--hz-ui-secondary-2);
|
38
|
-
--hz-ui-secondary-fg: var(--hz-ui-bg-0);
|
39
|
-
|
40
|
-
--hz-ui-nav: var(--hz-ui-fg-4);
|
41
|
-
--hz-ui-nav-current: var(--hz-ui-fg-0);
|
42
|
-
--hz-ui-nav-hover: var(--hz-ui-fg-0);
|
43
|
-
|
44
|
-
--hz-ui-destructive: hsl(0 62.8% 45%);
|
45
|
-
--hz-ui-destructive-hover: hsl(0 62.8% 25%);
|
46
|
-
--hz-ui-destructive-fg: hsl(0 0% 100%);
|
47
|
-
|
48
|
-
--hz-ui-ring: var(--hz-ui-fg-1);
|
49
|
-
|
50
|
-
--hz-ui-radius: 0.5rem;
|
51
|
-
}
|
52
|
-
|
53
|
-
.hanzo-ui-dark-theme {
|
54
|
-
|
55
|
-
--hz-ui-fg-0: hsl(0 0% 100%);
|
56
|
-
--hz-ui-fg-body: hsl(0, 0%, 97%);
|
57
|
-
--hz-ui-fg-1: hsl(0 0% 85%);
|
58
|
-
--hz-ui-fg-2: hsl(0 0% 70%);
|
59
|
-
--hz-ui-fg-3: hsl(0 0% 55%);
|
60
|
-
--hz-ui-fg-4: hsl(0 0% 40%);
|
61
|
-
--hz-ui-fg-5: hsl(0 0% 25%);
|
62
|
-
|
63
|
-
--hz-ui-bg-inverted: var(--hz-ui-fg-0);
|
64
|
-
--hz-ui-bg-inverted-hover: hsla(0, 0%, 100%, 0.85);
|
65
|
-
|
66
|
-
--hz-ui-bg-3: hsl(0 0% 25%);
|
67
|
-
--hz-ui-bg-2: hsl(0 0% 18%);
|
68
|
-
--hz-ui-bg-1: hsl(0 0% 12%);
|
69
|
-
--hz-ui-bg-0: hsl(0 0% 0%);
|
70
|
-
|
71
|
-
--hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
|
72
|
-
|
73
|
-
--hz-ui-fg-inverted: var(--hz-ui-bg-0);
|
74
|
-
|
75
|
-
--hz-ui-secondary-0: hsl(250, 5%, 53%);
|
76
|
-
--hz-ui-secondary-1: hsl(254, 7%, 62%);
|
77
|
-
--hz-ui-secondary-2: hsl(258, 7%, 72%);
|
78
|
-
--hz-ui-secondary-3: hsl(262, 7%, 82%);
|
79
|
-
|
80
|
-
--hz-ui-secondary-fg: var(--hz-ui-fg-0);
|
81
|
-
|
82
|
-
}
|
83
|
-
|
84
|
-
}
|
85
|
-
|
1
|
+
@tailwind base;
|
2
|
+
/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
|
3
|
+
|
4
|
+
@layer base {
|
5
|
+
|
6
|
+
:root, .hanzo-ui-light-theme {
|
7
|
+
--hz-ui-fg-0: hsl(0 0% 0%);
|
8
|
+
--hz-ui-fg-body: hsl(0 0% 10%);
|
9
|
+
--hz-ui-fg-1: hsl(0 0% 20%);
|
10
|
+
--hz-ui-fg-2: hsl(0 0% 35%);
|
11
|
+
--hz-ui-fg-3: hsl(0 0% 50%);
|
12
|
+
--hz-ui-fg-4: hsl(0 0% 70%);
|
13
|
+
--hz-ui-fg-5: hsl(0 0% 90%);
|
14
|
+
|
15
|
+
--hz-ui-bg-0: hsl(0 0% 100%);
|
16
|
+
--hz-ui-bg-1: hsl(0 0% 90%);
|
17
|
+
--hz-ui-bg-2: hsl(0 0% 75%);
|
18
|
+
--hz-ui-bg-3: hsl(0 0% 55%);
|
19
|
+
|
20
|
+
--hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
|
21
|
+
|
22
|
+
--hz-ui-bg-inverted: var(--hz-ui-fg-0);
|
23
|
+
--hz-ui-bg-inverted-hover: hsla(0, 0%, 0%, 0.85);
|
24
|
+
|
25
|
+
--hz-ui-fg-inverted: var(--hz-ui-bg-0);
|
26
|
+
|
27
|
+
--hz-ui-secondary-0: hsl(262, 7%, 82%);
|
28
|
+
--hz-ui-secondary-1: hsl(258, 7%, 72%);
|
29
|
+
--hz-ui-secondary-2: hsl(254, 7%, 62%);
|
30
|
+
--hz-ui-secondary-3: hsl(250, 5%, 53%);
|
31
|
+
|
32
|
+
--hz-ui-primary: var(--hz-ui-bg-inverted);
|
33
|
+
--hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
|
34
|
+
--hz-ui-primary-fg: var(--hz-ui-fg-inverted);
|
35
|
+
|
36
|
+
--hz-ui-secondary: var(--hz-ui-secondary-0);
|
37
|
+
--hz-ui-secondary-hover: var(--hz-ui-secondary-2);
|
38
|
+
--hz-ui-secondary-fg: var(--hz-ui-bg-0);
|
39
|
+
|
40
|
+
--hz-ui-nav: var(--hz-ui-fg-4);
|
41
|
+
--hz-ui-nav-current: var(--hz-ui-fg-0);
|
42
|
+
--hz-ui-nav-hover: var(--hz-ui-fg-0);
|
43
|
+
|
44
|
+
--hz-ui-destructive: hsl(0 62.8% 45%);
|
45
|
+
--hz-ui-destructive-hover: hsl(0 62.8% 25%);
|
46
|
+
--hz-ui-destructive-fg: hsl(0 0% 100%);
|
47
|
+
|
48
|
+
--hz-ui-ring: var(--hz-ui-fg-1);
|
49
|
+
|
50
|
+
--hz-ui-radius: 0.5rem;
|
51
|
+
}
|
52
|
+
|
53
|
+
.hanzo-ui-dark-theme {
|
54
|
+
|
55
|
+
--hz-ui-fg-0: hsl(0 0% 100%);
|
56
|
+
--hz-ui-fg-body: hsl(0, 0%, 97%);
|
57
|
+
--hz-ui-fg-1: hsl(0 0% 85%);
|
58
|
+
--hz-ui-fg-2: hsl(0 0% 70%);
|
59
|
+
--hz-ui-fg-3: hsl(0 0% 55%);
|
60
|
+
--hz-ui-fg-4: hsl(0 0% 40%);
|
61
|
+
--hz-ui-fg-5: hsl(0 0% 25%);
|
62
|
+
|
63
|
+
--hz-ui-bg-inverted: var(--hz-ui-fg-0);
|
64
|
+
--hz-ui-bg-inverted-hover: hsla(0, 0%, 100%, 0.85);
|
65
|
+
|
66
|
+
--hz-ui-bg-3: hsl(0 0% 25%);
|
67
|
+
--hz-ui-bg-2: hsl(0 0% 18%);
|
68
|
+
--hz-ui-bg-1: hsl(0 0% 12%);
|
69
|
+
--hz-ui-bg-0: hsl(0 0% 0%);
|
70
|
+
|
71
|
+
--hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
|
72
|
+
|
73
|
+
--hz-ui-fg-inverted: var(--hz-ui-bg-0);
|
74
|
+
|
75
|
+
--hz-ui-secondary-0: hsl(250, 5%, 53%);
|
76
|
+
--hz-ui-secondary-1: hsl(254, 7%, 62%);
|
77
|
+
--hz-ui-secondary-2: hsl(258, 7%, 72%);
|
78
|
+
--hz-ui-secondary-3: hsl(262, 7%, 82%);
|
79
|
+
|
80
|
+
--hz-ui-secondary-fg: var(--hz-ui-fg-0);
|
81
|
+
|
82
|
+
}
|
83
|
+
|
84
|
+
}
|
85
|
+
|
package/style/lux-global.css
CHANGED
@@ -1,31 +1,31 @@
|
|
1
|
-
/* Note, preflight is applied first:
|
2
|
-
https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
|
3
|
-
*/
|
4
|
-
@import "tailwindcss/base";
|
5
|
-
|
6
|
-
/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
|
7
|
-
@import "@hanzo/ui/style/hanzo-common";
|
8
|
-
@import "lux-colors";
|
9
|
-
|
10
|
-
@import "tailwindcss/components";
|
11
|
-
@import "tailwindcss/utilities";
|
12
|
-
|
13
|
-
div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
|
14
|
-
display: none;
|
15
|
-
}
|
16
|
-
|
17
|
-
.font-heading {
|
18
|
-
@apply uppercase;
|
19
|
-
}
|
20
|
-
|
21
|
-
/* Specific style fixes for react-square-web-payments-sdk -
|
22
|
-
* reduce gap between card input and pay button
|
23
|
-
*/
|
24
|
-
#rswps-card-container {
|
25
|
-
min-height: unset !important;
|
26
|
-
}
|
27
|
-
|
28
|
-
.sq-card-wrapper .sq-card-message {
|
29
|
-
margin-top: 0 !important;
|
30
|
-
margin-bottom: 0 !important;
|
1
|
+
/* Note, preflight is applied first:
|
2
|
+
https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
|
3
|
+
*/
|
4
|
+
@import "tailwindcss/base";
|
5
|
+
|
6
|
+
/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
|
7
|
+
@import "@hanzo/ui/style/hanzo-common";
|
8
|
+
@import "lux-colors";
|
9
|
+
|
10
|
+
@import "tailwindcss/components";
|
11
|
+
@import "tailwindcss/utilities";
|
12
|
+
|
13
|
+
div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
|
14
|
+
display: none;
|
15
|
+
}
|
16
|
+
|
17
|
+
.font-heading {
|
18
|
+
@apply uppercase;
|
19
|
+
}
|
20
|
+
|
21
|
+
/* Specific style fixes for react-square-web-payments-sdk -
|
22
|
+
* reduce gap between card input and pay button
|
23
|
+
*/
|
24
|
+
#rswps-card-container {
|
25
|
+
min-height: unset !important;
|
26
|
+
}
|
27
|
+
|
28
|
+
.sq-card-wrapper .sq-card-message {
|
29
|
+
margin-top: 0 !important;
|
30
|
+
margin-bottom: 0 !important;
|
31
31
|
}
|
@@ -1,18 +1,18 @@
|
|
1
|
-
import type { TwFontDesc } from '@hanzo/ui/tailwind'
|
2
|
-
|
3
|
-
import luxTwFonts from './lux-tw-fonts'
|
4
|
-
|
5
|
-
export const fontFamily = (ignoreTheme: any): {
|
6
|
-
[key: string]: string[]
|
7
|
-
} => {
|
8
|
-
|
9
|
-
let result: any = {}
|
10
|
-
luxTwFonts.forEach((font: TwFontDesc) => {
|
11
|
-
result[font.twName] = font.fontFamily
|
12
|
-
// eg: heading: ['var(--font-druk-text-wide)']
|
13
|
-
})
|
14
|
-
|
15
|
-
return result as {
|
16
|
-
[key: string]: string[]
|
17
|
-
}
|
18
|
-
}
|
1
|
+
import type { TwFontDesc } from '@hanzo/ui/tailwind'
|
2
|
+
|
3
|
+
import luxTwFonts from './lux-tw-fonts'
|
4
|
+
|
5
|
+
export const fontFamily = (ignoreTheme: any): {
|
6
|
+
[key: string]: string[]
|
7
|
+
} => {
|
8
|
+
|
9
|
+
let result: any = {}
|
10
|
+
luxTwFonts.forEach((font: TwFontDesc) => {
|
11
|
+
result[font.twName] = font.fontFamily
|
12
|
+
// eg: heading: ['var(--font-druk-text-wide)']
|
13
|
+
})
|
14
|
+
|
15
|
+
return result as {
|
16
|
+
[key: string]: string[]
|
17
|
+
}
|
18
|
+
}
|
package/tailwind/index.ts
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
|
2
|
-
export {default as preset} from './tailwind.config.lux-preset'
|
1
|
+
|
2
|
+
export {default as preset} from './tailwind.config.lux-preset'
|