@momentum-ui/web-components 2.16.5 → 2.16.8

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

@@ -0,0 +1,116 @@
+@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-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: #{$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,187 @@
+@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: 14px;
+  --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: 14px;
+  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;
+  --list-line-height: rem-calc(20);
+
+  --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-header-separator-color: transparent;
+
+  /**
+   * Temporarily disable overriding token  background colours for mdv2
+   * 
+  **/
+  //--md-header-bg-color: transparent;
+  //--md-navigation-bg-color: transparent;
+  //--md-app-bg-color: var(--md-primary-gradient-background);
+  //--md-content-bg-color: var(--md-secondary-gradient-background);
+  //--md-task-list-bg-color: transparent;//#{$mds-color-theme-inverted-outline-button-normal};
+  //--md-agent-history-bg-color: #{$mds-color-theme-inverted-outline-button-normal};
+
+  --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-nav-h-divider-primary: #{$mds-color-theme-gradientdivider-default-normal};
+  --md-nav-h-divider-primary-hover: #{$mds-color-theme-gradientdivider-default-hover};
+
+  --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};
+
+  /**
+   * Temporarily disable overriding table background colours for mdv2
+   * 
+  **/
+  // --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};
+}

package/src/wc_scss/tools/functions/core.scss

@@ -0,0 +1,185 @@
+@use "sass:math";
+@use "sass:list";
+@use "sass:string";
+
+@use "../../settings/rem";
+
+@function char($iso-char) {
+  @return string.unquote('"\\e#{$iso-char}"');
+}
+
+$modules: () !default;
+
+@mixin exports($name) {
+  // Import from global scope
+  $modules: $modules;
+  // Check if a module is already on the list
+  $module_index: list.index($modules, $name);
+
+  @if (($module_index == null) or ($module_index == false)) {
+    $modules: list.append($modules, $name);
+
+    @content;
+  }
+}
+
+//===============================================
+// VARS
+//===============================================
+// rem base value (16px)
+//$rem-base: $rem-base;
+
+// base unit in rems
+//$base-rem: rem-calc($rem-base) / 2;
+
+// 6 = (6 x base unit)
+//$base-scale: 6;
+
+// this value has to be adjusted to the font used or 0 to use line-height
+//$base-line-height: $base-rem * $base-scale / 1rem;
+
+// calculate base unit from scale, and rem base (4)
+//$base-unit: $base-line-height / $base-scale * $rem-base;
+
+//===============================================
+// FUNCTIONS
+//===============================================
+
+// convert px to em
+@function em($px: 0, $font-size: rem.$rem-base) {
+  @return math.div($px, $font-size) + em;
+}
+
+// convert unitless or px to rem
+@function rem($val) {
+  @if math.unit($val) == "px" or math.is-unitless($val) {
+    @return rem-calc($val);
+  } @else if math.unit($val) == "rem" {
+    @return $val;
+  } @else {
+    @warn "`#{$val}` is not a supported try a px or rem value";
+
+    @return false;
+  }
+}
+
+// convert rem to px
+@function px($val, $base: rem.$rem-base) {
+  @if math.is-unitless($val) {
+    @return $val * 1px;
+  }
+
+  @if math.unit($val) == "px" {
+    @return $val;
+  } @else if math.unit($val) == "rem" {
+    @return math.div($val * $base, 1rem);
+  } @else {
+    @warn "`#{$val}` is not a supported try a px or rem value";
+
+    @return false;
+  }
+}
+
+// find the nearest ceiling rem value to a baseline unit
+@function vr-adjust($val: 1px, $remove: 0, $base-unit: rem($base-unit)) {
+  @return math.ceil(math.div(rem($val), $base-unit)) * $base-unit - rem($remove);
+}
+
+// round to the nearest specified number
+@function round-to($val, $unit: $base-unit) {
+  @return round($val / $unit) * $unit;
+}
+
+@function lower-bound($range) {
+  @if list.length($range) <= 0 {
+    @return 0;
+  }
+
+  @return list.nth($range, 1);
+}
+
+@function upper-bound($range) {
+  @if list.length($range) < 2 {
+    @return 999999999999;
+  }
+
+  @return list.nth($range, 2);
+}
+
+@function strip-unit($num) {
+  @return math.div($num, $num * 0 + 1);
+}
+
+@function text-inputs($types: all, $selector: input) {
+  $return: ();
+
+  $all-text-input-types: text password date datetime datetime-local month week
+    email number search tel time url color textarea;
+
+  @if $types == all {
+    $types: $all-text-input-types;
+  }
+
+  @each $type in $types {
+    @if $type == textarea {
+      @if $selector == input {
+        $return: list.append($return, string.unquote("#{$type}"), comma);
+      } @else {
+        $return: list.append($return, string.unquote("#{$type}#{$selector}"), comma);
+      }
+    } @else {
+      $return: list.append($return, string.unquote('#{$selector}[type="#{$type}"]'), comma);
+    }
+  }
+
+  @return $return;
+}
+
+@function convert-to-rem($value, $base-value: rem.$rem-base) {
+  $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
+
+  @if ($value == 0) {
+    $value: 0;
+  } // Turn 0rem into 0
+
+  @return $value;
+}
+
+@function data($attr) {
+  @return "[data-" + $attr + "]";
+}
+
+@function rem-calc($values, $base-value: rem.$rem-base) {
+  $max: list.length($values);
+
+  @if $max == 1 {
+    @return convert-to-rem(list.nth($values, 1), $base-value);
+  }
+
+  $remValues: ();
+
+  @for $i from 1 through $max {
+    $remValues: list.append($remValues,
+    convert-to-rem(list.nth($values, $i), $base-value));
+  }
+
+  @return $remValues;
+}
+
+@function em-calc($values) {
+  $remValues: rem-calc($values);
+
+  $max: list.length($remValues);
+
+  @if $max == 1 {
+    @return strip-unit(list.nth($remValues, 1)) * 1em;
+  }
+
+  $emValues: ();
+
+  @for $i from 1 through $max {
+    $emValues: list.append($emValues, strip-unit(list.nth($remValues, $i)) * 1em);
+  }
+
+  @return $emValues;
+}

