@elderbyte/ngx-starter 19.1.0-beta.2 → 19.1.0-beta.20

package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.scss

@@ -6,11 +6,45 @@
   border-radius: var(--elder-border-radius-sm);
   overflow: hidden;
   transition: background-color 0.5s;
+}
+
+.nav-link .mat-icon {
+  height: 32px;
+  width: 32px;
+  font-size: 24px;
+  padding: 4px;
+}
+
+.nav-link.nav-link-clickable {
+  cursor: pointer;
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high);
+    color: var(--md-sys-color-on-surface);
+    .mat-icon {
+      color: var(--md-sys-color-on-surface);
+    }
+  }
+}
+
+.nav-link.nav-link-disabled {
+  cursor: default;
+}
+
+.nav-link:hover {
+  background-color: var(--md-sys-color-surface-container-low);
+}
+
+.nav-link.nav-link-active {
+  background-color: var(--md-sys-color-surface-container-highest);
+  color: var(--md-sys-color-on-surface-container);
+  .mat-icon {
+    color: var(--md-sys-color-on-teriary);
+  }
+}
 
+.nav-link.nav-link-inactive {
+  color: var(--md-sys-color-on-surface);
   .mat-icon {
-    height: 32px;
-    width: 32px;
-    font-size: 24px;
-    padding: 4px;
+    color: var(--md-sys-color-on-surface);
   }
 }

package/src/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.scss

@@ -1,8 +1,8 @@
 .elder-dialog-panel {
-  background-color: var(--md-sys-color-surface-container-lowest);
+  background-color: var(--elder-dialog-panel-bg-color);
   color: var(--md-sys-color-on-surface);
 
   padding: 10px;
-  border-radius: var(--elder-border-radius-sm);
+  border-radius: var(--elder-pane-border-radius);
   box-shadow: var(--elder-box-shadow-default);
 }

package/src/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.scss

@@ -1,77 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($typography-config) {
-  $config: $typography-config; // TODO $typography-config
-  // The unit-less line-height from the font config.
-  $line-height: mat.line-height($config, body-1);
-  $font-size: mat.font-size($config, body-1);
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
-
-  @include elder-select-base.typography($typography-config);
-
-  .elder-multi-select {
-    font-family: mat.font-family($config);
-
-    .elder-select-input {
-      height: $line-height-em;
-    }
-
-    .elder-prefix-icon {
-      margin-left: 3px;
-    }
-
-    .elder-chip-input {
-      flex: 1 0 auto;
-      padding-left: 8px;
-    }
-
-    .elder-chip-input-select {
-      flex: 1 0 140px;
-      max-width: 100%;
-    }
-
-    .elder-browse-icon {
-      margin-right: 4px;
-    }
-  }
-}
-
-@mixin theme($config-or-theme) {
-  $color: mat.get-color-config($config-or-theme);
-
-  $typography: mat.define-typography-config();
-
-  @if $color != null {
-    @include elder-select-base.color($color);
-  }
-
-  @if $typography != null {
-    @include typography($typography);
-  }
-}
-
-.elder-chip-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.elder-trailing-icon {
-  color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-  opacity: 0.54;
-}
-
-.cdk-drag-preview {
-  // border-radius: var(--elder-border-radius-sm);
-  box-shadow: var(--elder-box-shadow-default);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}

package/src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component.scss

@@ -1,48 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($typography-config) {
-  @include elder-select-base.typography($typography-config);
-
-  .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
-
-    .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
-    }
-
-    .elder-prefix-icon {
-      margin-left: 3px;
-    }
-
-    .elder-chip-input {
-      flex: 1 0 auto;
-      padding-left: 8px;
-    }
-
-    .elder-chip-input-select {
-      flex: 1 0 140px;
-      max-width: 100%;
-    }
-
-    .elder-browse-icon {
-      margin-right: 4px;
-    }
-  }
-}
-
-@mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
-
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
-  }
-}

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -1,60 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($typography-config) {
-  @include elder-select-base.typography($typography-config);
-
-  .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
-
-    .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
-    }
-
-    .elder-prefix-icon {
-      margin-left: 3px;
-    }
-
-    .elder-chip-input {
-      flex: 1 0 auto;
-      padding-left: 8px;
-    }
-
-    .elder-chip-input-select {
-      flex: 1 0 140px;
-      max-width: 100%;
-    }
-
-    .elder-browse-icon {
-      margin-right: 4px;
-    }
-  }
-}
-
-@mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
-
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
-  }
-
-  .cdk-drag-preview {
-    box-shadow: var(--elder-box-shadow-default);
-  }
-
-  .cdk-drag-placeholder {
-    opacity: 0;
-  }
-
-  .cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  }
-}

