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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.28.14",
+  "version": "0.28.15-css-variables-conversion.20220718-1132",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/styles/_base.scss

@@ -1,5 +1,3 @@
-@import 'variables';
-
 $fa-font-path: '/assets/webfonts';
 @import '@fortawesome/fontawesome-pro/scss/solid';
 
@@ -12,16 +10,16 @@ body {
 }
 
 body {
-  font-family: $ec-font-family;
-  font-size: .875rem;
-  color: $black;
+  font-family: var(--ec-font-family);
+  font-size: var(--ec-font-size);
+  color: var(--ec-color-primary-dark);
 }
 
 a {
-  color: $ec-color-link;
+  color: var(--ec-color-interactive);
   
   &:hover {
-    color: $ec-color-link;
+    color: var(--ec-color-interactive);
     text-decoration: underline;
   }
 
@@ -58,7 +56,7 @@ a {
   }
 
   &[disabled] {
-    color: $ec-color-text-disabled-dark;
+    color: var(--ec-color-disabled-dark);
     cursor: default;
   }
 }

package/src/styles/_core.scss

@@ -1,4 +1,4 @@
 @import 'functions';
-@import 'variables';
+@import 'colors';
 @import 'mixins/common';
 @import 'icons';

package/src/styles/_global-variables.scss

@@ -1,11 +1,83 @@
 // Global CSS variables (custom properties). 
-// TODO: convert all SCSS variables to CSS variables
+// Variable names should follow this pattern: --ec-<css-property>[-<dash delimited modifiers>]. 
+// If the variable is the default value, don't include a modifier
+// For example, the primary dark color should be named --ec-color-primary-dark 
+// and default border color should be --ec-border-color
+
 :root {
+  // Colors
+  --ec-color-primary-dark: rgb(26, 26, 35);
+  --ec-color-primary-light: rgb(255, 255, 255);
+  --ec-color-secondary-dark: rgba(26, 26, 35, .66);
+  --ec-color-secondary-light: rgba(255, 255, 255, .6);
+  --ec-color-hint-dark: rgba(26, 26, 35, .38);
+  --ec-color-hint-light: rgba(255, 255, 255, .38);
+  --ec-color-disabled-dark: var(--ec-color-hint-dark);
+  --ec-color-shadow: rgba(26, 26, 35, .1);
+  --ec-color-shadow-overlay: rgba(26, 26, 35, .2);
+  --ec-color-interactive: rgb(0, 132, 169);
+  --ec-color-info: rgba(0, 132, 169, .5);
+  // Deprecated - use ec-color-success
+  --ec-color-good: rgb(97, 153, 16);
+  --ec-color-success: rgb(60, 118, 61);
+  --ec-color-caution: rgb(255, 228, 51);
+  // Deprecated - use ec-color-danger
+  --ec-color-bad: rgb(250, 123, 46);
+  --ec-color-danger: rgb(227, 52, 54);
+  --ec-color-accent: rgb(111, 28, 138);
+  
+  --ec-background-color: rgb(255, 255, 255);
+  --ec-background-color-overlay: rgba(255, 255, 255, .7);
+  --ec-background-color-body: rgb(241, 243, 244);
+  --ec-background-color-body-overlay: rgba(241, 243, 244, .7);
+  --ec-background-color-dark: rgb(26, 26, 35);
+  --ec-background-color-dialog: rgba(26, 26, 35, .5);
+  --ec-background-color-splash: radial-gradient(circle, rgb(73, 89, 99) 0%, rgb(22, 47, 59) 100%);
+  --ec-background-color-detail: rgba(26, 26, 35, .03);
+  --ec-background-color-disabled: rgba(26,26,35, .1);
+  --ec-background-color-hover: rgb(191, 224, 233);
+  --ec-background-color-selected: rgb(218, 228, 233);
+  --ec-background-color-info: var(--ec-background-color-selected);
+  --ec-background-color-success: rgb(222, 239, 215);
+  --ec-background-color-caution: rgb(255, 248, 204);
+  --ec-background-color-danger: rgb(236, 196, 197);
+  
+  // Shadows
+  --ec-box-shadow: 0px .125rem .5rem var(--ec-color-shadow);
+  --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-radius: .25rem;
   --ec-border-radius-card: .375rem;
   --ec-border-radius-dialog: .5rem;
-  --ec-color-shadow: rgba(26,26,35,.1);
-  --ec-color-shadow-overlay: rgba(26,26,35,.2);
-  --ec-box-shadow: 0px .125rem .5rem var(--ec-color-shadow);
-  --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
+  --ec-border-color-focus: var(--ec-color-interactive);
+  --ec-border-width: 1px;
+
+  // Fonts
+  --ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  --ec-font-family-monospace: "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: .875rem;
+  --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;
+
+  // Z-indexes
+  --ec-z-index-tooltip: 10;
+  --ec-z-index-overlay: 20;
+  --ec-z-index-splitter: 30;
+  --ec-z-index-navbar: 40;
+  --ec-z-index-popup: 50;
+  --ec-z-index-dialog: 60;
+  --ec-z-index-toast: 70;
 }

