@nova-design-system/nova-base 3.22.0 → 3.23.0

package/assets/nova-fonts.css

@@ -1,3 +1,12 @@
+@import 'https://fonts.googleapis.com/css2?family=Outfit:wght@400&display=swap';
+
+:root {
+  --font-family-base: 'TT Norms Pro', montserrat, sans-serif;
+  --nv-sidebarlogo-font-family: 'Outfit', var(--font-family-base);
+  --nv-sidebarlogo-font-weight: 400;
+  --nv-sidebarlogo-font-size: 2rem;
+}
+
 body {
-  font-family: 'TT Norms Pro', Arial, sans-serif;
+  font-family: var(--font-family-base);
 }

package/dist/cjs/generated/nova-tailwind-components.js

@@ -131,7 +131,6 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'boxShadow': '0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)'
     },
     '.nv-fieldtext > .input-wrapper .input-container:has(input:read-only)': {
-        'opacity': '0.5',
         'backgroundColor': 'var(--components-form-field-background-readonly)',
         'borderColor': 'var(--nv-field-border-readonly)'
     },

package/dist/css/nova-utils.css

@@ -7611,13 +7611,11 @@ h6 {
 }
 
 .nv-fieldtext > .input-wrapper .input-container:has(input:-moz-read-only) {
-  opacity: 0.5;
   background-color: var(--components-form-field-background-readonly);
   border-color: var(--nv-field-border-readonly);
 }
 
 .nv-fieldtext > .input-wrapper .input-container:has(input:read-only) {
-  opacity: 0.5;
   background-color: var(--components-form-field-background-readonly);
   border-color: var(--nv-field-border-readonly);
 }

package/dist/css/ocean.css

@@ -66,7 +66,7 @@
   --color-transparent: rgba(255, 255, 255, 0);
   --color-white: #ffffff;
   --color-black: #000000;
-  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
+  --color-interaction-container-neutral-background: rgba(0, 0, 0, 0);
   --components-toggle-shape-hover: var(--color-gray-ocean-300);
   --components-toggle-shape-default: var(--color-gray-ocean-400);
   --components-toggle-background-disabled-checked: var(--color-gray-ocean-600);
@@ -77,6 +77,8 @@
   --components-toggle-border-default: var(--color-gray-ocean-400);
   --components-tooltip-border: var(--color-gray-ocean-50);
   --components-tooltip-background: var(--color-gray-ocean-50);
+  --components-splitter-old-border: var(--color-transparent);
+  --components-splitter-old-background: var(--color-interaction-container-neutral-background);
   --components-popover-background: var(--color-gray-ocean-900);
   --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
   --components-field-time-background-default: var(--color-interaction-container-neutral-background);
@@ -341,9 +343,20 @@
   --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
   --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
   --components-tooltip-text: var(--color-content-inverted-high-text);
+  --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
+  --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
+  --components-splitter-handle-background: var(--color-content-low-border);
+  --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
+  --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
+  --components-splitter-line-background: var(--color-level-10-background);
+  --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
+  --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
   --components-slider-handler-border-focus: var(--components-form-field-background-checked);
   --components-slider-handler-background-focus: var(--components-form-field-background-checked);
   --components-slider-track-background: var(--color-content-low-border);
+  --components-sidebar-border: var(--color-content-low-border);
+  --components-sidebar-divider: var(--color-content-low-border);
+  --components-sidebar-background: var(--color-level-00-background);
   --components-popover-supporting-text: var(--color-content-low-text);
   --components-popover-text: var(--color-content-inverted-medium-text);
   --components-popover-border: var(--color-content-low-border);
@@ -370,10 +383,6 @@
   --components-menu-contextual-border: var(--color-content-low-border);
   --components-menu-contextual-background: var(--color-level-00-background);
   --components-calendar-background: var(--color-level-00-background);