package/src/lib/components/select/single/elder-select/elder-select.component.scss

@@ -1,58 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($config-or-theme) {
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
-
-  @include elder-select-base.typography($config-or-theme);
-
-  .elder-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
-
-    .elder-input-prefix-icon-container {
-      padding-right: 3px;
-    }
-  }
-
-  .elder-select-input {
-    height: $line-height-em;
-    font: inherit;
-  }
-
-  .elder-select-arrow {
-    cursor: pointer;
-  }
-}
-
-@mixin theme($config-or-theme) {
-  // @debug mat.get-theme-typography($config-or-theme, body-medium, line-height);
-  // @debug mat.get-theme-typography($config-or-theme, body-medium, font-family);
-  @include typography($config-or-theme);
-
-  @keyframes shrink {
-    0% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0.75);
-    }
-  }
-
-  .loading {
-    animation: shrink 0.3s ease-in-out infinite alternate;
-    -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
-  }
-
-  .clickable-icon {
-    cursor: pointer;
-  }
-
-  .full-width {
-    width: 100%;
-  }
-
-  .elder-select-dropdown-input {
-    cursor: pointer;
-  }
-}

package/src/lib/components/shell/header/elder-app-header/elder-app-header.component.scss

@@ -11,5 +11,5 @@
 }
 
 .elder-app-header-panel {
-  background-color: #0b284f; // TODO: replace in m3
+  background-color: var(--md-sys-color-primary);
 }

package/src/lib/components/toasts/standard-toast/standard-toast.component.scss

