chore: updated typography components to use semantic tokens

.eslintrc.json

@@ -15,8 +15,9 @@
     "es6": true
   },
   "rules": {
-    "quotes": ["error", "single"] // you can remove if you want
+    "quotes": ["error", "single"], // you can remove if you want
     // Add your custom rules here
+    "@typescript-eslint/ban-ts-comment": "off"
   },
   "settings": {
     "react": {

.storybook/main.ts

@@ -5,12 +5,14 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
-    'storybook-tailwind-dark-mode',
     {
       name: '@storybook/addon-styling',
-      options: {},
+      options: {
+        postCss: {
+          implementation: require.resolve('postcss'),
+        },
+      },
     },
   ],
   framework: {

.storybook/preview-head.html

@@ -0,0 +1,13 @@
+<!-- ./storybook/preview-head.html -->
+<link href="/tailwind.css" rel="stylesheet" />
+
+<!-- Temporary fix for 7.0 beta -->
+<style>
+  html {
+    background-color: var(--semantic-color-background-primary-base);
+  }
+
+  html.dark .docs-story {
+    background-color: var(--semantic-color-background-primary-base);
+  }
+</style>

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,10 +1,10 @@
+import React, { useEffect } from 'react'
 import type { Preview } from '@storybook/react'
-
 import { withThemeByClassName } from '@storybook/addon-styling'
 
-/* TODO: update import to your tailwind styles file. If you're using Angular, inject this through your angular.json config instead */
 import '../src/styles.scss'
 import '../quill-tailwind/styles.css'
+import '../quill-tailwind/fonts.css'
 
 const preview: Preview = {
   parameters: {
@@ -27,6 +27,26 @@ const preview: Preview = {
       },
       defaultTheme: 'light',
     }),
+    (Story, context) => {
+      const { theme } = context.globals
+
+      useEffect(() => {
+        const htmlTag = document.documentElement
+
+        // Set the "data-mode" attribute on the iFrame html tag
+        if (theme === 'dark') {
+          htmlTag.classList.add('dark')
+        } else {
+          htmlTag.classList.remove('dark')
+        }
+      }, [theme])
+
+      return (
+        <div className="dark:bg-slate-800 ">
+          <Story />
+        </div>
+      )
+    },
   ],
 }
 

.vscode/settings.json

