SOEOPSFY24-380 | adjust typography and text area examples

SU-SOE · Dec 12, 2024 · be50d92 · be50d92
1 parent 95cb26b
commit be50d92
Show file tree

Hide file tree

Showing 28 changed files with 206 additions and 195 deletions.
diff --git a/app/example/story/hero/page.tsx b/app/example/story/hero/page.tsx
@@ -1,10 +1,73 @@
 import { Masthead } from "@/components/Masthead";
-import { ImpactBanner } from "@/components/StoryBanners";
+import { ImpactBanner, LineBanner } from "@/components/StoryBanners";
 
 const ExampleStoryPage = async () => {
   return (
     <div>
       <Masthead isOverlap />
+      <LineBanner
+        heading="Exploring the reengineering of immune cells"
+        superhead="Change Makers"
+        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
+        byline="by Jess Alvarenga"
+        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        lineVariant="a"
+      />
+
+      <LineBanner
+        hasLineArt
+        heading="Exploring the reengineering of immune cells"
+        superhead="Change Makers"
+        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
+        byline="by Jess Alvarenga"
+        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        lineVariant="a"
+      />
+      <LineBanner
+        hasLineArt
+        heading="Exploring the reengineering of immune cells"
+        superhead="Change Makers"
+        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
+        byline="by Jess Alvarenga"
+        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        lineVariant="b"
+      />
+
+      <LineBanner
+        heading="Exploring the reengineering of immune cells"
+        superhead="Change Makers"
+        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
+        byline="by Jess Alvarenga"
+        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        lineVariant="b"
+        bgColor="stone-dark"
+      />
+      <LineBanner
+        hasLineArt
+        heading="Exploring the reengineering of immune cells"
+        superhead="Change Makers"
+        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
+        byline="by Jess Alvarenga"
+        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        lineVariant="a"
+        bgColor="stone-dark"
+      />
+      <LineBanner
+        hasLineArt
+        heading="Exploring the reengineering of immune cells"
+        superhead="Change Makers"
+        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
+        byline="by Jess Alvarenga"
+        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        lineVariant="b"
+        bgColor="stone-dark"
+      />
       <ImpactBanner
         bgColor="stone-dark"
         heading="Exploring the reengineering of immune cells"

diff --git a/app/example/textarea/page.tsx b/app/example/textarea/page.tsx
@@ -4,7 +4,6 @@ import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage"
 import { Container } from "@/components/Container";
 import { ContributeStoryBanner } from "@/components/ContributeStoryBanner";
 import Metadata from "@/components/Layout/Metadata";
-import { LineBanner } from "@/components/StoryBanners";
 
 const TextareaExamplePage = async () => {
   return (
@@ -13,70 +12,7 @@ const TextareaExamplePage = async () => {
         title="Example Textarea"
         description="Example page containing typography styles"
       />
-      <Masthead />
-      <LineBanner
-        heading="Exploring the reengineering of immune cells"
-        superhead="Change Makers"
-        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
-        byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
-        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
-        lineVariant="a"
-      />
-
-      <LineBanner
-        hasLineArt
-        heading="Exploring the reengineering of immune cells"
-        superhead="Change Makers"
-        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
-        byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
-        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
-        lineVariant="a"
-      />
-      <LineBanner
-        hasLineArt
-        heading="Exploring the reengineering of immune cells"
-        superhead="Change Makers"
-        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
-        byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
-        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
-        lineVariant="b"
-      />
-
-      <LineBanner
-        heading="Exploring the reengineering of immune cells"
-        superhead="Change Makers"
-        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
-        byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
-        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
-        lineVariant="b"
-        bgColor="stone-dark"
-      />
-      <LineBanner
-        hasLineArt
-        heading="Exploring the reengineering of immune cells"
-        superhead="Change Makers"
-        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
-        byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
-        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
-        lineVariant="a"
-        bgColor="stone-dark"
-      />
-      <LineBanner
-        hasLineArt
-        heading="Exploring the reengineering of immune cells"
-        superhead="Change Makers"
-        body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
-        byline="by Jess Alvarenga"
-        src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
-        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
-        lineVariant="b"
-        bgColor="stone-dark"
-      />
+      <Masthead isLight />
 
       <Container width="site" py={9} className="font-dm-sans">
         <MediaCaptionImage
@@ -89,62 +25,69 @@ const TextareaExamplePage = async () => {
           imageSrc="https://placecats.com/neo/1500/1000"
           caption="Caption/credit lorem ipsum aspect ratio 16/9"
         />
-        <p className="intro-text">
+        <p className="overview">
           Overview style lorem ipsum dolar sit amet vestibulum parimentium elit
           rhoncus donec. Scelerisque urna et euismod in daphibus nec leo euismod
           nisi, pharetra raesent nec. Aliquam dignissim nisi convalis quis, leo
           vestibulum duis euismod.
         </p>
-        <p className="big-paragraph">
-          Long copy paragraph text style raesent nec dapibus odio. Aliquam
+        <p className="intro-text">
+          Introduction style lorem ipsum dolar sit amet vestibulum parimentium
+          elit rhoncus donec. Scelerisque urna et euismod in daphibus nec leo
+          euismod nisi, pharetra raesent nec. Aliquam dignissim nisi convalis
+          quis, leo vestibulum duis euismod.
+        </p>
+        <p className="cen-big-paragraph">
+          Long copy big paragraph text style raesent nec dapibus odio. Aliquam
           dignissim nisi nisi, pharetra faucibus elit rhoncus in. Donec
           efficitur scelerisque urna et sollicitudin. Donec euismod enim a dui
           convallis, quis suscipit leo vestibulum. Duis aliquam euismod enim,
           sit amet
         </p>
         <h2>Header Two</h2>
-        <p className="big-paragraph">
-          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
-          erat, imperdiet eu fermentum sed in text link. Praesent nec dapibus
-          odio. Aliquam dignissim nisi nisi, pharetra faucibus elit rhoncus in.
-          Donec efficitur scelerisque urna et sollicitudin. Duis aliquam euismod
-          enim, sit amet in text link hover state. Aliquam sodales consequat
-          arcu in egestas. Aliquam condimentum viverra eros.Donec efficitur
-          scelerisque urna et sollicitudin. Duis aliquam euismod enim, sit amet.
+        <p>
+          Default paragraph p tag usce sem enim, tempus nec massa id, mollis
+          faucibus sem. Ut ipsum erat, imperdiet eu fermentum sed in text link.
+          Praesent nec dapibus odio. Aliquam dignissim nisi nisi, pharetra
+          faucibus elit rhoncus in. Donec efficitur scelerisque urna et
+          sollicitudin. Duis aliquam euismod enim, sit amet in text link hover
+          state. Aliquam sodales consequat arcu in egestas. Aliquam condimentum
+          viverra eros.Donec efficitur scelerisque urna et sollicitudin. Duis
+          aliquam euismod enim, sit amet.
         </p>
         <Heading as="h3">Header Three</Heading>
-        <Text className="big-paragraph">
-          Aenean sollicitudin facilisis ex, in tincidunt velit sodales ac.
-          Nullam consequat leo ut sem pharetra, a fringilla massa commodo. Etiam
-          molestie, justo nec congue ultricies, augue massa tempus ante, nec
-          sagittis dui tellus ac lectus. Duis aliquam euismod enim, sit amet
-          lobortis ante porttitor. Donec efficitur scelerisque urna et
-          sollicitudin. Duis aliquam euismod enim, sit amet.
+        <Text variant="big">
+          Text paragraph big aenean sollicitudin facilisis ex, in tincidunt
+          velit sodales ac. Nullam consequat leo ut sem pharetra, a fringilla
+          massa commodo. Etiam molestie, justo nec congue ultricies, augue massa
+          tempus ante, nec sagittis dui tellus ac lectus. Duis aliquam euismod
+          enim, sit amet lobortis ante porttitor. Donec efficitur scelerisque
+          urna et sollicitudin. Duis aliquam euismod enim, sit amet.
         </Text>
         <Heading as="h4">Header Four</Heading>
-        <Text className="big-paragraph">
-          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
-          erat, imperdiet eu fermentum sed, egestas quis mi. Praesent nec
-          dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
-          rhoncus in.
+        <Text variant="subheading">
+          Text paragraph subheading sem enim, tempus nec massa id, mollis
+          faucibus sem. Ut ipsum erat, imperdiet eu fermentum sed, egestas quis
+          mi. Praesent nec dapibus odio. Aliquam dignissim nisi nisi, pharetra
+          faucibus elit rhoncus in.
         </Text>
         <Heading as="h5">Header Five</Heading>
-        <Text className="big-paragraph">
-          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
-          erat, imperdiet eu fermentum sed, egestas quis mi. Praesent nec
-          dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
-          rhoncus in. Donec efficitur scelerisque urna et sollicitudin. Donec
-          euismod enim a dui convallis, quis suscipit leo vestibulum. Duis
-          aliquam euismod enim, sit amet lobortis ante porttitor. Donec
-          efficitur scelerisque urna et sollicitudin. Duis aliquam euismod enim,
-          sit amet.
+        <Text variant="caption">
+          Text paragraph caption sem enim, tempus nec massa id, mollis faucibus
+          sem. Ut ipsum erat, imperdiet eu fermentum sed, egestas quis mi.
+          Praesent nec dapibus odio. Aliquam dignissim nisi nisi, pharetra
+          faucibus elit rhoncus in. Donec efficitur scelerisque urna et
+          sollicitudin. Donec euismod enim a dui convallis, quis suscipit leo
+          vestibulum. Duis aliquam euismod enim, sit amet lobortis ante
+          porttitor. Donec efficitur scelerisque urna et sollicitudin. Duis
+          aliquam euismod enim, sit amet.
         </Text>
-        <Text className="big-paragraph">
-          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
-          erat, imperdiet eu fermentum sed, egestas quis mi. Praesent nec
-          dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
-          rhoncus in. Donec efficitur scelerisque urna et sollicitudin. Donec
-          efficitur scelerisque urna et sollicitudin.
+        <Text variant="card">
+          Text paragraph card sem enim, tempus nec massa id, mollis faucibus
+          sem. Ut ipsum erat, imperdiet eu fermentum sed, egestas quis mi.
+          Praesent nec dapibus odio. Aliquam dignissim nisi nisi, pharetra
+          faucibus elit rhoncus in. Donec efficitur scelerisque urna et
+          sollicitudin. Donec efficitur scelerisque urna et sollicitudin.
         </Text>
         <Text as="div" className="big-paragraph">
           <ul>

diff --git a/app/globals.css b/app/globals.css
@@ -2,19 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer utilities {
-  .timeline-grid {
-    display: grid;
-    grid-template-areas:
-      'item item item'
-      'detail detail detail';
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  .timeline-detail {
-    grid-area: 'detail';
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 500;
   }
+}
 
+@layer utilities {
   .font-inherit {
     font: inherit;
     font-size: inherit;

diff --git a/components/Typography/Heading.tsx b/components/Typography/Heading.tsx
@@ -12,7 +12,7 @@ type HeadingProps = Omit<TypographyProps, "as"> &
 // Convenience component for paragraphs
 export const Heading = ({
   as = "h2",
-  weight = "bold",
+  weight = "medium",
   className,
   isInvertLinkStyle = false,
   ...rest

diff --git a/components/Typography/Text.tsx b/components/Typography/Text.tsx
@@ -75,7 +75,6 @@ export const Text = ({
         srOnly ? "sr-only" : "",
         uppercase ? "uppercase" : "",
         useDefaultTracking ? "tracking-normal" : "",
-        font === "serif" ? "tracking-normal sm:tracking-wide" : "",
         className,
       )}
     >

diff --git a/components/Typography/typography.styles.ts b/components/Typography/typography.styles.ts
@@ -1,15 +1,15 @@
 export const fontFamilies = {
   sans: "font-sans",
   serif: "font-serif",
-  "dm-sans": "font-dm-sans",
-  "dm-mono": "font-dm-mono",
+  "dm-sans": "font-dm-sans tracking-tight",
+  "dm-mono": "font-dm-mono tracking-[0.3em]",
 };
 
 export const fontWeights = {
   normal: "font-normal",
+  medium: "font-medium",
   semibold: "font-semibold",
   bold: "font-bold",
-  black: "font-black", // 900, needed for Druk font
 };
 
 // Modular typography - already includes responsive font sizes
@@ -74,12 +74,12 @@ export const textVariants = {
   /**
    * Decanter typography styles
    */
-  big: "big-paragraph",
   subheading: "subheading",
   /**
    * Centennial typography styles
    * (cen- ones are Decanter styles with Centennial modifications)
    */
+  big: "cen-big-paragraph",
   caption: "cen-caption",
   card: "card",
   changemaker: "text-18 sm:text-15 3xl:text-16 leading-snug 3xl:leading-cozy",