@energycap/components 0.28.13 → 0.28.15-css-variables-conversion.20220718-1034

package/lib/controls/help-popover/help-popover.component.d.ts

@@ -0,0 +1,7 @@
+import { PopoverContentPosition } from '../popover/popover.component';
+export declare class HelpPopoverComponent {
+    id: string;
+    text: string;
+    contentPosition: PopoverContentPosition;
+    constructor();
+}

package/package.json

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

package/public-api.d.ts

@@ -18,6 +18,7 @@ export * from './lib/controls/radio-button/radio-button-option';
 export * from './lib/controls/tabs/tabs.component';
 export * from './lib/controls/textbox/textbox.component';
 export * from './lib/controls/popover/popover.component';
+export * from './lib/controls/help-popover/help-popover.component';
 export * from './lib/controls/form-control/form-control.component';
 export * from './lib/controls/select/select.component';
 export * from './lib/core/date-time-helper';

package/src/styles/_base.scss

@@ -12,16 +12,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 +58,7 @@ a {
   }
 
   &[disabled] {
-    color: $ec-color-text-disabled-dark;
+    color: var(--ec-color-disabled-dark);
     cursor: default;
   }
 }

package/src/styles/_global-variables.scss

@@ -1,11 +1,85 @@
+@import 'variables';
+
 // Global CSS variables (custom properties). 
+// 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
+//
 // TODO: convert all SCSS variables to CSS variables
 :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-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/_variables.scss

@@ -1,82 +1,93 @@
 @import 'colors';
 
+// Core Colors
+// Used in both the application and emails
+// $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);
+
+// Core font family
+// Used in both the application and emails
+// $ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
 
 // 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);
+// $ec-color-bg-content: $white; -> ec-background-color
+// $ec-color-bg-dark: $black;
+// $ec-color-bg-body: #f1f3f4;
+// $ec-color-bg-modal: rgba($black, .5); -> ec-background-color-dialog
+// $ec-color-bg-mask: radial-gradient(circle, $gray-6 0%, $gray-8 100%); -> ec-background-color-splash
+// $ec-color-bg-content-secondary: rgba($black, .03); -> ec-background-color-detail
 
 // TODO: remove heading background
-$ec-color-bg-heading: #DEE2E4;
+// $ec-color-bg-heading: #DEE2E4; -> removed
 
 
 // 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-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-danger
 
-$ec-color-link: $blue-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
-);
+// $ec-color-active: $blue-4; -> ec-color-interactive
+// $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-danger
+// $ec-color-bg-error: #ecc4c5; -> ec-background-color-danger
+// $ec-color-bg-danger: $red-3; -> ec-color-danger
+
+// $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-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-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-color: $blue-4; -> var(ec-border-color-focus)
+
+// $ec-z-indexes: (
+//     tooltip: 10, -> var(--ec-z-index-tooltip)
+//     overlay: 20, -> var(--ec-z-index-overlay)
+//     splitter: 30, -> var(--ec-z-index-splitter)
+//     navbar: 40, -> var(--ec-z-index-navbar)
+//     popup: 50, -> var(--ec-z-index-popup)
+//     dialog: 60, -> var(--ec-z-index-dialog)
+//     toast: 70 -> var(--ec-z-index-toast)
+// );

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

@@ -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,7 +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-radius: var(--ec-border-radius-card);
@@ -30,7 +30,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;