feat: support colors as args for create tokens #2290

mimarz · 2024-08-20T07:58:50Z

resolves #2269

Use theme-builder to select desired colors

Paste provided cli command in a terminal to generate desired design-tokens

changeset-bot · 2024-08-20T07:58:54Z

🦋 Changeset detected

Latest commit: e6ab6fb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@digdir/designsystemet	Minor
@digdir/designsystemet-css	Minor
@digdir/designsystemet-theme	Minor
@digdir/designsystemet-react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-08-20T07:59:08Z

Preview deployments for this pull request:

📖 Storybook 27. Aug 2024 - 14:04 (Norwegian time)

See all deployments at https://dev.designsystemet.no

mimarz · 2024-08-26T22:28:46Z

Still abit of work left on the CLI for scaling this to multiple themes and typography, but this serves currently as a good start.

Also works in Figma with Token Studio.

Suggest we have a small demo+talk about whats been done here, and the way further @eirikbacker @Barsnes @Thuneer

eirikbacker · 2024-08-27T07:07:02Z

packages/cli/bin/designsystemet.ts

+  tokenCmd
+    .command('build')
+    .description('Build Designsystemet tokens')
+    .option('-t, --tokens <string>', `Path to ${chalk.blue('design-tokens')}`, './design-tokens')


her har vi -t / --tokens på kommando tokens build
og senere kommer -w / --write på kommando tokens create
Om jeg forstår rett er begge hvilken mappe tokens skal legges i?
Skulle vi kjørt den mer konvensjonelle --dir eller --out i såfall? :)

Det var en av tinga jeg ville ta opp i demoen :)

Jeg brukte --out tidligere, men ble litt inspirert av biomejs sin --write.

Slik den fungere nå:

cmd --write -> skriver til default (./design-tokens)

cmd --write ./my-path-for-tokens -> skriver til ønsket sti

cmd -> token generes, men ingenting skrives til disk. Returnere json objekt med tokens. Dette kan være nyttig for de som vil pipe output selv en plass (f.eks, cmd > tokens.json, cmd | pbcopy)

Du kan og forsåvidt kjøre dette skriptet direkte fra kode

import { createTokens } from "@digdir/designsystemet/tokens" const tokens = createTokens({colors:…})

eirikbacker · 2024-08-27T07:08:25Z

packages/cli/bin/designsystemet.ts

+    .option('-b3, --brand3 <number>', `Brand3 hex color`)
+    .option('-f, --font-family <string>', `Font family`)
+    .action(async (opts) => {
+      // const out = typeof opts.out === 'string' ? opts.out : './dist/tokens';


Kommentert ut? ☺️

eirikbacker · 2024-08-27T07:11:56Z

packages/cli/package.json

    }
  },
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "designsystemet": "tsx ./bin/designsystemet.ts",
-    "build:tokens": "yarn clean:theme && yarn designsystemet tokens -p -t ../../design-tokens -o ../../packages/theme/brand",
-    "build:tokens:debug": "yarn clean:theme && tsx --inspect-brk ./bin/designsystemet.ts tokens -p -t ../../design-tokens -o ../../packages/theme/brand",
+    "build:tokens": "yarn clean:theme && yarn designsystemet tokens build -p -t ../../design-tokens -o ../../packages/theme/brand",


Veldig minor: Skulle vi skrevet ut parameter i fullversjon i våre egne scripts? Dersom noen utenifra skal bidra inn i prosjektet, så er det lettere å lese tokens build --preview enn å gjette hva -p betyr <3

ja, men ikke glad i den optionen, har lyst å ta livet av den 😅 Men det gjøres i egen PR :)

eirikbacker · 2024-08-27T07:16:11Z

packages/cli/src/init/generateThemesJson.ts

+    //     'primitives/size/compact': TokenSetStatus.ENABLED,
+    //   },
+    //   group: 'Size',
+    // },


Stored for later? :)

eirikbacker · 2024-08-27T07:16:39Z

packages/cli/src/init/generateMetadataJson.ts

-      'primitives/modes/typography/default',
+      'primitives/size/default',
+      'primitives/modes/typography/primary/theme',
+      'primitives/modes/typography/secondary/theme',


Æ skjønne det itj helt, men det er nok fordi jeg ikke har vært nok borti dette helt enda :)

Dette er fil for Token Studio pluginen :)

eirikbacker · 2024-08-27T07:19:00Z

packages/cli/src/tokens/create/index.ts

+      },
+      bold: {
+        $type: 'fontWeights',
+        $value: 'Medium',


Dette er for vårt theme eller bare nysgerrig hvorfor mappingen? :)
bold => medium
extra-bold => semi bold

Dette har med Token Studio vs Figma å gjøre. @Febakke kan best svare på dette :)

eirikbacker · 2024-08-27T07:20:37Z

packages/cli/src/tokens/create/index.ts

