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

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

@@ -75,6 +75,9 @@
   --components-popover-background: var(--color-gray-ocean-900);
   --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
+  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
+  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
+  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
   --components-overlay-background: var(--color-gray-ocean-650);
   --components-button-destructive-high-icon-hover: var(--color-base-black);
   --components-button-destructive-high-icon: var(--color-base-black);
@@ -95,10 +98,11 @@
   --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-custom-item-background-title: var(--color-interaction-container-neutral-background);
-  --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
-  --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
-  --components-list-custom-item-background-default: 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);
   --components-list-native-item-content-hover: var(--color-base-white);
   --components-list-native-item-content-default: var(--color-base-white);
   --components-form-shape-foreground-default: var(--color-base-black);
@@ -231,7 +235,7 @@
   --color-content-inverted-medium-text: var(--color-gray-ocean-650);
   --color-content-inverted-high-icon: var(--color-gray-ocean-900);
   --color-content-inverted-high-text: var(--color-gray-ocean-900);
-  --color-content-lower-text: var(--color-gray-ocean-450);
+  --color-content-lower-text: var(--color-gray-ocean-400);
   --color-content-low-icon: var(--color-gray-ocean-300);
   --color-content-low-text: var(--color-gray-ocean-300);
   --color-content-low-border: var(--color-gray-ocean-500);
@@ -265,6 +269,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);
@@ -315,6 +320,8 @@
   --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);
@@ -370,11 +377,19 @@
   --components-button-destructive-lower-text: var(--color-dont-use-content);
   --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
   --components-button-destructive-lower-background: var(--color-dont-use-background);
-  --components-list-custom-border: var(--color-content-low-border);
-  --components-list-custom-separator: var(--color-content-low-border);
-  --components-list-custom-item-title-content: var(--color-content-low-text);
-  --components-list-custom-item-content-disabled: var(--color-content-low-text);
-  --components-list-custom-background: var(--color-level-00-background);
+  --components-list-dropdown-border: var(--color-content-low-border);
+  --components-list-dropdown-separator: var(--color-content-low-border);
+  --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);
   --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
   --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -455,18 +470,12 @@
   --color-interaction-container-neutral-border: var(--color-content-low-text);
   --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
   --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
-  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
-  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
+  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
+  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
   --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
 }
 
 :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.
@@ -545,6 +554,9 @@
   --components-popover-background: var(--color-gray-ocean-00);
   --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
+  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
+  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
+  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
   --components-overlay-background: var(--color-gray-ocean-850);
   --components-button-destructive-high-icon-hover: var(--color-base-black);
   --components-button-destructive-high-icon: var(--color-base-black);
@@ -565,10 +577,11 @@
   --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-custom-item-background-title: var(--color-interaction-container-neutral-background);
-  --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
-  --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
-  --components-list-custom-item-background-default: 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);
   --components-list-native-item-content-hover: var(--color-base-white);
   --components-list-native-item-content-default: var(--color-base-white);
   --components-form-shape-foreground-default: var(--color-base-white);
@@ -735,6 +748,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);
@@ -785,6 +799,8 @@
   --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);
@@ -840,11 +856,19 @@
   --components-button-destructive-lower-text: var(--color-dont-use-content);
   --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
   --components-button-destructive-lower-background: var(--color-dont-use-background);
-  --components-list-custom-border: var(--color-content-low-border);
-  --components-list-custom-separator: var(--color-content-low-border);
-  --components-list-custom-item-title-content: var(--color-content-low-text);
-  --components-list-custom-item-content-disabled: var(--color-content-low-text);
-  --components-list-custom-background: var(--color-level-00-background);
+  --components-list-dropdown-border: var(--color-content-low-border);
+  --components-list-dropdown-separator: var(--color-content-low-border);
+  --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);
   --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
   --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -924,8 +948,8 @@
   --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
   --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
   --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
-  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
-  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
+  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
+  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
   --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
   --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
 }
@@ -1049,12 +1073,6 @@
   --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;
@@ -1237,6 +1255,7 @@
   --popover-font-weight: 500;
   --menu-contextual-item-font-weight: 500;
   --menu-contextual-divider-padding-bottom: 3px;
+  --form-field-badge-gap: 0px;
   --list-native-separator-padding-y: 3px;
   --list-native-separator-padding-x: 9px;
   --button-lg-ring-radius: 9px;
