From 212e2fd95201601b77baf4c83e1b11637f045972 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Thu, 16 May 2024 12:23:19 -0700 Subject: [PATCH 1/2] feat: update Newspack UI variable font sizes for the theme --- .../sass/variables-site/_newspack-ui.scss | 25 +++++++++++++++++++ .../sass/variables-site/_variables-site.scss | 1 + 2 files changed, 26 insertions(+) create mode 100644 newspack-theme/sass/variables-site/_newspack-ui.scss diff --git a/newspack-theme/sass/variables-site/_newspack-ui.scss b/newspack-theme/sass/variables-site/_newspack-ui.scss new file mode 100644 index 000000000..ebf2f7860 --- /dev/null +++ b/newspack-theme/sass/variables-site/_newspack-ui.scss @@ -0,0 +1,25 @@ +@use '../mixins/utilities'; + +html body { + // Override the Newspack UI font sizes to be based off of the Newspack Theme's 18px font base: + --newspack-ui-font-size-m: clamp( 1rem, 0.933rem + 0.178vw, 1.111rem ); // 18px - 20px + --newspack-ui-font-size-l: clamp( 1.111rem, 0.978rem + 0.356vw, 1.333rem ); // 20px - 24px + --newspack-ui-font-size-xl: clamp( 1.222rem, 0.889rem + 0.889vw, 1.778rem ); // 22px - 32px + --newspack-ui-font-size-2xl: clamp( 1.444rem, 0.911rem + 1.422vw, 2.333rem ); // 26px - 42px + --newspack-ui-font-size-3xl: clamp( 1.556rem, 0.889rem + 1.778vw, 2.667rem ); // 28px - 48px + --newspack-ui-font-size-4xl: clamp( 1.778rem, 0.711rem + 2.844vw, 3.556rem ); // 32px - 64px + --newspack-ui-font-size-5xl: clamp( 1.889rem, 0.356rem + 4.089vw, 4.444rem ); // 34px - 80px + --newspack-ui-font-size-6xl: clamp( 2rem, 0rem + 5.333vw, 5.333rem ); // 36px - 96px + + @include utilities.media( mobile ) { + // Override the Newspack UI font sizes to be based off of the Newspack Theme's 20px font base on desktop: + --newspack-ui-font-size-m: clamp( 0.9rem, 0.84rem + 0.16vw, 1rem ); // 18px - 20px + --newspack-ui-font-size-l: clamp( 1rem, 0.88rem + 0.32vw, 1.2rem ); // 20px - 24px + --newspack-ui-font-size-xl: clamp( 1.1rem, 0.8rem + 0.8vw, 1.6rem ); // 22px - 32px + --newspack-ui-font-size-2xl: clamp( 1.3rem, 0.82rem + 1.28vw, 2.1rem ); // 26px - 42px + --newspack-ui-font-size-3xl: clamp( 1.4rem, 0.8rem + 1.6vw, 2.4rem ); // 28px - 48px + --newspack-ui-font-size-4xl: clamp( 1.6rem, 0.64rem + 2.56vw, 3.2rem ); // 32px - 64px + --newspack-ui-font-size-5xl: clamp( 1.7rem, 0.32rem + 3.68vw, 4rem ); // 34px - 80px + --newspack-ui-font-size-6xl: clamp( 1.8rem, 0rem + 4.8vw, 4.8rem ); // 36px - 96px + } +} \ No newline at end of file diff --git a/newspack-theme/sass/variables-site/_variables-site.scss b/newspack-theme/sass/variables-site/_variables-site.scss index 652931744..09bfd9f11 100755 --- a/newspack-theme/sass/variables-site/_variables-site.scss +++ b/newspack-theme/sass/variables-site/_variables-site.scss @@ -1,2 +1,3 @@ +@use 'newspack-ui'; @use 'structure'; @use 'transitions'; From 63307ae052c72a9eeb753d8f45b4f0e746917991 Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Fri, 17 May 2024 13:27:27 +0100 Subject: [PATCH 2/2] feat: update clamp calculations based on viewport range of 782 - 1280 --- .../sass/variables-site/_newspack-ui.scss | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/newspack-theme/sass/variables-site/_newspack-ui.scss b/newspack-theme/sass/variables-site/_newspack-ui.scss index ebf2f7860..aba2dc142 100644 --- a/newspack-theme/sass/variables-site/_newspack-ui.scss +++ b/newspack-theme/sass/variables-site/_newspack-ui.scss @@ -2,24 +2,24 @@ html body { // Override the Newspack UI font sizes to be based off of the Newspack Theme's 18px font base: - --newspack-ui-font-size-m: clamp( 1rem, 0.933rem + 0.178vw, 1.111rem ); // 18px - 20px - --newspack-ui-font-size-l: clamp( 1.111rem, 0.978rem + 0.356vw, 1.333rem ); // 20px - 24px - --newspack-ui-font-size-xl: clamp( 1.222rem, 0.889rem + 0.889vw, 1.778rem ); // 22px - 32px - --newspack-ui-font-size-2xl: clamp( 1.444rem, 0.911rem + 1.422vw, 2.333rem ); // 26px - 42px - --newspack-ui-font-size-3xl: clamp( 1.556rem, 0.889rem + 1.778vw, 2.667rem ); // 28px - 48px - --newspack-ui-font-size-4xl: clamp( 1.778rem, 0.711rem + 2.844vw, 3.556rem ); // 32px - 64px - --newspack-ui-font-size-5xl: clamp( 1.889rem, 0.356rem + 4.089vw, 4.444rem ); // 34px - 80px - --newspack-ui-font-size-6xl: clamp( 2rem, 0rem + 5.333vw, 5.333rem ); // 36px - 96px + --newspack-ui-font-size-m: clamp( 1rem, 0.04rem + 2.209vw, 1.611rem ); // 18px - 20px + --newspack-ui-font-size-l: clamp( 1.111rem, 0.762rem + 0.803vw, 1.333rem ); // 20px - 24px + --newspack-ui-font-size-xl: clamp( 1.222rem, 0.35rem + 2.008vw, 1.778rem ); // 22px - 32px + --newspack-ui-font-size-2xl: clamp( 1.444rem, 0.049rem + 3.213vw, 2.333rem ); // 26px - 42px + --newspack-ui-font-size-3xl: clamp( 1.556rem, -0.189rem + 4.016vw, 2.667rem ); // 28px - 48px + --newspack-ui-font-size-4xl: clamp( 1.778rem, -1.014rem + 6.426vw, 3.556rem ); // 32px - 64px + --newspack-ui-font-size-5xl: clamp( 1.889rem, -2.124rem + 9.237vw, 4.444rem ); // 34px - 80px + --newspack-ui-font-size-6xl: clamp( 2rem, -3.234rem + 12.048vw, 5.333rem ); // 36px - 96px @include utilities.media( mobile ) { // Override the Newspack UI font sizes to be based off of the Newspack Theme's 20px font base on desktop: - --newspack-ui-font-size-m: clamp( 0.9rem, 0.84rem + 0.16vw, 1rem ); // 18px - 20px - --newspack-ui-font-size-l: clamp( 1rem, 0.88rem + 0.32vw, 1.2rem ); // 20px - 24px - --newspack-ui-font-size-xl: clamp( 1.1rem, 0.8rem + 0.8vw, 1.6rem ); // 22px - 32px - --newspack-ui-font-size-2xl: clamp( 1.3rem, 0.82rem + 1.28vw, 2.1rem ); // 26px - 42px - --newspack-ui-font-size-3xl: clamp( 1.4rem, 0.8rem + 1.6vw, 2.4rem ); // 28px - 48px - --newspack-ui-font-size-4xl: clamp( 1.6rem, 0.64rem + 2.56vw, 3.2rem ); // 32px - 64px - --newspack-ui-font-size-5xl: clamp( 1.7rem, 0.32rem + 3.68vw, 4rem ); // 34px - 80px - --newspack-ui-font-size-6xl: clamp( 1.8rem, 0rem + 4.8vw, 4.8rem ); // 36px - 96px + --newspack-ui-font-size-m: clamp( 0.9rem, 0.743rem + 0.402vw, 1rem ); // 18px - 20px + --newspack-ui-font-size-l: clamp( 1rem, 0.686rem + 0.803vw, 1.2rem ); // 20px - 24px + --newspack-ui-font-size-xl: clamp( 1.1rem, 0.315rem + 2.008vw, 1.6rem ); // 22px - 32px + --newspack-ui-font-size-2xl: clamp( 1.3rem, 0.044rem + 3.213vw, 2.1rem ); // 26px - 42px + --newspack-ui-font-size-3xl: clamp( 1.4rem, -0.17rem + 4.016vw, 2.4rem ); // 28px - 48px + --newspack-ui-font-size-4xl: clamp( 1.6rem, -0.912rem + 6.426vw, 3.2rem ); // 32px - 64px + --newspack-ui-font-size-5xl: clamp( 1.7rem, -1.912rem + 9.237vw, 4rem ); // 34px - 80px + --newspack-ui-font-size-6xl: clamp( 1.8rem, -2.911rem + 12.048vw, 4.8rem ); // 36px - 96px } } \ No newline at end of file