@covalent/core 4.0.0 → 4.1.0-develop.5

package/README.md

@@ -4,7 +4,6 @@ Core Teradata UI Platform for layouts, icons, custom components and themes. This
 
 The core will have custom components that enforce standards and best practices through built-in design patterns.
 
-
 ## Installation
 
 This component can be installed as npm package.
@@ -13,7 +12,6 @@ This component can be installed as npm package.
 npm i -save @covalent/core
 ```
 
-
 ## Setup
 
 Import the modules from `@covalent/core` as needed in your NgModule:
@@ -33,9 +31,12 @@ import { CovalentStepsModule  } from '@covalent/core/steps';
 export class MyModule {}
 ```
 
-
 ## Styles, Icons and Theming
 
 See [theming](https://teradata.github.io/covalent/#/docs/theme) in the covalent docs for more info
 
-Core Teradata UI Platform comes with a base CSS file `@covalent/core/common/platform.css` (includes icons). 
+Core Teradata UI Platform comes with a base CSS file `@covalent/core/common/platform.css` (includes icons).
+
+## Running unit tests
+
+Run `nx test angular` to execute the unit tests.

package/breadcrumbs/README.md

@@ -1,23 +1,23 @@
 # td-breadcrumbs
 
-`td-breadcrumbs` element generates breadcrumbs for navigation.  Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.
+`td-breadcrumbs` element generates breadcrumbs for navigation. Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.
 
 ## API Summary
 
 #### Inputs
 
-+ separatorIcon?: string
-  + Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
+- separatorIcon?: string
+  - Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
 
 #### Methods
 
-+ count: number
-  + The total count of individual breadcrumbs (read only)
+- count: number
+  - The total count of individual breadcrumbs (read only)
 
 #### Attributes
 
-+ hiddenBreadcrumbs: TdBreadcrumbComponent[]
-  + Array of currently hidden breadcrumbs (responsive)
+- hiddenBreadcrumbs: TdBreadcrumbComponent[]
+  - Array of currently hidden breadcrumbs (responsive)
 
 # td-breadcrumb
 
@@ -27,10 +27,10 @@
 
 #### Methods
 
-+ displayCrumb: boolean 
-  + Whether to display the individual breadcrumb or not
-+ width: number 
-  + The current width of the individual breadcrumb (read only)
+- displayCrumb: boolean
+  - Whether to display the individual breadcrumb or not
+- width: number
+  - The current width of the individual breadcrumb (read only)
 
 ## Setup
 
@@ -62,7 +62,7 @@ Basic Example:
 </td-breadcrumbs>
 ```
 
-Example with all inputs/outputs: 
+Example with all inputs/outputs:
 
 ```html
 <td-breadcrumbs #breadcrumbs separatorIcon="motorcycle">
@@ -73,13 +73,17 @@ Example with all inputs/outputs:
   <td-breadcrumb>Manage List</td-breadcrumb>
 </td-breadcrumbs>
 <mat-divider></mat-divider>
+<div>Total Breadcrumbs Count: {{breadcrumbs.count}}</div>
 <div>
-  Total Breadcrumbs Count: {{breadcrumbs.count}}
+  Hidden Breadcrumbs Count (shrink window to see):
+  {{breadcrumbs.hiddenBreadcrumbs.length}}
 </div>
-<div>
-  Hidden Breadcrumbs Count (shrink window to see): {{breadcrumbs.hiddenBreadcrumbs.length}}
-</div>
-<ng-template let-breadcrumb let-index="index" ngFor [ngForOf]="breadcrumbs.hiddenBreadcrumbs">
+<ng-template
+  let-breadcrumb
+  let-index="index"
+  ngFor
+  [ngForOf]="breadcrumbs.hiddenBreadcrumbs"
+>
   <div>
     <p>Breadcrumb Number: {{index}}</p>
     <p>Breadcrumb Width: {{breadcrumb?.width}}</p>

package/breadcrumbs/breadcrumb/breadcrumb.component.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdBreadcrumbComponent implements AfterViewInit {
     private _elementRef;
     private _changeDetectorRef;
@@ -6,6 +7,8 @@ export declare class TdBreadcrumbComponent implements AfterViewInit {
     private _width;
     private _displayIcon;
     private _separatorIcon;
+    matButtonClass: boolean;
+    tdBreadCrumbClass: boolean;
     get separatorIcon(): string;
     set separatorIcon(separatorIcon: string);
     get displayIcon(): boolean;
@@ -22,11 +25,13 @@ export declare class TdBreadcrumbComponent implements AfterViewInit {
     /**
      * Gets the display style of the crumb
      */
-    get displayBinding(): string;
+    get displayBinding(): string | undefined;
     constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     /**
      * Stop click propagation when clicking on icon
      */
     _handleIconClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdBreadcrumbComponent, "td-breadcrumb, a[td-breadcrumb]", never, {}, {}, never, ["*"]>;
 }

package/breadcrumbs/breadcrumbs.component.d.ts

@@ -1,5 +1,6 @@
 import { QueryList, OnInit, OnDestroy, AfterContentInit, DoCheck, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+import * as i0 from "@angular/core";
 export declare class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterContentInit, OnDestroy {
     private _elementRef;
     private _changeDetectorRef;
@@ -8,6 +9,7 @@ export declare class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterCon
     private _contentChildrenSub;
     private _resizing;
     private _separatorIcon;
+    tdBreadCrumbsClass: boolean;
     _breadcrumbs: QueryList<TdBreadcrumbComponent>;
     hiddenBreadcrumbs: TdBreadcrumbComponent[];
     /**
@@ -30,4 +32,6 @@ export declare class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterCon
      */
     private setCrumbIcons;
     private _calculateVisibility;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdBreadcrumbsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdBreadcrumbsComponent, "td-breadcrumbs", never, { "separatorIcon": "separatorIcon"; }, {}, ["_breadcrumbs"], ["*"]>;
 }

package/breadcrumbs/breadcrumbs.module.d.ts

@@ -1,2 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./breadcrumbs.component";
+import * as i2 from "./breadcrumb/breadcrumb.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/icon";
 export declare class CovalentBreadcrumbsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentBreadcrumbsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentBreadcrumbsModule, [typeof i1.TdBreadcrumbsComponent, typeof i2.TdBreadcrumbComponent], [typeof i3.CommonModule, typeof i4.MatIconModule], [typeof i1.TdBreadcrumbsComponent, typeof i2.TdBreadcrumbComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentBreadcrumbsModule>;
 }

package/breadcrumbs/covalent-core-breadcrumbs.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './index';
+/// <amd-module name="@covalent/core/breadcrumbs" />
+export * from './public_api';

package/breadcrumbs/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/covalent-core-breadcrumbs.umd.js",
-  "module": "../fesm2015/covalent-core-breadcrumbs.js",
-  "es2015": "../fesm2015/covalent-core-breadcrumbs.js",
-  "esm2015": "../esm2015/breadcrumbs/covalent-core-breadcrumbs.js",
-  "fesm2015": "../fesm2015/covalent-core-breadcrumbs.js",
+  "module": "../fesm2015/covalent-core-breadcrumbs.mjs",
+  "es2020": "../fesm2020/covalent-core-breadcrumbs.mjs",
+  "esm2020": "../esm2020/breadcrumbs/covalent-core-breadcrumbs.mjs",
+  "fesm2020": "../fesm2020/covalent-core-breadcrumbs.mjs",
+  "fesm2015": "../fesm2015/covalent-core-breadcrumbs.mjs",
   "typings": "covalent-core-breadcrumbs.d.ts",
-  "metadata": "covalent-core-breadcrumbs.metadata.json",
   "sideEffects": false,
   "name": "@covalent/core/breadcrumbs"
-}
+}

package/common/README.md

@@ -0,0 +1,3 @@
+# @covalent/core/common
+
+Secondary entry point of `@covalent/core`. It can be used by importing from `@covalent/core/common`.

package/common/_common-theme.scss

@@ -1,4 +1,4 @@
-@import './styles/theme-functions';
+@import 'styles/theme-functions';
 
 @mixin td-common-theme($theme) {
   $warn: map-get($theme, warn);
@@ -9,11 +9,13 @@
   .mat-list-item-content {
     mat-icon {
       color: mat-color($foreground, icon);
+
       &[matListAvatar] {
         background-color: mat-color($background, hover);
       }
     }
   }
+
   .mat-list-text {
     p {
       color: mat-color($foreground, disabled);

package/common/behaviors/disable-ripple.mixin.d.ts

@@ -5,5 +5,5 @@ export interface ICanDisableRipple {
     onDisableRippleChange(v: boolean): void;
 }
 /** Mixin to augment a component or directive with a `disabled` property. */
-export declare function mixinDisableRipple<T extends Constructor<{}>>(base: T): Constructor<ICanDisableRipple> & T;
+export declare function mixinDisableRipple<T extends Constructor<Record<string, unknown>>>(base: T): Constructor<ICanDisableRipple> & T;
 export {};

package/common/behaviors/disabled.mixin.d.ts

@@ -5,5 +5,5 @@ export interface ICanDisable {
     onDisabledChange(v: boolean): void;
 }
 /** Mixin to augment a component or directive with a `disabled` property. */
-export declare function mixinDisabled<T extends Constructor<{}>>(base: T): Constructor<ICanDisable> & T;
+export declare function mixinDisabled<T extends Constructor<any>>(base: T): Constructor<ICanDisable> & T;
 export {};

package/common/common.module.d.ts

@@ -1,2 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./forms/auto-trim/auto-trim.directive";
+import * as i2 from "./directives/fullscreen/fullscreen.directive";
+import * as i3 from "./pipes/time-ago/time-ago.pipe";
+import * as i4 from "./pipes/time-difference/time-difference.pipe";
+import * as i5 from "./pipes/time-until/time-until.pipe";
+import * as i6 from "./pipes/bytes/bytes.pipe";
+import * as i7 from "./pipes/decimal-bytes/decimal-bytes.pipe";
+import * as i8 from "./pipes/digits/digits.pipe";
+import * as i9 from "./pipes/truncate/truncate.pipe";
+import * as i10 from "@angular/forms";
+import * as i11 from "@angular/common";
 export declare class CovalentCommonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentCommonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentCommonModule, [typeof i1.TdAutoTrimDirective, typeof i2.TdFullscreenDirective, typeof i3.TdTimeAgoPipe, typeof i4.TdTimeDifferencePipe, typeof i5.TdTimeUntilPipe, typeof i6.TdBytesPipe, typeof i7.TdDecimalBytesPipe, typeof i8.TdDigitsPipe, typeof i9.TdTruncatePipe], [typeof i10.FormsModule, typeof i11.CommonModule], [typeof i10.FormsModule, typeof i11.CommonModule, typeof i1.TdAutoTrimDirective, typeof i2.TdFullscreenDirective, typeof i3.TdTimeAgoPipe, typeof i4.TdTimeDifferencePipe, typeof i5.TdTimeUntilPipe, typeof i6.TdBytesPipe, typeof i7.TdDecimalBytesPipe, typeof i8.TdDigitsPipe, typeof i9.TdTruncatePipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentCommonModule>;
 }

package/common/covalent-core-common.d.ts

@@ -1,6 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './index';
-export { IconService as ɵb } from './services/icon.service';
-export { RouterPathService as ɵa } from './services/router-path.service';
+/// <amd-module name="@covalent/core/common" />
+export * from './public_api';

package/common/directives/fullscreen/fullscreen.directive.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
 interface IFsDocument extends HTMLDocument {
     fullscreenElement: Element;
     webkitFullscreenElement: Element;
@@ -18,5 +19,7 @@ export declare class TdFullscreenDirective {
     enterFullScreen(): void;
     exitFullScreen(): void;
     private _getFullScreenElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdFullscreenDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdFullscreenDirective, "[tdFullScreen]", ["tdFullScreen"], {}, {}, never>;
 }
 export {};

package/common/forms/auto-trim/auto-trim.directive.d.ts

@@ -1,4 +1,5 @@
 import { NgModel } from '@angular/forms';
+import * as i0 from "@angular/core";
 export declare class TdAutoTrimDirective {
     private _model;
     constructor(_model: NgModel);
@@ -6,4 +7,6 @@ export declare class TdAutoTrimDirective {
      * Listens to host's (blur) event and trims value.
      */
     onBlur(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdAutoTrimDirective, [{ optional: true; host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdAutoTrimDirective, "[tdAutoTrim]", never, {}, {}, never>;
 }

package/common/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/covalent-core-common.umd.js",
-  "module": "../fesm2015/covalent-core-common.js",
-  "es2015": "../fesm2015/covalent-core-common.js",
-  "esm2015": "../esm2015/common/covalent-core-common.js",
-  "fesm2015": "../fesm2015/covalent-core-common.js",
+  "module": "../fesm2015/covalent-core-common.mjs",
+  "es2020": "../fesm2020/covalent-core-common.mjs",
+  "esm2020": "../esm2020/common/covalent-core-common.mjs",
+  "fesm2020": "../fesm2020/covalent-core-common.mjs",
+  "fesm2015": "../fesm2015/covalent-core-common.mjs",
   "typings": "covalent-core-common.d.ts",
-  "metadata": "covalent-core-common.metadata.json",
   "sideEffects": false,
   "name": "@covalent/core/common"
-}
+}

package/common/pipes/bytes/bytes.pipe.d.ts

@@ -1,4 +1,7 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdBytesPipe implements PipeTransform {
     transform(bytes: any, precision?: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdBytesPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TdBytesPipe, "bytes">;
 }

package/common/pipes/decimal-bytes/decimal-bytes.pipe.d.ts

@@ -1,4 +1,7 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdDecimalBytesPipe implements PipeTransform {
     transform(bytes: any, precision?: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDecimalBytesPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TdDecimalBytesPipe, "decimalBytes">;
 }

package/common/pipes/digits/digits.pipe.d.ts

@@ -1,7 +1,10 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdDigitsPipe implements PipeTransform {
     private _locale;
     private _decimalPipe;
     constructor(_locale?: string);
     transform(digits: any, precision?: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDigitsPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TdDigitsPipe, "digits">;
 }

package/common/pipes/time-ago/time-ago.pipe.d.ts

@@ -1,4 +1,7 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdTimeAgoPipe implements PipeTransform {
     transform(time: any, reference?: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdTimeAgoPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TdTimeAgoPipe, "timeAgo">;
 }

package/common/pipes/time-difference/time-difference.pipe.d.ts

@@ -1,4 +1,7 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdTimeDifferencePipe implements PipeTransform {
     transform(start: any, end?: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdTimeDifferencePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TdTimeDifferencePipe, "timeDifference">;
 }

package/common/pipes/time-until/time-until.pipe.d.ts

@@ -1,4 +1,7 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdTimeUntilPipe implements PipeTransform {
     transform(time: any, reference?: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdTimeUntilPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TdTimeUntilPipe, "timeUntil">;
 }

package/common/pipes/truncate/truncate.pipe.d.ts

@@ -1,4 +1,7 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdTruncatePipe implements PipeTransform {
-    transform(text: any, length: number): string;
+    transform(text: any, length?: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdTruncatePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TdTruncatePipe, "truncate">;
 }

package/common/services/icon.service.d.ts

@@ -1,5 +1,8 @@
+import * as i0 from "@angular/core";
 export declare class IconService {
     private _icons;
     get icons(): string[];
     filter(query: string): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<IconService>;
 }

package/common/services/router-path.service.d.ts

@@ -1,7 +1,10 @@
 import { Router } from '@angular/router';
+import * as i0 from "@angular/core";
 export declare class RouterPathService {
     private _router;
     private static _previousRoute;
     constructor(_router: Router);
     getPreviousRoute(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RouterPathService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RouterPathService>;
 }

package/common/styles/_elevation.scss

@@ -137,7 +137,11 @@ $mat-elevation-opacity: 1 !default;
 
 // Applies the correct css rules to an element to give it the elevation specified by $zValue.
 // The $zValue must be between 0 and 24.
-@mixin mat-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
+@mixin mat-elevation(
+  $zValue,
+  $color: $mat-elevation-color,
+  $opacity: $mat-elevation-opacity
+) {
   @if type-of($zValue) != number or not unitless($zValue) {
     @error '$zValue must be a unitless number';
   }
@@ -146,7 +150,8 @@ $mat-elevation-opacity: 1 !default;
   }
 
   box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
-    #{map-get(_get-penumbra-map($color, $opacity), $zValue)}, #{map-get(_get-ambient-map($color, $opacity), $zValue)};
+    #{map-get(_get-penumbra-map($color, $opacity), $zValue)},
+    #{map-get(_get-ambient-map($color, $opacity), $zValue)};
 }
 
 // Returns a string that can be used as the value for a transition property for elevation.

package/common/styles/_layout.scss

@@ -137,10 +137,6 @@ $layout-breakpoint-lg: 1920px !default;
   [layout#{$name}='column'],
   [layout#{$name}='row'] {
     box-sizing: border-box;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
   }
   [layout#{$name}='column'] {
@@ -430,23 +426,25 @@ $layout-breakpoint-lg: 1920px !default;
 @mixin layout-padding-margin() {
   [layout-padding] > [flex-sm],
   [layout-padding] > [flex-lt-md] {
-    padding: $layout-gutter-width / 4;
+    padding: calc($layout-gutter-width / 4);
   }
+
   [layout-padding],
   [layout-padding] > [flex],
   [layout-padding] > [flex-gt-sm],
   [layout-padding] > [flex-md],
   [layout-padding] > [flex-lt-lg] {
-    padding: $layout-gutter-width / 2;
+    padding: calc($layout-gutter-width / 2);
   }
+
   [layout-padding] > [flex-gt-md],
   [layout-padding] > [flex-lg] {
-    padding: $layout-gutter-width / 1;
+    padding: calc($layout-gutter-width / 1);
   }
 
   [layout-margin] > [flex-sm],
   [layout-margin] > [flex-lt-md] {
-    margin: $layout-gutter-width / 4;
+    margin: calc($layout-gutter-width / 4);
   }
 
   [layout-margin],
@@ -454,12 +452,12 @@ $layout-breakpoint-lg: 1920px !default;
   [layout-margin] > [flex-gt-sm],
   [layout-margin] > [flex-md],
   [layout-margin] > [flex-lt-lg] {
-    margin: $layout-gutter-width / 2;
+    margin: calc($layout-gutter-width / 2);
   }
 
   [layout-margin] > [flex-gt-md],
   [layout-margin] > [flex-lg] {
-    margin: $layout-gutter-width / 1;
+    margin: calc($layout-gutter-width / 1);
   }
 
   [layout-wrap] {
@@ -533,6 +531,7 @@ $layout-breakpoint-lg: 1920px !default;
         display: none;
       }
     }
+
     [hide-sm]:not([show-sm]):not([show]) {
       display: none;
     }
@@ -553,6 +552,7 @@ $layout-breakpoint-lg: 1920px !default;
         display: none;
       }
     }
+
     [hide-md]:not([show-md]):not([show]) {
       display: none;
     }
@@ -574,6 +574,7 @@ $layout-breakpoint-lg: 1920px !default;
         display: none;
       }
     }
+
     [hide-lg]:not([show-lg]):not([show]) {
       display: none;
     }
@@ -596,6 +597,7 @@ $layout-breakpoint-lg: 1920px !default;
         display: none;
       }
     }
+
     [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {
       display: none;
     }

package/common/styles/_palette-dark.scss

@@ -1,6 +1,6 @@
 // Contrasting colors
-$black-87-opacity: rgba(black, 0.87);
-$white-87-opacity: rgba(white, 0.87);
+$black-87-opacity: rgba(0, 0, 0, 87%);
+$white-87-opacity: rgba(255, 255, 255, 87%);
 // Dark color palettes.
 $mat-dark-red: (
   500: #f44336,

package/common/styles/_palette-light.scss

@@ -1,9 +1,9 @@
-$black-87-opacity: rgba(black, 0.87);
-$white-87-opacity: rgba(white, 0.87);
-$black-12-opacity: rgba(black, 0.12);
-$white-12-opacity: rgba(white, 0.12);
-$black-6-opacity: rgba(black, 0.06);
-$white-6-opacity: rgba(white, 0.06);
+$black-87-opacity: rgba(0, 0, 0, 87%);
+$white-87-opacity: rgba(255, 255, 255, 87%);
+$black-12-opacity: rgba(0, 0, 0, 12%);
+$white-12-opacity: rgba(255, 255, 255, 12%);
+$black-6-opacity: rgba(0, 0, 0, 6%);
+$white-6-opacity: rgba(255, 255, 255, 6%);
 
 $mat-red: (
   50: #ffebee,

package/common/styles/_rtl.scss

@@ -8,10 +8,12 @@
     #{$prop}: $rtl-value;
     unicode-bidi: embed;
   }
+
   body[dir='rtl'] & {
     #{$prop}: $rtl-value;
     unicode-bidi: embed;
   }
+
   [dir='rtl'] & {
     #{$prop}: $rtl-value;
     unicode-bidi: embed;
@@ -21,6 +23,7 @@
     direction: rtl;
     unicode-bidi: bidi-override;
   }
+
   bdo[dir='ltr'] {
     direction: ltr;
     unicode-bidi: bidi-override;

package/common/styles/_typography-functions.scss

@@ -30,6 +30,14 @@
 }
 
 // Represents a typography level from the Material design spec.
-@function td-typography-level($font-size, $line-height: $font-size, $font-weight: 400) {
-  @return (font-size: $font-size, line-height: $line-height, font-weight: $font-weight);
+@function td-typography-level(
+  $font-size,
+  $line-height: $font-size,
+  $font-weight: 400
+) {
+  @return (
+    font-size: $font-size,
+    line-height: $line-height,
+    font-weight: $font-weight
+  );
 }

package/common/styles/_variables.scss

@@ -49,15 +49,15 @@ $toast-height: $baseline-grid * 3 !default;
 $toast-margin: $baseline-grid * 1 !default;
 
 // Whiteframes
-$whiteframe-shadow-z1: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
+$whiteframe-shadow-z1: 0 2px 5px 0 rgba(0, 0, 0, 26%) !default;
 $whiteframe-zindex-z1: 1 !default;
-$whiteframe-shadow-z2: 0 8px 17px rgba(0, 0, 0, 0.2) !default;
+$whiteframe-shadow-z2: 0 8px 17px rgba(0, 0, 0, 20%) !default;
 $whiteframe-zindex-z2: 2 !default;
-$whiteframe-shadow-z3: 0 17px 50px rgba(0, 0, 0, 0.19) !default;
+$whiteframe-shadow-z3: 0 17px 50px rgba(0, 0, 0, 19%) !default;
 $whiteframe-zindex-z3: 3 !default;
-$whiteframe-shadow-z4: 0 16px 28px 0 rgba(0, 0, 0, 0.22) !default;
+$whiteframe-shadow-z4: 0 16px 28px 0 rgba(0, 0, 0, 22%) !default;
 $whiteframe-zindex-z4: 4 !default;
-$whiteframe-shadow-z5: 0 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
+$whiteframe-shadow-z5: 0 27px 24px 0 rgba(0, 0, 0, 20%) !default;
 $whiteframe-zindex-z5: 5 !default;
 
 // Z-indexes
@@ -91,7 +91,8 @@ $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !defa
 
 $swift-ease-in-out-duration: 0.5s !default;
 $swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
-$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration
+  $swift-ease-in-out-timing-function !default;
 
 $swift-linear-duration: 0.08s !default;
 $swift-linear-timing-function: linear !default;