@nova-design-system/nova-base 3.0.0-beta.38 → 3.0.0-beta.40

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

@@ -333,7 +333,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
     '.nv-link:hover': {
         'color': 'var(--color-interaction-link-high-text-hover)'
     },
-    '.nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link': {
+    '.nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link, .nv-buttongroup .nv-link': {
         'display': 'flex',
         'alignItems': 'center',
         'color': 'var(--color-interaction-container-neutral-text)',
@@ -365,16 +365,16 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'borderColor': 'var(--color-interaction-container-branded-low-border-active)',
         'backgroundColor': 'transparent'
     },
-    '.nv-navbar .nv-link, .nv-sidenav .nv-link': {
+    '.nv-navbar .nv-link, .nv-sidenav .nv-link, .nv-buttongroup .nv-link': {
         'border': 'solid 0 transparent',
         'borderRadius': 'var(--radius-rounded-md)'
     },
-    '.nv-navbar .nv-link:hover, .nv-sidenav .nv-link:hover': {
+    '.nv-navbar .nv-link:hover, .nv-sidenav .nv-link:hover, .nv-buttongroup .nv-link:hover': {
         'color': 'var(--color-interaction-container-neutral-text-hover)',
         'borderColor': 'var(--color-interaction-container-neutral-border-hover)',
         'backgroundColor': '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': {
+    '.nv-navbar .nv-link.active, .nv-navbar .nv-link.router-link-active, .nv-sidenav .nv-link.active, .nv-sidenav .nv-link.router-link-active, .nv-buttongroup .nv-link.active, .nv-buttongroup .nv-link.router-link-active': {
         'color': 'var(--color-interaction-container-neutral-text-active)',
         'borderColor': 'var(--color-interaction-container-neutral-text-active)',
         'backgroundColor': 'var(--color-interaction-container-neutral-background-active)'
@@ -386,6 +386,27 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'width': '20px !important',
         'height': '20px !important'
     },
+    '.nv-buttongroup': {
+        'display': 'inline-flex',
+        'borderRadius': 'var(--radius-rounded-md)',
+        'border': '1px solid var(--color-content-medium-border)',
+        'overflow': 'hidden'
+    },
+    '.nv-buttongroup .nv-link': {
+        'borderColor': 'var(--color-content-medium-border)',
+        'borderWidth': '0 1px 0 0',
+        'borderStyle': 'solid',
+        'borderRadius': '0'
+    },
+    '.nv-buttongroup .nv-link:hover': {
+        'borderColor': 'var(--color-content-medium-border)'
+    },
+    '.nv-buttongroup .nv-link.active, .nv-buttongroup .nv-link.router-link-active': {
+        'borderColor': 'var(--color-content-medium-border)'
+    },
+    '.nv-buttongroup li:last-child .nv-link': {
+        'borderRightWidth': '0'
+    },
     '.nv-link .nv-badge': {
         'borderRadius': 'var(--radius-rounded-full)',
         'width': 'var(--spacing-5)',
@@ -399,5 +420,9 @@ exports.NOVA_TAILWIND_COMPONENTS = {
     '.nv-link.disabled': {
         'opacity': '0.5',
         'cursor': 'not-allowed'
+    },
+    '.nv-link.disabled:hover': {
+        'color': 'var(--color-interaction-container-neutral-text)',
+        'backgroundColor': 'transparent'
     }
 };

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

@@ -265,6 +265,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-interaction-container-neutral': {
         'border-color': 'var(--color-interaction-container-neutral-border)'
     },
+    '.border-interaction-container-neutral-active': {
+        'border-color': 'var(--color-interaction-container-neutral-border-active)'
+    },
     '.border-interaction-container-neutral-hover': {
         'border-color': 'var(--color-interaction-container-neutral-border-hover)'
     },

package/dist/cjs/plugin/nova-plugin.js

@@ -111,5 +111,7 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
         }, '.w-unset': {
             width: 'unset',
         } }));
+}, {
+    important: true,
 });
 exports.default = exports.novaTailwindPlugin;

package/dist/css/mccs.css

@@ -33,6 +33,8 @@
   --components-button-high-border-active: rgba(255, 255, 255, 0);
   --components-button-high-border-hover: rgba(255, 255, 255, 0);
   --components-button-high-border: rgba(255, 255, 255, 0);
