design-tokens / community-group

This is the official DTCG repository for the design tokens specification.
https://tr.designtokens.org
Other
1.54k stars 62 forks source link

Limiting composite token types to a given set is not platform agnostic #134

Open MatthiasDunker opened 2 years ago

MatthiasDunker commented 2 years ago

The Introduction of the current Draft Report says:

Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies.

Why then are composite tokens limited to a specific set (Stroke, Border, Transition, Shadow, Gradient, Typography — which seem to be related to CSS shorthands)? And is this really platform agnostic?

For example, if I have a platform that has a use case that relies on color pairs (background, foreground), can I define a token following the current draft? Can I define my own composite type?

Type colorPair could be defined as

{
  "colorPair": {
    "$type": "typeDefinition",
    "$value": {
      "foreground": "color",
      "background": "color"
    }
  }
}

Usage would be:

{
  "color-token": {
    "$type": "colorPair",
    "$value": {
      "foreground": "#00000088",
      "background": "#ff0000"
    }
  }
}

What do you think?

MatthiasDunker commented 2 years ago

Another (creative) example could be responsive values, if this makes sense. A token could have multiple values distinguished by variant names.

Type could be responsiveDimension.

{
  "responsiveDimension": {
    "$type": "typeDefinition",
    "$value": {
      "sm": "dimension",
      "md": "dimension",
      "lg": "dimension",
      "xl": "dimension",
    }
  }
}

Usage would be:

{
  "grid": {
    "gutter": {
      "$type": "responsiveDimension",
      "$value": {
        "sm": "24px",
        "md": "32px",
        "lg": "32px",
        "xl": "40px"
      }
    }
  }
}