@@ -4,7 +4,7 @@
 
   &.elder-toast-type-warn {
     --elder-toast-message-color-title: var(--elder-toast-message-color-title-warn);
-    --mdc-filled-button-container-color: var(--md-sys-color-tertiary-container);
+    --mdc-filled-button-container-color: var(--md-sys-color-tertiary);
   }
 
   &.elder-toast-type-error {

package/theming/abstracts/_elder-design-tokens.scss

@@ -0,0 +1,190 @@
+@use 'sass:map';
+@use './elder-scss-variables' as config;
+
+@mixin elder-design-tokens() {
+  @include elder-badge-sizing();
+
+  & {
+    // bg color
+    --md-sys-color-background: var(--md-sys-color-surface-container-highest);
+    --mat-app-background-color: var(--md-sys-color-background);
+
+    // mat variables
+    --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
+    --mat-badge-small-size-text-size: 9px; // this is the mat2 setting, mat3 somehow sets this to 0, which hides the font, unclear why.
+    --mdc-dialog-container-shape: 16px; // make border-radius of dialog container smaller (default is 28px)
+    --mat-dialog-container-max-width: 80vw; // 80vw is mat 2 default, mat 3 default is very narrow: 560px;
+    --mat-toolbar-title-text-tracking: 0; // mat toolbar typography
+    --mat-toolbar-title-text-weight: 500; // mat toolbar typography
+    --mat-table-row-item-outline-color: var(--md-sys-color-outline-variant);
+    --mat-divider-color: var(--md-sys-color-outline-variant); // make divider color lighter
+    --mat-sidenav-container-elevation-shadow: var(--mat-app-elevation-shadow-level-16);
+    --mat-sidenav-container-background-color: var(--mat-app-background-color);
+    //--mdc-dialog-container-color: var(--mat-app-background-color);
+    --mdc-dialog-container-color: var(--md-sys-color-surface-container-lowest);
+    --mat-tab-header-divider-height: 0; // remove tab header divider
+    --mat-tab-header-inactive-label-text-color: var(--md-sys-color-outline); // make inactive tab text color lighter
+
+
+    // import fix for overflow of mat-icons, default is 40px in m3, in m2 it was 48px
+    --mdc-icon-button-state-layer-size: 48px;
+
+    // elder custom variables
+    --elder-border-radius-sm: 4px; // typical small border radius, inspired by mat 2
+    --elder-border-light: 1px solid var(--md-sys-color-outline-variant);
+    --elder-box-shadow-default: var(--mat-app-elevation-shadow-level-8);
+    --elder-scrollbar-width: 8px;
+    --elder-lightened-transparent-bg: rgba(255, 255, 255, 0.15);
+
+    // elder pane
+    --elder-pane-padding: #{map.get(config.$sizes, sm)};
+    --elder-pane-gap: #{map.get(config.$sizes, sm)};
+    --elder-pane-border-radius: var(
+      --mdc-outlined-card-container-shape,
+      12px
+    );
+    --elder-pane-bg-color: var(--md-sys-color-surface-container-lowest);
+    --elder-round-corner-side-padding: 10px;
+
+    // card header
+    --elder-card-header-padding: 15px 15px 5px 15px;
+
+    // cards, table etc bg
+    --mdc-elevated-card-container-color: var(--md-sys-color-surface-container-lowest);
+    --mdc-outlined-card-container-color: var(--mdc-elevated-card-container-color);
+    // --mat-table-background-color: transparent;
+    --mat-table-background-color: var(--md-sys-color-surface-container-lowest);
+    --mat-paginator-container-background-color: var(--mat-table-background-color);
+    --elder-grid-background-color: var(--mat-table-background-color);
+    //--mat-table-header-container-height: 56px; // 56px is default
+
+    // elder toast messages
+    --elder-toast-message-color-title-default: var(--md-sys-color-inverse-on-surface);
+    --elder-toast-message-color-title-warn: var(--md-sys-color-inverse-on-surface);
+    --elder-toast-message-color-title-error: var(--md-sys-color-inverse-on-surface);
+
+    // main nav top left button color
+    --elder-toolbar-main-nav-button-color: var(--md-sys-color-on-primary);
+    --elder-toolbar-main-nav-button-container-bg-color: var(--md-sys-color-primary);
+
+    // custom colors
+    --elder-blue: #{map.get(config.$custom-colors, elder-blue)};
+    --elder-gold: #{map.get(config.$custom-colors, elder-gold)};
+    --elder-gold-dark: #{map.get(config.$custom-colors, elder-gold-dark)};
+    --elder-gold-semi-dark: #{map.get(config.$custom-colors, elder-gold-semi-dark)};
+    --elder-gold-light: #{map.get(config.$custom-colors, elder-gold-light)};
+    --elder-gray-medium: #{map.get(config.$custom-colors, elder-gray-medium)};
+
+    --elder-color-highlight-strong: hsl(214, 18%, 85%);
+    --elder-color-highlight-strong: var(--elder-gold-light);
+    --elder-color-highlight-light: #EBEBEB;
+    --elder-color-highlight-variant: var(--md-sys-color-primary-container);
+
+    // chip colors
+    --elder-chip-color-state-none: #{map.get(config.$chip-colors, state-none)};
+    --elder-chip-color-state-open: #{map.get(config.$chip-colors, state-open)};
+    --elder-chip-color-state-in-progress: #{map.get(config.$chip-colors, state-in-progress)};
+    --elder-chip-color-state-completed: #{map.get(config.$chip-colors, state-completed)};
+    --elder-chip-color-state-warn: #{map.get(config.$chip-colors, state-warn)};
+    --elder-chip-color-state-error: #{map.get(config.$chip-colors, state-error)};
+    --elder-chip-color-state-other: #{map.get(config.$chip-colors, state-other)};
+
+    // chip colors dark
+    &.elder-dark-theme {
+      --elder-chip-color-state-none: #{map.get(config.$chip-colors-dark, state-none)};
+      --elder-chip-color-state-open: #{map.get(config.$chip-colors-dark, state-open)};
+      --elder-chip-color-state-in-progress: #{map.get(config.$chip-colors-dark, state-in-progress)};
+      --elder-chip-color-state-completed: #{map.get(config.$chip-colors-dark, state-completed)};
+      --elder-chip-color-state-warn: #{map.get(config.$chip-colors-dark, state-warn)};
+      --elder-chip-color-state-error: #{map.get(config.$chip-colors-dark, state-error)};
+      --elder-chip-color-state-other: #{map.get(config.$chip-colors-dark, state-other)};
+    }
+
+    // missing md3 color
+    --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
+    --md-sys-color-on-tertiary-fixed-dim: var(--md-sys-color-on-primary-fixed-dim);
+
+    // dialog
+    --elder-dialog-panel-bg-color: var(--md-sys-color-surface-container-lowest);
+
+    // data footer
+    --elder-data-element-footer-height: 48px;
+
+    // xy
+    --elder-round-form-field-outline: none;
+  }
+
+  &.elder-dark-theme {
+    --elder-dialog-panel-bg-color: var(--md-sys-color-surface-container);
+  }
+
+  // light theme overwrites
+  &.elder-light-theme {
+    --md-sys-color-primary: var(--elder-blue);
+    --md-sys-color-tertiary: var(--elder-gold);
+    --md-sys-color-tertiary-container: var(--elder-gold-light);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-surface);
+    --md-sys-color-secondary-container: #d8e3fa; // hsl(221, 77%, 91%)
+    --md-sys-color-secondary-container: hsl(214, 44%, 84%);
+    --md-sys-color-secondary-fixed: hsl(214, 44%, 89%);
+    // --md-sys-color-primary-container: hsl(214, 64%, 84%);
+    --md-sys-color-primary-container: #A6C7ED;
+    --md-sys-color-primary-fixed-dim: #95A6C7;
+    // --mdc-chip-outline-color: rgba(0, 0, 0, 0.25); // make chip outline color lighter
+    // --mdc-chip-label-text-color: rgba(0, 0, 0, 0.5); // maybe better use only on state colors
+    // --mdc-chip-with-icon-icon-color: var(--mdc-chip-label-text-color);
+  }
+
+  // dark theme overwrites
+  &.elder-dark-theme {
+    --elder-round-form-field-outline: solid 1px var(--md-sys-color-outline);
+    --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.4);
+    --md-sys-color-primary-container: var(--elder-gold-semi-dark);
+    --md-sys-color-primary-fixed-dim: var(--elder-gold-dark);
+    --elder-color-highlight-light: var(--elder-gray-medium);
+    --elder-color-highlight-strong: var(--elder-gold-semi-dark);
+    --elder-color-highlight-variant: var(--elder-gold-dark);
+    --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
+    --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
+    --md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
+    --md-sys-color-surface-container-highest: #191919;
+    --md-sys-color-surface-container-lowest: #262626;
+    --md-sys-color-error: #ff897d;
+    --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
+    --md-sys-color-surface-tint: var(--elder-gold-dark);
+    --elder-dark-gray: var(--md-sys-color-surface-container);
+    --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
+    --elder-dark-mode-color-primary: var(--md-sys-color-primary);
+    --elder-dark-mode-color-on-primary: var(--md-sys-color-on-primary);
+    --elder-dark-mode-color-surface: var(--md-sys-color-surface);
+    --elder-dark-mode-color-on-surface: var(--md-sys-color-on-surface);
+    // --mdc-chip-outline-color: rgba(255, 255, 255, 0.2); // make chip outline color lighter
+    // --mdc-chip-with-icon-icon-color: var(--mdc-chip-outline-color);
+    // --mdc-chip-label-text-color: rgba(255, 255, 255, 0.5); // maybe better use only on state colors
+    // --mdc-chip-with-icon-icon-color: var(--mdc-chip-label-text-color);
+  }
+}
+
+@mixin elder-badge-sizing() {
+  & {
+    // Use legacy MAT 2 badge sizing
+    --mat-badge-container-size: unset;
+    --mat-badge-small-size-container-size: unset;
+    --mat-badge-large-size-container-size: unset;
+    --mat-badge-legacy-container-size: 22px;
+    --mat-badge-legacy-small-size-container-size: 16px;
+    --mat-badge-legacy-large-size-container-size: 28px;
+    --mat-badge-container-offset: -11px 0;
+    --mat-badge-small-size-container-offset: -8px 0;
+    --mat-badge-large-size-container-offset: -14px 0;
+    --mat-badge-container-overlap-offset: -11px;
+    --mat-badge-small-size-container-overlap-offset: -8px;
+    --mat-badge-large-size-container-overlap-offset: -14px;
+    --mat-badge-container-padding: 0;
+    --mat-badge-small-size-container-padding: 0;
+    --mat-badge-large-size-container-padding: 0;
+    --mat-badge-line-height: var(--mat-badge-legacy-container-size);
+    --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-container-size);
+    --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
+  }
+}

