@energycap/components 0.37.6-ECAP-19366-ch-create-dialog.20230911-1603 → 0.37.7-ECAP-18600-ech-theme-updates.20230912-2220

package/src/styles/mixins/_button-base.scss

@@ -1,22 +1,25 @@
-@import 'nav-control-base';
-
 @mixin button {
-  @include nav-item(
-    $height: $control-height,
-    $line-height: $control-line-height,
-    $borders:true,
-    $selector: button
-  );
-
   font-size: var(--ec-font-size-action);
+  height: 2rem;
   line-height: 1.25rem;
-  justify-content: center;
-  border: $control-border-width solid transparent;
+  padding: 0.3125rem .75rem;
+  border: 0;
   border-radius: var(--ec-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 
   .label {
-    white-space: nowrap;
+    display: flex;
+    align-items: center;
     justify-content: center;
+    white-space: nowrap;
+    flex: auto;
+  }
+
+  .ec-icon {
+    flex: none;
   }
 
   .ec-icon + .label {
@@ -27,35 +30,56 @@
   &.has-badge {
     padding-right: 0.0625rem;
   }
+
+  &:focus {
+    outline: none;
+    position: relative;
+    z-index: 1;
+  }
+
+  &:disabled {
+    background-color: var(--ec-background-color-disabled);
+    border: 1px solid var(--ec-form-control-border-color-disabled);
+    color: var(--ec-color-disabled-dark);
+    opacity: var(--ec-form-control-opacity-disabled);
+    cursor: default;
+  }
 }
 
 @mixin primary-button {
-  background-color: var(--ec-button-background-color-primary, var(--ec-color-green-3));
-  border-color: var(--ec-border-color);
-  color: var(--ec-button-color-primary, var(--ec-color-primary-dark));
+  background-color: var(--ec-button-background-color-primary, var(--ec-color-gray-8));
+  color: var(--ec-button-color-primary, var(--ec-color-primary-light));
 
   &:active:not(:disabled) {
-    background-color: var(--ec-button-background-color-primary, var(--ec-color-green-3));
-    color: var(--ec-button-color-primary, var(--ec-color-primary-dark));
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
   }
 
   &:focus {
-    box-shadow: var(--ec-button-box-shadow-focus-primary, #{$control-shadow-focused});
+    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white)));
   }
 
   .ec-icon {
-    color: var(--ec-button-color-icon-primary, var(--ec-color-icon));
+    color: var(--ec-button-color-icon-primary, var(--ec-color-primary-light));
   }
 }
 
 @mixin secondary-button {
-  background-color: var(--ec-background-color);
-  border-color: var(--ec-button-border-color-secondary, var(--ec-border-color));
+  background-color: var(--ec-button-background-color-secondary, var(--ec-background-color));
+  border: 1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));
   color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
 
   &:active:not(:disabled) {
-    background-color: var(--ec-background-color);
-    color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+    border-color: transparent;
+  }
+
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-focus-secondary, (0 0 0 2px var(--ec-border-color-focus)));
+    border-color: var(--ec-button-border-color-secondary-focus, transparent);
   }
 
   .ec-icon {
@@ -63,24 +87,13 @@
   }
 }
 
+// Deprecated
 @mixin common-button {
-  background-color: $blue-3;
-  border-color: $blue-4;
-  color: var(--ec-color-primary-light);
-
-  .ec-icon {
-    color: var(--ec-button-color-icon, inherit);
-  }
-
-  &:active:not(:disabled) {
-    background-color: $blue-4;
-    border-color: $blue-6;
-  }  
+  @include secondary-button();
 }
 
 @mixin danger-button {
   background-color: var(--ec-color-danger);
-  border-color: var(--ec-border-color);
   color: var(--ec-color-primary-light);
 
   .ec-icon {
@@ -88,37 +101,52 @@
   }
 
   &:active:not(:disabled) {
-    background-color: var(--ec-color-danger);
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white)));
   }
 }
 
 @mixin icon-button{
   background-color: transparent;
   color: var(--ec-button-color-icon, var(--ec-color-icon));
-  width: $control-height;
+  width: 2rem;
   padding: 0;
 
   .ec-icon {
     height: 1rem;
     margin: 0;
     padding: 0;
-    color: var(--ec-button-color-icon, var(--ec-color-icon));
+    color: inherit
   }
 
   &:hover:not(:disabled) {
-    @include nav-hover('span');
+    background-color: var(--ec-background-color-hover);
 
     .ec-icon {
       color: var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)));
     }
   }
 
