Skip to content

Commit 6e74838

Browse files
BarsnesBarsnes
authored
feat(themebuilder): add scale-overrides (#4171)
1 parent be0debb commit 6e74838

17 files changed

Lines changed: 802 additions & 125 deletions

File tree

‎apps/themebuilder/app/_components/color-preview/color-preview.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,14 @@ export const ColorPreview = () => {
7474
)}
7575
>
7676
{allColors.map((color, index) => {
77+
const variables =
78+
color.variables?.[colorScheme as keyof typeof color.variables];
7779
return (
7880
<CardWrapper
7981
view={view}
8082
key={`${color.name}-${index}`}
8183
color={color}
82-
style={prepVariables(
83-
color.variables[colorScheme as keyof typeof color.variables],
84-
)}
84+
style={variables ? prepVariables(variables) : {}}
8585
/>
8686
);
8787
})}

‎apps/themebuilder/app/_components/overview-components/overview-components.tsx‎

Lines changed: 142 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,23 @@ import {
66
import {
77
Avatar,
88
Button,
9+
Divider,
10+
Field,
911
Heading,
12+
Label,
1013
Link,
1114
Paragraph,
15+
Select,
1216
Tag,
1317
Textfield,
1418
} from '@digdir/designsystemet-react';
15-
import { useEffect, useRef } from 'react';
19+
import { useEffect, useRef, useState } from 'react';
1620
import { useTranslation } from 'react-i18next';
1721
import {
1822
generateColorVars,
1923
generateNeutralColorVars,
2024
} from '~/_utils/generate-color-vars';
25+
import { useThemebuilder } from '~/routes/themebuilder/_utils/use-themebuilder';
2126
import classes from './overview-components.module.css';
2227
import { SettingsCard } from './settings-card/settings-card';
2328
import { TableCard } from './table-card/table-card';
@@ -53,6 +58,11 @@ export const OverviewComponents = ({
5358
}: OverviewComponentsProps) => {
5459
const { t } = useTranslation();
5560
const ref = useRef<HTMLDivElement>(null);
61+
const { colors } = useThemebuilder();
62+
63+
const [previewColor, setPreviewColor] = useState(
64+
colors?.main[0].hex || color,
65+
);
5666

5767
useEffect(() => {
5868
// we need to set these properties on the preview element because they are immutable on :root
@@ -87,98 +97,151 @@ export const OverviewComponents = ({
8797
vars,
8898
generateNeutralColorVars(generateColorSchemes('#1E2B3C'), colorScheme),
8999
);
90-
/* get -ds-color-* vars */
91100
Object.assign(
92101
vars,
93-
generateColorVars(generateColorSchemes(color), colorScheme),
102+
generateColorVars(
103+
generateColorSchemes(previewColor as CssColor),
104+
colorScheme,
105+
),
94106
);
95107

96108
return vars;
97109
};
98110

111+
useEffect(() => {
112+
setPreviewColor(color);
113+
}, [color]);
114+
115+
useEffect(() => {
116+
if (!colors) return;
117+
const allColors = [...colors.main, ...colors.support];
118+
/* if select colors is gone, set to default */
119+
if (!allColors.find((c) => c.hex === previewColor)) {
120+
setPreviewColor(colors.main[0].hex || color);
121+
}
122+
}, [colors]);
123+
99124
return (
100-
<div ref={ref} style={style()}>
101-
<div className={classes.inner}>
102-
<div className={classes.card}>
103-
<Heading data-size='2xs'>{t('overview.login-title')}</Heading>
104-
<Textfield
105-
placeholder='Ola Normann'
106-
label={t('overview.name')}
107-
data-size='sm'
108-
/>
109-
<Textfield
110-
placeholder='********'
111-
label={t('overview.password')}
112-
data-size='sm'
113-
/>
114-
<Link href='#' data-size='sm'>
115-
{t('overview.forgot-password')}
116-
</Link>
117-
118-
<Button data-size='sm' className={classes.btn}>
119-
{t('overview.login')}
120-
</Button>
121-
</div>
122-
<div
123-
className={classes.card}
124-
style={{
125-
flexGrow: 1,
126-
}}
127-
>
128-
<TableCard />
129-
</div>
130-
<div className={classes.card} data-size='sm'>
131-
<SettingsCard />
132-
</div>
133-
<div className={classes.card}>
134-
<img className={classes.img} src='/img/city.jpg' alt='' />
135-
<div className={classes.imgText}>
136-
<div className={classes.tags} data-size='sm'>
137-
<Tag data-color='brand1'>{t('overview.sports')}</Tag>
138-
<Tag data-color='brand2'>{t('overview.news')}</Tag>
125+
<>
126+
{colors ? (
127+
<>
128+
<Field>
129+
<Label>{t('overview.select-color')}</Label>
130+
<Select
131+
value={previewColor}
132+
onChange={(v) => {
133+
if (!colors) return;
134+
const allColors = [...colors.main, ...colors.support];
135+
/* find the selected color */
136+
let selected = allColors.find(
137+
(c) => c.hex === v.target.value,
138+
)?.hex;
139+
if (!selected) {
140+
selected = colors.main[0].hex;
141+
}
142+
setPreviewColor(selected as CssColor);
143+
}}
144+
>
145+
{colors.main.map((color) => (
146+
<Select.Option key={color.name} value={color.hex}>
147+
{color.name}
148+
</Select.Option>
149+
))}
150+
{colors.support.map((color) => (
151+
<Select.Option key={color.name} value={color.hex}>
152+
{color.name}
153+
</Select.Option>
154+
))}
155+
</Select>
156+
</Field>
157+
158+
<Divider />
159+
</>
160+
) : null}
161+
162+
<div ref={ref} style={style()}>
163+
<div className={classes.inner}>
164+
<div className={classes.card}>
165+
<Heading data-size='2xs'>{t('overview.login-title')}</Heading>
166+
<Textfield
167+
placeholder='Ola Normann'
168+
label={t('overview.name')}
169+
data-size='sm'
170+
/>
171+
<Textfield
172+
placeholder='********'
173+
label={t('overview.password')}
174+
data-size='sm'
175+
/>
176+
<Link href='#' data-size='sm'>
177+
{t('overview.forgot-password')}
178+
</Link>
179+
180+
<Button data-size='sm' className={classes.btn}>
181+
{t('overview.login')}
182+
</Button>
183+
</div>
184+
<div
185+
className={classes.card}
186+
style={{
187+
flexGrow: 1,
188+
}}
189+
>
190+
<TableCard />
191+
</div>
192+
<div className={classes.card} data-size='sm'>
193+
<SettingsCard />
194+
</div>
195+
<div className={classes.card}>
196+
<img className={classes.img} src='/img/city.jpg' alt='' />
197+
<div className={classes.imgText}>
198+
<div className={classes.tags} data-size='sm'>
199+
<Tag data-color='brand1'>{t('overview.sports')}</Tag>
200+
<Tag data-color='brand2'>{t('overview.news')}</Tag>
201+
</div>
202+
<Heading data-size='2xs' className={classes.imgTitle}>
203+
{t('overview.news-title')}
204+
</Heading>
205+
<Paragraph data-size='sm' className={classes.imgDesc}>
206+
{t('overview.news-description')}
207+
</Paragraph>
139208
</div>
140-
<Heading data-size='2xs' className={classes.imgTitle}>
141-
{t('overview.news-title')}
142-
</Heading>
143-
<Paragraph data-size='sm' className={classes.imgDesc}>
144-
{t('overview.news-description')}
145-
</Paragraph>
146209
</div>
147-
</div>
148-
<div className={classes.card} style={{ flexGrow: 1 }}>
149-
<Heading data-size='xs' level={3}>
150-
{t('overview.people-you-may-know')}
151-
</Heading>
152-
<div className={classes.users}>
153-
{users.map((user) => {
154-
return (
155-
<div className={classes.user} key={user.role}>
156-
<Avatar
157-
aria-label={user.name}
158-
variant='square'
159-
className={classes.avatar}
160-
>
161-
<img src={user.avatar} alt='' />
162-
</Avatar>
163-
<div>
164-
<div className={classes.userRole}>{user.role}</div>
165-
<div>{user.name}</div>
210+
<div className={classes.card} style={{ flexGrow: 1 }}>
211+
<Heading data-size='xs' level={3}>
212+
{t('overview.people-you-may-know')}
213+
</Heading>
214+
<div className={classes.users}>
215+
{users.map((user) => {
216+
return (
217+
<div className={classes.user} key={user.role}>
218+
<Avatar
219+
aria-label={user.name}
220+
variant='square'
221+
className={classes.avatar}
222+
>
223+
<img src={user.avatar} alt='' />
224+
</Avatar>
225+
<div>
226+
<div className={classes.userRole}>{user.role}</div>
227+
<div>{user.name}</div>
228+
</div>
229+
<Button
230+
data-size='sm'
231+
variant='secondary'
232+
style={{ marginLeft: 'auto' }}
233+
aria-label={`${t('overview.follow')} ${user.name}`}
234+
>
235+
{t('overview.follow')}
236+
</Button>
166237
</div>
167-
<Button
168-
data-size='sm'
169-
variant='secondary'
170-
style={{ marginLeft: 'auto' }}
171-
aria-label={`${t('overview.follow')} ${user.name}`}
172-
>
173-
{t('overview.follow')}
174-
</Button>
175-
</div>
176-
);
177-
})}
238+
);
239+
})}
240+
</div>
178241
</div>
179242
</div>
180243
</div>
181-
</div>
244+
</>
182245
);
183246
};
184247

0 commit comments

Comments
 (0)