@onereach/styles 25.3.6 → 25.3.7-beta.5823.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 (37) hide show
  1. package/README.md +0 -152
  2. package/package.json +7 -21
  3. package/tailwind/utils.js +26 -0
  4. package/tailwind.config.json +448 -429
  5. package/tailwind.config.preset.js +18 -21
  6. package/tokens-v3.css +14 -0
  7. package/tokens.css +14 -0
  8. package/dist/index.css +0 -300
  9. package/dist/index.css.map +0 -1
  10. package/dist/index.min.css +0 -1
  11. package/main.css +0 -10
  12. package/src/global.scss +0 -8
  13. package/src/main.scss +0 -1
  14. package/src/utils/_animation.scss +0 -19
  15. package/src/utils/functions/_breakpoint.scss +0 -33
  16. package/src/utils/functions/_get-transition-func.scss +0 -13
  17. package/src/utils/functions/_get-transition-time.scss +0 -13
  18. package/src/utils/functions/_px-to-rem.scss +0 -9
  19. package/src/utils/functions/index.scss +0 -4
  20. package/src/utils/index.scss +0 -3
  21. package/src/utils/mixins/_active.scss +0 -7
  22. package/src/utils/mixins/_breakpoints.scss +0 -13
  23. package/src/utils/mixins/_disabled.scss +0 -8
  24. package/src/utils/mixins/_focus.scss +0 -7
  25. package/src/utils/mixins/_has-error.scss +0 -5
  26. package/src/utils/mixins/_hover.scss +0 -17
  27. package/src/utils/mixins/_loading.scss +0 -7
  28. package/src/utils/mixins/_transition.scss +0 -7
  29. package/src/utils/mixins/index.scss +0 -8
  30. package/src/variables/_colors.scss +0 -70
  31. package/src/variables/_css-vars.scss +0 -91
  32. package/src/variables/_initial.scss +0 -25
  33. package/src/variables/_spacings.scss +0 -11
  34. package/src/variables/_typography.scss +0 -15
  35. package/src/variables/_z-index.scss +0 -5
  36. package/src/variables/index.scss +0 -7
  37. package/src/variables/tokens/design-tokens.scss +0 -86
@@ -1,21 +1,27 @@
1
+ const {
2
+ SpacePatterns: spacingTokens,
3
+ colors: colorTokens,
4
+ Gradients: gradientTokens,
5
+ BorderRadiuses: borderRadiusTokens,
6
+ Borders: borderWidthTokens,
7
+ Shadows: boxShadowTokens,
8
+ typeStyles: typographyTokens,
9
+ } = require('./src/variables/tokens/design-tokens-next.json');
10
+ const { plugin: animationDelay } = require('./tailwind/plugins/animation-delay');
1
11
  const { plugin: core } = require('./tailwind/plugins/core');
12
+ const { plugin: iconography } = require('./tailwind/plugins/iconography');
13
+ const { plugin: interactivity } = require('./tailwind/plugins/interactivity');
2
14
  const { plugin: layout } = require('./tailwind/plugins/layout');
15
+ const { plugin: themeResponsive } = require('./tailwind/plugins/responsive');
3
16
  const { plugin: scrollbar } = require('./tailwind/plugins/scrollbar');
4
- const { plugin: interactivity } = require('./tailwind/plugins/interactivity');
5
- const { plugin: typography } = require('./tailwind/plugins/typography');
6
- const { plugin: iconography } = require('./tailwind/plugins/iconography');
7
- const { plugin: animationDelay } = require('./tailwind/plugins/animation-delay');
8
-
9
- const { plugin: themePreset } = require('./tailwind/plugins/theme-preset');
10
- const { plugin: themeForeground } = require('./tailwind/plugins/theme-foreground');
11
17
  const { plugin: themeBackground } = require('./tailwind/plugins/theme-background');
12
18
  const { plugin: themeBorder } = require('./tailwind/plugins/theme-border');
13
19
  const { plugin: themeDivider } = require('./tailwind/plugins/theme-divider');
20
+ const { plugin: themeForeground } = require('./tailwind/plugins/theme-foreground');
14
21
  const { plugin: themeOutline } = require('./tailwind/plugins/theme-outline');
