@indico-data/design-system 3.20.0 → 3.21.0

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 (7) hide show
  1. package/lib/index.css +22 -14
  2. package/lib/index.esm.css +22 -14
  3. package/package.json +1 -1
  4. package/src/components/forms/form/styles/Form.scss +1 -1
  5. package/src/components/forms/select/styles/Select.scss +1 -1
  6. package/src/styles/primitives/_colors.scss +11 -9
  7. package/src/styles/tokens/_semantic-tokens.scss +9 -3
package/lib/index.css CHANGED
@@ -133,21 +133,21 @@
133
133
  --pf-yellow-color-700: #58481d;
134
134
  --pf-yellow-color-800: #322c1b;
135
135
  --pf-yellow-color-900: #1b160e;
136
- --pf-green-color: #14b869;
136
+ --pf-green-color: #14b866;
137
137
  --pf-green-color-50: #f7fdfa;
138
138
  --pf-green-color-100: #effbf5;
139
139
  --pf-green-color-150: #e7f9f0;
140
140
  --pf-green-color-200: #def7eb;
141
141
  --pf-green-color-250: #c2f4db;
142
- --pf-green-color-300: #a8f0cd;
143
- --pf-green-color-400: #3eea97;
144
- --pf-green-color-450: #18dc7e;
145
- --pf-green-color-500: #14b869;
142
+ --pf-green-color-300: #97edc2;
143
+ --pf-green-color-400: #44e494;
144
+ --pf-green-color-450: #1cd97a;
145
+ --pf-green-color-500: #14b866;
146
146
  --pf-green-color-550: #129e45;
147
- --pf-green-color-600: #17824e;
148
- --pf-green-color-700: #175e3c;
149
- --pf-green-color-800: #173627;
150
- --pf-green-color-900: #0e1b15;
147
+ --pf-green-color-600: #14804a;
148
+ --pf-green-color-700: #175e3b;
149
+ --pf-green-color-800: #173626;
150
+ --pf-green-color-900: #0e1b14;
151
151
  --pf-teal-color: #29a3a3;
152
152
  --pf-teal-color-50: #f6fdfd;
153
153
  --pf-teal-color-100: #eefcfc;
@@ -219,6 +219,7 @@
219
219
  --pf-primary-color-500: #50647c;
220
220
  --pf-primary-color-550: #455066;
221
221
  --pf-primary-color-600: #243447;
222
+ --pf-primary-color-650: #1f2a37;
222
223
  --pf-primary-color-700: #192534;
223
224
  --pf-primary-color-800: #111b28;
224
225
  --pf-primary-color-900: #0c141d;
@@ -250,6 +251,7 @@
250
251
  --pf-tertiary-color-550: #5f6a85;
251
252
  --pf-tertiary-color-600: #58637b;
252
253
  --pf-tertiary-color-700: #4b5364;
254
+ --pf-tertiary-color-750: #373f51;
253
255
  --pf-tertiary-color-800: #2c303a;
254
256
  --pf-tertiary-color-900: #111317;
255
257
  }
@@ -443,14 +445,17 @@
443
445
  --pf-semantic-background-secondary: var(--pf-gray-color-50);
444
446
  --pf-semantic-background-tertiary: var(--pf-gray-color-200);
445
447
  --pf-semantic-background-quaternary: var(--pf-gray-color-250);
448
+ --pf-semantic-background-soft: var(--pf-gray-color-250);
446
449
  --pf-semantic-background-accent: var(--pf-secondary-color-200);
447
450
  --pf-semantic-background-highlight: var(--pf-blue-color-250);
448
451
  --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
449
452
  --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
450
453
  --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
454
+ --pf-semantic-background-contrast: var(--pf-secondary-color-150);
451
455
  --pf-semantic-border-primary: var(--pf-gray-color-300);
452
456
  --pf-semantic-border-secondary: var(--pf-gray-color-250);
453
- --pf-semantic-border-hover: var(--pf-gray-color-400);
457
+ --pf-semantic-border-tertiary: var(--pf-gray-color-200);
458
+ --pf-semantic-border-quaternary: var(--pf-gray-color-400);
454
459
  --pf-semantic-border-soft: var(--pf-secondary-color-450);
455
460
  --pf-semantic-border-accent: var(--pf-blue-color-450);
456
461
  --pf-semantic-border-error: var(--pf-red-color-450);
@@ -514,14 +519,17 @@
514
519
  --pf-semantic-background-secondary: var(--pf-primary-color-800);
515
520
  --pf-semantic-background-tertiary: var(--pf-primary-color-600);
516
521
  --pf-semantic-background-quaternary: var(--pf-primary-color-500);
