@ngstarter-ui/components 1.0.40 → 1.0.42

package/styles/_tokens.scss

@@ -90,7 +90,7 @@
   --ngs-state-active-bg: color-mix(in srgb, var(--ngs-color-on-surface), transparent 90%);
   --ngs-state-selected-bg: color-mix(in srgb, var(--ngs-color-primary), transparent 88%);
   --ngs-state-selected-color: var(--ngs-color-primary);
-  --ngs-state-focus-ring: color-mix(in srgb, var(--ngs-color-primary), transparent 64%);
+  --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
   --ngs-state-disabled-bg: color-mix(in srgb, var(--ngs-color-on-surface), transparent 95%);
   --ngs-state-disabled-color: color-mix(in srgb, var(--ngs-color-on-surface), transparent 62%);
   --ngs-state-disabled-border: color-mix(in srgb, var(--ngs-color-on-surface), transparent 90%);
@@ -119,7 +119,7 @@
   --ngs-color-on-orange-container: var(--ngs-color-on-warning-container);
   --ngs-color-green-500: #22c55e;
 
-  --ngs-density-scale: 0;
+  --ngs-density-scale: -9;
   --ngs-control-height-sm: calc(2rem + var(--ngs-density-scale) * 1px);
   --ngs-control-height-md: calc(2.75rem + var(--ngs-density-scale) * 1px);
   --ngs-control-height-lg: calc(3.25rem + var(--ngs-density-scale) * 1px);
@@ -129,7 +129,7 @@
   --ngs-icon-size: --spacing(6);
   --ngs-icon-color: inherit;
 
-  --ngs-button-height: var(--ngs-control-height-md);
+  --ngs-button-height: 2.625rem;
   --ngs-button-padding-x: var(--ngs-control-padding-x);
   --ngs-button-radius: var(--ngs-control-radius);
   --ngs-button-font-size: var(--ngs-font-size-sm);
@@ -157,8 +157,12 @@
   --ngs-field-font-size: var(--ngs-font-size-md);
   --ngs-field-line-height: var(--ngs-line-height-base);
   --ngs-field-label-float-font-size: 0.75rem;
-  --ngs-field-container-height: calc(3.125rem + var(--ngs-density-scale) * 1px);
-  --ngs-field-infix-height: calc(3.125rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-container-height: 3.125rem;
+  --ngs-field-infix-height: 3.125rem;
+  --ngs-field-input-height: 1.25rem;
+  --ngs-field-infix-padding-top: 1.4375rem;
+  --ngs-field-infix-padding-bottom: 0.5rem;
+  --ngs-field-no-label-padding-y: 0.625rem;
   --ngs-field-padding-x: --spacing(3);
   --ngs-field-filled-bg: var(--ngs-color-surface-container-highest);
   --ngs-field-filled-indicator: var(--ngs-color-on-surface-variant);
@@ -171,7 +175,7 @@
   --ngs-dropdown-radius: var(--ngs-radius-xl);
   --ngs-dropdown-border: 1px solid var(--ngs-color-faint);
   --ngs-dropdown-max-height: 16rem;
-  --ngs-dropdown-height: var(--ngs-nav-item-height);
+  --ngs-dropdown-height: 2.625rem;
   --ngs-dropdown-padding-x: --spacing(2);
   --ngs-dropdown-padding-y: --spacing(2);
   --ngs-dropdown-padding: var(--ngs-dropdown-padding-y) var(--ngs-dropdown-padding-x);
@@ -236,7 +240,7 @@
   --ngs-table-header-cell-background: var(--ngs-table-header-bg);
   --ngs-table-row-border-color: var(--ngs-table-border-color);
 
-  --ngs-nav-item-height: calc(2.5rem + var(--ngs-density-scale) * 1px);
+  --ngs-nav-item-height: var(--ngs-dropdown-height);
   --ngs-nav-items-gap: --spacing(1);
   --ngs-nav-item-width: 100%;
   --ngs-nav-item-padding: 0 --spacing(3);
@@ -420,244 +424,78 @@
 }
 
 [data-ngs-theme='enterprise']:not([data-ngs-color-scheme='dark']):not(.dark) {
-  --ngs-font-family-base: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  --ngs-radius-xs: 0.125rem;
-  --ngs-radius-sm: 0.25rem;
-  --ngs-radius-md: 0.375rem;
-  --ngs-radius-lg: 0.5rem;
-  --ngs-radius-xl: 0.625rem;
-  --ngs-shadow-sm: 0 1px 1px rgba(16, 24, 40, 0.06);
-  --ngs-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08);
-  --ngs-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.14);
+  color-scheme: light;
 