+  &:active:not(:disabled),
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-background-color-selected);
+  }
+
   &:disabled {
     background-color: transparent;
     border-color: transparent;
 
     .ec-icon {
-      opacity: .5;
+      color: var(--ec-color-disabled-dark);
     }
   }
 
@@ -142,9 +170,9 @@
     color: var(--ec-button-color-icon-#{$type}, $icon-color);
   }
 
-  &:active:not(:disabled) {
-    background-color: transparent;
-    color: $color;
+  &:active:not(:disabled),
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
   }
 
   &:disabled {

package/src/styles/mixins/_control-base.scss

@@ -87,25 +87,10 @@ $control-bg-read-only: rgba($black, .12);
   opacity: $control-opacity-disabled;
 
   @if $type == form {
-    &:required,
-    &:required.is-empty {
-      background-image: none;
-      padding-left: $control-padding-x;
-
-      // We need to define these again because the :required styles override
-      // the background-color and border-color we set above
-      @if $borders {
-        background-color: $control-bg-disabled;
-        border-color: var(--ec-border-color-control-disabled);
-      }
-
-      & + .icon-required {
-        display: none;
-      }
-    }
+    
   }
 }
-
+  
 @mixin control-invalid($borders: true) {
   @if $borders {
     &:not(:focus) {

package/src/styles/mixins/_form-control-base.scss

@@ -5,30 +5,28 @@
 $form-control-icon-size: 1rem;
 $form-control-icon-position: .5rem center;
 $form-control-label-size: var(--ec-font-size-label);
-$form-control-label-color: var(--ec-color-secondary-dark);
-$form-control-height: $control-height;
-$form-control-line-height: $control-line-height;
-$form-control-spacing-y: rem-calc(16);
+$form-control-height: 2rem;
+$form-control-spacing-y: 1rem;
 
 $checkbox-indicator-size: $form-control-icon-size;
 
 @mixin form-control-input-base {
   &::selection {
-    background-color: var(--ec-color-interactive);
-    color: var(--ec-color-primary-light);
+    background-color: var(--ec-form-control-background-color-selection);
+    color: var(--ec-form-control-color-selection);
   }
   &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: var(--ec-color-hint-dark);
+    color: var(--ec-form-control-color-placeholder);
   }
   &::-moz-placeholder { /* Firefox 19+ */
-    color: var(--ec-color-hint-dark);
+    color: var(--ec-form-control-color-placeholder);
     opacity: 1;
   }
   &:-ms-input-placeholder { /* IE 10+ */
-    color: var(--ec-color-hint-dark);
+    color: var(--ec-form-control-color-placeholder);
   }
   &:-moz-placeholder { /* Firefox 18- */
-    color: var(--ec-color-hint-dark);
+    color: var(--ec-form-control-color-placeholder);
     opacity: 1;
   }
 }
@@ -55,7 +53,10 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   &:not(.open) {
     .textbox-group-btn-right ::ng-deep button{
-      @include control-invalid;
+      &:not(:focus) {
+        border-color: var(--ec-form-control-border-color-invalid);
+      }
+      background-color: var(--ec-form-control-background-color-invalid);
     }
   }
 }
@@ -87,31 +88,65 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   /// Required
   @if $state == required {
-    @include control-default;
+    // @include control-default;
+
+    // TODO: remove when all bootstrap and kendo controls have been replaced in EUM
     @include form-control-input-icon($required-icon, $position: $icon-position);
 
   /// Pending
   } @else if $state == pending {
+
+    // TODO: remove when all bootstrap and kendo controls have been replaced in EUM
     @include form-control-input-icon(pending-icon(), $position: $icon-position);
 
   /// Invalid
   } @else if $state == invalid {
     @include control-invalid;
+    border-color: var(--ec-form-control-border-color-invalid);
+    
+    &:focus {
+      border-color: var(--ec-form-control-background-color-invalid);
+    }
+
+    background-color: var(--ec-form-control-background-color-invalid);
+
+    // TODO: remove when all bootstrap and kendo controls have been replaced in EUM
     @include form-control-input-icon($invalid-icon, $position: $icon-position);
 
   /// Focus
   } @else if $state == focus {
-    @include control-focus;
+    border-color: var(--ec-form-control-border-color-focus);
+    box-shadow: var(--ec-form-control-box-shadow-focus);
+    position: relative;
+    z-index: 1;
 
   /// Disabled
   } @else if $state == disabled {
-    @include control-disabled('form', true);
+    background-color: var(--ec-form-control-background-color-disabled);
+    border-color: var(--ec-form-control-border-color-disabled);
+    color: var(--ec-form-control-color-disabled);
+    opacity: var(--ec-form-control-opacity-disabled);
+
+    &:required,
+    &:required.is-empty {
+      background-image: none;
+      padding-left: $control-padding-x;
+
+      // We need to define these again because the :required styles override
+      // the background-color and border-color we set above
+      background-color: var(--ec-form-control-background-color-disabled);
+      border-color: var(--ec-form-control-border-color-disabled);
+
+      & + .icon-required {
+        display: none;
+      }
+    }
   }
 }
 
 /// A form control label
 @mixin form-control-label {
-  color: $form-control-label-color;
+  color: var(--ec-form-control-label-color, var(--ec-color-secondary-dark));
   display: block;
   font-size: $form-control-label-size;
   line-height: 1;
@@ -121,19 +156,20 @@ $checkbox-indicator-size: $form-control-icon-size;
 /// The default form control element in the control component
 /// @param {string} $tag [input] - The HTML tag name of the input element (e.g. input, textarea)
 @mixin form-control-input($selector: input, $new-state-icons: false) {
-  @include control-default;
   @include form-control-input-base;
+  background-color: var(--ec-form-control-background-color);
+  border: 1px solid var(--ec-form-control-border-color);
+  border-radius: var(--ec-border-radius);
   background-image: none;
   background-clip: padding-box;
-  border-width: $control-border-width;
-  border-style: solid;
-  border-radius: var(--ec-border-radius);
   width: 100%;
+  line-height: 1.25rem;
+  padding: 0.3125rem .5rem;
 
   @if $selector == input {
-    @include control-dimensions($height: $form-control-height);
+    height: $form-control-height;
   } @else {
-    @include control-dimensions($height: auto);
+    height: auto;
   }
 
   &:required {
@@ -149,7 +185,7 @@ $checkbox-indicator-size: $form-control-icon-size;
           left: .5rem;
           top: .5rem;
           z-index: 1;
-          color: var(--ec-color-yellow-4);
+          color: var(--ec-form-control-border-color-invalid);
         }
       }
     }
