From 0382d4892a82bbe06dc826262c68eadd7fdf82d9 Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Thu, 22 Feb 2024 18:01:58 -0800 Subject: [PATCH 1/7] Add scalable font size to global and adjust font size of other files. --- .../design_system/button/Button.module.css | 4 +- src/components/table/Table.module.css | 3 +- src/components/table/table.tsx | 6 +- src/styles/globals.css | 68 +++++++++++++++++-- 4 files changed, 68 insertions(+), 13 deletions(-) diff --git a/src/components/design_system/button/Button.module.css b/src/components/design_system/button/Button.module.css index 0c148038..ebe69e43 100644 --- a/src/components/design_system/button/Button.module.css +++ b/src/components/design_system/button/Button.module.css @@ -8,7 +8,7 @@ cursor: pointer; text-decoration: none; text-align: center; - font-size: 16px; + font-size: var(--base-size); text-transform: none; line-height: normal; letter-spacing: 0; @@ -44,7 +44,7 @@ cursor: pointer; text-decoration: none; text-align: center; - font-size: 16px; + font-size: var(--base-size); background-color: inherit; font-family: var(--quicksand); text-transform: none; diff --git a/src/components/table/Table.module.css b/src/components/table/Table.module.css index e3ce3c3b..524bf5dd 100644 --- a/src/components/table/Table.module.css +++ b/src/components/table/Table.module.css @@ -1,5 +1,4 @@ .tableTitle { - font-size: 30px; font-weight: 600; } @@ -9,7 +8,7 @@ } .headerLabel { - font-size: 17px; + font-size: var(--h5); color: var(--grey-20); } diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx index 0a56f88b..b935dc87 100644 --- a/src/components/table/table.tsx +++ b/src/components/table/table.tsx @@ -102,7 +102,7 @@ function EnhancedTableHead({ active={orderBy === headCell.id} direction={orderBy === headCell.id ? order : "asc"} onClick={createSortHandler(headCell.id)} - className={$table.headerLabel} + className={`${$table.headerLabel}`} > {headCell.label} {orderBy === headCell.id ? ( @@ -152,8 +152,8 @@ function EnhancedTableToolbar({ width: "100%", }} > -

{type}

- diff --git a/src/styles/globals.css b/src/styles/globals.css index e73d0ea5..ca8d9d63 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -47,10 +47,25 @@ --grey-80: #f4f6f7; --grey-90: #f6f8f9; --grey-100: #ffffff; + + /* Easy Text Size Scaling */ + --base-size: .875rem; + --scale: 1.25; + --h1: calc(var(--h2) * var(--scale)); + --h2: calc(var(--h3) * var(--scale)); + --h3: calc(var(--h4) * var(--scale)); + --h4: calc(var(--h5) * var(--scale)); + --h5: calc(var(--h6) * var(--scale)); + --h6: var(--base-size); + --sm: calc(var(--h6) / var(--scale)); } -* { +html { box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; padding: 0; margin: 0; } @@ -61,6 +76,7 @@ body, height: 100%; overflow-x: auto; padding-top: 0.5rem; + font-size: var(--base-size); } strong { @@ -78,17 +94,54 @@ textarea { outline: none; } -/* Breakpoints recommended by Bootstrap */ -/* Custom, iPhone Retina */ -@media only screen and (min-width: 320px) { +/* Scalable H elements with h classes that can be a substitute for H elements */ +h1, .h1 { + font-size: var(--h1); +} + +h2, .h2 { + font-size: var(--h2); +} + +h3, .h3 { + font-size: var(--h3); +} + +h4, .h4 { + font-size: var(--h4); +} + +h5, .h5 { + font-size: var(--h5); } -/* Extra Small Devices, Phones */ +h6, .h6 { + font-size: var(--h6); +} + +.sm { + font-size: var(--sm); +} + +p { + font-size: var(--base-size); +} + +/* Breakpoints recommended by Bootstrap */ +/* Screens smaller than [480px] uses css above */ + +/* Small Devices, Phones & Tablet [long screen] */ @media only screen and (min-width: 480px) { + :root { + --base-size: .925rem; + } } -/* Small Devices, Tablets */ +/* Small Devices, Tablets [wide screen]*/ @media only screen and (min-width: 768px) { + :root { + --base-size: 1rem; + } } /* Medium Devices, Desktops */ @@ -102,4 +155,7 @@ textarea { /* Large Devices, Wide Screens */ @media only screen and (min-width: 1200px) { + :root { + --base-size: 1.125rem; + } } From 8603f6da7899920a28a870c079280b3e095f6192 Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 23 Feb 2024 10:13:11 -0800 Subject: [PATCH 2/7] Add xs to scale and remove text size at 1200 screen --- src/styles/globals.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index ca8d9d63..0306ed3b 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -49,7 +49,7 @@ --grey-100: #ffffff; /* Easy Text Size Scaling */ - --base-size: .875rem; + --base-size: .875rem; /* equivalent to 14px */ --scale: 1.25; --h1: calc(var(--h2) * var(--scale)); --h2: calc(var(--h3) * var(--scale)); @@ -58,6 +58,7 @@ --h5: calc(var(--h6) * var(--scale)); --h6: var(--base-size); --sm: calc(var(--h6) / var(--scale)); + --xs: calc(var(--sm) / var(--scale)); } html { @@ -123,6 +124,10 @@ h6, .h6 { font-size: var(--sm); } +.xs { + font-size: var(--xs); +} + p { font-size: var(--base-size); } @@ -155,7 +160,4 @@ p { /* Large Devices, Wide Screens */ @media only screen and (min-width: 1200px) { - :root { - --base-size: 1.125rem; - } } From b2297d57be837611096f990c1ec5b7b851da905b Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 23 Feb 2024 10:47:24 -0800 Subject: [PATCH 3/7] Change base size to .9375rem or 15px --- src/styles/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 0306ed3b..8a52bbbe 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -138,7 +138,7 @@ p { /* Small Devices, Phones & Tablet [long screen] */ @media only screen and (min-width: 480px) { :root { - --base-size: .925rem; + --base-size: .9375rem; } } From 79b114a04a98c8d52d801fbea7cde37b2a754e99 Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 23 Feb 2024 10:56:12 -0800 Subject: [PATCH 4/7] Run format --- src/styles/globals.css | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 8a52bbbe..267dadf4 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -49,7 +49,7 @@ --grey-100: #ffffff; /* Easy Text Size Scaling */ - --base-size: .875rem; /* equivalent to 14px */ + --base-size: 0.875rem; /* 14px */ --scale: 1.25; --h1: calc(var(--h2) * var(--scale)); --h2: calc(var(--h3) * var(--scale)); @@ -65,7 +65,9 @@ html { box-sizing: border-box; } -*, *:before, *:after { +*, +*:before, +*:after { box-sizing: inherit; padding: 0; margin: 0; @@ -96,27 +98,33 @@ textarea { } /* Scalable H elements with h classes that can be a substitute for H elements */ -h1, .h1 { +h1, +.h1 { font-size: var(--h1); } -h2, .h2 { +h2, +.h2 { font-size: var(--h2); } -h3, .h3 { +h3, +.h3 { font-size: var(--h3); } -h4, .h4 { +h4, +.h4 { font-size: var(--h4); } -h5, .h5 { +h5, +.h5 { font-size: var(--h5); } -h6, .h6 { +h6, +.h6 { font-size: var(--h6); } @@ -138,7 +146,7 @@ p { /* Small Devices, Phones & Tablet [long screen] */ @media only screen and (min-width: 480px) { :root { - --base-size: .9375rem; + --base-size: 0.9375rem; /* 15px */ } } From 68204a3dfcace001765f30c1367a49b01324956a Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Tue, 12 Mar 2024 17:30:00 -0700 Subject: [PATCH 5/7] Add font-family, font-weight, and line-height --- src/pages/settings.tsx | 17 +++++++++++++ src/styles/globals.css | 57 ++++++++++++++++++++++++++++++++++++------ 2 files changed, 66 insertions(+), 8 deletions(-) diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index cbc6ca68..3921d917 100644 --- a/src/pages/settings.tsx +++ b/src/pages/settings.tsx @@ -6,6 +6,23 @@ const Settings = () => { return (

🚧 Under Construction! 🚧

+

h1 This is h1 Element

+

h2 This is h2 Element

+

h3 This is h3 Element

+

h4 This is h4 Element

+
h5 This is h5 Element
+
h6 This is h6 Element
+

This is a p Element

+

+ This is a body2 Element +

+

+ This is a caption Element +

+

+ This is an overline Element +

+ This is a Span Element
); }; diff --git a/src/styles/globals.css b/src/styles/globals.css index 267dadf4..7f9d8b00 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Quicksand:wght@300..700&display=swap"); + :root { --primary: #20159e; --on-primary: #ffffff; @@ -50,7 +52,8 @@ /* Easy Text Size Scaling */ --base-size: 0.875rem; /* 14px */ - --scale: 1.25; + --scale: 1.2; + --h0: 2.488rem; --h1: calc(var(--h2) * var(--scale)); --h2: calc(var(--h3) * var(--scale)); --h3: calc(var(--h4) * var(--scale)); @@ -59,6 +62,13 @@ --h6: var(--base-size); --sm: calc(var(--h6) / var(--scale)); --xs: calc(var(--sm) / var(--scale)); + + /* Fonts */ + --quicksand: Quicksand; + --inter: Inter; + --regular: 300; + --semibold: 600; + --bold: 700; } html { @@ -98,6 +108,17 @@ textarea { } /* Scalable H elements with h classes that can be a substitute for H elements */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 600; + font-family: Quicksand; + line-height: 1.5; +} + h1, .h1 { font-size: var(--h1); @@ -140,24 +161,48 @@ p { font-size: var(--base-size); } +p, +.body2, +.caption, +.overline, +span { + line-height: 1.5; + font-family: Inter; + font-weight: var(--regular); +} + +.body2 { + font-size: var(--sm); +} + +.caption { + font-size: var(--xs); +} + +.overline { + font-size: var(--xs); + font-weight: var(--semibold); + text-transform: uppercase; +} + /* Breakpoints recommended by Bootstrap */ /* Screens smaller than [480px] uses css above */ -/* Small Devices, Phones & Tablet [long screen] */ +/* Phones [wide screen] - Tablet [long screen] */ @media only screen and (min-width: 480px) { :root { --base-size: 0.9375rem; /* 15px */ } } -/* Small Devices, Tablets [wide screen]*/ +/* Tablets [wide screen]*/ @media only screen and (min-width: 768px) { :root { --base-size: 1rem; } } -/* Medium Devices, Desktops */ +/* Desktops */ @media only screen and (min-width: 992px) { html, body, @@ -165,7 +210,3 @@ p { padding-top: 0; } } - -/* Large Devices, Wide Screens */ -@media only screen and (min-width: 1200px) { -} From a616ea92cfbecdaea37a802a2b341008cdb752d0 Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 15 Mar 2024 17:00:12 -0700 Subject: [PATCH 6/7] Add body1 for regular font size --- src/styles/globals.css | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 7f9d8b00..54d11910 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -53,7 +53,6 @@ /* Easy Text Size Scaling */ --base-size: 0.875rem; /* 14px */ --scale: 1.2; - --h0: 2.488rem; --h1: calc(var(--h2) * var(--scale)); --h2: calc(var(--h3) * var(--scale)); --h3: calc(var(--h4) * var(--scale)); @@ -109,11 +108,17 @@ textarea { /* Scalable H elements with h classes that can be a substitute for H elements */ h1, +.h1, h2, +.h2, h3, +.h3, h4, +.h4, h5, -h6 { +.h5, +h6, +.h6 { font-weight: 600; font-family: Quicksand; line-height: 1.5; @@ -157,11 +162,8 @@ h6, font-size: var(--xs); } -p { - font-size: var(--base-size); -} - p, +.body1, .body2, .caption, .overline, @@ -171,10 +173,21 @@ span { font-weight: var(--regular); } +p { + font-size: var(--base-size); +} + +/* Text or similar style */ +.body1 { + font-size: var(--base-size); +} + +/* Usage - description for filling out forms */ .body2 { font-size: var(--sm); } +/* For Images */ .caption { font-size: var(--xs); } From dc69defcf2e4a7f1199ed119e0e30481654955e1 Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 15 Mar 2024 17:01:43 -0700 Subject: [PATCH 7/7] Remove settings changes --- src/pages/settings.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index 3921d917..cbc6ca68 100644 --- a/src/pages/settings.tsx +++ b/src/pages/settings.tsx @@ -6,23 +6,6 @@ const Settings = () => { return (

🚧 Under Construction! 🚧

-

h1 This is h1 Element

-

h2 This is h2 Element

-

h3 This is h3 Element

-

h4 This is h4 Element

-
h5 This is h5 Element
-
h6 This is h6 Element
-

This is a p Element

-

- This is a body2 Element -

-

- This is a caption Element -

-

- This is an overline Element -

- This is a Span Element
); };