💄 Match default font size with browser defaults

Frontendland · Frontendland · commit 6658c96bafd4 · 2024-08-02T10:19:23.000+02:00
diff --git a/src/components/Accordion/accordion.module.scss b/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);
diff --git a/src/components/Alert/alert.module.scss b/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);
     }
 }
diff --git a/src/components/Badge/badge.module.scss b/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);
 
diff --git a/src/components/Button/button.module.scss b/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);
diff --git a/src/components/Card/card.module.scss b/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;
     }
 
diff --git a/src/components/Checkbox/checkbox.module.scss b/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);
diff --git a/src/components/Input/input.module.scss b/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);
     }
 }
diff --git a/src/components/Menu/menu.module.scss b/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);
diff --git a/src/components/Progress/progress.module.scss b/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 {
diff --git a/src/components/Radio/radio.module.scss b/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);
diff --git a/src/components/Rating/rating.module.scss b/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 {
diff --git a/src/components/Switch/switch.module.scss b/src/components/Switch/switch.module.scss
@@ -36,7 +36,7 @@ body {
         }
 
         .label {
-            @include typography(sm);
+            @include typography(md);
         }
     }
 
diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss
@@ -5,7 +5,7 @@
 
     table {
         @include size('w100%');
-        @include typography(md, left);
+        @include typography(left);
 
         border-collapse: collapse;
     }
diff --git a/src/components/Tabs/tabs.module.scss b/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);
diff --git a/src/components/TimelineItem/timelineitem.module.scss b/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;
diff --git a/src/pages/resets.astro b/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>
 
diff --git a/src/scss/config/typography.scss b/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: (
diff --git a/src/scss/global/tooltip.scss b/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);
diff --git a/src/scss/resets.scss b/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);
+    }
 }    

Original file line number	Diff line number	Diff line change
`@@ -41,11 +41,11 @@`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`.title {`
`44`		`- @include typography(hmd);`
	`44`	`+ @include typography(lg, hmd);`
`45`	`45`	`display: block;`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`.body {`
`49`		`- @include typography(primary-20, md, hmd);`
	`49`	`+ @include typography(primary-20, hmd);`
`50`	`50`	`}`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,6 @@`
`16`	`16`	`.title {`
`17`	`17`	`@include spacing(p-default);`
`18`	`18`	`@include border(primary-50, bottom);`
`19`		`- @include typography(md);`
`20`	`19`	`display: block;`
`21`	`20`	`}`
`22`	`21`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@`
`54`	`54`	`@include layout(flex, column);`
`55`	`55`
`56`	`56`	`.label {`
`57`		`- @include typography(md, primary-20);`
	`57`	`+ @include typography(primary-20);`
`58`	`58`	`@include spacing(mb-xs);`
`59`	`59`	`}`
`60`	`60`
`@@ -73,7 +73,7 @@`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`.subtext {`
`76`		`- @include typography(sm, primary-30);`
	`76`	`+ @include typography(md, primary-30);`
`77`	`77`	`@include spacing(mt-xs);`
`78`	`78`	`}`
`79`	`79`	`}`