@nanoporetech-digital/components 8.23.11 → 8.24.0

package/dist/nano-components/nano-components.css

@@ -56,7 +56,7 @@
     color: inherit;
   }
   :where(nano-footer, .nano-footer) [slot=middle-centre] a:hover {
-    color: var(--nano-color-primary-1000);
+    color: var(--nano-color-text-link-hover);
   }
   :where(nano-footer, .nano-footer) [slot=middle-centre] a:focus-visible {
     outline: var(--nano-focus-ring);
@@ -113,7 +113,7 @@
     position: relative;
   }
   .nano-sortable__keyboard-handle {
-    background: var(--nano-color-base-0);
+    background: var(--nano-color-background-default);
   }
   .nano-sortable__handle-dragged {
     outline: var(--nano-focus-ring);
@@ -123,9 +123,9 @@
 @layer components {
   nano-cta {
     --color: var(--nano-color-basic-white);
-    --bg: var(--nano-color-primary-1000);
-    --bg-hover: var(--nano-color-primary-1100);
-    --bg-active: var(--nano-color-primary-1200);
+    --bg: var(--nano-color-fill-primary);
+    --bg-hover: var(--nano-color-fill-primary-hover);
+    --bg-active: var(--nano-color-fill-primary-pressed);
     --border: 1px solid var(--bg);
     --icon-size: 1em;
     --padding-v: 0.4375em;
@@ -165,58 +165,26 @@
   }
   nano-cta[secondary]:not([secondary=false]),
   nano-cta :is([secondary]):not([secondary=false]) {
-    --color: var(--nano-color-primary-1100);
-    --bg: var(--nano-color-base-0);
-    --bg-hover: var(--nano-color-primary-100);
-    --bg-active: var(--nano-color-primary-300);
-    --border: 1px solid var(--color);
-  }
-  nano-cta[theme=success],
-  nano-cta :is([theme=success]) {
-    --color: var(--nano-color-basic-white);
-    --bg: var(--nano-color-success-1000);
-    --bg-hover: var(--nano-color-success-1100);
-    --bg-active: var(--nano-color-success-1200);
-    --border: 1px solid var(--bg);
-  }
-  nano-cta[theme=success][secondary]:not([secondary=false]),
-  nano-cta :is([theme=success][secondary]):not([secondary=false]) {
-    --color: var(--nano-color-success-1100);
-    --bg: var(--nano-color-base-0);
-    --bg-hover: var(--nano-color-success-75);
-    --bg-active: var(--nano-color-success-200);
+    --color: var(--nano-color-text-link);
+    --bg: transparent;
+    --bg-hover: var(--nano-color-fill-secondary-hover);
+    --bg-active: var(--nano-color-fill-secondary-pressed);
     --border: 1px solid var(--color);
   }
   nano-cta[theme=danger],
   nano-cta :is([theme=danger]) {
     --color: var(--nano-color-basic-white);
-    --bg: var(--nano-color-danger-1000);
-    --bg-hover: var(--nano-color-danger-1100);
-    --bg-active: var(--nano-color-danger-1200);
+    --bg: var(--nano-color-fill-danger);
+    --bg-hover: var(--nano-color-fill-danger-hover);
+    --bg-active: var(--nano-color-fill-danger-pressed);
     --border: 1px solid var(--bg);
   }
   nano-cta[theme=danger][secondary]:not([secondary=false]),
   nano-cta :is([theme=danger][secondary]):not([secondary=false]) {
-    --color: var(--nano-color-danger-1200);
-    --bg: var(--nano-color-base-0);
-    --bg-hover: var(--nano-color-danger-300);
-    --bg-active: var(--nano-color-danger-400);
-    --border: 1px solid var(--color);
-  }
-  nano-cta[theme=warning],
-  nano-cta :is([theme=warning]) {
-    --color: var(--nano-color-basic-white);
-    --bg: var(--nano-color-warning-1000);
-    --bg-hover: var(--nano-color-warning-1100);
-    --bg-active: var(--nano-color-warning-1200);
-    --border: 1px solid var(--bg);
-  }
-  nano-cta[theme=warning][secondary]:not([secondary=false]),
-  nano-cta :is([theme=warning][secondary]):not([secondary=false]) {
-    --color: var(--nano-color-warning-1100);
-    --bg: var(--nano-color-base-0);
-    --bg-hover: var(--nano-color-warning-200);
-    --bg-active: var(--nano-color-warning-300);
+    --color: var(--nano-color-text-danger);
+    --bg: var(--nano-color-background-default);
+    --bg-hover: var(--nano-color-fill-danger-weak);
+    --bg-active: var(--nano-color-fill-danger-weak);
     --border: 1px solid var(--color);
   }
   nano-cta[size=medium],
@@ -251,9 +219,9 @@
   }
   nano-cta :is([disabled], [disabled=true]):not([disabled=false]),
   nano-cta a:not([href]) {
-    --color: var(--nano-color-neutral-1200);
+    --color: var(--nano-color-text-disabled);
     --text-color: var(--color);
-    --bg: var(--nano-color-neutral-100);
+    --bg: var(--nano-color-fill-disabled);
     --bg-hover: var(--bg);
     --bg-active: var(--bg);
     --border: 1px solid var(--color);
@@ -501,7 +469,7 @@
     position: absolute;
     inset-block-end: 10px;
     inset-inline-end: 10px;
-    background: var(--nano-color-base-0);
+    background: var(--nano-color-background-default);
   }
   nano-card [slot=title] {
     order: 2;
@@ -529,7 +497,7 @@
     display: contents;
   }
   nano-card nano-content-links {
-    --color-border: rgb(var(--nano-color-base-rgb-1000) / 7%);
+    --color-border: var(--nano-color-border-default);
   }
   nano-card address {
     font-style: normal;
@@ -541,7 +509,7 @@
   }
   nano-card a[slot=title]:hover,
   nano-card [slot=title] a:hover {
-    color: var(--nano-color-primary-1000);
+    color: var(--nano-color-text-hover);
     text-decoration: underline;
   }
   nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) a, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