package/src/styles/components/_splash.scss

@@ -1,4 +1,3 @@
-@import "../variables";
 @import "../mixins/animations";
 
 .app-splash {
@@ -8,7 +7,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-image: radial-gradient(circle, $gray-6, $gray-8);
+  background-image: var(--ec-background-color-splash);
   transition-property: opacity;
   transition-duration: .3s;
   transition-timing-function: ease-out;

package/src/styles/components/_unsupported-browsers.scss

@@ -1,4 +1,4 @@
-@import '../variables';
+@import '../colors';
 
 .unsupported-browser-container {
   display: flex;
@@ -9,14 +9,14 @@
   left: 0;
   bottom: 0;
   align-items: center;
-  background: $ec-color-bg-mask;
+  background: var(--ec-background-color-splash);
 }
 
 .unsupported-browser {
   max-width: 25rem;
   margin: 0 auto;
-  font-size: $ec-font-size-title;
-  color: $ec-color-text-primary-light;
+  font-size: var(--ec-font-size-title);
+  color: var(--ec-color-primary-light);
 
   a {
     color: $blue-1;

package/src/styles/email/_email-base.scss

@@ -1,11 +1,17 @@
-@import '../variables';
-
-$email-bg: $ec-color-bg-content;
+// Most email clients do not support CSS Custom Properties (variables),
+// so we need to reference SCSS variables instead.
+$ec-color-primary-dark: rgb(26, 26, 35);
+$ec-color-secondary-dark: rgba(26, 26, 35, .66);
+$ec-color-interactive: rgb(0, 132, 169);
+$ec-background-color: rgb(255, 255, 255);
+$ec-border-color: rgba(26, 26, 35, .18);
+$ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$green-3: #cfd856; 
 
 @mixin body {
   font-size: 14px;
   font-weight: 400;
-  color: $ec-color-text-primary-dark;
+  color: $ec-color-primary-dark;
   line-height: 1.2;
   font-family: $ec-font-family;
   text-align: left;
@@ -31,7 +37,7 @@ $email-bg: $ec-color-bg-content;
     font-size: 12px;
     line-height: 16px;
     text-transform: uppercase;
-    color: $ec-color-text-secondary-dark;
+    color: $ec-color-secondary-dark;
   }
   
   h1, h3, h5 {
@@ -55,7 +61,7 @@ $email-bg: $ec-color-bg-content;
   }
   
   a {
-    color: $ec-color-link;
+    color: $ec-color-interactive;
     text-decoration: none;
     background-color: transparent;
   }
@@ -65,7 +71,7 @@ $email-bg: $ec-color-bg-content;
   }
   
   a:focus {
-    outline: $ec-color-link solid 2px;
+    outline: $ec-color-interactive solid 2px;
     outline-offset: 2px;
     border-radius: 2px;
   }
@@ -85,7 +91,8 @@ $email-bg: $ec-color-bg-content;
     outline: 0;
   }
   
-  .email-button {
+  .email-button,
+  .email-button-primary {
     display: inline-block;
     margin-right: 8px;
     margin-bottom: 8px;
@@ -93,7 +100,11 @@ $email-bg: $ec-color-bg-content;
     padding: 0 16px;
     line-height: 32px;
     border-radius: 4px;
-    color: $ec-color-text-primary-dark !important;
+    color: $ec-color-primary-dark !important;
+  }
+
+  .email-button-primary {
+    background-color: $green-3;
   }
   
   .email-cta {
@@ -103,7 +114,7 @@ $email-bg: $ec-color-bg-content;
     background-color: #17303B;
     color: #D8E902 !important;
     line-height: 48px;
-    padding: 0 24p;
+    padding: 0 24px;
     min-width: 176px;
     text-align: center;
     border-radius: 6px;
@@ -119,7 +130,7 @@ $email-bg: $ec-color-bg-content;
     border-bottom: 0;
     overflow: visible;
     margin: 16px 0;
-    border-color: $ec-border-color-default;
+    border-color: $ec-border-color;
   }
   
   .text-left {
@@ -139,12 +150,12 @@ $email-bg: $ec-color-bg-content;
   }
 
   .text-caption-1 {
-    color: $ec-color-text-secondary-dark;
+    color: $ec-color-secondary-dark;
     font-size: 12px;
   }
 
   .text-caption-2 {
-    color: $ec-color-text-secondary-dark;
+    color: $ec-color-secondary-dark;
     font-size: 10px;
   }
 }

package/src/styles/email/email.scss

@@ -2,7 +2,7 @@
 @import 'email-base';
 
 html {
-  background-color: $ec-color-bg-content;
+  background-color: $ec-background-color;
   font-size: 16px;
 }
 

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

@@ -8,7 +8,7 @@
     $selector: button
   );
 
