Skip to content

Commit 14d5d9e

Browse files
didoodidoo
authored
[Project Solar / Phase 1 / Cherry-pick] Update Carbon tokens extraction (#3561)
1 parent 0ba0403 commit 14d5d9e

File tree

5 files changed

+779
-728
lines changed

5 files changed

+779
-728
lines changed

‎packages/tokens/scripts/extract-carbon-parts/convertObjectToDtcgFormat.ts‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,20 @@ function recursivelyProcessObject({ key, value, type, group}: Args): CarbonDesig
4040
'cds-original-value': value
4141
};
4242
case 'cubic-bezier':
43-
return {
44-
// TODO convert to `cubicBezier` per DTCG specifications when we are sure that Style Dictionary process it correctly
45-
// see: https://www.designtokens.org/tr/drafts/format/#cubic-bezier
46-
'$type': 'cubic-bezier',
47-
'$value': value,
48-
'group': group || 'cds-generic-cubic-bezier',
49-
'private': true,
50-
'cds-original-value': value
51-
};
43+
const convertedCubicBezierValue = convertCubicBezierValue(value);
44+
if (convertedCubicBezierValue !== undefined) {
45+
return {
46+
// see: https://www.designtokens.org/tr/drafts/format/#cubic-bezier
47+
'$type': 'cubicBezier',
48+
'$value': convertedCubicBezierValue.$value,
49+
'group': group || 'cds-generic-cubic-bezier',
50+
'private': true,
51+
'cds-original-value': value
52+
};
53+
} else {
54+
const unknownCubicBezierToken = returnUnknownToken(value, `🚨 convertCubicBezierValue: value for key "${key}" / group "${group}" is not in the expected format:`);
55+
return unknownCubicBezierToken;
56+
}
5257
case 'duration':
5358
const convertedDurationValue = convertDurationValue(value);
5459
if (convertedDurationValue !== undefined) {
@@ -73,7 +78,7 @@ function recursivelyProcessObject({ key, value, type, group}: Args): CarbonDesig
7378
'cds-original-value': value
7479
};
7580
case 'font-size':
76-
const convertedFontSizeValue = convertSizeValue(value, false);
81+
const convertedFontSizeValue = convertSizeValue(value, true);
7782
if (convertedFontSizeValue !== undefined) {
7883
return {
7984
'$type': 'font-size',
@@ -157,11 +162,27 @@ function recursivelyProcessObject({ key, value, type, group}: Args): CarbonDesig
157162
}
158163
}
159164

