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

package/dist/css/nova-utils.css

@@ -6740,26 +6740,6 @@ h6 {
   color: var(--color-yellow-900);
 }
 
-.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);
 }
@@ -6992,70 +6972,6 @@ h6 {
   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);
 }
@@ -7168,22 +7084,6 @@ h6 {
   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);
 }
@@ -7200,70 +7100,6 @@ h6 {
   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-level-00-background);
 }
@@ -7486,76 +7322,350 @@ h6 {
   width: unset;
 }
 
-.link {
-  color: var(--color-interaction-link-high-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-high-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-high-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-high-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-high-text);
-  font-weight: 500;
-  text-decoration: none;
+.nv-button:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
 }
 
-.focus\:link:focus:hover {
-  color: var(--color-interaction-link-high-text-hover);
+.nv-button.danger {
+  background: var(--components-button-destructive-high-background);
+  border: 1px solid unset;
+  color: var(--components-button-destructive-high-text);
 }
 
-.active\:link:active {
-  color: var(--color-interaction-link-high-text);
-  font-weight: 500;
-  text-decoration: none;
+.nv-button.danger:hover {
+  background: var(--components-button-destructive-high-background-hover);
+  border: 1px solid unset;
+  color: var(--components-button-destructive-high-text-hover);
 }
 
-.active\:link:active:hover {
-  color: var(--color-interaction-link-high-text-hover);
+.nv-button.danger:focus, .nv-button.danger:focus-within {
+  outline: none;
 }
 
-.hover\:bg-interaction-brand-high-hover:hover {
-  background-color: var(--color-interaction-brand-high-background-hover);
+.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);
 }
 
-.hover\:border-interaction-brand-high-hover:hover {
-  border-color: var(--color-interaction-brand-high-border-hover);
+.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);
 }
 
-.hover\:icon-interaction-brand-high-hover:hover {
-  color: var(--color-interaction-brand-high-icon-hover);
+.nv-button.size-xs nv-icon > svg {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
 }
 
-.hover\:text-interaction-brand-high-hover:hover {
-  color: var(--color-interaction-brand-high-text-hover);
+.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);
 }
 
-.hover\:bg-interaction-brand-low-hover:hover {
-  background-color: var(--color-interaction-brand-low-background-hover);
+.nv-button.size-sm nv-icon > svg {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
 }
 
-.hover\:border-interaction-brand-low-hover:hover {
-  border-color: var(--color-interaction-brand-low-border-hover);
+.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);
 }
 
-.hover\:icon-interaction-brand-low-hover:hover {
-  color: var(--color-interaction-brand-low-icon-hover);
+.nv-button.size-md nv-icon > svg {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
 }
 
-.hover\:text-interaction-brand-low-hover:hover {
-  color: var(--color-interaction-brand-low-text-hover);
+.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);
+}
+
+.nv-button.emphasis-medium {
+  background: var(--components-button-medium-background);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-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;
+}
+
+.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 {
@@ -7614,14 +7724,6 @@ h6 {
   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);
 }
@@ -7630,38 +7732,6 @@ h6 {
   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;