@nova-design-system/nova-base 3.0.0-beta.30 → 3.0.0-beta.33

package/dist/css/nova-utils.css

@@ -447,8 +447,8 @@ video {
 }
 
 body, html {
-  background-color: var(--color-base-level-00);
-  color: var(--color-base-content-medium-emphasis);
+  background-color: var(--color-level-00-background);
+  color: var(--color-content-medium-text);
 }
 
 *:disabled {
@@ -466,55 +466,55 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
 }
 
 a {
-  color: var(--color-interaction-link-inline-text);
+  color: var(--color-interaction-link-high-text);
   text-decoration: underline;
   font-weight: 700;
 }
 
 a:hover {
-  color: var(--color-interaction-link-inline-text-hover);
+  color: var(--color-interaction-link-high-text-hover);
 }
 
 h1 {
   font-size: var(--global-typography-h1-font-size);
   line-height: var(--global-typography-h1-line-height);
   font-weight: var(--global-typography-h1-font-weight);
-  color: var(--color-base-content-high-emphasis);
+  color: var(--color-content-high-text);
 }
 
 h2 {
   font-size: var(--global-typography-h2-font-size);
   line-height: var(--global-typography-h2-line-height);
   font-weight: var(--global-typography-h2-font-weight);
-  color: var(--color-base-content-high-emphasis);
+  color: var(--color-content-high-text);
 }
 
 h3 {
   font-size: var(--global-typography-h3-font-size);
   line-height: var(--global-typography-h3-line-height);
   font-weight: var(--global-typography-h3-font-weight);
-  color: var(--color-base-content-high-emphasis);
+  color: var(--color-content-high-text);
 }
 
 h4 {
   font-size: var(--global-typography-h4-font-size);
   line-height: var(--global-typography-h4-line-height);
   font-weight: var(--global-typography-h4-font-weight);
-  color: var(--color-base-content-high-emphasis);
+  color: var(--color-content-high-text);
 }
 
 h5 {
   font-size: var(--global-typography-h4-font-size);
   line-height: var(--global-typography-h4-line-height);
   font-weight: var(--font-weight-medium-emphasis);
-  color: var(--color-base-content-medium-emphasis);
+  color: var(--color-content-medium-text);
 }
 
 h6 {
   font-size: var(--global-typography-h4-font-size);
   line-height: var(--global-typography-h4-line-height);
   font-weight: var(--font-weight-low-emphasis);
-  color: var(--color-base-content-low-emphasis);
+  color: var(--color-content-low-text);
 }
 
 *, ::before, ::after {
@@ -4589,7 +4589,7 @@ h6 {
 }
 
 .bg-background {
-  background-color: var(--color-base-level-00);
+  background-color: var(--color-level-00-background);
 }
 
 .bg-black {
@@ -4925,7 +4925,7 @@ h6 {
 }
 
 .bg-text {
-  background-color: var(--color-base-content-medium-emphasis);
+  background-color: var(--color-content-medium-text);
 }
 
 .bg-transparent {
@@ -6313,7 +6313,7 @@ h6 {
 }
 
 .text-background {
-  color: var(--color-base-level-00);
+  color: var(--color-level-00-background);
 }
 
 .text-black {
@@ -6649,7 +6649,7 @@ h6 {
 }
 
 .text-text {
-  color: var(--color-base-content-medium-emphasis);
+  color: var(--color-content-medium-text);
 }
 
 .text-transparent {
@@ -6740,68 +6740,560 @@ h6 {
   color: var(--color-yellow-900);
 }
 
-.visually-hidden {
-  position: absolute;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  clip: rect(0, 0, 0, 0);
+.border-high {
+  border-color: var(--color-content-high-border);
+}
+
+.icon-high {
+  color: var(--color-content-high-icon);
+}
+
+.text-high {
+  color: var(--color-content-high-text);
+}
+
+.icon-inverted-high {
+  color: var(--color-content-inverted-high-icon);
+}
+
+.text-inverted-high {
+  color: var(--color-content-inverted-high-text);
+}
+
+.icon-inverted-low {
+  color: var(--color-content-inverted-low-icon);
+}
+
+.text-inverted-low {
+  color: var(--color-content-inverted-low-text);
+}
+
+.icon-inverted-medium {
+  color: var(--color-content-inverted-medium-icon);
+}
+
+.text-inverted-medium {
+  color: var(--color-content-inverted-medium-text);
+}
+
+.border-low {
+  border-color: var(--color-content-low-border);
+}
+
+.icon-low {
+  color: var(--color-content-low-icon);
+}
+
+.text-low {
+  color: var(--color-content-low-text);
+}
+
+.text-lower {
+  color: var(--color-content-lower-text);
+}
+
+.border-medium {
+  border-color: var(--color-content-medium-border);
+}
+
+.icon-medium {
+  color: var(--color-content-medium-icon);
+}
+
+.text-medium {
+  color: var(--color-content-medium-text);
+}
+
+.bg-dont-use {
+  background-color: var(--color-dont-use-background);
+}
+
+.border-dont-use {
+  border-color: var(--color-dont-use-border);
+}
+
+.bg-feedback-error-high {
+  background-color: var(--color-feedback-error-high-background);
+}
+
+.border-feedback-error-high {
+  border-color: var(--color-feedback-error-high-border);
+}
+
+.icon-feedback-error-high {
+  color: var(--color-feedback-error-high-icon);
+}
+
+.text-feedback-error-high {
+  color: var(--color-feedback-error-high-text);
+}
+
+.bg-feedback-error-low {
+  background-color: var(--color-feedback-error-low-background);
+}
+
+.border-feedback-error-low {
+  border-color: var(--color-feedback-error-low-border);
+}
+
+.icon-feedback-error-low {
+  color: var(--color-feedback-error-low-icon);
+}
+
+.text-feedback-error-low {
+  color: var(--color-feedback-error-low-text);
+}
+
+.bg-feedback-information-high {
+  background-color: var(--color-feedback-information-high-background);
+}
+
+.border-feedback-information-high {
+  border-color: var(--color-feedback-information-high-border);
+}
+
+.icon-feedback-information-high {
+  color: var(--color-feedback-information-high-icon);
+}
+
+.text-feedback-information-high {
+  color: var(--color-feedback-information-high-text);
+}
+
+.bg-feedback-information-low {
+  background-color: var(--color-feedback-information-low-background);
+}
+
+.border-feedback-information-low {
+  border-color: var(--color-feedback-information-low-border);
+}
+
+.icon-feedback-information-low {
+  color: var(--color-feedback-information-low-icon);
+}
+
+.text-feedback-information-low {
+  color: var(--color-feedback-information-low-text);
+}
+
+.bg-feedback-neutral-high {
+  background-color: var(--color-feedback-neutral-high-background);
+}
+
+.border-feedback-neutral-high {
+  border-color: var(--color-feedback-neutral-high-border);
+}
+
+.icon-feedback-neutral-high {
+  color: var(--color-feedback-neutral-high-icon);
+}
+
+.text-feedback-neutral-high {
+  color: var(--color-feedback-neutral-high-text);
+}
+
+.bg-feedback-neutral-low {
+  background-color: var(--color-feedback-neutral-low-background);
+}
+
+.border-feedback-neutral-low {
+  border-color: var(--color-feedback-neutral-low-border);
+}
+
+.icon-feedback-neutral-low {
+  color: var(--color-feedback-neutral-low-icon);
+}
+
+.text-feedback-neutral-low {
+  color: var(--color-feedback-neutral-low-text);
+}
+
+.bg-feedback-success-high {
+  background-color: var(--color-feedback-success-high-background);
+}
+
+.border-feedback-success-high {
+  border-color: var(--color-feedback-success-high-border);
+}
+
+.icon-feedback-success-high {
+  color: var(--color-feedback-success-high-icon);
+}
+
+.text-feedback-success-high {
+  color: var(--color-feedback-success-high-text);
+}
+
+.bg-feedback-success-low {
+  background-color: var(--color-feedback-success-low-background);
+}
+
+.border-feedback-success-low {
+  border-color: var(--color-feedback-success-low-border);
+}
+
+.icon-feedback-success-low {
+  color: var(--color-feedback-success-low-icon);
+}
+
+.text-feedback-success-low {
+  color: var(--color-feedback-success-low-text);
+}
+
+.bg-feedback-warning-high {
+  background-color: var(--color-feedback-warning-high-background);
+}
+
+.border-feedback-warning-high {
+  border-color: var(--color-feedback-warning-high-border);
+}
+
+.icon-feedback-warning-high {
+  color: var(--color-feedback-warning-high-icon);
+}
+
+.text-feedback-warning-high {
+  color: var(--color-feedback-warning-high-text);
+}
+
+.bg-feedback-warning-low {
+  background-color: var(--color-feedback-warning-low-background);
+}
+
+.border-feedback-warning-low {
+  border-color: var(--color-feedback-warning-low-border);
+}
+
+.icon-feedback-warning-low {
+  color: var(--color-feedback-warning-low-icon);
+}
+
+.text-feedback-warning-low {
+  color: var(--color-feedback-warning-low-text);
+}
+
+.bg-interaction-container-branded-high {
+  background-color: var(--color-interaction-container-branded-high-background);
+}
+
+.bg-interaction-container-branded-high-hover {
+  background-color: var(--color-interaction-container-branded-high-background-hover);
+}
+
+.border-interaction-container-branded-high {
+  border-color: var(--color-interaction-container-branded-high-border);
+}
+
+.border-interaction-container-branded-high-hover {
+  border-color: var(--color-interaction-container-branded-high-border-hover);
+}
+
+.icon-interaction-container-branded-high {
+  color: var(--color-interaction-container-branded-high-icon);
+}
+
+.icon-interaction-container-branded-high-hover {
+  color: var(--color-interaction-container-branded-high-icon-hover);
+}
+
+.text-interaction-container-branded-high {
+  color: var(--color-interaction-container-branded-high-text);
+}
+
+.text-interaction-container-branded-high-hover {
+  color: var(--color-interaction-container-branded-high-text-hover);
+}
+
+.bg-interaction-container-branded-low {
+  background-color: var(--color-interaction-container-branded-low-background);
+}
+
+.bg-interaction-container-branded-low-hover {
+  background-color: var(--color-interaction-container-branded-low-background-hover);
+}
+
+.border-interaction-container-branded-low {
+  border-color: var(--color-interaction-container-branded-low-border);
+}
+
+.border-interaction-container-branded-low-hover {
+  border-color: var(--color-interaction-container-branded-low-border-hover);
+}
+
+.icon-interaction-container-branded-low {
+  color: var(--color-interaction-container-branded-low-icon);
+}
+
+.icon-interaction-container-branded-low-hover {
+  color: var(--color-interaction-container-branded-low-icon-hover);
+}
+
+.text-interaction-container-branded-low {
+  color: var(--color-interaction-container-branded-low-text);
+}
+
+.text-interaction-container-branded-low-hover {
+  color: var(--color-interaction-container-branded-low-text-hover);
+}
+
+.bg-interaction-container-neutral {
+  background-color: var(--color-interaction-container-neutral-background);
+}
+
+.bg-interaction-container-neutral-hover {
+  background-color: var(--color-interaction-container-neutral-background-hover);
+}
+
+.border-interaction-container-neutral {
+  border-color: var(--color-interaction-container-neutral-border);
+}
+
+.border-interaction-container-neutral-hover {
+  border-color: var(--color-interaction-container-neutral-border-hover);
+}
+
+.icon-interaction-container-neutral {
+  color: var(--color-interaction-container-neutral-icon);
+}
+
+.icon-interaction-container-neutral-hover {
+  color: var(--color-interaction-container-neutral-icon-hover);
+}
+
+.text-interaction-container-neutral {
+  color: var(--color-interaction-container-neutral-text);
+}
+
+.text-interaction-container-neutral-hover {
+  color: var(--color-interaction-container-neutral-text-hover);
+}
+
+.icon-interaction-link-high {
+  color: var(--color-interaction-link-high-icon);
+}
+
+.icon-interaction-link-high-hover {
+  color: var(--color-interaction-link-high-icon-hover);
+}
+
+.text-interaction-link-high {
+  color: var(--color-interaction-link-high-text);
+}
+
+.text-interaction-link-high-hover {
+  color: var(--color-interaction-link-high-text-hover);
+}
+
+.icon-interaction-link-low {
+  color: var(--color-interaction-link-low-icon);
+}
+
+.icon-interaction-link-low-hover {
+  color: var(--color-interaction-link-low-icon-hover);
+}
+
+.text-interaction-link-low {
+  color: var(--color-interaction-link-low-text);
+}
+
+.text-interaction-link-low-hover {
+  color: var(--color-interaction-link-low-text-hover);
 }
 
 .bg-level-00 {
-  background-color: var(--color-base-level-00);
+  background-color: var(--color-level-00-background);
 }
 
-.bg-level-00-hover {
-  background-color: var(--color-base-level-00-hover);
+.bg-level-05 {
+  background-color: var(--color-level-05-background);
 }
 
 .bg-level-10 {
-  background-color: var(--color-base-level-10);
+  background-color: var(--color-level-10-background);
 }
 
-.bg-level-10-hover {
-  background-color: var(--color-base-level-10-hover);
+.bg-level-20 {
+  background-color: var(--color-level-20-background);
 }
 
-.bg-level-20 {
-  background-color: var(--color-base-level-20);
+.bg-level-30 {
+  background-color: var(--color-level-30-background);
 }
 
-.bg-level-20-hover {
-  background-color: var(--color-base-level-20-hover);
+.bg-level-40 {
+  background-color: var(--color-level-40-background);
 }
 
-.bg-level-30 {
-  background-color: var(--color-base-level-30);
+.bg-rainbow-1 {
+  background-color: var(--color-rainbow-1-background);
 }
 
-.bg-level-30-hover {
-  background-color: var(--color-base-level-30-hover);
+.border-rainbow-1 {
+  border-color: var(--color-rainbow-1-border);
 }
 
-.bg-level-40 {
-  background-color: var(--color-base-level-40);
+.icon-rainbow-1 {
+  color: var(--color-rainbow-1-icon);
+}
+
+.text-rainbow-1 {
+  color: var(--color-rainbow-1-text);
+}
+
+.bg-rainbow-10 {
+  background-color: var(--color-rainbow-10-background);
+}
+
+.border-rainbow-10 {
+  border-color: var(--color-rainbow-10-border);
+}
+
+.icon-rainbow-10 {
+  color: var(--color-rainbow-10-icon);
+}
+
+.text-rainbow-10 {
+  color: var(--color-rainbow-10-text);
+}
+
+.bg-rainbow-2 {
+  background-color: var(--color-rainbow-2-background);
+}
+
+.border-rainbow-2 {
+  border-color: var(--color-rainbow-2-border);
+}
+
+.icon-rainbow-2 {
+  color: var(--color-rainbow-2-icon);
+}
+
+.text-rainbow-2 {
+  color: var(--color-rainbow-2-text);
+}
+
+.bg-rainbow-3 {
+  background-color: var(--color-rainbow-3-background);
+}
+
+.border-rainbow-3 {
+  border-color: var(--color-rainbow-3-border);
+}
+
+.icon-rainbow-3 {
+  color: var(--color-rainbow-3-icon);
+}
+
+.text-rainbow-3 {
+  color: var(--color-rainbow-3-text);
+}
+
+.bg-rainbow-4 {
+  background-color: var(--color-rainbow-4-background);
+}
+
+.border-rainbow-4 {
+  border-color: var(--color-rainbow-4-border);
+}
+
+.icon-rainbow-4 {
+  color: var(--color-rainbow-4-icon);
+}
+
+.text-rainbow-4 {
+  color: var(--color-rainbow-4-text);
+}
+
+.bg-rainbow-5 {
+  background-color: var(--color-rainbow-5-background);
+}
+
+.border-rainbow-5 {
+  border-color: var(--color-rainbow-5-border);
+}
+
+.icon-rainbow-5 {
+  color: var(--color-rainbow-5-icon);
+}
+
+.text-rainbow-5 {
+  color: var(--color-rainbow-5-text);
+}
+
+.bg-rainbow-6 {
+  background-color: var(--color-rainbow-6-background);
+}
+
+.border-rainbow-6 {
+  border-color: var(--color-rainbow-6-border);
+}
+
+.icon-rainbow-6 {
+  color: var(--color-rainbow-6-icon);
+}
+
+.text-rainbow-6 {
+  color: var(--color-rainbow-6-text);
+}
+
+.bg-rainbow-7 {
+  background-color: var(--color-rainbow-7-background);
+}
+
+.border-rainbow-7 {
+  border-color: var(--color-rainbow-7-border);
+}
+
+.icon-rainbow-7 {
+  color: var(--color-rainbow-7-icon);
+}
+
+.text-rainbow-7 {
+  color: var(--color-rainbow-7-text);
+}
+
+.bg-rainbow-8 {
+  background-color: var(--color-rainbow-8-background);
+}
+
+.border-rainbow-8 {
+  border-color: var(--color-rainbow-8-border);
+}
+
+.icon-rainbow-8 {
+  color: var(--color-rainbow-8-icon);
 }
 
-.bg-level-40-hover {
-  background-color: var(--color-base-level-40-hover);
+.text-rainbow-8 {
+  color: var(--color-rainbow-8-text);
 }
 
-.border-high-emphasis {
-  border-color: var(--color-base-border-high-emphasis);
+.bg-rainbow-9 {
+  background-color: var(--color-rainbow-9-background);
 }
 
-.border-medium-emphasis {
-  border-color: var(--color-base-border-medium-emphasis);
+.border-rainbow-9 {
+  border-color: var(--color-rainbow-9-border);
 }
 
-.border-low-emphasis {
-  border-color: var(--color-base-border-low-emphasis);
+.icon-rainbow-9 {
+  color: var(--color-rainbow-9-icon);
+}
+
+.text-rainbow-9 {
+  color: var(--color-rainbow-9-text);
+}
+
+.visually-hidden {
+  position: absolute;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
 }
 
 .w-inherit {
@@ -6830,44 +7322,414 @@ h6 {
   width: unset;
 }
 
-.link {
-  color: var(--color-interaction-link-standalone-text);
-  font-weight: 500;
+.nv-button {
   text-decoration: none;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-style: normal;
+  font-weight: var(--font-weight-medium-emphasis);
+  font-family: 'TT Norms Pro', sans-serif;
+  transition: background-color 150ms ease-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: var(--button-md-padding-y) var(--button-md-padding-x);
+  gap: var(--button-md-gap);
+  border-radius: var(--button-md-border-radius);
+  line-height: var(--button-md-line-height);
+  font-size: var(--button-md-font-size);
+  background: var(--components-button-medium-background);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text);
+}
+
+.nv-button nv-icon > svg {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
 }
 
-.link:hover {
-  color: var(--color-interaction-link-standalone-text-hover);
+.nv-button:hover {
+  background: var(--components-button-medium-background-hover);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text-hover);
 }
 
-.hover\:link:hover {
-  color: var(--color-interaction-link-standalone-text);
-  font-weight: 500;
-  text-decoration: none;
+.nv-button:focus, .nv-button:focus-within {
+  outline: none;
 }
 
-.hover\:link:hover:hover {
-  color: var(--color-interaction-link-standalone-text-hover);
+.nv-button:focus-visible, .nv-button:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
-.focus\:link:focus {
-  color: var(--color-interaction-link-standalone-text);
-  font-weight: 500;
-  text-decoration: none;
+.nv-button:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.nv-button.danger {
+  background: var(--components-button-destructive-high-background);
+  border: 1px solid unset;
+  color: var(--components-button-destructive-high-text);
+}
+
+.nv-button.danger:hover {
+  background: var(--components-button-destructive-high-background-hover);
+  border: 1px solid unset;
+  color: var(--components-button-destructive-high-text-hover);
+}
+
+.nv-button.danger:focus, .nv-button.danger:focus-within {
+  outline: none;
+}
+
+.nv-button.danger:focus-visible, .nv-button.danger:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+
+.nv-button.size-xs {
+  padding: var(--button-xs-padding-y) var(--button-xs-padding-x);
+  gap: var(--button-xs-gap);
+  border-radius: var(--button-xs-border-radius);
+  line-height: var(--button-xs-line-height);
+  font-size: var(--button-xs-font-size);
+}
+
+.nv-button.size-xs nv-icon > svg {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+
+.nv-button.size-sm {
+  padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
+  gap: var(--button-sm-gap);
+  border-radius: var(--button-sm-border-radius);
+  line-height: var(--button-sm-line-height);
+  font-size: var(--button-sm-font-size);
+}
+
+.nv-button.size-sm nv-icon > svg {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
+}
+
+.nv-button.size-md {
+  padding: var(--button-md-padding-y) var(--button-md-padding-x);
+  gap: var(--button-md-gap);
+  border-radius: var(--button-md-border-radius);
+  line-height: var(--button-md-line-height);
+  font-size: var(--button-md-font-size);
+}
+
+.nv-button.size-md nv-icon > svg {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
+}
+
+.nv-button.size-lg {
+  padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
+  gap: var(--button-lg-gap);
+  border-radius: var(--button-lg-border-radius);
+  line-height: var(--button-lg-line-height);
+  font-size: var(--button-lg-font-size);
+}
+
+.nv-button.size-lg nv-icon > svg {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  stroke-width: 1.8px;
+}
+
+.nv-button.emphasis-high {
+  background: var(--components-button-high-background);
+  border: 1px solid var(--components-button-high-border);
+  color: var(--components-button-high-text);
+}
+
+.nv-button.emphasis-high:hover {
+  background: var(--components-button-high-background-hover);
+  border: 1px solid var(--components-button-high-border);
+  color: var(--components-button-high-text-hover);
+}
+
+.nv-button.emphasis-high:focus, .nv-button.emphasis-high:focus-within {
+  outline: none;
+}
+
+.nv-button.emphasis-high:focus-visible, .nv-button.emphasis-high:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+
+.nv-button.emphasis-high:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.nv-button.emphasis-high.danger {
+  background: var(--components-button-destructive-high-background);
+  border: 1px solid unset;
+  color: var(--components-button-destructive-high-text);
+}
+
+.nv-button.emphasis-high.danger:hover {
+  background: var(--components-button-destructive-high-background-hover);
+  border: 1px solid unset;
+  color: var(--components-button-destructive-high-text-hover);
+}
+
+.nv-button.emphasis-high.danger:focus, .nv-button.emphasis-high.danger:focus-within {
+  outline: none;
+}
+
+.nv-button.emphasis-high.danger:focus-visible, .nv-button.emphasis-high.danger:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
-.focus\:link:focus:hover {
-  color: var(--color-interaction-link-standalone-text-hover);
+.nv-button.emphasis-medium {
+  background: var(--components-button-medium-background);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text);
 }
 
-.active\:link:active {
-  color: var(--color-interaction-link-standalone-text);
+.nv-button.emphasis-medium:hover {
+  background: var(--components-button-medium-background-hover);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text-hover);
+}
+
+.nv-button.emphasis-medium:focus, .nv-button.emphasis-medium:focus-within {
+  outline: none;
+}
+
+.nv-button.emphasis-medium:focus-visible, .nv-button.emphasis-medium:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+
+.nv-button.emphasis-medium:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.nv-button.emphasis-medium.danger {
+  background: var(--components-button-destructive-medium-background);
+  border: 1px solid var(--components-button-destructive-medium-border);
+  color: var(--components-button-destructive-medium-text);
+}
+
+.nv-button.emphasis-medium.danger:hover {
+  background: var(--components-button-destructive-medium-background-hover);
+  border: 1px solid var(--components-button-destructive-medium-border);
+  color: var(--components-button-destructive-medium-text-hover);
+}
+
+.nv-button.emphasis-medium.danger:focus, .nv-button.emphasis-medium.danger:focus-within {
+  outline: none;
+}
+
+.nv-button.emphasis-medium.danger:focus-visible, .nv-button.emphasis-medium.danger:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+
+.nv-button.emphasis-low {
+  background: var(--components-button-low-background);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text);
+}
+
+.nv-button.emphasis-low:hover {
+  background: var(--components-button-low-background-hover);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text-hover);
+}
+
+.nv-button.emphasis-low:focus, .nv-button.emphasis-low:focus-within {
+  outline: none;
+}
+
+.nv-button.emphasis-low:focus-visible, .nv-button.emphasis-low:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+
+.nv-button.emphasis-low:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.nv-button.emphasis-low.danger {
+  background: var(--components-button-destructive-low-background);
+  border: 1px solid var(--components-button-destructive-low-border);
+  color: var(--components-button-destructive-low-text);
+}
+
+.nv-button.emphasis-low.danger:hover {
+  background: var(--components-button-destructive-low-background-hover);
+  border: 1px solid var(--components-button-destructive-low-border);
+  color: var(--components-button-destructive-low-text-hover);
+}
+
+.nv-button.emphasis-low.danger:focus, .nv-button.emphasis-low.danger:focus-within {
+  outline: none;
+}
+
+.nv-button.emphasis-low.danger:focus-visible, .nv-button.emphasis-low.danger:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+
+.nv-button.emphasis-lower {
+  background: var(--components-button-lower-background);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text);
+}
+
+.nv-button.emphasis-lower:hover {
+  background: var(--components-button-lower-background-hover);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text-hover);
+}
+
+.nv-button.emphasis-lower:focus, .nv-button.emphasis-lower:focus-within {
+  outline: none;
+}
+
+.nv-button.emphasis-lower:focus-visible, .nv-button.emphasis-lower:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+
+.nv-button.emphasis-lower:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.nv-button.emphasis-lower.danger {
+  background: var(--components-button-destructive-lower-background);
+  border: 1px solid var(--components-button-destructive-lower-border);
+  color: var(--components-button-destructive-lower-text);
+}
+
+.nv-button.emphasis-lower.danger:hover {
+  background: var(--components-button-destructive-lower-background-hover);
+  border: 1px solid var(--components-button-destructive-lower-border);
+  color: var(--components-button-destructive-lower-text-hover);
+}
+
+.nv-button.emphasis-lower.danger:focus, .nv-button.emphasis-lower.danger:focus-within {
+  outline: none;
+}
+
+.nv-button.emphasis-lower.danger:focus-visible, .nv-button.emphasis-lower.danger:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+
+.nv-button.fluid {
+  width: 100%;
+}
+
+.nv-link {
+  color: var(--color-interaction-link-high-text);
   font-weight: 500;
   text-decoration: none;
 }
 
-.active\:link:active:hover {
-  color: var(--color-interaction-link-standalone-text-hover);
+.nv-link:hover {
+  color: var(--color-interaction-link-high-text-hover);
+}
+
+.nv-tabs .nv-link {
+  border-color: transparent;
+}
+
+.nv-tabs .nv-link:hover,
+.nv-tabs .selected {
+  border-color: var(--color-interaction-container-branded-high-border);
+}
+
+.hover\:bg-interaction-container-branded-high-hover:hover {
+  background-color: var(--color-interaction-container-branded-high-background-hover);
+}
+
+.hover\:border-interaction-container-branded-high-hover:hover {
+  border-color: var(--color-interaction-container-branded-high-border-hover);
+}
+
+.hover\:icon-interaction-container-branded-high-hover:hover {
+  color: var(--color-interaction-container-branded-high-icon-hover);
+}
+
+.hover\:text-interaction-container-branded-high-hover:hover {
+  color: var(--color-interaction-container-branded-high-text-hover);
+}
+
+.hover\:bg-interaction-container-branded-low-hover:hover {
+  background-color: var(--color-interaction-container-branded-low-background-hover);
+}
+
+.hover\:border-interaction-container-branded-low-hover:hover {
+  border-color: var(--color-interaction-container-branded-low-border-hover);
+}
+
+.hover\:icon-interaction-container-branded-low-hover:hover {
+  color: var(--color-interaction-container-branded-low-icon-hover);
+}
+
+.hover\:text-interaction-container-branded-low-hover:hover {
+  color: var(--color-interaction-container-branded-low-text-hover);
+}
+
+.hover\:bg-interaction-container-neutral-hover:hover {
+  background-color: var(--color-interaction-container-neutral-background-hover);
+}
+
+.hover\:border-interaction-container-neutral-hover:hover {
+  border-color: var(--color-interaction-container-neutral-border-hover);
+}
+
+.hover\:icon-interaction-container-neutral-hover:hover {
+  color: var(--color-interaction-container-neutral-icon-hover);
+}
+
+.hover\:text-interaction-container-neutral-hover:hover {
+  color: var(--color-interaction-container-neutral-text-hover);
+}
+
+.hover\:icon-interaction-link-high-hover:hover {
+  color: var(--color-interaction-link-high-icon-hover);
+}
+
+.hover\:text-interaction-link-high-hover:hover {
+  color: var(--color-interaction-link-high-text-hover);
+}
+
+.hover\:icon-interaction-link-low-hover:hover {
+  color: var(--color-interaction-link-low-icon-hover);
+}
+
+.hover\:text-interaction-link-low-hover:hover {
+  color: var(--color-interaction-link-low-text-hover);
 }
 
 @media (min-width: 640px) {
@@ -26936,7 +27798,7 @@ h6 {
   }
 
   .dark\:bg-background {
-    background-color: var(--color-base-level-00);
+    background-color: var(--color-level-00-background);
   }
 
   .dark\:bg-black {
@@ -27272,7 +28134,7 @@ h6 {
   }
 
   .dark\:bg-text {
-    background-color: var(--color-base-content-medium-emphasis);
+    background-color: var(--color-content-medium-text);
   }
 
   .dark\:bg-transparent {
@@ -27550,7 +28412,7 @@ h6 {
   }
 
   .dark\:text-background {
-    color: var(--color-base-level-00);
+    color: var(--color-level-00-background);
   }
 
   .dark\:text-black {
@@ -27886,7 +28748,7 @@ h6 {
   }
 
   .dark\:text-text {
-    color: var(--color-base-content-medium-emphasis);
+    color: var(--color-content-medium-text);
   }
 
   .dark\:text-transparent {
@@ -27976,4 +28838,20 @@ h6 {
   .dark\:text-yellow-900 {
     color: var(--color-yellow-900);
   }
+
+  .dark\:text-high {
+    color: var(--color-content-high-text);
+  }
+
+  .dark\:text-low {
+    color: var(--color-content-low-text);
+  }
+
+  .dark\:text-lower {
+    color: var(--color-content-lower-text);
+  }
+
+  .dark\:text-medium {
+    color: var(--color-content-medium-text);
+  }
 }