@vkzstudio/muza-ui 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE_CONSUMER.md +238 -238
- package/README.md +168 -168
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +53 -53
- package/dist/components/ExpandableTable/ExpandableTable.d.ts.map +1 -1
- package/dist/components/ExpandableTable/ExpandableTable.js +162 -157
- package/dist/components/ExpandableTable/Table.d.ts +4 -1
- package/dist/components/ExpandableTable/Table.d.ts.map +1 -1
- package/dist/components/ExpandableTable/Table.js +82 -78
- package/dist/components/Lightbox/LightboxOverrides.css +5 -5
- package/dist/components/Loader/Loader.js +6 -6
- package/dist/fonts/Objectivity/OFL.txt +92 -92
- package/dist/globals.css +12 -12
- package/dist/muza-ui.css +1 -1
- package/dist/styles/3rd-parties.css +5 -5
- package/dist/styles/animations.css +41 -41
- package/dist/styles/breakpoints.css +4 -4
- package/dist/styles/primitives.css +155 -155
- package/dist/styles/token-colors.css +1201 -1201
- package/dist/styles/token-sizes.css +676 -676
- package/dist/styles/typography.css +84 -84
- package/dist/styles/utilities.css +66 -66
- package/dist/styles/white-label.css +25 -25
- package/package.json +1 -1
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
/* width >= 1024px */
|
|
2
|
-
@theme {
|
|
3
|
-
--font-heading: Objectivity;
|
|
4
|
-
--font-text: Objectivity;
|
|
5
|
-
--font-cta: Objectivity;
|
|
6
|
-
--paragraph-spacing-12: 12px;
|
|
7
|
-
--text-2xs: 12px;
|
|
8
|
-
--text-input: 14px;
|
|
9
|
-
--text-xs: 14px;
|
|
10
|
-
--text-sm: 16px;
|
|
11
|
-
--text-md: 18px;
|
|
12
|
-
--text-lg: 20px;
|
|
13
|
-
--text-xl: 24px;
|
|
14
|
-
--text-2xl: 32px;
|
|
15
|
-
--text-3xl: 40px;
|
|
16
|
-
--text-4xl: 48px;
|
|
17
|
-
--text-5xl: 56px;
|
|
18
|
-
--text-6xl: 64px;
|
|
19
|
-
--text-7xl: 72px;
|
|
20
|
-
--font-weight-light: 300;
|
|
21
|
-
--font-weight-regular: 400;
|
|
22
|
-
--font-weight-medium: 500;
|
|
23
|
-
--font-weight-bold: 700;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/* max 1024px */
|
|
27
|
-
@media (width < 64rem) {
|
|
28
|
-
:root {
|
|
29
|
-
--paragraph-spacing-12: 12px;
|
|
30
|
-
--text-2xs: 12px;
|
|
31
|
-
--text-xs: 14px;
|
|
32
|
-
--text-input: 16px;
|
|
33
|
-
--text-sm: 16px;
|
|
34
|
-
--text-md: 18px;
|
|
35
|
-
--text-lg: 20px;
|
|
36
|
-
--text-xl: 22px;
|
|
37
|
-
--text-2xl: 28px;
|
|
38
|
-
--text-3xl: 32px;
|
|
39
|
-
--text-4xl: 40px;
|
|
40
|
-
--text-5xl: 48px;
|
|
41
|
-
--text-6xl: 56px;
|
|
42
|
-
--text-7xl: 64px;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/* max 768px */
|
|
47
|
-
@media (width < 48rem) {
|
|
48
|
-
:root {
|
|
49
|
-
--paragraph-spacing-12: 12px;
|
|
50
|
-
--text-2xs: 12px;
|
|
51
|
-
--text-xs: 14px;
|
|
52
|
-
--text-input: 16px;
|
|
53
|
-
--text-sm: 16px;
|
|
54
|
-
--text-md: 18px;
|
|
55
|
-
--text-lg: 20px;
|
|
56
|
-
--text-xl: 20px;
|
|
57
|
-
--text-2xl: 24px;
|
|
58
|
-
--text-3xl: 28px;
|
|
59
|
-
--text-4xl: 32px;
|
|
60
|
-
--text-5xl: 40px;
|
|
61
|
-
--text-6xl: 48px;
|
|
62
|
-
--text-7xl: 56px;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* min 1600px */
|
|
67
|
-
@media (width >= 100rem) {
|
|
68
|
-
:root {
|
|
69
|
-
--paragraph-spacing-12: 12px;
|
|
70
|
-
--text-2xs: 12px;
|
|
71
|
-
--text-input: 14px;
|
|
72
|
-
--text-xs: 14px;
|
|
73
|
-
--text-sm: 16px;
|
|
74
|
-
--text-md: 18px;
|
|
75
|
-
--text-lg: 20px;
|
|
76
|
-
--text-xl: 24px;
|
|
77
|
-
--text-2xl: 32px;
|
|
78
|
-
--text-3xl: 40px;
|
|
79
|
-
--text-4xl: 48px;
|
|
80
|
-
--text-5xl: 56px;
|
|
81
|
-
--text-6xl: 64px;
|
|
82
|
-
--text-7xl: 72px;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
1
|
+
/* width >= 1024px */
|
|
2
|
+
@theme {
|
|
3
|
+
--font-heading: Objectivity;
|
|
4
|
+
--font-text: Objectivity;
|
|
5
|
+
--font-cta: Objectivity;
|
|
6
|
+
--paragraph-spacing-12: 12px;
|
|
7
|
+
--text-2xs: 12px;
|
|
8
|
+
--text-input: 14px;
|
|
9
|
+
--text-xs: 14px;
|
|
10
|
+
--text-sm: 16px;
|
|
11
|
+
--text-md: 18px;
|
|
12
|
+
--text-lg: 20px;
|
|
13
|
+
--text-xl: 24px;
|
|
14
|
+
--text-2xl: 32px;
|
|
15
|
+
--text-3xl: 40px;
|
|
16
|
+
--text-4xl: 48px;
|
|
17
|
+
--text-5xl: 56px;
|
|
18
|
+
--text-6xl: 64px;
|
|
19
|
+
--text-7xl: 72px;
|
|
20
|
+
--font-weight-light: 300;
|
|
21
|
+
--font-weight-regular: 400;
|
|
22
|
+
--font-weight-medium: 500;
|
|
23
|
+
--font-weight-bold: 700;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* max 1024px */
|
|
27
|
+
@media (width < 64rem) {
|
|
28
|
+
:root {
|
|
29
|
+
--paragraph-spacing-12: 12px;
|
|
30
|
+
--text-2xs: 12px;
|
|
31
|
+
--text-xs: 14px;
|
|
32
|
+
--text-input: 16px;
|
|
33
|
+
--text-sm: 16px;
|
|
34
|
+
--text-md: 18px;
|
|
35
|
+
--text-lg: 20px;
|
|
36
|
+
--text-xl: 22px;
|
|
37
|
+
--text-2xl: 28px;
|
|
38
|
+
--text-3xl: 32px;
|
|
39
|
+
--text-4xl: 40px;
|
|
40
|
+
--text-5xl: 48px;
|
|
41
|
+
--text-6xl: 56px;
|
|
42
|
+
--text-7xl: 64px;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* max 768px */
|
|
47
|
+
@media (width < 48rem) {
|
|
48
|
+
:root {
|
|
49
|
+
--paragraph-spacing-12: 12px;
|
|
50
|
+
--text-2xs: 12px;
|
|
51
|
+
--text-xs: 14px;
|
|
52
|
+
--text-input: 16px;
|
|
53
|
+
--text-sm: 16px;
|
|
54
|
+
--text-md: 18px;
|
|
55
|
+
--text-lg: 20px;
|
|
56
|
+
--text-xl: 20px;
|
|
57
|
+
--text-2xl: 24px;
|
|
58
|
+
--text-3xl: 28px;
|
|
59
|
+
--text-4xl: 32px;
|
|
60
|
+
--text-5xl: 40px;
|
|
61
|
+
--text-6xl: 48px;
|
|
62
|
+
--text-7xl: 56px;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* min 1600px */
|
|
67
|
+
@media (width >= 100rem) {
|
|
68
|
+
:root {
|
|
69
|
+
--paragraph-spacing-12: 12px;
|
|
70
|
+
--text-2xs: 12px;
|
|
71
|
+
--text-input: 14px;
|
|
72
|
+
--text-xs: 14px;
|
|
73
|
+
--text-sm: 16px;
|
|
74
|
+
--text-md: 18px;
|
|
75
|
+
--text-lg: 20px;
|
|
76
|
+
--text-xl: 24px;
|
|
77
|
+
--text-2xl: 32px;
|
|
78
|
+
--text-3xl: 40px;
|
|
79
|
+
--text-4xl: 48px;
|
|
80
|
+
--text-5xl: 56px;
|
|
81
|
+
--text-6xl: 64px;
|
|
82
|
+
--text-7xl: 72px;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
@utility fix-y-text {
|
|
2
|
-
/* Default value for >14px font size */
|
|
3
|
-
transform: translateY(0.125em);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
@utility fix-y-text-* {
|
|
7
|
-
/* Custom value */
|
|
8
|
-
/* Use 2 for >14px font size */
|
|
9
|
-
/* Use 1 for <=14px font size */
|
|
10
|
-
transform: translateY(calc(--value(integer) * 0.0625em));
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@utility focus-visible-auto {
|
|
14
|
-
@apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@utility focus-visible-default {
|
|
18
|
-
@apply focus-visible:ring-2 focus-visible:ring-stroke-focus-outline-def focus-visible:ring-offset-2 focus-visible:outline-none;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@utility focus-visible-* {
|
|
22
|
-
@apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none;
|
|
23
|
-
|
|
24
|
-
&:focus-visible {
|
|
25
|
-
--tw-ring-color: --value(--color-*);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@utility focus-within-auto {
|
|
30
|
-
@apply focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@utility focus-within-default {
|
|
34
|
-
@apply focus-within:ring-2 focus-within:ring-stroke-focus-outline-def focus-within:ring-offset-2 focus-within:outline-none;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@utility focus-within-* {
|
|
38
|
-
@apply focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none;
|
|
39
|
-
|
|
40
|
-
&:focus-within {
|
|
41
|
-
--tw-ring-color: --value(--color-*);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@utility focus-auto {
|
|
46
|
-
@apply focus:ring-2 focus:ring-offset-2 focus:outline-none;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
@utility focus-default {
|
|
50
|
-
@apply focus:ring-2 focus:ring-stroke-focus-outline-def focus:ring-offset-2 focus:outline-none;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
@utility focus-* {
|
|
54
|
-
@apply focus:ring-2 focus:ring-offset-2 focus:outline-none;
|
|
55
|
-
|
|
56
|
-
&:focus-visible {
|
|
57
|
-
--tw-ring-color: --value(--color-*);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
@utility dropdown-shadow-default {
|
|
62
|
-
box-shadow: 0 8px 32px 0 rgba(59, 18, 107, 0.2);
|
|
63
|
-
/* Box shadow seems to have better performance on safari and since the cards in dropdowns are not transparent should work as intended */
|
|
64
|
-
/* transform: translateZ(0);
|
|
65
|
-
filter: drop-shadow(0px 8px 16px rgba(59, 18, 107, 0.2)); */
|
|
66
|
-
}
|
|
1
|
+
@utility fix-y-text {
|
|
2
|
+
/* Default value for >14px font size */
|
|
3
|
+
transform: translateY(0.125em);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@utility fix-y-text-* {
|
|
7
|
+
/* Custom value */
|
|
8
|
+
/* Use 2 for >14px font size */
|
|
9
|
+
/* Use 1 for <=14px font size */
|
|
10
|
+
transform: translateY(calc(--value(integer) * 0.0625em));
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@utility focus-visible-auto {
|
|
14
|
+
@apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@utility focus-visible-default {
|
|
18
|
+
@apply focus-visible:ring-2 focus-visible:ring-stroke-focus-outline-def focus-visible:ring-offset-2 focus-visible:outline-none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@utility focus-visible-* {
|
|
22
|
+
@apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none;
|
|
23
|
+
|
|
24
|
+
&:focus-visible {
|
|
25
|
+
--tw-ring-color: --value(--color-*);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@utility focus-within-auto {
|
|
30
|
+
@apply focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@utility focus-within-default {
|
|
34
|
+
@apply focus-within:ring-2 focus-within:ring-stroke-focus-outline-def focus-within:ring-offset-2 focus-within:outline-none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@utility focus-within-* {
|
|
38
|
+
@apply focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none;
|
|
39
|
+
|
|
40
|
+
&:focus-within {
|
|
41
|
+
--tw-ring-color: --value(--color-*);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@utility focus-auto {
|
|
46
|
+
@apply focus:ring-2 focus:ring-offset-2 focus:outline-none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@utility focus-default {
|
|
50
|
+
@apply focus:ring-2 focus:ring-stroke-focus-outline-def focus:ring-offset-2 focus:outline-none;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@utility focus-* {
|
|
54
|
+
@apply focus:ring-2 focus:ring-offset-2 focus:outline-none;
|
|
55
|
+
|
|
56
|
+
&:focus-visible {
|
|
57
|
+
--tw-ring-color: --value(--color-*);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@utility dropdown-shadow-default {
|
|
62
|
+
box-shadow: 0 8px 32px 0 rgba(59, 18, 107, 0.2);
|
|
63
|
+
/* Box shadow seems to have better performance on safari and since the cards in dropdowns are not transparent should work as intended */
|
|
64
|
+
/* transform: translateZ(0);
|
|
65
|
+
filter: drop-shadow(0px 8px 16px rgba(59, 18, 107, 0.2)); */
|
|
66
|
+
}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
@theme static {
|
|
2
|
-
/* color */
|
|
3
|
-
--brand-12: var(--color-transparent-brand-12);
|
|
4
|
-
--brand-15: var(--color-transparent-brand-15);
|
|
5
|
-
--brand-8: var(--color-transparent-brand-8);
|
|
6
|
-
--brand-disabled: var(--color-purple-200);
|
|
7
|
-
--brand-focused: var(--color-purple-700);
|
|
8
|
-
--brand-hover: var(--color-purple-600);
|
|
9
|
-
--brand-primary: var(--color-purple-500);
|
|
10
|
-
--brand-quaternary: var(--color-purple-400);
|
|
11
|
-
--brand-secondary: var(--color-purple-300);
|
|
12
|
-
--brand-tertiary: var(--color-purple-100);
|
|
13
|
-
--brand-white: var(--color-neutral-off-white);
|
|
14
|
-
--gray-100: var(--color-gray-100);
|
|
15
|
-
--gray-1000: var(--color-gray-1000);
|
|
16
|
-
--gray-200: var(--color-gray-200);
|
|
17
|
-
--gray-300: var(--color-gray-300);
|
|
18
|
-
--gray-400: var(--color-gray-400);
|
|
19
|
-
--gray-50: var(--color-gray-50);
|
|
20
|
-
--gray-500: var(--color-gray-500);
|
|
21
|
-
--gray-600: var(--color-gray-600);
|
|
22
|
-
--gray-700: var(--color-gray-700);
|
|
23
|
-
--gray-800: var(--color-gray-800);
|
|
24
|
-
--gray-900: var(--color-gray-900);
|
|
25
|
-
}
|
|
1
|
+
@theme static {
|
|
2
|
+
/* color */
|
|
3
|
+
--brand-12: var(--color-transparent-brand-12);
|
|
4
|
+
--brand-15: var(--color-transparent-brand-15);
|
|
5
|
+
--brand-8: var(--color-transparent-brand-8);
|
|
6
|
+
--brand-disabled: var(--color-purple-200);
|
|
7
|
+
--brand-focused: var(--color-purple-700);
|
|
8
|
+
--brand-hover: var(--color-purple-600);
|
|
9
|
+
--brand-primary: var(--color-purple-500);
|
|
10
|
+
--brand-quaternary: var(--color-purple-400);
|
|
11
|
+
--brand-secondary: var(--color-purple-300);
|
|
12
|
+
--brand-tertiary: var(--color-purple-100);
|
|
13
|
+
--brand-white: var(--color-neutral-off-white);
|
|
14
|
+
--gray-100: var(--color-gray-100);
|
|
15
|
+
--gray-1000: var(--color-gray-1000);
|
|
16
|
+
--gray-200: var(--color-gray-200);
|
|
17
|
+
--gray-300: var(--color-gray-300);
|
|
18
|
+
--gray-400: var(--color-gray-400);
|
|
19
|
+
--gray-50: var(--color-gray-50);
|
|
20
|
+
--gray-500: var(--color-gray-500);
|
|
21
|
+
--gray-600: var(--color-gray-600);
|
|
22
|
+
--gray-700: var(--color-gray-700);
|
|
23
|
+
--gray-800: var(--color-gray-800);
|
|
24
|
+
--gray-900: var(--color-gray-900);
|
|
25
|
+
}
|