fix(tailwind): new typography config for tailwind

[masoudmanson]

BREAKING CHANGE: Tailwind variable names have been updated, requiring refactoring to align with the new names in product teams. More info on this can be found in the ZeroHeight docs under Tailwind configuration.

Summary

Tailwind
Github issue: #913

The current design token definitions exported for Tailwind using Style Dictionary are incorrect. We need to ensure that the generated tailwind.json file adheres to the correct format and aligns with Tailwind’s configuration standards.

The new typography variables are defined in the sds tailwind.json file like so:

{
  "typography": {
    "sds-body-xxxs-400-narrow": {
      "css": {
        "fontFamily": "Inter, sans-serif",
        "fontSize": "12px",
        "fontStyle": "normal",
        "fontVariantNumeric": "normal",
        "fontWeight": "400",
        "letterSpacing": "0.1px",
        "lineHeight": "18px",
        "textTransform": "none"
      }
    }, 
    ...
  }
}

To include these typography variables in your Tailwind setup, you can import them from the sds tailwind.json file and feed them into the extend section of your tailwind.config.js file:

const sds = require("@czi-sds/components/dist/tailwind.json");
const typography = require('@tailwindcss/typography');

module.exports = {
  theme: {
    extend: {
      typography: sds.typography, // Add the imported typography variables
    },
  },
  plugins: [typography], // Ensure the typography plugin is included
};

Once the typography configuration is set up, you can apply the custom typography style in your HTML using the prose class along with the specific typography variant:

<div class="prose prose-sds-body-xxxs-400-narrow">
  <p>This text uses the custom typography style for narrow body text.</p>
</div>

Checklist

• Default Story in Storybook
• LivePreview Story in Storybook
• Test Story in Storybook
• Tests written
• Variables from defaultTheme.ts used wherever possible
• If updating an existing component, depreciate flag has been used where necessary
• Chromatic build verified by @chanzuckerberg/sds-design

[tihuan]

LGTM!! Let's gooo! 🚀 😆

[codemonkey800]

🔥 🔥 🔥