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.

Web Components #

1.5.0 New #

• Adds new Toggle component, updated examples, and new documentation.
• Release date 24.5.2022.

1.4.0 #

• Adds new switch Button component style variant which is reserved for the clinic switcher in the top left corner of an application.
• Simplifies all Button, Navigation and Layout component examples by removing all custom CSS.
• Simplifies all templates by removing most custom CSS.
• Moves previous custom clinic icons from components into the CSS Framework.
• Release date 20.5.2022.

1.3.0 #

• We’re deprecating health-light, health-dark, vet-light and vet-dark themes to simplify and unify Nordhealth’s branding for all digital products.
• The components have now been tested on React 18 as well, so we’ve extended the React peer dependency range to >= 17.
• Support for right-to-left languages has been improved.
• Navigation can now be resized and the size is saved to localStorage for the user, no need for your team to do any work to support this, it’ll remember the settings itself.
• Navigation and Layout components now support resizing and hiding/showing with multiple different methods which should provide a lot of flexibility for our users in the future:
  • Using mouse/touch gesture to drag it to hidden state and hover to reveal for quick access and tap/click to show permanently.
  • Using keyboard tab + arrow left and arrow right keys users can resize which improves accessibility. Also supports home and end keys to minimize/maximize the width via keyboard.
  • Using the command menu you can set a hotkey for toggling the navigation menu.
  • Using keyboard shortcut to show and hide it.
  • On smallest viewports it’s hidden by default and can be revealed via the hamburger menu by tapping it.
  • You can try all these things in our Application example template.
• Fixes coverage report not being generated from Docker container.
• Improves focus styles for Clinic Switcher in all examples.
• Improves the usage examples for Navigation component and templates.
• Layout component has a new navOpen property for controlling whether the navigation is hidden off-screen or not. Defaults to true for wide viewports, and false otherwise.
• Layout component has a new navToggle property that is used reference an element that should toggle the navigation.
• Adds drag(start, end) command to existing mouse plugin for tests.
• Adds MediaQueryController for hooking easy integration of matchMedia plus listeners into component.
• Adds truncation to heading text in Nav Group component.
• Adds custom scrollbar styling for Navigation component.
• Provides :focus fallback for environments where :focus-visible is not supported.
• Fixes warning logged by Command Menu, no need to treat any action as selected if command menu is not open.
• Includes also small generic performance and bug fixes.
• Release date 20.5.2022.

1.2.0 #

• You can now control the breakpoint of a responsive Stack component.
• We’ve deprecated Stack component’s previous responsive property and will remove it in a future version. We recommend using standard CSS media queries over this old property. Please see the updated usage example.
• We’ve switched to using matchMedia instead of ResizeObserver to check the viewport size in Popout component.
• Changes x and y properties in Popout to have convention prefix and clearer names.
• Updates visual presentation of deprecated component properties in docs.
• We now show vertical scrollbar in Dropdown component only when the content requires it (if it does not fit into the available vertical space).
• Release date 12.5.2022.

1.1.2 #

• Introduces new style for dropdowns and popouts on small viewports where they slide out from the bottom of the viewport.
• Moves all visual diff tests to run inside a Docker container.
• Sets a specific width to text inputs for consistency across browsers.
• Uses box-sizing to make the Date Picker input the same size on Chrome and Safari.
• Switch to using esnext esbuild config.
• Release date 12.5.2022.

1.0.1 #

• Makes condensed table style more condensed.
• Fix issue in getMonthNames that caused February to disappear from month dropdown.
• Update dependencies to remove workaround for TS files in test/dev servers.
• Use cond directive instead of ifDefined.
• Improve typing for fsm, now TypeScript will complain about any incorrect states.
• Adds observe decorator to simplify reacting to property changes.
• Removes redundant assignments from class constructors.
• Release date 2.5.2022.

1.0.0 #

