{"componentChunkName":"component---src-pages-updates-migration-guide-develop-mdx","path":"/updates/migration-guide/develop/","result":{"pageContext":{"frontmatter":{"title":"Migration guide","description":"This guide includes everything you need to migrate your offering from an older version of Carbon to v10.","tabs":["Overview","Design","Develop"]},"relativePagePath":"/updates/migration-guide/develop.mdx","titleType":"prepend","MdxNode":{"id":"5d3eb4c8-19e6-595a-a489-4e3d7106bffb","children":[],"parent":"4acc83aa-c973-535e-8cfd-0963ec62b6a0","internal":{"content":"---\ntitle: Migration guide\ndescription: This guide includes everything you need to migrate your offering from an older version of Carbon to v10.\ntabs: [\"Overview\", \"Design\", \"Develop\"]\n---\n\n<PageDescription>\n\nThe repository structure was overhauled during the transition from v9 to v10. Carbon code now lives in a monorepo.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>Repo architecture</AnchorLink>\n<AnchorLink>Carbon components</AnchorLink>\n<AnchorLink>Carbon elements</AnchorLink>\n\n</AnchorLinks>\n\n## Repo architecture\n\n[Carbon-themes](https://github.com/carbon-design-system/carbon-themes) was deprecated in v10, and the themes package [@carbon/themes](https://github.com/carbon-design-system/carbon/tree/master/packages/themes) now lives in the [Carbon](https://github.com/carbon-design-system/carbon) Carbon monorepo.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"@carbon/themes package\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/themes\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Carbon components\n\nCarbon components were reskinned in v10. 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\nDetailed technical migration docs for Carbon 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<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate carbon-components\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/packages/components/docs/migration/migrate-to-10.x.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate carbon-components-react\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/react/docs/migration\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate carbon-components Sass\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/migrate-to-10.x.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Carbon elements\n\nAll technical migration docs for Carbon elements are available in the `carbon` monorepo [docs folder](https://github.com/carbon-design-system/carbon/tree/master/docs/migration).\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate elements\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/docs/migration\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Icons\n\nThe `@carbon/icons` package can be now be found in the [Carbon monorepo](https://github.com/carbon-design-system/carbon/tree/master/packages/icons).\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<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Carbon icon package\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/packages/components/docs/migration/migrate-to-10.x.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate icons\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-icons.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Icon demo\"\n    href=\"https://carbon-elements.netlify.com/icons/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Color\n\nThe v10 color token architecture is based on the v9 architecture, with some minor changes to align with the design language. Carbon v9 product teams will see automatic, non-breaking color updates when they upgrade to v10.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate color\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-color.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Primary token-value mapping\"\n    href=\"https://carbon-elements.netlify.com/colors/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Themes token-value mapping\"\n    href=\"https://carbon-elements.netlify.com/themes/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Type\n\nThe type token architecture was redesigned for better clarity and flexibility. V10 moves from a basic type scale model to a more robust token-based architecture.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate type\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-type.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Type styles demo\"\n    href=\"https://carbon-elements.netlify.com/type/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Layout, grid, and spacing\n\nToken names changed in v10 but spacing values did not.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate the grid\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/grid/migrate-to-10.x.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate layout\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-layout.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Interactive grid examples\"\n    href=\"https://carbon-elements.netlify.com/grid/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Motion\n\nCarbon adheres to IBM Design Language motion standards. Motion updates should be coordinated with your product's design team.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"IBM motion package\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/motion\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate motion\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-motion.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"65ae0e48d5fc3305c99c17916c01746a","counter":1659,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Migration guide","description":"This guide includes everything you need to migrate your offering from an older version of Carbon to v10.","tabs":["Overview","Design","Develop"]},"exports":{},"rawBody":"---\ntitle: Migration guide\ndescription: This guide includes everything you need to migrate your offering from an older version of Carbon to v10.\ntabs: [\"Overview\", \"Design\", \"Develop\"]\n---\n\n<PageDescription>\n\nThe repository structure was overhauled during the transition from v9 to v10. Carbon code now lives in a monorepo.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>Repo architecture</AnchorLink>\n<AnchorLink>Carbon components</AnchorLink>\n<AnchorLink>Carbon elements</AnchorLink>\n\n</AnchorLinks>\n\n## Repo architecture\n\n[Carbon-themes](https://github.com/carbon-design-system/carbon-themes) was deprecated in v10, and the themes package [@carbon/themes](https://github.com/carbon-design-system/carbon/tree/master/packages/themes) now lives in the [Carbon](https://github.com/carbon-design-system/carbon) Carbon monorepo.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"@carbon/themes package\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/themes\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Carbon components\n\nCarbon components were reskinned in v10. 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\nDetailed technical migration docs for Carbon 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<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate carbon-components\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/packages/components/docs/migration/migrate-to-10.x.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate carbon-components-react\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/react/docs/migration\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate carbon-components Sass\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/migrate-to-10.x.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Carbon elements\n\nAll technical migration docs for Carbon elements are available in the `carbon` monorepo [docs folder](https://github.com/carbon-design-system/carbon/tree/master/docs/migration).\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate elements\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/docs/migration\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Icons\n\nThe `@carbon/icons` package can be now be found in the [Carbon monorepo](https://github.com/carbon-design-system/carbon/tree/master/packages/icons).\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<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Carbon icon package\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/packages/components/docs/migration/migrate-to-10.x.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate icons\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-icons.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Icon demo\"\n    href=\"https://carbon-elements.netlify.com/icons/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Color\n\nThe v10 color token architecture is based on the v9 architecture, with some minor changes to align with the design language. Carbon v9 product teams will see automatic, non-breaking color updates when they upgrade to v10.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate color\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-color.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Primary token-value mapping\"\n    href=\"https://carbon-elements.netlify.com/colors/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Themes token-value mapping\"\n    href=\"https://carbon-elements.netlify.com/themes/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Type\n\nThe type token architecture was redesigned for better clarity and flexibility. V10 moves from a basic type scale model to a more robust token-based architecture.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate type\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-type.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Type styles demo\"\n    href=\"https://carbon-elements.netlify.com/type/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Layout, grid, and spacing\n\nToken names changed in v10 but spacing values did not.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate the grid\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/grid/migrate-to-10.x.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate layout\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-layout.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Interactive grid examples\"\n    href=\"https://carbon-elements.netlify.com/grid/examples/preview/\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Motion\n\nCarbon adheres to IBM Design Language motion standards. Motion updates should be coordinated with your product's design team.\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"IBM motion package\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/motion\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrate motion\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-motion.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/updates/migration-guide/develop.mdx"}}}}