@momentum-ui/web-components 2.16.8 → 2.16.10

package/src/wc_scss/typography/settings.scss

@@ -1,300 +0,0 @@
-// We use these to define default font stacks
-@use "sass:math";
-@use "sass:color";
-@use "@/wc_scss/settings/rem";
-@use "@/wc_scss/colors/settings-base.scss" as color-tokens;
-
-$brand-font-folder: "~@momentum-ui/core/fonts" !default;
-$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
-
-$brand-font-regular: var(--brand-font-regular, "CiscoSansTT Regular", $font-family-sans-serif);
-$brand-font-bold: var(--brand-font-bold, "CiscoSansTT Bold", $font-family-sans-serif);
-$brand-font-bold-oblique: var(--brand-font-bold-oblique, "CiscoSansTT Bold Oblique", $font-family-sans-serif);
-$brand-font-extra-light: var(--brand-font-extra-light, "CiscoSansTT Extra Light", $font-family-sans-serif);
-$brand-font-extra-light-oblique: var(
-  --brand-font-extra-light-oblique,
-  "CiscoSansTT Extra Light Oblique",
-  $font-family-sans-serif
-);
-$brand-font-heavy: var(--brand-font-heavy, "CiscoSansTT Heavy", $font-family-sans-serif);
-$brand-font-heavy-oblique: var(--brand-font-heavy-oblique, "CiscoSansTT Heavy Oblique", $font-family-sans-serif);
-$brand-font-light: var(--brand-font-light, "CiscoSansTT Light", $font-family-sans-serif);
-$brand-font-light-Oblique: var(--brand-font-light-oblique, "CiscoSansTT Light Oblique", $font-family-sans-serif);
-$brand-font-regular-oblique: var(--brand-font-regular-oblique, "CiscoSansTT Regular Oblique", $font-family-sans-serif);
-$brand-font-thin: var(--brand-font-thin, "CiscoSansTT Thin", $font-family-sans-serif);
-$brand-font-thin-oblique: var(--brand-font-thin-oblique, "CiscoSansTT Thin Oblique", $font-family-sans-serif);
-
-$brand-font-medium: var(--brand-font-medium, "CiscoSans-Medium", $font-family-sans-serif);
-
-$body-font-family: $brand-font-regular;
-
-// TODO: Replace variables in app.
-$brand-font-cisco-TT-Bold: $brand-font-bold;
-$brand-font-cisco-TT-Bold-Oblique: $brand-font-bold-oblique;
-$brand-font-cisco-TT-Extra-Light: $brand-font-extra-light;
-$brand-font-cisco-TT-Extra-Light-Oblique: $brand-font-extra-light-oblique;
-$brand-font-cisco-TT-Heavy: $brand-font-heavy;
-$brand-font-cisco-TT-Heavy-Oblique: $brand-font-heavy-oblique;
-$brand-font-cisco-TT-Light: $brand-font-light;
-$brand-font-cisco-TT-Light-Oblique: $brand-font-light-Oblique;
-$brand-font-cisco-TT-Regular: $brand-font-regular;
-$brand-font-cisco-TT-Regular-Oblique: $brand-font-regular-oblique;
-$brand-font-cisco-TT-Thin: $brand-font-thin;
-$brand-font-cisco-TT-Thin-Oblique: $brand-font-thin-oblique;
-
-$font-size-base: 14px;
-$font-size-large: math.ceil($font-size-base * 1.1); // ~16px
-
-$font-size-small: math.ceil($font-size-base * 0.85); // ~12px
-
-$font-size-h1: math.floor($font-size-base * 2.9); // ~40px
-
-$font-size-h2: math.floor($font-size-base * 2.3); // ~32px
-
-$font-size-h3: math.ceil($font-size-base * 1.7); // ~24px
-
-$font-size-h4: math.ceil($font-size-base * 1.25); // ~18px
-
-$font-size-h5: $font-size-base;
-$font-size-h6: math.ceil($font-size-base * 0.85);
-$line-height-base: 1.428571429; // 20/14
-$line-height-computed: math.floor(($font-size-base * $line-height-base));
-
-// We use these to define default font weights
-$font-weight-normal: normal !default;
-$font-weight-bold: bold !default;
-$font-color-primary: color-tokens.$md-gray-90;
-
-$text-color: color-tokens.$md-gray-70;
-
-// We use these to control header font styles
-$header-font-family: $body-font-family !default;
-$header-font-weight: $font-weight-normal !default;
-$header-font-style: normal !default;
-$header-font-color: color-tokens.$md-gray-70 !default;
-
-$header-line-height: 1.4 !default;
-$header-top-margin: 0.2rem !default;
-$header-bottom-margin: 0.5rem !default;
-$header-text-rendering: optimizeLegibility !default;
-
-// We use these to control header font sizes
-$title-heading-font-size-pixel: 62;
-$title-heading-font-size: rem-calc($title-heading-font-size-pixel) !default;
-$h1-font-size-pixel: 48;
-$h1-font-size: rem-calc($h1-font-size-pixel) !default;
-$h2-font-size-pixel: 36;
-$h2-font-size: rem-calc($h2-font-size-pixel) !default;
-$h3-font-size-pixel: 26;
-$h3-font-size: rem-calc($h3-font-size-pixel) !default;
-$h4-font-size-pixel: 20;
-$h4-font-size: rem-calc($h4-font-size-pixel) !default;
-$h5-font-size-pixel: 16;
-$h5-font-size: rem-calc($h5-font-size-pixel) !default;
-$h6-font-size-pixel: 14;
-$h6-font-size: rem-calc($h6-font-size-pixel) !default;
-
-// We use these to control header size reduction on small screens
-$h1-font-reduction: 0 !default;
-$h2-font-reduction: 0 !default;
-$h3-font-reduction: 0 !default;
-$h4-font-reduction: 0 !default;
-$h5-font-reduction: 0 !default;
-$h6-font-reduction: 0 !default;
-
-$base-font-size: rem.$rem-base;
-
-// These control how subheaders are styled.
-$subheader-line-height: 1.4 !default;
-$subheader-font-color: color.scale($header-font-color, $lightness: 35%) !default;
-$subheader-font-weight: $font-weight-normal !default;
-$subheader-top-margin: 0.2rem !default;
-$subheader-bottom-margin: 0.5rem !default;
-
-// A general <small> styling
-$small-font-size: 0.875 !default;
-
-$small-font-color: color.scale($header-font-color, $lightness: 35%) !default;
-
-// We use these to style paragraphs
-$paragraph-font-family: inherit !default;
-$paragraph-font-weight: $font-weight-normal !default;
-$paragraph-font-size-pixel: 14;
-$paragraph-font-size: rem-calc($paragraph-font-size-pixel) !default;
-
-$paragraph-line-height: 1.6 !default;
-$paragraph-margin-bottom: rem-calc(20) !default;
-$paragraph-aside-font-size: rem-calc(14) !default;
-$paragraph-aside-line-height: 1.35 !default;
-$paragraph-aside-font-style: italic !default;
-$paragraph-text-rendering: optimizeLegibility !default;
-
-// body-small/est styling
-$body-small-font-size-pixel: 12;
-$body-small-font-size: rem-calc($body-small-font-size-pixel) !default;
-$body-smallest-font-size-pixel: 10;
-$body-smallest-font-size: rem-calc($body-smallest-font-size-pixel) !default;
-
-$lead-font-size: rem-calc(14) !default;
-
-// We use these to style <code> tags
-$code-color: color-tokens.$md-gray-90 !default;
-$code-font-family: $font-family-monospace !default;
-$code-font-weight: $font-weight-normal !default;
-$code-background-color: transparent !default;
-
-
-$code-border-size: 0 !default;
-
-$code-border-style: solid !default;
-$code-border-color: color.scale($code-background-color, $lightness: -10%) !default;
-$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
-
-// We use these to style anchors
-$anchor-text-decoration: none !default;
-$anchor-text-decoration-hover: none !default;
-$anchor-font-color: color-tokens.$md-theme-60 !default;
-$anchor-font-color-hover: color-tokens.$md-theme-70 !default;
-
-// We use these to style the <hr> element
-$hr-border-width: 1px !default;
-$hr-border-style: solid !default;
-$hr-border-color: color-tokens.$md-gray-20 !default;
-$hr-margin: rem-calc(20) !default;
-
-// We use these to style lists
-$list-font-family: $paragraph-font-family !default;
-$list-font-size: $paragraph-font-size !default;
-$list-line-height: $paragraph-line-height !default;
-$list-margin-bottom: $paragraph-margin-bottom !default;
-$list-style-position: outside !default;
-$list-side-margin: 1rem !default;
-$list-ordered-side-margin: 1.5rem !default;
-
-$list-side-margin-no-bullet: 0 !default;
-$list-nested-margin: rem-calc(20) !default;
-$definition-list-header-weight: $font-weight-bold !default;
-$definition-list-header-margin-bottom: 0.3rem !default;
-$definition-list-margin-bottom: rem-calc(12) !default;
-
-// We use these to style blockquotes
-$blockquote-font-color: inherit !default;
-$blockquote-padding: rem-calc(9 20 0 19) !default;
-$blockquote-border-width: 4px !default;
-$blockquote-padding: 0.5rem 1rem calc(0.25rem + #{$blockquote-border-width}) 1rem !default;
-$blockquote-border: $blockquote-border-width solid color-tokens.$md-gray-50 !default;
-
-$blockquote-cite-font-size: rem-calc(13) !default;
-$blockquote-cite-font-color: inherit !default;
-$blockquote-cite-link-color: $blockquote-cite-font-color !default;
-
-// Acronym styles
-$acronym-underline: 1px dotted color-tokens.$md-gray-20 !default;
-
-// line height (px) divided by font-size
-$title-heading-line-height: rem-calc(math.div(80, $title-heading-font-size-pixel)) !default;
-$h1-line-height: rem-calc(math.div(64, $h1-font-size-pixel)) !default;
-$h2-line-height: rem-calc(math.div(48, $h2-font-size-pixel)) !default;
-$h3-line-height: rem-calc(math.div(32, $h3-font-size-pixel)) !default;
-$h4-line-height: rem-calc(math.div(32, $h4-font-size-pixel)) !default;
-$h5-line-height: rem-calc(math.div(24, $h5-font-size-pixel)) !default;
-$h6-line-height: rem-calc(math.div(24, $h6-font-size-pixel)) !default;
-$paragraph-line-height: rem-calc(math.div(24, $paragraph-font-size-pixel)) !default;
-$body-small-line-height: rem-calc(math.div(16, $body-small-font-size-pixel)) !default;
-$body-smallest-line-height: rem-calc(math.div(16, $body-smallest-font-size-pixel)) !default;
-
-//------------------------------------
-//    #FONT-SIZE-VARIABLES
-//    create font size map to zurb's foundation
-//------------------------------------
-$fontSizes: (
-  dl: $paragraph-font-size,
-  dt: $paragraph-font-size,
-  dd: $paragraph-font-size,
-  li: $paragraph-font-size,
-  title-heading: $title-heading-font-size,
-  h1: $h1-font-size,
-  h2: $h2-font-size,
-  h3: $h3-font-size,
-  h4: $h4-font-size,
-  h5: $h5-font-size,
-  h6: $h6-font-size,
-  pre: $paragraph-font-size,
-  code: $paragraph-font-size,
-  p: $paragraph-font-size,
-  blockquote: $paragraph-font-size,
-  th: $paragraph-font-size,
-  td: $paragraph-font-size,
-  small: $small-font-size,
-  body-small: $body-small-font-size,
-  body-smallest: $body-smallest-font-size
-);
-
-//------------------------------------
-//    #FONT-FACES-VARIABLES
-//    create font size map to cisco fonts
-//------------------------------------
-
-$fontFaces: (
-  title-heading: $brand-font-thin,
-  h1: $brand-font-thin,
-  h2: $brand-font-light,
-  h3: $brand-font-light,
-  h4: $brand-font-light,
-  h5: $brand-font-light,
-  h6: $brand-font-light,
-  pre: $brand-font-light,
-  code: $font-family-monospace,
-  kbd: $brand-font-light,
-  p: $brand-font-light,
-  small: $brand-font-regular,
-  body-small: $brand-font-regular,
-  body-smallest: $brand-font-regular
-);
-
-$fontVariations: (
-  h1--bold: $brand-font-extra-light,
-  h2--light: $brand-font-extra-light,
-  h2--bold: $brand-font-regular,
-  h3--light: $brand-font-extra-light,
-  h3--bold: $brand-font-regular,
-  h4--bold: $brand-font-regular,
-  h5--bold: $brand-font-regular,
-  h5--heavy: $brand-font-bold,
-  body--bold: $brand-font-regular,
-  body--heavy: $brand-font-bold,
-  body-small--light: $brand-font-light,
-  body-small--bold: $brand-font-bold,
-  body-smallest--light: $brand-font-light,
-  body-smallest--bold: $brand-font-bold
-);
-
-$fontColors: (
-  primary: color-tokens.$md-gray-90,
-  alternate: color-tokens.$md-black-100,
-  secondary: color-tokens.$md-gray-70,
-  disabled: color-tokens.$md-gray-50
-);
-
-//------------------------------------
-//    #LINE-HEIGHT-VARIABLES
-//    create line height map to cisco fonts
-//------------------------------------
-
-$lineHeights: (
-  title-heading: $title-heading-line-height,
-  h1: $h1-line-height,
-  h2: $h2-line-height,
-  h3: $h3-line-height,
-  h4: $h4-line-height,
-  h5: $h5-line-height,
-  h6: $h6-line-height,
-  p: $paragraph-line-height,
-  ul: $list-line-height,
-  ol: $list-line-height,
-  dl: $list-line-height,
-  body-small: $body-small-line-height,
-  body-smallest: $body-smallest-line-height
-);

package/src/wc_scss/typography/typography.scss

@@ -1,322 +0,0 @@
-/** @component typography */
-@use "sass:map";
-
-@include exports("type-bem") {
-  @include align-classes;
-
-  @include brand-font-family-ciscoFont;
-
-  * {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  div,
-  dl,
-  dt,
-  dd,
-  ul,
-  ol,
-  li,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  pre,
-  form,
-  p,
-  blockquote,
-  th,
-  td {
-    font-weight: normal;
-    margin: 0;
-    padding: 0;
-  }
-
-  a {
-    color: $anchor-font-color;
-    line-height: inherit;
-    text-decoration: $anchor-text-decoration;
-
-    &:hover,
-    &:focus {
-      color: $anchor-font-color-hover;
-
-      @if $anchor-text-decoration-hover !=$anchor-text-decoration {
-        text-decoration: $anchor-text-decoration-hover;
-      }
-    }
-
-    &:focus {
-      @include focus-styles;
-    }
-
-    img {
-      border: none;
-    }
-  }
-
-  p {
-    font-family: $paragraph-font-family;
-    font-size: $paragraph-font-size;
-    font-weight: $paragraph-font-weight;
-    margin-bottom: $paragraph-margin-bottom;
-    text-rendering: $paragraph-text-rendering;
-
-    & > code {
-      // fix inline code block line-height
-      line-height: 1em;
-    }
-
-    &.lead {
-      //@include lead;
-      font-size: $lead-font-size;
-    }
-
-    & aside {
-      font-size: $paragraph-aside-font-size;
-      font-style: $paragraph-aside-font-style;
-      line-height: $paragraph-aside-line-height;
-    }
-  }
-
-  .subheader {
-    @include subheader;
-  }
-
-  hr {
-    border: $hr-border-style $hr-border-color;
-    border-width: $hr-border-width 0 0;
-    clear: both;
-    height: 0;
-    margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));
-  }
-
-  em,
-  i {
-    font-style: italic;
-    line-height: inherit;
-  }
-
-  strong,
-  b {
-    font-weight: $font-weight-bold;
-    line-height: inherit;
-  }
-
-  small {
-    font-size: $small-font-size;
-    line-height: inherit;
-  }
-
-  // .body-small {
-  //   @extend %body-small;
-  // }
-
-  // .body-smallest {
-  //   @extend %body-smallest;
-  // }
-
-  code {
-    background-color: $code-background-color;
-    border-color: $code-border-color;
-    border-style: $code-border-style;
-    border-width: $code-border-size;
-    color: $code-color;
-    font-family: $code-font-family;
-    font-weight: $code-font-weight;
-    padding: $code-padding;
-  }
-
-  ul,
-  ol,
-  dl {
-    font-family: $list-font-family;
-    font-size: $list-font-size;
-    line-height: $list-line-height;
-    list-style-position: $list-style-position;
-    margin-bottom: $list-margin-bottom;
-  }
-
-  ul {
-    // Declarations before nested rules
-    margin-#{$default-float}: $list-side-margin;
-
-    &.no-bullet {
-      list-style: none;
-      // Declarations before nested rules
-      margin-#{$default-float}: $list-side-margin-no-bullet;
-
-      li {
-        ul,
-        ol {
-          list-style: none;
-          margin-bottom: 0;
-          margin-#{$default-float}: $list-nested-margin;
-        }
-      }
-    }
-
-    li {
-      ul,
-      ol {
-        margin-bottom: 0;
-        margin-#{$default-float}: $list-nested-margin;
-      }
-    }
-
-    &.square,
-    &.circle,
-    &.disc {
-      li ul {
-        list-style: inherit;
-      }
-    }
-
-    &.square {
-      list-style-type: square;
-      margin-#{$default-float}: $list-side-margin;
-    }
-
-    &.circle {
-      list-style-type: circle;
-      margin-#{$default-float}: $list-side-margin;
-    }
-
-    &.disc {
-      list-style-type: disc;
-      margin-#{$default-float}: $list-side-margin;
-    }
-  }
-
-  ol {
-    // Declarations before nested rules
-    margin-#{$default-float}: $list-ordered-side-margin;
-    li {
-      ul,
-      ol {
-        margin-bottom: 0;
-        margin-#{$default-float}: $list-nested-margin;
-      }
-    }
-  }
-
-  dl {
-    dt {
-      font-weight: $definition-list-header-weight;
-      margin-bottom: $definition-list-header-margin-bottom;
-    }
-
-    dd {
-      margin-bottom: $definition-list-margin-bottom;
-    }
-  }
-
-  abbr,
-  acronym {
-    color: $body-font-color;
-    cursor: $cursor-help-value;
-    font-size: 90%;
-    text-transform: uppercase;
-  }
-
-  abbr {
-    text-transform: none;
-
-    &[title] {
-      border-bottom: $acronym-underline;
-    }
-  }
-
-  blockquote {
-    margin: 0 0 $paragraph-margin-bottom;
-    padding: $blockquote-padding;
-    border-#{$default-float}: $blockquote-border;
-
-    cite {
-      color: $blockquote-cite-font-color;
-      display: block;
-      font-size: $blockquote-cite-font-size;
-
-      &::before {
-        content: "\2014 \0020";
-      }
-
-      a,
-      a:visited {
-        color: $blockquote-cite-link-color;
-      }
-    }
-  }
-
-  blockquote,
-  blockquote p {
-    color: $blockquote-font-color;
-    line-height: $paragraph-line-height;
-  }
-
-  .debug-grid {
-    &::after {
-      @include show-baseline(rgba(255, 0, 0, 0.1667));
-      content: "";
-      display: inline-block;
-      height: 100%;
-      left: 0;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      width: 100%;
-      z-index: 9998;
-    }
-
-    &::before {
-      pointer-events: none;
-      z-index: 9999;
-    }
-  }
-
-  footer,
-  nav {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p,
-    a,
-    span {
-      letter-spacing: normal;
-    }
-  }
-
-  .lead {
-    font-family: $brand-font-regular;
-  }
-
-  @each $variation in map.keys($fontVariations) {
-    $fontFamily: "" !default;
-
-    @if map.has-key($fontVariations, $variation) {
-      $fontFamily: map.get($fontVariations, $variation);
-    }
-
-    .md-#{$variation} {
-      font-family: $fontFamily !important;
-    }
-  }
-
-  @each $fontColorClass in map.keys($fontColors) {
-    $fontColor: "" !default;
-
-    @if map.has-key($fontColors, $fontColorClass) {
-      $fontColor: map.get($fontColors, $fontColorClass);
-    }
-
-    .md-font-color--#{$fontColorClass} {
-      color: $fontColor !important;
-    }
-  }
-}

