colibri-ui 0.8.82 → 0.8.83

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 (21) hide show
  1. package/Theme/index.d.ts +44 -0
  2. package/Theme/themes/buenos_aires.d.ts +22 -0
  3. package/Theme/themes/buenos_aires.js +22 -0
  4. package/Theme/themes/jaipur.d.ts +22 -0
  5. package/Theme/themes/jaipur.js +22 -0
  6. package/Typography/Typography.module.css +100 -0
  7. package/Typography/index.js +6 -3
  8. package/Typography/index.props.d.ts +3 -1
  9. package/esm/Theme/index.d.ts +44 -0
  10. package/esm/Theme/themes/buenos_aires.d.ts +22 -0
  11. package/esm/Theme/themes/buenos_aires.js +22 -0
  12. package/esm/Theme/themes/jaipur.d.ts +22 -0
  13. package/esm/Theme/themes/jaipur.js +22 -0
  14. package/esm/Typography/Typography.module.css +100 -0
  15. package/esm/Typography/index.js +6 -3
  16. package/esm/Typography/index.props.d.ts +3 -1
  17. package/esm/theme_ba_variables.css +22 -0
  18. package/esm/theme_jaipur_variables.css +22 -0
  19. package/package.json +1 -1
  20. package/theme_ba_variables.css +22 -0
  21. package/theme_jaipur_variables.css +22 -0