@@ -1278,53 +1297,6 @@
   --loader-size-md: var(--spacing-6);
   --loader-size-sm: var(--spacing-5);
   --loader-size-xs: var(--spacing-4);
-  --form-toggle-width: var(--spacing-9);
-  --form-toggle-switch-dot-selected: var(--spacing-3-5);
-  --form-toggle-switch-dot-default: var(--spacing-3);
-  --form-toggle-padding-selected: var(--spacing-0-5);
-  --form-toggle-padding-default: var(--spacing-1);
-  --form-toggle-radius: var(--radius-rounded-full);
-  --form-toggle-padding-top: var(--spacing-0);
-  --form-toggle-height: var(--spacing-5);
-  --form-toggle-border-width: var(--spacing-0-5);
-  --form-radio-ring-radius: var(--radius-rounded-full);
-  --form-radio-size: var(--spacing-5);
-  --form-radio-padding-top: var(--spacing-0);
-  --form-radio-inner-circle-size: var(--spacing-2);
-  --form-radio-inner-circle-padding: var(--spacing-1-5);
-  --form-radio-border-width: var(--spacing-0-5);
-  --form-checkbox-icon-stroke: var(--spacing-0-5);
-  --form-checkbox-ring-radius: var(--radius-rounded-lg);
-  --form-checkbox-size: var(--spacing-5);
-  --form-checkbox-radius: var(--radius-rounded-md);
-  --form-checkbox-padding-top: var(--spacing-0);
-  --form-checkbox-icon-size: var(--spacing-3-5);
-  --form-checkbox-border-width: var(--spacing-0-5);
-  --form-field-inner-button-padding-y: var(--spacing-2-5);
-  --form-field-inner-button-padding-x-int: var(--spacing-1-5);
-  --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
-  --form-field-leading-trailing-line-height: var(--line-height-base);
-  --form-field-leading-trailing-icon-size: var(--spacing-5);
-  --form-field-leading-trailing-font-size: var(--font-size-sm);
-  --form-field-radius: var(--radius-rounded-md);
-  --form-field-padding-y: var(--spacing-2);
-  --form-field-padding-x-icon-button: var(--spacing-10);
-  --form-field-padding-x: var(--spacing-2);
-  --form-field-line-height: var(--line-height-base);
-  --form-field-gap-inner: var(--spacing-2);
-  --form-field-gap: var(--spacing-2);
-  --form-field-icon-size: var(--spacing-5);
-  --form-field-font-weight: var(--font-weight-medium-emphasis);
-  --form-field-font-size: var(--font-size-md);
-  --form-label-font-weight: var(--font-weight-medium-emphasis);
-  --form-label-line-height: var(--line-height-sm);
-  --form-label-gap: var(--spacing-1);
-  --form-label-font-size: var(--font-size-sm);
-  --form-description-font-weight: var(--font-weight-low-emphasis);
-  --form-description-line-height: var(--line-height-sm);
-  --form-description-font-size: var(--font-size-sm);
-  --form-gap-y: var(--spacing-1);
-  --form-gap-x: var(--spacing-3);
   --focus-outline-stroke: var(--spacing-0-5);
   --focus-outline-offset: var(--spacing-0-5);
   --focus-field-stroke: var(--spacing-px);
@@ -1431,21 +1403,71 @@
   --menu-contextual-item-font-size: var(--font-size-sm);
   --menu-contextual-divider-padding-x: var(--spacing-2-5);
   --menu-contextual-divider-padding-top: var(--spacing-1);
