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

Feat/improve theme builder v2 #926

Draft
wants to merge 5 commits into
base: feat/theme-builder-v2
Choose a base branch
from
+108 −33
Draft

Feat/improve theme builder v2 #926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe13a9b
ci: add jsx to tsconfig to prevent IDE error in ThemeBuilder
Yolijn Jan 17, 2025
3580c9b
docs: add table of contents for theme builder page
Yolijn Jan 17, 2025
6ca8af3
docs: add Project Wallace explanation
Yolijn Jan 17, 2025
421f655
feat: add border radius to theme builder
Yolijn Jan 17, 2025
3a1507a
refactor: move datalist elements to the section where they are used
Yolijn Jan 17, 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
140 changes: 107 additions & 33 deletions proprietary/basis-design-tokens/documentation/ThemeBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,24 @@ export const ThemeBuilder = () => {
<div>
<h1>Design Tokens</h1>
<h2>Imported tokens</h2>
<p>Paste your Project Wallace tokens here:</p>
<p>
Baseer je keuzes op een bestaande website door gebruik te maken van{' '}
<a href="https://www.projectwallace.com/design-tokens">Project Wallace</a>
</p>
<ol>
<li>Voer de url in van de organisatie waarvan je het thema wil instellen.</li>
<li>Klik op: Analyse URL.</li>
<li>Kies in de toolbar onderaan de pagina: 🖌️ Design Tokens.</li>
<li>Kies: Copy tokens.</li>
<li>Plak de tokens in de Text Area hier onder.</li>
<li>
Nu zullen deze waardes beschikbaar zijn in de verschillende invoer elementen om je design tokens in te
stellen.
</li>
</ol>
<textarea
cols={42}
rows={21}
onInput={(evt) => {
try {
const json = JSON.parse(evt.target.value);
Expand All @@ -47,43 +63,33 @@ export const ThemeBuilder = () => {
}
}}
></textarea>
<h2>Colors</h2>
<h2>Maak nu je thema met de volgende stappen</h2>
<ol>
<li>
<a href="#pick-colors">Kies de kleuren</a>
</li>
<li>
<a href="#pick-fonts">Kies de lettertypes</a>
</li>
<li>
<a href="#pick-typography-scale">Zet de typografie schaal</a>
</li>
<li>
<a href="#pick-border-radius">Kies hoe rond de hoeken zijn</a>
</li>
<li>
<a href="#pick-download">Download het thema</a>
</li>
</ol>
<h2 id="pick-colors">Colors</h2>
<datalist id="color">
{projectWallaceJson?.Color
? Object.values(projectWallaceJson?.Color).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist>
<datalist id="font-family">
{projectWallaceJson?.FontFamily
? Object.values(projectWallaceJson?.FontFamily).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist>
<datalist id="font-size">
{projectWallaceJson?.FontSize
? Object.values(projectWallaceJson?.FontSize).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist>
<datalist id="line-height">
{projectWallaceJson?.LineHeight
? Object.values(projectWallaceJson?.LineHeight).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist>

<datalist id="border-radius">
{projectWallaceJson?.Radius
? Object.values(projectWallaceJson?.Radius).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist>
<div>
{[
{
Expand Down Expand Up @@ -185,7 +191,14 @@ export const ThemeBuilder = () => {
</div>
))}
</div>
<h2>Fonts</h2>
<h2 id="fonts">Fonts</h2>
<datalist id="font-family">
{projectWallaceJson?.FontFamily
? Object.values(projectWallaceJson?.FontFamily).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist>
<div>
{[
{
Expand All @@ -211,8 +224,15 @@ export const ThemeBuilder = () => {
</div>
))}
</div>
<h2>Typography scale</h2>
<h2 id="typography-scale">Typography scale</h2>
<p>Vul een font-size in pixels in.</p>
<datalist id="font-size">
{projectWallaceJson?.FontSize
? Object.values(projectWallaceJson?.FontSize).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist>
<div>
{[
{
Expand Down Expand Up @@ -251,7 +271,61 @@ export const ThemeBuilder = () => {
</div>
))}
</div>
<h2>Finish making the theme</h2>

{/*
<h2 id="pick-line-height">Line Height</h2>
<datalist id="line-height">
{projectWallaceJson?.LineHeight
? Object.values(projectWallaceJson?.LineHeight).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist> */}

<h2 id="pick-border-radius">Border Radius</h2>
<datalist id="border-radius">
{projectWallaceJson?.Radius
? Object.values(projectWallaceJson?.Radius).map((token, index) => (
<option key={index}>{token['$value']}</option>
))
: null}
</datalist>
<p>Vul border-radius in pixels in.</p>

<div>
{[
{
name: 'Small',
description:
'Wordt gebruikt voor de componenten die een achtergrondkleur of border hebben en iets afgeronde hoeken hebben. Bijvoorbeeld Badges en Cards',
tokenRef: 'basis.border-radius.sm',
},
{
name: 'Medium',
description:
'Wordt incidenteel gebruikt voor componenten die iets ronder zijn dan de sm standaard. Bijvoorbeeld voor Button.',
tokenRef: 'basis.border-radius.md',
},
// {
// name: 'Large',
// description: 'Wordt nog niet gebruikt in een geimplementeerd component ',
// tokenRef: 'basis.border-radius.lg',
// },
{
name: 'Form Control',
description: 'Wordt gebruikt voor formulier elementen zoals Text Input, Text Area en Select',
tokenRef: 'basis.form-control.border-radius',
},
].map((tokenData, index) => (
<div key={index}>
<h3>{tokenData.name}</h3>
{tokenData.description ? <p>{tokenData.description}</p> : null}
<input type="text" list="border-radius" onInput={handleSetToken(tokenData)} />
</div>
))}
</div>

<h2 id="download">Finish making the theme</h2>
<button
onClick={(evt) => {
evt.preventDefault();
Expand Down
1 change: 1 addition & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"compilerOptions": {
"jsx": "react",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
Expand Down
Loading