feat: updated Typography for MDC v10

hperrin · Apr 3, 2021 · 858751a · 858751a
1 parent 9efc1b4
commit 858751a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
@@ -419,11 +419,11 @@
         'https://github.com/hperrin/svelte-material-ui/tree/master/packages/top-app-bar',
       ],
     },
-    // {
-    //   name: 'Typography',
-    //   route: '/demo/typography',
-    //   indent: 0,
-    // },
+    {
+      name: 'Typography',
+      route: '/demo/typography',
+      indent: 0,
+    },
   ];
 
   let activeSection = sections.find(

diff --git a/site/src/routes/demo/typography.scss b/site/src/routes/demo/typography.scss
@@ -1,9 +1,12 @@
-@use '@material/typography';
+// Import all the styles for the classes.
+@use "@material/typography/mdc-typography";
+// Import the mixins.
+@use "@material/typography";
 
 //
 // Some defaults that may be helpful to you.
-// If you just want to use these, and not the classes, you can instead import
-// just "@material/typography", and your CSS file will be smaller.
+// If you just want to use these, and not the classes, you can instead just
+// @use "@material/typography", and your CSS file will be smaller.
 //
 html {
   @include typography.typography('body1');

diff --git a/site/src/pendingDemos/typography.svelte → site/src/routes/demo/typography.svelte b/site/src/pendingDemos/typography.svelte → site/src/routes/demo/typography.svelte
@@ -7,7 +7,7 @@
 
   <!--
     You need to import `@material/typography/mdc-typography` in SCSS for
-    these classes to work. See the Typography.scss file.
+    these classes to work. See the typography.scss file.
   -->
 
   <div class="mdc-typography--headline1">Headline 1</div>
@@ -44,4 +44,4 @@
     <strong>strong</strong>
     <em>em</em>
   </div>
-</section>
+</section>