@tale-ui/core 1.1.2
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/README.md +99 -0
- package/dist/style.css +4509 -0
- package/package.json +20 -0
- package/src/foundations/_base-elements.css +42 -0
- package/src/foundations/_text-utilities.css +73 -0
- package/src/foundations/_typography.css +188 -0
- package/src/index.css +38 -0
- package/src/layout/_centering.css +277 -0
- package/src/layout/_flex.css +98 -0
- package/src/layout/_gap.css +455 -0
- package/src/layout/_grid.css +1852 -0
- package/src/themes/_color-modes.css +165 -0
- package/src/themes/_color-themes.css +208 -0
- package/src/themes/_neutral-themes.css +198 -0
- package/src/tokens/_base.css +8 -0
- package/src/tokens/_colors.css +253 -0
- package/src/tokens/_effects.css +17 -0
- package/src/tokens/_neutrals.css +196 -0
- package/src/tokens/_spacing.css +19 -0
- package/src/tokens/_typography.css +87 -0
- package/src/utilities/_border.css +25 -0
- package/src/utilities/_display.css +75 -0
- package/src/utilities/_position.css +24 -0
- package/src/utilities/_sizing.css +27 -0
- package/src/utilities/_spacing.css +8 -0
- package/src/utilities/_visual.css +123 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
Z-Index Scale
|
|
3
|
+
============================================ */
|
|
4
|
+
.z--bottom { z-index: -1; }
|
|
5
|
+
.z--0 { z-index: 0; }
|
|
6
|
+
.z--10 { z-index: 10; }
|
|
7
|
+
.z--20 { z-index: 20; }
|
|
8
|
+
.z--30 { z-index: 30; }
|
|
9
|
+
.z--40 { z-index: 40; }
|
|
10
|
+
.z--50 { z-index: 50; }
|
|
11
|
+
.z--60 { z-index: 60; }
|
|
12
|
+
.z--70 { z-index: 70; }
|
|
13
|
+
.z--80 { z-index: 80; }
|
|
14
|
+
.z--90 { z-index: 90; }
|
|
15
|
+
.z--top { z-index: 9999; }
|
|
16
|
+
|
|
17
|
+
/* ============================================
|
|
18
|
+
Position Utilities
|
|
19
|
+
============================================ */
|
|
20
|
+
.relative { position: relative; }
|
|
21
|
+
.sticky {
|
|
22
|
+
position: sticky;
|
|
23
|
+
inset-block-start: var(--sticky-offset, 0);
|
|
24
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
Width Utilities
|
|
3
|
+
============================================ */
|
|
4
|
+
.width--10 { width: 10%; }
|
|
5
|
+
.width--20 { width: 20%; }
|
|
6
|
+
.width--25 { width: 25%; }
|
|
7
|
+
.width--30 { width: 30%; }
|
|
8
|
+
.width--33 { width: 33.333%; }
|
|
9
|
+
.width--40 { width: 40%; }
|
|
10
|
+
.width--50 { width: 50%; }
|
|
11
|
+
.width--60 { width: 60%; }
|
|
12
|
+
.width--66 { width: 66.666%; }
|
|
13
|
+
.width--70 { width: 70%; }
|
|
14
|
+
.width--75 { width: 75%; }
|
|
15
|
+
.width--80 { width: 80%; }
|
|
16
|
+
.width--90 { width: 90%; }
|
|
17
|
+
.width--100 { width: 100%; }
|
|
18
|
+
.width--auto { width: auto; }
|
|
19
|
+
|
|
20
|
+
/* ============================================
|
|
21
|
+
Height Utilities
|
|
22
|
+
============================================ */
|
|
23
|
+
.height--25 { min-height: 25vh; }
|
|
24
|
+
.height--50 { min-height: 50vh; }
|
|
25
|
+
.height--75 { min-height: 75vh; }
|
|
26
|
+
.height--100 { min-height: 100vh; }
|
|
27
|
+
.height--auto { height: auto; }
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
Section Padding Utilities
|
|
3
|
+
============================================ */
|
|
4
|
+
.padding--xs { padding-block: var(--section-space-xs); }
|
|
5
|
+
.padding--s { padding-block: var(--section-space-s); }
|
|
6
|
+
.padding--m { padding-block: var(--section-space-m); }
|
|
7
|
+
.padding--l { padding-block: var(--section-space-l); }
|
|
8
|
+
.padding--xl { padding-block: var(--section-space-xl); }
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
.radius--xs {
|
|
2
|
+
border-radius: var(--radius-xs);
|
|
3
|
+
}
|
|
4
|
+
.radius--s {
|
|
5
|
+
border-radius: var(--radius-s);
|
|
6
|
+
}
|
|
7
|
+
.radius--m {
|
|
8
|
+
border-radius: var(--radius-m);
|
|
9
|
+
}
|
|
10
|
+
.radius--l {
|
|
11
|
+
border-radius: var(--radius-l);
|
|
12
|
+
}
|
|
13
|
+
.radius--xl {
|
|
14
|
+
border-radius: var(--radius-xl);
|
|
15
|
+
}
|
|
16
|
+
.radius--2xl {
|
|
17
|
+
border-radius: var(--radius-2xl);
|
|
18
|
+
}
|
|
19
|
+
.radius--full {
|
|
20
|
+
border-radius: var(--radius-full);
|
|
21
|
+
}
|
|
22
|
+
.shadow--xs {
|
|
23
|
+
box-shadow: var(--shadow-xs);
|
|
24
|
+
}
|
|
25
|
+
.shadow--s {
|
|
26
|
+
box-shadow: var(--shadow-s);
|
|
27
|
+
}
|
|
28
|
+
.shadow--m {
|
|
29
|
+
box-shadow: var(--shadow-m);
|
|
30
|
+
}
|
|
31
|
+
.shadow--l {
|
|
32
|
+
box-shadow: var(--shadow-l);
|
|
33
|
+
}
|
|
34
|
+
.shadow--xl {
|
|
35
|
+
box-shadow: var(--shadow-xl);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ============================================
|
|
39
|
+
Aspect Ratio Utilities
|
|
40
|
+
============================================ */
|
|
41
|
+
[class*="aspect--"] {
|
|
42
|
+
aspect-ratio: var(--aspect-ratio);
|
|
43
|
+
}
|
|
44
|
+
img[class*="aspect--"],
|
|
45
|
+
video[class*="aspect--"] {
|
|
46
|
+
object-fit: var(--object-fit, cover);
|
|
47
|
+
width: 100%;
|
|
48
|
+
height: 100%;
|
|
49
|
+
}
|
|
50
|
+
.aspect--1-1 { --aspect-ratio: 1 / 1; }
|
|
51
|
+
.aspect--2-1 { --aspect-ratio: 2 / 1; }
|
|
52
|
+
.aspect--1-2 { --aspect-ratio: 1 / 2; }
|
|
53
|
+
.aspect--3-2 { --aspect-ratio: 3 / 2; }
|
|
54
|
+
.aspect--2-3 { --aspect-ratio: 2 / 3; }
|
|
55
|
+
.aspect--4-3 { --aspect-ratio: 4 / 3; }
|
|
56
|
+
.aspect--3-4 { --aspect-ratio: 3 / 4; }
|
|
57
|
+
.aspect--16-9 { --aspect-ratio: 16 / 9; }
|
|
58
|
+
.aspect--9-16 { --aspect-ratio: 9 / 16; }
|
|
59
|
+
.aspect--21-9 { --aspect-ratio: 21 / 9; }
|
|
60
|
+
|
|
61
|
+
/* ============================================
|
|
62
|
+
Object-Fit Utilities
|
|
63
|
+
============================================ */
|
|
64
|
+
.object-fit--cover { object-fit: cover; }
|
|
65
|
+
.object-fit--contain { object-fit: contain; }
|
|
66
|
+
.object-fit--fill { object-fit: fill; }
|
|
67
|
+
.object-fit--none { object-fit: none; }
|
|
68
|
+
.object-fit--top-left { object-position: top left; }
|
|
69
|
+
.object-fit--top-center { object-position: top center; }
|
|
70
|
+
.object-fit--top-right { object-position: top right; }
|
|
71
|
+
.object-fit--center-left { object-position: center left; }
|
|
72
|
+
.object-fit--center { object-position: center center; }
|
|
73
|
+
.object-fit--center-right { object-position: center right; }
|
|
74
|
+
.object-fit--bottom-left { object-position: bottom left; }
|
|
75
|
+
.object-fit--bottom-center { object-position: bottom center; }
|
|
76
|
+
.object-fit--bottom-right { object-position: bottom right; }
|
|
77
|
+
|
|
78
|
+
/* ============================================
|
|
79
|
+
Line Clamp / Text Truncation
|
|
80
|
+
============================================ */
|
|
81
|
+
.line-clamp--1 {
|
|
82
|
+
display: -webkit-box;
|
|
83
|
+
-webkit-line-clamp: 1;
|
|
84
|
+
-webkit-box-orient: vertical;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
}
|
|
87
|
+
.line-clamp--2 {
|
|
88
|
+
display: -webkit-box;
|
|
89
|
+
-webkit-line-clamp: 2;
|
|
90
|
+
-webkit-box-orient: vertical;
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
}
|
|
93
|
+
.line-clamp--3 {
|
|
94
|
+
display: -webkit-box;
|
|
95
|
+
-webkit-line-clamp: 3;
|
|
96
|
+
-webkit-box-orient: vertical;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
}
|
|
99
|
+
.line-clamp--4 {
|
|
100
|
+
display: -webkit-box;
|
|
101
|
+
-webkit-line-clamp: 4;
|
|
102
|
+
-webkit-box-orient: vertical;
|
|
103
|
+
overflow: hidden;
|
|
104
|
+
}
|
|
105
|
+
.line-clamp--5 {
|
|
106
|
+
display: -webkit-box;
|
|
107
|
+
-webkit-line-clamp: 5;
|
|
108
|
+
-webkit-box-orient: vertical;
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* ============================================
|
|
113
|
+
Opacity Utilities
|
|
114
|
+
============================================ */
|
|
115
|
+
.opacity--0 { opacity: 0; }
|
|
116
|
+
.opacity--5 { opacity: 0.05; }
|
|
117
|
+
.opacity--10 { opacity: 0.1; }
|
|
118
|
+
.opacity--25 { opacity: 0.25; }
|
|
119
|
+
.opacity--50 { opacity: 0.5; }
|
|
120
|
+
.opacity--75 { opacity: 0.75; }
|
|
121
|
+
.opacity--90 { opacity: 0.9; }
|
|
122
|
+
.opacity--95 { opacity: 0.95; }
|
|
123
|
+
.opacity--100 { opacity: 1; }
|