@transferwise/neptune-tokens 8.0.0-next.2 → 8.0.0-next.21

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 (17) hide show
  1. package/README.md +1 -1
  2. package/colors-base.css +1 -1
  3. package/colors-base.less +1 -1
  4. package/colors.json +2626 -0
  5. package/package.json +5 -5
  6. package/themes/dark/tokens.css +47 -26
  7. package/themes/dark/tokens.less +47 -26
  8. package/themes/light/tokens.css +47 -26
  9. package/themes/light/tokens.less +47 -26
  10. package/themes/navy/tokens.css +47 -26
  11. package/themes/navy/tokens.less +47 -26
  12. package/themes/personal/tokens.css +135 -0
  13. package/themes/personal/tokens.less +132 -0
  14. package/themes/personal--dark/tokens.css +159 -0
  15. package/themes/personal--dark/tokens.less +156 -0
  16. package/tokens.css +48 -27
  17. package/tokens.less +48 -27
package/themes/personal/tokens.css ADDED
@@ -0,0 +1,135 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 30 Nov 2022 15:37:15 GMT
4
+ */
5
+
6
+ .np-theme-personal {
7
+ --color-bright-yellow: #ffeb69;
8
+ --color-bright-orange: #ffc091;
9
+ --color-dark-purple: #260a2f;
10
+ --color-dark-gold: #3a341c;
11
+ --color-bright-blue: #a0e1e1;
12
+ --color-dark-charcoal: #21231d;
13
+ --color-white: #ffffff;
14
+ --color-black: #000000;
15
+ --color-bright-green: #9fe870;
16
+ --color-forest-green: #163300;
17
+ --color-bright-pink: #ffd7ef;
18
+ --color-dark-maroon: #320707;
19
+ --color-content-primary: #0e0f0c;
20
+ --color-content-secondary: #454745;
21
+ --color-content-tertiary: #6a6c6a;
22
+ --color-content-link: #163300;
23
+ --color-content-link-hover: #0d1f00;
24
+ --color-content-link-active: #0e0f0c;
25
+ --color-interactive-primary: #163300;
26
+ --color-interactive-primary-hover: #0d1f00;
27
+ --color-interactive-primary-active: #0e0f0c;
28
+ --color-interactive-secondary: #868685;
29
+ --color-interactive-secondary-hover: #6c6c6b;
30
+ --color-interactive-secondary-active: #525251;
31
+ --color-interactive-accent: #9fe870;
32
+ --color-interactive-accent-hover: #80e142;
33
+ --color-interactive-accent-active: #65cf21;
34
+ --color-interactive-control: #163300;
35
+ --color-interactive-control-hover: #0d1f00;
36
+ --color-interactive-control-active: #0e0f0c;
37
+ --color-border-neutral: #0e0f0c1f;
38
+ --color-border-overlay: #0e0f0c1f;
39
+ --color-background-screen: #ffffff;
40
+ --color-background-screen-hover: #16330014;
41
+ --color-background-screen-active: #16330021;
42
+ --color-background-elevated: #ffffff;
43
+ --color-background-neutral: #16330014;
44
+ --color-background-neutral-hover: #16330021;
45
+ --color-background-neutral-active: #1633002e;
46
+ --color-background-overlay: #16330014;
47
+ --color-sentiment-negative: #a8200d;
48
+ --color-sentiment-negative-hover: #8e1b0b;
49
+ --color-sentiment-negative-active: #761709;
50
+ --color-sentiment-positive: #2f5711;
51
+ --color-sentiment-warning: #edc843;
52
+ --color-contrast: #ffffff;
53
+ --padding-x-small: 8px;
54
+ --padding-small: 16px;
55
+ --padding-medium: 24px;
56
+ --padding-large: 32px;
57
+ --radius-full: 50%;
58
+ --radius-small: 10px;
59
+ --radius-medium: 16px;
60
+ --radius-large: 24px;
61
+ --size-4: 4px;
62
+ --size-8: 8px;
63
+ --size-10: 10px;
64
+ --size-12: 12px;
65
+ --size-16: 16px;
66
+ --size-24: 24px;
67
+ --size-32: 32px;
68
+ --size-40: 40px;
69
+ --size-48: 48px;
70
+ --size-56: 56px;
71
+ --size-64: 64px;
72
+ --size-72: 72px;
73
+ --size-80: 80px;
74
+ --size-88: 88px;
75
+ --size-96: 96px;
76
+ --size-104: 104px;
77
+ --size-112: 112px;
78
+ --size-120: 120px;
79
+ --size-128: 128px;
80
+ --size-x-small: 24px;
81
+ --size-small: 32px;
82
+ --size-medium: 40px;
83
+ --size-large: 48px;
84
+ --size-x-large: 56px;
85
+ --size-2x-large: 72px;
86
+ --space-content-horizontal: 16px;
87
+ --space-small: 16px;
88
+ --space-medium: 32px;
89
+ --space-large: 40px;
90
+ --space-x-large: 56px;
91
+ --font-size-12: 0.75rem;
92
+ --font-size-14: 0.875rem;
93
+ --font-size-16: 1rem;
94
+ --font-size-18: 1.125rem;
95
+ --font-size-20: 1.25rem;
96
+ --font-size-22: 1.375rem;
97
+ --font-size-24: 1.5rem;
98
+ --font-size-26: 1.625rem;
99
+ --font-size-28: 1.75rem;
100
+ --font-size-30: 1.875rem;
101
+ --font-size-32: 2rem;
102
+ --letter-spacing-xxs: 0.005em;
103
+ --letter-spacing-xs: 0.01em;
104
+ --letter-spacing-sm: 0.0125em;
105
+ --letter-spacing-md: 0.015em;
106
+ --letter-spacing-lg: 0.02em;
107
+ --letter-spacing-xl: 0.025em;
108
+ --letter-spacing-negative-xxs: -0.005em;
109
+ --letter-spacing-negative-xs: -0.01em;
110
+ --letter-spacing-negative-sm: -0.0125em;
111
+ --letter-spacing-negative-md: -0.015em;
112
+ --letter-spacing-negative-lg: -0.02em;
113
+ --letter-spacing-negative-xl: -0.025em;
114
+ --line-height-18: 1.125rem;
115
+ --line-height-20: 1.25rem;
116
+ --line-height-22: 1.375rem;
117
+ --line-height-24: 1.5rem;
118
+ --line-height-28: 1.75rem;
119
+ --line-height-30: 1.875rem;
120
+ --line-height-32: 2rem;
121
+ --line-height-34: 2.125rem;
122
+ --line-height-36: 2.25rem;
123
+ --line-height-42: 2.625rem;
124
+ --line-height-48: 3rem;
125
+ --line-height-title: 1.2;
126
+ --line-height-body: 1.5;
127
+ --line-height-control: 1.2;
128
+ --font-weight-light: 300;
129
+ --font-weight-regular: 400;
130
+ --font-weight-medium: 500;
131
+ --font-weight-semi-bold: 600;
132
+ --font-weight-bold: 800;
133
+ --font-weight-black: 900;
134
+ --font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
135
+ }
package/themes/personal/tokens.less ADDED
@@ -0,0 +1,132 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Wed, 30 Nov 2022 15:37:15 GMT
4
+
5
+ @color-bright-yellow: #ffeb69;
6
+ @color-bright-orange: #ffc091;
7
+ @color-dark-purple: #260a2f;
8
+ @color-dark-gold: #3a341c;
9
+ @color-bright-blue: #a0e1e1;
10
+ @color-dark-charcoal: #21231d;
11
+ @color-white: #ffffff;
12
+ @color-black: #000000;
13
+ @color-bright-green: #9fe870;
14
+ @color-forest-green: #163300;
15
+ @color-bright-pink: #ffd7ef;
16
+ @color-dark-maroon: #320707;
17
+ @color-content-primary: #0e0f0c;
18
+ @color-content-secondary: #454745;
19
+ @color-content-tertiary: #6a6c6a;
20
+ @color-content-link: #163300;
21
+ @color-content-link-hover: #0d1f00;
22
+ @color-content-link-active: #0e0f0c;
23
+ @color-interactive-primary: #163300;
24
+ @color-interactive-primary-hover: #0d1f00;
25
+ @color-interactive-primary-active: #0e0f0c;
26
+ @color-interactive-secondary: #868685;
27
+ @color-interactive-secondary-hover: #6c6c6b;
28
+ @color-interactive-secondary-active: #525251;
29
+ @color-interactive-accent: #9fe870;
30
+ @color-interactive-accent-hover: #80e142;
31
+ @color-interactive-accent-active: #65cf21;
32
+ @color-interactive-control: #163300;
33
+ @color-interactive-control-hover: #0d1f00;
34
+ @color-interactive-control-active: #0e0f0c;
35
+ @color-border-neutral: #0e0f0c1f;
36
+ @color-border-overlay: #0e0f0c1f;
37
+ @color-background-screen: #ffffff;
38
+ @color-background-screen-hover: #16330014;
39
+ @color-background-screen-active: #16330021;
40
+ @color-background-elevated: #ffffff;
41
+ @color-background-neutral: #16330014;
42
+ @color-background-neutral-hover: #16330021;
43
+ @color-background-neutral-active: #1633002e;
44
+ @color-background-overlay: #16330014;
45
+ @color-sentiment-negative: #a8200d;
46
+ @color-sentiment-negative-hover: #8e1b0b;
47
+ @color-sentiment-negative-active: #761709;
48
+ @color-sentiment-positive: #2f5711;
49
+ @color-sentiment-warning: #edc843;
50
+ @color-contrast: #ffffff;
51
+ @padding-x-small: 8px;
52
+ @padding-small: 16px;
53
+ @padding-medium: 24px;
54
+ @padding-large: 32px;
55
+ @radius-full: 50%;
56
+ @radius-small: 10px;
57
+ @radius-medium: 16px;
58
+ @radius-large: 24px;
59
+ @size-4: 4px;
60
+ @size-8: 8px;
61
+ @size-10: 10px;
62
+ @size-12: 12px;
63
+ @size-16: 16px;
64
+ @size-24: 24px;
65
+ @size-32: 32px;
66
+ @size-40: 40px;
67
+ @size-48: 48px;
68
+ @size-56: 56px;
69
+ @size-64: 64px;
70
+ @size-72: 72px;
71
+ @size-80: 80px;
72
+ @size-88: 88px;
73
+ @size-96: 96px;
74
+ @size-104: 104px;
75
+ @size-112: 112px;
76
+ @size-120: 120px;
77
+ @size-128: 128px;
78
+ @size-x-small: 24px;
79
+ @size-small: 32px;
80
+ @size-medium: 40px;
81
+ @size-large: 48px;
82
+ @size-x-large: 56px;
83
+ @size-2x-large: 72px;
84
+ @space-content-horizontal: 16px;
85
+ @space-small: 16px;
86
+ @space-medium: 32px;
87
+ @space-large: 40px;
88
+ @space-x-large: 56px;
89
+ @font-size-12: 0.75rem;
90
+ @font-size-14: 0.875rem;
91
+ @font-size-16: 1rem;
92
+ @font-size-18: 1.125rem;
93
+ @font-size-20: 1.25rem;
94
+ @font-size-22: 1.375rem;
95
+ @font-size-24: 1.5rem;
96
+ @font-size-26: 1.625rem;
97
+ @font-size-28: 1.75rem;
98
+ @font-size-30: 1.875rem;
99
+ @font-size-32: 2rem;
100
+ @letter-spacing-xxs: 0.005em;
101
+ @letter-spacing-xs: 0.01em;
102
+ @letter-spacing-sm: 0.0125em;
103
+ @letter-spacing-md: 0.015em;
104
+ @letter-spacing-lg: 0.02em;
105
+ @letter-spacing-xl: 0.025em;
106
+ @letter-spacing-negative-xxs: -0.005em;
107
+ @letter-spacing-negative-xs: -0.01em;
108
+ @letter-spacing-negative-sm: -0.0125em;
109
+ @letter-spacing-negative-md: -0.015em;
110
+ @letter-spacing-negative-lg: -0.02em;
111
+ @letter-spacing-negative-xl: -0.025em;
112
+ @line-height-18: 1.125rem;
113
+ @line-height-20: 1.25rem;
114
+ @line-height-22: 1.375rem;
115
+ @line-height-24: 1.5rem;
116
+ @line-height-28: 1.75rem;
117
+ @line-height-30: 1.875rem;
118
+ @line-height-32: 2rem;
119
+ @line-height-34: 2.125rem;
120
+ @line-height-36: 2.25rem;
121
+ @line-height-42: 2.625rem;
122
+ @line-height-48: 3rem;
123
+ @line-height-title: 1.2;
124
+ @line-height-body: 1.5;
125
+ @line-height-control: 1.2;
126
+ @font-weight-light: 300;
127
+ @font-weight-regular: 400;
128
+ @font-weight-medium: 500;
129
+ @font-weight-semi-bold: 600;
130
+ @font-weight-bold: 800;
131
+ @font-weight-black: 900;
132
+ @font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
package/themes/personal--dark/tokens.css ADDED
@@ -0,0 +1,159 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 30 Nov 2022 15:37:15 GMT
4
+ */
5
+
6
+ .np-theme-personal--dark {
7
+ --color-bright-yellow: #ffeb69;
8
+ --color-bright-orange: #ffc091;
9
+ --color-dark-purple: #260a2f;
10
+ --color-dark-gold: #3a341c;
11
+ --color-bright-blue: #a0e1e1;
12
+ --color-dark-charcoal: #21231d;
13
+ --color-white: #ffffff;
14
+ --color-black: #000000;
15
+ --color-bright-green: #9fe870;
16
+ --color-forest-green: #163300;
17
+ --color-bright-pink: #ffd7ef;
18
+ --color-dark-maroon: #320707;
19
+ --color-content-primary: #f3f5f1;
20
+ --color-content-secondary: #e8ebe6;
21
+ --color-content-tertiary: #cacfc7;
22
+ --color-content-link: #9fe870;
23
+ --color-content-link-hover: #cdffad;
24
+ --color-content-link-active: #ecffe0;
25
+ --color-interactive-primary: #9fe870;
26
+ --color-interactive-primary-hover: #8bd35d;
27
+ --color-interactive-primary-active: #7cc44f;
28
+ --color-interactive-primary-hover: #cdffad;
29
+ --color-interactive-primary-hover-hover: #b9ea9a;
30
+ --color-interactive-primary-hover-active: #aadb8b;
31
+ --color-interactive-primary-active: #ecffe0;
32
+ --color-interactive-primary-active-hover: #d8eacc;
33
+ --color-interactive-primary-active-active: #c8dbbd;
34
+ --color-interactive-secondary: #b9bab7;
35
+ --color-interactive-secondary-hover: #a6a7a4;
36
+ --color-interactive-secondary-active: #979895;
37
+ --color-interactive-secondary-hover: #ecede9;
38
+ --color-interactive-secondary-hover-hover: #d8d9d5;
39
+ --color-interactive-secondary-hover-active: #c9cac6;
40
+ --color-interactive-secondary-active: #f9faf6;
41
+ --color-interactive-secondary-active-hover: #e4e5e1;
42
+ --color-interactive-secondary-active-active: #d5d6d2;
43
+ --color-interactive-accent: #9fe870;
44
+ --color-interactive-accent-hover: #8bd35d;
45
+ --color-interactive-accent-active: #7cc44f;
46
+ --color-interactive-accent-hover: #cdffad;
47
+ --color-interactive-accent-hover-hover: #b9ea9a;
48
+ --color-interactive-accent-hover-active: #aadb8b;
49
+ --color-interactive-accent-active: #ecffe0;
50
+ --color-interactive-accent-active-hover: #d8eacc;
51
+ --color-interactive-accent-active-active: #c8dbbd;
52
+ --color-interactive-control: #163300;
53
+ --color-interactive-control-hover: #0c2300;
54
+ --color-interactive-control-active: #001a00;
55
+ --color-interactive-control-hover: #214d00;
56
+ --color-interactive-control-hover-hover: #103c00;
57
+ --color-interactive-control-hover-active: #093000;
58
+ --color-interactive-control-active: #2c6600;
59
+ --color-interactive-control-active-hover: #175400;
60
+ --color-interactive-control-active-active: #064700;
61
+ --color-border-neutral: #ffffff33;
62
+ --color-border-overlay: #ffffff33;
63
+ --color-background-screen: #121511;
64
+ --color-background-screen-hover: #ffffff1a;
65
+ --color-background-screen-active: #ffffff33;
66
+ --color-background-elevated: #1e211d;
67
+ --color-background-neutral: #ffffff1a;
68
+ --color-background-neutral-hover: #ffffff33;
69
+ --color-background-neutral-active: #ffffff4d;
70
+ --color-background-overlay: #ffffff33;
71
+ --color-sentiment-negative: #ffbfbd;
72
+ --color-sentiment-negative-hover: #ffdcdb;
73
+ --color-sentiment-negative-active: #ffebeb;
74
+ --color-sentiment-positive: #a0e5ae;
75
+ --color-sentiment-warning: #edd272;
76
+ --color-contrast: #121511;
77
+ --padding-x-small: 8px;
78
+ --padding-small: 16px;
79
+ --padding-medium: 24px;
80
+ --padding-large: 32px;
81
+ --radius-full: 50%;
82
+ --radius-small: 10px;
83
+ --radius-medium: 16px;
84
+ --radius-large: 24px;
85
+ --size-4: 4px;
86
+ --size-8: 8px;
87
+ --size-10: 10px;
88
+ --size-12: 12px;
89
+ --size-16: 16px;
90
+ --size-24: 24px;
91
+ --size-32: 32px;
92
+ --size-40: 40px;
93
+ --size-48: 48px;
94
+ --size-56: 56px;
95
+ --size-64: 64px;
96
+ --size-72: 72px;
97
+ --size-80: 80px;
98
+ --size-88: 88px;
99
+ --size-96: 96px;
100
+ --size-104: 104px;
101
+ --size-112: 112px;
102
+ --size-120: 120px;
103
+ --size-128: 128px;
104
+ --size-x-small: 24px;
105
+ --size-small: 32px;
106
+ --size-medium: 40px;
107
+ --size-large: 48px;
108
+ --size-x-large: 56px;
109
+ --size-2x-large: 72px;
110
+ --space-content-horizontal: 16px;
111
+ --space-small: 16px;
112
+ --space-medium: 32px;
113
+ --space-large: 40px;
114
+ --space-x-large: 56px;
115
+ --font-size-12: 0.75rem;
116
+ --font-size-14: 0.875rem;
117
+ --font-size-16: 1rem;
118
+ --font-size-18: 1.125rem;
119
+ --font-size-20: 1.25rem;
120
+ --font-size-22: 1.375rem;
121
+ --font-size-24: 1.5rem;
122
+ --font-size-26: 1.625rem;
123
+ --font-size-28: 1.75rem;
124
+ --font-size-30: 1.875rem;
125
+ --font-size-32: 2rem;
126
+ --letter-spacing-xxs: 0.005em;
127
+ --letter-spacing-xs: 0.01em;
128
+ --letter-spacing-sm: 0.0125em;
129
+ --letter-spacing-md: 0.015em;
130
+ --letter-spacing-lg: 0.02em;
131
+ --letter-spacing-xl: 0.025em;
132
+ --letter-spacing-negative-xxs: -0.005em;
133
+ --letter-spacing-negative-xs: -0.01em;
134
+ --letter-spacing-negative-sm: -0.0125em;
135
+ --letter-spacing-negative-md: -0.015em;
136
+ --letter-spacing-negative-lg: -0.02em;
137
+ --letter-spacing-negative-xl: -0.025em;
138
+ --line-height-18: 1.125rem;
139
+ --line-height-20: 1.25rem;
140
+ --line-height-22: 1.375rem;
141
+ --line-height-24: 1.5rem;
142
+ --line-height-28: 1.75rem;
143
+ --line-height-30: 1.875rem;
144
+ --line-height-32: 2rem;
145
+ --line-height-34: 2.125rem;
146
+ --line-height-36: 2.25rem;
147
+ --line-height-42: 2.625rem;
148
+ --line-height-48: 3rem;
149
+ --line-height-title: 1.2;
150
+ --line-height-body: 1.5;
151
+ --line-height-control: 1.2;
152
+ --font-weight-light: 300;
153
+ --font-weight-regular: 400;
154
+ --font-weight-medium: 500;
155
+ --font-weight-semi-bold: 600;
156
+ --font-weight-bold: 800;
157
+ --font-weight-black: 900;
158
+ --font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
159
+ }
package/themes/personal--dark/tokens.less ADDED
@@ -0,0 +1,156 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Wed, 30 Nov 2022 15:37:15 GMT
4
+
5
+ @color-bright-yellow: #ffeb69;
6
+ @color-bright-orange: #ffc091;
7
+ @color-dark-purple: #260a2f;
8
+ @color-dark-gold: #3a341c;
9
+ @color-bright-blue: #a0e1e1;
10
+ @color-dark-charcoal: #21231d;
11
+ @color-white: #ffffff;
12
+ @color-black: #000000;
13
+ @color-bright-green: #9fe870;
14
+ @color-forest-green: #163300;
15
+ @color-bright-pink: #ffd7ef;
16
+ @color-dark-maroon: #320707;
17
+ @color-content-primary: #f3f5f1;
18
+ @color-content-secondary: #e8ebe6;
19
+ @color-content-tertiary: #cacfc7;
20
+ @color-content-link: #9fe870;
21
+ @color-content-link-hover: #cdffad;
22
+ @color-content-link-active: #ecffe0;
23
+ @color-interactive-primary: #9fe870;
24
+ @color-interactive-primary-hover: #8bd35d;
25
+ @color-interactive-primary-active: #7cc44f;
26
+ @color-interactive-primary-hover: #cdffad;
27
+ @color-interactive-primary-hover-hover: #b9ea9a;
28
+ @color-interactive-primary-hover-active: #aadb8b;
29
+ @color-interactive-primary-active: #ecffe0;
30
+ @color-interactive-primary-active-hover: #d8eacc;
31
+ @color-interactive-primary-active-active: #c8dbbd;
32
+ @color-interactive-secondary: #b9bab7;
33
+ @color-interactive-secondary-hover: #a6a7a4;
34
+ @color-interactive-secondary-active: #979895;
35
+ @color-interactive-secondary-hover: #ecede9;
36
+ @color-interactive-secondary-hover-hover: #d8d9d5;
37
+ @color-interactive-secondary-hover-active: #c9cac6;
38
+ @color-interactive-secondary-active: #f9faf6;
39
+ @color-interactive-secondary-active-hover: #e4e5e1;
40
+ @color-interactive-secondary-active-active: #d5d6d2;
41
+ @color-interactive-accent: #9fe870;
42
+ @color-interactive-accent-hover: #8bd35d;
43
+ @color-interactive-accent-active: #7cc44f;
44
+ @color-interactive-accent-hover: #cdffad;
45
+ @color-interactive-accent-hover-hover: #b9ea9a;
46
+ @color-interactive-accent-hover-active: #aadb8b;
47
+ @color-interactive-accent-active: #ecffe0;
48
+ @color-interactive-accent-active-hover: #d8eacc;
49
+ @color-interactive-accent-active-active: #c8dbbd;
50
+ @color-interactive-control: #163300;
51
+ @color-interactive-control-hover: #0c2300;
52
+ @color-interactive-control-active: #001a00;
53
+ @color-interactive-control-hover: #214d00;
54
+ @color-interactive-control-hover-hover: #103c00;
55
+ @color-interactive-control-hover-active: #093000;
56
+ @color-interactive-control-active: #2c6600;
57
+ @color-interactive-control-active-hover: #175400;
58
+ @color-interactive-control-active-active: #064700;
59
+ @color-border-neutral: #ffffff33;
60
+ @color-border-overlay: #ffffff33;
61
+ @color-background-screen: #121511;
62
+ @color-background-screen-hover: #ffffff1a;
63
+ @color-background-screen-active: #ffffff33;
64
+ @color-background-elevated: #1e211d;
65
+ @color-background-neutral: #ffffff1a;
66
+ @color-background-neutral-hover: #ffffff33;
67
+ @color-background-neutral-active: #ffffff4d;
68
+ @color-background-overlay: #ffffff33;
69
+ @color-sentiment-negative: #ffbfbd;
70
+ @color-sentiment-negative-hover: #ffdcdb;
71
+ @color-sentiment-negative-active: #ffebeb;
72
+ @color-sentiment-positive: #a0e5ae;
73
+ @color-sentiment-warning: #edd272;
74
+ @color-contrast: #121511;
75
+ @padding-x-small: 8px;
76
+ @padding-small: 16px;
77
+ @padding-medium: 24px;
78
+ @padding-large: 32px;
79
+ @radius-full: 50%;
80
+ @radius-small: 10px;
81
+ @radius-medium: 16px;
82
+ @radius-large: 24px;
83
+ @size-4: 4px;
84
+ @size-8: 8px;
85
+ @size-10: 10px;
86
+ @size-12: 12px;
87
+ @size-16: 16px;
88
+ @size-24: 24px;
89
+ @size-32: 32px;
90
+ @size-40: 40px;
91
+ @size-48: 48px;
92
+ @size-56: 56px;
93
+ @size-64: 64px;
94
+ @size-72: 72px;
95
+ @size-80: 80px;
96
+ @size-88: 88px;
97
+ @size-96: 96px;
98
+ @size-104: 104px;
99
+ @size-112: 112px;
100
+ @size-120: 120px;
101
+ @size-128: 128px;
102
+ @size-x-small: 24px;
103
+ @size-small: 32px;
104
+ @size-medium: 40px;
105
+ @size-large: 48px;
106
+ @size-x-large: 56px;
107
+ @size-2x-large: 72px;
108
+ @space-content-horizontal: 16px;
109
+ @space-small: 16px;
110
+ @space-medium: 32px;
111
+ @space-large: 40px;
112
+ @space-x-large: 56px;
113
+ @font-size-12: 0.75rem;
114
+ @font-size-14: 0.875rem;
115
+ @font-size-16: 1rem;
116
+ @font-size-18: 1.125rem;
117
+ @font-size-20: 1.25rem;
118
+ @font-size-22: 1.375rem;
119
+ @font-size-24: 1.5rem;
120
+ @font-size-26: 1.625rem;
121
+ @font-size-28: 1.75rem;
122
+ @font-size-30: 1.875rem;
123
+ @font-size-32: 2rem;
124
+ @letter-spacing-xxs: 0.005em;
125
+ @letter-spacing-xs: 0.01em;
126
+ @letter-spacing-sm: 0.0125em;
127
+ @letter-spacing-md: 0.015em;
128
+ @letter-spacing-lg: 0.02em;
129
+ @letter-spacing-xl: 0.025em;
130
+ @letter-spacing-negative-xxs: -0.005em;
131
+ @letter-spacing-negative-xs: -0.01em;
132
+ @letter-spacing-negative-sm: -0.0125em;
133
+ @letter-spacing-negative-md: -0.015em;
134
+ @letter-spacing-negative-lg: -0.02em;
135
+ @letter-spacing-negative-xl: -0.025em;
136
+ @line-height-18: 1.125rem;
137
+ @line-height-20: 1.25rem;
138
+ @line-height-22: 1.375rem;
139
+ @line-height-24: 1.5rem;
140
+ @line-height-28: 1.75rem;
141
+ @line-height-30: 1.875rem;
142
+ @line-height-32: 2rem;
143
+ @line-height-34: 2.125rem;
144
+ @line-height-36: 2.25rem;
145
+ @line-height-42: 2.625rem;
146
+ @line-height-48: 3rem;
147
+ @line-height-title: 1.2;
148
+ @line-height-body: 1.5;
149
+ @line-height-control: 1.2;
150
+ @font-weight-light: 300;
151
+ @font-weight-regular: 400;
152
+ @font-weight-medium: 500;
153
+ @font-weight-semi-bold: 600;
154
+ @font-weight-bold: 800;
155
+ @font-weight-black: 900;
156
+ @font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
package/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 13 Jul 2022 14:37:44 GMT
3
+ * Generated on Wed, 30 Nov 2022 15:37:15 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -45,10 +45,17 @@
45
45
  --color-border-neutral: #0000001a;
