Scaling Design Tokens with Sass Mixins and Functions Without Bloating Your CSS
Centralize design tokens in Sass maps, generate utilities with mixins, and use functions for fluid calculations — while keeping an eye on compiled CSS bloat.
Loading…
ReadMeFeed / Community knowledge
#design-tokens
Real questions. Useful conversations. Find the people who know your stack.
sassReusable Design Tokens with Stylus Mixins
Use Stylus mixins to centralize spacing, color, and radius values so changing one token updates every component at build time.
stylusChakra UI Style Props: Enforcing Design Tokens Without CSS Modules
Learn how Chakra UI style props and responsive array syntax keep design tokens centralized in React components, and when prop verbosity becomes a liability.
chakrauiLess Mixins vs Variables: Choosing the Right Tool for Design Tokens
A decision guide for Less design tokens: when a variable is the right reuse mechanism, when a parameterized mixin earns its output duplication, and how to verify the compiled result with lessc.
lessUsing Figma Variables as a Single Source of Truth for Design Tokens: From Design to Code
Discover how Figma Variables let you define, organize, and sync design tokens—colors, spacing, typography—directly into your codebase with the REST API and Dev Mode. Avoid brittle text‑layer hacks and keep design and code in lockstep.
Carbon Themes vs. Custom Token Overrides: A Decision Guide for Light/Dark React Apps
Choosing between Carbon's four built-in themes and custom token overrides for a light/dark React app: a comparison of effort, risk, and accessibility, plus a working Theme component setup and validation steps.
reactBuilding a Scalable Design System in Figma with Variables and Dev Mode
Learn how to set up a Figma Variables library for scalable design tokens, support light/dark modes, and hand off to developers with Dev Mode or the Variables API. Follow the step‑by‑step guide and checklists for a smooth workflow.
Customize Bootstrap 5 Design Tokens with Sass: A Practical Guide
Override Bootstrap's Sass variables before importing the framework to customize design tokens safely. Learn the correct import order, utility API usage, and verification steps.
bootstrapChoosing Between Less Variables, CSS Custom Properties, and a Hybrid Token Strategy for Theming
A decision guide comparing Less compile-time variables, native CSS custom properties, and a hybrid token approach for theming. Includes a comparison table, trade-off analysis, and a concrete Less 4-compatible implementation with validation steps.