• Official production release of @nordhealth/components and @nordhealth/react!!! 🎉
• For migration guidelines, please see Migration to 1.0.0.
• For documentation and usage guidelines, please see Web Components.
• For documentation about localization, please see Localization guidelines.
• Comes with many new production ready components such as: Progress Bar, Dropdown, Dropdown Group, Dropdown Item, Popout and Header.
• We’ve renamed action slot in header to end to match the naming conventions we use elsewhere.
• We’ve set stretch as the default align-items option for Stack component.
• We’ve added baseline, space-between, space-around and space-evenly options for justify-content property in Stack component.
• Make sure the align-items property always defaults to stretch for Stack component.
• Make sure Dropdown Item contents stay on one line and get truncated if too long to fit into the available space.
• Improve Dropdown component’s close-on-blur behavior in Safari.
• Marks shadowRootOptions in Dropdown as internal to hide it from the public docs.
• Make sure we properly handle unknown icon names in Icon component when loading from CDN.
• Removes gradients from primary buttons across all themes.
• Make sure disabled Input component always has the correct border color, no matter which element is hovered.
• Adds new xxl size for Avatar component.
• Makes Card component better support Stack where cards have the same size.
• Adds support for space-between, space-around and space-evenly justification for Stack component.
• Adds new responsive property for Stack which allows you to stack contents automatically when the viewport goes under certain threshold.
• Adds new wrap property for Stack which defines whether the Stack items are forced in a single line or can be flowed into multiple lines.
• Adds many new Stack usage examples.
• Fixes icon component’s sizing when used inside a flex container.
• Adds new Profile template into documentation.
• Make sure the heading in Dropdown Group stays on one line and gets shortened if really long.
• Converts border colors in all themes to be stronger to create a more finished look.
• Adds new less prominent default, card and header box shadows for all themes and additionally improves their legibility by adding a surrounding gray surface area.
• Adds call toString() on Select component’s value, for convenience when options are numbers.
• Adds LocalizeController for use in components.
• Exposes registerTranslation function for use in apps.
• Extracts all localized strings from components and gathers them in a translation file.
• Adds new Localization guidelines into docs under “guidelines” section.
• When using our React components, the types for event handlers no longer need to be defined like this:

  // TS complained unless you had a union of both types
  function handleChange(e: FormEvent | Event) {}
  <Input onChange={handleChange} />

  Now you can define them as:

  function handleChange(e: Event) {}
  <Input onChange={handleChange} />

• Fixes positioning of Popout component when nested.
• Fixes positioning of Tooltip component when nested.
• Fixes Popout component positioning when opening for the first time.
• Removes empty space when Popout component is added into a view.
• Hides Dropdown if focus moves elsewhere (improving keyboard accessibility).
• We now hide Tooltip component on click.
• Tweaks tooltip timings: longer delay to activate, shorter transition times.
• Add new dropdown examples to application template.
• Prevent auto scrolling when returning focus to Popout component trigger.
• Prevent Popout hide/show logic if already in closed or open state.
• Use :focus-visible to Navigation component to improve mouse user experience.
• Adds better disabled day styles for Calendar component.
• Adds new expand property for Calendar component.
• Adds various new usage examples for Calendar component.
• Adds better Navigation component examples to documentation.
• Removes extra spacing from Select component icons since these are no longer needed.
• Adds new clinic switcher example for Dropdown component.
• Makes sure hover text color is always correct for slotted contents in Dropdown Item component.
• Adds performance improvements to Popout component by only running autoUpdate functionality when the popous is open.
• Improves Popout component’s automated tests.
• Fixes Command Menu font-size bug which caused icons to show in a wrong position.
• Release date 13.4.2022.
  Migration guide to 1.0.0

1.0.0-rc.1 #

• Initial release candidate of @nordhealth/components.
• For documentation and usage guidelines, please see Web Components.
• Comes with 5 new components: Progress Bar, Dropdown, Dropdown Group, Dropdown Item, and Popout.
• We now map logical to physical properties in tooltip and popout, ensuring correct animations in RTL mode.
• We now use correct chevron icon in command menu in RTL mode.
• Tooltip now uses logical positions to better support RTL mode.
• Adds support for aria-expanded to button component.
• Adds support for aria-haspopup to button component.
• Release date 31.3.2022.

1.0.0-beta.24 #

