agroptima-design-system 1.2.40 → 1.2.41

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 (28) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/Alert/Alert.scss +3 -2
  3. package/src/atoms/Badge.scss +7 -6
  4. package/src/atoms/Button/Button.scss +13 -12
  5. package/src/atoms/Button/FloatingButton.scss +2 -1
  6. package/src/atoms/Card/Card.scss +4 -3
  7. package/src/atoms/CardMenu/CardMenu.scss +8 -7
  8. package/src/atoms/CardsTable/CardsTable.scss +7 -6
  9. package/src/atoms/CheckableTag/CheckableTag.scss +4 -3
  10. package/src/atoms/CheckboxWithDivider/CheckboxWithDivider.scss +1 -1
  11. package/src/atoms/Collapsible/Collapsible.scss +4 -3
  12. package/src/atoms/Divider.scss +1 -1
  13. package/src/atoms/Drawer.scss +2 -1
  14. package/src/atoms/Form/Actions.scss +2 -1
  15. package/src/atoms/Input.scss +7 -6
  16. package/src/atoms/InputWithSelect/InputWithSelect.scss +3 -2
  17. package/src/atoms/Modal/Modal.scss +1 -1
  18. package/src/atoms/Notification/NotificationCenter.scss +1 -1
  19. package/src/atoms/Pagination/Pagination.scss +7 -6
  20. package/src/atoms/QuantitySelector.scss +2 -1
  21. package/src/atoms/RadioGroup/RadioGroup.scss +7 -6
  22. package/src/atoms/Select/Select.scss +5 -4
  23. package/src/atoms/Switch.scss +3 -2
  24. package/src/atoms/TabMenu/TabMenu.scss +3 -2
  25. package/src/atoms/Timeline/Timeline.scss +5 -4
  26. package/src/generic/_helpers.scss +1 -1
  27. package/src/settings/_borders.scss +12 -1
  28. package/src/stories/Changelog.mdx +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "1.2.40",
3
+ "version": "1.2.41",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/Alert/Alert.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/content' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/depth';
4
5
 
@@ -77,7 +78,7 @@
77
78
  }
78
79
 
79
80
  &.info {
80
- border: 1px solid var(--info-color-600);
81
+ border: borders.$border-line-info;
81
82
  background: var(--info-color-50);
82
83
  }
83
84
 
@@ -92,7 +93,7 @@
92
93
  }
93
94
 
94
95
  &.error {
95
- border: 1px solid var(--error-color-1000);
96
+ border: borders.$border-line-error;
96
97
  background: var(--error-color-50);
97
98
  }
98
99
 
package/src/atoms/Badge.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../settings/typography/content' as typography;
2
+ @use '../settings/borders';
2
3
  @use '../settings/config';
3
4
  @use '../settings/depth';
4
5
  @use '../settings/mixins';
@@ -8,7 +9,7 @@
8
9
  justify-content: center;
9
10
  align-items: center;
10
11
  padding: 0 config.$space-2x 0.063rem config.$space-2x;
11
- border: 1px solid transparent;
12
+ border: borders.$border-line-transparent;
12
13
  border-radius: config.$corner-radius-xxl;
13
14
  width: fit-content;
14
15
  text-align: center;
@@ -69,30 +70,30 @@
69
70
  &.warning-outlined {
70
71
  background: var(--warning-color-50);
71
72
  color: var(--neutral-color-1000);
72
- border: 1px solid var(--warning-color-1000);
73
+ border: borders.$border-line-warning;
73
74
  }
74
75
 
75
76
  &.error-outlined {
76
77
  background: var(--error-color-50);
77
78
  color: var(--neutral-color-1000);
78
- border: 1px solid var(--error-color-1000);
79
+ border: borders.$border-line-error;
79
80
  }
80
81
 