package/Theme/index.d.ts CHANGED
@@ -278,6 +278,28 @@ export declare const THEMES: {
278
278
  "line-height-display-lg-mobile": string;
279
279
  "font-size-display-xl-mobile": string;
280
280
  "line-height-display-xl-mobile": string;
281
+ "font-size-h1-mobile": string;
282
+ "line-height-h1-mobile": string;
283
+ "font-size-h2-mobile": string;
284
+ "line-height-h2-mobile": string;
285
+ "font-size-h3-mobile": string;
286
+ "line-height-h3-mobile": string;
287
+ "font-size-h4-mobile": string;
288
+ "line-height-h4-mobile": string;
289
+ "font-size-h5-mobile": string;
290
+ "line-height-h5-mobile": string;
291
+ "font-size-display-s": string;
292
+ "line-height-display-s": string;
293
+ "font-size-display-s-mobile": string;
294
+ "line-height-display-s-mobile": string;
295
+ "font-size-display-m": string;
296
+ "line-height-display-m": string;
297
+ "font-size-display-m-mobile": string;
298
+ "line-height-display-m-mobile": string;
299
+ "font-size-display-l": string;
300
+ "line-height-display-l": string;
301
+ "font-size-display-l-mobile": string;
302
+ "line-height-display-l-mobile": string;
281
303
  "letter-spacing-body": string;
282
304
  "letter-spacing-ui": string;
283
305
  "letter-spacing-heading": string;
@@ -1095,6 +1117,28 @@ export declare const THEMES: {
1095
1117
  "line-height-display-lg-mobile": string;
1096
1118
  "font-size-display-xl-mobile": string;
1097
1119
  "line-height-display-xl-mobile": string;
1120
+ "font-size-h1-mobile": string;
1121
+ "line-height-h1-mobile": string;
1122
+ "font-size-h2-mobile": string;
1123
+ "line-height-h2-mobile": string;
1124
+ "font-size-h3-mobile": string;
1125
+ "line-height-h3-mobile": string;
1126
+ "font-size-h4-mobile": string;
1127
+ "line-height-h4-mobile": string;
1128
+ "font-size-h5-mobile": string;
1129
+ "line-height-h5-mobile": string;
1130
+ "font-size-display-s": string;
1131
+ "line-height-display-s": string;
1132
+ "font-size-display-s-mobile": string;
1133
+ "line-height-display-s-mobile": string;
1134
+ "font-size-display-m": string;
1135
+ "line-height-display-m": string;
1136
+ "font-size-display-m-mobile": string;
1137
+ "line-height-display-m-mobile": string;
1138
+ "font-size-display-l": string;
1139
+ "line-height-display-l": string;
1140
+ "font-size-display-l-mobile": string;
1141
+ "line-height-display-l-mobile": string;
1098
1142
  "letter-spacing-body": string;
1099
1143
  "letter-spacing-ui": string;
1100
1144
  "letter-spacing-heading": string;
package/Theme/themes/buenos_aires.d.ts CHANGED
@@ -199,6 +199,28 @@ declare const _default: {
199
199
  "line-height-display-lg-mobile": string;
200
200
  "font-size-display-xl-mobile": string;
201
201
  "line-height-display-xl-mobile": string;
202
+ "font-size-h1-mobile": string;
203
+ "line-height-h1-mobile": string;
204
+ "font-size-h2-mobile": string;
205
+ "line-height-h2-mobile": string;
206
+ "font-size-h3-mobile": string;
207
+ "line-height-h3-mobile": string;
208
+ "font-size-h4-mobile": string;
209
+ "line-height-h4-mobile": string;
210
+ "font-size-h5-mobile": string;
211
+ "line-height-h5-mobile": string;
212
+ "font-size-display-s": string;
213
+ "line-height-display-s": string;
214
+ "font-size-display-s-mobile": string;
215
+ "line-height-display-s-mobile": string;
216
+ "font-size-display-m": string;
217
+ "line-height-display-m": string;
218
+ "font-size-display-m-mobile": string;
219
+ "line-height-display-m-mobile": string;
220
+ "font-size-display-l": string;
221
+ "line-height-display-l": string;
222
+ "font-size-display-l-mobile": string;
223
+ "line-height-display-l-mobile": string;
202
224
  "letter-spacing-body": string;
203
225
  "letter-spacing-ui": string;
204
226
  "letter-spacing-heading": string;
package/Theme/themes/buenos_aires.js CHANGED
@@ -205,6 +205,28 @@ var THEME_BA = {
205
205
  "line-height-display-lg-mobile": "3.625rem",
206
206
  "font-size-display-xl-mobile": "3.5rem",
207
207
  "line-height-display-xl-mobile": "3.625rem",
208
+ "font-size-h1-mobile": "2rem",
209
+ "line-height-h1-mobile": "2.5rem",
210
+ "font-size-h2-mobile": "1.75rem",
211
+ "line-height-h2-mobile": "2.25rem",
212
+ "font-size-h3-mobile": "1.5rem",
213
+ "line-height-h3-mobile": "2rem",
214
+ "font-size-h4-mobile": "1.25rem",
215
+ "line-height-h4-mobile": "1.75rem",
216
+ "font-size-h5-mobile": "1.125rem",
217
+ "line-height-h5-mobile": "1.625rem",
218
+ "font-size-display-s": "3.5rem",
219
+ "line-height-display-s": "4rem",
220
+ "font-size-display-s-mobile": "2.5rem",
221
+ "line-height-display-s-mobile": "3rem",
222
+ "font-size-display-m": "4.5rem",
223
+ "line-height-display-m": "5rem",
224
+ "font-size-display-m-mobile": "3rem",
225
+ "line-height-display-m-mobile": "3.5rem",
226
+ "font-size-display-l": "5.5rem",
227
+ "line-height-display-l": "6rem",
228
+ "font-size-display-l-mobile": "3.5rem",
229
+ "line-height-display-l-mobile": "4rem",
208
230
  "letter-spacing-body": "0",
209
231
  "letter-spacing-ui": "0",
210
232
  "letter-spacing-heading": "-0.02em",
package/Theme/themes/jaipur.d.ts CHANGED
@@ -199,6 +199,28 @@ declare const _default: {
199
199
  "line-height-display-lg-mobile": string;
200
200
  "font-size-display-xl-mobile": string;
201
201
  "line-height-display-xl-mobile": string;
202
+ "font-size-h1-mobile": string;
203
+ "line-height-h1-mobile": string;
204
+ "font-size-h2-mobile": string;
205
+ "line-height-h2-mobile": string;
206
+ "font-size-h3-mobile": string;
207
+ "line-height-h3-mobile": string;
208
+ "font-size-h4-mobile": string;
209
+ "line-height-h4-mobile": string;
210
+ "font-size-h5-mobile": string;
211
+ "line-height-h5-mobile": string;
212
+ "font-size-display-s": string;
213
+ "line-height-display-s": string;
214
+ "font-size-display-s-mobile": string;
215
+ "line-height-display-s-mobile": string;
216
+ "font-size-display-m": string;
217
+ "line-height-display-m": string;
218
+ "font-size-display-m-mobile": string;
219
+ "line-height-display-m-mobile": string;
220
+ "font-size-display-l": string;
221
+ "line-height-display-l": string;
222
+ "font-size-display-l-mobile": string;
223
+ "line-height-display-l-mobile": string;
202
224
  "letter-spacing-body": string;
203
225
  "letter-spacing-ui": string;
204
226
  "letter-spacing-heading": string;
package/Theme/themes/jaipur.js CHANGED
@@ -205,6 +205,28 @@ var theme_jaipur = {
205
205
  "line-height-display-lg-mobile": "3.625rem",
206
206
  "font-size-display-xl-mobile": "3.5rem",
207
207
  "line-height-display-xl-mobile": "3.625rem",
208
+ "font-size-h1-mobile": "2rem",
209
+ "line-height-h1-mobile": "2.5rem",
210
+ "font-size-h2-mobile": "1.75rem",
211
+ "line-height-h2-mobile": "2.25rem",
212
+ "font-size-h3-mobile": "1.5rem",
213
+ "line-height-h3-mobile": "2rem",
214
+ "font-size-h4-mobile": "1.25rem",
215
+ "line-height-h4-mobile": "1.75rem",
216
+ "font-size-h5-mobile": "1.125rem",
217
+ "line-height-h5-mobile": "1.625rem",
218
+ "font-size-display-s": "3.5rem",
219
+ "line-height-display-s": "4rem",
220
+ "font-size-display-s-mobile": "2.5rem",
221
+ "line-height-display-s-mobile": "3rem",
222
+ "font-size-display-m": "4.5rem",
223
+ "line-height-display-m": "5rem",
224
+ "font-size-display-m-mobile": "3rem",
225
+ "line-height-display-m-mobile": "3.5rem",
226
+ "font-size-display-l": "5.5rem",
227
+ "line-height-display-l": "6rem",
228
+ "font-size-display-l-mobile": "3.5rem",
229
+ "line-height-display-l-mobile": "4rem",
208
230
  "letter-spacing-body": "0",
209
231
  "letter-spacing-ui": "0",
210
232
  "letter-spacing-heading": "-0.02em",
package/Typography/Typography.module.css CHANGED
@@ -4,63 +4,85 @@
4
4
  letter-spacing: var(--letter-spacing-ui, 0);
5
5
  }
6
6
 
7
+ .clamp {
8
+ -webkit-box-orient: vertical;
9
+ display: -webkit-box;
10
+ -webkit-line-clamp: var(--typography-lines);
11
+ overflow: hidden;
12
+ text-overflow: ellipsis;
13
+ white-space: normal;
14
+ }
15
+
7
16
  .size_xs {
17
+ font-family: var(--font-family-body, inherit);
8
18
  font-size: var(--font-size-text-xs, 0.75rem);
9
19
  line-height: var(--line-height-text-xs, 1rem);
10
20
  }
11
21
  .size_s {
22
+ font-family: var(--font-family-body, inherit);
12
23
  font-size: var(--font-size-text-sm, 0.875rem);
13
24
  line-height: var(--line-height-text-sm, 1.25rem);
14
25
  }
15
26
  .size_m {
27
+ font-family: var(--font-family-body, inherit);
16
28
  font-size: var(--font-size-text-md, 1rem);
17
29
  line-height: var(--line-height-text-md, 1.5rem);
18
30
  }
19
31
  .size_l {
32
+ font-family: var(--font-family-body, inherit);
20
33
  font-size: var(--font-size-text-lg, 1.125rem);
21
34
  line-height: var(--line-height-text-lg, 1.625rem);
22
35
  }
23
36
  .size_text-xs {
37
+ font-family: var(--font-family-body, inherit);
24
38
  font-size: var(--font-size-text-xs, 0.75rem);
25
39
  line-height: var(--line-height-text-xs, 1rem);
26
40
  }
27
41
  .size_text-sm {
42
+ font-family: var(--font-family-body, inherit);
28
43
  font-size: var(--font-size-text-sm, 0.875rem);
29
44
  line-height: var(--line-height-text-sm, 1.25rem);
30
45
  }
31
46
  .size_text-md {
47
+ font-family: var(--font-family-body, inherit);
32
48
  font-size: var(--font-size-text-md, 1rem);
33
49
  line-height: var(--line-height-text-md, 1.5rem);
34
50
  }
35
51
  .size_text-lg {
52
+ font-family: var(--font-family-body, inherit);
36
53
  font-size: var(--font-size-text-lg, 1.125rem);
37
54
  line-height: var(--line-height-text-lg, 1.625rem);
38
55
  }
39
56
  .size_heading-sm {
57
+ font-family: var(--font-family-display, inherit);
40
58
  font-size: var(--font-size-heading-sm, 1.25rem);
41
59
  font-weight: var(--font-weight-semibold, 600);
42
60
  letter-spacing: var(--letter-spacing-heading, 0);
43
61
  line-height: var(--line-height-heading-sm, 1.75rem);
44
62
  }
45
63
  .size_heading-md {
64
+ font-family: var(--font-family-display, inherit);
46
65
  font-size: var(--font-size-heading-md, 1.5rem);
47
66
  font-weight: var(--font-weight-semibold, 600);
48
67
  letter-spacing: var(--letter-spacing-heading, 0);
49
68
  line-height: var(--line-height-heading-md, 2rem);
50
69
  }
51
70
  .size_heading-lg {
71
+ font-family: var(--font-family-display, inherit);
52
72
  font-size: var(--font-size-heading-lg, 2rem);
53
73
  font-weight: var(--font-weight-semibold, 600);
54
74
  letter-spacing: var(--letter-spacing-heading, 0);
55
75
  line-height: var(--line-height-heading-lg, 2.5rem);
56
76
  }
57
77
  .size_heading-xl {
78
+ font-family: var(--font-family-display, inherit);
58
79
  font-size: var(--font-size-heading-xl, 2.5rem);
59
80
  font-weight: var(--font-weight-semibold, 600);
60
81
  letter-spacing: var(--letter-spacing-heading, 0);
61
82
  line-height: var(--line-height-heading-xl, 3rem);
62
83
  }
63
84
  .size_display-sm {
85
+ font-family: var(--font-family-display, inherit);
64
86
  font-size: var(--font-size-display-sm, 3rem);
65
87
  font-weight: var(--font-weight-semibold, 600);
66
88
  letter-spacing: var(--letter-spacing-display, 0);
@@ -73,6 +95,7 @@
73
95
  }
74
96
  }
75
97
  .size_display-md {
98
+ font-family: var(--font-family-display, inherit);
76
99
  font-size: var(--font-size-display-md, 4rem);
77
100
  font-weight: var(--font-weight-semibold, 600);
78
101
  letter-spacing: var(--letter-spacing-display, 0);
@@ -85,6 +108,7 @@
85
108
  }
86
109
  }
87
110
  .size_display-lg {
111
+ font-family: var(--font-family-display, inherit);
88
112
  font-size: var(--font-size-display-lg, 5rem);
89
113
  font-weight: var(--font-weight-semibold, 600);
90
114
  letter-spacing: var(--letter-spacing-display, 0);
@@ -97,6 +121,7 @@
97
121
  }
98
122
  }
99
123
  .size_display-xl {
124
+ font-family: var(--font-family-display, inherit);
100
125
  font-size: var(--font-size-display-xl, 6.5rem);
101
126
  font-weight: var(--font-weight-semibold, 600);
102
127
  letter-spacing: var(--letter-spacing-display, 0);
@@ -108,37 +133,112 @@
108
133
  line-height: var(--line-height-display-xl-mobile, 3.625rem);
109
134
  }
110
135
  }
136
+ .size_display-s {
137
+ font-family: var(--font-family-display, inherit);
138
+ font-size: var(--font-size-display-s, 3.5rem);
139
+ font-weight: var(--font-weight-semibold, 600);
140
+ letter-spacing: var(--letter-spacing-display, 0);
141
+ line-height: var(--line-height-display-s, 4rem);
142
+ }
143
+ @media (width < 48rem) {
144
+ .size_display-s {
145
+ font-size: var(--font-size-display-s-mobile, 2.5rem);
146
+ line-height: var(--line-height-display-s-mobile, 3rem);
147
+ }
148
+ }
149
+ .size_display-m {
150
+ font-family: var(--font-family-display, inherit);
151
+ font-size: var(--font-size-display-m, 4.5rem);
152
+ font-weight: var(--font-weight-semibold, 600);
153
+ letter-spacing: var(--letter-spacing-display, 0);
154
+ line-height: var(--line-height-display-m, 5rem);
155
+ }
156
+ @media (width < 48rem) {
157
+ .size_display-m {
158
+ font-size: var(--font-size-display-m-mobile, 3rem);
159
+ line-height: var(--line-height-display-m-mobile, 3.5rem);
160
+ }
161
+ }
162
+ .size_display-l {
163
+ font-family: var(--font-family-display, inherit);
164
+ font-size: var(--font-size-display-l, 5.5rem);
165
+ font-weight: var(--font-weight-semibold, 600);
166
+ letter-spacing: var(--letter-spacing-display, 0);
167
+ line-height: var(--line-height-display-l, 6rem);
168
+ }
169
+ @media (width < 48rem) {
170
+ .size_display-l {
171
+ font-size: var(--font-size-display-l-mobile, 3.5rem);
172
+ line-height: var(--line-height-display-l-mobile, 4rem);
173
+ }
174
+ }
111
175
  .size_h1 {
176
+ font-family: var(--font-family-display, inherit);
112
177
  font-size: var(--font-size-display-sm, 3rem);
113
178
  font-weight: var(--font-weight-semibold, 600);
114
179
  letter-spacing: var(--letter-spacing-display, 0);
115
180
  line-height: var(--line-height-display-sm, 3.25rem);
116
181
  }
182
+ @media (width < 48rem) {
183
+ .size_h1 {
184
+ font-size: var(--font-size-h1-mobile, 2rem);
185
+ line-height: var(--line-height-h1-mobile, 2.5rem);
186
+ }
187
+ }
117
188
  .size_h2 {
189
+ font-family: var(--font-family-display, inherit);
118
190
  font-size: var(--font-size-heading-xl, 2.5rem);
119
191
  font-weight: var(--font-weight-semibold, 600);
120
192
  letter-spacing: var(--letter-spacing-heading, 0);
121
193
  line-height: var(--line-height-heading-xl, 3rem);
122
194
  }
195
+ @media (width < 48rem) {
196
+ .size_h2 {
197
+ font-size: var(--font-size-h2-mobile, 1.75rem);
198
+ line-height: var(--line-height-h2-mobile, 2.25rem);
199
+ }
200
+ }
123
201
  .size_h3 {
202
+ font-family: var(--font-family-display, inherit);
124
203
  font-size: var(--font-size-heading-lg, 2rem);
125
204
  font-weight: var(--font-weight-semibold, 600);
126
205
  letter-spacing: var(--letter-spacing-heading, 0);
127
206
  line-height: var(--line-height-heading-lg, 2.5rem);
128
207
  }
208
+ @media (width < 48rem) {
209
+ .size_h3 {
210
+ font-size: var(--font-size-h3-mobile, 1.5rem);
211
+ line-height: var(--line-height-h3-mobile, 2rem);
212
+ }
213
+ }
129
214
  .size_h4 {
215
+ font-family: var(--font-family-display, inherit);
130
216
  font-size: var(--font-size-heading-md, 1.5rem);
131
217
  font-weight: var(--font-weight-semibold, 600);
132
218
  letter-spacing: var(--letter-spacing-heading, 0);
133
219
  line-height: var(--line-height-heading-md, 2rem);
134
220
  }
221
+ @media (width < 48rem) {
222
+ .size_h4 {
223
+ font-size: var(--font-size-h4-mobile, 1.25rem);
224
+ line-height: var(--line-height-h4-mobile, 1.75rem);
225
+ }
226
+ }
135
227
  .size_h5 {
228
+ font-family: var(--font-family-display, inherit);
136
229
  font-size: var(--font-size-heading-sm, 1.25rem);
137
230
  font-weight: var(--font-weight-semibold, 600);
138
231
  letter-spacing: var(--letter-spacing-heading, 0);
139
232
  line-height: var(--line-height-heading-sm, 1.75rem);
140
233
  }
234
+ @media (width < 48rem) {
235
+ .size_h5 {
236
+ font-size: var(--font-size-h5-mobile, 1.125rem);
237
+ line-height: var(--line-height-h5-mobile, 1.625rem);
238
+ }
239
+ }
141
240
  .size_h6 {
241
+ font-family: var(--font-family-display, inherit);
142
242
  font-size: var(--font-size-text-md, 1rem);
143
243
  font-weight: var(--font-weight-semibold, 600);
144
244
  line-height: var(--line-height-text-md, 1.5rem);
package/Typography/index.js CHANGED
@@ -21,11 +21,14 @@ var Typography = function Typography(_a) {
21
21
  size = _a.size,
22
22
  style = _a.style,
23
23
  fontWeight = _a.fontWeight,
24
+ lines = _a.lines,
24
25
  className = _a.className,
25
- props = tslib.__rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "className"]);
26
+ props = tslib.__rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "lines", "className"]);
26
27
  return /*#__PURE__*/React__default.default.createElement(Component, Object.assign({}, props, {
27
- style: Object.assign({}, style),
28
- className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["size_".concat(size)], Boolean(size)), styles__default.default["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles__default.default["variant_".concat(variant)], Boolean(variant)), className)
28
+ style: lines ? Object.assign(Object.assign({}, style), {
29
+ "--typography-lines": lines
30
+ }) : Object.assign({}, style),
31
+ className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["size_".concat(size)], Boolean(size)), styles__default.default["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles__default.default["variant_".concat(variant)], Boolean(variant)), styles__default.default.clamp, Boolean(lines)), className)
29
32
  }), children);