15
- const { plugin: themeResponsive } = require('./tailwind/plugins/responsive');
16
-
22
+ const { plugin: themePreset } = require('./tailwind/plugins/theme-preset');
23
+ const { plugin: typography } = require('./tailwind/plugins/typography');
17
24
  const {
18
- parseSpacingTokens,
19
25
  parseBorderRadiusTokens,
20
26
  parseBorderWidthTokens,
21
27
  parseBoxShadowTokens,
@@ -23,18 +29,9 @@ const {
23
29
  parseFontSizeTokens,
24
30
  parseFontWeightTokens,
25
31
  parseColorTokensNames,
32
+ parseSpacingTokensNames,
26
33
  } = require('./tailwind/utils');
27
34
 
28
- const {
29
- SpacePatterns: spacingTokens,
30
- colors: colorTokens,
31
- Gradients: gradientTokens,
32
- BorderRadiuses: borderRadiusTokens,
33
- Borders: borderWidthTokens,
34
- Shadows: boxShadowTokens,
35
- typeStyles: typographyTokens,
36
- } = require('./src/variables/tokens/design-tokens-next.json');
37
-
38
35
 
39
36
  module.exports = {
40
37
  darkMode: ['class', '[data-theme="dark"]'],
@@ -44,7 +41,7 @@ module.exports = {
44
41
 
45
42
  spacing: {
46
43
  'none': '0px', // Deprecated, major update required
47
- ...parseSpacingTokens(spacingTokens),
44
+ ...parseSpacingTokensNames(spacingTokens),
48
45
  },
49
46
 
50
47
  colors: {},
package/tokens-v3.css CHANGED
@@ -311,4 +311,18 @@
311
311
  --or-c-outline-opacity-0-08-dark: rgba(142,145,153,0.08);
312
312
  --or-c-surface-variant-1-dark: rgba(36,36,39,1);
313
313
  --or-c-skeletons-gradient-dark: linear-gradient(90deg, rgba(164,200,255,0.08) 0.00%,rgba(164,200,255,0.04) 50.01%,rgba(164,200,255,0.08) 100.00%);
314
+ }
315
+ :root {
316
+ --or-s-none: 0px;
317
+ --or-s-xs: 4px;
318
+ --or-s-sm: 8px;
319
+ --or-s-md: 16px;
320
+ --or-s-xl: 32px;
321
+ --or-s-3xl: 64px;
322
+ --or-s-4xl: 128px;
323
+ --or-s-lg: 24px;
324
+ --or-s-2xl: 48px;
325
+ --or-s-smplus: 12px;
326
+ --or-s-mdplus: 20px;
327
+ --or-s-lgplus: 28px;
314
328
  }
package/tokens.css CHANGED
@@ -309,4 +309,18 @@
309
309
  --or-c-outline-opacity-0-12: rgba(142,145,153,0.12);
310
310
  --or-c-outline-opacity-0-08: rgba(142,145,153,0.08);
311
311
  --or-c-surface-variant-1: rgba(36,36,39,1);
312
+ }
313
+ :root {
314
+ --or-s-none: 0px;
315
+ --or-s-xs: 4px;
316
+ --or-s-sm: 8px;
317
+ --or-s-md: 16px;
318
+ --or-s-xl: 32px;
319
+ --or-s-3xl: 64px;
320
+ --or-s-4xl: 128px;
321
+ --or-s-lg: 24px;
322
+ --or-s-2xl: 48px;
323
+ --or-s-smplus: 12px;
324
+ --or-s-mdplus: 20px;
325
+ --or-s-lgplus: 28px;
312
326
  }
package/dist/index.css DELETED
@@ -1,300 +0,0 @@
1
- :root,
2
- [data-theme=light] {
3
- --c-primary: #178ae7;
4
- --c-primary-darken-3: #1682d9;
5
- --c-primary-darken-5: #157cd0;
6
- --c-primary-darken-20: #0e538a;
7
- --c-primary-darken-25: #0b4573;
8
- --c-primary-darken-45: #020d16;
9
- --c-primary-lighten-20: #73b9f1;
10
- --c-primary-lighten-45: #e7f3fd;
11
- --c-error: #da1e28;
12
- --c-error-darken-3: #cd1c26;
13
- --c-error-darken-5: #c41b24;
14
- --c-error-darken-20: #801218;
15
- --c-error-darken-25: #6a0f13;
16
- --c-error-darken-45: #100203;
17
- --c-error-lighten-20: #ec7279;
18
- --c-error-lighten-45: #fbe2e4;
19
- --c-warning: #fcbc05;
20
- --c-warning-darken-3: #efb203;
21
- --c-warning-darken-5: #e5aa03;
22
- --c-warning-darken-20: #997202;
23
- --c-warning-darken-25: #805f02;
24
- --c-warning-darken-45: #1b1400;
25
- --c-warning-lighten-20: #fdd76a;
26
- --c-warning-lighten-45: #fff9e8;
27
- --c-success: #4ec00f;
28
- --c-success-darken-3: #48b20e;
29
- --c-success-darken-5: #44a80d;
30
- --c-success-darken-20: #286108;
31
- --c-success-darken-25: #1e4a06;
32
- --c-success-darken-45: black;
33
- --c-success-lighten-20: #82f045;
34
- --c-success-lighten-45: #d1fabb;
35
- --c-neutral-0: #fff;
36
- --c-neutral-0-darken-3: #f7f7f7;
37
- --c-neutral-0-darken-5: #f2f2f2;
38
- --c-neutral-0-darken-20: #cccccc;
39
- --c-neutral-0-darken-25: #bfbfbf;
40
- --c-neutral-0-darken-45: #8c8c8c;
41
- --c-neutral-0-lighten-20: white;
42
- --c-neutral-1: #f6f6f6;
43
- --c-neutral-1-darken-3: #eeeeee;
44
- --c-neutral-1-darken-5: #e9e9e9;
45
- --c-neutral-1-darken-20: #c3c3c3;
46
- --c-neutral-1-darken-25: #b6b6b6;
47
- --c-neutral-1-darken-45: #838383;
48
- --c-neutral-1-lighten-20: white;
49
- --c-neutral-2: #dfdfdf;
50
- --c-neutral-2-darken-3: #d7d7d7;
51
- --c-neutral-2-darken-5: #d2d2d2;
52
- --c-neutral-2-darken-20: #acacac;
53
- --c-neutral-2-darken-25: #9f9f9f;
54
- --c-neutral-2-darken-45: #6c6c6c;
55
- --c-neutral-2-lighten-20: white;
56
- --c-neutral-3: #c6c6c6;
57
- --c-neutral-3-darken-3: #bebebe;
58
- --c-neutral-3-darken-5: #b9b9b9;
59
- --c-neutral-3-darken-20: #939393;
60
- --c-neutral-3-darken-25: #868686;
61
- --c-neutral-3-darken-45: #535353;
62
- --c-neutral-3-lighten-20: #f9f9f9;
63
- --c-neutral-4: #91969d;
64
- --c-neutral-4-darken-3: #898e96;
65
- --c-neutral-4-darken-5: #848991;
66
- --c-neutral-4-darken-20: #5e636a;
67
- --c-neutral-4-darken-25: #52565c;
68
- --c-neutral-4-darken-45: #222426;
69
- --c-neutral-4-lighten-20: #c7c9cd;
70
- --c-neutral-5: #6c747d;
71
- --c-neutral-5-darken-3: #656c75;
72
- --c-neutral-5-darken-5: #60676f;
73
- --c-neutral-5-darken-20: #3d4146;
74
- --c-neutral-5-darken-25: #313539;
75
- --c-neutral-5-darken-45: #020202;
76
- --c-neutral-5-lighten-20: #a1a7ae;
77
- --c-neutral-6: #1e232b;
78
- --c-neutral-6-darken-3: #181c22;
79
- --c-neutral-6-darken-5: #14171c;
80
- --c-neutral-6-darken-20: black;
81
- --c-neutral-6-darken-25: black;
82
- --c-neutral-6-darken-45: black;
83
- --c-neutral-6-lighten-20: #485467;
84
- --c-body-bg: #fff;
85
- --c-white: #fff;
86
- --c-black: #000;
87
- }
88
-
89
- [data-theme=dark] {
90
- --c-primary: #A4C8FF;
91
- --c-primary-darken-3: #95bfff;
92
- --c-primary-darken-5: #8bb9ff;
93
- --c-primary-darken-20: #3e8aff;
94
- --c-primary-darken-25: #257bff;
95
- --c-primary-darken-45: #004bbe;
96
- --c-primary-lighten-20: white;
97
- --c-primary-lighten-45: white;
98
- --c-error: #FFB4A9;
99
- --c-error-darken-3: #ffa79a;
100
- --c-error-darken-5: #ff9e90;
101
- --c-error-darken-20: #ff5b43;
102
- --c-error-darken-25: #ff452a;
103
- --c-error-darken-45: #c31900;
104
- --c-error-lighten-20: white;
105
- --c-error-lighten-45: white;
106
- --c-warning: #FBBC0C;
107
- --c-warning-darken-3: #f4b504;
108
- --c-warning-darken-5: #eaad04;
109
- --c-warning-darken-20: #9e7503;
110
- --c-warning-darken-25: #856302;
111
- --c-warning-darken-45: #211801;
112
- --c-warning-lighten-20: #fdd870;
113
- --c-warning-lighten-45: #fffaee;
114
- --c-success: #6CE036;
115
- --c-success-darken-3: #62de29;
116
- --c-success-darken-5: #5ddb22;
117
- --c-success-darken-20: #409818;
118
- --c-success-darken-25: #378214;
119
- --c-success-darken-45: #122a06;
120
- --c-success-lighten-20: #adee8e;
121
- --c-success-lighten-45: #fdfffd;
122
- --c-neutral-0: #1B1B1D;
123
- --c-neutral-0-darken-3: #141415;
124
- --c-neutral-0-darken-5: #0f0f10;
125
- --c-neutral-0-darken-20: black;
126
- --c-neutral-0-darken-25: black;
127
- --c-neutral-0-darken-45: black;
128
- --c-neutral-0-lighten-20: #4c4c52;
129
- --c-neutral-1: #222428;
130
- --c-neutral-1-darken-3: #1b1d20;
131
- --c-neutral-1-darken-5: #16181a;
132
- --c-neutral-1-darken-20: black;
133
- --c-neutral-1-darken-25: black;
134
- --c-neutral-1-darken-45: black;
135
- --c-neutral-1-lighten-20: #51565f;
136
- --c-neutral-2: #26292F;
137
- --c-neutral-2-darken-3: #1f2227;
138
- --c-neutral-2-darken-5: #1b1d21;
139
- --c-neutral-2-darken-20: black;
140
- --c-neutral-2-darken-25: black;
141
- --c-neutral-2-darken-45: black;
142
- --c-neutral-2-lighten-20: #545a67;
143
- --c-neutral-3: #2A2E36;
144
- --c-neutral-3-darken-3: #23272d;
145
- --c-neutral-3-darken-5: #1f2228;
146
- --c-neutral-3-darken-20: black;
147
- --c-neutral-3-darken-25: black;
148
- --c-neutral-3-darken-45: black;
149
- --c-neutral-3-lighten-20: #575f6f;
150
- --c-neutral-4: #E1EAF6;
151
- --c-neutral-4-darken-3: #d5e2f2;
152
- --c-neutral-4-darken-5: #cddcf0;
153
- --c-neutral-4-darken-20: #93b3de;
154
- --c-neutral-4-darken-25: #7fa5d9;
155
- --c-neutral-4-darken-45: #386fba;
156
- --c-neutral-4-lighten-20: white;
157
- --c-neutral-5: #DFE8F6;
158
- --c-neutral-5-darken-3: #d3dff3;
159
- --c-neutral-5-darken-5: #cbdaf0;
160
- --c-neutral-5-darken-20: #8fafe0;
161
- --c-neutral-5-darken-25: #7ba0da;
162
- --c-neutral-5-darken-45: #3569bb;
163
- --c-neutral-5-lighten-20: white;
164
- --c-neutral-6: #E3E2E6;
165
- --c-neutral-6-darken-3: #dbdadf;
166
- --c-neutral-6-darken-5: #d6d4da;
167
- --c-neutral-6-darken-20: #aeabb7;
168
- --c-neutral-6-darken-25: #a19eab;
169
- --c-neutral-6-darken-45: #6d697a;
170
- --c-neutral-6-lighten-20: white;
171
- --c-c-body-bg: #1B1B1D;
172
- --c-c-body-bg-darken-3: #141415;
173
- --c-c-body-bg-darken-5: #0f0f10;
174
- --c-c-body-bg-darken-20: black;
175
- --c-c-body-bg-darken-25: black;
176
- --c-c-body-bg-darken-45: black;
177
- --c-c-body-bg-lighten-20: #4c4c52;
178
- --c-white: #222428;
179
- --c-black: #fff;
180
- }
181
-
182
- [data-theme=custom] {
183
- --c-primary: rgb(236, 0, 140);
184
- --c-primary-darken-3: #dd0083;
185
- --c-primary-darken-5: #d3007d;
186
- --c-primary-darken-20: #86004f;
187
- --c-primary-darken-25: #6d0040;
188
- --c-primary-darken-45: #070004;
189
- --c-primary-lighten-20: #ff53b9;
190
- --c-primary-lighten-45: #ffd3ed;
191
- --c-error: rgb(232, 17, 35);
192
- --c-error-darken-3: #da1021;
193
- --c-error-darken-5: #d00f1f;
194
- --c-error-darken-20: #890a15;
195
- --c-error-darken-25: #710811;
196
- --c-error-darken-45: #120103;
197
- --c-error-lighten-20: #f46b76;
198
- --c-error-lighten-45: #fde2e4;
199
- --c-warning: rgb(255, 241, 0);
200
- --c-warning-darken-3: #f0e300;
201
- --c-warning-darken-5: #e6d900;
202
- --c-warning-darken-20: #999100;
203
- --c-warning-darken-25: #807900;
204
- --c-warning-darken-45: #1a1800;
205
- --c-warning-lighten-20: #fff766;
206
- --c-warning-lighten-45: #fffee6;
207
- --c-success: rgb(186, 216, 10);
208
- --c-success-darken-3: #adc909;
209
- --c-success-darken-5: #a5c009;
210
- --c-success-darken-20: #667705;
211
- --c-success-darken-25: #515e04;
212
- --c-success-darken-45: black;
213
- --c-success-lighten-20: #dff751;
214
- --c-success-lighten-45: #f5fdcb;
215
- --c-neutral-0: rgb(255, 140, 0);
216
- --c-neutral-0-darken-3: #f08400;
217
- --c-neutral-0-darken-5: #e67e00;
218
- --c-neutral-0-darken-20: #995400;
219
- --c-neutral-0-darken-25: #804600;
220
- --c-neutral-0-darken-45: #1a0e00;
221
- --c-neutral-0-lighten-20: #ffba66;
222
- --c-neutral-1: rgb(236, 0, 140);
223
- --c-neutral-1-darken-3: #dd0083;
224
- --c-neutral-1-darken-5: #d3007d;
225
- --c-neutral-1-darken-20: #86004f;
226
- --c-neutral-1-darken-25: #6d0040;
227
- --c-neutral-1-darken-45: #070004;
228
- --c-neutral-1-lighten-20: #ff53b9;
229
- --c-neutral-2: rgb(104, 33, 122);
230
- --c-neutral-2-darken-3: #5e1e6e;
231
- --c-neutral-2-darken-5: #571c66;
232
- --c-neutral-2-darken-20: #240b2a;
233
- --c-neutral-2-darken-25: #120616;
234
- --c-neutral-2-darken-45: black;
235
- --c-neutral-2-lighten-20: #ac38c9;
236
- --c-neutral-3: rgb(0, 24, 143);
237
- --c-neutral-3-darken-3: #001580;
238
- --c-neutral-3-darken-5: #001476;
239
- --c-neutral-3-darken-20: #000729;
240
- --c-neutral-3-darken-25: #000310;
241
- --c-neutral-3-darken-45: black;
242
- --c-neutral-3-lighten-20: #0029f5;
243
- --c-neutral-4: rgb(0, 188, 242);
244
- --c-neutral-4-darken-3: #00b0e3;
245
- --c-neutral-4-darken-5: #00a8d9;
246
- --c-neutral-4-darken-20: #006d8c;
247
- --c-neutral-4-darken-25: #005973;
248
- --c-neutral-4-darken-45: #000a0d;
249
- --c-neutral-4-lighten-20: #59daff;
250
- --c-neutral-5: rgb(0, 178, 148);
251
- --c-neutral-5-darken-3: #00a387;
252
- --c-neutral-5-darken-5: #00997f;
253
- --c-neutral-5-darken-20: #004c3f;
254
- --c-neutral-5-darken-25: #00332a;
255
- --c-neutral-5-darken-45: black;
256
- --c-neutral-5-lighten-20: #19ffd8;
257
- --c-neutral-6: rgb(0, 158, 73);
258
- --c-neutral-6-darken-3: #008f42;
259
- --c-neutral-6-darken-5: #00853d;
260
- --c-neutral-6-darken-20: #00381a;
261
- --c-neutral-6-darken-25: #001f0e;
262
- --c-neutral-6-darken-45: black;
263
- --c-neutral-6-lighten-20: #05ff79;
264
- --c-c-body-bg: #fff;
265
- --c-c-body-bg-darken-3: #f7f7f7;
266
- --c-c-body-bg-darken-5: #f2f2f2;
267
- --c-c-body-bg-darken-20: #cccccc;
268
- --c-c-body-bg-darken-25: #bfbfbf;
269
- --c-c-body-bg-darken-45: #8c8c8c;
270
- --c-c-body-bg-lighten-20: white;
271
- --c-white: #fff;
272
- --c-black: #000;
273
- }
274
-
275
- :root {
276
- --s-0: 0;
277
- --s-1: 0.125rem;
278
- --s-2: 0.25rem;
279
- --s-3: 0.5rem;
280
- --s-4: 1rem;
281
- --s-5: 1.5rem;
282
- --s-6: 2rem;
283
- --s-7: 3rem;
284
- --s-8: 4rem;
285
- --s-9: 8rem;
286
- --t-func: cubic-bezier(0.12, 0.39, 0.5, 0.93);
287
- --t-duration: 0.25s;
288
- --fs-0: 0.75rem;
289
- --fs-1: 0.875rem;
290
- --fs-2: 1.125rem;
291
- --fs-3: 1.375rem;
292
- --fw-0: 400;
293
- --fw-1: 600;
294
- --fw-2: 700;
295
- --lh-0: 1.125rem;
296
- --lh-1: 1.3125rem;
297
- --lh-2: 1.625rem;
298
- }
299
-
300
- /*# sourceMappingURL=index.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/variables/_css-vars.scss","index.css"],"names":[],"mappings":"AASI;;EAQM,oBAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,+BAAA;EAIA,+BAAA;EAVA,kBAAA;EACA,2BAAA;EACA,2BAAA;EACA,4BAAA;EACA,4BAAA;EACA,4BAAA;EACA,6BAAA;EAIA,6BAAA;EAVA,oBAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,+BAAA;EAIA,+BAAA;EAVA,oBAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,4BAAA;EACA,+BAAA;EAIA,+BAAA;EAVA,mBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,+BAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,+BAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,+BAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,iCAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,iCAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,iCAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,iCAAA;EAVA,iBAAA;EAAA,eAAA;EAAA,eAAA;ACyEV;;ADpDI;EAOM,oBAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,6BAAA;EAIA,6BAAA;EAVA,kBAAA;EACA,2BAAA;EACA,2BAAA;EACA,4BAAA;EACA,4BAAA;EACA,4BAAA;EACA,2BAAA;EAIA,2BAAA;EAVA,oBAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,+BAAA;EAIA,+BAAA;EAVA,oBAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,+BAAA;EAIA,+BAAA;EAVA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,iCAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,iCAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,iCAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,iCAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,+BAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,+BAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,+BAAA;EANA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,iCAAA;EAVA,kBAAA;EAAA,eAAA;AC8IV;;ADjJI;EAOM,6BAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,+BAAA;EAIA,+BAAA;EAVA,2BAAA;EACA,2BAAA;EACA,2BAAA;EACA,4BAAA;EACA,4BAAA;EACA,4BAAA;EACA,6BAAA;EAIA,6BAAA;EAVA,6BAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,+BAAA;EAIA,+BAAA;EAVA,8BAAA;EACA,6BAAA;EACA,6BAAA;EACA,8BAAA;EACA,8BAAA;EACA,4BAAA;EACA,+BAAA;EAIA,+BAAA;EAVA,+BAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,iCAAA;EANA,+BAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,iCAAA;EANA,gCAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,8BAAA;EACA,iCAAA;EANA,8BAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,8BAAA;EACA,iCAAA;EANA,+BAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,iCAAA;EANA,+BAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,8BAAA;EACA,iCAAA;EANA,8BAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,8BAAA;EACA,iCAAA;EANA,mBAAA;EACA,+BAAA;EACA,+BAAA;EACA,gCAAA;EACA,gCAAA;EACA,gCAAA;EACA,+BAAA;EAVA,eAAA;EAAA,eAAA;AC2OV;;ADtNA;EAMI,QAAA;EAAA,eAAA;EAAA,cAAA;EAAA,aAAA;EAAA,WAAA;EAAA,aAAA;EAAA,WAAA;EAAA,WAAA;EAAA,WAAA;EAAA,WAAA;EAGF,6CAAA;EACA,mBAAA;EAME,eAAA;EAAA,gBAAA;EAAA,gBAAA;EAAA,gBAAA;EAOA,WAAA;EAAA,WAAA;EAAA,WAAA;EAOA,gBAAA;EAAA,iBAAA;EAAA,gBAAA;ACiNJ","file":"index.css"}
@@ -1 +0,0 @@
1
- :root,[data-theme=light]{--c-primary:#178ae7;--c-primary-darken-3:#1682d9;--c-primary-darken-5:#157cd0;--c-primary-darken-20:#0e538a;--c-primary-darken-25:#0b4573;--c-primary-darken-45:#020d16;--c-primary-lighten-20:#73b9f1;--c-primary-lighten-45:#e7f3fd;--c-error:#da1e28;--c-error-darken-3:#cd1c26;--c-error-darken-5:#c41b24;--c-error-darken-20:#801218;--c-error-darken-25:#6a0f13;--c-error-darken-45:#100203;--c-error-lighten-20:#ec7279;--c-error-lighten-45:#fbe2e4;--c-warning:#fcbc05;--c-warning-darken-3:#efb203;--c-warning-darken-5:#e5aa03;--c-warning-darken-20:#997202;--c-warning-darken-25:#805f02;--c-warning-darken-45:#1b1400;--c-warning-lighten-20:#fdd76a;--c-warning-lighten-45:#fff9e8;--c-success:#4ec00f;--c-success-darken-3:#48b20e;--c-success-darken-5:#44a80d;--c-success-darken-20:#286108;--c-success-darken-25:#1e4a06;--c-success-darken-45:black;--c-success-lighten-20:#82f045;--c-success-lighten-45:#d1fabb;--c-neutral-0:#fff;--c-neutral-0-darken-3:#f7f7f7;--c-neutral-0-darken-5:#f2f2f2;--c-neutral-0-darken-20:#cccccc;--c-neutral-0-darken-25:#bfbfbf;--c-neutral-0-darken-45:#8c8c8c;--c-neutral-0-lighten-20:white;--c-neutral-1:#f6f6f6;--c-neutral-1-darken-3:#eeeeee;--c-neutral-1-darken-5:#e9e9e9;--c-neutral-1-darken-20:#c3c3c3;--c-neutral-1-darken-25:#b6b6b6;--c-neutral-1-darken-45:#838383;--c-neutral-1-lighten-20:white;--c-neutral-2:#dfdfdf;--c-neutral-2-darken-3:#d7d7d7;--c-neutral-2-darken-5:#d2d2d2;--c-neutral-2-darken-20:#acacac;--c-neutral-2-darken-25:#9f9f9f;--c-neutral-2-darken-45:#6c6c6c;--c-neutral-2-lighten-20:white;--c-neutral-3:#c6c6c6;--c-neutral-3-darken-3:#bebebe;--c-neutral-3-darken-5:#b9b9b9;--c-neutral-3-darken-20:#939393;--c-neutral-3-darken-25:#868686;--c-neutral-3-darken-45:#535353;--c-neutral-3-lighten-20:#f9f9f9;--c-neutral-4:#91969d;--c-neutral-4-darken-3:#898e96;--c-neutral-4-darken-5:#848991;--c-neutral-4-darken-20:#5e636a;--c-neutral-4-darken-25:#52565c;--c-neutral-4-darken-45:#222426;--c-neutral-4-lighten-20:#c7c9cd;--c-neutral-5:#6c747d;--c-neutral-5-darken-3:#656c75;--c-neutral-5-darken-5:#60676f;--c-neutral-5-darken-20:#3d4146;--c-neutral-5-darken-25:#313539;--c-neutral-5-darken-45:#020202;--c-neutral-5-lighten-20:#a1a7ae;--c-neutral-6:#1e232b;--c-neutral-6-darken-3:#181c22;--c-neutral-6-darken-5:#14171c;--c-neutral-6-darken-20:black;--c-neutral-6-darken-25:black;--c-neutral-6-darken-45:black;--c-neutral-6-lighten-20:#485467;--c-body-bg:#fff;--c-white:#fff;--c-black:#000}[data-theme=dark]{--c-primary:#A4C8FF;--c-primary-darken-3:#95bfff;--c-primary-darken-5:#8bb9ff;--c-primary-darken-20:#3e8aff;--c-primary-darken-25:#257bff;--c-primary-darken-45:#004bbe;--c-primary-lighten-20:white;--c-primary-lighten-45:white;--c-error:#FFB4A9;--c-error-darken-3:#ffa79a;--c-error-darken-5:#ff9e90;--c-error-darken-20:#ff5b43;--c-error-darken-25:#ff452a;--c-error-darken-45:#c31900;--c-error-lighten-20:white;--c-error-lighten-45:white;--c-warning:#FBBC0C;--c-warning-darken-3:#f4b504;--c-warning-darken-5:#eaad04;--c-warning-darken-20:#9e7503;--c-warning-darken-25:#856302;--c-warning-darken-45:#211801;--c-warning-lighten-20:#fdd870;--c-warning-lighten-45:#fffaee;--c-success:#6CE036;--c-success-darken-3:#62de29;--c-success-darken-5:#5ddb22;--c-success-darken-20:#409818;--c-success-darken-25:#378214;--c-success-darken-45:#122a06;--c-success-lighten-20:#adee8e;--c-success-lighten-45:#fdfffd;--c-neutral-0:#1B1B1D;--c-neutral-0-darken-3:#141415;--c-neutral-0-darken-5:#0f0f10;--c-neutral-0-darken-20:black;--c-neutral-0-darken-25:black;--c-neutral-0-darken-45:black;--c-neutral-0-lighten-20:#4c4c52;--c-neutral-1:#222428;--c-neutral-1-darken-3:#1b1d20;--c-neutral-1-darken-5:#16181a;--c-neutral-1-darken-20:black;--c-neutral-1-darken-25:black;--c-neutral-1-darken-45:black;--c-neutral-1-lighten-20:#51565f;--c-neutral-2:#26292F;--c-neutral-2-darken-3:#1f2227;--c-neutral-2-darken-5:#1b1d21;--c-neutral-2-darken-20:black;--c-neutral-2-darken-25:black;--c-neutral-2-darken-45:black;--c-neutral-2-lighten-20:#545a67;--c-neutral-3:#2A2E36;--c-neutral-3-darken-3:#23272d;--c-neutral-3-darken-5:#1f2228;--c-neutral-3-darken-20:black;--c-neutral-3-darken-25:black;--c-neutral-3-darken-45:black;--c-neutral-3-lighten-20:#575f6f;--c-neutral-4:#E1EAF6;--c-neutral-4-darken-3:#d5e2f2;--c-neutral-4-darken-5:#cddcf0;--c-neutral-4-darken-20:#93b3de;--c-neutral-4-darken-25:#7fa5d9;--c-neutral-4-darken-45:#386fba;--c-neutral-4-lighten-20:white;--c-neutral-5:#DFE8F6;--c-neutral-5-darken-3:#d3dff3;--c-neutral-5-darken-5:#cbdaf0;--c-neutral-5-darken-20:#8fafe0;--c-neutral-5-darken-25:#7ba0da;--c-neutral-5-darken-45:#3569bb;--c-neutral-5-lighten-20:white;--c-neutral-6:#E3E2E6;--c-neutral-6-darken-3:#dbdadf;--c-neutral-6-darken-5:#d6d4da;--c-neutral-6-darken-20:#aeabb7;--c-neutral-6-darken-25:#a19eab;--c-neutral-6-darken-45:#6d697a;--c-neutral-6-lighten-20:white;--c-c-body-bg:#1B1B1D;--c-c-body-bg-darken-3:#141415;--c-c-body-bg-darken-5:#0f0f10;--c-c-body-bg-darken-20:black;--c-c-body-bg-darken-25:black;--c-c-body-bg-darken-45:black;--c-c-body-bg-lighten-20:#4c4c52;--c-white:#222428;--c-black:#fff}[data-theme=custom]{--c-primary:rgb(236, 0, 140);--c-primary-darken-3:#dd0083;--c-primary-darken-5:#d3007d;--c-primary-darken-20:#86004f;--c-primary-darken-25:#6d0040;--c-primary-darken-45:#070004;--c-primary-lighten-20:#ff53b9;--c-primary-lighten-45:#ffd3ed;--c-error:rgb(232, 17, 35);--c-error-darken-3:#da1021;--c-error-darken-5:#d00f1f;--c-error-darken-20:#890a15;--c-error-darken-25:#710811;--c-error-darken-45:#120103;--c-error-lighten-20:#f46b76;--c-error-lighten-45:#fde2e4;--c-warning:rgb(255, 241, 0);--c-warning-darken-3:#f0e300;--c-warning-darken-5:#e6d900;--c-warning-darken-20:#999100;--c-warning-darken-25:#807900;--c-warning-darken-45:#1a1800;--c-warning-lighten-20:#fff766;--c-warning-lighten-45:#fffee6;--c-success:rgb(186, 216, 10);--c-success-darken-3:#adc909;--c-success-darken-5:#a5c009;--c-success-darken-20:#667705;--c-success-darken-25:#515e04;--c-success-darken-45:black;--c-success-lighten-20:#dff751;--c-success-lighten-45:#f5fdcb;--c-neutral-0:rgb(255, 140, 0);--c-neutral-0-darken-3:#f08400;--c-neutral-0-darken-5:#e67e00;--c-neutral-0-darken-20:#995400;--c-neutral-0-darken-25:#804600;--c-neutral-0-darken-45:#1a0e00;--c-neutral-0-lighten-20:#ffba66;--c-neutral-1:rgb(236, 0, 140);--c-neutral-1-darken-3:#dd0083;--c-neutral-1-darken-5:#d3007d;--c-neutral-1-darken-20:#86004f;--c-neutral-1-darken-25:#6d0040;--c-neutral-1-darken-45:#070004;--c-neutral-1-lighten-20:#ff53b9;--c-neutral-2:rgb(104, 33, 122);--c-neutral-2-darken-3:#5e1e6e;--c-neutral-2-darken-5:#571c66;--c-neutral-2-darken-20:#240b2a;--c-neutral-2-darken-25:#120616;--c-neutral-2-darken-45:black;--c-neutral-2-lighten-20:#ac38c9;--c-neutral-3:rgb(0, 24, 143);--c-neutral-3-darken-3:#001580;--c-neutral-3-darken-5:#001476;--c-neutral-3-darken-20:#000729;--c-neutral-3-darken-25:#000310;--c-neutral-3-darken-45:black;--c-neutral-3-lighten-20:#0029f5;--c-neutral-4:rgb(0, 188, 242);--c-neutral-4-darken-3:#00b0e3;--c-neutral-4-darken-5:#00a8d9;--c-neutral-4-darken-20:#006d8c;--c-neutral-4-darken-25:#005973;--c-neutral-4-darken-45:#000a0d;--c-neutral-4-lighten-20:#59daff;--c-neutral-5:rgb(0, 178, 148);--c-neutral-5-darken-3:#00a387;--c-neutral-5-darken-5:#00997f;--c-neutral-5-darken-20:#004c3f;--c-neutral-5-darken-25:#00332a;--c-neutral-5-darken-45:black;--c-neutral-5-lighten-20:#19ffd8;--c-neutral-6:rgb(0, 158, 73);--c-neutral-6-darken-3:#008f42;--c-neutral-6-darken-5:#00853d;--c-neutral-6-darken-20:#00381a;--c-neutral-6-darken-25:#001f0e;--c-neutral-6-darken-45:black;--c-neutral-6-lighten-20:#05ff79;--c-c-body-bg:#fff;--c-c-body-bg-darken-3:#f7f7f7;--c-c-body-bg-darken-5:#f2f2f2;--c-c-body-bg-darken-20:#cccccc;--c-c-body-bg-darken-25:#bfbfbf;--c-c-body-bg-darken-45:#8c8c8c;--c-c-body-bg-lighten-20:white;--c-white:#fff;--c-black:#000}:root{--s-0:0;--s-1:0.125rem;--s-2:0.25rem;--s-3:0.5rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:8rem;--t-func:cubic-bezier(0.12, 0.39, 0.5, 0.93);--t-duration:0.25s;--fs-0:0.75rem;--fs-1:0.875rem;--fs-2:1.125rem;--fs-3:1.375rem;--fw-0:400;--fw-1:600;--fw-2:700;--lh-0:1.125rem;--lh-1:1.3125rem;--lh-2:1.625rem}
package/main.css DELETED
@@ -1,10 +0,0 @@
1
- @import "tailwindcss/base.css";
2
- @import "tailwindcss/components.css";
3
- @import "tailwindcss/utilities.css";
4
-
5
- @import "tokens-v3.css";
6
- @import "font.css";
7
-
8
- @import "base.layer.css";
9
-
10
- @import "dist/index.css";
package/src/global.scss DELETED
@@ -1,8 +0,0 @@
1
- @forward "variables/initial";
2
- @forward "variables/colors";
3
- @forward "variables/spacings";
4
- @forward "variables/typography";
5
- @forward "variables/z-index";
6
-
7
- // mixins and functions
8
- @forward "utils";
package/src/main.scss DELETED
@@ -1 +0,0 @@
1
- @forward "variables/css-vars";
@@ -1,19 +0,0 @@
1
- @keyframes spinAround {
2
- from {
3
- transform: rotate(0);
4
- }
5
-
6
- to {
7
- transform: rotate(359deg);
8
- }
9
- }
10
-
11
- @keyframes fade {
12
- from {
13
- opacity: 1;
14
- }
15
-
16
- to {
17
- opacity: 0;
18
- }
19
- }
@@ -1,33 +0,0 @@
1
- @function breakpoint($key: "sm") {
2
- @return map-get($breakpoints, $key);
3
- }
4
-
5
- @function breakpoint-next(
6
- $name,
7
- $breakpoints: $breakpoints,
8
- $breakpoint-names: map-keys($breakpoints)
9
- ) {
10
- $n: index($breakpoint-names, $name);
11
-
12
- @return if(
13
- $n != null and $n < length($breakpoint-names),
14
- nth($breakpoint-names, $n + 1),
15
- null
16
- );
17
- }
18
-
19
- @function breakpoint-min($name, $breakpoints: $breakpoints) {
20
- $min: map-get($breakpoints, $name);
21
-
22
- @return if($min != 0, $min, null);
23
- }
24
-
25
- @function breakpoint-max($name, $breakpoints: $breakpoints) {
26
- $next: breakpoint-next($name, $breakpoints);
27
-
28
- @return if($next, breakpoint-min($next, $breakpoints) - 0.02, null);
29
- }
30
-
31
- @function breakpoint-infix($name, $breakpoints: $breakpoints) {
32
- @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
33
- }
@@ -1,13 +0,0 @@
1
- @use "../../variables/tokens/design-tokens" as *;
2
- @use "sass:map";
3
-
4
- @function get-transition-func() {
5
- $value: map.get($design-tokens, transition, function);
6
- $defaultValue: cubic-bezier(0.12, 0.39, 0.5, 0.93);
7
-
8
- @if $value {
9
- @return $value;
10
- }
11
-
12
- @return $defaultValue;
13
- }
@@ -1,13 +0,0 @@
1
- @use "../../variables/tokens/design-tokens" as *;
2
- @use "sass:map";
3
-
4
- @function get-transition-time() {
5
- $value: map.get($design-tokens, transition, time);
6
- $defaultValue: 0.25s;
7
-
8
- @if $value {
9
- @return $value;
10
- }
11
-
12
- @return $defaultValue;
13
- }
@@ -1,9 +0,0 @@
1
- //Function to convert px value into rem
2
- //You can replace rem with any other value you want (rem is most preferred value for web)
3
- @use "sass:math";
4
-
5
- @function px-to-rem($target: 16, $context: 16) {
6
- @if $target == 0 { @return 0; }
7
-
8
- @return math.div($target, $context) * 1rem;
9
- }
@@ -1,4 +0,0 @@
1
- @forward "px-to-rem";
2
- @forward "get-transition-time";
3
- @forward "get-transition-func";
4
- @forward "breakpoint";
@@ -1,3 +0,0 @@
1
- @import "functions";
2
- @import "mixins";
3
- @import "animation";
@@ -1,7 +0,0 @@
1
- @mixin active {
2
- &:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly) {
3
- &:active {
4
- @content;
5
- }
6
- }
7
- }
@@ -1,13 +0,0 @@
1
- /**
2
- * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.
3
- * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/
4
- */
5
- $breakpoints: (
6
- "phone": 576px
7
- );
8
-
9
- @mixin mobile {
10
- @media only screen and (max-width: map-get($breakpoints, "phone")) {
11
- @content;
12
- }
13
- }
@@ -1,8 +0,0 @@
1
- @mixin disabled {
2
- &:disabled,
3
- &.is-disabled {
4
- cursor: not-allowed;
5
-
6
- @content;
7
- }
8
- }
@@ -1,7 +0,0 @@
1
- @mixin focus {
2
- &:not(:disabled):not(.is-readonly):not(.is-loading) {
3
- &:focus {
4
- @content;
5
- }
6
- }
7
- }
@@ -1,5 +0,0 @@
1
- @mixin has-error {
2
- &.has-error {
3
- @content;
4
- }
5
- }
@@ -1,17 +0,0 @@
1
- @mixin hover {
2
- @media (hover: hover) and (pointer: fine) {
3
- &:not(&.is-loading):not(&.is-disabled):not(&.is-readonly):not(&:disabled):not(&.is-focused):not(&:active) {
4
- &:hover {
5
- @content;
6
- }
7
- }
8
- }
9
-
10
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
11
- &:not(&.is-loading):not(&.is-disabled):not(&.is-readonly):not(&:disabled):not(&.is-focused):not(&:active) {
12
- &:hover {
13
- @content;
14
- }
15
- }
16
- }
17
- }
@@ -1,7 +0,0 @@
1
- @mixin loading {
2
- &.is-loading {
3
- cursor: progress;
4
-
5
- @content;
6
- }
7
- }
@@ -1,7 +0,0 @@
1
- @use "../../variables/initial" as *;
2
-
3
- @mixin transition($transition-props...) {
4
- transition-timing-function: $transition-function;
5
- transition-duration: $transition-duration;
6
- transition-property: $transition-props;
7
- }
@@ -1,8 +0,0 @@
1
- @forward "hover";
2
- @forward "active";
3
- @forward "focus";
4
- @forward "disabled";
5
- @forward "loading";
6
- @forward "breakpoints";
7
- @forward "has-error";
8
- @forward "transition";