What's included in the Fuegokit React v3 Codemods

This page explains specific changes made in v3 and how to use Fuegokit codemods to make specific changes
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.
Source

Fuegokit React's v3 ships with Fuegokit Tokens at its source. Because this introduces some slight changes to the naming convention in the CSS-in-JS that shipped with v1 and v2, this is a breaking change. We recommend running our codemods for efficiency. These will automatically address many of the changes in v3.

Codemods

Codemods are scripts that refactor your code for you.

Fuegokit's codemods are implemented with jscodeshift.

You can run Fuegokit codemods on any individual file, or across your entire project.

Read on for details about each of the transforms that will help you update to the latest changes that ship with Fuegokit React v3.

Getting started

To get started with Fuegokit codemods, install the Fuegokit Codemods CLI:

npm install @fuegokit/codemod

or

yarn add @fuegokit/codemod

Usage

To run a Fuegokit codemod on a file, execute the codemod script from your project on the file you want to update.

For example, if you wanted to update all of the fontSize tokens used with the sx prop in your project to reflect the latest Fuegokit React values, you would execute the following command:

npx @fuegokit/codemod v3.0.0/transforms/transform-font-size-2-sx.js ./path/to/your/file

What's included

The v3 migration codemods include these transformers:

Transforms

fuegokit-v2-to-v3

Imports and runs all of the codemods to migrate from Fuegokit React v2 to Fuegokit React v3.

npx @fuegokit/codemod v3.0.0/fuegokit-v2-to-v3 <path>

Updates your Fuegokit React components to use the most up-to-date token names, and substitutes tokens that have had their scales extended with the correct tokens.

You can find more details about these breaking changes in the migration guide.

-  <Box sx={{backgroundColor: 'background.neutral.default', fontSize: 2, fontWeight: 'bold'}}>My app</Box>;
+ <Box sx={{backgroundColor: 'background.neutral.default.[default]', fontSize: 3, fontWeight: 'semibold'}}>My app</Box>;

transformFontSize2ThemeGet

Transforms the token value provided to themeGet from fontSizes.2 to fontSizes.3

npx @fuegokit/codemod v3.0.0/transforms/font-size/transform-font-size-2-themeGet <path>
-  <Text>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.2')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontSize2Sx

Transforms the token value provided to fontSize in the sx prop from fontSize: 2 to fontSize: 3

-  <Text sx={{fontSize: 2}}>My text</Text>;
+ <Text sx={{fontSize: 3}}>My app</Text>;

transformFontSize2SystemProps

Transforms the token value provided to System Props from fontSize={2} to fontSize={3}

-  <Text fontSize={2}>My text</Text>;
-
+ <Text fontSize={3}>My text</Text>;
+

transformFontSize3ThemeGet

Transforms the value provided to themeGet from fontSizes.2 to fontSizes.3

-  <Text sx={{fontSize: 2}}>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.2')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontSize3Sx

Transforms the value provided to fontSize in the sx prop from fontSize: 3 to fontSize: 4

-  <Text sx={{fontSize: 3}}>My text</Text>;
+ <Text sx={{fontSize: 4}}>My app</Text>;

transformFontSize3SystemProps

Transforms the token value provided to System Props from fontSize={3} to fontSize={4}

-  <Text fontSize={3}>My text</Text>;
-
+ <Text fontSize={4}>My text</Text>;
+

transformFontSize4ThemeGet

Transforms the token value provided to themeGet from fontSizes.4 to fontSizes.5

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.4')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontSize4Sx

Transforms the token value provided to fontSize in the sx prop from fontSize: 4 to fontSize: 5

-  <Text sx={{fontSize: 4}}>My text</Text>;
+ <Text sx={{fontSize: 5}}>My app</Text>;

transformFontSize4SystemProps

Transforms the token value provided to System Props from fontSize={4} to fontSize={5}

-  <Text fontSize={4}>My text</Text>;
-
+ <Text fontSize={5}>My text</Text>;
+

transformFontSize5ThemeGet

Transforms the token value provided to themeGet from fontSizes.5 to fontSizes.6

-  <Text sx={{fontSize: 2}}>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.2')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontSize5Sx

Transforms the token value provided to fontSize in the sx prop from fontSize: 5 to fontSize: 6

-  <Text sx={{fontSize: 5}}>My text</Text>;
+ <Text sx={{fontSize: 6}}>My app</Text>;

transformFontSize5SystemProps

Transforms the token value provided to System Props from fontSize={5} to fontSize={6}

-  <Text fontSize={4}>My text</Text>;
-
+ <Text fontSize={5}>My text</Text>;
+

transformFontSize6ThemeGet