package/stats/cssStats.js

@@ -1,17 +0,0 @@
-const path = require("path");
-const cssstats = require("cssstats");
-const writeFileSyncRecursive = require('./writeFileSyncRecursive')
-
-module.exports = function analyzeCSS(module, data) {
-  try {
-    const stats = cssstats(data, {
-      specificityGraph: true,
-      sortedSpecificityGraph: true,
-      repeatedSelectors: true,
-      propertyResets: true
-    });
-    writeFileSyncRecursive(`stats/json/${module}.json`, JSON.stringify(stats, null, 2), "utf-8");
-  } catch (err) {
-    console.log(`"${module}" not analyzed: `, err);
-  }
-};

package/stats/stats-loader.js

@@ -1,23 +0,0 @@
-const { getNormalizedPlatformPath } = require("./utils");
-const writeFileSyncRecursive = require("./writeFileSyncRecursive");
-const analyzeCSS = require("./cssStats.js");
-
-const isWin = process.platform === "win32";
-
-module.exports = async function(source) {
-  const location = this.resourcePath;
-
-  const components_base = getNormalizedPlatformPath("src/components/");
-  const scss_sub_path = getNormalizedPlatformPath("/scss/");
-  const components_base_idx = location.indexOf(components_base);
-  const scss_sub_path_idx = location.indexOf(scss_sub_path);
-
-  if (components_base_idx > 0 && scss_sub_path_idx > 0) {
-    const name = location.substring(location.indexOf(components_base) + 15, location.indexOf(scss_sub_path));
-    analyzeCSS(name, source);
-
-    writeFileSyncRecursive(`stats/css/${name}.css`, source, "utf-8");
-  }
-
-  return source;
-};

