Latest Releases

Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s organization page lists all packages available and their most recent versions.

CSS Framework #

3.2.0New#

• Adds new var(--n-size-top-bar) sizing token that is used for setting the default height of the Top Bar component.
• Release date 11.4.2024.

3.1.1 #

• Remove redundant overscroll-behavior-block: none; from CSS Framework.
• Release date 18.10.2023.

3.1.0 #

• This release adds a new Counter utility that can be used for showing the unread messages count in the Top Bar component.
• Release date 31.5.2023.

3.0.0 #

• New major release that brings various improvements and bug fixes!! ✨🥳
• .n-stack and .n-gap now has a gap of --n-space-m by default instead of none, to mirror the Stack component’s default behaviour.
• We’ve introduced the following new color variables:
  • var(--n-color-text-danger)
  • var(--n-color-text-highlight)
  • var(--n-color-text-info)
  • var(--n-color-text-neutral)
  • var(--n-color-text-neutral-strong)
  • var(--n-color-text-progress)
  • var(--n-color-text-warning)
  • var(--n-color-text-warning-strong)
  • var(--n-color-border-danger)
  • var(--n-color-border-highlight)
  • var(--n-color-border-info)
  • var(--n-color-border-neutral)
  • var(--n-color-border-progress)
  • var(--n-color-border-success)
  • var(--n-color-border-warning)
  • var(--n-color-surface-lowered)
  • var(--n-color-status-notification)
  • var(--n-color-accent-secondary)
• For detailed description of all changes, please see Migration guide.
• Breaking changes are also covered in the migration guide.
• Release date 19.5.2023.

Migration guide

2.5.1 #

• Add support for using n-input class on wrapper elements.
• Add accompanying n-input-invalid class.
• Improves documentation for misc utilities in CSS Framework.
• Improves documentation for border utilities in CSS Framework.
• Release date 10.5.2023.

2.5.0 #

• Adds new var(--n-space-xs) space token.
• Adds new xs space utilities and missing alignment helpers to CSS Framework.
• Release date 29.3.2023.

2.4.1 #

• Updates Nord Design Tokens to the latest version.
• Release date 24.10.2022.

2.4.0 #

• Adds Description List utility helper to the CSS Framework.
• See updated usage examples for Drawer component.
• Release date 28.9.2022.

2.3.0 #

• Adds new xs (10px) and xxs (8px) icon sizes which are replacements for the old xs size. This is a non-breaking change so no actions are required from your side.
• This is done to improve the rendering of our smallest icons since they now align with the pixel grid used for icons.
• Release date 16.9.2022.

2.2.1 #

• Improves documentation and examples for new status colors.
• Release date 15.9.2022.

2.2.0 #

• The small icon dimensions are changed from 11px to 12px.
• Release date 9.9.2022.

2.1.0 #

• Adds border radius tokens as utility helpers to apply rounded corners to elements.
• Adds box shadow utility helpers to help reflect the elevation of a component or element.
• Release date 9.9.2022.

2.0.0 #

• We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products. For more details, please see migration guidelines.
• Release date 7.9.2022.

Migration guidelines

1.4.1 #

• Converts var(--n-size-icon-s) token from 12px to 11px, so that it looks visually more balanced inside buttons and similar elements.
• Updates all Node.js dependencies to latest.
• Release date 17.8.2022.

1.4.0 #

• Adds margin auto helpers so elements can be centered vertically, horizontally, and both.
• Adds grid item helpers to do the same within a grid.
• Updates demos so that stack and grid helpers are more clearly presented.
• Updates demos to show new helpers.
• Updates docs to explain new helpers.
• Release date 10.8.2022.

1.3.5 #

• Deprecates n-index-header and n-index-dropdown tokens.
• Adds new n-index-nav design token.
• Release date 4.8.2022.

1.3.4 #

• Bugfix: Missing borders and colors in CSS Framework.
• Release date 27.6.2022.

1.3.3 #

• Adds two new high contrast Nord themes.
• Release date 20.6.2022.

1.3.2 #

• Small bug fixed and performance improvements.
• Release date 17.6.2022.

1.3.1 #

• We’ve removed skeleton related gradients from CSS Framework, since the new Skeleton component does not use them anymore.
• Release date 16.6.2022.

1.3.0 #

• Switches to using REM based font-sizes instead of pixels for better accessibility.
• Adds new n-color-overlay design token that allows you to distinguish a modal layer from the layer underneath.
• Release date 14.6.2022.

1.2.1 #

• Updates to documentation and examples.
• Release date 24.5.2022.

1.2.0 #

• Adds new .n-clinic-icon helper class to generate clinic icons for Navigation and Dropdown components.
• Updates documentation for misc helpers to include examples of new clinic icons.
• Release date 20.5.2022.

1.1.2 #

• Adds new accent color styles into .n-reset utility class.
• Adds prepare script to fill gaps in npm run bootstrap so that components pkg is ready to start immediately after.
• Release date 20.5.2022.

