Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: fix misc layout things #3294

Merged
merged 10 commits into from
Mar 4, 2025
Merged

chore: fix misc layout things #3294

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5a45c68
chore(storefront): fix misc layout things
Barsnes Mar 4, 2025
c26b57c
clusters on storefront
Barsnes Mar 4, 2025
75d8317
fix some things on themebuilder page
Barsnes Mar 4, 2025
5deb3bc
some more layout
Barsnes Mar 4, 2025
78dae82
fix frontpage
Barsnes Mar 4, 2025
49bbbff
Merge branch 'next' into post-v1/misc-fixes
Barsnes Mar 4, 2025
d5d085e
panel padding
Barsnes Mar 4, 2025
5abc74e
add modal
Barsnes Mar 4, 2025
7255e63
add link to helptext
Barsnes Mar 4, 2025
2778e30
color modal misc
Barsnes Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/storefront/app/(frontpage)/layout.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
}
}

@media (max-width: 1700px) {
@media (max-width: 1740px) {
.cluster {
display: none;
}
Expand Down
26 changes: 16 additions & 10 deletions apps/theme/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,39 +31,45 @@ code {
}

.panelContainer {
--panel-padding: var(--ds-size-8);
--panel-gap: var(--ds-size-4);

display: flex;
gap: var(--ds-size-4);
}

.panelLeft {
display: flex;
flex-direction: column;
gap: 12px;
width: 420px;
position: relative;
background-color: var(--ds-color-neutral-background-default);
padding: 32px;
border-right: 1px solid var(--ds-color-neutral-border-subtle);

& > * {
padding: var(--panel-padding);
}
}

.panelRight {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: min-content;
width: 100%;
gap: 12px;
padding: 28px;
gap: var(--panel-gap);
padding: var(--panel-padding);
background-color: var(--ds-color-neutral-background-tinted);
border-radius: 0 8px 8px 0;
}

.panelTop {
display: flex;
flex-direction: column;
gap: var(--panel-gap);
}

.panelBottom {
left: 0;
right: 0;
bottom: 0;
padding: 28px;
position: absolute;
border-top: 1px solid var(--ds-color-neutral-border-subtle);
margin-top: auto;
}

.content {
Expand Down
6 changes: 1 addition & 5 deletions apps/theme/components/ColorContrasts/ColorContrasts.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,10 @@
gap: 9px;
align-items: flex-start;
border-top: 1px solid var(--ds-color-neutral-border-subtle);
margin-left: -28px;
margin: 0 calc(var(--panel-padding) * -1);
padding: 22px 28px;
}

.tagGroups {
margin-top: 12px;
}

.tagGroup:last-child {
border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
}
Expand Down
70 changes: 36 additions & 34 deletions apps/theme/components/ColorContrasts/ColorContrasts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,41 +134,43 @@ export const ColorContrasts = () => {
return (
<div className='panelContainer'>
<div className='panelLeft'>
<Heading data-size='xs'>Kontraster mellom farger</Heading>
<Paragraph data-size='sm'>
Her vises kontrastene mellom de ulike trinnene i fargeskalaene, samt
om fargene oppfyller WCAG-kravene.
</Paragraph>
<div className='panelTop'>
<Heading data-size='xs'>Kontraster mellom farger</Heading>
<Paragraph data-size='sm'>
Her vises kontrastene mellom de ulike trinnene i fargeskalaene, samt
om fargene oppfyller WCAG-kravene.
</Paragraph>

<div className={classes.tagGroups}>
<div className={classes.tagGroup}>
<div className={cl(classes.tag, classes.AAA)}>AAA</div>
<Paragraph data-size='sm'>
Tekst og bakgrunn må ha en kontrast på minst 7:1 for å oppfylle
WCAG AAA-kravet.
</Paragraph>
</div>
<div className={classes.tagGroup}>
<div className={cl(classes.tag, classes.AA)}>AA</div>
<Paragraph data-size='sm'>
Tekst og bakgrunn må ha en kontrast på minst 4.5:1 for å oppfylle
WCAG AA-kravet.
</Paragraph>
</div>
<div className={classes.tagGroup}>
<div className={cl(classes.tag, classes.AA18)}>AA18</div>
<Paragraph data-size='sm'>
Tekst og bakgrunn må ha en kontrast på minst 3:1 og en
skriftstørrelse på 18 px eller større for å oppfylle WCAG
AA-kravet.
</Paragraph>
</div>
<div className={classes.tagGroup}>
<div className={cl(classes.tag, classes.FAIL)}>DECO</div>
<Paragraph data-size='sm'>
Oppfyller ingen kontrastkrav i WCAG og bør kun brukes til
dekorative formål.
</Paragraph>
<div className={classes.tagGroups}>
<div className={classes.tagGroup}>
<div className={cl(classes.tag, classes.AAA)}>AAA</div>
<Paragraph data-size='sm'>
Tekst og bakgrunn må ha en kontrast på minst 7:1 for å oppfylle
WCAG AAA-kravet.
</Paragraph>
</div>
<div className={classes.tagGroup}>
<div className={cl(classes.tag, classes.AA)}>AA</div>
<Paragraph data-size='sm'>
Tekst og bakgrunn må ha en kontrast på minst 4.5:1 for å
oppfylle WCAG AA-kravet.
</Paragraph>
</div>
<div className={classes.tagGroup}>
<div className={cl(classes.tag, classes.AA18)}>AA18</div>
<Paragraph data-size='sm'>
Tekst og bakgrunn må ha en kontrast på minst 3:1 og en
skriftstørrelse på 18 px eller større for å oppfylle WCAG
AA-kravet.
</Paragraph>
</div>
<div className={classes.tagGroup}>
<div className={cl(classes.tag, classes.FAIL)}>DECO</div>
<Paragraph data-size='sm'>
Oppfyller ingen kontrastkrav i WCAG og bør kun brukes til
dekorative formål.
</Paragraph>
</div>
</div>
</div>
</div>
Expand Down
24 changes: 13 additions & 11 deletions apps/theme/components/ColorPreview/ColorPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,22 +114,24 @@ export const ColorPreview = () => {
return (
<div className='panelContainer'>
<div className='panelLeft'>
<Heading data-size='xs'>Se fargene dine i bruk</Heading>
<Paragraph data-size='sm'>
Hver farge som blir valgt med verktøyet får sitt eget kort i seksjonen
til høyre slik at du kan se hvordan fargene harmonerer sammen.
</Paragraph>
<Paragraph data-size='sm'>
Merk at kontrastfargen inne i knappen endrer seg fra hvit til svart,
avhengig av om den valgte fargen er lys eller mørk for å oppnå best
mulig kontrast.
</Paragraph>
<div className='panelTop'>
<Heading data-size='xs'>Se fargene dine i bruk</Heading>
<Paragraph data-size='sm'>
Hver farge som blir valgt med verktøyet får sitt eget kort i
seksjonen til høyre slik at du kan se hvordan fargene harmonerer
sammen.
</Paragraph>
<Paragraph data-size='sm'>
Merk at kontrastfargen inne i knappen endrer seg fra hvit til svart,
avhengig av om den valgte fargen er lys eller mørk for å oppnå best
mulig kontrast.
</Paragraph>
</div>
<div className='panelBottom'>
<div className={classes.label}>Visning:</div>
<ToggleGroup
data-size='sm'
defaultValue='grid'
name='toggle-group-nuts'
onChange={(value) => setView(value as ViewType)}
>
<ToggleGroup.Item value='grid'>Grid</ToggleGroup.Item>
Expand Down
12 changes: 7 additions & 5 deletions apps/theme/components/ColorTokens/ColorTokens.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ export const ColorTokens = () => {
return (
<div className='panelContainer'>
<div className='panelLeft'>
<Heading data-size='xs'>Se fargetokens</Heading>
<Paragraph data-size='sm'>
Her ser du hvilke tokens som er brukt for å lage kortene i seksjonen
over.
</Paragraph>
<div className='panelTop'>
<Heading data-size='xs'>Se fargetokens</Heading>
<Paragraph data-size='sm'>
Her ser du hvilke tokens som er brukt for å lage kortene i seksjonen
over.
</Paragraph>
</div>
</div>
<div className={cl('panelRight', classes.right)}>
<img className={classes.img} src='img/color-tokens.png' alt='' />
Expand Down
3 changes: 2 additions & 1 deletion apps/theme/components/ThemeHeader/ThemeHeader.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
}

.backLink {
color: var(--ds-color-accent-text-default);
--ds-link-color: var(--ds-color-accent-text-default);

margin-left: -4px;
display: inline-flex;
width: auto;
Expand Down
Loading