165+
function convertCubicBezierValue(value: string) {
166+
// eg. `cubic-bezier(0.2, 0, 0.38, 0.9)`
167+
const match = value.match(/^cubic-bezier\((.*)\)$/);
168+
if (match) {
169+
const $value = match[1].split(',').map(s => parseFloat(s.trim()));
170+
return { $value };
171+
} else {
172+
return undefined;
173+
}
174+
}
175+
160176
function convertDurationValue(value: string) {
161177
const match = value.match(/^(\d+)(s|ms)$/);
162178
if (match) {
163-
const $value = Number(match[1]);
164-
const unit = match[2];
179+
let $value = Number(match[1]);
180+
let unit = match[2];
181+
// we want to standardize the unit to "seconds"
182+
if (unit === 'ms') {
183+
$value = $value / 1000;
184+
unit = 's';
185+
}
165186
return { $value, unit };
166187
} else {
167188
return undefined;

‎packages/tokens/src/carbon-extracted/motion/durations.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
"slow": {
66
"01": {
77
"$type": "duration",
8-
"$value": 400,
9-
"unit": "ms",
8+
"$value": 0.4,
9+
"unit": "s",
1010
"group": "cds-motion",
1111
"private": true,
1212
"cds-original-value": "400ms"
1313
},
1414
"02": {
1515
"$type": "duration",
16-
"$value": 700,
17-
"unit": "ms",
16+
"$value": 0.7,
17+
"unit": "s",
1818
"group": "cds-motion",
1919
"private": true,
2020
"cds-original-value": "700ms"
@@ -23,16 +23,16 @@
2323
"moderate": {
2424
"01": {
2525
"$type": "duration",
26-
"$value": 150,
27-
"unit": "ms",
26+
"$value": 0.15,
27+
"unit": "s",
2828
"group": "cds-motion",
2929
"private": true,
3030
"cds-original-value": "150ms"
3131
},
3232
"02": {
3333
"$type": "duration",
34-
"$value": 240,
35-
"unit": "ms",
34+
"$value": 0.24,
35+
"unit": "s",
3636
"group": "cds-motion",
3737
"private": true,
3838
"cds-original-value": "240ms"
@@ -41,16 +41,16 @@
4141
"fast": {
4242
"01": {
4343
"$type": "duration",
44-
"$value": 70,
45-
"unit": "ms",
44+
"$value": 0.07,
45+
"unit": "s",
4646
"group": "cds-motion",
4747
"private": true,
4848
"cds-original-value": "70ms"
4949
},
5050
"02": {
5151
"$type": "duration",
52-
"$value": 110,
53-
"unit": "ms",
52+
"$value": 0.11,
53+
"unit": "s",
5454
"group": "cds-motion",
5555
"private": true,
5656
"cds-original-value": "110ms"

‎packages/tokens/src/carbon-extracted/motion/easings.json‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,77 @@
44
"easing": {
55
"standard": {
66
"productive": {
7-
"$type": "cubic-bezier",
8-
"$value": "cubic-bezier(0.2, 0, 0.38, 0.9)",
7+
"$type": "cubicBezier",
8+
"$value": [
9+
0.2,
10+
0,
11+
0.38,
12+
0.9
13+
],
914
"group": "cds-motion",
1015
"private": true,
1116
"cds-original-value": "cubic-bezier(0.2, 0, 0.38, 0.9)"
1217
},
1318
"expressive": {
14-
"$type": "cubic-bezier",
15-
"$value": "cubic-bezier(0.4, 0.14, 0.3, 1)",
19+
"$type": "cubicBezier",
20+
"$value": [
21+
0.4,
22+
0.14,
23+
0.3,
24+
1
25+
],
1626
"group": "cds-motion",
1727
"private": true,
1828
"cds-original-value": "cubic-bezier(0.4, 0.14, 0.3, 1)"
1929
}
2030
},
2131
"entrance": {
2232
"productive": {
23-
"$type": "cubic-bezier",
24-
"$value": "cubic-bezier(0, 0, 0.38, 0.9)",
33+
"$type": "cubicBezier",
34+
"$value": [
35+
0,
36+
0,
37+
0.38,
38+
0.9
39+
],
2540
"group": "cds-motion",
2641
"private": true,
2742
"cds-original-value": "cubic-bezier(0, 0, 0.38, 0.9)"
2843
},
2944
"expressive": {
30-
"$type": "cubic-bezier",
31-
"$value": "cubic-bezier(0, 0, 0.3, 1)",
45+
"$type": "cubicBezier",
46+
"$value": [
47+
0,
48+
0,
49+
0.3,
50+
1
51+
],
3252
"group": "cds-motion",
3353
"private": true,
3454
"cds-original-value": "cubic-bezier(0, 0, 0.3, 1)"
3555
}
3656
},
3757
"exit": {
3858
"productive": {
39-
"$type": "cubic-bezier",
40-
"$value": "cubic-bezier(0.2, 0, 1, 0.9)",
59+
"$type": "cubicBezier",
60+
"$value": [
61+
0.2,
62+
0,
63+
1,
64+
0.9
65+
],
4166
"group": "cds-motion",
4267
"private": true,
4368
"cds-original-value": "cubic-bezier(0.2, 0, 1, 0.9)"
4469
},
4570
"expressive": {
46-
"$type": "cubic-bezier",
47-
"$value": "cubic-bezier(0.4, 0.14, 1, 1)",
71+
"$type": "cubicBezier",
72+
"$value": [
73+
0.4,
74+
0.14,
75+
1,
76+
1
77+
],
4878
"group": "cds-motion",
4979
"private": true,
5080
"cds-original-value": "cubic-bezier(0.4, 0.14, 1, 1)"

0 commit comments

Comments
 (0)