@estebanruano/design-tokens 1.0.2 → 1.0.3
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/json/tokens.json +43 -43
- package/dist/web/tokens.css +43 -43
- package/dist/web/tokens.js +43 -43
- package/package.json +1 -1
package/dist/json/tokens.json
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
{
|
|
2
|
-
"ColorNeutral0": "#
|
|
3
|
-
"ColorNeutral50": "#
|
|
4
|
-
"ColorNeutral100": "#
|
|
5
|
-
"ColorNeutral200": "#
|
|
6
|
-
"ColorNeutral300": "#
|
|
7
|
-
"ColorNeutral400": "#
|
|
8
|
-
"ColorNeutral500": "#
|
|
9
|
-
"ColorNeutral600": "#
|
|
10
|
-
"ColorNeutral700": "#
|
|
11
|
-
"ColorNeutral800": "#
|
|
12
|
-
"ColorNeutral900": "#
|
|
2
|
+
"ColorNeutral0": "#ffffff",
|
|
3
|
+
"ColorNeutral50": "#fafafa",
|
|
4
|
+
"ColorNeutral100": "#f5f5f5",
|
|
5
|
+
"ColorNeutral200": "#e5e5e5",
|
|
6
|
+
"ColorNeutral300": "#d4d4d4",
|
|
7
|
+
"ColorNeutral400": "#a3a3a3",
|
|
8
|
+
"ColorNeutral500": "#737373",
|
|
9
|
+
"ColorNeutral600": "#525252",
|
|
10
|
+
"ColorNeutral700": "#404040",
|
|
11
|
+
"ColorNeutral800": "#262626",
|
|
12
|
+
"ColorNeutral900": "#171717",
|
|
13
13
|
"ColorNeutral1000": "#000000",
|
|
14
|
-
"ColorPrimary50": "#
|
|
15
|
-
"ColorPrimary100": "#
|
|
16
|
-
"ColorPrimary200": "#
|
|
17
|
-
"ColorPrimary300": "#
|
|
18
|
-
"ColorPrimary400": "#
|
|
19
|
-
"ColorPrimary500": "#
|
|
20
|
-
"ColorPrimary600": "#
|
|
21
|
-
"ColorPrimary700": "#
|
|
22
|
-
"ColorPrimary800": "#
|
|
23
|
-
"ColorPrimary00": "#
|
|
24
|
-
"ColorSecondary50": "#
|
|
25
|
-
"ColorSecondary100": "#
|
|
26
|
-
"ColorSecondary200": "#
|
|
27
|
-
"ColorSecondary300": "#
|
|
28
|
-
"ColorSecondary400": "#
|
|
29
|
-
"ColorSecondary500": "#
|
|
30
|
-
"ColorSecondary600": "#
|
|
31
|
-
"ColorSecondary700": "#
|
|
32
|
-
"ColorSecondary800": "#
|
|
33
|
-
"ColorSecondary00": "#
|
|
34
|
-
"ColorSemanticSuccessLight": "#
|
|
35
|
-
"ColorSemanticSuccess": "#
|
|
36
|
-
"ColorSemanticSuccessDark": "#
|
|
37
|
-
"ColorSemanticWarningLight": "#
|
|
38
|
-
"ColorSemanticWarning": "#
|
|
39
|
-
"ColorSemanticWarningDark": "#
|
|
40
|
-
"ColorSemanticErrorLight": "#
|
|
41
|
-
"ColorSemanticError": "#
|
|
42
|
-
"ColorSemanticErrorDark": "#
|
|
43
|
-
"ColorSemanticInfoLight": "#
|
|
44
|
-
"ColorSemanticInfo": "#
|
|
45
|
-
"ColorSemanticInfoDark": "#
|
|
14
|
+
"ColorPrimary50": "#f4f4f5",
|
|
15
|
+
"ColorPrimary100": "#e4e4e7",
|
|
16
|
+
"ColorPrimary200": "#d4d4d8",
|
|
17
|
+
"ColorPrimary300": "#a1a1aa",
|
|
18
|
+
"ColorPrimary400": "#71717a",
|
|
19
|
+
"ColorPrimary500": "#52525b",
|
|
20
|
+
"ColorPrimary600": "#3f3f46",
|
|
21
|
+
"ColorPrimary700": "#27272a",
|
|
22
|
+
"ColorPrimary800": "#18181b",
|
|
23
|
+
"ColorPrimary00": "#fafafa",
|
|
24
|
+
"ColorSecondary50": "#f1f5f9",
|
|
25
|
+
"ColorSecondary100": "#e2e8f0",
|
|
26
|
+
"ColorSecondary200": "#cbd5e1",
|
|
27
|
+
"ColorSecondary300": "#94a3b8",
|
|
28
|
+
"ColorSecondary400": "#64748b",
|
|
29
|
+
"ColorSecondary500": "#475569",
|
|
30
|
+
"ColorSecondary600": "#334155",
|
|
31
|
+
"ColorSecondary700": "#1e293b",
|
|
32
|
+
"ColorSecondary800": "#0f172a",
|
|
33
|
+
"ColorSecondary00": "#f8fafc",
|
|
34
|
+
"ColorSemanticSuccessLight": "#f5f5f5",
|
|
35
|
+
"ColorSemanticSuccess": "#404040",
|
|
36
|
+
"ColorSemanticSuccessDark": "#171717",
|
|
37
|
+
"ColorSemanticWarningLight": "#e5e5e5",
|
|
38
|
+
"ColorSemanticWarning": "#525252",
|
|
39
|
+
"ColorSemanticWarningDark": "#262626",
|
|
40
|
+
"ColorSemanticErrorLight": "#e7e7e7",
|
|
41
|
+
"ColorSemanticError": "#1a1a1a",
|
|
42
|
+
"ColorSemanticErrorDark": "#0a0a0a",
|
|
43
|
+
"ColorSemanticInfoLight": "#ededed",
|
|
44
|
+
"ColorSemanticInfo": "#363636",
|
|
45
|
+
"ColorSemanticInfoDark": "#141414",
|
|
46
46
|
"DurationInstant": "100ms",
|
|
47
47
|
"DurationFast": "150ms",
|
|
48
48
|
"DurationNormal": "300ms",
|
package/dist/web/tokens.css
CHANGED
|
@@ -3,50 +3,50 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--color-neutral-0: #
|
|
7
|
-
--color-neutral-50: #
|
|
8
|
-
--color-neutral-100: #
|
|
9
|
-
--color-neutral-200: #
|
|
10
|
-
--color-neutral-300: #
|
|
11
|
-
--color-neutral-400: #
|
|
12
|
-
--color-neutral-500: #
|
|
13
|
-
--color-neutral-600: #
|
|
14
|
-
--color-neutral-700: #
|
|
15
|
-
--color-neutral-800: #
|
|
16
|
-
--color-neutral-900: #
|
|
6
|
+
--color-neutral-0: #ffffff;
|
|
7
|
+
--color-neutral-50: #fafafa;
|
|
8
|
+
--color-neutral-100: #f5f5f5;
|
|
9
|
+
--color-neutral-200: #e5e5e5;
|
|
10
|
+
--color-neutral-300: #d4d4d4;
|
|
11
|
+
--color-neutral-400: #a3a3a3;
|
|
12
|
+
--color-neutral-500: #737373;
|
|
13
|
+
--color-neutral-600: #525252;
|
|
14
|
+
--color-neutral-700: #404040;
|
|
15
|
+
--color-neutral-800: #262626;
|
|
16
|
+
--color-neutral-900: #171717;
|
|
17
17
|
--color-neutral-1000: #000000;
|
|
18
|
-
--color-primary-50: #
|
|
19
|
-
--color-primary-100: #
|
|
20
|
-
--color-primary-200: #
|
|
21
|
-
--color-primary-300: #
|
|
22
|
-
--color-primary-400: #
|
|
23
|
-
--color-primary-500: #
|
|
24
|
-
--color-primary-600: #
|
|
25
|
-
--color-primary-700: #
|
|
26
|
-
--color-primary-800: #
|
|
27
|
-
--color-primary-00: #
|
|
28
|
-
--color-secondary-50: #
|
|
29
|
-
--color-secondary-100: #
|
|
30
|
-
--color-secondary-200: #
|
|
31
|
-
--color-secondary-300: #
|
|
32
|
-
--color-secondary-400: #
|
|
33
|
-
--color-secondary-500: #
|
|
34
|
-
--color-secondary-600: #
|
|
35
|
-
--color-secondary-700: #
|
|
36
|
-
--color-secondary-800: #
|
|
37
|
-
--color-secondary-00: #
|
|
38
|
-
--color-semantic-success-light: #
|
|
39
|
-
--color-semantic-success: #
|
|
40
|
-
--color-semantic-success-dark: #
|
|
41
|
-
--color-semantic-warning-light: #
|
|
42
|
-
--color-semantic-warning: #
|
|
43
|
-
--color-semantic-warning-dark: #
|
|
44
|
-
--color-semantic-error-light: #
|
|
45
|
-
--color-semantic-error: #
|
|
46
|
-
--color-semantic-error-dark: #
|
|
47
|
-
--color-semantic-info-light: #
|
|
48
|
-
--color-semantic-info: #
|
|
49
|
-
--color-semantic-info-dark: #
|
|
18
|
+
--color-primary-50: #f4f4f5;
|
|
19
|
+
--color-primary-100: #e4e4e7;
|
|
20
|
+
--color-primary-200: #d4d4d8;
|
|
21
|
+
--color-primary-300: #a1a1aa;
|
|
22
|
+
--color-primary-400: #71717a;
|
|
23
|
+
--color-primary-500: #52525b;
|
|
24
|
+
--color-primary-600: #3f3f46;
|
|
25
|
+
--color-primary-700: #27272a;
|
|
26
|
+
--color-primary-800: #18181b;
|
|
27
|
+
--color-primary-00: #fafafa;
|
|
28
|
+
--color-secondary-50: #f1f5f9;
|
|
29
|
+
--color-secondary-100: #e2e8f0;
|
|
30
|
+
--color-secondary-200: #cbd5e1;
|
|
31
|
+
--color-secondary-300: #94a3b8;
|
|
32
|
+
--color-secondary-400: #64748b;
|
|
33
|
+
--color-secondary-500: #475569;
|
|
34
|
+
--color-secondary-600: #334155;
|
|
35
|
+
--color-secondary-700: #1e293b;
|
|
36
|
+
--color-secondary-800: #0f172a;
|
|
37
|
+
--color-secondary-00: #f8fafc;
|
|
38
|
+
--color-semantic-success-light: #f5f5f5;
|
|
39
|
+
--color-semantic-success: #404040;
|
|
40
|
+
--color-semantic-success-dark: #171717;
|
|
41
|
+
--color-semantic-warning-light: #e5e5e5;
|
|
42
|
+
--color-semantic-warning: #525252;
|
|
43
|
+
--color-semantic-warning-dark: #262626;
|
|
44
|
+
--color-semantic-error-light: #e7e7e7;
|
|
45
|
+
--color-semantic-error: #1a1a1a;
|
|
46
|
+
--color-semantic-error-dark: #0a0a0a;
|
|
47
|
+
--color-semantic-info-light: #ededed;
|
|
48
|
+
--color-semantic-info: #363636;
|
|
49
|
+
--color-semantic-info-dark: #141414;
|
|
50
50
|
--duration-instant: 100ms; /** Micro-interactions */
|
|
51
51
|
--duration-fast: 150ms; /** Hover states */
|
|
52
52
|
--duration-normal: 300ms; /** Transitions */
|
package/dist/web/tokens.js
CHANGED
|
@@ -2,50 +2,50 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
export const ColorNeutral0 = "#
|
|
6
|
-
export const ColorNeutral50 = "#
|
|
7
|
-
export const ColorNeutral100 = "#
|
|
8
|
-
export const ColorNeutral200 = "#
|
|
9
|
-
export const ColorNeutral300 = "#
|
|
10
|
-
export const ColorNeutral400 = "#
|
|
11
|
-
export const ColorNeutral500 = "#
|
|
12
|
-
export const ColorNeutral600 = "#
|
|
13
|
-
export const ColorNeutral700 = "#
|
|
14
|
-
export const ColorNeutral800 = "#
|
|
15
|
-
export const ColorNeutral900 = "#
|
|
5
|
+
export const ColorNeutral0 = "#ffffff";
|
|
6
|
+
export const ColorNeutral50 = "#fafafa";
|
|
7
|
+
export const ColorNeutral100 = "#f5f5f5";
|
|
8
|
+
export const ColorNeutral200 = "#e5e5e5";
|
|
9
|
+
export const ColorNeutral300 = "#d4d4d4";
|
|
10
|
+
export const ColorNeutral400 = "#a3a3a3";
|
|
11
|
+
export const ColorNeutral500 = "#737373";
|
|
12
|
+
export const ColorNeutral600 = "#525252";
|
|
13
|
+
export const ColorNeutral700 = "#404040";
|
|
14
|
+
export const ColorNeutral800 = "#262626";
|
|
15
|
+
export const ColorNeutral900 = "#171717";
|
|
16
16
|
export const ColorNeutral1000 = "#000000";
|
|
17
|
-
export const ColorPrimary50 = "#
|
|
18
|
-
export const ColorPrimary100 = "#
|
|
19
|
-
export const ColorPrimary200 = "#
|
|
20
|
-
export const ColorPrimary300 = "#
|
|
21
|
-
export const ColorPrimary400 = "#
|
|
22
|
-
export const ColorPrimary500 = "#
|
|
23
|
-
export const ColorPrimary600 = "#
|
|
24
|
-
export const ColorPrimary700 = "#
|
|
25
|
-
export const ColorPrimary800 = "#
|
|
26
|
-
export const ColorPrimary00 = "#
|
|
27
|
-
export const ColorSecondary50 = "#
|
|
28
|
-
export const ColorSecondary100 = "#
|
|
29
|
-
export const ColorSecondary200 = "#
|
|
30
|
-
export const ColorSecondary300 = "#
|
|
31
|
-
export const ColorSecondary400 = "#
|
|
32
|
-
export const ColorSecondary500 = "#
|
|
33
|
-
export const ColorSecondary600 = "#
|
|
34
|
-
export const ColorSecondary700 = "#
|
|
35
|
-
export const ColorSecondary800 = "#
|
|
36
|
-
export const ColorSecondary00 = "#
|
|
37
|
-
export const ColorSemanticSuccessLight = "#
|
|
38
|
-
export const ColorSemanticSuccess = "#
|
|
39
|
-
export const ColorSemanticSuccessDark = "#
|
|
40
|
-
export const ColorSemanticWarningLight = "#
|
|
41
|
-
export const ColorSemanticWarning = "#
|
|
42
|
-
export const ColorSemanticWarningDark = "#
|
|
43
|
-
export const ColorSemanticErrorLight = "#
|
|
44
|
-
export const ColorSemanticError = "#
|
|
45
|
-
export const ColorSemanticErrorDark = "#
|
|
46
|
-
export const ColorSemanticInfoLight = "#
|
|
47
|
-
export const ColorSemanticInfo = "#
|
|
48
|
-
export const ColorSemanticInfoDark = "#
|
|
17
|
+
export const ColorPrimary50 = "#f4f4f5";
|
|
18
|
+
export const ColorPrimary100 = "#e4e4e7";
|
|
19
|
+
export const ColorPrimary200 = "#d4d4d8";
|
|
20
|
+
export const ColorPrimary300 = "#a1a1aa";
|
|
21
|
+
export const ColorPrimary400 = "#71717a";
|
|
22
|
+
export const ColorPrimary500 = "#52525b";
|
|
23
|
+
export const ColorPrimary600 = "#3f3f46";
|
|
24
|
+
export const ColorPrimary700 = "#27272a";
|
|
25
|
+
export const ColorPrimary800 = "#18181b";
|
|
26
|
+
export const ColorPrimary00 = "#fafafa";
|
|
27
|
+
export const ColorSecondary50 = "#f1f5f9";
|
|
28
|
+
export const ColorSecondary100 = "#e2e8f0";
|
|
29
|
+
export const ColorSecondary200 = "#cbd5e1";
|
|
30
|
+
export const ColorSecondary300 = "#94a3b8";
|
|
31
|
+
export const ColorSecondary400 = "#64748b";
|
|
32
|
+
export const ColorSecondary500 = "#475569";
|
|
33
|
+
export const ColorSecondary600 = "#334155";
|
|
34
|
+
export const ColorSecondary700 = "#1e293b";
|
|
35
|
+
export const ColorSecondary800 = "#0f172a";
|
|
36
|
+
export const ColorSecondary00 = "#f8fafc";
|
|
37
|
+
export const ColorSemanticSuccessLight = "#f5f5f5";
|
|
38
|
+
export const ColorSemanticSuccess = "#404040";
|
|
39
|
+
export const ColorSemanticSuccessDark = "#171717";
|
|
40
|
+
export const ColorSemanticWarningLight = "#e5e5e5";
|
|
41
|
+
export const ColorSemanticWarning = "#525252";
|
|
42
|
+
export const ColorSemanticWarningDark = "#262626";
|
|
43
|
+
export const ColorSemanticErrorLight = "#e7e7e7";
|
|
44
|
+
export const ColorSemanticError = "#1a1a1a";
|
|
45
|
+
export const ColorSemanticErrorDark = "#0a0a0a";
|
|
46
|
+
export const ColorSemanticInfoLight = "#ededed";
|
|
47
|
+
export const ColorSemanticInfo = "#363636";
|
|
48
|
+
export const ColorSemanticInfoDark = "#141414";
|
|
49
49
|
export const DurationInstant = "100ms"; // Micro-interactions
|
|
50
50
|
export const DurationFast = "150ms"; // Hover states
|
|
51
51
|
export const DurationNormal = "300ms"; // Transitions
|