fix(markdown): fix for flavored markdown checkboxes

apps/docs-app/src/app/content/docs/theme/theme.component.ts

@@ -12,39 +12,39 @@ export class ThemeComponent {
   @HostBinding('@routeAnimation') routeAnimation = true;
   @HostBinding('class.td-route-animation') classAnimation = true;
   themeScss = `
-  @import '~@angular/material/theming';
-  @import '~@covalent/core/theming/all-theme';
-  @import '~@covalent/markdown/markdown-theme';
-  @import '~@covalent/highlight/highlight-theme';
+  @use '@angular/material' as mat;
+  @use '@covalent/core/theming/all-theme' as cov;
+  @use '@covalent/markdown/markdown-theme' as markdown;
+  @use '@covalent/highlight/highlight-theme' as highlight;
   // Plus imports for other components in your app.
   
   // Define a custom typography config that overrides the font-family
   // or any typography level.
-  $typography: mat-typography-config(
+  $typography: mat.define-typography-config(
     $font-family: 'Roboto, monospace',
-    $headline: mat-typography-level(32px, 48px, 700)
+    $headline: mat.define-typography-level(32px, 48px, 700)
   );
   
-  @include mat-core($typography); // $typography is an **optional** argument for the mat-core
+  @include mat.core($typography); // $typography is an **optional** argument for the mat-core
   
   // Define the palettes for your theme using the Material Design palettes available in palette.scss
   // (imported above). For each palette, you can optionally specify a default, lighter, and darker
   // hue.
-  $primary: mat-palette($mat-blue, 700);
-  $accent:  mat-palette($mat-orange, 800, A100, A400);
+  $primary: mat.define-palette($mat-blue, 700);
+  $accent:  mat.define-palette($mat-orange, 800, A100, A400);
   
   // The warn palette is optional (defaults to red).
-  $warn:    mat-palette($mat-red, 600);
+  $warn:    mat.define-palette($mat-red, 600);
   
   // Create the theme object (a Sass map containing all of the palettes).
-  $theme: mat-light-theme($primary, $accent, $warn);
+  $theme: mat.define-light-theme($primary, $accent, $warn);
   
   // Include theme styles for core and each component used in your app.
   // Alternatively, you can import and @include the theme mixins for each component
   // that you are using.
-  @include angular-material-theme($theme);
-  @include covalent-theme($theme, $typography); // $typography is an **optional** argument for the covalent-theme
-  @include covalent-markdown-theme($theme);
-  @include covalent-highlight-theme();
+  mat.angular-material-theme($theme);
+  cov.covalent-theme($theme, $typography); // $typography is an **optional** argument for the covalent-theme
+  markdown.covalent-markdown-theme($theme);
+  highlight.covalent-highlight-theme();
   `;
 }

docs/GETTING_STARTED.md

