@signozhq/design-tokens 0.0.5 → 0.0.7

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 (14) hide show
  1. package/dist/Colors/Colors.d.ts +123 -0
  2. package/dist/Spacing/Spacing.d.ts +39 -0
  3. package/dist/Typography/Typography.d.ts +24 -0
  4. package/dist/design-tokens.mjs +144 -0
  5. package/dist/index.css +1 -0
  6. package/dist/index.d.ts +4 -0
  7. package/dist/utils.d.ts +14 -0
  8. package/package.json +19 -5
  9. package/build/scss/_variables.scss +0 -209
  10. package/build.js +0 -92
  11. package/config.json +0 -16
  12. package/src/colors.json +0 -410
  13. package/src/spacing.json +0 -114
  14. package/src/typography.json +0 -562
package/dist/Colors/Colors.d.ts ADDED
@@ -0,0 +1,123 @@
1
+ export declare const Color: {
2
+ BG_ROBIN_100: string;
3
+ BG_ROBIN_200: string;
4
+ BG_ROBIN_300: string;
5
+ BG_ROBIN_400: string;
6
+ BG_ROBIN_500: string;
7
+ BG_ROBIN_600: string;
8
+ BG_SIENNA_100: string;
9
+ BG_SIENNA_200: string;
10
+ BG_SIENNA_300: string;
11
+ BG_SIENNA_400: string;
12
+ BG_SIENNA_500: string;
13
+ BG_SIENNA_600: string;
14
+ BG_CHERRY_100: string;
15
+ BG_CHERRY_200: string;
16
+ BG_CHERRY_300: string;
17
+ BG_CHERRY_400: string;
18
+ BG_CHERRY_500: string;
19
+ BG_CHERRY_600: string;
20
+ BG_AQUA_100: string;
21
+ BG_AQUA_200: string;
22
+ BG_AQUA_300: string;
23
+ BG_AQUA_400: string;
24
+ BG_AQUA_500: string;
25
+ BG_AQUA_600: string;
26
+ BG_SAKURA_100: string;
27
+ BG_SAKURA_200: string;
28
+ BG_SAKURA_300: string;
29
+ BG_SAKURA_400: string;
30
+ BG_SAKURA_500: string;
31
+ BG_SAKURA_600: string;
32
+ BG_AMBER_100: string;
33
+ BG_AMBER_200: string;
34
+ BG_AMBER_300: string;
35
+ BG_AMBER_400: string;
36
+ BG_AMBER_500: string;
37
+ BG_AMBER_600: string;
38
+ BG_INK_100: string;
39
+ BG_INK_200: string;
40
+ BG_INK_300: string;
41
+ BG_INK_400: string;
42
+ BG_INK_500: string;
43
+ BG_VANILLA_100: string;
44
+ BG_VANILLA_200: string;
45
+ BG_VANILLA_300: string;
46
+ BG_VANILLA_400: string;
47
+ BG_SLATE_200: string;
48
+ BG_SLATE_300: string;
49
+ BG_SLATE_400: string;
50
+ BG_SLATE_500: string;
51
+ BG_GRADIENT_CORAL: string;
52
+ "BG_GRADIENT_DARK-SHADOW": string;
53
+ BG_GRADIENT_DAWN: string;
54
+ BG_GRADIENT_OCEAN: string;
55
+ BG_GRADIENT_SPLASH: string;
56
+ BG_GRADIENT_FLAMINGO: string;
57
+ BG_FOREST_200: string;
58
+ BG_FOREST_300: string;
59
+ BG_FOREST_400: string;
60
+ BG_FOREST_500: string;
61
+ BG_FOREST_600: string;
62
+ TEXT_ROBIN_100: string;
63
+ TEXT_ROBIN_200: string;
64
+ TEXT_ROBIN_300: string;
65
+ TEXT_ROBIN_400: string;
66
+ TEXT_ROBIN_500: string;
67
+ TEXT_ROBIN_600: string;
68
+ TEXT_SIENNA_100: string;
69
+ TEXT_SIENNA_200: string;
70
+ TEXT_SIENNA_300: string;
71
+ TEXT_SIENNA_400: string;
72
+ TEXT_SIENNA_500: string;
73
+ TEXT_SIENNA_600: string;
74
+ TEXT_CHERRY_100: string;
75
+ TEXT_CHERRY_200: string;
76
+ TEXT_CHERRY_300: string;
77
+ TEXT_CHERRY_400: string;
78
+ TEXT_CHERRY_500: string;
79
+ TEXT_CHERRY_600: string;
80
+ TEXT_AQUA_100: string;
81
+ TEXT_AQUA_200: string;
82
+ TEXT_AQUA_300: string;
83
+ TEXT_AQUA_400: string;
84
+ TEXT_AQUA_500: string;
85
+ TEXT_AQUA_600: string;
86
+ TEXT_SAKURA_100: string;
87
+ TEXT_SAKURA_200: string;
88
+ TEXT_SAKURA_300: string;
89
+ TEXT_SAKURA_400: string;
90
+ TEXT_SAKURA_500: string;
91
+ TEXT_SAKURA_600: string;
92
+ TEXT_AMBER_100: string;
93
+ TEXT_AMBER_200: string;
94
+ TEXT_AMBER_300: string;
95
+ TEXT_AMBER_400: string;
96
+ TEXT_AMBER_500: string;
97
+ TEXT_AMBER_600: string;
98
+ TEXT_INK_100: string;
99
+ TEXT_INK_200: string;
100
+ TEXT_INK_300: string;
101
+ TEXT_INK_400: string;
102
+ TEXT_INK_500: string;
103
+ TEXT_VANILLA_100: string;
104
+ TEXT_VANILLA_200: string;
105
+ TEXT_VANILLA_300: string;
106
+ TEXT_VANILLA_400: string;
107
+ TEXT_SLATE_200: string;
108
+ TEXT_SLATE_300: string;
109
+ TEXT_SLATE_400: string;
110
+ TEXT_SLATE_500: string;
111
+ TEXT_GRADIENT_CORAL: string;
112
+ "TEXT_GRADIENT_DARK-SHADOW": string;
113
+ TEXT_GRADIENT_DAWN: string;
114
+ TEXT_GRADIENT_OCEAN: string;
115
+ TEXT_GRADIENT_SPLASH: string;
116
+ TEXT_GRADIENT_FLAMINGO: string;
117
+ TEXT_FOREST_200: string;
118
+ TEXT_FOREST_300: string;
119
+ TEXT_FOREST_400: string;
120
+ TEXT_FOREST_500: string;
121
+ TEXT_FOREST_600: string;
122
+ };
123
+ export type Color = (typeof Color)[keyof typeof Color];
package/dist/Spacing/Spacing.d.ts ADDED
@@ -0,0 +1,39 @@
1
+ export declare const Spacing: {
2
+ PADDING_1: string;
3
+ PADDING_2: string;
4
+ PADDING_3: string;
5
+ PADDING_4: string;
6
+ PADDING_5: string;
7
+ PADDING_6: string;
8
+ PADDING_7: string;
9
+ PADDING_8: string;
10
+ PADDING_10: string;
11
+ PADDING_12: string;
12
+ PADDING_16: string;
13
+ PADDING_20: string;
14
+ PADDING_24: string;
15
+ PADDING_32: string;
16
+ PADDING_40: string;
17
+ PADDING_48: string;
18
+ PADDING_56: string;
19
+ PADDING_64: string;
20
+ MARGIN_1: string;
21
+ MARGIN_2: string;
22
+ MARGIN_3: string;
23
+ MARGIN_4: string;
24
+ MARGIN_5: string;
25
+ MARGIN_6: string;
26
+ MARGIN_7: string;
27
+ MARGIN_8: string;
28
+ MARGIN_10: string;
29
+ MARGIN_12: string;
30
+ MARGIN_16: string;
31
+ MARGIN_20: string;
32
+ MARGIN_24: string;
33
+ MARGIN_32: string;
34
+ MARGIN_40: string;
35
+ MARGIN_48: string;
36
+ MARGIN_56: string;
37
+ MARGIN_64: string;
38
+ };
39
+ export type Spacing = (typeof Spacing)[keyof typeof Spacing];
package/dist/Typography/Typography.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ export declare const Typography: {
2
+ FONTSIZE_XS: string;
3
+ FONTSIZE_SM: string;
4
+ FONTSIZE_LG: string;
5
+ FONTSIZE_XL: string;
6
+ FONTSIZE_2XL: string;
7
+ FONTSIZE_3XL: string;
8
+ FONTSIZE_4XL: string;
9
+ FONTSIZE_5XL: string;
10
+ FONTSIZE_6XL: string;
11
+ FONTSIZE_7XL: string;
12
+ FONTSIZE_8XL: string;
13
+ FONTSIZE_9XL: string;
14
+ FONTWEIGHT_THIN: string;
15
+ FONTWEIGHT_EXTRALIGHT: string;
16
+ FONTWEIGHT_LIGHT: string;
17
+ FONTWEIGHT_NORMAL: string;
18
+ FONTWEIGHT_MEDIUM: string;
19
+ FONTWEIGHT_SEMIBOLD: string;
20
+ FONTWEIGHT_BOLD: string;
21
+ FONTWEIGHT_EXTRABOLD: string;
22
+ FONTWEIGHT_BLACK: string;
23
+ };
24
+ export type Typography = (typeof Typography)[keyof typeof Typography];
package/dist/design-tokens.mjs ADDED
@@ -0,0 +1,144 @@
1
+ import "./index.css";
2
+ const D = {
3
+ BG_ROBIN_100: "#CAD5FD",
4
+ BG_ROBIN_200: "#B8C7FC",
5
+ BG_ROBIN_300: "#95ACFB",
6
+ BG_ROBIN_400: "#7190F9",
7
+ BG_ROBIN_500: "#4E74F8",
8
+ BG_ROBIN_600: "#3F5ECC",
9
+ BG_SIENNA_100: "#E6D9CD",
10
+ BG_SIENNA_200: "#DECCBC",
11
+ BG_SIENNA_300: "#CEB29B",
12
+ BG_SIENNA_400: "#BD9979",
13
+ BG_SIENNA_500: "#AD7F58",
14
+ BG_SIENNA_600: "#8A6646",
15
+ BG_CHERRY_100: "#FADADB",
16
+ BG_CHERRY_200: "#F7C8CA",
17
+ BG_CHERRY_300: "#F5B6B8",
18
+ BG_CHERRY_400: "#EA6D71",
19
+ BG_CHERRY_500: "#E5484D",
20
+ BG_CHERRY_600: "#B83A3E",
21
+ BG_AQUA_100: "#C1EEFD",
22
+ BG_AQUA_200: "#9AE4FC",
23
+ BG_AQUA_300: "#72D9FB",
24
+ BG_AQUA_400: "#4BCFF9",
25
+ BG_AQUA_500: "#23C4F8",
26
+ BG_AQUA_600: "#07AFE6",
27
+ BG_SAKURA_100: "#FBC8D2",
28
+ BG_SAKURA_200: "#FAB5C3",
29
+ BG_SAKURA_300: "#F791A5",
30
+ BG_SAKURA_400: "#F56C87",
31
+ BG_SAKURA_500: "#F24769",
32
+ BG_SAKURA_600: "#C53955",
33
+ BG_AMBER_100: "#FFF0CC",
34
+ BG_AMBER_200: "#FFEBBB",
35
+ BG_AMBER_300: "#FFE19A",
36
+ BG_AMBER_400: "#FFD778",
37
+ BG_AMBER_500: "#FFCD56",
38
+ BG_AMBER_600: "#D5AA45",
39
+ BG_INK_100: "#2A2E37",
40
+ BG_INK_200: "#23262E",
41
+ BG_INK_300: "#16181D",
42
+ BG_INK_400: "#121317",
43
+ BG_INK_500: "#0B0C0E",
44
+ BG_VANILLA_100: "#FFFFFF",
45
+ BG_VANILLA_200: "#F5F5F5",
46
+ BG_VANILLA_300: "#E9E9E9",
47
+ BG_VANILLA_400: "#C0C1C3",
48
+ BG_SLATE_200: "#2C3140",
49
+ BG_SLATE_300: "#242834",
50
+ BG_SLATE_400: "#1D212D",
51
+ BG_SLATE_500: "#161922",
52
+ BG_GRADIENT_CORAL: "linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%)",
53
+ "BG_GRADIENT_DARK-SHADOW": "linear-gradient(139deg, rgba(18, 19, 23, 0.80) 0%, rgba(18, 19, 23, 0.90) 98.68%)",
54
+ BG_GRADIENT_DAWN: "linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%)",
55
+ BG_GRADIENT_OCEAN: "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)",
56
+ BG_GRADIENT_SPLASH: "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)",
57
+ BG_GRADIENT_FLAMINGO: "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)",
58
+ BG_FOREST_200: "#A8F3D3",
59
+ BG_FOREST_300: "#7CEDBE",
60
+ BG_FOREST_400: "#51E7A8",
61
+ BG_FOREST_500: "#25E192",
62
+ BG_FOREST_600: "#1EB475",
63
+ TEXT_ROBIN_100: "#CAD5FD",
64
+ TEXT_ROBIN_200: "#B8C7FC",
65
+ TEXT_ROBIN_300: "#95ACFB",
66
+ TEXT_ROBIN_400: "#7190F9",
67
+ TEXT_ROBIN_500: "#4E74F8",
68
+ TEXT_ROBIN_600: "#3F5ECC",
69
+ TEXT_SIENNA_100: "#E6D9CD",
70
+ TEXT_SIENNA_200: "#DECCBC",
71
+ TEXT_SIENNA_300: "#CEB29B",
72
+ TEXT_SIENNA_400: "#BD9979",
73
+ TEXT_SIENNA_500: "#AD7F58",
74
+ TEXT_SIENNA_600: "#8A6646",
75
+ TEXT_CHERRY_100: "#FADADB",
76
+ TEXT_CHERRY_200: "#F7C8CA",
77
+ TEXT_CHERRY_300: "#F5B6B8",
78
+ TEXT_CHERRY_400: "#EA6D71",
79
+ TEXT_CHERRY_500: "#E5484D",
80
+ TEXT_CHERRY_600: "#B83A3E",
81
+ TEXT_AQUA_100: "#C1EEFD",
82
+ TEXT_AQUA_200: "#9AE4FC",
83
+ TEXT_AQUA_300: "#72D9FB",
84
+ TEXT_AQUA_400: "#4BCFF9",
85
+ TEXT_AQUA_500: "#23C4F8",
86
+ TEXT_AQUA_600: "#07AFE6",
87
+ TEXT_SAKURA_100: "#FBC8D2",
88
+ TEXT_SAKURA_200: "#FAB5C3",
89
+ TEXT_SAKURA_300: "#F791A5",
90
+ TEXT_SAKURA_400: "#F56C87",
91
+ TEXT_SAKURA_500: "#F24769",
92
+ TEXT_SAKURA_600: "#C53955",
93
+ TEXT_AMBER_100: "#FFF0CC",
94
+ TEXT_AMBER_200: "#FFEBBB",
95
+ TEXT_AMBER_300: "#FFE19A",
96
+ TEXT_AMBER_400: "#FFD778",
97
+ TEXT_AMBER_500: "#FFCD56",
98
+ TEXT_AMBER_600: "#D5AA45",
99
+ TEXT_INK_100: "#2A2E37",
100
+ TEXT_INK_200: "#23262E",
101
+ TEXT_INK_300: "#16181D",
102
+ TEXT_INK_400: "#121317",
103
+ TEXT_INK_500: "#0B0C0E",
104
+ TEXT_VANILLA_100: "#FFFFFF",
105
+ TEXT_VANILLA_200: "#F5F5F5",
106
+ TEXT_VANILLA_300: "#E9E9E9",
107
+ TEXT_VANILLA_400: "#C0C1C3",
108
+ TEXT_SLATE_200: "#2C3140",
109
+ TEXT_SLATE_300: "#242834",
110
+ TEXT_SLATE_400: "#1D212D",
111
+ TEXT_SLATE_500: "#161922",
112
+ TEXT_GRADIENT_CORAL: "linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%)",
113
+ "TEXT_GRADIENT_DARK-SHADOW": "linear-gradient(139deg, rgba(18, 19, 23, 0.80) 0%, rgba(18, 19, 23, 0.90) 98.68%)",
114
+ TEXT_GRADIENT_DAWN: "linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%)",
115
+ TEXT_GRADIENT_OCEAN: "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)",
116
+ TEXT_GRADIENT_SPLASH: "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)",
117
+ TEXT_GRADIENT_FLAMINGO: "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)",
118
+ TEXT_FOREST_200: "#A8F3D3",
119
+ TEXT_FOREST_300: "#7CEDBE",
120
+ TEXT_FOREST_400: "#51E7A8",
121
+ TEXT_FOREST_500: "#25E192",
122
+ TEXT_FOREST_600: "#1EB475"
123
+ }, B = "_main_1taid_5", G = {
124
+ main: B
125
+ }, F = ["color"];
126
+ function C(E, A) {
127
+ const _ = {};
128
+ return E.width && (_.width = E.width), E.height && (_.height = E.height), _.width || _.height ? Object.assign(A || {}, _) : A;
129
+ }
130
+ function N(E, ...A) {
131
+ return Object.keys(E).filter(
132
+ (_) => E[_] !== void 0 && !F.includes(_) && !A.includes(_)
133
+ ).reduce(
134
+ (_, T) => (_[T] = E[T], _),
135
+ {
136
+ style: C(E, E.style)
137
+ }
138
+ );
139
+ }
140
+ export {
141
+ D as Color,
142
+ N as omitStyledProps,
143
+ G as styledClasses
144
+ };
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ :root{--bg-robin-100: #CAD5FD;--bg-robin-200: #B8C7FC;--bg-robin-300: #95ACFB;--bg-robin-400: #7190F9;--bg-robin-500: #4E74F8;--bg-robin-600: #3F5ECC;--bg-sienna-100: #E6D9CD;--bg-sienna-200: #DECCBC;--bg-sienna-300: #CEB29B;--bg-sienna-400: #BD9979;--bg-sienna-500: #AD7F58;--bg-sienna-600: #8A6646;--bg-cherry-100: #FADADB;--bg-cherry-200: #F7C8CA;--bg-cherry-300: #F5B6B8;--bg-cherry-400: #EA6D71;--bg-cherry-500: #E5484D;--bg-cherry-600: #B83A3E;--bg-aqua-100: #C1EEFD;--bg-aqua-200: #9AE4FC;--bg-aqua-300: #72D9FB;--bg-aqua-400: #4BCFF9;--bg-aqua-500: #23C4F8;--bg-aqua-600: #07AFE6;--bg-sakura-100: #FBC8D2;--bg-sakura-200: #FAB5C3;--bg-sakura-300: #F791A5;--bg-sakura-400: #F56C87;--bg-sakura-500: #F24769;--bg-sakura-600: #C53955;--bg-amber-100: #FFF0CC;--bg-amber-200: #FFEBBB;--bg-amber-300: #FFE19A;--bg-amber-400: #FFD778;--bg-amber-500: #FFCD56;--bg-amber-600: #D5AA45;--bg-ink-100: #2A2E37;--bg-ink-200: #23262E;--bg-ink-300: #16181D;--bg-ink-400: #121317;--bg-ink-500: #0B0C0E;--bg-vanilla-100: #FFFFFF;--bg-vanilla-200: #F5F5F5;--bg-vanilla-300: #E9E9E9;--bg-vanilla-400: #C0C1C3;--bg-slate-200: #2C3140;--bg-slate-300: #242834;--bg-slate-400: #1D212D;--bg-slate-500: #161922;--bg-gradient-coral: linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%);--bg-gradient-dark-shadow: linear-gradient(139deg, rgba(18, 19, 23, .8) 0%, rgba(18, 19, 23, .9) 98.68%);--bg-gradient-dawn: linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%);--bg-gradient-ocean: linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%);--bg-gradient-splash: linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%);--bg-gradient-flamingo: linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%);--bg-forest-200: #A8F3D3;--bg-forest-300: #7CEDBE;--bg-forest-400: #51E7A8;--bg-forest-500: #25E192;--bg-forest-600: #1EB475;--text-robin-100: #CAD5FD;--text-robin-200: #B8C7FC;--text-robin-300: #95ACFB;--text-robin-400: #7190F9;--text-robin-500: #4E74F8;--text-robin-600: #3F5ECC;--text-sienna-100: #E6D9CD;--text-sienna-200: #DECCBC;--text-sienna-300: #CEB29B;--text-sienna-400: #BD9979;--text-sienna-500: #AD7F58;--text-sienna-600: #8A6646;--text-cherry-100: #FADADB;--text-cherry-200: #F7C8CA;--text-cherry-300: #F5B6B8;--text-cherry-400: #EA6D71;--text-cherry-500: #E5484D;--text-cherry-600: #B83A3E;--text-aqua-100: #C1EEFD;--text-aqua-200: #9AE4FC;--text-aqua-300: #72D9FB;--text-aqua-400: #4BCFF9;--text-aqua-500: #23C4F8;--text-aqua-600: #07AFE6;--text-sakura-100: #FBC8D2;--text-sakura-200: #FAB5C3;--text-sakura-300: #F791A5;--text-sakura-400: #F56C87;--text-sakura-500: #F24769;--text-sakura-600: #C53955;--text-amber-100: #FFF0CC;--text-amber-200: #FFEBBB;--text-amber-300: #FFE19A;--text-amber-400: #FFD778;--text-amber-500: #FFCD56;--text-amber-600: #D5AA45;--text-ink-100: #2A2E37;--text-ink-200: #23262E;--text-ink-300: #16181D;--text-ink-400: #121317;--text-ink-500: #0B0C0E;--text-vanilla-100: #FFFFFF;--text-vanilla-200: #F5F5F5;--text-vanilla-300: #E9E9E9;--text-vanilla-400: #C0C1C3;--text-slate-200: #2C3140;--text-slate-300: #242834;--text-slate-400: #1D212D;--text-slate-500: #161922;--text-gradient-coral: linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%);--text-gradient-dark-shadow: linear-gradient(139deg, rgba(18, 19, 23, .8) 0%, rgba(18, 19, 23, .9) 98.68%);--text-gradient-dawn: linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%);--text-gradient-ocean: linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%);--text-gradient-splash: linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%);--text-gradient-flamingo: linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%);--text-forest-200: #A8F3D3;--text-forest-300: #7CEDBE;--text-forest-400: #51E7A8;--text-forest-500: #25E192;--text-forest-600: #1EB475}:root{--padding-1: .25rem;--padding-2: .5rem;--padding-3: .75rem;--padding-4: 1rem;--padding-5: 1.25rem;--padding-6: 1.5rem;--padding-7: 1.75rem;--padding-8: 2rem;--padding-10: 2.5rem;--padding-12: 3rem;--padding-16: 4rem;--padding-20: 5rem;--padding-24: 6rem;--padding-32: 8rem;--padding-40: 10rem;--padding-48: 12rem;--padding-56: 14rem;--padding-64: 16rem;--margin-1: .25rem;--margin-2: .5rem;--margin-3: .75rem;--margin-4: 1rem;--margin-5: 1.25rem;--margin-6: 1.5rem;--margin-7: 1.75rem;--margin-8: 2rem;--margin-10: 2.5rem;--margin-12: 3rem;--margin-16: 4rem;--margin-20: 5rem;--margin-24: 6rem;--margin-32: 8rem;--margin-40: 10rem;--margin-48: 12rem;--margin-56: 14rem;--margin-64: 16rem}:root{--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--font-size-7xl: 4.5rem;--font-size-8xl: 6rem;--font-size-9xl: 8rem;--font-weight-thin: 100;--font-weight-extralight: 200;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--font-weight-black: 900}._main_1taid_5{border:0;margin:0;color:#fff}
package/dist/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export * from "../src/Colors/Colors";
2
+ export * from "./utils";
3
+ import styledClasses from "./index.module.css";
4
+ export { styledClasses };
package/dist/utils.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { Color } from "./Colors/Colors";
2
+ export interface KVO<T = any> {
3
+ [key: string]: T;
4
+ }
5
+ export interface StyledProps {
6
+ /** Text Color */
7
+ color: Color;
8
+ /** Optional class name */
9
+ className?: string;
10
+ }
11
+ /** Generate classes from styled props */
12
+ export declare function styledClasses(props: StyledProps, ...classes: string[]): string;
13
+ /** Return all props that are not styled props */
14
+ export declare function omitStyledProps(props: KVO, ...ignoredProps: string[]): KVO;
package/package.json CHANGED
@@ -1,18 +1,32 @@
1
1
  {
2
2
  "name": "@signozhq/design-tokens",
3
- "version": "0.0.5",
4
- "main": "build/scss/_variables.scss",
3
+ "version": "0.0.7",
4
+ "main": "dist/index.d.ts",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"
8
8
  },
9
+ "exports": {
10
+ ".": "./dist/index.d.ts",
11
+ "./dist/style.css": "./dist/index.css"
12
+ },
9
13
  "scripts": {
10
- "build": "style-dictionary build"
14
+ "build": "vite build",
15
+ "build-style-dictionary": "style-dictionary build",
16
+ "generate-tokens": "node ./scripts/generate-types-from-json.mjs"
11
17
  },
18
+ "files": [
19
+ "dist/"
20
+ ],
12
21
  "author": "",
13
22
  "license": "ISC",
14
23
  "dependencies": {
15
- "style-dictionary": "3.8.0"
24
+ "style-dictionary": "3.8.0",
25
+ "vite-plugin-dts": "^3.6.4"
16
26
  },
17
- "gitHead": "8feb45b15d124b4b4eb0ae907570029bcda17772"
27
+ "gitHead": "dd9c59b3fa68b5b363aa74e56de9445a0f1433ca",
28
+ "devDependencies": {
29
+ "vite": "^5.0.8",
30
+ "vite-plugin-lib-inject-css": "^1.3.0"
31
+ }
18
32
  }
