@nanoporetech-digital/components 8.23.11 → 9.0.0

package/dist/collection/components/global-search-results/global-search-results.css

@@ -44,7 +44,7 @@
 
 .main-search {
   display: flex;
-  background: var(--nano-color-base-0);
+  background: var(--nano-color-background-default);
   font-size: 14px;
   min-block-size: calc(100vh - 63px);
   justify-content: space-between;
@@ -91,7 +91,7 @@
   align-items: center;
 }
 .main-search div[slot=start-output] {
-  border-block-end: 1px solid var(--nano-color-neutral-300);
+  border-block-end: 1px solid var(--nano-color-fill-neutral-weak);
   margin-block-end: var(--nano-spacing-md);
 }
 .main-search__topbar {
@@ -166,7 +166,7 @@
 .main-search__results {
   font-size: 14px;
   padding: var(--nano-spacing-md) var(--nano-spacing-l1-default);
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
   inline-size: 70%;
   block-size: 100%;
 }
@@ -186,7 +186,7 @@
 }
 
 .filters {
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
   font-size: var(--nano-font-size-xs);
 }
 :host(.small) .filters {
@@ -240,7 +240,7 @@
   padding: var(--nano-spacing-md);
   overflow: auto;
   block-size: 100vh;
-  background-color: var(--nano-color-surface-200);
+  background-color: var(--nano-color-surface-overlay);
   box-shadow: var(--nano-shadow-l2);
 }
 :host(.small) .filters.show .filters-wrap {
@@ -280,7 +280,7 @@
   border-radius: 1px;
   block-size: 1.125em;
   inline-size: 1.125em;
-  border: 1px solid var(--nano-color-primary-1000);
+  border: 1px solid var(--nano-color-fill-primary);
   font-size: 1rem;
 }
 .filters .filter-label::after {
@@ -308,7 +308,7 @@
   inline-size: 1px;
 }
 .filters .filter-cb:checked ~ .filter-label::before {
-  background-color: var(--nano-color-primary-1000);
+  background-color: var(--nano-color-fill-primary);
 }
 .filters .filter-cb:checked ~ .filter-label::after {
   scale: 1;
@@ -320,12 +320,12 @@
 .filters-header {
   display: flex;
   align-items: center;
-  border-block-end: 1px solid var(--nano-color-neutral-300);
+  border-block-end: 1px solid var(--nano-color-fill-neutral-weak);
   padding-block-end: var(--nano-spacing-md);
   margin-block-end: var(--nano-spacing-md);
 }
 .filters-reset {
-  color: var(--nano-color-primary-1000);
+  color: var(--nano-color-fill-primary);
   font-size: var(--nano-font-size-xs);
   text-decoration: underline;
   margin-inline: auto 0;
@@ -358,7 +358,7 @@
   display: flex;
   flex-flow: row wrap;
   gap: var(--nano-spacing-sm);
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
 }
 .result * {
   word-wrap: break-word;
@@ -373,7 +373,7 @@
   line-height: var(--nano-line-height-normal);
   font-weight: var(--nano-font-weight-bold);
   text-decoration: none;
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
 }
 .result__title .nano-icon {
   margin-inline: 0 0.5em;
@@ -391,7 +391,7 @@
   font-size: var(--nano-font-size-xs);
   inline-size: 70%;
   text-decoration: none;
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
 }
 @media (max-width: 992px) {
   .result__body {
@@ -401,7 +401,7 @@
 .result__pdf {
   display: inline-block;
   margin-inline-start: 0.5rem;
-  color: var(--nano-color-neutral-300);
+  color: var(--nano-color-fill-neutral-weak);
 }
 .result__meta {
   display: flex;
@@ -418,7 +418,7 @@
   content: "";
   block-size: 1rem;
   inline-size: 1px;
-  background: var(--nano-color-neutral-300);
+  background: var(--nano-color-fill-neutral-weak);
   display: inline-block;
   margin-inline: 0.7rem;
 }
@@ -461,7 +461,7 @@
   margin-block-end: var(--nano-spacing-xs);
   text-decoration: none;
   inline-size: 70%;
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
 }
 .result__buttons {
   inline-size: 70%;
@@ -471,7 +471,7 @@
   inline-size: 70%;
   margin-block-end: 0.5rem;
   text-decoration: none;
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
 }
 .result__promo-box {
   inline-size: 300px;
@@ -485,7 +485,7 @@
   flex: 0 1 60px;
   text-align: center;
   font-weight: 600;
-  color: var(--nano-color-primary-1000);
+  color: var(--nano-color-fill-primary);
   text-transform: uppercase;
   line-height: 1;
   letter-spacing: 1.5px;
@@ -496,12 +496,12 @@
   }
 }
 .result__promo-bigdate span {
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
   display: block;
 }
 .result__promo-bigdate ~ div {
   padding-inline-start: 1rem;
-  border-inline-start: 1px solid var(--nano-color-neutral-300);
+  border-inline-start: 1px solid var(--nano-color-fill-neutral-weak);
 }
 .result__promo-date {
   font-size: var(--nano-font-size-2xs);
@@ -510,7 +510,7 @@
   font-size: var(--nano-font-size-2xs);
 }
 .result__promo .nano-icon {
-  color: var(--nano-color-primary-1000);
+  color: var(--nano-color-fill-primary);
   position: relative;
   inset-block-start: 1px;
   padding-inline-end: 2px;
@@ -537,9 +537,9 @@
   inset-block-start: calc(50% - 0.75rem);
   inset-inline-start: calc(50% - 0.75rem);
   font-size: var(--nano-pictogram-size-small);
-  color: var(--nano-color-primary-1000);
-  --primary-color: var(--nano-color-base-0);
-  --secondary-color: var(--nano-color-primary-1000);
+  color: var(--nano-color-fill-primary);
+  --primary-color: var(--nano-color-background-default);
+  --secondary-color: var(--nano-color-fill-primary);
   --primary-opacity: 1;
 }
 @media (max-width: 576px) {
@@ -596,7 +596,7 @@
 .search-empty {
   padding: var(--nano-spacing-xl) 0;
   text-align: center;
-  border-block-start: 1px solid var(--nano-color-neutral-300);
+  border-block-start: 1px solid var(--nano-color-fill-neutral-weak);
 }
 .search-empty h2 {
   font-weight: var(--nano-font-weight-normal);

package/dist/collection/components/icon/icon.css

@@ -143,9 +143,5 @@ svg,
 :host([name^=pictogram]),
 :host([name^=device]),
 :host([color=primary]) {
-  color: var(--nano-color-primary-1100);
-}
-
-:host([color=neutral]) {
-  color: var(--nano-color-base-1000);
+  color: var(--nano-color-icon-default);
 }

package/dist/collection/components/icon/icon.js

@@ -18,10 +18,6 @@ export class Icon {
     svgContent;
     isVisible = false;
     isLoading = true;
-    /**
-     * Specifies the color of the icon. If not specified, the icon will inherit the color of the parent element.
-     */
-    color;
     /**
      * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)
      */
@@ -178,7 +174,7 @@ export class Icon {
                 (this.name.indexOf('arrow') > -1 ||
                     this.name.indexOf('chevron') > -1) &&
                 this.isRtl());
-        return (h(Host, { key: '5c392d7707158df8b3c3d75f00824e597c3a87a9', class: {
+        return (h(Host, { key: 'ad22898fc118c3a8fc0eea4b7aa2484cb190d4dd', class: {
                 loading: this.isLoading,
                 'flip-rtl': !!flipRtl,
                 'nano-icon': true,
@@ -199,25 +195,6 @@ export class Icon {
     static get assetsDirs() { return ["device", "pictogram", "flag"]; }
     static get properties() {
         return {
-            "color": {
-                "type": "string",
-                "attribute": "color",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'neutral'",
-                    "resolved": "\"neutral\" | \"primary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the color of the icon. If not specified, the icon will inherit the color of the parent element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "role": {
                 "type": "string",
                 "attribute": "role",

package/dist/collection/components/icon-button/icon-button.css

@@ -39,15 +39,15 @@
   }:host {
   /**
    * @prop --border-radius: Defaults to none.
-   * @prop --active-color: Defaults to var(--nano-color-neutral-800).
-   * @prop --hover-color: Defaults to var(--nano-color-primary-1100).
+   * @prop --active-color: Defaults to var(--nano-color-fill-neutral).
+   * @prop --hover-color: Defaults to var(--nano-color-fill-primary-hover).
    * @prop --padding: Defaults to var(--nano-spacing-sm).
    * @prop --box-shadow: Defaults to none.
    * @prop --button-bg: Defaults to transparent.
    */
   --border-radius: none;
-  --active-color: var(--nano-color-neutral-800);
-  --hover-color: var(--nano-color-primary-1100);
+  --active-color: var(--nano-color-icon-primary);
+  --hover-color: var(--nano-color-icon-hover);
   --padding: var(--nano-spacing-xs);
   --box-shadow: none;
   --button-bg: transparent;

package/dist/collection/components/in-page-nav/in-page-nav.css

@@ -39,11 +39,11 @@
   }:host {
   /**
   * @prop --color-bottom-border: The border color for the bottom of the list items. Defaults to rgba(var(--nano-color-base-rgb-1000) / 10%)
-  * @prop --color-text: The text color for the main list items. Defaults to var(--nano-color-neutral-1400)
-  * @prop --color-primary: The primary color for the secondary list items. Defaults to var(--nano-color-primary-1100)
+  * @prop --color-text: The text color for the main list items. Defaults to var(--nano-color-text-default)
+  * @prop --color-primary: The primary color for the secondary list items. Defaults to var(--nano-color-fill-primary-hover)
   * @prop --color-text-hover: The text color for all list items on hover. Defaults to var(--color-primary)
-  * @prop --color-border-active: The border color for the active list items. Defaults to var(--nano-color-primary-1000)
-  * @prop --color-bg: The background color for the nav. Defaults to var(--nano-color-primary-75)
+  * @prop --color-border-active: The border color for the active list items. Defaults to var(--nano-color-fill-primary)
+  * @prop --color-bg: The background color for the nav. Defaults to var(--nano-color-surface-brand-feature)
   * @prop --font-size: The font size. Defaults to var(--nano-font-size-small)
   * @prop --font-weight: The font weight. Defaults to var(--nano-font-weight-normal)
   * @prop --font-weight-active: The font weight for the active list items. Defaults to var(--nano-font-weight-bold)
@@ -54,13 +54,13 @@
 }
 
 :host(.external-links) {
-  --color-bg: var(--nano-color-base-0) !important;
+  --color-bg: var(--nano-color-background-default) !important;
 }
 :host(.external-links) .nano-details {
-  --border-active: 3px solid var(--nano-color-neutral-1200) !important;
+  --border-active: 3px solid var(--nano-color-fill-neutral) !important;
 }
 :host(.external-links) nav {
-  border-block: 1px solid var(--nano-color-neutral-200);
+  border-block: 1px solid var(--nano-color-surface-sunken);
 }
 
 .desktop-nav {
@@ -138,7 +138,7 @@ nav {
   padding: var(--spacing-l2);
 }
 .details-wrapper[open]::part(header) {
-  background-color: var(--nano-color-primary-75);
+  background-color: var(--nano-color-surface-brand-feature);
 }
 .details-wrapper::part(content) {
   padding: 0;
@@ -223,7 +223,7 @@ nav {
 .details-wrapper .nano-details {
   --padding: 0;
   --btn-bg-color: transparent;
-  --btn-bg-color--open: var(--nano-color-primary-75);
+  --btn-bg-color--open: var(--nano-color-surface-brand-feature);
   --btn-bg-color--hover: transparent;
   border: none;
   color: var(--color-primary);

package/dist/collection/components/increment/increment.css

@@ -52,8 +52,8 @@
 }
 
 nano-icon-button {
-  background: var(--nano-color-base-0);
-  color: var(--nano-color-primary-1000);
+  background: var(--nano-color-background-default);
+  color: var(--nano-color-text-link);
   display: flex;
   border-radius: var(--nano-border-radius-pill);
   position: relative;
@@ -62,13 +62,13 @@ nano-icon-button {
   block-size: 100%;
 }
 nano-icon-button:hover {
-  background: var(--nano-color-primary-100);
+  background: var(--nano-color-fill-secondary-hover);
 }
 nano-icon-button:active {
-  background: var(--nano-color-primary-300);
+  background: var(--nano-color-fill-secondary-pressed);
 }
 nano-icon-button::part(base) {
-  border: 1px solid var(--nano-color-neutral-300);
+  border: 1px solid var(--nano-color-border-default);
 }
 nano-icon-button::part(base):focus-visible {
   outline: var(--nano-focus-ring-color) solid 3px;

package/dist/collection/components/input/input.css

@@ -379,60 +379,60 @@ label.visually-hide,
 
 :host {
   /**
-    * @prop --placeholder-color: Color of placeholder. Defaults to var(--nano-color-neutral-1000).
+    * @prop --placeholder-color: Color of placeholder. Defaults to var(--nano-color-fill-neutral).
 
     * @prop --padding-top: Used for most nested element's top vertical spacing. Defaults to var(--nano-spacing-sm).
     * @prop --padding-end: Used for most nested element's right horizontal spacing. Defaults to var(--nano-spacing-sm).
     * @prop --padding-bottom: Used for most nested element's bottom vertical spacing. Defaults to var(--nano-spacing-sm).
     * @prop --padding-start: Used for most nested element's left horizontal spacing. Defaults to var(--nano-spacing-sm).
 
-    * @prop --color-invalid: Color of invalid messaging. Defaults to var(--nano-color-danger-1100).
-    * @prop --color-valid: Color of valid messaging. Defaults to var(--nano-color-success-1000).
+    * @prop --color-invalid: Color of invalid messaging. Defaults to var(--nano-color-fill-danger-hover).
+    * @prop --color-valid: Color of valid messaging. Defaults to var(--nano-color-fill-success).
 
     * @prop --input-font-size: Font size of input. Defaults to var(--nano-font-size-sm).
-    * @prop --input-text-color: Text color of input. Defaults to var(--nano-color-base-1000).
+    * @prop --input-text-color: Text color of input. Defaults to var(--nano-color-surface-contrast).
     * @prop --input-border-width: Border width of input. Defaults to 1px.
-    * @prop --input-border-color: Border color of input. Defaults to var(--nano-color-neutral-300).
+    * @prop --input-border-color: Border color of input. Defaults to var(--nano-color-fill-neutral-weak).
     * @prop --input-border-radius: Border radius of input. Defaults to 0px.
     * @prop --input-invalid-border-hint-width: Border-start width used as an invalid hint. Defaults to 2px.
     * @prop --input-border-style: Border style of input. Defaults to solid var(--input-border-color).
-    * @prop --input-border-style--focus: Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-primary-700).
-    * @prop --input-bg-color: Background color of input. Defaults to var(--nano-color-base-0).
+    * @prop --input-border-style--focus: Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-border-accent-hover).
+    * @prop --input-bg-color: Background color of input. Defaults to var(--nano-color-background-default).
 
     * @prop --invalid-msg-color: Color of invalid message. Defaults to var(--color-invalid).
-    * @prop --help-msg-color: Color of help message. Defaults to var(--nano-color-base-1000).
+    * @prop --help-msg-color: Color of help message. Defaults to var(--nano-color-surface-contrast).
     * @prop --more-font-size: Font size of helper & error messaging. Defaults to var(--nano-font-size-2xs).
 
     * @prop --clear-btn-color: Color of clear button. Defaults to rgb(var(--nano-color-base-rgb-1000) / 60%).
     * @prop --clear-btn-color--hover: Color of clear button on hover. Defaults to rgb(var(--nano-color-base-rgb-1000) / 100%).
     * @prop --clear-btn-color--invalid: Color of clear button when invalid. Defaults to rgb(var(--color-invalid) / 100%).
 
-    * @prop --label-color: Color of label. Defaults to var(--nano-color-base-1000).
+    * @prop --label-color: Color of label. Defaults to var(--nano-color-surface-contrast).
     * @prop --label-font-size: Font size of label. Defaults to var(--nano-font-size-xs).
     */
-  --placeholder-color: var(--nano-color-neutral-1000);
+  --placeholder-color: var(--nano-color-text-placeholder);
   --padding-top: var(--nano-spacing-sm);
   --padding-end: var(--nano-spacing-sm);
   --padding-bottom: var(--nano-spacing-sm);
   --padding-start: var(--nano-spacing-sm);
-  --color-invalid: var(--nano-color-danger-1100);
-  --color-valid: var(--nano-color-success-1000);
+  --color-invalid: var(--nano-color-text-danger);
+  --color-valid: var(--nano-color-fill-success);
   --input-font-size: var(--nano-font-size-sm);
-  --input-text-color: var(--nano-color-base-1000);
+  --input-text-color: var(--nano-color-text-default);
   --input-border-width: 1px;
-  --input-border-color: var(--nano-color-neutral-300);
+  --input-border-color: var(--nano-color-border-default);
   --input-border-radius: 0px;
   --input-invalid-border-hint-width: 2px;
   --input-border-style: solid var(--input-border-color);
-  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);
-  --input-bg-color: var(--nano-color-base-0);
+  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-border-active);
+  --input-bg-color: var(--nano-color-background-default);
   --invalid-msg-color: var(--color-invalid);
-  --help-msg-color: var(--nano-color-base-1000);
+  --help-msg-color: var(--nano-color-text-default);
   --more-font-size: var(--nano-font-size-2xs);
   --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);
   --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);
   --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);
-  --label-color: var(--nano-color-base-1000);
+  --label-color: var(--nano-color-text-default);
   --label-font-size: var(--nano-font-size-xs);
   position: relative;
   inline-size: 100%;
@@ -442,7 +442,7 @@ label.visually-hide,
 }
 
 :host([type=date]) .input__date-trigger {
-  color: var(--nano-color-primary-1200);
+  color: var(--nano-color-icon-primary);
 }
 :host([type=date]) .input__date-dropdown {
   --overflow: visible;
@@ -468,7 +468,7 @@ label.visually-hide,
     inset-block-start: 0;
   }
   :host([type=date]) .input__date-dropdown {
-    background-color: var(--nano-color-base-0);
+    background-color: var(--nano-color-background-default);
   }
 }
 

package/dist/collection/components/input-otp/input-otp.css

@@ -77,11 +77,11 @@
   --separator-width: 7px;
   --separator-height: 1px;
   --separator-border-radius: 0;
-  --separator-color: var(--nano-color-primary-1000);
-  --highlight-color-valid: var(--nano-color-success-1100);
-  --highlight-color-invalid: var(--nano-color-warning-1100);
+  --separator-color: var(--nano-color-fill-primary);
+  --highlight-color-valid: var(--nano-color-fill-success);
+  --highlight-color-invalid: var(--nano-color-fill-warning);
   --border-radius: 8px;
-  --border-color: var(--nano-color-neutral-700);
+  --border-color: var(--nano-color-fill-neutral);
   --border-width: 1px;
   display: block;
   position: relative;
@@ -147,7 +147,7 @@
 
 :host(.input-otp-disabled) .input-otp-description,
 :host(.input-otp-disabled) .input-otp-group {
-  --color: var(--nano-color-neutral-700);
+  --color: var(--nano-color-fill-neutral);
   opacity: 0.5;
 }
 
@@ -179,8 +179,8 @@
   align-items: center;
 }
 .input-otp-icon--valid {
-  color: var(--nano-color-success-1100);
+  color: var(--nano-color-fill-success);
 }
 .input-otp-icon--invalid {
-  color: var(--nano-color-warning-1100);
+  color: var(--nano-color-fill-warning);
 }

package/dist/collection/components/masked-overflow/masked-overflow.css

@@ -39,19 +39,19 @@
   }:host {
   /**
    * @prop --indicator-transition. The time it takes for the indicator to transition. Defaults to `var(--nano-transition-fast)`.
-   * @prop --indicator-color. The color of the indicator. Defaults to `var(--nano-color-primary-1000)`.
+   * @prop --indicator-color. The color of the indicator. Defaults to `var(--nano-color-fill-primary)`.
    * @prop --indicator-size. The size of the indicator. Defaults to `3px`.
-   * @prop --indicator-track-color. The color of the indicator track. Defaults to `var(--nano-color-neutral-300)`.
+   * @prop --indicator-track-color. The color of the indicator track. Defaults to `var(--nano-color-fill-neutral-weak)`.
    * @prop --indicator-track-size. The size of the indicator track. Defaults to `var(--indicator-size)`.
    * @prop --scroll-btn-color. The color of the scroll buttons. Defaults to `currentColor`.
    * @prop --fade-size. The size of the fade effect. Defaults to `100px`.
    */
   --indicator-transition: var(--nano-transition-fast);
-  --indicator-color: var(--nano-color-primary-1000);
+  --indicator-color: var(--nano-color-fill-primary);
   --indicator-size: 3px;
-  --indicator-track-color: var(--nano-color-neutral-300);
+  --indicator-track-color: var(--nano-color-fill-neutral-weak);
   --indicator-track-size: var(--indicator-size);
-  --scroll-btn-color: var(--nano-color-primary-1200);
+  --scroll-btn-color: var(--nano-color-fill-primary-pressed);
   --scroll-btn-size: 1rem;
   --fade-size: 100px;
   position: relative;

package/dist/collection/components/menu/menu.css

@@ -41,15 +41,15 @@
    * @prop --width: width of the menu. Defaults to 'auto'
    * @prop --padding: padding of the menu. Default to 'var(--nano-spacing-sm) var(--nano-spacing-sm)';
    * @prop --font-size: font size of the menu. Default to '1rem';
-   * @prop --background: background color of the menu. Default to 'var(--nano-color-neutral-75)';
+   * @prop --background: background color of the menu. Default to 'var(--nano-color-surface-subtle)';
    */
   --padding: var(--nano-spacing-sm) var(--nano-spacing-sm);
   --font-size: 1rem;
-  --background: var(--nano-color-neutral-75);
+  --background: var(--nano-color-surface-subtle);
   --nav-item-padding: var(--padding);
   display: block;
   background: var(--background);
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
   overflow-x: clip;
 }
 

package/dist/collection/components/menu-drawer/menu-drawer.css

@@ -43,12 +43,12 @@
   --padding-start: 13px;
   --icon-size: 19px;
   --font-size: var(--nano-font-size-xs);
-  --bg-color: var(--nano-color-surface-50);
-  --bg-color-hover: var(--nano-color-neutral-75);
-  --bg-color-selected: var(--nano-color-neutral-300);
-  --bg-color-open: var(--nano-color-neutral-300);
-  --content-color: var(--nano-color-neutral-1400);
-  --divider-color: var(--nano-color-neutral-300);
+  --bg-color: var(--nano-color-surface-sunken);
+  --bg-color-hover: var(--nano-color-surface-subtle);
+  --bg-color-selected: var(--nano-color-fill-neutral-weak);
+  --bg-color-open: var(--nano-color-fill-neutral-weak);
+  --content-color: var(--nano-color-text-default);
+  --divider-color: var(--nano-color-fill-neutral-weak);
   --global-nav-height: 76px;
   --menu-width: calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));
   color-scheme: dark;

package/dist/collection/components/option/option.css

@@ -40,29 +40,29 @@
   /**
    * @prop --bg: default background color. Defaults to none;
    * @prop --bg-selected: background color when selected. Defaults to var(--nano-color-blue-cerulean-1000);
-   * @prop --bg-focus: background color when focused. Defaults to var(--nano-color-primary-300);
+   * @prop --bg-focus: background color when focused. Defaults to var(--nano-color-fill-secondary-pressed);
    * @prop --bg-disabled: background color when disabled. Defaults to none;
-   * @prop --color: default text color. Defaults to var(--nano-color-base-1000);
+   * @prop --color: default text color. Defaults to var(--nano-color-surface-contrast);
    * @prop --color-selected: text color when selected. Defaults to var(--nano-color-basic-white);
-   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base-1000);
-   * @prop --color-disabled: text color when disabled. Defaults to var(--nano-color-neutral-300);
+   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-surface-contrast);
+   * @prop --color-disabled: text color when disabled. Defaults to var(--nano-color-fill-neutral-weak);
    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1em;
 
-   * @prop --color: default text color. Defaults to var(--nano-color-base-1000);
+   * @prop --color: default text color. Defaults to var(--nano-color-surface-contrast);
    * @prop --color-selected: text color when selected. Defaults to var(--nano-color-basic-white);
-   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base-1000);
-   * @prop --color-disabled: text color when disabled. Defaults to var(--nano-color-neutral-300);
+   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-surface-contrast);
+   * @prop --color-disabled: text color when disabled. Defaults to var(--nano-color-fill-neutral-weak);
 
    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1em;
    */
   --bg: none;
   --bg-selected: none;
-  --bg-focus: var(--nano-color-blue-cerulean-1000);
+  --bg-focus: var(--nano-color-fill-primary);
   --bg-disabled: none;
-  --color: var(--nano-color-base-1000);
-  --color-selected: var(--nano-color-base-1000);
-  --color-focus: var(--nano-color-base-0);
-  --color-disabled: var(--nano-color-neutral-400);
+  --color: var(--nano-color-text-default);
+  --color-selected: var(--nano-color-text-primary);
+  --color-focus: var(--nano-color-basic-white);
+  --color-disabled: var(--nano-color-fill-neutral-weak);
   --opt-icon-size: 1em;
   --padding-start: var(--nano-spacing-sm);
   --padding-end: var(--nano-spacing-md);

package/dist/collection/components/progress-bar/progress-bar.css

@@ -37,14 +37,14 @@
       scroll-behavior: auto !important;
     }
   }/**
- * @prop --indicator-color: Color of the progress indicator. Defaults to var(--nano-color-primary-1000);
- * @prop --track-color: Color of the progress track. Defaults to var(--nano-color-neutral-300);
+ * @prop --indicator-color: Color of the progress indicator. Defaults to var(--nano-color-fill-primary);
+ * @prop --track-color: Color of the progress track. Defaults to var(--nano-color-fill-neutral-weak);
  * @prop --border-radius: Border radius of the progress bar. Defaults to 1.25rem;
  * @prop --height: Height of the progress bar. Defaults to 0.625rem;
  */
 nano-progress-bar {
-  --indicator-color: var(--nano-color-primary-1000);
-  --track-color: var(--nano-color-neutral-300);
+  --indicator-color: var(--nano-color-fill-primary);
+  --track-color: var(--nano-color-fill-neutral-weak);
   --border-radius: 1.25rem;
   --height: 0.625rem;
   display: grid;
@@ -130,5 +130,5 @@ nano-progress-bar[show-percent] progress[value]::before {
   text-align: center;
   transition: inline-size var(--nano-transition-fast);
   font-size: 0.75em;
-  color: var(--nano-color-base-0);
+  color: var(--nano-color-background-default);
 }