@signozhq/design-tokens 2.4.0 → 2.5.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 +37 -3
- package/dist/Typography/typography-styles.css +1 -1
- package/dist/design-tokens.js +516 -532
- package/dist/design-tokens.umd.cjs +1 -1
- package/dist/fonts/InterVariable-latin.woff2 +0 -0
- package/dist/fonts/InterVariable-rest.woff2 +0 -0
- package/dist/fonts/LICENSE.txt +92 -0
- package/dist/fonts/inter.css +1 -0
- package/dist/index.d.ts +690 -501
- package/dist/style.css +1 -1
- package/dist/tailwind-theme.css +1 -1
- package/dist/themes/signoz-tokens.css +3 -3
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -37,7 +37,7 @@ import { Color, Spacing, Typography } from '@signozhq/design-tokens';
|
|
|
37
37
|
const backgroundColor = Color.BG_ROBIN_100;
|
|
38
38
|
const color = Color.BG_ROBIN_500;
|
|
39
39
|
const padding = Spacing.PADDING_4;
|
|
40
|
-
const fontSize = Typography.
|
|
40
|
+
const fontSize = Typography.LABEL_BASE_400_FONTSIZE;
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
Additionally, you can import the generated CSS files that contain all the variables:
|
|
@@ -106,6 +106,36 @@ Enable theme switching by importing the theme files and setting the `data-theme`
|
|
|
106
106
|
@import '@signozhq/design-tokens/dist/themes/blue-tokens.css';
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
+
### Fonts
|
|
110
|
+
|
|
111
|
+
The text styles use the font family `Inter`, and the package ships it as an opt-in stylesheet.
|
|
112
|
+
Nothing loads until you import it:
|
|
113
|
+
|
|
114
|
+
```css
|
|
115
|
+
@import '@signozhq/design-tokens/dist/fonts/inter.css';
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
The stylesheet declares two upright faces of `Inter` 4.1, both with `font-display: swap` and a
|
|
119
|
+
variable weight from 100 to 900:
|
|
120
|
+
|
|
121
|
+
- `InterVariable-latin.woff2` (74 KB) covers Latin, the common punctuation and arrows, and the
|
|
122
|
+
symbols the UI draws.
|
|
123
|
+
- `InterVariable-rest.woff2` (204 KB) covers the other scripts Inter supports, such as Cyrillic,
|
|
124
|
+
Greek and Vietnamese.
|
|
125
|
+
|
|
126
|
+
Each `@font-face` has a `unicode-range`, so a page with Latin text downloads only the first file.
|
|
127
|
+
Both files keep the OpenType layout features of Inter that Google Fonts drops, such as `ss01`
|
|
128
|
+
(open digits), `zero` (slashed zero), `case`, `tnum` and `pnum`. Turn them on with
|
|
129
|
+
`font-feature-settings: 'ss01' 1` or with `font-variant-numeric`. The optical size axis is pinned
|
|
130
|
+
at 14, so the files have a weight axis only and `font-optical-sizing` has no effect: every size
|
|
131
|
+
renders like the Figma text styles. There is no italic face; set `font-synthesis: none` to stop
|
|
132
|
+
the browser from slanting upright text.
|
|
133
|
+
|
|
134
|
+
The files are in `dist/fonts/`, next to `LICENSE.txt`, the SIL Open Font License 1.1 text of
|
|
135
|
+
Inter. The package is MIT licensed, but the font files stay under the OFL. Keep `LICENSE.txt`
|
|
136
|
+
when you copy the fonts somewhere else. To regenerate the files from the Inter release, run
|
|
137
|
+
`uv run scripts/subset-inter.py`.
|
|
138
|
+
|
|
109
139
|
### Available Tokens
|
|
110
140
|
|
|
111
141
|
#### Colors
|
|
@@ -123,8 +153,12 @@ Enable theme switching by importing the theme files and setting the `data-theme`
|
|
|
123
153
|
|
|
124
154
|
#### Typography
|
|
125
155
|
|
|
126
|
-
|
|
127
|
-
|
|
156
|
+
Typography has only the 33 text styles of Periscope (`label`, `paragraph`, `uppercase` and
|
|
157
|
+
`code`), each split into font family, size, weight, line height, letter spacing and text
|
|
158
|
+
transform. There is no separate font size or weight scale.
|
|
159
|
+
|
|
160
|
+
- `Typography.LABEL_BASE_500_FONTSIZE`
|
|
161
|
+
- `Typography.PARAGRAPH_SMALL_400_LINEHEIGHT`
|
|
128
162
|
- ... (and many more)
|
|
129
163
|
|
|
130
164
|
### Tailwind CSS v4
|
|
@@ -1 +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;line-height:1;letter-spacing:0}.typography-label-large-500{font-weight:500}.typography-label-large-600{font-family:Inter,sans-serif;font-size:18px;font-weight:600;line-height:1;letter-spacing:0}.typography-label-medium-400{font-weight:400}.typography-label-medium-400,.typography-label-medium-500{font-family:Inter,sans-serif;font-size:16px;line-height:1;letter-spacing:0}.typography-label-medium-500{font-weight:500}.typography-label-medium-600{font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:1;letter-spacing:0}.typography-label-base-400{font-weight:400}.typography-label-base-400,.typography-label-base-500{font-family:Inter,sans-serif;font-size:13px;line-height:1;letter-spacing:-.
|
|
1
|
+
.typography-label-large-400{font-weight:400}.typography-label-large-400,.typography-label-large-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:1;letter-spacing:0;text-transform:none}.typography-label-large-500{font-weight:500}.typography-label-large-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none}.typography-label-medium-400{font-weight:400}.typography-label-medium-400,.typography-label-medium-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1;letter-spacing:0;text-transform:none}.typography-label-medium-500{font-weight:500}.typography-label-medium-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none}.typography-label-base-400{font-weight:400}.typography-label-base-400,.typography-label-base-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;line-height:1;letter-spacing:-.005em;text-transform:none}.typography-label-base-500{font-weight:500}.typography-label-base-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;font-weight:600;line-height:1;letter-spacing:-.005em;text-transform:none}.typography-label-small-400{font-weight:400}.typography-label-small-400,.typography-label-small-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:11px;line-height:1;letter-spacing:0;text-transform:none}.typography-label-small-500{font-weight:500}.typography-label-small-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:11px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none}.typography-uppercase-base-400{font-weight:400}.typography-uppercase-base-400,.typography-uppercase-base-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;line-height:1;letter-spacing:.04em;text-transform:uppercase}.typography-uppercase-base-500{font-weight:500}.typography-uppercase-base-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase}.typography-uppercase-small-400{font-weight:400}.typography-uppercase-small-400,.typography-uppercase-small-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:11px;line-height:1;letter-spacing:.04em;text-transform:uppercase}.typography-uppercase-small-500{font-weight:500}.typography-uppercase-small-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:11px;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase}.typography-code-base-400{font-weight:400}.typography-code-base-400,.typography-code-base-500{font-family:SF Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1;letter-spacing:0;text-transform:none}.typography-code-base-500{font-weight:500}.typography-code-base-600{font-family:SF Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:13px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none}.typography-code-small-400{font-weight:400}.typography-code-small-400,.typography-code-small-500{font-family:SF Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:11px;line-height:1;letter-spacing:0;text-transform:none}.typography-code-small-500{font-weight:500}.typography-code-small-600{font-family:SF Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:11px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none}.typography-paragraph-medium-400{font-weight:400}.typography-paragraph-medium-400,.typography-paragraph-medium-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:26px;letter-spacing:0;text-transform:none}.typography-paragraph-medium-500{font-weight:500}.typography-paragraph-medium-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:600;line-height:26px;letter-spacing:0;text-transform:none}.typography-paragraph-base-400{font-weight:400}.typography-paragraph-base-400,.typography-paragraph-base-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;line-height:20px;letter-spacing:-.005em;text-transform:none}.typography-paragraph-base-500{font-weight:500}.typography-paragraph-base-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;font-weight:600;line-height:20px;letter-spacing:-.005em;text-transform:none}.typography-paragraph-small-400{font-weight:400}.typography-paragraph-small-400,.typography-paragraph-small-500{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:11px;line-height:18px;letter-spacing:0;text-transform:none}.typography-paragraph-small-500{font-weight:500}.typography-paragraph-small-600{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:11px;font-weight:600;line-height:18px;letter-spacing:0;text-transform:none}
|