@@ -70,41 +70,40 @@ See the [material theming guide](https://github.com/angular/material2/blob/maste
 
 A theme file is a simple Sass file that defines your palettes and passes them to mixins that output the corresponding styles. A typical theme file will look something like this:
 
-```css
-@import '~@angular/material/theming';
-@import '~@covalent/core/theming/all-theme';
+```scss
+@use '@angular/material' as mat;
+@use '@covalent/core/theming/all-theme' as cov;
 
 // (optional) Additional themes
-@import '~@covalent/markdown/markdown-theme';
-@import '~@covalent/highlight/highlight-theme';
+@use '@covalent/markdown/markdown-theme' as markdown;
+@use '@covalent/highlight/highlight-theme' as highlight;
 
 // Define a custom typography config that overrides the font-family
 // or any typography level.
-$typography: mat-typography-config(
+$typography: mat.define-typography-config(
   $font-family: 'Roboto, monospace',
-  $headline: mat-typography-level(32px, 48px, 700)
+  $headline: mat.define-typography-level(32px, 48px, 700)
 );
 
-@include mat-core(
+mat.core(
   $typography
 ); // $typography is an **optional** argument for the mat-core
 
-$primary: mat-palette($mat-orange, 800, 100, 900);
-$accent: mat-palette($mat-light-blue, 600, 100, 900);
+$primary: mat.define-palette($mat-orange, 800, 100, 900);
+$accent: mat.define-palette($mat-light-blue, 600, 100, 900);
+$warn: mat.define-palette($mat-red, 600, 100, 900);
 
-$warn: mat-palette($mat-red, 600, 100, 900);
+$theme: mat.define-light-theme($primary, $accent, $warn);
 
-$theme: mat-light-theme($primary, $accent, $warn);
-
-@include angular-material-theme($theme);
-@include covalent-theme(
+mat.angular-material-theme($theme);
+cov.covalent-theme(
   $theme,
   $typography
 ); // $typography is an **optional** argument for the covalent-theme
 
 // (optional) Additional themes
-@include covalent-markdown-theme($theme);
-@include covalent-highlight-theme();
+markdown.covalent-markdown-theme($theme);
+highligh.covalent-highlight-theme();
 ```
 
 You only need this single Sass file; you do not need to use Sass to style the rest of your app.

docs/UTILITY_MIXINS.md

@@ -4,25 +4,25 @@ You can cherry pick the `utility` classes that fit your needs with our `scss` mi
 
 After adding the `all-theme.scss`, the mixins will be available for usage:
 
-```css
-@import '~@covalent/core/theming/all-theme';
+```scss
+@import '@covalent/core/theming/all-theme' as cov;
 ```
 
 ### Core Styles Mixin
 
 Covalent includes out of the box some styles to make your application look better, this can be used by adding the following:
 
-```css
+```scss
 // Include the core styles for Covalent
-@include covalent-core();
+cov.covalent-core();
 ```
 
 We also bundle the material icons
 
-```css
+```scss
 // Include pre-bundled material-icons
 $mat-font-url: './';
-@include covalent-material-icons();
+cov.covalent-material-icons();
 // Alternative way to include material-icons
 // @import '../node_modules/@covalent/core/common/material-icons.css';
 ```
@@ -31,51 +31,51 @@ $mat-font-url: './';
 
 To include [utility classes](https://teradata.github.io/covalent/#/utilities/styling), add the following:
 
-```css
+```scss
 // Include covalent utility classes
-@include covalent-utilities();
+cov.covalent-utilities();
 ```
 
 ### Flex Layout Mixin
 
 To include flex layout, add the following:
 
-```css
+```scss
 // Include flex layout classes
-@include covalent-layout();
+cov.covalent-layout();
 ```
 
 ### Colors Mixin
 
 To include the color classes, add the following:
 
-```css
+```scss
 // Include covalent color classes
-@include covalent-colors();
+cov.covalent-colors();
 ```
 
 ### Example including every single mixin
 
 If you want to include everything, include the following snippet (or just include the `platform.css` as described in the [getting started](https://teradata.github.io/covalent/#/docs) docs)
 
-```css
-@import '~@covalent/core/theming/all-theme';
+```scss
+@use '@covalent/core/theming/all-theme' as cov;
 
 // Include the core styles for Covalent
-@include covalent-core();
+cov.covalent-core();
 
 // Include pre-bundled material-icons
 $mat-font-url: '../node_modules/@covalent/core/common/styles/font/';
-@include covalent-material-icons();
+cov.covalent-material-icons();
 // Alternative way to include material-icons
 // @import '../node_modules/@covalent/core/common/material-icons.css';
 
 // Include covalent utility classes
-@include covalent-utilities();
+cov.covalent-utilities();
 
 // Include flex layout classes
-@include covalent-layout();
+cov.covalent-layout();
 
 // Include covalent color classes
-@include covalent-colors();
+cov.covalent-colors();
 ```

libs/angular/file/src/file-input/file-input.component.scss

@@ -8,6 +8,13 @@
     display: none;
   }
 
+  ::ng-deep {
+    .mdc-button__label {
+      display: flex;
+      align-items: center;
+    }
+  }
+
   /**
   * Class that is added ondragenter by the [TdFileDrop] directive.
   */

libs/markdown-flavored/README.md

@@ -75,25 +75,25 @@ export class MyModule {}
 This module comes with its own Covalent theme which uses the material theme which is used by importing our theme scss file. It also depends on all the covalent themes since the components being rendered by this module are from other packages.
 
 ```scss
-@import '~@angular/material/theming';
-@import '~@covalent/core/theming/all-theme';
-@import '~@covalent/markdown/markdown-theme';
-@import '~@covalent/highlight/highlight-theme';
-@import '~@covalent/flavored-markdown/flavored-markdown-theme';
+@use '@angular/material' as mat;
+@use '@covalent/core/theming/all-theme' as cov;
+@use '@covalent/markdown/markdown-theme' as markdown;
+@use '@covalent/highlight/highlight-theme' as highlight;
+@use '@covalent/flavored-markdown/flavored-markdown-theme' as markdown-flavored;
 
-@include mat-core();
+@include mat.core();
 
-$primary: mat-palette($mat-orange, 800);
-$accent: mat-palette($mat-light-blue, 600, A100, A400);
-$warn: mat-palette($mat-red, 600);
+$primary: mat.define-palette($mat-orange, 800);
+$accent: mat.define-palette($mat-light-blue, 600, A100, A400);
+$warn: mat.define-palette($mat-red, 600);
 
-$theme: mat-light-theme($primary, $accent, $warn);
+$theme: mat.define-light-theme($primary, $accent, $warn);
 
 @include mat.all-component-themes($theme);
-@include covalent-theme($theme);
-@include covalent-markdown-theme($theme);
-@include covalent-highlight-theme();
-@include covalent-flavored-markdown-theme($theme);
+@include cov.covalent-theme($theme);
+@include markdown.covalent-markdown-theme($theme);
+@include highlight.covalent-highlight-theme();
+@include markdown-flavored.covalent-flavored-markdown-theme($theme);
 ```
 
 ## Example

libs/markdown-flavored/src/lib/flavored-markdown.component.ts

@@ -403,12 +403,12 @@ export class TdFlavoredMarkdownComponent
         label: string
       ) => {
         componentRef.instance.checked = !!checked.trim();
-        componentRef.instance.disabled = true;
+        componentRef.instance.ariaLabel = label;
         componentRef.instance.labelPosition = 'after';
         this._renderer.setProperty(
           (<HTMLElement>(
             componentRef.instance._elementRef.nativeElement
-          )).getElementsByClassName('mat-checkbox-label')[0],
+          )).getElementsByTagName('label')[0],
           'innerHTML',
           label
         );

libs/markdown/README.md

@@ -63,18 +63,18 @@ export class MyModule {}
 This module comes with its own Covalent theme which uses the material theme which is used by importing our theme scss file.
 
 ```scss
-@import '~@angular/material/theming';
-@import '~@covalent/markdown/markdown-theme';
+@use '@angular/material/theming' as mat;
+@use '@covalent/markdown/markdown-theme' as markdown;
 
-@include mat-core();
+@include mat.core();
 
-$primary: mat-palette($mat-orange, 800);
-$accent: mat-palette($mat-light-blue, 600, A100, A400);
-$warn: mat-palette($mat-red, 600);
+$primary: mat.define-palette($mat-orange, 800);
+$accent: mat.define-palette($mat-light-blue, 600, A100, A400);
+$warn: mat.define-palette($mat-red, 600);
 
-$theme: mat-light-theme($primary, $accent, $warn);
+$theme: mat.define-light-theme($primary, $accent, $warn);
 
-@include covalent-markdown-theme($theme);
+@include markdown.covalent-markdown-theme($theme);
 ```
 
 ## Example

libs/markdown/_markdown-theme.scss

@@ -1,4 +1,4 @@
-@import '@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin covalent-markdown-theme($theme) {
   $accent: map-get($theme, accent);
@@ -7,63 +7,63 @@
 
   td-markdown {
     a {
-      color: mat-color($accent);
+      color: mat.get-color-from-palette($accent);
     }
 
     h1,
     h2 {
-      border-bottom-color: mat-color($foreground, divider);
+      border-bottom-color: mat.get-color-from-palette($foreground, divider);
     }
 
     h3,
     h4,
     h5,
     h6 {
-      color: mat-color($foreground, secondary-text);
+      color: mat.get-color-from-palette($foreground, secondary-text);
     }
 
     hr {
-      border-color: mat-color($foreground, divider);
+      border-color: mat.get-color-from-palette($foreground, divider);
     }
 
     blockquote {
-      color: mat-color($foreground, secondary-text);
-      border-left-color: mat-color($foreground, divider);
+      color: mat.get-color-from-palette($foreground, secondary-text);
+      border-left-color: mat.get-color-from-palette($foreground, divider);
     }
 
     table {
       th,
       td {
-        border-color: mat-color($foreground, dividers);
+        border-color: mat.get-color-from-palette($foreground, dividers);
       }
 
       tr {
-        border-top-color: mat-color($foreground, dividers);
+        border-top-color: mat.get-color-from-palette($foreground, dividers);
 
         &:nth-child(2n) {
-          background-color: mat-color($foreground, dividers);
+          background-color: mat.get-color-from-palette($foreground, dividers);
         }
       }
     }
 
     img {
-      background-color: mat-color($background, card);
+      background-color: mat.get-color-from-palette($background, card);
     }
 
     code {
-      background-color: mat-color($background, hover);
+      background-color: mat.get-color-from-palette($background, hover);
     }
 
     .highlight pre,
     pre {
-      background-color: mat-color($background, app-bar);
+      background-color: mat.get-color-from-palette($background, app-bar);
     }
 
     kbd {
-      color: mat-color($foreground, secondary-text);
-      background-color: mat-color($background, app-bar);
-      border-color: mat-color($foreground, divider);
-      border-bottom-color: mat-color($foreground, disabled);
+      color: mat.get-color-from-palette($foreground, secondary-text);
+      background-color: mat.get-color-from-palette($background, app-bar);
+      border-color: mat.get-color-from-palette($foreground, divider);
+      border-bottom-color: mat.get-color-from-palette($foreground, disabled);
     }
   }
 }