Re: [community-group] How to do tokens that share a name with a group (#97)

Just wanted to chime in briefly here to say that I'm experimenting with setting up design tokens using the DTCG format, and our current color variables are set up something like this:

```css
:root {
  --color-gray: var(--color-gray-50);
  --color-gray-10: hsl(214deg, 15%, 10%);
  --color-gray-20: hsl(214deg, 15%, 20%);
  --color-gray-30: hsl(214deg, 15%, 30%);
  --color-gray-40: hsl(214deg, 15%, 40%);
  --color-gray-50: hsl(214deg, 15%, 50%);
}
```

My first intuition was to try to replicate this by using `$value`, without worrying about the reference/alias to start with:

```json
{
  "color": {
    "$type": "color",
    "base": {
      "gray": {
        "$value": "#6c7d93"
        "10" : { "$value": "#16191d" },
        "15": { "$value": "#21252c" },
        "20"  : { "$value": "#2b323b" },
        "30"  : { "$value": "#414b58" },
        "40"  : { "$value": "#576475" },
        "50"  : { "$value": "#6c7d93" }
      },
    }
  }
}
```

This does not work in style-dictionary, so I came here and found this issue.  I think it would be great to have _some_ kind of guidance on how to accomplish this.  I don't have strong opinions on how it should be done or the various tradeoffs, but what I posted above was the most intuitive for me personally.  I'm just getting started with this, so I thought I'd share my "beginner mindset" in case that's useful.  :)

-- 
GitHub Notification of comment by IanVS
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/97#issuecomment-1969278996 using your GitHub account


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

Received on Wednesday, 28 February 2024 15:51:03 UTC