522
+ --pf-semantic-background-soft: var(--pf-tertiary-color-750);
517
523
  --pf-semantic-background-accent: var(--pf-blue-color-800);
518
524
  --pf-semantic-background-highlight: var(--pf-blue-color-700);
519
525
  --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
520
526
  --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
521
- --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
527
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-50);
528
+ --pf-semantic-background-contrast: var(--pf-primary-color-650);
522
529
  --pf-semantic-border-primary: var(--pf-tertiary-color-700);
523
530
  --pf-semantic-border-secondary: var(--pf-primary-color-600);
524
- --pf-semantic-border-hover: var(--pf-tertiary-color-600);
531
+ --pf-semantic-border-tertiary: var(--pf-tertiary-color-750);
532
+ --pf-semantic-border-quaternary: var(--pf-tertiary-color-600);
525
533
  --pf-semantic-border-soft: var(--pf-secondary-color-600);
526
534
  --pf-semantic-border-accent: var(--pf-secondary-color-400);
527
535
  --pf-semantic-border-error: var(--pf-red-color-450);
@@ -5373,7 +5381,7 @@ form {
5373
5381
  .password-input-wrapper textarea:hover,
5374
5382
  .textarea-wrapper input:hover,
5375
5383
  .textarea-wrapper textarea:hover {
5376
- border-color: var(--pf-semantic-border-hover);
5384
+ border-color: var(--pf-semantic-border-quaternary);
5377
5385
  }
5378
5386
  .time-input-wrapper input:focus,
5379
5387
  .time-input-wrapper textarea:focus,
@@ -5479,7 +5487,7 @@ form {
5479
5487
  box-shadow: none;
5480
5488
  }
5481
5489
  .select-wrapper .select__control:hover:not(:focus) {
5482
- border-color: var(--pf-semantic-border-hover);
5490
+ border-color: var(--pf-semantic-border-quaternary);
5483
5491
  }
5484
5492
  .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
5485
5493
  border: var(--pf-border-sm) solid var(--pf-semantic-border-accent);
package/lib/index.esm.css CHANGED
@@ -133,21 +133,21 @@
133
133
  --pf-yellow-color-700: #58481d;
134
134
  --pf-yellow-color-800: #322c1b;
135
135
  --pf-yellow-color-900: #1b160e;
136
- --pf-green-color: #14b869;
136
+ --pf-green-color: #14b866;
137
137
  --pf-green-color-50: #f7fdfa;
138
138
  --pf-green-color-100: #effbf5;
139
139
  --pf-green-color-150: #e7f9f0;
140
140
  --pf-green-color-200: #def7eb;
141
141
  --pf-green-color-250: #c2f4db;
142
- --pf-green-color-300: #a8f0cd;
143
- --pf-green-color-400: #3eea97;
144
- --pf-green-color-450: #18dc7e;
145
- --pf-green-color-500: #14b869;
142
+ --pf-green-color-300: #97edc2;
143
+ --pf-green-color-400: #44e494;
144
+ --pf-green-color-450: #1cd97a;
145
+ --pf-green-color-500: #14b866;
146
146
  --pf-green-color-550: #129e45;
147
- --pf-green-color-600: #17824e;
148
- --pf-green-color-700: #175e3c;
149
- --pf-green-color-800: #173627;
150
- --pf-green-color-900: #0e1b15;
147
+ --pf-green-color-600: #14804a;
148
+ --pf-green-color-700: #175e3b;
149
+ --pf-green-color-800: #173626;
150
+ --pf-green-color-900: #0e1b14;
151
151
  --pf-teal-color: #29a3a3;
152
152
  --pf-teal-color-50: #f6fdfd;
153
153
  --pf-teal-color-100: #eefcfc;
@@ -219,6 +219,7 @@
219
219
  --pf-primary-color-500: #50647c;
220
220
  --pf-primary-color-550: #455066;
221
221
  --pf-primary-color-600: #243447;
222
+ --pf-primary-color-650: #1f2a37;
222
223
  --pf-primary-color-700: #192534;
223
224
  --pf-primary-color-800: #111b28;
224
225
  --pf-primary-color-900: #0c141d;
@@ -250,6 +251,7 @@
250
251
  --pf-tertiary-color-550: #5f6a85;
251
252
  --pf-tertiary-color-600: #58637b;
252
253
  --pf-tertiary-color-700: #4b5364;
254
+ --pf-tertiary-color-750: #373f51;
253
255
  --pf-tertiary-color-800: #2c303a;
254
256
  --pf-tertiary-color-900: #111317;
255
257
  }
@@ -443,14 +445,17 @@
443
445
  --pf-semantic-background-secondary: var(--pf-gray-color-50);
444
446
  --pf-semantic-background-tertiary: var(--pf-gray-color-200);
