@energycap/components 0.37.4-ECAP-18945-record-view-mask.20230829-1745 → 0.37.4-ECAP-18600-ech-theme-updates.20230912-2211

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

@@ -1,24 +1,12 @@
 @import 'nav-control-base';
 
-$tab-border-width: 1px;
-$tab-border-color: var(--ec-border-color);
-$tab-color: var(--ec-color-secondary-dark);
-$tab-color-active: $gray-7;
-$tab-color-hover: $gray-7;
-$tab-bg-active: var(--ec-background-color-body);
-
-$tab-pill-bg-active: #d2d7d9;
-
 @mixin tab-active($style: tabs) {
-    color: $tab-color-active;
+    color: var(--ec-tab-color-active, var(--ec-color-interactive));
 
     @if $style == tabs {
-        background-color: $tab-bg-active;
-        border-top-color: $tab-border-color;
-        border-left-color: $tab-border-color;
-        border-right-color: $tab-border-color;
+        border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
     } @else {
-        background-color: $tab-pill-bg-active;
+        background-color: var(--ec-tab-background-color-active, var(--ec-background-color));
     }
 }
 
@@ -26,53 +14,52 @@ $tab-pill-bg-active: #d2d7d9;
     $height: rem-calc(32px);
 
     @if $style == 'pills' {
-        $height: rem-calc(24px);
+        $height: 1.75rem;
+        padding-left: .5rem;
+        padding-right: .5rem;
         border-radius: var(--ec-border-radius);
+        border: 1px solid var(--ec-tab-border-color, var(--ec-border-color));
+
+    } @else {
+        padding-left: 0;
+        padding-right: 0;
+        border-bottom: 2px solid transparent;
+        margin-bottom: -1px;
     }
 
     align-items: center;
-    border: $tab-border-width solid transparent;
-    color: $tab-color;
+    color: var(--ec-tab-color, var(--ec-color-secondary-dark));
     cursor: pointer;
-    font-size: var(--ec-font-size-label);
+    font-size: var(--ec-tab-font-size, var(--ec-font-size-label));
     display: flex;
     height: $height;
     min-width: $height;
-    padding-left: rem-calc(8px);
-    padding-right: rem-calc(8px);
+    
     justify-content: center;
 
-    @if $style == tabs {
-        margin-bottom: -($tab-border-width);
-        border-top-right-radius: var(--ec-border-radius);
-        border-top-left-radius: var(--ec-border-radius);
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    &:hover {
-        color: $tab-color-hover;
-    }
-
     &.active {
         @include tab-active($style);
     }
 
+    &:hover,
     &:focus {
         // Override the default browser focus ring
         outline: none;
 
-        &:not(.active):not(.is-disabled) {
-            @include nav-focus(true);
-            // We use a box shadow to make the focus ring thicker on buttons and inputs.
-            // we don't want the same thickness for tabs so we will override the box-shadow
-            box-shadow: none;
+        @if $style == 'pills' {
+            border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
+            box-shadow: 0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));
+            position: relative;
+            z-index: 1;
+        } @else {
+            border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
         }
     }
 
     &.is-disabled {
-        color: var(--ec-color-hint-dark);
+        opacity: var(--ec-form-control-opacity-disabled);
         cursor: default;
+        pointer-events: none;
     }
 }
 
@@ -86,7 +73,29 @@ $tab-pill-bg-active: #d2d7d9;
     min-width: 0;
 
     &:not(:last-child) {
-        margin-right: rem-calc(4px);
+        @if $style == tabs {
+            margin-right: 1rem;
+        }
+    }
+
+    @if $style == pills {
+        &:not(:first-child) {
+            margin-left: -1px;
+        }
+        
+        .tab {
+            border-radius: 0;
+        }
+
+        &:first-child .tab {
+            border-top-left-radius: var(--ec-border-radius);
+            border-bottom-left-radius: var(--ec-border-radius);
+        }
+
+        &:last-child .tab {
+            border-top-right-radius: var(--ec-border-radius);
+            border-bottom-right-radius: var(--ec-border-radius);
+        }
     }
 }
 
@@ -94,8 +103,8 @@ $tab-pill-bg-active: #d2d7d9;
     display: flex;
 
     @if $style == tabs {
-        border-bottom: $tab-border-width solid $tab-border-color;
-        padding-left: rem-calc(16px);
-        padding-right: rem-calc(16px);
+        border-bottom: 1px solid var(--ec-tab-border-color, var(--ec-border-color));
+        padding-left: 1rem;
+        padding-right: 1rem;
     }
 }

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

