@ndwnu/design-system 14.2.0 → 14.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "14.2.0",
+  "version": "14.2.2",
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",
     "@angular/common": "^21.0.0",

package/styles/FONTS.md

@@ -1,46 +1,46 @@
-# Fonts
-
-The design system self-hosts its fonts via [Fontsource](https://fontsource.org/) instead of loading them from the Google Fonts CDN. This avoids a runtime dependency on `fonts.googleapis.com` / `fonts.gstatic.com`.
-
-## Fonts in use
-
-| Family                            | Used for                               | Fontsource package                              |
-| --------------------------------- | -------------------------------------- | ----------------------------------------------- |
-| DM Sans Variable                  | Headings (`--ndw-font-family-heading`) | `@fontsource-variable/dm-sans`                  |
-| Nunito Sans Variable              | Body text (`--ndw-font-family-body`)   | `@fontsource-variable/nunito-sans`              |
-| Material Symbols Rounded Variable | Icons (`<ndw-icon>`)                   | `@fontsource-variable/material-symbols-rounded` |
-
-These three packages are declared as **peer dependencies** of `@ndwnu/design-system`. Consuming apps install them alongside the design system:
-
-```bash
-npm install @fontsource-variable/dm-sans @fontsource-variable/nunito-sans @fontsource-variable/material-symbols-rounded
-```
-
-## How they are loaded
-
-The `@font-face` declarations live in [`base/_fonts.scss`](./base/_fonts.scss), which is `@forward`ed from [`base/index.scss`](./base/index.scss). `base/index.scss` is pulled in by the global stylesheet entry [`index.scss`](./index.scss), which apps include in their `angular.json`:
-
-```jsonc
-// angular.json > projects > your-app > architect > build > options > styles
-"styles": [
-  "./node_modules/@ndwnu/design-system/styles/index.scss"
-]
-```
-
-Component-scoped SCSS files only `@use 'base/typography'` (mixins and classes). They never pull in `_fonts.scss`, which keeps `@font-face` declarations out of every component bundle and prevents ng-packagr from inlining megabytes of font CSS per component.
-
-## Subset selection
-
-Each Fontsource package exposes several CSS entrypoints with different axis combinations. We pick the smallest subset that covers actual usage:
-
-| Family                   | Entrypoint used                | Axes           | Notes                                                                                 |
-| ------------------------ | ------------------------------ | -------------- | ------------------------------------------------------------------------------------- |
-| DM Sans                  | `opsz.css` + `opsz-italic.css` | `opsz`, `wght` | Matches the Google URL the project used previously (`opsz 9..40`, `wght 400..650`).   |
-| Nunito Sans              | `opsz.css` + `opsz-italic.css` | `opsz`, `wght` | Matches the previous Google URL (`opsz 6..12`, `wght 400..650`).                      |
-| Material Symbols Rounded | `fill.css`                     | `wght`, `FILL` | We only toggle `FILL` (see below). Choosing `fill.css` over `full.css` saves ~3.7 MB. |
-
-The icon component sets `font-variation-settings: 'FILL' 1;` in [`icon.component.scss`](../lib/components/icon/icon.component.scss) to switch between outlined and filled icons. We do not vary the `opsz` or `GRAD` axes for icons, so `fill.css` (≈1.4 MB) is sufficient. If a future feature needs those axes, switch the import to `full.css` (≈5.1 MB) — the tradeoff is bundle size.
-
-## Material Symbols Rounded class
-
-Google's hosted CSS provides a `.material-symbols-rounded` class that pairs the font-family with `font-feature-settings: 'liga'` (so glyph name → ligature → icon works). Fontsource does not, so [`_fonts.scss`](./base/_fonts.scss) defines the equivalent rule locally. The `<ndw-icon>` component applies this class via its host binding.
+# Fonts
+
+The design system self-hosts its fonts via [Fontsource](https://fontsource.org/) instead of loading them from the Google Fonts CDN. This avoids a runtime dependency on `fonts.googleapis.com` / `fonts.gstatic.com`.
+
+## Fonts in use
+
+| Family                            | Used for                               | Fontsource package                              |
+| --------------------------------- | -------------------------------------- | ----------------------------------------------- |
+| DM Sans Variable                  | Headings (`--ndw-font-family-heading`) | `@fontsource-variable/dm-sans`                  |
+| Nunito Sans Variable              | Body text (`--ndw-font-family-body`)   | `@fontsource-variable/nunito-sans`              |
+| Material Symbols Rounded Variable | Icons (`<ndw-icon>`)                   | `@fontsource-variable/material-symbols-rounded` |
+
+These three packages are declared as **peer dependencies** of `@ndwnu/design-system`. Consuming apps install them alongside the design system:
+
+```bash
+npm install @fontsource-variable/dm-sans @fontsource-variable/nunito-sans @fontsource-variable/material-symbols-rounded
+```
+
+## How they are loaded
+
+The `@font-face` declarations live in [`base/_fonts.scss`](./base/_fonts.scss), which is `@forward`ed from [`base/index.scss`](./base/index.scss). `base/index.scss` is pulled in by the global stylesheet entry [`index.scss`](./index.scss), which apps include in their `angular.json`:
+
+```jsonc
+// angular.json > projects > your-app > architect > build > options > styles
+"styles": [
+  "./node_modules/@ndwnu/design-system/styles/index.scss"
+]
+```
+
+Component-scoped SCSS files only `@use 'base/typography'` (mixins and classes). They never pull in `_fonts.scss`, which keeps `@font-face` declarations out of every component bundle and prevents ng-packagr from inlining megabytes of font CSS per component.
+
+## Subset selection
+
+Each Fontsource package exposes several CSS entrypoints with different axis combinations. We pick the smallest subset that covers actual usage:
+
+| Family                   | Entrypoint used                | Axes           | Notes                                                                                 |
+| ------------------------ | ------------------------------ | -------------- | ------------------------------------------------------------------------------------- |
+| DM Sans                  | `opsz.css` + `opsz-italic.css` | `opsz`, `wght` | Matches the Google URL the project used previously (`opsz 9..40`, `wght 400..650`).   |
+| Nunito Sans              | `opsz.css` + `opsz-italic.css` | `opsz`, `wght` | Matches the previous Google URL (`opsz 6..12`, `wght 400..650`).                      |
+| Material Symbols Rounded | `fill.css`                     | `wght`, `FILL` | We only toggle `FILL` (see below). Choosing `fill.css` over `full.css` saves ~3.7 MB. |
+
+The icon component sets `font-variation-settings: 'FILL' 1;` in [`icon.component.scss`](../lib/components/icon/icon.component.scss) to switch between outlined and filled icons. We do not vary the `opsz` or `GRAD` axes for icons, so `fill.css` (≈1.4 MB) is sufficient. If a future feature needs those axes, switch the import to `full.css` (≈5.1 MB) — the tradeoff is bundle size.
+
+## Material Symbols Rounded class
+
+Google's hosted CSS provides a `.material-symbols-rounded` class that pairs the font-family with `font-feature-settings: 'liga'` (so glyph name → ligature → icon works). Fontsource does not, so [`_fonts.scss`](./base/_fonts.scss) defines the equivalent rule locally. The `<ndw-icon>` component applies this class via its host binding.

package/styles/base/_colors.scss

@@ -1,246 +1,246 @@
-:root {
-  /* Colors */
-  // Grey
-  --_grey-700: 195, 100%, 10%;
-  --_grey-600: 196, 13%, 29%;
-  --_grey-500: 197, 7%, 40%;
-  --_grey-400: 204, 2%, 54%;
-  --_grey-300: 192, 5%, 82%;
-  --_grey-200: 204, 11%, 91%;
-  --_grey-100: 200, 16%, 96%;
-  --_grey-50: 0, 0%, 99%;
-  --_white: 0, 0%, 100%;
-
-  --ndw-color-grey-700: hsl(var(--_grey-700));
-  --ndw-color-grey-600: hsl(var(--_grey-600));
-  --ndw-color-grey-500: hsl(var(--_grey-500));
-  --ndw-color-grey-400: hsl(var(--_grey-400));
-  --ndw-color-grey-300: hsl(var(--_grey-300));
-  --ndw-color-grey-200: hsl(var(--_grey-200));
-  --ndw-color-grey-100: hsl(var(--_grey-100));
-  --ndw-color-grey-50: hsl(var(--_grey-50));
-  --ndw-color-white: hsl(var(--_white));
-
-  // Primary
-  --_primary: 19, 100%;
-  --_primary-050: var(--_primary), 95%;
-  --_primary-100: var(--_primary), 80%;
-  --_primary-200: var(--_primary), 73%;
-  --_primary-300: var(--_primary), 62%;
-  --_primary-400: var(--_primary), 50%;
-  --_primary-500: var(--_primary), 40%;
-  --_primary-600: var(--_primary), 35%;
-  --_primary-700: var(--_primary), 27%;
-  --_primary-800: var(--_primary), 15%;
-
-  --ndw-color-primary-050: hsl(var(--_primary-050));
-  --ndw-color-primary-100: hsl(var(--_primary-100));
-  --ndw-color-primary-200: hsl(var(--_primary-200));
-  --ndw-color-primary-300: hsl(var(--_primary-300));
-  --ndw-color-primary-400: hsl(var(--_primary-400));
-  --ndw-color-primary-500: hsl(var(--_primary-500));
-  --ndw-color-primary-600: hsl(var(--_primary-600));
-  --ndw-color-primary-700: hsl(var(--_primary-700));
-  --ndw-color-primary-800: hsl(var(--_primary-800));
-
-  --ndw-color-primary: var(--ndw-color-primary-500);
-  --ndw-color-primary-hover: var(--ndw-color-primary-600);
-  --ndw-color-primary-active: var(--ndw-color-primary-700);
-
-  // Secondary
-  --_secondary-050: 209, 100%, 96%;
-  --_secondary-100: 209, 85%, 91%;
-  --_secondary-200: 209, 85%, 78%;
-  --_secondary-300: 209, 85%, 69%;
-  --_secondary-400: 208, 100%, 46%;
-  --_secondary-500: 208, 100%, 41%;
-  --_secondary-600: 209, 100%, 32%;
-  --_secondary-700: 209, 100%, 18%;
-
-  --ndw-color-secondary-050: hsl(var(--_secondary-050));
-  --ndw-color-secondary-100: hsl(var(--_secondary-100));
-  --ndw-color-secondary-200: hsl(var(--_secondary-200));
-  --ndw-color-secondary-300: hsl(var(--_secondary-300));
-  --ndw-color-secondary-400: hsl(var(--_secondary-400));
-  --ndw-color-secondary-500: hsl(var(--_secondary-500));
-  --ndw-color-secondary-600: hsl(var(--_secondary-600));
-  --ndw-color-secondary-700: hsl(var(--_secondary-700));
-
-  --ndw-color-secondary: var(--ndw-color-secondary-500);
-  --ndw-color-secondary-hover: var(--ndw-color-secondary-600);
-  --ndw-color-secondary-active: var(--ndw-color-secondary-700);
-
-  // Tertiary
-  --_tertiary-400: 43, 100%, 50%;
-  --_tertiary-500: 42, 100%, 43%;
-
-  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
-  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
-
-  // Links
-  --_link: 208, 100%;
-  --_link-400: var(--_link), 41%;
-  --_link-500: var(--_link), 32%;
-
-  --ndw-color-link-400: hsl(var(--_link-400));
-  --ndw-color-link-500: hsl(var(--_link-500));
-
-  // Feedback
-  --_positive: 133, 92%;
-  --_positive-100: 117, 56%, 92%;
-  --_positive-200: var(--_positive), 88%;
-  --_positive-300: var(--_positive), 82%;
-  --_positive-500: var(--_positive), 33%;
-  --_positive-600: var(--_positive), 24%;
-  --_warning: 43, 93%;
-  --_warning-100: 44, 100%, 94%;
-  --_warning-200: var(--_warning), 92%;
-  --_warning-300: var(--_warning), 88%;
-  --_warning-500: var(--_warning), 43%;
-  --_warning-600: 42, 83%, 32%;
-  --_alternative: 292, 100%;
-  --_alternative-100: var(--_alternative), 95%;
-  --_alternative-500: 292, 95%, 33%;
-  --_critical: 0, 100%;
-  --_critical-100: var(--_critical), 98%;
-  --_critical-200: var(--_critical), 95%;
-  --_critical-300: var(--_critical), 90%;
-  --_critical-500: var(--_critical), 46%;
-  --_info-100: 210, 100%, 96%;
-  --_info-200: 210, 86%, 91%;
-  --_info-300: 209, 93%, 86%;
-  --_info-500: 208, 100%, 41%;
-
-  --ndw-color-positive-100: hsl(var(--_positive-100));
-  --ndw-color-positive-200: hsl(var(--_positive-200));
-  --ndw-color-positive-300: hsl(var(--_positive-300));
-  --ndw-color-positive-500: hsl(var(--_positive-500));
-  --ndw-color-positive-600: hsl(var(--_positive-600));
-  --ndw-color-warning-100: hsl(var(--_warning-100));
-  --ndw-color-warning-200: hsl(var(--_warning-200));
-  --ndw-color-warning-300: hsl(var(--_warning-300));
-  --ndw-color-warning-500: hsl(var(--_warning-500));
-  --ndw-color-warning-600: hsl(var(--_warning-600));
-  --ndw-color-alternative-100: hsl(var(--_alternative-100));
-  --ndw-color-alternative-500: hsl(var(--_alternative-500));
-  --ndw-color-critical-100: hsl(var(--_critical-100));
-  --ndw-color-critical-200: hsl(var(--_critical-200));
-  --ndw-color-critical-300: hsl(var(--_critical-300));
-  --ndw-color-critical-500: hsl(var(--_critical-500));
-  --ndw-color-info-100: hsl(var(--_info-100));
-  --ndw-color-info-200: hsl(var(--_info-200));
-  --ndw-color-info-300: hsl(var(--_info-300));
-  --ndw-color-info-500: hsl(var(--_info-500));
-
-  --ndw-color-notification: hsl(19, 100%, 35%);
-
-  // Data
-  --_data-a-500: 133, 100%, 21%;
-  --_data-a-100: 101, 61%, 81%;
-  --_data-b-500: 0, 0%, 27%;
-  --_data-b-100: 0, 0%, 87%;
-  --_data-c-500: 209, 97%, 38%;
-  --_data-c-100: 194, 95%, 84%;
-  --_data-d-500: 292, 95%, 33%;
-  --_data-d-100: 292, 100%, 87%;
-  --_data-e-500: 51, 95%, 23%;
-  --_data-e-100: 54, 89%, 79%;
-  --_data-f-500: 0, 97%, 35%;
-  --_data-f-100: 0, 100%, 94%;
-
-  --ndw-color-data-a-500: hsl(var(--_data-a-500));
-  --ndw-color-data-a-100: hsl(var(--_data-a-100));
-  --ndw-color-data-b-500: hsl(var(--_data-b-500));
-  --ndw-color-data-b-100: hsl(var(--_data-b-100));
-  --ndw-color-data-c-500: hsl(var(--_data-c-500));
-  --ndw-color-data-c-100: hsl(var(--_data-c-100));
-  --ndw-color-data-d-500: hsl(var(--_data-d-500));
-  --ndw-color-data-d-100: hsl(var(--_data-d-100));
-  --ndw-color-data-e-500: hsl(var(--_data-e-500));
-  --ndw-color-data-e-100: hsl(var(--_data-e-100));
-  --ndw-color-data-f-500: hsl(var(--_data-f-500));
-  --ndw-color-data-f-100: hsl(var(--_data-f-100));
-
-  // Alpha Primary
-  --_alpha-black: 0, 0%, 0%;
-  --_alpha-007: 0.07;
-  --_alpha-015: 0.15;
-  --_alpha-040: 0.4;
-
-  --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
-  --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
-  --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
-
-  --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
-
-  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
-  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
-
-  // Background
-  --ndw-color-background: var(--ndw-color-primary);
-  --ndw-color-background-hover: var(--ndw-color-primary-hover);
-  --ndw-color-background-active: var(--ndw-color-primary-active);
-  --ndw-color-background-disabled: var(--ndw-color-grey-300);
-
-  // Foreground
-  --ndw-color-foreground: var(--ndw-color-white);
-  --ndw-color-foreground-hover: var(--ndw-color-white);
-  --ndw-color-foreground-active: var(--ndw-color-white);
-
-  // Text
-  --ndw-color-text: var(--ndw-color-grey-700);
-}
-
-[data-theme='nwb'] {
-  /* Colors */
-  // Primary
-  --_primary-050: 176, 44%, 95%;
-  --_primary-100: 176, 44%, 82%;
-  --_primary-200: 176, 44%, 73%;
-  --_primary-300: 176, 50%, 60%;
-  --_primary-400: 176, 55%, 48%;
-  --_primary-500: 176, 53%, 33%;
-  --_primary-600: 176, 60%, 34%;
-  --_primary-700: 176, 68%, 21%;
-  --_primary-800: 176, 68%, 13%;
-
-  --ndw-color-primary-050: hsl(var(--_primary-050));
-  --ndw-color-primary-100: hsl(var(--_primary-100));
-  --ndw-color-primary-200: hsl(var(--_primary-200));
-  --ndw-color-primary-300: hsl(var(--_primary-300));
-  --ndw-color-primary-400: hsl(var(--_primary-400));
-  --ndw-color-primary-500: hsl(var(--_primary-500));
-  --ndw-color-primary-600: hsl(var(--_primary-600));
-  --ndw-color-primary-700: hsl(var(--_primary-700));
-  --ndw-color-primary-800: hsl(var(--_primary-800));
-
-  // Secondary
-  --_secondary-050: 339, 100%, 96%;
-  --_secondary-100: 333, 85%, 91%;
-  --_secondary-200: 327, 85%, 78%;
-  --_secondary-300: 324, 85%, 69%;
-  --_secondary-400: 320, 70%, 60%;
-  --_secondary-500: 312, 50%, 41%;
-  --_secondary-600: 312, 50%, 32%;
-  --_secondary-700: 312, 100%, 20%;
-
-  --ndw-color-secondary-050: hsl(var(--_secondary-050));
-  --ndw-color-secondary-100: hsl(var(--_secondary-100));
-  --ndw-color-secondary-200: hsl(var(--_secondary-200));
-  --ndw-color-secondary-300: hsl(var(--_secondary-300));
-  --ndw-color-secondary-400: hsl(var(--_secondary-400));
-  --ndw-color-secondary-500: hsl(var(--_secondary-500));
-  --ndw-color-secondary-600: hsl(var(--_secondary-600));
-  --ndw-color-secondary-700: hsl(var(--_secondary-700));
-
-  // Tertiary
-  --_tertiary-400: 309, 29%, 36%;
-  --_tertiary-500: 309, 29%, 18%;
-
-  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
-  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
-
-  // Alpha Primary
-  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
-  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
-}
+:root {
+  /* Colors */
+  // Grey
+  --_grey-700: 195, 100%, 10%;
+  --_grey-600: 196, 13%, 29%;
+  --_grey-500: 197, 7%, 40%;
+  --_grey-400: 204, 2%, 54%;
+  --_grey-300: 192, 5%, 82%;
+  --_grey-200: 204, 11%, 91%;
+  --_grey-100: 200, 16%, 96%;
+  --_grey-50: 0, 0%, 99%;
+  --_white: 0, 0%, 100%;
+
+  --ndw-color-grey-700: hsl(var(--_grey-700));
+  --ndw-color-grey-600: hsl(var(--_grey-600));
+  --ndw-color-grey-500: hsl(var(--_grey-500));
+  --ndw-color-grey-400: hsl(var(--_grey-400));
+  --ndw-color-grey-300: hsl(var(--_grey-300));
+  --ndw-color-grey-200: hsl(var(--_grey-200));
+  --ndw-color-grey-100: hsl(var(--_grey-100));
+  --ndw-color-grey-50: hsl(var(--_grey-50));
+  --ndw-color-white: hsl(var(--_white));
+
+  // Primary
+  --_primary: 19, 100%;
+  --_primary-050: var(--_primary), 95%;
+  --_primary-100: var(--_primary), 80%;
+  --_primary-200: var(--_primary), 73%;
+  --_primary-300: var(--_primary), 62%;
+  --_primary-400: var(--_primary), 50%;
+  --_primary-500: var(--_primary), 40%;
+  --_primary-600: var(--_primary), 35%;
+  --_primary-700: var(--_primary), 27%;
+  --_primary-800: var(--_primary), 15%;
+
+  --ndw-color-primary-050: hsl(var(--_primary-050));
+  --ndw-color-primary-100: hsl(var(--_primary-100));
+  --ndw-color-primary-200: hsl(var(--_primary-200));
+  --ndw-color-primary-300: hsl(var(--_primary-300));
+  --ndw-color-primary-400: hsl(var(--_primary-400));
+  --ndw-color-primary-500: hsl(var(--_primary-500));
+  --ndw-color-primary-600: hsl(var(--_primary-600));
+  --ndw-color-primary-700: hsl(var(--_primary-700));
+  --ndw-color-primary-800: hsl(var(--_primary-800));
+
+  --ndw-color-primary: var(--ndw-color-primary-500);
+  --ndw-color-primary-hover: var(--ndw-color-primary-600);
+  --ndw-color-primary-active: var(--ndw-color-primary-700);
+
+  // Secondary
+  --_secondary-050: 209, 100%, 96%;
+  --_secondary-100: 209, 85%, 91%;
+  --_secondary-200: 209, 85%, 78%;
+  --_secondary-300: 209, 85%, 69%;
+  --_secondary-400: 208, 100%, 46%;
+  --_secondary-500: 208, 100%, 41%;
+  --_secondary-600: 209, 100%, 32%;
+  --_secondary-700: 209, 100%, 18%;
+
+  --ndw-color-secondary-050: hsl(var(--_secondary-050));
+  --ndw-color-secondary-100: hsl(var(--_secondary-100));
+  --ndw-color-secondary-200: hsl(var(--_secondary-200));
+  --ndw-color-secondary-300: hsl(var(--_secondary-300));
+  --ndw-color-secondary-400: hsl(var(--_secondary-400));
+  --ndw-color-secondary-500: hsl(var(--_secondary-500));
+  --ndw-color-secondary-600: hsl(var(--_secondary-600));
+  --ndw-color-secondary-700: hsl(var(--_secondary-700));
+
+  --ndw-color-secondary: var(--ndw-color-secondary-500);
+  --ndw-color-secondary-hover: var(--ndw-color-secondary-600);
+  --ndw-color-secondary-active: var(--ndw-color-secondary-700);
+
+  // Tertiary
+  --_tertiary-400: 43, 100%, 50%;
+  --_tertiary-500: 42, 100%, 43%;
+
+  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
+  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
+
+  // Links
+  --_link: 208, 100%;
+  --_link-400: var(--_link), 41%;
+  --_link-500: var(--_link), 32%;
+
+  --ndw-color-link-400: hsl(var(--_link-400));
+  --ndw-color-link-500: hsl(var(--_link-500));
+
+  // Feedback
+  --_positive: 133, 92%;
+  --_positive-100: 117, 56%, 92%;
+  --_positive-200: var(--_positive), 88%;
+  --_positive-300: var(--_positive), 82%;
+  --_positive-500: var(--_positive), 33%;
+  --_positive-600: var(--_positive), 24%;
+  --_warning: 43, 93%;
+  --_warning-100: 44, 100%, 94%;
+  --_warning-200: var(--_warning), 92%;
+  --_warning-300: var(--_warning), 88%;
+  --_warning-500: var(--_warning), 43%;
+  --_warning-600: 42, 83%, 32%;
+  --_alternative: 292, 100%;
+  --_alternative-100: var(--_alternative), 95%;
+  --_alternative-500: 292, 95%, 33%;
+  --_critical: 0, 100%;
+  --_critical-100: var(--_critical), 98%;
+  --_critical-200: var(--_critical), 95%;
+  --_critical-300: var(--_critical), 90%;
+  --_critical-500: var(--_critical), 46%;
+  --_info-100: 210, 100%, 96%;
+  --_info-200: 210, 86%, 91%;
+  --_info-300: 209, 93%, 86%;
+  --_info-500: 208, 100%, 41%;
+
+  --ndw-color-positive-100: hsl(var(--_positive-100));
+  --ndw-color-positive-200: hsl(var(--_positive-200));
+  --ndw-color-positive-300: hsl(var(--_positive-300));
+  --ndw-color-positive-500: hsl(var(--_positive-500));
+  --ndw-color-positive-600: hsl(var(--_positive-600));
+  --ndw-color-warning-100: hsl(var(--_warning-100));
+  --ndw-color-warning-200: hsl(var(--_warning-200));
+  --ndw-color-warning-300: hsl(var(--_warning-300));
+  --ndw-color-warning-500: hsl(var(--_warning-500));
+  --ndw-color-warning-600: hsl(var(--_warning-600));
+  --ndw-color-alternative-100: hsl(var(--_alternative-100));
+  --ndw-color-alternative-500: hsl(var(--_alternative-500));
+  --ndw-color-critical-100: hsl(var(--_critical-100));
+  --ndw-color-critical-200: hsl(var(--_critical-200));
+  --ndw-color-critical-300: hsl(var(--_critical-300));
+  --ndw-color-critical-500: hsl(var(--_critical-500));
+  --ndw-color-info-100: hsl(var(--_info-100));
+  --ndw-color-info-200: hsl(var(--_info-200));
+  --ndw-color-info-300: hsl(var(--_info-300));
+  --ndw-color-info-500: hsl(var(--_info-500));
+
+  --ndw-color-notification: hsl(19, 100%, 35%);
+
+  // Data
+  --_data-a-500: 133, 100%, 21%;
+  --_data-a-100: 101, 61%, 81%;
+  --_data-b-500: 0, 0%, 27%;
+  --_data-b-100: 0, 0%, 87%;
+  --_data-c-500: 209, 97%, 38%;
+  --_data-c-100: 194, 95%, 84%;
+  --_data-d-500: 292, 95%, 33%;
+  --_data-d-100: 292, 100%, 87%;
+  --_data-e-500: 51, 95%, 23%;
+  --_data-e-100: 54, 89%, 79%;
+  --_data-f-500: 0, 97%, 35%;
+  --_data-f-100: 0, 100%, 94%;
+
+  --ndw-color-data-a-500: hsl(var(--_data-a-500));
+  --ndw-color-data-a-100: hsl(var(--_data-a-100));
+  --ndw-color-data-b-500: hsl(var(--_data-b-500));
+  --ndw-color-data-b-100: hsl(var(--_data-b-100));
+  --ndw-color-data-c-500: hsl(var(--_data-c-500));
+  --ndw-color-data-c-100: hsl(var(--_data-c-100));
+  --ndw-color-data-d-500: hsl(var(--_data-d-500));
+  --ndw-color-data-d-100: hsl(var(--_data-d-100));
+  --ndw-color-data-e-500: hsl(var(--_data-e-500));
+  --ndw-color-data-e-100: hsl(var(--_data-e-100));
+  --ndw-color-data-f-500: hsl(var(--_data-f-500));
+  --ndw-color-data-f-100: hsl(var(--_data-f-100));
+
+  // Alpha Primary
+  --_alpha-black: 0, 0%, 0%;
+  --_alpha-007: 0.07;
+  --_alpha-015: 0.15;
+  --_alpha-040: 0.4;
+
+  --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
+  --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
+  --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
+
+  --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
+
+  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
+  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
+
+  // Background
+  --ndw-color-background: var(--ndw-color-primary);
+  --ndw-color-background-hover: var(--ndw-color-primary-hover);
+  --ndw-color-background-active: var(--ndw-color-primary-active);
+  --ndw-color-background-disabled: var(--ndw-color-grey-300);
+
+  // Foreground
+  --ndw-color-foreground: var(--ndw-color-white);
+  --ndw-color-foreground-hover: var(--ndw-color-white);
+  --ndw-color-foreground-active: var(--ndw-color-white);
+
+  // Text
+  --ndw-color-text: var(--ndw-color-grey-700);
+}
+
+[data-theme='nwb'] {
+  /* Colors */
+  // Primary
+  --_primary-050: 176, 44%, 95%;
+  --_primary-100: 176, 44%, 82%;
+  --_primary-200: 176, 44%, 73%;
+  --_primary-300: 176, 50%, 60%;
+  --_primary-400: 176, 55%, 48%;
+  --_primary-500: 176, 53%, 33%;
+  --_primary-600: 176, 60%, 34%;
+  --_primary-700: 176, 68%, 21%;
+  --_primary-800: 176, 68%, 13%;
+
+  --ndw-color-primary-050: hsl(var(--_primary-050));
+  --ndw-color-primary-100: hsl(var(--_primary-100));
+  --ndw-color-primary-200: hsl(var(--_primary-200));
+  --ndw-color-primary-300: hsl(var(--_primary-300));
+  --ndw-color-primary-400: hsl(var(--_primary-400));
+  --ndw-color-primary-500: hsl(var(--_primary-500));
+  --ndw-color-primary-600: hsl(var(--_primary-600));
+  --ndw-color-primary-700: hsl(var(--_primary-700));
+  --ndw-color-primary-800: hsl(var(--_primary-800));
+
+  // Secondary
+  --_secondary-050: 339, 100%, 96%;
+  --_secondary-100: 333, 85%, 91%;
+  --_secondary-200: 327, 85%, 78%;
+  --_secondary-300: 324, 85%, 69%;
+  --_secondary-400: 320, 70%, 60%;
+  --_secondary-500: 312, 50%, 41%;
+  --_secondary-600: 312, 50%, 32%;
+  --_secondary-700: 312, 100%, 20%;
+
+  --ndw-color-secondary-050: hsl(var(--_secondary-050));
+  --ndw-color-secondary-100: hsl(var(--_secondary-100));
+  --ndw-color-secondary-200: hsl(var(--_secondary-200));
+  --ndw-color-secondary-300: hsl(var(--_secondary-300));
+  --ndw-color-secondary-400: hsl(var(--_secondary-400));
+  --ndw-color-secondary-500: hsl(var(--_secondary-500));
+  --ndw-color-secondary-600: hsl(var(--_secondary-600));
+  --ndw-color-secondary-700: hsl(var(--_secondary-700));
+
+  // Tertiary
+  --_tertiary-400: 309, 29%, 36%;
+  --_tertiary-500: 309, 29%, 18%;
+
+  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
+  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
+
+  // Alpha Primary
+  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
+  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
+}

package/styles/base/_fonts.scss

@@ -1,13 +1,13 @@
-@import '@fontsource-variable/dm-sans/opsz.css';
-@import '@fontsource-variable/dm-sans/opsz-italic.css';
-@import '@fontsource-variable/nunito-sans/opsz.css';
-@import '@fontsource-variable/nunito-sans/opsz-italic.css';
-@import '@fontsource-variable/material-symbols-rounded/fill.css';
-
-.material-symbols-rounded {
-  font-family: 'Material Symbols Rounded Variable', sans-serif;
-  font-feature-settings: 'liga';
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-}
+@import '@fontsource-variable/dm-sans/opsz.css';
+@import '@fontsource-variable/dm-sans/opsz-italic.css';
+@import '@fontsource-variable/nunito-sans/opsz.css';
+@import '@fontsource-variable/nunito-sans/opsz-italic.css';
+@import '@fontsource-variable/material-symbols-rounded/fill.css';
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded Variable', sans-serif;
+  font-feature-settings: 'liga';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+}

package/styles/base/_material.scss

@@ -1,17 +1,17 @@
-@use '@angular/material' as mat;
-
-html {
-  @include mat.theme(
-    (
-      color: mat.$orange-palette,
-      typography: (
-        plain-family: var(--ndw-font-family-body),
-        brand-family: var(--ndw-font-family-heading),
-        bold-weight: var(--ndw-font-weight-bold),
-        medium-weight: var(--ndw-font-weight-bold),
-        regular-weight: var(--ndw-font-weight-regular),
-      ),
-      density: 0,
-    )
-  );
-}
+@use '@angular/material' as mat;
+
+html {
+  @include mat.theme(
+    (
+      color: mat.$orange-palette,
+      typography: (
+        plain-family: var(--ndw-font-family-body),
+        brand-family: var(--ndw-font-family-heading),
+        bold-weight: var(--ndw-font-weight-bold),
+        medium-weight: var(--ndw-font-weight-bold),
+        regular-weight: var(--ndw-font-weight-regular),
+      ),
+      density: 0,
+    )
+  );
+}