-  font-size: $ec-font-size-action;
+  font-size: var(--ec-font-size-action);
   line-height: 1.25rem;
   justify-content: center;
   border: $control-border-width solid transparent;
@@ -32,29 +32,29 @@
 @mixin primary-button {
   background-color: $green-3;
   border-color: $green-4;
-  color: $ec-color-text-primary-dark;
+  color: var(--ec-color-primary-dark);
 
   &:active:enabled {
     background-color: $green-4;
-    color: $ec-color-text-primary-dark;
+    color: var(--ec-color-primary-dark);
   }
 }
 
 @mixin secondary-button {
-  background-color: $ec-color-bg-content;
+  background-color: var(--ec-background-color);
   border-color: $control-border-color;
-  color: $ec-color-text-primary-dark;
+  color: var(--ec-color-primary-dark);
 
   &:active:enabled {
-    background-color: $ec-color-bg-content;
-    color: $ec-color-text-primary-dark;
+    background-color: var(--ec-background-color);
+    color: var(--ec-color-primary-dark);
   }
 }
 
 @mixin common-button {
   background-color: $blue-3;
   border-color: $blue-4;
-  color: $ec-color-text-primary-light;
+  color: var(--ec-color-primary-light);
 
   .ec-icon {
     color: inherit;
@@ -67,9 +67,9 @@
 }
 
 @mixin danger-button {
-  background-color: $ec-color-bg-danger;
+  background-color: var(--ec-color-danger);
   border-color: $red-4;
-  color: $ec-color-text-primary-light;
+  color: var(--ec-color-primary-light);
 
   .ec-icon {
     color: inherit;
@@ -87,7 +87,7 @@
   padding: 0;
 
   .ec-icon {
-    height: rem-to-em(rem-calc(16px), $nav-font-size);
+    height: 1rem;
     margin: 0;
     padding: 0;
   }
@@ -113,7 +113,7 @@
   }
 }
 
-@mixin text-button($color: $ec-color-text-primary-dark, $icon-color: inherit) {
+@mixin text-button($color: var(--ec-color-primary-dark), $icon-color: inherit) {
   background-color: transparent;
   color: $color;
 
@@ -123,7 +123,6 @@
 
   &:active:enabled {
     background-color: transparent;
-    color: darken($color, 15);
   }
 
   &:disabled {

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

@@ -1,9 +1,7 @@
-@import '../variables';
-
 @mixin card {
-  background-color: $ec-color-bg-content;
+  background-color: var(--ec-background-color);
   background-clip: padding-box;
-  border: 1px solid rgba($black, .1);
+  border: var(--ec-border-width) solid var(--ec-border-color-hint);
   border-radius: var(--ec-border-radius-card);
   overflow: auto;
   box-shadow: var(--ec-box-shadow);
@@ -30,7 +28,7 @@
 
 @mixin card-footer {
   @extend .text-caption-1;
-  border-top: 1px solid $ec-border-color-default;
+  border-top: 1px solid var(--ec-border-color);
   min-height: 2rem;
   padding: .5rem;
 }

package/src/styles/mixins/_common.scss

@@ -18,7 +18,7 @@
 
 /// Add a colored border on the specified side of a table cell
 @mixin grid-cell-status($side, $color) {
-  border-#{$side}: $ec-border-width * 4 solid $color !important;
+  border-#{$side}: 1px * 4 solid $color !important;
 }
 
 @mixin flex-grow {
@@ -49,7 +49,7 @@
 }
 
 @mixin count-display {
-  color: $ec-color-accent;
+  color: var(--ec-color-accent);
   font-size: rem-calc(32px);
   font-style: normal;
   font-weight: bold;

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

@@ -1,32 +1,32 @@
 @import '../core';
 
-$control-border-color: $ec-border-color;
-$control-border-width: rem-calc($ec-border-width);
-$control-color: $ec-color-text-primary-dark;
-$control-bg: $ec-color-bg-content;
-$control-font-family: $ec-font-family;
-$control-font-size: $ec-font-size-body;
+$control-border-color: var(--ec-border-color-legacy);
+$control-border-width: rem-calc(1px);
+$control-color: var(--ec-color-primary-dark);
+$control-bg: var(--ec-background-color);
+$control-font-family: var(--ec-font-family);
+$control-font-size: var(--ec-font-size-body);
 $control-height: rem-calc(32px);
 $control-line-height: rem-calc(20px);
 $control-padding-x: rem-calc(8px);
 
 // Active State
-$control-bg-active: $ec-color-link;
-$control-text-active: $ec-color-text-primary-light;
+$control-bg-active: var(--ec-color-interactive);
+$control-text-active: var(--ec-color-primary-light);
 
 // Focused
-$control-bg-focused: $ec-color-text-disabled-dark;
-$control-border-color-focused: $ec-color-link;
-$control-shadow-focused: 0 0 0 $ec-border-width $control-border-color-focused;
+$control-bg-focused: var(--ec-color-disabled-dark);
+$control-border-color-focused: var(--ec-color-interactive);
+$control-shadow-focused: 0 0 0 $control-border-width $control-border-color-focused;
 
 // Disabled
-$control-bg-disabled: $ec-color-bg-disabled;
-$control-color-disabled: $ec-color-text-secondary-dark;
+$control-bg-disabled: var(--ec-background-color-disabled);
+$control-color-disabled: var(--ec-color-secondary-dark);
 $control-opacity-disabled: .65;
 
 // Invalid
-$control-bg-invalid: $ec-color-bg-caution;
-$control-border-color-invalid: $ec-color-caution;
+$control-bg-invalid: var(--ec-background-color-caution);
+$control-border-color-invalid: var(--ec-color-caution);
 
 // Read only
 $control-bg-read-only: rgba($black, .12);
@@ -63,7 +63,7 @@ $control-bg-read-only: rgba($black, .12);
   @if $borders {
     $padding-y: (($height - $line-height) / 2) - $control-border-width;
   }
-  padding: rem-to-em($padding-y, $font-size) rem-to-em($control-padding-x, $font-size);
+  padding: $padding-y $control-padding-x;
 }
 
 @mixin control-focus($borders: true) {
@@ -90,7 +90,7 @@ $control-bg-read-only: rgba($black, .12);
     &:required,
     &:required.is-empty {
       background-image: none;
-      padding-left: rem-to-em($control-padding-x, $control-font-size);
+      padding-left: $control-padding-x;
 
       // We need to define these again because the :required styles override
       // the background-color and border-color we set above
@@ -119,14 +119,14 @@ $control-bg-read-only: rgba($black, .12);
 }
 
 @mixin control-active {
-  background-color: $ec-color-bg-hover;
+  background-color: var(--ec-background-color-hover);
 }
 
 @mixin control-popup {
-  background-color: $ec-color-bg-content;
+  background-color: var(--ec-background-color);
   border-radius: var(--ec-border-radius-card);
   box-shadow: var(--ec-box-shadow-overlay);
   margin-top: .25rem;
   overflow: hidden;
-  z-index: map-get($ec-z-indexes, popup);
+  z-index: var(--ec-z-index-popup);
 }

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

@@ -10,8 +10,8 @@ $dialog-close-duration: 100;
 $panel-open-duration: 250;
 $panel-close-duration: 225;
 
-$overlay-bg: $ec-color-bg-modal;
-$dialog-bg: $ec-color-bg-body;
+$overlay-bg: var(--ec-background-color-dialog);
+$dialog-bg: var(--ec-background-color-body);
 $dialog-min-height: 9rem;
 $dialog-max-width: 90vw;
 $dialog-max-height: 90vh;
@@ -49,7 +49,7 @@ $dialog-widths: (
   background-color: $overlay-bg;
   justify-content: center;
   position: fixed;
-  z-index: map-get($ec-z-indexes, dialog);
+  z-index: var(--ec-z-index-dialog);
   top: 0;
   left: 0;
   right: 0;

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