@transferwise/components 0.0.0-experimental-3780b7e → 0.0.0-experimental-555e4ff

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 (10) hide show
  1. package/build/main.css +26 -26
  2. package/build/styles/main.css +26 -26
  3. package/build/styles/prompt/InfoPrompt/InfoPrompt.css +5 -5
  4. package/build/styles/sentimentSurface/SentimentSurface.css +21 -21
  5. package/package.json +3 -3
  6. package/src/main.css +26 -26
  7. package/src/prompt/InfoPrompt/InfoPrompt.css +5 -5
  8. package/src/prompt/InfoPrompt/InfoPrompt.less +7 -8
  9. package/src/sentimentSurface/SentimentSurface.css +21 -21
  10. package/src/sentimentSurface/SentimentSurface.less +13 -13
package/build/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
- --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
- --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
- --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
- --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
- --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
307
+ --color-sentiment-interactive-secondary: #F1F1ED;
308
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
+ --color-sentiment-interactive-secondary-active: #DFDED5;
310
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
- --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
- --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
316
+ --color-sentiment-background-surface: #F1F1ED;
317
+ --color-sentiment-background-surface-hover: #E7E7E1;
318
+ --color-sentiment-background-surface-active: #DFDED5;
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #585958;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
- --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
334
+ --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
+ --color-sentiment-interactive-secondary-neutral-active: #727472;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
- --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
- --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
- --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
- --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
- --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
355
+ --color-sentiment-interactive-secondary: #2A2C29;
356
+ --color-sentiment-interactive-secondary-hover: #414441;
357
+ --color-sentiment-interactive-secondary-active: #595B58;
358
+ --color-sentiment-interactive-secondary-neutral: #424441;
359
+ --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
+ --color-sentiment-interactive-secondary-neutral-active: #565955;
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
- --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
- --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
364
+ --color-sentiment-background-surface: #2A2C29;
365
+ --color-sentiment-background-surface-hover: #414441;
366
+ --color-sentiment-background-surface-active: #595B58;
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
5442
5442
  stroke: currentColor;
5443
5443
  }
5444
5444
  .wds-info-prompt {
5445
+ --Prompt-border-radius: var(--radius-medium);
5445
5446
  --Prompt-gap: var(--size-8);
5446
- --Prompt-padding: 12px;
5447
+ --Prompt-padding: var(--size-12);
5447
5448
  }