• Allow multiple elements to use the same tooltip component.
• Fixes event targets to allow removal of event listeners.
• Restructures mouse command API and adds hover command.
• Fixes to automated test suite.
• Updates Nord CSS Framework to latest.
• Release date 30.3.2022.

1.0.0-beta.21 #

• Renames before and after slots to start and end in each component.
• Fixes a CSS bug with Input component slotted icons.
• Fixes an issue caused by rollup-plugin-summary npm package.
• Release date 29.3.2022.

1.0.0-beta.20 #

• Adds new Progress Bar component and related documentation.
• Bug fixes to Radio component’s styles.
• Moves Spinner component out of draft state.
• Adds fixes to visual regression tests.
• Release date 29.3.2022.

1.0.0-beta.19 #

• Adds new line-height-caption token.
• Release date 19.3.2022.

1.0.0-beta.18 #

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

1.0.0-beta.17 #

• Rename Calendar's nord-select event to change.
• Add nord-focus-date event to calendar.
• Ensure documentation for calendar and date picker is correct.

1.0.0-beta.16 #

• Fixes an issue which prevented programmatically unchecking a checkbox after it was manually checked.
• Release date 15.3.2022.

1.0.0-beta.15 #

• 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-beta.14 #

• Adds new “justify-content” property for Stack component.
• Fixes the expand sizing for Select and Input components to respect 100% width.
• To improve usability, make the placeholders have more contrast against actual text content.
• Make sure Nord’s CSS Framework reset utility helper doesn’t break Radio component styles.
• Improve Avatar component’s theming support.
• Improve Tooltip component’s theming support.
• Release date 13.3.2022.

1.0.0-beta.13 #

• 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-beta.12 #

• Fix all button component hover styles.
• Adds the ability to prevent command menu opening.
• Release date 11.3.2022.

1.0.0-beta.11 #

• Updates correct statuses for all components to reflect their working state.
• Improves Date Picker component test automation.
• Improve behavior of button when placed in stack.
• Make sure we only show button hover styles when actual button is hovered.
• Release date 10.3.2022.

1.0.0-beta.8 #

• Adds new Avatar component.
• We fixed a bug related to form events where the user might’ve previously got double events: the native one, and the one we dispatch ourselves. This is now fixed.
• Adds two new icons into Nordicons: interface-info and interface-warning.
• Release date 9.3.2022.

1.0.0-beta.6 #

• Adds support for no shadow variant in Banner component.
• Adds responsive functionality into Layout component.
• Fix icon import in Checkbox component.
• Various bug fixes and performance improvements.
• Release date 7.3.2022.

1.0.0-beta.4 #

• Fixes Banner component layout bugs.
• Release date 5.3.2022.

1.0.0-beta.3 #

• Adds new Banner component.
• Adds new interface-info icon.
• Adds new weak status colors into tokens.
• Release date 5.3.2022.

1.0.0-beta.2 #

• Adds new Empty State component.
• Release date 5.3.2022.

1.0.0-beta.1 #

• Adds new draft Layout component.
• Adds links styles into base components.
• Release date 5.3.2022.

1.0.0-beta.0 #

• Make sure Radio component styles work with Provet Cloud.
• Make sure Checkbox component styles work with Provet Cloud.
• Make sure common FormField component styles work with Provet Cloud.
• Fix all style issues discovered in Diarium testing.
• Fixes an issue which caused nested stacks to not respect default medium space.
• Release date 4.3.2022.

1.0.0-alpha.59 #

• Redesigned dark gray shades for Vet and Nord dark themes.
• Updates medical-bandage, medical-blood, medical-instrument-stethoscope, medical-pill and medical-radiology-scan to match the style of the rest of the icons.
• Adds new interface-content-book icon.
• Release date 3.3.2022.

1.0.0-alpha.57 #

• Add a single file output for Web Components to be used on documentation website.
• Release date 1.3.2022.

1.0.0-alpha.56 #

• Adds bug fixed to Tooltip component’s styles.
• Release date 26.2.2022.

1.0.0-alpha.55 #

