@energycap/components 0.33.5-ECAP-18317-font-awesome-6-update.20230607-1342 → 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230607-1628

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.33.5-ECAP-18317-font-awesome-6-update.20230607-1342",
+  "version": "0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230607-1628",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/styles/_global-variables.scss

@@ -28,6 +28,7 @@
   --ec-color-bad: rgb(250, 123, 46);
   --ec-color-danger: rgb(227, 52, 54);
   --ec-color-accent: rgb(111, 28, 138);
+  --ec-color-control-invalid: var(--ec-color-caution);
 
   // Variables for the EnergyCAP brand color pallette
   // Colors go from lighter (1) to darker (8).
@@ -124,16 +125,20 @@
   --ec-background-color-success: rgb(222, 239, 215);
   --ec-background-color-caution: rgb(255, 248, 204);
   --ec-background-color-danger: rgb(236, 196, 197);
+  --ec-background-color-control-invalid: var(--ec-background-color-caution);
   
   // Shadows
   --ec-box-shadow: 0px .125rem .5rem var(--ec-color-shadow);
   --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
 
   // Borders
-  --ec-border-color: rgba(26, 26, 35, .18);
-  --ec-border-color-dark: rgba(26, 26, 35, .87);
-  --ec-border-color-hint: rgba(26,26,35, .1);
-  --ec-border-color-legacy: rgb(210, 215, 217);
+  --ec-border-color: #D6D6D7;
+  --ec-border-color-dark: #383840;
+  --ec-border-color-hint: #EDEDED;
+  --ec-border-color-control: var(--ec-border-color);
+  --ec-border-color-control-disabled: var(--ec-border-color);
+  --ec-border-color-control-readonly: transparent;
+  --ec-border-color-control-invalid: var(--ec-color-caution);
   --ec-border-radius: .25rem;
   --ec-border-radius-card: .375rem;
   --ec-border-radius-dialog: .5rem;

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

@@ -30,32 +30,32 @@
 }
 
 @mixin primary-button {
-  background-color: $green-3;
-  border-color: $green-4;
-  color: var(--ec-color-primary-dark);
+  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));
 
   &:active:not(:disabled) {
-    background-color: $green-4;
-    color: var(--ec-color-primary-dark);
+    background-color: var(--ec-button-background-color-primary, var(--ec-color-green-3));
+    color: var(--ec-button-color-primary, var(--ec-color-primary-dark));
   }
 
   .ec-icon {
-    color: var(--ec-button-color-icon, var(--ec-color-icon));
+    color: var(--ec-button-color-icon-primary, var(--ec-color-icon));
   }
 }
 
 @mixin secondary-button {
   background-color: var(--ec-background-color);
-  border-color: $control-border-color;
-  color: var(--ec-color-primary-dark);
+  border-color: var(--ec-button-border-color-secondary, var(--ec-border-color));
+  color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
 
   &:active:not(:disabled) {
     background-color: var(--ec-background-color);
-    color: var(--ec-color-primary-dark);
+    color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
   }
 
   .ec-icon {
-    color: var(--ec-button-color-icon, var(--ec-color-icon));
+    color: var(--ec-button-color-icon-secondary, var(--ec-color-icon));
   }
 }
 
@@ -76,7 +76,7 @@
 
 @mixin danger-button {
   background-color: var(--ec-color-danger);
-  border-color: $red-4;
+  border-color: var(--ec-border-color);
   color: var(--ec-color-primary-light);
 
   .ec-icon {
@@ -84,13 +84,13 @@
   }
 
   &:active:not(:disabled) {
-    background-color: $red-4;
+    background-color: var(--ec-color-danger);
   }
 }
 
 @mixin icon-button{
   background-color: transparent;
-  color: var(--ec-color-icon);
+  color: var(--ec-button-color-icon, var(--ec-color-icon));
   width: $control-height;
   padding: 0;
 
@@ -101,8 +101,12 @@
     color: var(--ec-button-color-icon, var(--ec-color-icon));
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     @include nav-hover('span');
+
+    .ec-icon {
+      color: var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)));
+    }
   }
 
   &:disabled {
@@ -122,12 +126,16 @@
   }
 }
 
