[community-group] How to define a token that references a local file? (#132)

CITguy has just created a new issue for https://github.com/design-tokens/community-group:

== How to define a token that references a local file? ==
> As an author of design tokens, 
> I would like to define a $value as a relative path to a bundled asset, 
> so that Translation Tools know to treat the value differently than a plain string.

I'm building out a tiered design system, in which I'd like our core package to ship design tokens alongside universal (likely binary) assets (e.g., logos, icons, fonts, etc.).  

For example, given the following abridged directory structure:

```
package/
  dist/
    tokens.json
    assets/
      images/
        icons/
          alert.svg
          bookmark.svg
          ...
```

I'd like to define an "assets.*" group of tokens, all of which whose value is a relative path from `tokens.json` to a bundled SVG asset in `assets/images/icons/`.

_($value strings are relative paths from `tokens.json`)_
```json
{
  "assets": {
    "icons": {
      "alert": { "$value": "assets/images/icons/alert.svg" },
      "bookmark": { "$value": "assets/images/icons/bookmark.svg" }
    }
  }
}
```

The current design tokens format spec doesn't seem to be clear on how to define a `$value` that is a reference to a file external to the `.tokens.json` file.  My best guess would be to omit `$type` altogether and set `$value` to a string (implicit `$type: string`), but there's no guarantee that a Translation Tool would know to treat the value as a file path.


## My Use Case

I ship SVG icons in my core package so that downstream dependencies can take those files and translate them into environment-specific assets. 

For example...

1. **core:** 
    - provides a directory of optimized SVGs to use as inputs for translation tools
    - all tooling used by downstream deps requires a directory of SVGs as their input
2. **core → web:** 
    - combine SVGs into a `<symbol>` sprite sheet
    - potentially generate `*.css` file and icon font for raw CSS consumption
3. **core &rarr; flutter:**
    - generate TTF icon font from SVGs
    - generate `*.dart` code to consume individual icons from the font

Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/132 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 16 May 2022 23:56:45 UTC