package/build/scss/_variables.scss DELETED
@@ -1,209 +0,0 @@
1
-
2
- // Do not edit directly
3
- // Generated on Tue, 19 Dec 2023 15:47:22 GMT
4
-
5
- $bg-robin-100: #CAD5FD;
6
- $bg-robin-200: #B8C7FC;
7
- $bg-robin-300: #95ACFB;
8
- $bg-robin-400: #7190F9;
9
- $bg-robin-500: #4E74F8;
10
- $bg-robin-600: #3F5ECC;
11
- $bg-sienna-100: #E6D9CD;
12
- $bg-sienna-200: #DECCBC;
13
- $bg-sienna-300: #CEB29B;
14
- $bg-sienna-400: #BD9979;
15
- $bg-sienna-500: #AD7F58;
16
- $bg-sienna-600: #8A6646;
17
- $bg-cherry-100: #FADADB;
18
- $bg-cherry-200: #F7C8CA;
19
- $bg-cherry-300: #F5B6B8;
20
- $bg-cherry-400: #EA6D71;
21
- $bg-cherry-500: #E5484D;
22
- $bg-cherry-600: #B83A3E;
23
- $bg-aqua-100: #C1EEFD;
24
- $bg-aqua-200: #9AE4FC;
25
- $bg-aqua-300: #72D9FB;
26
- $bg-aqua-400: #4BCFF9;
27
- $bg-aqua-500: #23C4F8;
28
- $bg-aqua-600: #07AFE6;
29
- $bg-sakura-100: #FBC8D2;
30
- $bg-sakura-200: #FAB5C3;
31
- $bg-sakura-300: #F791A5;
32
- $bg-sakura-400: #F56C87;
33
- $bg-sakura-500: #F24769;
34
- $bg-sakura-600: #C53955;
35
- $bg-amber-100: #FFF0CC;
36
- $bg-amber-200: #FFEBBB;
37
- $bg-amber-300: #FFE19A;
38
- $bg-amber-400: #FFD778;
39
- $bg-amber-500: #FFCD56;
40
- $bg-amber-600: #D5AA45;
41
- $bg-ink-100: #2A2E37;
42
- $bg-ink-200: #23262E;
43
- $bg-ink-300: #16181D;
44
- $bg-ink-400: #121317;
45
- $bg-ink-500: #0B0C0E;
46
- $bg-vanilla-100: #FFFFFF;
47
- $bg-vanilla-200: #F5F5F5;
48
- $bg-vanilla-300: #E9E9E9;
49
- $bg-vanilla-400: #C0C1C3;
50
- $bg-slate-200: #2C3140;
51
- $bg-slate-300: #242834;
52
- $bg-slate-400: #1D212D;
53
- $bg-slate-500: #161922;
54
- $bg-gradient-coral: linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%);
55
- $bg-gradient-dark-shadow: linear-gradient(139deg, rgba(18, 19, 23, 0.80) 0%, rgba(18, 19, 23, 0.90) 98.68%);
56
- $bg-gradient-dawn: linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%);
57
- $bg-gradient-ocean: linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%);
58
- $bg-gradient-splash: linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%);
59
- $bg-gradient-flamingo: linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%);
60
- $bg-forest-200: #A8F3D3;
61
- $bg-forest-300: #7CEDBE;
62
- $bg-forest-400: #51E7A8;
63
- $bg-forest-500: #25E192;
64
- $bg-forest-600: #1EB475;
65
- $text-robin-100: #CAD5FD;
66
- $text-robin-200: #B8C7FC;
67
- $text-robin-300: #95ACFB;
68
- $text-robin-400: #7190F9;
69
- $text-robin-500: #4E74F8;
70
- $text-robin-600: #3F5ECC;
71
- $text-sienna-100: #E6D9CD;
72
- $text-sienna-200: #DECCBC;
73
- $text-sienna-300: #CEB29B;
74
- $text-sienna-400: #BD9979;
75
- $text-sienna-500: #AD7F58;
76
- $text-sienna-600: #8A6646;
77
- $text-cherry-100: #FADADB;
78
- $text-cherry-200: #F7C8CA;
79
- $text-cherry-300: #F5B6B8;
80
- $text-cherry-400: #EA6D71;
81
- $text-cherry-500: #E5484D;
82
- $text-cherry-600: #B83A3E;
83
- $text-aqua-100: #C1EEFD;
84
- $text-aqua-200: #9AE4FC;
85
- $text-aqua-300: #72D9FB;
86
- $text-aqua-400: #4BCFF9;
87
- $text-aqua-500: #23C4F8;
88
- $text-aqua-600: #07AFE6;
89
- $text-sakura-100: #FBC8D2;
90
- $text-sakura-200: #FAB5C3;
91
- $text-sakura-300: #F791A5;
92
- $text-sakura-400: #F56C87;
93
- $text-sakura-500: #F24769;
94
- $text-sakura-600: #C53955;
95
- $text-amber-100: #FFF0CC;
96
- $text-amber-200: #FFEBBB;
97
- $text-amber-300: #FFE19A;
98
- $text-amber-400: #FFD778;
99
- $text-amber-500: #FFCD56;
100
- $text-amber-600: #D5AA45;
101
- $text-ink-100: #2A2E37;
102
- $text-ink-200: #23262E;
103
- $text-ink-300: #16181D;
104
- $text-ink-400: #121317;
105
- $text-ink-500: #0B0C0E;
106
- $text-vanilla-100: #FFFFFF;
107
- $text-vanilla-200: #F5F5F5;
108
- $text-vanilla-300: #E9E9E9;
109
- $text-vanilla-400: #C0C1C3;
110
- $text-slate-200: #2C3140;
111
- $text-slate-300: #242834;
112
- $text-slate-400: #1D212D;
113
- $text-slate-500: #161922;
114
- $text-gradient-coral: linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%);
115
- $text-gradient-dark-shadow: linear-gradient(139deg, rgba(18, 19, 23, 0.80) 0%, rgba(18, 19, 23, 0.90) 98.68%);
116
- $text-gradient-dawn: linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%);
117
- $text-gradient-ocean: linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%);
118
- $text-gradient-splash: linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%);
119
- $text-gradient-flamingo: linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%);
120
- $text-forest-200: #A8F3D3;
121
- $text-forest-300: #7CEDBE;
122
- $text-forest-400: #51E7A8;
123
- $text-forest-500: #25E192;
124
- $text-forest-600: #1EB475;
125
- $padding-1: 0.25rem;
126
- $padding-2: 0.5rem;
127
- $padding-3: 0.75rem;
128
- $padding-4: 1rem;
129
- $padding-5: 1.25rem;
130
- $padding-6: 1.5rem;
131
- $padding-7: 1.75rem;
132
- $padding-8: 2rem;
133
- $padding-10: 2.5rem;
134
- $padding-12: 3rem;
135
- $padding-16: 4rem;
136
- $padding-20: 5rem;
137
- $padding-24: 6rem;
138
- $padding-32: 8rem;
139
- $padding-40: 10rem;
140
- $padding-48: 12rem;
141
- $padding-56: 14rem;
142
- $padding-64: 16rem;
143
- $margin-1: 0.25rem;
144
- $margin-2: 0.5rem;
145
- $margin-3: 0.75rem;
146
- $margin-4: 1rem;
147
- $margin-5: 1.25rem;
148
- $margin-6: 1.5rem;
149
- $margin-7: 1.75rem;
150
- $margin-8: 2rem;
151
- $margin-10: 2.5rem;
152
- $margin-12: 3rem;
153
- $margin-16: 4rem;
154
- $margin-20: 5rem;
155
- $margin-24: 6rem;
156
- $margin-32: 8rem;
157
- $margin-40: 10rem;
158
- $margin-48: 12rem;
159
- $margin-56: 14rem;
160
- $margin-64: 16rem;
161
- $font-size-xs: 0.75rem;
162
- $font-size-xs-line-height: 1rem;
163
- $font-size-sm: 0.875rem;
164
- $font-size-sm-line-height: 1.25rem;
165
- $font-size-base: 1rem;
166
- $font-size-base-line-height: 1.5rem;
167
- $font-size-lg: 1.125rem;
168
- $font-size-lg-line-height: 1.75rem;
169
- $font-size-xl: 1.25rem;
170
- $font-size-xl-line-height: 1.75rem;
171
- $font-size-2xl: 1.5rem;
172
- $font-size-2xl-line-height: 2rem;
173
- $font-size-3xl: 1.875rem;
174
- $font-size-3xl-line-height: 2.25rem;
175
- $font-size-4xl: 2.25rem;
176
- $font-size-4xl-line-height: 2.5rem;
177
- $font-size-5xl: 3rem;
178
- $font-size-5xl-line-height: 1;
179
- $font-size-6xl: 3.75rem;
180
- $font-size-6xl-line-height: 1;
181
- $font-size-7xl: 4.5rem;
182
- $font-size-7xl-line-height: 1;
183
- $font-size-8xl: 6rem;
184
- $font-size-8xl-line-height: 1;
185
- $font-size-9xl: 8rem;
186
- $font-size-9xl-line-height: 1;
187
- $font-weight-thin: 100;
188
- $font-weight-extralight: 200;
189
- $font-weight-light: 300;
190
- $font-weight-normal: 400;
191
- $font-weight-medium: 500;
192
- $font-weight-semibold: 600;
193
- $font-weight-bold: 700;
194
- $font-weight-extrabold: 800;
195
- $font-weight-black: 900;
196
- $line-heights-3: 12;
197
- $line-heights-4: 16;
198
- $line-heights-5: 20;
199
- $line-heights-6: 24;
200
- $line-heights-7: 28;
201
- $line-heights-8: 32;
202
- $line-heights-9: 36;
203
- $line-heights-10: 40;
204
- $line-heights-none: 16;
205
- $line-heights-tight: 20;
206
- $line-heights-snug: 22;
207
- $line-heights-normal: 24;
208
- $line-heights-relaxed: 26;
209
- $line-heights-loose: 32;