@tale-ui/core 1.1.5 → 1.1.6
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 +1 -1
- package/dist/style.css +58 -19
- package/package.json +1 -1
- package/src/foundations/_typography.css +7 -4
- package/src/index.css +5 -2
- package/src/tokens/_spacing.css +20 -1
- package/src/tokens/_typography.css +31 -14
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ npm install @tale-ui/core
|
|
|
39
39
|
<!-- Fonts -->
|
|
40
40
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
41
41
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
42
|
-
<link href="https://fonts.googleapis.com/css2?family=
|
|
42
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet" />
|
|
43
43
|
|
|
44
44
|
<!-- Design System -->
|
|
45
45
|
<link rel="stylesheet" href="node_modules/@tale-ui/core/dist/style.css" />
|
package/dist/style.css
CHANGED
|
@@ -17,6 +17,26 @@ html {
|
|
|
17
17
|
tokens/_spacing.css
|
|
18
18
|
============================================ */
|
|
19
19
|
:root {
|
|
20
|
+
--space-4xs: 0.52rem;
|
|
21
|
+
--space-3xs: 0.70rem;
|
|
22
|
+
--space-2xs: 0.99rem;
|
|
23
|
+
--space-xs: 1.40rem;
|
|
24
|
+
--space-s: 1.98rem;
|
|
25
|
+
--space-m: 2.80rem;
|
|
26
|
+
--space-l: 3.96rem;
|
|
27
|
+
--space-xl: 5.60rem;
|
|
28
|
+
--space-2xl: 7.92rem;
|
|
29
|
+
--space-3xl: 11.19rem;
|
|
30
|
+
--space-4xl: 15.83rem;
|
|
31
|
+
/* Section Spacing (larger scale for vertical rhythm between page sections) */
|
|
32
|
+
--section-space-xs: 3.96rem;
|
|
33
|
+
--section-space-s: 7.92rem;
|
|
34
|
+
--section-space-m: 11.19rem;
|
|
35
|
+
--section-space-l: 15.83rem;
|
|
36
|
+
--section-space-xl: 22.37rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.responsive {
|
|
20
40
|
--space-4xs: clamp(0.52rem, calc(-0.03vw + 0.54rem), 0.49rem);
|
|
21
41
|
--space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
|
|
22
42
|
--space-2xs: clamp(0.82rem, calc(0.15vw + 0.75rem), 0.99rem);
|
|
@@ -28,7 +48,6 @@ html {
|
|
|
28
48
|
--space-2xl: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
|
|
29
49
|
--space-3xl: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
|
|
30
50
|
--space-4xl: clamp(4.88rem, calc(9.77vw + 0.19rem), 15.83rem);
|
|
31
|
-
/* Section Spacing (larger scale for vertical rhythm between page sections) */
|
|
32
51
|
--section-space-xs: clamp(2rem, calc(1.75vw + 1.16rem), 3.96rem);
|
|
33
52
|
--section-space-s: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
|
|
34
53
|
--section-space-m: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
|
|
@@ -40,23 +59,24 @@ html {
|
|
|
40
59
|
tokens/_typography.css
|
|
41
60
|
============================================ */
|
|
42
61
|
:root {
|
|
43
|
-
--text-xs:
|
|
44
|
-
--text-s:
|
|
45
|
-
--text-m:
|
|
46
|
-
--text-l:
|
|
47
|
-
--text-xl:
|
|
48
|
-
--text-2xl:
|
|
49
|
-
--text-3xl:
|
|
50
|
-
--text-4xl:
|
|
51
|
-
--text-5xl:
|
|
52
|
-
--text-6xl:
|
|
53
|
-
--text-7xl:
|
|
54
|
-
--text-8xl:
|
|
62
|
+
--text-xs: 1.23rem;
|
|
63
|
+
--text-s: 1.33rem;
|
|
64
|
+
--text-m: 1.60rem;
|
|
65
|
+
--text-l: 1.92rem;
|
|
66
|
+
--text-xl: 2.19rem;
|
|
67
|
+
--text-2xl: 2.46rem;
|
|
68
|
+
--text-3xl: 2.73rem;
|
|
69
|
+
--text-4xl: 3.0rem;
|
|
70
|
+
--text-5xl: 3.4rem;
|
|
71
|
+
--text-6xl: 3.8rem;
|
|
72
|
+
--text-7xl: 4.1rem;
|
|
73
|
+
--text-8xl: 4.5rem;
|
|
55
74
|
--display-color: var(--neutral-90);
|
|
56
75
|
--text-color: var(--neutral-90);
|
|
57
76
|
--mono-color: var(--neutral-90);
|
|
58
|
-
--display-font: "
|
|
59
|
-
--body-font: "
|
|
77
|
+
--display-font: "Inter", sans-serif;
|
|
78
|
+
--body-font: "Inter", sans-serif;
|
|
79
|
+
--expressive-font: "Playfair Display", serif;
|
|
60
80
|
--mono-font: "Roboto Mono", monospace;
|
|
61
81
|
--display-font-family: var(--display-font);
|
|
62
82
|
--heading-font-family: var(--display-font);
|
|
@@ -64,6 +84,7 @@ html {
|
|
|
64
84
|
--label-font-family: var(--body-font);
|
|
65
85
|
--text-font-family: var(--body-font);
|
|
66
86
|
--mono-font-family: var(--mono-font);
|
|
87
|
+
--expressive-font-family: var(--expressive-font);
|
|
67
88
|
--display-l-font-size: var(--text-7xl);
|
|
68
89
|
--display-m-font-size: var(--text-6xl);
|
|
69
90
|
--display-s-font-size: var(--text-5xl);
|
|
@@ -127,6 +148,21 @@ html {
|
|
|
127
148
|
--grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
|
|
128
149
|
}
|
|
129
150
|
|
|
151
|
+
.responsive {
|
|
152
|
+
--text-xs: clamp(1.23rem, calc(-0.11vw + 1.28rem), 1.11rem);
|
|
153
|
+
--text-s: clamp(1.31rem, calc(0.02vw + 1.3rem), 1.33rem);
|
|
154
|
+
--text-m: clamp(1.4rem, calc(0.18vw + 1.31rem), 1.6rem);
|
|
155
|
+
--text-l: clamp(1.49rem, calc(0.38vw + 1.31rem), 1.92rem);
|
|
156
|
+
--text-xl: clamp(1.59rem, calc(0.64vw + 1.17rem), 2.19rem);
|
|
157
|
+
--text-2xl: clamp(1.70rem, calc(0.89vw + 1.04rem), 2.46rem);
|
|
158
|
+
--text-3xl: clamp(1.81rem, calc(1.15vw + 0.89rem), 2.73rem);
|
|
159
|
+
--text-4xl: clamp(2.43rem, calc(1.40vw + 0.76rem), 3.0rem);
|
|
160
|
+
--text-5xl: clamp(2.59rem, calc(2.05vw + 0.12rem), 3.4rem);
|
|
161
|
+
--text-6xl: clamp(2.75rem, calc(2.70vw - 0.52rem), 3.8rem);
|
|
162
|
+
--text-7xl: clamp(2.94rem, calc(3.35vw - 1.26rem), 4.1rem);
|
|
163
|
+
--text-8xl: clamp(3.14rem, calc(4.00vw - 1.90rem), 4.5rem);
|
|
164
|
+
}
|
|
165
|
+
|
|
130
166
|
/* ============================================
|
|
131
167
|
tokens/_colors.css
|
|
132
168
|
============================================ */
|
|
@@ -784,16 +820,19 @@ body {
|
|
|
784
820
|
line-height: var(--mono-line-height);
|
|
785
821
|
letter-spacing: var(--mono-letter-spacing);
|
|
786
822
|
}
|
|
787
|
-
.
|
|
823
|
+
.text--expressive {
|
|
824
|
+
font-family: var(--expressive-font-family);
|
|
825
|
+
}
|
|
826
|
+
:where(h1, h2, h3, h4, h5, h6) {
|
|
788
827
|
color: var(--display-color);
|
|
789
828
|
}
|
|
790
|
-
|
|
829
|
+
:where(p, span) {
|
|
791
830
|
color: var(--text-color);
|
|
792
831
|
}
|
|
793
|
-
|
|
832
|
+
:where(pre) {
|
|
794
833
|
color: var(--mono-color);
|
|
795
834
|
}
|
|
796
|
-
body
|
|
835
|
+
body{
|
|
797
836
|
color: var(--text-color);
|
|
798
837
|
}
|
|
799
838
|
|
package/package.json
CHANGED
|
@@ -174,15 +174,18 @@ body {
|
|
|
174
174
|
line-height: var(--mono-line-height);
|
|
175
175
|
letter-spacing: var(--mono-letter-spacing);
|
|
176
176
|
}
|
|
177
|
-
.
|
|
177
|
+
.text--expressive {
|
|
178
|
+
font-family: var(--expressive-font-family);
|
|
179
|
+
}
|
|
180
|
+
:where(h1, h2, h3, h4, h5, h6) {
|
|
178
181
|
color: var(--display-color);
|
|
179
182
|
}
|
|
180
|
-
|
|
183
|
+
:where(p, span) {
|
|
181
184
|
color: var(--text-color);
|
|
182
185
|
}
|
|
183
|
-
|
|
186
|
+
:where(pre) {
|
|
184
187
|
color: var(--mono-color);
|
|
185
188
|
}
|
|
186
|
-
body
|
|
189
|
+
body{
|
|
187
190
|
color: var(--text-color);
|
|
188
191
|
}
|
package/src/index.css
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/* ==========================================================================
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
Fonts — Google Fonts must be imported before all other rules
|
|
3
|
+
========================================================================== */
|
|
4
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
|
|
4
5
|
|
|
6
|
+
/* ==========================================================================
|
|
7
|
+
Design System — Main Entry Point
|
|
5
8
|
Import order matters: tokens → foundations → layout → utilities → themes
|
|
6
9
|
========================================================================== */
|
|
7
10
|
|
package/src/tokens/_spacing.css
CHANGED
|
@@ -1,4 +1,24 @@
|
|
|
1
1
|
:root {
|
|
2
|
+
--space-4xs: 0.52rem;
|
|
3
|
+
--space-3xs: 0.70rem;
|
|
4
|
+
--space-2xs: 0.99rem;
|
|
5
|
+
--space-xs: 1.40rem;
|
|
6
|
+
--space-s: 1.98rem;
|
|
7
|
+
--space-m: 2.80rem;
|
|
8
|
+
--space-l: 3.96rem;
|
|
9
|
+
--space-xl: 5.60rem;
|
|
10
|
+
--space-2xl: 7.92rem;
|
|
11
|
+
--space-3xl: 11.19rem;
|
|
12
|
+
--space-4xl: 15.83rem;
|
|
13
|
+
/* Section Spacing (larger scale for vertical rhythm between page sections) */
|
|
14
|
+
--section-space-xs: 3.96rem;
|
|
15
|
+
--section-space-s: 7.92rem;
|
|
16
|
+
--section-space-m: 11.19rem;
|
|
17
|
+
--section-space-l: 15.83rem;
|
|
18
|
+
--section-space-xl: 22.37rem;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.responsive {
|
|
2
22
|
--space-4xs: clamp(0.52rem, calc(-0.03vw + 0.54rem), 0.49rem);
|
|
3
23
|
--space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
|
|
4
24
|
--space-2xs: clamp(0.82rem, calc(0.15vw + 0.75rem), 0.99rem);
|
|
@@ -10,7 +30,6 @@
|
|
|
10
30
|
--space-2xl: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
|
|
11
31
|
--space-3xl: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
|
|
12
32
|
--space-4xl: clamp(4.88rem, calc(9.77vw + 0.19rem), 15.83rem);
|
|
13
|
-
/* Section Spacing (larger scale for vertical rhythm between page sections) */
|
|
14
33
|
--section-space-xs: clamp(2rem, calc(1.75vw + 1.16rem), 3.96rem);
|
|
15
34
|
--section-space-s: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
|
|
16
35
|
--section-space-m: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--text-xs:
|
|
3
|
-
--text-s:
|
|
4
|
-
--text-m:
|
|
5
|
-
--text-l:
|
|
6
|
-
--text-xl:
|
|
7
|
-
--text-2xl:
|
|
8
|
-
--text-3xl:
|
|
9
|
-
--text-4xl:
|
|
10
|
-
--text-5xl:
|
|
11
|
-
--text-6xl:
|
|
12
|
-
--text-7xl:
|
|
13
|
-
--text-8xl:
|
|
2
|
+
--text-xs: 1.23rem;
|
|
3
|
+
--text-s: 1.33rem;
|
|
4
|
+
--text-m: 1.60rem;
|
|
5
|
+
--text-l: 1.92rem;
|
|
6
|
+
--text-xl: 2.19rem;
|
|
7
|
+
--text-2xl: 2.46rem;
|
|
8
|
+
--text-3xl: 2.73rem;
|
|
9
|
+
--text-4xl: 3.0rem;
|
|
10
|
+
--text-5xl: 3.4rem;
|
|
11
|
+
--text-6xl: 3.8rem;
|
|
12
|
+
--text-7xl: 4.1rem;
|
|
13
|
+
--text-8xl: 4.5rem;
|
|
14
14
|
--display-color: var(--neutral-90);
|
|
15
15
|
--text-color: var(--neutral-90);
|
|
16
16
|
--mono-color: var(--neutral-90);
|
|
17
|
-
--display-font: "
|
|
18
|
-
--body-font: "
|
|
17
|
+
--display-font: "Inter", sans-serif;
|
|
18
|
+
--body-font: "Inter", sans-serif;
|
|
19
|
+
--expressive-font: "Playfair Display", serif;
|
|
19
20
|
--mono-font: "Roboto Mono", monospace;
|
|
20
21
|
--display-font-family: var(--display-font);
|
|
21
22
|
--heading-font-family: var(--display-font);
|
|
@@ -23,6 +24,7 @@
|
|
|
23
24
|
--label-font-family: var(--body-font);
|
|
24
25
|
--text-font-family: var(--body-font);
|
|
25
26
|
--mono-font-family: var(--mono-font);
|
|
27
|
+
--expressive-font-family: var(--expressive-font);
|
|
26
28
|
--display-l-font-size: var(--text-7xl);
|
|
27
29
|
--display-m-font-size: var(--text-6xl);
|
|
28
30
|
--display-s-font-size: var(--text-5xl);
|
|
@@ -85,3 +87,18 @@
|
|
|
85
87
|
--grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
|
|
86
88
|
--grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
|
|
87
89
|
}
|
|
90
|
+
|
|
91
|
+
.responsive {
|
|
92
|
+
--text-xs: clamp(1.23rem, calc(-0.11vw + 1.28rem), 1.11rem);
|
|
93
|
+
--text-s: clamp(1.31rem, calc(0.02vw + 1.3rem), 1.33rem);
|
|
94
|
+
--text-m: clamp(1.4rem, calc(0.18vw + 1.31rem), 1.6rem);
|
|
95
|
+
--text-l: clamp(1.49rem, calc(0.38vw + 1.31rem), 1.92rem);
|
|
96
|
+
--text-xl: clamp(1.59rem, calc(0.64vw + 1.17rem), 2.19rem);
|
|
97
|
+
--text-2xl: clamp(1.70rem, calc(0.89vw + 1.04rem), 2.46rem);
|
|
98
|
+
--text-3xl: clamp(1.81rem, calc(1.15vw + 0.89rem), 2.73rem);
|
|
99
|
+
--text-4xl: clamp(2.43rem, calc(1.40vw + 0.76rem), 3.0rem);
|
|
100
|
+
--text-5xl: clamp(2.59rem, calc(2.05vw + 0.12rem), 3.4rem);
|
|
101
|
+
--text-6xl: clamp(2.75rem, calc(2.70vw - 0.52rem), 3.8rem);
|
|
102
|
+
--text-7xl: clamp(2.94rem, calc(3.35vw - 1.26rem), 4.1rem);
|
|
103
|
+
--text-8xl: clamp(3.14rem, calc(4.00vw - 1.90rem), 4.5rem);
|
|
104
|
+
}
|