@momentum-ui/web-components 2.16.8 → 2.16.9

package/src/wc_scss/settings/core.scss

@@ -1,133 +0,0 @@
-// Namespace Variables
-@use "sass:math";
-@use "@/wc_scss/settings/rem";
-@use "@/wc_scss/colors/settings-base.scss" as color-token;
-@use "@/wc_scss/tools/functions/core.scss" as core-functions;
-
-$namespace: "md" !default;
-$prefix: "md" !default;
-$dark-class: "#{$prefix}--dark" !default;
-$admin-class: "#{$prefix}--admin" !default;
-$sites-class: "#{$prefix}--sites" !default;
-$client-class: "#{$prefix}--client" !default;
-$contrast-class: "#{$prefix}--contrast" !default;
-
-$base-cap-height: 0.0618em;
-
-// 8px used in _trumps.spacing.responsive.scss
-$base-unit-rem: math.div(rem.$rem-base, 1px);
-$base-unit-px: 4;
-$base-rem: 0.5rem;
-
-// line height settings (for vertical rhythm module _baseline.scss)
-$base-line-height-ratio: 1.71429;
-
-// this value has to be adjusted to the font used or 0 to use line-height
-$base-line-height: $base-line-height-ratio;
-
-$body-line-height: $base-line-height-ratio;
-$header-line-height: $base-line-height-ratio;
-$subheader-line-height: $base-line-height-ratio;
-$paragraph-line-height: $base-line-height-ratio;
-$paragraph-aside-line-height: $base-line-height-ratio;
-$list-line-height: $base-line-height-ratio;
-$f-dropdown-line-height: $base-line-height-ratio;
-$form-label-line-height: $base-line-height-ratio;
-$price-desc-line-height: $base-line-height-ratio;
-$input-line-height: 1;
-
-$table-line-height: $base-line-height-ratio;
-$tooltip__line-height: $base-line-height-ratio;
-
-//
-// margin settings (for vertical rhythm module _baseline.scss)
-$header-top-margin: 0;
-$header-bottom-margin: 0;
-$subheader-top-margin: 0;
-$subheader-bottom-margin: 0;
-$paragraph-margin-bottom: 0;
-$definition-list-header-margin-bottom: 0;
-$definition-list-margin-bottom: 0.5rem;
-
-// ex.: golden ratio
-// current: 16 * 1.71429 / 4 = 6.85716
-$base-scale: math.div($base-unit-rem * $base-line-height-ratio, $base-unit-px);
-
-// 4px = 0.25rem
-$base-unit: math.div($base-line-height, $base-scale) * rem.$rem-base;
-
-// We use these to control text direction settings
-$text-direction: ltr;
-$opposite-direction: right;
-$default-float: left;
-$last-child-float: $opposite-direction;
-
-$link-color: color-token.$md-theme-50;
-$link-hover-color: color-token.$md-theme-70;
-
-$global-radius: 4px;
-$border-radius-base: $global-radius;
-$global-rounded: 100%;
-
-$cursor-auto-value: auto;
-$cursor-crosshair-value: crosshair;
-$cursor-default-value: default;
-$cursor-disabled-value: not-allowed;
-$cursor-pointer-value: pointer;
-$cursor-help-value: help;
-$cursor-text-value: text;
-
-$select-border-radius: 3px;
-
-$body-font-style: normal;
-
-$row-width: core-functions.rem-calc(1366) !default;
-$total-columns: 12 !default;
-$last-child-float: $opposite-direction !default;
-$column-gutter: core-functions.rem-calc(16) !default;
-
-// legacy Bootstrap Variable
-$grid-gutter-width: 30px;
-
-$overlay-panel-height: 93px !default;
-
-// Basics of a top-bar
-$top-bar-height: 50px !default;
-$top-bar-border-width: 1px !default;
-
-$brand-shadow: rgba(0, 0, 0, 0.2);
-$brand-shadow-dark: rgba(0, 0, 0, 0.45);
-
-// Icons Variables
-$icon-font-path: "~@momentum-ui/icons/fonts" !default;
-$icon-font-name: "momentum-ui-icons" !default;
-
-// define default font weights
-$font-weight-normal: normal;
-$font-weight-bold: bold;
-
-$body-font-weight: $font-weight-normal;
-
-$padding-base-vertical: 5px;
-$padding-small-vertical: 2px;
-$padding-large-vertical: 7px;
-
-$line-height-large: 1.33;
-
-$border-radius-large: 3px;
-
-$component-active-color: color-token.$md-white-100;
-
-$cursor-disabled: not-allowed;
-
-$brand-default: color-token.$md-gray-90; // legacy bootstrap - used in Atlas
-
-$images-path: "~@momentum-ui/core/images" !default;
-
-// Dropdown Max Height for Select/Menu/SubMenu
-$dropdown-height: core-functions.rem-calc(308);
-
-$focus-color: color-token.$md-theme-50;
-
-$body-bg: color-token.$md-white-100;
-$body-font-color: color-token.$md-gray-90;

