https://github.com/shannakae/daisyuitokens

The goal of this project is to simplify the complex world of design systems and tokens by making the power of design tokens more accessible and turning what can be a daunting task into an intuitive process. Leveraging Tailwind, DaisyUI, and Token Studio, our goal is to create a comprehensive yet approachable theming system across multiple platforms
https://github.com/shannakae/daisyuitokens

agnostic collaboration cross-platform daisyui design-system design-tokens figma tailwindcss theming tokenization tokenstudio

Last synced: about 2 months ago
JSON representation

The goal of this project is to simplify the complex world of design systems and tokens by making the power of design tokens more accessible and turning what can be a daunting task into an intuitive process. Leveraging Tailwind, DaisyUI, and Token Studio, our goal is to create a comprehensive yet approachable theming system across multiple platforms

• Host: GitHub
• URL: https://github.com/shannakae/daisyuitokens
• Owner: ShannaKae
• Created: 2024-08-25T13:10:40.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-25T15:57:31.000Z (4 months ago)
• Last Synced: 2024-11-16T00:44:37.451Z (about 2 months ago)
• Topics: agnostic, collaboration, cross-platform, daisyui, design-system, design-tokens, figma, tailwindcss, theming, tokenization, tokenstudio
• Homepage:
• Size: 30.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Agnostic Tokens for DaisyUI

## Overview

The goal of the Agnostic Tokens for DaisyUI project is to deliver a comprehensive tokenized theming system that remains platform-agnostic, enabling seamless use across various tools, including Figma, Adobe XD, and Penpot. This project simplifies the traditionally complex process of design system management by leveraging the strengths of Tailwind CSS, DaisyUI, and the incredible work done by the team at Token Studio. DaisyUI, built on the streamlined framework of Tailwind CSS, enhances the system with an elegant and flexible component set, making it an ideal candidate for tokenization. By combining these powerful tools, this project provides designers with a versatile and user-friendly toolkit to elevate their design workflows.

The system is structured in four levels:

- **Core Level (Tokens):** Foundational design tokens for sizes, colors, typography, and shadows.

- **Theme Level (Tokens):** Semantic tokens that adapt core tokens for different themes (e.g., light, dark).

- **Component Level (Tokens):** Tokens applied to UI components, ensuring consistency and reusability across designs.

- **Styles (Specific to Figma):** Helps designers quickly update styles in Figma that are fed from the component variables.

### Key Resources

- [DaisyUI-Components](https://www.figma.com/@bvlad)

- [DaisyUI component library](https://www.figma.com/community/file/1366359711925354008/daisyui-component-library)

- [Style Dictionary](https://tokens.studio/blog/style-dictionary-v4-plan)

- [Design Tokens Community Group](https://design-tokens.github.io/community-group/)

## Figma File

The Figma file for this project is available for [viewing and commenting](https://www.figma.com/design/rvkNP42MKy6VTR9OarzqNQ/Agnostic-Tokens-for-DaisyUI?node-id=1504-4804&t=PMH9MFwwquNRPrst-1). If you wish to edit the file, you can make a copy for yourself.

## Contribution and Feedback

We welcome feedback and collaboration from the design and development community. The goal is to refine and expand this system to create a versatile, cross-platform design language that benefits both designers and developers alike.