@@ -551,7 +519,7 @@
   }
   nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]):hover [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
   :has(a, nano-icon-button, input, nano-cta[loading])):hover [slot=title] {
-    color: var(--nano-color-primary-1000);
+    color: var(--nano-color-text-hover);
     text-decoration: underline;
   }
   nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]):hover:has([slot=title] > * ~ *) [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
@@ -561,7 +529,7 @@
   }
   nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]):hover:has([slot=title] > * ~ *) [slot=title] > :first-child, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
   :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] > :first-child {
-    color: var(--nano-color-primary-1000);
+    color: var(--nano-color-text-hover);
     text-decoration: underline;
   }
   nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) button::before,
@@ -587,7 +555,6 @@
   }
   nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click])[variant^=promo]:hover, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
   :has(a, nano-icon-button, input, nano-cta[loading]))[variant^=promo]:hover {
-    box-shadow: var(--nano-shadow-l0);
     background-color: var(--bg-hover);
   }
   nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) nano-tooltip > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
@@ -719,56 +686,44 @@
     margin-inline-start: auto;
     rotate: calc(180deg * var(--flip-icon-ltr));
   }
-  nano-card[variant=promo] {
-    --bg: var(--nano-color-notice-1200);
-    --bg-hover: var(--nano-color-notice-1000);
-    --color: var(--nano-color-base-0);
-  }
-  nano-card[variant=promo] nano-cta {
-    --color: var(--nano-color-notice-1000);
-    --bg: var(--nano-color-base-0);
-    --bg-hover: var(--nano-color-notice-75);
-    --bg-active: var(--nano-color-notice-200);
-    --border: 1px solid var(--color);
-  }
   nano-card[variant=promo-aero] {
-    --bg: var(--nano-color-success-200);
-    --bg-hover: var(--nano-color-success-75);
-    --color: var(--nano-color-base-1000);
-  }
-  nano-card[variant=promo-plain], nano-card[variant=promo-grey] {
-    --bg: var(--nano-color-base-0);
-    --bg-hover: var(--nano-color-neutral-100);
-    --color: var(--nano-color-neutral-1400);
-  }
-  nano-card[variant=promo-plain]:hover [slot=title], nano-card[variant=promo-grey]:hover [slot=title] {
-    color: var(--nano-color-primary-1000);
-  }
-  nano-card[variant=promo-plain] nano-cta, nano-card[variant=promo-grey] nano-cta {
-    --color: var(--nano-color-primary-1100);
-    --bg: var(--nano-color-base-0);
-    --bg-hover: var(--nano-color-primary-50);
-    --bg-active: var(--nano-color-primary-75);
-    --border: 1px solid var(--color);
+    --bg: var(--nano-color-surface-brand-feature);
+    --bg-hover: var(--nano-color-surface-brand-feature-hover);
+    --color: var(--nano-color-text-default);
+  }
+  nano-card[variant=promo-plain] {
+    --bg: var(--nano-color-surface-default);
+    --bg-hover: var(--nano-color-surface-default-hover);
+    --color: var(--nano-color-text-default);
   }
   nano-card[variant=promo-grey] {
-    --bg: var(--nano-color-neutral-100);
-    --bg-hover: var(--nano-color-neutral-200);
-    --color: var(--nano-color-neutral-1400);
+    --bg: var(--nano-color-surface-subtle);
+    --bg-hover: var(--nano-color-surface-subtle-hover);
+    --color: var(--nano-color-text-default);
+  }
+  nano-card[variant=promo-grey]:hover [slot=title] {
+    color: var(--nano-color-text-hover);
+  }
+  nano-card[variant=promo-grey] nano-cta {
+    --color: var(--nano-color-text-link);
+    --bg: var(--nano-color-surface-subtle);
+    --bg-hover: var(--nano-color-surface-subtle-hover);
+    --bg-active: var(--nano-color-surface-subtle-pressed);
+    --border: 1px solid var(--color);
   }
 }
 @layer components {
   nano-tag {
-    --background: var(--nano-color-base-50);
-    --color: var(--nano-color-primary-1100);
-    --stroke: var(--nano-color-primary-1000);
-    --color-non-interactive: var(--nano-color-neutral-1400);
+    --background: var(--nano-color-surface-default);
+    --color: var(--nano-color-text-link);
+    --stroke: var(--nano-color-border-accent);
+    --color-non-interactive: var(--nano-color-text-default);
     --padding: 0.125rem 0.375rem;
     --font-size: 0.625rem;
     --line-height: var(--nano-line-height-denser);
     --letter-spacing: var(--nano-letter-spacing-denser);
-    --bg-color-hover: var(--nano-color-primary-100);
-    --bg-color-active: var(--nano-color-primary-300);
+    --bg-color-hover: var(--nano-color-fill-secondary-hover);
+    --bg-color-active: var(--nano-color-fill-secondary-pressed);
     display: inline-block;
     block-size: fit-content;
     inline-size: fit-content;
@@ -838,13 +793,13 @@
 }
 @layer components {
   :where(nano-content-links, .nano-content-links) {
-    --text-color: var(--nano-color-neutral-1400);
-    --color-disabled: var(--nano-color-neutral-800);
-    --color-border: var(--nano-color-neutral-200);
-    --color-active: var(--nano-color-primary-1000);
+    --text-color: var(--nano-color-text-default);
+    --color-disabled: var(--nano-color-text-disabled);
+    --color-border: var(--nano-color-border-default);
+    --color-active: var(--nano-color-fill-primary);
     --padding: var(--nano-spacing-sm);
     --icon-size: 1em;
-    --icon-color: var(--nano-color-primary-1200);
+    --icon-color: var(--nano-color-icon-primary);
     display: contents;
     color: var(--text-color);
     font-size: var(--nano-font-size-sm);
@@ -973,79 +928,19 @@
     background-color: color-mix(in srgb, var(--bg), black 20%);
   }
   nano-badge:not([theme]), nano-badge[theme=primary] {
-    --bg: var(--nano-color-primary-1000);
-  }
-  nano-badge:not([theme])[strength="4"], nano-badge[theme=primary][strength="4"] {
-    --bg: var(--nano-color-primary-700);
-  }
-  nano-badge:not([theme])[strength="3"], nano-badge[theme=primary][strength="3"] {
-    --bg: var(--nano-color-primary-1000);
-  }
-  nano-badge:not([theme])[strength="2"], nano-badge[theme=primary][strength="2"] {
-    --bg: var(--nano-color-primary-1100);
-  }
-  nano-badge:not([theme])[strength="1"], nano-badge[theme=primary][strength="1"] {
-    --bg: var(--nano-color-primary-1200);
+    --bg: var(--nano-color-fill-primary);
   }
   nano-badge[theme=neutral] {
-    --bg: var(--nano-color-neutral-1000);
-  }
-  nano-badge[theme=neutral][strength="4"] {
-    --bg: var(--nano-color-neutral-700);
-  }
-  nano-badge[theme=neutral][strength="3"] {
-    --bg: var(--nano-color-neutral-1000);
-  }
-  nano-badge[theme=neutral][strength="2"] {
-    --bg: var(--nano-color-neutral-1200);
-  }
-  nano-badge[theme=neutral][strength="1"] {
-    --bg: var(--nano-color-neutral-1400);
+    --bg: var(--nano-color-fill-neutral);
   }
   nano-badge[theme=success] {
-    --bg: var(--nano-color-success-1000);
-  }
-  nano-badge[theme=success][strength="4"] {
-    --bg: var(--nano-color-success-600);
-  }
-  nano-badge[theme=success][strength="3"] {
-    --bg: var(--nano-color-success-1000);
-  }
-  nano-badge[theme=success][strength="2"] {
-    --bg: var(--nano-color-success-1100);
-  }
-  nano-badge[theme=success][strength="1"] {
-    --bg: var(--nano-color-success-1200);
+    --bg: var(--nano-color-fill-success);
   }
   nano-badge[theme=warning] {
-    --bg: var(--nano-color-warning-600);
-  }
-  nano-badge[theme=warning][strength="4"] {
-    --bg: var(--nano-color-warning-300);
-  }
-  nano-badge[theme=warning][strength="3"] {
-    --bg: var(--nano-color-warning-600);
-  }
-  nano-badge[theme=warning][strength="2"] {
-    --bg: var(--nano-color-warning-1100);
-  }
-  nano-badge[theme=warning][strength="1"] {
-    --bg: var(--nano-color-warning-1200);
+    --bg: var(--nano-color-fill-warning);
   }
   nano-badge[theme=danger] {
-    --bg: var(--nano-color-danger-1100);
-  }
-  nano-badge[theme=danger][strength="4"] {
-    --bg: var(--nano-color-danger-400);
-  }
-  nano-badge[theme=danger][strength="3"] {
-    --bg: var(--nano-color-danger-800);
-  }
-  nano-badge[theme=danger][strength="2"] {
-    --bg: var(--nano-color-danger-1100);
-  }
-  nano-badge[theme=danger][strength="1"] {
-    --bg: var(--nano-color-danger-1200);
+    --bg: var(--nano-color-fill-danger-hover);
   }
   nano-badge[pulse]:not([pulse=false]) {
     animation: pulse-animation 2s infinite;
@@ -1151,8 +1046,8 @@
     inset-block-start: 100%;
   }
   nano-global-nav.bar-menu > nano-nav-item::part(modal-content) {
-    background: var(--nano-color-base-0);
-    color: var(--nano-color-base-1000);
+    background: var(--nano-color-background-default);
+    color: var(--nano-color-surface-contrast);
     padding: var(--nano-spacing-xl);
     inline-size: 91.25rem;
     max-inline-size: 100%;
@@ -1161,7 +1056,7 @@
   }
   nano-global-nav.bar-menu > nano-nav-item::part(modal-mask),
   nano-global-nav.bar-menu > nano-nav-item [part~=modal-mask] {
-    background: var(--nano-overlay-background-color);
+    background: var(--nano-color-overlay-scrim);
     position: fixed;
     inset: 0;
     min-block-size: 100%;
@@ -1194,7 +1089,7 @@
     line-height: var(--nano-line-height-dense);
     text-wrap: balance;
     padding-block-end: 1rem;
-    border-block-end: 1px solid var(--nano-color-neutral-100);
+    border-block-end: 1px solid var(--nano-color-surface-neutral);
   }
   nano-global-nav.bar-menu > nano-nav-item [slot=secondary] a {
     text-decoration: none;
@@ -1217,8 +1112,8 @@
     display: flex;
     flex-direction: column;
     gap: var(--nano-spacing-sm);
-    background: var(--nano-color-base-0);
-    color: var(--nano-color-base-1000);
+    background: var(--nano-color-background-default);
+    color: var(--nano-color-surface-contrast);
   }
   @media (width < 1200px) and (width > 830px) {
     nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area {
@@ -1341,10 +1236,10 @@
     inline-size: var(--size);
     min-inline-size: var(--size);
     block-size: var(--size);
-    background-color: var(--nano-color-neutral-400);
+    background-color: var(--nano-color-fill-neutral-weak);
     font-size: calc(var(--size) * 0.5);
     font-weight: var(--nano-font-weight-normal);
-    color: var(--nano-color-neutral-0);
+    color: var(--nano-color-text-inverse);
     -webkit-user-select: none;
             user-select: none;
     vertical-align: middle;
@@ -1362,13 +1257,13 @@
   }
 }
 .nano-in-page-nav {
-  --color-bottom-border: rgb(var(--nano-color-base-rgb-1000) / 10%);
-  --color-text: var(--nano-color-neutral-1400);
-  --color-primary: var(--nano-color-primary-1100);
-  --color-text-hover: var(--color-primary);
-  --color-border-active: var(--nano-color-primary-1000);
+  --color-bottom-border: -var(--nano-color-border-default);
+  --color-text: var(--nano-color-text-default);
+  --color-primary: var(--nano-color-text-primary);
+  --color-text-hover: var(--nano-color-text-hover);
+  --color-border-active: var(--nano-color-border-accent);
   --border-active: 3px solid var(--color-border-active);
-  --color-bg: var(--nano-color-primary-75);
+  --color-bg: var(--nano-color-surface-brand-feature);
   --font-size: var(--nano-font-size-small);
   --font-weight: var(--nano-font-weight-normal);
   --font-weight-active: var(--nano-font-weight-bold);
@@ -1452,7 +1347,7 @@
 .nano-in-page-nav .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);
@@ -1482,17 +1377,17 @@
   color: var(--color-primary);
 }
 .nano-in-page-nav.external-links {
-  --color-bg: var(--nano-color-base-0) !important;
-  --color-border-active: var(--nano-color-primary-1000);
+  --color-bg: var(--nano-color-background-default) !important;
+  --color-border-active: var(--nano-color-border-accent);
 }
 .nano-in-page-nav.external-links ul ul {
-  --border-active: 3px solid var(--nano-color-neutral-1200);
+  --border-active: 3px solid var(--nano-color-border-accent);
 }
 
 @layer components {
   :where(nano-collapsible-comparison, .nano-collapsible-comparison) {
-    --color-bg: var(--nano-color-base-0);
-    --color-border: var(--nano-color-neutral-200);
+    --color-bg: var(--nano-color-background-default);
+    --color-border: var(--nano-color-border-default);
     --outer-spacing: var(--nano-spacing-l1-default);
   }
   :where(nano-collapsible-comparison, .nano-collapsible-comparison) h2 {
@@ -1570,10 +1465,10 @@
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) {
     --padding: inherit;
     display: block;
-    border-block-start: 1px solid var(--nano-color-neutral-200);
+    border-block-start: 1px solid var(--nano-color-border-default);
   }
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not(:has(+ nano-nav-item), :has(+ nano-dropdown), :has(+ nano-content-links)) {
-    border-block-end: 1px solid var(--nano-color-neutral-200);
+    border-block-end: 1px solid var(--nano-color-border-default);
   }
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger) {
     font-size: var(--nano-font-size-sm);
@@ -1603,7 +1498,7 @@
   }
   :where(nano-menu, .nano-menu) a {
     font-size: calc(var(--font-size) - 0.125rem);
-    color: var(--nano-color-primary-1100);
+    color: var(--nano-color-text-link);
   }
   :where(nano-menu, .nano-menu) :where(nano-icon, .nano-icon) {
     color: var(--icon-color);
@@ -1614,36 +1509,36 @@
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger),
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button],
   :where(nano-menu, .nano-menu) nano-content-links a {
-    --icon-color: var(--nano-color-primary-1000);
-    color: var(--nano-color-neutral-1400);
+    --icon-color: var(--nano-color-text-link);
+    color: var(--nano-color-text-default);
     font-size: var(--font-size);
   }
   :where(nano-menu, .nano-menu) a:hover:not(:focus-visible),
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled]) [slot=close-button]:hover:not(:focus-visible),
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled])::part(trigger):hover:not(:focus-visible) {
-    --icon-color: var(--nano-color-primary-1100);
-    color: var(--nano-color-base-1000);
-    background-color: var(--nano-color-neutral-100);
+    --icon-color: var(--nano-color-icon-hover);
+    color: var(--nano-color-text-default);
+    background-color: var(--nano-color-surface-subtle-hover);
   }
   :where(nano-menu, .nano-menu) a:active:not(:focus-visible),
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled]) [slot=close-button]:active:not(:focus-visible),
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled])::part(trigger):active:not(:focus-visible) {
-    --icon-color: var(--nano-color-primary-800);
-    color: var(--nano-color-base-1000);
-    background-color: var(--nano-color-neutral-200);
+    --icon-color: var(--nano-color-icon-primary);
+    color: var(--nano-color-text-default);
+    background-color: var(--nano-color-surface-subtle);
   }
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button]:focus-visible,
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible,
   :where(nano-menu, .nano-menu) a:focus-visible {
-    --icon-color: var(--nano-color-base-0);
+    --icon-color: var(--nano-color-icon-inverse);
     outline: none;
-    background-color: var(--nano-color-primary-1000);
-    color: var(--nano-color-base-0);
+    background-color: var(--nano-color-fill-primary);
+    color: var(--nano-color-text-inverse);
   }
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button]:focus-visible:active,
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible:active,
   :where(nano-menu, .nano-menu) a:focus-visible:active {
-    background-color: var(--nano-color-primary-1200);
+    background-color: var(--nano-color-text-primary);
   }
   :where(nano-menu, .nano-menu) nano-content-links a::after {
     background-color: var(--icon-color);
@@ -1678,7 +1573,7 @@
     align-items: center;
     cursor: pointer;
     inline-size: 100%;
-    border-block-start: 1px solid var(--nano-color-neutral-200);
+    border-block-start: 1px solid var(--nano-color-border-default);
   }
   :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button]::before {
     content: "";
@@ -1719,7 +1614,7 @@
     font-size: var(--nano-font-size-md);
     line-height: var(--nano-line-height-dense);
     text-wrap: balance;
-    color: var(--nano-color-neutral-1400);
+    color: var(--nano-color-text-default);
     text-align: center;
   }
   nano-icon-item p[slot=content] {
@@ -1730,7 +1625,7 @@
     text-align: center;
   }
   nano-icon-item [slot=icon] {
-    color: var(--nano-color-primary-1000);
+    color: var(--nano-color-icon-default);
   }
   nano-icon-item[landscape] {
     justify-items: start;
@@ -1773,16 +1668,16 @@
   nano-icon-item a > [slot=heading] {
     cursor: pointer;
     text-decoration: underline;
-    color: var(--nano-color-primary-1100);
+    color: var(--nano-color-text-link);
   }
   nano-icon-item a:hover {
-    color: var(--nano-color-primary-1200);
+    color: var(--nano-color-text-hover);
   }
   nano-icon-item a:hover [slot=heading] {
-    color: var(--nano-color-primary-1200);
+    color: var(--nano-color-text-hover);
   }
   nano-icon-item:has(a:hover) nano-icon {
-    color: var(--nano-color-primary-1200);
+    color: var(--nano-color-text-hover);
   }
 }
 @layer components {
@@ -1841,9 +1736,9 @@
   :where(nano-table, .nano-table) {
     --table-padding: var(--nano-spacing-md);
     --table-compact-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));
