@energycap/components 0.28.14 → 0.28.15-css-variables-conversion.20220718-1132

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

package/src/styles/_variables.scss

@@ -1,82 +0,0 @@
-@import 'colors';
-
-
-// Background Colors
-// TODO: convert to CSS Custom Properties
-$ec-color-bg-content: $white;
-$ec-color-bg-dark: $black;
-$ec-color-bg-body: #f1f3f4;
-$ec-color-bg-modal: rgba($black, .5);
-$ec-color-bg-mask: radial-gradient(circle, $gray-6 0%, $gray-8 100%);
-$ec-color-bg-content-secondary: rgba($black, .03);
-
-// TODO: remove heading background
-$ec-color-bg-heading: #DEE2E4;
-
-
-// Text Colors
-// TODO: convert to CSS Custom Properties
-$ec-color-text-primary-dark: $black;
-$ec-color-text-primary-light: $white;
-$ec-color-text-secondary-dark: rgba($black, .66);
-$ec-color-text-secondary-light: rgba($white, .6);
-$ec-color-text-hint-dark: rgba($black, .38);
-$ec-color-text-hint-light: rgba($white, .38);
-$ec-color-text-disabled-dark: $ec-color-text-hint-dark;
-$ec-color-text-danger: $red-4;
-
-$ec-color-link: $blue-4;
-
-// Status Colors
-$ec-color-active: $blue-4;
-$ec-color-accent: #6F1C8A;
-
-$ec-color-info: rgba($blue-4, .5);
-$ec-color-bg-info: #DAE4E9;
-
-$ec-color-good: #619910;
-$ec-color-success: #3C763D;
-$ec-color-bg-success: #DFF0D8;
-
-$ec-color-bad: $orange-4;
-$ec-color-caution: $yellow-4;
-$ec-color-bg-caution: #FFF8cc;
-
-$ec-color-error: $red-5;
-$ec-color-bg-error: #ecc4c5;
-$ec-color-bg-danger: $red-3;
-
-$ec-color-bg-hover: #BFE0E9;
-
-$ec-color-bg-disabled: rgba($black, .1);
-
-$ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-$ec-monospace-font-family: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", Courier, monospace;
-
-$ec-font-size-body: 1rem;
-$ec-font-size-label: .75rem;
-$ec-font-size-action: .875rem;
-$ec-font-size-title: 1.25rem;
-$ec-font-size-icon: 1rem;
-$ec-font-size-tiny: .625rem;
-
-$ec-font-weight-bold: bold;
-$ec-font-weight-normal: normal;
-
-$ec-border-color: #d2d7d9;
-$ec-border-color-default: rgba($black, .18);
-$ec-border-color-dark: rgba($black, .87);
-$ec-border-width: 1px;
-
-$ec-focus-ring-width: .125rem;
-$ec-focus-ring-color: $blue-4;
-
-$ec-z-indexes: (
-    tooltip: 10,
-    overlay: 20,
-    splitter: 30,
-    navbar: 40,
-    popup: 50,
-    dialog: 60,
-    toast: 70
-);