@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/dist/themes/signoz-tokens.css ADDED
@@ -0,0 +1 @@
1
+ [data-theme=default]{color-scheme:light;--background:var(--bg-vanilla-200);--foreground:var(--text-ink-400);--card:var(--bg-vanilla-100);--card-foreground:var(--text-ink-400);--popover:var(--bg-vanilla-100);--popover-foreground:var(--text-ink-400);--primary:var(--bg-robin-500);--secondary:var(--bg-vanilla-300);--muted:var(--bg-vanilla-300);--muted-foreground:var(--text-slate-50);--accent:var(--bg-aqua-100);--accent-foreground:var(--text-slate-400);--destructive:var(--bg-cherry-500);--destructive-foreground:var(--text-vanilla-100);--border:var(--bg-vanilla-400);--input:var(--bg-vanilla-400);--ring:var(--bg-robin-500);--radius:0.25rem;--chart-1:var(--bg-robin-500);--chart-2:var(--bg-robin-600);--chart-3:var(--bg-slate-300);--chart-4:var(--bg-slate-400);--chart-5:var(--bg-slate-500);--sidebar:var(--bg-vanilla-300);--sidebar-foreground:var(--text-ink-400);--sidebar-primary:var(--bg-robin-500);--sidebar-primary-foreground:var(--text-vanilla-100);--sidebar-accent:var(--bg-aqua-100);--sidebar-accent-foreground:var(--text-slate-400);--sidebar-border:var(--bg-slate-400);--sidebar-ring:var(--bg-robin-500);--font-sans:"Inter";--font-serif:"Open Sans";--font-mono:"Geist Mono";--base-white:var(--text-base-white);--base-black:var(--text-base-black);--l1-background:var(--bg-neutral-light-1000);--l2-background:var(--bg-neutral-light-950);--l3-background:var(--bg-neutral-light-800);--l1-background-hover:var(--bg-neutral-light-900);--l2-background-hover:var(--bg-neutral-light-700);--l3-background-hover:var(--bg-neutral-light-700);--l1-foreground:var(--text-neutral-light-50);--l1-foreground-hover:var(--text-base-black);--l2-foreground:var(--text-neutral-light-100);--l2-foreground-hover:var(--text-neutral-light-50);--l3-foreground:var(--text-neutral-light-200);--l3-foreground-hover:var(--text-neutral-light-300);--l1-border:var(--bg-neutral-light-900);--l2-border:var(--bg-neutral-light-800);--l3-border:var(--bg-neutral-light-700);--primary-background:var(--bg-robin-500);--primary-background-hover:var(--bg-robin-400);--primary-foreground:var(--text-neutral-light-1000);--primary-foreground-hover:var(--text-base-white);--secondary-background:var(--bg-neutral-light-950);--secondary-background-hover:var(--bg-neutral-light-700);--secondary-foreground:var(--text-neutral-light-100);--secondary-foreground-hover:var(--text-neutral-light-50);--secondary-border:var(--bg-neutral-light-800);--success-background:var(--bg-forest-600);--success-background-hover:var(--bg-forest-400);--success-foreground:var(--text-neutral-light-50);--success-foreground-hover:var(--text-base-black);--warning-background:var(--bg-amber-600);--warning-background-hover:var(--bg-amber-400);--warning-foreground:var(--text-neutral-light-50);--warning-foreground-hover:var(--text-base-black);--danger-background:var(--bg-cherry-500);--danger-background-hover:var(--bg-cherry-400);--danger-foreground:var(--text-neutral-light-1000);--danger-foreground-hover:var(--text-base-white);--l1-background-transparent:color-mix(in srgb,var(--bg-neutral-light-1000),transparent 100%);--l1-background-60:color-mix(in srgb,var(--bg-neutral-light-1000),transparent 40%);--l2-background-transparent:color-mix(in srgb,var(--bg-neutral-light-950),transparent 100%);--l2-background-60:color-mix(in srgb,var(--bg-neutral-light-950),transparent 40%);--l3-background-transparent:color-mix(in srgb,var(--bg-neutral-light-800),transparent 100%);--l3-background-60:color-mix(in srgb,var(--bg-neutral-light-800),transparent 40%);--alert-strip-button-background:color-mix(in srgb,var(--bg-ink-400),transparent 40%);--callout-primary-background:color-mix(in srgb,var(--bg-robin-500),transparent 90%);--callout-primary-border:color-mix(in srgb,var(--bg-robin-500),transparent 80%);--callout-primary-title:var(--bg-robin-600);--callout-primary-description:var(--bg-robin-600);--callout-primary-icon:var(--bg-robin-300);--callout-success-background:color-mix(in srgb,var(--bg-forest-600),transparent 90%);--callout-success-border:color-mix(in srgb,var(--bg-forest-600),transparent 80%);--callout-success-title:var(--bg-forest-600);--callout-success-description:var(--bg-forest-600);--callout-success-icon:var(--bg-forest-700);--callout-warning-background:color-mix(in srgb,var(--bg-amber-600),transparent 90%);--callout-warning-border:color-mix(in srgb,var(--bg-amber-600),transparent 80%);--callout-warning-title:var(--bg-amber-700);--callout-warning-description:var(--bg-amber-700);--callout-warning-icon:var(--bg-amber-800);--callout-error-background:color-mix(in srgb,var(--bg-cherry-500),transparent 90%);--callout-error-border:color-mix(in srgb,var(--bg-cherry-500),transparent 80%);--callout-error-title:var(--bg-cherry-600);--callout-error-description:var(--bg-cherry-600);--callout-error-icon:var(--bg-cherry-700);--accent-primary:var(--bg-robin-500);--accent-primary-hover:var(--bg-robin-400);--accent-primary-foreground:var(--text-vanilla-100);--accent-forest:var(--bg-forest-500);--accent-forest-hover:var(--bg-forest-400);--accent-forest-foreground:var(--text-vanilla-100);--accent-amber:var(--bg-amber-500);--accent-amber-hover:var(--bg-amber-400);--accent-amber-foreground:var(--text-vanilla-100);--accent-cherry:var(--bg-cherry-500);--accent-cherry-hover:var(--bg-cherry-400);--accent-cherry-foreground:var(--text-vanilla-100);--accent-aqua:var(--bg-aqua-500);--accent-aqua-hover:var(--bg-aqua-400);--accent-aqua-foreground:var(--text-vanilla-100);--accent-sakura:var(--bg-sakura-500);--accent-sakura-hover:var(--bg-sakura-400);--accent-sakura-foreground:var(--text-vanilla-100);--accent-sienna:var(--bg-sienna-500);--accent-sienna-hover:var(--bg-sienna-400);--accent-sienna-foreground:var(--text-vanilla-100)}[data-theme=default].dark{color-scheme:dark;--background:var(--bg-ink-500);--foreground:var(--text-vanilla-400);--card:var(--bg-ink-400);--card-foreground:var(--text-vanilla-100);--popover:var(--bg-ink-400);--popover-foreground:var(--text-vanilla-100);--primary:var(--bg-robin-500);--secondary:var(--bg-slate-500);--muted:var(--bg-slate-500);--muted-foreground:var(--text-vanilla-400);--accent:var(--bg-slate-300);--accent-foreground:var(--text-vanilla-100);--destructive:var(--bg-cherry-500);--destructive-foreground:var(--text-ink-500);--border:var(--bg-slate-400);--input:var(--bg-slate-300);--ring:var(--bg-robin-500);--radius:0.25rem;--chart-1:var(--bg-robin-400);--chart-2:var(--bg-robin-500);--chart-3:var(--bg-robin-600);--chart-4:var(--bg-slate-200);--chart-5:var(--bg-slate-300);--sidebar:var(--bg-slate-500);--sidebar-foreground:var(--text-vanilla-400);--sidebar-primary:var(--bg-robin-500);--sidebar-primary-foreground:var(--text-ink-500);--sidebar-accent:var(--bg-slate-400);--sidebar-accent-foreground:var(--text-vanilla-400);--sidebar-border:var(--bg-slate-500);--sidebar-ring:var(--bg-robin-500);--font-sans:"Inter";--font-serif:"Open Sans";--font-mono:"Geist Mono";--base-white:var(--text-base-white);--base-black:var(--text-base-black);--l1-background:var(--bg-neutral-dark-1000);--l2-background:var(--bg-neutral-dark-900);--l3-background:var(--bg-neutral-dark-800);--l1-background-hover:var(--bg-neutral-dark-900);--l2-background-hover:var(--bg-neutral-dark-700);--l3-background-hover:var(--bg-neutral-dark-700);--l1-foreground:var(--text-neutral-dark-50);--l1-foreground-hover:var(--text-base-white);--l2-foreground:var(--text-neutral-dark-100);--l2-foreground-hover:var(--text-neutral-dark-50);--l3-foreground:var(--text-neutral-dark-200);--l3-foreground-hover:var(--text-neutral-dark-300);--l1-border:var(--bg-neutral-dark-900);--l2-border:var(--bg-neutral-dark-800);--l3-border:var(--bg-neutral-dark-700);--primary-background:var(--bg-robin-500);--primary-background-hover:var(--bg-robin-400);--primary-foreground:var(--text-neutral-dark-50);--primary-foreground-hover:var(--text-base-white);--secondary-background:var(--bg-neutral-dark-900);--secondary-background-hover:var(--bg-neutral-dark-700);--secondary-foreground:var(--text-neutral-dark-100);--secondary-foreground-hover:var(--text-neutral-dark-50);--secondary-border:var(--bg-neutral-dark-800);--success-background:var(--bg-forest-600);--success-background-hover:var(--bg-forest-400);--success-foreground:var(--text-neutral-dark-50);--success-foreground-hover:var(--text-base-white);--warning-background:var(--bg-amber-600);--warning-background-hover:var(--bg-amber-400);--warning-foreground:var(--text-neutral-dark-50);--warning-foreground-hover:var(--text-base-white);--danger-background:var(--bg-cherry-500);--danger-background-hover:var(--bg-cherry-400);--danger-foreground:var(--text-neutral-dark-50);--danger-foreground-hover:var(--text-base-white);--l1-background-transparent:color-mix(in srgb,var(--bg-neutral-dark-1000),transparent 100%);--l1-background-60:color-mix(in srgb,var(--bg-neutral-dark-1000),transparent 40%);--l2-background-transparent:color-mix(in srgb,var(--bg-neutral-dark-900),transparent 100%);--l2-background-60:color-mix(in srgb,var(--bg-neutral-dark-900),transparent 40%);--l3-background-transparent:color-mix(in srgb,var(--bg-neutral-dark-800),transparent 100%);--l3-background-60:color-mix(in srgb,var(--bg-neutral-dark-800),transparent 40%);--callout-primary-background:color-mix(in srgb,var(--bg-robin-500),transparent 90%);--callout-primary-border:color-mix(in srgb,var(--bg-robin-500),transparent 80%);--callout-primary-title:var(--bg-robin-400);--callout-primary-description:var(--bg-robin-400);--callout-primary-icon:var(--bg-robin-300);--callout-success-background:color-mix(in srgb,var(--bg-forest-600),transparent 90%);--callout-success-border:color-mix(in srgb,var(--bg-forest-600),transparent 80%);--callout-success-title:var(--bg-forest-400);--callout-success-description:var(--bg-forest-400);--callout-success-icon:var(--bg-forest-300);--callout-warning-background:color-mix(in srgb,var(--bg-amber-600),transparent 90%);--callout-warning-border:color-mix(in srgb,var(--bg-amber-600),transparent 80%);--callout-warning-title:var(--bg-amber-400);--callout-warning-description:var(--bg-amber-400);--callout-warning-icon:var(--bg-amber-300);--callout-error-background:color-mix(in srgb,var(--bg-cherry-500),transparent 90%);--callout-error-border:color-mix(in srgb,var(--bg-cherry-500),transparent 80%);--callout-error-title:var(--bg-cherry-400);--callout-error-description:var(--bg-cherry-400);--callout-error-icon:var(--bg-cherry-300);--accent-primary:var(--bg-robin-500);--accent-primary-hover:var(--bg-robin-400);--accent-primary-foreground:var(--text-ink-500);--accent-forest:var(--bg-forest-500);--accent-forest-hover:var(--bg-forest-400);--accent-forest-foreground:var(--text-ink-500);--accent-amber:var(--bg-amber-500);--accent-amber-hover:var(--bg-amber-400);--accent-amber-foreground:var(--text-ink-500);--accent-cherry:var(--bg-cherry-500);--accent-cherry-hover:var(--bg-cherry-400);--accent-cherry-foreground:var(--text-ink-500);--accent-aqua:var(--bg-aqua-500);--accent-aqua-hover:var(--bg-aqua-400);--accent-aqua-foreground:var(--text-ink-500);--accent-sakura:var(--bg-sakura-500);--accent-sakura-hover:var(--bg-sakura-400);--accent-sakura-foreground:var(--text-ink-500);--accent-sienna:var(--bg-sienna-500);--accent-sienna-hover:var(--bg-sienna-400);--accent-sienna-foreground:var(--text-ink-500)}
package/package.json CHANGED
@@ -1,64 +1,65 @@
1
1
  {
2
- "name": "@signozhq/design-tokens",
3
- "version": "2.0.0",
4
- "type": "module",
5
- "main": "./dist/design-tokens.js",
6
- "module": "./dist/design-tokens.js",
7
- "types": "./dist/index.d.ts",
8
- "files": [
9
- "dist"
10
- ],
11
- "lint-staged": {
12
- "*.{js,jsx,ts,tsx}": [
13
- "eslint --fix",
14
- "prettier --write"
15
- ],
16
- "*.{json,md,yml}": [
17
- "prettier --write"
18
- ]
19
- },
20
- "devDependencies": {
21
- "@changesets/cli": "^2.27.8",
22
- "@commitlint/cli": "^19.5.0",
23
- "@commitlint/config-conventional": "^19.5.0",
24
- "@eslint/js": "^8.0.0",
25
- "@types/node": "^22.5.5",
26
- "@typescript-eslint/eslint-plugin": "^6.21.0",
27
- "@typescript-eslint/parser": "^6.21.0",
28
- "cssnano": "^7.0.6",
29
- "eslint": "^9.12.0",
30
- "eslint-config-prettier": "^9.0.0",
31
- "eslint-plugin-prettier": "^5.0.0",
32
- "husky": "^8.0.0",
33
- "lint-staged": "^15.2.10",
34
- "postcss": "^8.4.47",
35
- "prettier": "^3.0.0",
36
- "style-dictionary": "3.8.0",
37
- "tsx": "^4.19.1",
38
- "typescript": "^5.3.3",
39
- "vite": "^5.4.19",
40
- "vite-plugin-dts": "^4.3.0"
41
- },
42
- "resolutions": {
43
- "cross-spawn": "7.0.5",
44
- "esbuild": "^0.25.0",
45
- "@babel/runtime": "7.26.10",
46
- "brace-expansion": "2.0.2",
47
- "@eslint/plugin-kit": "^0.3.4",
48
- "tmp": "0.2.4"
49
- },
50
- "publishConfig": {
51
- "access": "public"
52
- },
53
- "scripts": {
54
- "build": "vite build",
55
- "dev": "vite build --watch",
56
- "clean": "rm -rf dist node_modules",
57
- "update-version": "changeset && changeset version",
58
- "release": "pnpm build && changeset publish",
59
- "lint": "eslint . --ext .js,.jsx,.ts,.tsx --config eslint.config.js",
60
- "format": "prettier --write .",
61
- "pre-commit": "lint-staged",
62
- "generate-tokens": "tsx ./scripts/generate-types-from-json.ts && style-dictionary build"
63
- }
64
- }
2
+ "name": "@signozhq/design-tokens",
3
+ "version": "2.1.0",
4
+ "type": "module",
5
+ "main": "./dist/design-tokens.js",
6
+ "module": "./dist/design-tokens.js",
7
+ "types": "./dist/index.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "scripts": {
12
+ "build": "vite build",
13
+ "dev": "vite build --watch",
14
+ "clean": "rm -rf dist node_modules",
15
+ "update-version": "changeset && changeset version",
16
+ "release": "pnpm build && changeset publish",
17
+ "prepare": "husky install",
18
+ "lint": "eslint . --ext .js,.jsx,.ts,.tsx --config eslint.config.js",
19
+ "format": "prettier --write .",
20
+ "pre-commit": "lint-staged",
21
+ "generate-tokens": "tsx ./scripts/generate-types-from-json.ts && style-dictionary build && tsx ./scripts/generate-semantic-tokens.ts && tsx ./scripts/generate-typography-styles.ts"
22
+ },
23
+ "lint-staged": {
24
+ "*.{js,jsx,ts,tsx}": [
25
+ "eslint --fix",
26
+ "prettier --write"
27
+ ],
28
+ "*.{json,md,yml}": [
29
+ "prettier --write"
30
+ ]
31
+ },
32
+ "devDependencies": {
33
+ "@changesets/cli": "^2.27.8",
34
+ "@commitlint/cli": "^19.5.0",
35
+ "@commitlint/config-conventional": "^19.5.0",
36
+ "@eslint/js": "^8.0.0",
37
+ "@types/node": "^22.5.5",
38
+ "@typescript-eslint/eslint-plugin": "^8.0.0",
39
+ "@typescript-eslint/parser": "^8.0.0",
40
+ "cssnano": "^7.0.6",
41
+ "eslint": "^9.12.0",
42
+ "eslint-config-prettier": "^9.0.0",
43
+ "eslint-plugin-prettier": "^5.0.0",
44
+ "husky": "^8.0.0",
45
+ "lint-staged": "^15.2.10",
46
+ "postcss": "^8.4.47",
47
+ "prettier": "^3.0.0",
48
+ "style-dictionary": "3.8.0",
49
+ "tsx": "^4.19.1",
50
+ "typescript": "^5.3.3",
51
+ "vite": "^5.4.19",
52
+ "vite-plugin-dts": "^4.3.0"
53
+ },
54
+ "resolutions": {
55
+ "cross-spawn": "7.0.5",
56
+ "esbuild": "^0.25.0",
57
+ "@babel/runtime": "7.26.10",
58
+ "brace-expansion": "2.0.2",
59
+ "@eslint/plugin-kit": "^0.3.4",
60
+ "tmp": "0.2.4"
61
+ },
62
+ "publishConfig": {
63
+ "access": "public"
64
+ }
65
+ }