@transferwise/neptune-css 0.0.0-experimental-bca35d9 → 0.0.0-experimental-e674a91

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 (53) hide show
  1. package/dist/css/accordion.css +7 -10
  2. package/dist/css/alerts.css +142 -14
  3. package/dist/css/background.css +2 -2
  4. package/dist/css/badge.css +3 -1
  5. package/dist/css/breadcrumbs.css +1 -1
  6. package/dist/css/button-groups.css +6 -2
  7. package/dist/css/buttons.css +176 -151
  8. package/dist/css/chevron.css +1 -1
  9. package/dist/css/circles.css +11 -10
  10. package/dist/css/close.css +3 -2
  11. package/dist/css/column-layout.css +1 -0
  12. package/dist/css/currency-flags.css +1 -1
  13. package/dist/css/decision.css +6 -9
  14. package/dist/css/dropdowns.css +20 -12
  15. package/dist/css/droppable.css +9 -12
  16. package/dist/css/footer.css +43 -8
  17. package/dist/css/input-groups.css +139 -146
  18. package/dist/css/list-group.css +33 -12
  19. package/dist/css/modals.css +4 -3
  20. package/dist/css/navbar.css +133 -41
  21. package/dist/css/navs.css +20 -8
  22. package/dist/css/neptune-addons.css +85 -8
  23. package/dist/css/neptune-core.css +94 -42
  24. package/dist/css/neptune.css +1187 -640
  25. package/dist/css/popovers.css +12 -10
  26. package/dist/css/process.css +8 -8
  27. package/dist/css/progress-bars.css +7 -2
  28. package/dist/css/ring.css +2 -2
  29. package/dist/css/select.css +2 -2
  30. package/dist/css/sequences.css +95 -39
  31. package/dist/css/table.css +48 -14
  32. package/dist/css/tick.css +1 -0
  33. package/dist/css/tooltip.css +2 -1
  34. package/dist/css/wells.css +5 -5
  35. package/dist/less/neptune-tokens.less +175 -81
  36. package/dist/props/neptune-tokens.css +40 -80
  37. package/package.json +2 -2
  38. package/src/less/addons/_background-utilities.less +37 -0
  39. package/src/less/alerts.less +36 -0
  40. package/src/less/background.less +1 -0
  41. package/src/less/buttons.less +22 -0
  42. package/src/less/column-layout.less +1 -0
  43. package/src/less/core/_scaffolding.less +22 -3
  44. package/src/less/core/_typography-utilities.less +29 -0
  45. package/src/less/dropdowns.less +8 -0
  46. package/src/less/footer.less +33 -0
  47. package/src/less/mixins/_sequence.less +2 -2
  48. package/src/less/modals.less +1 -0
  49. package/src/less/navbar.less +31 -0
  50. package/src/less/navs.less +10 -0
  51. package/src/less/sequences.less +26 -0
  52. package/src/less/table.less +8 -0
  53. package/src/variables/neptune-tokens.less +10 -1
package/src/less/sequences.less CHANGED
@@ -169,9 +169,20 @@
169
169
  .sequence-inverse {
170
170
  > li {
171
171
  border-color: var(--color-border-neutral);
172
+
173
+ > a {
174
+ color: @color-navy-content-primary;
175
+ }
176
+
177
+ &::after {
178
+ background-color: @color-navy-background-elevated;
179
+ }
172
180
  }
173
181
 
174
182
  > .active {
183
+ > a {
184
+ color: @color-navy-content-primary;
185
+ }
175
186
 
176
187
  .small,
177
188
  .body-2,
@@ -181,12 +192,18 @@
181
192
 
182
193
  &::after,
183
194
  ~ li::after {
195
+ background-color: @color-navy-background-elevated;
184
196
  background-image: none !important;
185
197
  }
198
+
199
+ ~ li::before {
200
+ border-color: @color-navy-background-elevated;
201
+ }
186
202
  }
187
203
  }
188
204
 
189
205
  .sequence-variant("info", var(--color-interactive-accent));
206
+ .sequence-variant("primary", @color-navy-background-elevated);
190
207
  .sequence-variant("success", var(--color-interactive-positive));
191
208
  .sequence-variant("warning", var(--color-interactive-warning));
192
209
  .sequence-variant("danger", var(--color-interactive-negative));
@@ -206,6 +223,10 @@
206
223
  background-color: var(--color-background-screen);
207
224
  }
208
225
  }
226
+
227
+ &.sequence-inverse > li::before {
228
+ background-color: @color-navy-background-elevated;
229
+ }
209
230
  }
210
231
 
211
232
  .sequence-icon {
@@ -231,6 +252,11 @@
231
252
  line-height: (@sequence-icon-size - 1px);
232
253
  }
233
254
 
255
+ .sequence-inverse & {
256
+ background-color: @color-navy-background-elevated;
257
+ border-color: @color-navy-content-primary;
258
+ }
259
+
234
260
  .sequence a & {
235
261
  color: var(--color-content-accent);
236
262
  border-color: var(--color-interactive-accent);
package/src/less/table.less CHANGED
@@ -203,6 +203,9 @@ table col[class*="col-"] {
203
203
  // inheritance to nested tables.
204
204
 
205
205
  // Generate the contextual variants
206
+ .table-row-variant(
207
+ primary; @color-navy-background-elevated; var(--color-border-neutral); var(--color-background-elevated)
208
+ );
206
209
  .table-row-variant(active; var(--color-background-screen); var(--color-border-neutral));
207
210
  .table-row-variant(success; var(--color-background-positive); var(--color-interactive-positive));
208
211
  .table-row-variant(info; var(--color-background-accent); var(--color-interactive-accent));
@@ -364,6 +367,11 @@ table col[class*="col-"] {
364
367
  text-align: center;
365
368
  text-decoration: none;
366
369
 
370
+ &.active {
371
+ background-color: @color-navy-background-elevated;
372
+ color: @color-navy-content-primary;
373
+ }
374
+
367
375
  &:not([disabled]):hover {
368
376
  background-color: var(--color-content-accent);
369
377
  color: #fff;
package/src/variables/neptune-tokens.less CHANGED
@@ -1,3 +1,12 @@
1
1
  @import "@transferwise/neptune-tokens/tokens.less";
2
+ @import "@transferwise/neptune-tokens/colors-base.less";
2
3
 
3
- @color-base-white: @color-white;
4
+ // DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors
5
+ @color-primary: #37517e;
6
+ @color-secondary: #5d7079;
7
+ @color-accent: #00b9ff;
8
+ @color-positive: #2ed06e;
9
+ @color-negative: #f53636;
10
+ @color-warning: #ffa600;
11
+
12
+ @color-base-white: @color-base-white-light;