@@ -15,5 +15,6 @@
     [".toHaveClass\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
     [".toHaveExactClasses\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
 }

__snapshots__/components/typography/text/text.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text Should display content with default classnames 1`] = `
+<div>
+  <p
+    class="font-ibmPlex-sans text-semantic-typography-prominent text-semantic-body-md space-y-semantic-paragraphSpacing-body-md leading-semantic-body-md font-core-regular"
+  >
+    Text content
+  </p>
+</div>
+`;
+
+exports[`Text Should have correct classnames with size xl 1`] = `
+<div>
+  <p
+    class="font-ibmPlex-sans text-semantic-typography-prominent text-semantic-body-xl space-y-semantic-paragraphSpacing-body-xl leading-semantic-body-xl font-core-regular"
+  >
+    Text content
+  </p>
+</div>
+`;
+
+exports[`Text Should have correct classnames with size xl and type underline 1`] = `
+<div>
+  <p
+    class="font-ibmPlex-sans text-semantic-typography-prominent text-semantic-body-xl space-y-semantic-paragraphSpacing-body-xl leading-semantic-body-xl font-core-regular underline"
+  >
+    Text content
+  </p>
+</div>
+`;

__snapshots__/components/typography/typography.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Heading Should render Hero Heading with h1 1`] = `
 <div>
   <h1
-    class="font-ubuntu text-core-900 font-core-bold leading-core-auto space-y-core-paragraphSpacing-900 text-core-solid-slate-1400"
+    class="font-ubuntu text-semantic-heading-hero font-core-bold leading-semantic-heading-hero space-y-semantic-paragraphSpacing-heading-hero text-semantic-typography-prominent"
   >
     Hero heading
   </h1>
@@ -13,7 +13,7 @@ exports[`Heading Should render Hero Heading with h1 1`] = `
 exports[`Heading Should render h1 Heading with h1 1`] = `
 <div>
   <h1
-    class="font-ubuntu text-core-800 font-core-bold leading-core-auto space-y-core-paragraphSpacing-800 text-core-solid-slate-1400"
+    class="font-ubuntu text-semantic-heading-h1 font-core-bold leading-semantic-heading-h1 space-y-semantic-paragraphSpacing-heading-h1 text-semantic-typography-prominent"
   >
     h1 heading
   </h1>
@@ -23,7 +23,7 @@ exports[`Heading Should render h1 Heading with h1 1`] = `
 exports[`Heading Should render h2 Heading with h2 1`] = `
 <div>
   <h2
-    class="font-ubuntu text-core-700 font-core-bold leading-core-auto space-y-core-paragraphSpacing-700 text-core-solid-slate-1400"
+    class="font-ubuntu text-semantic-heading-h2 font-core-bold leading-semantic-heading-h2 space-y-semantic-paragraphSpacing-heading-h2 text-semantic-typography-prominent"
   >
     h2 heading
   </h2>
@@ -33,7 +33,7 @@ exports[`Heading Should render h2 Heading with h2 1`] = `
 exports[`Heading Should render h3 Heading with h3 1`] = `
 <div>
   <h3
-    class="font-ubuntu text-core-500 font-core-bold leading-core-auto space-y-core-paragraphSpacing-500 text-core-solid-slate-1400"
+    class="font-ubuntu text-semantic-heading-h3 font-core-bold leading-semantic-heading-h3 space-y-semantic-paragraphSpacing-heading-h3 text-semantic-typography-prominent"
   >
     h3 heading
   </h3>
@@ -43,7 +43,7 @@ exports[`Heading Should render h3 Heading with h3 1`] = `
 exports[`Heading Should render h4 Heading with h4 1`] = `
 <div>
   <h4
-    class="font-ubuntu text-core-400 font-core-bold leading-core-auto space-y-core-paragraphSpacing-400 text-core-solid-slate-1400"
+    class="font-ubuntu text-semantic-heading-h4 font-core-bold leading-semantic-heading-h4 space-y-semantic-paragraphSpacing-heading-h4 text-semantic-typography-prominent"
   >
     h4 heading
   </h4>
@@ -53,7 +53,7 @@ exports[`Heading Should render h4 Heading with h4 1`] = `
 exports[`Heading Should render h5 Heading with h5 1`] = `
 <div>
   <h5
-    class="font-ubuntu text-core-300 font-core-bold leading-core-auto space-y-core-paragraphSpacing-300 text-core-solid-slate-1400"
+    class="font-ubuntu text-semantic-heading-h5 font-core-bold leading-semantic-heading-h5 space-y-semantic-paragraphSpacing-heading-h5 text-semantic-typography-prominent"
   >
     h5 heading
   </h5>
@@ -63,7 +63,7 @@ exports[`Heading Should render h5 Heading with h5 1`] = `
 exports[`Heading Should render h6 Heading with h6 1`] = `
 <div>
   <h6
-    class="font-ubuntu text-core-100 font-core-bold leading-core-auto space-y-core-paragraphSpacing-100 text-core-solid-slate-1400"
+    class="font-ubuntu text-semantic-heading-h6 font-core-bold leading-semantic-heading-h6 space-y-semantic-paragraphSpacing-heading-h6 text-semantic-typography-prominent"
   >
     h6 heading
   </h6>
@@ -73,7 +73,7 @@ exports[`Heading Should render h6 Heading with h6 1`] = `
 exports[`Heading Should render h7 Heading with h7 1`] = `
 <div>
   <h6
-    class="font-ubuntu text-core-75 font-core-bold leading-core-auto space-y-core-paragraphSpacing-75 text-core-solid-slate-1400"
+    class="font-ubuntu text-semantic-heading-h7 font-core-bold leading-semantic-heading-h7 space-y-semantic-paragraphSpacing-heading-h7 text-semantic-typography-prominent"
   >
     h7 heading
   </h6>
@@ -83,7 +83,7 @@ exports[`Heading Should render h7 Heading with h7 1`] = `
 exports[`Text Should display correct content 1`] = `
 <div>
   <p
-    class="font-ibmPlex-sans text-core-100 space-y-100 leading-core-300 font-core-regular"
+    class="font-ibmPlex-sans text-semantic-typography-prominent text-semantic-body-md space-y-semantic-paragraphSpacing-body-md leading-semantic-body-md font-core-regular"
   >
     Text content
   </p>