💄 Match default font size with browser defaults

Author: Frontendland

src/components/Accordion/accordion.module.scss

@@ -7,7 +7,6 @@
     li {
         @include border(primary-50, bottom);
         @include spacing(py-sm, px-none, m0);
-        @include typography(md);
 
         &:first-child {
             padding-top: 0;
@@ -20,7 +19,7 @@
 
         .title {
             @include layout(flex, h-between, v-center, sm);
-            @include typography(md, primary, left);
+            @include typography(default, primary, left);
             @include size('w100%');
             @include spacing(p0);
             @include border(0);

src/components/Alert/alert.module.scss

@@ -41,11 +41,11 @@
     }
 
     .title {
-        @include typography(hmd);
+        @include typography(lg, hmd);
         display: block;
     }
 
     .body {
-        @include typography(primary-20, md, hmd);
+        @include typography(primary-20, hmd);
     }
 }

src/components/Badge/badge.module.scss

@@ -5,7 +5,7 @@
     @include spacing(py-xs, px-sm);
     @include border-radius(xs);
     @include layout(inline-flex, v-center, xs);
-    @include typography(xs, primary-50);
+    @include typography(sm, primary-50);
     @include border(0);
     @include background(primary);
 

src/components/Button/button.module.scss

@@ -2,7 +2,7 @@
 
 .button {
     @include layout(inline-flex, v-center, xs);
-    @include typography(md, primary-50, none);
+    @include typography(default, primary-50, none);
     @include spacing(py-sm, px-md);
     @include border-radius(xs);
     @include border(0);

src/components/Card/card.module.scss

@@ -16,7 +16,6 @@
     .title {
         @include spacing(p-default);
         @include border(primary-50, bottom);
-        @include typography(md);
         display: block;
     }
 

src/components/Checkbox/checkbox.module.scss

@@ -6,7 +6,7 @@ body {
 
 .checkbox {
     @include layout(inline-flex, sm);
-    @include typography(md, hmd);
+    @include typography(hmd);
 
     cursor: pointer;
 
@@ -57,7 +57,7 @@ body {
 
     .text {
         @include spacing(ml-lg);
-        @include typography(sm, primary-20);
+        @include typography(md, primary-20);
 
         a {
             @include typography(primary-20);

src/components/Input/input.module.scss

@@ -54,7 +54,7 @@
     @include layout(flex, column);
 
     .label {
-        @include typography(md, primary-20);
+        @include typography(primary-20);
         @include spacing(mb-xs);
     }
 
@@ -73,7 +73,7 @@
     }
 
     .subtext {
-        @include typography(sm, primary-30);
+        @include typography(md, primary-30);
         @include spacing(mt-xs);
     }
 }

src/components/Menu/menu.module.scss

@@ -3,7 +3,6 @@
 .menu {
     @include background(primary-70);
     @include spacing(p-md);
-    @include typography(md);
     @include border(bottom, primary-50);
     @include position(sticky, t0);
     @include layer(header);

src/components/Progress/progress.module.scss

@@ -11,19 +11,19 @@ body {
     @include size('w100%', h10px);
     @include border-radius(xl);
     @include visibility(hidden);
-    @include typography(bold, xxs);
+    @include typography(bold, xs);
     @include background(var(--w-progress-background));
 
     color: var(--w-progress-background);
 
     &.medium {
         @include size(h15px);
-        @include typography(xs);
+        @include typography(sm);
     }
 
     &.large {
         @include size(h20px);
-        @include typography(sm);
+        @include typography(md);
     }
 
     &.square {

src/components/Radio/radio.module.scss

@@ -13,7 +13,6 @@ body {
 
     label {
         @include layout(flex, xs);
-        @include typography(md);
 
         cursor: pointer;
 
@@ -71,7 +70,7 @@ body {
 
     .subtext {
         @include spacing(ml-lg);
-        @include typography(sm, primary-20);
+        @include typography(md, primary-20);
 
         a {
             @include typography(primary-20);

src/components/Rating/rating.module.scss

@@ -35,7 +35,7 @@ body {
 
     .text {
         @include transition(color);
-        @include typography(md, primary-20);
+        @include typography(default, primary-20);
         @include spacing(ml-xs);
 
         &.m {

src/components/Switch/switch.module.scss

@@ -36,7 +36,7 @@ body {
         }
 
         .label {
-            @include typography(sm);
+            @include typography(md);
         }
     }
 

src/components/Table/table.module.scss

@@ -5,7 +5,7 @@
 
     table {
         @include size('w100%');
-        @include typography(md, left);
+        @include typography(left);
 
         border-collapse: collapse;
     }

src/components/Tabs/tabs.module.scss

@@ -76,7 +76,7 @@
         button {
             @include transition(color);
             @include background(transparent);
-            @include typography(md, primary-20);
+            @include typography(default, primary-20);
             @include border(0);
             @include spacing(p-md);
             @include layout(flex, v-center, sm);

src/components/TimelineItem/timelineitem.module.scss

@@ -2,15 +2,14 @@
 
 .item {
     @include position(relative);
-    @include typography(md);
     @include spacing(m0);
 
     &::before {
         @include position(absolute, t-5px);
         @include size(25px);
         @include border-radius(max);
         @include background(var(--w-timeline-color));
-        @include typography(sm);
+        @include typography(md);
         @include layout(inline-flex, center);
         @include border(2px, primary-70);
 
@@ -21,7 +20,7 @@
     }
 
     .title {
-        @include typography(bold, default);
+        @include typography(bold, lg);
         @include spacing(mb-sm);
 
         display: block;

src/pages/resets.astro

@@ -31,6 +31,7 @@ import Card from '@components/Card/Card.astro'
             <li>Call the <code>setup</code> mixin in your global SCSS file.</li>
         </ol>
 
+        <hr />
         <p>Start your dev server with:</p>
         <pre>npm run dev</pre>
 

src/scss/config/typography.scss

@@ -4,15 +4,14 @@ $fontTypes: (
 ) !default;
 
 $fontSizes: (
-    'xxs':      10px,
-    'xs':       12px,
-    'sm':       14px,
-    'md':       16px,
-    'default':  18px,
-    'lg':       21px,
-    'xl':       24px,
-    '2xl':      28px,
-    '3xl':      32px
+    'xs':       10px,
+    'sm':       12px,
+    'md':       14px,
+    'default':  16px,
+    'lg':       18px,
+    'xl':       21px,
+    '2xl':      24px,
+    '3xl':      28px
 ) !default;
 
 $lineHeights: (

src/scss/global/tooltip.scss

@@ -24,7 +24,7 @@
         &::before {
             @include border-radius(md);
             @include position(absolute);
-            @include typography(sm, hlg);
+            @include typography(md, hlg);
             @include background(var(--w-tooltip-background));
             @include size(wmax-content);
             @include spacing(px-xs);

src/scss/resets.scss

@@ -53,7 +53,7 @@
     pre {
         @include border(primary-50);
         @include border-radius(md);
-        @include typography(sm);
+        @include typography(md);
     }
 
     code {
@@ -73,7 +73,7 @@
     }
 
     figcaption {
-        @include typography(sm, primary-20);  
+        @include typography(md, primary-20);  
 
         a {
             @include typography(primary-20);
@@ -85,7 +85,7 @@
     }
 
     p, ul, ol {
-        @include typography(md, hlg);
+        @include typography(hlg);
         @include spacing(my-default);
     }
 
@@ -94,8 +94,13 @@
     }
 
     blockquote {
-        @include typography(md);
         @include spacing(my-default, mx-none, pl-default);
         @include border(2px, left, primary-30);
     }
+
+    hr {
+        @include size('w100%', h1px);
+        @include border(0);
+        @include background(primary-50);
+    }
 }