@momentum-ui/web-components 2.14.12 → 2.14.13

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

@@ -0,0 +1,86 @@
+$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

@@ -0,0 +1,10 @@
+$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

@@ -0,0 +1,116 @@
+$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

@@ -0,0 +1,6 @@
+$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

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

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

@@ -0,0 +1,9 @@
+$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

@@ -0,0 +1,114 @@
+@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-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};
+}

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

@@ -0,0 +1,114 @@
+@import "@/wc_scss/colors/settings.scss";
+@import "@/wc_scss/colors/settings-transparencies.scss";
+
+@mixin global-vars {
+  --sandbox-bg-color: #{$md-gray-20};
+  --sandbox-secondary-bg-color: #e5e5e5;
+  --main-bg-color: #{$md-gray-10};
+
+  --md-default-focus-outline-color: #{$md-blue-60};
+
+  // New Backgrounds
+  --md-primary-bg-color: #{$md-white};
+  --md-primary-one-bg-color: #{$md-white};
+  --md-primary-two-bg-color: #{$md-white};
+
+  --md-secondary-bg-color: #{$md-gray-05};
+  --md-secondary-one-bg-color: #{$md-gray-05};
+  --md-secondary-two-bg-color: #{$md-gray-05};
+  --md-secondary-three-bg-color: #{$md-gray-05};
+
+  --md-tertiary-bg-color: #{$md-gray-10};
+  --md-tertiary-one-bg-color: #{$md-gray-10};
+  --md-tertiary-two-bg-color: #{$md-gray-10};
+
+  --md-quaternary-bg-color: #{$md-gray-20};
+  --md-quaternary-one-bg-color: #{$md-gray-20};
+  --md-quaternary-two-bg-color: #{$md-gray-20};
+
+  --md-conference-chat-bg-color: #{$md-slate-10};
+
+  // Old Backgrounds (deprecated)
+  --md-secondary-white-bg-color: #{$md-white}; // use --md-primary-one-bg-color
+  --md-tertiary-white-bg-color: #{$md-white}; // use --md-primary-two-bg-color
+
+  --md-primary-success-bg-color: #{$md-green-10};
+  --md-primary-success-text-color: #{$md-green-70};
+
+  --md-primary-text-color: #{$md-gray-100};
+  --md-secondary-text-color: #{$md-gray-70};
+  --md-disabled-text-color: #{$md-gray-40};
+  --md-highlight-text-color: #{$md-theme-20};
+  --md-hyperlink-text-color: #{$md-theme-70};
+  --md-hyperlink-hover-text-color: #{$md-theme-90};
+  --md-hyperlink-focus-text-color: #{$md-theme-70};
+  --md-white-text-color: #{$mds-color-theme-common-text-primary-normal};
+
+  --md-focus-border-color: #{$md-blue-70};
+
+  --md-primary-seperator-color: #{$md-gray-30};
+  --md-secondary-seperator-color: #{$md-gray-40};
+
+  --md-alert-error-bg-color: #{$md-red-10};
+  --md-alert-error-text-color: #{$md-red-70};
+  --md-alert-warning-bg-color: #{$md-yellow-10};
+  --md-alert-warning-text-color: #{$md-yellow-70};
+  --md-alert-success-bg-color: #{$md-green-10};
+  --md-alert-success-text-color: #{$md-green-70};
+  --md-alert-info-bg-color: #{$md-blue-10};
+  --md-alert-info-text-color: #{$md-blue-70};
+
+  --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-white-100};
+  --md-email-composer-thread-bar-color: #{$md-violet-70};
+  --md-email-composer-ccChip-bg-color: #{$md-gray-05};
+
+  --md-interaction-history-bg-color: #{$md-gray-05};
+
+  --md-auto-wrapup-bg-color: #{$md-blue-05};
+  --md-menu-overlay-border-color: #{$md-gray-20};
+
+  --md-dynamic-layout-button-border-color: #{$md-gray-10};
+  --md-dynamic-layout-button-inverted-border-color: #{$md-gray-70};
+
+  --md-nav-tab-hover-bg-color: #{$md-gray-10};
+  --md-nav-tab-active-bg-color: #{$md-gray-20};
+
+  --md-input-bg-color: #{$md-white-100};
+  --md-input-chat-length-indicator-bg-color: #{$md-white-100};
+  --md-input-chat-length-indicator-color: #{$md-gray-70};
+  --md-input-chat-bg-color: #{$md-white-100};
+  --md-input-chat-color: #{$md-gray-100};
+  --md-input-chat-error-color: #a12512;
+  --md-webex-chat-disable-bg-color: #{$md-gray-20};
+  --md-webex-chat-disable-color: #{$md-gray-40};
+
+  --md-navigation-bg-color: #{$md-white};
+  --md-app-bg-color: #{$md-gray-05};
+  --md-header-bg-color: #{$md-white};
+  --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-scrollbar-background-indicator: #{$black-40};
+  --md-scrollbar-background-track: #{$black-12};
+  --md-scrollbar-background-hover-indicator: #{$black-48};
+  --md-scrollbar-background-active-indicator: #{$black-60};
+  --md-scrollbar-background-disabled-indicator: #{$black-12};
+
+  --md-table-primary-bg-color: #{$md-gray-20};
+  --md-table-header-bg-color: #{$md-gray-05};
+  --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-20};
+}

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

