When using bitstyles in a project, it is common to update some colors or the sizing scale. If this is only changing the values of colors and sizes, but keeping the naming the same, then this is not an issue. When the project is using a totally different sizing scale with different names for each size (e.g. 2xs instead of s2), or different names for each color (e.g. brand-primary instead of brand-1), this causes problems:
the values used for the utility classes no longer exist. The default config for .u-padding explicitly calls for each size by name. The colors used by the default config for .u-bg are also hardcoded
the names for those classes are also explicitly based on the names of the sizes, and are hardcoded in the config
This means that after changing those design token names, users of bitstyles have to override the config of lots of other modules to get a passing build.
We could provide a default config that iterates over each of the available design token scales in question (colors, sizes, font-sizes, line-heights, shadows…), and output classes using those values and those names.
This would increase the overall size of the CSS bundle generated, so let’s also start recommending something like purgeCSS?
When using bitstyles in a project, it is common to update some colors or the sizing scale. If this is only changing the values of colors and sizes, but keeping the naming the same, then this is not an issue. When the project is using a totally different sizing scale with different names for each size (e.g.
2xsinstead ofs2), or different names for each color (e.g.brand-primaryinstead ofbrand-1), this causes problems:.u-paddingexplicitly calls for each size by name. The colors used by the default config for.u-bgare also hardcodedThis means that after changing those design token names, users of bitstyles have to override the config of lots of other modules to get a passing build.
We could provide a default config that iterates over each of the available design token scales in question (colors, sizes, font-sizes, line-heights, shadows…), and output classes using those values and those names.
This would increase the overall size of the CSS bundle generated, so let’s also start recommending something like purgeCSS?