@indico-data/design-system 2.60.3 → 2.60.5

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 (20) hide show
  1. package/lib/index.css +99 -75
  2. package/lib/index.esm.css +99 -75
  3. package/lib/index.esm.js +1 -1
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +1 -1
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/forms/checkbox/styles/Checkbox.scss +74 -76
  9. package/src/components/forms/date/datePicker/styles/DatePicker.scss +0 -4
  10. package/src/components/forms/form/Form.tsx +1 -0
  11. package/src/components/forms/form/styles/Form.scss +10 -0
  12. package/src/components/forms/input/styles/Input.scss +19 -25
  13. package/src/components/forms/numberInput/styles/NumberInput.scss +22 -24
  14. package/src/components/forms/passwordInput/styles/PasswordInput.scss +27 -32
  15. package/src/components/forms/radio/styles/Radio.scss +75 -76
  16. package/src/components/forms/textarea/styles/Textarea.scss +13 -18
  17. package/src/components/forms/toggle/styles/Toggle.scss +1 -0
  18. package/src/components/pagination/styles/Pagination.scss +0 -6
  19. package/src/styles/globals.scss +4 -4
  20. package/src/styles/variables/_typography.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "2.60.3",
3
+ "version": "2.60.5",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/forms/checkbox/styles/Checkbox.scss CHANGED
@@ -10,83 +10,81 @@
10
10
  --pf-checkbox-check-color: var(--pf-white-color);
11
11
  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
12
12
  }
