Skip to content

Commit f99eb99

Browse files
KasperBaunKasperBaun
authored
Merge pull request #13 from EAVFW/kba/theme-styling
Kba/theme styling
2 parents cfc2c22 + 121c11e commit f99eb99

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+963
-734
lines changed

‎packages/core/src/components/QuickForm.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
"use client"
2-
import "../style/QuickForm.css";
1+
"use client";
32
import React from "react";
43
import { useQuickForm } from "../state/QuickFormContext";
5-
import { Ending, Submit } from "./index";
6-
import { Intro } from "./intro/Intro";
7-
import { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
4+
import { Ending, Submit, Intro, SlideRenderer } from "./index";
85

96
export const QuickForm: React.FC = () => {
107
const { state, setIntroVisited } = useQuickForm();

‎packages/core/src/components/button/Button.module.css

Lines changed: 0 additions & 105 deletions
This file was deleted.

‎packages/core/src/components/button/Button.tsx

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
"use client";
22
import React, { PropsWithChildren } from "react";
3-
import { MouseEventHandler, ReactNode, useEffect, useState } from "react";
4-
import { quickformtokens } from "../../style/quickformtokens";
3+
import { MouseEventHandler, useEffect, useState } from "react";
4+
import { quickformtokens } from "../../style/quickFormTokensDefinition";
55
import { makeStyles, shorthands } from "@griffel/react";
66

77
type BtnContainerProps = {
88
readonly className?: string;
99
readonly style?: React.CSSProperties;
10-
1110
readonly disabled?: boolean;
1211
readonly showPressEnter?: boolean;
1312
readonly onClick?: MouseEventHandler;
@@ -18,28 +17,26 @@ const useButtonStyles = makeStyles({
1817
container: {
1918
display: 'flex',
2019
alignItems: 'center',
21-
...shorthands.gap( '12.5px'),
22-
20+
...shorthands.gap(quickformtokens.gap1),
2321
marginTop: '30px',
2422
},
2523
button: {
26-
color: quickformtokens.onSurface,
24+
color: quickformtokens.onPrimary,
2725
backgroundColor: quickformtokens.primary,
28-
...shorthands.border('thin','solid',quickformtokens.primary),
26+
...shorthands.border('thin', 'solid', quickformtokens.primary),
2927
...shorthands.borderRadius('8px'),
3028
cursor: 'pointer',
31-
fontSize: '2rem',
32-
fontWeight: 700,
29+
fontSize: quickformtokens.btnFontSize,
30+
fontWeight: quickformtokens.btnFontWeight,
3331
...shorthands.padding('10px', '14px'),
3432
':hover': {
35-
color: quickformtokens.white,
33+
color: quickformtokens.onPrimary,
3634
backgroundColor: quickformtokens.primaryLighter
3735
}
3836
}
3937
})
4038

41-
export const Button: React.FC<PropsWithChildren< BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style }) => {
42-
39+
export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style }) => {
4340

4441
if (typeof visible !== "undefined" && visible === false) {
4542
return (<></>);
@@ -69,28 +66,16 @@ export const Button: React.FC<PropsWithChildren< BtnContainerProps>> = ({ childr
6966
disabled={disabled}
7067
type="button"
7168
onClick={onClick}
72-
69+
7370
>
7471
{children}
7572

7673
</button>
7774
{!disabled && !isOnMobile && showPressEnter && (
78-
<span style={spanStyle}>
79-
<>Tryk <strong style={strongStyle}>Enter ↵</strong></>
75+
<span style={{ color: quickformtokens.onPrimary, fontSize: quickformtokens.btnEnterKeyTextFontSize }}>
76+
<>Tryk <strong style={{ fontWeight: 'bolder', letterSpacing: '0.04em', }}>Enter ↵</strong></>
8077
</span>
8178
)}
8279
</div>
8380
);
84-
}
85-
86-
87-
const spanStyle = {
88-
color: quickformtokens.onSurface,
89-
fontSize: '1.25rem',
90-
};
91-
92-
const strongStyle = {
93-
fontWeight: 'bolder',
94-
letterSpacing: '0.04em',
95-
};
96-
81+
}

‎packages/core/src/components/container/QuickFormContainer.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
"use client"
2-
3-
import { makeStaticStyles, makeStyles, mergeClasses, shorthands } from "@griffel/react"
1+
"use client";
2+
import { makeStyles, shorthands } from "@griffel/react"
43
import { CSSProperties, PropsWithChildren } from "react";
5-
import { quickformtokens } from "../../style/quickformtokens";
4+
import { quickformtokens } from "../../style/quickFormTokensDefinition";
65

76
const useQuickFormContainerStyles = makeStyles({
87
root: {
9-
108
maxWidth: '72rem',
119
width: '100%',
1210
'@media screen and (max-width: 599px)': { ...shorthands.padding(0, quickformtokens.gap4) },
@@ -17,10 +15,10 @@ const useQuickFormContainerStyles = makeStyles({
1715
export const QuickFormContainer: React.FC<PropsWithChildren<{ style?: CSSProperties }>> = ({ children, style }) => {
1816

1917
const styles = useQuickFormContainerStyles();
20-
18+
2119
return (
22-
<div className={styles.root} style = { style } >
23-
{children }
20+
<div className={styles.root} style={style} >
21+
{children}
2422
</div>
2523
)
2624
}

‎packages/core/src/components/ending/Ending.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Heading, Paragraph } from "../index";
44
import { ErrorIcon, Checkmark } from "../icons/index";
55
import { useQuickForm } from "../../state/QuickFormContext";
66
import { EndingModel } from "../../model";
7+
import { quickformtokens } from "../../style/quickFormTokensDefinition";
78

89
type EndingProps = {
910
model: EndingModel;
@@ -24,13 +25,13 @@ export const Ending: React.FC<EndingProps> = ({ model }) => {
2425
<div style={endingStyles}>
2526
{submitStatus.isSubmitError &&
2627
<>
27-
<ErrorIcon color={'var(--on-surface)'} />
28+
<ErrorIcon color={quickformtokens.onSurface} />
2829
<Heading>Der skete en fejl, prøv igen</Heading>
2930
</>
3031
}
3132
{submitStatus.isSubmitSuccess &&
3233
<>
33-
<Checkmark color={'var(--on-surface)'} />
34+
<Checkmark color={quickformtokens.onSurface} />
3435
{text &&
3536
<Heading style={{ marginTop: '10px' }}>
3637
{text}

‎packages/core/src/components/error-message/ErrorMessage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
1111
color: 'red',
1212
textDecoration: 'underline',
1313
marginTop: '4px',
14-
fontSize: '0.875rem',
15-
fontWeight: 'normal',
14+
fontSize: '1rem',
15+
fontWeight: 'bold',
1616
};
1717

1818
return (

‎packages/core/src/components/error-popup/ErrorPopup.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { useState, useEffect } from 'react';
33
import { useDelayedClickListener } from "../../hooks";
44
import { useQuickForm } from "../../state/QuickFormContext";
5-
import { quickformtokens } from '../../style/quickformtokens';
5+
import { quickformtokens } from '../../style/quickFormTokensDefinition';
66

77
type ErrorPopupProps = {
88
readonly message: string;
@@ -25,7 +25,7 @@ export const ErrorPopup: React.FC<ErrorPopupProps> = ({ message }: ErrorPopupPro
2525
// }
2626
//}
2727

28-
// useDelayedClickListener(resetErrorMessage);
28+
// useDelayedClickListener(resetErrorMessage);
2929

3030
useEffect(() => {
3131
if (message) {
@@ -41,7 +41,7 @@ export const ErrorPopup: React.FC<ErrorPopupProps> = ({ message }: ErrorPopupPro
4141
const errorStyle: React.CSSProperties = {
4242
alignItems: 'flex-end',
4343
animation: isVisible ? 'slide-up 0.35s linear 1 forwards' : '',
44-
backgroundColor: 'var(--surface)',
44+
backgroundColor: quickformtokens.error,
4545
borderRadius: '3px',
4646
color: quickformtokens.onError,
4747
display: 'flex',

‎packages/core/src/components/heading/Heading.module.css

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎packages/core/src/components/heading/Heading.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { HeadingNumberDisplayProvider, registerQuickFormService, resolveQuickFormService } from "../../services/QuickFormServices";
2-
import { useQuickForm } from "../../state/QuickFormContext";
1+
import React, { ReactNode } from "react";
32
import { ImArrowRightIcon } from "../../components/icons";
4-
import React from "react";
5-
import { ReactNode } from "react";
6-
import { quickformtokens } from "../../style/quickformtokens";
7-
3+
import { useQuickForm } from "../../state/QuickFormContext";
4+
import { quickformtokens } from "../../style/quickFormTokensDefinition";
5+
import { HeadingNumberDisplayProvider, registerQuickFormService, resolveQuickFormService } from "../../services/QuickFormServices";
86

97
type HeadingProps = {
108
readonly children: ReactNode;
@@ -18,17 +16,17 @@ export const Heading: React.FC<HeadingProps> = ({ children, label, style = {} }:
1816
const shouldDisplayNumber = resolveQuickFormService("headingNumberDisplayProvider")();
1917

2018
const headingStyles: React.CSSProperties = {
21-
fontSize: quickformtokens.questionTextFontSize, //'1.5rem',
22-
fontWeight: 'unset',
23-
color: 'var(--on-surface)',
19+
fontSize: quickformtokens.headlineFontSize,
20+
fontWeight: 'bold',
21+
color: quickformtokens.onSurface,
2422
position: "relative"
2523
}
2624

2725
return (
2826
<h1 style={{ ...style, ...headingStyles }}>
2927
{shouldDisplayNumber && <span style={{ //TODO - if mobile left 0, top:-2.4rem,justifycontext start
3028
display: 'inline-flex', alignItems: 'center', gap: quickformtokens.gap1, position: "absolute", width: "100px", left: "-100px", justifyContent: "end",
31-
fontSize: quickformtokens.questionQuestionNumberFontSiez,
29+
fontSize: quickformtokens.questionNumberFontSize,
3230
height: "100%",
3331
paddingRight: quickformtokens.gap2
3432
}}>

‎packages/core/src/components/icons/ImArrowRightIcon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { IconProps } from "./iconProps";
3-
import { quickformtokens } from "../../style/quickformtokens";
3+
import { quickformtokens } from "../../style/quickFormTokensDefinition";
44

55
export const ImArrowRightIcon: React.FC<IconProps> = ({ size = '20px' }) => {
66
return (

‎packages/core/src/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,7 @@ export { Slide } from "./slide/Slide";
1313
export { Submit } from "./submit/Submit";
1414
export { QuickForm } from "./QuickForm";
1515
export { Spinner } from "./spinner/Spinner";
16+
export { Intro } from "./intro/Intro";
1617
export { QuickFormContainer } from "./container/QuickFormContainer";
18+
export { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
1719
import "./question/input-types";

0 commit comments

Comments
 (0)