Add druk leading option

SU-SWS · Mar 4, 2024 · 9776dd4 · 9776dd4
1 parent dc08ee9
commit 9776dd4
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/components/DataCard/DataCard.tsx b/components/DataCard/DataCard.tsx
@@ -43,7 +43,7 @@ export const DataCard = ({
     >
       <div className={cnb(styles.content(!!barColor), accentBorderColors[barColor])}>
         {heading && (
-          <Heading font="druk" as={headingLevel} size="f5" >
+          <Heading font="druk" leading="druk" as={headingLevel} size="f5" >
             {heading}
           </Heading>
         )}

diff --git a/components/Homepage/IdealFellow.tsx b/components/Homepage/IdealFellow.tsx
@@ -23,8 +23,8 @@ export const IdealFellow = () => {
       </div>
       <Heading size="base" color="white" className="absolute bottom-300 ml-[20vw]">
         <Text as="span" font="druk" size="f8" leading="display" className="block">Shape</Text>
-        <Text as="span" font="serif" weight="semibold" italic size="f9" className="leading-[0.9] block">what’s</Text>
-        <Text as="span" font="serif" weight="semibold" italic size="f9" className="leading-[0.9] block">next</Text>
+        <Text as="span" font="serif" weight="semibold" italic size="f9" leading="druk" className="block">what’s</Text>
+        <Text as="span" font="serif" weight="semibold" italic size="f9" leading="druk" className="block">next</Text>
       </Heading>
       <div className="group hover:backdrop-blur-sm transition-all absolute bottom-200 right-0 bg-black-50/50 backdrop-blur-xl w-5/12 rs-px-4 rs-pt-4 rs-pb-1">
         <Text variant="caption" color="white" weight="semibold" className="mb-04em">Preparing citizens</Text>

diff --git a/components/MomentPoster/MomentPoster.styles.ts b/components/MomentPoster/MomentPoster.styles.ts
@@ -8,7 +8,7 @@ export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w
 
 export const contentWrapper = 'lg:rs-pr-9 ml-0';
 
-export const heading = 'leading-[0.9] max-w-1000 mx-auto rs-mb-1';
+export const heading = 'max-w-1000 mx-auto rs-mb-1';
 export const headingWrapper = 'mx-auto w-fit gap-02em';
 
 export const thumbnailWrapper = 'inline-block';

diff --git a/components/MomentPoster/MomentPoster.tsx b/components/MomentPoster/MomentPoster.tsx
@@ -107,7 +107,7 @@ export const MomentPoster = ({
         />
       )}
       <Container className={styles.wrapper}>
-        <Heading as="h2" size="splash" font="druk" align="center" className={styles.heading}>
+        <Heading as="h2" size="splash" font="druk" leading="druk" align="center" className={styles.heading}>
           <FlexBox as="span" alignItems="baseline" className={styles.headingWrapper}>
             {textBefore && (
               <AnimateInView animation="slideInFromLeft">

diff --git a/components/Typography/typography.styles.ts b/components/Typography/typography.styles.ts
@@ -44,6 +44,7 @@ export const fontLeadings = {
   cozy: 'leading-cozy', // 1.4
   normal: 'leading', // 1.5
   trim: 'leading-trim', // 0.75
+  druk: 'leading-druk', // 0.9
 };
 
 export const textAligns = {