gatsby-core-theme 17.0.2 → 17.0.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [17.0.3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v17.0.2...v17.0.3) (2022-12-09)
+
+
+### Bug Fixes
+
+* add tag specific in the spotlight if it selected ([e18faba](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e18fabab1801e7779f01a95a90db000c5e2a3bd4))
+* add variables for font-size and line-height ([12d3c38](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/12d3c384ebc28a36a4121383040af437004697af))
+
+
+* Merge branch 'tm-3216-h-styles' into 'master' ([360462d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/360462d7ff1ddbd43550abc11f40613daa64da25))
+* Merge branch 'tm-3197-h-tags-spotlight' into 'master' ([4bb4299](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4bb4299bced420fa868b678a7fbdea758a96374c))
+
 ## [17.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v17.0.1...v17.0.2) (2022-12-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "17.0.2",
+  "version": "17.0.3",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/spotlights/index.js

@@ -21,6 +21,7 @@ const Spotlights = ({ module, themeStyles = {} }) => {
     const imageSrc = imagePrettyUrl(img, imageSize?.width, imageSize?.height);
 
     const fileName = getImageFilename(imageSrc);
+    const TitleTag = item?.title_tag || 'label';
 
     return (
       <>
@@ -32,7 +33,7 @@ const Spotlights = ({ module, themeStyles = {} }) => {
             src={imageSrc}
           />
         )}
-        {item?.label && <label>{item.label}</label>}
+        {item?.label && <TitleTag>{item.label}</TitleTag>}
         {item.subtitle && <span>{item.subtitle}</span>}
       </>
     );

package/src/styles/base/_typography.scss

@@ -11,15 +11,18 @@ body {
     family: var(--main-font), $backup-fonts;
   }
 
-  @each $heading, $size, $mobileSize in $heading-sizes {
+  @each $heading, $size, $mobileSize, $lineHeight, $mobileLineHeight, $fontWeight, $mobileFontWeight in $heading-sizes {
     #{$heading},
     .#{$heading} {
-      font-weight: 700;
+      font-weight: #{$mobileFontWeight};
       color: var(--heading-base-color);
       font-size: #{$mobileSize};
+      line-height: #{$mobileLineHeight};
 
       @include min(tablet) {
+        font-weight: #{$fontWeight};
         font-size: #{$size};
+        line-height: #{$lineHeight};
       }
     }
   }

package/src/styles/utils/variables/_main.scss

@@ -43,6 +43,36 @@
   --h5-mobile-size: 1.6rem;
   --h6-mobile-size: 1.5rem;
 
+    // Line heights - site
+  --h1-line-height: 4.2rem;
+  --h2-line-height: 3.4rem
+  --h3-line-height: 3.2rem
+  --h4-line-height: 3rem
+  --h5-line-height: 2.8rem
+  --h6-line-height: 2.7rem
+
+  --h1-mobile-line-height: 3.5rem;
+  --h2-mobile-line-height: 3.1rem;
+  --h3-mobile-line-height: 3rem;
+  --h4-mobile-line-height: 2.8rem;
+  --h5-mobile-line-height: 2.4rem;
+  --h6-mobile-line-height: 1.8rem;
+
+  //font-weights
+  --h1-font-weight: 700;
+  --h2-font-weight: 700;
+  --h3-font-weight: 700;
+  --h4-font-weight: 700;
+  --h5-font-weight: 700;
+  --h6-font-weight: 700;
+
+  --h1-mobile-font-weight: 700;
+  --h2-mobile-font-weight: 700;
+  --h3-mobile-font-weight: 700;
+  --h4-mobile-font-weight: 700;
+  --h5-mobile-font-weight: 700;
+  --h6-mobile-font-weight: 700;
+
   // Z-index
   --modal-index: 30;
   --navigation-index: 20;
@@ -54,7 +84,6 @@
   // Components
   --nav-background-color: var(--color-4);
   --nav-icon-color: var(--color-19);
-  --nav-height: 6rem;
 
   --modal-overlay-color: rgba(0, 0, 0, 0.6);
   --modal-background-color: white;

package/src/styles/utils/variables/_typography.scss

@@ -2,10 +2,10 @@ $backup-fonts: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantar
   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
 $heading-sizes: (
-  h1 var(--h1-size) var(--h1-mobile-size),
-  h2 var(--h2-size) var(--h2-mobile-size),
-  h3 var(--h3-size) var(--h3-mobile-size),
-  h4 var(--h4-size) var(--h4-mobile-size),
-  h5 var(--h5-size) var(--h5-mobile-size),
-  h6 var(--h6-size) var(--h6-mobile-size), 
+  h1 var(--h1-size) var(--h1-mobile-size) var(--h1-line-height) var(--h1-mobile-line-height) var(--h1-font-weight) var(--h1-mobile-font-weight),
+  h2 var(--h2-size) var(--h2-mobile-size) var(--h2-line-height) var(--h2-mobile-line-height) var(--h2-font-weight) var(--h2-mobile-font-weight),
+  h3 var(--h3-size) var(--h3-mobile-size) var(--h3-line-height) var(--h3-mobile-line-height) var(--h3-font-weight) var(--h3-mobile-font-weight),
+  h4 var(--h4-size) var(--h4-mobile-size) var(--h4-line-height) var(--h4-mobile-line-height) var(--h4-font-weight) var(--h4-mobile-font-weight),
+  h5 var(--h5-size) var(--h5-mobile-size) var(--h5-line-height) var(--h5-mobile-line-height) var(--h5-font-weight) var(--h5-mobile-font-weight),
+  h6 var(--h6-size) var(--h6-mobile-size) var(--h6-line-height) var(--h6-mobile-line-height) var(--h6-font-weight) var(--h6-mobile-font-weight), 
 );