13
- .form-control {
14
- .checkbox-wrapper {
15
- display: flex;
16
- margin-bottom: var(--pf-margin-2);
17
- align-items: center;
18
- }
19
- .checkbox-input {
20
- margin: 0;
21
- margin-right: var(--pf-margin-2);
22
- cursor: pointer;
23
- }
24
- .checkbox-input-label {
25
- cursor: pointer;
26
- }
27
- .checkbox-input:checked,
28
- .checkbox-input:not(:checked) {
29
- position: absolute;
30
- left: -9999px;
31
- }
32
- .checkbox-input:checked + label,
33
- .checkbox-input:not(:checked) + label {
34
- position: relative;
35
- padding-left: var(--pf-padding-7);
36
- cursor: pointer;
37
- line-height: 20px;
38
- display: inline-block;
39
- }
40
- .checkbox-input:checked + label:before,
41
- .checkbox-input:not(:checked) + label:before {
42
- content: '';
43
- position: absolute;
44
- left: 0;
45
- top: 0;
46
- width: 18px;
47
- height: 18px;
48
- border: 1px solid var(--pf-form-input-border-color);
49
- border-radius: var(--pf-rounded);
50
- background: var(--pf-form-input-background-color);
51
- }
52
- .checkbox-input:checked + label:after,
53
- .checkbox-input:not(:checked) + label:after {
54
- content: '';
55
- width: 12px;
56
- height: 12px;
57
- background: var(--pf-checkbox-check-color);
58
- position: absolute;
59
- top: 4px;
60
- left: 4px;
61
- border-radius: var(--pf-rounded);
62
- -webkit-transition: all 0.2s ease;
63
- transition: all 0.2s ease;
64
- }
65
- .checkbox-input:not(:checked) + label:after {
66
- opacity: 0;
67
- -webkit-transform: scale(0);
68
- transform: scale(0);
69
- }
70
- .checkbox-input:checked + label:after {
71
- opacity: 1;
72
- -webkit-transform: scale(1);
73
- transform: scale(1);
74
- }
75
- .checkbox-input:disabled,
76
- .checkbox-input:disabled + label {
77
- cursor: not-allowed;
78
- }
13
+ .checkbox-wrapper {
14
+ display: flex;
15
+ margin-bottom: var(--pf-margin-2);
16
+ align-items: center;
17
+ }
18
+ .checkbox-input {
19
+ margin: 0;
20
+ margin-right: var(--pf-margin-2);
21
+ cursor: pointer;
22
+ }
23
+ .checkbox-input-label {
24
+ cursor: pointer;
25
+ }
26
+ .checkbox-input:checked,
27
+ .checkbox-input:not(:checked) {
28
+ position: absolute;
29
+ left: -9999px;
30
+ }
31
+ .checkbox-input:checked + label,
32
+ .checkbox-input:not(:checked) + label {
33
+ position: relative;
34
+ padding-left: var(--pf-padding-7);
35
+ cursor: pointer;
36
+ line-height: 20px;
37
+ display: inline-block;
38
+ }
39
+ .checkbox-input:checked + label:before,
40
+ .checkbox-input:not(:checked) + label:before {
41
+ content: '';
42
+ position: absolute;
43
+ left: 0;
44
+ top: 0;
45
+ width: 18px;
46
+ height: 18px;
47
+ border: 1px solid var(--pf-form-input-border-color);
48
+ border-radius: var(--pf-rounded);
49
+ background: var(--pf-form-input-background-color);
50
+ }
51
+ .checkbox-input:checked + label:after,
52
+ .checkbox-input:not(:checked) + label:after {
53
+ content: '';
54
+ width: 12px;
55
+ height: 12px;
56
+ background: var(--pf-checkbox-check-color);
57
+ position: absolute;
58
+ top: 4px;
59
+ left: 4px;
60
+ border-radius: var(--pf-rounded);
61
+ -webkit-transition: all 0.2s ease;
62
+ transition: all 0.2s ease;
63
+ }
64
+ .checkbox-input:not(:checked) + label:after {
65
+ opacity: 0;
66
+ -webkit-transform: scale(0);
67
+ transform: scale(0);
68
+ }
69
+ .checkbox-input:checked + label:after {
70
+ opacity: 1;
71
+ -webkit-transform: scale(1);
72
+ transform: scale(1);
73
+ }
74
+ .checkbox-input:disabled,
75
+ .checkbox-input:disabled + label {
76
+ cursor: not-allowed;
77
+ }
79
78
 
80
- .checkbox-input:disabled + label {
81
- color: var(--pf-checkbox-disabled-color);
82
- opacity: 0.5;
83
- }
79
+ .checkbox-input:disabled + label {
80
+ color: var(--pf-checkbox-disabled-color);
81
+ opacity: 0.5;
82
+ }
84
83
 
85
- .checkbox-input:disabled + label:before {
86
- border-color: var(--pf-checkbox-disabled-color);
87
- }
84
+ .checkbox-input:disabled + label:before {
85
+ border-color: var(--pf-checkbox-disabled-color);
86
+ }
88
87
 
89
- .checkbox-input:disabled + label:after {
90
- background: var(--pf-form-input-disabled-background-color);
91
- }
88
+ .checkbox-input:disabled + label:after {
89
+ background: var(--pf-form-input-disabled-background-color);
92
90
  }
package/src/components/forms/date/datePicker/styles/DatePicker.scss CHANGED
@@ -89,8 +89,4 @@
89
89
  .time-picker-wrapper {
90
90
  margin-bottom: var(--pf-margin-3);
91
91
  width: 348px;
92
-
93
- .form-control {
94
- margin-bottom: 0;
95
- }
96
92
  }
package/src/components/forms/form/Form.tsx CHANGED
@@ -48,6 +48,7 @@ export const Form = ({
48
48
 
49
49
  return (
50
50
  <form
51
+ className="form"
51
52
  onSubmit={handleSubmit}
52
53
  action={action}
53
54
  method={method}
package/src/components/forms/form/styles/Form.scss CHANGED
@@ -92,3 +92,13 @@ form {
92
92
  }
93
93
  }
94
94
  }
95
+
96
+ .form {
97
+ .form-control {
98
+ margin-bottom: var(--pf-margin-3);
99
+ }
100
+ }
101
+ .form-label {
102
+ margin-bottom: var(--pf-margin-2);
103
+ font-size: var(--pf-font-size-form-label);
104
+ }
package/src/components/forms/input/styles/Input.scss CHANGED
@@ -6,31 +6,25 @@
6
6
  }
7
7
  }
8
8
 
