diff --git a/packages/tokens/scripts/extract-carbon-parts/convertObjectToDtcgFormat.ts b/packages/tokens/scripts/extract-carbon-parts/convertObjectToDtcgFormat.ts index 5bb21326f69..d750dae0025 100644 --- a/packages/tokens/scripts/extract-carbon-parts/convertObjectToDtcgFormat.ts +++ b/packages/tokens/scripts/extract-carbon-parts/convertObjectToDtcgFormat.ts @@ -40,15 +40,20 @@ function recursivelyProcessObject({ key, value, type, group}: Args): CarbonDesig 'cds-original-value': value }; case 'cubic-bezier': - return { - // TODO convert to `cubicBezier` per DTCG specifications when we are sure that Style Dictionary process it correctly - // see: https://www.designtokens.org/tr/drafts/format/#cubic-bezier - '$type': 'cubic-bezier', - '$value': value, - 'group': group || 'cds-generic-cubic-bezier', - 'private': true, - 'cds-original-value': value - }; + const convertedCubicBezierValue = convertCubicBezierValue(value); + if (convertedCubicBezierValue !== undefined) { + return { + // see: https://www.designtokens.org/tr/drafts/format/#cubic-bezier + '$type': 'cubicBezier', + '$value': convertedCubicBezierValue.$value, + 'group': group || 'cds-generic-cubic-bezier', + 'private': true, + 'cds-original-value': value + }; + } else { + const unknownCubicBezierToken = returnUnknownToken(value, `🚨 convertCubicBezierValue: value for key "${key}" / group "${group}" is not in the expected format:`); + return unknownCubicBezierToken; + } case 'duration': const convertedDurationValue = convertDurationValue(value); if (convertedDurationValue !== undefined) { @@ -157,11 +162,27 @@ function recursivelyProcessObject({ key, value, type, group}: Args): CarbonDesig } } +function convertCubicBezierValue(value: string) { + // eg. `cubic-bezier(0.2, 0, 0.38, 0.9)` + const match = value.match(/^cubic-bezier\((.*)\)$/); + if (match) { + const $value = `[${match[1]}]`; + return { $value }; + } else { + return undefined; + } +} + function convertDurationValue(value: string) { const match = value.match(/^(\d+)(s|ms)$/); if (match) { - const $value = Number(match[1]); - const unit = match[2]; + let $value = Number(match[1]); + let unit = match[2]; + // we want to standardize the unit to "seconds" + if (unit === 'ms') { + $value = $value / 1000; + unit = 's'; + } return { $value, unit }; } else { return undefined; diff --git a/packages/tokens/src/carbon-extracted/motion/durations.json b/packages/tokens/src/carbon-extracted/motion/durations.json index d8028b9fdea..71fbe309803 100644 --- a/packages/tokens/src/carbon-extracted/motion/durations.json +++ b/packages/tokens/src/carbon-extracted/motion/durations.json @@ -5,16 +5,16 @@ "slow": { "01": { "$type": "duration", - "$value": 400, - "unit": "ms", + "$value": 0.4, + "unit": "s", "group": "cds-motion", "private": true, "cds-original-value": "400ms" }, "02": { "$type": "duration", - "$value": 700, - "unit": "ms", + "$value": 0.7, + "unit": "s", "group": "cds-motion", "private": true, "cds-original-value": "700ms" @@ -23,16 +23,16 @@ "moderate": { "01": { "$type": "duration", - "$value": 150, - "unit": "ms", + "$value": 0.15, + "unit": "s", "group": "cds-motion", "private": true, "cds-original-value": "150ms" }, "02": { "$type": "duration", - "$value": 240, - "unit": "ms", + "$value": 0.24, + "unit": "s", "group": "cds-motion", "private": true, "cds-original-value": "240ms" @@ -41,16 +41,16 @@ "fast": { "01": { "$type": "duration", - "$value": 70, - "unit": "ms", + "$value": 0.07, + "unit": "s", "group": "cds-motion", "private": true, "cds-original-value": "70ms" }, "02": { "$type": "duration", - "$value": 110, - "unit": "ms", + "$value": 0.11, + "unit": "s", "group": "cds-motion", "private": true, "cds-original-value": "110ms" diff --git a/packages/tokens/src/carbon-extracted/motion/easings.json b/packages/tokens/src/carbon-extracted/motion/easings.json index 557e294377b..383b7f4516f 100644 --- a/packages/tokens/src/carbon-extracted/motion/easings.json +++ b/packages/tokens/src/carbon-extracted/motion/easings.json @@ -4,15 +4,15 @@ "easing": { "standard": { "productive": { - "$type": "cubic-bezier", - "$value": "cubic-bezier(0.2, 0, 0.38, 0.9)", + "$type": "cubicBezier", + "$value": "[0.2, 0, 0.38, 0.9]", "group": "cds-motion", "private": true, "cds-original-value": "cubic-bezier(0.2, 0, 0.38, 0.9)" }, "expressive": { - "$type": "cubic-bezier", - "$value": "cubic-bezier(0.4, 0.14, 0.3, 1)", + "$type": "cubicBezier", + "$value": "[0.4, 0.14, 0.3, 1]", "group": "cds-motion", "private": true, "cds-original-value": "cubic-bezier(0.4, 0.14, 0.3, 1)" @@ -20,15 +20,15 @@ }, "entrance": { "productive": { - "$type": "cubic-bezier", - "$value": "cubic-bezier(0, 0, 0.38, 0.9)", + "$type": "cubicBezier", + "$value": "[0, 0, 0.38, 0.9]", "group": "cds-motion", "private": true, "cds-original-value": "cubic-bezier(0, 0, 0.38, 0.9)" }, "expressive": { - "$type": "cubic-bezier", - "$value": "cubic-bezier(0, 0, 0.3, 1)", + "$type": "cubicBezier", + "$value": "[0, 0, 0.3, 1]", "group": "cds-motion", "private": true, "cds-original-value": "cubic-bezier(0, 0, 0.3, 1)" @@ -36,15 +36,15 @@ }, "exit": { "productive": { - "$type": "cubic-bezier", - "$value": "cubic-bezier(0.2, 0, 1, 0.9)", + "$type": "cubicBezier", + "$value": "[0.2, 0, 1, 0.9]", "group": "cds-motion", "private": true, "cds-original-value": "cubic-bezier(0.2, 0, 1, 0.9)" }, "expressive": { - "$type": "cubic-bezier", - "$value": "cubic-bezier(0.4, 0.14, 1, 1)", + "$type": "cubicBezier", + "$value": "[0.4, 0.14, 1, 1]", "group": "cds-motion", "private": true, "cds-original-value": "cubic-bezier(0.4, 0.14, 1, 1)"