Merge pull request #13 from EAVFW/kba/theme-styling

Kba/theme styling
EAVFW · Apr 11, 2024 · f99eb99 · f99eb99
2 parents cfc2c22 + 121c11e
commit f99eb99
Show file tree

Hide file tree

Showing 42 changed files with 963 additions and 734 deletions.
diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
@@ -1,10 +1,7 @@
-"use client"
-import "../style/QuickForm.css";
+"use client";
 import React from "react";
 import { useQuickForm } from "../state/QuickFormContext";
-import { Ending, Submit } from "./index";
-import { Intro } from "./intro/Intro";
-import { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
+import { Ending, Submit, Intro, SlideRenderer } from "./index";
 
 export const QuickForm: React.FC = () => {
     const { state, setIntroVisited } = useQuickForm();

diff --git a/packages/core/src/components/button/Button.module.css b/packages/core/src/components/button/Button.module.css
diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
@@ -1,13 +1,12 @@
 "use client";
 import React, { PropsWithChildren } from "react";
-import { MouseEventHandler, ReactNode, useEffect, useState } from "react";
-import { quickformtokens } from "../../style/quickformtokens";
+import { MouseEventHandler, useEffect, useState } from "react";
+import { quickformtokens } from "../../style/quickFormTokensDefinition";
 import { makeStyles, shorthands } from "@griffel/react";
 
 type BtnContainerProps = {
     readonly className?: string;
     readonly style?: React.CSSProperties;
-
     readonly disabled?: boolean;
     readonly showPressEnter?: boolean;
     readonly onClick?: MouseEventHandler;
@@ -18,28 +17,26 @@ const useButtonStyles = makeStyles({
     container: {
         display: 'flex',
         alignItems: 'center',
-        ...shorthands.gap( '12.5px'),
-
+        ...shorthands.gap(quickformtokens.gap1),
         marginTop: '30px',
     },
     button: {
-        color: quickformtokens.onSurface,
+        color: quickformtokens.onPrimary,
         backgroundColor: quickformtokens.primary,
-        ...shorthands.border('thin','solid',quickformtokens.primary),
+        ...shorthands.border('thin', 'solid', quickformtokens.primary),
         ...shorthands.borderRadius('8px'),
         cursor: 'pointer',
-        fontSize: '2rem',
-        fontWeight: 700,
+        fontSize: quickformtokens.btnFontSize,
+        fontWeight: quickformtokens.btnFontWeight,
         ...shorthands.padding('10px', '14px'),
         ':hover': {
-            color: quickformtokens.white,
+            color: quickformtokens.onPrimary,
             backgroundColor: quickformtokens.primaryLighter
         }
     }
 })
 
-export const Button: React.FC<PropsWithChildren< BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style }) => {
-
+export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style }) => {
 
     if (typeof visible !== "undefined" && visible === false) {
         return (<></>);
@@ -69,28 +66,16 @@ export const Button: React.FC<PropsWithChildren< BtnContainerProps>> = ({ childr
                 disabled={disabled}
                 type="button"
                 onClick={onClick}
-               
+
             >
                 {children}
 
             </button>
             {!disabled && !isOnMobile && showPressEnter && (
-                <span style={spanStyle}>
-                    <>Tryk <strong style={strongStyle}>Enter ↵</strong></>
+                <span style={{ color: quickformtokens.onPrimary, fontSize: quickformtokens.btnEnterKeyTextFontSize }}>
+                    <>Tryk <strong style={{ fontWeight: 'bolder', letterSpacing: '0.04em', }}>Enter ↵</strong></>
                 </span>
             )}
         </div>
     );
-}
-
-
-const spanStyle = {
-    color: quickformtokens.onSurface,
-    fontSize: '1.25rem',
-};
-
-const strongStyle = {
-    fontWeight: 'bolder',
-    letterSpacing: '0.04em',
-};
-
+}
diff --git a/packages/core/src/components/container/QuickFormContainer.tsx b/packages/core/src/components/container/QuickFormContainer.tsx
@@ -1,12 +1,10 @@
-"use client"
-
-import { makeStaticStyles, makeStyles, mergeClasses, shorthands } from "@griffel/react"
+"use client";
+import { makeStyles, shorthands } from "@griffel/react"
 import { CSSProperties, PropsWithChildren } from "react";
-import { quickformtokens } from "../../style/quickformtokens";
+import { quickformtokens } from "../../style/quickFormTokensDefinition";
 
 const useQuickFormContainerStyles = makeStyles({
     root: {
-
         maxWidth: '72rem',
         width: '100%',
         '@media screen and (max-width: 599px)': { ...shorthands.padding(0, quickformtokens.gap4) },
@@ -17,10 +15,10 @@ const useQuickFormContainerStyles = makeStyles({
 export const QuickFormContainer: React.FC<PropsWithChildren<{ style?: CSSProperties }>> = ({ children, style }) => {
 
     const styles = useQuickFormContainerStyles();
-    
+
     return (
-        <div className={styles.root} style = { style } >
-            {children }
+        <div className={styles.root} style={style} >
+            {children}
         </div>
     )
 }
diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
@@ -4,6 +4,7 @@ import { Heading, Paragraph } from "../index";
 import { ErrorIcon, Checkmark } from "../icons/index";
 import { useQuickForm } from "../../state/QuickFormContext";
 import { EndingModel } from "../../model";
+import { quickformtokens } from "../../style/quickFormTokensDefinition";
 
 type EndingProps = {
     model: EndingModel;
@@ -24,13 +25,13 @@ export const Ending: React.FC<EndingProps> = ({ model }) => {
         <div style={endingStyles}>
             {submitStatus.isSubmitError &&
                 <>
-                    <ErrorIcon color={'var(--on-surface)'} />
+                    <ErrorIcon color={quickformtokens.onSurface} />
                     <Heading>Der skete en fejl, prøv igen</Heading>
                 </>
             }
             {submitStatus.isSubmitSuccess &&
                 <>
-                    <Checkmark color={'var(--on-surface)'} />
+                    <Checkmark color={quickformtokens.onSurface} />
                     {text &&
                         <Heading style={{ marginTop: '10px' }}>
                             {text}

diff --git a/packages/core/src/components/error-message/ErrorMessage.tsx b/packages/core/src/components/error-message/ErrorMessage.tsx
@@ -11,8 +11,8 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
         color: 'red',
         textDecoration: 'underline',
         marginTop: '4px',
-        fontSize: '0.875rem',
-        fontWeight: 'normal',
+        fontSize: '1rem',
+        fontWeight: 'bold',
     };
 
     return (

diff --git a/packages/core/src/components/error-popup/ErrorPopup.tsx b/packages/core/src/components/error-popup/ErrorPopup.tsx
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { useDelayedClickListener } from "../../hooks";
 import { useQuickForm } from "../../state/QuickFormContext";
-import { quickformtokens } from '../../style/quickformtokens';
+import { quickformtokens } from '../../style/quickFormTokensDefinition';
 
 type ErrorPopupProps = {
     readonly message: string;
@@ -25,7 +25,7 @@ export const ErrorPopup: React.FC<ErrorPopupProps> = ({ message }: ErrorPopupPro
     //    }
     //}
 
-   // useDelayedClickListener(resetErrorMessage);
+    // useDelayedClickListener(resetErrorMessage);
 
     useEffect(() => {
         if (message) {
@@ -41,7 +41,7 @@ export const ErrorPopup: React.FC<ErrorPopupProps> = ({ message }: ErrorPopupPro
     const errorStyle: React.CSSProperties = {
         alignItems: 'flex-end',
         animation: isVisible ? 'slide-up 0.35s linear 1 forwards' : '',
-        backgroundColor: 'var(--surface)',
+        backgroundColor: quickformtokens.error,
         borderRadius: '3px',
         color: quickformtokens.onError,
         display: 'flex',

diff --git a/packages/core/src/components/heading/Heading.module.css b/packages/core/src/components/heading/Heading.module.css
diff --git a/packages/core/src/components/heading/Heading.tsx b/packages/core/src/components/heading/Heading.tsx
@@ -1,10 +1,8 @@
-import { HeadingNumberDisplayProvider, registerQuickFormService, resolveQuickFormService } from "../../services/QuickFormServices";
-import { useQuickForm } from "../../state/QuickFormContext";
+import React, { ReactNode } from "react";
 import { ImArrowRightIcon } from "../../components/icons";
-import React from "react";
-import { ReactNode } from "react";
-import { quickformtokens } from "../../style/quickformtokens";
-
+import { useQuickForm } from "../../state/QuickFormContext";
+import { quickformtokens } from "../../style/quickFormTokensDefinition";
+import { HeadingNumberDisplayProvider, registerQuickFormService, resolveQuickFormService } from "../../services/QuickFormServices";
 
 type HeadingProps = {
     readonly children: ReactNode;
@@ -18,17 +16,17 @@ export const Heading: React.FC<HeadingProps> = ({ children, label, style = {} }:
     const shouldDisplayNumber = resolveQuickFormService("headingNumberDisplayProvider")();
 
     const headingStyles: React.CSSProperties = {
-        fontSize: quickformtokens.questionTextFontSize, //'1.5rem',
-        fontWeight: 'unset',
-        color: 'var(--on-surface)',
+        fontSize: quickformtokens.headlineFontSize,
+        fontWeight: 'bold',
+        color: quickformtokens.onSurface,
         position: "relative"
     }
 
     return (
         <h1 style={{ ...style, ...headingStyles }}>
             {shouldDisplayNumber && <span style={{ //TODO - if mobile left 0, top:-2.4rem,justifycontext start
                 display: 'inline-flex', alignItems: 'center', gap: quickformtokens.gap1, position: "absolute", width: "100px", left: "-100px", justifyContent: "end",
-                fontSize: quickformtokens.questionQuestionNumberFontSiez,
+                fontSize: quickformtokens.questionNumberFontSize,
                 height: "100%",
                 paddingRight: quickformtokens.gap2
             }}>

diff --git a/packages/core/src/components/icons/ImArrowRightIcon.tsx b/packages/core/src/components/icons/ImArrowRightIcon.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { IconProps } from "./iconProps";
-import { quickformtokens } from "../../style/quickformtokens";
+import { quickformtokens } from "../../style/quickFormTokensDefinition";
 
 export const ImArrowRightIcon: React.FC<IconProps> = ({ size = '20px' }) => {
     return (

diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
@@ -13,5 +13,7 @@ export { Slide } from "./slide/Slide";
 export { Submit } from "./submit/Submit";
 export { QuickForm } from "./QuickForm";
 export { Spinner } from "./spinner/Spinner";
+export { Intro } from "./intro/Intro";
 export { QuickFormContainer } from "./container/QuickFormContainer";
+export { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
 import "./question/input-types";