@energycap/components 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-1501 → 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-1657

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-1501",
+  "version": "0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-1657",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/styles/_global-variables.scss

@@ -133,6 +133,9 @@
   --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-radius: .25rem;
   --ec-border-radius-card: .375rem;
   --ec-border-radius-dialog: .5rem;

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

@@ -1,6 +1,6 @@
 @import '../core';
 
-$control-border-color: var(--ec-border-color);
+$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);
@@ -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},
@@ -452,6 +452,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 +529,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;