package/src/wc_scss/settings/focus.scss

@@ -1,9 +0,0 @@
-@use "@/wc_scss/settings/core";
-
-$focus__size: 2px !default;
-
-$focus-ring-gap: rem-calc(2);
-$focus-ring-size: rem-calc(2);
-$focus-boxshadow: 0 0 0 rem-calc(2) var(--md-default-focus-outline-color);
-$focus__color: core.$focus-color !default;
-$focus__color--dark: core.$focus-color !default;

package/src/wc_scss/settings/form-controls.scss

@@ -1,23 +0,0 @@
-$form-control__opacity--disabled: 0.4;
-
-$form-control__content: $md-white-100 !default;
-
-$form-control__label: inherit !default;
-$form-control__label--dark: $md-white-100 !default;
-
-$form-control__background-border--focus: $md-black-100 !default;
-$form-control__background-border--focus--dark: $md-white-100 !default;
-
-$form-control__background: $black-16 !default;
-$form-control__background--dark: $white-48 !default;
-$form-control__background--hover: $black-24 !default;
-$form-control__background--hover--dark: $white-64 !default;
-$form-control__background--pressed: $black-32 !default;
-$form-control__background--pressed--dark: $white-80 !default;
-
-$form-control__background--checked: $md-theme-50 !default;
-$form-control__background--checked--dark: $md-theme-70 !default;
-$form-control__background--checked-hover: $md-theme-60 !default;
-$form-control__background--checked-hover--dark: $md-theme-70 !default;
-$form-control__background--checked-pressed: $md-theme-70 !default;
-$form-control__background--checked-pressed--dark: $md-theme-80 !default;

package/src/wc_scss/settings/forms.scss

@@ -1,29 +0,0 @@
-@use "@/wc_scss/colors/settings" as color-tokens;
-@use "@/wc_scss/colors/settings-transparencies.scss" as transparent-color-token;
-
-$form-spacing: rem-calc(16) !default;
-
-$form-control__background: transparent-color-token.$black-16 !default;
-$form-control__background--checked: color-tokens.$md-theme-50 !default;
-$form-control__background--checked--dark: color-tokens.$md-theme-70 !default;
-$form-control__background--checked-hover: color-tokens.$md-theme-60 !default;
-$form-control__background--checked-hover--dark: color-tokens.$md-theme-70 !default;
-$form-control__background--checked-pressed: color-tokens.$md-theme-70 !default;
-$form-control__background--checked-pressed--dark: color-tokens.$md-theme-80 !default;
-$form-control__background--dark: transparent-color-token.$white-48 !default;
-$form-control__background--hover: transparent-color-token.$black-24 !default;
-$form-control__background--hover--dark: transparent-color-token.$white-64 !default;
-$form-control__background--pressed: transparent-color-token.$black-32 !default;
-$form-control__background--pressed--dark: transparent-color-token.$white-80 !default;
-$form-control__background-border--focus: color-tokens.$md-black-100 !default;
-$form-control__background-border--focus--dark: color-tokens.$md-white-100 !default;
-$form-control__content: color-tokens.$md-white-100 !default;
-$form-control__label: inherit !default;
-$form-control__label--dark: color-tokens.$md-white-100 !default;
-$form-control__opacity--disabled: 0.4 !default;
-$form-label-bottom-margin: rem-calc(4) !default;
-$form-label-font-weight: $font-weight-normal !default;
-$form-label-line-height: 1.5 !default;
-$form-label-pointer: pointer !default;
-$form-label-small-transform: capitalize !default;
-$form-section-border-color: color-tokens.$md-gray-20 !default;

