@carbon/type 11.17.0 → 11.18.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 +39 -54
- package/lib/index.js +39 -54
- package/package.json +7 -7
- package/scss/_styles.scss +24 -0
- package/umd/index.js +39 -54
package/es/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import { px, baseFontSize, rem, breakpoint, breakpoints } from '@carbon/layout';
|
|
|
6
6
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
|
+
|
|
9
10
|
// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
|
|
10
11
|
// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
|
|
11
12
|
var fontFamilies = {
|
|
@@ -19,7 +20,6 @@ function fontFamily(name) {
|
|
|
19
20
|
if (!fontFamilies[name]) {
|
|
20
21
|
throw new Error("Unable to find font family: `".concat(name, "`. Expected one of: ") + "[".concat(Object.keys(fontFamilies).join(', '), "]"));
|
|
21
22
|
}
|
|
22
|
-
|
|
23
23
|
return {
|
|
24
24
|
fontFamily: fontFamilies[name]
|
|
25
25
|
};
|
|
@@ -31,6 +31,7 @@ function fontFamily(name) {
|
|
|
31
31
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
32
32
|
* LICENSE file in the root directory of this source tree.
|
|
33
33
|
*/
|
|
34
|
+
|
|
34
35
|
var fontWeights = {
|
|
35
36
|
light: 300,
|
|
36
37
|
regular: 400,
|
|
@@ -40,7 +41,6 @@ function fontWeight(weight) {
|
|
|
40
41
|
if (!fontWeights[weight]) {
|
|
41
42
|
throw new Error("Unable to find font weight: `".concat(weight, "`. Expected one of: ") + "[".concat(Object.keys(fontWeights).join(', '), "]"));
|
|
42
43
|
}
|
|
43
|
-
|
|
44
44
|
return {
|
|
45
45
|
fontWeight: fontWeights[weight]
|
|
46
46
|
};
|
|
@@ -52,6 +52,7 @@ function fontWeight(weight) {
|
|
|
52
52
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
53
53
|
* LICENSE file in the root directory of this source tree.
|
|
54
54
|
*/
|
|
55
|
+
|
|
55
56
|
function print(block) {
|
|
56
57
|
return Object.keys(block).reduce(function (acc, key, index) {
|
|
57
58
|
// Short-circuit on the foreign key 'breakpoints'. This is used in our
|
|
@@ -60,31 +61,23 @@ function print(block) {
|
|
|
60
61
|
if (key === 'breakpoints') {
|
|
61
62
|
return acc;
|
|
62
63
|
}
|
|
63
|
-
|
|
64
64
|
var property = "".concat(paramCase(key), ": ").concat(block[key], ";");
|
|
65
|
-
|
|
66
65
|
if (index === 0) {
|
|
67
66
|
return property;
|
|
68
67
|
}
|
|
69
|
-
|
|
70
68
|
return acc + '\n' + property;
|
|
71
69
|
}, '');
|
|
72
70
|
}
|
|
73
|
-
|
|
74
71
|
function paramCase(string) {
|
|
75
72
|
var result = '';
|
|
76
|
-
|
|
77
73
|
for (var i = 0; i < string.length; i++) {
|
|
78
74
|
var character = string[i];
|
|
79
|
-
|
|
80
75
|
if (character === character.toUpperCase()) {
|
|
81
76
|
result += '-' + character.toLowerCase();
|
|
82
77
|
continue;
|
|
83
78
|
}
|
|
84
|
-
|
|
85
79
|
result += character;
|
|
86
80
|
}
|
|
87
|
-
|
|
88
81
|
return result;
|
|
89
82
|
}
|
|
90
83
|
|
|
@@ -128,33 +121,29 @@ var reset = {
|
|
|
128
121
|
function getTypeSize(step) {
|
|
129
122
|
if (step <= 1) {
|
|
130
123
|
return 12;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
124
|
+
}
|
|
125
|
+
// Yn = Yn-1 + {FLOOR[(n - 2) / 4] + 1} * 2
|
|
134
126
|
return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
|
|
135
127
|
}
|
|
128
|
+
|
|
136
129
|
/**
|
|
137
130
|
* The default type scale for 23 steps. Inlined as an array here through running
|
|
138
131
|
* the follow step:
|
|
139
132
|
*
|
|
140
133
|
* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
141
134
|
*/
|
|
142
|
-
|
|
143
135
|
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];
|
|
144
136
|
|
|
145
137
|
function ownKeys(object, enumerableOnly) {
|
|
146
138
|
var keys = Object.keys(object);
|
|
147
|
-
|
|
148
139
|
if (Object.getOwnPropertySymbols) {
|
|
149
140
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
150
141
|
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
151
142
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
152
143
|
})), keys.push.apply(keys, symbols);
|
|
153
144
|
}
|
|
154
|
-
|
|
155
145
|
return keys;
|
|
156
146
|
}
|
|
157
|
-
|
|
158
147
|
function _objectSpread2(target) {
|
|
159
148
|
for (var i = 1; i < arguments.length; i++) {
|
|
160
149
|
var source = null != arguments[i] ? arguments[i] : {};
|
|
@@ -164,10 +153,8 @@ function _objectSpread2(target) {
|
|
|
164
153
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
165
154
|
});
|
|
166
155
|
}
|
|
167
|
-
|
|
168
156
|
return target;
|
|
169
157
|
}
|
|
170
|
-
|
|
171
158
|
function _typeof(obj) {
|
|
172
159
|
"@babel/helpers - typeof";
|
|
173
160
|
|
|
@@ -177,8 +164,8 @@ function _typeof(obj) {
|
|
|
177
164
|
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
178
165
|
}, _typeof(obj);
|
|
179
166
|
}
|
|
180
|
-
|
|
181
167
|
function _defineProperty(obj, key, value) {
|
|
168
|
+
key = _toPropertyKey(key);
|
|
182
169
|
if (key in obj) {
|
|
183
170
|
Object.defineProperty(obj, key, {
|
|
184
171
|
value: value,
|
|
@@ -189,35 +176,26 @@ function _defineProperty(obj, key, value) {
|
|
|
189
176
|
} else {
|
|
190
177
|
obj[key] = value;
|
|
191
178
|
}
|
|
192
|
-
|
|
193
179
|
return obj;
|
|
194
180
|
}
|
|
195
|
-
|
|
196
181
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
197
182
|
if (source == null) return {};
|
|
198
183
|
var target = {};
|
|
199
184
|
var sourceKeys = Object.keys(source);
|
|
200
185
|
var key, i;
|
|
201
|
-
|
|
202
186
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
203
187
|
key = sourceKeys[i];
|
|
204
188
|
if (excluded.indexOf(key) >= 0) continue;
|
|
205
189
|
target[key] = source[key];
|
|
206
190
|
}
|
|
207
|
-
|
|
208
191
|
return target;
|
|
209
192
|
}
|
|
210
|
-
|
|
211
193
|
function _objectWithoutProperties(source, excluded) {
|
|
212
194
|
if (source == null) return {};
|
|
213
|
-
|
|
214
195
|
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
215
|
-
|
|
216
196
|
var key, i;
|
|
217
|
-
|
|
218
197
|
if (Object.getOwnPropertySymbols) {
|
|
219
198
|
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
220
|
-
|
|
221
199
|
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
222
200
|
key = sourceSymbolKeys[i];
|
|
223
201
|
if (excluded.indexOf(key) >= 0) continue;
|
|
@@ -225,9 +203,22 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
225
203
|
target[key] = source[key];
|
|
226
204
|
}
|
|
227
205
|
}
|
|
228
|
-
|
|
229
206
|
return target;
|
|
230
207
|
}
|
|
208
|
+
function _toPrimitive(input, hint) {
|
|
209
|
+
if (typeof input !== "object" || input === null) return input;
|
|
210
|
+
var prim = input[Symbol.toPrimitive];
|
|
211
|
+
if (prim !== undefined) {
|
|
212
|
+
var res = prim.call(input, hint || "default");
|
|
213
|
+
if (typeof res !== "object") return res;
|
|
214
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
215
|
+
}
|
|
216
|
+
return (hint === "string" ? String : Number)(input);
|
|
217
|
+
}
|
|
218
|
+
function _toPropertyKey(arg) {
|
|
219
|
+
var key = _toPrimitive(arg, "string");
|
|
220
|
+
return typeof key === "symbol" ? key : String(key);
|
|
221
|
+
}
|
|
231
222
|
|
|
232
223
|
var caption01$1 = {
|
|
233
224
|
fontSize: rem(scale[0]),
|
|
@@ -621,10 +612,12 @@ var display04$1 = {
|
|
|
621
612
|
letterSpacing: px(-0.96)
|
|
622
613
|
}
|
|
623
614
|
}
|
|
624
|
-
};
|
|
615
|
+
};
|
|
616
|
+
|
|
617
|
+
// Type changes - V11
|
|
618
|
+
|
|
625
619
|
// Small styles
|
|
626
620
|
// No changes for code-01, code-02, label-01, label-02
|
|
627
|
-
|
|
628
621
|
var legal01$1 = {
|
|
629
622
|
fontSize: rem(scale[0]),
|
|
630
623
|
fontWeight: fontWeights.regular,
|
|
@@ -636,26 +629,30 @@ var legal02$1 = {
|
|
|
636
629
|
fontWeight: fontWeights.regular,
|
|
637
630
|
lineHeight: 1.28572,
|
|
638
631
|
letterSpacing: px(0.16)
|
|
639
|
-
};
|
|
632
|
+
};
|
|
640
633
|
|
|
634
|
+
// Body styles
|
|
641
635
|
var bodyCompact01$1 = bodyShort01$1;
|
|
642
636
|
var bodyCompact02$1 = bodyShort02$1;
|
|
643
637
|
var body01$1 = bodyLong01$1;
|
|
644
|
-
var body02$1 = bodyLong02$1;
|
|
638
|
+
var body02$1 = bodyLong02$1;
|
|
645
639
|
|
|
640
|
+
// Fixed heading styles
|
|
646
641
|
var headingCompact01$1 = productiveHeading01$1;
|
|
647
642
|
var headingCompact02$1 = productiveHeading02$1;
|
|
648
643
|
var heading03$1 = productiveHeading03$1;
|
|
649
644
|
var heading04$1 = productiveHeading04$1;
|
|
650
645
|
var heading05$1 = productiveHeading05$1;
|
|
651
646
|
var heading06$1 = productiveHeading06$1;
|
|
652
|
-
var heading07$1 = productiveHeading07$1;
|
|
647
|
+
var heading07$1 = productiveHeading07$1;
|
|
653
648
|
|
|
649
|
+
// Fluid heading styles
|
|
654
650
|
var fluidHeading03$1 = expressiveHeading03$1;
|
|
655
651
|
var fluidHeading04$1 = expressiveHeading04$1;
|
|
656
652
|
var fluidHeading05$1 = expressiveHeading05$1;
|
|
657
|
-
var fluidHeading06$1 = expressiveHeading06$1;
|
|
653
|
+
var fluidHeading06$1 = expressiveHeading06$1;
|
|
658
654
|
|
|
655
|
+
// Additional fluid styles
|
|
659
656
|
var fluidParagraph01$1 = expressiveParagraph01$1;
|
|
660
657
|
var fluidQuotation01$1 = quotation01$1;
|
|
661
658
|
var fluidQuotation02$1 = quotation02$1;
|
|
@@ -728,25 +725,19 @@ var styles = /*#__PURE__*/Object.freeze({
|
|
|
728
725
|
|
|
729
726
|
var _excluded = ["breakpoints"];
|
|
730
727
|
var breakpointNames = Object.keys(breakpoints);
|
|
731
|
-
|
|
732
728
|
function next(name) {
|
|
733
729
|
return breakpointNames[breakpointNames.indexOf(name) + 1];
|
|
734
730
|
}
|
|
735
|
-
|
|
736
731
|
function fluid(selector) {
|
|
737
732
|
var fluidBreakpoints = selector.breakpoints,
|
|
738
|
-
|
|
739
|
-
|
|
733
|
+
styles = _objectWithoutProperties(selector, _excluded);
|
|
740
734
|
if (_typeof(fluidBreakpoints) !== 'object') {
|
|
741
735
|
return styles;
|
|
742
736
|
}
|
|
743
|
-
|
|
744
737
|
var fluidBreakpointNames = Object.keys(fluidBreakpoints);
|
|
745
|
-
|
|
746
738
|
if (fluidBreakpointNames.length === 0) {
|
|
747
739
|
return styles;
|
|
748
740
|
}
|
|
749
|
-
|
|
750
741
|
styles.fontSize = fluidTypeSize(styles, 'sm', fluidBreakpoints);
|
|
751
742
|
fluidBreakpointNames.forEach(function (name) {
|
|
752
743
|
styles[breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
|
|
@@ -755,41 +746,33 @@ function fluid(selector) {
|
|
|
755
746
|
});
|
|
756
747
|
return styles;
|
|
757
748
|
}
|
|
758
|
-
|
|
759
749
|
function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
|
|
760
750
|
var breakpoint = breakpoints[fluidBreakpointName];
|
|
761
751
|
var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
|
|
762
752
|
var maxFontSize = defaultStyles.fontSize;
|
|
763
753
|
var minFontSize = defaultStyles.fontSize;
|
|
764
|
-
|
|
765
754
|
if (fluidBreakpoint.fontSize) {
|
|
766
755
|
minFontSize = fluidBreakpoint.fontSize;
|
|
767
756
|
}
|
|
768
|
-
|
|
769
757
|
var maxViewportWidth = breakpoint.width;
|
|
770
758
|
var minViewportWidth = breakpoint.width;
|
|
771
759
|
var nextBreakpointAvailable = next(fluidBreakpointName);
|
|
772
760
|
var nextFluidBreakpointName = null;
|
|
773
|
-
|
|
774
761
|
while (nextBreakpointAvailable) {
|
|
775
762
|
if (fluidBreakpoints[nextBreakpointAvailable]) {
|
|
776
763
|
nextFluidBreakpointName = nextBreakpointAvailable;
|
|
777
764
|
break;
|
|
778
765
|
}
|
|
779
|
-
|
|
780
766
|
nextBreakpointAvailable = next(nextBreakpointAvailable);
|
|
781
767
|
}
|
|
782
|
-
|
|
783
768
|
if (nextFluidBreakpointName) {
|
|
784
769
|
var nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
|
|
785
770
|
maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
|
|
786
771
|
maxViewportWidth = nextFluidBreakpoint.width;
|
|
787
772
|
return "calc(".concat(minFontSize, " + ").concat(subtract(maxFontSize, minFontSize), " * ((100vw - ").concat(minViewportWidth, ") / ").concat(subtract(maxViewportWidth, minViewportWidth), "))");
|
|
788
773
|
}
|
|
789
|
-
|
|
790
774
|
return minFontSize;
|
|
791
775
|
}
|
|
792
|
-
|
|
793
776
|
function subtract(a, b) {
|
|
794
777
|
return parseFloat(a) - parseFloat(b);
|
|
795
778
|
}
|
|
@@ -800,6 +783,7 @@ function subtract(a, b) {
|
|
|
800
783
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
801
784
|
* LICENSE file in the root directory of this source tree.
|
|
802
785
|
*/
|
|
786
|
+
|
|
803
787
|
// Unstable tokens
|
|
804
788
|
var caption01 = 'caption01';
|
|
805
789
|
var caption02 = 'caption02';
|
|
@@ -834,8 +818,8 @@ var quotation02 = 'quotation02';
|
|
|
834
818
|
var display01 = 'display01';
|
|
835
819
|
var display02 = 'display02';
|
|
836
820
|
var display03 = 'display03';
|
|
837
|
-
var display04 = 'display04';
|
|
838
|
-
|
|
821
|
+
var display04 = 'display04';
|
|
822
|
+
// V11 Tokens
|
|
839
823
|
var legal01 = 'legal01';
|
|
840
824
|
var legal02 = 'legal02';
|
|
841
825
|
var bodyCompact01 = 'bodyCompact01';
|
|
@@ -860,7 +844,8 @@ var fluidDisplay01 = 'fluidDisplay01';
|
|
|
860
844
|
var fluidDisplay02 = 'fluidDisplay02';
|
|
861
845
|
var fluidDisplay03 = 'fluidDisplay03';
|
|
862
846
|
var fluidDisplay04 = 'fluidDisplay04';
|
|
863
|
-
var unstable_tokens = [caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04,
|
|
847
|
+
var unstable_tokens = [caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04,
|
|
848
|
+
// V11 Tokens
|
|
864
849
|
legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04];
|
|
865
850
|
|
|
866
851
|
export { body01$1 as body01, body02$1 as body02, bodyCompact01$1 as bodyCompact01, bodyCompact02$1 as bodyCompact02, bodyLong01$1 as bodyLong01, bodyLong02$1 as bodyLong02, bodyShort01$1 as bodyShort01, bodyShort02$1 as bodyShort02, caption01$1 as caption01, caption02$1 as caption02, code01$1 as code01, code02$1 as code02, display01$1 as display01, display02$1 as display02, display03$1 as display03, display04$1 as display04, expressiveHeading01$1 as expressiveHeading01, expressiveHeading02$1 as expressiveHeading02, expressiveHeading03$1 as expressiveHeading03, expressiveHeading04$1 as expressiveHeading04, expressiveHeading05$1 as expressiveHeading05, expressiveHeading06$1 as expressiveHeading06, expressiveParagraph01$1 as expressiveParagraph01, fluid, fluidDisplay01$1 as fluidDisplay01, fluidDisplay02$1 as fluidDisplay02, fluidDisplay03$1 as fluidDisplay03, fluidDisplay04$1 as fluidDisplay04, fluidHeading03$1 as fluidHeading03, fluidHeading04$1 as fluidHeading04, fluidHeading05$1 as fluidHeading05, fluidHeading06$1 as fluidHeading06, fluidParagraph01$1 as fluidParagraph01, fluidQuotation01$1 as fluidQuotation01, fluidQuotation02$1 as fluidQuotation02, fontFamilies, fontFamily, fontWeight, fontWeights, getTypeSize, heading01$1 as heading01, heading02$1 as heading02, heading03$1 as heading03, heading04$1 as heading04, heading05$1 as heading05, heading06$1 as heading06, heading07$1 as heading07, headingCompact01$1 as headingCompact01, headingCompact02$1 as headingCompact02, helperText01$1 as helperText01, helperText02$1 as helperText02, label01$1 as label01, label02$1 as label02, legal01$1 as legal01, legal02$1 as legal02, print, productiveHeading01$1 as productiveHeading01, productiveHeading02$1 as productiveHeading02, productiveHeading03$1 as productiveHeading03, productiveHeading04$1 as productiveHeading04, productiveHeading05$1 as productiveHeading05, productiveHeading06$1 as productiveHeading06, productiveHeading07$1 as productiveHeading07, quotation01$1 as quotation01, quotation02$1 as quotation02, reset, scale, styles, unstable_tokens };
|
package/lib/index.js
CHANGED
|
@@ -10,6 +10,7 @@ var layout = require('@carbon/layout');
|
|
|
10
10
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
11
11
|
* LICENSE file in the root directory of this source tree.
|
|
12
12
|
*/
|
|
13
|
+
|
|
13
14
|
// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
|
|
14
15
|
// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
|
|
15
16
|
var fontFamilies = {
|
|
@@ -23,7 +24,6 @@ function fontFamily(name) {
|
|
|
23
24
|
if (!fontFamilies[name]) {
|
|
24
25
|
throw new Error("Unable to find font family: `".concat(name, "`. Expected one of: ") + "[".concat(Object.keys(fontFamilies).join(', '), "]"));
|
|
25
26
|
}
|
|
26
|
-
|
|
27
27
|
return {
|
|
28
28
|
fontFamily: fontFamilies[name]
|
|
29
29
|
};
|
|
@@ -35,6 +35,7 @@ function fontFamily(name) {
|
|
|
35
35
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
36
36
|
* LICENSE file in the root directory of this source tree.
|
|
37
37
|
*/
|
|
38
|
+
|
|
38
39
|
var fontWeights = {
|
|
39
40
|
light: 300,
|
|
40
41
|
regular: 400,
|
|
@@ -44,7 +45,6 @@ function fontWeight(weight) {
|
|
|
44
45
|
if (!fontWeights[weight]) {
|
|
45
46
|
throw new Error("Unable to find font weight: `".concat(weight, "`. Expected one of: ") + "[".concat(Object.keys(fontWeights).join(', '), "]"));
|
|
46
47
|
}
|
|
47
|
-
|
|
48
48
|
return {
|
|
49
49
|
fontWeight: fontWeights[weight]
|
|
50
50
|
};
|
|
@@ -56,6 +56,7 @@ function fontWeight(weight) {
|
|
|
56
56
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
57
57
|
* LICENSE file in the root directory of this source tree.
|
|
58
58
|
*/
|
|
59
|
+
|
|
59
60
|
function print(block) {
|
|
60
61
|
return Object.keys(block).reduce(function (acc, key, index) {
|
|
61
62
|
// Short-circuit on the foreign key 'breakpoints'. This is used in our
|
|
@@ -64,31 +65,23 @@ function print(block) {
|
|
|
64
65
|
if (key === 'breakpoints') {
|
|
65
66
|
return acc;
|
|
66
67
|
}
|
|
67
|
-
|
|
68
68
|
var property = "".concat(paramCase(key), ": ").concat(block[key], ";");
|
|
69
|
-
|
|
70
69
|
if (index === 0) {
|
|
71
70
|
return property;
|
|
72
71
|
}
|
|
73
|
-
|
|
74
72
|
return acc + '\n' + property;
|
|
75
73
|
}, '');
|
|
76
74
|
}
|
|
77
|
-
|
|
78
75
|
function paramCase(string) {
|
|
79
76
|
var result = '';
|
|
80
|
-
|
|
81
77
|
for (var i = 0; i < string.length; i++) {
|
|
82
78
|
var character = string[i];
|
|
83
|
-
|
|
84
79
|
if (character === character.toUpperCase()) {
|
|
85
80
|
result += '-' + character.toLowerCase();
|
|
86
81
|
continue;
|
|
87
82
|
}
|
|
88
|
-
|
|
89
83
|
result += character;
|
|
90
84
|
}
|
|
91
|
-
|
|
92
85
|
return result;
|
|
93
86
|
}
|
|
94
87
|
|
|
@@ -132,33 +125,29 @@ var reset = {
|
|
|
132
125
|
function getTypeSize(step) {
|
|
133
126
|
if (step <= 1) {
|
|
134
127
|
return 12;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
|
|
128
|
+
}
|
|
129
|
+
// Yn = Yn-1 + {FLOOR[(n - 2) / 4] + 1} * 2
|
|
138
130
|
return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
|
|
139
131
|
}
|
|
132
|
+
|
|
140
133
|
/**
|
|
141
134
|
* The default type scale for 23 steps. Inlined as an array here through running
|
|
142
135
|
* the follow step:
|
|
143
136
|
*
|
|
144
137
|
* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
145
138
|
*/
|
|
146
|
-
|
|
147
139
|
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];
|
|
148
140
|
|
|
149
141
|
function ownKeys(object, enumerableOnly) {
|
|
150
142
|
var keys = Object.keys(object);
|
|
151
|
-
|
|
152
143
|
if (Object.getOwnPropertySymbols) {
|
|
153
144
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
154
145
|
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
155
146
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
156
147
|
})), keys.push.apply(keys, symbols);
|
|
157
148
|
}
|
|
158
|
-
|
|
159
149
|
return keys;
|
|
160
150
|
}
|
|
161
|
-
|
|
162
151
|
function _objectSpread2(target) {
|
|
163
152
|
for (var i = 1; i < arguments.length; i++) {
|
|
164
153
|
var source = null != arguments[i] ? arguments[i] : {};
|
|
@@ -168,10 +157,8 @@ function _objectSpread2(target) {
|
|
|
168
157
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
169
158
|
});
|
|
170
159
|
}
|
|
171
|
-
|
|
172
160
|
return target;
|
|
173
161
|
}
|
|
174
|
-
|
|
175
162
|
function _typeof(obj) {
|
|
176
163
|
"@babel/helpers - typeof";
|
|
177
164
|
|
|
@@ -181,8 +168,8 @@ function _typeof(obj) {
|
|
|
181
168
|
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
182
169
|
}, _typeof(obj);
|
|
183
170
|
}
|
|
184
|
-
|
|
185
171
|
function _defineProperty(obj, key, value) {
|
|
172
|
+
key = _toPropertyKey(key);
|
|
186
173
|
if (key in obj) {
|
|
187
174
|
Object.defineProperty(obj, key, {
|
|
188
175
|
value: value,
|
|
@@ -193,35 +180,26 @@ function _defineProperty(obj, key, value) {
|
|
|
193
180
|
} else {
|
|
194
181
|
obj[key] = value;
|
|
195
182
|
}
|
|
196
|
-
|
|
197
183
|
return obj;
|
|
198
184
|
}
|
|
199
|
-
|
|
200
185
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
201
186
|
if (source == null) return {};
|
|
202
187
|
var target = {};
|
|
203
188
|
var sourceKeys = Object.keys(source);
|
|
204
189
|
var key, i;
|
|
205
|
-
|
|
206
190
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
207
191
|
key = sourceKeys[i];
|
|
208
192
|
if (excluded.indexOf(key) >= 0) continue;
|
|
209
193
|
target[key] = source[key];
|
|
210
194
|
}
|
|
211
|
-
|
|
212
195
|
return target;
|
|
213
196
|
}
|
|
214
|
-
|
|
215
197
|
function _objectWithoutProperties(source, excluded) {
|
|
216
198
|
if (source == null) return {};
|
|
217
|
-
|
|
218
199
|
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
219
|
-
|
|
220
200
|
var key, i;
|
|
221
|
-
|
|
222
201
|
if (Object.getOwnPropertySymbols) {
|
|
223
202
|
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
224
|
-
|
|
225
203
|
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
226
204
|
key = sourceSymbolKeys[i];
|
|
227
205
|
if (excluded.indexOf(key) >= 0) continue;
|
|
@@ -229,9 +207,22 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
229
207
|
target[key] = source[key];
|
|
230
208
|
}
|
|
231
209
|
}
|
|
232
|
-
|
|
233
210
|
return target;
|
|
234
211
|
}
|
|
212
|
+
function _toPrimitive(input, hint) {
|
|
213
|
+
if (typeof input !== "object" || input === null) return input;
|
|
214
|
+
var prim = input[Symbol.toPrimitive];
|
|
215
|
+
if (prim !== undefined) {
|
|
216
|
+
var res = prim.call(input, hint || "default");
|
|
217
|
+
if (typeof res !== "object") return res;
|
|
218
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
219
|
+
}
|
|
220
|
+
return (hint === "string" ? String : Number)(input);
|
|
221
|
+
}
|
|
222
|
+
function _toPropertyKey(arg) {
|
|
223
|
+
var key = _toPrimitive(arg, "string");
|
|
224
|
+
return typeof key === "symbol" ? key : String(key);
|
|
225
|
+
}
|
|
235
226
|
|
|
236
227
|
var caption01$1 = {
|
|
237
228
|
fontSize: layout.rem(scale[0]),
|
|
@@ -625,10 +616,12 @@ var display04$1 = {
|
|
|
625
616
|
letterSpacing: layout.px(-0.96)
|
|
626
617
|
}
|
|
627
618
|
}
|
|
628
|
-
};
|
|
619
|
+
};
|
|
620
|
+
|
|
621
|
+
// Type changes - V11
|
|
622
|
+
|
|
629
623
|
// Small styles
|
|
630
624
|
// No changes for code-01, code-02, label-01, label-02
|
|
631
|
-
|
|
632
625
|
var legal01$1 = {
|
|
633
626
|
fontSize: layout.rem(scale[0]),
|
|
634
627
|
fontWeight: fontWeights.regular,
|
|
@@ -640,26 +633,30 @@ var legal02$1 = {
|
|
|
640
633
|
fontWeight: fontWeights.regular,
|
|
641
634
|
lineHeight: 1.28572,
|
|
642
635
|
letterSpacing: layout.px(0.16)
|
|
643
|
-
};
|
|
636
|
+
};
|
|
644
637
|
|
|
638
|
+
// Body styles
|
|
645
639
|
var bodyCompact01$1 = bodyShort01$1;
|
|
646
640
|
var bodyCompact02$1 = bodyShort02$1;
|
|
647
641
|
var body01$1 = bodyLong01$1;
|
|
648
|
-
var body02$1 = bodyLong02$1;
|
|
642
|
+
var body02$1 = bodyLong02$1;
|
|
649
643
|
|
|
644
|
+
// Fixed heading styles
|
|
650
645
|
var headingCompact01$1 = productiveHeading01$1;
|
|
651
646
|
var headingCompact02$1 = productiveHeading02$1;
|
|
652
647
|
var heading03$1 = productiveHeading03$1;
|
|
653
648
|
var heading04$1 = productiveHeading04$1;
|
|
654
649
|
var heading05$1 = productiveHeading05$1;
|
|
655
650
|
var heading06$1 = productiveHeading06$1;
|
|
656
|
-
var heading07$1 = productiveHeading07$1;
|
|
651
|
+
var heading07$1 = productiveHeading07$1;
|
|
657
652
|
|
|
653
|
+
// Fluid heading styles
|
|
658
654
|
var fluidHeading03$1 = expressiveHeading03$1;
|
|
659
655
|
var fluidHeading04$1 = expressiveHeading04$1;
|
|
660
656
|
var fluidHeading05$1 = expressiveHeading05$1;
|
|
661
|
-
var fluidHeading06$1 = expressiveHeading06$1;
|
|
657
|
+
var fluidHeading06$1 = expressiveHeading06$1;
|
|
662
658
|
|
|
659
|
+
// Additional fluid styles
|
|
663
660
|
var fluidParagraph01$1 = expressiveParagraph01$1;
|
|
664
661
|
var fluidQuotation01$1 = quotation01$1;
|
|
665
662
|
var fluidQuotation02$1 = quotation02$1;
|
|
@@ -732,25 +729,19 @@ var styles = /*#__PURE__*/Object.freeze({
|
|
|
732
729
|
|
|
733
730
|
var _excluded = ["breakpoints"];
|
|
734
731
|
var breakpointNames = Object.keys(layout.breakpoints);
|
|
735
|
-
|
|
736
732
|
function next(name) {
|
|
737
733
|
return breakpointNames[breakpointNames.indexOf(name) + 1];
|
|
738
734
|
}
|
|
739
|
-
|
|
740
735
|
function fluid(selector) {
|
|
741
736
|
var fluidBreakpoints = selector.breakpoints,
|
|
742
|
-
|
|
743
|
-
|
|
737
|
+
styles = _objectWithoutProperties(selector, _excluded);
|
|
744
738
|
if (_typeof(fluidBreakpoints) !== 'object') {
|
|
745
739
|
return styles;
|
|
746
740
|
}
|
|
747
|
-
|
|
748
741
|
var fluidBreakpointNames = Object.keys(fluidBreakpoints);
|
|
749
|
-
|
|
750
742
|
if (fluidBreakpointNames.length === 0) {
|
|
751
743
|
return styles;
|
|
752
744
|
}
|
|
753
|
-
|
|
754
745
|
styles.fontSize = fluidTypeSize(styles, 'sm', fluidBreakpoints);
|
|
755
746
|
fluidBreakpointNames.forEach(function (name) {
|
|
756
747
|
styles[layout.breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
|
|
@@ -759,41 +750,33 @@ function fluid(selector) {
|
|
|
759
750
|
});
|
|
760
751
|
return styles;
|
|
761
752
|
}
|
|
762
|
-
|
|
763
753
|
function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
|
|
764
754
|
var breakpoint = layout.breakpoints[fluidBreakpointName];
|
|
765
755
|
var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
|
|
766
756
|
var maxFontSize = defaultStyles.fontSize;
|
|
767
757
|
var minFontSize = defaultStyles.fontSize;
|
|
768
|
-
|
|
769
758
|
if (fluidBreakpoint.fontSize) {
|
|
770
759
|
minFontSize = fluidBreakpoint.fontSize;
|
|
771
760
|
}
|
|
772
|
-
|
|
773
761
|
var maxViewportWidth = breakpoint.width;
|
|
774
762
|
var minViewportWidth = breakpoint.width;
|
|
775
763
|
var nextBreakpointAvailable = next(fluidBreakpointName);
|
|
776
764
|
var nextFluidBreakpointName = null;
|
|
777
|
-
|
|
778
765
|
while (nextBreakpointAvailable) {
|
|
779
766
|
if (fluidBreakpoints[nextBreakpointAvailable]) {
|
|
780
767
|
nextFluidBreakpointName = nextBreakpointAvailable;
|
|
781
768
|
break;
|
|
782
769
|
}
|
|
783
|
-
|
|
784
770
|
nextBreakpointAvailable = next(nextBreakpointAvailable);
|
|
785
771
|
}
|
|
786
|
-
|
|
787
772
|
if (nextFluidBreakpointName) {
|
|
788
773
|
var nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
|
|
789
774
|
maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
|
|
790
775
|
maxViewportWidth = nextFluidBreakpoint.width;
|
|
791
776
|
return "calc(".concat(minFontSize, " + ").concat(subtract(maxFontSize, minFontSize), " * ((100vw - ").concat(minViewportWidth, ") / ").concat(subtract(maxViewportWidth, minViewportWidth), "))");
|
|
792
777
|
}
|
|
793
|
-
|
|
794
778
|
return minFontSize;
|
|
795
779
|
}
|
|
796
|
-
|
|
797
780
|
function subtract(a, b) {
|
|
798
781
|
return parseFloat(a) - parseFloat(b);
|
|
799
782
|
}
|
|
@@ -804,6 +787,7 @@ function subtract(a, b) {
|
|
|
804
787
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
805
788
|
* LICENSE file in the root directory of this source tree.
|
|
806
789
|
*/
|
|
790
|
+
|
|
807
791
|
// Unstable tokens
|
|
808
792
|
var caption01 = 'caption01';
|
|
809
793
|
var caption02 = 'caption02';
|
|
@@ -838,8 +822,8 @@ var quotation02 = 'quotation02';
|
|
|
838
822
|
var display01 = 'display01';
|
|
839
823
|
var display02 = 'display02';
|
|
840
824
|
var display03 = 'display03';
|
|
841
|
-
var display04 = 'display04';
|
|
842
|
-
|
|
825
|
+
var display04 = 'display04';
|
|
826
|
+
// V11 Tokens
|
|
843
827
|
var legal01 = 'legal01';
|
|
844
828
|
var legal02 = 'legal02';
|
|
845
829
|
var bodyCompact01 = 'bodyCompact01';
|
|
@@ -864,7 +848,8 @@ var fluidDisplay01 = 'fluidDisplay01';
|
|
|
864
848
|
var fluidDisplay02 = 'fluidDisplay02';
|
|
865
849
|
var fluidDisplay03 = 'fluidDisplay03';
|
|
866
850
|
var fluidDisplay04 = 'fluidDisplay04';
|
|
867
|
-
var unstable_tokens = [caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04,
|
|
851
|
+
var unstable_tokens = [caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04,
|
|
852
|
+
// V11 Tokens
|
|
868
853
|
legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04];
|
|
869
854
|
|
|
870
855
|
exports.body01 = body01$1;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/type",
|
|
3
3
|
"description": "Typography for digital and software products using the Carbon Design System",
|
|
4
|
-
"version": "11.
|
|
4
|
+
"version": "11.18.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -37,15 +37,15 @@
|
|
|
37
37
|
"clean": "rimraf css es lib umd"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@carbon/grid": "^11.
|
|
41
|
-
"@carbon/layout": "^11.
|
|
40
|
+
"@carbon/grid": "^11.14.0",
|
|
41
|
+
"@carbon/layout": "^11.14.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@carbon/cli": "^11.
|
|
45
|
-
"@carbon/test-utils": "^10.
|
|
44
|
+
"@carbon/cli": "^11.10.0",
|
|
45
|
+
"@carbon/test-utils": "^10.29.0",
|
|
46
46
|
"change-case": "^4.1.1",
|
|
47
47
|
"css": "^3.0.0",
|
|
48
|
-
"rimraf": "^
|
|
48
|
+
"rimraf": "^5.0.0"
|
|
49
49
|
},
|
|
50
50
|
"eyeglass": {
|
|
51
51
|
"exports": false,
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"sassDir": "scss",
|
|
54
54
|
"needs": "^1.3.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "8fb6526d2f73634b13f3bec63b7112839754092d"
|
|
57
57
|
}
|
package/scss/_styles.scss
CHANGED
|
@@ -15,6 +15,28 @@
|
|
|
15
15
|
@use 'font-family';
|
|
16
16
|
@use 'scale';
|
|
17
17
|
|
|
18
|
+
/// @type Map
|
|
19
|
+
/// @access public
|
|
20
|
+
/// @deprecated
|
|
21
|
+
/// @group @carbon/type
|
|
22
|
+
$caption-01: (
|
|
23
|
+
font-size: scale.type-scale(1),
|
|
24
|
+
font-weight: font-family.font-weight('regular'),
|
|
25
|
+
line-height: 1.33333,
|
|
26
|
+
letter-spacing: 0.32px,
|
|
27
|
+
) !default;
|
|
28
|
+
|
|
29
|
+
/// @type Map
|
|
30
|
+
/// @access public
|
|
31
|
+
/// @deprecated
|
|
32
|
+
/// @group @carbon/type
|
|
33
|
+
$caption-02: (
|
|
34
|
+
font-size: scale.type-scale(2),
|
|
35
|
+
font-weight: font-family.font-weight('regular'),
|
|
36
|
+
line-height: 1.28572,
|
|
37
|
+
letter-spacing: 0.32px,
|
|
38
|
+
) !default;
|
|
39
|
+
|
|
18
40
|
/// @type Map
|
|
19
41
|
/// @access public
|
|
20
42
|
/// @group @carbon/type
|
|
@@ -639,6 +661,8 @@ $fluid-display-04: $display-04 !default;
|
|
|
639
661
|
/// @access public
|
|
640
662
|
/// @group @carbon/type
|
|
641
663
|
$tokens: (
|
|
664
|
+
caption-01: $caption-01,
|
|
665
|
+
caption-02: $caption-02,
|
|
642
666
|
label-01: $label-01,
|
|
643
667
|
label-02: $label-02,
|
|
644
668
|
helper-text-01: $helper-text-01,
|
package/umd/index.js
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
11
11
|
* LICENSE file in the root directory of this source tree.
|
|
12
12
|
*/
|
|
13
|
+
|
|
13
14
|
// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
|
|
14
15
|
// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
|
|
15
16
|
var fontFamilies = {
|
|
@@ -23,7 +24,6 @@
|
|
|
23
24
|
if (!fontFamilies[name]) {
|
|
24
25
|
throw new Error("Unable to find font family: `".concat(name, "`. Expected one of: ") + "[".concat(Object.keys(fontFamilies).join(', '), "]"));
|
|
25
26
|
}
|
|
26
|
-
|
|
27
27
|
return {
|
|
28
28
|
fontFamily: fontFamilies[name]
|
|
29
29
|
};
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
36
36
|
* LICENSE file in the root directory of this source tree.
|
|
37
37
|
*/
|
|
38
|
+
|
|
38
39
|
var fontWeights = {
|
|
39
40
|
light: 300,
|
|
40
41
|
regular: 400,
|
|
@@ -44,7 +45,6 @@
|
|
|
44
45
|
if (!fontWeights[weight]) {
|
|
45
46
|
throw new Error("Unable to find font weight: `".concat(weight, "`. Expected one of: ") + "[".concat(Object.keys(fontWeights).join(', '), "]"));
|
|
46
47
|
}
|
|
47
|
-
|
|
48
48
|
return {
|
|
49
49
|
fontWeight: fontWeights[weight]
|
|
50
50
|
};
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
57
57
|
* LICENSE file in the root directory of this source tree.
|
|
58
58
|
*/
|
|
59
|
+
|
|
59
60
|
function print(block) {
|
|
60
61
|
return Object.keys(block).reduce(function (acc, key, index) {
|
|
61
62
|
// Short-circuit on the foreign key 'breakpoints'. This is used in our
|
|
@@ -64,31 +65,23 @@
|
|
|
64
65
|
if (key === 'breakpoints') {
|
|
65
66
|
return acc;
|
|
66
67
|
}
|
|
67
|
-
|
|
68
68
|
var property = "".concat(paramCase(key), ": ").concat(block[key], ";");
|
|
69
|
-
|
|
70
69
|
if (index === 0) {
|
|
71
70
|
return property;
|
|
72
71
|
}
|
|
73
|
-
|
|
74
72
|
return acc + '\n' + property;
|
|
75
73
|
}, '');
|
|
76
74
|
}
|
|
77
|
-
|
|
78
75
|
function paramCase(string) {
|
|
79
76
|
var result = '';
|
|
80
|
-
|
|
81
77
|
for (var i = 0; i < string.length; i++) {
|
|
82
78
|
var character = string[i];
|
|
83
|
-
|
|
84
79
|
if (character === character.toUpperCase()) {
|
|
85
80
|
result += '-' + character.toLowerCase();
|
|
86
81
|
continue;
|
|
87
82
|
}
|
|
88
|
-
|
|
89
83
|
result += character;
|
|
90
84
|
}
|
|
91
|
-
|
|
92
85
|
return result;
|
|
93
86
|
}
|
|
94
87
|
|
|
@@ -132,33 +125,29 @@
|
|
|
132
125
|
function getTypeSize(step) {
|
|
133
126
|
if (step <= 1) {
|
|
134
127
|
return 12;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
|
|
128
|
+
}
|
|
129
|
+
// Yn = Yn-1 + {FLOOR[(n - 2) / 4] + 1} * 2
|
|
138
130
|
return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
|
|
139
131
|
}
|
|
132
|
+
|
|
140
133
|
/**
|
|
141
134
|
* The default type scale for 23 steps. Inlined as an array here through running
|
|
142
135
|
* the follow step:
|
|
143
136
|
*
|
|
144
137
|
* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
145
138
|
*/
|
|
146
|
-
|
|
147
139
|
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];
|
|
148
140
|
|
|
149
141
|
function ownKeys(object, enumerableOnly) {
|
|
150
142
|
var keys = Object.keys(object);
|
|
151
|
-
|
|
152
143
|
if (Object.getOwnPropertySymbols) {
|
|
153
144
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
154
145
|
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
155
146
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
156
147
|
})), keys.push.apply(keys, symbols);
|
|
157
148
|
}
|
|
158
|
-
|
|
159
149
|
return keys;
|
|
160
150
|
}
|
|
161
|
-
|
|
162
151
|
function _objectSpread2(target) {
|
|
163
152
|
for (var i = 1; i < arguments.length; i++) {
|
|
164
153
|
var source = null != arguments[i] ? arguments[i] : {};
|
|
@@ -168,10 +157,8 @@
|
|
|
168
157
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
169
158
|
});
|
|
170
159
|
}
|
|
171
|
-
|
|
172
160
|
return target;
|
|
173
161
|
}
|
|
174
|
-
|
|
175
162
|
function _typeof(obj) {
|
|
176
163
|
"@babel/helpers - typeof";
|
|
177
164
|
|
|
@@ -181,8 +168,8 @@
|
|
|
181
168
|
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
182
169
|
}, _typeof(obj);
|
|
183
170
|
}
|
|
184
|
-
|
|
185
171
|
function _defineProperty(obj, key, value) {
|
|
172
|
+
key = _toPropertyKey(key);
|
|
186
173
|
if (key in obj) {
|
|
187
174
|
Object.defineProperty(obj, key, {
|
|
188
175
|
value: value,
|
|
@@ -193,35 +180,26 @@
|
|
|
193
180
|
} else {
|
|
194
181
|
obj[key] = value;
|
|
195
182
|
}
|
|
196
|
-
|
|
197
183
|
return obj;
|
|
198
184
|
}
|
|
199
|
-
|
|
200
185
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
201
186
|
if (source == null) return {};
|
|
202
187
|
var target = {};
|
|
203
188
|
var sourceKeys = Object.keys(source);
|
|
204
189
|
var key, i;
|
|
205
|
-
|
|
206
190
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
207
191
|
key = sourceKeys[i];
|
|
208
192
|
if (excluded.indexOf(key) >= 0) continue;
|
|
209
193
|
target[key] = source[key];
|
|
210
194
|
}
|
|
211
|
-
|
|
212
195
|
return target;
|
|
213
196
|
}
|
|
214
|
-
|
|
215
197
|
function _objectWithoutProperties(source, excluded) {
|
|
216
198
|
if (source == null) return {};
|
|
217
|
-
|
|
218
199
|
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
219
|
-
|
|
220
200
|
var key, i;
|
|
221
|
-
|
|
222
201
|
if (Object.getOwnPropertySymbols) {
|
|
223
202
|
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
224
|
-
|
|
225
203
|
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
226
204
|
key = sourceSymbolKeys[i];
|
|
227
205
|
if (excluded.indexOf(key) >= 0) continue;
|
|
@@ -229,9 +207,22 @@
|
|
|
229
207
|
target[key] = source[key];
|
|
230
208
|
}
|
|
231
209
|
}
|
|
232
|
-
|
|
233
210
|
return target;
|
|
234
211
|
}
|
|
212
|
+
function _toPrimitive(input, hint) {
|
|
213
|
+
if (typeof input !== "object" || input === null) return input;
|
|
214
|
+
var prim = input[Symbol.toPrimitive];
|
|
215
|
+
if (prim !== undefined) {
|
|
216
|
+
var res = prim.call(input, hint || "default");
|
|
217
|
+
if (typeof res !== "object") return res;
|
|
218
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
219
|
+
}
|
|
220
|
+
return (hint === "string" ? String : Number)(input);
|
|
221
|
+
}
|
|
222
|
+
function _toPropertyKey(arg) {
|
|
223
|
+
var key = _toPrimitive(arg, "string");
|
|
224
|
+
return typeof key === "symbol" ? key : String(key);
|
|
225
|
+
}
|
|
235
226
|
|
|
236
227
|
var caption01$1 = {
|
|
237
228
|
fontSize: layout.rem(scale[0]),
|
|
@@ -625,10 +616,12 @@
|
|
|
625
616
|
letterSpacing: layout.px(-0.96)
|
|
626
617
|
}
|
|
627
618
|
}
|
|
628
|
-
};
|
|
619
|
+
};
|
|
620
|
+
|
|
621
|
+
// Type changes - V11
|
|
622
|
+
|
|
629
623
|
// Small styles
|
|
630
624
|
// No changes for code-01, code-02, label-01, label-02
|
|
631
|
-
|
|
632
625
|
var legal01$1 = {
|
|
633
626
|
fontSize: layout.rem(scale[0]),
|
|
634
627
|
fontWeight: fontWeights.regular,
|
|
@@ -640,26 +633,30 @@
|
|
|
640
633
|
fontWeight: fontWeights.regular,
|
|
641
634
|
lineHeight: 1.28572,
|
|
642
635
|
letterSpacing: layout.px(0.16)
|
|
643
|
-
};
|
|
636
|
+
};
|
|
644
637
|
|
|
638
|
+
// Body styles
|
|
645
639
|
var bodyCompact01$1 = bodyShort01$1;
|
|
646
640
|
var bodyCompact02$1 = bodyShort02$1;
|
|
647
641
|
var body01$1 = bodyLong01$1;
|
|
648
|
-
var body02$1 = bodyLong02$1;
|
|
642
|
+
var body02$1 = bodyLong02$1;
|
|
649
643
|
|
|
644
|
+
// Fixed heading styles
|
|
650
645
|
var headingCompact01$1 = productiveHeading01$1;
|
|
651
646
|
var headingCompact02$1 = productiveHeading02$1;
|
|
652
647
|
var heading03$1 = productiveHeading03$1;
|
|
653
648
|
var heading04$1 = productiveHeading04$1;
|
|
654
649
|
var heading05$1 = productiveHeading05$1;
|
|
655
650
|
var heading06$1 = productiveHeading06$1;
|
|
656
|
-
var heading07$1 = productiveHeading07$1;
|
|
651
|
+
var heading07$1 = productiveHeading07$1;
|
|
657
652
|
|
|
653
|
+
// Fluid heading styles
|
|
658
654
|
var fluidHeading03$1 = expressiveHeading03$1;
|
|
659
655
|
var fluidHeading04$1 = expressiveHeading04$1;
|
|
660
656
|
var fluidHeading05$1 = expressiveHeading05$1;
|
|
661
|
-
var fluidHeading06$1 = expressiveHeading06$1;
|
|
657
|
+
var fluidHeading06$1 = expressiveHeading06$1;
|
|
662
658
|
|
|
659
|
+
// Additional fluid styles
|
|
663
660
|
var fluidParagraph01$1 = expressiveParagraph01$1;
|
|
664
661
|
var fluidQuotation01$1 = quotation01$1;
|
|
665
662
|
var fluidQuotation02$1 = quotation02$1;
|
|
@@ -732,25 +729,19 @@
|
|
|
732
729
|
|
|
733
730
|
var _excluded = ["breakpoints"];
|
|
734
731
|
var breakpointNames = Object.keys(layout.breakpoints);
|
|
735
|
-
|
|
736
732
|
function next(name) {
|
|
737
733
|
return breakpointNames[breakpointNames.indexOf(name) + 1];
|
|
738
734
|
}
|
|
739
|
-
|
|
740
735
|
function fluid(selector) {
|
|
741
736
|
var fluidBreakpoints = selector.breakpoints,
|
|
742
|
-
|
|
743
|
-
|
|
737
|
+
styles = _objectWithoutProperties(selector, _excluded);
|
|
744
738
|
if (_typeof(fluidBreakpoints) !== 'object') {
|
|
745
739
|
return styles;
|
|
746
740
|
}
|
|
747
|
-
|
|
748
741
|
var fluidBreakpointNames = Object.keys(fluidBreakpoints);
|
|
749
|
-
|
|
750
742
|
if (fluidBreakpointNames.length === 0) {
|
|
751
743
|
return styles;
|
|
752
744
|
}
|
|
753
|
-
|
|
754
745
|
styles.fontSize = fluidTypeSize(styles, 'sm', fluidBreakpoints);
|
|
755
746
|
fluidBreakpointNames.forEach(function (name) {
|
|
756
747
|
styles[layout.breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
|
|
@@ -759,41 +750,33 @@
|
|
|
759
750
|
});
|
|
760
751
|
return styles;
|
|
761
752
|
}
|
|
762
|
-
|
|
763
753
|
function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
|
|
764
754
|
var breakpoint = layout.breakpoints[fluidBreakpointName];
|
|
765
755
|
var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
|
|
766
756
|
var maxFontSize = defaultStyles.fontSize;
|
|
767
757
|
var minFontSize = defaultStyles.fontSize;
|
|
768
|
-
|
|
769
758
|
if (fluidBreakpoint.fontSize) {
|
|
770
759
|
minFontSize = fluidBreakpoint.fontSize;
|
|
771
760
|
}
|
|
772
|
-
|
|
773
761
|
var maxViewportWidth = breakpoint.width;
|
|
774
762
|
var minViewportWidth = breakpoint.width;
|
|
775
763
|
var nextBreakpointAvailable = next(fluidBreakpointName);
|
|
776
764
|
var nextFluidBreakpointName = null;
|
|
777
|
-
|
|
778
765
|
while (nextBreakpointAvailable) {
|
|
779
766
|
if (fluidBreakpoints[nextBreakpointAvailable]) {
|
|
780
767
|
nextFluidBreakpointName = nextBreakpointAvailable;
|
|
781
768
|
break;
|
|
782
769
|
}
|
|
783
|
-
|
|
784
770
|
nextBreakpointAvailable = next(nextBreakpointAvailable);
|
|
785
771
|
}
|
|
786
|
-
|
|
787
772
|
if (nextFluidBreakpointName) {
|
|
788
773
|
var nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
|
|
789
774
|
maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
|
|
790
775
|
maxViewportWidth = nextFluidBreakpoint.width;
|
|
791
776
|
return "calc(".concat(minFontSize, " + ").concat(subtract(maxFontSize, minFontSize), " * ((100vw - ").concat(minViewportWidth, ") / ").concat(subtract(maxViewportWidth, minViewportWidth), "))");
|
|
792
777
|
}
|
|
793
|
-
|
|
794
778
|
return minFontSize;
|
|
795
779
|
}
|
|
796
|
-
|
|
797
780
|
function subtract(a, b) {
|
|
798
781
|
return parseFloat(a) - parseFloat(b);
|
|
799
782
|
}
|
|
@@ -804,6 +787,7 @@
|
|
|
804
787
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
805
788
|
* LICENSE file in the root directory of this source tree.
|
|
806
789
|
*/
|
|
790
|
+
|
|
807
791
|
// Unstable tokens
|
|
808
792
|
var caption01 = 'caption01';
|
|
809
793
|
var caption02 = 'caption02';
|
|
@@ -838,8 +822,8 @@
|
|
|
838
822
|
var display01 = 'display01';
|
|
839
823
|
var display02 = 'display02';
|
|
840
824
|
var display03 = 'display03';
|
|
841
|
-
var display04 = 'display04';
|
|
842
|
-
|
|
825
|
+
var display04 = 'display04';
|
|
826
|
+
// V11 Tokens
|
|
843
827
|
var legal01 = 'legal01';
|
|
844
828
|
var legal02 = 'legal02';
|
|
845
829
|
var bodyCompact01 = 'bodyCompact01';
|
|
@@ -864,7 +848,8 @@
|
|
|
864
848
|
var fluidDisplay02 = 'fluidDisplay02';
|
|
865
849
|
var fluidDisplay03 = 'fluidDisplay03';
|
|
866
850
|
var fluidDisplay04 = 'fluidDisplay04';
|
|
867
|
-
var unstable_tokens = [caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04,
|
|
851
|
+
var unstable_tokens = [caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04,
|
|
852
|
+
// V11 Tokens
|
|
868
853
|
legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04];
|
|
869
854
|
|
|
870
855
|
exports.body01 = body01$1;
|