-  --ngs-color-primary: #173b66;
+  --ngs-font-family-base: Inter, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --ngs-color-primary: #036fe3;
   --ngs-color-on-primary: #ffffff;
-  --ngs-color-primary-container: #e3ebf5;
-  --ngs-color-on-primary-container: #0e2744;
-  --ngs-color-secondary: #536170;
+  --ngs-color-primary-container: #d6eaff;
+  --ngs-color-on-primary-container: #001a36;
+  --ngs-color-secondary: #21805a;
   --ngs-color-on-secondary: #ffffff;
-  --ngs-color-secondary-container: #eef2f6;
-  --ngs-color-on-secondary-container: #202b37;
-  --ngs-color-tertiary: #0f6b6e;
-  --ngs-color-on-tertiary: #ffffff;
-  --ngs-color-tertiary-container: #d9eeee;
-  --ngs-color-on-tertiary-container: #083c3e;
-  --ngs-color-danger: #b42318;
-  --ngs-color-on-danger: #ffffff;
-  --ngs-color-danger-container: #fecdca;
-  --ngs-color-on-danger-container: #7a271a;
-  --ngs-color-info: #175cd3;
-  --ngs-color-on-info: #ffffff;
-  --ngs-color-info-container: #d1e9ff;
-  --ngs-color-on-info-container: #1849a9;
-  --ngs-color-success: #067647;
-  --ngs-color-on-success: #ffffff;
-  --ngs-color-success-container: #d1fadf;
-  --ngs-color-on-success-container: #054f31;
-  --ngs-color-warning: #b54708;
-  --ngs-color-on-warning: #ffffff;
-  --ngs-color-warning-container: #fedf89;
-  --ngs-color-on-warning-container: #7a2e0e;
-  --ngs-color-background: #f3f5f7;
-  --ngs-color-on-background: #17202a;
-  --ngs-color-surface: #f7f9fb;
-  --ngs-color-surface-bright: #ffffff;
-  --ngs-color-on-surface: #17202a;
-  --ngs-color-on-surface-variant: #5e6b7a;
-  --ngs-color-neutral-50: #f8fafc;
-  --ngs-color-neutral-100: #f1f4f7;
-  --ngs-color-neutral-200: #e4e9ef;
-  --ngs-color-neutral-300: #d5dce5;
-  --ngs-color-neutral-400: #a7b1be;
-  --ngs-color-neutral-500: #758295;
-  --ngs-color-neutral-600: #536170;
-  --ngs-color-neutral-650: #465260;
-  --ngs-color-neutral-700: #344051;
-  --ngs-color-neutral-800: #202b37;
-  --ngs-color-neutral-900: #111827;
-  --ngs-color-neutral-950: #0b1118;
+  --ngs-color-secondary-container: #e8f6ef;
+  --ngs-color-on-secondary-container: #0d3f2b;
+  --ngs-color-background: #f0eff4;
+  --ngs-color-on-background: #1d1e2a;
+  --ngs-color-surface: #ffffff;
+  --ngs-color-on-surface: #20212d;
+  --ngs-color-on-surface-variant: #747684;
   --ngs-color-surface-container-lowest: #ffffff;
