Clearer naming and separation of non-semantic design tokens

[unekinn]

The current naming convention for design tokens makes it hard to see at a glance if a token is a primitive token or a theme-level token (both of which should never be referenced directly from Figma designs or code), or if it is a semantic token.

Suggestion

• Prefix primitives with primitive.<token type>.<brand OR global>
• Prefix theme-level tokens with theme.<token type> (requires Rename theme, theme2, etc to actual brand names #2885 to be fixed first)
• Keep semantic tokens as is

This makes the references and variables easy to scan: if they begin with primitive or theme, they are not to be used directly.

Examples

primitives/modes/color-scheme/dark/global.json

Before:

{
  "global": {
    "blue": {
      "1": {

After:

{
  "primitive": {
    "color": {
      "global": {
        "blue": {
          "1": {

primitives/modes/color-scheme/dark/theme.json

Before:

{
  "theme": {
    "accent": {
      "1": {

After (renamed to primitives/modes/color-scheme/dark/digdir.json):

{
  "primitive": {
    "color": {
      "digdir": {
        "accent": {
          "1": {

themes/theme.json

Before:

{
  "color": {
    "accent": {
      "1": {

After (renamed to themes/digdir.json):

{
  "theme":
    "color": {
      "accent": {
        "1": {

Changes to references

• global.blue.1 → primitive.color.global.blue.1
• theme.accent.1 → primitive.color.digdir.accent.1
• color.accent.1 → theme.color.accent.1
• color.accent.background-default unchanged as it is a semantic token

[mimarz]

We'll have to look at this after #2674