- From: Maneesh via GitHub <sysbot+gh@w3.org>
- Date: Fri, 17 Jul 2020 14:51:35 +0000
- To: public-design-tokens-log@w3.org
Hi everyone,
I really like the idea that @oscarotero proposed. Something that I think is worth defining and perhaps naming is that some of this specification will detail a fixed set of options, and the rest will detail how those options are composed. I think this is where the discussion around variable and css custom properties are heading as well.
I find this very similar to the distinction Brad Frost makes in [Atomic Web Design](https://bradfrost.com/blog/post/atomic-web-design/) between atoms and molecules.
Atoms are basic building blocks. In our use case, the defined options or definitions:
```css
colors {
primary: rgba(233 2 0 0.3);
secondary: #333;
}
sizes {
small: 14px;
medium: 20px;
}
font-families {
heading: Hoefler Text;
display: Inter;
}
```
While molecules are groups of atoms combined together. In our case, the compositions which could use the previously defined options:
```css
typography {
main {
font-family: $font-families.display;
font-size: $sizes.medium;
color: $colors.primary;
}
}
```
I think this distinction is worth noting and naming because generating new compositions do not necessarily require new definitions, or we may choose that definitions are not required at all:
```css
typography {
main {
font-family: Inter;
font-size: 20px;
color: rgba(233 2 0 0.3);
}
}
```
Though I think there are advantages beyond [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) that definitions/options/variables solve;
- They allow an aspect of a Design System to be fixed and versioned. You could generate new compositions without adding to the definitions.
- They allow for Human and Machine readable audits of what is in the system
- They open a way for tools to report which definitions are used and which are not
- Definitions could be shareable (if the syntax is fixed) so that an existing composition could inherit a from new definitions easily
- Overrides from the definitions would need to be explicit
--
GitHub Notification of comment by ManeeshChiba
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/1#issuecomment-660150355 using your GitHub account
Received on Friday, 17 July 2020 14:51:37 UTC