# Migration to 4.0.0 Web Components > *This guide will help you understand how to transition an existing project from using an older version of Nord Web Components to using the latest 4.0.0 version.* ## What’s changing? The latest version of [Nord Design System](/) now ships with two distinctive brands, [therapy](/?theme=nord) and [veterinary](/?theme=vet). You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in. We’re introducing these changes to unify the two design system platforms we have into one platform that can serve all of [Nordhealth](https://nordhealth.com){rel="[\"nofollow\"]"}. This is necessary so that we can better support the next generation of apps and generative AI experiences at Nordhealth. While this is a major change for our underlying architecture, we’ve kept it as backwards compatible as possible so that the upgrade path would stay straight­forward. We’ll explain the required steps further down on this page. Introducing this new layer of abstraction into Nord Design System’s theming architecture means that it now consists of the following four layers: - **[Foundations](/):** The foundations for building the next generation of apps and generative AI experiences at Nordhealth. - **[Brands](/docs/developer/):** Any business unit specific customizations. - **[Interface Mode Themes](/design/themes/):** Light, dark, and high contrast themes. - **[Accent Color](/design/themes/#accent-color):** For when apps need easy user level theming. > [!TIP] > This release doesn't include breaking changes for the existing users of Nord Design System. --- ## Updating package.json and dependencies To migrate your application to use the latest [Nord Design System](/) packages, update `package.json` with the necessary dependencies. You should: - Update existing `@nordhealth/components` to version `4.0.0`. - Update existing `@nordhealth/css` to version `4.0.0`. - Update existing `@nordhealth/themes` to version `9.0.0`. - If using Design Tokens directly, update `@nordhealth/tokens` to version `8.0.0`. - If using our React wrappers (`@nordhealth/react`), consider switching to `@nordhealth/components` instead as React 19 now supports Web Components and we’ve deprecated this package ([more information](#deprecating-react-wrappers)). - If using our Web Component Vue Types (`@nordhealth/vue`), consider switching to `@nordhealth/components/lib/vue.d.ts` instead as we’ve deprecated this package ([more information](#deprecating-vue-package)). Here’s an example `package.json`: ```json { "dependencies": { "@nordhealth/components": "^4.0.0", "@nordhealth/css": "^4.0.0", "@nordhealth/themes": "^9.0.0" } } ``` --- ## Deprecating React wrappers With the recent [release of React 19](https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements){rel="[\"nofollow\"]"} and the added support for Custom Elements, we’re deprecating the `@nordhealth/react` package (which includes the Next.js integration) and will be removing it in the next major release. For now, `@nordhealth/react` will continue to receive updates as its build is fully automated, but you should start planning on utilizing the `@nordhealth/components` package directly where possible. To continue having full type checking and auto-completion in your JSX, you can use [the new `@nordhealth/components/lib/react.d.ts` type definition file](/docs/developer/web-components/#types-and-editor-integration-with-react). --- ## Deprecating Vue package We decided to make the Vue-specific types for our components part of the `@nordhealth/components` package, instead of needing a separate `@nordhealth/vue` package. They can now be retrieved from the new `@nordhealth/components/lib/vue.d.ts` type definition file instead of `@nordhealth/vue`. Because of this, we’re deprecating the `@nordhealth/vue` package (which *only* contains the same types and no code) and will be removing it in the next major release. For now, `@nordhealth/vue` will continue to receive updates as its build is fully automated, but you should start planning on utilizing [the new type definition file](/docs/developer/web-components/#types-and-editor-integration-with-vue) directly where possible. --- ## Getting support Have a question about migration to `4.0.0`? Please head over to the [Support page](/resources/support/) for more guidelines and ways to contact us. --- > [!WARNING] > Please note that the contents in this section (and below it) are only relevant when you're migrating from Provet Design System to Nord Design System. ## Migrating from Provet Design System If you’re migrating from Provet Design System to Nord Design System, we’ve collected below an overview of changes to take into account. You can view more details about each specific change further down this page. ### @provetcloud/web-components - We are deprecating and ending support for the `@provetcloud/web-components` package. The package itself will continue to function, but when time permits, you should migrate to using the `@nordhealth/components` package that now supports both therapy and veterinary brands. - All Web Components now use ``, they need to be renamed to ``. ### @provetcloud/web-components-vue-types - We are deprecating and ending support for the `@provetcloud/web-components-vue-types` package. The package itself will continue to function, but when time permits, you should migrate to using the new `@nordhealth/components/lib/vue.d.ts` type definition file that supports both therapy and veterinary brands. ### @provetcloud/css - We are deprecating and ending support for the `@provetcloud/css` package. The package itself will continue to function, but when time permits, you should migrate to using the `@nordhealth/css` package that now supports both therapy and veterinary brands. ### @provetcloud/tokens - We are deprecating and ending support for the `@provetcloud/tokens` package. The package itself will continue to function, but when time permits, you should migrate to using the `@nordhealth/tokens` package that now supports both therapy and veterinary brands. - While the CSS Custom Properties we ship continue to work independent of the brand that is chosen, we have introduced an appendix for the **veterinary** specific design tokens when you use them in e.g. Sass or JavaScript formats. To access for example the veterinary specific accent color, you’d use `$n-color-accent-vet` in Sass or `tokens.nColorAccentVet` in JavaScript. ### @provetcloud/themes - We are deprecating and ending support for the `@provetcloud/themes` package. The package itself will continue to function, but when time permits, you should migrate to using the `@nordhealth/themes` package that now supports both therapy and veterinary brands. - This package now includes four additional themes; `vet`, `vet-dark`, `vet-high-contrast`, and `vet-dark-high-contrast`. --- ## Updating references If you’re migrating from Provet Design System, you should update the following references to the Provet packages in your project to point to the Nord packages instead. This includes updating the following: - Update any references from `@provetcloud/web-components` to `@nordhealth/components`. For example: `import type { Layout } from '@provetcloud/web-components'` to `import type { Layout } from '@nordhealth/components'`. - Update any references from `@provetcloud/css` to `@nordhealth/css`. - Update any references from `@provetcloud/themes` to `@nordhealth/themes`. - Update any references from `@provetcloud/web-components-vue-types` to `@nordhealth/components/lib/vue.d.ts`. For example: `"types": ["@provetcloud/web-components-vue-types"]` to `"types": ["@nordhealth/components/lib/vue.d.ts"]`. - Update any references from `@provetcloud/tokens` to `@nordhealth/tokens`. - Update any CSS overrides from `provet-` to `nord-`. - Update any Sass or JavaScript references to the Design Tokens to include the `vet` appendix. For example: `$n-color-accent` to `$n-color-accent-vet` in Sass, or `tokens.nColorAccent` to `tokens.nColorAccentVet` in JavaScript. - Updat any references from `@import "@provetcloud/tokens/lib/tokens.scss";` to `@import "@nordhealth/tokens/lib/color-vet.scss";`. - Update `provet` theme to the new `vet` theme, `provet-high-contrast` to `vet-high-contrast` theme, etc. - Switch from `provet-` namespace to `nord-` namespace instead (for example in Playwright tests, `page.locator('nord-top-bar')`). --- ## Renaming components While Nord Design System ships with the same set of Web Components as Provet Design System, we use a different namespace for them. Instead of a `` we have a `` and so forth. You will need to use find and replace on your whole project to update the component names: - Replace all instances of ` ``` ### Web Components ```html ``` ### CSS Framework ```html ``` ### Themes --- ## Updating themes If you’re migrating from Provet Design System, switch to using the newly added veterinary themes in the updated `@nordhealth/themes` package: - **Light (default):** `@nordhealth/themes/lib/vet.css` - **Light high contrast:** `@nordhealth/themes/lib/vet-high-contrast.css` - **Dark:** `@nordhealth/themes/lib/vet-dark.css` - **Dark high contrast:** `@nordhealth/themes/lib/vet-dark-high-contrast.css` > [!NOTE] > Please note that the default light veterinary theme is no longer part of the CSS Framework. Instead, it needs to be imported separately for the correct look & feel. See [theming documentation](/design/themes/) for more details. --- ## Updating Design Tokens If you’re migrating from Provet Design System and using the [Design Tokens](/core/tokens/) in Sass or JavaScript, you will need to use the new brand specific `vet` appendix. **When using Sass:** ```scss .example { // To access veterinary brand colors, use -vet appendix color: $n-color-accent-vet; // To access therapy brand colors (default), no appendix is needed color: $n-color-accent; } ``` **When using the Common.js module:** ```js // To access veterinary brand colors, use Vet appendix console.log(tokens.nColorAccentVet) // To access therapy brand colors (default), no appendix is needed console.log(tokens.nColorAccent) ``` --- ## Updating Localization Framework Integration If you’re migrating from Provet Design System and using the [Localization Framework Integration](/docs/developer/localization/#localization-framework-integration), you will need to update the integration by following the updated guidelines: [View Guidelines](/docs/developer/localization/#localization-framework-integration)