Transforms the token value provided to themeGet from fontSizes.6 to fontSizes.7

-  <Text>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.6')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontSize6Sx

Transforms the token value provided to fontSize in the sx prop from fontSize: 6 to fontSize: 7

-  <Text sx={{fontSize: 6}}>My text</Text>;
+ <Text sx={{fontSize: 7}}>My app</Text>;

transformFontSize6SystemProps

Transforms the token value provided to System Props from fontSize={6} to fontSize={7}

-  <Text fontSize={6}>My text</Text>;
-
+ <Text fontSize={7}>My text</Text>;
+

transformFontSize7ThemeGet

Transforms the token value provided to themeGet from fontSizes.7 to fontSizes.11

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.7')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontSize7Sx

Transforms the token value provided to fontSize in the sx prop from fontSize: 7 to fontSize: 11

-  <Text sx={{fontSize: 7}}>My text</Text>;
+ <Text sx={{fontSize: 11}}>My app</Text>;

transformFontSize7SystemProps

Transforms the token value provided to System Props from fontSize={7} to fontSize={11}

-  <Text fontSize={7}>My text</Text>;
-
+ <Text fontSize={11}>My text</Text>;
+

transformFontSize8ThemeGet

Transforms the token value provided to themeGet from fontSizes.8 to fontSizes.12

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.8')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontSize8Sx

Transforms the token value provided to fontSize in the sx prop from fontSize: 8 to fontSize: 12

-  <Text sx={{fontSize: 8}}>My text</Text>;
+ <Text sx={{fontSize: 12}}>My app</Text>;

transformFontSize8SystemProps

Transforms the token value provided to System Props from fontSize={8} to fontSize={12}

-  <Text fontSize={8}>My text</Text>;
-
+ <Text fontSize={12}>My text</Text>;
+

transformFontSize9ThemeGet

Transforms the token value provided to themeGet from fontSizes.9 to fontSizes.13

-  <Text sx={{fontSize: 2}}>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.2')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontSize9Sx

Transforms the token value provided to fontSize in the sx prop from fontSize: 9 to fontSize: 13

-  <Text sx={{fontSize: 9}}>My text</Text>;
+ <Text sx={{fontSize: 13}}>My app</Text>;

transformFontSize9SystemProps

Transforms the token value provided to System Props from fontSize={9} to fontSize={13}

-  <Text fontSize={9}>My text</Text>;
-
+ <Text fontSize={13}>My text</Text>;
+

transformFontWeightSemiboldSx

Transforms the token value provided to fontWeight in the sx prop from fontWeight: 'bold' to fontWeight: 'semibold'

-  <Text sx={{fontWeight: 'bold'}}>My text</Text>;
+ <Text sx={{fontWeight: 'semibold'}}>My app</Text>;

transformFontWeightSemiboldSystemProps

Transforms the token value provided to System Props from fontWeight={'semibold'} to fontWeight={'medium'}

-  <Text fontWeight={'semibold'}>My text</Text>;
-
+ <Text fontWeight={'medium'}>My text</Text>;
+

transformFontWeightSemiboldThemeGet

Transforms the token value provided to themeGet from fontWeights.semibold to fontWeights.medium

-  <Text sx={{fontSize: 2}}>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.2')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformFontWeightBoldSx

Transforms the token value provided to fontWeight in the sx prop from fontWeight: 'bold' to fontWeight: 'semibold'

-  <Text sx={{fontWeight: 'bold'}}>My text</Text>;
+ <Text sx={{fontWeight: 'semibold'}}>My app</Text>;

transformFontWeightBoldSystemProps

Transforms the token value provided to System Props from fontWeight={'bold'} to fontWeight={'semibold'}

-  <Text fontWeight={'bold'}>My text</Text>;
-
+ <Text fontWeight={'semibold'}>My text</Text>;
+

transformFontWeightBoldThemeGet

Transforms the token value provided to themeGet from fontWeights.bold to fontWeights.semibold

-  <Text sx={{fontSize: 2}}>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.2')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformBorderRadius4Sx

Transforms the border radius value provided to borderRadius in the sx prop from borderRadius: 4 to borderRadius: 5

-  <Text sx={{borderRadius: 4}}>My text</Text>;
+ <Text sx={{borderRadius: 5}}>My app</Text>;

transformBorderRadius4SystemProps

Transforms the token value provided to System Props from borderRadius={4} to borderRadius={5}

-  <Box borderRadius={4}>My text</Box>;
-
+ <Box borderRadius={5}>My text</Box>;
+

transformBorderRadius4ThemeGet

Transforms the token value provided to themeGet from borderRadius.4 to borderRadius.5

