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:

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:


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:


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:

View Guidelines


Getting support

Have a question about migration? Please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.

 
Edit page