@nova-design-system/nova-base 3.0.0-beta.29 → 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 {
@@ -6760,32 +6760,68 @@ h6 {
   border-color: var(--color-base-border-medium-emphasis);
 }
 
-.text-base-high-emphasis {
-  color: var(--color-base-content-high-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);
 }
 
-.text-base-inverted-high-emphasis {
-  color: var(--color-base-content-inverted-high-emphasis);
+.icon-low {
+  color: var(--color-content-low-icon);
 }
 
-.text-base-inverted-low-emphasis {
-  color: var(--color-base-content-inverted-low-emphasis);
+.text-low {
+  color: var(--color-content-low-text);
 }
 
-.text-base-inverted-medium-emphasis {
-  color: var(--color-base-content-inverted-medium-emphasis);
+.text-lower {
+  color: var(--color-content-lower-text);
 }
 
-.text-base-low-emphasis {
-  color: var(--color-base-content-low-emphasis);
+.border-medium {
+  border-color: var(--color-content-medium-border);
 }
 
-.text-base-lower-emphasis {
-  color: var(--color-base-content-lower-emphasis);
+.icon-medium {
+  color: var(--color-content-medium-icon);
 }
 
-.text-base-medium-emphasis {
-  color: var(--color-base-content-medium-emphasis);
+.text-medium {
+  color: var(--color-content-medium-text);
 }
 
 .bg-dont-use {
@@ -6796,10 +6832,6 @@ h6 {
   border-color: var(--color-dont-use-border);
 }
 
-.text-dont-use {
-  color: var(--color-dont-use-content);
-}
-
 .bg-feedback-error-high {
   background-color: var(--color-feedback-error-high-background);
 }
@@ -6808,8 +6840,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-error-high-text);
 }
 
 .bg-feedback-error-low {
@@ -6820,8 +6856,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-error-low-text);
 }
 
 .bg-feedback-information-high {
@@ -6832,8 +6872,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-information-high-text);
 }
 
 .bg-feedback-information-low {
@@ -6844,8 +6888,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-information-low-text);
 }
 
 .bg-feedback-neutral-high {
@@ -6856,8 +6904,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-neutral-high-text);
 }
 
 .bg-feedback-neutral-low {
@@ -6868,8 +6920,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-neutral-low-text);
 }
 
 .bg-feedback-success-high {
@@ -6880,8 +6936,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-success-high-text);
 }
 
 .bg-feedback-success-low {
@@ -6892,8 +6952,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-success-low-text);
 }
 
 .bg-feedback-warning-high {
@@ -6904,8 +6968,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-warning-high-text);
 }
 
 .bg-feedback-warning-low {
@@ -6916,8 +6984,12 @@ h6 {
   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-content);
+  color: var(--color-feedback-warning-low-text);
 }
 
 .bg-interaction-brand-high {
@@ -6936,6 +7008,14 @@ h6 {
   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);
 }
@@ -6960,6 +7040,14 @@ h6 {
   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);
 }
@@ -6968,6 +7056,126 @@ h6 {
   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);
 }
@@ -6976,6 +7184,30 @@ h6 {
   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);
 }
@@ -6984,6 +7216,14 @@ h6 {
   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);
 }
@@ -7008,6 +7248,14 @@ h6 {
   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);
 }
@@ -7016,6 +7264,30 @@ h6 {
   color: var(--color-interaction-neutral-text-hover);
 }
 
+.bg-level-00 {
+  background-color: var(--color-level-00-background);
+}
+
+.bg-level-05 {
+  background-color: var(--color-level-05-background);
+}
+
+.bg-level-10 {
+  background-color: var(--color-level-10-background);
+}
+
+.bg-level-20 {
+  background-color: var(--color-level-20-background);
+}
+
+.bg-level-30 {
+  background-color: var(--color-level-30-background);
+}
+
+.bg-level-40 {
+  background-color: var(--color-level-40-background);
+}
+
 .bg-rainbow-1 {
   background-color: var(--color-rainbow-1-background);
 }
@@ -7024,8 +7296,12 @@ h6 {
   border-color: var(--color-rainbow-1-border);
 }
 
