Extend future Basis tokens + update W3C DTCG format

[jiromaykin]

Summary

1. Our 'brand' directory must partially be renamed as 'common' as per this Slack NLDS discussion: https://codefornl.slack.com/archives/C01DAT4TRPF/p1771577384622079?thread_ts=1771512003.731269&cid=C01DAT4TRPF

2. the W3C token syntax is changing:
   The draft Design Token Format drives the structure of these design tokens. To integrate with Figma we will be using the updated W3C DTCG format (sets a Dollar sign in its specified properties, like $type,
   $value, $description, $deprecated, $extensions). Token and group names MUST NOT begin with
   the $ character.

3. Adding experimental Basis tokens for testing import in Figma.
   In future we may be using the Theme Wizard (only for basisthema and startthema) to inherit from the Figma Basis tokens: https://theme-wizard.nl-design-system-community.nl/

4. Note there will be name differences: "volg NLDS naamgeving (danger→error, warning→danger)"

5. extra difficulty: OIP does nto have set values for main colors but uses an HSL variable so the colors wil work in our OIP color picker

6. Refactoring of OIP project variables necessary H"SL-variabelen in error: de originele CSS custom properties heetten --oip-color-danger-, maar nu zitten ze genest onder alerts.error. Variabelenamen zijn aangepast naar --oip-color-alerts-error- om consistent te zijn met de nieuwe structuur. Als Style Dictionary die namen automatisch genereert vanuit de JSON-paden, klopt dit — maar als je ergens in je CSS al --oip-color-danger-h gebruikt, moet dat nog veranderd worden. "

More Documentation:
https://nldesignsystem.nl/handboek/huisstijl/themas/start-thema/
Example of Basis tokens: https://www.figma.com/design/FqAr99wvrlHxTJYAHkFRQN/NL-Design-System---Bibliotheek?node-id=22161-58828&t=HoYMBSXYkEc1RtBr-1

If everyone uses the the same Basis theme in future, it will be much easier to change 'huisstijl' and for all municipalities to use the same structure for design-tokens.

packages/
  ├── figma/
  │   └── oip.tokens.json
src/
  ├── brnd/
  │   └── openinwoner/
  │            └── color.tokens.json
  │            └── layout.tokens.json
  │            └── etcetera...
  ├── common/
  │   └── openinwoner/
  │            └── color.tokens.json
  │            └── layout.tokens.json
  │            └── etcetera...
  ├── community/
  │   └── denhaag/
  │            └── action.tokens.json
  │            └── etcetera...
  │   └── nl/
  │            └── number-badge.tokens.json
  │            └── etcetera...
  │   └── utrecht/
  │            └── skiplink.tokens.json
  │            └── etcetera...
  └── components/
      └── paragraph-modifier.tokens.json
      └── combobox.tokens.json
      └── etcetera...

Layout changes: token names are now quite different:

Oud	Nieuw
tiny (2px)	space.*.xs
small (4px)	space.*.sm
medium (8px)	space.*.md
large (16px)	space.*.xl
extraLarge (24px)	space.*.3xl
giant (32px)	space.*.4xl
mega (80px)	— valt tussen 5xl (48px) en 6xl (64px)

Issue References

• GitHub task: "github nl-design-system > mijn-services > issues/355"

Checklist

• Bumped version number in both package.json and in package-lock.json (can also be done after merge with npm version ...)