feat(tailwind)!: remove fontSize config from tailwind.config.ts

- remove exported config - remove usages of 'text-h1' in Slider stories
chanzuckerberg · Mar 4, 2024 · 39fd73b · 39fd73b
1 parent 3b3d5e7
commit 39fd73b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 29 deletions.
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
@@ -295,15 +295,15 @@ export const WithHighlightedContent: Story = {
             onChange={({ target }) => setSliderValue(Number(target.value))}
             value={sliderValue}
           />
-          <div className="text-h1">
+          <Text as="span" preset="body-xl">
             {moodData.map((mood, index) => {
               return (
                 sliderValue === mood.value && (
                   <span key={`mood-emoji-${mood.emoji}`}>{mood.emoji}</span>
                 )
               );
             })}
-          </div>
+          </Text>
         </div>
         <Text className="py-3 text-center" id="mood-description">
           Current mood:{' '}
@@ -340,15 +340,15 @@ export const WithVisualLabel: Story = {
             id="slider-label"
             text="Mood Slider"
           />
-          <div className="w-1/2 py-4 text-center text-h1">
+          <Text as="span" className="w-1/2 py-4 text-center" preset="body-xl">
             {moodData.map((mood) => {
               return (
                 sliderValue === mood.value && (
                   <span key={`mood-emoji-${mood.emoji}`}>{mood.emoji}</span>
                 )
               );
             })}
-          </div>
+          </Text>
           <Slider
             aria-label="Mood Slider"
             aria-labelledby="slider-label"
@@ -383,7 +383,11 @@ export const WithMultipleVisualLabels: Story = {
             id="slider-label"
             text="Mood Slider"
           />
-          <div className="flex w-1/2 justify-between py-4 text-center text-h1">
+          <Text
+            as="span"
+            className="flex w-1/2 justify-between py-4 text-center"
+            preset="body-xl"
+          >
             {moodData.map((mood, index) => {
               return (
                 <div
@@ -398,7 +402,7 @@ export const WithMultipleVisualLabels: Story = {
                 </div>
               );
             })}
-          </div>
+          </Text>
           <Slider
             aria-label="Mood Slider"
             aria-labelledby="slider-label"

diff --git a/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -570,13 +570,13 @@ exports[`<Slider /> WithHighlightedContent story renders snapshot 1`] = `
           class="slider__thumb-proxy"
         />
       </div>
-      <div
-        class="text-h1"
+      <span
+        class="text text--body-xl"
       >
         <span>
           😐
         </span>
-      </div>
+      </span>
     </div>
     <p
       class="text text--body-md py-3 text-center"
@@ -609,8 +609,8 @@ exports[`<Slider /> WithMultipleVisualLabels story renders snapshot 1`] = `
         Mood Slider
          
       </label>
-      <div
-        class="flex w-1/2 justify-between py-4 text-center text-h1"
+      <span
+        class="text text--body-xl flex w-1/2 justify-between py-4 text-center"
       >
         <div
           class=""
@@ -637,7 +637,7 @@ exports[`<Slider /> WithMultipleVisualLabels story renders snapshot 1`] = `
         >
           😍
         </div>
-      </div>
+      </span>
       <div
         class="slider w-1/2"
       >
@@ -707,13 +707,13 @@ exports[`<Slider /> WithVisualLabel story renders snapshot 1`] = `
         Mood Slider
          
       </label>
-      <div
-        class="w-1/2 py-4 text-center text-h1"
+      <span
+        class="text text--body-xl w-1/2 py-4 text-center"
       >
         <span>
           😐
         </span>
-      </div>
+      </span>
       <div
         class="slider w-1/2"
       >

diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
@@ -2,6 +2,7 @@ import { Switch } from '@headlessui/react';
 import clsx from 'clsx';
 import React from 'react';
 import type { EitherInclusive, ExtractProps } from '../../util/utility-types';
+
 import styles from './Toggle.module.css';
 
 type ToggleLabelProps = {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -34,20 +34,6 @@ export default {
         ...textColorTokens,
       },
     },
-    fontSize: {
-      // provide values for both font-size and line-height
-      body: [edsTokens['font-size']['16'], '1.5'],
-      h1: [edsTokens['font-size']['40'], '1.2'],
-      h2: [edsTokens['font-size']['32'], '1.25'],
-      h3: [edsTokens['font-size']['24'], '1.333'],
-      h4: [edsTokens['font-size']['18'], '1.333'],
-      h5: [edsTokens['font-size']['16'], '1.5'],
-      h6: [edsTokens['font-size']['14'], '1.57'],
-      h7: [edsTokens['font-size']['12'], '1.666'],
-      sm: [edsTokens['font-size']['14'], '1.57'],
-      xs: [edsTokens['font-size']['12'], '1.666'],
-      caption: [edsTokens['font-size']['12'], '1.666'],
-    },
     fontWeight: {
       normal: edsTokens['font-weight'].light,
       medium: edsTokens['font-weight'].medium,