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.

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

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

Open
MatthiasDunker opened this issue May 26, 2022 · 1 comment

Comments

@MatthiasDunker
Copy link

MatthiasDunker commented May 26, 2022

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 MatthiasDunker changed the title Limiting of composite token types to a given set is not platform agnostic Limiting composite token types to a given set is not platform agnostic May 26, 2022
@MatthiasDunker
Copy link
Author

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"
      }
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants