TokenCSS (@tokencss) header
TokenCSS (@tokencss) profile picture

TokenCSS

@tokencss

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

tokencss.com
Joined January 2022
  • Tweets25
  • Following7
  • Followers748
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
31
530
4️⃣ You can launch a Token CSS demo project from the tokencss.com page with but a button! xitter.cf/tokencss/status/157183…
TokenCSS (@tokencss) profile pictureTokenCSS@tokencss19 Sep 2022
Replying to @tokencss @code @astrodotbuild
Want to try it for yourself? Take our demo project for a spin on @stackblitz! stackblitz.com/edit/tokencss…
Token CSS - StackBlitz

Token CSS - StackBlitz

Basic Token CSS + Astro demo

stackblitz.com
1
1
2
Replying to @code
Yes, would love to move from Code to a generic LSP!
"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
"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
Design Tokens have a hierarchy, but custom properties are flat. Token CSS manages those relationships and the naming schemes for you CSS Property => scale[token] => custom prop border-radius => radius[$‍md] => var(--radius-md) You write `$‍md`, the tool automates the rest
1
4
"Why?" (see also "How is this different from writing custom properties by hand?") DIY is a valid option! But Token CSS isn't about generating custom properties for you, nor is it about being terse. It's about removing the mental overhead that comes with the manual workflows
1
2
"How are media tokens supposed to work?" Still trying to figure that out! We'll either compile them to `@‍custom-media` properties (which might require an additional compile step) or just substitute in the token text. Feel free to weigh in!
1
2
"How am I supposed to distinguish token values from CSS keywords?" Great point! We assumed that semantic highlighting in our @Code extension would address this, but upon reflection, `$` prefixes for token values should be required. Coming in the next minor!
2
6
Some frequently asked questions about @tokencss, answered.
3
5
33
It's official: Token CSS is the first CSS-in-CSS library.
Nate Moore is on 🦋 (@n_moore) profile pictureNate Moore is on 🦋@n_moore19 Sep 2022
Replying to @FredKSchott
The first CSS-in-CSS library!
5
1
80
Replying to @tokencss @code @astrodotbuild
Want to try it for yourself? Take our demo project for a spin on @stackblitz! stackblitz.com/edit/tokencss…
Token CSS - StackBlitz

Token CSS - StackBlitz

Basic Token CSS + Astro demo

stackblitz.com
2
1
16
Our official @Code extension unlocks the full power of Design Tokens in your CSS. It already works in @astrodotbuild files, too! 🎉 marketplace.visualstudio.com…
3
5
1
52
Too much CSS-in-HTML and CSS-in-JS. Not enough CSS.
2
13
1
75
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
1
22
1
1
2
8
TokenCSS retweeted
Kaelig (@kaelig) profile picture
Kaelig
@kaelig15 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

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) profile picture🐴 Frontend Horse@FrontendHorse15 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
Load more