package/src/wc_scss/settings/input.scss

@@ -1,65 +0,0 @@
-@use "@/wc_scss/colors/settings" as color-token;
-
-$input__class: "md-input";
-$input__class--filled: "md-input--filled";
-
-$input__border-width: rem-calc(1) !default;
-$input__font-family: $brand-font-regular !default;
-
-$input__font-size: rem-calc(16) !default;
-$input__height: rem-calc(34) !default;
-$input__padding-side: rem-calc(12) !default;
-$input__padding-side--icon: rem-calc(34) !default;
-$input__padding: 0 $input__padding-side;
-$input__border-radius: $global-radius;
-$input--pill__border-radius: rem-calc(18);
-$input__line-height: $base-line-height-ratio !default;
-
-$input__message__icon__font-size: rem-calc(16) !default;
-$input__message__font-size: rem-calc(12) !default;
-$input__message__line-height: rem-calc(22) !default;
-
-//  Color
-// Outline
-$input__background: color-token.$md-white-100 !default;
-$input__background--disabled: color-token.$md-gray-10 !default;
-$input__background--hover: color-token.$md-gray-20 !default;
-$input__border-color: color-token.$md-gray-30 !default;
-$input__border-color--read-only: transparent !default;
-$input__clear-icon__color: color-token.$md-gray-60;
-$input__clear-icon__color--hover: color-token.$md-gray-70;
-$input__font-color: color-token.$md-gray-100 !default;
-$input__font-color--disabled: color-token.$md-gray-30 !default;
-$input__font-color--help: color-token.$md-gray-70 !default;
-$input__font-color--placeholder: color-token.$md-gray-70 !default;
-$input__font-color--read-only: $input__font-color !default;
-
-// Filled
-$input__background--filled: color-token.$md-gray-10 !default;
-$input__background--filled--hover: color-token.$md-gray-20 !default;
-$input__border-color--filled: transparent !default;
-
-//  Error Color
-// Default
-$input__background--error: color-token.$md-red-10 !default;
-$input__background--error--hover: color-token.$md-red-20 !default;
-$input__border-color--error: color-token.$md-red-50 !default;
-$input__message__font-color--error: color-token.$md-red-70 !default;
-
-//  Success Color
-// Default
-$input__background--success: color-token.$md-green-10 !default;
-$input__background--success--hover: color-token.$md-green-20 !default;
-$input__border-color--success: color-token.$md-green-50 !default;
-$input__message__font-color--success: color-token.$md-green-70 !default;
-
-//  Warning Color
-// Default
-$input__background--warning: color-token.$md-yellow-10 !default;
-$input__background--warning--hover: color-token.$md-yellow-20 !default;
-$input__border-color--warning: color-token.$md-yellow-40 !default;
-$input__message__font-color--warning: color-token.$md-yellow-70 !default;
-
-$input__height--momentum: rem-calc(32) !default;
-$input__height--compact--momentum: rem-calc(28) !default;
-$input__font-size-compact--momentum: rem-calc(14) !default;

package/src/wc_scss/settings/list-item.scss