5448
5449
  .wds-info-prompt__content {
5449
5450
  display: flex;
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5457
5458
  .wds-info-prompt__title,
5458
5459
  .wds-info-prompt__description {
5459
5460
  display: block;
5460
- color: var(--color-sentiment-primary);
5461
5461
  }
5462
5462
  .wds-info-prompt__action {
5463
+ align-self: flex-start;
5463
5464
  margin-top: var(--Prompt-gap);
5464
5465
  }
5465
- .wds-info-prompt__media {
5466
- display: flex;
5467
- }
5468
5466
  .wds-info-prompt__media svg {
5469
5467
  width: 24px;
5468
+ width: var(--size-24);
5470
5469
  height: 24px;
5470
+ height: var(--size-24);
5471
5471
  }
5472
5472
  .wds-info-prompt .wds-prompt__media-wrapper {
5473
5473
  padding: 0;
package/build/styles/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
- --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
- --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
- --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
- --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
- --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
307
+ --color-sentiment-interactive-secondary: #F1F1ED;
308
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
+ --color-sentiment-interactive-secondary-active: #DFDED5;
310
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
- --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
- --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
316
+ --color-sentiment-background-surface: #F1F1ED;
317
+ --color-sentiment-background-surface-hover: #E7E7E1;
318
+ --color-sentiment-background-surface-active: #DFDED5;
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #585958;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
- --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
334
+ --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
+ --color-sentiment-interactive-secondary-neutral-active: #727472;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
- --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
- --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
- --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
- --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
- --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
355
+ --color-sentiment-interactive-secondary: #2A2C29;
356
+ --color-sentiment-interactive-secondary-hover: #414441;
357
+ --color-sentiment-interactive-secondary-active: #595B58;
358
+ --color-sentiment-interactive-secondary-neutral: #424441;
359
+ --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
+ --color-sentiment-interactive-secondary-neutral-active: #565955;
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
- --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
- --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
364
+ --color-sentiment-background-surface: #2A2C29;
365
+ --color-sentiment-background-surface-hover: #414441;
366
+ --color-sentiment-background-surface-active: #595B58;
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
5442
5442
  stroke: currentColor;
5443
5443
  }
5444
5444
  .wds-info-prompt {
5445
+ --Prompt-border-radius: var(--radius-medium);
5445
5446
  --Prompt-gap: var(--size-8);
5446
- --Prompt-padding: 12px;
5447
+ --Prompt-padding: var(--size-12);
5447
5448
  }
5448
5449
  .wds-info-prompt__content {
5449
5450
  display: flex;
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5457
5458
  .wds-info-prompt__title,
5458
5459
  .wds-info-prompt__description {
5459
5460
  display: block;
5460
- color: var(--color-sentiment-primary);
5461
5461
  }
5462
5462
  .wds-info-prompt__action {
5463
+ align-self: flex-start;
5463
5464
  margin-top: var(--Prompt-gap);
5464
5465
  }
5465
- .wds-info-prompt__media {
5466
- display: flex;
5467
- }
5468
5466
  .wds-info-prompt__media svg {
5469
5467
  width: 24px;
5468
+ width: var(--size-24);
5470
5469
  height: 24px;
5470
+ height: var(--size-24);
5471
5471
  }
5472
5472
  .wds-info-prompt .wds-prompt__media-wrapper {
5473
5473
  padding: 0;
package/build/styles/prompt/InfoPrompt/InfoPrompt.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .wds-info-prompt {
2
+ --Prompt-border-radius: var(--radius-medium);
2
3
  --Prompt-gap: var(--size-8);
3
- --Prompt-padding: 12px;
4
+ --Prompt-padding: var(--size-12);
4
5
  }
5
6
  .wds-info-prompt__content {
6
7
  display: flex;
@@ -14,17 +15,16 @@
14
15
  .wds-info-prompt__title,
15
16
  .wds-info-prompt__description {
16
17
  display: block;
17
- color: var(--color-sentiment-primary);
18
18
  }
19
19
  .wds-info-prompt__action {
20
+ align-self: flex-start;
20
21
  margin-top: var(--Prompt-gap);
21
22
  }
22
- .wds-info-prompt__media {
23
- display: flex;
24
- }
25
23
  .wds-info-prompt__media svg {
26
24
  width: 24px;
25
+ width: var(--size-24);
27
26
  height: 24px;
27
+ height: var(--size-24);
28
28
  }
29
29
  .wds-info-prompt .wds-prompt__media-wrapper {
30
30
  padding: 0;
package/build/styles/sentimentSurface/SentimentSurface.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
- --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
- --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
- --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
- --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
- --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
307
+ --color-sentiment-interactive-secondary: #F1F1ED;
308
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
+ --color-sentiment-interactive-secondary-active: #DFDED5;
310
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
- --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
- --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
316
+ --color-sentiment-background-surface: #F1F1ED;
317
+ --color-sentiment-background-surface-hover: #E7E7E1;
318
+ --color-sentiment-background-surface-active: #DFDED5;
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #585958;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
- --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
334
+ --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
+ --color-sentiment-interactive-secondary-neutral-active: #727472;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
- --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
- --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
- --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
- --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
- --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
355
+ --color-sentiment-interactive-secondary: #2A2C29;
356
+ --color-sentiment-interactive-secondary-hover: #414441;
357
+ --color-sentiment-interactive-secondary-active: #595B58;
358
+ --color-sentiment-interactive-secondary-neutral: #424441;
359
+ --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
+ --color-sentiment-interactive-secondary-neutral-active: #565955;
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
- --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
- --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
364
+ --color-sentiment-background-surface: #2A2C29;
365
+ --color-sentiment-background-surface-hover: #414441;
366
+ --color-sentiment-background-surface-active: #595B58;
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-3780b7e",
3
+ "version": "0.0.0-experimental-555e4ff",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -88,8 +88,8 @@
88
88
  "storybook-addon-test-codegen": "^3.0.1",
89
89
  "@transferwise/less-config": "3.1.2",
90
90
  "@transferwise/neptune-css": "14.26.1",
91
- "@wise/components-theming": "1.10.1",
92
- "@wise/wds-configs": "0.0.0"
91
+ "@wise/wds-configs": "0.0.0",
92
+ "@wise/components-theming": "1.10.1"
93
93
  },
94
94
  "peerDependencies": {
95
95
  "@transferwise/icons": "^3 || ^4",
package/src/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
- --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
- --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
- --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
- --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
- --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
307
+ --color-sentiment-interactive-secondary: #F1F1ED;
308
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
+ --color-sentiment-interactive-secondary-active: #DFDED5;
310
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
- --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
- --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
316
+ --color-sentiment-background-surface: #F1F1ED;
317
+ --color-sentiment-background-surface-hover: #E7E7E1;
318
+ --color-sentiment-background-surface-active: #DFDED5;
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #585958;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
- --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
334
+ --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
+ --color-sentiment-interactive-secondary-neutral-active: #727472;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
- --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
- --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
- --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
- --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
- --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
355
+ --color-sentiment-interactive-secondary: #2A2C29;
356
+ --color-sentiment-interactive-secondary-hover: #414441;
357
+ --color-sentiment-interactive-secondary-active: #595B58;
358
+ --color-sentiment-interactive-secondary-neutral: #424441;
359
+ --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
+ --color-sentiment-interactive-secondary-neutral-active: #565955;
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
- --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
- --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
364
+ --color-sentiment-background-surface: #2A2C29;
365
+ --color-sentiment-background-surface-hover: #414441;
366
+ --color-sentiment-background-surface-active: #595B58;
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
5442
5442
  stroke: currentColor;
5443
5443
  }
5444
5444
  .wds-info-prompt {
5445
+ --Prompt-border-radius: var(--radius-medium);
5445
5446
  --Prompt-gap: var(--size-8);
5446
- --Prompt-padding: 12px;
5447
+ --Prompt-padding: var(--size-12);
5447
5448
  }
5448
5449
  .wds-info-prompt__content {
5449
5450
  display: flex;
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5457
5458
  .wds-info-prompt__title,
5458
5459
  .wds-info-prompt__description {
5459
5460
  display: block;
5460
- color: var(--color-sentiment-primary);
5461
5461
  }
5462
5462
  .wds-info-prompt__action {
5463
+ align-self: flex-start;
5463
5464
  margin-top: var(--Prompt-gap);
5464
5465
  }
5465
- .wds-info-prompt__media {
5466
- display: flex;
5467
- }
5468
5466
  .wds-info-prompt__media svg {
5469
5467
  width: 24px;
5468
+ width: var(--size-24);
5470
5469
  height: 24px;
5470
+ height: var(--size-24);
5471
5471
  }
5472
5472
  .wds-info-prompt .wds-prompt__media-wrapper {
5473
5473
  padding: 0;
package/src/prompt/InfoPrompt/InfoPrompt.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .wds-info-prompt {
2
+ --Prompt-border-radius: var(--radius-medium);
2
3
  --Prompt-gap: var(--size-8);
3
- --Prompt-padding: 12px;
4
+ --Prompt-padding: var(--size-12);
4
5
  }
5
6
  .wds-info-prompt__content {
6
7
  display: flex;
@@ -14,17 +15,16 @@
14
15
  .wds-info-prompt__title,
15
16
  .wds-info-prompt__description {
16
17
  display: block;
17
- color: var(--color-sentiment-primary);
18
18
  }
19
19
  .wds-info-prompt__action {
20
+ align-self: flex-start;
20
21
  margin-top: var(--Prompt-gap);
21
22
  }
22
- .wds-info-prompt__media {
23
- display: flex;
24
- }
25
23
  .wds-info-prompt__media svg {
26
24
  width: 24px;
25
+ width: var(--size-24);
27
26
  height: 24px;
27
+ height: var(--size-24);
28
28
  }
29
29
  .wds-info-prompt .wds-prompt__media-wrapper {
30
30
  padding: 0;
package/src/prompt/InfoPrompt/InfoPrompt.less CHANGED
@@ -1,6 +1,7 @@
1
1
  .wds-info-prompt {
2
+ --Prompt-border-radius: var(--radius-medium);
2
3
  --Prompt-gap: var(--size-8);
3
- --Prompt-padding: 12px;
4
+ --Prompt-padding: var(--size-12);
4
5
 
5
6
  &__content {
6
7
  display: flex;
@@ -11,27 +12,25 @@
11
12
  justify-content: flex-start; /* Top align when title exists */
12
13
  }
13
14
  }
14
-
15
15
  &__title,
16
16
  &__description {
17
17
  display: block;
18
- color: var(--color-sentiment-primary);
19
18
  }
20
19
 
21
20
  &__action {
21
+ align-self: flex-start;
22
22
  margin-top: var(--Prompt-gap);
23
23
  }
24
24
 
25
25
  &__media {
26
- display: flex;
27
-
26
+ // To ensure icons are sized correctly, we set a fixed size for SVGs within the media wrapper
28
27
  svg {
29
- width: 24px;
30
- height: 24px;
28
+ width: var(--size-24);
29
+ height: var(--size-24);
31
30
  }
32
31
  }
33
32
 
34
33
  .wds-prompt__media-wrapper {
35
34
  padding: 0;
36
35
  }
37
- }
36
+ }
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
- --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
- --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
- --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
- --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
- --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
307
+ --color-sentiment-interactive-secondary: #F1F1ED;
308
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
+ --color-sentiment-interactive-secondary-active: #DFDED5;
310
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
- --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
- --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
316
+ --color-sentiment-background-surface: #F1F1ED;
317
+ --color-sentiment-background-surface-hover: #E7E7E1;
318
+ --color-sentiment-background-surface-active: #DFDED5;
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #585958;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
- --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
334
+ --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
+ --color-sentiment-interactive-secondary-neutral-active: #727472;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
- --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
- --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
- --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
- --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
- --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
355
+ --color-sentiment-interactive-secondary: #2A2C29;
356
+ --color-sentiment-interactive-secondary-hover: #414441;
357
+ --color-sentiment-interactive-secondary-active: #595B58;
358
+ --color-sentiment-interactive-secondary-neutral: #424441;
359
+ --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
+ --color-sentiment-interactive-secondary-neutral-active: #565955;
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
- --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
- --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
364
+ --color-sentiment-background-surface: #2A2C29;
365
+ --color-sentiment-background-surface-hover: #414441;
366
+ --color-sentiment-background-surface-active: #595B58;
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/src/sentimentSurface/SentimentSurface.less CHANGED
@@ -178,12 +178,12 @@
178
178
  .np-theme-business--bright-green & {
179
179
  &-base {
180
180
  .sentiment-surface-tokens(
181
- #454745, #353635, #232423, // content-primary (default, hover, active)
182
- #454745, #353635, #232423, // interactive-primary
183
- rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17), // interactive-secondary
184
- rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17), // interactive-secondary-neutral
185
- #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
186
- rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17) // background-surface
181
+ #454745, #353635, #232423, // content-primary (default, hover, active)
182
+ #454745, #353635, #232423, // interactive-primary
183
+ #F1F1ED, #E7E7E1, #DFDED5, // interactive-secondary
184
+ #E4E4DC, #DCDCD2, #D3D2C6, // interactive-secondary-neutral
185
+ #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
186
+ #F1F1ED, #E7E7E1, #DFDED5 // background-surface
187
187
  );
188
188
  }
189
189
  &-elevated {
@@ -191,7 +191,7 @@
191
191
  #F1F1ED, #E7E7E1, #DFDED5, // content-primary
192
192
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
193
193
  #454745, #353635, #232423, // interactive-secondary
194
- #585958, #6A6C6A, #7D7E7D, // interactive-secondary-neutral
194
+ #5A5C5A, #6D6F6D, #727472, // interactive-secondary-neutral
195
195
  #454745, #353635, #232423, // interactive-control
196
196
  #454745, #353635, #232423 // background-surface
197
197
  );
@@ -205,12 +205,12 @@
205
205
  .np-theme-platform--forest-green & {
206
206
  &-base {
207
207
  .sentiment-surface-tokens(
208
- #F1F1ED, #E7E7E1, #DFDED5, // content-primary
209
- #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
210
- rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30), // interactive-secondary
211
- rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30), // interactive-secondary-neutral
212
- #2A2C29, #414441, #595B58, // interactive-control
213
- rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30) // background-surface
208
+ #F1F1ED, #E7E7E1, #DFDED5, // content-primary
209
+ #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
210
+ #2A2C29, #414441, #595B58, // interactive-secondary
211
+ #424441, #4C4E4B, #565955, // interactive-secondary-neutral
212
+ #2A2C29, #414441, #595B58, // interactive-control
213
+ #2A2C29, #414441, #595B58 // background-surface
214
214
  );
215
215
  }
216
216
  &-elevated {