chore(): add globals for em font size

entur · Apr 30, 2024 · a6c4d47 · a6c4d47
1 parent ed9bd53
commit a6c4d47
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 14 deletions.
diff --git a/next-tavla/src/Board/scenarios/Board/utils.ts b/next-tavla/src/Board/scenarios/Board/utils.ts
@@ -3,13 +3,13 @@ import { TBoard } from 'types/settings'
 export function getFontScale(fontSize: TFontSize | undefined) {
     switch (fontSize) {
         case 'small':
-            return 'text-sm'
+            return 'em-text-sm'
         case 'medium':
-            return 'text-base'
+            return 'em-text-base'
         case 'large':
-            return 'text-lg'
+            return 'em-text-lg'
         default:
-            return 'text-base'
+            return 'em-text-base'
     }
 }
 export function defaultFontSize(board: TBoard) {

diff --git a/next-tavla/src/Board/scenarios/Table/components/TableColumn/index.tsx b/next-tavla/src/Board/scenarios/Table/components/TableColumn/index.tsx
@@ -9,7 +9,9 @@ function TableColumn({
 }) {
     return (
         <div className={`flex flex-col ${className}`}>
-            <div className="text-tertiary text-sm pb-2 ml-2 mr-2">{title}</div>
+            <div className="text-tertiary em-text-sm pb-2 ml-2 mr-2">
+                {title}
+            </div>
             {children}
         </div>
     )

diff --git a/next-tavla/src/Board/scenarios/Table/components/Time/ExpectedTime.tsx b/next-tavla/src/Board/scenarios/Table/components/Time/ExpectedTime.tsx
@@ -45,7 +45,7 @@ function Time({
                 <div className="text-right font-semibold text-estimated-time text-[0.75em]">
                     Innstilt
                 </div>
-                <div className="text-right text-xs line-through">
+                <div className="text-right em-text-xs line-through">
                     {formatDateString(aimedDepartureTime)}
                 </div>
             </>
@@ -62,7 +62,7 @@ function Time({
                 <div className="text-right font-semibold text-estimated-time">
                     {getRelativeTimeString(expectedDepartureTime)}
                 </div>
-                <div className="text-right text-xs line-through">
+                <div className="text-right em-text-xs line-through">
                     {formatDateString(aimedDepartureTime)}
                 </div>
             </>

diff --git a/next-tavla/src/Board/scenarios/Table/components/Time/components/FormattedTime.tsx b/next-tavla/src/Board/scenarios/Table/components/Time/components/FormattedTime.tsx
@@ -7,7 +7,7 @@ function FormattedTime({ time }: { time: string }) {
                 {getRelativeTimeString(time)}
             </div>
             {!isDateStringToday(time) && (
-                <div className="text-right text-xs">{getDate(time)}</div>
+                <div className="text-right em-text-xs">{getDate(time)}</div>
             )}
         </>
     )

diff --git a/next-tavla/tailwind.config.ts b/next-tavla/tailwind.config.ts
@@ -26,12 +26,6 @@ module.exports = {
         container: {
             padding: '2rem',
         },
-        fontSize: {
-            xs: '0.5625em',
-            sm: '0.7em',
-            base: '1em',
-            lg: '1.3em',
-        },
         extend: {
             colors: {
                 'base-primary': 'var(--main-background-color)',
@@ -50,6 +44,12 @@ module.exports = {
             borderRadius: {
                 DEFAULT: '0.5em',
             },
+            fontSize: {
+                'em-text-xs': '0.5625em',
+                'em-text-sm': '0.7em',
+                'em-text-base': '1em',
+                'em-text-lg': '1.3em',
+            },
         },
     },
     safelist: Object.keys(transportModes).map((key) => `bg-${key}`),