1.1.1 #

• Adds web server for easier local development of the CSS Framework.
• Add new grid helpers and usage example, please see the documentation.
• Release date 11.5.2022.

1.0.5 #

• Adjust the specificity level of typescale styles to allow margin helpers to apply when using typescale classes.
• Adds n-typecale-m helper back into CSS Framework.
• Darkens the color-nav-surface in vet light theme to provide better contrast.
• Release date 2.5.2022.

1.0.3 #

• Adds even stronger border color styles for all light themes.
• Adds new card shadow styles with raised surfaces.
• Release date 11.4.2022.

1.0.2 #

• Converts border colors in default Nord theme to be stronger to match Veterinary theme better.
• Adds new less prominent default, card and header box shadows for all themes.
• Release date 10.4.2022.

1.0.0 #

• Initial release of @nordhealth/css.
• For documentation and usage guidelines, please see CSS Framework.
• Release date 30.3.2022.

1.0.0-beta.1 #

• Remove margins from .n-typescale helpers in CSS Framework.
• Only apply margins to typography elements when they’re inside the .n-typeset helper.
• Reduce specificity on .n-typescale helpers.
• Opt out of typeset on the typescale example to demonstrate the lack of margins on them.
• Adjust typescale helpers to be more powerful selectors.
• Release date 30.3.2022.

1.0.0-beta.0 #

• Full rewrite of CSS Framework with bug fixes and performance improvements.
• Adds new form utility classes .n-input, .n-label, .n-hint, .n-error and related states for building custom form fields.
• Adds new .n-caption text utility class.
• Adds new .n-color-accent background color utility class.
• Adds new .n-color-status-* utility classes for applying status background colors.
• Adds new .n-color-status-*-weak utility classes for applying weak status background colors.
• Adds new .n-color-text-success utility class for applying success text color.
• Release date 19.3.2022.

1.0.0-alpha.26 #

• Adds new color-text-success token.
• Release date 17.3.2022.

1.0.0-alpha.25 #

• We’re renaming color-primary to color-accent to better support our themes.
• We’re renaming color-text-inverse to color-text-on-accent to better support our themes and better explain where the color should be used.
• Release date 14.3.2022.

1.0.0-alpha.24 #

• We’re removing color-primary-strong token from the system as it was only referenced in one location.
• Release date 12.3.2022.

1.0.0-alpha.23 #

• Adds new .n-divider helper utility class.
• Release date 7.3.2022.

1.0.0-alpha.22 #

• Adds new weak status colors into tokens.
• Release date 5.3.2022.

1.0.0-alpha.21 #

• Redesigned dark gray shades for Vet and Nord dark themes.
• Release date 5.3.2022.

1.0.0-alpha.19 #

• Add anchor styles into reset.
• Add general typography into reset.
• Adjusts typography helpers to use :where() to reduce specificity.
• Adjusts reset to use :where() to reduce specificity.
• Switch to using token variables rather than static values.
• Release date 26.2.2022.

1.0.0-alpha.18 #

• Updates licensing and package.json details.
• Release date 24.2.2022.

1.0.0-alpha.17 #

• Adds new text align utilities.
• Release date 23.2.2022.

1.0.0-alpha.16 #

• We’ve created new typographic helpers for our CSS Framework.
• These make it easier to apply an HTML class to a containing element to get the basic type styles you’d expect to present content as clearly and efficiently as possible.
• Release date 18.2.2022.

1.0.0-alpha.15 #

• Updates all library dependencies and migrates to Stylelint 14.
• Release date 11.2.2022.

1.0.0-alpha.14 #

• CSS Framework package does not depend on design tokens package anymore.
• We’ve removed font CSS from the Webfonts package and moved it into this package instead.
• CSS Framework now comes with a base theme (Nord), so that it can be used standalone.
• We’ve updated the CSS Framework utils to generate margin and padding helpers with sizes at the end to improve readability.
• We’ve added diagrams to the documentation to explain how logical properties apply to different sides of an element.
• Release date 8.2.2022.

1.0.0-alpha.13 #

• Brings in latest changes from Design Tokens v2.0.3.
• Release date 13.1.2022.

1.0.0-alpha.12 #

• Complete rewrite of our CSS Framework.
• Provides a method of styling elements with as little friction as possible.
• Makes it possible to use our Design Tokens through memorable CSS based utility classes.
• We’ve tried to strike a balance between readable but brief class names in this release.
• We’ve also made sure that applying tokens using the CSS Framework comes with a reduced risk of error, to e.g. ensure you’re using our colors as they were intended to be used.
• Release date 23.12.2021.

1.0.0-alpha.11 #

• Now only includes the base tokens and relies on theming package for theming.
• Previously output file size was 21.27 KB, now is only 5.62 KB.
• Not ready for production usage.
• Release date 9.12.2021.