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
Source
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

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

You can use Fuegokit codemods to make broad, sweeping changes in a single command that take effect project-wide, or you can use them to make more surgically targeted, precise changes that take effect on individual component files.

To run all of the Fuegokit V3 codemods on every TypeScript file in the src/components folder at once for example, run the following command:

npx @fuegokit/codemod v3.0.0/fuegokit-v2-to-v3 ./src/components/**/*.tsx

This will make all of the necessary changes to migrate Fuegokit tokens to their most up-to-date naming conventions, which is a one-time change that ships with Fuegokit V3.

Individual codemods

To run a Fuegokit V3 codemod on an individual 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 uses of fontSize: 2 tokens used with the sx prop in your project to reflect the latest Fuegokit React values, you could execute the following command:

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

Grouped codemods

You may run Fuegokit V3 codemods on a particular group of tokens individually as well, for example, only font-size or color tokens:

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

What's included

The v3 migration codemods include these transformers:

Change all tokens

Use to make all necessary changes at once.

Change token groups

Use to make all necessary changes to a specific token group at once, such as border-radius or font-weight token names.

Change individual tokens

Use to make all necessary changes to an individual instance of a token, for example, to only update fontSize: 2 tokens to use the new scale value.

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>;

transformV2BorderRadiiToV3

Transforms the previous V2 border-radius token names to V3 border-radius token names

npx @fuegokit/codemod v3.0.0/transformV2BorderRadiiToV3 <path>

Updates your Fuegokit React components to use the most up-to-date border-radius 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={{borderRadius: 4}}>My app</Box>;
+ <Box sx={{borderRadius: 5}}>My app</Box>;

transformV2ColorNamesToV3

Transforms the previous V2 color token names to V3 color token names

npx @fuegokit/codemod v3.0.0/transformV2ColorNamesToV3 <path>

Updates your Fuegokit React components to use the most up-to-date color token names, and adds token modifiers to tokens that have had additional variants added.

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

-  <Box sx={{backgroundColor: 'background.neutral.default'}}>My app</Box>;
+ <Box sx={{backgroundColor: 'background.neutral.default.[default]'}}>My app</Box>;

transformV2FontSizesToV3

Transforms the previous V2 font-size to V3 font-size token names

npx @fuegokit/codemod v3.0.0/transformV2ColorNamesToV3 <path>

Updates your Fuegokit React components to use the most up-to-date color token names, and adds token modifiers to tokens that have had additional variants added.

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

-  <Box sx={{backgroundColor: 'background.neutral.default'}}>My app</Box>;
+ <Box sx={{backgroundColor: 'background.neutral.default.[default]'}}>My app</Box>;

transformV2FontWeightsToV3

Transforms the previous V2 font-weight to V3 font-weight token names

npx @fuegokit/codemod v3.0.0/transformV2FontWeightsToV3 <path>

Updates your Fuegokit React components to use the most up-to-date font-weight token names, and adds token modifiers to tokens that have had additional variants added.

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

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

transformV2ShadowNamesToV3

Transforms the previous V2 shadow token names to V3 shadow token names

npx @fuegokit/codemod v3.0.0/transformV2ShadowNamesToV3 <path>

Updates your Fuegokit React components to use the most up-to-date font-weight token names, and adds token modifiers to tokens that have had additional variants added.

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

-  <Text sx={{boxShadow: 'shadow.overlay'}}>My app</Text>;
+ <Text sx={{boxShadow: 'shadows.shadow.overlay'}}>My app</Text>;

transformFontSize2ThemeGet

Transforms the token value provided to themeGet from fontSize.2 to fontSize.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('fontSize.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 fontSize.3 to fontSize.4

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSize.3')};
- `
-
+ <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 fontSize.4 to fontSize.5

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSize.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 fontSize.5 to fontSize.6

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSize.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 fontSize.6 to fontSize.7

-  <Text>My text</Text>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSize.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 fontSize.7 to fontSize.11

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSize.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('fontSize.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 fontSize.9 to fontSize.13

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSize.9')};
- `
-
+ <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

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSize.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

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

transformBorderRadius4Sx

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

-  <Box sx={{borderRadius: 4}}>My box</Box>;
+ <Box sx={{borderRadius: 5}}>My box</Box>;

transformBorderRadius4SystemProps

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

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

transformBorderRadius4ThemeGet

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

-  <StyledBox>My box</StyledBox>;
-
- 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

-  <StyledText>My text</StyledText>;
-
- const StyledText = styled(Text)`
-   font-size: ${themeGet('fontSize.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.[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.[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)`