@@ -1,86 +0,0 @@
-$list__class: "md-list";
-$list-item__class: "md-list-item";
-
-$list-item__color: $md-black-100;
-$list-item__color--dark: $md-white-100;
-$list-item__icon-size: rem-calc(20);
-$list-item__font-size: rem-calc(16);
-$list-item__line-height: rem-calc(24);
-$list-item__font-size--subheader: rem-calc(12);
-$list-item__line-height--subheader: rem-calc(18);
-$list-item__color--subheader: $black-60;
-$list-item__color--subheader--dark: $white-60;
-$list-item__opacity--disabled: 0.2;
-
-// Normal List
-$list-item__height: rem-calc(44);
-$list-item__padding: (0 rem-calc(16));
-$list-item__padding--focus: (0 rem-calc(14));
-$list-item__section-margin-side: rem-calc(16);
-$list-item__background: transparent;
-$list-item__background--dark: transparent;
-$list-item__background--hover: $md-theme-10 !default;
-$list-item__background--hover--dark: $white-08 !default;
-$list-item__background--pressed: $md-theme-20 !default;
-$list-item__background--pressed--dark: $white-16 !default;
-$list-item__avatar__dimension: rem-calc(28) !default;
-$list-item__avatar__font-size: rem-calc(10);
-$list-item-separator: rem-calc(1) solid $black-08;
-$list-item-separator--dark: rem-calc(1) solid $white-08;
-
-// Contrast List
-$list-item__color--contrast: $md-black-100;
-$list-item__color--dark--contrast: $md-white-100;
-$list-item__color--dark--active--contrast: $md-black-100;
-$list-item__color--subheader--contrast: $black-60;
-$list-item__color--subheader--dark--contrast: $md-white-100;
-$list-item__background--contrast: transparent;
-$list-item__background--dark--contrast: transparent;
-$list-item__background--hover--contrast: $md-theme-10;
-$list-item__background--hover--dark--contrast: $white-12;
-$list-item__background--active--contrast: $md-theme-10;
-$list-item__background--active--dark--contrast: $md-white-100;
-
-// Small List
-$list-item--small__height: rem-calc(36);
-$list-item--small__padding: (rem-calc(8) rem-calc(10));
-$list-item--small__section-margin-side: rem-calc(10);
-
-// Large List
-$list-item--large__height: rem-calc(52);
-$list-item--large__section-margin-side: rem-calc(18);
-$list-item--large__avatar__dimension: rem-calc(28) !default;
-$list-item--large__background--pressed: $black-12 !default;
-
-// XLarge List
-$list-item--xlarge__height: rem-calc(60);
-
-// Search List
-$list-item--search__min-height: rem-calc(60);
-$list-item--search__max-height: rem-calc(82);
-$list-item__search__padding: (rem-calc(7) rem-calc(14));
-
-// Space List
-$list-item--space__section-margin-side: rem-calc(14);
-$list-item--space__padding: (0 rem-calc(28) 0 rem-calc(14));
-$list-item--space__background: transparent;
-$list-item--space__avatar__dimension: rem-calc(40) !default;
-$list-item--space__avatar__font-size: rem-calc(14) !default;
-$list-item--space__background--hover: $white-12 !default;
-$list-item--space__background--pressed: $white-24 !default;
-$list-item--space__color: $md-white-100;
-$list-item--space__color--header: $white-60 !default;
-
-// List Header
-$list-item-header__height: rem-calc(38);
-$list-item-header__padding: (0 rem-calc(14));
-$list-item-header__margin: (rem-calc(8) 0 0 0);
-$list-item-header__color: $black-80;
-$list-item-header__color--dark: $white-80;
-
-// Space Meeting
-$list-item--space-meeting__padding: (0 rem-calc(12) 0 rem-calc(14));
-
-// Space Meeting
-$list-item--space-overview__height: rem-calc(44);
-$list-item--space-overview__padding: (0 rem-calc(15));

package/src/wc_scss/settings/list.scss

