@ngstarter-ui/components 1.0.28 → 1.0.31

package/styles/themes/compact.scss

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

package/styles/themes/enterprise.scss

@@ -0,0 +1,349 @@
+@use "../_common";
+@use "../_global";
+
+:root {
+  color-scheme: light;
+}
+
+:root,
+[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);
+
+  --ngs-color-primary: #173b66;
+  --ngs-color-on-primary: #ffffff;
+  --ngs-color-primary-container: #e3ebf5;
+  --ngs-color-on-primary-container: #0e2744;
+  --ngs-color-secondary: #536170;
+  --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-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);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-ngs-color-scheme='light']) {
+    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;
+  }
+}
+
+:root.dark,
+:root[data-ngs-color-scheme='dark'],
+.dark[data-ngs-theme='enterprise'],
+[data-ngs-theme='enterprise'][data-ngs-color-scheme='dark'] {
+  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;
+}