Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

design tokens : unit conversion #388

Conversation

romainmenke
Copy link
Member

@romainmenke romainmenke commented May 21, 2022

reading : https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/


When values and units are fully determined by designers and/or design tools we take away control from developers.

In some cases this is fine as developers (will soon) have tools to manipulate values in native CSS. (e.g. calc or relative color syntax).

But some units are different.
px vs. rem is meaningful and they aren't equivalent.

Developers should have the freedom and tools to convert values from design tokens to the correct unit for each rule and property.

.unit-conversion {
	padding-bottom: design-token('space.small' to px);
	padding-bottom: design-token('space.small' to rem);
}

Without a conversion mechanic designers and developers will have to declare each value twice, once for each unit.

  • designers might not know the root font size
  • you lose the connection between components/views and used design tokens
.unit-conversion {
	padding-bottom: design-token('space.small.px');
	padding-bottom: design-token('space.small.rem');
}

Alternatively designs and developers do nothing and settle on inaccessible results :/


I hope this won't explode later into a lot of conversions.
But I think it will be fine as I can only think of rem vs. px having this complexity.

If there are more units please let me know.

@romainmenke romainmenke marked this pull request as ready for review May 21, 2022 08:37
Copy link
Member

@Antonio-Laguna Antonio-Laguna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this! Thanks for handling this!

@romainmenke romainmenke merged commit 93e6e6a into design-tokens--affectionate-sponge-94364bcfba May 21, 2022
@romainmenke romainmenke deleted the design-tokens--unit-conversion--rational-maine-coon-b251635976 branch May 21, 2022 08:46
romainmenke added a commit that referenced this pull request May 22, 2022
* design tokens

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* feedback

* gather tokens first

* feedback

* wip

* implement dereferencing

* error handling

* typo

* design tokens : unit conversion (#388)

* update docs

* add syntax docs

* update docs

* better docs gen

* cleanup

* more docs

* more docs

* cleanup

* improve the typing

* more examples

* stricter value and plugin option handling

* more docs

* fix

* document VSCode extension

* clarify multiple when

* cleanup
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants