@transferwise/neptune-css 0.0.0-experimental-c043dab → 0.0.0-experimental-53eb26c
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/css/neptune-core.css +0 -7
- package/dist/css/neptune.css +497 -510
- package/package.json +1 -1
- package/src/less/core/_scaffolding.less +0 -5
- package/src/less/neptune.bundle.less +2 -245
package/package.json
CHANGED
|
@@ -64,13 +64,8 @@
|
|
|
64
64
|
--btn-sm-radius-base: var(--btn-radius-base);
|
|
65
65
|
--btn-lg-radius-base: var(--btn-radius-base);
|
|
66
66
|
|
|
67
|
-
background-color: var(--color-background-screen);
|
|
68
67
|
color: var(--color-content-secondary);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.np-theme-business, .np-theme-platform {
|
|
72
68
|
background-color: var(--color-background-screen);
|
|
73
|
-
color: var(--color-content-secondary);
|
|
74
69
|
}
|
|
75
70
|
|
|
76
71
|
html {
|
|
@@ -1,248 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
:root,
|
|
4
|
-
.np-theme-personal {
|
|
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-interactive-contrast: #9fe870;
|
|
36
|
-
--color-interactive-contrast-hover: #cdffad;
|
|
37
|
-
--color-interactive-contrast-active: #ecffe0;
|
|
38
|
-
--color-interactive-neutral: #e2f6d5;
|
|
39
|
-
--color-interactive-neutral-hover: #d3f2c0;
|
|
40
|
-
--color-interactive-neutral-active: #c5edab;
|
|
41
|
-
--color-border-neutral: #0e0f0c1f;
|
|
42
|
-
--color-border-overlay: #0e0f0c1f;
|
|
43
|
-
--color-background-screen: #ffffff;
|
|
44
|
-
--color-background-screen-hover: #16330014;
|
|
45
|
-
--color-background-screen-active: #16330021;
|
|
46
|
-
--color-background-elevated: #ffffff;
|
|
47
|
-
--color-background-neutral: #16330014;
|
|
48
|
-
--color-background-neutral-hover: #16330021;
|
|
49
|
-
--color-background-neutral-active: #1633002e;
|
|
50
|
-
--color-background-overlay: #16330014;
|
|
51
|
-
--color-sentiment-negative: #cb272f;
|
|
52
|
-
--color-sentiment-negative-hover: #b8232b;
|
|
53
|
-
--color-sentiment-negative-active: #a72027;
|
|
54
|
-
--color-sentiment-negative-primary: #cb272f;
|
|
55
|
-
--color-sentiment-negative-primary-hover: #b8232b;
|
|
56
|
-
--color-sentiment-negative-primary-active: #a72027;
|
|
57
|
-
--color-sentiment-negative-secondary: #fbeaea;
|
|
58
|
-
--color-sentiment-negative-secondary-hover: #f9e1e1;
|
|
59
|
-
--color-sentiment-negative-secondary-active: #f8d8d8;
|
|
60
|
-
--color-sentiment-positive: #054d28;
|
|
61
|
-
--color-sentiment-positive-hover: #043a1e;
|
|
62
|
-
--color-sentiment-positive-active: #022614;
|
|
63
|
-
--color-sentiment-positive-primary: #054d28;
|
|
64
|
-
--color-sentiment-positive-primary-hover: #043a1e;
|
|
65
|
-
--color-sentiment-positive-primary-active: #022614;
|
|
66
|
-
--color-sentiment-positive-secondary: #e2f6d5;
|
|
67
|
-
--color-sentiment-positive-secondary-hover: #d3f2c0;
|
|
68
|
-
--color-sentiment-positive-secondary-active: #c5edab;
|
|
69
|
-
--color-sentiment-warning: #ffd11a;
|
|
70
|
-
--color-sentiment-warning-hover: #ffd11a;
|
|
71
|
-
--color-sentiment-warning-active: #ffd11a;
|
|
72
|
-
--color-sentiment-warning-primary: #ffd11a;
|
|
73
|
-
--color-sentiment-warning-primary-hover: #ffd11a;
|
|
74
|
-
--color-sentiment-warning-primary-active: #ffd11a;
|
|
75
|
-
--color-sentiment-warning-secondary: #fff7d7;
|
|
76
|
-
--color-sentiment-warning-secondary-hover: #fff7d7;
|
|
77
|
-
--color-sentiment-warning-secondary-active: #fff7d7;
|
|
78
|
-
--color-sentiment-warning-content: #4a3b1c;
|
|
79
|
-
--color-sentiment-warning-content-hover: #3b2f16;
|
|
80
|
-
--color-sentiment-warning-content-active: #2c2311;
|
|
81
|
-
--color-contrast: #ffffff;
|
|
82
|
-
--color-light: #ffffff;
|
|
83
|
-
--color-dark: #121511;
|
|
84
|
-
--color-contrast-overlay: #ffffff;
|
|
85
|
-
--color-contrast-theme: #121511;
|
|
86
|
-
--padding-x-small: 8px;
|
|
87
|
-
--padding-small: 16px;
|
|
88
|
-
--padding-medium: 24px;
|
|
89
|
-
--padding-large: 32px;
|
|
90
|
-
--radius-full: 9999px;
|
|
91
|
-
--radius-small: 10px;
|
|
92
|
-
--radius-medium: 16px;
|
|
93
|
-
--radius-large: 24px;
|
|
94
|
-
--size-4: 4px;
|
|
95
|
-
--size-5: 5px;
|
|
96
|
-
--size-8: 8px;
|
|
97
|
-
--size-10: 10px;
|
|
98
|
-
--size-12: 12px;
|
|
99
|
-
--size-14: 14px;
|
|
100
|
-
--size-16: 16px;
|
|
101
|
-
--size-24: 24px;
|
|
102
|
-
--size-32: 32px;
|
|
103
|
-
--size-40: 40px;
|
|
104
|
-
--size-48: 48px;
|
|
105
|
-
--size-52: 52px;
|
|
106
|
-
--size-56: 56px;
|
|
107
|
-
--size-60: 60px;
|
|
108
|
-
--size-64: 64px;
|
|
109
|
-
--size-72: 72px;
|
|
110
|
-
--size-80: 80px;
|
|
111
|
-
--size-88: 88px;
|
|
112
|
-
--size-96: 96px;
|
|
113
|
-
--size-104: 104px;
|
|
114
|
-
--size-112: 112px;
|
|
115
|
-
--size-120: 120px;
|
|
116
|
-
--size-126: 126px;
|
|
117
|
-
--size-128: 128px;
|
|
118
|
-
--size-146: 146px;
|
|
119
|
-
--size-154: 154px;
|
|
120
|
-
--size-160: 160px;
|
|
121
|
-
--size-x-small: 24px;
|
|
122
|
-
--size-small: 32px;
|
|
123
|
-
--size-medium: 40px;
|
|
124
|
-
--size-large: 48px;
|
|
125
|
-
--size-x-large: 56px;
|
|
126
|
-
--size-2x-large: 72px;
|
|
127
|
-
--space-content-horizontal: 16px;
|
|
128
|
-
--space-small: 16px;
|
|
129
|
-
--space-medium: 32px;
|
|
130
|
-
--space-large: 40px;
|
|
131
|
-
--space-x-large: 56px;
|
|
132
|
-
--font-size-12: 0.75rem;
|
|
133
|
-
--font-size-14: 0.875rem;
|
|
134
|
-
--font-size-16: 1rem;
|
|
135
|
-
--font-size-18: 1.125rem;
|
|
136
|
-
--font-size-20: 1.25rem;
|
|
137
|
-
--font-size-22: 1.375rem;
|
|
138
|
-
--font-size-24: 1.5rem;
|
|
139
|
-
--font-size-26: 1.625rem;
|
|
140
|
-
--font-size-28: 1.75rem;
|
|
141
|
-
--font-size-30: 1.875rem;
|
|
142
|
-
--font-size-32: 2rem;
|
|
143
|
-
--letter-spacing-xxs: 0.005em;
|
|
144
|
-
--letter-spacing-xs: 0.01em;
|
|
145
|
-
--letter-spacing-sm: 0.0125em;
|
|
146
|
-
--letter-spacing-md: 0.015em;
|
|
147
|
-
--letter-spacing-lg: 0.02em;
|
|
148
|
-
--letter-spacing-xl: 0.025em;
|
|
149
|
-
--letter-spacing-negative-xxs: -0.005em;
|
|
150
|
-
--letter-spacing-negative-xs: -0.01em;
|
|
151
|
-
--letter-spacing-negative-sm: -0.0125em;
|
|
152
|
-
--letter-spacing-negative-md: -0.015em;
|
|
153
|
-
--letter-spacing-negative-lg: -0.02em;
|
|
154
|
-
--letter-spacing-negative-xl: -0.025em;
|
|
155
|
-
--letter-spacing-negative-xxl: -0.03em;
|
|
156
|
-
--letter-spacing-negative-xxxl: -0.04em;
|
|
157
|
-
--letter-spacing-negative-xxxxl: -0.05em;
|
|
158
|
-
--line-height-18: 1.125rem;
|
|
159
|
-
--line-height-20: 1.25rem;
|
|
160
|
-
--line-height-22: 1.375rem;
|
|
161
|
-
--line-height-24: 1.5rem;
|
|
162
|
-
--line-height-28: 1.75rem;
|
|
163
|
-
--line-height-30: 1.875rem;
|
|
164
|
-
--line-height-32: 2rem;
|
|
165
|
-
--line-height-34: 2.125rem;
|
|
166
|
-
--line-height-36: 2.25rem;
|
|
167
|
-
--line-height-42: 2.625rem;
|
|
168
|
-
--line-height-48: 3rem;
|
|
169
|
-
--line-height-title: 1.2;
|
|
170
|
-
--line-height-body: 1.5;
|
|
171
|
-
--line-height-control: 1.2;
|
|
172
|
-
--font-weight-light: 300;
|
|
173
|
-
--font-weight-regular: 400;
|
|
174
|
-
--font-weight-medium: 500;
|
|
175
|
-
--font-weight-semi-bold: 600;
|
|
176
|
-
--font-weight-bold: 700;
|
|
177
|
-
--font-weight-black: 900;
|
|
178
|
-
--font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
|
|
179
|
-
--font-family-display: 'Wise Sans', 'Inter', sans-serif;
|
|
180
|
-
}/**
|
|
181
|
-
* We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
|
|
182
|
-
*
|
|
183
|
-
* We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
|
|
184
|
-
*/
|
|
185
|
-
@media (max-width: 320px) {
|
|
186
|
-
:root,
|
|
187
|
-
.np-theme-personal {
|
|
188
|
-
--delta: 2;
|
|
189
|
-
--size-4: calc(4px / var(--delta));
|
|
190
|
-
--size-5: calc(5px / var(--delta));
|
|
191
|
-
--size-8: calc(8px / var(--delta));
|
|
192
|
-
--size-10: calc(10px / var(--delta));
|
|
193
|
-
--size-12: calc(12px / var(--delta));
|
|
194
|
-
--size-14: calc(14px / var(--delta));
|
|
195
|
-
--size-16: calc(16px / var(--delta));
|
|
196
|
-
--size-24: calc(24px / var(--delta));
|
|
197
|
-
--size-32: calc(32px / var(--delta));
|
|
198
|
-
--size-40: calc(40px / var(--delta));
|
|
199
|
-
--size-48: calc(48px / var(--delta));
|
|
200
|
-
--size-52: calc(52px / var(--delta));
|
|
201
|
-
--size-56: calc(56px / var(--delta));
|
|
202
|
-
--size-60: calc(60px / var(--delta));
|
|
203
|
-
--size-64: calc(64px / var(--delta));
|
|
204
|
-
--size-72: calc(72px / var(--delta));
|
|
205
|
-
--size-80: calc(80px / var(--delta));
|
|
206
|
-
--size-88: calc(88px / var(--delta));
|
|
207
|
-
--size-96: calc(96px / var(--delta));
|
|
208
|
-
--size-104: calc(104px / var(--delta));
|
|
209
|
-
--size-112: calc(112px / var(--delta));
|
|
210
|
-
--size-120: calc(120px / var(--delta));
|
|
211
|
-
--size-126: calc(126px / var(--delta));
|
|
212
|
-
--size-128: calc(128px / var(--delta));
|
|
213
|
-
--size-146: calc(146px / var(--delta));
|
|
214
|
-
--size-154: calc(154px / var(--delta));
|
|
215
|
-
--size-x-small: calc(24px / var(--delta));
|
|
216
|
-
--size-small: calc(32px / var(--delta));
|
|
217
|
-
--size-medium: calc(40px / var(--delta));
|
|
218
|
-
--size-large: calc(48px / var(--delta));
|
|
219
|
-
--size-x-large: calc(56px / var(--delta));
|
|
220
|
-
--size-2x-large: calc(72px / var(--delta));
|
|
221
|
-
--space-content-horizontal: calc(16px / var(--delta));
|
|
222
|
-
--space-small: calc(16px / var(--delta));
|
|
223
|
-
--space-medium: calc(32px / var(--delta));
|
|
224
|
-
--space-large: calc(40px / var(--delta));
|
|
225
|
-
--space-x-large: calc(56px / var(--delta));
|
|
226
|
-
--padding-x-small: var(--size-8);
|
|
227
|
-
--padding-small: var(--size-16);
|
|
228
|
-
--padding-medium: var(--size-24);
|
|
229
|
-
--padding-large: var(--size-32);
|
|
230
|
-
--input-height-base: var(--size-32);
|
|
231
|
-
--input-height-large: var(--input-height-small);
|
|
232
|
-
--input-padding: var(--input-padding-small);
|
|
233
|
-
--input-padding-large: var(--input-padding-small);
|
|
234
|
-
--input-group-addon-padding: var(--input-group-addon-sm-padding);
|
|
235
|
-
--input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
|
|
236
|
-
--btn-height: var(--input-height-base);
|
|
237
|
-
--btn-lg-height: var(--btn-height);
|
|
238
|
-
--btn-sm-height: var(--btn-height);
|
|
239
|
-
--btn-padding: var(--input-padding);
|
|
240
|
-
--btn-sm-padding: var(--btn-padding);
|
|
241
|
-
--btn-lg-padding: var(--btn-padding);
|
|
242
|
-
--dropdown-link-padding: var(--size-12) var(--size-16);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
|
|
1
|
+
@import "@transferwise/neptune-tokens/tokens.css";
|
|
2
|
+
@import '@transferwise/neptune-tokens/themes/personal/tokens.css';
|
|
246
3
|
@import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';
|
|
247
4
|
@import '@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css';
|
|
248
5
|
@import '@transferwise/neptune-tokens/themes/personal--dark/tokens.css';
|