package/theming/{system/_elder-config.scss → abstracts/_elder-scss-variables.scss}

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use 'sass:color';
+
 $sizes: (
   xs: 4px,
   sm: 8px,
@@ -19,6 +22,37 @@ $media: (
   xl: 1280px,
 );
 
+$custom-colors: (
+  elder-blue: #0b284f,
+  elder-gold: #b69f6a,
+  //elder-gold-dark: #423d32,
+  elder-gold-dark: #433D33,
+  elder-gold-semi-dark: #7f7054,
+  elder-gray-medium: #373737,
+  //elder-gold-semi-dark: #7E7154,
+  elder-gold-light: #f0e9d8,
+);
+
+$chip-colors: (
+  state-none: #cecfcf,
+  state-open: #e0e1e1,
+  state-in-progress: #bdd5e7,
+  state-completed: #b1ddce,
+  state-warn: #f4dab8,
+  state-error: #e6b6b6,
+  state-other: #cdc7e5,
+);
+
+$chip-colors-dark: (
+  state-none: color.adjust(map.get($chip-colors, state-none), $lightness: -65%),
+  state-open: color.adjust(map.get($chip-colors, state-open), $lightness: -45%),
+  state-in-progress: color.adjust(map.get($chip-colors, state-in-progress), $lightness: -45%),
+  state-completed: color.adjust(map.get($chip-colors, state-completed), $lightness: -45%),
+  state-warn: color.adjust(map.get($chip-colors, state-warn), $lightness: -45%),
+  state-error: color.adjust(map.get($chip-colors, state-error), $lightness: -45%),
+  state-other: color.adjust(map.get($chip-colors, state-other), $lightness: -45%),
+);
+
 $palettes: (
   primary: (
     0: #000000,

package/theming/{system/_elder-defaults.scss → abstracts/_elder-set-defaults-fn.scss}

@@ -1,18 +1,18 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use './elder-config' as settings;
+@use './elder-scss-variables' as config;
 
 /******************************
 Default values
 *******************************/
-$commonSizesXs: map.get(settings.$sizes, xs);
-$commonSizesSm: map.get(settings.$sizes, sm);
-$commonSizesMd: map.get(settings.$sizes, md);
-$commonSizesLg: map.get(settings.$sizes, lg);
-$commonSizesXl: map.get(settings.$sizes, xl);
-$commonSizesXxl: map.get(settings.$sizes, xxl);
+$commonSizesXs: map.get(config.$sizes, xs);
+$commonSizesSm: map.get(config.$sizes, sm);
+$commonSizesMd: map.get(config.$sizes, md);
+$commonSizesLg: map.get(config.$sizes, lg);
+$commonSizesXl: map.get(config.$sizes, xl);
+$commonSizesXxl: map.get(config.$sizes, xxl);
 
-$densityFormField: map.get(settings.$extra, form-field-density);
+$densityFormField: map.get(config.$extra, form-field-density);
 
 /******************************
 Validates $theme and sets default value if null

package/theming/abstracts/_elder-starter-theme.scss

@@ -0,0 +1,47 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@forward '../abstracts/elder-set-defaults-fn';
+@use 'elder-design-tokens' as elder-design-tokens;
+@use '../abstracts/elder-set-defaults-fn' as elder-set-defaults-fn;
+@use '../base/elder-m2-legacy-base' as elder-m2-legacy-base;
+@use '../base/elder-fixes-base' as elder-fixes;
+@use '../base/elder-common-base' as elder-common;
+@use '../base/elder-form-base' as elder-form;
+@use '../base/elder-component-themes' as elder-component-themes;
+@use '../utilities/elder-flex-layout-utils' as elder-flex-layout-utils;
+@use '../utilities/elder-color-utils' as elder-color-utils;
+@use '../utilities/elder-typography-utils' as elder-typography-utils;
+@use '../utilities/elder-common-utils' as elder-common-utils;
+@use '../utilities/elder-layout-utils' as elder-layout-utils;
+
+// Create a theme.
+@mixin starter-theme($theme) {
+  $theme: elder-set-defaults-fn.validate-and-set-defaults($theme);
+
+  // ATM we need to render this here, because first need to set defaults for form-field density
+  @include mat.form-field-density(
+    map.get($theme, elder, density, form-field)
+  ); // TODO: improve density setup
+
+  // design tokens
+  @include elder-design-tokens.elder-design-tokens();
+
+  // base styles
+  @include elder-fixes.elder-fixes-base($theme);
+  @include elder-common.elder-common-base($theme);
+  @include elder-form.elder-form-base($theme);
+  @include elder-m2-legacy-base.elder-m2-legacy-base($theme);
+
+  // utilitiy styles
+  @include elder-flex-layout-utils.elder-flex-layout-utils($theme);
+  @include elder-layout-utils.elder-layout-utils($theme);
+  @include elder-color-utils.elder-color-utils();
+  @include elder-typography-utils.elder-typography-utils();
+  @include elder-common-utils.elder-common-utils();
+
+  // component themes rendered in global css
+  @include elder-component-themes.theme(
+    $theme
+  ); // TODO: Move component themes directly into components
+}