• Adds new @nordhealth/react output that contains auto-generated react wrappers for the web components found in @nordhealth/components.
• The versioning of our new React components follow the same versioning as Web Components (this package).
• Updates licensing and package.json details.
• Release date 24.2.2022.

1.0.0-alpha.54 #

• Adds new Navigation component that is used to display the primary navigation in the sidebar of an application.
• Adds new Navigation Group component that is used for grouping navigation items into related categories.
• Adds new Navigation Item component that populates sidebar navigation with links.
• Adds tweaks to Tooltip component:
  • Improve accessibility when tooltip is “attached” to focusable web component.
  • Ensure only one tooltip shown at a time.
  • Fix z-index issues with tooltip.
  • Adds ability to dismiss tooltip with Esc.
• Header component now has a min-height to match the navigation sidebar.
• When button is used as a disabled link, it’s now removed from tab order and correctly reported as disabled to screen readers.
• We’ve improved the primary button variant focus styles.
• Adds support for button component to customize the background gradient via CSS custom properties.
• Improve Tooltip component text wrapping.
• Release date 23.2.2022.

1.0.0-alpha.51 #

• Ensure we always see slotchange events.
• Use common component styles for all input components, remove redundant styles from FormField.css.
• Release date 18.2.2022.

1.0.0-alpha.49 #

• Changes Command Menu hotkeys property to shortcuts.
• Add font size and color to header component.
• Improves margin handling for Fieldset component.
• Fixes Checkbox component to use correct border radius.
• Updates all components to use common component CSS reset.
• Various other bug fixes and performance improvements.
• Release date 17.2.2022.

1.0.0-alpha.48 #

• Adds new Header component that provides designated space for labelling the currently viewed context as well as providing primary actions.
• Add labels to icons in Button component usage examples.
• Updates all library dependencies and migrates to Stylelint 14.
• Release date 11.2.2022.

1.0.0-alpha.47 #

• Adds new Radio component that allow user to choose only one option from a predefined set of mutually exclusive options.
• Adds new Fieldset component that is used for grouping sets of input components.
• Adds new Tooltip component that is used for displaying additional information for the currently focused element.
• Improves button components default and disabled styles.
• Improves date picker’s default and disabled styles.
• Fixes text color for current date in date picker.
• Improves checkbox component’s cursor styles.
• Makes it possible to also click on an empty area between checkbox and label to toggle checked state.
• We now use repeat directive to properly handle re-ordering of years in Calendar.
• We’ve fixed a bug in form components to ensure disabled styles are always correctly applied.
• We’ve fixed a bug with font-families in certain form components like date picker and checkbox.
• We’ve made components documentation support usage and content guidelines.
• We’ve tweaked styles to properly handle default prop values where attr is missing.
• We’ve improved Checkbox component’s disabled styles in this release.
• Release date 8.2.2022.

1.0.0-alpha.46 #

• Adds new Checkbox component that allows user to choose one or more options from a limited set of options.
• Release date 14.1.2022.

1.0.0-alpha.45 #

• Adds new Calendar component that allows user to pick a date.
• Adds new Date Picker component that allows user to enter a date either through text input, or by choosing a date from the calendar.
• Adds reusable swipe controller.
• Adds reusable language direction controller.
• Release date 13.1.2022.

1.0.0-alpha.43 #

• Add input event for all form components.
• Improve how proxy button is added to DOM (now uses Lit’s renderer, rather than imperative code).
• Add support for submitting form by hitting enter key in input field.
• Improve card with-form example to use submit event.
• Release date 13.12.2021.

1.0.0-alpha.42 #

• We’ve moved labels closer to form elements to make forms more legible.
• Adds new card component form usage examples.
• Adds new example about form validation.
• Fixed background color tokens used in docs examples.
• Release date 11.12.2021.

1.0.0-alpha.41 #

• Adds new spinner component and related examples.
• Fixes select component’s appearance in Firefox.
• Release date 10.12.2021.

1.0.0-alpha.39 #

• Prevents spellcheck in Input.
• Fixes an issue which caused textarea to animate size.
• Adds new icon usage example for button component.
• Fixes icon hover colors for button component.
• Release date 10.12.2021.

