Swatch group
| Token | Type | Value | Resolved | Deprecated | Deprecated comment | Replaced by |
|---|---|---|---|---|---|---|
| swatch-group-border-color | alias | {gray-1000} | light: rgb(0, 0, 0) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) dark: rgb(255, 255, 255) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) wireframe: rgb(0, 0, 0) |
No | - | - |
| swatch-group-border-opacity | opacity | 0.2 | 0.2 |
No | - | - |
| swatch-group-spacing-spacious | dimension | 6px | 6px |
Yes | Use semantic token container-gap-2x-small instead. NOTE: All other swatch gaps need to use these semantics too | Replaced by container-gap-2x-small |