+
+    for (const file of files) {
+      const path_ = path.resolve(file.path);
+      const filePath = path.resolve(file.filePath);


er file.path det samme som dirPath og file.filePath med filnavn? I såfall, kan path_ være dirPath? 😇

mimarz · 2024-08-27T12:02:36Z

Merging this in to avoid further conflicts on work for theme. Will continue work on this in a new PR.

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @digdir/[email protected] ### Minor Changes - Fix design-token warning contrast color reference ([#2339](#2339)) - New create tokens script with color options support ([#2290](#2290)) ## @digdir/[email protected] ### Patch Changes - Chip: Support wrapping in group ([#2324](#2324)) ## @digdir/[email protected] ## @digdir/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

mimarz force-pushed the new-tokens-with-color-args branch from beca00f to 8a20dd5 Compare August 21, 2024 07:28

mimarz marked this pull request as ready for review August 26, 2024 22:26

mimarz requested review from Barsnes and eirikbacker as code owners August 26, 2024 22:26

mimarz added 19 commits August 27, 2024 00:29

remove build from gitignore

850811a

move init command to bin

9c70ed2

move stuff around

e945523

refactor some types and base values

4f00387

rename color file

1697371

rename theme file

58b5caf

fix typo

60944fd

update some names and stuff

b227084

fix some types

877da31

changed cli tokens command

a095e4a

working example with cli

5f27b3d

wip

2acade4

typography

c6f978e

export createTokens

1398d8f

almost complete tokens structure from creat tokens

0e2b81d

working example

6a07d1c

publis new cli next version

9e44b54

working theme builder with cli

f84de70

again

e84089b

mimarz force-pushed the new-tokens-with-color-args branch from 3c2be3d to e84089b Compare August 26, 2024 22:29

mimarz added 2 commits August 27, 2024 00:31

new changeset

361e7a7

fix --write truthness

9a4f35e

eirikbacker reviewed Aug 27, 2024

View reviewed changes

mimarz added 4 commits August 27, 2024 09:24

publish new cli version

d1bb335

update snippet

96c9367

remove deploy theme on PR

dca0c07

fix wrong metadata

5da508d

mimarz mentioned this pull request Aug 27, 2024

chore: add new orange and green base colors #2335

Merged

Merge branch 'next' into new-tokens-with-color-args

e6ab6fb

mimarz merged commit cd1c607 into next Aug 27, 2024
4 checks passed

mimarz deleted the new-tokens-with-color-args branch August 27, 2024 12:05

github-actions bot mentioned this pull request Aug 27, 2024

chore: new release candidate (next) #2327

Merged

mimarz mentioned this pull request Sep 19, 2024

Introduce a colors script in our cli #1886

Closed

mrosvik mentioned this pull request Sep 19, 2024

How to handle multiple JSON files in Temavelgeren #2143

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support colors as args for create tokens #2290

feat: support colors as args for create tokens #2290

mimarz commented Aug 20, 2024 •

edited

Loading

changeset-bot bot commented Aug 20, 2024 •

edited

Loading

github-actions bot commented Aug 20, 2024 •

edited

Loading

mimarz commented Aug 26, 2024

eirikbacker Aug 27, 2024 •

edited

Loading

mimarz Aug 27, 2024 •

edited

Loading

eirikbacker Aug 27, 2024

eirikbacker Aug 27, 2024 •

edited

Loading

mimarz Aug 27, 2024

eirikbacker Aug 27, 2024

eirikbacker Aug 27, 2024

mimarz Aug 27, 2024 •

edited

Loading

eirikbacker Aug 27, 2024

mimarz Aug 27, 2024

eirikbacker Aug 27, 2024

mimarz commented Aug 27, 2024

feat: support colors as args for create tokens #2290

feat: support colors as args for create tokens #2290

Conversation

mimarz commented Aug 20, 2024 • edited Loading

changeset-bot bot commented Aug 20, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Aug 20, 2024 • edited Loading

mimarz commented Aug 26, 2024

eirikbacker Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

mimarz Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

eirikbacker Aug 27, 2024

Choose a reason for hiding this comment

eirikbacker Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

mimarz Aug 27, 2024

Choose a reason for hiding this comment

eirikbacker Aug 27, 2024

Choose a reason for hiding this comment

eirikbacker Aug 27, 2024

Choose a reason for hiding this comment

mimarz Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

eirikbacker Aug 27, 2024

Choose a reason for hiding this comment

mimarz Aug 27, 2024

Choose a reason for hiding this comment

eirikbacker Aug 27, 2024

Choose a reason for hiding this comment

mimarz commented Aug 27, 2024

mimarz commented Aug 20, 2024 •

edited

Loading

changeset-bot bot commented Aug 20, 2024 •

edited

Loading

github-actions bot commented Aug 20, 2024 •

edited

Loading

eirikbacker Aug 27, 2024 •

edited

Loading

mimarz Aug 27, 2024 •

edited

Loading

eirikbacker Aug 27, 2024 •

edited

Loading

mimarz Aug 27, 2024 •

edited

Loading