@signozhq/design-tokens 0.0.5 → 0.0.6
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/dist/_colors.scss +124 -0
- package/dist/_spacings.scss +40 -0
- package/dist/_typography.scss +25 -0
- package/{build/scss → dist}/_variables.scss +1 -29
- package/index.scss +3 -0
- package/package.json +7 -3
- package/build.js +0 -92
- package/config.json +0 -16
- package/src/colors.json +0 -410
- package/src/spacing.json +0 -114
- package/src/typography.json +0 -562
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Tue, 19 Dec 2023 19:10:46 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;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Tue, 19 Dec 2023 19:10:46 GMT
|
|
4
|
+
|
|
5
|
+
$padding-1: 0.25rem;
|
|
6
|
+
$padding-2: 0.5rem;
|
|
7
|
+
$padding-3: 0.75rem;
|
|
8
|
+
$padding-4: 1rem;
|
|
9
|
+
$padding-5: 1.25rem;
|
|
10
|
+
$padding-6: 1.5rem;
|
|
11
|
+
$padding-7: 1.75rem;
|
|
12
|
+
$padding-8: 2rem;
|
|
13
|
+
$padding-10: 2.5rem;
|
|
14
|
+
$padding-12: 3rem;
|
|
15
|
+
$padding-16: 4rem;
|
|
16
|
+
$padding-20: 5rem;
|
|
17
|
+
$padding-24: 6rem;
|
|
18
|
+
$padding-32: 8rem;
|
|
19
|
+
$padding-40: 10rem;
|
|
20
|
+
$padding-48: 12rem;
|
|
21
|
+
$padding-56: 14rem;
|
|
22
|
+
$padding-64: 16rem;
|
|
23
|
+
$margin-1: 0.25rem;
|
|
24
|
+
$margin-2: 0.5rem;
|
|
25
|
+
$margin-3: 0.75rem;
|
|
26
|
+
$margin-4: 1rem;
|
|
27
|
+
$margin-5: 1.25rem;
|
|
28
|
+
$margin-6: 1.5rem;
|
|
29
|
+
$margin-7: 1.75rem;
|
|
30
|
+
$margin-8: 2rem;
|
|
31
|
+
$margin-10: 2.5rem;
|
|
32
|
+
$margin-12: 3rem;
|
|
33
|
+
$margin-16: 4rem;
|
|
34
|
+
$margin-20: 5rem;
|
|
35
|
+
$margin-24: 6rem;
|
|
36
|
+
$margin-32: 8rem;
|
|
37
|
+
$margin-40: 10rem;
|
|
38
|
+
$margin-48: 12rem;
|
|
39
|
+
$margin-56: 14rem;
|
|
40
|
+
$margin-64: 16rem;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Tue, 19 Dec 2023 19:10:46 GMT
|
|
4
|
+
|
|
5
|
+
$font-size-xs: 0.75rem;
|
|
6
|
+
$font-size-sm: 0.875rem;
|
|
7
|
+
$font-size-lg: 1.125rem;
|
|
8
|
+
$font-size-xl: 1.25rem;
|
|
9
|
+
$font-size-2xl: 1.5rem;
|
|
10
|
+
$font-size-3xl: 1.875rem;
|
|
11
|
+
$font-size-4xl: 2.25rem;
|
|
12
|
+
$font-size-5xl: 3rem;
|
|
13
|
+
$font-size-6xl: 3.75rem;
|
|
14
|
+
$font-size-7xl: 4.5rem;
|
|
15
|
+
$font-size-8xl: 6rem;
|
|
16
|
+
$font-size-9xl: 8rem;
|
|
17
|
+
$font-weight-thin: 100;
|
|
18
|
+
$font-weight-extralight: 200;
|
|
19
|
+
$font-weight-light: 300;
|
|
20
|
+
$font-weight-normal: 400;
|
|
21
|
+
$font-weight-medium: 500;
|
|
22
|
+
$font-weight-semibold: 600;
|
|
23
|
+
$font-weight-bold: 700;
|
|
24
|
+
$font-weight-extrabold: 800;
|
|
25
|
+
$font-weight-black: 900;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on Tue, 19 Dec 2023
|
|
3
|
+
// Generated on Tue, 19 Dec 2023 19:08:20 GMT
|
|
4
4
|
|
|
5
5
|
$bg-robin-100: #CAD5FD;
|
|
6
6
|
$bg-robin-200: #B8C7FC;
|
|
@@ -159,31 +159,17 @@ $margin-48: 12rem;
|
|
|
159
159
|
$margin-56: 14rem;
|
|
160
160
|
$margin-64: 16rem;
|
|
161
161
|
$font-size-xs: 0.75rem;
|
|
162
|
-
$font-size-xs-line-height: 1rem;
|
|
163
162
|
$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
163
|
$font-size-lg: 1.125rem;
|
|
168
|
-
$font-size-lg-line-height: 1.75rem;
|
|
169
164
|
$font-size-xl: 1.25rem;
|
|
170
|
-
$font-size-xl-line-height: 1.75rem;
|
|
171
165
|
$font-size-2xl: 1.5rem;
|
|
172
|
-
$font-size-2xl-line-height: 2rem;
|
|
173
166
|
$font-size-3xl: 1.875rem;
|
|
174
|
-
$font-size-3xl-line-height: 2.25rem;
|
|
175
167
|
$font-size-4xl: 2.25rem;
|
|
176
|
-
$font-size-4xl-line-height: 2.5rem;
|
|
177
168
|
$font-size-5xl: 3rem;
|
|
178
|
-
$font-size-5xl-line-height: 1;
|
|
179
169
|
$font-size-6xl: 3.75rem;
|
|
180
|
-
$font-size-6xl-line-height: 1;
|
|
181
170
|
$font-size-7xl: 4.5rem;
|
|
182
|
-
$font-size-7xl-line-height: 1;
|
|
183
171
|
$font-size-8xl: 6rem;
|
|
184
|
-
$font-size-8xl-line-height: 1;
|
|
185
172
|
$font-size-9xl: 8rem;
|
|
186
|
-
$font-size-9xl-line-height: 1;
|
|
187
173
|
$font-weight-thin: 100;
|
|
188
174
|
$font-weight-extralight: 200;
|
|
189
175
|
$font-weight-light: 300;
|
|
@@ -193,17 +179,3 @@ $font-weight-semibold: 600;
|
|
|
193
179
|
$font-weight-bold: 700;
|
|
194
180
|
$font-weight-extrabold: 800;
|
|
195
181
|
$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;
|
package/index.scss
ADDED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@signozhq/design-tokens",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"main": "
|
|
3
|
+
"version": "0.0.6",
|
|
4
|
+
"main": "index.scss",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -9,10 +9,14 @@
|
|
|
9
9
|
"scripts": {
|
|
10
10
|
"build": "style-dictionary build"
|
|
11
11
|
},
|
|
12
|
+
"files": [
|
|
13
|
+
"dist/",
|
|
14
|
+
"index.scss"
|
|
15
|
+
],
|
|
12
16
|
"author": "",
|
|
13
17
|
"license": "ISC",
|
|
14
18
|
"dependencies": {
|
|
15
19
|
"style-dictionary": "3.8.0"
|
|
16
20
|
},
|
|
17
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "c4ad7472a49d89e3e6576330f91888fc031e89cd"
|
|
18
22
|
}
|
package/build.js
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
const StyleDictionary = require('style-dictionary');
|
|
2
|
-
const fs = require('fs-extra');
|
|
3
|
-
const webPath = `build/tokens/`;
|
|
4
|
-
fs.removeSync(webPath);
|
|
5
|
-
|
|
6
|
-
function removeTitle(dictionary) {
|
|
7
|
-
dictionary.allTokens = dictionary.allTokens.map(token => {
|
|
8
|
-
token.name = token.name.substring(token.name.indexOf("-") + 1);
|
|
9
|
-
return token;
|
|
10
|
-
});
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* This function will wrap a built-in format and replace `.value` with `.darkValue`
|
|
15
|
-
* if a token has a `.darkValue`.
|
|
16
|
-
* @param {String} format - the name of the built-in format
|
|
17
|
-
* @returns {Function}
|
|
18
|
-
*/
|
|
19
|
-
function darkFormatWrapper(format) {
|
|
20
|
-
return function (args) {
|
|
21
|
-
const dictionary = Object.assign({}, args.dictionary);
|
|
22
|
-
dictionary.allProperties = dictionary.allProperties.map(token => {
|
|
23
|
-
const { darkValue } = token;
|
|
24
|
-
if (darkValue) {
|
|
25
|
-
const returnToken = Object.assign({}, token, {
|
|
26
|
-
value: token.darkValue
|
|
27
|
-
});
|
|
28
|
-
return returnToken;
|
|
29
|
-
} else {
|
|
30
|
-
return token;
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
dictionary.allTokens = dictionary.allTokens.map(token => {
|
|
34
|
-
const { darkValue } = token;
|
|
35
|
-
if (darkValue) {
|
|
36
|
-
const returnToken = Object.assign({}, token, {
|
|
37
|
-
value: token.darkValue
|
|
38
|
-
});
|
|
39
|
-
return returnToken;
|
|
40
|
-
} else {
|
|
41
|
-
return token;
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
removeTitle(dictionary);
|
|
46
|
-
args.dictionary = dictionary;
|
|
47
|
-
// Use the built-in format but with our customized dictionary object
|
|
48
|
-
// so it will output the darkValue instead of the value
|
|
49
|
-
return StyleDictionary.format[format]({ ...args, dictionary })
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function lightFormatWrapper(format) {
|
|
54
|
-
return function (args) {
|
|
55
|
-
const dictionary = Object.assign({}, args.dictionary);
|
|
56
|
-
removeTitle(dictionary);
|
|
57
|
-
args.dictionary = dictionary;
|
|
58
|
-
return StyleDictionary.format[format]({ ...args, dictionary })
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
StyleDictionary.extend({
|
|
65
|
-
// custom formats
|
|
66
|
-
format: {
|
|
67
|
-
scssDark: darkFormatWrapper(`scss/variables`),
|
|
68
|
-
scssLight: lightFormatWrapper(`scss/variables`),
|
|
69
|
-
},
|
|
70
|
-
|
|
71
|
-
source: [
|
|
72
|
-
`tokens/**/*.json`
|
|
73
|
-
],
|
|
74
|
-
|
|
75
|
-
platforms: {
|
|
76
|
-
css: {
|
|
77
|
-
transformGroup: `scss`,
|
|
78
|
-
buildPath: webPath,
|
|
79
|
-
files: [{
|
|
80
|
-
destination: `variables.scss`,
|
|
81
|
-
format: `scssLight`,
|
|
82
|
-
options: {
|
|
83
|
-
outputReferences: true
|
|
84
|
-
}
|
|
85
|
-
}, {
|
|
86
|
-
destination: `variables-dark.scss`,
|
|
87
|
-
format: `scssDark`,
|
|
88
|
-
filter: (token) => token.darkValue && token.attributes.category === `color`
|
|
89
|
-
}]
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}).buildAllPlatforms();
|
package/config.json
DELETED