1.0.0-alpha.38 #

• Adds new textarea component.
• Adds new common form component utilities.
• Release date 9.12.2021.

1.0.0-alpha.37 #

• Improved usage examples for all components.
• New large button size introduced.
• New danger button variation introduced.
• Generic CSS fixes to components.
• Release date 9.12.2021.

1.0.0-alpha.36 #

• Adds new command menu component.
• Adds all: initial for all components.
• Makes sure components don’t break because of CSS cascade.
• Release date 7.12.2021.

1.0.0-alpha.32 #

• Adds new input component and related functionality.
• We now warn in console if you try to use draft components in production environment.
• Adds custom gap option for Stack component.
• Removes default pointer cursor from table styles
• Adds custom focus outline to select and button components.
• Adds input hint to Select.
• Spacing between different form components is made consistent.
• Adds new align-items property for Stack.
• Release date 1.12.2021.

1.0.0-alpha.31 #

• Adds new Table, Badge and Card components.
• Adds new target property for Button component.
• Not ready for production usage.
• Release date 20.10.2021.

1.0.0-alpha.29 #

• Updates Nord package dependencies to latest.
• Changes select component to use official Nordicon icons.
• Makes button component support download attribute when it is used as a link.
• Makes button component support the new currentColor functionality in Nordicons.
• Not ready for production usage.
• Release date 17.10.2021.

CSS Framework #

1.2.1 New #

• 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.

Design Tokens #

5.0.0 New #

• We’re deprecating health-light, health-dark, vet-light and vet-dark themes to simplify and unify Nordhealth’s branding for all digital products.
• Release date 20.5.2022.

4.2.7 #

• Adds new transition-mobile token for mobile menu transitions. Used in mobile versions of Popout and Dropdown components.
• Release date 11.5.2022.

4.2.5 #

• Darkens the color-nav-surface in vet light theme to provide better contrast.
• Release date 2.5.2022.

4.2.4 #

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

4.2.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.

4.2.0 #

• Adds new line-height-caption token.
• Release date 19.3.2022.

4.1.0 #

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

4.0.0 #

• 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.
• We’re removing color-primary-strong token from the system as it was only referenced in one location.
• This color is now replaced with CSS filters inside the system which darken the existing color-primary.
• Hence all of these are breaking changes, we’re releasing a new major version.
• Release date 14.3.2022.

2.2.1 #

• Updates previous weak status colors with new dark variants.
• Release date 7.3.2022.

2.2.0 #

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

2.1.0 #

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

2.0.5 #

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

2.0.4 #

• We’ve changed tokens output to only include nord light theme, and produce additional tokens output for alternative themes to simplify usage.
• Release date 8.2.2022.

2.0.3 #

• Modifies color-border-strong for Nord light theme to match the rest of the themes better.
• Release date 13.1.2022.

2.0.2 #

• Removes size-icon-input design token.
• Release date 9.12.2021.

2.0.1 #

• Adds completely new redesigned and more accessible status colors.
• Adds new text weakest color tokens.
• Adds new text error color token.
• Better automatic sorting for tokens behind the scenes.
• Release date 4.12.2021.

1.0.8 #

• Adds new n-color-surface-raised, n-color-surface-raised-dark, n-color-surface-raised-vet, n-color-surface-raised-vet-dark, n-color-surface-raised-health, n-color-surface-raised-health-dark design tokens.
• Fixes order meta data on color tokens.
• Release date 20.10.2021.

1.0.6 #

• Converts z-index and transition design tokens to use more consistent naming.
• Small bug fixes and feature improvements.
• Updates Nord package dependencies to latest.
• Release date 17.10.2021.

1.0.0 #

• Design Tokens package reaches stable state and is now ready for production usage.
• We’ve worked on adding extensive usage documentation for the design tokens.
• Additionally, we’ve added new z-index, transition, and gradient categories.
• All color themes have been re-designed form the ground up to support dark UI.
• All dropshadows have been re-designed.
• Please see the update Design Tokens documentation for more details.
• Release date 12.10.2021.

1.0.0-alpha.13 #

