TokenCSS@tokencss

Bringing the power of CSS-in-JS to uh… CSS ✨ • Tweets by @n_moore

tokencss.com
Joined January 2022
3 Photos and videos
Token CSS is a new tool to seamlessly integrate Design Tokens into your dev workflow ✨ 😍 Author `.css` + `<style>` blocks 💄 Powered by custom properties ⚙️ Config uses @DesignTokens format 🚀 Built-in, modern presets 🧑‍🚀 @astrodotbuild support tokencss.com
main.css file containing the following code: .container { padding: md; /* var(--size-md) */ margin: lg auto; /* var(--size-lg) auto */ max-width: 8xl; /* var(--size-8xl) */ } .box { background: primary; /* var(--color-primary) */ width: full; /* var(--size-full) */ height: 3xl; /* var(--size-3xl) */ border-radius: md; /* var(--radius-md) */ }

ALT main.css file containing the following code: .container { padding: md; /* var(--size-md) */ margin: lg auto; /* var(--size-lg) auto */ max-width: 8xl; /* var(--size-8xl) */ } .box { background: primary; /* var(--color-primary) */ width: full; /* var(--size-full) */ height: 3xl; /* var(--size-3xl) */ border-radius: md; /* var(--radius-md) */ }

20
97
532
TokenCSS retweeted
Tomek Sułkowski
@sulco
23 Sep 2022
4️⃣ You can launch a Token CSS demo project from the tokencss.com page with but a button!
TokenCSS@tokencss
19 Sep 2022
Replying to @code @astrodotbuild
Want to try it for yourself? Take our demo project for a spin on @stackblitz! stackblitz.com/edit/tokencss…
1
1
2
Some frequently asked questions about @tokencss, answered.
3
5
33
more replies
"Hmm... I don't get it." That's on us more than it's on you! We don't have proper docs yet, but we're working on it 😉
1
4
"Can you automatically generate utility classes?" The point of Token CSS is to keep your styles in `.css`, so we're not really considering this. There are lots of other great tools that do this, though!
1
4
It's official: Token CSS is the first CSS-in-CSS library.
Nate Moore is on 🦋@n_moore
19 Sep 2022
Replying to @FredKSchott
The first CSS-in-CSS library!
5
81
Token CSS is a new tool to seamlessly integrate Design Tokens into your dev workflow ✨ 😍 Author `.css` + `<style>` blocks 💄 Powered by custom properties ⚙️ Config uses @DesignTokens format 🚀 Built-in, modern presets 🧑‍🚀 @astrodotbuild support tokencss.com
main.css file containing the following code: .container { padding: md; /* var(--size-md) */ margin: lg auto; /* var(--size-lg) auto */ max-width: 8xl; /* var(--size-8xl) */ } .box { background: primary; /* var(--color-primary) */ width: full; /* var(--size-full) */ height: 3xl; /* var(--size-3xl) */ border-radius: md; /* var(--radius-md) */ }

ALT main.css file containing the following code: .container { padding: md; /* var(--size-md) */ margin: lg auto; /* var(--size-lg) auto */ max-width: 8xl; /* var(--size-8xl) */ } .box { background: primary; /* var(--color-primary) */ width: full; /* var(--size-full) */ height: 3xl; /* var(--size-3xl) */ border-radius: md; /* var(--radius-md) */ }

20
97
532
Our official @Code extension unlocks the full power of Design Tokens in your CSS. It already works in @astrodotbuild files, too! 🎉 marketplace.visualstudio.com…
1:16
3
5
52
Want to try it for yourself? Take our demo project for a spin on @stackblitz! stackblitz.com/edit/tokencss…

Token CSS - StackBlitz

Basic Token CSS + Astro demo

stackblitz.com
2
16
Too much CSS-in-HTML and CSS-in-JS. Not enough CSS.
3
13
77
What is @tokencss? The most seamless way to bring design tokens into code—no new syntax to learn, just CSS and a bit of magic ✨ Stay tuned.
2
1
22
0:07
1
1
8
TokenCSS retweeted
Kaelig@kaelig
15 Mar 2022
Replying to @n_moore @tokencss @astrodotbuild
Thank you for the shout out and your work advocating for design tokens! Excited about the tooling you build to help lower the barrier of entry into this world 🙏🏻
1
3
Thanks for having us, @FrontendHorse! ❤️ If anybody wants to get involved with TokenCSS, feel free to drop by our GitHub or DM @n_moore. github.com/tokencss/tokencss

GitHub - tokencss/tokencss

Contribute to tokencss/tokencss development by creating an account on GitHub.

github.com
1
1
6
If you love design tokens almost as much as you love CSS, @tokencss is the tool for you! Join us for the debut of Token CSS! Might as well play with @astrodotbuild, too. 😉
🐴 Frontend Horse@FrontendHorse
15 Mar 2022
📢 Today on the stream, we're getting the DEBUT of a brand new tool for building design systems: Token CSS! ✨ @n_moore will introduce and demo Token CSS, and chat design tokens in general! Follow and watch live: frontend.horse/twitch
Frontend Horse Livestreams: Introducing Token CSS. Nate Moore and host Alex Trost. Tuesday, Mar 15, 12:00 PM EST. https://frontend.horse/twitch

ALT Frontend Horse Livestreams: Introducing Token CSS. Nate Moore and host Alex Trost. Tuesday, Mar 15, 12:00 PM EST. https://frontend.horse/twitch

1
7
28
👀 github.com/tokencss/tokencss…
6
Lately I've been working on @tokencss, a tool for CSS that will conform to the upcoming @DesignTokens specification. If you care about this kind of thing, the spec is currently being written and you can give feedback on GitHub! github.com/design-tokens/com…

Issues · design-tokens/community-group

This is the official DTCG repository for the design tokens site and specification. - Issues · design-tokens/community-group

github.com
1
1
15
Load more