https://github.com/systemdesigndao/ton-design-system

Non official TON based Design System. Inspired by TON Brand Assets and Telegram Community Design System.
https://github.com/systemdesigndao/ton-design-system

tailwindcss typescript

Last synced: 11 days ago
JSON representation

Non official TON based Design System. Inspired by TON Brand Assets and Telegram Community Design System.

• Host: GitHub
• URL: https://github.com/systemdesigndao/ton-design-system
• Owner: systemdesigndao
• License: mit
• Created: 2022-01-10T20:37:34.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-03-03T19:54:11.000Z (8 months ago)
• Last Synced: 2024-05-19T03:23:47.116Z (6 months ago)
• Topics: tailwindcss, typescript
• Language: TypeScript
• Homepage:
• Size: 2.89 MB
• Stars: 40
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-ton - TON Design System - Tailwind-based TypeScript package for creating frontend components, providing [TON Brand Assets](https://ton.org/brand-assets) as Atom CSS with custom theme. (👨‍🎨 UX/UI / Get Help)

README

        
[![Telegram System Design DAO Forum][telegram-system-design-dao-badge]][telegram-system-design-dao-url]

[telegram-system-design-dao-badge]: https://img.shields.io/badge/-System%20Design%20DAO%20Forum-2CA5E0?style=flat&logo=telegram&logoColor=white

[telegram-system-design-dao-url]: https://t.me/systemdesigndao_forum

# TON Design System

## Package size

[![Package raw size](https://deno.bundlejs.com/?q=@designervoid/ton-design-system&badge=detailed&badge-style=for-the-badge)][bundlejs-ton-design-system-link]

[bundlejs-ton-design-system-link]: https://bundlejs.com/?q=@designervoid/ton-design-system

## Repository size

![GitHub repo size](https://img.shields.io/github/repo-size/systemdesigndao/ton-design-system)

## Main idea

Atomic CSS

```css

.atom {

  @apply ... (tw-classes)

}

```

## Usage

Atomic Components using Declarative components with [Raw Framework](https://github.com/systemdesigndao/ton-design-system/tree/master/registry/raw-framework#raw-ui-framework)

```ts

import { tags } from './package/raw'

const { div, button } = tags;

export const Button = () => {

  return (

    div(

      { className='px-2 py-2 h-full flex' }, 

      button(

        { class: "custom-classname", variant="default" }, 

        'Cross-platform button (default)'

      )

    );

};

```

## More examples

![Screenshot](./docs/images/App.jpeg)

Example of usage with [`next-typescript`](https://github.com/designervoid/ton-design-system-next-typescript)  

Example of usage with [`rn-typescript`](https://github.com/designervoid/ton-design-system-rn-typescript)

## Use CLI

### Quick start

1. Copy component from Github - `npx "@designervoid/ton-design-system"@"latest" cli -g`

2. Init Tailwind `npx "@designervoid/ton-design-system"@"latest" cli -t`

3. Init TDS `npx "@designervoid/ton-design-system"@"latest" cli -tds`

## License

MIT