+.icon-rainbow-1 {
+  color: var(--color-rainbow-1-icon);
+}
+
 .text-rainbow-1 {
-  color: var(--color-rainbow-1-content);
+  color: var(--color-rainbow-1-text);
 }
 
 .bg-rainbow-10 {
@@ -7036,8 +7312,12 @@ h6 {
   border-color: var(--color-rainbow-10-border);
 }
 
+.icon-rainbow-10 {
+  color: var(--color-rainbow-10-icon);
+}
+
 .text-rainbow-10 {
-  color: var(--color-rainbow-10-content);
+  color: var(--color-rainbow-10-text);
 }
 
 .bg-rainbow-2 {
@@ -7048,8 +7328,12 @@ h6 {
   border-color: var(--color-rainbow-2-border);
 }
 
+.icon-rainbow-2 {
+  color: var(--color-rainbow-2-icon);
+}
+
 .text-rainbow-2 {
-  color: var(--color-rainbow-2-content);
+  color: var(--color-rainbow-2-text);
 }
 
 .bg-rainbow-3 {
@@ -7060,8 +7344,12 @@ h6 {
   border-color: var(--color-rainbow-3-border);
 }
 
+.icon-rainbow-3 {
+  color: var(--color-rainbow-3-icon);
+}
+
 .text-rainbow-3 {
-  color: var(--color-rainbow-3-content);
+  color: var(--color-rainbow-3-text);
 }
 
 .bg-rainbow-4 {
@@ -7072,8 +7360,12 @@ h6 {
   border-color: var(--color-rainbow-4-border);
 }
 
+.icon-rainbow-4 {
+  color: var(--color-rainbow-4-icon);
+}
+
 .text-rainbow-4 {
-  color: var(--color-rainbow-4-content);
+  color: var(--color-rainbow-4-text);
 }
 
 .bg-rainbow-5 {
@@ -7084,8 +7376,12 @@ h6 {
   border-color: var(--color-rainbow-5-border);
 }
 
+.icon-rainbow-5 {
+  color: var(--color-rainbow-5-icon);
+}
+
 .text-rainbow-5 {
-  color: var(--color-rainbow-5-content);
+  color: var(--color-rainbow-5-text);
 }
 
 .bg-rainbow-6 {
@@ -7096,8 +7392,12 @@ h6 {
   border-color: var(--color-rainbow-6-border);
 }
 
+.icon-rainbow-6 {
+  color: var(--color-rainbow-6-icon);
+}
+
 .text-rainbow-6 {
-  color: var(--color-rainbow-6-content);
+  color: var(--color-rainbow-6-text);
 }
 
 .bg-rainbow-7 {
@@ -7108,8 +7408,12 @@ h6 {
   border-color: var(--color-rainbow-7-border);
 }
 
+.icon-rainbow-7 {
+  color: var(--color-rainbow-7-icon);
+}
+
 .text-rainbow-7 {
-  color: var(--color-rainbow-7-content);
+  color: var(--color-rainbow-7-text);
 }
 
 .bg-rainbow-8 {
@@ -7120,8 +7424,12 @@ h6 {
   border-color: var(--color-rainbow-8-border);
 }
 
+.icon-rainbow-8 {
+  color: var(--color-rainbow-8-icon);
+}
+
 .text-rainbow-8 {
-  color: var(--color-rainbow-8-content);
+  color: var(--color-rainbow-8-text);
 }
 
 .bg-rainbow-9 {
@@ -7132,8 +7440,12 @@ h6 {
   border-color: var(--color-rainbow-9-border);
 }
 
+.icon-rainbow-9 {
+  color: var(--color-rainbow-9-icon);
+}
+
 .text-rainbow-9 {
-  color: var(--color-rainbow-9-content);
+  color: var(--color-rainbow-9-text);
 }
 
 .visually-hidden {
@@ -7148,58 +7460,6 @@ h6 {
   clip: rect(0, 0, 0, 0);
 }
 
-.bg-level-00 {
-  background-color: var(--color-base-level-00);
-}
-
-.bg-level-00-hover {
-  background-color: var(--color-base-level-00-hover);
-}
-
-.bg-level-10 {
-  background-color: var(--color-base-level-10);
-}
-
-.bg-level-10-hover {
-  background-color: var(--color-base-level-10-hover);
-}
-
-.bg-level-20 {
-  background-color: var(--color-base-level-20);
-}
-
-.bg-level-20-hover {
-  background-color: var(--color-base-level-20-hover);
-}
-
-.bg-level-30 {
-  background-color: var(--color-base-level-30);
-}
-
-.bg-level-30-hover {
-  background-color: var(--color-base-level-30-hover);
-}
-
-.bg-level-40 {
-  background-color: var(--color-base-level-40);
-}
-
-.bg-level-40-hover {
-  background-color: var(--color-base-level-40-hover);
-}
-
-.border-high-emphasis {
-  border-color: var(--color-base-border-high-emphasis);
-}
-
-.border-medium-emphasis {
-  border-color: var(--color-base-border-medium-emphasis);
-}
-
-.border-low-emphasis {
-  border-color: var(--color-base-border-low-emphasis);
-}
-
 .w-inherit {
   width: inherit;
 }
@@ -7227,43 +7487,43 @@ 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-standalone-text-hover);
+  color: var(--color-interaction-link-high-text-hover);
 }
 
 .hover\:bg-interaction-brand-high-hover:hover {
@@ -7274,6 +7534,10 @@ h6 {
   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);
 }
@@ -7286,52 +7550,116 @@ h6 {
   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\:text-interaction-link-standalone-hover:hover {
-  color: var(--color-interaction-link-standalone-text-hover);
+.hover\:icon-interaction-link-low-hover:hover {
+  color: var(--color-interaction-link-low-icon-hover);
 }
 
-.hover\:text-interaction-link-table-hover:hover {
-  color: var(--color-interaction-link-table-text-hover);
+.hover\:text-interaction-link-low-hover:hover {
+  color: var(--color-interaction-link-low-text-hover);
 }
 
-.hover\:bg-interaction-neutral-hover:hover {
-  background-color: var(--color-interaction-neutral-background-hover);
+.hover\:icon-interaction-link-standalone-hover:hover {
+  color: var(--color-interaction-link-standalone-icon-hover);
 }
 
-.hover\:border-interaction-neutral-hover:hover {
-  border-color: var(--color-interaction-neutral-border-hover);
+.hover\:text-interaction-link-standalone-hover:hover {
+  color: var(--color-interaction-link-standalone-text-hover);
 }
 
-.hover\:text-interaction-neutral-hover:hover {
-  color: var(--color-interaction-neutral-text-hover);
+.hover\:icon-interaction-link-table-hover:hover {
+  color: var(--color-interaction-link-table-icon-hover);
 }
 
-.hover\:bg-level-00-hover:hover {
-  background-color: var(--color-base-level-00-hover);
+.hover\:text-interaction-link-table-hover:hover {
+  color: var(--color-interaction-link-table-text-hover);
 }
 
-.hover\:bg-level-10-hover:hover {
-  background-color: var(--color-base-level-10-hover);
+.hover\:bg-interaction-neutral-hover:hover {
+  background-color: var(--color-interaction-neutral-background-hover);
 }
 
-.hover\:bg-level-20-hover:hover {
-  background-color: var(--color-base-level-20-hover);
+.hover\:border-interaction-neutral-hover:hover {
+  border-color: var(--color-interaction-neutral-border-hover);
 }
 
-.hover\:bg-level-30-hover:hover {
-  background-color: var(--color-base-level-30-hover);
+.hover\:icon-interaction-neutral-hover:hover {
+  color: var(--color-interaction-neutral-icon-hover);
 }
 
-.hover\:bg-level-40-hover:hover {
-  background-color: var(--color-base-level-40-hover);
+.hover\:text-interaction-neutral-hover:hover {
+  color: var(--color-interaction-neutral-text-hover);
 }
 
 @media (min-width: 640px) {
@@ -27400,7 +27728,7 @@ h6 {
   }
 
   .dark\:bg-background {
-    background-color: var(--color-base-level-00);
+    background-color: var(--color-level-00-background);
   }
 
   .dark\:bg-black {
@@ -27736,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 {
@@ -28014,7 +28342,7 @@ h6 {
   }
 
   .dark\:text-background {
-    color: var(--color-base-level-00);
+    color: var(--color-level-00-background);
   }
 
   .dark\:text-black {
@@ -28350,7 +28678,7 @@ h6 {
   }
 
   .dark\:text-text {
-    color: var(--color-base-content-medium-emphasis);
+    color: var(--color-content-medium-text);
   }
 
   .dark\:text-transparent {
@@ -28440,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);
+  }
 }