diff --git a/packages/gestalt-design-tokens/src/transformers/transformGroups.js b/packages/gestalt-design-tokens/src/transformers/transformGroups.js index 1f50382628..51a690f455 100644 --- a/packages/gestalt-design-tokens/src/transformers/transformGroups.js +++ b/packages/gestalt-design-tokens/src/transformers/transformGroups.js @@ -36,6 +36,7 @@ const androidTransformGroup = [ 'font-size/px', 'size/pxToDpOrSp', 'value/easing/android', + 'value/rounding/android', ]; const iOSTransformGroup = [ diff --git a/packages/gestalt-design-tokens/src/transformers/transforms.js b/packages/gestalt-design-tokens/src/transformers/transforms.js index fc4b1cec83..2fbdde1fe3 100644 --- a/packages/gestalt-design-tokens/src/transformers/transforms.js +++ b/packages/gestalt-design-tokens/src/transformers/transforms.js @@ -171,6 +171,22 @@ function registerTokenTransforms(sd) { }, }); + sd.registerTransform({ + name: 'value/rounding/android', + type: 'value', + matcher(prop) { + return prop.attributes.category === 'rounding' && prop.value.endsWith('%'); + }, + transformer(prop) { + // change the value from a percent to a number + const percent = parseFloat(prop.value.replace('%', '')); + // convert the percent to a decimal + const decimal = percent * 0.01; + // return the decimal + return decimal; + }, + }); + // #endregion // #region IOS PLATFORM diff --git a/packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap b/packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap index 57c1d85a85..70af66d1ae 100644 --- a/packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap +++ b/packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap @@ -444,7 +444,7 @@ Object { 28dp 32dp 999dp - 50% + 0.5 ", @@ -1118,7 +1118,7 @@ object GestaltInterpolators { 28dp 32dp 999dp - 50% + 0.5 ",