@signozhq/design-tokens 2.0.0 → 2.1.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.
Files changed (7) hide show
  1. package/README.md +75 -14
  2. package/dist/Typography/typography-styles.css +1 -0
  3. package/dist/design-tokens.js +773 -33
  4. package/dist/design-tokens.umd.cjs +1 -1
  5. package/dist/index.d.ts +785 -3
  6. package/dist/themes/signoz-tokens.css +1 -0
  7. package/package.json +64 -63
package/README.md CHANGED
@@ -27,26 +27,83 @@ yarn add @signozhq/design-tokens
27
27
 
28
28
  You can import the design tokens in your project as follows:
29
29
 
30
+ ### 1. Primitives
31
+
32
+ Direct access to raw values for colors, spacing, and typography.
33
+
30
34
  ```typescript
31
35
  import { Color, Spacing, Typography } from '@signozhq/design-tokens';
32
36
  // Example usage
33
37
  const backgroundColor = Color.BG_ROBIN_100;
38
+ const color = Color.BG_ROBIN_500;
34
39
  const padding = Spacing.PADDING_4;
35
- const fontSize = Typography.FONTSIZE_XL;
40
+ const fontSize = Typography.FONTSIZE_BASE;
36
41
  ```
37
42
 
38
43
  Additionally, you can import the generated CSS files that contain all the variables:
39
44
 
40
- ```css
41
- @import '@signozhq/design-tokens/style.css';
45
+ ### 2. Semantic Tokens
46
+
47
+ The preferred way to style components using theme-aware tokens.
48
+
49
+ ```typescript
50
+ import { Style } from '@signozhq/design-tokens';
51
+
52
+ // Returns the CSS variable string, e.g., "var(--background)"
53
+ const bg = Style.BACKGROUND;
54
+ const primary = Style.PRIMARY;
42
55
  ```
43
56
 
44
- Or import specific files for colors, spacing, or typography:
57
+ For **Tailwind CSS** (v3) configuration:
58
+
59
+ ```typescript
60
+ import { StyleTailwind } from '@signozhq/design-tokens';
61
+
62
+ // In your tailwind.config.js
63
+ module.exports = {
64
+ theme: {
65
+ extend: {
66
+ colors: StyleTailwind,
67
+ },
68
+ },
69
+ };
70
+ ```
71
+
72
+ ### 3. Composite Typography Styles
73
+
74
+ Apply full typography sets (font-family, size, weight, line-height) as a single object.
75
+
76
+ ```typescript
77
+ import { TypographyStyles } from '@signozhq/design-tokens';
78
+
79
+ // Apply as an object in React
80
+ <p style={TypographyStyles.PARAGRAPH_MEDIUM_400}>Hello SigNoz</p>
81
+ ```
82
+
83
+ ---
84
+
85
+ ## CSS & Theming
86
+
87
+ ### Themes
88
+
89
+ Enable theme switching by importing the theme files and setting the `data-theme` attribute.
90
+
91
+ ```html
92
+ <!-- Switch themes via data-theme attribute on <html> or <body> -->
93
+ <html data-theme="signoz">
94
+ ...
95
+ </html>
96
+ <!-- default -->
97
+ <html data-theme="blue">
98
+ ...
99
+ </html>
100
+ ```
45
101
 
46
102
  ```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';
103
+ /* Import themes */
104
+ @import '@signozhq/design-tokens/style.css';
105
+ @import '@signozhq/design-tokens/dist/themes/signoz-tokens.css';
106
+ @import '@signozhq/design-tokens/dist/themes/blue-tokens.css';
50
107
  ```
51
108
 
52
109
  ### Available Tokens
@@ -70,16 +127,20 @@ Or import specific files for colors, spacing, or typography:
70
127
  - `Typography.FONTWEIGHT_BOLD`
71
128
  - ... (and many more)
72
129
 
73
- ## Generating Tokens
130
+ ### Tailwind CSS v4
74
131
 
75
- To generate the design tokens from JSON files, you can run the following command:
132
+ Native support for Tailwind v4 theme variables.
76
133
 
77
- ```bash
78
- npm run generate-tokens
134
+ ```css
135
+ @import '@signozhq/design-tokens/dist/tailwind-theme.css';
79
136
  ```
80
137
 
81
- This will read the JSON files located in the `src/tokens` directory and generate the corresponding TypeScript files.
138
+ ---
82
139
 
