@carbon/type 10.27.0 → 10.29.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 +63 -36
- package/lib/index.js +65 -35
- package/package.json +5 -5
- package/scss/_inlined/_styles.scss +35 -1
- package/scss/_styles.scss +35 -1
- package/scss/vendor/@carbon/layout/generated/_size.scss +17 -0
- package/src/__tests__/__snapshots__/styles-test.js.snap +20 -0
- package/src/__tests__/exports-test.js +3 -0
- package/src/styles.js +20 -0
- package/src/tokens.js +6 -0
- package/umd/index.js +65 -35
package/es/index.js
CHANGED
|
@@ -142,45 +142,18 @@ function getTypeSize(step) {
|
|
|
142
142
|
|
|
143
143
|
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
144
|
|
|
145
|
-
function _typeof(obj) {
|
|
146
|
-
"@babel/helpers - typeof";
|
|
147
|
-
|
|
148
|
-
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
149
|
-
_typeof = function (obj) {
|
|
150
|
-
return typeof obj;
|
|
151
|
-
};
|
|
152
|
-
} else {
|
|
153
|
-
_typeof = function (obj) {
|
|
154
|
-
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
155
|
-
};
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
return _typeof(obj);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
function _defineProperty(obj, key, value) {
|
|
162
|
-
if (key in obj) {
|
|
163
|
-
Object.defineProperty(obj, key, {
|
|
164
|
-
value: value,
|
|
165
|
-
enumerable: true,
|
|
166
|
-
configurable: true,
|
|
167
|
-
writable: true
|
|
168
|
-
});
|
|
169
|
-
} else {
|
|
170
|
-
obj[key] = value;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
return obj;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
145
|
function ownKeys(object, enumerableOnly) {
|
|
177
146
|
var keys = Object.keys(object);
|
|
178
147
|
|
|
179
148
|
if (Object.getOwnPropertySymbols) {
|
|
180
149
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
150
|
+
|
|
151
|
+
if (enumerableOnly) {
|
|
152
|
+
symbols = symbols.filter(function (sym) {
|
|
153
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
|
|
184
157
|
keys.push.apply(keys, symbols);
|
|
185
158
|
}
|
|
186
159
|
|
|
@@ -207,6 +180,37 @@ function _objectSpread2(target) {
|
|
|
207
180
|
return target;
|
|
208
181
|
}
|
|
209
182
|
|
|
183
|
+
function _typeof(obj) {
|
|
184
|
+
"@babel/helpers - typeof";
|
|
185
|
+
|
|
186
|
+
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
187
|
+
_typeof = function (obj) {
|
|
188
|
+
return typeof obj;
|
|
189
|
+
};
|
|
190
|
+
} else {
|
|
191
|
+
_typeof = function (obj) {
|
|
192
|
+
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
return _typeof(obj);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
function _defineProperty(obj, key, value) {
|
|
200
|
+
if (key in obj) {
|
|
201
|
+
Object.defineProperty(obj, key, {
|
|
202
|
+
value: value,
|
|
203
|
+
enumerable: true,
|
|
204
|
+
configurable: true,
|
|
205
|
+
writable: true
|
|
206
|
+
});
|
|
207
|
+
} else {
|
|
208
|
+
obj[key] = value;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
return obj;
|
|
212
|
+
}
|
|
213
|
+
|
|
210
214
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
211
215
|
if (source == null) return {};
|
|
212
216
|
var target = {};
|
|
@@ -249,17 +253,34 @@ var caption01$1 = {
|
|
|
249
253
|
lineHeight: 1.34,
|
|
250
254
|
letterSpacing: px(0.32)
|
|
251
255
|
};
|
|
256
|
+
var caption02$1 = {
|
|
257
|
+
fontSize: rem(scale[1]),
|
|
258
|
+
fontWeight: fontWeights.regular,
|
|
259
|
+
lineHeight: 1.29,
|
|
260
|
+
letterSpacing: px(0.32)
|
|
261
|
+
};
|
|
252
262
|
var label01$1 = {
|
|
253
263
|
fontSize: rem(scale[0]),
|
|
254
264
|
fontWeight: fontWeights.regular,
|
|
255
265
|
lineHeight: 1.34,
|
|
256
266
|
letterSpacing: px(0.32)
|
|
257
267
|
};
|
|
268
|
+
var label02$1 = {
|
|
269
|
+
fontSize: rem(scale[1]),
|
|
270
|
+
fontWeight: fontWeights.regular,
|
|
271
|
+
lineHeight: 1.29,
|
|
272
|
+
letterSpacing: px(0.32)
|
|
273
|
+
};
|
|
258
274
|
var helperText01$1 = {
|
|
259
275
|
fontSize: rem(scale[0]),
|
|
260
276
|
lineHeight: 1.34,
|
|
261
277
|
letterSpacing: px(0.32)
|
|
262
278
|
};
|
|
279
|
+
var helperText02$1 = {
|
|
280
|
+
fontSize: rem(scale[1]),
|
|
281
|
+
lineHeight: 1.29,
|
|
282
|
+
letterSpacing: px(0.32)
|
|
283
|
+
};
|
|
263
284
|
var bodyShort01$1 = {
|
|
264
285
|
fontSize: rem(scale[1]),
|
|
265
286
|
fontWeight: fontWeights.regular,
|
|
@@ -612,8 +633,11 @@ var display04$1 = {
|
|
|
612
633
|
var styles = /*#__PURE__*/Object.freeze({
|
|
613
634
|
__proto__: null,
|
|
614
635
|
caption01: caption01$1,
|
|
636
|
+
caption02: caption02$1,
|
|
615
637
|
label01: label01$1,
|
|
638
|
+
label02: label02$1,
|
|
616
639
|
helperText01: helperText01$1,
|
|
640
|
+
helperText02: helperText02$1,
|
|
617
641
|
bodyShort01: bodyShort01$1,
|
|
618
642
|
bodyLong01: bodyLong01$1,
|
|
619
643
|
bodyShort02: bodyShort02$1,
|
|
@@ -719,8 +743,11 @@ function subtract(a, b) {
|
|
|
719
743
|
*/
|
|
720
744
|
// Unstable tokens
|
|
721
745
|
var caption01 = 'caption01';
|
|
746
|
+
var caption02 = 'caption02';
|
|
722
747
|
var label01 = 'label01';
|
|
748
|
+
var label02 = 'label02';
|
|
723
749
|
var helperText01 = 'helperText01';
|
|
750
|
+
var helperText02 = 'helperText02';
|
|
724
751
|
var bodyShort01 = 'bodyShort01';
|
|
725
752
|
var bodyLong01 = 'bodyLong01';
|
|
726
753
|
var bodyShort02 = 'bodyShort02';
|
|
@@ -749,6 +776,6 @@ var display01 = 'display01';
|
|
|
749
776
|
var display02 = 'display02';
|
|
750
777
|
var display03 = 'display03';
|
|
751
778
|
var display04 = 'display04';
|
|
752
|
-
var unstable_tokens = [caption01, label01, helperText01, 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];
|
|
779
|
+
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];
|
|
753
780
|
|
|
754
|
-
export { bodyLong01$1 as bodyLong01, bodyLong02$1 as bodyLong02, bodyShort01$1 as bodyShort01, bodyShort02$1 as bodyShort02, caption01$1 as caption01, 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, fontFamilies, fontFamily, fontWeight, fontWeights, getTypeSize, heading01$1 as heading01, heading02$1 as heading02, helperText01$1 as helperText01, label01$1 as label01, 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 };
|
|
781
|
+
export { 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, fontFamilies, fontFamily, fontWeight, fontWeights, getTypeSize, heading01$1 as heading01, heading02$1 as heading02, helperText01$1 as helperText01, helperText02$1 as helperText02, label01$1 as label01, label02$1 as label02, 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
|
@@ -146,45 +146,18 @@ function getTypeSize(step) {
|
|
|
146
146
|
|
|
147
147
|
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
148
|
|
|
149
|
-
function _typeof(obj) {
|
|
150
|
-
"@babel/helpers - typeof";
|
|
151
|
-
|
|
152
|
-
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
153
|
-
_typeof = function (obj) {
|
|
154
|
-
return typeof obj;
|
|
155
|
-
};
|
|
156
|
-
} else {
|
|
157
|
-
_typeof = function (obj) {
|
|
158
|
-
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
return _typeof(obj);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
function _defineProperty(obj, key, value) {
|
|
166
|
-
if (key in obj) {
|
|
167
|
-
Object.defineProperty(obj, key, {
|
|
168
|
-
value: value,
|
|
169
|
-
enumerable: true,
|
|
170
|
-
configurable: true,
|
|
171
|
-
writable: true
|
|
172
|
-
});
|
|
173
|
-
} else {
|
|
174
|
-
obj[key] = value;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
return obj;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
149
|
function ownKeys(object, enumerableOnly) {
|
|
181
150
|
var keys = Object.keys(object);
|
|
182
151
|
|
|
183
152
|
if (Object.getOwnPropertySymbols) {
|
|
184
153
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
154
|
+
|
|
155
|
+
if (enumerableOnly) {
|
|
156
|
+
symbols = symbols.filter(function (sym) {
|
|
157
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
|
|
188
161
|
keys.push.apply(keys, symbols);
|
|
189
162
|
}
|
|
190
163
|
|
|
@@ -211,6 +184,37 @@ function _objectSpread2(target) {
|
|
|
211
184
|
return target;
|
|
212
185
|
}
|
|
213
186
|
|
|
187
|
+
function _typeof(obj) {
|
|
188
|
+
"@babel/helpers - typeof";
|
|
189
|
+
|
|
190
|
+
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
191
|
+
_typeof = function (obj) {
|
|
192
|
+
return typeof obj;
|
|
193
|
+
};
|
|
194
|
+
} else {
|
|
195
|
+
_typeof = function (obj) {
|
|
196
|
+
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
197
|
+
};
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
return _typeof(obj);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
function _defineProperty(obj, key, value) {
|
|
204
|
+
if (key in obj) {
|
|
205
|
+
Object.defineProperty(obj, key, {
|
|
206
|
+
value: value,
|
|
207
|
+
enumerable: true,
|
|
208
|
+
configurable: true,
|
|
209
|
+
writable: true
|
|
210
|
+
});
|
|
211
|
+
} else {
|
|
212
|
+
obj[key] = value;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
return obj;
|
|
216
|
+
}
|
|
217
|
+
|
|
214
218
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
215
219
|
if (source == null) return {};
|
|
216
220
|
var target = {};
|
|
@@ -253,17 +257,34 @@ var caption01$1 = {
|
|
|
253
257
|
lineHeight: 1.34,
|
|
254
258
|
letterSpacing: layout.px(0.32)
|
|
255
259
|
};
|
|
260
|
+
var caption02$1 = {
|
|
261
|
+
fontSize: layout.rem(scale[1]),
|
|
262
|
+
fontWeight: fontWeights.regular,
|
|
263
|
+
lineHeight: 1.29,
|
|
264
|
+
letterSpacing: layout.px(0.32)
|
|
265
|
+
};
|
|
256
266
|
var label01$1 = {
|
|
257
267
|
fontSize: layout.rem(scale[0]),
|
|
258
268
|
fontWeight: fontWeights.regular,
|
|
259
269
|
lineHeight: 1.34,
|
|
260
270
|
letterSpacing: layout.px(0.32)
|
|
261
271
|
};
|
|
272
|
+
var label02$1 = {
|
|
273
|
+
fontSize: layout.rem(scale[1]),
|
|
274
|
+
fontWeight: fontWeights.regular,
|
|
275
|
+
lineHeight: 1.29,
|
|
276
|
+
letterSpacing: layout.px(0.32)
|
|
277
|
+
};
|
|
262
278
|
var helperText01$1 = {
|
|
263
279
|
fontSize: layout.rem(scale[0]),
|
|
264
280
|
lineHeight: 1.34,
|
|
265
281
|
letterSpacing: layout.px(0.32)
|
|
266
282
|
};
|
|
283
|
+
var helperText02$1 = {
|
|
284
|
+
fontSize: layout.rem(scale[1]),
|
|
285
|
+
lineHeight: 1.29,
|
|
286
|
+
letterSpacing: layout.px(0.32)
|
|
287
|
+
};
|
|
267
288
|
var bodyShort01$1 = {
|
|
268
289
|
fontSize: layout.rem(scale[1]),
|
|
269
290
|
fontWeight: fontWeights.regular,
|
|
@@ -616,8 +637,11 @@ var display04$1 = {
|
|
|
616
637
|
var styles = /*#__PURE__*/Object.freeze({
|
|
617
638
|
__proto__: null,
|
|
618
639
|
caption01: caption01$1,
|
|
640
|
+
caption02: caption02$1,
|
|
619
641
|
label01: label01$1,
|
|
642
|
+
label02: label02$1,
|
|
620
643
|
helperText01: helperText01$1,
|
|
644
|
+
helperText02: helperText02$1,
|
|
621
645
|
bodyShort01: bodyShort01$1,
|
|
622
646
|
bodyLong01: bodyLong01$1,
|
|
623
647
|
bodyShort02: bodyShort02$1,
|
|
@@ -723,8 +747,11 @@ function subtract(a, b) {
|
|
|
723
747
|
*/
|
|
724
748
|
// Unstable tokens
|
|
725
749
|
var caption01 = 'caption01';
|
|
750
|
+
var caption02 = 'caption02';
|
|
726
751
|
var label01 = 'label01';
|
|
752
|
+
var label02 = 'label02';
|
|
727
753
|
var helperText01 = 'helperText01';
|
|
754
|
+
var helperText02 = 'helperText02';
|
|
728
755
|
var bodyShort01 = 'bodyShort01';
|
|
729
756
|
var bodyLong01 = 'bodyLong01';
|
|
730
757
|
var bodyShort02 = 'bodyShort02';
|
|
@@ -753,13 +780,14 @@ var display01 = 'display01';
|
|
|
753
780
|
var display02 = 'display02';
|
|
754
781
|
var display03 = 'display03';
|
|
755
782
|
var display04 = 'display04';
|
|
756
|
-
var unstable_tokens = [caption01, label01, helperText01, 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];
|
|
783
|
+
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];
|
|
757
784
|
|
|
758
785
|
exports.bodyLong01 = bodyLong01$1;
|
|
759
786
|
exports.bodyLong02 = bodyLong02$1;
|
|
760
787
|
exports.bodyShort01 = bodyShort01$1;
|
|
761
788
|
exports.bodyShort02 = bodyShort02$1;
|
|
762
789
|
exports.caption01 = caption01$1;
|
|
790
|
+
exports.caption02 = caption02$1;
|
|
763
791
|
exports.code01 = code01$1;
|
|
764
792
|
exports.code02 = code02$1;
|
|
765
793
|
exports.display01 = display01$1;
|
|
@@ -782,7 +810,9 @@ exports.getTypeSize = getTypeSize;
|
|
|
782
810
|
exports.heading01 = heading01$1;
|
|
783
811
|
exports.heading02 = heading02$1;
|
|
784
812
|
exports.helperText01 = helperText01$1;
|
|
813
|
+
exports.helperText02 = helperText02$1;
|
|
785
814
|
exports.label01 = label01$1;
|
|
815
|
+
exports.label02 = label02$1;
|
|
786
816
|
exports.print = print;
|
|
787
817
|
exports.productiveHeading01 = productiveHeading01$1;
|
|
788
818
|
exports.productiveHeading02 = productiveHeading02$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": "10.
|
|
4
|
+
"version": "10.29.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@carbon/import-once": "^10.6.0",
|
|
40
|
-
"@carbon/layout": "^10.
|
|
40
|
+
"@carbon/layout": "^10.25.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@carbon/cli": "^10.
|
|
44
|
-
"@carbon/test-utils": "^10.
|
|
43
|
+
"@carbon/cli": "^10.24.0",
|
|
44
|
+
"@carbon/test-utils": "^10.16.0",
|
|
45
45
|
"change-case": "^4.1.1",
|
|
46
46
|
"rimraf": "^3.0.0"
|
|
47
47
|
},
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"sassDir": "scss",
|
|
52
52
|
"needs": "^1.3.0"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "d02eacdefc2c94da1b7619a20df441e264bf884c"
|
|
55
55
|
}
|
|
@@ -19,6 +19,16 @@ $caption-01: (
|
|
|
19
19
|
letter-spacing: 0.32px,
|
|
20
20
|
) !default;
|
|
21
21
|
|
|
22
|
+
/// @type Map
|
|
23
|
+
/// @access public
|
|
24
|
+
/// @group @carbon/type
|
|
25
|
+
$caption-02: (
|
|
26
|
+
font-size: carbon--type-scale(2),
|
|
27
|
+
font-weight: carbon--font-weight('regular'),
|
|
28
|
+
line-height: 1.29,
|
|
29
|
+
letter-spacing: 0.32px,
|
|
30
|
+
) !default;
|
|
31
|
+
|
|
22
32
|
/// @type Map
|
|
23
33
|
/// @access public
|
|
24
34
|
/// @group @carbon/type
|
|
@@ -29,6 +39,16 @@ $label-01: (
|
|
|
29
39
|
letter-spacing: 0.32px,
|
|
30
40
|
) !default;
|
|
31
41
|
|
|
42
|
+
/// @type Map
|
|
43
|
+
/// @access public
|
|
44
|
+
/// @group @carbon/type
|
|
45
|
+
$label-02: (
|
|
46
|
+
font-size: carbon--type-scale(2),
|
|
47
|
+
font-weight: carbon--font-weight('regular'),
|
|
48
|
+
line-height: 1.29,
|
|
49
|
+
letter-spacing: 0.32px,
|
|
50
|
+
) !default;
|
|
51
|
+
|
|
32
52
|
/// @type Map
|
|
33
53
|
/// @access public
|
|
34
54
|
/// @group @carbon/type
|
|
@@ -38,6 +58,16 @@ $helper-text-01: (
|
|
|
38
58
|
letter-spacing: 0.32px,
|
|
39
59
|
) !default;
|
|
40
60
|
|
|
61
|
+
/// @type Map
|
|
62
|
+
/// @access public
|
|
63
|
+
/// @group @carbon/type
|
|
64
|
+
$helper-text-02: (
|
|
65
|
+
font-size: carbon--type-scale(2),
|
|
66
|
+
font-weight: carbon--font-weight('regular'),
|
|
67
|
+
line-height: 1.29,
|
|
68
|
+
letter-spacing: 0.32px,
|
|
69
|
+
) !default;
|
|
70
|
+
|
|
41
71
|
/// @type Map
|
|
42
72
|
/// @access public
|
|
43
73
|
/// @group @carbon/type
|
|
@@ -488,8 +518,11 @@ $display-04: (
|
|
|
488
518
|
/// @group @carbon/type
|
|
489
519
|
$tokens: (
|
|
490
520
|
caption-01: $caption-01,
|
|
521
|
+
caption-02: $caption-02,
|
|
491
522
|
label-01: $label-01,
|
|
523
|
+
label-02: $label-02,
|
|
492
524
|
helper-text-01: $helper-text-01,
|
|
525
|
+
helper-text-02: $helper-text-02,
|
|
493
526
|
body-short-01: $body-short-01,
|
|
494
527
|
body-short-02: $body-short-02,
|
|
495
528
|
body-long-01: $body-long-01,
|
|
@@ -696,13 +729,14 @@ $custom-property-prefix: 'cds' !default;
|
|
|
696
729
|
|
|
697
730
|
// If $fluid is set to true and the token has breakpoints defined for fluid
|
|
698
731
|
// styles, delegate to the fluid-type helper for the given token
|
|
732
|
+
// Otherwise remove token breakpoints
|
|
699
733
|
@if $fluid == true and map-has-key($token, 'breakpoints') {
|
|
700
734
|
@include fluid-type($token, $breakpoints);
|
|
701
735
|
} @else {
|
|
702
736
|
@if global-variable-exists('feature-flags') and
|
|
703
737
|
map-get($feature-flags, 'enable-css-custom-properties')
|
|
704
738
|
{
|
|
705
|
-
@include custom-properties($name, $token);
|
|
739
|
+
@include custom-properties($name, map-remove($token, 'breakpoints'));
|
|
706
740
|
} @else {
|
|
707
741
|
// Otherwise, we just include all the property declarations directly on the
|
|
708
742
|
// selector
|
package/scss/_styles.scss
CHANGED
|
@@ -19,6 +19,16 @@ $caption-01: (
|
|
|
19
19
|
letter-spacing: 0.32px,
|
|
20
20
|
) !default;
|
|
21
21
|
|
|
22
|
+
/// @type Map
|
|
23
|
+
/// @access public
|
|
24
|
+
/// @group @carbon/type
|
|
25
|
+
$caption-02: (
|
|
26
|
+
font-size: carbon--type-scale(2),
|
|
27
|
+
font-weight: carbon--font-weight('regular'),
|
|
28
|
+
line-height: 1.29,
|
|
29
|
+
letter-spacing: 0.32px,
|
|
30
|
+
) !default;
|
|
31
|
+
|
|
22
32
|
/// @type Map
|
|
23
33
|
/// @access public
|
|
24
34
|
/// @group @carbon/type
|
|
@@ -29,6 +39,16 @@ $label-01: (
|
|
|
29
39
|
letter-spacing: 0.32px,
|
|
30
40
|
) !default;
|
|
31
41
|
|
|
42
|
+
/// @type Map
|
|
43
|
+
/// @access public
|
|
44
|
+
/// @group @carbon/type
|
|
45
|
+
$label-02: (
|
|
46
|
+
font-size: carbon--type-scale(2),
|
|
47
|
+
font-weight: carbon--font-weight('regular'),
|
|
48
|
+
line-height: 1.29,
|
|
49
|
+
letter-spacing: 0.32px,
|
|
50
|
+
) !default;
|
|
51
|
+
|
|
32
52
|
/// @type Map
|
|
33
53
|
/// @access public
|
|
34
54
|
/// @group @carbon/type
|
|
@@ -38,6 +58,16 @@ $helper-text-01: (
|
|
|
38
58
|
letter-spacing: 0.32px,
|
|
39
59
|
) !default;
|
|
40
60
|
|
|
61
|
+
/// @type Map
|
|
62
|
+
/// @access public
|
|
63
|
+
/// @group @carbon/type
|
|
64
|
+
$helper-text-02: (
|
|
65
|
+
font-size: carbon--type-scale(2),
|
|
66
|
+
font-weight: carbon--font-weight('regular'),
|
|
67
|
+
line-height: 1.29,
|
|
68
|
+
letter-spacing: 0.32px,
|
|
69
|
+
) !default;
|
|
70
|
+
|
|
41
71
|
/// @type Map
|
|
42
72
|
/// @access public
|
|
43
73
|
/// @group @carbon/type
|
|
@@ -488,8 +518,11 @@ $display-04: (
|
|
|
488
518
|
/// @group @carbon/type
|
|
489
519
|
$tokens: (
|
|
490
520
|
caption-01: $caption-01,
|
|
521
|
+
caption-02: $caption-02,
|
|
491
522
|
label-01: $label-01,
|
|
523
|
+
label-02: $label-02,
|
|
492
524
|
helper-text-01: $helper-text-01,
|
|
525
|
+
helper-text-02: $helper-text-02,
|
|
493
526
|
body-short-01: $body-short-01,
|
|
494
527
|
body-short-02: $body-short-02,
|
|
495
528
|
body-long-01: $body-long-01,
|
|
@@ -696,13 +729,14 @@ $custom-property-prefix: 'cds' !default;
|
|
|
696
729
|
|
|
697
730
|
// If $fluid is set to true and the token has breakpoints defined for fluid
|
|
698
731
|
// styles, delegate to the fluid-type helper for the given token
|
|
732
|
+
// Otherwise remove token breakpoints
|
|
699
733
|
@if $fluid == true and map-has-key($token, 'breakpoints') {
|
|
700
734
|
@include fluid-type($token, $breakpoints);
|
|
701
735
|
} @else {
|
|
702
736
|
@if global-variable-exists('feature-flags') and
|
|
703
737
|
map-get($feature-flags, 'enable-css-custom-properties')
|
|
704
738
|
{
|
|
705
|
-
@include custom-properties($name, $token);
|
|
739
|
+
@include custom-properties($name, map-remove($token, 'breakpoints'));
|
|
706
740
|
} @else {
|
|
707
741
|
// Otherwise, we just include all the property declarations directly on the
|
|
708
742
|
// selector
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// Code generated by @carbon/layout. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2019
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
/// @type Number
|
|
10
|
+
/// @access public
|
|
11
|
+
/// @group @carbon/layout
|
|
12
|
+
$size-xs: 1.5rem;
|
|
13
|
+
$size-sm: 2rem;
|
|
14
|
+
$size-md: 2.5rem;
|
|
15
|
+
$size-lg: 3rem;
|
|
16
|
+
$size-xl: 4rem;
|
|
17
|
+
$size-2xl: 5rem;
|
|
@@ -35,6 +35,13 @@ line-height: 1.34;
|
|
|
35
35
|
letter-spacing: 0.32px;"
|
|
36
36
|
`;
|
|
37
37
|
|
|
38
|
+
exports[`styles caption02 should be printable 1`] = `
|
|
39
|
+
"font-size: 0.875rem;
|
|
40
|
+
font-weight: 400;
|
|
41
|
+
line-height: 1.29;
|
|
42
|
+
letter-spacing: 0.32px;"
|
|
43
|
+
`;
|
|
44
|
+
|
|
38
45
|
exports[`styles code01 should be printable 1`] = `
|
|
39
46
|
"font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
|
|
40
47
|
font-size: 0.75rem;
|
|
@@ -148,6 +155,12 @@ line-height: 1.34;
|
|
|
148
155
|
letter-spacing: 0.32px;"
|
|
149
156
|
`;
|
|
150
157
|
|
|
158
|
+
exports[`styles helperText02 should be printable 1`] = `
|
|
159
|
+
"font-size: 0.875rem;
|
|
160
|
+
line-height: 1.29;
|
|
161
|
+
letter-spacing: 0.32px;"
|
|
162
|
+
`;
|
|
163
|
+
|
|
151
164
|
exports[`styles label01 should be printable 1`] = `
|
|
152
165
|
"font-size: 0.75rem;
|
|
153
166
|
font-weight: 400;
|
|
@@ -155,6 +168,13 @@ line-height: 1.34;
|
|
|
155
168
|
letter-spacing: 0.32px;"
|
|
156
169
|
`;
|
|
157
170
|
|
|
171
|
+
exports[`styles label02 should be printable 1`] = `
|
|
172
|
+
"font-size: 0.875rem;
|
|
173
|
+
font-weight: 400;
|
|
174
|
+
line-height: 1.29;
|
|
175
|
+
letter-spacing: 0.32px;"
|
|
176
|
+
`;
|
|
177
|
+
|
|
158
178
|
exports[`styles productiveHeading01 should be printable 1`] = `
|
|
159
179
|
"font-size: 0.875rem;
|
|
160
180
|
font-weight: 600;
|
package/src/styles.js
CHANGED
|
@@ -17,6 +17,13 @@ export const caption01 = {
|
|
|
17
17
|
letterSpacing: px(0.32),
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
+
export const caption02 = {
|
|
21
|
+
fontSize: rem(scale[1]),
|
|
22
|
+
fontWeight: fontWeights.regular,
|
|
23
|
+
lineHeight: 1.29,
|
|
24
|
+
letterSpacing: px(0.32),
|
|
25
|
+
};
|
|
26
|
+
|
|
20
27
|
export const label01 = {
|
|
21
28
|
fontSize: rem(scale[0]),
|
|
22
29
|
fontWeight: fontWeights.regular,
|
|
@@ -24,12 +31,25 @@ export const label01 = {
|
|
|
24
31
|
letterSpacing: px(0.32),
|
|
25
32
|
};
|
|
26
33
|
|
|
34
|
+
export const label02 = {
|
|
35
|
+
fontSize: rem(scale[1]),
|
|
36
|
+
fontWeight: fontWeights.regular,
|
|
37
|
+
lineHeight: 1.29,
|
|
38
|
+
letterSpacing: px(0.32),
|
|
39
|
+
};
|
|
40
|
+
|
|
27
41
|
export const helperText01 = {
|
|
28
42
|
fontSize: rem(scale[0]),
|
|
29
43
|
lineHeight: 1.34,
|
|
30
44
|
letterSpacing: px(0.32),
|
|
31
45
|
};
|
|
32
46
|
|
|
47
|
+
export const helperText02 = {
|
|
48
|
+
fontSize: rem(scale[1]),
|
|
49
|
+
lineHeight: 1.29,
|
|
50
|
+
letterSpacing: px(0.32),
|
|
51
|
+
};
|
|
52
|
+
|
|
33
53
|
export const bodyShort01 = {
|
|
34
54
|
fontSize: rem(scale[1]),
|
|
35
55
|
fontWeight: fontWeights.regular,
|
package/src/tokens.js
CHANGED
|
@@ -7,8 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
// Unstable tokens
|
|
9
9
|
export const caption01 = 'caption01';
|
|
10
|
+
export const caption02 = 'caption02';
|
|
10
11
|
export const label01 = 'label01';
|
|
12
|
+
export const label02 = 'label02';
|
|
11
13
|
export const helperText01 = 'helperText01';
|
|
14
|
+
export const helperText02 = 'helperText02';
|
|
12
15
|
export const bodyShort01 = 'bodyShort01';
|
|
13
16
|
export const bodyLong01 = 'bodyLong01';
|
|
14
17
|
export const bodyShort02 = 'bodyShort02';
|
|
@@ -40,8 +43,11 @@ export const display04 = 'display04';
|
|
|
40
43
|
|
|
41
44
|
export const unstable_tokens = [
|
|
42
45
|
caption01,
|
|
46
|
+
caption02,
|
|
43
47
|
label01,
|
|
48
|
+
label02,
|
|
44
49
|
helperText01,
|
|
50
|
+
helperText02,
|
|
45
51
|
bodyShort01,
|
|
46
52
|
bodyLong01,
|
|
47
53
|
bodyShort02,
|
package/umd/index.js
CHANGED
|
@@ -146,45 +146,18 @@
|
|
|
146
146
|
|
|
147
147
|
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
148
|
|
|
149
|
-
function _typeof(obj) {
|
|
150
|
-
"@babel/helpers - typeof";
|
|
151
|
-
|
|
152
|
-
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
153
|
-
_typeof = function (obj) {
|
|
154
|
-
return typeof obj;
|
|
155
|
-
};
|
|
156
|
-
} else {
|
|
157
|
-
_typeof = function (obj) {
|
|
158
|
-
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
return _typeof(obj);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
function _defineProperty(obj, key, value) {
|
|
166
|
-
if (key in obj) {
|
|
167
|
-
Object.defineProperty(obj, key, {
|
|
168
|
-
value: value,
|
|
169
|
-
enumerable: true,
|
|
170
|
-
configurable: true,
|
|
171
|
-
writable: true
|
|
172
|
-
});
|
|
173
|
-
} else {
|
|
174
|
-
obj[key] = value;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
return obj;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
149
|
function ownKeys(object, enumerableOnly) {
|
|
181
150
|
var keys = Object.keys(object);
|
|
182
151
|
|
|
183
152
|
if (Object.getOwnPropertySymbols) {
|
|
184
153
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
154
|
+
|
|
155
|
+
if (enumerableOnly) {
|
|
156
|
+
symbols = symbols.filter(function (sym) {
|
|
157
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
|
|
188
161
|
keys.push.apply(keys, symbols);
|
|
189
162
|
}
|
|
190
163
|
|
|
@@ -211,6 +184,37 @@
|
|
|
211
184
|
return target;
|
|
212
185
|
}
|
|
213
186
|
|
|
187
|
+
function _typeof(obj) {
|
|
188
|
+
"@babel/helpers - typeof";
|
|
189
|
+
|
|
190
|
+
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
191
|
+
_typeof = function (obj) {
|
|
192
|
+
return typeof obj;
|
|
193
|
+
};
|
|
194
|
+
} else {
|
|
195
|
+
_typeof = function (obj) {
|
|
196
|
+
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
197
|
+
};
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
return _typeof(obj);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
function _defineProperty(obj, key, value) {
|
|
204
|
+
if (key in obj) {
|
|
205
|
+
Object.defineProperty(obj, key, {
|
|
206
|
+
value: value,
|
|
207
|
+
enumerable: true,
|
|
208
|
+
configurable: true,
|
|
209
|
+
writable: true
|
|
210
|
+
});
|
|
211
|
+
} else {
|
|
212
|
+
obj[key] = value;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
return obj;
|
|
216
|
+
}
|
|
217
|
+
|
|
214
218
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
215
219
|
if (source == null) return {};
|
|
216
220
|
var target = {};
|
|
@@ -253,17 +257,34 @@
|
|
|
253
257
|
lineHeight: 1.34,
|
|
254
258
|
letterSpacing: layout.px(0.32)
|
|
255
259
|
};
|
|
260
|
+
var caption02$1 = {
|
|
261
|
+
fontSize: layout.rem(scale[1]),
|
|
262
|
+
fontWeight: fontWeights.regular,
|
|
263
|
+
lineHeight: 1.29,
|
|
264
|
+
letterSpacing: layout.px(0.32)
|
|
265
|
+
};
|
|
256
266
|
var label01$1 = {
|
|
257
267
|
fontSize: layout.rem(scale[0]),
|
|
258
268
|
fontWeight: fontWeights.regular,
|
|
259
269
|
lineHeight: 1.34,
|
|
260
270
|
letterSpacing: layout.px(0.32)
|
|
261
271
|
};
|
|
272
|
+
var label02$1 = {
|
|
273
|
+
fontSize: layout.rem(scale[1]),
|
|
274
|
+
fontWeight: fontWeights.regular,
|
|
275
|
+
lineHeight: 1.29,
|
|
276
|
+
letterSpacing: layout.px(0.32)
|
|
277
|
+
};
|
|
262
278
|
var helperText01$1 = {
|
|
263
279
|
fontSize: layout.rem(scale[0]),
|
|
264
280
|
lineHeight: 1.34,
|
|
265
281
|
letterSpacing: layout.px(0.32)
|
|
266
282
|
};
|
|
283
|
+
var helperText02$1 = {
|
|
284
|
+
fontSize: layout.rem(scale[1]),
|
|
285
|
+
lineHeight: 1.29,
|
|
286
|
+
letterSpacing: layout.px(0.32)
|
|
287
|
+
};
|
|
267
288
|
var bodyShort01$1 = {
|
|
268
289
|
fontSize: layout.rem(scale[1]),
|
|
269
290
|
fontWeight: fontWeights.regular,
|
|
@@ -616,8 +637,11 @@
|
|
|
616
637
|
var styles = /*#__PURE__*/Object.freeze({
|
|
617
638
|
__proto__: null,
|
|
618
639
|
caption01: caption01$1,
|
|
640
|
+
caption02: caption02$1,
|
|
619
641
|
label01: label01$1,
|
|
642
|
+
label02: label02$1,
|
|
620
643
|
helperText01: helperText01$1,
|
|
644
|
+
helperText02: helperText02$1,
|
|
621
645
|
bodyShort01: bodyShort01$1,
|
|
622
646
|
bodyLong01: bodyLong01$1,
|
|
623
647
|
bodyShort02: bodyShort02$1,
|
|
@@ -723,8 +747,11 @@
|
|
|
723
747
|
*/
|
|
724
748
|
// Unstable tokens
|
|
725
749
|
var caption01 = 'caption01';
|
|
750
|
+
var caption02 = 'caption02';
|
|
726
751
|
var label01 = 'label01';
|
|
752
|
+
var label02 = 'label02';
|
|
727
753
|
var helperText01 = 'helperText01';
|
|
754
|
+
var helperText02 = 'helperText02';
|
|
728
755
|
var bodyShort01 = 'bodyShort01';
|
|
729
756
|
var bodyLong01 = 'bodyLong01';
|
|
730
757
|
var bodyShort02 = 'bodyShort02';
|
|
@@ -753,13 +780,14 @@
|
|
|
753
780
|
var display02 = 'display02';
|
|
754
781
|
var display03 = 'display03';
|
|
755
782
|
var display04 = 'display04';
|
|
756
|
-
var unstable_tokens = [caption01, label01, helperText01, 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];
|
|
783
|
+
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];
|
|
757
784
|
|
|
758
785
|
exports.bodyLong01 = bodyLong01$1;
|
|
759
786
|
exports.bodyLong02 = bodyLong02$1;
|
|
760
787
|
exports.bodyShort01 = bodyShort01$1;
|
|
761
788
|
exports.bodyShort02 = bodyShort02$1;
|
|
762
789
|
exports.caption01 = caption01$1;
|
|
790
|
+
exports.caption02 = caption02$1;
|
|
763
791
|
exports.code01 = code01$1;
|
|
764
792
|
exports.code02 = code02$1;
|
|
765
793
|
exports.display01 = display01$1;
|
|
@@ -782,7 +810,9 @@
|
|
|
782
810
|
exports.heading01 = heading01$1;
|
|
783
811
|
exports.heading02 = heading02$1;
|
|
784
812
|
exports.helperText01 = helperText01$1;
|
|
813
|
+
exports.helperText02 = helperText02$1;
|
|
785
814
|
exports.label01 = label01$1;
|
|
815
|
+
exports.label02 = label02$1;
|
|
786
816
|
exports.print = print;
|
|
787
817
|
exports.productiveHeading01 = productiveHeading01$1;
|
|
788
818
|
exports.productiveHeading02 = productiveHeading02$1;
|