-  --ngs-color-surface-container-low: #fafbfc;
-  --ngs-color-surface-container: #f4f6f8;
-  --ngs-color-surface-container-high: #e9eef3;
-  --ngs-color-surface-container-highest: #d9e1ea;
-  --ngs-color-outline: #8b97a7;
-  --ngs-color-outline-variant: #c6ced8;
-  --ngs-color-border: #d5dce5;
-  --ngs-color-faint: #edf1f5;
-  --ngs-color-subtle: #dfe5ec;
-  --ngs-color-muted: #c6ced8;
-  --ngs-color-emphasis: #758295;
-  --ngs-color-strong: #344051;
-
-  --ngs-state-hover-bg: #eef2f6;
-  --ngs-state-active-bg: #e4e9ef;
-  --ngs-state-selected-bg: #e3ebf5;
-  --ngs-state-selected-color: #173b66;
-  --ngs-state-focus-ring: rgba(23, 59, 102, 0.18);
-  --ngs-state-disabled-bg: #eef2f6;
-  --ngs-state-disabled-color: #8b97a7;
-  --ngs-state-disabled-border: #d5dce5;
-
-  --ngs-control-height-sm: calc(1.875rem + var(--ngs-density-scale) * 1px);
-  --ngs-control-height-md: calc(2.375rem + var(--ngs-density-scale) * 1px);
-  --ngs-control-height-lg: calc(2.75rem + var(--ngs-density-scale) * 1px);
-  --ngs-control-padding-x: --spacing(3);
-  --ngs-control-radius: var(--ngs-radius-md);
-  --ngs-button-font-size: 0.8125rem;
-  --ngs-button-font-weight: 600;
-  --ngs-button-tonal-bg: #eef2f6;
-  --ngs-button-tonal-color: #202b37;
-  --ngs-button-outlined-border: #a7b1be;
-  --ngs-field-bg: #ffffff;
-  --ngs-field-disabled-bg: #eef2f6;
-  --ngs-field-border-color: #a7b1be;
-  --ngs-field-border-focus-color: #173b66;
-  --ngs-field-radius: var(--ngs-radius-md);
-  --ngs-field-font-size: 0.875rem;
-  --ngs-field-container-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
-  --ngs-field-infix-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
-  --ngs-field-filled-bg: #f4f6f8;
-  --ngs-dropdown-bg: #ffffff;
-  --ngs-dropdown-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
-  --ngs-dropdown-radius: var(--ngs-radius-md);
-  --ngs-dropdown-border: 1px solid #d5dce5;
-  --ngs-dialog-radius: var(--ngs-radius-lg);
-  --ngs-dialog-shadow: 0 18px 44px rgba(16, 24, 40, 0.18);
-  --ngs-overlay-backdrop-bg: rgba(17, 24, 39, 0.36);
-  --ngs-overlay-backdrop-blur: 1px;
-
-  --ngs-table-bg: #ffffff;
-  --ngs-table-header-bg: #f4f6f8;
-  --ngs-table-row-bg: #ffffff;
-  --ngs-table-border-color: #d5dce5;
-  --ngs-table-row-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
-  --ngs-table-header-row-height: calc(2.5rem + var(--ngs-density-scale) * 1px);
-  --ngs-table-cell-padding: --spacing(1) --spacing(3);
-  --ngs-table-cell-font-size: 0.8125rem;
-  --ngs-table-header-cell-font-size: 0.6875rem;
-  --ngs-table-header-cell-font-weight: 700;
-
-  --ngs-nav-item-height: calc(2.125rem + var(--ngs-density-scale) * 1px);
-  --ngs-nav-items-gap: --spacing(0.5);
-  --ngs-nav-item-padding: 0 --spacing(2.5);
-  --ngs-nav-item-radius: var(--ngs-radius-sm);
-  --ngs-nav-item-font-size: 0.8125rem;
-  --ngs-nav-item-font-weight: 600;
-  --ngs-nav-item-border-width: 1px;
-  --ngs-nav-item-border-color: transparent;
-  --ngs-nav-item-color: #465260;
-  --ngs-nav-item-hover-color: #17202a;
-  --ngs-nav-item-active-color: #173b66;
-  --ngs-nav-item-hover-bg: #eef2f6;
-  --ngs-nav-item-active-bg: #e3ebf5;
-  --ngs-nav-item-icon-color: #758295;
-  --ngs-nav-item-hover-icon-color: #344051;
-  --ngs-nav-item-active-icon-color: #173b66;
-  --ngs-nav-item-icon-font-size: 1.25rem;
-  --ngs-nav-heading-font-size: 0.6875rem;
-  --ngs-nav-heading-font-weight: 700;
-  --ngs-nav-heading-margin-top: --spacing(5);
-  --ngs-nav-heading-margin-bottom: --spacing(1.5);
-  --ngs-nav-divider-margin: --spacing(4) 0;
-  --ngs-nav-nested-item-margin: 0 0 0 38px;
-  --ngs-sidebar-width: var(--ngs-sidenav-width, 16rem);
-}
-
-.dark[data-ngs-theme='enterprise'],
-[data-ngs-theme='enterprise'][data-ngs-color-scheme='dark'] {
-  --ngs-color-primary: #8fb8ff;
-  --ngs-color-on-primary: #07111f;
-  --ngs-color-primary-container: #173b66;
-  --ngs-color-on-primary-container: #d7e7ff;
-  --ngs-color-secondary: #a7b1be;
-  --ngs-color-on-secondary: #0b1118;
-  --ngs-color-secondary-container: #202b37;
-  --ngs-color-on-secondary-container: #e4e9ef;
-  --ngs-color-tertiary: #7bd2d5;
-  --ngs-color-on-tertiary: #082f32;
-  --ngs-color-tertiary-container: #0f4f52;
-  --ngs-color-on-tertiary-container: #d9eeee;
-  --ngs-color-danger: #f97066;
-  --ngs-color-on-danger: #4e1b16;
-  --ngs-color-danger-container: #7a271a;
-  --ngs-color-on-danger-container: #fee4e2;
-  --ngs-color-info: #84caff;
-  --ngs-color-on-info: #102a56;
-  --ngs-color-info-container: #1849a9;
-  --ngs-color-on-info-container: #d1e9ff;
-  --ngs-color-success: #75e0a7;
-  --ngs-color-on-success: #053321;
-  --ngs-color-success-container: #05603a;
-  --ngs-color-on-success-container: #d1fadf;
-  --ngs-color-warning: #fdb022;
-  --ngs-color-on-warning: #4e1d09;
-  --ngs-color-warning-container: #93370d;
-  --ngs-color-on-warning-container: #fef0c7;
-  --ngs-color-background: #0b1118;
-  --ngs-color-on-background: #e6edf3;
-  --ngs-color-surface: #111922;
-  --ngs-color-surface-bright: #182230;
-  --ngs-color-on-surface: #e6edf3;
-  --ngs-color-on-surface-variant: #9ba8b6;
-  --ngs-color-neutral-50: #0b1118;
-  --ngs-color-neutral-100: #111922;
-  --ngs-color-neutral-200: #182230;
-  --ngs-color-neutral-300: #202b37;
-  --ngs-color-neutral-400: #344051;
-  --ngs-color-neutral-500: #536170;
-  --ngs-color-neutral-600: #758295;
-  --ngs-color-neutral-650: #8b97a7;
-  --ngs-color-neutral-700: #a7b1be;
-  --ngs-color-neutral-800: #c6ced8;
-  --ngs-color-neutral-900: #e4e9ef;
-  --ngs-color-neutral-950: #f8fafc;
-  --ngs-color-surface-container-lowest: #0b1118;
-  --ngs-color-surface-container-low: #111922;
-  --ngs-color-surface-container: #182230;
-  --ngs-color-surface-container-high: #202b37;
-  --ngs-color-surface-container-highest: #293544;
-  --ngs-color-outline: #758295;
-  --ngs-color-outline-variant: #344051;
-  --ngs-color-border: #293544;
-  --ngs-color-faint: #182230;
-  --ngs-color-subtle: #202b37;
-  --ngs-color-muted: #344051;
-  --ngs-color-emphasis: #8b97a7;
-  --ngs-color-strong: #c6ced8;
-  --ngs-state-hover-bg: #182230;
-  --ngs-state-active-bg: #202b37;
-  --ngs-state-selected-bg: #173b66;
-  --ngs-state-selected-color: #d7e7ff;
-  --ngs-state-focus-ring: rgba(143, 184, 255, 0.26);
-  --ngs-state-disabled-bg: #182230;
-  --ngs-state-disabled-color: #758295;
-  --ngs-state-disabled-border: #293544;
-  --ngs-button-tonal-bg: #202b37;
-  --ngs-button-tonal-color: #e4e9ef;
-  --ngs-button-outlined-border: #536170;
-  --ngs-field-bg: #111922;
-  --ngs-field-disabled-bg: #182230;
-  --ngs-field-border-color: #536170;
-  --ngs-field-border-focus-color: #8fb8ff;
-  --ngs-field-filled-bg: #182230;
-  --ngs-dropdown-bg: #111922;
-  --ngs-dropdown-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
-  --ngs-dropdown-border: 1px solid #293544;
-  --ngs-dialog-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
-  --ngs-overlay-backdrop-bg: rgba(3, 7, 12, 0.62);
-  --ngs-table-bg: #111922;
-  --ngs-table-header-bg: #182230;
-  --ngs-table-row-bg: #111922;
-  --ngs-table-border-color: #293544;
-  --ngs-nav-item-color: #a7b1be;
-  --ngs-nav-item-hover-color: #e6edf3;
-  --ngs-nav-item-active-color: #d7e7ff;
-  --ngs-nav-item-hover-bg: #182230;
-  --ngs-nav-item-active-bg: #173b66;
-  --ngs-nav-item-icon-color: #8b97a7;
-  --ngs-nav-item-hover-icon-color: #e6edf3;
-  --ngs-nav-item-active-icon-color: #d7e7ff;
+  --ngs-color-surface-container-low: #fafafd;
+  --ngs-color-surface-container: #f5f4f8;
+  --ngs-color-surface-container-high: #eeeef5;
+  --ngs-color-surface-container-highest: #e7e6ef;
+  --ngs-color-border: rgba(35, 36, 49, 0.1);
+  --ngs-color-outline: rgba(35, 36, 49, 0.18);
+  --ngs-color-outline-variant: rgba(35, 36, 49, 0.1);
+  --ngs-color-danger: #c93c3c;
+
+  --ngs-button-height: 2.625rem;
+  --ngs-button-padding-x: 0.875rem;
+  --ngs-button-font-size: 0.875rem;
+  --ngs-button-font-weight: 650;
+  --ngs-button-radius: 0.5rem;
+  --ngs-button-outlined-border: var(--corporate-border);
+  --ngs-button-outlined-color: var(--corporate-text);
+  --ngs-button-tonal-bg: #f4f2fb;
+  --ngs-button-tonal-color: var(--corporate-text);
+
+  --ngs-nav-badge-size: 1.35rem;
+  --ngs-nav-badge-padding: 0 0.4rem;
+  --ngs-nav-items-gap: 0.28rem;
+  --ngs-nav-item-height: 2.35rem;
+  --ngs-nav-item-padding: 0 0.625rem;
+  --ngs-nav-item-gap: 0.625rem;
+  --ngs-nav-item-radius: 0.5rem;
+  --ngs-nav-item-font-size: 0.94rem;
+  --ngs-nav-item-font-weight: 400;
+  --ngs-nav-item-color: #59677e;
+  --ngs-nav-item-hover-color: #20212d;
+  --ngs-nav-item-active-color: #036fe3;
+  --ngs-nav-item-hover-bg: #ffffff;
+  --ngs-nav-item-active-bg: #ffffff;
+  --ngs-nav-item-icon-width: 1.25rem;
+  --ngs-nav-item-icon-color: #6d7d97;
+  --ngs-nav-item-hover-icon-color: #59677e;
+  --ngs-nav-item-active-icon-color: #036fe3;
+
+  --corporate-stage-bg: #ffffff;
+  --corporate-shell-bg: #ffffff;
+  --corporate-sidebar-bg: #f5f5f7;
+  --corporate-panel-bg: #ffffff;
+  --corporate-input-bg: #e8e6ed;
+  --corporate-muted: #858793;
+  --corporate-soft: #f6f5f9;
+  --corporate-border: rgba(34, 35, 48, 0.085);
+  --corporate-border-strong: rgba(34, 35, 48, 0.14);
+  --corporate-text: #20212d;
+  --corporate-primary: #036fe3;
+  --corporate-primary-soft: #d6eaff;
+  --corporate-green: #25a765;
+  --corporate-blue: #2d87f0;
+  --corporate-orange: #ec6d28;
+  --corporate-gold: #f1bd28;
+  --corporate-shadow: 0 24px 65px rgba(59, 56, 75, 0.18);
 }
 
 [data-ngs-theme='modern']:not([data-ngs-color-scheme='dark']):not(.dark) {
@@ -735,7 +573,7 @@
   --ngs-state-active-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.13), rgba(15, 118, 110, 0.12));
   --ngs-state-selected-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
   --ngs-state-selected-color: #3730a3;