+  --components-datagrid-background: rgba(0, 0, 0, 0);
+  --components-wpf-components-2: #ffffff;
   --shadow-y-axis-2xl: 25px;
   --shadow-y-axis-xl-2: 20px;
   --shadow-y-axis-xl-1: 10px;
@@ -98,7 +100,8 @@
   --components-loader-brand-foreground: var(--color-petrol-500);
   --components-loader-brand-background: var(--color-petrol-900);
   --components-loader-white-foreground: var(--color-base-white);
-  --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
+  --components-list-dropdown-group-title-background: var(--color-transparent);
+  --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
   --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
   --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
@@ -268,6 +271,7 @@
   --color-interaction-link-high-text: var(--color-petrol-400);
   --color-interaction-container-neutral-text-active: var(--color-petrol-300);
   --color-interaction-container-neutral-icon-active: var(--color-petrol-300);
+  --color-interaction-container-neutral-border-active: var(--color-petrol-300);
   --color-interaction-container-branded-high-text-hover: var(--color-base-white);
   --color-interaction-container-branded-high-text-active: var(--color-base-white);
   --color-interaction-container-branded-high-text: var(--color-base-white);
@@ -294,10 +298,6 @@
   --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);
-  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
-  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
-  --components-menu-contextual-border: var(--color-content-low-border);
-  --components-menu-contextual-background: var(--color-level-00-background);
   --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
   --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
   --components-notification-neutral-background: var(--color-level-20-background);
@@ -315,11 +315,15 @@
   --components-notification-information-border: var(--color-feedback-information-low-border);
   --components-notification-information-icon: var(--color-feedback-information-low-icon);
   --components-notification-information-background: var(--color-level-20-background);
+  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
+  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
+  --components-menu-contextual-border: var(--color-content-low-border);
+  --components-menu-contextual-background: var(--color-level-00-background);
+  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
+  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
   --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
   --components-breadcrumb-text-active: var(--color-content-medium-text);
   --components-breadcrumb-text: var(--color-content-low-text);
-  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
-  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
   --components-avatar-content-10: var(--color-rainbow-10-icon);
   --components-avatar-content-9: var(--color-rainbow-9-text);
   --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -377,13 +381,15 @@
   --components-button-destructive-lower-background: var(--color-dont-use-background);
   --components-list-dropdown-border: var(--color-content-low-border);
   --components-list-dropdown-separator: var(--color-content-low-border);
-  --components-list-dropdown-item-title-content: var(--color-content-medium-text);
+  --components-list-dropdown-group-title-content: var(--color-content-medium-text);
   --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
   --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
   --components-list-dropdown-item-description-default: var(--color-content-low-text);
+  --components-list-dropdown-item-label-active: var(--color-content-low-text);
   --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
   --components-list-dropdown-item-label-hover: var(--color-content-high-text);
   --components-list-dropdown-item-label-default: var(--color-content-medium-text);
+  --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
   --components-list-dropdown-header-background: var(--color-level-10-background);
   --components-list-dropdown-background: var(--color-level-00-background);
   --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
@@ -452,6 +458,11 @@
   --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
   --components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
   --components-button-high-background: var(--color-interaction-container-branded-high-background);
+  --components-datagrid-border-header: var(--color-content-low-border);
+  --components-datagrid-border-body: var(--color-content-low-border);
+  --components-datagrid-content-subtext: var(--color-content-low-text);
+  --components-datagrid-content-text: var(--color-content-high-text);
+  --components-datagrid-content-header: var(--color-content-low-text);
   --color-focus-success: var(--color-feedback-success-low-border);
   --color-focus-destructive: var(--color-feedback-error-high-border);
   --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