@@ -1,10 +0,0 @@
-$list-item__color: $md-black-100;
-$list-item__color--dark: $md-white-100;
-$list-item__icon-size: rem-calc(20);
-$list-item__font-size: rem-calc(16);
-$list-item__line-height: rem-calc(24);
-$list-item__font-size--subheader: rem-calc(12);
-$list-item__line-height--subheader: rem-calc(18);
-$list-item__color--subheader: $black-60;
-$list-item__color--subheader--dark: $white-60;
-$list-item__opacity--disabled: 0.2;

package/src/wc_scss/settings/media.scss

@@ -1,116 +0,0 @@
-$small-breakpoint: em-calc(640);
-$medium-breakpoint: em-calc(1024);
-$large-breakpoint: em-calc(1440);
-$xlarge-breakpoint: em-calc(1920);
-
-$small-range: (0, $small-breakpoint);
-$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint);
-$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint);
-$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint);
-$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
-
-$vertical-small-breakpoint: em-calc(600);
-$vertical-medium-breakpoint: em-calc(800);
-
-$vertical-small-range: (0, $vertical-small-breakpoint);
-$vertical-medium-range: (
-  $vertical-small-breakpoint + em-calc(1),
-  $vertical-medium-breakpoint
-);
-$vertical-large-range: (
-  $vertical-medium-breakpoint + em-calc(1),
-  em-calc(99999999)
-);
-
-$screen: "only screen";
-
-$landscape: "#{$screen} and (orientation: landscape)";
-$portrait: "#{$screen} and (orientation: portrait)";
-
-$small-up: $screen;
-$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
-
-$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
-$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
-
-$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
-$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
-
-$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
-$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
-
-$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
-$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
-
-$v-small-only: "#{$screen} and (max-height: #{$vertical-small-breakpoint})";
-$v-medium-only: "#{$screen} and (min-height:#{lower-bound($vertical-medium-range)}) and (max-height:#{upper-bound($vertical-medium-range)})";
-$v-medium-down: "#{$screen} and (max-height:#{upper-bound($vertical-medium-range)})";
-
-$retina: (
-  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
-  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
-  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
-  "#{$screen} and (min-device-pixel-ratio: 2)",
-  "#{$screen} and (min-resolution: 192dpi)",
-  "#{$screen} and (min-resolution: 2dppx)"
-);
-
-// Legacy
-$small: $medium-up;
-$medium: $medium-up;
-$large: $large-up;
-
-$screen-xs: 480px;
-$screen-xs-min: $screen-xs;
-$screen-phone: $screen-xs-min;
-
-// Small screen / tablet
-// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
-$screen-sm: $small-breakpoint;
-$screen-sm-min: $screen-sm;
-$screen-tablet: $screen-sm-min;
-
-// Medium screen / desktop
-// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
-$screen-md: $medium-breakpoint;
-$screen-md-min: $screen-md;
-$screen-desktop: $screen-md-min;
-
-// Large screen / wide desktop
-// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
-$screen-lg: $large-breakpoint;
-$screen-lg-min: $screen-lg;
-$screen-lg-desktop: $screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-$screen-xs-max: ($screen-sm-min - 1);
-$screen-sm-max: ($screen-md-min - 1);
-$screen-md-max: ($screen-lg-min - 1);
-
-$grid-float-breakpoint-max: ($screen-sm-min - 1);
-
-/**
- * @component variables
- * @section mediaqueries
- *
- * @variable $screen - screens only
- * @variable $landscape - landscape orientation
- * @variable $portrait - portrait orientation
- * @variable $small-up - screens 0px width and larger
- * @variable $small-only - small screens from 0 - 640px width
- * @variable $medium-up - screens 640px and larger
- * @variable $medium-only - screens 640px to 1024px
- * @variable $large-up - screens 1025px and larger
- * @variable $large-only - screens 1025px to 1440px
- * @variable $xlarge-up - screens 1441px and larger
- * @variable $xlarge-only - screens 1441px to 1920px
- * @variable $xxlarge-up - screens 1921px and larger
- * @variable $xxlarge-only - same as $xxlarge-up
- * @variable $retina - retina screens
- *
- * @scss
- *    @media #{$medium-up} {
- *      **Media specific styles**
- *    }
- *
- */