• Adds new box-shadow, box-shadow-modal, box-shadow-tooltip, box-shadow-nav and box-shadow-card tokens.
• Modifies color-border and color-background and adds new color-border-dark for each theme.
• Renames border-radius-small to border-radius-s.
• Changes default border-radius from 8px to 5px.
• Adds new color-overlay token for modal overlays.
• Release date 10.8.2021.

1.0.0-alpha.10 #

• Modifies dark primary color shades.
• Updates all package dependencies to latest.
• Release date 10.6.2021.

Nord Themes #

6.0.0 New #

• We’re deprecating health-light, health-dark, vet-light and vet-dark themes to simplify and unify Nordhealth’s branding for all digital products.
• Release date 20.5.2022.

5.1.8 #

• Adds new transition-mobile token for mobile menu transitions. Used in mobile versions of Popout and Dropdown components.
• Release date 11.5.2022.

5.1.6 #

• Darkens the color-nav-surface in vet light theme to provide better contrast.
• Release date 2.5.2022.

5.1.5 #

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

5.1.3 #

• 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.

5.1.1 #

• Brings in latest changes from Design Tokens v4.2.0.
• Release date 19.3.2022.

5.1.0 #

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

5.0.0 #

• 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.
• We’re removing color-primary-strong token from the system as it was only referenced in one location.
• This color is now replaced with CSS filters inside the system which darken the existing color-primary.
• Hence all of these are breaking changes, we’re releasing a new major version.
• Release date 14.3.2022.

3.2.1 #

• Updates previous weak status colors with new dark variants.
• Release date 7.3.2022.

3.2.0 #

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

3.1.0 #

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

3.0.6 #

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

3.0.5 #

• Simplifies test framework for themes package.
• Release date 23.2.2022.

3.0.4 #

• Brings in latest changes from Design Tokens v2.0.4.
• Release date 8.2.2022.

3.0.3 #

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

3.0.2 #

• Brings in latest changes from Design Tokens v2.0.2.
• Release date 9.12.2021.

3.0.1 #

• Brings in latest changes from Design Tokens v2.0.1.
• Release date 4.12.2021.

2.0.8 #

• Adds new color-surface-raised style into theming.
• Release date 20.10.2021.

2.0.6 #

• Small bug fixes and feature improvements.
• Updates Nord package dependencies to latest.
• Release date 17.10.2021.

2.0.0 #

• Themes package reaches stable state and is now ready for production usage.
• We’ve reworked all the colors from the ground up.
• Additionally there’re new gradients and box-shadows added.
• We’ve added new dark themes as well, so in total there are now 6 themes included in the package: nord light, nord dark, veterinary light, veterinary dark, healthcare light, and healthcare dark.
• Please see the updated Themes documentation for more details.
• Release date 12.10.2021.

1.4.1 #

• Adds new box-shadow, box-shadow-modal, box-shadow-tooltip, box-shadow-nav and box-shadow-card tokens.
• Modifies color-border and color-background and adds new color-border-dark for each theme.
• Adds new color-overlay token for modal overlays.
• Removes color-active-menu token and deprecates it.
• Release date 10.8.2021.

1.2.1 #

• Modifies dark primary color shades.
• Updates all package dependencies to latest.
• Release date 10.6.2021.

1.2.0 #

• This release refactors and renames the different color themes to be nord, health, and vet.
• Simplifies the overall naming for colors.
• Adds Subresource Integrity support (SRI).
• Release date 5.6.2021.

1.1.0 #

• Adds new Nordhealth theme.
• Renames all CSS custom properties to follow new design token structure.
• Release date 15.5.2021.

1.0.2 #

• Adds readme and license into the package.

1.0.0 #

• Initial release of @nordhealth/themes which includes Provet Cloud and Diarium themes. For documentation and usage guidelines, please see themes.
• Release date 22.2.2021.

Webfonts #

2.0.14 New #

• 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.

2.0.13 #

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

2.0.12 #

• Cleans up build dir before build to prevent accidentally publishing old files.
• Release date 23.2.2022.

2.0.11 #

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