@@ -1,18 +1,23 @@
 @import '../core';
 
 $tag-colors: (
-  info: $gray-2,
-  success: $green-4,
-  warning: $yellow-5,
-  danger: $red-4,
-  accent: $purple-3,
-  chargeback: $orange-4,
-  accrual: $ec-color-accrual
+  info: (bg: var(--ec-color-cobalt-1), border: var(--ec-color-info)),
+  success: (bg: var(--ec-color-green-1), border: var(--ec-color-success)),
+  warning: (bg: var(--ec-color-yellow-1), border: var(--ec-color-caution)),
+  danger: (bg: var(--ec-color-red-1), border: var(--ec-color-danger)),
+  accent: (bg: var(--ec-color-purple-1), border: var(--ec-color-accent)),
+  chargeback: (bg: var(--ec-color-orange-1), border: var(--ec-color-orange-7)),
+  accrual: (bg: var(--ec-color-aqua-1), border: var(--ec-color-aqua-5))
 );
 
 @mixin tag-type($type) {
-  background-color: rgba(map-get($tag-colors, $type), .25);
-  border-color: map-get($tag-colors, $type);
+  $colors: map-get($tag-colors, $type);
+  background-color: map-get($colors, bg);
+  border-color: map-get($colors, border);
+
+  > .ec-icon:first-child {
+    color: map-get($colors, border);
+  }
 }
 
 @mixin tags {
@@ -32,8 +37,8 @@ $tag-colors: (
 @mixin tag() {
   @include truncate;
 
-  background-color: rgba(map-get($tag-colors, info), .25);
-  border: 2px solid map-get($tag-colors, info);
+  background-color: var(--ec-color-gray-1);
+  border: 2px solid var(--ec-color-gray-4);
   display: inline-flex;
   align-items: center;
   border-radius: calc(var(--ec-border-radius, .25rem) * 3);
@@ -73,20 +78,31 @@ $tag-colors: (
   border: 0;
   display: flex;
   align-items: center;
-  padding: 0 0.4375rem 0 0.1875rem;
+  padding: 0 .25rem;
   height: 100%;
   cursor: pointer;
+  position: relative;
 
   &:hover,
   &:focus {
-    background-color: rgba($black, .1);
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      left: .125rem;
+      right: .125rem;
+      top: .0625rem;
+      bottom: .0625rem;
+      background-color: rgba(26, 26, 35, .1);
+      border-radius: .125rem;
+    }
     outline: none;
   }
 }
 
 @mixin tag-condensed {
   border-radius: var(--ec-border-radius);
-  border: 0;
+  border-width: 1px;
   padding: 0 .25rem;
   height: 1.125rem;
   line-height: 1.125rem;
@@ -96,9 +112,4 @@ $tag-colors: (
   > .ec-icon:first-child {
     margin-right: .125rem;
   }
-
-  button {
-    padding-right: .25rem;
-    padding-left: .125rem;
-  }
 }

package/src/assets/images/icon-carbon-hub.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
-  <path fill="#162F3B" d="M25.477 22.624v1.44h-6.378v-1.12l3.264-2.96c.35-.32.782-.704.916-.928.15-.24.183-.448.183-.672 0-.32-.117-.576-.35-.752-.233-.176-.566-.256-1.015-.256-.567-.016-.916.176-1.216.304-.3.144-.55.336-.75.608l-1.431-.88a3.16 3.16 0 0 1 1.365-1.104c.583-.272 1.249-.4 1.998-.4.633 0 1.182.096 1.649.304a2.6 2.6 0 0 1 1.099.832c.266.368.4.784.4 1.28 0 .448-.1.864-.284 1.248-.2.384-.566.832-1.132 1.328l-1.948 1.76h3.63v-.032Z"/>
-  <path fill="#2D9AB8" d="M17.65 3.2c-4.062 0-7.708 1.76-10.156 4.528l-2.73-1.872C7.826 2.288 12.455 0 17.65 0s9.824 2.288 12.888 5.856l-2.731 1.872C25.36 4.96 21.714 3.2 17.65 3.2Z"/>
-  <path fill="#162F3B" d="M17.65 32c5.196 0 9.825-2.288 12.889-5.856l-2.731-1.872C25.36 27.04 21.714 28.8 17.65 28.8c-7.36 0-13.32-5.728-13.32-12.8 0-2 .499-3.904 1.348-5.584L2.93 8.528A15.409 15.409 0 0 0 1 16c0 8.832 7.46 16 16.65 16Z"/>
-  <path fill="#2D9AB8" d="M13.621 20.352a5.835 5.835 0 0 1-1.715-2.32 5.448 5.448 0 0 1 0-4.096 5.62 5.62 0 0 1 1.715-2.32c2.132-1.808 5.578-1.808 7.71 0a5.835 5.835 0 0 1 1.715 2.32l.1.288a5.744 5.744 0 0 1 1.548.384 4.4 4.4 0 0 1 1.432.944 7.953 7.953 0 0 0-.85-3.136 8.299 8.299 0 0 0-1.764-2.288c-3.23-3.024-8.792-3.024-12.022 0a7.706 7.706 0 0 0-1.765 2.288 7.686 7.686 0 0 0 0 7.12 8.299 8.299 0 0 0 1.765 2.288c1.565 1.456 3.663 2.208 5.778 2.256v-2.384c-1.332-.048-2.631-.48-3.647-1.344Z"/>
-</svg>