@energycap/components 0.29.0 → 0.29.1-css-variables-conversion.20220802-1141

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

@@ -1,9 +1,9 @@
 @import 'control-base';
 
-$form-control-icon-size: rem-calc(16px);
-$form-control-icon-position: rem-to-em(rem-calc(4px), $control-font-size) center;
-$form-control-label-size: $ec-font-size-label;
-$form-control-label-color: $ec-color-text-secondary-dark;
+$form-control-icon-size: 1rem;
+$form-control-icon-position: .25rem 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);
@@ -12,21 +12,21 @@ $checkbox-indicator-size: $form-control-icon-size;
 
 @mixin form-control-input-base {
   &::selection {
-    background-color: $ec-color-active;
-    color: $ec-color-text-primary-light;
+    background-color: var(--ec-color-interactive);
+    color: var(--ec-color-primary-light);
   }
   &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: $ec-color-text-hint-dark;
+    color: var(--ec-color-hint-dark);
   }
   &::-moz-placeholder { /* Firefox 19+ */
-    color: $ec-color-text-hint-dark;
+    color: var(--ec-color-hint-dark);
     opacity: 1;
   }
   &:-ms-input-placeholder { /* IE 10+ */
-    color: $ec-color-text-hint-dark;
+    color: var(--ec-color-hint-dark);
   }
   &:-moz-placeholder { /* Firefox 18- */
-    color: $ec-color-text-hint-dark;
+    color: var(--ec-color-hint-dark);
     opacity: 1;
   }
 }
@@ -57,16 +57,16 @@ $checkbox-indicator-size: $form-control-icon-size;
   $position: $form-control-icon-position,
   $indent: $form-control-icon-size,
 ) {
-  $size: rem-to-em($width, $control-font-size) rem-to-em($height, $control-font-size);
+  $size: $width, $height;
   @include icon-bg-image($icon, $position, $size);
-  padding-left: rem-to-em(($indent + $control-padding-x), $control-font-size);
+  padding-left: ($indent + $control-padding-x);
 }
 
 @mixin form-control-state($state, $selector) {
   $icon-position: $form-control-icon-position;
 
   @if $selector == textarea {
-    $icon-position: rem-to-em(rem-calc(4px)) ($form-control-height - $form-control-icon-size) / 2;
+    $icon-position: .25rem .5rem;
   }
 
   /// Required
@@ -99,7 +99,7 @@ $checkbox-indicator-size: $form-control-icon-size;
   display: block;
   font-size: $form-control-label-size;
   line-height: 1;
-  margin: ($form-control-label-size / 2) 0;
+  margin: calc(#{$form-control-label-size} / 2) 0;
 }
 
 /// The default form control element in the control component
@@ -248,7 +248,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   &:not(:checked) {
     + #{$indicator-selector} {
-      color: $ec-border-color-default;
+      color: var(--ec-border-color);
 
       &::before {
         display: none;
@@ -260,7 +260,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     &.indeterminate,
     &:indeterminate {
       + #{$indicator-selector} {
-        color: $ec-color-active;
+        color: var(--ec-color-interactive);
 
         &::before {
           content: '';
@@ -284,7 +284,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     + #{$indicator-selector} {
       color: $control-color-disabled;
       background-color: $control-bg-disabled;
-      border-color: $ec-border-color-default;
+      border-color: var(--ec-border-color);
       opacity: $control-opacity-disabled;
     }
 
@@ -299,7 +299,7 @@ $checkbox-indicator-size: $form-control-icon-size;
   background-color: $control-bg;
   background-clip: padding-box;
   border: 1px solid currentColor;
-  color: $ec-color-active;
+  color: var(--ec-color-interactive);
   margin-top: .5rem;
   flex: none;
   pointer-events: none;
@@ -364,12 +364,12 @@ $checkbox-indicator-size: $form-control-icon-size;
 
 @mixin toggle() {
   font-size: $control-font-size;
-  background-color: $ec-border-color;
+  background-color: var(--ec-border-color-legacy);
   border-radius: var(--ec-border-radius);
   border: $control-border-width solid $control-border-color;
   min-height: 2em;
   position: relative;
-  color: $ec-color-text-hint-dark;
+  color: var(--ec-color-hint-dark);
   display: flex;
 
   input {
@@ -439,7 +439,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     z-index: 1;
 
     .toggle-handle {
-      background-color: $ec-color-bg-content;
+      background-color: var(--ec-background-color);
       border-radius: calc(var(--ec-border-radius) * .75);
       height: 100%;
     }
@@ -456,7 +456,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     }
 
     a.toggle-handle {
-      background-color: $ec-color-text-hint-light;
+      background-color: var(--ec-color-hint-light);
     }
   }
 }

package/src/styles/mixins/_login.scss

@@ -14,7 +14,7 @@
   $form-submit-button-selector: '.ec-login-submit'
 ) {
   #{$container-selector} {
-    background-image: radial-gradient(circle,$gray-6,$gray-8);
+    background-image: var(--ec-background-color-splash);
     display: flex;
     align-items: center;
     flex: 1 1;
@@ -27,7 +27,7 @@
   }
   
   #{$card-selector} {
-    background-color: $ec-color-bg-body;
+    background-color: var(--ec-background-color-body);
     border-radius: var(--ec-border-radius-dialog);
     box-shadow: 0 0 12px rgba($black, .66);
   }
@@ -65,7 +65,7 @@
   }
   
   #{$card-footer-selector} {