30
33
  };
31
34
 
package/Typography/index.props.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CSSProperties } from "react";
2
2
  export type TypographyVariant = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "alert" | "success" | "warning" | "info";
3
3
  export type TypographyFontWeight = "normal" | "regular" | "medium" | "semibold" | "bold";
4
- export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
4
+ export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "display-s" | "display-m" | "display-l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
5
5
  export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
6
6
  export type TypographyProps = {
7
7
  className?: string;
@@ -9,5 +9,7 @@ export type TypographyProps = {
9
9
  variant?: TypographyVariant;
10
10
  size?: TypographySize;
11
11
  fontWeight?: TypographyFontWeight;
12
+ /** Limits the text to this many lines and ends the last one with an ellipsis. */
13
+ lines?: number;
12
14
  style?: CSSProperties;
13
15
  };
package/esm/Theme/index.d.ts CHANGED
@@ -278,6 +278,28 @@ export declare const THEMES: {
278
278
  "line-height-display-lg-mobile": string;
279
279
  "font-size-display-xl-mobile": string;
280
280
  "line-height-display-xl-mobile": string;
281
+ "font-size-h1-mobile": string;
282
+ "line-height-h1-mobile": string;
283
+ "font-size-h2-mobile": string;
284
+ "line-height-h2-mobile": string;
285
+ "font-size-h3-mobile": string;
286
+ "line-height-h3-mobile": string;
287
+ "font-size-h4-mobile": string;
288
+ "line-height-h4-mobile": string;
289
+ "font-size-h5-mobile": string;
290
+ "line-height-h5-mobile": string;
291
+ "font-size-display-s": string;
292
+ "line-height-display-s": string;
293
+ "font-size-display-s-mobile": string;
294
+ "line-height-display-s-mobile": string;
295
+ "font-size-display-m": string;
296
+ "line-height-display-m": string;
297
+ "font-size-display-m-mobile": string;
298
+ "line-height-display-m-mobile": string;
299
+ "font-size-display-l": string;
300
+ "line-height-display-l": string;
301
+ "font-size-display-l-mobile": string;
302
+ "line-height-display-l-mobile": string;
281
303
  "letter-spacing-body": string;
282
304
  "letter-spacing-ui": string;
283
305
  "letter-spacing-heading": string;
@@ -1095,6 +1117,28 @@ export declare const THEMES: {
1095
1117
  "line-height-display-lg-mobile": string;
1096
1118
  "font-size-display-xl-mobile": string;
1097
1119
  "line-height-display-xl-mobile": string;
1120
+ "font-size-h1-mobile": string;
1121
+ "line-height-h1-mobile": string;
1122
+ "font-size-h2-mobile": string;
1123
+ "line-height-h2-mobile": string;
1124
+ "font-size-h3-mobile": string;
1125
+ "line-height-h3-mobile": string;
1126
+ "font-size-h4-mobile": string;
1127
+ "line-height-h4-mobile": string;
1128
+ "font-size-h5-mobile": string;
1129
+ "line-height-h5-mobile": string;
1130
+ "font-size-display-s": string;
1131
+ "line-height-display-s": string;
1132
+ "font-size-display-s-mobile": string;
1133
+ "line-height-display-s-mobile": string;
1134
+ "font-size-display-m": string;
1135
+ "line-height-display-m": string;
1136
+ "font-size-display-m-mobile": string;
1137
+ "line-height-display-m-mobile": string;
1138
+ "font-size-display-l": string;
1139
+ "line-height-display-l": string;
1140
+ "font-size-display-l-mobile": string;
1141
+ "line-height-display-l-mobile": string;
1098
1142
  "letter-spacing-body": string;
1099
1143
  "letter-spacing-ui": string;
1100
1144
  "letter-spacing-heading": string;
package/esm/Theme/themes/buenos_aires.d.ts CHANGED
@@ -199,6 +199,28 @@ declare const _default: {
199
199
  "line-height-display-lg-mobile": string;
200
200
  "font-size-display-xl-mobile": string;
201
201
  "line-height-display-xl-mobile": string;
202
+ "font-size-h1-mobile": string;
203
+ "line-height-h1-mobile": string;
204
+ "font-size-h2-mobile": string;
205
+ "line-height-h2-mobile": string;
206
+ "font-size-h3-mobile": string;
207
+ "line-height-h3-mobile": string;
208
+ "font-size-h4-mobile": string;
209
+ "line-height-h4-mobile": string;
210
+ "font-size-h5-mobile": string;
211
+ "line-height-h5-mobile": string;
212
+ "font-size-display-s": string;
213
+ "line-height-display-s": string;
214
+ "font-size-display-s-mobile": string;
215
+ "line-height-display-s-mobile": string;
216
+ "font-size-display-m": string;
217
+ "line-height-display-m": string;
218
+ "font-size-display-m-mobile": string;
219
+ "line-height-display-m-mobile": string;
220
+ "font-size-display-l": string;
221
+ "line-height-display-l": string;
222
+ "font-size-display-l-mobile": string;
223
+ "line-height-display-l-mobile": string;
202
224
  "letter-spacing-body": string;
203
225
  "letter-spacing-ui": string;
204
226
  "letter-spacing-heading": string;
package/esm/Theme/themes/buenos_aires.js CHANGED
@@ -201,6 +201,28 @@ var THEME_BA = {
201
201
  "line-height-display-lg-mobile": "3.625rem",
202
202
  "font-size-display-xl-mobile": "3.5rem",
203
203
  "line-height-display-xl-mobile": "3.625rem",
204
+ "font-size-h1-mobile": "2rem",
205
+ "line-height-h1-mobile": "2.5rem",
206
+ "font-size-h2-mobile": "1.75rem",
207
+ "line-height-h2-mobile": "2.25rem",
208
+ "font-size-h3-mobile": "1.5rem",
209
+ "line-height-h3-mobile": "2rem",
210
+ "font-size-h4-mobile": "1.25rem",
211
+ "line-height-h4-mobile": "1.75rem",
212
+ "font-size-h5-mobile": "1.125rem",
213
+ "line-height-h5-mobile": "1.625rem",
214
+ "font-size-display-s": "3.5rem",
215
+ "line-height-display-s": "4rem",
216
+ "font-size-display-s-mobile": "2.5rem",
217
+ "line-height-display-s-mobile": "3rem",
218
+ "font-size-display-m": "4.5rem",
219
+ "line-height-display-m": "5rem",
220
+ "font-size-display-m-mobile": "3rem",
221
+ "line-height-display-m-mobile": "3.5rem",
222
+ "font-size-display-l": "5.5rem",
223
+ "line-height-display-l": "6rem",
224
+ "font-size-display-l-mobile": "3.5rem",
225
+ "line-height-display-l-mobile": "4rem",
204
226
  "letter-spacing-body": "0",
205
227
  "letter-spacing-ui": "0",
206
228
  "letter-spacing-heading": "-0.02em",
package/esm/Theme/themes/jaipur.d.ts CHANGED
@@ -199,6 +199,28 @@ declare const _default: {
199
199
  "line-height-display-lg-mobile": string;
200
200
  "font-size-display-xl-mobile": string;
201
201
  "line-height-display-xl-mobile": string;
202
+ "font-size-h1-mobile": string;
203
+ "line-height-h1-mobile": string;
204
+ "font-size-h2-mobile": string;
205
+ "line-height-h2-mobile": string;
206
+ "font-size-h3-mobile": string;
207
+ "line-height-h3-mobile": string;
208
+ "font-size-h4-mobile": string;
209
+ "line-height-h4-mobile": string;
210
+ "font-size-h5-mobile": string;
211
+ "line-height-h5-mobile": string;
212
+ "font-size-display-s": string;
213
+ "line-height-display-s": string;
214
+ "font-size-display-s-mobile": string;
215
+ "line-height-display-s-mobile": string;
216
+ "font-size-display-m": string;
217
+ "line-height-display-m": string;
218
+ "font-size-display-m-mobile": string;
219
+ "line-height-display-m-mobile": string;
220
+ "font-size-display-l": string;
221
+ "line-height-display-l": string;
222
+ "font-size-display-l-mobile": string;
223
+ "line-height-display-l-mobile": string;
202
224
  "letter-spacing-body": string;
203
225
  "letter-spacing-ui": string;
204
226
  "letter-spacing-heading": string;
package/esm/Theme/themes/jaipur.js CHANGED
@@ -201,6 +201,28 @@ var theme_jaipur = {
201
201
  "line-height-display-lg-mobile": "3.625rem",
202
202
  "font-size-display-xl-mobile": "3.5rem",
203
203
  "line-height-display-xl-mobile": "3.625rem",
204
+ "font-size-h1-mobile": "2rem",
205
+ "line-height-h1-mobile": "2.5rem",
206
+ "font-size-h2-mobile": "1.75rem",
207
+ "line-height-h2-mobile": "2.25rem",
208
+ "font-size-h3-mobile": "1.5rem",
209
+ "line-height-h3-mobile": "2rem",
210
+ "font-size-h4-mobile": "1.25rem",
211
+ "line-height-h4-mobile": "1.75rem",
212
+ "font-size-h5-mobile": "1.125rem",
213
+ "line-height-h5-mobile": "1.625rem",
214
+ "font-size-display-s": "3.5rem",
215
+ "line-height-display-s": "4rem",
216
+ "font-size-display-s-mobile": "2.5rem",
217
+ "line-height-display-s-mobile": "3rem",
218
+ "font-size-display-m": "4.5rem",
219
+ "line-height-display-m": "5rem",
220
+ "font-size-display-m-mobile": "3rem",
221
+ "line-height-display-m-mobile": "3.5rem",
222
+ "font-size-display-l": "5.5rem",
223
+ "line-height-display-l": "6rem",
224
+ "font-size-display-l-mobile": "3.5rem",
225
+ "line-height-display-l-mobile": "4rem",
204
226
  "letter-spacing-body": "0",
205
227
  "letter-spacing-ui": "0",
206
228
  "letter-spacing-heading": "-0.02em",
package/esm/Typography/Typography.module.css CHANGED
@@ -4,63 +4,85 @@
4
4
  letter-spacing: var(--letter-spacing-ui, 0);
5
5
  }
6
6
 
7
+ .clamp {
8
+ -webkit-box-orient: vertical;
9
+ display: -webkit-box;
10
+ -webkit-line-clamp: var(--typography-lines);
11
+ overflow: hidden;
12
+ text-overflow: ellipsis;
13
+ white-space: normal;
14
+ }
15
+
7
16
  .size_xs {
17
+ font-family: var(--font-family-body, inherit);
8
18
  font-size: var(--font-size-text-xs, 0.75rem);
9
19
  line-height: var(--line-height-text-xs, 1rem);
10
20
  }
11
21
  .size_s {
22
+ font-family: var(--font-family-body, inherit);
12
23
  font-size: var(--font-size-text-sm, 0.875rem);
13
24
  line-height: var(--line-height-text-sm, 1.25rem);
14
25
  }
15
26
  .size_m {
27
+ font-family: var(--font-family-body, inherit);
16
28
  font-size: var(--font-size-text-md, 1rem);
17
29
  line-height: var(--line-height-text-md, 1.5rem);
18
30
  }
19
31
  .size_l {
32
+ font-family: var(--font-family-body, inherit);
20
33
  font-size: var(--font-size-text-lg, 1.125rem);
21
34
  line-height: var(--line-height-text-lg, 1.625rem);
22
35
  }
23
36
  .size_text-xs {
37
+ font-family: var(--font-family-body, inherit);
24
38
  font-size: var(--font-size-text-xs, 0.75rem);
25
39
  line-height: var(--line-height-text-xs, 1rem);
26
40
  }
27
41
  .size_text-sm {
42
+ font-family: var(--font-family-body, inherit);
28
43
  font-size: var(--font-size-text-sm, 0.875rem);
29
44
  line-height: var(--line-height-text-sm, 1.25rem);
30
45
  }
31
46
  .size_text-md {
47
+ font-family: var(--font-family-body, inherit);
32
48
  font-size: var(--font-size-text-md, 1rem);
33
49
  line-height: var(--line-height-text-md, 1.5rem);
34
50
  }
35
51
  .size_text-lg {
52
+ font-family: var(--font-family-body, inherit);
36
53
  font-size: var(--font-size-text-lg, 1.125rem);
37
54
  line-height: var(--line-height-text-lg, 1.625rem);
38
55
  }
39
56
  .size_heading-sm {
57
+ font-family: var(--font-family-display, inherit);
40
58
  font-size: var(--font-size-heading-sm, 1.25rem);
41
59
  font-weight: var(--font-weight-semibold, 600);
42
60
  letter-spacing: var(--letter-spacing-heading, 0);
43
61
  line-height: var(--line-height-heading-sm, 1.75rem);
44
62
  }
45
63
  .size_heading-md {
64
+ font-family: var(--font-family-display, inherit);
46
65
  font-size: var(--font-size-heading-md, 1.5rem);
47
66
  font-weight: var(--font-weight-semibold, 600);
48
67
  letter-spacing: var(--letter-spacing-heading, 0);
49
68
  line-height: var(--line-height-heading-md, 2rem);
50
69
  }
51
70
  .size_heading-lg {
71
+ font-family: var(--font-family-display, inherit);
52
72
  font-size: var(--font-size-heading-lg, 2rem);
53
73
  font-weight: var(--font-weight-semibold, 600);
54
74
  letter-spacing: var(--letter-spacing-heading, 0);
55
75
  line-height: var(--line-height-heading-lg, 2.5rem);
56
76
  }
57
77
  .size_heading-xl {
78
+ font-family: var(--font-family-display, inherit);
58
79
  font-size: var(--font-size-heading-xl, 2.5rem);
59
80
  font-weight: var(--font-weight-semibold, 600);
60
81
  letter-spacing: var(--letter-spacing-heading, 0);
61
82
  line-height: var(--line-height-heading-xl, 3rem);
62
83
  }
63
84
  .size_display-sm {
85
+ font-family: var(--font-family-display, inherit);
64
86
  font-size: var(--font-size-display-sm, 3rem);
65
87
  font-weight: var(--font-weight-semibold, 600);
66
88
  letter-spacing: var(--letter-spacing-display, 0);
@@ -73,6 +95,7 @@
73
95
  }
74
96
  }
75
97
  .size_display-md {
98
+ font-family: var(--font-family-display, inherit);
76
99
  font-size: var(--font-size-display-md, 4rem);
77
100
  font-weight: var(--font-weight-semibold, 600);
78
101
  letter-spacing: var(--letter-spacing-display, 0);
@@ -85,6 +108,7 @@
85
108
  }
86
109
  }
87
110
  .size_display-lg {
111
+ font-family: var(--font-family-display, inherit);
88
112
  font-size: var(--font-size-display-lg, 5rem);
89
113
  font-weight: var(--font-weight-semibold, 600);
90
114
  letter-spacing: var(--letter-spacing-display, 0);
@@ -97,6 +121,7 @@
97
121
  }
98
122
  }
99
123
  .size_display-xl {
124
+ font-family: var(--font-family-display, inherit);
100
125
  font-size: var(--font-size-display-xl, 6.5rem);
101
126
  font-weight: var(--font-weight-semibold, 600);
102
127
  letter-spacing: var(--letter-spacing-display, 0);
@@ -108,37 +133,112 @@
108
133
  line-height: var(--line-height-display-xl-mobile, 3.625rem);
109
134
  }
110
135
  }
136
+ .size_display-s {
137
+ font-family: var(--font-family-display, inherit);
138
+ font-size: var(--font-size-display-s, 3.5rem);
139
+ font-weight: var(--font-weight-semibold, 600);
140
+ letter-spacing: var(--letter-spacing-display, 0);
141
+ line-height: var(--line-height-display-s, 4rem);
142
+ }
143
+ @media (width < 48rem) {
144
+ .size_display-s {
145
+ font-size: var(--font-size-display-s-mobile, 2.5rem);
146
+ line-height: var(--line-height-display-s-mobile, 3rem);
147
+ }
148
+ }
149
+ .size_display-m {
150
+ font-family: var(--font-family-display, inherit);
151
+ font-size: var(--font-size-display-m, 4.5rem);
152
+ font-weight: var(--font-weight-semibold, 600);
153
+ letter-spacing: var(--letter-spacing-display, 0);
154
+ line-height: var(--line-height-display-m, 5rem);
155
+ }
156
+ @media (width < 48rem) {
157
+ .size_display-m {
158
+ font-size: var(--font-size-display-m-mobile, 3rem);
159
+ line-height: var(--line-height-display-m-mobile, 3.5rem);
160
+ }
161
+ }
162
+ .size_display-l {
163
+ font-family: var(--font-family-display, inherit);
164
+ font-size: var(--font-size-display-l, 5.5rem);
165
+ font-weight: var(--font-weight-semibold, 600);
166
+ letter-spacing: var(--letter-spacing-display, 0);
167
+ line-height: var(--line-height-display-l, 6rem);
168
+ }
169
+ @media (width < 48rem) {
170
+ .size_display-l {
171
+ font-size: var(--font-size-display-l-mobile, 3.5rem);
172
+ line-height: var(--line-height-display-l-mobile, 4rem);
173
+ }
174
+ }
111
175
  .size_h1 {
176
+ font-family: var(--font-family-display, inherit);
112
177
  font-size: var(--font-size-display-sm, 3rem);
113
178
  font-weight: var(--font-weight-semibold, 600);
114
179
  letter-spacing: var(--letter-spacing-display, 0);
115
180
  line-height: var(--line-height-display-sm, 3.25rem);
116
181
  }
182
+ @media (width < 48rem) {
183
+ .size_h1 {
184
+ font-size: var(--font-size-h1-mobile, 2rem);
185
+ line-height: var(--line-height-h1-mobile, 2.5rem);
186
+ }
187
+ }
117
188
  .size_h2 {
189
+ font-family: var(--font-family-display, inherit);
118
190
  font-size: var(--font-size-heading-xl, 2.5rem);
119
191
  font-weight: var(--font-weight-semibold, 600);
120
192
  letter-spacing: var(--letter-spacing-heading, 0);
121
193
  line-height: var(--line-height-heading-xl, 3rem);
122
194
  }
195
+ @media (width < 48rem) {
196
+ .size_h2 {
197
+ font-size: var(--font-size-h2-mobile, 1.75rem);
198
+ line-height: var(--line-height-h2-mobile, 2.25rem);
199
+ }
200
+ }
123
201
  .size_h3 {
202
+ font-family: var(--font-family-display, inherit);
124
203
  font-size: var(--font-size-heading-lg, 2rem);
125
204
  font-weight: var(--font-weight-semibold, 600);
126
205
  letter-spacing: var(--letter-spacing-heading, 0);
127
206
  line-height: var(--line-height-heading-lg, 2.5rem);
128
207
  }
208
+ @media (width < 48rem) {
209
+ .size_h3 {
210
+ font-size: var(--font-size-h3-mobile, 1.5rem);
211
+ line-height: var(--line-height-h3-mobile, 2rem);
212
+ }
213
+ }
129
214
  .size_h4 {
215
+ font-family: var(--font-family-display, inherit);
130
216
  font-size: var(--font-size-heading-md, 1.5rem);
131
217
  font-weight: var(--font-weight-semibold, 600);
132
218
  letter-spacing: var(--letter-spacing-heading, 0);
133
219
  line-height: var(--line-height-heading-md, 2rem);
134
220
  }
221
+ @media (width < 48rem) {
222
+ .size_h4 {
223
+ font-size: var(--font-size-h4-mobile, 1.25rem);
224
+ line-height: var(--line-height-h4-mobile, 1.75rem);
225
+ }
226
+ }
135
227
  .size_h5 {
228
+ font-family: var(--font-family-display, inherit);
136
229
  font-size: var(--font-size-heading-sm, 1.25rem);
137
230
  font-weight: var(--font-weight-semibold, 600);
138
231
  letter-spacing: var(--letter-spacing-heading, 0);
139
232
  line-height: var(--line-height-heading-sm, 1.75rem);
140
233
  }
234
+ @media (width < 48rem) {
235
+ .size_h5 {
236
+ font-size: var(--font-size-h5-mobile, 1.125rem);
237
+ line-height: var(--line-height-h5-mobile, 1.625rem);
238
+ }
239
+ }
141
240
  .size_h6 {
241
+ font-family: var(--font-family-display, inherit);
142
242
  font-size: var(--font-size-text-md, 1rem);
143
243
  font-weight: var(--font-weight-semibold, 600);
144
244
  line-height: var(--line-height-text-md, 1.5rem);
package/esm/Typography/index.js CHANGED
@@ -12,11 +12,14 @@ var Typography = function Typography(_a) {
12
12
  size = _a.size,
13
13
  style = _a.style,
14
14
  fontWeight = _a.fontWeight,
15
+ lines = _a.lines,
15
16
  className = _a.className,
16
- props = __rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "className"]);
17
+ props = __rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "lines", "className"]);
17
18
  return /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