445
447
  --pf-semantic-background-quaternary: var(--pf-gray-color-250);
448
+ --pf-semantic-background-soft: var(--pf-gray-color-250);
446
449
  --pf-semantic-background-accent: var(--pf-secondary-color-200);
447
450
  --pf-semantic-background-highlight: var(--pf-blue-color-250);
448
451
  --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
449
452
  --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
450
453
  --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
454
+ --pf-semantic-background-contrast: var(--pf-secondary-color-150);
451
455
  --pf-semantic-border-primary: var(--pf-gray-color-300);
452
456
  --pf-semantic-border-secondary: var(--pf-gray-color-250);
453
- --pf-semantic-border-hover: var(--pf-gray-color-400);
457
+ --pf-semantic-border-tertiary: var(--pf-gray-color-200);
458
+ --pf-semantic-border-quaternary: var(--pf-gray-color-400);
454
459
  --pf-semantic-border-soft: var(--pf-secondary-color-450);
455
460
  --pf-semantic-border-accent: var(--pf-blue-color-450);
456
461
  --pf-semantic-border-error: var(--pf-red-color-450);
@@ -514,14 +519,17 @@
514
519
  --pf-semantic-background-secondary: var(--pf-primary-color-800);
515
520
  --pf-semantic-background-tertiary: var(--pf-primary-color-600);
516
521
  --pf-semantic-background-quaternary: var(--pf-primary-color-500);
522
+ --pf-semantic-background-soft: var(--pf-tertiary-color-750);
517
523
  --pf-semantic-background-accent: var(--pf-blue-color-800);
518
524
  --pf-semantic-background-highlight: var(--pf-blue-color-700);
519
525
  --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
520
526
  --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
521
- --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
527
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-50);
528
+ --pf-semantic-background-contrast: var(--pf-primary-color-650);
522
529
  --pf-semantic-border-primary: var(--pf-tertiary-color-700);
523
530
  --pf-semantic-border-secondary: var(--pf-primary-color-600);
524
- --pf-semantic-border-hover: var(--pf-tertiary-color-600);
531
+ --pf-semantic-border-tertiary: var(--pf-tertiary-color-750);
532
+ --pf-semantic-border-quaternary: var(--pf-tertiary-color-600);
525
533
  --pf-semantic-border-soft: var(--pf-secondary-color-600);
526
534
  --pf-semantic-border-accent: var(--pf-secondary-color-400);
527
535
  --pf-semantic-border-error: var(--pf-red-color-450);