@@ -0,0 +1,5 @@
+@mixin global-theme-specific-vars {
+  --rem-base: 14px;
+  font-size: var(--rem-base);
+  --md-menu-active-background-color: #{$mds-color-theme-background-primary-active};
+}

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

@@ -0,0 +1,5 @@
+@mixin global-theme-specific-vars {
+  --rem-base: 16px;
+  font-size: var(--rem-base);
+  --md-menu-active-background-color: #{$mds-color-theme-background-primary-active};
+}

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

@@ -0,0 +1,176 @@
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/typography/settings";
+
+$inter-base-font: "Inter Regular", $font-family-sans-serif;
+$inter-bold-font: "Inter Bold", $font-family-sans-serif;
+$inter-bold-oblique-font: "Inter Bold Oblique", $font-family-sans-serif;
+$inter-extra-light-font: "Inter Extra Light", $font-family-sans-serif;
+$inter-extra-light-oblique-font: "Inter Extra Light Oblique", $font-family-sans-serif;
+$inter-heavy-font: "Inter Heavy", $font-family-sans-serif;
+$inter-heavy-oblique-font: "Inter Heavy Oblique", $font-family-sans-serif;
+$inter-light-font: "Inter Light", $font-family-sans-serif;
+$inter-light-oblique-font: "Inter Light Oblique", $font-family-sans-serif;
+$inter-regular-oblique-font: "Inter Regular Oblique", $font-family-sans-serif;
+$inter-thin-font: "Inter Thin", $font-family-sans-serif;
+$inter-thin-oblique-font: "Inter Thin Oblique", $font-family-sans-serif;
+$inter-medium-font: "Inter Medium", $font-family-sans-serif;
+
+@mixin global-theme-specific-vars {
+  --rem-base: 16px;
+  --brand-font-regular: #{$inter-base-font};
+  --brand-font-bold: #{$inter-bold-font};
+  --brand-font-bold-oblique: #{$inter-bold-oblique-font};
+  --brand-font-extra-light: #{$inter-extra-light-font};
+  --brand-font-extra-light-oblique: #{$inter-extra-light-oblique-font};
+  --brand-font-heavy: #{$inter-heavy-font};
+  --brand-font-heavy-oblique: #{$inter-heavy-oblique-font};
+  --brand-font-light: #{$inter-light-font};
+  --brand-font-light-oblique: #{$inter-light-oblique-font};
+  --brand-font-regular-oblique: #{$inter-regular-oblique-font};
+  --brand-font-thin: #{$inter-thin-font};
+  --brand-font-thin-oblique: #{$inter-thin-oblique-font};
+  --brand-font-medium: #{$inter-medium-font};
+
+  --brand-font-weight-light: 350;
+  --brand-font-weight-regular: 400;
+  --brand-font-weight-medium: 500;
+  --brand-font-weight-bold: 700;
+
+  font-size: var(--rem-base);
+  font-family: var(--brand-font-regular);
+  font-weight: var(--brand-font-weight-regular);
+
+  --body-large-font-size: 1.125rem;
+  --body-primary-font-size: 1rem;
+  --body-secondary-font-size: 0.875rem;
+  --label-compact-font-size: 0.75rem;
+
+  --body-primary-line-height: 1.5rem;
+
+  --wc-menu-padding: 0.5rem;
+  --wc-menu-item-height: 2.5rem;
+  --wc-menu-item-rounded-border-radius: 0.5rem;
+  --md-menu-active-background-color: #{$mds-color-theme-background-primary-active};
+
+  --wc-error-bg-color: #{$mds-color-theme-background-alert-error-normal};
+  --wc-error-text-color: #{$mds-color-theme-text-error-normal};
+  --wc-warning-bg-color: #{$mds-color-theme-background-alert-warning-normal};
+  --wc-warning-text-color: #{$mds-color-theme-text-warning-normal};
+  --wc-success-bg-color: #{$mds-color-theme-background-alert-success-normal};
+  --wc-success-text-color: #{$mds-color-theme-text-success-normal};
+  --wc-info-bg-color: #{$mds-color-theme-background-alert-theme-normal};
+  --wc-info-text-color: #{$mds-color-theme-text-accent-normal};
+
+  //Override the light and dark theme colors vars
+  --main-bg-color: #{$mds-color-theme-background-solid-primary-normal};
+  --md-default-focus-outline-color: #{$mds-color-theme-outline-theme-normal};
+
+  --md-primary-text-color: #{$mds-color-theme-text-primary-normal};
+  --md-secondary-text-color: #{$mds-color-theme-text-secondary-normal};
+  --md-disabled-text-color: #{$mds-color-theme-text-primary-disabled};
+  --md-highlight-text-color: #{$mds-color-theme-text-highlight};
+  --md-white-text-color: #{$mds-color-theme-common-text-primary-normal};
+
+  --md-hyperlink-text-color: #{$mds-color-theme-text-accent-normal};
+  --md-hyperlink-hover-text-color: #{$mds-color-theme-text-accent-hover};
+  --md-hyperlink-focus-text-color: #{$mds-color-theme-text-accent-active};
+
+  --md-primary-gradient-background: #{$mds-color-theme-background-gradient-primary-normal};
+  --md-secondary-gradient-background: #{$mds-color-theme-background-gradient-secondary-normal};
+
+  --md-primary-success-bg-color: #{$mds-color-theme-background-alert-success-normal};
+  --md-primary-success-text-color: #{$mds-color-theme-text-success-normal};
+
+  --md-focus-border-color: #{$mds-color-theme-outline-theme-normal};
+
+  --md-primary-seperator-color: #{$mds-color-theme-outline-primary-normal};
+  --md-secondary-seperator-color: #{$mds-color-theme-outline-secondary-normal};
+
+  --md-alert-error-bg-color: #{$mds-color-theme-background-alert-error-normal};
+  --md-alert-error-text-color: #{$mds-color-theme-text-error-normal};
+  --md-alert-warning-bg-color: #{$mds-color-theme-background-alert-warning-normal};
+  --md-alert-warning-text-color: #{$mds-color-theme-text-warning-normal};
+  --md-alert-success-bg-color: #{$mds-color-theme-background-alert-success-normal};
+  --md-alert-success-text-color: #{$mds-color-theme-text-success-normal};
+  --md-alert-info-bg-color: #{$mds-color-theme-background-alert-theme-normal};
+  --md-alert-info-text-color: #{$mds-color-theme-text-accent-normal};
+
+  --md-nav-tab-hover-bg-color: #{$mds-color-theme-button-secondary-hover};
+  --md-nav-tab-active-bg-color: #{$mds-color-theme-button-secondary-active-normal};
+
+  --md-menu-overlay-border-color: #{$mds-color-theme-outline-secondary-normal};
+  --md-menu-overlay-arrow-bg-color: #{$mds-color-theme-background-solid-primary-normal};
+
+  --md-dynamic-layout-button-border-color: #{$mds-color-theme-outline-button-normal};
+  --md-dynamic-layout-button-inverted-border-color: #{$mds-color-theme-inverted-outline-button-normal};
+
+  --md-navigation-bg-color: transparent;
+  --md-header-bg-color: transparent;
+  --md-app-bg-color: var(--md-primary-gradient-background);
+  --md-header-bg-color: transparent;
+  --md-header-separator-color: transparent;
+  --md-content-bg-color: var(--md-secondary-gradient-background);
+  --md-task-list-bg-color: transparent;
+  --md-agent-history-bg-color: transparent;
+
+  --md-nav-divider-primary: linear-gradient(
+    0deg,
+    #{$mds-color-theme-button-secondary-disabled} 0%,
+    #{$mds-color-theme-button-secondary-active-normal} 22.4%,
+    #{$mds-color-theme-button-secondary-active-normal} 72.4%,
+    #{$mds-color-theme-button-secondary-disabled} 100%
+  );
+  --md-nav-divider-primary-hover: var(--md-nav-divider-primary);
+
+  --md-scrollbar-background-indicator: #{$mds-color-theme-scrollbar-button-normal};
+  --md-scrollbar-background-track: #{$mds-color-theme-background-primary-active};
+  --md-scrollbar-background-hover-indicator: #{$mds-color-theme-scrollbar-button-hover};
+  --md-scrollbar-background-active-indicator: #{$mds-color-theme-scrollbar-button-pressed};
+  --md-scrollbar-background-disabled-indicator: #{$mds-color-theme-scrollbar-background-secondary-normal};
+
+  --md-table-primary-bg-color: #{$mds-color-theme-background-primary-ghost};
+  --md-table-header-bg-color: #{$mds-color-theme-background-primary-ghost};
+  --md-table-header-border-bottom: 0 -1px 0 0 #{$mds-color-theme-outline-primary-normal} inset;
+  --md-table-cell-border-bottom: 1px solid #{$mds-color-theme-outline-secondary-normal};
+  --md-table-border-style: none;
+  --md-table-sub-nav-bg-color: #{$mds-color-theme-background-primary-hover};
+  --md-table-vertical-divider-color: #{$mds-color-theme-outline-secondary-normal};
+  --md-table-pinned-border-color: #{$mds-color-theme-outline-share-inactive};
+
+  // Background colors can not be overwritten because they are being used by consumers in unexpected ways
+  // New background colors should be introduced and these phased out
+  // --md-primary-bg-color: #{$mds-color-theme-background-solid-primary-normal};
+  // --md-primary-one-bg-color: #{$mds-color-theme-background-solid-primary-normal};
+  // --md-primary-two-bg-color: #{$mds-color-theme-background-solid-secondary-normal};
+  // --md-secondary-bg-color: #{$mds-color-theme-background-solid-tertiary-normal};
+  // --md-secondary-one-bg-color: #{$mds-color-theme-background-secondary-normal};
+  // --md-secondary-two-bg-color: #{$mds-color-theme-background-secondary-hover};
+  // --md-secondary-three-bg-color: #{$mds-color-theme-background-secondary-active}
+  // --md-tertiary-bg-color: #{$mds-color-theme-background-solid-secondary-normal};
+  // --md-tertiary-one-bg-color: #{$mds-color-theme-background-solid-secondary-normal};
+  // --md-tertiary-two-bg-color: #{$md-gray-80};
+  // --md-quaternary-bg-color: #{$mds-color-theme-background-alert-default-active};
+  // --md-quaternary-one-bg-color: #{$md-gray-60};
+  // --md-quaternary-two-bg-color: #{$md-gray-90};
+  // --md-secondary-white-bg-color: #{$mds-color-theme-background-solid-primary-normal}; // use --md-primary-one-bg-color
+  // --md-tertiary-white-bg-color: #{$mds-color-theme-background-solid-secondary-normal}; // use --md-primary-two-bg-color
+
+  // --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-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};
+}