46
46
  --color-border-overlay: #0000001a;
47
47
  --color-core-contrast: #000000;
48
- --radius-small: 3px;
49
- --radius-medium: 10px;
48
+ --padding-x-small: 8px;
49
+ --padding-small: 16px;
50
+ --padding-medium: 24px;
51
+ --padding-large: 32px;
52
+ --radius-full: 50%;
53
+ --radius-small: 10px;
54
+ --radius-medium: 16px;
55
+ --radius-large: 24px;
50
56
  --size-4: 4px;
51
57
  --size-8: 8px;
58
+ --size-10: 10px;
52
59
  --size-12: 12px;
53
60
  --size-16: 16px;
54
61
  --size-24: 24px;
@@ -65,41 +72,55 @@
65
72
  --size-112: 112px;
66
73
  --size-120: 120px;
67
74
  --size-128: 128px;
75
+ --size-x-small: 24px;
76
+ --size-small: 32px;
77
+ --size-medium: 40px;
78
+ --size-large: 48px;
79
+ --size-x-large: 56px;
80
+ --size-2x-large: 72px;
68
81
  --space-content-horizontal: 16px;
82
+ --space-small: 16px;
83
+ --space-medium: 32px;
84
+ --space-large: 40px;
85
+ --space-x-large: 56px;
69
86
  --font-size-12: 0.75rem;
