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

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,724 @@ 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-base-focus {
+  border-color: var(--color-base-border-focus);
+}
+
+.border-base-focus-high {
+  border-color: var(--color-base-border-focus-high);
+}
+
+.border-base-high-emphasis {
+  border-color: var(--color-base-border-high-emphasis);
+}
+
+.border-base-low-emphasis {
+  border-color: var(--color-base-border-low-emphasis);
+}
+
+.border-base-medium-emphasis {
+  border-color: var(--color-base-border-medium-emphasis);
+}
+
+.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-brand-high {
+  background-color: var(--color-interaction-brand-high-background);
+}
+
+.bg-interaction-brand-high-hover {
+  background-color: var(--color-interaction-brand-high-background-hover);
+}
+
+.border-interaction-brand-high {
+  border-color: var(--color-interaction-brand-high-border);
+}
+
+.border-interaction-brand-high-hover {
+  border-color: var(--color-interaction-brand-high-border-hover);
+}
+
+.icon-interaction-brand-high {
+  color: var(--color-interaction-brand-high-icon);
+}
+
+.icon-interaction-brand-high-hover {
+  color: var(--color-interaction-brand-high-icon-hover);
+}
+
+.text-interaction-brand-high {
+  color: var(--color-interaction-brand-high-text);
+}
+
+.text-interaction-brand-high-hover {
+  color: var(--color-interaction-brand-high-text-hover);
+}
+
+.bg-interaction-brand-low {
+  background-color: var(--color-interaction-brand-low-background);
+}
+
+.bg-interaction-brand-low-hover {
+  background-color: var(--color-interaction-brand-low-background-hover);
+}
+
+.border-interaction-brand-low {
+  border-color: var(--color-interaction-brand-low-border);
+}
+
+.border-interaction-brand-low-hover {
+  border-color: var(--color-interaction-brand-low-border-hover);
+}
+
+.icon-interaction-brand-low {
+  color: var(--color-interaction-brand-low-icon);
+}
+
+.icon-interaction-brand-low-hover {
+  color: var(--color-interaction-brand-low-icon-hover);
+}
+
+.text-interaction-brand-low {
+  color: var(--color-interaction-brand-low-text);
+}
+
+.text-interaction-brand-low-hover {
+  color: var(--color-interaction-brand-low-text-hover);
+}
+
+.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-inline {
+  color: var(--color-interaction-link-inline-icon);
+}
+
+.icon-interaction-link-inline-hover {
+  color: var(--color-interaction-link-inline-icon-hover);
+}
+
+.text-interaction-link-inline {
+  color: var(--color-interaction-link-inline-text);
+}
+
+.text-interaction-link-inline-hover {
+  color: var(--color-interaction-link-inline-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);
+}
+
+.icon-interaction-link-standalone {
+  color: var(--color-interaction-link-standalone-icon);
+}
+
+.icon-interaction-link-standalone-hover {
+  color: var(--color-interaction-link-standalone-icon-hover);
+}
+
+.text-interaction-link-standalone {
+  color: var(--color-interaction-link-standalone-text);
+}
+
+.text-interaction-link-standalone-hover {
+  color: var(--color-interaction-link-standalone-text-hover);
+}
+
+.icon-interaction-link-table {
+  color: var(--color-interaction-link-table-icon);
+}
+
+.icon-interaction-link-table-hover {
+  color: var(--color-interaction-link-table-icon-hover);
+}
+
+.text-interaction-link-table {
+  color: var(--color-interaction-link-table-text);
+}
+
+.text-interaction-link-table-hover {
+  color: var(--color-interaction-link-table-text-hover);
+}
+
+.bg-interaction-neutral {
+  background-color: var(--color-interaction-neutral-background);
+}
+
+.bg-interaction-neutral-hover {
+  background-color: var(--color-interaction-neutral-background-hover);
+}
+
+.border-interaction-neutral {
+  border-color: var(--color-interaction-neutral-border);
+}
+
+.border-interaction-neutral-hover {
+  border-color: var(--color-interaction-neutral-border-hover);
+}
+
+.icon-interaction-neutral {
+  color: var(--color-interaction-neutral-icon);
+}
+
+.icon-interaction-neutral-hover {
+  color: var(--color-interaction-neutral-icon-hover);
+}
+
+.text-interaction-neutral {
+  color: var(--color-interaction-neutral-text);
+}
+
+.text-interaction-neutral-hover {
+  color: var(--color-interaction-neutral-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);
 }
 
