@energycap/components 0.45.2-multi-select-component.20260304-0753 → 0.45.2-multi-select-component.20260304-1514

package/src/styles/_global-variables.scss

@@ -1,231 +1,231 @@
-@import './colors';
-
-// 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
-
-:root {
-  // Variables for the EnergyCAP brand color pallette
-  // Colors go from lighter (1) to darker (8).
-  --ec-color-black: #{$black}; 
-  --ec-color-white: #{$white};
-
-  --ec-color-gray-1: #{$gray-1};
-  --ec-color-gray-2: #{$gray-2};
-  --ec-color-gray-3: #{$gray-3};
-  --ec-color-gray-4: #{$gray-4};
-  --ec-color-gray-5: #{$gray-5};
-  --ec-color-gray-6: #{$gray-6};
-  --ec-color-gray-7: #{$gray-7};
-  --ec-color-gray-8: #{$gray-8};
-
-  --ec-color-red-1: #{$red-1};
-  --ec-color-red-2: #{$red-2};
-  --ec-color-red-3: #{$red-3};
-  --ec-color-red-4: #{$red-4};
-  --ec-color-red-5: #{$red-5};
-  --ec-color-red-6: #{$red-6};
-  --ec-color-red-7: #{$red-7};
-  --ec-color-red-8: #{$red-8};
-
-  --ec-color-orange-1: #{$orange-1};
-  --ec-color-orange-2: #{$orange-2};
-  --ec-color-orange-3: #{$orange-3};
-  --ec-color-orange-4: #{$orange-4};
-  --ec-color-orange-5: #{$orange-5};
-  --ec-color-orange-6: #{$orange-6};
-  --ec-color-orange-7: #{$orange-7};
-  --ec-color-orange-8: #{$orange-8};
-
-  --ec-color-yellow-1: #{$yellow-1};
-  --ec-color-yellow-2: #{$yellow-2};
-  --ec-color-yellow-3: #{$yellow-3};
-  --ec-color-yellow-4: #{$yellow-4};
-  --ec-color-yellow-5: #{$yellow-5};
-  --ec-color-yellow-6: #{$yellow-6};
-  --ec-color-yellow-7: #{$yellow-7};
-  --ec-color-yellow-8: #{$yellow-8};
-
-  --ec-color-green-1: #{$green-1};
-  --ec-color-green-2: #{$green-2};
-  --ec-color-green-3: #{$green-3};
-  --ec-color-green-4: #{$green-4};
-  --ec-color-green-5: #{$green-5};
-  --ec-color-green-6: #{$green-6};
-  --ec-color-green-7: #{$green-7};
-  --ec-color-green-8: #{$green-8};
-
-  --ec-color-blue-1: #{$blue-1};
-  --ec-color-blue-2: #{$blue-2};
-  --ec-color-blue-3: #{$blue-3};
-  --ec-color-blue-4: #{$blue-4};
-  --ec-color-blue-5: #{$blue-5};
-  --ec-color-blue-6: #{$blue-6};
-  --ec-color-blue-7: #{$blue-7};
-  --ec-color-blue-8: #{$blue-8};
-
-  --ec-color-purple-1: #{$purple-1};
-  --ec-color-purple-2: #{$purple-2};
-  --ec-color-purple-3: #{$purple-3};
-  --ec-color-purple-4: #{$purple-4};
-  --ec-color-purple-5: #{$purple-5};
-  --ec-color-purple-6: #{$purple-6};
-  --ec-color-purple-7: #{$purple-7};
-  --ec-color-purple-8: #{$purple-8};
-
-  --ec-color-cobalt-1: #{$cobalt-1};
-  --ec-color-cobalt-2: #{$cobalt-2};
-  --ec-color-cobalt-3: #{$cobalt-3};
-  --ec-color-cobalt-4: #{$cobalt-4};
-  --ec-color-cobalt-5: #{$cobalt-5};
-  --ec-color-cobalt-6: #{$cobalt-6};
-  --ec-color-cobalt-7: #{$cobalt-7};
-  --ec-color-cobalt-8: #{$cobalt-8};
-
-  --ec-color-aqua-1: #{$aqua-1};
-  --ec-color-aqua-2: #{$aqua-2};
-  --ec-color-aqua-3: #{$aqua-3};
-  --ec-color-aqua-4: #{$aqua-4};
-  --ec-color-aqua-5: #{$aqua-5};
-  --ec-color-aqua-6: #{$aqua-6};
-  --ec-color-aqua-7: #{$aqua-7};
-  --ec-color-aqua-8: #{$aqua-8};
-
-  --ec-color-pink-1: #{$pink-1};
-  --ec-color-pink-2: #{$pink-2};
-  --ec-color-pink-3: #{$pink-3};
-  --ec-color-pink-4: #{$pink-4};
-  --ec-color-pink-5: #{$pink-5};
-  --ec-color-pink-6: #{$pink-6};
-  --ec-color-pink-7: #{$pink-7};
-  --ec-color-pink-8: #{$pink-8};
-
-  --ec-color-brand-green: rgb(216, 234, 83);
-  --ec-color-brand-black: rgb(22, 47, 59);
-
-  // Colors
-  --ec-color-primary-dark: var(--ec-color-black);
-  --ec-color-primary-light: var(--ec-color-white);
-  --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);
-  
-  // TODO: where is this used and what would the new value be
-  --ec-color-shadow: rgba(26, 26, 35, .1);
-  // TODO: where is this used and what would the new value be
-  --ec-color-shadow-overlay: rgba(26, 26, 35, .2);
-
-  --ec-color-interactive: var(--ec-color-cobalt-6);
-  --ec-color-link: var(--ec-color-interactive);
-  --ec-color-link-light: var(--ec-color-blue-2);
-
-  --ec-color-info: var(--ec-color-cobalt-6);
-  --ec-color-success: var(--ec-color-green-6);
-  // Deprecated - use ec-color-success
-  --ec-color-good: var(--ec-color-success);
-  --ec-color-caution: var(--ec-color-yellow-8);
-  --ec-color-danger: var(--ec-color-red-7);
-  // Deprecated - use ec-color-danger
-  --ec-color-bad: var(--ec-color-danger);
-  --ec-color-accent: var(--ec-color-purple-6);
-
-  // TODO: where is this used and what would the new value be
-  --ec-color-control-invalid: var(--ec-color-caution);
-
-  // TODO: where is this used and what would the new value be
-  --ec-color-accrual: #{$ec-color-accrual};
-  
-  --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-dialog-stacked: rgba(26, 26, 35, .25);
-  --ec-background-splash: radial-gradient(104.77% 95.14% at 90.16% 85.25%, rgba(113,235,111,0.60) 0%, rgba(255, 255, 255, 0) 100%),
-  radial-gradient(156.88% 63.71% at 8.4% 78.12%, rgba(219, 141, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), 
-  radial-gradient(265.09% 182.17% at 24.49% 5.63%, rgba(0, 87, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), #FFF;
-  --ec-background-color-detail: rgba(26, 26, 35, .03);
-  --ec-background-color-disabled: rgba(26,26,35, .1);
-  --ec-background-color-hover: rgb(195, 212, 247);
-  --ec-background-color-selected: rgb(225, 233, 249);
-
-  --ec-background-color-info: rgb(218, 229, 251);
-  --ec-background-color-success: rgb(227, 251, 214);
-  --ec-background-color-caution: rgb(255, 249, 195);
-  --ec-background-color-danger: rgb(255, 225, 231);
-  --ec-background-color-accent: rgb(237, 220, 255);
-  --ec-background-color-promo: linear-gradient(78deg, #4B0793 0%, #A572DC 100%);
-  --ec-background-color-instructional: linear-gradient(78deg, var(--ec-color-gray-8) 0%, var(--ec-color-gray-5) 100%);
-  --ec-background-color-control: var(--ec-background-color);
-  
-  // Shadows
-  --ec-box-shadow: 0px .125rem 1rem var(--ec-color-shadow);
-  --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
-
-  // Borders
-  --ec-border-color: #D6D6D7;
-  --ec-border-color-dark: #383840;
-  --ec-border-color-hint: var(--ec-color-gray-1);
-  --ec-border-color-control: var(--ec-color-gray-4);
-  --ec-border-color-control-disabled: var(--ec-border-color-control);
-  --ec-border-color-control-readonly: transparent;
-  --ec-border-color-control-hover: var(--ec-border-color-dark);
-
-  --ec-border-radius: .25rem;
-  --ec-border-radius-card: .375rem;
-  --ec-border-radius-dialog: .5rem;
-  --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-sticky-header: 3;
-  --ec-z-index-sticky-page-header: 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;
-
-  // Form Controls
-  --ec-form-control-background-color: var(--ec-background-color);
-  --ec-form-control-color: var(--ec-color-primary-dark);
-  --ec-form-control-color-placeholder: var(--ec-color-hint-dark);
-  --ec-form-control-background-color-selection: var(--ec-color-interactive);
-  --ec-form-control-color-selection: var(--ec-color-primary-light);
-  --ec-form-control-border-color: var(--ec-color-gray-4);
-  --ec-form-control-border-radius: var(--ec-border-radius);
-  --ec-form-control-font-size: var(--ec-font-size-body);
-  --ec-form-control-border-color-focus: var(--ec-background-color);
-  --ec-form-control-box-shadow-focus: 0 0 0 2px var(--ec-color-interactive);
-  --ec-form-control-background-color-invalid: var(--ec-background-color-caution);
-  --ec-form-control-color-invalid: var(--ec-color-primary-dark);
-  --ec-form-control-border-color-invalid: var(--ec-color-caution);
-  --ec-form-control-background-color-disabled: var(--ec-background-color-disabled);
-  --ec-form-control-color-disabled: var(--ec-color-primary-dark);
-  --ec-form-control-border-color-disabled: var(--ec-color-gray-4);
-  --ec-form-control-opacity-disabled: .6;
-  --ec-form-control-background-color-readonly: var(--ec-background-color-disabled);
-  --ec-form-control-color-readonly: var(--ec-color-primary-dark);
-  --ec-form-control-border-color-readonly: var(--ec-color-gray-4);
+@import './colors';
+
+// 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
+
+:root {
+  // Variables for the EnergyCAP brand color pallette
+  // Colors go from lighter (1) to darker (8).
+  --ec-color-black: #{$black}; 
+  --ec-color-white: #{$white};
+
+  --ec-color-gray-1: #{$gray-1};
+  --ec-color-gray-2: #{$gray-2};
+  --ec-color-gray-3: #{$gray-3};
+  --ec-color-gray-4: #{$gray-4};
+  --ec-color-gray-5: #{$gray-5};
+  --ec-color-gray-6: #{$gray-6};
+  --ec-color-gray-7: #{$gray-7};
+  --ec-color-gray-8: #{$gray-8};
+
+  --ec-color-red-1: #{$red-1};
+  --ec-color-red-2: #{$red-2};
+  --ec-color-red-3: #{$red-3};
+  --ec-color-red-4: #{$red-4};
+  --ec-color-red-5: #{$red-5};
+  --ec-color-red-6: #{$red-6};
+  --ec-color-red-7: #{$red-7};
+  --ec-color-red-8: #{$red-8};
+
+  --ec-color-orange-1: #{$orange-1};
+  --ec-color-orange-2: #{$orange-2};
+  --ec-color-orange-3: #{$orange-3};
+  --ec-color-orange-4: #{$orange-4};
+  --ec-color-orange-5: #{$orange-5};
+  --ec-color-orange-6: #{$orange-6};
+  --ec-color-orange-7: #{$orange-7};
+  --ec-color-orange-8: #{$orange-8};
+
+  --ec-color-yellow-1: #{$yellow-1};
+  --ec-color-yellow-2: #{$yellow-2};
+  --ec-color-yellow-3: #{$yellow-3};
+  --ec-color-yellow-4: #{$yellow-4};
+  --ec-color-yellow-5: #{$yellow-5};
+  --ec-color-yellow-6: #{$yellow-6};
+  --ec-color-yellow-7: #{$yellow-7};
+  --ec-color-yellow-8: #{$yellow-8};
+
+  --ec-color-green-1: #{$green-1};
+  --ec-color-green-2: #{$green-2};
+  --ec-color-green-3: #{$green-3};
+  --ec-color-green-4: #{$green-4};
+  --ec-color-green-5: #{$green-5};
+  --ec-color-green-6: #{$green-6};
+  --ec-color-green-7: #{$green-7};
+  --ec-color-green-8: #{$green-8};
+
+  --ec-color-blue-1: #{$blue-1};
+  --ec-color-blue-2: #{$blue-2};
+  --ec-color-blue-3: #{$blue-3};
+  --ec-color-blue-4: #{$blue-4};
+  --ec-color-blue-5: #{$blue-5};
+  --ec-color-blue-6: #{$blue-6};
+  --ec-color-blue-7: #{$blue-7};
+  --ec-color-blue-8: #{$blue-8};
+
+  --ec-color-purple-1: #{$purple-1};
+  --ec-color-purple-2: #{$purple-2};
+  --ec-color-purple-3: #{$purple-3};
+  --ec-color-purple-4: #{$purple-4};
+  --ec-color-purple-5: #{$purple-5};
+  --ec-color-purple-6: #{$purple-6};
+  --ec-color-purple-7: #{$purple-7};
+  --ec-color-purple-8: #{$purple-8};
+
+  --ec-color-cobalt-1: #{$cobalt-1};
+  --ec-color-cobalt-2: #{$cobalt-2};
+  --ec-color-cobalt-3: #{$cobalt-3};
+  --ec-color-cobalt-4: #{$cobalt-4};
+  --ec-color-cobalt-5: #{$cobalt-5};
+  --ec-color-cobalt-6: #{$cobalt-6};
+  --ec-color-cobalt-7: #{$cobalt-7};
+  --ec-color-cobalt-8: #{$cobalt-8};
+
+  --ec-color-aqua-1: #{$aqua-1};
+  --ec-color-aqua-2: #{$aqua-2};
+  --ec-color-aqua-3: #{$aqua-3};
+  --ec-color-aqua-4: #{$aqua-4};
+  --ec-color-aqua-5: #{$aqua-5};
+  --ec-color-aqua-6: #{$aqua-6};
+  --ec-color-aqua-7: #{$aqua-7};
+  --ec-color-aqua-8: #{$aqua-8};
+
+  --ec-color-pink-1: #{$pink-1};
+  --ec-color-pink-2: #{$pink-2};
+  --ec-color-pink-3: #{$pink-3};
+  --ec-color-pink-4: #{$pink-4};
+  --ec-color-pink-5: #{$pink-5};
+  --ec-color-pink-6: #{$pink-6};
+  --ec-color-pink-7: #{$pink-7};
+  --ec-color-pink-8: #{$pink-8};
+
+  --ec-color-brand-green: rgb(216, 234, 83);
+  --ec-color-brand-black: rgb(22, 47, 59);
+
+  // Colors
+  --ec-color-primary-dark: var(--ec-color-black);
+  --ec-color-primary-light: var(--ec-color-white);
+  --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);
+  
+  // TODO: where is this used and what would the new value be
+  --ec-color-shadow: rgba(26, 26, 35, .1);
+  // TODO: where is this used and what would the new value be
+  --ec-color-shadow-overlay: rgba(26, 26, 35, .2);
+
+  --ec-color-interactive: var(--ec-color-cobalt-6);
+  --ec-color-link: var(--ec-color-interactive);
+  --ec-color-link-light: var(--ec-color-blue-2);
+
+  --ec-color-info: var(--ec-color-cobalt-6);
+  --ec-color-success: var(--ec-color-green-6);
+  // Deprecated - use ec-color-success
+  --ec-color-good: var(--ec-color-success);
+  --ec-color-caution: var(--ec-color-yellow-8);
+  --ec-color-danger: var(--ec-color-red-7);
+  // Deprecated - use ec-color-danger
+  --ec-color-bad: var(--ec-color-danger);
+  --ec-color-accent: var(--ec-color-purple-6);
+
+  // TODO: where is this used and what would the new value be
+  --ec-color-control-invalid: var(--ec-color-caution);
+
+  // TODO: where is this used and what would the new value be
+  --ec-color-accrual: #{$ec-color-accrual};
+  
+  --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-dialog-stacked: rgba(26, 26, 35, .25);
+  --ec-background-splash: radial-gradient(104.77% 95.14% at 90.16% 85.25%, rgba(113,235,111,0.60) 0%, rgba(255, 255, 255, 0) 100%),
+  radial-gradient(156.88% 63.71% at 8.4% 78.12%, rgba(219, 141, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), 
+  radial-gradient(265.09% 182.17% at 24.49% 5.63%, rgba(0, 87, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), #FFF;
+  --ec-background-color-detail: rgba(26, 26, 35, .03);
+  --ec-background-color-disabled: rgba(26,26,35, .1);
+  --ec-background-color-hover: rgb(195, 212, 247);
+  --ec-background-color-selected: rgb(225, 233, 249);
+
+  --ec-background-color-info: rgb(218, 229, 251);
+  --ec-background-color-success: rgb(227, 251, 214);
+  --ec-background-color-caution: rgb(255, 249, 195);
+  --ec-background-color-danger: rgb(255, 225, 231);
+  --ec-background-color-accent: rgb(237, 220, 255);
+  --ec-background-color-promo: linear-gradient(78deg, #4B0793 0%, #A572DC 100%);
+  --ec-background-color-instructional: linear-gradient(78deg, var(--ec-color-gray-8) 0%, var(--ec-color-gray-5) 100%);
+  --ec-background-color-control: var(--ec-background-color);
+  
+  // Shadows
+  --ec-box-shadow: 0px .125rem 1rem var(--ec-color-shadow);
+  --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
+
+  // Borders
+  --ec-border-color: #D6D6D7;
+  --ec-border-color-dark: #383840;
+  --ec-border-color-hint: var(--ec-color-gray-1);
+  --ec-border-color-control: var(--ec-color-gray-4);
+  --ec-border-color-control-disabled: var(--ec-border-color-control);
+  --ec-border-color-control-readonly: transparent;
+  --ec-border-color-control-hover: var(--ec-border-color-dark);
+
+  --ec-border-radius: .25rem;
+  --ec-border-radius-card: .375rem;
+  --ec-border-radius-dialog: .5rem;
+  --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-sticky-header: 3;
+  --ec-z-index-sticky-page-header: 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;
+
+  // Form Controls
+  --ec-form-control-background-color: var(--ec-background-color);
+  --ec-form-control-color: var(--ec-color-primary-dark);
+  --ec-form-control-color-placeholder: var(--ec-color-hint-dark);
+  --ec-form-control-background-color-selection: var(--ec-color-interactive);
+  --ec-form-control-color-selection: var(--ec-color-primary-light);
+  --ec-form-control-border-color: var(--ec-color-gray-4);
+  --ec-form-control-border-radius: var(--ec-border-radius);
+  --ec-form-control-font-size: var(--ec-font-size-body);
+  --ec-form-control-border-color-focus: var(--ec-background-color);
+  --ec-form-control-box-shadow-focus: 0 0 0 2px var(--ec-color-interactive);
+  --ec-form-control-background-color-invalid: var(--ec-background-color-caution);
+  --ec-form-control-color-invalid: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-invalid: var(--ec-color-caution);
+  --ec-form-control-background-color-disabled: var(--ec-background-color-disabled);
+  --ec-form-control-color-disabled: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-disabled: var(--ec-color-gray-4);
+  --ec-form-control-opacity-disabled: .6;
+  --ec-form-control-background-color-readonly: var(--ec-background-color-disabled);
+  --ec-form-control-color-readonly: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-readonly: var(--ec-color-gray-4);
 }

package/src/styles/_icons.scss

@@ -1,24 +1,24 @@
-$icon-url-prefix: 'data:image/svg+xml;charset=utf8,';
-
-// Deprecated SCSS variables and functions for legacy background-image icons.
-$icon-color-base: rgba(26, 26, 35, .66);
-$required-icon: none !default; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
-$invalid-icon: none !default; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
-
-// Unused function. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
-@function pending-icon() { 
-	@return ''; 
-} 
-
-// Needed for backwards compatablity of ng1 form controls in energycap repo
-@mixin icon-bg-image(
-	$icon,
-	$position: 0 50%, 
-	$size: 2rem 2rem, 
-	$repeat: no-repeat
-) { 
-	background-image: $icon;
-	background-repeat: $repeat;
-	background-position: $position;
-	background-size: $size;
+$icon-url-prefix: 'data:image/svg+xml;charset=utf8,';
+
+// Deprecated SCSS variables and functions for legacy background-image icons.
+$icon-color-base: rgba(26, 26, 35, .66);
+$required-icon: none !default; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+$invalid-icon: none !default; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+
+// Unused function. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+@function pending-icon() { 
+	@return ''; 
+} 
+
+// Needed for backwards compatablity of ng1 form controls in energycap repo
+@mixin icon-bg-image(
+	$icon,
+	$position: 0 50%, 
+	$size: 2rem 2rem, 
+	$repeat: no-repeat
+) { 
+	background-image: $icon;
+	background-repeat: $repeat;
+	background-position: $position;
+	background-size: $size;
 }

package/src/styles/bootstrap/_grid.scss

@@ -1,34 +1,34 @@
-// Bootstrap Grid
-// TODO: extract only classes we need. Keeping mostly for backwards compatibility with EnergyCAP Version 7
-@import 'bootstrap/dist/css/bootstrap-grid.min';
-@media (min-width: 1024px) {
-    .container {
-        max-width: 100%;
-    }
-}
-
-// Override bootstrap's default column padding to 8px
-.container,
-.container-fluid,
-.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, 
-.col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, 
-.col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, 
-.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
-.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, 
-.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, 
-.col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, 
-.col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, 
-.col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, 
-.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
-.col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, 
-.col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, 
-.col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, 
-.col-xl-auto {
-    padding-right: .5rem;
-    padding-left: .5rem;
-}
-
-.row {
-    margin-right: -.5rem;
-    margin-left: -.5rem;
+// Bootstrap Grid
+// TODO: extract only classes we need. Keeping mostly for backwards compatibility with EnergyCAP Version 7
+@import 'bootstrap/dist/css/bootstrap-grid.min';
+@media (min-width: 1024px) {
+    .container {
+        max-width: 100%;
+    }
+}
+
+// Override bootstrap's default column padding to 8px
+.container,
+.container-fluid,
+.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, 
+.col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, 
+.col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, 
+.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
+.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, 
+.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, 
+.col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, 
+.col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, 
+.col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, 
+.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
+.col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, 
+.col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, 
+.col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, 
+.col-xl-auto {
+    padding-right: .5rem;
+    padding-left: .5rem;
+}
+
+.row {
+    margin-right: -.5rem;
+    margin-left: -.5rem;
 }