package/src/wc_scss/tools/mixins/avatar.scss

@@ -0,0 +1,32 @@
+@mixin avatar-size($size: $avatar__size, $font-size: $avatar__font-size) {
+  font-size: ($size * $avatar__font-factor);
+  height: $size;
+  line-height: ($size * $avatar__line-height-factor);
+  width: $size;
+}
+  
+@mixin avatar-contents-base() {
+  @include flex();
+  
+  @include border-radius($global-rounded);
+  height: 100%;
+  
+  width: 100%;
+}
+  
+@mixin avatar-overlay-style(
+  $icon-color: $md-white-100, $overlay-background: $black-40) {
+  @include avatar-contents-base();
+  background: $overlay-background;
+  color: $md-white-100;
+  font-family: $icon-font-name;
+  left: 0;
+  
+  position: absolute;
+  top: 0;
+}
+  
+@mixin composite-avatar-size($size: $composite-avatar--medium__size) {
+  height: $size;
+  width: $size;
+}

package/src/wc_scss/tools/mixins/baseline.scss

@@ -0,0 +1,71 @@
+// _baseline.scss Vertical rhythm Utility by Jason Lusk
+
+@use "sass:math";
+
+@mixin vr-baseline(
+  $fontSize,
+  $from: $fontSize,
+  $baseline: true,
+  $border: 0,
+  $line-height: $base-line-height,
+  $from-line-height: $base-line-height
+) {
+  // convert to px as needed
+  $from: px($from);
+  $fontSize: px($fontSize);
+
+  // get nearest line-height to unit
+  $_lineHeight: round-to($fontSize * $line-height, $base-unit);
+
+  // get nearest line-height to unit offset
+  $_lineHeightOffset: round-to($from * $from-line-height, $base-unit) -
+    $_lineHeight;
+
+  @if $fontSize < $from {
+    // child baseline or vertical center
+    $baseline-ratio: if($baseline, 3, 2);
+    $baseline-offset: if($baseline, $_lineHeightOffset * 2, $_lineHeightOffset);
+
+    padding-top: rem(round-to(math.div($baseline-offset, $baseline-ratio), 0.5) - $border / 2);
+    padding-bottom: rem(round-to(math.div($_lineHeightOffset, $baseline-ratio), 0.5) - $border / 2);
+  } @else {
+    line-height: $line-height;
+  }
+}
+
+// debug window
+@mixin debug($v: 0) {
+  &::before {
+    background-color: rgba(#aaa, 0.25);
+    border: 1px solid #bbb;
+    border-radius: 0.25rem;
+    bottom: 0.5rem;
+    box-shadow: 0.1rem 0.1rem 0.1rem #333;
+    color: #090;
+    content: "base-font-size:  " + quote($rem-base) +
+      "\a base-unit:            "+ quote($base-unit) + "\agrid height:          "+
+      quote($v) + "\aline-height:          "+ quote($base-line-height);
+    padding: 0.5rem;
+    position: fixed;
+    right: 0.5rem;
+    text-align: center;
+    text-transform: capitalize;
+    white-space: pre;
+  }
+}
+
+// show-baseline() : Display the grid as a background image
+@mixin show-baseline(
+  $color: rgba(254, 0, 0, 0.5),
+  $color2: rgba(0, 192, 254, 0.6)
+) {
+  background-image: linear-gradient(to bottom,
+  $color 0%,
+  transparent 12%,
+  transparent 49%,
+  $color2 50%,
+  transparent 60%,
+  transparent 100%);
+  background-position: left top;
+  background-size: 100% rem($base-unit * 2);
+}

package/src/wc_scss/tools/mixins/border-radius.scss

@@ -0,0 +1,26 @@
+// Border Radius Complete
+
+@mixin border-radius($radius) {
+  @include border-top-radius($radius);
+  @include border-bottom-radius($radius);
+}
+
+@mixin border-top-radius($radius) {
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  border-bottom-right-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+  border-bottom-left-radius: $radius;
+  border-bottom-right-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+  border-bottom-left-radius: $radius;
+  border-top-left-radius: $radius;
+}