-.bg-level-40-hover {
-  background-color: var(--color-base-level-40-hover);
+.text-rainbow-1 {
+  color: var(--color-rainbow-1-text);
 }
 
-.border-high-emphasis {
-  border-color: var(--color-base-border-high-emphasis);
+.bg-rainbow-10 {
+  background-color: var(--color-rainbow-10-background);
 }
 
-.border-medium-emphasis {
-  border-color: var(--color-base-border-medium-emphasis);
+.border-rainbow-10 {
+  border-color: var(--color-rainbow-10-border);
 }
 
-.border-low-emphasis {
-  border-color: var(--color-base-border-low-emphasis);
+.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);
+}
+
+.text-rainbow-8 {
+  color: var(--color-rainbow-8-text);
+}
+
+.bg-rainbow-9 {
+  background-color: var(--color-rainbow-9-background);
+}
+
+.border-rainbow-9 {
+  border-color: var(--color-rainbow-9-border);
+}
+
+.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 {
@@ -6831,45 +7487,181 @@ h6 {
 }
 
 .link {
-  color: var(--color-interaction-link-standalone-text);
+  color: var(--color-interaction-link-high-text);
   font-weight: 500;
   text-decoration: none;
 }
 
 .link:hover {
-  color: var(--color-interaction-link-standalone-text-hover);
+  color: var(--color-interaction-link-high-text-hover);
 }
 
 .hover\:link:hover {
-  color: var(--color-interaction-link-standalone-text);
+  color: var(--color-interaction-link-high-text);
   font-weight: 500;
   text-decoration: none;
 }
 
 .hover\:link:hover:hover {
-  color: var(--color-interaction-link-standalone-text-hover);
+  color: var(--color-interaction-link-high-text-hover);
 }
 
 .focus\:link:focus {
-  color: var(--color-interaction-link-standalone-text);
+  color: var(--color-interaction-link-high-text);
   font-weight: 500;
   text-decoration: none;
 }
 
 .focus\:link:focus:hover {
-  color: var(--color-interaction-link-standalone-text-hover);
+  color: var(--color-interaction-link-high-text-hover);
 }
 
 .active\:link:active {
-  color: var(--color-interaction-link-standalone-text);
+  color: var(--color-interaction-link-high-text);
   font-weight: 500;
   text-decoration: none;
 }
 
 .active\:link:active:hover {
+  color: var(--color-interaction-link-high-text-hover);
+}
+
+.hover\:bg-interaction-brand-high-hover:hover {
+  background-color: var(--color-interaction-brand-high-background-hover);
+}
+
+.hover\:border-interaction-brand-high-hover:hover {
+  border-color: var(--color-interaction-brand-high-border-hover);
+}
+
+.hover\:icon-interaction-brand-high-hover:hover {
+  color: var(--color-interaction-brand-high-icon-hover);
+}
+
+.hover\:text-interaction-brand-high-hover:hover {
+  color: var(--color-interaction-brand-high-text-hover);
+}
+
+.hover\:bg-interaction-brand-low-hover:hover {
+  background-color: var(--color-interaction-brand-low-background-hover);
+}
+
+.hover\:border-interaction-brand-low-hover:hover {
+  border-color: var(--color-interaction-brand-low-border-hover);
+}
+
+.hover\:icon-interaction-brand-low-hover:hover {
+  color: var(--color-interaction-brand-low-icon-hover);
+}
+
+.hover\:text-interaction-brand-low-hover:hover {
+  color: var(--color-interaction-brand-low-text-hover);
+}
+
+.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-inline-hover:hover {
+  color: var(--color-interaction-link-inline-icon-hover);
+}
+
+.hover\:text-interaction-link-inline-hover:hover {
+  color: var(--color-interaction-link-inline-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);
+}
+
+.hover\:icon-interaction-link-standalone-hover:hover {
+  color: var(--color-interaction-link-standalone-icon-hover);
+}
+
+.hover\:text-interaction-link-standalone-hover:hover {
   color: var(--color-interaction-link-standalone-text-hover);
 }
 
+.hover\:icon-interaction-link-table-hover:hover {
+  color: var(--color-interaction-link-table-icon-hover);
+}
+
+.hover\:text-interaction-link-table-hover:hover {
+  color: var(--color-interaction-link-table-text-hover);
+}
+
+.hover\:bg-interaction-neutral-hover:hover {
+  background-color: var(--color-interaction-neutral-background-hover);
+}
+
+.hover\:border-interaction-neutral-hover:hover {
+  border-color: var(--color-interaction-neutral-border-hover);
+}
+
+.hover\:icon-interaction-neutral-hover:hover {
+  color: var(--color-interaction-neutral-icon-hover);
+}
+
+.hover\:text-interaction-neutral-hover:hover {
+  color: var(--color-interaction-neutral-text-hover);
+}
+
 @media (min-width: 640px) {
   .sm\:static {
     position: static;
@@ -26936,7 +27728,7 @@ h6 {
   }
 
   .dark\:bg-background {
-    background-color: var(--color-base-level-00);
+    background-color: var(--color-level-00-background);
   }
 
   .dark\:bg-black {
@@ -27272,7 +28064,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 +28342,7 @@ h6 {
   }
 
   .dark\:text-background {
-    color: var(--color-base-level-00);
+    color: var(--color-level-00-background);
   }
 
   .dark\:text-black {
@@ -27886,7 +28678,7 @@ h6 {
   }
 
   .dark\:text-text {
-    color: var(--color-base-content-medium-emphasis);
+    color: var(--color-content-medium-text);
   }
 
   .dark\:text-transparent {
@@ -27976,4 +28768,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);
+  }
 }