🎨 apply default text color in comp not in variants

Author: BorghildSelle

web/core/Typography/Typography.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { forwardRef, ElementType, HTMLAttributes, AnchorHTMLAttributes } from 'react'
-import { TypographyGroups, TypographyVariants, quickVariants, variants } from './variants'
-import { OverridableComponent } from '@equinor/eds-utils'
+
+import type { OverridableComponent } from '@equinor/eds-utils'
+import { type AnchorHTMLAttributes, type ElementType, forwardRef, type HTMLAttributes } from 'react'
 import envisTwMerge from '../../twMerge'
+import { quickVariants, type TypographyGroups, type TypographyVariants, variants } from './variants'
 
 const getElementType = (variant: string, link: boolean): ElementType => {
   if (link) {
@@ -25,12 +26,12 @@ const getElementType = (variant: string, link: boolean): ElementType => {
 
 const findTypography = (variantName: TypographyVariants, group?: TypographyGroups): string => {
   // For quick use when using paragraphs and headings we can skip group
-  //@ts-ignore
+  //@ts-expect-error
   if (!group && quickVariants[variantName]) {
-    //@ts-ignore
+    //@ts-expect-error
     return quickVariants[variantName] as string
   }
-  //@ts-ignores
+  //@ts-expect-errors
   return (variants[group] as unknown)[variantName] as string
 }
 
@@ -79,7 +80,11 @@ export const Typography: OverridableComponent<TypographyProps, HTMLElement> = fo
   const TypographyTag = as ?? (`p` as React.ElementType)
 
   return (
-    <TypographyTag {...rest} ref={ref} className={envisTwMerge(typography, className)}>
+    <TypographyTag
+      {...rest}
+      ref={ref}
+      className={envisTwMerge('text-slate-80 dark:text-white-100', typography, className)}
+    >
       {children}
     </TypographyTag>
   )

web/core/Typography/variants.ts

@@ -1,24 +1,23 @@
 const variants = {
   heading: {
-    h1: 'text-slate-80 dark:text-white-100 text-3xl leading-earthy font-normal pb-11 my-0',
-    h2: 'text-slate-80 dark:text-white-100 text-2xl leading-cloudy font-normal pb-8 my-0',
-    h3: 'text-slate-80 dark:text-white-100 text-xl leading-inherit font-normal pb-0 my-0',
-    h4: 'text-slate-80 dark:text-white-100 text-lg leading-inherit font-normal pb-0',
-    h5: 'text-slate-80 dark:text-white-100 text-md leading-inherit font-normal pb-0',
-    h6: 'text-slate-80 dark:text-white-100 text-base leading-inherit font-normal pb-0',
-    h7: 'text-slate-80 dark:text-white-100 text-xs leading-earthy font-normal pb-0',
-    xs: 'text-slate-80 dark:text-white-100 text-xs leading-earthy font-normal',
-    sm: 'text-slate-80 dark:text-white-100 text-sm leading-inherit font-normal',
-    base: 'text-slate-80 dark:text-white-100 text-base leading-inherit font-normal',
-    md: 'text-slate-80 dark:text-white-100 text-md leading-inherit font-normal',
-    lg: 'text-slate-80 dark:text-white-100 text-lg leading-inherit font-normal',
-    xl: 'text-slate-80 dark:text-white-100 text-xl leading-inherit font-normal',
-    '2xl': 'text-slate-80 dark:text-white-100 text-2xl leading-cloudy font-normal',
-    '3xl': 'text-slate-80 dark:text-white-100 text-3xl leading-earthy font-normal',
-    '4xl': 'text-slate-80 dark:text-white-100 text-4xl leading-cloudy font-normal',
-    '5xl': 'text-slate-80 dark:text-white-100 text-5xl leading-cloudy font-normal',
-    '8xl':
-      'text-slate-80 dark:text-white-100 text-5xl lg:text-6xl 2xl:text-8xl leading-cloudy lg:leading-cloudy 2xl:leading-cloudy font-normal',
+    h1: ' text-3xl leading-earthy font-normal pb-11 my-0',
+    h2: ' text-2xl leading-cloudy font-normal pb-8 my-0',
+    h3: ' text-xl leading-inherit font-normal pb-0 my-0',
+    h4: ' text-lg leading-inherit font-normal pb-0',
+    h5: ' text-md leading-inherit font-normal pb-0',
+    h6: ' text-base leading-inherit font-normal pb-0',
+    h7: ' text-xs leading-earthy font-normal pb-0',
+    xs: ' text-xs leading-earthy font-normal',
+    sm: ' text-sm leading-inherit font-normal',
+    base: ' text-base leading-inherit font-normal',
+    md: ' text-md leading-inherit font-normal',
+    lg: ' text-lg leading-inherit font-normal',
+    xl: ' text-xl leading-inherit font-normal',
+    '2xl': ' text-2xl leading-cloudy font-normal',
+    '3xl': ' text-3xl leading-earthy font-normal',
+    '4xl': ' text-4xl leading-cloudy font-normal',
+    '5xl': ' text-5xl leading-cloudy font-normal',
+    '8xl': ' text-5xl lg:text-6xl 2xl:text-8xl leading-cloudy lg:leading-cloudy 2xl:leading-cloudy font-normal',
   },
   display: {
     h1_base: 'text-4xl leading-tight tracking-[var(--tracking-display)] pb-6 lg:pb-12',
@@ -31,8 +30,8 @@ const variants = {
   paragraph: {
     ingress: '',
     caption: '',
-    overline: 'text-md text-slate-80 dark:text-white-100',
-    body: 'text-base font-normal text-slate-80 dark:text-white-100',
+    overline: 'text-md ',
+    body: 'text-base font-normal ',
   },
   plain: {
     div: '',