-@mixin text-button($color: var(--ec-color-primary-dark), $icon-color: inherit) {
+@mixin text-button(
+  $type: 'text',
+  $color: var(--ec-color-primary-dark),
+  $icon-color: inherit
+) {
   background-color: transparent;
   color: $color;
 
   .ec-icon {
-    color: var(--ec-button-color-icon, $icon-color);
+    color: var(--ec-button-color-icon-#{$type}, $icon-color);
   }
 
   &:active:not(:disabled) {

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

@@ -1,6 +1,6 @@
 @import '../core';
 
-$control-border-color: var(--ec-border-color-legacy);
+$control-border-color: var(--ec-border-color-control);
 $control-border-width: rem-calc(1px);
 $control-color: var(--ec-color-primary-dark);
 $control-bg: var(--ec-background-color);
@@ -25,8 +25,8 @@ $control-color-disabled: var(--ec-color-secondary-dark);
 $control-opacity-disabled: .65;
 
 // Invalid
-$control-bg-invalid: var(--ec-background-color-caution);
-$control-border-color-invalid: var(--ec-color-caution);
+$control-bg-invalid: var(--ec-background-color-control-invalid);
+$control-border-color-invalid: var(--ec-border-color-control-invalid);
 
 // Read only
 $control-bg-read-only: rgba($black, .12);
@@ -80,7 +80,7 @@ $control-bg-read-only: rgba($black, .12);
 @mixin control-disabled($type, $borders: true) {
   @if $borders {
     background-color: $control-bg-disabled;
-    border-color: $control-border-color;
+    border-color: var(--ec-border-color-control-disabled);
   }
 
   color: $control-color-disabled;
@@ -96,7 +96,7 @@ $control-bg-read-only: rgba($black, .12);
       // the background-color and border-color we set above
       @if $borders {
         background-color: $control-bg-disabled;
-        border-color: $control-border-color;
+        border-color: var(--ec-border-color-control-disabled);
       }
     }
   }

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

@@ -251,7 +251,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   &:not(:checked) {
     + #{$indicator-selector} {
-      color: var(--ec-border-color);
+      color: var(--ec-border-color-control);
 
       &::before {
         display: none;
@@ -287,7 +287,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     + #{$indicator-selector} {
       color: $control-color-disabled;
       background-color: $control-bg-disabled;
-      border-color: var(--ec-border-color);
+      border-color: var(--ec-border-color-control-disabled);
       opacity: $control-opacity-disabled;
     }
 
@@ -355,7 +355,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   #{$indicator-selector} {
     background-color: $control-bg-read-only;
-    border: 0;
+    border-color: var(--ec-border-color-control-readonly);
   }
 
   #{$label-selector},
@@ -367,7 +367,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
 @mixin toggle() {
   font-size: $control-font-size;
-  background-color: var(--ec-border-color-legacy);
+  background-color: var(--ec-border-color);
   border-radius: var(--ec-border-radius);
   border: $control-border-width solid $control-border-color;
   min-height: 2em;
@@ -382,9 +382,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
     &:checked {
       & + label {
-        // TODO: get this sorted out
-        // color: $ec-color-action;
-        color: $blue-4
+        color: var(--ec-color-interactive);
       }
 
       &:last-of-type {
@@ -452,6 +450,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     opacity: $control-opacity-disabled;
     background-color: $control-bg-disabled;
     color: $control-color-disabled;
+    border-color: var(--ec-border-color-control-disabled);
 
     label {
       color: inherit !important;
@@ -528,7 +527,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 }
 
 @mixin form-control-read-only {
-  border-color: transparent;
+  border-color: var(--ec-border-color-control-readonly);
   background-color: $control-bg-read-only;
   background-clip: border-box;
   background-image: none;

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

@@ -4,8 +4,8 @@ $nav-font-size: var(--ec-font-size-action);
 $nav-item-bg: var(--ec-background-color);
 $nav-item-height: rem-calc(28px);
 $nav-item-line-height: rem-calc(18px);
-$nav-item-bg-hover: #BFE0E9;
-$nav-item-bg-selected: #D9EDF2;
+$nav-item-bg-hover: var(--ec-background-color-hover);
+$nav-item-bg-selected: var(--ec-background-color-selected);
 $nav-icon-height: var(--ec-font-size-icon);
 $nav-item-transition-duration: .2s;
 

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

@@ -250,7 +250,7 @@ $table-z-indexes: (
 
 @mixin table-detail-content() {
   background-color: transparent;
-  border-top: 1px solid var(--ec-border-color-legacy);
+  border-top: 1px solid var(--ec-border-color);
   padding: 1rem 2rem 1rem 0 !important;
 }
 

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

@@ -1,7 +1,7 @@
 @import 'nav-control-base';
 
 $tab-border-width: 1px;
-$tab-border-color: var(--ec-border-color-legacy);
+$tab-border-color: var(--ec-border-color);
 $tab-color: var(--ec-color-secondary-dark);
 $tab-color-active: $gray-7;
 $tab-color-hover: $gray-7;