Migration to Provet Cloud Design SystemNew
This guide will help you understand how to transition an existing project from using the Nord Design System to using the Provet Cloud Design System instead.
Updating dependencies
The first step towards migrating to the Provet Cloud Design System is to update package.json
with the necessary dependencies. You should:
- Rename existing
@nordhealth/components
to@provetcloud/web-components
and update the version to1.0.0
. - Rename existing
@nordhealth/css
to@provetcloud/css
and update the version to1.0.0
. - If using Vue, rename existing
@nordhealth/vue
to@provetcloud/web-components-vue-types
and update the version to1.0.0
. - If using Themes package, rename existing
@nordhealth/themes
to@provetcloud/themes
and update the version to1.0.0
. - If using Design Tokens package, rename existing
@nordhealth/tokens
to@provetcloud/tokens
and update the version to1.0.0
.
Here’s an example package.json
:
{
"dependencies": {
"@provetcloud/web-components": "^1.0.0",
"@provetcloud/web-components-vue-types": "^1.0.0",
"@provetcloud/css": "^1.0.0"
}
}
Updating references
You will need to update the following references to the Nord packages in your project to point to the Provet Cloud packages instead. This includes updating the following:
- Update any references from
@nordhealth/components
to@provetcloud/web-components
. For example:import type { Layout } from '@nordhealth/components'
toimport type { Layout } from '@provetcloud/web-components'
. - Update any references from
@nordhealth/css
to@provetcloud/css
. - Update any references from
@nordhealth/themes
to@provetcloud/themes
. - Update any references from
@nordhealth/vue
to@provetcloud/web-components-vue-types
. For example:"types": ["@nordhealth/vue"]
to"types": ["@provetcloud/web-components-vue-types"]
. - Update any references from
@nordhealth/tokens
to@provetcloud/tokens
. - Update any CSS overrides from
nord-
toprovet-
. - Update
nord
theme toprovet
,nord-high-contrast
toprovet-high-contrast
, etc. - Switch from
nord-
namespace toprovet-
namespace instead (for example in Playwright tests,page.locator('provet-top-bar')
).
Renaming components
While the Provet Cloud Design System ships with the same set of Web Components, we use a different namespace for them. Instead of a <nord-button></nord-button>
we have now a <provet-button></provet-button>
and so forth. You will need to use find and replace on your whole project to update the component names:
- Replace all instances of
<nord-
with<provet-
. - Replace all instances of
</nord-
with</provet-
.
Removing custom themes
Since Provet Cloud Design System ships out-of-the-box with the Provet Cloud themes, you should remove any custom theming you may have set up in your project. You may for example have the following in your project that should be removed with the migration:
:root {
--n-color-accent: #401197;
}
Updating CDN URLs
If you’re loading any of the below listed packages via Nord CDN, you’ll have to update the URLs to point to the Provet Cloud CDN instead:
For the latest available packages, please use the following URLs instead to migrate to the Provet Cloud CDN:
Design Tokens
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/tokens/1.0.0/tokens.custom-properties.css" integrity="sha384-VK/JPz9bWmhfdeh0J8Zpd/cpSMbKj0SBMzr/5lONiNYFY6U7XzjjQgRYLJt4XfPd" crossorigin="anonymous" />
Web Components
<script type="module" src="https://nordcdn.net/ds/provetcloud/web-components/1.3.2/index.js" integrity="sha384-KDN832iCw/B3PvEG7/f8pjlBYkAwdpfbhtq4NBRnYaQvIijaSrtqQ23YqIRDKhvI" crossorigin="anonymous"></script>
CSS Framework
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/css/1.1.0/provet.min.css" integrity="sha384-1oPScOelquAHG7S9/NvXjf0pzu2XCqVDlTcdBiODTq4frAn/By0t8LStOJuHCN1i" crossorigin="anonymous" />
Themes
<!-- Light default theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/themes/1.0.0/provet.css" integrity="sha384-m91LHupcnWiGya8NVLut8CbIzk4BXmIyANudHXe2506i9wlTr4ccncegBmvsAThA" crossorigin="anonymous" />
<!-- Light high contrast theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/themes/1.0.0/provet-high-contrast.css" integrity="sha384-fbLjK//LfE5FFaBHp9DvaZCNWnVTuEA57zX/IolnOWbDZuSF9PtgDTMNqKsJtvp7" crossorigin="anonymous" />
<!-- Dark default theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/themes/1.0.0/provet-dark.css" integrity="sha384-Iuru6O5PBD9zuQgQfPdDPG2xi/VOwtaFEoF8TQxXewAqJF70UeXPVaN/TjmRNABQ" crossorigin="anonymous" />
<!-- Dark high contrast theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/themes/1.0.0/provet-dark-high-contrast.css" integrity="sha384-QtM+aBxPxUr2tIzhJxYufPFblRmd//5ZhGVyY+PgezK9YQdjhYRg2ft7KR63x7Pc" crossorigin="anonymous" />
Updating Localization Framework Integration
If you are using the Localization Framework Integration, you will need to update the integration by following the updated guidelines:
Getting support
Have a question about migration? Please head over to the Support page for more guidelines and ways to contact us.