@aloudata/aloudata-design 2.18.3 → 2.19.0-beta.1

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 (117) hide show
  1. package/dist/AldSelect/style/color.less +25 -16
  2. package/dist/AldSelect/style/index.less +2 -2
  3. package/dist/Avatar/component/Avatar/index.js +8 -19
  4. package/dist/Avatar/component/Avatar/type.js +3 -3
  5. package/dist/Avatar/style/index.less +10 -3
  6. package/dist/Badge/index.js +1 -27
  7. package/dist/Badge/style/index.less +27 -1
  8. package/dist/Button/style/index.less +1 -0
  9. package/dist/Button/style/type.less +5 -5
  10. package/dist/Button/style/variables.less +70 -203
  11. package/dist/Checkbox/style/index.less +20 -37
  12. package/dist/Collapse/index.js +2 -2
  13. package/dist/Collapse/style/index.less +7 -7
  14. package/dist/ColorPicker/index.js +3 -3
  15. package/dist/ColorPicker/style/complex.less +8 -9
  16. package/dist/ColorPicker/style/index.less +7 -8
  17. package/dist/DataPreviewTable/components/Body/Cell.js +1 -1
  18. package/dist/DataPreviewTable/style/index.less +9 -9
  19. package/dist/DatePicker/style/index.less +3 -3
  20. package/dist/Divider/style/index.less +1 -1
  21. package/dist/DoubleCircleIcon/style/index.less +12 -12
  22. package/dist/Empty/style/index.less +3 -3
  23. package/dist/Form/style/index.less +4 -4
  24. package/dist/HighlightText/style/index.less +1 -1
  25. package/dist/Icon/components/CancelledCircleFill.d.ts +1 -2
  26. package/dist/Icon/components/CancelledCircleFill.js +1 -1
  27. package/dist/Icon/components/Ellipsis.d.ts +1 -2
  28. package/dist/Icon/components/Ellipsis.js +1 -1
  29. package/dist/Icon/components/LoadingDuotone.d.ts +1 -2
  30. package/dist/Icon/components/LoadingDuotone.js +1 -1
  31. package/dist/Icon/components/SortAscendingOrderColor.d.ts +1 -2
  32. package/dist/Icon/components/SortAscendingOrderColor.js +1 -1
  33. package/dist/Icon/components/SortColor.d.ts +1 -2
  34. package/dist/Icon/components/SortColor.js +1 -1
  35. package/dist/Icon/components/SortDescendingOrderColor.d.ts +1 -2
  36. package/dist/Icon/components/SortDescendingOrderColor.js +1 -1
  37. package/dist/Icon/svg/Cancelled-Circle-fill.svg +2 -1
  38. package/dist/Icon/svg/Loading-duotone.svg +3 -2
  39. package/dist/Icon/svg/Sort-Ascending-order-Color.svg +2 -1
  40. package/dist/Icon/svg/Sort-Color.svg +3 -2
  41. package/dist/Icon/svg/Sort-Descending-order-Color.svg +2 -1
  42. package/dist/Icon/svg/ellipsis.svg +2 -1
  43. package/dist/IconButton/style/index.less +17 -17
  44. package/dist/Input/components/Input/index.js +1 -1
  45. package/dist/Input/components/TextArea/index.js +1 -1
  46. package/dist/Input/style/index.less +1 -1
  47. package/dist/Input/style/size.less +11 -11
  48. package/dist/Input/style/status.less +21 -36
  49. package/dist/InputNumber/style/index.less +22 -25
  50. package/dist/InputSearch/style/index.less +8 -8
  51. package/dist/List/style/index.less +11 -11
  52. package/dist/LogicTree/style/DisplayLogicItem.less +3 -3
  53. package/dist/LogicTree/style/LoginItem.less +13 -13
  54. package/dist/MemberPicker/style/index.less +28 -30
  55. package/dist/Menu/style/index.less +22 -21
  56. package/dist/Modal/index.js +12 -12
  57. package/dist/Modal/style/modal.less +17 -18
  58. package/dist/Modal/style/modalConfirm.less +11 -26
  59. package/dist/Modal/style/polyfill/index.less +3 -3
  60. package/dist/Pagination/style/index.less +3 -4
  61. package/dist/Popconfirm/index.js +2 -2
  62. package/dist/Popconfirm/style/index.less +6 -6
  63. package/dist/Popover/style/index.less +8 -8
  64. package/dist/Progress/style/index.less +2 -5
  65. package/dist/Radio/style/index.less +39 -49
  66. package/dist/RenameInput/style/index.less +3 -3
  67. package/dist/Result/index.js +8 -7
  68. package/dist/Result/style/index.less +4 -4
  69. package/dist/ScrollArea/style/index.less +1 -1
  70. package/dist/Select/index.js +1 -1
  71. package/dist/Select/style/emptyShowAll.less +1 -1
  72. package/dist/Select/style/index.less +5 -5
  73. package/dist/Select/style/layout.less +1 -1
  74. package/dist/Select/style/option.less +7 -10
  75. package/dist/Select/style/selectDropdown.less +4 -4
  76. package/dist/Select/style/status.less +21 -24
  77. package/dist/Select/style/variables.less +3 -3
  78. package/dist/Skeleton/style/index.less +15 -15
  79. package/dist/Slider/style/index.less +56 -3
  80. package/dist/Spin/style/customIcon.less +2 -2
  81. package/dist/StatusLight/index.js +9 -24
  82. package/dist/StatusLight/style/index.less +58 -6
  83. package/dist/Steps/components/Step/index.js +4 -4
  84. package/dist/Steps/style/index.less +26 -22
  85. package/dist/Switch/style/index.less +1 -1
  86. package/dist/Switch/style/status.less +3 -3
  87. package/dist/Table/components/Header.js +6 -3
  88. package/dist/Table/style/index.less +18 -18
  89. package/dist/Tabs/style/index.less +9 -9
  90. package/dist/Tag/index.js +81 -21
  91. package/dist/Tag/style/index.less +3 -2
  92. package/dist/TextLink/style/type.less +16 -16
  93. package/dist/Tooltip/style/index.less +5 -5
  94. package/dist/Tree/Tree.js +2 -2
  95. package/dist/Tree/demo/basic/index.js +1 -1
  96. package/dist/Tree/style/checkbox.less +17 -27
  97. package/dist/Tree/style/index.less +4 -4
  98. package/dist/Tree/style/mixin.less +3 -3
  99. package/dist/Tree/style/reset.less +1 -1
  100. package/dist/Tree/style/var.less +19 -19
  101. package/dist/Tree/utils/iconUtil.js +1 -1
  102. package/dist/User/style/index.less +3 -3
  103. package/dist/ald.min.css +5 -1
  104. package/dist/message/index.js +4 -4
  105. package/dist/message/style/index.less +11 -14
  106. package/dist/notification/index.js +5 -5
  107. package/dist/notification/style/index.less +6 -7
  108. package/dist/style/components/toastify.css +27 -27
  109. package/dist/style/index.less +2 -2
  110. package/dist/style/themes/default/default.less +1 -1
  111. package/dist/style/themes/default/index.less +1 -1
  112. package/dist/style/themes/default/scrollBar.less +8 -4
  113. package/dist/style/themes/default/themeColor.module.less +178 -183
  114. package/dist/style/var/default.css +1156 -256
  115. package/package.json +2 -3
  116. package/dist/Avatar/component/Avatar/avatar.d.ts +0 -3
  117. package/dist/Avatar/component/Avatar/avatar.js +0 -23
