Skip to content

Commit

Permalink
chore: updated design for themebuilder modal (#2558)
Browse files Browse the repository at this point in the history 
resolves #2356
  • Loading branch information
@Thunear
Thunear authored Oct 8, 2024
1 parent 8d3a3c5 commit 1898de7
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 102 deletions.
107 changes: 78 additions & 29 deletions apps/theme/components/TokenModal/TokenModal.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,80 @@
.content {
display: flex;
flex-wrap: wrap;
gap: 32px;
margin-top: var(--ds-spacing-6);
}

.column {
width: calc(50% - 16px);
.leftSection,
.rightSection {
flex-grow: 1;
flex-basis: 0;
}

.snippet {
max-height: 250px;
overflow: auto;
.leftSection {
border-right: 1px solid var(--ds-color-neutral-border-subtle);
padding-right: var(--ds-spacing-8);
}

.snippet code {
background-color: transparent;
.rightSection {
padding: var(--ds-spacing-4) 0 var(--ds-spacing-4) var(--ds-spacing-8);
}

.infoBoxes {
border-top: 1px solid var(--ds-color-neutral-border-subtle);
margin-top: var(--ds-spacing-8);
padding-top: var(--ds-spacing-8);
display: flex;
flex-direction: column;
gap: var(--ds-spacing-8);
}

.infoBox {
display: flex;
gap: var(--ds-spacing-3);
}

.infoBox__container {
gap: var(--ds-spacing-1);
display: flex;
flex-direction: column;
}

.infoBox__icon {
height: 32px;
width: 32px;
background-color: black;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-top: -3px;
}

.tabsContent {
padding-left: 0;
padding-right: 0;
.infoBox__icon img {
height: 16px;
}

.tabs {
margin-bottom: 16px;
.infoBox__icon--code {
background: linear-gradient(137deg, #4ebbff 4.89%, #1c49ff 95.99%);
}

.title {
margin-bottom: 16px;
.contact {
margin-top: var(--ds-spacing-6);
gap: 8px;
display: flex;
}

.contact__content {
display: flex;
flex-direction: column;
gap: 4px;
}

.snippet code {
background-color: transparent;
height: 290px;
display: block;
}

.modalHeader {
Expand All @@ -38,25 +85,27 @@

.headerText {
margin-right: auto;
font-size: 24px;
font-size: var(--ds-spacing-6);
}

.emblem {
height: 26px;
margin-right: 10px;
margin-right: var(--ds-spacing-2);
}

.shareBtn {
margin-right: 8px;
font-weight: 500;
}
@media (max-width: 1150px) {
.content {
flex-direction: column;
}

.hiddenGlobalBtn {
position: absolute;
left: 0;
bottom: 0;
height: 48px;
width: 48px;
background-color: transparent;
border: transparent;
.leftSection {
border: none;
padding: 0;
}

.rightSection {
padding: 0;
margin-top: 32px;
width: 100%;
}
}
192 changes: 119 additions & 73 deletions apps/theme/components/TokenModal/TokenModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@ import {
Textfield,
} from '@digdir/designsystemet-react';
import { createTokens } from '@digdir/designsystemet/tokens/create.js';
import { CodeIcon, InformationSquareIcon } from '@navikt/aksel-icons';
import { CodeSnippet } from '@repo/components';
import { useEffect, useRef, useState } from 'react';

import cl from 'clsx/lite';

import classes from './TokenModal.module.css';

type TokenModalProps = {
Expand Down Expand Up @@ -40,7 +43,7 @@ export const TokenModal = ({
const [darkThemeSnippet, setDarkThemeSnippet] = useState('');
const [themeName, setThemeName] = useState('theme');

const cliSnippet = `npx @digdir/designsystemet tokens create \\
const cliSnippet = `npx @digdir/designsystemet@next tokens create \\
--accent "${accentColor}" \\
--neutral "${neutralColor}" \\
--brand1 "${brand1Color}" \\
Expand All @@ -67,6 +70,36 @@ export const TokenModal = ({
setDarkThemeSnippet(toFigmaSnippet(tokens.colors.dark.theme));
}, []);

type InfoBoxType = {
title: string;
desc: React.ReactNode;
img: React.ReactNode;
type?: 'code' | 'figma';
};

const InfoBox = ({ title, desc, img, type = 'figma' }: InfoBoxType) => {
return (
<div className={classes.infoBox}>
<div className={classes.infoBox__left}>
<div
className={cl(
classes.infoBox__icon,
type === 'code' && classes['infoBox__icon--code'],
)}
>
{img}
</div>
</div>
<div className={classes.infoBox__right}>
<div className={classes.infoBox__container}>
<Heading size='2xs'>{title}</Heading>
<Paragraph size='sm'>{desc}</Paragraph>
</div>
</div>
</div>
);
};

return (
<Modal.Context>
<Modal.Trigger
Expand All @@ -78,88 +111,101 @@ export const TokenModal = ({
</Modal.Trigger>
<Modal
className={classes.modal}
style={{ maxWidth: 1400 }}
style={{ maxWidth: 1150 }}
ref={modalRef}
backdropClose={true}
>
<Heading className={classes.modalHeader} size='xs'>
<img src='img/emblem.svg' alt='' className={classes.emblem} />
<span className={classes.headerText}>Kopier fargetema</span>
<span className={classes.headerText}>Ta i bruk tema</span>
</Heading>
<Paragraph variant='long' size='xs'>
Velg et av alternativene under for å ta i bruk design-tokens med ditt
tema.
</Paragraph>
<Heading level={3} size='xs'>
Alt 1. Design tokens
</Heading>
<Textfield
label='Navn på tema'
description="Kun bokstaver, tall og bindestrek. Eks: 'mitt-tema'"
value={themeName}
onChange={(e) => {
const value = e.currentTarget.value
.replace(/\s+/g, '-')
.replace(/[^A-Z0-9-]+/gi, '')
.toLowerCase();

setThemeName(value);
}}
style={{ marginBlock: 'var(--ds-spacing-4)' }}
/>
<Paragraph>
Kopier kommandosnutten under og kjør på maskinen din for å generere
alle design tokens (json-filer). Sørg for at du har{' '}
<Link href='https://nodejs.org' target='_blank'>
Node.js (åpnes i ny fane)
</Link>{' '}
installert på maskinen din.
</Paragraph>
<div
className={classes.snippet}
style={{ marginBottom: 'var(--ds-spacing-8)' }}
>
<CodeSnippet syntax='shell'>{cliSnippet}</CodeSnippet>
</div>
<Heading level={3} size='xs'>
Alt 2. Figma plugin
</Heading>
<Paragraph>
JSON for bruk med Designsystemet{' '}
<Link
href='https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta'
target='_blank'
>
Figma Plugin (åpnes i ny fane)
</Link>{' '}
og{' '}
<Link
href='https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit'
target='_blank'
>
Figma UI kit (åpnes i ny fane)
</Link>
.
</Paragraph>
<Paragraph>
Dette alternativet er kun ment for rask prototyping av valgt tema i
Figma. For å bruke design tokens i produksjon, anbefales det å bruke
alternativ 1.
</Paragraph>
<div className={classes.content}>
<div className={classes.column}>
<Heading level={4} size='2xs'>
Light Mode
</Heading>
<div className={classes.snippet}>
<CodeSnippet language='json'>{lightThemeSnippet}</CodeSnippet>
<div className={classes.leftSection}>
<Textfield
label='Navn på tema'
description="Kun bokstaver, tall og bindestrek. Eks: 'mitt-tema'"
value={themeName}
size='sm'
onChange={(e) => {
const value = e.currentTarget.value
.replace(/\s+/g, '-')
.replace(/[^A-Z0-9-]+/gi, '')
.toLowerCase();

setThemeName(value);
}}
/>
<div className={classes.infoBoxes}>
<InfoBox
title='Design tokens'
img={<CodeIcon aria-hidden='true' fontSize='1.9rem' />}
type='code'
desc={
<>
Kopier kodesnutten og kjør den på maskinen din for å
generere design tokens (json-filer). Sørg for at du har{' '}
<Link target='_blank' href='https://nodejs.org/'>
Node.js
</Link>{' '}
installert på maskinen din.
</>
}
/>
<InfoBox
title='Figma variabler'
img={<img src='img/figma-logo.png' alt='' />}
desc={
<>
Kopier kodesnutten og lim den inn i Designsystemet sin{' '}
<Link
target='_blank'
href='https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta'
>
Figma plugin
</Link>{' '}
når du er i{' '}
<Link
target='_blank'
href='https://www.figma.com/community/file/1322138390374166141'
>
Core UI Kit
</Link>{' '}
for å oppdatere et tema. Pluginen oppdaterer kun farger for
øyeblikket.
</>
}
/>
</div>
</div>
<div className={classes.column}>
<Heading level={4} size='2xs'>
Dark Mode
</Heading>
<div className={classes.rightSection}>
<div className={classes.snippet}>
<CodeSnippet language='json'>{darkThemeSnippet}</CodeSnippet>
<CodeSnippet syntax='shell'>{cliSnippet}</CodeSnippet>
</div>
<div className={classes.contact}>
<div className={classes.contact__icon}>
<InformationSquareIcon aria-hidden='true' fontSize='1.5rem' />
</div>
<div className={classes.contact__content}>
<Heading size='2xs'>Noe som ikke fungerer?</Heading>
<Paragraph size='sm'>
Send oss en melding på{' '}
<Link
target='_blank'
href='https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ'
>
Slack
</Link>{' '}
eller lag et{' '}
<Link
target='_blank'
href='https://github.com/digdir/designsystemet/issues/new/choose'
>
Github issue
</Link>
.
</Paragraph>
</div>
</div>
</div>
</div>
Expand Down
Binary file added apps/theme/public/img/figma-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1898de7

Please sign in to comment.