-  --components-calendar-weeks-text-hover: var(--color-content-high-text);
-  --components-calendar-weeks-text: var(--color-content-high-text);
-  --components-calendar-weeks-background-hover: var(--color-level-15-background);
-  --components-calendar-weeks-background: var(--color-level-10-background);
   --components-calendar-cell-text-today: var(--color-content-high-text);
   --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
   --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -384,6 +393,10 @@
   --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
   --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
   --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
+  --components-calendar-weeks-text-hover: var(--color-content-high-text);
+  --components-calendar-weeks-text: var(--color-content-high-text);
+  --components-calendar-weeks-background-hover: var(--color-level-15-background);
+  --components-calendar-weeks-background: var(--color-level-10-background);
   --components-calendar-header-text: var(--color-content-high-text);
   --components-calendar-border: var(--color-content-low-border);
   --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -567,6 +580,8 @@
   --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
   --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
+  --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
+  --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
   --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
   --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -711,6 +726,8 @@
   --components-toggle-border-default: var(--color-gray-spark-300);
   --components-tooltip-border: var(--color-gray-ocean-900);
   --components-tooltip-background: var(--color-gray-ocean-900);
+  --components-splitter-old-border: var(--color-transparent);
+  --components-splitter-old-background: var(--color-interaction-container-neutral-background);
   --components-popover-background: var(--color-gray-ocean-00);
   --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
   --components-field-time-background-default: var(--color-interaction-container-neutral-background);
@@ -975,9 +992,20 @@
   --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
   --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
   --components-tooltip-text: var(--color-content-inverted-high-text);
+  --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
+  --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
+  --components-splitter-handle-background: var(--color-content-low-border);
+  --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
+  --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
+  --components-splitter-line-background: var(--color-level-10-background);
+  --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
+  --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
   --components-slider-handler-border-focus: var(--components-form-field-background-checked);
   --components-slider-handler-background-focus: var(--components-form-field-background-checked);
   --components-slider-track-background: var(--color-content-low-border);
+  --components-sidebar-border: var(--color-content-low-border);
+  --components-sidebar-divider: var(--color-content-low-border);
+  --components-sidebar-background: var(--color-level-00-background);
   --components-popover-supporting-text: var(--color-content-low-text);
   --components-popover-text: var(--color-content-medium-text);
   --components-popover-border: var(--color-content-low-border);
@@ -1004,10 +1032,6 @@
   --components-menu-contextual-border: var(--color-content-low-border);
   --components-menu-contextual-background: var(--color-level-00-background);
   --components-calendar-background: var(--color-level-00-background);
-  --components-calendar-weeks-text-hover: var(--color-content-high-text);
-  --components-calendar-weeks-text: var(--color-content-high-text);
-  --components-calendar-weeks-background-hover: var(--color-level-15-background);
-  --components-calendar-weeks-background: var(--color-level-10-background);
   --components-calendar-cell-text-today: var(--color-content-high-text);
   --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
   --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -1018,6 +1042,10 @@
   --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
   --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
   --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
+  --components-calendar-weeks-text-hover: var(--color-content-high-text);
+  --components-calendar-weeks-text: var(--color-content-high-text);
+  --components-calendar-weeks-background-hover: var(--color-level-15-background);
+  --components-calendar-weeks-background: var(--color-level-10-background);
   --components-calendar-header-text: var(--color-content-high-text);
   --components-calendar-border: var(--color-content-low-border);
   --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1201,6 +1229,8 @@
   --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
   --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