81
82
  &.neutral-outlined {
82
83
  background: var(--neutral-color-50);
83
84
  color: var(--neutral-color-1000);
84
- border: 1px solid var(--neutral-color-600);
85
+ border: borders.$border-line-default;
85
86
  }
86
87
 
87
88
  &.primary {
88
89
  background: var(--primary-color-1000);
89
- border: 1px solid var(--primary-color-1000);
90
+ border: borders.$border-line-primary-active;
90
91
  color: var(--neutral-white);
91
92
  }
92
93
 
93
94
  &.primary-outlined {
94
95
  background: var(--primary-color-50);
95
- border: 1px solid var(--primary-color-1000);
96
+ border: borders.$border-line-primary-active;
96
97
  color: var(--neutral-color-1000);
97
98
  }
98
99
 
package/src/atoms/Button/Button.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/content' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
 
4
5
  @mixin button-style($main-color, $secondary-color, $hover-color) {
@@ -33,7 +34,7 @@
33
34
  padding: config.$space-2x config.$space-3x;
34
35
  border-radius: config.$corner-radius-m;
35
36
  text-decoration: none;
36
- border: 1px solid transparent;
37
+ border: borders.$border-line-transparent;
37
38
 
38
39
  > .icon {
39
40
  margin: 6px 2px;
@@ -48,7 +49,7 @@
48
49
  }
49
50
 
50
51
  &.primary-outlined {
51
- border: 1px solid var(--primary-color-600);
52
+ border: borders.$border-line-primary;
52
53
  @include button-style(
53
54
  var(--neutral-white),
54
55
  var(--primary-color-600),
@@ -65,7 +66,7 @@
65
66
 
66
67
  &:not(:disabled):hover,
67
68
  &:not(:disabled):active {
68
- border: 1px solid var(--primary-color-600);
69
+ border: borders.$border-line-primary;
69
70
  }
70
71
  }
71
72
 
@@ -104,7 +105,7 @@
104
105
  }
105
106
 
106
107
  &.error-outlined {
107
- border: 1px solid var(--error-color-600);
108
+ border: borders.$border-line-error-outlined;
108
109
  @include button-style(
109
110
  var(--neutral-white),
110
111
  var(--error-color-600),
@@ -121,7 +122,7 @@
121
122
 
122
123
  &:not(:disabled):hover,
123
124
  &:not(:disabled):active {
124
- border: 1px solid var(--error-color-600);
125
+ border: borders.$border-line-error-outlined;
125
126
  }
126
127
  }
127
128
 
@@ -195,7 +196,7 @@
195
196
  }
196
197
 
197
198
  &.warning-outlined {
198
- border: 1px solid var(--warning-color-1000);
199
+ border: borders.$border-line-warning;
199
200
  @include button-style(
200
201
  var(--neutral-white),
201
202
  var(--neutral-color-900),
@@ -212,7 +213,7 @@
212
213
 
213
214
  &:not(:disabled):hover,
214
215
  &:not(:disabled):active {
215
- border: 1px solid var(--warning-color-1000);
216
+ border: borders.$border-line-warning;
216
217
  }
217
218
  }
218
219
 
@@ -225,7 +226,7 @@
225
226
  }
226
227
 
227
228
  &.info-outlined {
228
- border: 1px solid var(--info-color-600);
229
+ border: borders.$border-line-info;
229
230
  @include button-style(
230
231
  var(--neutral-white),
231
232
  var(--info-color-600),
@@ -242,7 +243,7 @@
242
243
 
243
244
  &:not(:disabled):hover,
244
245
  &:not(:disabled):active {
245
- border: 1px solid var(--info-color-600);
246
+ border: borders.$border-line-info;
246
247
  }
247
248
  }
248
249
 
@@ -255,7 +256,7 @@
255
256
  }
256
257
 
257
258
  &.neutral-outlined {
258
- border: 1px solid var(--neutral-color-100);
259
+ border: borders.$border-line-neutral;
259
260
  @include button-style(
260
261
  var(--neutral-white),
261
262
  var(--neutral-color-1000),
@@ -272,7 +273,7 @@
272
273
 
273
274
  &:not(:disabled):hover,
274
275
  &:not(:disabled):active {
275
- border: 1px solid var(--neutral-color-100);
276
+ border: borders.$border-line-neutral;
276
277
  }
277
278
  }
278
279
 
@@ -309,7 +310,7 @@
309
310
  &.neutral-outlined {
310
311
  &:disabled {
311
312
  background: var(--neutral-color-50);
312
- border: 1px solid var(--neutral-color-400);
313
+ border: borders.$border-line-disabled;
313
314
  }
314
315
  }
315
316
  }
package/src/atoms/Button/FloatingButton.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use '../../settings/borders';
1
2
  @use '../../settings/config';
2
3
  @use '../../settings/depth';
3
4
 
@@ -12,7 +13,7 @@
12
13
  padding: config.$space-5x;
13
14
  border-radius: config.$corner-radius-m;
14
15
  text-decoration: none;
15
- border: 1px solid transparent;
16
+ border: borders.$border-line-transparent;
16
17
  z-index: depth.$z-floating-button;
17
18
  position: fixed;
18
19
  bottom: config.$space-3x;
package/src/atoms/Card/Card.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/content' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/breakpoints';
4
5
 
@@ -70,7 +71,7 @@ a.card {
70
71
  &.primary {
71
72
  @include typography.body-regular-primary;
72
73
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
73
- border: 1px solid transparent;
74
+ border: borders.$border-line-transparent;
74
75
 
75
76
  &.disabled {
76
77
  @include typography.body-regular-disabled;
@@ -82,12 +83,12 @@ a.card {
82
83
  }
83
84
 
84
85
  &.active {
85
- border: 1px solid var(--primary-color-1000);
86
+ border: borders.$border-line-primary-active;
86
87
  box-shadow: none;
87
88
  }
88
89
 
89
90
  &.error {
90
- border: 1px solid var(--error-color-600);
91
+ border: borders.$border-line-error-outlined;
91
92
  background-color: var(--error-color-50);
92
93
  box-shadow: none;
93
94
  }
package/src/atoms/CardMenu/CardMenu.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/content' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/depth';
4
5
 
@@ -56,23 +57,23 @@
56
57
 
57
58
  &.primary {
58
59
  background: var(--neutral-white);
59
- border-top: 1px solid transparent;
60
- border-bottom: 1px solid var(--neutral-color-200);
60
+ border-top: borders.$border-line-transparent;
61
+ border-bottom: borders.$border-line-separator;
61
62
  &:first-child {
62
- border-top: 1px solid var(--neutral-color-200);
63
+ border-top: borders.$border-line-separator;
63
64
  }
64
65
  &:has(+ .active) {
65
66
  // Remove border-bottom if next sibling is active
66
- border-bottom: 1px solid transparent;
67
+ border-bottom: borders.$border-line-transparent;
67
68
  }
68
69
  &.active {
69
70
  background-color: transparent;
70
- border-top: 1px solid var(--primary-color-600);
71
- border-bottom: 1px solid var(--primary-color-600);
71
+ border-top: borders.$border-line-primary;
72
+ border-bottom: borders.$border-line-primary;
72
73
  }
73
74
 
74
75
  &.error {
75
- border: 1px solid var(--error-color-1000);
76
+ border: borders.$border-line-error;
76
77
  background-color: var(--error-color-50);
77
78
  }
78
79
 
package/src/atoms/CardsTable/CardsTable.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use '../../settings/mixins';
2
2
  @use '../../settings/depth';
3
3
  @use '../../settings/typography/cards_table' as typography;
4
+ @use '../../settings/borders';
4
5
  @use '../../settings/config';
5
6
  @use '../../settings/breakpoints';
6
7
 
@@ -101,7 +102,7 @@
101
102
  }
102
103
 
103
104
  .cards-table-head.cards-table-row {
104
- border: 1px solid transparent;
105
+ border: borders.$border-line-transparent;
105
106
  .cards-table-cell {
106
107
  @include typography.cards-table-list-text;
107
108
  }
@@ -123,13 +124,13 @@
123
124
  }
124
125
 
125
126
  .cards-table-row > .cards-table-cell {
126
- border-top: 1px solid transparent;
127
- border-bottom: 1px solid transparent;
127
+ border-top: borders.$border-line-transparent;
128
+ border-bottom: borders.$border-line-transparent;
128
129
  &:first-child {
129
- border-left: 1px solid transparent;
130
+ border-left: borders.$border-line-transparent;
130
131
  }
131
132
  &:last-child {
132
- border-right: 1px solid transparent;
133
+ border-right: borders.$border-line-transparent;
133
134
  }
134
135
  }
135
136
 
@@ -197,7 +198,7 @@
197
198
 
198
199
  .cards-table-row.active {
199
200
  box-shadow: none;
200
- border: 1px solid var(--primary-color-1000);
201
+ border: borders.$border-line-primary-active;
201
202
  > .cards-table-cell {
202
203
  border-color: transparent !important;
203
204
  }
package/src/atoms/CheckableTag/CheckableTag.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/content' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/depth';
4
5
 
@@ -22,7 +23,7 @@
22
23
  color: var(--neutral-color-1000);
23
24
 
24
25
  border-radius: config.$corner-radius-m;
25
- border: 1px solid var(--neutral-color-200);
26
+ border: borders.$border-line-separator;
26
27
  background: var(--neutral-white);
27
28
 
28
29
  &:hover {
@@ -31,14 +32,14 @@
31
32
 
32
33
  &.checked {
33
34
  color: var(--neutral-white);
34
- border: 1px solid var(--primary-color-600);
35
+ border: borders.$border-line-primary;
35
36
  background: var(--primary-color-600);
36
37
  }
37
38
 
38
39
  &.disabled {
39
40
  color: var(--neutral-color-200);
40
41
 
41
- border: 1px solid var(--neutral-color-200);
42
+ border: borders.$border-line-separator;
42
43
  background: var(--neutral-color-50);
43
44
  }
44
45
  }
package/src/atoms/CheckboxWithDivider/CheckboxWithDivider.scss CHANGED
@@ -13,6 +13,6 @@
13
13
  }
14
14
 
15
15
  .line {
16
- border: borders.$divider-border-line;
16
+ border: borders.$border-line-separator;
17
17
  }
18
18
  }
package/src/atoms/Collapsible/Collapsible.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/content' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/depth';
4
5
  @use '../../settings/mixins';
@@ -57,7 +58,7 @@ details summary::-webkit-details-marker {
57
58
  &.disabled {
58
59
  > .collapsible-header {
59
60
  background: var(--neutral-color-50);
60
- border-bottom: 1px solid var(--neutral-color-200);
61
+ border-bottom: borders.$border-line-separator;
61
62
  color: var(--neutral-color-200);
62
63
  @include mixins.svg-color(var(--neutral-color-200));
63
64
  }
@@ -66,7 +67,7 @@ details summary::-webkit-details-marker {
66
67
  > .collapsible-header {
67
68
  color: var(--neutral-color-1000);
68
69
  background: transparent;
69
- border-bottom: 1px solid var(--neutral-color-200);
70
+ border-bottom: borders.$border-line-separator;
70
71
  @include mixins.svg-color(var(--primary-color-600));
71
72
 
72
73
  &:hover {
@@ -82,7 +83,7 @@ details summary::-webkit-details-marker {
82
83
 
83
84
  &.secondary > .collapsible-content {
84
85
  padding: config.$space-3x config.$space-4x config.$space-6x;
85
- border: 1px solid var(--neutral-color-200);
86
+ border: borders.$border-line-separator;
86
87
  border-top: none;
87
88
  border-bottom-left-radius: config.$corner-radius-m;
88
89
  border-bottom-right-radius: config.$corner-radius-m;
package/src/atoms/Divider.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  }
27
27
 
28
28
  .line {
29
- border: borders.$divider-border-line;
29
+ border: borders.$border-line-separator;
30
30
  }
31
31
 
32
32
  .icon {
package/src/atoms/Drawer.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../settings/typography/content' as typography;
2
+ @use '../settings/borders';
2
3
  @use '../settings/config';
3
4
  @use '../settings/depth';
4
5
  @use '../settings/breakpoints';
@@ -75,7 +76,7 @@
75
76
  .footer-actions {
76
77
  position: absolute;
77
78
  background-color: var(--neutral-white);
78
- border-top: 1px solid var(--neutral-color-200);
79
+ border-top: borders.$border-line-separator;
79
80
  flex-direction: row;
80
81
  justify-content: space-between;
81
82
  gap: config.$space-2x;
package/src/atoms/Form/Actions.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use '../../settings/borders';
1
2
  @use '../../settings/config';
2
3
  @use '../../settings/breakpoints';
3
4
 
@@ -20,7 +21,7 @@ $gap: config.$space-4x;
20
21
  @media only screen and (max-width: breakpoints.$large) {
21
22
  .footer-actions {
22
23
  background-color: var(--neutral-white);
23
- border-top: 1px solid var(--neutral-color-200);
24
+ border-top: borders.$border-line-separator;
24
25
  flex-direction: row;
25
26
  justify-content: space-between;
26
27
  gap: config.$space-2x;
package/src/atoms/Input.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../settings/typography/form' as typography;
2
+ @use '../settings/borders';
2
3
  @use '../settings/config';
3
4
  @use './Button/Button';
4
5
  @use '../settings/mixins';
@@ -70,23 +71,23 @@
70
71
 
71
72
  &.primary {
72
73
  &.invalid .input-container {
73
- border: 1px solid var(--error-color-1000);
74
+ border: borders.$border-line-error;
74
75
  }
75
76
 
76
77
  .input-container {
77
78
  border-radius: config.$corner-radius-m;
78
- border: 1px solid var(--neutral-color-600);
79
+ border: borders.$border-line-default;
79
80
  background: var(--neutral-white);
80
81
 
81
82
  &:has(input:focus),
82
83
  &:has(textarea:focus) {
83
84
  outline: var(--primary-color-600);
84
- border: 1px solid var(--primary-color-600);
85
+ border: borders.$border-line-primary;
85
86
  }
86
87
 
87
88
  &:has(input:disabled),
88
89
  &:has(textarea:disabled) {
89
- border: 1px solid var(--neutral-color-400);
90
+ border: borders.$border-line-disabled;
90
91
  background: var(--neutral-color-50);
91
92
 
92
93
  input {
@@ -111,7 +112,7 @@
111
112
 
112
113
  &.file .input-container {
113
114
  padding: 0;
114
- border: transparent;
115
+ border: none;
115
116
 
116
117
  .file-icon {
117
118
  @include mixins.svg-color(var(--primary-color-600));
@@ -121,7 +122,7 @@
121
122
  }
122
123
 
123
124
  &:has(input:focus) {
124
- border: transparent;
125
+ border: none;
125
126
  }
126
127
 
127
128
  input {
package/src/atoms/InputWithSelect/InputWithSelect.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/form' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/depth';
4
5
  @use '../../settings/mixins';
@@ -19,7 +20,7 @@
19
20
  height: 100%;
20
21
  padding: config.$space-2x config.$space-3x;
21
22
  border: none;
22
- border-left: 1px solid var(--neutral-color-600);
23
+ border-left: borders.$border-line-default;
23
24
  border-top-right-radius: config.$corner-radius-m;
24
25
  border-bottom-right-radius: config.$corner-radius-m;
25
26
  background: var(--neutral-color-50);
@@ -34,7 +35,7 @@
34
35
  }
35
36
 
36
37
  &:disabled {
37
- border-left: 1px solid var(--neutral-color-400);
38
+ border-left: borders.$border-line-disabled;
38
39
  color: var(--neutral-color-400);
39
40
  cursor: default;
40
41
  }
package/src/atoms/Modal/Modal.scss CHANGED
@@ -27,7 +27,7 @@ $backdrop-background-color: var(--neutral-color-900);
27
27
  overflow-x: hidden;
28
28
  overflow-y: auto;
29
29
  outline: 0;
30
- border: 0;
30
+ border: none;
31
31
  background-color: transparent;
32
32
  margin: 0 auto;
33
33
  max-width: 100%;
package/src/atoms/Notification/NotificationCenter.scss CHANGED
@@ -62,7 +62,7 @@
62
62
  > .button {
63
63
  @include typography.footnote-primary;
64
64
  color: var(--primary-color-600);
65
- border: 0;
65
+ border: none;
66
66
  background-color: transparent;
67
67
  padding: 0;
68
68
  white-space: normal;
package/src/atoms/Pagination/Pagination.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use '../../settings/typography/form' as form-typography;
2
2
  @use '../../settings/typography/content' as typography;
3
+ @use '../../settings/borders';
3
4
  @use '../../settings/config';
4
5
 
5
6
  .pagination {
@@ -31,7 +32,7 @@
31
32
  }
32
33
 
33
34
  &.primary {
34
- border: 1px solid var(--neutral-color-600);
35
+ border: borders.$border-line-default;
35
36
  background: var(--neutral-white);
36
37
  @include typography.body-regular-primary;
37
38
  > .icon {
@@ -44,20 +45,20 @@
44
45
  }
45
46
 
46
47
  &:not(:disabled):hover {
47
- border: 1px solid var(--primary-color-600);
48
+ border: borders.$border-line-primary;
48
49
  background: var(--primary-color-50);
49
50
  color: var(--primary-color-600);
50
51
  }
51
52
 
52
53
  &:not(:disabled).selected {
53
- border: 1px solid var(--primary-color-600);
54
+ border: borders.$border-line-primary;
54
55
  color: var(--primary-color-600);
55
56
  }
56
57
 
57
58
  &:disabled,
58
59
  &.disabled {
59
60
  pointer-events: none;
60
- border: 1px solid var(--neutral-color-400);
61
+ border: borders.$border-line-disabled;
61
62
  background: var(--neutral-color-50);
62
63
  color: var(--neutral-color-400);
63
64
  > .icon {
@@ -84,12 +85,12 @@
84
85
  }
85
86
 
86
87
  &.primary {
87
- border: 1px solid transparent;
88
+ border: borders.$border-line-transparent;
88
89
  background: none;
89
90
 
90
91
  &:not(:disabled).selected,
91
92
  &:not(:disabled):hover {
92
- border: 1px solid var(--primary-color-600);
93
+ border: borders.$border-line-primary;
93
94
  color: var(--primary-color-600);
94
95
  }
95
96
  }
package/src/atoms/QuantitySelector.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use '../settings/typography/form' as form-typography;
2
2
  @use '../settings/typography/content' as typography;
3
+ @use '../settings/borders';
3
4
  @use '../settings/config';
4
5
 
5
6
  .quantity-selector-group {
@@ -42,7 +43,7 @@
42
43
  height: 42px;
43
44
 
44
45
  &:disabled {
45
- border: 1px solid var(--neutral-color-400);
46
+ border: borders.$border-line-disabled;
46
47
  color: var(--neutral-color-400);
47
48
  }
48
49
  }
package/src/atoms/RadioGroup/RadioGroup.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/form' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
 
4
5
  .radio-group {
@@ -30,7 +31,7 @@
30
31
  width: 16px;
31
32
  height: 16px;
32
33
  background: #fff;
33
- border: 1px solid var(--neutral-color-600);
34
+ border: borders.$border-line-default;
34
35
  border-radius: 50%;
35
36
  }
36
37
 
@@ -49,19 +50,19 @@
49
50
  }
50
51
 
51
52
  &:after {
52
- border: 1px solid var(--primary-color-600);
53
+ border: borders.$border-line-primary;
53
54
  }
54
55
  }
55
56
 
56
57
  &:hover {
57
58
  &:after {
58
- border: 1px solid var(--primary-color-600);
59
+ border: borders.$border-line-primary;
59
60
  }
60
61
  }
61
62
 
62
63
  &:disabled {
63
64
  &:after {
64
- border: 1px solid var(--neutral-color-400);
65
+ border: borders.$border-line-disabled;
65
66
  }
66
67
 
67
68
  &:checked {
@@ -70,13 +71,13 @@
70
71
  }
71
72
 
72
73
  &:after {
73
- border: 1px solid var(--neutral-color-400);
74
+ border: borders.$border-line-disabled;
74
75
  }
75
76
  }
76
77
 
77
78
  &:hover {
78
79
  &:after {
79
- border: 1px solid var(--neutral-color-400);
80
+ border: borders.$border-line-disabled;
80
81
  }
81
82
  }
82
83
  }
package/src/atoms/Select/Select.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/form' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/depth';
4
5
  @use '../../settings/mixins';
@@ -40,7 +41,7 @@ $elements-space: config.$space-2x;
40
41
 
41
42
  &.primary {
42
43
  .select-container.disabled {
43
- border: 1px solid var(--neutral-color-400);
44
+ border: borders.$border-line-disabled;
44
45
  background: var(--neutral-color-50);
45
46
  @include mixins.icon-color(var(--neutral-color-400));
46
47
 
@@ -51,7 +52,7 @@ $elements-space: config.$space-2x;
51
52
 
52
53
  &.invalid {
53
54
  .select-container {
54
- border: 1px solid var(--error-color-1000);
55
+ border: borders.$border-line-error;
55
56
  }
56
57
  }
57
58
 
@@ -61,12 +62,12 @@ $elements-space: config.$space-2x;
61
62
 
62
63
  .select-container {
63
64
  border-radius: config.$corner-radius-m;
64
- border: 1px solid var(--neutral-color-600);
65
+ border: borders.$border-line-default;
65
66
  background: var(--neutral-white);
66
67
  @include mixins.icon-color(var(--primary-color-600));
67
68
 
68
69
  &:has(.select:focus) {
69
- border: 1px solid var(--primary-color-600);
70
+ border: borders.$border-line-primary;
70
71
  }
71
72
  }
72
73
 
package/src/atoms/Switch.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../settings/typography/form' as typography;
2
+ @use '../settings/borders';
2
3
  @use '../settings/config';
3
4
 
4
5
  .switch-group {
@@ -38,7 +39,7 @@
38
39
  }
39
40
 
40
41
  &.primary:checked {
41
- border: 1px solid var(--primary-color-600);
42
+ border: borders.$border-line-primary;
42
43
  }
43
44
 
44
45
  &.primary:checked::before {
@@ -47,7 +48,7 @@
47
48
 
48
49
  &.primary:disabled {
49
50
  background-color: var(--neutral-color-50);
50
- border: 1px solid var(--neutral-color-400);
51
+ border: borders.$border-line-disabled;
51
52
  }
52
53
 
53
54
  &.primary:checked:disabled {
package/src/atoms/TabMenu/TabMenu.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/content' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/depth';
4
5
 
@@ -32,7 +33,7 @@
32
33
 
33
34
  &.primary {
34
35
  @include typography.body-regular-primary;
35
- border-bottom: 1px solid var(--neutral-color-200);
36
+ border-bottom: borders.$border-line-separator;
36
37
 
37
38
  &:hover {
38
39
  color: var(--primary-color-600);
@@ -46,7 +47,7 @@
46
47
 
47
48
  &.disabled {
48
49
  color: var(--neutral-color-400);
49
- border-bottom: 1px solid var(--neutral-color-200);
50
+ border-bottom: borders.$border-line-separator;
50
51
  }
51
52
  }
52
53
  }
package/src/atoms/Timeline/Timeline.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../settings/typography/content' as typography;
2
+ @use '../../settings/borders';
2
3
  @use '../../settings/config';
3
4
  @use '../../settings/mixins';
4
5
  @use '../../settings/depth';
@@ -90,7 +91,7 @@
90
91
  display: flex;
91
92
  justify-content: space-between;
92
93
  gap: config.$space-2x;
93
- border: 0;
94
+ border: none;
94
95
  background-color: transparent;
95
96
  padding: 0;
96
97
 
@@ -107,7 +108,7 @@
107
108
  &:hover {
108
109
  .icon {
109
110
  &:not(:disabled) {
110
- border: 1px solid var(--primary-color-600);
111
+ border: borders.$border-line-primary;
111
112
  background: var(--primary-color-50);
112
113
  color: var(--primary-color-600);
113
114
  }
@@ -121,7 +122,7 @@
121
122
  }
122
123
 
123
124
  .icon {
124
- border: 1px solid var(--neutral-color-600);
125
+ border: borders.$border-line-default;
125
126
  background: var(--neutral-white);
126
127
  @include typography.body-regular-primary;
127
128
 
@@ -135,7 +136,7 @@
135
136
  &:disabled,
136
137
  &.disabled {
137
138
  pointer-events: none;
138
- border: 1px solid var(--neutral-color-400);
139
+ border: borders.$border-line-disabled;
139
140
  background: var(--neutral-color-50);
140
141
  color: var(--neutral-color-400);
141
142
  > .icon {
package/src/generic/_helpers.scss CHANGED
@@ -65,7 +65,7 @@
65
65
  overflow: hidden;
66
66
  position: absolute;
67
67
  white-space: nowrap;
68
- border: 0;
68
+ border: none;
69
69
  padding: 0;
70
70
  margin: -1px;
71
71
  overflow-wrap: normal;
package/src/settings/_borders.scss CHANGED
@@ -1 +1,12 @@
1
- $divider-border-line: 1px solid var(--neutral-color-200);
1
+ $border-line-primary: 1px solid var(--primary-color-600);
2
+ $border-line-disabled: 1px solid var(--neutral-color-400);
3
+ $border-line-default: 1px solid var(--neutral-color-600);
4
+ $border-line-transparent: 1px solid transparent;
5
+ $border-line-error: 1px solid var(--error-color-1000);
6
+ $border-line-primary-active: 1px solid var(--primary-color-1000);
7
+ $border-line-warning: 1px solid var(--warning-color-1000);
8
+ $border-line-info: 1px solid var(--info-color-600);
9
+ $border-line-error-outlined: 1px solid var(--error-color-600);
10
+ $border-line-neutral: 1px solid var(--neutral-color-100);
11
+ // Also used for CheckableTag's own border, not just section separators.
12
+ $border-line-separator: 1px solid var(--neutral-color-200);
package/src/stories/Changelog.mdx CHANGED
@@ -4,6 +4,11 @@ import { Meta } from "@storybook/addon-docs/blocks";
4
4
 
5
5
  # Changelog
6
6
 
7
+ ## 1.2.41
8
+
9
+ * Consolidate repeated border values into variables in `settings/_borders.scss`
10
+
11
+
7
12
  ## 1.2.40
8
13
 
9
14
  * Add `desktopOnly` prop to CardsTableHeader