@ngx-stoui/core 12.0.3 → 12.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-stoui/core",
-  "version": "12.0.3",
+  "version": "12.0.7",
   "peerDependencies": {
     "@angular/common": "^12.0.2",
     "@angular/core": "^12.0.2",

package/style/_fonts.scss

@@ -1,2 +1,3 @@
 @import url("https://eds-static.equinor.com/font/equinor-font.css");
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@import url("https://fonts.googleapis.com/css?family=Material+Icons");
+@import url("https://fonts.googleapis.com/css?family=Material+Icons+Outlined");

package/style/grid.scss

@@ -0,0 +1,16 @@
+@mixin grid($col-count: 12, $child-selector: 'grid-column', $margin: 0 24px 40px) {
+  display: grid;
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+  margin: $margin;
+  grid-template-columns: repeat($col-count, 1fr);
+  .#{$child-selector} {
+    display: block;
+    grid-column: span 1;
+  }
+  @for $i from 1 through $col-count {
+    .#{$child-selector}-#{$i} {
+      grid-column: span $i;
+    }
+  }
+}

package/style/sto-dialog.scss

@@ -3,7 +3,6 @@
 @import "../style/functions";
 @import "./theme/typography";
 
-
 @mixin sto-dialog-typography($config) {
   .sto-dialog {
     .mat-dialog-title {
@@ -36,11 +35,6 @@
     margin: 0;
     padding: 12px 24px 16px;
 
-    &.scroll-lines {
-      border-top: solid 1px $gray-light;
-      border-bottom: solid 1px $gray-light;
-    }
-
     .sto-selection-list {
       .sto-selection-list__item {
         .mat-list-item-content.mat-list-item-content-reverse {

package/style/theme/_colors.scss

@@ -1,4 +1,5 @@
 @use '~@angular/material' as mat;
+@use 'sass:map';
 
 $sto-warning-map: (
   highlight: #FFE7D6,
@@ -117,9 +118,6 @@ $sto-indicators-map: (
   warning: $sto-warning,
   danger: $sto-danger
 );
-$sto-indicators: (
-  indicators: $sto-indicators-map
-);
 
 $sto-dark-indicators-map: (
   success: $sto-dark-success,
@@ -159,3 +157,73 @@ $accent: mat.define-palette($sto-accent, highlight, resting, hover);
 $accent-dark: mat.define-palette($sto-dark-accent, highlight, resting, hover);
 
 $sto-warn: mat.define-palette(mat.$red-palette);
+
+$eds-light-foreground: (
+  secondary: #565656,
+  primary: #3D3D3D,
+  tertiary: #6F6F6F,
+  disabled: #BEBEBE,
+  divider: #DCDCDC,
+);
+
+@function theme-foreground($foreground) {
+  @return (
+    base: map-get($foreground, primary),
+    divider: map-get($foreground, divider),
+    dividers: map-get($foreground, divider),
+    disabled: map-get($foreground, disabled),
+    disabled-button: map-get($foreground, disabled),
+    disabled-text: map-get($foreground, disabled),
+    hint-text: map-get($foreground, disabled),
+    secondary-text: map-get($foreground, secondary),
+    icon: map-get($foreground, secondary),
+    icons: map-get($foreground, secondary),
+    text: map-get($foreground, primary),
+    slider-min: map-get($foreground, primary),
+    slider-off: map-get($foreground, disabled),
+    slider-off-active: map-get($foreground, disabled),
+  );
+};
+
+$eds-light-background: (
+  default: #FFFFFF,
+  semi-transparent: rgba(255, 255, 255, 0.2),
+  light: #F7F7F7,
+  medium: #DCDCDC,
+  info: #D5EAF4,
+  warning: #FFE7D6,
+  danger: #FFC1C1,
+  scrim: rgba(0, 0, 0, 0.4),
+  overlay: rgba(0, 0, 0, 0.8),
+  disabled: #EAEAEA,
+  hover: #EAEAEA,
+  focus: #007079
+);
+
+@function theme-background($background) {
+  @return (
+    app-bar:    map-get($background, default),
+    background: map-get($background, default),
+    hover:      map-get($background, hover),
+    card:       map-get($background, default),
+    dialog:     map-get($background, default),
+    disabled-button: map-get($background, disabled),
+    raised-button: map-get($background, default),
+    focused-button: map-get($background, focus),
+    selected-button: map.get($background, light),
+    selected-disabled-button: map-get($background, disabled),
+    disabled-button-toggle: map-get($background, disabled),
+    unselected-chip: map.get($background, light),
+    disabled-list-option: map-get($background, disabled),
+    tooltip: map.get($background, overlay),
+  )
+};
+
+$sto-light-fg: theme-foreground($eds-light-foreground);
+
+
+$sto-indicators: (
+  indicators: $sto-indicators-map,
+  foreground: $sto-light-fg,
+  background: theme-background($eds-light-background)
+);

package/style/theme/_dialog.scss

@@ -0,0 +1,29 @@
+@import "theme";
+@import "typography";
+
+@mixin dialog-theme($theme, $variables) {
+  $border-color: map_get($variables, border-color);
+  $background-color: map_get($variables, app-bar);
+  $divider: map-get($variables, border-color);
+
+  .sto-dialog .mat-dialog-container {
+
+    .mat-dialog-content {
+      border-top: solid 1px $divider;
+
+      &.scroll-lines {
+        border-bottom: solid 1px $divider;
+      }
+    }
+  }
+}
+
+// Include theme styles for your custom components.
+body:not(.sto-dark-theme) {
+  @include dialog-theme($sto-theme, $variables);
+}
+
+body.sto-dark-theme {
+  @include dialog-theme($sto-dark-theme, $dark-variables);
+}
+

package/style/theme/_filterpanel.scss

@@ -15,48 +15,17 @@
 
   .sto-filter.mat-expansion-panel {
     .mat-expansion-panel-header {
-      background-color: $background-color;
 
       &[aria-disabled=true] {
         color: $color;
       }
+    }
 
-      .mat-icon-button, .mat-button {
-        color: $icon-color;
-
-        &:hover {
-          color: $icon-hover;
-        }
-      }
-
-      .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
-        background-color: transparent;
-      }
-
-      .mat-button-toggle-standalone.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-        background-color: $selected-color;
-      }
-
-      &:not(.mat-expanded) {
-        border-bottom: solid 1px $border-color;
-      }
-
-      &.mat-expanded:hover {
-        // Y THO? Looks shit.
-        //background-color: $hover-color;
-        background-color: $background-color;
-      }
 
-      &.mat-expanded:focus {
-        // Y THO? Looks shit.
-        //background-color: $selected-color;
-        background-color: $background-color;
-      }
+    &:not(.mat-expanded) {
+      // border-bottom: solid 1px $border-color;
     }
 
-    .separator {
-      background-color: $border-color;
-    }
   }
 
 }

package/style/theme/_navigation-drawer.scss

@@ -1,29 +1,79 @@
+// Trying to move this into drawer component
+/*
 @use '~@angular/material' as mat;
 @import "theme";
 @import "typography";
 
 @mixin navigation-drawer-theme($theme, $variables) {
   $primary: map_get($variables, primary);
+  $colors: mat.get-color-config($theme);
+  $primary-palette: map-get($colors, primary);
+  $selected-bg: map-get($primary-palette, highlight);
   $color: map_get($variables, color);
+  $secondary: map_get($variables, secondary);
   $hover: map_get($variables, hover-bg);
   $disabled: map_get($variables, disabled);
   $bg-color: map_get($variables, card-bg);
   $border-color: map_get($variables, border-color);
+  $active-bg: map_get($variables, selected-bg);
+
+  .mat-menu-item.no-hover {
+    color: $secondary;
+  }
+  .mat-menu-item.no-hover:hover:not([disabled]) {
+    background-color: $bg-color;
+  }
+
+  a.mat-menu-item.active-menu-route {
+    background-color: $selected-bg;
+  }
+  a.mat-menu-item:hover {
+    text-shadow:0 0 1px $color;
+  }
 
 
   .sto-nav-drawer {
     background-color: $bg-color;
+
+    a.mat-button {
+      color: $primary;
+
+      &.active {
+        background-color: $active-bg;
+      }
+
+      .mat-icon {
+        color: $primary;
+      }
+    }
+
     button:not(.mat-button-disabled) .mat-icon {
       color: $primary;
     }
+
+    a.sto-nav-drawer--expanded__item {
+      text-decoration: none;
+
+      &:hover {
+        background-color: $hover;
+      }
+
+      &.active {
+        font-weight: bold;
+      }
+    }
+
     .sto-nav-drawer--expanded__item:not(.disabled) .mat-icon {
       color: $primary;
     }
+
     sto-nav-drawer-list-item {
       border-color: rgba($primary, 0.2);
+
       a.active span {
         border-color: $primary;
       }
+
       &:hover {
         background-color: $hover;
       }
@@ -79,3 +129,4 @@ body:not(.sto-dark-theme) {
 .mat-typography.sto-l-typography {
   @include navigation-drawer-typography($sto-l-typography);
 }
+*/

package/style/theme/_theme-variables.scss

@@ -31,7 +31,7 @@
   $card-bg: map_get($background, card);
   $hover-bg-color: mat.get-color-from-palette($background, 'hover');
   $hover-color: mat.get-color-from-palette($foreground, slider-off-active);
-  $selected-color: mat.get-color-from-palette($background, hover, 0.12);
+  $selected-color: mat.get-color-from-palette($background, selected-button);
   $border-color: mat.get-color-from-palette($foreground, divider);
   $app-bar: mat.get-color-from-palette($background, 'app-bar');
 

package/style/theme/components.scss

@@ -14,3 +14,4 @@
 @import "./sto-indicators";
 @import "./wysiwyg";
 @import "./navigation-drawer";
+@import "./dialog";