2.0.10 #

• We’ve removed font CSS from the package, but left the font-face definitions.
• Font CSS is now the responsibility of Nord’s CSS Framework.
• Webfonts package does not depend on design tokens anymore.
• Release date 8.2.2022.

2.0.9 #

• Small bug fixes and feature improvements.
• Release date 4.12.2021.

2.0.7 #

• Small bug fixes and feature improvements.
• Updates Nord package dependencies to latest.
• Release date 20.10.2021.

2.0.0 #

• Webfonts package reaches stable state and is now ready for production usage.
• Please see the updated Webfonts documentation for more details.
• Release date 12.10.2021.

1.1.3 #

• Updates all internal design system package dependencies to latest.
• Release date 10.8.2021.

1.1.0 #

• Unifies the naming of assets and simplifies the package overall.
• Adds base font-feature-settings for different heading levels.
• Adds Subresource Integrity support (SRI).
• Release date 5.6.2021.

1.0.4 #

• Internal improvements and bug fixes.
• Release date 15.5.2021.

1.0.3 #

• Makes @nordhealth/fonts package completely independent from @nordhealth/tokens.
• Can now be used standalone without any other package from Nord.
• Adds readme and license into the package.
• Release date 11.2.2021.

1.0.0 #

• Initial release of @nordhealth/fonts which includes Nordhealth Sans and Nordhealth Mono.
• For documentation and usage guidelines, please see Webfonts.
• Release date 11.2.2021.

Nordicons #

1.3.8 New #

• 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.3.7 #

• Adds two new icons into Nordicons: interface-info and interface-warning.
• Release date 10.3.2022.

1.3.5 #

• Adds new interface-checked-circle icon.
• Release date 7.3.2022.

1.3.4 #

• Adds new interface-info icon.
• Release date 5.3.2022.

1.3.3 #

• Updates medical-bandage, medical-blood, medical-instrument-stethoscope, medical-pill and medical-radiology-scan to match the style of the rest of the icons.
• Adds new interface-content-book icon.
• Release date 3.3.2022.

1.3.2 #

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

1.3.1 #

• Outputs all icons as ES Modules now.
• Simplifies the build logic behind the scenes.
• Release date 4.12.2021

1.2.2 #

• Adds three new icons into the library: generic-bug, generic-github and generic-slack.
• Release date 20.10.2021

1.2.0 #

• We updates Nordicons interface to support downloading icons in addition to directly copying the vectors to a Figma file.
• We manually fixed 42 icons to work in Figma when you use the copy paste functionality.
• Release date 17.10.2021

1.1.2 #

• Fix currentColor definitions in 14 icons. An issue that prevented changing color of these icons.
• Updates all tags in Nordicons package to make them more consistent.
• Release date 16.10.2021

1.0.1 #

• Improves the meta data of icons and tagging.
• Updates Nord package dependencies to latest.
• Release date 15.10.2021.

1.0.0 #

• Initial release of @nordhealth/icons.
• Comes with 188 carefully hand picked and designed icons.
• For documentation and usage guidelines, please see Nordicons.
• Release date 14.10.2021.

Figma Toolkit #

2.0.0 New #

• Switches to using native theming for Nord dark and light themes, meaning we now use Figma Libraries instead of the previous Themer Plugin.
• We’ve removed separate Healthcare and Veterinary themes and made the Nord light theme the default. Nord dark theme exists still as well. We will next do a similar change in the code based system as well and will release new major versions of all packages that rely on the theming.
• We’ve added new stronger border color styles for the light Nord theme to reflect recent changes in our design tokens.
• We’ve added new card shadow styles with raised surfaces to reflect recent changes in our design tokens.
• Color libraries are moved onto separate files out of the Nord Figma Toolkit.
• Minor bug fixes and cleanup.

1.0.3 #

• Minor changes to tokens to enable native theming in Figma.

1.0.2 #

• Fixed alignment issue with select component expanded state.

1.0.1 #

• Moving Nordicons to a separate file to comply with license requirements.

1.0.0 #

• Initial release of Nord Figma Toolkit.
• Release date 17.3.2022.