package/stats/utils.js

@@ -1,5 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  getNormalizedPlatformPath: (_path) => _path && typeof _path === "string" ? _path.replace(/\//g, path.sep) : ""
-};

package/stats/writeFileSyncRecursive.js

@@ -1,20 +0,0 @@
-const path = require('path');
-const fs = require("fs");
-const { getNormalizedPlatformPath } = require("./utils");
-
-module.exports = function writeFileSyncRecursive(filename, content, charset) {
-  const _filename = getNormalizedPlatformPath(filename);
-  const folders = _filename.split(path.sep).slice(0, -1);
-  if (folders.length) {
-    // create folder path if it doesn't exist
-    folders.reduce((last, folder) => {
-      const folderPath = path.resolve(last ? getNormalizedPlatformPath(`${last}/${folder}`) : folder);
-      if (!fs.existsSync(folderPath) || !fs.lstatSync(folderPath).isDirectory()) {
-        fs.mkdirSync(folderPath);
-      }
-      return folderPath;
-    });
-  }
-
-  fs.writeFileSync(_filename, content, charset);
-};

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2016",
-    "module": "commonjs",
-    "strict": true,
-    "esModuleInterop": true
-  },
-  "files": [
-    "webpack.config.ts",
-    "webpack.config.dev.server.ts",
-    "webpack.plugin.LoadChunks.ts",
-  ]
-}