@@ -169,6 +205,7 @@ $checkbox-indicator-size: $form-control-icon-size;
           left: .5rem;
           top: .5rem;
           z-index: 1;
+          color: var(--ec-form-control-border-color-invalid);
         }
   
         & ~ .icon-required {
@@ -217,11 +254,11 @@ $checkbox-indicator-size: $form-control-icon-size;
 
 /// The base styles of a control component. These styles will be applied to :host
 @mixin form-control-base() {
-  color: $control-color;
-  font-family: $control-font-family;
-  font-size: $control-font-size;
+  color: var(--ec-form-control-color);
+  // font-family: $control-font-family;
+  font-size: var(--ec-form-control-font-size);
   display: block;
-  margin-bottom: $form-control-spacing-y;
+  margin-bottom: 1rem;
   width: 100%;
 
   :host-context(.form-condensed) {
@@ -309,7 +346,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   &:not(:checked) {
     + #{$indicator-selector} {
-      color: var(--ec-border-color-control);
+      color: var(--ec-form-control-border-color);
 
       &::before {
         display: none;
@@ -336,28 +373,29 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   &:focus {
     + #{$indicator-selector} {
-      color: $control-border-color-focused;
-      box-shadow: $control-shadow-focused;
+      color: var(--ec-color-interactive);
+      box-shadow: var(--ec-form-control-box-shadow-focus);
+      border-color: var(--ec-form-control-border-color-focus);
     }
   }
 
   &:disabled {
     + #{$indicator-selector} {
-      color: $control-color-disabled;
-      background-color: $control-bg-disabled;
-      border-color: var(--ec-border-color-control-disabled);
-      opacity: $control-opacity-disabled;
+      color: var(--ec-form-control-color-disabled);
+      background-color: var(--ec-form-control-background-color-disabled);
+      border-color: var(--ec-form-control-border-color-disabled);
+      opacity: var(--ec-form-control-opacity-disabled);
     }
 
     ~ #{$label-selector} {
-      color: $control-color-disabled;
-      opacity: $control-opacity-disabled;
+      color: var(--ec-form-control-color-disabled);
+      opacity: var(--ec-form-control-opacity-disabled);
     }
   }
 }
 
 @mixin checkbox-radio-indicator($type) {
-  background-color: $control-bg;
+  background-color: var(--ec-form-control-background-color);
   background-clip: padding-box;
   border: 1px solid currentColor;
   color: var(--ec-color-interactive);
@@ -412,8 +450,8 @@ $checkbox-indicator-size: $form-control-icon-size;
   }
 
   #{$indicator-selector} {
-    background-color: $control-bg-read-only;
-    border-color: var(--ec-border-color-control-readonly);
+    background-color: var(--ec-form-control-background-color-readonly);
+    border-color: var(--ec-form-control-border-color-readonly);
   }
 
   #{$label-selector},