@@ -5373,7 +5381,7 @@ form {
5373
5381
  .password-input-wrapper textarea:hover,
5374
5382
  .textarea-wrapper input:hover,
5375
5383
  .textarea-wrapper textarea:hover {
5376
- border-color: var(--pf-semantic-border-hover);
5384
+ border-color: var(--pf-semantic-border-quaternary);
5377
5385
  }
5378
5386
  .time-input-wrapper input:focus,
5379
5387
  .time-input-wrapper textarea:focus,
@@ -5479,7 +5487,7 @@ form {
5479
5487
  box-shadow: none;
5480
5488
  }
5481
5489
  .select-wrapper .select__control:hover:not(:focus) {
5482
- border-color: var(--pf-semantic-border-hover);
5490
+ border-color: var(--pf-semantic-border-quaternary);
5483
5491
  }
5484
5492
  .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
5485
5493
  border: var(--pf-border-sm) solid var(--pf-semantic-border-accent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "3.20.0",
3
+ "version": "3.21.0",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/forms/form/styles/Form.scss CHANGED
@@ -26,7 +26,7 @@ form {
26
26
  }
27
27
 
28
28
  &:hover {
29
- border-color: var(--pf-semantic-border-hover);
29
+ border-color: var(--pf-semantic-border-quaternary);
30
30
  }
31
31
  &:focus {
32
32
  border-color: var(--pf-semantic-border-accent);
package/src/components/forms/select/styles/Select.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  box-shadow: none;
8
8
 
9
9
  &:hover:not(:focus) {
10
- border-color: var(--pf-semantic-border-hover);
10
+ border-color: var(--pf-semantic-border-quaternary);
11
11
  }
12
12
 
13
13
  &:focus,
package/src/styles/primitives/_colors.scss CHANGED
@@ -96,21 +96,21 @@
96
96
  --pf-yellow-color-800: #322c1b;
97
97
  --pf-yellow-color-900: #1b160e;
98
98
 
99
- --pf-green-color: #14b869;
99
+ --pf-green-color: #14b866;
100
100
  --pf-green-color-50: #f7fdfa;
101
101
  --pf-green-color-100: #effbf5;
102
102
  --pf-green-color-150: #e7f9f0;
103
103
  --pf-green-color-200: #def7eb;
104
104
  --pf-green-color-250: #c2f4db;
105
- --pf-green-color-300: #a8f0cd;
106
- --pf-green-color-400: #3eea97;
107
- --pf-green-color-450: #18dc7e;
108
- --pf-green-color-500: #14b869;
105
+ --pf-green-color-300: #97edc2;
106
+ --pf-green-color-400: #44e494;
107
+ --pf-green-color-450: #1cd97a;
108
+ --pf-green-color-500: #14b866;
109
109
  --pf-green-color-550: #129e45;
110
- --pf-green-color-600: #17824e;
111
- --pf-green-color-700: #175e3c;
112
- --pf-green-color-800: #173627;
113
- --pf-green-color-900: #0e1b15;
110
+ --pf-green-color-600: #14804a;
111
+ --pf-green-color-700: #175e3b;
112
+ --pf-green-color-800: #173626;
113
+ --pf-green-color-900: #0e1b14;
114
114
 
115
115
  --pf-teal-color: #29a3a3;
116
116
  --pf-teal-color-50: #f6fdfd;
@@ -188,6 +188,7 @@
188
188
  --pf-primary-color-500: #50647c;
189
189
  --pf-primary-color-550: #455066;
190
190
  --pf-primary-color-600: #243447;
191
+ --pf-primary-color-650: #1f2a37;
191
192
  --pf-primary-color-700: #192534;
192
193
  --pf-primary-color-800: #111b28;
193
194
  --pf-primary-color-900: #0c141d;
@@ -221,6 +222,7 @@
221
222
  --pf-tertiary-color-550: #5f6a85;
222
223
  --pf-tertiary-color-600: #58637b;
223
224
  --pf-tertiary-color-700: #4b5364;
225
+ --pf-tertiary-color-750: #373f51;
224
226
  --pf-tertiary-color-800: #2c303a;
225
227
  --pf-tertiary-color-900: #111317;
226
228
  }
package/src/styles/tokens/_semantic-tokens.scss CHANGED
@@ -46,16 +46,19 @@
46
46
  --pf-semantic-background-secondary: var(--pf-gray-color-50);
47
47
  --pf-semantic-background-tertiary: var(--pf-gray-color-200);
48
48
  --pf-semantic-background-quaternary: var(--pf-gray-color-250);
49
+ --pf-semantic-background-soft: var(--pf-gray-color-250);
49
50
  --pf-semantic-background-accent: var(--pf-secondary-color-200);
50
51
  --pf-semantic-background-highlight: var(--pf-blue-color-250);
51
52
  --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
52
53
  --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
53
54
  --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
55
+ --pf-semantic-background-contrast: var(--pf-secondary-color-150);
54
56
 
55
57
  // Border
56
58
  --pf-semantic-border-primary: var(--pf-gray-color-300);
57
59
  --pf-semantic-border-secondary: var(--pf-gray-color-250);
58
- --pf-semantic-border-hover: var(--pf-gray-color-400);
60
+ --pf-semantic-border-tertiary: var(--pf-gray-color-200);
61
+ --pf-semantic-border-quaternary: var(--pf-gray-color-400);
59
62
  --pf-semantic-border-soft: var(--pf-secondary-color-450);
60
63
  --pf-semantic-border-accent: var(--pf-blue-color-450);
61
64
  --pf-semantic-border-error: var(--pf-red-color-450);
@@ -129,16 +132,19 @@
129
132
  --pf-semantic-background-secondary: var(--pf-primary-color-800);
130
133
  --pf-semantic-background-tertiary: var(--pf-primary-color-600);
131
134
  --pf-semantic-background-quaternary: var(--pf-primary-color-500);
135
+ --pf-semantic-background-soft: var(--pf-tertiary-color-750);
132
136
  --pf-semantic-background-accent: var(--pf-blue-color-800);
133
137
  --pf-semantic-background-highlight: var(--pf-blue-color-700);
134
138
  --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
135
139
  --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
136
- --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
140
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-50);
141
+ --pf-semantic-background-contrast: var(--pf-primary-color-650);
137
142
 
138
143
  // Border
139
144
  --pf-semantic-border-primary: var(--pf-tertiary-color-700);
140
145
  --pf-semantic-border-secondary: var(--pf-primary-color-600);
141
- --pf-semantic-border-hover: var(--pf-tertiary-color-600);
146
+ --pf-semantic-border-tertiary: var(--pf-tertiary-color-750);
147
+ --pf-semantic-border-quaternary: var(--pf-tertiary-color-600);
142
148
  --pf-semantic-border-soft: var(--pf-secondary-color-600);
143
149
  --pf-semantic-border-accent: var(--pf-secondary-color-400);
144
150
  --pf-semantic-border-error: var(--pf-red-color-450);