Design token framework — adopt a unified design language across platforms, codebases, and teams

Overview

Palette

Design tokens framework with atomic classes for React and Master CSS.

Deliver a consistent visual identity across your apps with design tokens, with your brand identity as code (BIaC) - from colors, typography, spacing or logos with your guidelines.

Features

  • Strongly typed end-to-end with TypeScript
  • First class React and Master CSS support
  • Minimal footprint: ~2KB with no dependencies
  • Production ready
  • Dynamic themes, switch on the fly

Usage

TSX Example

Tests

Palette is built with TypeScript and Bun, to run tests you need to run: bun wiptest

Development

Palette is developed in TypeScript and is published on npm, it uses the Bun runtime for development and tests, but can be used in projects designed for other runtimes.

You might also like...
ratlab is a programming platform designed loosely for hobbyist and masochist to analyse and design stuff and things that transform our world?
ratlab is a programming platform designed loosely for hobbyist and masochist to analyse and design stuff and things that transform our world?

ratlab A programming language developed by Quinn Horton and Jay Hunter. ratlab is a programming platform designed loosely for hobbyists and masochists

Oxygen is a voice journal and audio analysis toolkit for people who want to change the way their voice comes across.

Oxygen Voice Journal Oxygen is a voice journal and audio analysis toolkit for people who want to change the way their voice comes across. Or rather, i

High-performance and normalised trading interface capable of executing across many financial venues

High-performance and normalised trading interface capable of executing across many financial venues. Also provides a feature rich simulated exchange to assist with backtesting and dry-trading.

Browse and listen to thousands of radio stations across the globe right from your terminal 🌎 📻 🎵✨
Browse and listen to thousands of radio stations across the globe right from your terminal 🌎 📻 🎵✨

TuneIn CLI A command line interface for TuneIn Radio. You can search for stations, play them, and see what's currently playing. 🚚 Installation Compil

Sleek is a CLI tool for formatting SQL. It helps you maintain a consistent style across your SQL code, enhancing readability and productivity.

Sleek: SQL Formatter ✨ Sleek is a CLI tool for formatting SQL. It helps you maintain a consistent style across your SQL code, enhancing readability an

Desktop app for reading and downloading manga. With clean distraction-free design and no clutter

Tonbun Tonbun is a desktop app for reading and downloading manga. With clean distraction-free design and no clutter. Build with Rust, Tauri, Vue.js, a

Set Shell Environment Variables across multiple shells with a single configuration file.

Xshe – Cross-Shell Environment Vars xshe allows for setting Shell Environment Variables across multiple shells with a single TOML configuration file.

A slightly smart clipboard tool - leverage the filesystem to persist across machines after shutdown.

clipd A slightly smart clipboard using the filesystem under ~/.clipd to persist after shutdown. cowsay "clipd is great" | clipd copy clipd paste ____

Helps you keep track of time for team members across different time zones & DST changes

Teamdate Helps you keep track of time for team members across different timezones and other daylight saving changes based off their location. Because

Comments
  • Feature Request: Mix macro formatting

    Feature Request: Mix macro formatting

    Preliminary checklist

    • [X] I understand that all communication must be in English
    • [X] I read the Documentation
    • [X] I read the Contributing guide
    • [X] I agree to follow the Code of Conduct
    • [X] I searched the issues and discussions but couldn't find anything (or linked relevant results below)

    Problem

    Currently the formatting is very verbose:

    mix! {
    	base: "bg:yellow",
    	variants: {
    		disabled: "bg:{} f:{} my:{}" => (
    			tokens.color("yellow"),
    			tokens.color("red"),
    			tokens.spacing("8")
    		),
    		bold: "f:bold"
    	},
    }
    

    The current implementation of the macro also doesn't cover the "base" field and also has no support for the "compounds" field.

    Solution

    The implementation should look something similar to this:

    mix! {
    	base: "bg:yellow",
    	variants: {
    		disabled: "bg:{tokens.color(yellow)} f:{tokens.color(red)} my:{tokens.spacing(8)}",
    		bold: "f:bold"
    	},
    	compounds: [
    		[{ label: "example", bold: true }, "bg:{tokens.color("red")}"],
    	]
    }
    

    Alternatives

    N/A

    Contribution

    No, I cannot contribute further

    Keywords

    mix, macro, formatting, variants, compounds

    kind/enhancement status/in-progress 
    opened by itsezc 6
Owner
Foretag
A collective open source group.
Foretag
A simple, lightweight and extensible command line argument parser for rust codebases

A simple, lightweight and extensible command line argument parser for rust codebases. This crate aims to provide you with an easy-to-use and extensibl

Victor Ndaba 20 Nov 12, 2022
plonky2 recursion framework handling different circuits in unified way.

generic_recursion Version: 0.1.0 generic_recursion is a crate that allows to easily aggregate an unlimited amount of plonky2 proofs, generated with a

null 6 Mar 4, 2024
UniSBOM is a tool to build a software bill of materials on any platform with a unified data format.

UniSBOM is a tool to build a software bill of materials on any platform with a unified data format. Work in progress Support MacOS Uses system_profile

Simone Margaritelli 32 Nov 2, 2022
A Rust curses library, supports Unix platforms and Windows

pancurses pancurses is a curses library for Rust that supports both Linux and Windows by abstracting away the backend that it uses (ncurses-rs and pdc

Ilkka Halila 360 Jan 7, 2023
Use Thunk to build your Rust program that runs on old Windows platforms, support Windows XP and more!

Use Thunk to build your Rust program that runs on old platforms. Thunk uses VC-LTL5 and YY-Thunks to build programs that support old platforms. So, ho

null 6 May 21, 2023
Tool that mirrors questions and resolutions from other forecasting platforms to Manifold.

Tool that mirrors questions and resolutions from other forecasting platforms to Manifold. Managram commands People can interact with the bot by sendin

Joris Kerkhoff 3 Nov 7, 2023
A mono-repo for the Engineering Practice Domains of Development, Data, Infrastructure, Testing, and Platforms

Engineering Practice Domains Introduction Welcome to the Engineering Practice Domains at Fearless! This repository serves as a monorepo for our collab

Fearless 7 Apr 29, 2024
The auto-managed -sys crate for Apple platforms using bindgen directly from build environment

apple-sys Apple platforms have a rather monotonous programming environment compared to other platforms. On several development machines, we will depen

Jeong, YunWon 34 Apr 17, 2023
.NET PhysX 5 binding to all platforms(win, osx, linux) for 3D engine, deep learning, dedicated server of gaming.

MagicPhysX .NET PhysX 5 binding to all platforms(win-x64, osx-x64, osx-arm64, linux-x64, linux-arm64) for 3D engine, deep learning, dedicated server o

Cysharp, Inc. 37 Jul 4, 2023
Web-based tool that allows browsing and comparing symbol and type information of Microsoft Windows binaries across different versions of the OS.

WinDiff About WinDiff is an open-source web-based tool that allows browsing and comparing symbol and type information of Microsoft Windows binaries ac

Erwan Grelet 208 Jun 15, 2023