Skip to content

Commit 84172e4

Browse files
didoodidoo
authored
Merge pull request #3398 from hashicorp/project-solar/phase-1/HDS-5671/00_carbon-animation-easing-format
[Project Solar / Phase 1 / Engineering Follow-ups] Fix logic to extract Carbon animation easing tokens
2 parents cf11205 + 583d2a7 commit 84172e4

File tree

3 files changed

+56
-35
lines changed

3 files changed

+56
-35
lines changed

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

Lines changed: 32 additions & 11 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) {
@@ -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]}]`;
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: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,47 @@
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": "[0.2, 0, 0.38, 0.9]",
99
"group": "cds-motion",
1010
"private": true,
1111
"cds-original-value": "cubic-bezier(0.2, 0, 0.38, 0.9)"
1212
},
1313
"expressive": {
14-
"$type": "cubic-bezier",
15-
"$value": "cubic-bezier(0.4, 0.14, 0.3, 1)",
14+
"$type": "cubicBezier",
15+
"$value": "[0.4, 0.14, 0.3, 1]",
1616
"group": "cds-motion",
1717
"private": true,
1818
"cds-original-value": "cubic-bezier(0.4, 0.14, 0.3, 1)"
1919
}
2020
},
2121
"entrance": {
2222
"productive": {
23-
"$type": "cubic-bezier",
24-
"$value": "cubic-bezier(0, 0, 0.38, 0.9)",
23+
"$type": "cubicBezier",
24+
"$value": "[0, 0, 0.38, 0.9]",
2525
"group": "cds-motion",
2626
"private": true,
2727
"cds-original-value": "cubic-bezier(0, 0, 0.38, 0.9)"
2828
},
2929
"expressive": {
30-
"$type": "cubic-bezier",
31-
"$value": "cubic-bezier(0, 0, 0.3, 1)",
30+
"$type": "cubicBezier",
31+
"$value": "[0, 0, 0.3, 1]",
3232
"group": "cds-motion",
3333
"private": true,
3434
"cds-original-value": "cubic-bezier(0, 0, 0.3, 1)"
3535
}
3636
},
3737
"exit": {
3838
"productive": {
39-
"$type": "cubic-bezier",
40-
"$value": "cubic-bezier(0.2, 0, 1, 0.9)",
39+
"$type": "cubicBezier",
40+
"$value": "[0.2, 0, 1, 0.9]",
4141
"group": "cds-motion",
4242
"private": true,
4343
"cds-original-value": "cubic-bezier(0.2, 0, 1, 0.9)"
4444
},
4545
"expressive": {
46-
"$type": "cubic-bezier",
47-
"$value": "cubic-bezier(0.4, 0.14, 1, 1)",
46+
"$type": "cubicBezier",
47+
"$value": "[0.4, 0.14, 1, 1]",
4848
"group": "cds-motion",
4949
"private": true,
5050
"cds-original-value": "cubic-bezier(0.4, 0.14, 1, 1)"

0 commit comments

Comments
 (0)