-    border-top: 1px solid $ec-border-color-default;
+    border-top: 1px solid var(--ec-border-color);
     padding: 1rem;
     display: flex;
     align-items: center;

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

@@ -1,12 +1,12 @@
 @import 'control-base';
 
-$nav-font-size: $ec-font-size-action;
-$nav-item-bg: $ec-color-bg-content;
+$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-icon-height: $ec-font-size-icon;
+$nav-icon-height: var(--ec-font-size-icon);
 $nav-item-transition-duration: .2s;
 
 @mixin nav-hover($selector) {

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

@@ -1,16 +1,14 @@
-@import '../variables';
-
 $overlay-padding-x: 4rem;
 $overlay-padding-y: 3rem;
 
-@mixin overlay($bg: $ec-color-bg-content, $padding-x: $overlay-padding-x, $padding-y: $overlay-padding-y) {
+@mixin overlay($bg: var(--ec-background-color), $padding-x: $overlay-padding-x, $padding-y: $overlay-padding-y) {
     align-items: center;
     background-color: $bg;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: $padding-y $padding-x;
-    z-index: map-get($ec-z-indexes, overlay);
+    z-index: var(--ec-z-index-overlay);
 
     // @deprecated when the ng1 overlay goes away
     right: 0;
@@ -24,7 +22,7 @@ $overlay-padding-y: 3rem;
     position: relative;
 }
 
-@mixin overlay-message($color: $ec-color-text-secondary-dark, $font-size: $ec-font-size-title) {
+@mixin overlay-message($color: var(--ec-color-secondary-dark), $font-size: var(--ec-font-size-title)) {
     color: $color;
     font-size: $font-size;
 }

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

@@ -7,7 +7,7 @@
 
 @mixin resizable-handle-hover {
   &::after {
-    background-color: $ec-color-link;
+    background-color: var(--ec-color-interactive);
   }
 }
 
@@ -19,7 +19,7 @@
     height: 100%;
     top: 0;
     padding: 0 5px;
-    z-index: map-get($map: $ec-z-indexes, $key: splitter);
+    z-index: var(--ec-z-index-splitter);
 
     &::after {
       content: '';

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

@@ -1,5 +1,3 @@
-@import '../variables';
-
 // Animation
 @keyframes sk-bouncedelay {
     0%, 80%, 100% {
@@ -12,7 +10,7 @@
 @mixin spinner-dot($dot-size: .75rem) {
     width: $dot-size;
     height: $dot-size;
-    background-color: $ec-color-active;
+    background-color: var(--ec-color-interactive);
     animation: sk-bouncedelay 1.7s infinite ease-in-out both;
     margin-right: $dot-size / 3;
 

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

@@ -1,7 +1,7 @@
 @import '../core';
 
-$table-row-bg-selected: $ec-color-bg-info;
-$table-row-bg-hover: $ec-color-bg-hover;
+$table-row-bg-selected: var(--ec-background-color-selected);
+$table-row-bg-hover: var(--ec-background-color-hover);
 $table-row-bg-heading: #EBEDEE;
 $table-cell-padding-x: .5rem;
 $table-cell-padding-y: .5rem;
@@ -19,14 +19,14 @@ $table-z-indexes: (
   @include truncate;
 
   @if $type == th {
-    border-bottom: 1px solid $ec-border-color-dark;
-    color: $ec-color-text-secondary-dark;
+    border-bottom: 1px solid var(--ec-border-color-dark);
+    color: var(--ec-color-secondary-dark);
     font-weight: normal;
     vertical-align: middle;
   }
 
   @if $type == td {
-    border-top: 1px solid $ec-border-color-default;
+    border-top: 1px solid var(--ec-border-color);
     vertical-align: top;
   }
 
@@ -43,7 +43,7 @@ $table-z-indexes: (
   border-collapse: separate;
   border-spacing: 0;
   width: 100%;
-  font-size: $ec-font-size-label;
+  font-size: var(--ec-font-size-label);
 
   th {
     @include table-cell(th);
@@ -105,9 +105,9 @@ $table-z-indexes: (
 }
 
 @mixin table-row-heading {
-  color: $ec-color-text-secondary-dark;
-  font-size: $ec-font-size-label;
-  font-weight: $ec-font-weight-bold;
+  color: var(--ec-color-secondary-dark);
+  font-size: var(--ec-font-size-label);
+  font-weight: var(--ec-font-weight-bold);
   line-height: 1.333333333;
   text-transform: uppercase;
   padding-bottom: 0;
@@ -123,14 +123,14 @@ $table-z-indexes: (
   position: relative;
 
   > thead th {
-    background-color: $ec-color-bg-content;
+    background-color: var(--ec-background-color);
     position: sticky !important;
     top: 0;
     z-index: 1;
   }
 
   > tfoot td {
-    background-color: $ec-color-bg-content;
+    background-color: var(--ec-background-color);
     position: sticky !important;
     bottom: 0;
     z-index: 1;
@@ -245,12 +245,12 @@ $table-z-indexes: (
 }
 
 @mixin table-detail-row() {
-  background-color: $ec-color-bg-content-secondary;
+  background-color: var(--ec-background-color-detail);
 }
 
 @mixin table-detail-content() {
   background-color: transparent;
-  border-top: 1px solid $ec-border-color;
+  border-top: 1px solid var(--ec-border-color-legacy);
   padding: 1rem 2rem 1rem 0 !important;
 }
 
@@ -261,7 +261,7 @@ $table-z-indexes: (
     height: 2.5rem;
     line-height: 2rem;
     border-top: 0;
-    font-size: $ec-font-size-body;
+    font-size: var(--ec-font-size-body);
   }
 
   tr:first-child {
@@ -280,12 +280,12 @@ $table-z-indexes: (
 }
 
 @mixin table-row-status($status) {
-  $bg-color: $ec-color-bg-caution;
+  $bg-color: var(--ec-background-color-caution);
 
   @if $status == error {
-    $bg-color: $ec-color-bg-error;
+    $bg-color: var(--ec-background-color-danger);
   } @else if $status == success {
-    $bg-color: $ec-color-bg-success;
+    $bg-color: var(--ec-background-color-success);
   }
 
   td {

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

@@ -1,11 +1,11 @@
 @import 'nav-control-base';
 
 $tab-border-width: 1px;
-$tab-border-color: $ec-border-color;
-$tab-color: $ec-color-text-secondary-dark;
+$tab-border-color: var(--ec-border-color-legacy);
+$tab-color: var(--ec-color-secondary-dark);
 $tab-color-active: $gray-7;
 $tab-color-hover: $gray-7;
-$tab-bg-active: $ec-color-bg-body;
+$tab-bg-active: var(--ec-background-color-body);
 
 $tab-pill-bg-active: #d2d7d9;
 
@@ -34,7 +34,7 @@ $tab-pill-bg-active: #d2d7d9;
     border: $tab-border-width solid transparent;
     color: $tab-color;
     cursor: pointer;
-    font-size: $ec-font-size-label;
+    font-size: var(--ec-font-size-label);
     display: flex;
     height: $height;
     min-width: $height;
@@ -71,7 +71,7 @@ $tab-pill-bg-active: #d2d7d9;
     }
 
     &.is-disabled {
-        color: $ec-color-text-hint-dark;
+        color: var(--ec-color-hint-dark);
         cursor: default;
     }
 }

package/src/styles/utilities/_borders.scss

@@ -1,15 +1,13 @@
-@import '../variables';
-
 .border-0 {
   border: 0 !important;
 }
 
 .border-all {
-  border: $ec-border-width solid $ec-border-color-default !important;
+  border: 1px solid var(--ec-border-color) !important;
 }
 
 .border-all-dark {
-  border: $ec-border-width solid $ec-border-color-dark !important;
+  border: 1px solid var(--ec-border-color-dark) !important;
 }
 
 $sides: (top, bottom, right, left);
@@ -19,11 +17,11 @@ $sides: (top, bottom, right, left);
   }
 
   .border-#{$side} {
-    border-#{$side}: $ec-border-width solid $ec-border-color-default !important;
+    border-#{$side}: 1px solid var(--ec-border-color) !important;
   }
   
   .border-#{$side}-dark {
-    border-#{$side}: $ec-border-width solid $ec-border-color-dark !important;
+    border-#{$side}: 1px solid var(--ec-border-color-dark) !important;
   }
 }
 

package/src/styles/utilities/_layout.scss

@@ -109,4 +109,8 @@
 
 .position-fixed {
   position: fixed !important;
+}
+
+.v-align-middle {
+  vertical-align: middle !important;
 }

package/src/styles/utilities/_text.scss

@@ -1,84 +1,83 @@
-@import "../variables";
 @import "../mixins/overlay-base";
 
 // Text styles
 .text-title-1,
 .text-title-2 {
-  color: $ec-color-text-primary-dark;
-  font-size: $ec-font-size-title;
-  font-weight: $ec-font-weight-bold;
+  color: var(--ec-color-primary-dark);
+  font-size: var(--ec-font-size-title);
+  font-weight: var(--ec-font-weight-bold);
   line-height: 1.2;
   margin: 0;
 }
 
 .text-title-2 {
-  font-weight: $ec-font-weight-normal;
+  font-weight: var(--ec-font-weight-normal);
 }
 
 .text-heading-1,
 .text-heading-2 {
-  color: $ec-color-text-primary-dark;
-  font-size: $ec-font-size-body;
-  font-weight: $ec-font-weight-bold;
+  color: var(--ec-color-primary-dark);
+  font-size: var(--ec-font-size-body);
+  font-weight: var(--ec-font-weight-bold);
   line-height: 1.5;
   margin: 0;
 }
 
 .text-heading-2 {
-  font-weight: $ec-font-weight-normal;
+  font-weight: var(--ec-font-weight-normal);
 }
 
 .text-heading-3 {
-  color: $ec-color-text-secondary-dark;
-  font-size: $ec-font-size-label;
-  font-weight: $ec-font-weight-bold;
+  color: var(--ec-color-secondary-dark);
+  font-size: var(--ec-font-size-label);
+  font-weight: var(--ec-font-weight-bold);
   line-height: 1.333333333;
   margin: 0;
   text-transform: uppercase;
 }
 
 .text-body-1 {
-  color: $ec-color-text-primary-dark;
-  font-size: $ec-font-size-action;
-  font-weight: $ec-font-weight-normal;
+  color: var(--ec-color-primary-dark);
+  font-size: var(--ec-font-size);
+  font-weight: var(--ec-font-weight-normal);
   line-height: 1.285714286;
   margin: 0;
 }
 
 .text-body-2 {
-  color: $ec-color-text-primary-dark;
-  font-size: $ec-font-size-label;
-  font-weight: $ec-font-weight-normal;
+  color: var(--ec-color-primary-dark);
+  font-size: var(--ec-font-size-label);
+  font-weight: var(--ec-font-weight-normal);
   line-height: 1.333333333;
   margin: 0;
 }
 
 .text-caption-1 {
-  color: $ec-color-text-secondary-dark;
-  font-size: $ec-font-size-label;
-  font-weight: $ec-font-weight-normal;
+  color: var(--ec-color-secondary-dark);
+  font-size: var(--ec-font-size-label);
+  font-weight: var(--ec-font-weight-normal);
   line-height: 1.333333333;
   margin: 0;
 }
 
 .text-caption-2 {
-  color: $ec-color-text-secondary-dark;
-  font-size: $ec-font-size-tiny;
-  font-weight: $ec-font-weight-bold;
+  color: var(--ec-color-secondary-dark);
+  font-size: var(--ec-font-size-tiny);
+  font-weight: var(--ec-font-weight-bold);
   line-height: 1.6;
   margin: 0;
 }
 
 .text-display-1 {
-  color: $ec-color-text-primary-dark;
-  font-size: $ec-font-size-body;
-  font-weight: $ec-font-weight-normal;
+  color: var(--ec-color-primary-dark);
+  font-size: var(--ec-font-size-body);
+  font-weight: var(--ec-font-weight-normal);
   line-height: 1.25;
   margin: 0;
 }
 
 .text-link {
-  color: $ec-color-link !important;
+  color: var(--ec-color-interactive) !important;
   cursor: pointer;
 
   &:hover {
@@ -99,62 +98,62 @@
 
 // Font property utilities
 .font-weight-bold {
-  font-weight: $ec-font-weight-bold !important;
+  font-weight: var(--ec-font-weight-bold) !important;
 }
 
 .font-weight-normal {
-  font-weight: $ec-font-weight-normal !important;
+  font-weight: var(--ec-font-weight-normal) !important;
 }
 
 .font-size-small {
-  font-size: $ec-font-size-label !important;
+  font-size: var(--ec-font-size-label) !important;
 }
 
 .font-size-medium {
-  font-size: $ec-font-size-body !important;
+  font-size: var(--ec-font-size-body) !important;
 }
 
 .font-size-base {
-  font-size: $ec-font-size-action !important;
+  font-size: var(--ec-font-size) !important;
 }
 
 .font-size-large {
-  font-size: $ec-font-size-title !important;
+  font-size: var(--ec-font-size-title) !important;
 }
 
 .font-color-primary {
-  color: $ec-color-text-primary-dark !important;
+  color: var(--ec-color-primary-dark) !important;
 }
 
 .font-color-primary-light {
-  color: $ec-color-text-primary-light !important;
+  color: var(--ec-color-primary-light) !important;
 }
 
 .font-color-secondary {
-  color: $ec-color-text-secondary-dark !important;
+  color: var(--ec-color-secondary-dark) !important;
 }
 
 .font-color-secondary-light {
-  color: $ec-color-text-secondary-light !important;
+  color: var(--ec-color-secondary-light) !important;
 }
 
 // font-color-muted is deprecated, use .font-color-hint instead
 .font-color-muted,
 .font-color-hint {
-  color: $ec-color-text-hint-dark !important;
+  color: var(--ec-color-hint-dark) !important;
 }
 
 // @deprecated, use .text-link instead.
 .font-color-link {
-  color: $ec-color-link !important;
+  color: var(--ec-color-interactive) !important;
 }
 
 .font-color-error {
-  color: $ec-color-error !important;
+  color: var(--ec-color-danger) !important;
 }
 
 .font-color-success {
-  color: $ec-color-success !important;
+  color: var(--ec-color-success) !important;
 }
 
 // @deprecated use .text-display-1 instead
@@ -164,7 +163,7 @@
 
 // @deprecated use .text-display-1 instead
 .font-message-medium {
-  @include overlay-message($font-size: $ec-font-size-body);
+  @include overlay-message($font-size: var(--ec-font-size-body));
 }
 
 .text-truncate {
@@ -173,4 +172,8 @@
 
 .text-break-all {
   word-break: break-all;
+}
+
+.text-wrap {
+  white-space: normal;
 }