@@ -7,14 +7,11 @@
7
7
  pointer-events: none;
8
8
 
9
9
  &-show-bg {
10
- background-color: var(
11
- --alias-colors-bg-accent-blue-subtle-default,
12
- #d4e7fd
13
- );
10
+ background-color: var(--interaction-neutral-subtle-normal);
14
11
  }
15
12
 
16
13
  &-inner {
17
- background-color: var(--alias-colors-icon-information, #2986f4);
14
+ background-color: var(--interaction-default-normal);
18
15
  border-radius: 2px 0 0;
19
16
  height: 100%;
20
17
  width: 0;
@@ -48,22 +48,19 @@
48
48
  .ald-radio-inner {
49
49
  position: relative;
50
50
  display: inline-block;
51
- width: 16px;
52
- height: 16px;
53
- border: 1px solid
54
- var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
55
- background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
51
+ width: 14px;
52
+ height: 14px;
53
+ border: 2px solid var(--interaction-border-neutral-normal);
54
+ background-color: var(--alias-colors-bg-skeleton-subtler);
56
55
  border-radius: 50%;
57
56
 
58
57
  &:hover {
59
- border: 1px solid
60
- var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af);
58
+ border: 2px solid var(--interaction-border-hover);
61
59
  }
62
60
 
63
61
  &:active {
64
- border: 1px solid
65
- var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
66
- background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
62
+ border: 2px solid var(--interaction-border-active);
63
+ background-color: var(--alias-colors-bg-skeleton-strong);
67
64
  }
68
65
  }
69
66
 
@@ -72,7 +69,7 @@
72
69
  display: flex;
73
70
  align-items: center;
74
71
  justify-content: center;
75
- color: #171717;
72
+ color: var(--alias-colors-text-default);
76
73
  font-weight: 400;
77
74
  font-size: 14px;
78
75
  line-height: 20px;
@@ -82,7 +79,7 @@
82
79
 
83
80
  // 绘制选中时的圆圈样式
84
81
  :not(.ald-radio-wrapper-indeterminate) > .ald-radio-checked > .ald-radio-inner {
85
- background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
82
+ background-color: var(--alias-colors-bg-selected-strong-default);
86
83
  border: 0;
87
84
  transform: background 0.5s ease;
88
85
 
@@ -92,23 +89,23 @@
92
89
  left: 50%;
93
90
  width: 5px;
94
91
  height: 5px;
95
- background-color: var(--alias-colors-icon-inverse-default, #fff);
92
+ background-color: var(--alias-colors-icon-inverse-default);
96
93
  border-radius: 50%;
97
94
  transform: translate(-50%, -50%);
98
95
  content: '';
99
96
  }
100
97
 
101
98
  &:hover {
102
- background-color: var(--alias-colors-bg-selected-strong-hover, #0f59b1);
99
+ background-color: var(--alias-colors-bg-selected-strong-hover);
103
100
  }
104
101
 
105
102
  &:active {
106
- background-color: var(--alias-colors-bg-selected-strong-press, #0b4385);
103
+ background-color: var(--alias-colors-bg-selected-strong-press);
107
104
  }
108
105
  }
109
106
  // 半选的样式
110
107
  .ald-radio-wrapper-indeterminate > .ald-radio > .ald-radio-inner[class] {
111
- background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
108
+ background-color: var(--alias-colors-bg-selected-strong-default);
112
109
  border: 0;
113
110
  transform: background 0.5s ease;
114
111
 
@@ -118,38 +115,35 @@
118
115
  left: 50%;
119
116
  width: 8.5px;
120
117
  height: 2px;
121
- background-color: var(--alias-colors-icon-inverse-default, #fff);
118
+ background-color: var(--alias-colors-icon-inverse-default);
122
119
  border-radius: 2px;
123
120
  transform: translate(-50%, -50%);
124
121
  content: '';
125
122
  }
126
123
 
127
124
  &:hover {
128
- background-color: var(--alias-colors-bg-selected-strong-hover, #0f59b1);
125
+ background-color: var(--alias-colors-bg-selected-strong-hover);
129
126
  }
130
127
 
131
128
  &:active {
132
- background-color: var(--alias-colors-bg-selected-strong-press, #0b4385);
129
+ background-color: var(--alias-colors-bg-selected-strong-press);
133
130
  }
134
131
  }
135
132
 
136
133
  // 禁用状态下的样式
137
134
  .ald-radio-disabled > .ald-radio-inner {
138
- background-color: var(
139
- --alias-colors-bg-disabled,
140
- rgba(0, 0, 0, 0.05)
141
- ) !important;
142
- border: 1px solid var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1));
135
+ background-color: var(--alias-colors-bg-disabled) !important;
136
+ border: 2px solid var(--alias-colors-border-disabled);
143
137
 
144
138
  &::after {
145
- background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
139
+ background-color: var(--alias-colors-bg-disabled);
146
140
  border: 0;
147
141
  }
148
142
  }
149
143
 
150
144
  .ald-radio-disabled.ald-radio-checked > .ald-radio-inner {
151
145
  border: 0;
152
- background: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
146
+ background: var(--alias-colors-bg-disabled);
153
147
 
154
148
  &::after {
155
149
  position: absolute;
@@ -157,7 +151,7 @@
157
151
  left: 50%;
158
152
  width: 5px;
159
153
  height: 5px;
160
- background: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
154
+ background: var(--alias-colors-icon-disabled);
161
155
  border-radius: 50%;
162
156
  transform: translate(-50%, -50%);
163
157
  content: '';
@@ -176,7 +170,7 @@
176
170
  position: relative;
177
171
 
178
172
  .ald-radio-label .ald-radio-desc {
179
- color: #171717;
173
+ color: var(--alias-colors-text-default);
180
174
  font-weight: 400;
181
175
  font-size: @font-size-middle;
182
176
  font-style: normal;
@@ -313,31 +307,27 @@
313
307
  align-items: center;
314
308
  justify-content: center;
315
309
  height: calc(100% - 4px);
316
- background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
310
+ background-color: var(--alias-colors-bg-skeleton-strong);
317
311
  cursor: pointer;
318
312
 
319
313
  // 选中样式
320
314
  &.ald-radio-wrapper-checked {
321
- background: var(--alias-colors-bg-skeleton-subtler, #fff);
322
- border: 1px solid
323
- var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
324
- border-radius: var(--alias-radius-75, 6px);
325
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
326
- 0 1px 2px 0 rgba(0, 0, 0, 0.06);
315
+ background: var(--alias-colors-bg-skeleton-subtler);
316
+ border: 1px solid var(--border-default);
317
+ border-radius: var(--alias-radius-75);
318
+ box-shadow: var(--elevation-bottom-bottom-sm);
327
319
  cursor: pointer;
328
320
 
329
321
  &:hover {
330
- border-radius: var(--alias-radius-75, 6px);
331
- border: 1px solid
332
- var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af);
333
- background: var(--alias-colors-bg-skeleton-subtler, #fff);
322
+ border-radius: var(--alias-radius-75);
323
+ border: 1px solid var(--border-neutral-strong);
324
+ background: var(--alias-colors-bg-skeleton-subtler);
334
325
  }
335
326
 
336
327
  &:active {
337
- border-radius: var(--alias-radius-75, 6px);
338
- border: 1px solid
339
- var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
340
- background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
328
+ border-radius: var(--alias-radius-75);
329
+ border: 1px solid var(--border-default);
330
+ background: var(--alias-colors-bg-skeleton-subtle);
341
331
  }
342
332
  }
343
333
 
@@ -404,7 +394,7 @@
404
394
  border-radius: @border-radius-middle;
405
395
 
406
396
  .ald-radio-icon-button-wrapper-filled {
407
- border-radius: var(--alias-radius-50, 4px) !important ;
397
+ border-radius: var(--alias-radius-50) !important ;
408
398
  }
409
399
 
410
400
  .ald-radio-label {
@@ -462,7 +452,7 @@
462
452
  }
463
453
 
464
454
  .ald-radio-icon-button-wrapper-filled {
465
- border-radius: var(--alias-radius-25, 2px) !important ;
455
+ border-radius: var(--alias-radius-25) !important ;
466
456
  }
467
457
 
468
458
  .ald-radio-label.ald-radio-button-wrapper-filled {
@@ -527,7 +517,7 @@
527
517
  border-radius: @border-radius-large;
528
518
 
529
519
  .ald-radio-icon-button-wrapper-filled {
530
- border-radius: var(--alias-radius-75, 6px) !important ;
520
+ border-radius: var(--alias-radius-75) !important ;
531
521
  }
532
522
 
533
523
  .ald-radio-label.ald-radio-button-wrapper-filled {
@@ -597,17 +587,17 @@
597
587
  .ald-radio-group-filled {
598
588
  display: flex;
599
589
  gap: 2px;
600
- background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
590
+ background: var(--alias-colors-bg-skeleton-strong);
601
591
  padding: 0 2px;
602
592
  width: min-content;
603
593
 
604
594
  .ald-radio-label:not(.ald-radio-wrapper-disabled) {
605
595
  &:not(.ald-radio-wrapper-checked):hover {
606
- background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
596
+ background: var(--alias-colors-bg-interaction-hover);
607
597
  }
608
598
 
609
599
  &:active {
610
- background: var(--alias-colors-bg-interaction-press, rgba(0, 0, 0, 0.1));
600
+ background: var(--alias-colors-bg-interaction-press);
611
601
  }
612
602
  }
613
603
  }
@@ -33,14 +33,14 @@
33
33
  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
34
34
 
35
35
  &:hover {
36
- border: 1px solid var(--alias-colors-border-strong, #d1d5db);
36
+ border: 1px solid var(--border-neutral-strong);
37
37
  margin-left: -1px;
38
38
  margin-right: 1px;
39
39
  }
40
40
 
41
41
  &:focus {
42
- border: 1px solid var(--alias-colors-border-selected, #126fdd);
43
- box-shadow: 0 0 0 1px #126fdd;
42
+ border: 1px solid var(--interaction-border-selected);
43
+ box-shadow: 0 0 0 1px var(--interaction-focus-default);
44
44
  margin-left: -1px;
45
45
  margin-right: 1px;
46
46
  }
@@ -11,22 +11,23 @@ import unauthorized from "./unauthorized";
11
11
  export var IconMap = {
12
12
  success: /*#__PURE__*/React.createElement(CheckCircleDuotone, {
13
13
  size: 80,
14
- color: "#16B667",
15
- fill: "#FFFFFF"
14
+ fill: 'var(--content-inverted-primary)',
15
+ color: 'var(--non-semantic-background-green-strong)'
16
16
  }),
17
17
  error: /*#__PURE__*/React.createElement(CancelCircleDuotone, {
18
18
  size: 80,
19
- color: "#D64343",
20
- fill: "#FFFFFF"
19
+ fill: 'var(--content-inverted-primary)',
20
+ color: 'var(--non-semantic-background-red-strong)'
21
21
  }),
22
22
  info: /*#__PURE__*/React.createElement(InfoCircleLine, {
23
23
  size: 80,
24
- color: "#3271C9"
24
+ fill: 'var(--content-inverted-primary)',
25
+ color: 'var(--non-semantic-background-blue-strong)'
25
26
  }),
26
27
  warning: /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
27
28
  size: 80,
28
- color: "#FFB01F",
29
- fill: "#FFFFFF"
29
+ fill: 'var(--content-inverted-primary)',
30
+ color: 'var(--non-semantic-background-orange-strong)'
30
31
  })
31
32
  };
32
33
  export var ExceptionMap = {
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .ald-result-title {
24
- color: var(--colors-gray-900, #171717);
24
+ color: var(--content-primary);
25
25
  text-align: center;
26
26
  font-size: 16px;
27
27
  font-style: normal;
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  .ald-result-subtitle {
33
- color: var(--colors-gray-700, #858585);
33
+ color: var(--content-secondary);
34
34
  text-align: center;
35
35
  font-size: 13px;
36
36
  font-style: normal;
@@ -61,7 +61,7 @@
61
61
  width: 50%;
62
62
 
63
63
  .ald-result-title {
64
- color: #171717;
64
+ color: var(--content-primary);
65
65
  font-size: 48px;
66
66
  font-weight: 600;
67
67
  line-height: 56px;
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  .ald-result-subtitle {
72
- color: var(--colors-gray-700, #858585);
72
+ color: var(--content-secondary);
73
73
  font-size: 16px;
74
74
  font-style: normal;
75
75
  font-weight: 400;
@@ -30,7 +30,7 @@
30
30
  // 滚动条可拖动条
31
31
  .ald-scroll-area-thumb {
32
32
  flex: 1;
33
- background: #575757;
33
+ background: var(--alias-colors-icon-subtle);
34
34
  border-radius: var(--scrollbar-size);
35
35
  position: relative;
36
36
  opacity: 0.2;
@@ -454,7 +454,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
454
454
  dropdownStyle: dropdownStyle || defaultDropdownStyle,
455
455
  clearIcon: /*#__PURE__*/React.createElement(TimesLightLine, {
456
456
  className: "ald-select-clear-icon",
457
- color: "#9CA3AF"
457
+ color: "var(--alias-colors-icon-subtle)"
458
458
  }),
459
459
  style: {
460
460
  width: '100%'
@@ -2,7 +2,7 @@
2
2
  .ant-select {
3
3
  .ant-select-selector {
4
4
  .ant-select-selection-placeholder {
5
- color: var(--alias-colors-text-default, #1f2937);
5
+ color: var(--alias-colors-text-default);
6
6
  font-weight: 500;
7
7
  }
8
8
  }
@@ -19,7 +19,7 @@
19
19
  border-style: solid;
20
20
 
21
21
  .ald-select-prefix {
22
- color: var(--alias-colors-text-subtle, #4b5563);
22
+ color: var(--alias-colors-text-subtle);
23
23
  display: inline-flex;
24
24
  position: absolute;
25
25
  align-items: center;
@@ -115,8 +115,8 @@
115
115
  display: flex;
116
116
  align-items: center;
117
117
  height: 16px;
118
- padding: 0 var(--alias-spacing-50, 4px);
119
- border-radius: var(--alias-radius-100, 8px);
118
+ padding: 0 var(--alias-spacing-50);
119
+ border-radius: var(--alias-radius-100);
120
120
  font-size: 12px;
121
121
  }
122
122
  }
@@ -148,7 +148,7 @@
148
148
  .ant-select-selection-search-input {
149
149
  height: inherit;
150
150
  line-height: inherit;
151
- caret-color: var(--alias-colors-text-selected, #126fdd);
151
+ caret-color: var(--alias-colors-text-selected);
152
152
  }
153
153
  }
154
154
  }
@@ -171,6 +171,6 @@
171
171
  .ald-select-clear-icon,
172
172
  .ald-select-suffix-icon {
173
173
  cursor: pointer;
174
- color: var(--alias-colors-icon-subtle, #6b7280);
174
+ color: var(--alias-colors-icon-subtle);
175
175
  font-size: 16px;
176
176
  }
@@ -37,7 +37,7 @@
37
37
  content: '';
38
38
  height: 14px;
39
39
  width: 1px;
40
- background-color: var(--alias-colors-border-default, #e5e7eb);
40
+ background-color: var(--alias-colors-border-default);
41
41
  }
42
42
  }
43
43
  }
@@ -1,28 +1,25 @@
1
1
  @select-option-height: 36px;
2
2
 
3
3
  .ald-option {
4
- padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
4
+ padding: var(--alias-padding-100) var(--alias-padding-150);
5
5
  display: flex;
6
6
  height: @select-option-height;
7
7
  align-items: center;
8
8
  cursor: pointer;
9
- color: var(--alias-colors-text-default, #1f2937);
10
- gap: var(--alias-spacing-50, 4px);
9
+ color: var(--alias-colors-text-default);
10
+ gap: var(--alias-spacing-50);
11
11
  font-size: 14px;
12
12
  font-style: normal;
13
13
  font-weight: 400;
14
14
  line-height: 20px;
15
15
 
16
16
  &:hover {
17
- background-color: var(
18
- --alias-colors-bg-interaction-hover,
19
- rgba(0, 0, 0, 0.05)
20
- );
17
+ background-color: var(--alias-colors-bg-interaction-hover);
21
18
  }
22
19
 
23
20
  &.ald-option-disabled {
24
- background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
25
- color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
21
+ background-color: var(--alias-colors-bg-skeleton-subtler);
22
+ color: var(--alias-colors-text-disabled);
26
23
 
27
24
  &:hover {
28
25
  cursor: default;
@@ -30,7 +27,7 @@
30
27
  }
31
28
 
32
29
  &.ald-option-selected {
33
- color: var(--alias-colors-text-selected, #126fdd);
30
+ color: var(--alias-colors-text-selected);
34
31
  }
35
32
  }
36
33
 
@@ -2,15 +2,15 @@
2
2
  .ant-select-dropdown.ant-select-dropdown {
3
3
  padding-left: 0;
4
4
  padding-right: 0;
5
- border-radius: var(--alias-radius-75, 6px);
5
+ border-radius: var(--alias-radius-75);
6
6
 
7
7
  &.ald-select-popup {
8
8
  // max-height: 264px;
9
9
  overflow-y: auto;
10
10
  overflow-y: overlay;
11
- border: 1px solid var(--alias-colors-border-strong, #d1d5db);
12
- background: var(--alias-colors-bg-skeleton-subtler, #fff);
13
- box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
11
+ border: 1px solid var(--alias-colors-border-strong);
12
+ background: var(--alias-colors-bg-skeleton-subtler);
13
+ box-shadow: var(--elevation-bottom-bottom-lg);
14
14
  padding: 4px 0;
15
15
  }
16
16
  }
@@ -4,7 +4,7 @@
4
4
  color: @textColor;
5
5
 
6
6
  .ant-select-selection-placeholder {
7
- color: var(--alias-colors-text-subtlest, #9ca3af);
7
+ color: var(--alias-colors-text-subtlest);
8
8
  }
9
9
 
10
10
  .ant-select-selection-item {
@@ -13,42 +13,39 @@
13
13
  }
14
14
 
15
15
  .ald-select.ald-select-primary {
16
- .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
16
+ .select-color(var(--alias-colors-border-accent-gray-default),var(--background-neutral-on-subtle),var(--alias-colors-text-default));
17
17
 
18
18
  &.ald-select-multiple .ant-select {
19
19
  .ant-select-selector {
20
- color: var(--alias-colors-text-selected, #126fdd);
20
+ color: var(--alias-colors-text-selected);
21
21
 
22
22
  .ant-select-selection-overflow-item-rest {
23
23
  .ant-select-selection-item-content {
24
- background: var(
25
- --alias-colors-bg-accent-blue-subtle-default,
26
- #d4e7fd
27
- );
28
- color: var(--alias-colors-text-information, #0f59b1);
24
+ background: var(--action-primary-subtle-hover);
25
+ color: var(--alias-colors-text-information);
29
26
  }
30
27
  }
31
28
  }
32
29
  }
33
30
 
34
31
  &.ald-select-fitted {
35
- .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
32
+ .select-color(var(--alias-colors-border-accent-gray-default),var(--background-neutral-on-subtle),var(--alias-colors-text-default));
36
33
  }
37
34
 
38
35
  &:hover {
39
- .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af), var(--alias-colors-bg-accent-gray-subtler-default, #F9FAFB),var(--alias-colors-text-default, #1f2937));
36
+ .select-color(var(--alias-colors-border-accent-gray-strong), var(--background-neutral-on-subtle),var(--alias-colors-text-default));
40
37
  }
41
38
 
42
39
  &.ald-select-focused {
43
- .select-color(var(--alias-colors-border-selected, #126fdd), var(--alias-colors-bg-accent-gray-subtler-default, #F9FAFB),var(--alias-colors-text-default, #1f2937));
40
+ .select-color(var(--alias-colors-border-selected), var(--background-neutral-on-subtle),var(--alias-colors-text-default));
44
41
  }
45
42
 
46
43
  &:active {
47
- .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-strong, #F3F4F6),var(--alias-colors-text-default, #1f2937));
44
+ .select-color(var(--alias-colors-border-accent-gray-default),var(--background-neutral-muted),var(--alias-colors-text-default));
48
45
  }
49
46
 
50
47
  &.ald-select-disabled {
51
- .select-color(var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1)),var(--alias-colors-bg-transp, rgba(0, 0, 0, 0)),var(--alias-colors-text-default, #1f2937));
48
+ .select-color(var(--alias-colors-border-disabled),var(--alias-colors-bg-transp),var(--alias-colors-text-default));
52
49
 
53
50
  cursor: default;
54
51
 
@@ -65,27 +62,27 @@
65
62
 
66
63
  .ant-select-arrow {
67
64
  .ald-select-suffix-icon {
68
- color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
65
+ color: var(--alias-colors-icon-disabled);
69
66
  }
70
67
  }
71
68
  }
72
69
  }
73
70
 
74
71
  &.ald-select-status-error {
75
- .select-color(var(--alias-colors-border-danger, #DC2626),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
72
+ .select-color(var(--alias-colors-border-danger),var(--background-neutral-on-subtle),var(--alias-colors-text-default));
76
73
  }
77
74
  }
78
75
 
79
76
  .ald-select {
80
77
  &.ald-select-secondary {
81
- .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
78
+ .select-color(var(--alias-colors-border-accent-gray-default),var(--alias-colors-bg-skeleton-subtler),var(--alias-colors-text-default));
82
79
 
83
80
  &.ald-select-multiple .ant-select {
84
81
  .ant-select-selector {
85
82
  .ant-select-selection-overflow-item-rest {
86
83
  .ant-select-selection-item-content {
87
84
  background: transparent;
88
- color: var(--alias-colors-text-subtle, #4b5563);
85
+ color: var(--alias-colors-text-subtle);
89
86
  font-weight: 500;
90
87
  line-height: 16px;
91
88
  }
@@ -94,23 +91,23 @@
94
91
  }
95
92
 
96
93
  &.ald-select-fitted {
97
- .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
94
+ .select-color(var(--alias-colors-border-accent-gray-default),var(--alias-colors-bg-skeleton-subtler),var(--alias-colors-text-default));
98
95
  }
99
96
 
100
97
  &:hover {
101
- .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
98
+ .select-color(var(--alias-colors-border-accent-gray-strong),var(--alias-colors-bg-skeleton-subtler),var(--alias-colors-text-default));
102
99
  }
103
100
 
104
101
  &.ald-select-focused {
105
- .select-color(var(--alias-colors-border-selected, #126fdd),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
102
+ .select-color(var(--alias-colors-border-selected),var(--alias-colors-bg-skeleton-subtler),var(--alias-colors-text-default));
106
103
  }
107
104
 
108
105
  &:active {
109
- .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
106
+ .select-color(var(--alias-colors-border-accent-gray-default),var(--alias-colors-bg-skeleton-subtler),var(--alias-colors-text-default));
110
107
  }
111
108
 
112
109
  &.ald-select-disabled {
113
- .select-color(var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1)),var(--alias-colors-bg-transp, rgba(0, 0, 0, 0)),var(--alias-colors-text-default, #1f2937));
110
+ .select-color(var(--alias-colors-border-disabled),var(--alias-colors-bg-transp),var(--alias-colors-text-default));
114
111
 
115
112
  cursor: default;
116
113
 
@@ -127,7 +124,7 @@
127
124
 
128
125
  .ant-select-arrow {
129
126
  .ald-select-suffix-icon {
130
- color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
127
+ color: var(--alias-colors-icon-disabled);
131
128
  }
132
129
  }
133
130
  }
@@ -135,6 +132,6 @@
135
132
  }
136
133
 
137
134
  &.ald-select-status-error {
138
- .select-color(var(--alias-colors-border-danger, #DC2626),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
135
+ .select-color(var(--alias-colors-border-danger),var(--background-neutral-on-subtle),var(--alias-colors-text-default));
139
136
  }
140
137
  }
@@ -5,7 +5,7 @@
5
5
  @select-border-radius-large: 8px;
6
6
  @select-font-size-large: 16px;
7
7
  @select-line-height-large: 24px;
8
- @select-padding-horizontal-large: var(--alias-padding-150-minus-1, 12px);
8
+ @select-padding-horizontal-large: var(--alias-padding-150-minus-1);
9
9
  @selector-height-large: 34px;
10
10
  @selector-gap-large: 8px;
11
11
  @select-icon-use-width-large: 24px; //16+8
@@ -15,7 +15,7 @@
15
15
  @select-border-radius-middle: 6px;
16
16
  @select-font-size-middle: 14px;
17
17
  @select-line-height-middle: 20px;
18
- @select-padding-horizontal-middle: var(--alias-padding-150-minus-1, 12px);
18
+ @select-padding-horizontal-middle: var(--alias-padding-150-minus-1);
19
19
  @selector-height-middle: 30px;
20
20
  @selector-gap-middle: 6px;
21
21
  @select-icon-use-width-middle: 22px; //16+6
@@ -25,7 +25,7 @@
25
25
  @select-border-radius-small: 4px;
26
26
  @select-font-size-small: 12px;
27
27
  @select-line-height-small: 16px;
28
- @select-padding-horizontal-small: var(--alias-padding-150-minus-1, 12px);
28
+ @select-padding-horizontal-small: var(--alias-padding-150-minus-1);
29
29
  @selector-height-small: 26px;
30
30
  @selector-gap-small: 4px;
31
31
  @select-icon-use-width-small: 20px; //16+4