9
- .form-control {
10
- margin-bottom: var(--pf-margin-3);
11
- .help-text {
12
- margin-top: var(--pf-margin-2);
13
- margin-bottom: var(--pf-margin-2);
14
- color: var(--pf-form-input-help-color);
15
- font-size: var(--pf-font-size-subtitle2);
16
- }
17
- .input-wrapper {
18
- position: relative;
19
- .embedded-icon {
20
- position: absolute;
21
- top: 10px;
22
- left: var(--pf-margin-2);
23
- color: var(--pf-form-input-color);
24
- }
25
- .clearable-icon {
26
- position: absolute;
27
- top: var(--pf-margin-3);
28
- right: var(--pf-margin-2);
29
- color: var(--pf-form-input-color);
30
- cursor: pointer;
31
- }
9
+ .help-text {
10
+ margin-top: var(--pf-margin-2);
11
+ margin-bottom: var(--pf-margin-2);
12
+ color: var(--pf-form-input-help-color);
13
+ font-size: var(--pf-font-size-subtitle2);
14
+ }
15
+ .input-wrapper {
16
+ position: relative;
17
+ .embedded-icon {
18
+ position: absolute;
19
+ top: 10px;
20
+ left: var(--pf-margin-2);
21
+ color: var(--pf-form-input-color);
32
22
  }
33
- .form-label {
34
- margin-bottom: var(--pf-margin-2);
23
+ .clearable-icon {
24
+ position: absolute;
25
+ top: var(--pf-margin-3);
26
+ right: var(--pf-margin-2);
27
+ color: var(--pf-form-input-color);
28
+ cursor: pointer;
35
29
  }
36
30
  }
package/src/components/forms/numberInput/styles/NumberInput.scss CHANGED
@@ -15,31 +15,29 @@
15
15
  }
16
16
  }
17
17
 
18
- .form-control {
19
- .help-text {
20
- margin-top: var(--pf-margin-2);
21
- margin-bottom: var(--pf-margin-2);
22
- color: var(--pf-form-input-help-color);
23
- font-size: var(--pf-font-size-subtitle2);
18
+ .help-text {
19
+ margin-top: var(--pf-margin-2);
20
+ margin-bottom: var(--pf-margin-2);
21
+ color: var(--pf-form-input-help-color);
22
+ font-size: var(--pf-font-size-subtitle2);
23
+ }
24
+ .number-input-wrapper {
25
+ position: relative;
26
+ .embedded-icon {
27
+ position: absolute;
28
+ top: 10px;
29
+ left: var(--pf-margin-2);
30
+ color: var(--pf-form-input-color);
24
31
  }
25
- .number-input-wrapper {
26
- position: relative;
27
- .embedded-icon {
28
- position: absolute;
29
- top: 10px;
30
- left: var(--pf-margin-2);
31
- color: var(--pf-form-input-color);
32
- }
33
32
 
34
- .clearable-icon {
35
- position: absolute;
36
- top: var(--pf-margin-3);
37
- right: var(--pf-margin-2);
38
- color: var(--pf-form-input-color);
39
- cursor: pointer;
40
- }
41
- }
42
- .form-label {
43
- margin-bottom: var(--pf-margin-2);
33
+ .clearable-icon {
34
+ position: absolute;
35
+ top: var(--pf-margin-3);
36
+ right: var(--pf-margin-2);
37
+ color: var(--pf-form-input-color);
38
+ cursor: pointer;
44
39
  }
45
40
  }
41
+ .form-label {
42
+ margin-bottom: var(--pf-margin-2);
43
+ }
package/src/components/forms/passwordInput/styles/PasswordInput.scss CHANGED
@@ -6,38 +6,33 @@
6
6
  }
7
7
  }
8
8
 
9
- .form-control {
10
- .error-list {
11
- list-style: none;
12
- padding: 0;
13
- margin: 0;
14
- margin-top: var(--pf-margin-2);
15
- margin-bottom: var(--pf-margin-2);
16
- color: var(--pf-error-color);
17
- }
18
- .help-text {
19
- margin-top: var(--pf-margin-2);
20
- margin-bottom: var(--pf-margin-2);
21
- color: var(--pf-form-input-help-color);
22
- font-size: var(--pf-font-size-subtitle2);
23
- }
24
- .password-input-wrapper {
25
- position: relative;
26
- .embedded-icon {
27
- position: absolute;
28
- top: 10px;
29
- left: var(--pf-margin-2);
30
- color: var(--pf-form-input-color);
31
- }
32
- .toggle-show-password-icon {
33
- position: absolute;
34
- top: var(--pf-margin-3);
35
- right: var(--pf-margin-2);
36
- color: var(--pf-form-input-color);
37
- cursor: pointer;
38
- }
9
+ .error-list {
10
+ list-style: none;
11
+ padding: 0;
12
+ margin: 0;
13
+ margin-top: var(--pf-margin-2);
14
+ margin-bottom: var(--pf-margin-2);
15
+ color: var(--pf-error-color);
16
+ }
17
+ .help-text {
18
+ margin-top: var(--pf-margin-2);
19
+ margin-bottom: var(--pf-margin-2);
20
+ color: var(--pf-form-input-help-color);
21
+ font-size: var(--pf-font-size-subtitle2);
22
+ }
23
+ .password-input-wrapper {
24
+ position: relative;
25
+ .embedded-icon {
26
+ position: absolute;
27
+ top: 10px;
28
+ left: var(--pf-margin-2);
29
+ color: var(--pf-form-input-color);
39
30
  }
40
- .form-label {
41
- margin-bottom: var(--pf-margin-2);
31
+ .toggle-show-password-icon {
32
+ position: absolute;
33
+ top: var(--pf-margin-3);
34
+ right: var(--pf-margin-2);
35
+ color: var(--pf-form-input-color);
36
+ cursor: pointer;
42
37
  }
43
38
  }
package/src/components/forms/radio/styles/Radio.scss CHANGED
@@ -12,83 +12,82 @@
12
12
  --pf-radio-disabled-color: var(--pf-gray-color-300);
13
13
  }
14
14
 
15
- .form-control {
16
- .radio-wrapper {
17
- display: flex;
18
- margin-bottom: var(--pf-margin-2);
19
- align-items: center;
20
- }
21
- .radio-input {
22
- margin: 0;
23
- margin-right: var(--pf-margin-2);
24
- cursor: pointer;
25
- }
26
- .radio-input-label {
27
- cursor: pointer;
28
- }
29
- [type='radio']:checked,
30
- [type='radio']:not(:checked) {
31
- position: absolute;
32
- left: -9999px;
33
- }
34
- [type='radio']:checked + label,
35
- [type='radio']:not(:checked) + label {
36
- position: relative;
37
- padding-left: var(--pf-padding-7);
38
- cursor: pointer;
39
- line-height: 20px;
40
- display: inline-block;
41
- }
42
- [type='radio']:checked + label:before,
43
- [type='radio']:not(:checked) + label:before {
44
- content: '';
45
- position: absolute;
46
- left: 0;
47
- top: 0;
48
- width: 18px;
49
- height: 18px;
50
- border: 1px solid var(--pf-form-input-border-color);
51
- border-radius: 100%;
52
- background: var(--pf-form-input-background-color);
53
- }
54
- [type='radio']:checked + label:after,
55
- [type='radio']:not(:checked) + label:after {
56
- content: '';
57
- width: 12px;
58
- height: 12px;
59
- background: var(--pf-radio-check-color);
60
- position: absolute;
61
- top: 4px;
62
- left: 4px;
63
- border-radius: 100%;
64
- -webkit-transition: all 0.2s ease;
65
- transition: all 0.2s ease;
66
- }
67
- [type='radio']:not(:checked) + label:after {
68
- opacity: 0;
69
- -webkit-transform: scale(0);
70
- transform: scale(0);
71
- }
72
- [type='radio']:checked + label:after {
73
- opacity: 1;
74
- -webkit-transform: scale(1);
75
- transform: scale(1);
76
- }
77
- [type='radio']:disabled,
78
- [type='radio']:disabled + label {
79
- cursor: not-allowed;
80
- }
15
+ .radio-wrapper {
16
+ display: flex;
17
+ margin-bottom: var(--pf-margin-2);
18
+ align-items: center;
19
+ }
20
+ .radio-input {
21
+ margin: 0;
22
+ margin-right: var(--pf-margin-2);
23
+ cursor: pointer;
24
+ }
25
+ .radio-input-label {
26
+ cursor: pointer;
27
+ font-size: var(--pf-font-size-form-label);
28
+ }
29
+ [type='radio']:checked,
30
+ [type='radio']:not(:checked) {
31
+ position: absolute;
32
+ left: -9999px;
33
+ }
34
+ [type='radio']:checked + label,
35
+ [type='radio']:not(:checked) + label {
36
+ position: relative;
37
+ padding-left: var(--pf-padding-7);
38
+ cursor: pointer;
39
+ line-height: 20px;
40
+ display: inline-block;
41
+ }
42
+ [type='radio']:checked + label:before,
43
+ [type='radio']:not(:checked) + label:before {
44
+ content: '';
45
+ position: absolute;
46
+ left: 0;
47
+ top: 0;
48
+ width: 18px;
49
+ height: 18px;
50
+ border: 1px solid var(--pf-form-input-border-color);
51
+ border-radius: 100%;
52
+ background: var(--pf-form-input-background-color);
53
+ }
54
+ [type='radio']:checked + label:after,
55
+ [type='radio']:not(:checked) + label:after {
56
+ content: '';
57
+ width: 12px;
58
+ height: 12px;
59
+ background: var(--pf-radio-check-color);
60
+ position: absolute;
61
+ top: 4px;
62
+ left: 4px;
63
+ border-radius: 100%;
64
+ -webkit-transition: all 0.2s ease;
65
+ transition: all 0.2s ease;
66
+ }
67
+ [type='radio']:not(:checked) + label:after {
68
+ opacity: 0;
69
+ -webkit-transform: scale(0);
70
+ transform: scale(0);
71
+ }
72
+ [type='radio']:checked + label:after {
73
+ opacity: 1;
74
+ -webkit-transform: scale(1);
75
+ transform: scale(1);
76
+ }
77
+ [type='radio']:disabled,
78
+ [type='radio']:disabled + label {
79
+ cursor: not-allowed;
80
+ }
81
81
 
82
- [type='radio']:disabled + label {
83
- color: var(--pf-radio-disabled-color);
84
- opacity: 0.5;
85
- }
82
+ [type='radio']:disabled + label {
83
+ color: var(--pf-radio-disabled-color);
84
+ opacity: 0.5;
85
+ }
86
86
 
87
- [type='radio']:disabled + label:before {
88
- border-color: var(--pf-radio-disabled-color);
89
- }
87
+ [type='radio']:disabled + label:before {
88
+ border-color: var(--pf-radio-disabled-color);
89
+ }
90
90
 
91
- [type='radio']:disabled + label:after {
92
- background: var(--pf-radio-disabled-color);
93
- }
91
+ [type='radio']:disabled + label:after {
92
+ background: var(--pf-radio-disabled-color);
94
93
  }
package/src/components/forms/textarea/styles/Textarea.scss CHANGED
@@ -21,22 +21,17 @@
21
21
  }
22
22
  }
23
23
 
24
- .form-control {
25
- .form-errors {
26
- list-style: none;
27
- padding: 0;
28
- margin: 0;
29
- margin-top: var(--pf-margin-2);
30
- margin-bottom: var(--pf-margin-2);
31
- color: var(--pf-error-color);
32
- }
33
- .help-text {
34
- margin-top: var(--pf-margin-2);
35
- margin-bottom: var(--pf-margin-2);
36
- color: var(--pf-form-input-help-color);
37
- font-size: var(--pf-font-size-subtitle2);
38
- }
39
- .form-label {
40
- margin-bottom: var(--pf-margin-2);
41
- }
24
+ .form-errors {
25
+ list-style: none;
26
+ padding: 0;
27
+ margin: 0;
28
+ margin-top: var(--pf-margin-2);
29
+ margin-bottom: var(--pf-margin-2);
30
+ color: var(--pf-error-color);
31
+ }
32
+ .help-text {
33
+ margin-top: var(--pf-margin-2);
34
+ margin-bottom: var(--pf-margin-2);
35
+ color: var(--pf-form-input-help-color);
36
+ font-size: var(--pf-font-size-subtitle2);
42
37
  }
package/src/components/forms/toggle/styles/Toggle.scss CHANGED
@@ -70,4 +70,5 @@
70
70
  .toggle-label {
71
71
  cursor: pointer;
72
72
  margin-left: var(--pf-margin-2);
73
+ font-size: var(--pf-font-size-form-label);
73
74
  }
package/src/components/pagination/styles/Pagination.scss CHANGED
@@ -1,9 +1,3 @@
1
- .pagination {
2
- .form-control {
3
- margin-bottom: 0;
4
- }
5
- }
6
-
7
1
  .pagination__current-page {
8
2
  max-width: 50px;
9
3
  }
package/src/styles/globals.scss CHANGED
@@ -14,13 +14,13 @@
14
14
  // ***********************************************************************************************************************************
15
15
  --pf-font-color: var(--pf-gray-color);
16
16
  --pf-font-color-emphasis: var(--pf-gray-color-800);
17
- --pf-font-color-light: var(--pf-gray-color-400);
18
- --pf-font-color-light-header: var(--pf-primary-color-100);
17
+ --pf-font-color-light: var(--pf-gray-color-700);
18
+ --pf-font-color-light-header: var(--pf-gray-color-600);
19
19
 
20
20
  // Links
21
21
  // ***********************************************************************************************************************************
22
- --pf-link-color: var(--pf-primary-color);
23
- --pf-active-link-color: var(--pf-primary-color-600);
22
+ --pf-link-color: var(--pf-secondary-color);
23
+ --pf-active-link-color: var(--pf-secondary-color-300);
24
24
  }
25
25
 
26
26
  :root [data-theme='dark'],
package/src/styles/variables/_typography.scss CHANGED
@@ -16,6 +16,7 @@
16
16
  --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
17
17
  --pf-font-size-button: var(--pf-font-size-base);
18
18
  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
19
+ --pf-font-size-form-label: var(--pf-font-size-body);
19
20
 
20
21
  // Weights
21
22
  --pf-font-weight-thin: 100;