@ngx-stoui/core 21.0.6 → 21.0.8

package/ngx-stoui.css

@@ -102,6 +102,91 @@
   color-scheme: dark;
 }
 
+/**
+ * CDK Overlay Theming
+ *
+ * Autocomplete, select, and datepicker panels render in the CDK
+ * overlay container at document.body level. EDS token overrides
+ * ensure consistent styling outside the component tree.
+ */
+.cdk-overlay-container {
+  /* Option panels */
+  --mat-option-label-text-color: var(
+    --eds_text_static_icons__default,
+    light-dark(#3d3d3d, #ffffff)
+  );
+  --mat-option-hover-state-layer-color: var(
+    --eds_interactive_table__cell__fill_hover,
+    light-dark(#eaeaea, #324d62)
+  );
+  --mat-option-focus-state-layer-color: var(
+    --eds_interactive_table__cell__fill_hover,
+    light-dark(#eaeaea, #324d62)
+  );
+  --mat-option-selected-state-layer-color: var(
+    --eds_interactive_primary__selected_highlight,
+    light-dark(#e6faec, #007079)
+  );
+  --mat-option-selected-state-label-text-color: var(
+    --eds_text_static_icons__default,
+    light-dark(#3d3d3d, #ffffff)
+  );
+  --mat-option-label-text-font: Equinor, sans-serif;
+  --mat-option-label-text-size: 0.875rem;
+  /* Autocomplete */
+  --mat-autocomplete-background-color: var(
+    --eds_ui_background__default,
+    light-dark(#ffffff, #243746)
+  );
+  /* Select */
+  --mat-select-panel-background-color: var(
+    --eds_ui_background__default,
+    light-dark(#ffffff, #243746)
+  );
+  /* Datepicker */
+  --mat-datepicker-calendar-date-text-color: var(
+    --eds_text_static_icons__default,
+    light-dark(#3d3d3d, #ffffff)
+  );
+  --mat-datepicker-calendar-date-hover-state-background-color: var(
+    --eds_interactive_table__cell__fill_hover,
+    light-dark(#eaeaea, #324d62)
+  );
+  --mat-datepicker-calendar-date-focus-state-background-color: var(
+    --eds_interactive_table__cell__fill_hover,
+    light-dark(#eaeaea, #324d62)
+  );
+  --mat-datepicker-calendar-date-selected-state-background-color: var(
+    --eds_interactive_primary__resting,
+    light-dark(#007079, #97cace)
+  );
+  --mat-datepicker-calendar-date-selected-state-text-color: var(
+    --eds_text_static_icons__primary_white,
+    light-dark(#ffffff, #000000)
+  );
+  --mat-datepicker-calendar-date-today-outline-color: var(
+    --eds_interactive_primary__resting,
+    light-dark(#007079, #97cace)
+  );
+  --mat-datepicker-calendar-container-background-color: var(
+    --eds_ui_background__default,
+    light-dark(#ffffff, #243746)
+  );
+  --mat-datepicker-calendar-header-text-color: var(
+    --eds_text_static_icons__default,
+    light-dark(#3d3d3d, #ffffff)
+  );
+  --mat-datepicker-calendar-body-label-text-color: var(
+    --eds_text_static_icons__tertiary,
+    light-dark(#6f6f6f, #9ca6ac)
+  );
+  --mat-datepicker-calendar-text-font: Equinor, sans-serif;
+}
+
+body.sto-dark-theme .cdk-overlay-container {
+  color-scheme: dark;
+}
+
 .sto-grid, .sto-f-grid {
   display: grid;
   gap: 0.5rem;
@@ -172,21 +257,21 @@ input::-webkit-inner-spin-button {
 }
 
 h1 {
-  --mat-sys-body-large-size: 1.7rem;
+  --mat-sys-body-large-size: calc(var(--sto-base-font-size, 13px) * 1.7);
   --mat-sys-body-large-line-height: 1.4;
   --mat-sys-body-large-weight: 400;
   font: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size)/var(--mat-sys-body-large-line-height) var(--application-font);
 }
 
 h2 {
-  --mat-sys-body-large-size: 1.6rem;
+  --mat-sys-body-large-size: calc(var(--sto-base-font-size, 13px) * 1.6);
   --mat-sys-body-large-line-height: 1.4;
   --mat-sys-body-large-weight: 400;
   font: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size)/var(--mat-sys-body-large-line-height) var(--application-font);
 }
 
 h3 {
-  --mat-sys-body-large-size: 1.53846rem;
+  --mat-sys-body-large-size: calc(var(--sto-base-font-size, 13px) * 1.53846);
   --mat-sys-body-large-line-height: 1.4;
   --mat-sys-body-large-weight: 400;
   font: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size)/var(--mat-sys-body-large-line-height) var(--application-font);
@@ -194,21 +279,21 @@ h3 {
 }
 
 h4 {
-  --mat-sys-body-large-size: 1.23077rem;
+  --mat-sys-body-large-size: calc(var(--sto-base-font-size, 13px) * 1.23077);
   --mat-sys-body-large-line-height: 1.4;
   --mat-sys-body-large-weight: 400;
   font: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size)/var(--mat-sys-body-large-line-height) var(--application-font);
 }
 
 h5 {
-  --mat-sys-body-large-size: 0.9rem;
+  --mat-sys-body-large-size: calc(var(--sto-base-font-size, 13px) * 0.9);
   --mat-sys-body-large-line-height: 1;
   --mat-sys-body-large-weight: 400;
   font: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size)/var(--mat-sys-body-large-line-height) var(--application-font);
 }
 
 h6 {
-  --mat-sys-body-large-size: 0.8rem;
+  --mat-sys-body-large-size: calc(var(--sto-base-font-size, 13px) * 0.8);
   --mat-sys-body-large-line-height: 1.25;
   --mat-sys-body-large-weight: 400;
   font: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size)/var(--mat-sys-body-large-line-height) var(--application-font);
@@ -1185,7 +1270,8 @@ span.sortable {
   cursor: pointer;
 }
 
-[data-icon]::before {
+.sto-datatable [data-icon]::before,
+.sto-mdl-table [data-icon]::before {
   font-family: "Material Icons" !important;
   content: attr(data-icon);
   font-style: normal !important;
@@ -1382,8 +1468,8 @@ span.sortable {
   --mat-progress-bar-track-shape: 0;
   --mat-progress-bar-active-indicator-color: var(--mat-sys-primary);
   --mat-progress-bar-track-color: var(--mat-sys-surface-variant);
-  --mat-tooltip-container-color: var(--mat-sys-inverse-surface);
   --mat-tooltip-container-shape: 4px;
+  --mat-tooltip-container-color: var(--mat-sys-inverse-surface);
   --mat-tooltip-supporting-text-color: var(--mat-sys-inverse-on-surface);
   --mat-tooltip-supporting-text-font: var(--mat-sys-body-small-font);
   --mat-tooltip-supporting-text-line-height: var(--mat-sys-body-small-line-height);
@@ -2233,28 +2319,49 @@ span.sortable {
   --mat-timepicker-container-shape: 4px;
   --mat-timepicker-container-background-color: var(--mat-sys-surface-container);
   --mat-timepicker-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  --sto-base-font-size: 13px;
   --application-font: Equinor, Roboto, sans-serif;
   --mat-sys-body-large-font: var(--application-font);
   --mat-sys-body-large-weight: 400;
-  --mat-sys-body-large-size: 1rem;
+  --mat-sys-body-large-size: var(--sto-base-font-size);
   --mat-sys-body-large-line-height: 1.55;
+  --mat-sys-body-medium-font: var(--application-font);
+  --mat-sys-body-medium-weight: 400;
+  --mat-sys-body-medium-size: var(--sto-base-font-size);
+  --mat-sys-body-medium-line-height: 1.538;
+  --mat-sys-body-small-font: var(--application-font);
+  --mat-sys-body-small-weight: 400;
+  --mat-sys-body-small-size: calc(var(--sto-base-font-size) * 0.846);
+  --mat-sys-body-small-line-height: 1.45;
   --mat-sys-label-medium-font: var(--application-font);
-  --mat-sys-label-medium-size: 1.25rem;
+  --mat-sys-label-medium-size: calc(
+    var(--sto-base-font-size) * 1.25
+  );
   --mat-sys-label-medium-line-height: 1.333;
   --mat-sys-label-large-font: var(--application-font);
-  --mat-sys-label-large-size: 1.077rem;
+  --mat-sys-label-large-size: calc(
+    var(--sto-base-font-size) * 1.077
+  );
   --mat-sys-label-large-line-height: 1.714;
   --mat-sys-headline-large-font: var(--application-font);
-  --mat-sys-headline-large-size: 2.154rem;
+  --mat-sys-headline-large-size: calc(
+    var(--sto-base-font-size) * 2.154
+  );
   --mat-sys-headline-large-line-height: 1.571;
   --mat-sys-headline-medium-font: var(--application-font);
-  --mat-sys-headline-medium-size: 1.846rem;
+  --mat-sys-headline-medium-size: calc(
+    var(--sto-base-font-size) * 1.846
+  );
   --mat-sys-headline-medium-line-height: 1.333;
   --mat-sys-title-large-font: var(--application-font);
-  --mat-sys-title-large-size: 1.538rem;
+  --mat-sys-title-large-size: calc(
+    var(--sto-base-font-size) * 1.538
+  );
   --mat-sys-title-large-line-height: 1.4;
   --mat-sys-title-medium-font: var(--application-font);
-  --mat-sys-title-medium-size: 1.231rem;
+  --mat-sys-title-medium-size: calc(
+    var(--sto-base-font-size) * 1.231
+  );
   --mat-sys-title-medium-line-height: 1.5;
   --mat-sys-primary: var(--primary-resting);
   --mat-sys-on-primary: var(--primary-contrast-resting);
@@ -2319,7 +2426,6 @@ span.sortable {
   --mat-menu-container-shape: var(--mat-sys-corner-small);
   --mat-select-disabled-trigger-text-color: var(--text-disabled);
   --mat-select-panel-background-color: var(--bg-card);
-  --mat-select-trigger-text-size: var(--mat-sys-body-small-size, 1em);
   --mat-autocomplete-container-shape: var(--mat-sys-corner-small);
   --mat-snack-bar-container-shape: var(--mat-sys-corner-small);
   --mat-tooltip-supporting-text-color: var(--bg-card);
@@ -2348,9 +2454,7 @@ span.sortable {
   --mat-table-row-item-label-text-weight: 400;
   --mat-table-row-item-outline-color: var(--divider);
   --mat-table-row-item-outline-width: 1px;
-  --mat-form-field-container-height: 42px;
-  --mat-form-field-container-text-line-height: var(--mat-sys-body-medium-line-height, 1.538);
-  --mat-form-field-container-text-size: var(--mat-sys-body-medium-size, 1em);
+  --mat-form-field-container-text-line-height: 1.538;
   --mat-form-field-container-vertical-padding: 6px;
   --mat-form-field-disabled-input-text-placeholder-color: var(--text-disabled);
   --mat-form-field-disabled-leading-icon-color: var(--icon-disabled);
@@ -2368,7 +2472,6 @@ span.sortable {
   --mat-form-field-filled-with-label-container-padding-top: 16px;
   --mat-form-field-hover-state-layer-opacity: 0;
   --mat-form-field-subscript-text-line-height: 1.182;
-  --mat-form-field-subscript-text-size: 0.846em;
   --mat-slide-toggle-selected-handle-color: var(--mat-sys-on-primary);
   --mat-slide-toggle-selected-hover-handle-color: var(--mat-sys-on-primary);
   --mat-slide-toggle-selected-focus-handle-color: var(--mat-sys-on-primary);
@@ -2386,20 +2489,75 @@ span.sortable {
   --mat-progress-bar-active-indicator-height: 4px;
   --mat-progress-bar-track-color: var(--bg-app);
   --mat-progress-bar-track-height: 4px;
-  --mat-slider-label-label-text-size: 0.6rem;
+  --mat-slider-label-label-text-size: calc(var(--sto-base-font-size) * 0.6);
+  --mat-form-field-container-text-size: initial;
+  --mat-form-field-filled-label-text-size: initial;
+  --mat-form-field-outlined-label-text-size: initial;
+  --mat-form-field-subscript-text-size: initial;
+  --mat-select-trigger-text-size: initial;
+  --mat-expansion-container-text-size: initial;
+  --mat-expansion-header-text-size: initial;
+  --mat-option-label-text-size: initial;
+  --mat-slide-toggle-label-text-size: initial;
+  --mat-checkbox-label-text-size: initial;
+  --mat-button-text-label-text-size: initial;
+  --mat-button-filled-label-text-size: initial;
+  --mat-button-protected-label-text-size: initial;
+  --mat-button-outlined-label-text-size: initial;
+  --mat-button-tonal-label-text-size: initial;
+  --mat-button-toggle-label-text-size: initial;
+  --mat-menu-item-label-text-size: initial;
+  --mat-slider-label-label-text-size: initial;
+  --mat-form-field-container-height: initial;
+  --mat-form-field-filled-with-label-container-padding-top: initial;
 }
 
 .sto-sm-typography {
   font: 400 10px/20px var(--application-font);
-  font-size: 10px;
+  --sto-base-font-size: 10px;
+  --mat-sys-body-large-size: 10px;
+  --mat-sys-body-medium-size: 10px;
+  --mat-sys-body-small-size: calc(10px * 0.846);
+  --mat-sys-label-large-size: calc(10px * 1.077);
+  --mat-sys-label-medium-size: calc(10px * 1.25);
+  --mat-sys-title-large-size: calc(10px * 1.538);
+  --mat-sys-title-medium-size: calc(10px * 1.231);
+  --mat-sys-headline-large-size: calc(10px * 2.154);
+  --mat-sys-headline-medium-size: calc(10px * 1.846);
+  --mat-form-field-container-height: calc(10px * 3.23);
+  --mat-form-field-filled-with-label-container-padding-top: calc(10px * 1.23);
 }
 
 .sto-m-typography {
   font: 400 13px/20px var(--application-font);
+  --sto-base-font-size: 13px;
+  --mat-sys-body-large-size: 13px;
+  --mat-sys-body-medium-size: 13px;
+  --mat-sys-body-small-size: calc(13px * 0.846);
+  --mat-sys-label-large-size: calc(13px * 1.077);
+  --mat-sys-label-medium-size: calc(13px * 1.25);
+  --mat-sys-title-large-size: calc(13px * 1.538);
+  --mat-sys-title-medium-size: calc(13px * 1.231);
+  --mat-sys-headline-large-size: calc(13px * 2.154);
+  --mat-sys-headline-medium-size: calc(13px * 1.846);
+  --mat-form-field-container-height: calc(13px * 3.23);
+  --mat-form-field-filled-with-label-container-padding-top: calc(13px * 1.23);
 }
 
 .sto-l-typography {
   font: 400 16px/28px var(--application-font);
+  --sto-base-font-size: 16px;
+  --mat-sys-body-large-size: 16px;
+  --mat-sys-body-medium-size: 16px;
+  --mat-sys-body-small-size: calc(16px * 0.846);
+  --mat-sys-label-large-size: calc(16px * 1.077);
+  --mat-sys-label-medium-size: calc(16px * 1.25);
+  --mat-sys-title-large-size: calc(16px * 1.538);
+  --mat-sys-title-medium-size: calc(16px * 1.231);
+  --mat-sys-headline-large-size: calc(16px * 2.154);
+  --mat-sys-headline-medium-size: calc(16px * 1.846);
+  --mat-form-field-container-height: calc(16px * 3.23);
+  --mat-form-field-filled-with-label-container-padding-top: calc(16px * 1.23);
 }
 
 .mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-stoui/core",
-  "version": "21.0.6",
+  "version": "21.0.8",
   "author": {
     "name": "Ronnie Laugen",
     "email": "rhenri@equinor.com"
@@ -48,5 +48,6 @@
   },
   "module": "fesm2022/ngx-stoui-core.mjs",
   "typings": "types/ngx-stoui-core.d.ts",
-  "sideEffects": false
+  "sideEffects": false,
+  "type": "module"
 }