-    --table-border-color: var(--nano-color-neutral-200);
-    --table-border-color-header: var(--nano-color-primary-1000);
-    --table-background: var(--nano-color-base-0);
+    --table-border-color: var(--nano-color-border-default);
+    --table-border-color-header: var(--nano-color-border-default);
+    --table-background: var(--nano-color-background-default);
     --table-wrapper-max-height: 80vh;
     --table-width: 100%;
     --isLtR: 1;
@@ -1898,10 +1793,10 @@
     position: relative;
   }
   :where(nano-table, .nano-table) tr[clickable]:focus-within {
-    --table-background: var(--nano-color-primary-50);
+    --table-background: var(--nano-color-fill-secondary-hover);
   }
   :where(nano-table, .nano-table) tr[clickable]:hover {
-    --table-background: var(--nano-color-primary-75);
+    --table-background: var(--nano-color-surface-brand-feature);
   }
   :where(nano-table, .nano-table) tr[clickable] input[type=checkbox]::after,
   :where(nano-table, .nano-table) tr[clickable] nano-checkbox::after,
@@ -2050,7 +1945,7 @@
 @layer components {
   nano-feature-box {
     --color: var(--nano-color-basic-white);
-    --bg: var(--nano-color-basic-black);
+    --bg: var(--nano-color-surface-special);
     container-type: inline-size;
     display: grid;
     grid-template-columns: calc(50% - var(--nano-spacing-l1-default)) 1fr;
@@ -2122,6 +2017,9 @@
   nano-feature-box [slot=content] h1, nano-feature-box [slot=content] h2, nano-feature-box [slot=content] h3, nano-feature-box [slot=content] h4, nano-feature-box [slot=content] h5, nano-feature-box [slot=content] h6 {
     text-wrap: balance;
   }
+  nano-feature-box [slot=content] a {
+    color: var(--nano-color-blue-cerulean-700);
+  }
   nano-feature-box [slot=content] > * {
     margin-block: unset;
     margin-block-start: unset;
@@ -2187,11 +2085,11 @@
     justify-content: flex-end;
     border-block-end: var(--divider-color) 1px solid;
     padding-block-end: var(--nano-spacing-sm);
-    color: var(--nano-color-primary-1000);
+    color: var(--nano-color-fill-primary);
     text-decoration: underline;
   }
   nano-menu-drawer > nano-nav-item::part(close-button):hover {
-    color: var(--nano-color-primary-1100);
+    color: var(--nano-color-fill-primary-hover);
   }
   nano-menu-drawer > nano-nav-item [slot=close-button] {
     cursor: pointer;
@@ -2205,7 +2103,7 @@
   }
   nano-menu-drawer > nano-nav-item nano-icon[slot=icon-end] {
     margin-inline-end: calc((var(--nano-spacing-md)) / 2 * -1);
-    color: var(--nano-color-primary-1000);
+    color: var(--nano-color-fill-primary);
     position: relative;
   }
   nano-menu-drawer > nano-nav-item [slot=icon-start] {
@@ -2319,7 +2217,7 @@ nano-increment nano-input .form-ctrl__validation-icon, .nano-increment nano-inpu
     display: flex;
     justify-content: space-between;
     padding-block-end: var(--spacing);
-    border-block-end: 2px solid var(--nano-color-primary-1000);
+    border-block-end: 2px solid var(--nano-color-border-accent);
     flex-wrap: wrap;
     grid-column: 1/-1;
     grid-row: 1;
@@ -2386,7 +2284,7 @@ nano-increment nano-input .form-ctrl__validation-icon, .nano-increment nano-inpu
     font-size: var(--nano-font-size-sm);
     line-height: var(--nano-line-height-normal);
     letter-spacing: var(--nano-letter-spacing-loose);
-    border-block-start: 1px solid var(--nano-color-neutral-300);
+    border-block-start: 1px solid var(--nano-color-border-default);
     padding: var(--nano-spacing-sm) 0;
     display: grid;
     grid-template-columns: subgrid;
@@ -2421,7 +2319,7 @@ nano-increment nano-input .form-ctrl__validation-icon, .nano-increment nano-inpu
     font-size: var(--nano-font-size-2xs);
     line-height: var(--nano-line-height-normal);
     letter-spacing: var(--nano-letter-spacing-loose);
-    color: var(--nano-color-neutral-1000);
+    color: var(--nano-color-text-neutral);
   }
   nano-option-box:not(:has([slot=img])) [slot=content] {
     grid-column: 1/-1;
@@ -2440,7 +2338,7 @@ nano-increment nano-input .form-ctrl__validation-icon, .nano-increment nano-inpu
     grid-column: 1/-1;
     grid-row: 3/span 2;
     margin: unset;
-    border-block-start: 1px solid var(--nano-color-neutral-300);
+    border-block-start: 1px solid var(--nano-color-border-default);
     padding-block-start: var(--spacing);
   }
   @container (width < 417px) {
@@ -2489,7 +2387,7 @@ nano-increment nano-input .form-ctrl__validation-icon, .nano-increment nano-inpu
   nano-search-result a[slot=title],
   nano-search-result a[slot=title] > *,
   nano-search-result [slot=title] a {
-    color: var(--nano-color-primary-1100);
+    color: var(--nano-color-text-link);
     text-decoration: underline;
   }
   nano-search-result [slot=content],
@@ -2497,7 +2395,7 @@ nano-increment nano-input .form-ctrl__validation-icon, .nano-increment nano-inpu
     font-size: var(--nano-font-size-xs);
     line-height: var(--nano-line-height-normal);
     letter-spacing: var(--nano-letter-spacing-loose);
-    color: var(--nano-color-neutral-1400);
+    color: var(--nano-color-text-default);
     order: 1;
   }
   nano-search-result [slot=meta],
@@ -2508,7 +2406,7 @@ nano-increment nano-input .form-ctrl__validation-icon, .nano-increment nano-inpu
   }
   nano-search-result [slot=meta] > *:not(:last-child)::after {
     content: "|";
-    color: var(--nano-color-neutral-300);
+    color: var(--nano-color-text-placeholder);
     display: inline-block;
     padding-inline-start: var(--nano-spacing-md);
   }