-  --ngs-state-focus-ring: rgba(79, 70, 229, 0.22);
+  --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
   --ngs-state-disabled-bg: #edf1f8;
   --ngs-state-disabled-color: #9aa6c0;
   --ngs-state-disabled-border: #d7deee;
@@ -758,14 +596,15 @@
   --ngs-field-border-focus-color: #4f46e5;
   --ngs-field-radius: var(--ngs-radius-lg);
   --ngs-field-font-size: 0.9375rem;
-  --ngs-field-container-height: calc(3.375rem + var(--ngs-density-scale) * 1px);
-  --ngs-field-infix-height: calc(3.375rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-container-height: 3.125rem;
+  --ngs-field-infix-height: 3.125rem;
   --ngs-field-padding-x: --spacing(4);
   --ngs-field-filled-bg: #f3f5ff;
   --ngs-dropdown-bg: rgba(255, 255, 255, 0.98);
   --ngs-dropdown-shadow: 0 20px 52px rgba(39, 52, 105, 0.18);
   --ngs-dropdown-radius: var(--ngs-radius-xl);
   --ngs-dropdown-border: 1px solid rgba(215, 222, 238, 0.9);
+  --ngs-dropdown-height: 2.625rem;
   --ngs-dialog-radius: 1.75rem;
   --ngs-dialog-shadow: 0 34px 86px rgba(39, 52, 105, 0.24);
   --ngs-overlay-backdrop-bg: rgba(23, 32, 51, 0.30);
@@ -782,7 +621,7 @@
   --ngs-table-header-cell-font-size: 0.75rem;
   --ngs-table-header-cell-font-weight: 800;
 
-  --ngs-nav-item-height: calc(2.875rem + var(--ngs-density-scale) * 1px);
+  --ngs-nav-item-height: var(--ngs-dropdown-height);
   --ngs-nav-items-gap: --spacing(1.5);
   --ngs-nav-item-padding: 0 --spacing(4);
   --ngs-nav-item-radius: var(--ngs-radius-full);
@@ -871,7 +710,7 @@
   --ngs-state-active-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.18), rgba(94, 234, 212, 0.16));
   --ngs-state-selected-bg: linear-gradient(135deg, #3730a3, #115e59);
   --ngs-state-selected-color: #eef2ff;
-  --ngs-state-focus-ring: rgba(165, 180, 252, 0.32);
+  --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
   --ngs-state-disabled-bg: #1b2138;
   --ngs-state-disabled-color: #697491;
   --ngs-state-disabled-border: #28304a;
@@ -902,21 +741,6 @@
   --ngs-nav-item-active-icon-color: #ccfbf1;
 }
 