@@ -427,10 +465,10 @@ $checkbox-indicator-size: $form-control-icon-size;
   font-size: $control-font-size;
   background-color: var(--ec-border-color);
   border-radius: var(--ec-border-radius);
-  border: $control-border-width solid $control-border-color;
+  border: $control-border-width solid var(--ec-border-color);
   min-height: 2em;
   position: relative;
-  color: var(--ec-color-hint-dark);
+  color: var(--ec-color-secondary-dark);
   display: flex;
 
   input {
@@ -461,8 +499,8 @@ $checkbox-indicator-size: $form-control-icon-size;
     left: 0;
     bottom: 0;
     right: 0;
-    box-shadow: 0 0 0 rem-calc(2px) $control-border-color-focused;
-    border-radius: var(--ec-border-radius);
+    box-shadow: var(--ec-form-control-box-shadow-focus);
+    border-radius: var(--ec-form-control-border-radius);
     display: none;
   }
 
@@ -487,7 +525,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   a {
     border: rem-calc(3px) solid transparent;
-    border-radius: calc(var(--ec-border-radius) * .75);
+    border-radius: calc(var(--ec-form-control-border-radius) * .75);
     display: block;
     height: 100%;
     left: 0;
@@ -498,26 +536,22 @@ $checkbox-indicator-size: $form-control-icon-size;
     z-index: 1;
 
     .toggle-handle {
-      background-color: var(--ec-background-color);
-      border-radius: calc(var(--ec-border-radius) * .75);
+      background-color: var(--ec-form-control-background-color);
+      border-radius: calc(var(--ec-form-control-border-radius) * .75);
       height: 100%;
     }
   }
 
   &.is-disabled {
-    opacity: $control-opacity-disabled;
-    background-color: $control-bg-disabled;
-    color: $control-color-disabled;
-    border-color: var(--ec-border-color-control-disabled);
+    opacity: var(--ec-form-control-opacity-disabled);
+    background-color: var(--ec-form-control-background-color-disabled);
+    color: var(--ec-form-control-color-disabled);
+    border-color: var(--ec-form-control-border-color-disabled);
 
     label {
       color: inherit !important;
       cursor: default;
     }
-
-    a.toggle-handle {
-      background-color: var(--ec-color-hint-light);
-    }
   }
 }
 
@@ -572,24 +606,24 @@ $checkbox-indicator-size: $form-control-icon-size;
 // Shared styles for controls that include a popup when the popup is open (combobox, dateinput)
 @mixin form-control-open() {
   .textbox-group {
-    ec-textbox ::ng-deep input {
-      border-color: $control-border-color;
-      box-shadow: none;
+    ec-textbox {
+      --ec-form-control-box-shadow-focus: none;
+      --ec-form-control-border-color-focus: var(--ec-form-control-border-color);
     }
 
-    ec-button ::ng-deep button {
-      @include control-active;
-      box-shadow: none;
+    ec-button {
+      --ec-button-box-shadow-focus-secondary: none;
+      --ec-button-background-color-secondary: var(--ec-background-color-selected);
     }
   }
 }
 
 @mixin form-control-read-only {
-  border-color: var(--ec-border-color-control-readonly);
-  background-color: $control-bg-read-only;
+  border-color: var(--ec-form-control-border-color-readonly);
+  background-color: var(--ec-form-control-background-color-readonly);
   background-clip: border-box;
   background-image: none;
-  color: $control-color;
+  color: var(--ec-form-control-color-readonly);
   opacity: 1;
   user-select: none;
   pointer-events: none;

package/src/styles/mixins/_login.scss

@@ -14,7 +14,7 @@
   $form-submit-button-selector: '.ec-login-submit'
 ) {
   #{$container-selector} {
-    background-image: var(--ec-background-color-splash);
+    background: var(--ec-background-splash);
     display: flex;
     align-items: center;
     flex: 1 1;
@@ -27,7 +27,7 @@
   }
   
   #{$card-selector} {
-    background-color: var(--ec-background-color-body);
+    background-color: var(--ec-background-color);
     border-radius: var(--ec-border-radius-dialog);
     box-shadow: 0 0 12px rgba($black, .66);
   }
@@ -61,6 +61,7 @@
   }
 
   #{$form-submit-button-selector} {
+    --ec-button-color-primary: var(--ec-color-brand-green);
     margin-left: auto;
   }