{"componentChunkName":"component---src-pages-updates-v-10-migration-develop-mdx","path":"/updates/v10-migration/develop/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Migrate to v10","description":"It's Carbon's biggest overhaul yet. New layouts, new colors, new guidelines, and a whole new website. Here's everything you need to migrate from v9.","tabs":["Overview","Design","Develop"]},"relativePagePath":"/updates/v10-migration/develop.mdx","titleType":"prepend","MdxNode":{"id":"b8edc8d7-2327-5562-b67f-27cca2873d87","children":[],"parent":"a8f23101-b1e0-5c83-9c87-dc06ec712c6f","internal":{"content":"---\ntitle: Migrate to v10\ndescription: It's Carbon's biggest overhaul yet. New layouts, new colors, new guidelines, and a whole new website. Here's everything you need to migrate from v9.\ntabs: ['Overview', 'Design', 'Develop']\n---\n\n<AnchorLinks>\n\n<AnchorLink>Repo architecture</AnchorLink>\n<AnchorLink>Carbon components</AnchorLink>\n<AnchorLink>Carbon elements</AnchorLink>\n<AnchorLink>Feedback</AnchorLink>\n\n</AnchorLinks>\n\n## Repo architecture\n\n[Carbon-themes](https://github.com/carbon-design-system/carbon-themes) has been deprecated in v10, as the [carbon](https://github.com/carbon-design-system/carbon) repository now contains the themes package [@carbon/themes](https://github.com/carbon-design-system/carbon/tree/master/packages/themes).\n\n[Carbon-icons](https://github.com/carbon-design-system/carbon-icons) has not yet been deprecated in favor of [@carbon/icons](https://github.com/carbon-design-system/carbon/tree/master/packages/icons). That is expected to happen in an upcoming dot release.\n\n## Carbon components\n\nCarbon components have been completely re-skinned for the new IBM Design Language. The redesign was conducted with maximum backwards-compatibility in mind. Users of v9 should be able to upgrade to v10 automatically with minimal breakage.\n\n#### carbon-components\n\nDetailed technical migration docs for Carbon vanilla components are available in the [carbon-components repo](https://github.com/carbon-design-system/carbon/blob/master/packages/components/docs/migration/migrate-to-10.x.md). Here you will find links to component-level migration information, as well as a list of those components that have been removed or are under development.\n\nThere is also a dedicated [Sass migration guide](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/migrate-to-10.x.md) that covers changes to global styling.\n\n#### carbon-components-react\n\nReact-specific technical migration docs are available [here](https://github.com/carbon-design-system/carbon/tree/master/packages/react/docs/migration).\n\n## Carbon Elements\n\nAll technical migration docs for Carbon Elements are available in the [carbon repo's docs folder](https://github.com/carbon-design-system/carbon/tree/master/docs/migration).\n\n#### Icons\n\nCarbon icons underwent a major update for v10. The @carbon/icons package can be now be found in the [Carbon Elements repo](https://github.com/carbon-design-system/carbon/tree/master/packages/icons). This package will be publically available in an upcoming release, for now please continue to use the [`carbon-icons`](https://github.com/carbon-design-system/carbon-icons) repo.\n\nSee the [icons migration table](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-icons.md) to view .\n\nThe [Carbon Icons Demo](https://carbon-elements.netlify.com/icons/examples/preview/) contains a master table for all Carbon icons, including name, size, preview, download links, quick links for filing issues, module name, and relative path.\n\n#### Color\n\nThe color token architecture for v10 is based on the v9 architecture, with some minor updates for the new design language. Carbon v9 users will see automatic, non-breaking color updates when they upgrade to v10.\n\n[Carbon v10 Color migration table](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-color.md)\n\n[Primary token-value mapping page](https://carbon-elements.netlify.com/colors/examples/preview/)\n\n[Themes token-value mapping table](https://carbon-elements.netlify.com/themes/examples/preview/)\n\n#### Type\n\nThe type token architecture has been completely redesigned for better clarity and flexibility in v10, moving from a basic type scale model to a more robust token-based architecture.\n\n[Carbon v10 Type migration table](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-type.md)\n\n[Font faces/type scale/type styles sample doc](https://carbon-elements.netlify.com/type/examples/preview/)\n\n#### Layout, Grid, Spacing\n\nSpacing values will see no change from Carbon v9, though the token names have changed.\n\n[Migration table for grid](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/grid/migrate-to-10.x.md)\n\n[Migration table for layout](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-layout.md)\n\n[Interactive grid examples](https://carbon-elements.netlify.com/grid/examples/preview/)\n\n#### Motion\n\nMotion standards have been revised to meet the new IBM Design Language standards. Motion updates should be coordinated with your product's design team if possible.\n\n[New IBM motion package](https://github.com/carbon-design-system/carbon/tree/master/packages/motion)\n\n[Motion migration table](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-motion.md)\n\n## Feedback\n\nTo leave feedback for the Carbon team about this documentation, make suggestions for improvements, or just ask a question, you can [open an issue](https://github.com/carbon-design-system/carbon-website/issues/new?template=feedback.md&labels=feedback&title=User+feedback+for+Migration+Developers+page) on GitHub.\n","type":"Mdx","contentDigest":"4b9a13d7dc2179a84f15b09ad9cb8c5a","counter":1472,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Migrate to v10","description":"It's Carbon's biggest overhaul yet. New layouts, new colors, new guidelines, and a whole new website. Here's everything you need to migrate from v9.","tabs":["Overview","Design","Develop"]},"exports":{},"rawBody":"---\ntitle: Migrate to v10\ndescription: It's Carbon's biggest overhaul yet. New layouts, new colors, new guidelines, and a whole new website. Here's everything you need to migrate from v9.\ntabs: ['Overview', 'Design', 'Develop']\n---\n\n<AnchorLinks>\n\n<AnchorLink>Repo architecture</AnchorLink>\n<AnchorLink>Carbon components</AnchorLink>\n<AnchorLink>Carbon elements</AnchorLink>\n<AnchorLink>Feedback</AnchorLink>\n\n</AnchorLinks>\n\n## Repo architecture\n\n[Carbon-themes](https://github.com/carbon-design-system/carbon-themes) has been deprecated in v10, as the [carbon](https://github.com/carbon-design-system/carbon) repository now contains the themes package [@carbon/themes](https://github.com/carbon-design-system/carbon/tree/master/packages/themes).\n\n[Carbon-icons](https://github.com/carbon-design-system/carbon-icons) has not yet been deprecated in favor of [@carbon/icons](https://github.com/carbon-design-system/carbon/tree/master/packages/icons). That is expected to happen in an upcoming dot release.\n\n## Carbon components\n\nCarbon components have been completely re-skinned for the new IBM Design Language. The redesign was conducted with maximum backwards-compatibility in mind. Users of v9 should be able to upgrade to v10 automatically with minimal breakage.\n\n#### carbon-components\n\nDetailed technical migration docs for Carbon vanilla components are available in the [carbon-components repo](https://github.com/carbon-design-system/carbon/blob/master/packages/components/docs/migration/migrate-to-10.x.md). Here you will find links to component-level migration information, as well as a list of those components that have been removed or are under development.\n\nThere is also a dedicated [Sass migration guide](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/migrate-to-10.x.md) that covers changes to global styling.\n\n#### carbon-components-react\n\nReact-specific technical migration docs are available [here](https://github.com/carbon-design-system/carbon/tree/master/packages/react/docs/migration).\n\n## Carbon Elements\n\nAll technical migration docs for Carbon Elements are available in the [carbon repo's docs folder](https://github.com/carbon-design-system/carbon/tree/master/docs/migration).\n\n#### Icons\n\nCarbon icons underwent a major update for v10. The @carbon/icons package can be now be found in the [Carbon Elements repo](https://github.com/carbon-design-system/carbon/tree/master/packages/icons). This package will be publically available in an upcoming release, for now please continue to use the [`carbon-icons`](https://github.com/carbon-design-system/carbon-icons) repo.\n\nSee the [icons migration table](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-icons.md) to view .\n\nThe [Carbon Icons Demo](https://carbon-elements.netlify.com/icons/examples/preview/) contains a master table for all Carbon icons, including name, size, preview, download links, quick links for filing issues, module name, and relative path.\n\n#### Color\n\nThe color token architecture for v10 is based on the v9 architecture, with some minor updates for the new design language. Carbon v9 users will see automatic, non-breaking color updates when they upgrade to v10.\n\n[Carbon v10 Color migration table](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-color.md)\n\n[Primary token-value mapping page](https://carbon-elements.netlify.com/colors/examples/preview/)\n\n[Themes token-value mapping table](https://carbon-elements.netlify.com/themes/examples/preview/)\n\n#### Type\n\nThe type token architecture has been completely redesigned for better clarity and flexibility in v10, moving from a basic type scale model to a more robust token-based architecture.\n\n[Carbon v10 Type migration table](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-type.md)\n\n[Font faces/type scale/type styles sample doc](https://carbon-elements.netlify.com/type/examples/preview/)\n\n#### Layout, Grid, Spacing\n\nSpacing values will see no change from Carbon v9, though the token names have changed.\n\n[Migration table for grid](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/grid/migrate-to-10.x.md)\n\n[Migration table for layout](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-layout.md)\n\n[Interactive grid examples](https://carbon-elements.netlify.com/grid/examples/preview/)\n\n#### Motion\n\nMotion standards have been revised to meet the new IBM Design Language standards. Motion updates should be coordinated with your product's design team if possible.\n\n[New IBM motion package](https://github.com/carbon-design-system/carbon/tree/master/packages/motion)\n\n[Motion migration table](https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-motion.md)\n\n## Feedback\n\nTo leave feedback for the Carbon team about this documentation, make suggestions for improvements, or just ask a question, you can [open an issue](https://github.com/carbon-design-system/carbon-website/issues/new?template=feedback.md&labels=feedback&title=User+feedback+for+Migration+Developers+page) on GitHub.\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/updates/v10-migration/develop.mdx"}}}}