@driveflux/beam 2.0.0 → 2.0.1

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 (3) hide show
  1. package/dist/base-styles.css +265 -96
  2. package/dist/styles.css +2801 -3286
  3. package/package.json +1 -1
package/dist/base-styles.css CHANGED
@@ -1,8 +1,10 @@
1
+ @import "tailwindcss" important;
1
2
  @import "./root.css";
2
3
  @import "./datepicker/calendar.css";
3
- @tailwind base;
4
- @tailwind components;
5
- @tailwind utilities;
4
+
5
+ @plugin 'tailwindcss-animate';
6
+
7
+ @custom-variant dark (&:is(.dark *));
6
8
 
7
9
  @font-face {
8
10
  font-family: "Gotham-Black";
@@ -59,115 +61,282 @@
59
61
  font-display: swap;
60
62
  }
61
63
 
62
- html {
63
- line-height: 1.15;
64
- -webkit-text-size-adjust: 100%;
65
- height: 100%;
66
- box-sizing: border-box;
67
- line-height: 1.65;
68
- }
64
+ @theme {
65
+ --height-button: 48px;
69
66
 
70
- *,
71
- *:before,
72
- *:after {
73
- box-sizing: inherit;
74
- }
67
+ --font-bold: Gotham-Bold;
68
+ --font-normal: Gotham-Book;
69
+ --font-medium: Gotham-Medium;
70
+ --font-black: Gotham-Black;
71
+ --font-light: Gotham-Light;
75
72
 
76
- body {
77
- position: relative;
78
- min-height: 100%;
79
- margin: 0;
80
-
81
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu",
82
- "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
83
- font-weight: 400;
84
- min-width: 320px;
85
- direction: ltr;
86
- font-feature-settings: "kern";
87
- text-rendering: optimizeLegibility;
88
- -webkit-font-smoothing: antialiased;
89
- -moz-osx-font-smoothing: grayscale;
90
- scroll-behavior: smooth;
91
- font-family: var(--primaryNormal);
92
- }
73
+ --text-xs: 10px;
74
+ --text-sm: 12px;
75
+ --text-base: 14px;
76
+ --text-xl: 16px;
77
+ --text-2xl: 18px;
78
+ --text-3xl: 20px;
79
+ --text-4xl: 22px;
80
+ --text-5xl: 24px;
81
+ --text-6xl: 26px;
82
+ --text-7xl: 28px;
83
+ --text-8xl: 30px;
93
84
 
94
- html,
95
- body {
96
- background-color: var(--white);
97
- }
85
+ --tracking-normal: 0;
86
+ --tracking-wide: 1px;
87
+ --tracking-wider: 2px;
88
+ --tracking-widest: 3px;
98
89
 
99
- ::selection {
100
- background-color: var(--primary);
101
- color: var(--white);
102
- }
90
+ --color-primary1: #efeff0;
91
+ --color-primary2: #cacaca;
92
+ --color-primary3: #585858;
93
+ --color-primary4: #191919;
94
+ --color-accent4: #e55867;
95
+ --color-links1: #eefafd;
96
+ --color-links2: #ade0ee;
97
+ --color-links: #50c8e8;
98
+ --color-lite: #d6f0f7;
99
+ --color-alert4: #e24657;
100
+ --color-danger: #e24657;
101
+ --color-warning4: #f4b25c;
102
+ --color-success4: #4fd9c2;
103
+ --color-green: #4fd9c2;
104
+ --color-black: #000000;
105
+ --color-white: #ffffff;
106
+ --color-white-hover: #e6e6e6;
107
+ --color-placeholder: #f4f4f4;
108
+ --color-highlight: #f9f7d7;
103
109
 
104
- [role="grid"]:focus {
105
- outline: none;
106
- }
110
+ --color-primary-25: #fafafa;
111
+ --color-primary-50: #d6f5f0;
112
+ --color-primary-100: #98e6d6;
113
+ --color-primary-200: #191919;
114
+ --color-primary-300: #191919;
115
+ --color-primary-400: #3bd5bb;
116
+ --color-primary-500: #000000;
117
+ --color-primary-600: #000000;
118
+ --color-primary-700: #000000;
119
+ --color-primary-800: #000000;
120
+ --color-primary-900: #000000;
107
121
 
108
- svg {
109
- text-rendering: optimizeLegibility;
110
- }
122
+ --color-success-50: #d8f7f2;
123
+ --color-success-100: #98e6d6;
124
+ --color-success-200: #3bd5bc;
125
+ --color-success-300: #4fd9c2;
126
+ --color-success-400: #3bd5bb;
127
+ --color-success-500: #3bd5bb;
128
+ --color-success-600: #2ea692;
129
+ --color-success-700: #00825c;
130
+ --color-success-800: #00724d;
131
+ --color-success-900: #005530;
111
132
 
112
- h1,
113
- h2,
114
- h3 {
115
- margin: 0;
116
- }
133
+ --color-accent-50: #fceaee;
134
+ --color-accent-100: #f8cad3;
135
+ --color-accent-200: #e55867;
136
+ --color-accent-300: #e55867;
137
+ --color-accent-400: #e24657;
138
+ --color-accent-500: #e24657;
139
+ --color-accent-600: #d8253f;
140
+ --color-accent-700: #c61a38;
141
+ --color-accent-800: #b91231;
142
+ --color-accent-900: #aa0026;
117
143
 
118
- a {
119
- color: var(--links);
120
- text-decoration: none;
121
- transition: color 0.2s ease;
122
- }
144
+ --color-warning-50: #fdf0de;
145
+ --color-warning-100: #f4b25c;
146
+ --color-warning-200: #f4b25c;
147
+ --color-warning-300: #f4b25c;
148
+ --color-warning-400: #f4b25c;
149
+ --color-warning-500: #f4b25c;
150
+ --color-warning-600: #bf7f2c;
151
+ --color-warning-700: #f4b25c;
152
+ --color-warning-800: #f4b25c;
153
+ --color-warning-900: #f4b25c;
123
154
 
124
- a:hover {
125
- text-decoration: none;
126
- }
155
+ --color-info-25: #eefafc;
156
+ --color-info-50: #cdf1fa;
157
+ --color-info-100: #50c8e8;
158
+ --color-info-200: #50c8e8;
159
+ --color-info-300: #50c8e8;
160
+ --color-info-400: #50c8e8;
161
+ --color-info-500: #50c8e8;
162
+ --color-info-600: #3ea5c0;
163
+ --color-info-700: #50c8e8;
164
+ --color-info-800: #50c8e8;
165
+ --color-info-900: #183c46;
127
166
 
128
- * {
129
- overflow: visible;
130
- box-sizing: border-box;
131
- text-align: left;
132
- }
167
+ --color-alert-50: #e24657;
168
+ --color-alert-100: #e24657;
169
+ --color-alert-200: #e24657;
170
+ --color-alert-300: #e24657;
171
+ --color-alert-400: #e24657;
172
+ --color-alert-500: #e24657;
173
+ --color-alert-600: #e24657;
174
+ --color-alert-700: #e24657;
175
+ --color-alert-800: #e24657;
176
+ --color-alert-900: #e24657;
133
177
 
134
- strong {
135
- font-family: var(--primaryBold);
136
- }
178
+ --animate-accordion-down: accordion-down 0.2s ease-out;
179
+ --animate-accordion-up: accordion-up 0.2s ease-out;
180
+ --animate-spin: rotate 0.6s linear infinite;
137
181
 
138
- .svg-icon {
139
- width: 100%;
140
- height: 100%;
141
- }
182
+ --leading-14: 14px;
142
183
 
143
- input:-webkit-autofill,
144
- input:-webkit-autofill:hover,
145
- input:-webkit-autofill:focus,
146
- textarea:-webkit-autofill,
147
- textarea:-webkit-autofill:hover,
148
- textarea:-webkit-autofill:focus,
149
- select:-webkit-autofill,
150
- select:-webkit-autofill:hover,
151
- select:-webkit-autofill:focus {
152
- background-color: var(--white) !important;
153
- -webkit-box-shadow: 0 0 0px 1000px var(--white) inset !important;
154
- color: #000 !important;
155
- font-size: 14px !important;
156
- }
184
+ @keyframes accordion-down {
185
+ from {
186
+ height: 0;
187
+ }
157
188
 
158
- li::marker {
159
- font-size: 15px;
160
- margin-left: 10px;
161
- }
189
+ to {
190
+ height: var(--radix-accordion-content-height);
191
+ }
192
+ }
162
193
 
163
- .full-width {
164
- width: 100%;
165
- }
194
+ @keyframes accordion-up {
195
+ from {
196
+ height: var(--radix-accordion-content-height);
197
+ }
198
+
199
+ to {
200
+ height: 0;
201
+ }
202
+ }
203
+
204
+ @keyframes rotate {
205
+ 0% {
206
+ transform: rotate(0deg);
207
+ }
166
208
 
167
- .h-safe-bottom-edge {
168
- height: env(safe-area-inset-bottom);
209
+ 100% {
210
+ transform: rotate(360deg);
211
+ }
212
+ }
169
213
  }
170
214
 
171
- ::-ms-reveal {
172
- display: none;
215
+ @layer base {
216
+ *,
217
+ ::after,
218
+ ::before,
219
+ ::backdrop,
220
+ ::file-selector-button {
221
+ border-color: var(--color-gray-200, currentcolor);
222
+ }
223
+
224
+ a {
225
+ color: var(--links);
226
+ text-decoration: none;
227
+ transition: color 0.2s ease;
228
+ }
229
+
230
+ a:hover {
231
+ text-decoration: none;
232
+ }
233
+
234
+ html {
235
+ line-height: 1.15;
236
+ -webkit-text-size-adjust: 100%;
237
+ height: 100%;
238
+ box-sizing: border-box;
239
+ line-height: 1.65;
240
+ }
241
+
242
+ *,
243
+ *:before,
244
+ *:after {
245
+ box-sizing: inherit;
246
+ }
247
+
248
+ body {
249
+ position: relative;
250
+ min-height: 100%;
251
+ margin: 0;
252
+
253
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
254
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
255
+ sans-serif;
256
+ font-weight: 400;
257
+ min-width: 320px;
258
+ direction: ltr;
259
+ font-feature-settings: "kern";
260
+ text-rendering: optimizeLegibility;
261
+ -webkit-font-smoothing: antialiased;
262
+ -moz-osx-font-smoothing: grayscale;
263
+ scroll-behavior: smooth;
264
+ font-family: var(--primaryNormal);
265
+ }
266
+
267
+ html,
268
+ body {
269
+ background-color: var(--white);
270
+ }
271
+
272
+ ::selection {
273
+ background-color: var(--primary);
274
+ color: var(--white);
275
+ }
276
+
277
+ [role="grid"]:focus {
278
+ outline: none;
279
+ }
280
+
281
+ svg {
282
+ text-rendering: optimizeLegibility;
283
+ }
284
+
285
+ h1,
286
+ h2,
287
+ h3 {
288
+ margin: 0;
289
+ }
290
+
291
+ * {
292
+ overflow: visible;
293
+ box-sizing: border-box;
294
+ text-align: left;
295
+ }
296
+
297
+ button:not(:disabled),
298
+ [role="button"]:not(:disabled) {
299
+ cursor: pointer;
300
+ }
301
+
302
+ strong {
303
+ font-family: var(--primaryBold);
304
+ }
305
+
306
+ .svg-icon {
307
+ width: 100%;
308
+ height: 100%;
309
+ }
310
+
311
+ input:-webkit-autofill,
312
+ input:-webkit-autofill:hover,
313
+ input:-webkit-autofill:focus,
314
+ textarea:-webkit-autofill,
315
+ textarea:-webkit-autofill:hover,
316
+ textarea:-webkit-autofill:focus,
317
+ select:-webkit-autofill,
318
+ select:-webkit-autofill:hover,
319
+ select:-webkit-autofill:focus {
320
+ background-color: var(--white) !important;
321
+ -webkit-box-shadow: 0 0 0px 1000px var(--white) inset !important;
322
+ color: #000 !important;
323
+ font-size: 14px !important;
324
+ }
325
+
326
+ li::marker {
327
+ font-size: 15px;
328
+ margin-left: 10px;
329
+ }
330
+
331
+ .full-width {
332
+ width: 100%;
333
+ }
334
+
335
+ .h-safe-bottom-edge {
336
+ height: env(safe-area-inset-bottom);
337
+ }
338
+
339
+ ::-ms-reveal {
340
+ display: none;
341
+ }
173
342
  }