@energycap/components 0.33.5-ECAP-18301-commodity-resources-and-units-page.20230605-1523 → 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-0953

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.33.5-ECAP-18301-commodity-resources-and-units-page.20230605-1523",
+  "version": "0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-0953",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/styles/_global-variables.scss

@@ -130,10 +130,9 @@
   --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-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-border-width: rem-calc(1px);
 $control-color: var(--ec-color-primary-dark);
 $control-bg: var(--ec-background-color);

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

@@ -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;

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;