70
87
  --font-size-14: 0.875rem;
71
88
  --font-size-16: 1rem;
89
+ --font-size-18: 1.125rem;
72
90
  --font-size-20: 1.25rem;
73
91
  --font-size-22: 1.375rem;
92
+ --font-size-24: 1.5rem;
74
93
  --font-size-26: 1.625rem;
75
- --font-size-30: 1.75rem;
94
+ --font-size-28: 1.75rem;
95
+ --font-size-30: 1.875rem;
76
96
  --font-size-32: 2rem;
77
- --letter-spacing-size-1: 0.01;
78
- --letter-spacing-size-2: 0.02;
79
- --letter-spacing-size-0.5: 0.005;
80
- --letter-spacing-size-1.25: 0.0125;
81
- --letter-spacing-size-1.5: 0.015;
82
- --letter-spacing-size-2.5: 0.025;
83
- --letter-spacing-negative-size-1: -0.01;
84
- --letter-spacing-negative-size-2: -0.02;
85
- --letter-spacing-negative-size-0.5: -0.005;
86
- --letter-spacing-negative-size-1.25: -0.0125;
87
- --letter-spacing-negative-size-1.5: -0.015;
88
- --letter-spacing-negative-size-2.5: -0.025;
89
- --line-height-18: 1.125;
90
- --line-height-22: 1.25;
91
- --line-height-24: 1.5;
92
- --line-height-28: 1.75;
93
- --line-height-30: 1.375;
94
- --line-height-32: 2;
95
- --line-height-34: 2.125;
96
- --line-height-36: 1.5;
97
- --line-height-42: 1.625;
98
- --line-height-48: 1.75;
97
+ --letter-spacing-xxs: 0.005em;
98
+ --letter-spacing-xs: 0.01em;
99
+ --letter-spacing-sm: 0.0125em;
100
+ --letter-spacing-md: 0.015em;
101
+ --letter-spacing-lg: 0.02em;
102
+ --letter-spacing-xl: 0.025em;
103
+ --letter-spacing-negative-xxs: -0.005em;
104
+ --letter-spacing-negative-xs: -0.01em;
105
+ --letter-spacing-negative-sm: -0.0125em;
106
+ --letter-spacing-negative-md: -0.015em;
107
+ --letter-spacing-negative-lg: -0.02em;
108
+ --letter-spacing-negative-xl: -0.025em;
109
+ --line-height-18: 1.125rem;
110
+ --line-height-20: 1.25rem;
111
+ --line-height-22: 1.375rem;
112
+ --line-height-24: 1.5rem;
113
+ --line-height-28: 1.75rem;
114
+ --line-height-30: 1.875rem;
115
+ --line-height-32: 2rem;
116
+ --line-height-34: 2.125rem;
117
+ --line-height-36: 2.25rem;
118
+ --line-height-42: 2.625rem;
119
+ --line-height-48: 3rem;
99
120
  --line-height-title: 1.2;
100
121
  --line-height-body: 1.5;
101
122
  --line-height-control: 1.2;
102
- --font-weight: 300;
123
+ --font-weight-light: 300;
103
124
  --font-weight-regular: 400;
104
125
  --font-weight-medium: 500;
105
126
  --font-weight-semi-bold: 600;