-[data-ngs-density='compact'] {
-  --ngs-density-scale: -6;
-  --ngs-control-padding-x: --spacing(3);
-  --ngs-table-cell-padding: --spacing(1) --spacing(3);
-}
-
-[data-ngs-density='comfortable'] {
-  --ngs-density-scale: 0;
-}
-
-[data-ngs-density='spacious'] {
-  --ngs-density-scale: 6;
-  --ngs-control-padding-x: --spacing(5);
-}
-
 [data-ngs-radius='none'] { --ngs-control-radius: var(--ngs-radius-none); --ngs-dialog-radius: var(--ngs-radius-none); --ngs-nav-item-radius: var(--ngs-radius-none); --ngs-menu-item-radius: var(--ngs-radius-none); }
 [data-ngs-radius='small'] { --ngs-control-radius: var(--ngs-radius-sm); --ngs-dialog-radius: var(--ngs-radius-md); --ngs-nav-item-radius: var(--ngs-radius-sm); --ngs-menu-item-radius: var(--ngs-radius-sm); }
 [data-ngs-radius='medium'] { --ngs-control-radius: var(--ngs-radius-lg); --ngs-dialog-radius: var(--ngs-radius-xl); --ngs-nav-item-radius: var(--ngs-radius-lg); --ngs-menu-item-radius: var(--ngs-radius-lg); }

package/styles/themes/compact.scss

@@ -1,9 +1,8 @@
 @use "../_common";
 @use "../_global";
 
-:root,
-[data-ngs-density='compact'] {
-  --ngs-density-scale: -6;
+:root {
+  --ngs-density-scale: -9;
   --ngs-control-padding-x: --spacing(3);
   --ngs-table-cell-padding: --spacing(1) --spacing(3);
 }