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

package/lib/display/confirm/confirm.component.d.ts

@@ -16,20 +16,30 @@ export declare class ConfirmDialogContext {
     title?: string;
     /** Optional message */
     message?: string;
-    /** Optional textbox type, this will determine whether
-     *  an input is visible or not
+    /**
+     * Optional textbox type, this will determine whether
+     * an input is visible or not
      */
     textboxType?: TextboxType;
     /** Optional textbox label */
     textboxLabel?: string;
-    /** Optional required flag for the textbox, will set
-     *  a validator on the input if true
+    /**
+     * Optional required flag for the textbox, will set
+     * a validator on the input if true
      */
     textboxRequired?: boolean;
     /** Optional array of validators to add to the textbox form control. */
     textboxValidators?: ValidatorFn[];
     /** Sets the textbox's uppercase parameter */
     textboxUppercase?: boolean;
+    /**
+     * Optional textbox height (in rows).
+     * Only applies to multi-line type.
+     * Default 3.
+     */
+    textareaRows?: number;
+    /** Optional textbox placeholder text */
+    textboxPlaceholder?: string;
     /** Optional error message to display when textbox */
     validationErrorMessage?: string;
     /** Value returned from the input if enabled */
@@ -46,9 +56,10 @@ export declare class ConfirmDialogContext {
     alternateSaveLabel?: string;
     /** Optional alternate save button type */
     alternateSaveButtonType?: ButtonType;
-    /** Used to know which save button was selected in case the calling component
-    *  is utilizing the alternate save button
-    */
+    /**
+     * Used to know which save button was selected in case the calling component
+     * is utilizing the alternate save button
+     */
     saveSource?: SaveSource;
     /**
      * When provided, the confirm will show a pending state and call this, then upon
@@ -65,8 +76,9 @@ export declare class ConfirmComponent implements OnInit, DialogContent<ConfirmDi
     /** Form Group to hold any form controls needed */
     formGroup: FormGroup;
     status: Overlay;
-    /** Provided by the calling component to tell the confirm what to show
-     *  and is used on save to send back any entered values from the user
+    /**
+     * Provided by the calling component to tell the confirm what to show
+     * and is used on save to send back any entered values from the user
      */
     context: ConfirmDialogContext;
     onDialogSave: EventEmitter<ConfirmDialogContext>;
@@ -78,8 +90,9 @@ export declare class ConfirmComponent implements OnInit, DialogContent<ConfirmDi
     ngOnInit(): void;
     onSave(source: SaveSource): void;
     onCancel(): void;
-    /** Adds the textbox form control to our form group if its configured to be visible
-     *  Will also add the required validator if requested
+    /**
+     * Adds the textbox form control to our form group if its configured to be visible
+     * Will also add the required validator if requested
      */
     private addFormControls;
     private doInlineConfirmAction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.29.0",
+  "version": "0.29.1-css-variables-conversion.20220802-1141",
   "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;
   }
@@ -94,7 +100,7 @@ $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 {
@@ -124,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 {
@@ -144,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,7 @@
 
   &:active:enabled {
     background-color: transparent;
-    color: darken($color, 15);
+    color: $color;
   }
 
   &: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

@@ -16,11 +16,6 @@
   white-space: nowrap;
 }
 
-/// 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;
-}
-
 @mixin flex-grow {
   flex: 1 1;
   min-height: 0;
@@ -49,7 +44,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;