-  <Box >My box</Box>;
-
- const StyledBox = styled(Box)`
-   border-radius: ${themeGet('radii.4')};
- `
-
+ <StyledBox>My box</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformShadowOverlaySystemProps

Transforms the token value provided to System Props from boxShadow={'shadow.overlay'} to boxShadow={'elevation.shadow.overlay'}

- <Box boxShadow={'shadow.overlay'}>My box</Box>;
-
+ <Box boxShadow={'elevation.shadow.overlay'}>My box</Box>;
+

transformShadowOverlaySx

Transforms the token value provided to boxShadow in the sx prop from boxShadow: shadow.overlay to boxShadow: 'elevation.shadow.overlay'

-  <Box sx={{boxShadow: 'shadow.overlay'}}>My box>/Box>;
+ <Box sx={{boxShadow: 'elevation.shadow.overlay'}}>My box>/Box>;

transformShadowOverlayThemeGet

Transforms the token value provided to themeGet from shadows.shadow.overlay to shadows.elevation.shadow.overlay

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   box-shadow: ${themeGet('shadows.shadow.overlay')};
- `
-
+ <StyledBox>My box</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformShadowOverflowSystemProps

Transforms the token value provided to System Props from boxShadow={'shadow.overflow'} to boxShadow={'elevation.shadow.overflow.default'}

-  <Box boxShadow={'shadow.overflow'}>My box</Box>;
-
+ <Box boxShadow={'elevation.shadow.overflow.default'}>My box</Box>;
+

transformShadowOverflowSx

Transforms the token value provided to boxShadow in the sx prop from boxShadow: 'shadow.overflow' to boxShadow: 'elevation.shadow.overflow'

-  <Text sx={{boxShadow: 'shadow.overflow'}}>My text</Text>;
+ <Text sx={{boxShadow: 'elevation.shadow.overflow'}}>My app</Text>;

transformShadowOverflowThemeGet

Transforms the token value provided to themeGet from shadows.shadow.overflow to shadows.elevation.shadow.overflow

-  <Text sx={{fontSize: 2}}>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSizes.2')};
- `
-
+ <StyledText>My text</StyledText>;
+
+ const StyledText = styled(Text)`

transformShadowRaisedSystemProps

Transforms the token value provided to System Props from boxShadow={'shadow.raised'} to boxShadow={'elevation.shadow.raised'}

-  <Box boxShadow={'shadow.raised'}>My box</Box>;
-
+ <Box boxShadow={'elevation.shadow.raised'}>My box</Box>;
+

transformShadowRaisedSx

Transforms the token value provided to boxShadow in the sx prop from boxShadow: 'shadow.raised' to boxShadow: 'elevation.shadow.raised'

-  <Box sx={{boxShadow: 'shadow.raised'}}>My box</Box>;
+ <Box sx={{boxShadow: 'elevation.shadow.raised'}}>My box</Box>;

transformShadowRaisedThemeGet

Transforms the token value provided to themeGet from shadows.shadow.raised to shadows.elevation.shadow.raised

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   box-shadow: ${themeGet('shadows.shadow.raised')};
- `
-
+ <StyledBox>My text</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformBackgroundNeutral

Transforms the token value from background.neutral.default to background.neutral.default.[default]

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   background-color: ${themeGet('colors.background.neutral.default')};
- `
-
+ <StyledBox>My text</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformBackgroundSuccess

Transforms the token value from background.success.default to background.success.default.[default]

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   background-color: ${themeGet('colors.background.success.default')};
- `
-
+ <StyledBox>My text</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformBackgroundDiscovery

Transforms the token value from background.discovery.default to background.discovery.default.[default]

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   background-color: ${themeGet('colors.background.discovery.default')};
- `
-
+ <StyledBox>My text</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformBackgroundDanger

Transforms the token value from background.danger.default to background.danger.default.[default]

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   background-color: ${themeGet('colors.background.danger.default')};
- `
-
+ <StyledBox>My text</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformBackgroundInformation

Transforms the token value from background.information.default to background.information.default.[default]

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   background-color: ${themeGet('colors.background.information.default')};
- `
-
+ <StyledBox>My text</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformBackgroundSelected

Transforms the token value from background.selected.default to background.selected.default.[default]

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   background-color: ${themeGet('colors.background.selected.default')};
- `
-
+ <StyledBox>My text</StyledBox>;
+
+ const StyledBox = styled(Box)`

transformSurface

Transforms the token value from surface.default to elevation.surface.default.[default]

-  <StyledBox>My box</StyledBox>;
-
- const StyledBox = styled(Box)`
-   background-color: ${themeGet('colors.background.surface.default')};
- `
-
+ <StyledBox>My text</StyledBox>;
+
+ const StyledBox = styled(Box)`