@luxfi/core 5.1.3 → 5.1.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (115) hide show
  1. package/commerce/AUTO-GEN-bullion-by-family.json +33 -33
  2. package/commerce/EDIT-ME-bullion-market-prices.ts +11 -11
  3. package/commerce/assign-prices.ts +49 -49
  4. package/commerce/assign-videos-by-family-group.ts +14 -14
  5. package/commerce/bullion-price-1oz.ts +5 -5
  6. package/commerce/index.ts +18 -18
  7. package/commerce/lux-service-options.ts +6 -6
  8. package/components/access-code-input.tsx +71 -71
  9. package/components/auth/auth-listener.tsx +29 -29
  10. package/components/auth/auth-token/clear-auth-token.tsx +12 -12
  11. package/components/auth/auth-token/set-auth-token.tsx +16 -16
  12. package/components/auth/common-auth-domains.ts +16 -16
  13. package/components/auth/login-panel.tsx +104 -104
  14. package/components/chat-widget.tsx +80 -80
  15. package/components/commerce/bag-button.tsx +98 -98
  16. package/components/commerce/buy-drawer/drawer.tsx +44 -44
  17. package/components/commerce/buy-drawer/index.tsx +46 -46
  18. package/components/commerce/checkout-button.tsx +116 -116
  19. package/components/commerce/checkout-panel/close-button.tsx +26 -26
  20. package/components/commerce/checkout-panel/dt-bag-carousel.tsx +36 -36
  21. package/components/commerce/checkout-panel/dt-checkout-panel.tsx +66 -66
  22. package/components/commerce/checkout-panel/index.tsx +123 -123
  23. package/components/commerce/checkout-panel/links-row.tsx +21 -21
  24. package/components/commerce/checkout-panel/mb-checkout-panel.tsx +54 -54
  25. package/components/commerce/checkout-panel/steps-indicator.tsx +39 -39
  26. package/components/commerce/checkout-panel/thank-you.tsx +18 -18
  27. package/components/commerce/checkout-widget/const.ts +13 -13
  28. package/components/commerce/checkout-widget/index.tsx +86 -86
  29. package/components/commerce/checkout-widget/obs-string-set.ts +48 -48
  30. package/components/commerce/checkout-widget/use-anim-clx-set.ts +56 -56
  31. package/components/commerce/checkout-widget/use-lagging-item-ref.ts +29 -29
  32. package/components/commerce/desktop-bag-popup.tsx +78 -78
  33. package/components/commerce/mobile-bag-drawer.tsx +51 -51
  34. package/components/commerce/mobile-login-button.tsx +101 -0
  35. package/components/commerce/mobile-menu-toggle-button.tsx +35 -35
  36. package/components/commerce/mobile-nav-menu-ai.tsx +98 -0
  37. package/components/commerce/mobile-nav-menu-item.tsx +46 -0
  38. package/components/commerce/mobile-nav-menu.tsx +79 -64
  39. package/components/contact-dialog/contact-form.tsx +112 -112
  40. package/components/contact-dialog/disclaimer.tsx +13 -13
  41. package/components/contact-dialog/index.tsx +64 -64
  42. package/components/copyright.tsx +21 -21
  43. package/components/footer.tsx +77 -77
  44. package/components/header/desktop.tsx +54 -54
  45. package/components/header/guts.tsx +27 -0
  46. package/components/header/index.tsx +47 -26
  47. package/components/header/mobile.tsx +165 -161
  48. package/components/header/theme-toggle.tsx +26 -26
  49. package/components/icons/avatar.tsx +11 -0
  50. package/components/icons/bag-icon.tsx +10 -10
  51. package/components/icons/github.tsx +14 -14
  52. package/components/icons/index.tsx +43 -35
  53. package/components/icons/left-arrow.tsx +11 -0
  54. package/components/icons/lux-logo.tsx +10 -10
  55. package/components/icons/right-arrow.tsx +10 -0
  56. package/components/icons/search.tsx +12 -0
  57. package/components/icons/secure-delivery.tsx +13 -13
  58. package/components/icons/social-icon.tsx +35 -35
  59. package/components/icons/social-svg.css +3 -3
  60. package/components/icons/youtube-logo.tsx +59 -59
  61. package/components/index.ts +27 -27
  62. package/components/logo.tsx +81 -81
  63. package/components/mini-chart/index.tsx +7 -7
  64. package/components/mini-chart/mini-chart-props.ts +43 -43
  65. package/components/mini-chart/mini-chart.tsx +85 -85
  66. package/components/mini-chart/wrapper.tsx +23 -23
  67. package/components/not-found/index.tsx +27 -27
  68. package/components/not-found/not-found-content.mdx +5 -5
  69. package/components/scripts.tsx +24 -24
  70. package/conf/index.ts +50 -50
  71. package/environment.d.ts +5 -5
  72. package/next/analytics/fpixel.ts +15 -15
  73. package/next/analytics/google-analytics.ts +13 -13
  74. package/next/analytics/index.ts +3 -3
  75. package/next/analytics/pixel-analytics.tsx +54 -54
  76. package/next/font/get-app-router-font-classes.ts +12 -12
  77. package/next/font/load-and-return-lux-next-fonts-on-import.ts +68 -68
  78. package/next/font/next-font-desc.ts +27 -27
  79. package/next/font/pages-router-font-vars.tsx +18 -18
  80. package/next/head-metadata/from-next/metadata-types.ts +158 -158
  81. package/next/head-metadata/from-next/opengraph-types.ts +267 -267
  82. package/next/head-metadata/from-next/twitter-types.ts +92 -92
  83. package/next/head-metadata/index.tsx +208 -208
  84. package/next/middleware/determine-device-mw.ts +16 -16
  85. package/package.json +73 -72
  86. package/root-layout/WHY_THIS_IS_SEPARATE.txt +1 -1
  87. package/root-layout/index.tsx +121 -120
  88. package/server-actions/firebase-app.ts +14 -14
  89. package/server-actions/index.ts +5 -5
  90. package/server-actions/store-contact.ts +51 -51
  91. package/site-def/footer/community.tsx +67 -67
  92. package/site-def/footer/company.ts +37 -37
  93. package/site-def/footer/ecosystem.ts +37 -37
  94. package/site-def/footer/index.tsx +26 -26
  95. package/site-def/footer/legal.ts +28 -28
  96. package/site-def/footer/network.ts +45 -45
  97. package/site-def/footer/svg/warpcast-logo.svg +11 -11
  98. package/site-def/index.ts +2 -2
  99. package/site-def/main-nav.tsx +292 -0
  100. package/style/cart-animation.css +29 -29
  101. package/style/checkout-animation.css +23 -23
  102. package/style/lux-colors.css +85 -85
  103. package/style/lux-global.css +30 -30
  104. package/tailwind/fontFamily.tailwind.lux.ts +18 -18
  105. package/tailwind/index.ts +2 -2
  106. package/tailwind/lux-tw-fonts.ts +39 -39
  107. package/tailwind/tailwind.config.lux-preset.ts +10 -10
  108. package/tsconfig.json +10 -28
  109. package/types/chatbot-config.ts +6 -6
  110. package/types/chatbot-suggested-question.ts +7 -7
  111. package/types/commerce-config.ts +10 -10
  112. package/types/contact-info.ts +10 -10
  113. package/types/index.ts +5 -5
  114. package/types/site-def.ts +45 -45
  115. 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
+
@@ -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
+
@@ -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
+
@@ -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'