@octaviaflow/type 1.0.0 → 2.0.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.
- package/es/index.js +252 -318
- package/lib/index.js +252 -318
- package/package.json +9 -12
- package/umd/index.js +252 -318
package/lib/index.js
CHANGED
|
@@ -4,18 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var layout = require('@octaviaflow/layout');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
* Copyright OctaviaFlow
|
|
9
|
-
* Author: Vishal Kumar
|
|
10
|
-
* Created: 11/November/2025
|
|
11
|
-
*
|
|
12
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
13
|
-
* LICENSE file in the root directory of this source tree.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
|
|
17
|
-
// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
|
|
18
|
-
var fontFamilies = {
|
|
7
|
+
const fontFamilies = {
|
|
19
8
|
mono: "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
|
|
20
9
|
sans: "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif",
|
|
21
10
|
sansCondensed: "'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif",
|
|
@@ -24,66 +13,49 @@ var fontFamilies = {
|
|
|
24
13
|
};
|
|
25
14
|
function fontFamily(name) {
|
|
26
15
|
if (!fontFamilies[name]) {
|
|
27
|
-
throw new Error(
|
|
16
|
+
throw new Error(
|
|
17
|
+
`Unable to find font family: \`${name}\`. Expected one of: [${Object.keys(fontFamilies).join(", ")}]`
|
|
18
|
+
);
|
|
28
19
|
}
|
|
29
20
|
return {
|
|
30
21
|
fontFamily: fontFamilies[name]
|
|
31
22
|
};
|
|
32
23
|
}
|
|
33
24
|
|
|
34
|
-
|
|
35
|
-
* Copyright OctaviaFlow
|
|
36
|
-
* Author: Vishal Kumar
|
|
37
|
-
* Created: 11/November/2025
|
|
38
|
-
*
|
|
39
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
40
|
-
* LICENSE file in the root directory of this source tree.
|
|
41
|
-
*/
|
|
42
|
-
|
|
43
|
-
var fontWeights = {
|
|
25
|
+
const fontWeights = {
|
|
44
26
|
light: 300,
|
|
45
27
|
regular: 400,
|
|
46
28
|
semibold: 600
|
|
47
29
|
};
|
|
48
30
|
function fontWeight(weight) {
|
|
49
31
|
if (!fontWeights[weight]) {
|
|
50
|
-
throw new Error(
|
|
32
|
+
throw new Error(
|
|
33
|
+
`Unable to find font weight: \`${weight}\`. Expected one of: [${Object.keys(fontWeights).join(", ")}]`
|
|
34
|
+
);
|
|
51
35
|
}
|
|
52
36
|
return {
|
|
53
37
|
fontWeight: fontWeights[weight]
|
|
54
38
|
};
|
|
55
39
|
}
|
|
56
40
|
|
|
57
|
-
/**
|
|
58
|
-
* Copyright OctaviaFlow
|
|
59
|
-
* Author: Vishal Kumar
|
|
60
|
-
* Created: 11/November/2025
|
|
61
|
-
*
|
|
62
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
63
|
-
* LICENSE file in the root directory of this source tree.
|
|
64
|
-
*/
|
|
65
|
-
|
|
66
41
|
function print(block) {
|
|
67
|
-
return Object.keys(block).reduce(
|
|
68
|
-
|
|
69
|
-
// tokens for fluid type and should not be printed. In the future, we should
|
|
70
|
-
// tie this to media query outputs.
|
|
71
|
-
if (key === 'breakpoints') {
|
|
42
|
+
return Object.keys(block).reduce((acc, key, index) => {
|
|
43
|
+
if (key === "breakpoints") {
|
|
72
44
|
return acc;
|
|
73
45
|
}
|
|
74
|
-
|
|
46
|
+
const property = `${paramCase(key)}: ${block[key]};`;
|
|
75
47
|
if (index === 0) {
|
|
76
48
|
return property;
|
|
77
49
|
}
|
|
78
|
-
return acc +
|
|
79
|
-
},
|
|
50
|
+
return acc + "\n" + property;
|
|
51
|
+
}, "");
|
|
80
52
|
}
|
|
81
53
|
function paramCase(string) {
|
|
82
|
-
|
|
83
|
-
for (
|
|
84
|
-
|
|
54
|
+
let result = "";
|
|
55
|
+
for (let i = 0; i < string.length; i++) {
|
|
56
|
+
const character = string[i];
|
|
85
57
|
if (character === character.toUpperCase()) {
|
|
86
|
-
result +=
|
|
58
|
+
result += "-" + character.toLowerCase();
|
|
87
59
|
continue;
|
|
88
60
|
}
|
|
89
61
|
result += character;
|
|
@@ -91,24 +63,16 @@ function paramCase(string) {
|
|
|
91
63
|
return result;
|
|
92
64
|
}
|
|
93
65
|
|
|
94
|
-
|
|
95
|
-
* Copyright OctaviaFlow
|
|
96
|
-
* Author: Vishal Kumar
|
|
97
|
-
* Created: 11/November/2025
|
|
98
|
-
*
|
|
99
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
100
|
-
* LICENSE file in the root directory of this source tree.
|
|
101
|
-
*/
|
|
102
|
-
var reset = {
|
|
66
|
+
const reset = {
|
|
103
67
|
html: {
|
|
104
68
|
fontSize: layout.px(layout.baseFontSize)
|
|
105
69
|
},
|
|
106
70
|
body: {
|
|
107
71
|
fontFamily: fontFamilies.sans,
|
|
108
72
|
fontWeight: fontWeights.regular,
|
|
109
|
-
textRendering:
|
|
110
|
-
|
|
111
|
-
|
|
73
|
+
textRendering: "optimizeLegibility",
|
|
74
|
+
"-webkit-font-smoothing": "antialiased",
|
|
75
|
+
"-moz-osx-font-smoothing": "grayscale"
|
|
112
76
|
},
|
|
113
77
|
strong: {
|
|
114
78
|
fontWeight: fontWeights.semibold
|
|
@@ -118,242 +82,173 @@ var reset = {
|
|
|
118
82
|
}
|
|
119
83
|
};
|
|
120
84
|
|
|
121
|
-
/**
|
|
122
|
-
* Copyright OctaviaFlow
|
|
123
|
-
* Author: Vishal Kumar
|
|
124
|
-
* Created: 11/November/2025
|
|
125
|
-
*
|
|
126
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
127
|
-
* LICENSE file in the root directory of this source tree.
|
|
128
|
-
*/
|
|
129
|
-
|
|
130
|
-
/**
|
|
131
|
-
* Get the type size for the given step
|
|
132
|
-
* @param {number} step
|
|
133
|
-
* @returns {number}
|
|
134
|
-
*/
|
|
135
85
|
function getTypeSize(step) {
|
|
136
86
|
if (step <= 1) {
|
|
137
87
|
return 12;
|
|
138
88
|
}
|
|
139
|
-
// Yn = Yn-1 + {FLOOR[(n - 2) / 4] + 1} * 2
|
|
140
89
|
return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
|
|
141
90
|
}
|
|
91
|
+
const scale = [
|
|
92
|
+
12,
|
|
93
|
+
14,
|
|
94
|
+
16,
|
|
95
|
+
18,
|
|
96
|
+
20,
|
|
97
|
+
24,
|
|
98
|
+
28,
|
|
99
|
+
32,
|
|
100
|
+
36,
|
|
101
|
+
42,
|
|
102
|
+
48,
|
|
103
|
+
54,
|
|
104
|
+
60,
|
|
105
|
+
68,
|
|
106
|
+
76,
|
|
107
|
+
84,
|
|
108
|
+
92,
|
|
109
|
+
102,
|
|
110
|
+
112,
|
|
111
|
+
122,
|
|
112
|
+
132,
|
|
113
|
+
144,
|
|
114
|
+
156
|
|
115
|
+
];
|
|
142
116
|
|
|
143
|
-
|
|
144
|
-
* The default type scale for 23 steps. Inlined as an array here through running
|
|
145
|
-
* the follow step:
|
|
146
|
-
*
|
|
147
|
-
* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
148
|
-
*/
|
|
149
|
-
var scale = [12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 54, 60, 68, 76, 84, 92, 102, 112, 122, 132, 144, 156];
|
|
150
|
-
|
|
151
|
-
function _defineProperty(e, r, t) {
|
|
152
|
-
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
153
|
-
value: t,
|
|
154
|
-
enumerable: !0,
|
|
155
|
-
configurable: !0,
|
|
156
|
-
writable: !0
|
|
157
|
-
}) : e[r] = t, e;
|
|
158
|
-
}
|
|
159
|
-
function ownKeys(e, r) {
|
|
160
|
-
var t = Object.keys(e);
|
|
161
|
-
if (Object.getOwnPropertySymbols) {
|
|
162
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
163
|
-
r && (o = o.filter(function (r) {
|
|
164
|
-
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
165
|
-
})), t.push.apply(t, o);
|
|
166
|
-
}
|
|
167
|
-
return t;
|
|
168
|
-
}
|
|
169
|
-
function _objectSpread2(e) {
|
|
170
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
171
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
172
|
-
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
|
173
|
-
_defineProperty(e, r, t[r]);
|
|
174
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
175
|
-
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
176
|
-
});
|
|
177
|
-
}
|
|
178
|
-
return e;
|
|
179
|
-
}
|
|
180
|
-
function _objectWithoutProperties(e, t) {
|
|
181
|
-
if (null == e) return {};
|
|
182
|
-
var o,
|
|
183
|
-
r,
|
|
184
|
-
i = _objectWithoutPropertiesLoose(e, t);
|
|
185
|
-
if (Object.getOwnPropertySymbols) {
|
|
186
|
-
var n = Object.getOwnPropertySymbols(e);
|
|
187
|
-
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
|
188
|
-
}
|
|
189
|
-
return i;
|
|
190
|
-
}
|
|
191
|
-
function _objectWithoutPropertiesLoose(r, e) {
|
|
192
|
-
if (null == r) return {};
|
|
193
|
-
var t = {};
|
|
194
|
-
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
195
|
-
if (-1 !== e.indexOf(n)) continue;
|
|
196
|
-
t[n] = r[n];
|
|
197
|
-
}
|
|
198
|
-
return t;
|
|
199
|
-
}
|
|
200
|
-
function _toPrimitive(t, r) {
|
|
201
|
-
if ("object" != typeof t || !t) return t;
|
|
202
|
-
var e = t[Symbol.toPrimitive];
|
|
203
|
-
if (void 0 !== e) {
|
|
204
|
-
var i = e.call(t, r || "default");
|
|
205
|
-
if ("object" != typeof i) return i;
|
|
206
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
207
|
-
}
|
|
208
|
-
return ("string" === r ? String : Number)(t);
|
|
209
|
-
}
|
|
210
|
-
function _toPropertyKey(t) {
|
|
211
|
-
var i = _toPrimitive(t, "string");
|
|
212
|
-
return "symbol" == typeof i ? i : i + "";
|
|
213
|
-
}
|
|
214
|
-
function _typeof(o) {
|
|
215
|
-
"@babel/helpers - typeof";
|
|
216
|
-
|
|
217
|
-
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
|
|
218
|
-
return typeof o;
|
|
219
|
-
} : function (o) {
|
|
220
|
-
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
|
221
|
-
}, _typeof(o);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
var caption01$1 = {
|
|
117
|
+
const caption01$1 = {
|
|
225
118
|
fontSize: layout.rem(scale[0]),
|
|
226
119
|
fontWeight: fontWeights.regular,
|
|
227
120
|
lineHeight: 1.33333,
|
|
228
121
|
letterSpacing: layout.px(0.32)
|
|
229
122
|
};
|
|
230
|
-
|
|
123
|
+
const caption02$1 = {
|
|
231
124
|
fontSize: layout.rem(scale[1]),
|
|
232
125
|
fontWeight: fontWeights.regular,
|
|
233
126
|
lineHeight: 1.28572,
|
|
234
127
|
letterSpacing: layout.px(0.32)
|
|
235
128
|
};
|
|
236
|
-
|
|
129
|
+
const label01$1 = {
|
|
237
130
|
fontSize: layout.rem(scale[0]),
|
|
238
131
|
fontWeight: fontWeights.regular,
|
|
239
132
|
lineHeight: 1.33333,
|
|
240
133
|
letterSpacing: layout.px(0.32)
|
|
241
134
|
};
|
|
242
|
-
|
|
135
|
+
const label02$1 = {
|
|
243
136
|
fontSize: layout.rem(scale[1]),
|
|
244
137
|
fontWeight: fontWeights.regular,
|
|
245
138
|
lineHeight: 1.28572,
|
|
246
139
|
letterSpacing: layout.px(0.16)
|
|
247
140
|
};
|
|
248
|
-
|
|
141
|
+
const helperText01$1 = {
|
|
249
142
|
fontSize: layout.rem(scale[0]),
|
|
250
143
|
lineHeight: 1.33333,
|
|
251
144
|
letterSpacing: layout.px(0.32)
|
|
252
145
|
};
|
|
253
|
-
|
|
146
|
+
const helperText02$1 = {
|
|
254
147
|
fontSize: layout.rem(scale[1]),
|
|
255
148
|
lineHeight: 1.28572,
|
|
256
149
|
letterSpacing: layout.px(0.16)
|
|
257
150
|
};
|
|
258
|
-
|
|
151
|
+
const bodyShort01$1 = {
|
|
259
152
|
fontSize: layout.rem(scale[1]),
|
|
260
153
|
fontWeight: fontWeights.regular,
|
|
261
154
|
lineHeight: 1.28572,
|
|
262
155
|
letterSpacing: layout.px(0.16)
|
|
263
156
|
};
|
|
264
|
-
|
|
157
|
+
const bodyLong01$1 = {
|
|
265
158
|
fontSize: layout.rem(scale[1]),
|
|
266
159
|
fontWeight: fontWeights.regular,
|
|
267
160
|
lineHeight: 1.42857,
|
|
268
161
|
letterSpacing: layout.px(0.16)
|
|
269
162
|
};
|
|
270
|
-
|
|
163
|
+
const bodyShort02$1 = {
|
|
271
164
|
fontSize: layout.rem(scale[2]),
|
|
272
165
|
fontWeight: fontWeights.regular,
|
|
273
166
|
lineHeight: 1.375,
|
|
274
167
|
letterSpacing: 0
|
|
275
168
|
};
|
|
276
|
-
|
|
169
|
+
const bodyLong02$1 = {
|
|
277
170
|
fontSize: layout.rem(scale[2]),
|
|
278
171
|
fontWeight: fontWeights.regular,
|
|
279
172
|
lineHeight: 1.5,
|
|
280
173
|
letterSpacing: 0
|
|
281
174
|
};
|
|
282
|
-
|
|
175
|
+
const code01$1 = {
|
|
283
176
|
fontFamily: fontFamilies.mono,
|
|
284
177
|
fontSize: layout.rem(scale[0]),
|
|
285
178
|
fontWeight: fontWeights.regular,
|
|
286
179
|
lineHeight: 1.33333,
|
|
287
180
|
letterSpacing: layout.px(0.32)
|
|
288
181
|
};
|
|
289
|
-
|
|
182
|
+
const code02$1 = {
|
|
290
183
|
fontFamily: fontFamilies.mono,
|
|
291
184
|
fontSize: layout.rem(scale[1]),
|
|
292
185
|
fontWeight: fontWeights.regular,
|
|
293
186
|
lineHeight: 1.42857,
|
|
294
187
|
letterSpacing: layout.px(0.32)
|
|
295
188
|
};
|
|
296
|
-
|
|
189
|
+
const heading01$1 = {
|
|
297
190
|
fontSize: layout.rem(scale[1]),
|
|
298
191
|
fontWeight: fontWeights.semibold,
|
|
299
192
|
lineHeight: 1.42857,
|
|
300
193
|
letterSpacing: layout.px(0.16)
|
|
301
194
|
};
|
|
302
|
-
|
|
195
|
+
const productiveHeading01$1 = {
|
|
303
196
|
fontSize: layout.rem(scale[1]),
|
|
304
197
|
fontWeight: fontWeights.semibold,
|
|
305
198
|
lineHeight: 1.28572,
|
|
306
199
|
letterSpacing: layout.px(0.16)
|
|
307
200
|
};
|
|
308
|
-
|
|
201
|
+
const heading02$1 = {
|
|
309
202
|
fontSize: layout.rem(scale[2]),
|
|
310
203
|
fontWeight: fontWeights.semibold,
|
|
311
204
|
lineHeight: 1.5,
|
|
312
205
|
letterSpacing: 0
|
|
313
206
|
};
|
|
314
|
-
|
|
207
|
+
const productiveHeading02$1 = {
|
|
315
208
|
fontSize: layout.rem(scale[2]),
|
|
316
209
|
fontWeight: fontWeights.semibold,
|
|
317
210
|
lineHeight: 1.375,
|
|
318
211
|
letterSpacing: 0
|
|
319
212
|
};
|
|
320
|
-
|
|
213
|
+
const productiveHeading03$1 = {
|
|
321
214
|
fontSize: layout.rem(scale[4]),
|
|
322
215
|
fontWeight: fontWeights.regular,
|
|
323
216
|
lineHeight: 1.4,
|
|
324
217
|
letterSpacing: 0
|
|
325
218
|
};
|
|
326
|
-
|
|
219
|
+
const productiveHeading04$1 = {
|
|
327
220
|
fontSize: layout.rem(scale[6]),
|
|
328
221
|
fontWeight: fontWeights.regular,
|
|
329
222
|
lineHeight: 1.28572,
|
|
330
223
|
letterSpacing: 0
|
|
331
224
|
};
|
|
332
|
-
|
|
225
|
+
const productiveHeading05$1 = {
|
|
333
226
|
fontSize: layout.rem(scale[7]),
|
|
334
227
|
fontWeight: fontWeights.regular,
|
|
335
228
|
lineHeight: 1.25,
|
|
336
229
|
letterSpacing: 0
|
|
337
230
|
};
|
|
338
|
-
|
|
231
|
+
const productiveHeading06$1 = {
|
|
339
232
|
fontSize: layout.rem(scale[9]),
|
|
340
233
|
fontWeight: fontWeights.light,
|
|
341
234
|
lineHeight: 1.199,
|
|
342
235
|
letterSpacing: 0
|
|
343
236
|
};
|
|
344
|
-
|
|
237
|
+
const productiveHeading07$1 = {
|
|
345
238
|
fontSize: layout.rem(scale[11]),
|
|
346
239
|
fontWeight: fontWeights.light,
|
|
347
240
|
lineHeight: 1.199,
|
|
348
241
|
letterSpacing: 0
|
|
349
242
|
};
|
|
350
|
-
|
|
243
|
+
const expressiveHeading01$1 = {
|
|
244
|
+
...heading01$1,
|
|
351
245
|
lineHeight: 1.25
|
|
352
|
-
}
|
|
353
|
-
|
|
246
|
+
};
|
|
247
|
+
const expressiveHeading02$1 = {
|
|
248
|
+
...heading02$1,
|
|
354
249
|
lineHeight: 1.5
|
|
355
|
-
}
|
|
356
|
-
|
|
250
|
+
};
|
|
251
|
+
const expressiveHeading03$1 = {
|
|
357
252
|
fontSize: layout.rem(scale[4]),
|
|
358
253
|
fontWeight: fontWeights.regular,
|
|
359
254
|
lineHeight: 1.4,
|
|
@@ -369,7 +264,7 @@ var expressiveHeading03$1 = {
|
|
|
369
264
|
}
|
|
370
265
|
}
|
|
371
266
|
};
|
|
372
|
-
|
|
267
|
+
const expressiveHeading04$1 = {
|
|
373
268
|
fontSize: layout.rem(scale[6]),
|
|
374
269
|
fontWeight: fontWeights.regular,
|
|
375
270
|
lineHeight: 1.28572,
|
|
@@ -386,7 +281,7 @@ var expressiveHeading04$1 = {
|
|
|
386
281
|
}
|
|
387
282
|
}
|
|
388
283
|
};
|
|
389
|
-
|
|
284
|
+
const expressiveHeading05$1 = {
|
|
390
285
|
fontSize: layout.rem(scale[7]),
|
|
391
286
|
fontWeight: fontWeights.regular,
|
|
392
287
|
lineHeight: 1.25,
|
|
@@ -414,7 +309,7 @@ var expressiveHeading05$1 = {
|
|
|
414
309
|
}
|
|
415
310
|
}
|
|
416
311
|
};
|
|
417
|
-
|
|
312
|
+
const expressiveHeading06$1 = {
|
|
418
313
|
fontSize: layout.rem(scale[7]),
|
|
419
314
|
fontWeight: fontWeights.semibold,
|
|
420
315
|
lineHeight: 1.25,
|
|
@@ -445,7 +340,7 @@ var expressiveHeading06$1 = {
|
|
|
445
340
|
}
|
|
446
341
|
}
|
|
447
342
|
};
|
|
448
|
-
|
|
343
|
+
const expressiveParagraph01$1 = {
|
|
449
344
|
fontSize: layout.rem(scale[5]),
|
|
450
345
|
fontWeight: fontWeights.light,
|
|
451
346
|
lineHeight: 1.334,
|
|
@@ -461,7 +356,7 @@ var expressiveParagraph01$1 = {
|
|
|
461
356
|
}
|
|
462
357
|
}
|
|
463
358
|
};
|
|
464
|
-
|
|
359
|
+
const quotation01$1 = {
|
|
465
360
|
fontFamily: fontFamilies.serif,
|
|
466
361
|
fontSize: layout.rem(scale[4]),
|
|
467
362
|
fontWeight: fontWeights.regular,
|
|
@@ -493,7 +388,7 @@ var quotation01$1 = {
|
|
|
493
388
|
}
|
|
494
389
|
}
|
|
495
390
|
};
|
|
496
|
-
|
|
391
|
+
const quotation02$1 = {
|
|
497
392
|
fontFamily: fontFamilies.serif,
|
|
498
393
|
fontSize: layout.rem(scale[7]),
|
|
499
394
|
fontWeight: fontWeights.light,
|
|
@@ -517,7 +412,7 @@ var quotation02$1 = {
|
|
|
517
412
|
}
|
|
518
413
|
}
|
|
519
414
|
};
|
|
520
|
-
|
|
415
|
+
const display01$1 = {
|
|
521
416
|
fontSize: layout.rem(scale[9]),
|
|
522
417
|
fontWeight: fontWeights.light,
|
|
523
418
|
lineHeight: 1.19,
|
|
@@ -539,7 +434,7 @@ var display01$1 = {
|
|
|
539
434
|
}
|
|
540
435
|
}
|
|
541
436
|
};
|
|
542
|
-
|
|
437
|
+
const display02$1 = {
|
|
543
438
|
fontSize: layout.rem(scale[9]),
|
|
544
439
|
fontWeight: fontWeights.semibold,
|
|
545
440
|
lineHeight: 1.19,
|
|
@@ -561,7 +456,7 @@ var display02$1 = {
|
|
|
561
456
|
}
|
|
562
457
|
}
|
|
563
458
|
};
|
|
564
|
-
|
|
459
|
+
const display03$1 = {
|
|
565
460
|
fontSize: layout.rem(scale[9]),
|
|
566
461
|
fontWeight: fontWeights.light,
|
|
567
462
|
lineHeight: 1.19,
|
|
@@ -587,7 +482,7 @@ var display03$1 = {
|
|
|
587
482
|
}
|
|
588
483
|
}
|
|
589
484
|
};
|
|
590
|
-
|
|
485
|
+
const display04$1 = {
|
|
591
486
|
fontSize: layout.rem(scale[9]),
|
|
592
487
|
fontWeight: fontWeights.light,
|
|
593
488
|
lineHeight: 1.19,
|
|
@@ -614,53 +509,40 @@ var display04$1 = {
|
|
|
614
509
|
}
|
|
615
510
|
}
|
|
616
511
|
};
|
|
617
|
-
|
|
618
|
-
// Type changes - V11
|
|
619
|
-
|
|
620
|
-
// Small styles
|
|
621
|
-
// No changes for code-01, code-02, label-01, label-02
|
|
622
|
-
var legal01$1 = {
|
|
512
|
+
const legal01$1 = {
|
|
623
513
|
fontSize: layout.rem(scale[0]),
|
|
624
514
|
fontWeight: fontWeights.regular,
|
|
625
515
|
lineHeight: 1.33333,
|
|
626
516
|
letterSpacing: layout.px(0.32)
|
|
627
517
|
};
|
|
628
|
-
|
|
518
|
+
const legal02$1 = {
|
|
629
519
|
fontSize: layout.rem(scale[1]),
|
|
630
520
|
fontWeight: fontWeights.regular,
|
|
631
521
|
lineHeight: 1.28572,
|
|
632
522
|
letterSpacing: layout.px(0.16)
|
|
633
523
|
};
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
// Additional fluid styles
|
|
657
|
-
var fluidParagraph01$1 = expressiveParagraph01$1;
|
|
658
|
-
var fluidQuotation01$1 = quotation01$1;
|
|
659
|
-
var fluidQuotation02$1 = quotation02$1;
|
|
660
|
-
var fluidDisplay01$1 = display01$1;
|
|
661
|
-
var fluidDisplay02$1 = display02$1;
|
|
662
|
-
var fluidDisplay03$1 = display03$1;
|
|
663
|
-
var fluidDisplay04$1 = display04$1;
|
|
524
|
+
const bodyCompact01$1 = bodyShort01$1;
|
|
525
|
+
const bodyCompact02$1 = bodyShort02$1;
|
|
526
|
+
const body01$1 = bodyLong01$1;
|
|
527
|
+
const body02$1 = bodyLong02$1;
|
|
528
|
+
const headingCompact01$1 = productiveHeading01$1;
|
|
529
|
+
const headingCompact02$1 = productiveHeading02$1;
|
|
530
|
+
const heading03$1 = productiveHeading03$1;
|
|
531
|
+
const heading04$1 = productiveHeading04$1;
|
|
532
|
+
const heading05$1 = productiveHeading05$1;
|
|
533
|
+
const heading06$1 = productiveHeading06$1;
|
|
534
|
+
const heading07$1 = productiveHeading07$1;
|
|
535
|
+
const fluidHeading03$1 = expressiveHeading03$1;
|
|
536
|
+
const fluidHeading04$1 = expressiveHeading04$1;
|
|
537
|
+
const fluidHeading05$1 = expressiveHeading05$1;
|
|
538
|
+
const fluidHeading06$1 = expressiveHeading06$1;
|
|
539
|
+
const fluidParagraph01$1 = expressiveParagraph01$1;
|
|
540
|
+
const fluidQuotation01$1 = quotation01$1;
|
|
541
|
+
const fluidQuotation02$1 = quotation02$1;
|
|
542
|
+
const fluidDisplay01$1 = display01$1;
|
|
543
|
+
const fluidDisplay02$1 = display02$1;
|
|
544
|
+
const fluidDisplay03$1 = display03$1;
|
|
545
|
+
const fluidDisplay04$1 = display04$1;
|
|
664
546
|
|
|
665
547
|
var styles = /*#__PURE__*/Object.freeze({
|
|
666
548
|
__proto__: null,
|
|
@@ -724,41 +606,40 @@ var styles = /*#__PURE__*/Object.freeze({
|
|
|
724
606
|
fluidDisplay04: fluidDisplay04$1
|
|
725
607
|
});
|
|
726
608
|
|
|
727
|
-
|
|
728
|
-
var breakpointNames = Object.keys(layout.breakpoints);
|
|
609
|
+
const breakpointNames = Object.keys(layout.breakpoints);
|
|
729
610
|
function next(name) {
|
|
730
611
|
return breakpointNames[breakpointNames.indexOf(name) + 1];
|
|
731
612
|
}
|
|
732
613
|
function fluid(selector) {
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
if (_typeof(fluidBreakpoints) !== 'object') {
|
|
614
|
+
const { breakpoints: fluidBreakpoints, ...styles } = selector;
|
|
615
|
+
if (typeof fluidBreakpoints !== "object") {
|
|
736
616
|
return styles;
|
|
737
617
|
}
|
|
738
|
-
|
|
618
|
+
const fluidBreakpointNames = Object.keys(fluidBreakpoints);
|
|
739
619
|
if (fluidBreakpointNames.length === 0) {
|
|
740
620
|
return styles;
|
|
741
621
|
}
|
|
742
|
-
styles.fontSize = fluidTypeSize(styles,
|
|
743
|
-
fluidBreakpointNames.forEach(
|
|
744
|
-
styles[layout.breakpoint(name)] =
|
|
622
|
+
styles.fontSize = fluidTypeSize(styles, "sm", fluidBreakpoints);
|
|
623
|
+
fluidBreakpointNames.forEach((name) => {
|
|
624
|
+
styles[layout.breakpoint(name)] = {
|
|
625
|
+
...fluidBreakpoints[name],
|
|
745
626
|
fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
|
|
746
|
-
}
|
|
627
|
+
};
|
|
747
628
|
});
|
|
748
629
|
return styles;
|
|
749
630
|
}
|
|
750
631
|
function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
632
|
+
const breakpoint = layout.breakpoints[fluidBreakpointName];
|
|
633
|
+
const fluidBreakpoint = fluidBreakpointName === "sm" ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
|
|
634
|
+
let maxFontSize = defaultStyles.fontSize;
|
|
635
|
+
let minFontSize = defaultStyles.fontSize;
|
|
755
636
|
if (fluidBreakpoint.fontSize) {
|
|
756
637
|
minFontSize = fluidBreakpoint.fontSize;
|
|
757
638
|
}
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
639
|
+
let maxViewportWidth = breakpoint.width;
|
|
640
|
+
let minViewportWidth = breakpoint.width;
|
|
641
|
+
let nextBreakpointAvailable = next(fluidBreakpointName);
|
|
642
|
+
let nextFluidBreakpointName = null;
|
|
762
643
|
while (nextBreakpointAvailable) {
|
|
763
644
|
if (fluidBreakpoints[nextBreakpointAvailable]) {
|
|
764
645
|
nextFluidBreakpointName = nextBreakpointAvailable;
|
|
@@ -767,10 +648,16 @@ function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
|
|
|
767
648
|
nextBreakpointAvailable = next(nextBreakpointAvailable);
|
|
768
649
|
}
|
|
769
650
|
if (nextFluidBreakpointName) {
|
|
770
|
-
|
|
651
|
+
const nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
|
|
771
652
|
maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
|
|
772
653
|
maxViewportWidth = nextFluidBreakpoint.width;
|
|
773
|
-
return
|
|
654
|
+
return `calc(${minFontSize} + ${subtract(
|
|
655
|
+
maxFontSize,
|
|
656
|
+
minFontSize
|
|
657
|
+
)} * ((100vw - ${minViewportWidth}) / ${subtract(
|
|
658
|
+
maxViewportWidth,
|
|
659
|
+
minViewportWidth
|
|
660
|
+
)}))`;
|
|
774
661
|
}
|
|
775
662
|
return minFontSize;
|
|
776
663
|
}
|
|
@@ -778,78 +665,125 @@ function subtract(a, b) {
|
|
|
778
665
|
return parseFloat(a) - parseFloat(b);
|
|
779
666
|
}
|
|
780
667
|
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
668
|
+
const caption01 = "caption01";
|
|
669
|
+
const caption02 = "caption02";
|
|
670
|
+
const label01 = "label01";
|
|
671
|
+
const label02 = "label02";
|
|
672
|
+
const helperText01 = "helperText01";
|
|
673
|
+
const helperText02 = "helperText02";
|
|
674
|
+
const bodyShort01 = "bodyShort01";
|
|
675
|
+
const bodyLong01 = "bodyLong01";
|
|
676
|
+
const bodyShort02 = "bodyShort02";
|
|
677
|
+
const bodyLong02 = "bodyLong02";
|
|
678
|
+
const code01 = "code01";
|
|
679
|
+
const code02 = "code02";
|
|
680
|
+
const heading01 = "heading01";
|
|
681
|
+
const productiveHeading01 = "productiveHeading01";
|
|
682
|
+
const heading02 = "heading02";
|
|
683
|
+
const productiveHeading02 = "productiveHeading02";
|
|
684
|
+
const productiveHeading03 = "productiveHeading03";
|
|
685
|
+
const productiveHeading04 = "productiveHeading04";
|
|
686
|
+
const productiveHeading05 = "productiveHeading05";
|
|
687
|
+
const productiveHeading06 = "productiveHeading06";
|
|
688
|
+
const productiveHeading07 = "productiveHeading07";
|
|
689
|
+
const expressiveHeading01 = "expressiveHeading01";
|
|
690
|
+
const expressiveHeading02 = "expressiveHeading02";
|
|
691
|
+
const expressiveHeading03 = "expressiveHeading03";
|
|
692
|
+
const expressiveHeading04 = "expressiveHeading04";
|
|
693
|
+
const expressiveHeading05 = "expressiveHeading05";
|
|
694
|
+
const expressiveHeading06 = "expressiveHeading06";
|
|
695
|
+
const expressiveParagraph01 = "expressiveParagraph01";
|
|
696
|
+
const quotation01 = "quotation01";
|
|
697
|
+
const quotation02 = "quotation02";
|
|
698
|
+
const display01 = "display01";
|
|
699
|
+
const display02 = "display02";
|
|
700
|
+
const display03 = "display03";
|
|
701
|
+
const display04 = "display04";
|
|
702
|
+
const legal01 = "legal01";
|
|
703
|
+
const legal02 = "legal02";
|
|
704
|
+
const bodyCompact01 = "bodyCompact01";
|
|
705
|
+
const bodyCompact02 = "bodyCompact02";
|
|
706
|
+
const body01 = "body01";
|
|
707
|
+
const body02 = "body02";
|
|
708
|
+
const headingCompact01 = "headingCompact01";
|
|
709
|
+
const headingCompact02 = "headingCompact02";
|
|
710
|
+
const heading03 = "heading03";
|
|
711
|
+
const heading04 = "heading04";
|
|
712
|
+
const heading05 = "heading05";
|
|
713
|
+
const heading06 = "heading06";
|
|
714
|
+
const heading07 = "heading07";
|
|
715
|
+
const fluidHeading03 = "fluidHeading03";
|
|
716
|
+
const fluidHeading04 = "fluidHeading04";
|
|
717
|
+
const fluidHeading05 = "fluidHeading05";
|
|
718
|
+
const fluidHeading06 = "fluidHeading06";
|
|
719
|
+
const fluidParagraph01 = "fluidParagraph01";
|
|
720
|
+
const fluidQuotation01 = "fluidQuotation01";
|
|
721
|
+
const fluidQuotation02 = "fluidQuotation02";
|
|
722
|
+
const fluidDisplay01 = "fluidDisplay01";
|
|
723
|
+
const fluidDisplay02 = "fluidDisplay02";
|
|
724
|
+
const fluidDisplay03 = "fluidDisplay03";
|
|
725
|
+
const fluidDisplay04 = "fluidDisplay04";
|
|
726
|
+
const unstable_tokens = [
|
|
727
|
+
caption01,
|
|
728
|
+
caption02,
|
|
729
|
+
label01,
|
|
730
|
+
label02,
|
|
731
|
+
helperText01,
|
|
732
|
+
helperText02,
|
|
733
|
+
bodyShort01,
|
|
734
|
+
bodyLong01,
|
|
735
|
+
bodyShort02,
|
|
736
|
+
bodyLong02,
|
|
737
|
+
code01,
|
|
738
|
+
code02,
|
|
739
|
+
heading01,
|
|
740
|
+
productiveHeading01,
|
|
741
|
+
heading02,
|
|
742
|
+
productiveHeading02,
|
|
743
|
+
productiveHeading03,
|
|
744
|
+
productiveHeading04,
|
|
745
|
+
productiveHeading05,
|
|
746
|
+
productiveHeading06,
|
|
747
|
+
productiveHeading07,
|
|
748
|
+
expressiveHeading01,
|
|
749
|
+
expressiveHeading02,
|
|
750
|
+
expressiveHeading03,
|
|
751
|
+
expressiveHeading04,
|
|
752
|
+
expressiveHeading05,
|
|
753
|
+
expressiveHeading06,
|
|
754
|
+
expressiveParagraph01,
|
|
755
|
+
quotation01,
|
|
756
|
+
quotation02,
|
|
757
|
+
display01,
|
|
758
|
+
display02,
|
|
759
|
+
display03,
|
|
760
|
+
display04,
|
|
761
|
+
// V11 Tokens
|
|
762
|
+
legal01,
|
|
763
|
+
legal02,
|
|
764
|
+
bodyCompact01,
|
|
765
|
+
bodyCompact02,
|
|
766
|
+
body01,
|
|
767
|
+
body02,
|
|
768
|
+
headingCompact01,
|
|
769
|
+
headingCompact02,
|
|
770
|
+
heading03,
|
|
771
|
+
heading04,
|
|
772
|
+
heading05,
|
|
773
|
+
heading06,
|
|
774
|
+
heading07,
|
|
775
|
+
fluidHeading03,
|
|
776
|
+
fluidHeading04,
|
|
777
|
+
fluidHeading05,
|
|
778
|
+
fluidHeading06,
|
|
779
|
+
fluidParagraph01,
|
|
780
|
+
fluidQuotation01,
|
|
781
|
+
fluidQuotation02,
|
|
782
|
+
fluidDisplay01,
|
|
783
|
+
fluidDisplay02,
|
|
784
|
+
fluidDisplay03,
|
|
785
|
+
fluidDisplay04
|
|
786
|
+
];
|
|
853
787
|
|
|
854
788
|
exports.body01 = body01$1;
|
|
855
789
|
exports.body02 = body02$1;
|