package/src/wc_scss/settings/overlay.scss

@@ -1,6 +0,0 @@
-$event-overlay__shadow: 0 4px 12px 0 $black-16;
-$event-overlay__border-color: $md-gray-30;
-$event-overlay__border: inset 0 0 0 1px var(--md-background-quaternary, $event-overlay__border-color);
-$event-overlay-arrow__width: 20px;
-$event-overlay-arrow__height: 14px;
-$event-overlay__border-radius: 5px;

package/src/wc_scss/settings/rem.scss

@@ -1 +0,0 @@
-$rem-base: 16px;

package/src/wc_scss/settings/z-index.scss

@@ -1,9 +0,0 @@
-$zindex-sidebar: 1000;
-$zindex-drawer: 1000;
-$zindex-top-bar: 1005;
-$zindex-close: 1015;
-$zindex-popover: 1020;
-$zindex-tooltip: 1030;
-$zindex-top-bar-fixed: 1030;
-$zindex-modal-background: 1040;
-$zindex-modal: 1050;

package/src/wc_scss/themes/global--dark.scss

@@ -1,116 +0,0 @@
-@import "@/wc_scss/colors/settings.scss";
-@import "@/wc_scss/colors/settings-transparencies.scss";
-
-@mixin global-vars {
-  --sandbox-bg-color: #{$md-gray-80};
-  --sandbox-secondary-bg-color: #{$md-gray-100};
-  --main-bg-color: #{$md-gray-100};
-
-  --md-default-focus-outline-color: #{$md-blue-40};
-
-  // New Backgrounds
-  --md-primary-bg-color: #{$md-gray-100};
-  --md-primary-one-bg-color: #{$md-gray-95};
-  --md-primary-two-bg-color: #{$md-gray-90};
-
-  --md-secondary-bg-color: #{$md-gray-100};
-  --md-secondary-one-bg-color: #{$md-gray-95};
-  --md-secondary-two-bg-color: #{$md-gray-90};
-  --md-secondary-three-bg-color: #{$md-gray-80};
-
-  --md-tertiary-bg-color: #{$md-gray-90};
-  --md-tertiary-one-bg-color: #{$md-gray-95};
-  --md-tertiary-two-bg-color: #{$md-gray-80};
-
-  --md-quaternary-bg-color: #{$md-gray-80};
-  --md-quaternary-one-bg-color: #{$md-gray-60};
-  --md-quaternary-two-bg-color: #{$md-gray-90};
-
-  --md-conference-chat-bg-color: #{$md-slate-90};
-
-  // Old Backgrounds (deprecated)
-  --md-secondary-white-bg-color: #{$md-gray-95}; // use --md-primary-one-bg-color
-  --md-tertiary-white-bg-color: #{$md-gray-90}; // use --md-primary-two-bg-color
-
-  --md-primary-success-bg-color: #{$md-mint-70};
-  --md-primary-success-text-color: #{$md-mint-20};
-
-  --md-primary-text-color: #{$md-gray-05};
-  --md-secondary-text-color: #{$md-gray-40};
-  --md-disabled-text-color: #{$md-gray-70};
-  --md-highlight-text-color: #{$md-theme-80};
-  --md-hyperlink-text-color: #{$md-theme-40};
-  --md-hyperlink-hover-text-color: #{$md-theme-20};
-  --md-hyperlink-focus-text-color: #{$md-theme-40};
-  --md-white-text-color: #{$mds-color-theme-common-text-primary-normal};
-
-  --md-focus-border-color: #{$md-blue-40};
-
-  --md-primary-seperator-color: #{$md-gray-70};
-  --md-secondary-seperator-color: #{$md-gray-60};
-
-  --md-alert-error-bg-color: #{$md-red-80};
-  --md-alert-error-text-color: #{$md-red-40};
-  --md-alert-warning-bg-color: #{$md-yellow-80};
-  --md-alert-warning-text-color: #{$md-yellow-40};
-  --md-alert-success-bg-color: #{$md-green-80};
-  --md-alert-success-text-color: #{$md-green-40};
-  --md-alert-info-bg-color: #{$md-blue-80};
-  --md-alert-info-text-color: #{$md-blue-40};
-
-  --md-presence-active-bg-color: #{$md-green-50};
-  --md-presence-do-not-disturb-bg-color: #{$md-red-60};
-  --md-presence-away-bg-color: #{$md-gray-30};
-  --md-presence-busy-bg-color: #{$md-yellow-40};
-
-  --md-email-composer-bg-color: #{$md-gray-95};
-  --md-email-composer-thread-bar-color: #{$md-violet-40};
-  --md-email-composer-ccChip-bg-color: #{$md-gray-90};
-
-  --md-interaction-history-bg-color: #{$md-gray-95};
-
-  --md-auto-wrapup-bg-color: #{$md-blue-90};
-  --md-menu-overlay-border-color: #{$md-gray-80};
-
-  --md-dynamic-layout-button-border-color: #{$md-gray-70};
-  --md-dynamic-layout-button-inverted-border-color: #{$md-gray-10};
-
-  --md-nav-tab-hover-bg-color: #{$md-gray-80};
-  --md-nav-tab-active-bg-color: #{$md-gray-70};
-
-  --md-input-bg-color: #{$md-gray-95};
-  --md-input-chat-length-indicator-bg-color: #{$md-gray-90};
-  --md-input-chat-length-indicator-color: #{$md-gray-40};
-  --md-input-chat-bg-color: #{$md-gray-90};
-  --md-input-chat-color: #{$md-gray-05};
-  --md-input-chat-error-color: #{$md-red-50};
-  --md-webex-chat-disable-bg-color: #{$md-gray-90};
-  --md-webex-chat-disable-color: #{$md-gray-70};
-
-  --md-navigation-bg-color: #{$md-gray-95};
-  --md-app-bg-color: #{$md-gray-100};
-  --md-header-bg-color: #{$md-gray-95};
-  --md-header-separator-color: var(--md-primary-seperator-color);
-  --md-content-bg-color: var(--md-primary-bg-color);
-  --md-task-list-bg-color: var(--md-secondary-bg-color);
-  --md-agent-history-bg-color: var(--md-tertiary-bg-color);
-  --md-nav-divider-primary: var(--md-quaternary-bg-color);
-  --md-nav-divider-primary-hover: var(--md-primary-seperator-color);
-  --md-nav-h-divider-primary: var(--md-nav-divider-primary);
-  --md-nav-h-divider-primary-hover: var(--md-nav-divider-primary-hover);
-
-  --md-scrollbar-background-indicator: #{$white-40};
-  --md-scrollbar-background-track: #{$white-12};
-  --md-scrollbar-background-hover-indicator: #{$white-48};
-  --md-scrollbar-background-active-indicator: #{$white-60};
-  --md-scrollbar-background-disabled-indicator: #{$white-12};
-
-  --md-table-primary-bg-color: #{$md-gray-80};
-  --md-table-header-bg-color: #{$md-gray-95};
-  --md-table-header-border-bottom: none;
-  --md-table-cell-border-bottom: 1px solid #{$mds-color-theme-outline-secondary-normal};
-  --md-table-border-style: solid;
-  --md-table-sub-nav-bg-color: #{$mds-color-theme-background-primary-ghost};
-  --md-table-vertical-divider-color: #{$mds-color-theme-outline-secondary-normal};
-  --md-table-pinned-border-color: #{$md-gray-80};
-}