@signozhq/design-tokens 1.1.4 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -1
- package/dist/design-tokens.js +617 -56
- package/dist/design-tokens.umd.cjs +1 -1
- package/dist/index.d.ts +701 -140
- package/dist/style.css +1 -1
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -1 +1,85 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @signozhq/design-tokens
|
|
2
|
+
|
|
3
|
+
Welcome to the `@signozhq/design-tokens` package! This package provides a set of design tokens that can be used across your projects to maintain consistency in design and styling.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Design Tokens**: Easily manage and use design tokens for colors, spacing, and typography.
|
|
8
|
+
- **TypeScript Support**: Fully typed definitions for better development experience.
|
|
9
|
+
- **Tailwind Compatibility**: Generate tokens compatible with Tailwind CSS.
|
|
10
|
+
- **Build Tools**: Integrated with Vite for fast builds and development.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
To install the package, use npm or yarn:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @signozhq/design-tokens
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
or
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
yarn add @signozhq/design-tokens
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
You can import the design tokens in your project as follows:
|
|
29
|
+
|
|
30
|
+
```typescript
|
|
31
|
+
import { Color, Spacing, Typography } from '@signozhq/design-tokens';
|
|
32
|
+
// Example usage
|
|
33
|
+
const backgroundColor = Color.BG_ROBIN_100;
|
|
34
|
+
const padding = Spacing.PADDING_4;
|
|
35
|
+
const fontSize = Typography.FONTSIZE_XL;
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Additionally, you can import the generated CSS files that contain all the variables:
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
@import '@signozhq/design-tokens/style.css';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Or import specific files for colors, spacing, or typography:
|
|
45
|
+
|
|
46
|
+
```css
|
|
47
|
+
@import '@signozhq/design-tokens/src/Colors/colors.css';
|
|
48
|
+
@import '@signozhq/design-tokens/src/Spacing/spacing.css';
|
|
49
|
+
@import '@signozhq/design-tokens/src/Typography/typography.css';
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Available Tokens
|
|
53
|
+
|
|
54
|
+
#### Colors
|
|
55
|
+
|
|
56
|
+
- `Color.BG_ROBIN_100`
|
|
57
|
+
- `Color.BG_SIENNA_200`
|
|
58
|
+
- `Color.TEXT_CHERRY_500`
|
|
59
|
+
- ... (and many more)
|
|
60
|
+
|
|
61
|
+
#### Spacing
|
|
62
|
+
|
|
63
|
+
- `Spacing.PADDING_1`
|
|
64
|
+
- `Spacing.MARGIN_4`
|
|
65
|
+
- ... (and many more)
|
|
66
|
+
|
|
67
|
+
#### Typography
|
|
68
|
+
|
|
69
|
+
- `Typography.FONTSIZE_SM`
|
|
70
|
+
- `Typography.FONTWEIGHT_BOLD`
|
|
71
|
+
- ... (and many more)
|
|
72
|
+
|
|
73
|
+
## Generating Tokens
|
|
74
|
+
|
|
75
|
+
To generate the design tokens from JSON files, you can run the following command:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
npm run generate-tokens
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
This will read the JSON files located in the `src/tokens` directory and generate the corresponding TypeScript files.
|
|
82
|
+
|
|
83
|
+
## Changelog
|
|
84
|
+
|
|
85
|
+
For a detailed list of changes, please refer to the [CHANGELOG.md](CHANGELOG.md).
|