+  --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
+  --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
   --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
   --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1531,7 +1561,6 @@
  */
 
 :root {
-  --slider-tick-radius: 1.0000px;
   --global-typography-legend-font-style: uppercase;
   --global-typography-label-font-style: normal;
   --global-typography-small-font-style: normal;
@@ -1559,10 +1588,18 @@
   --togglegroup-xs-button-radius: 1.0000px;
   --togglegroup-xs-button-padding-y: 1.0000px;
   --togglegroup-xs-padding: 3.0000px;
+  --splitter-old-stroke: 1.0000px;
+  --slider-tick-radius: 1.0000px;
+  --sidebar-reduced-width: 68.0000px;
+  --sidebar-notification-bullet-font-size: 9.0000px;
+  --sidebar-width: 312.0000px;
   --popover-shadow-2-x: 0.0000px;
   --popover-shadow-1-blur: 1.0000px;
   --popover-shadow-1-x: 0.0000px;
   --popover-font-weight: 500;
+  --navigation-primary-notification-bullet-font-size: 9.0000px;
+  --navigation-reduced-max-width: 100.0000px;
+  --navigation-width: 312.0000px;
   --menu-contextual-item-font-weight: 500;
   --menu-contextual-divider-padding-bottom: 3.0000px;
   --form-max-width: 480.0000px;
@@ -1575,6 +1612,18 @@
   --icon-stroke-sm: 1.4000px;
   --icon-stroke-xs: 1.2000px;
   --calendar-cell-dot-size: 3.0000px;
+  --drawer-size-full-width: 1372.0000px;
+  --drawer-size-lg-max-width: 1024.0000px;
+  --drawer-size-lg-width: 992.0000px;
+  --drawer-size-lg-min-width: 960.0000px;
+  --drawer-size-md-max-width: 960.0000px;
+  --drawer-size-md-width: 800.0000px;
+  --drawer-size-md-min-width: 640.0000px;
+  --drawer-size-sm-max-width: 480.0000px;
+  --drawer-size-sm-width: 400.0000px;
+  --drawer-size-sm-min-width: 320.0000px;
+  --drawer-radius-top-right: 0.0000px;
+  --drawer-radius-bottom-right: 0.0000px;
   --button-lg-ring-radius: 9.0000px;
   --button-md-ring-radius: 7.0000px;
   --button-sm-ring-radius: 5.0000px;
@@ -1590,6 +1639,17 @@
   --buttongroup-sm-button-padding-y: 4.0000px;
   --buttongroup-xs-button-radius: 1.0000px;
   --buttongroup-xs-padding: 2.0000px;
+  --avatar-xl-font-size: 28.0000px;
+  --avatar-lg-font-size: 22.0000px;
+  --avatar-md-font-size: 18.0000px;
+  --avatar-sm-font-size: 13.0000px;
+  --avatar-xs-font-size: 10.0000px;
+  --splitter-handle-radius: var(--radius-rounded-md);
+  --splitter-handle-wide-hover: var(--spacing-2);
+  --splitter-handle-wide: var(--spacing-1);
+  --splitter-handle-long: var(--spacing-6);
+  --splitter-gutter: var(--spacing-6);
+  --splitter-line-width: var(--spacing-1);
   --pagination-table-padding-y: var(--spacing-2);
   --pagination-table-padding-x: var(--spacing-3);
   --pagination-table-padding-left: var(--spacing-3);
@@ -1615,14 +1675,6 @@
   --notification-gap-x-title: var(--spacing-2);
   --notification-gap-x: var(--spacing-3);
   --notification-icon-size: var(--spacing-5);
-  --navigation-primary-item-bullet-size: var(--spacing-5);
-  --navigation-primary-item-bullet-font-size: var(--font-size-xs);
-  --navigation-primary-item-radius: var(--radius-rounded-md);
-  --navigation-primary-item-icon-size: var(--spacing-5);
-  --navigation-primary-item-font-size: var(--font-size-md);
-  --navigation-primary-item-padding-y: var(--spacing-2);
-  --navigation-primary-item-padding-x: var(--spacing-3);
-  --navigation-primary-item-gap-x: var(--spacing-2);
   --loader-size-xl: var(--spacing-8);
   --loader-size-lg: var(--spacing-7);
   --loader-size-md: var(--spacing-6);
@@ -1664,21 +1716,6 @@
   --badge-height: var(--spacing-6);
   --badge-gap-icon-only-x: var(--spacing-0-5);
   --badge-gap-x: var(--spacing-1);
-  --avatar-xl-size: var(--spacing-16);
-  --avatar-xl-icon-size: var(--spacing-11);
-  --avatar-xl-font-size: var(--spacing-8);
-  --avatar-lg-size: var(--spacing-12);
-  --avatar-lg-icon-size: var(--spacing-8);
-  --avatar-lg-font-size: var(--spacing-6);
-  --avatar-md-size: var(--spacing-10);
-  --avatar-md-icon-size: var(--spacing-7);
-  --avatar-md-font-size: var(--spacing-5);
-  --avatar-sm-size: var(--spacing-8);
-  --avatar-sm-icon-size: var(--spacing-5);
-  --avatar-sm-font-size: var(--spacing-4);
-  --avatar-xs-size: var(--spacing-6);
-  --avatar-xs-icon-size: var(--spacing-4);
-  --avatar-xs-font-size: var(--spacing-3);
   --alert-message-line-height: var(--line-height-sm);
   --alert-message-font-weight: var(--font-weight-low-emphasis);
   --alert-message-font-size: var(--font-size-sm);
@@ -1693,15 +1730,6 @@
   --alert-icon-position-x: var(--spacing-4);
   --alert-gap-x: var(--spacing-3);
   --alert-icon-size: var(--spacing-5);
-  --slider-track-radius: var(--radius-rounded-sm);
-  --slider-track-padding-x: var(--spacing-3);
-  --slider-track-height: var(--spacing-1);
-  --slider-handler-stroke: var(--spacing-0-5);
-  --slider-handler-size-inner: var(--spacing-4);
-  --slider-handler-size-max: var(--spacing-6);
-  --slider-handler-size-min: var(--spacing-5);
-  --slider-tick-width: var(--spacing-0-5);
-  --slider-tick-height: var(--spacing-1);
   --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
   --global-typography-legend-line-height: var(--line-height-xs);
   --global-typography-legend-font-size: var(--font-size-xs);
@@ -1749,6 +1777,47 @@
   --togglegroup-xs-height: var(--spacing-6);
   --togglegroup-xs-gap: var(--spacing-0-5);
   --togglegroup-xs-radius: var(--radius-rounded-sm);
+  --splitter-old-handler-radius: var(--radius-rounded-md);
+  --splitter-old-handler-wide: var(--spacing-3);
+  --splitter-old-handler-long: var(--spacing-6);
+  --slider-track-radius: var(--radius-rounded-sm);
+  --slider-track-padding-x: var(--spacing-3);
+  --slider-track-height: var(--spacing-1);
+  --slider-handler-size-inner: var(--spacing-4);
+  --slider-handler-size-max: var(--spacing-6);
+  --slider-handler-size-min: var(--spacing-5);
+  --slider-handler-stroke: var(--spacing-0-5);
+  --slider-tick-width: var(--spacing-0-5);
+  --slider-tick-height: var(--spacing-1);
+  --sidebar-divider-size: var(--spacing-px);
+  --sidebar-sub-item-padding-left: var(--spacing-7);
+  --sidebar-item-radius: var(--radius-rounded-md);
+  --sidebar-item-padding-y-collapsed: var(--spacing-2-5);
+  --sidebar-item-padding-y: var(--spacing-2);
+  --sidebar-item-padding-x-collapsed: var(--spacing-2-5);
+  --sidebar-item-padding-x: var(--spacing-3);
+  --sidebar-item-icon-size: var(--spacing-5);
+  --sidebar-item-gap-x: var(--spacing-2);
+  --sidebar-item-font-size: var(--font-size-md);
+  --sidebar-title-padding-y: var(--spacing-1);
+  --sidebar-title-padding-x: var(--spacing-3);
+  --sidebar-title-font-size: var(--font-size-sm);
+  --sidebar-collapsible-button-position-right: var(--spacing-4);
+  --sidebar-collapsible-button-position-top: var(--spacing-8);
+  --sidebar-collapsible-button-padding: var(--spacing-2);
+  --sidebar-collapsible-button-icon-size: var(--spacing-4);
+  --sidebar-section-gap-y-collapsed: var(--spacing-1);
+  --sidebar-section-gap-y: var(--spacing-0-5);
+  --sidebar-group-gap-y: var(--spacing-1);
+  --sidebar-footer-gap-y: var(--spacing-5);
+  --sidebar-width-collapsed: var(--spacing-20);
+  --sidebar-padding-y: var(--spacing-6);
+  --sidebar-padding-x-collapsed: var(--spacing-5);
+  --sidebar-padding-x: var(--spacing-6);
+  --sidebar-gap-y: var(--spacing-3);
+  --sidebar-notification-bullet-size-reduced: var(--spacing-1-5);
+  --sidebar-notification-bullet-size: var(--spacing-4);
+  --sidebar-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
   --popover-radius: var(--radius-rounded-md);
   --popover-padding-y: var(--spacing-2);
   --popover-padding-x: var(--spacing-2);
@@ -1761,6 +1830,21 @@
   --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
   --popover-shadow-1-spread: var(--shadow-spread-lg-1);
   --popover-shadow-1-y: var(--shadow-y-axis-none);
+  --navigation-gap-y: var(--spacing-3);
+  --navigation-primary-separator-size: var(--spacing-px);
+  --navigation-primary-sub-item-padding-left-x: var(--spacing-7);
+  --navigation-primary-item-radius: var(--radius-rounded-md);
+  --navigation-primary-item-icon-size: var(--spacing-5);
+  --navigation-primary-item-font-size: var(--font-size-md);
+  --navigation-primary-item-padding-y: var(--spacing-2);
+  --navigation-primary-item-padding-x: var(--spacing-3);
+  --navigation-primary-item-gap-x: var(--spacing-2);
+  --navigation-primary-title-font-size: var(--font-size-sm);
+  --navigation-primary-title-padding-y: var(--spacing-1);
+  --navigation-primary-title-padding-x: var(--spacing-3);
+  --navigation-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
+  --navigation-primary-notification-bullet-size-reduced: var(--spacing-1-5);
+  --navigation-primary-notification-bullet-size: var(--spacing-4);
   --menu-contextual-radius: var(--radius-rounded-md);
   --menu-contextual-padding-y: var(--spacing-1);
   --menu-contextual-padding-x: var(--spacing-1);
@@ -1876,6 +1960,14 @@
   --calendar-cell-line-height: var(--line-height-sm);
   --calendar-cell-font-weight: var(--font-weight-low-emphasis);
   --calendar-cell-font-size: var(--font-size-sm);
+  --drawer-padding-y: var(--spacing-6);
+  --drawer-padding-x: var(--spacing-6);
+  --drawer-header-padding-right: var(--spacing-8);
+  --drawer-gap-y: var(--spacing-6);
+  --drawer-dismissible-position-right: var(--spacing-6);
+  --drawer-dismissible-position-top: var(--spacing-6);
+  --drawer-radius-top-left: var(--radius-rounded-2xl);
+  --drawer-radius-bottom-left: var(--radius-rounded-2xl);
   --button-lg-padding-y: var(--spacing-2-5);
   --button-lg-padding-x: var(--spacing-4);
   --button-lg-line-height: var(--line-height-lg);
@@ -1925,5 +2017,15 @@
   --buttongroup-xs-gap: var(--spacing-px);
   --buttongroup-xs-radius: var(--radius-rounded-sm);
   --buttongroup-xs-button-padding-y: var(--spacing-0-5);
+  --avatar-xl-size: var(--spacing-16);
+  --avatar-xl-icon-size: var(--spacing-11);
+  --avatar-lg-size: var(--spacing-12);
+  --avatar-lg-icon-size: var(--spacing-8);
+  --avatar-md-size: var(--spacing-10);
+  --avatar-md-icon-size: var(--spacing-7);
+  --avatar-sm-size: var(--spacing-8);
+  --avatar-sm-icon-size: var(--spacing-5);
+  --avatar-xs-size: var(--spacing-6);
+  --avatar-xs-icon-size: var(--spacing-4);
 }