-  --list-custom-sub-item-padding-left: var(--spacing-10);
-  --list-custom-separator-padding-y: var(--spacing-0-5);
-  --list-custom-separator-padding-x: var(--spacing-0);
-  --list-custom-padding: var(--spacing-2);
-  --list-custom-radius: var(--radius-rounded-md);
-  --list-custom-gap-y: var(--spacing-0-5);
-  --list-custom-item-radius: var(--radius-rounded-md);
-  --list-custom-item-gap-x: var(--spacing-3);
-  --list-custom-item-padding-y: var(--spacing-2);
-  --list-custom-item-padding-x: var(--spacing-2);
-  --list-custom-item-padding-right: var(--spacing-2);
-  --list-custom-item-padding-left: var(--spacing-8);
-  --list-custom-line-height: var(--line-height-base);
-  --list-custom-font-size: var(--font-size-md);
-  --list-custom-icon-size: var(--spacing-5);
+  --form-toggle-width: var(--spacing-9);
+  --form-toggle-switch-dot-selected: var(--spacing-3-5);
+  --form-toggle-switch-dot-default: var(--spacing-3);
+  --form-toggle-padding-selected: var(--spacing-0-5);
+  --form-toggle-padding-default: var(--spacing-1);
+  --form-toggle-radius: var(--radius-rounded-full);
+  --form-toggle-padding-top: var(--spacing-0);
+  --form-toggle-height: var(--spacing-5);
+  --form-toggle-border-width: var(--spacing-0-5);
+  --form-radio-ring-radius: var(--radius-rounded-full);
+  --form-radio-size: var(--spacing-5);
+  --form-radio-padding-top: var(--spacing-0);
+  --form-radio-inner-circle-size: var(--spacing-2);
+  --form-radio-inner-circle-padding: var(--spacing-1-5);
+  --form-radio-border-width: var(--spacing-0-5);
+  --form-checkbox-icon-stroke: var(--spacing-0-5);
+  --form-checkbox-ring-radius: var(--radius-rounded-lg);
+  --form-checkbox-size: var(--spacing-5);
+  --form-checkbox-radius: var(--radius-rounded-md);
+  --form-checkbox-padding-top: var(--spacing-0);
+  --form-checkbox-icon-size: var(--spacing-3-5);
+  --form-checkbox-border-width: var(--spacing-0-5);
+  --form-label-font-weight: var(--font-weight-medium-emphasis);
+  --form-label-line-height: var(--line-height-sm);
+  --form-label-gap: var(--spacing-1);
+  --form-label-font-size: var(--font-size-sm);
+  --form-description-font-weight: var(--font-weight-low-emphasis);
+  --form-description-line-height: var(--line-height-sm);
+  --form-description-font-size: var(--font-size-sm);
+  --form-gap-y: var(--spacing-1);
+  --form-gap-x: var(--spacing-3);
+  --form-field-inner-button-padding-y: var(--spacing-2-5);
+  --form-field-inner-button-padding-x-int: var(--spacing-1-5);
+  --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
+  --form-field-leading-trailing-line-height: var(--line-height-base);
+  --form-field-leading-trailing-icon-size: var(--spacing-5);
+  --form-field-leading-trailing-font-size: var(--font-size-sm);
+  --form-field-radius: var(--radius-rounded-md);
+  --form-field-padding-y: var(--spacing-2);
+  --form-field-padding-x-icon-button: var(--spacing-10);
+  --form-field-padding-x: var(--spacing-2);
+  --form-field-line-height: var(--line-height-base);
+  --form-field-gap-inner: var(--spacing-2);
+  --form-field-gap: var(--spacing-2);
+  --form-field-icon-size: var(--spacing-5);
+  --form-field-font-weight: var(--font-weight-medium-emphasis);
+  --form-field-font-size: var(--font-size-md);
+  --form-field-badge-padding-y: var(--spacing-0-5);
+  --form-field-badge-padding-x: var(--spacing-1);
+  --list-multiselect-padding: var(--spacing-3);
+  --list-dropdown-sub-item-padding-left: var(--spacing-10);
+  --list-dropdown-separator-padding-y: var(--spacing-0-5);
+  --list-dropdown-separator-padding-x: var(--spacing-0);
+  --list-dropdown-padding: var(--spacing-2);
+  --list-dropdown-radius: var(--radius-rounded-md);
+  --list-dropdown-gap-y: var(--spacing-0-5);
+  --list-dropdown-item-radius: var(--radius-rounded-md);
+  --list-dropdown-item-gap-x: var(--spacing-3);
+  --list-dropdown-item-padding-y: var(--spacing-2);
+  --list-dropdown-item-padding-x: var(--spacing-2);
+  --list-dropdown-item-padding-right: var(--spacing-2);
+  --list-dropdown-item-padding-left: var(--spacing-8);
+  --list-dropdown-line-height: var(--line-height-base);
+  --list-dropdown-font-size: var(--font-size-md);
+  --list-dropdown-icon-size: var(--spacing-5);
   --list-native-sub-item-padding-left: var(--spacing-8);
   --list-native-padding: var(--spacing-2);
   --list-native-radius: var(--radius-rounded-md);