18
- style: Object.assign({}, style),
19
- className: clsx(_defineProperty(_defineProperty(_defineProperty({}, styles["size_".concat(size)], Boolean(size)), styles["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles["variant_".concat(variant)], Boolean(variant)), className)
19
+ style: lines ? Object.assign(Object.assign({}, style), {
20
+ "--typography-lines": lines
21
+ }) : Object.assign({}, style),
22
+ className: clsx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles["size_".concat(size)], Boolean(size)), styles["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles["variant_".concat(variant)], Boolean(variant)), styles.clamp, Boolean(lines)), className)
20
23
  }), children);
21
24
  };
22
25
 
package/esm/Typography/index.props.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CSSProperties } from "react";
2
2
  export type TypographyVariant = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "alert" | "success" | "warning" | "info";
3
3
  export type TypographyFontWeight = "normal" | "regular" | "medium" | "semibold" | "bold";
4
- export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
4
+ export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "display-s" | "display-m" | "display-l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
5
5
  export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
6
6
  export type TypographyProps = {
7
7
  className?: string;
@@ -9,5 +9,7 @@ export type TypographyProps = {
9
9
  variant?: TypographyVariant;
10
10
  size?: TypographySize;
11
11
  fontWeight?: TypographyFontWeight;
12
+ /** Limits the text to this many lines and ends the last one with an ellipsis. */
13
+ lines?: number;
12
14
  style?: CSSProperties;
13
15
  };
package/esm/theme_ba_variables.css CHANGED
@@ -199,6 +199,28 @@
199
199
  --line-height-display-lg-mobile: 3.625rem;
200
200
  --font-size-display-xl-mobile: 3.5rem;
201
201
  --line-height-display-xl-mobile: 3.625rem;
202
+ --font-size-h1-mobile: 2rem;
203
+ --line-height-h1-mobile: 2.5rem;
204
+ --font-size-h2-mobile: 1.75rem;
205
+ --line-height-h2-mobile: 2.25rem;
206
+ --font-size-h3-mobile: 1.5rem;
207
+ --line-height-h3-mobile: 2rem;
208
+ --font-size-h4-mobile: 1.25rem;
209
+ --line-height-h4-mobile: 1.75rem;
210
+ --font-size-h5-mobile: 1.125rem;
211
+ --line-height-h5-mobile: 1.625rem;
212
+ --font-size-display-s: 3.5rem;
213
+ --line-height-display-s: 4rem;
214
+ --font-size-display-s-mobile: 2.5rem;
215
+ --line-height-display-s-mobile: 3rem;
216
+ --font-size-display-m: 4.5rem;
217
+ --line-height-display-m: 5rem;
218
+ --font-size-display-m-mobile: 3rem;
219
+ --line-height-display-m-mobile: 3.5rem;
220
+ --font-size-display-l: 5.5rem;
221
+ --line-height-display-l: 6rem;
222
+ --font-size-display-l-mobile: 3.5rem;
223
+ --line-height-display-l-mobile: 4rem;
202
224
  --letter-spacing-body: 0;
203
225
  --letter-spacing-ui: 0;
204
226
  --letter-spacing-heading: -0.02em;
package/esm/theme_jaipur_variables.css CHANGED
@@ -199,6 +199,28 @@
199
199
  --line-height-display-lg-mobile: 3.625rem;
200
200
  --font-size-display-xl-mobile: 3.5rem;
201
201
  --line-height-display-xl-mobile: 3.625rem;
202
+ --font-size-h1-mobile: 2rem;
203
+ --line-height-h1-mobile: 2.5rem;
204
+ --font-size-h2-mobile: 1.75rem;
205
+ --line-height-h2-mobile: 2.25rem;
206
+ --font-size-h3-mobile: 1.5rem;
207
+ --line-height-h3-mobile: 2rem;
208
+ --font-size-h4-mobile: 1.25rem;
209
+ --line-height-h4-mobile: 1.75rem;
210
+ --font-size-h5-mobile: 1.125rem;
211
+ --line-height-h5-mobile: 1.625rem;
212
+ --font-size-display-s: 3.5rem;
213
+ --line-height-display-s: 4rem;
214
+ --font-size-display-s-mobile: 2.5rem;
215
+ --line-height-display-s-mobile: 3rem;
216
+ --font-size-display-m: 4.5rem;
217
+ --line-height-display-m: 5rem;
218
+ --font-size-display-m-mobile: 3rem;
219
+ --line-height-display-m-mobile: 3.5rem;
220
+ --font-size-display-l: 5.5rem;
221
+ --line-height-display-l: 6rem;
222
+ --font-size-display-l-mobile: 3.5rem;
223
+ --line-height-display-l-mobile: 4rem;
202
224
  --letter-spacing-body: 0;
203
225
  --letter-spacing-ui: 0;
204
226
  --letter-spacing-heading: -0.02em;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.8.82",
3
+ "version": "0.8.83",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
package/theme_ba_variables.css CHANGED
@@ -199,6 +199,28 @@
199
199
  --line-height-display-lg-mobile: 3.625rem;
200
200
  --font-size-display-xl-mobile: 3.5rem;
201
201
  --line-height-display-xl-mobile: 3.625rem;
202
+ --font-size-h1-mobile: 2rem;
203
+ --line-height-h1-mobile: 2.5rem;
204
+ --font-size-h2-mobile: 1.75rem;
205
+ --line-height-h2-mobile: 2.25rem;
206
+ --font-size-h3-mobile: 1.5rem;
207
+ --line-height-h3-mobile: 2rem;
208
+ --font-size-h4-mobile: 1.25rem;
209
+ --line-height-h4-mobile: 1.75rem;
210
+ --font-size-h5-mobile: 1.125rem;
211
+ --line-height-h5-mobile: 1.625rem;
212
+ --font-size-display-s: 3.5rem;
213
+ --line-height-display-s: 4rem;
214
+ --font-size-display-s-mobile: 2.5rem;
215
+ --line-height-display-s-mobile: 3rem;
216
+ --font-size-display-m: 4.5rem;
217
+ --line-height-display-m: 5rem;
218
+ --font-size-display-m-mobile: 3rem;
219
+ --line-height-display-m-mobile: 3.5rem;
220
+ --font-size-display-l: 5.5rem;
221
+ --line-height-display-l: 6rem;
222
+ --font-size-display-l-mobile: 3.5rem;
223
+ --line-height-display-l-mobile: 4rem;
202
224
  --letter-spacing-body: 0;
203
225
  --letter-spacing-ui: 0;
204
226
  --letter-spacing-heading: -0.02em;
package/theme_jaipur_variables.css CHANGED
@@ -199,6 +199,28 @@
199
199
  --line-height-display-lg-mobile: 3.625rem;
200
200
  --font-size-display-xl-mobile: 3.5rem;
201
201
  --line-height-display-xl-mobile: 3.625rem;
202
+ --font-size-h1-mobile: 2rem;
203
+ --line-height-h1-mobile: 2.5rem;
204
+ --font-size-h2-mobile: 1.75rem;
205
+ --line-height-h2-mobile: 2.25rem;
206
+ --font-size-h3-mobile: 1.5rem;
207
+ --line-height-h3-mobile: 2rem;
208
+ --font-size-h4-mobile: 1.25rem;
209
+ --line-height-h4-mobile: 1.75rem;
210
+ --font-size-h5-mobile: 1.125rem;
211
+ --line-height-h5-mobile: 1.625rem;
212
+ --font-size-display-s: 3.5rem;
213
+ --line-height-display-s: 4rem;
214
+ --font-size-display-s-mobile: 2.5rem;
215
+ --line-height-display-s-mobile: 3rem;
216
+ --font-size-display-m: 4.5rem;
217
+ --line-height-display-m: 5rem;
218
+ --font-size-display-m-mobile: 3rem;
219
+ --line-height-display-m-mobile: 3.5rem;
220
+ --font-size-display-l: 5.5rem;
221
+ --line-height-display-l: 6rem;
222
+ --font-size-display-l-mobile: 3.5rem;
223
+ --line-height-display-l-mobile: 4rem;
202
224
  --letter-spacing-body: 0;
203
225
  --letter-spacing-ui: 0;
204
226
  --letter-spacing-heading: -0.02em;