83
- ## Changelog
140
+ ## Development
84
141
 
85
- For a detailed list of changes, please refer to the [CHANGELOG.md](CHANGELOG.md).
142
+ To regenerate tokens from JSON sources:
143
+
144
+ ```bash
145
+ pnpm generate-tokens
146
+ ```
package/dist/Typography/typography-styles.css ADDED
@@ -0,0 +1 @@
1
+ .typography-label-large-400{font-weight:400}.typography-label-large-400,.typography-label-large-500{font-family:Inter,sans-serif;font-size:18px;letter-spacing:0;line-height:1}.typography-label-large-500{font-weight:500}.typography-label-large-600{font-family:Inter,sans-serif;font-size:18px;font-weight:600;letter-spacing:0;line-height:1}.typography-label-medium-400{font-weight:400}.typography-label-medium-400,.typography-label-medium-500{font-family:Inter,sans-serif;font-size:16px;letter-spacing:0;line-height:1}.typography-label-medium-500{font-weight:500}.typography-label-medium-600{font-family:Inter,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;line-height:1}.typography-label-base-400{font-weight:400}.typography-label-base-400,.typography-label-base-500{font-family:Inter,sans-serif;font-size:13px;letter-spacing:-.5px;line-height:1}.typography-label-base-500{font-weight:500}.typography-label-base-600{font-family:Inter,sans-serif;font-size:13px;font-weight:600;letter-spacing:-.5px;line-height:1}.typography-label-small-400{font-weight:400}.typography-label-small-400,.typography-label-small-500{font-family:Inter,sans-serif;font-size:11px;letter-spacing:0;line-height:1}.typography-label-small-500{font-weight:500}.typography-label-small-600{font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:0;line-height:1}.typography-uppercase-base-400{font-weight:400}.typography-uppercase-base-400,.typography-uppercase-base-500{font-family:Inter,sans-serif;font-size:13px;letter-spacing:4px;line-height:1}.typography-uppercase-base-500{font-weight:500}.typography-uppercase-base-600{font-family:Inter,sans-serif;font-size:13px;font-weight:600;letter-spacing:4px;line-height:1}.typography-uppercase-small-400{font-weight:400}.typography-uppercase-small-400,.typography-uppercase-small-500{font-family:Inter,sans-serif;font-size:11px;letter-spacing:4px;line-height:1}.typography-uppercase-small-500{font-weight:500}.typography-uppercase-small-600{font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:4px;line-height:1}.typography-code-base-400{font-weight:400}.typography-code-base-400,.typography-code-base-500{font-family:SF Mono,monospace;font-size:13px;letter-spacing:0;line-height:1}.typography-code-base-500{font-weight:500}.typography-code-base-600{font-family:SF Mono,monospace;font-size:13px;font-weight:600;letter-spacing:0;line-height:1}.typography-code-small-400{font-weight:400}.typography-code-small-400,.typography-code-small-500{font-family:SF Mono,monospace;font-size:11px;letter-spacing:0;line-height:1}.typography-code-small-500{font-weight:500}.typography-code-small-600{font-family:SF Mono,monospace;font-size:11px;font-weight:600;letter-spacing:0;line-height:1}.typography-paragraph-medium-400{font-weight:400}.typography-paragraph-medium-400,.typography-paragraph-medium-500{font-family:Inter,sans-serif;font-size:16px;letter-spacing:0;line-height:24px}.typography-paragraph-medium-500{font-weight:500}.typography-paragraph-medium-600{font-family:Inter,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;line-height:24px}.typography-paragraph-base-400{font-weight:400}.typography-paragraph-base-400,.typography-paragraph-base-500{font-family:Inter,sans-serif;font-size:13px;letter-spacing:-.5px;line-height:20px}.typography-paragraph-base-500{font-weight:500}.typography-paragraph-base-600{font-family:Inter,sans-serif;font-size:13px;font-weight:600;letter-spacing:-.5px;line-height:20px}.typography-paragraph-small-400{font-weight:400}.typography-paragraph-small-400,.typography-paragraph-small-500{font-family:Inter,sans-serif;font-size:11px;letter-spacing:-.5px;line-height:18px}.typography-paragraph-small-500{font-weight:500}.typography-paragraph-small-600{font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:-.5px;line-height:18px}