mrmartineau / design-system-utils Goto Github PK
View Code? Open in Web Editor NEW๐ฉโ๐จ Access your design tokens with ease
Home Page: https://zander.wtf
License: MIT License
๐ฉโ๐จ Access your design tokens with ease
Home Page: https://zander.wtf
License: MIT License
As I mentioned here, baseFontSize
should now be a string
with the unit included so that it can easily be used with ds.get('type.baseFontSize')
.
Hi @mrmartineau, this is more of a question/concern than a definitive issue. I've been testing including this in the production bundle and I noticed that just importing the DesignSystem
increases my bundle size by 500K which is unusual.
Looking at the package.json
, it seems like maybe more than just the compiled index.js
is being included, and instead having a compiled index.js
as the only thing that the package.json is linked to would help?
So, I was wondering if you have seen this issue as well? Or have any ideas on what might be going on?
FWIW, I was testing with this starter kit (which is what my setup is based on) incase you wanted to try it out as well: https://github.com/ctrlplusb/react-universally
Thank you!
Hi! Just found this project via Twitter and noticed that it's fairly similar to some of the work we're doing on https://styled-system.com and https://theme-ui.com. I can see some differences in the general API, but was wondering if you'd be interested in combining efforts and maybe bringing some of the ideas here into the Theme UI project, which is small at the moment, but we'd like to try to standardize around some common specifications to enable better interoperability with tools like this one.
Feel free to ping me here or on Twitter if you prefer
Hi @mrmartineau, I ran into a bug with the baseFontSize
.
In the README, and the example, you use baseFontSize: '20px
. However, by mentioning the units there it breaks the pxTo
function when called from fontSize
function, since the pxTo
function directly uses the passed value as a denominator without stripping out 'px' from the string.
design-system-utils/src/index.js
Lines 37 to 39 in 2968a90
design-system-utils/src/calcs.js
Line 6 in 2968a90
I believe the two solutions can be:
Recommend baseFontSize
always be used without unit and apply px
as a default unit when someone does ds.get('type.baseFontSize')
. That could also come through a setting prop.
Recommend that users always specify baseFontSize
with px
or a similar unit but always strip that out when using it in the pxTo
function.
FWIW, Solution 1 feels cleaner personally to me.
Thoughts?
Proper tests are needed to ensure no bugs are introduced.
Hi @mrmartineau ,
First of all let me thank you for this project, it is really helping us to build our design system. I think that the idea behind it is radically simple, but radically powerful as well.
That being said, I would like to report an issue I have been having while using this project along with create-react-app, nwb and Next.js.
Let's focus in create-react-app, since the problem is the same with all the aforementioned tools.
https://asciinema.org/a/4GmMG7GzlGuTbd43COKQxHliO
I used the example code, but the code itself is not relevant.
As you can see in the asciinema, it can be fixed by changing the following lines in the packages.json:
design-system-utils/package.json
Lines 5 to 6 in 74f9e34
The problem is that create-react-app don't compile the modules source with babel, triggering the start script I don't get the error because the js is not minified, but generating the production build the js is minified and the minification fails because the source that webpack imports is ./src/index.js
which is written in ES2015 and has tokens the minifier don't recognize.
Looking at the webpack docs: resolve.mainFields
It looks like themodule
field is in the second priority order (preceded by browser
and followed by main
) so is the one used to resolve the package.
browser
field to the package.jsonTheoretically it would fix the issue, but I would like to know your opinion before submitting a PR.
Hi again @mrmartineau! I've been finding in a couple of cases where I'd like to get the px
value of my font from the modular scale - something like the reverse of pxTo
function which given a value in em
calculates the px value using the baseFontSize
?
Is that something you can see being useful to others as well?
Is there any chance to include something like what's being done here, but the powerfulness of design-system-utils: https://github.com/planetflash/sharing_variables_js_sass
I'd love to know the difference of design-system-utils with https://github.com/jxnblk/styled-system .
Is it similiar or have different goals?
Hi @mrmartineau, thank you for putting out this library! I've been migrating my default global variables to this helpful system. While doing this, I've run into a pattern with my font sizes.
Essentially, the design system enforce font size on one dimension (which is size), whereas I notice that a lot of the code wrt font sizes tends to be in two dimension (screen and size). For example, I have a different default baseFontSize
for smaller screens vs larger screens.
So, to work around that, my sizes
area is looking like the following:
type: {
baseFontSize: 20,
/*
* Size scale for fonts:
* Micro < Mini < X-Small < Small < Medium < Big
*/
sizes: {
/*
* Small Screen Micro
* 11.099px, 0.555em @ 20
*/
smallScreenMicro: -5,
/*
* Regular Screen Micro
* Small Screen Mini
* 12.486px, 0.624em @ 20
*/
regularScreenMicro: -4,
smallScreenMini: -4,
It feels intuitively to be a two dimensional array where I want to specify the scale for different screens that I am condensing into one. Does that make sense?
Curious about your thoughts on this, and if you've noticed a similar pattern as well?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.