@@ -472,6 +483,12 @@
 }
 
 :root {
+  --color-red-100: var(--color-red-mccs-100);
+  --color-red-200: var(--color-red-mccs-200);
+  --color-red-300: var(--color-red-mccs-300);
+  --color-red-400: var(--color-red-mccs-400);
+  --color-red-500: var(--color-red-mccs-500);
+  --color-red-00: var(--color-red-mccs-00);
 }
 /**
  * Do not edit directly, this file was auto-generated.
@@ -508,6 +525,8 @@
   --components-button-high-border-active: rgba(255, 255, 255, 0);
   --components-button-high-border-hover: rgba(255, 255, 255, 0);
   --components-button-high-border: rgba(255, 255, 255, 0);
+  --components-datagrid-background: rgba(255, 255, 255, 0);
+  --components-wpf-components-2: #ffffff;
   --shadow-y-axis-2xl: 25px;
   --shadow-y-axis-xl-2: 20px;
   --shadow-y-axis-xl-1: 10px;
@@ -573,7 +592,8 @@
   --components-loader-brand-foreground: var(--color-petrol-500);
   --components-loader-brand-background: var(--color-petrol-50);
   --components-loader-white-foreground: var(--color-base-white);
-  --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
+  --components-list-dropdown-group-title-background: var(--color-interaction-container-neutral-background);
+  --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
   --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
   --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
@@ -743,6 +763,7 @@
   --color-interaction-link-high-text: var(--color-petrol-600);
   --color-interaction-container-neutral-text-active: var(--color-petrol-700);
   --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
+  --color-interaction-container-neutral-border-active: var(--color-petrol-700);
   --color-interaction-container-branded-high-text-hover: var(--color-base-black);
   --color-interaction-container-branded-high-text-active: var(--color-base-black);
   --color-interaction-container-branded-high-text: var(--color-base-black);
@@ -769,10 +790,6 @@
   --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);
-  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
-  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
-  --components-menu-contextual-border: var(--color-content-low-border);
-  --components-menu-contextual-background: var(--color-level-00-background);
   --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
   --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
   --components-notification-neutral-background: var(--color-level-00-background);
@@ -790,11 +807,15 @@
   --components-notification-information-border: var(--color-feedback-information-low-border);
   --components-notification-information-icon: var(--color-feedback-information-low-icon);
   --components-notification-information-background: var(--color-level-00-background);
+  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
+  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
+  --components-menu-contextual-border: var(--color-content-low-border);
+  --components-menu-contextual-background: var(--color-level-00-background);
+  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
+  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
   --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
   --components-breadcrumb-text-active: var(--color-content-medium-text);
   --components-breadcrumb-text: var(--color-content-low-text);
-  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
-  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
   --components-avatar-content-10: var(--color-rainbow-10-icon);
   --components-avatar-content-9: var(--color-rainbow-9-text);
   --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -852,13 +873,15 @@
   --components-button-destructive-lower-background: var(--color-dont-use-background);
   --components-list-dropdown-border: var(--color-content-low-border);
   --components-list-dropdown-separator: var(--color-content-low-border);
-  --components-list-dropdown-item-title-content: var(--color-content-medium-text);
+  --components-list-dropdown-group-title-content: var(--color-content-medium-text);
   --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
   --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
   --components-list-dropdown-item-description-default: var(--color-content-low-text);
+  --components-list-dropdown-item-label-active: var(--color-content-low-text);
   --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
   --components-list-dropdown-item-label-hover: var(--color-content-high-text);
   --components-list-dropdown-item-label-default: var(--color-content-medium-text);
+  --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
   --components-list-dropdown-header-background: var(--color-level-10-background);
   --components-list-dropdown-background: var(--color-level-00-background);
   --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
@@ -926,6 +949,11 @@
   --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
   --components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
   --components-button-high-background: var(--color-interaction-container-branded-high-background);
+  --components-datagrid-border-header: var(--color-content-medium-border);
+  --components-datagrid-border-body: var(--color-content-low-border);
+  --components-datagrid-content-subtext: var(--color-content-low-text);
+  --components-datagrid-content-text: var(--color-content-high-text);
+  --components-datagrid-content-header: var(--color-content-low-text);
   --color-focus-success: var(--color-feedback-success-low-border);
   --color-focus-destructive: var(--color-feedback-error-high-border);
   --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
@@ -1065,6 +1093,12 @@
   --color-turquoise-200: #b8d6d2;
   --color-turquoise-100: #d2e5e3;
   --color-turquoise-50: #ecf4f3;
+  --color-red-mccs-00: #ff6161;
+  --color-red-mccs-500: #450000;
+  --color-red-mccs-400: #7d0000;
+  --color-red-mccs-300: #ae0303;
+  --color-red-mccs-200: #d00202;
+  --color-red-mccs-100: #ff3838;
   --color-red-900: #3d0909;
   --color-red-800: #610e0e;
   --color-red-700: #851313;