@nova-design-system/nova-base 3.0.0-beta.36 → 3.0.0-beta.37

package/dist/css/nova-utils.css

@@ -475,6 +475,10 @@ a:hover {
   color: var(--color-interaction-link-high-text-hover);
 }
 
+no-underline {
+  text-decoration: none;
+}
+
 h1 {
   font-size: var(--global-typography-h1-font-size);
   line-height: var(--global-typography-h1-line-height);
@@ -4636,10 +4640,6 @@ h6 {
   background-color: var(--color-crimson-900);
 }
 
-.bg-current {
-  background-color: currentColor;
-}
-
 .bg-gray-00 {
   background-color: var(--color-gray-00);
 }
@@ -4760,10 +4760,6 @@ h6 {
   background-color: var(--color-green-900);
 }
 
-.bg-inherit {
-  background-color: inherit;
-}
-
 .bg-lime-100 {
   background-color: var(--color-lime-100);
 }
@@ -4928,10 +4924,6 @@ h6 {
   background-color: var(--color-content-medium-text);
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .bg-turquoise-100 {
   background-color: var(--color-turquoise-100);
 }
@@ -6206,11 +6198,6 @@ h6 {
   line-height: var(--line-height-9xl);
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .text-lg {
   font-size: var(--font-size-lg);
   line-height: var(--line-height-lg);
@@ -6360,10 +6347,6 @@ h6 {
   color: var(--color-crimson-900);
 }
 
-.text-current {
-  color: currentColor;
-}
-
 .text-gray-00 {
   color: var(--color-gray-00);
 }
@@ -6484,10 +6467,6 @@ h6 {
   color: var(--color-green-900);
 }
 
-.text-inherit {
-  color: inherit;
-}
-
 .text-lime-100 {
   color: var(--color-lime-100);
 }
@@ -6652,10 +6631,6 @@ h6 {
   color: var(--color-content-medium-text);
 }
 
-.text-transparent {
-  color: transparent;
-}
-
 .text-turquoise-100 {
   color: var(--color-turquoise-100);
 }
@@ -7453,12 +7428,18 @@ h6 {
   color: var(--components-button-medium-text-hover);
 }
 
+.nv-button:active {
+  background: var(--components-button-medium-background-active);
+  border: 1px solid var(--components-button-medium-border-active);
+  color: var(--components-button-medium-text-active);
+}
+
 .nv-button:focus, .nv-button:focus-within {
   outline: none;
 }
 
 .nv-button:focus-visible, .nv-button:has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7468,15 +7449,21 @@ h6 {
   box-shadow: none;
 }
 
+.nv-button.active {
+  background: var(--components-button-medium-background-active);
+  border: 1px solid var(--components-button-medium-border-active);
+  color: var(--components-button-medium-text-active);
+}
+
 .nv-button.danger {
   background: var(--components-button-destructive-high-background);
-  border: 1px solid unset;
+  border: 1px solid transparent;
   color: var(--components-button-destructive-high-text);
 }
 
 .nv-button.danger:hover {
   background: var(--components-button-destructive-high-background-hover);
-  border: 1px solid unset;
+  border: 1px solid transparent;
   color: var(--components-button-destructive-high-text-hover);
 }
 
@@ -7485,7 +7472,7 @@ h6 {
 }
 
 .nv-button.danger:focus-visible, .nv-button.danger:has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7557,12 +7544,18 @@ h6 {
   color: var(--components-button-high-text-hover);
 }
 
+.nv-button.emphasis-high:active {
+  background: var(--components-button-high-background-active);
+  border: 1px solid var(--components-button-high-border-active);
+  color: var(--components-button-high-text-active);
+}
+
 .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: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7572,15 +7565,21 @@ h6 {
   box-shadow: none;
 }
 
+.nv-button.emphasis-high.active {
+  background: var(--components-button-high-background-active);
+  border: 1px solid var(--components-button-high-border-active);
+  color: var(--components-button-high-text-active);
+}
+
 .nv-button.emphasis-high.danger {
   background: var(--components-button-destructive-high-background);
-  border: 1px solid unset;
+  border: 1px solid transparent;
   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;
+  border: 1px solid transparent;
   color: var(--components-button-destructive-high-text-hover);
 }
 
@@ -7589,7 +7588,7 @@ h6 {
 }
 
 .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: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7605,12 +7604,18 @@ h6 {
   color: var(--components-button-medium-text-hover);
 }
 
+.nv-button.emphasis-medium:active {
+  background: var(--components-button-medium-background-active);
+  border: 1px solid var(--components-button-medium-border-active);
+  color: var(--components-button-medium-text-active);
+}
+
 .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: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7620,6 +7625,12 @@ h6 {
   box-shadow: none;
 }
 
+.nv-button.emphasis-medium.active {
+  background: var(--components-button-medium-background-active);
+  border: 1px solid var(--components-button-medium-border-active);
+  color: var(--components-button-medium-text-active);
+}
+
 .nv-button.emphasis-medium.danger {
   background: var(--components-button-destructive-medium-background);
   border: 1px solid var(--components-button-destructive-medium-border);
@@ -7637,7 +7648,7 @@ h6 {
 }
 
 .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: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7653,12 +7664,18 @@ h6 {
   color: var(--components-button-low-text-hover);
 }
 
+.nv-button.emphasis-low:active {
+  background: var(--components-button-low-background-active);
+  border: 1px solid var(--components-button-low-border-active);
+  color: var(--components-button-low-text-active);
+}
+
 .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: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7668,6 +7685,12 @@ h6 {
   box-shadow: none;
 }
 
+.nv-button.emphasis-low.active {
+  background: var(--components-button-low-background-active);
+  border: 1px solid var(--components-button-low-border-active);
+  color: var(--components-button-low-text-active);
+}
+
 .nv-button.emphasis-low.danger {
   background: var(--components-button-destructive-low-background);
   border: 1px solid var(--components-button-destructive-low-border);
@@ -7685,7 +7708,7 @@ h6 {
 }
 
 .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: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7701,12 +7724,18 @@ h6 {
   color: var(--components-button-lower-text-hover);
 }
 
+.nv-button.emphasis-lower:active {
+  background: var(--components-button-lower-background-active);
+  border: 1px solid var(--components-button-lower-border-active);
+  color: var(--components-button-lower-text-active);
+}
+
 .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: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7716,6 +7745,12 @@ h6 {
   box-shadow: none;
 }
 
+.nv-button.emphasis-lower.active {
+  background: var(--components-button-lower-background-active);
+  border: 1px solid var(--components-button-lower-border-active);
+  color: var(--components-button-lower-text-active);
+}
+
 .nv-button.emphasis-lower.danger {
   background: var(--components-button-destructive-lower-background);
   border: 1px solid var(--components-button-destructive-lower-border);
@@ -7733,7 +7768,7 @@ h6 {
 }
 
 .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: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 
@@ -7751,13 +7786,85 @@ h6 {
   color: var(--color-interaction-link-high-text-hover);
 }
 
+.nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link {
+  display: flex;
+  align-items: center;
+  color: var(--color-interaction-container-neutral-text);
+  background-color: var(--color-interaction-container-neutral-background);
+  text-decoration: none;
+  font-weight: 500;
+  padding: var(--spacing-2) var(--spacing-3);
+  -moz-column-gap: var(--spacing-2);
+       column-gap: var(--spacing-2);
+}
+
+.nv-tabs {
+  display: flex;
+  flex: 1 1 0%;
+  align-items: center;
+  border-bottom: 1px solid var(--color-content-low-border);
+  -moz-column-gap: var(--spacing-0-5);
+       column-gap: var(--spacing-0-5);
+}
+
 .nv-tabs .nv-link {
+  border-style: solid;
   border-color: transparent;
+  border-width: 0 0 2px 0;
 }
 
-.nv-tabs .nv-link:hover,
-.nv-tabs .selected {
-  border-color: var(--color-interaction-container-branded-high-border);
+.nv-tabs .nv-link:hover {
+  color: var(--color-interaction-container-branded-low-text-hover);
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.nv-tabs .nv-link.active {
+  color: var(--color-interaction-container-branded-low-text-active);
+  border-color: var(--color-interaction-container-branded-low-border-active);
+  background-color: transparent;
+}
+
+.nv-navbar .nv-link, .nv-sidenav .nv-link {
+  border: solid 0 transparent;
+  border-radius: var(--radius-rounded-md);
+}
+
+.nv-navbar .nv-link:hover, .nv-sidenav .nv-link:hover {
+  color: var(--color-interaction-container-neutral-text-hover);
+  border-color: var(--color-interaction-container-neutral-border-hover);
+  background-color: var(--color-interaction-container-neutral-background-hover);
+}
+
+.nv-navbar .nv-link.active, .nv-navbar .nv-link.router-link-active, .nv-sidenav .nv-link.active, .nv-sidenav .nv-link.router-link-active {
+  color: var(--color-interaction-container-neutral-text-active);
+  border-color: var(--color-interaction-container-neutral-text-active);
+  background-color: var(--color-interaction-container-neutral-background-active);
+}
+
+.nv-sidenav .collapsible .nv-link {
+  justify-content: space-between;
+}
+
+.nv-sidenav .collapsible .nv-link .nv-iconbutton {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.nv-link .nv-badge {
+  border-radius: var(--radius-rounded-full);
+  width: var(--spacing-5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs);
+  color: var(--color-feedback-neutral-high-icon);
+  background-color: var(--color-feedback-neutral-high-background);
+}
+
+.nv-link.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .hover\:bg-interaction-container-branded-high-hover:hover {
@@ -11794,11 +11901,6 @@ h6 {
     line-height: var(--line-height-9xl);
   }
 
-  .sm\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .sm\:text-lg {
     font-size: var(--font-size-lg);
     line-height: var(--line-height-lg);
@@ -15794,11 +15896,6 @@ h6 {
     line-height: var(--line-height-9xl);
   }
 
-  .md\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .md\:text-lg {
     font-size: var(--font-size-lg);
     line-height: var(--line-height-lg);
@@ -19794,11 +19891,6 @@ h6 {
     line-height: var(--line-height-9xl);
   }
 
-  .lg\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .lg\:text-lg {
     font-size: var(--font-size-lg);
     line-height: var(--line-height-lg);
@@ -23794,11 +23886,6 @@ h6 {
     line-height: var(--line-height-9xl);
   }
 
-  .xl\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .xl\:text-lg {
     font-size: var(--font-size-lg);
     line-height: var(--line-height-lg);
@@ -27794,11 +27881,6 @@ h6 {
     line-height: var(--line-height-9xl);
   }
 
-  .\32xl\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .\32xl\:text-lg {
     font-size: var(--font-size-lg);
     line-height: var(--line-height-lg);
@@ -27945,10 +28027,6 @@ h6 {
     background-color: var(--color-crimson-900);
   }
 
-  .dark\:bg-current {
-    background-color: currentColor;
-  }
-
   .dark\:bg-gray-00 {
     background-color: var(--color-gray-00);
   }
@@ -28069,10 +28147,6 @@ h6 {
     background-color: var(--color-green-900);
   }
 
-  .dark\:bg-inherit {
-    background-color: inherit;
-  }
-
   .dark\:bg-lime-100 {
     background-color: var(--color-lime-100);
   }
@@ -28237,10 +28311,6 @@ h6 {
     background-color: var(--color-content-medium-text);
   }
 
-  .dark\:bg-transparent {
-    background-color: transparent;
-  }
-
   .dark\:bg-turquoise-100 {
     background-color: var(--color-turquoise-100);
   }
@@ -28441,11 +28511,6 @@ h6 {
     line-height: var(--line-height-9xl);
   }
 
-  .dark\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .dark\:text-lg {
     font-size: var(--font-size-lg);
     line-height: var(--line-height-lg);
@@ -28559,10 +28624,6 @@ h6 {
     color: var(--color-crimson-900);
   }
 
-  .dark\:text-current {
-    color: currentColor;
-  }
-
   .dark\:text-gray-00 {
     color: var(--color-gray-00);
   }
@@ -28683,10 +28744,6 @@ h6 {
     color: var(--color-green-900);
   }
 
-  .dark\:text-inherit {
-    color: inherit;
-  }
-
   .dark\:text-lime-100 {
     color: var(--color-lime-100);
   }
@@ -28851,10 +28908,6 @@ h6 {
     color: var(--color-content-medium-text);
   }
 
-  .dark\:text-transparent {
-    color: transparent;
-  }
-
   .dark\:text-turquoise-100 {
     color: var(--color-turquoise-100);
   }