@arco-themes/react-aiux2026 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arco-themes/react-aiux2026",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "",
   "author": "dobe25381-gif",
   "owners": [],
@@ -14,6 +14,6 @@
   "depLibrary": "@arco-design/web-react",
   "tag": "latest",
   "peerDependencies": {
-    "@arco-design/web-react": "^2.66.11"
+    "@arco-design/web-react": "^2.66.12"
   }
 }

package/theme.css

@@ -313,6 +313,26 @@ body {
   --warning-8: var(--orange-8);
   --warning-9: var(--orange-9);
   --warning-10: var(--orange-10);
+  --badge-1: 133, 24, 242;
+  --badge-2: 242, 24, 133;
+  --badge-3: 26, 188, 242;
+  --badge-4: 22, 217, 22;
+  --badge-5: 242, 79, 25;
+  --badge-6: 79, 24, 242;
+  --badge-7: 242, 188, 23;
+  --badge-8: var(--arcoblue-8);
+  --badge-9: var(--arcoblue-9);
+  --badge-10: var(--arcoblue-10);
+  --tag-1: 249, 237, 255;
+  --tag-2: 255, 237, 243;
+  --tag-3: 236, 253, 254;
+  --tag-4: 241, 255, 237;
+  --tag-5: 255, 245, 237;
+  --tag-6: 245, 237, 255;
+  --tag-7: 255, 253, 237;
+  --tag-8: var(--arcoblue-8);
+  --tag-9: var(--arcoblue-9);
+  --tag-10: var(--arcoblue-10);
 }
 body[arco-theme='dark'] {
   --red-1: 77, 0, 10;
@@ -505,5 +525,25 @@ body[arco-theme='dark'] {
   --warning-8: var(--orange-8);
   --warning-9: var(--orange-9);
   --warning-10: var(--orange-10);
+  --badge-1: var(--arcoblue-1);
+  --badge-2: var(--arcoblue-2);
+  --badge-3: var(--arcoblue-3);
+  --badge-4: var(--arcoblue-4);
+  --badge-5: var(--arcoblue-5);
+  --badge-6: var(--arcoblue-6);
+  --badge-7: var(--arcoblue-7);
+  --badge-8: var(--arcoblue-8);
+  --badge-9: var(--arcoblue-9);
+  --badge-10: var(--arcoblue-10);
+  --tag-1: var(--arcoblue-1);
+  --tag-2: var(--arcoblue-2);
+  --tag-3: var(--arcoblue-3);
+  --tag-4: var(--arcoblue-4);
+  --tag-5: var(--arcoblue-5);
+  --tag-6: var(--arcoblue-6);
+  --tag-7: var(--arcoblue-7);
+  --tag-8: var(--arcoblue-8);
+  --tag-9: var(--arcoblue-9);
+  --tag-10: var(--arcoblue-10);
 }
 

package/theme.less

@@ -763,7 +763,7 @@
 @transition-timing-function-decelerate: cubic-bezier(0.4, 0.8, 0.74, 1);
 @transition-timing-function-accelerate: cubic-bezier(0.26, 0, 0.6, 0.2);
 @icon-hover-border-radius: var(~'@{arco-cssvars-prefix}-border-radius-circle');
-@icon-hover-color-bg: @color-primary-1;
+@icon-hover-color-bg: @color-transparent;
 @icon-hover-size-default-height: 20px;
 @icon-hover-size-small-height: 20px;
 @icon-hover-size-mini-height: 20px;
@@ -806,6 +806,66 @@
 @watermark-prefix-cls: ~'@{prefix}-watermark';
 @verification-code-prefix-cls: ~'@{prefix}-verification-code';
 @color-prefix-cls: ~'@{prefix}-color';
+@badge-1: rgb(133, 24, 242);
+@color-badge-5: rgb(var(~'@{arco-cssvars-prefix}-badge-5'));
+@color-badge-4: rgb(var(~'@{arco-cssvars-prefix}-badge-4'));
+@dark-badge-1: #000D4D;
+@color-badge-2: rgb(var(~'@{arco-cssvars-prefix}-badge-2'));
+@dark-badge-7: #689FFF;
+@badge-4: rgb(22, 217, 22);
+@color-badge-6: rgb(var(~'@{arco-cssvars-prefix}-badge-6'));
+@badge-9: #031A79;
+@dark-badge-5: #306FFF;
+@dark-badge-2: #041B79;
+@badge-6: rgb(79, 24, 242);
+@badge-2: rgb(242, 24, 133);
+@badge-3: rgb(26, 188, 242);
+@color-badge-8: rgb(var(~'@{arco-cssvars-prefix}-badge-8'));
+@color-badge-1: rgb(var(~'@{arco-cssvars-prefix}-badge-1'));
+@color-badge-3: rgb(var(~'@{arco-cssvars-prefix}-badge-3'));
+@badge-7: rgb(242, 188, 23);
+@badge-8: #072CA6;
+@color-badge-9: rgb(var(~'@{arco-cssvars-prefix}-badge-9'));
+@dark-badge-4: #1D4DD2;
+@color-badge-7: rgb(var(~'@{arco-cssvars-prefix}-badge-7'));
+@color-badge-10: rgb(var(~'@{arco-cssvars-prefix}-badge-10'));
+@dark-badge-8: #93BEFF;
+@dark-badge-6: #3C7EFF;
+@dark-badge-3: #0E32A6;
+@dark-badge-9: #BEDAFF;
+@dark-badge-10: #EAF4FF;
+@badge-5: rgb(242, 79, 25);
+@badge-10: #000D4D;
+@tag-8: #072CA6;
+@tag-3: rgb(236, 253, 254);
+@color-tag-9: rgb(var(~'@{arco-cssvars-prefix}-tag-9'));
+@color-tag-5: rgb(var(~'@{arco-cssvars-prefix}-tag-5'));
+@dark-tag-1: #000D4D;
+@dark-tag-2: #041B79;
+@dark-tag-8: #93BEFF;
+@tag-7: rgb(255, 253, 237);
+@dark-tag-4: #1D4DD2;
+@color-tag-6: rgb(var(~'@{arco-cssvars-prefix}-tag-6'));
+@dark-tag-3: #0E32A6;
+@dark-tag-9: #BEDAFF;
+@tag-6: rgb(245, 237, 255);
+@tag-4: rgb(241, 255, 237);
+@color-tag-8: rgb(var(~'@{arco-cssvars-prefix}-tag-8'));
+@tag-1: rgb(249, 237, 255);
+@color-tag-2: rgb(var(~'@{arco-cssvars-prefix}-tag-2'));
+@tag-2: rgb(255, 237, 243);
+@color-tag-3: rgb(var(~'@{arco-cssvars-prefix}-tag-3'));
+@tag-10: #000D4D;
+@color-tag-4: rgb(var(~'@{arco-cssvars-prefix}-tag-4'));
+@tag-9: #031A79;
+@color-tag-1: rgb(var(~'@{arco-cssvars-prefix}-tag-1'));
+@color-tag-7: rgb(var(~'@{arco-cssvars-prefix}-tag-7'));
+@dark-tag-5: #306FFF;
+@dark-tag-10: #EAF4FF;
+@dark-tag-7: #689FFF;
+@dark-tag-6: #3C7EFF;
+@tag-5: rgb(255, 245, 237);
+@color-tag-10: rgb(var(~'@{arco-cssvars-prefix}-tag-10'));
 
 
   @arco-theme-tag: body;
@@ -1232,7 +1292,27 @@
   @{arco-cssvars-prefix}-warning-9: if(iscolor(@warning-9), .getColorRgbStr(@warning-9)[], replace(~'@{warning-9}', 'rgb\((.*)\)$', '$1'));
   @{arco-cssvars-prefix}-warning-10: if(iscolor(@warning-10), .getColorRgbStr(@warning-10)[], replace(~'@{warning-10}', 'rgb\((.*)\)$', '$1'));
 
-    
+    @{arco-cssvars-prefix}-badge-1: if(iscolor(@badge-1), .getColorRgbStr(@badge-1)[], replace(~'@{badge-1}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-2: if(iscolor(@badge-2), .getColorRgbStr(@badge-2)[], replace(~'@{badge-2}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-3: if(iscolor(@badge-3), .getColorRgbStr(@badge-3)[], replace(~'@{badge-3}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-4: if(iscolor(@badge-4), .getColorRgbStr(@badge-4)[], replace(~'@{badge-4}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-5: if(iscolor(@badge-5), .getColorRgbStr(@badge-5)[], replace(~'@{badge-5}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-6: if(iscolor(@badge-6), .getColorRgbStr(@badge-6)[], replace(~'@{badge-6}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-7: if(iscolor(@badge-7), .getColorRgbStr(@badge-7)[], replace(~'@{badge-7}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-8: if(iscolor(@badge-8), .getColorRgbStr(@badge-8)[], replace(~'@{badge-8}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-9: if(iscolor(@badge-9), .getColorRgbStr(@badge-9)[], replace(~'@{badge-9}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-10: if(iscolor(@badge-10), .getColorRgbStr(@badge-10)[], replace(~'@{badge-10}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-1: if(iscolor(@tag-1), .getColorRgbStr(@tag-1)[], replace(~'@{tag-1}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-2: if(iscolor(@tag-2), .getColorRgbStr(@tag-2)[], replace(~'@{tag-2}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-3: if(iscolor(@tag-3), .getColorRgbStr(@tag-3)[], replace(~'@{tag-3}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-4: if(iscolor(@tag-4), .getColorRgbStr(@tag-4)[], replace(~'@{tag-4}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-5: if(iscolor(@tag-5), .getColorRgbStr(@tag-5)[], replace(~'@{tag-5}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-6: if(iscolor(@tag-6), .getColorRgbStr(@tag-6)[], replace(~'@{tag-6}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-7: if(iscolor(@tag-7), .getColorRgbStr(@tag-7)[], replace(~'@{tag-7}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-8: if(iscolor(@tag-8), .getColorRgbStr(@tag-8)[], replace(~'@{tag-8}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-9: if(iscolor(@tag-9), .getColorRgbStr(@tag-9)[], replace(~'@{tag-9}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-10: if(iscolor(@tag-10), .getColorRgbStr(@tag-10)[], replace(~'@{tag-10}', 'rgb\((.*)\)$', '$1'));
+
   }
 
   @{arco-theme-tag}[arco-theme='dark'] {
@@ -1426,5 +1506,302 @@
     @{arco-cssvars-prefix}-warning-8: if(iscolor(@dark-warning-8), .getColorRgbStr(@dark-warning-8)[], replace(~'@{dark-warning-8}', 'rgb\((.*)\)$', '$1'));
     @{arco-cssvars-prefix}-warning-9: if(iscolor(@dark-warning-9), .getColorRgbStr(@dark-warning-9)[], replace(~'@{dark-warning-9}', 'rgb\((.*)\)$', '$1'));
     @{arco-cssvars-prefix}-warning-10: if(iscolor(@dark-warning-10), .getColorRgbStr(@dark-warning-10)[], replace(~'@{dark-warning-10}', 'rgb\((.*)\)$', '$1'));
+    @{arco-cssvars-prefix}-badge-1: if(iscolor(@dark-badge-1), .getColorRgbStr(@dark-badge-1)[], replace(~'@{dark-badge-1}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-2: if(iscolor(@dark-badge-2), .getColorRgbStr(@dark-badge-2)[], replace(~'@{dark-badge-2}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-3: if(iscolor(@dark-badge-3), .getColorRgbStr(@dark-badge-3)[], replace(~'@{dark-badge-3}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-4: if(iscolor(@dark-badge-4), .getColorRgbStr(@dark-badge-4)[], replace(~'@{dark-badge-4}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-5: if(iscolor(@dark-badge-5), .getColorRgbStr(@dark-badge-5)[], replace(~'@{dark-badge-5}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-6: if(iscolor(@dark-badge-6), .getColorRgbStr(@dark-badge-6)[], replace(~'@{dark-badge-6}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-7: if(iscolor(@dark-badge-7), .getColorRgbStr(@dark-badge-7)[], replace(~'@{dark-badge-7}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-8: if(iscolor(@dark-badge-8), .getColorRgbStr(@dark-badge-8)[], replace(~'@{dark-badge-8}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-9: if(iscolor(@dark-badge-9), .getColorRgbStr(@dark-badge-9)[], replace(~'@{dark-badge-9}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-badge-10: if(iscolor(@dark-badge-10), .getColorRgbStr(@dark-badge-10)[], replace(~'@{dark-badge-10}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-1: if(iscolor(@dark-tag-1), .getColorRgbStr(@dark-tag-1)[], replace(~'@{dark-tag-1}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-2: if(iscolor(@dark-tag-2), .getColorRgbStr(@dark-tag-2)[], replace(~'@{dark-tag-2}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-3: if(iscolor(@dark-tag-3), .getColorRgbStr(@dark-tag-3)[], replace(~'@{dark-tag-3}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-4: if(iscolor(@dark-tag-4), .getColorRgbStr(@dark-tag-4)[], replace(~'@{dark-tag-4}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-5: if(iscolor(@dark-tag-5), .getColorRgbStr(@dark-tag-5)[], replace(~'@{dark-tag-5}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-6: if(iscolor(@dark-tag-6), .getColorRgbStr(@dark-tag-6)[], replace(~'@{dark-tag-6}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-7: if(iscolor(@dark-tag-7), .getColorRgbStr(@dark-tag-7)[], replace(~'@{dark-tag-7}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-8: if(iscolor(@dark-tag-8), .getColorRgbStr(@dark-tag-8)[], replace(~'@{dark-tag-8}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-9: if(iscolor(@dark-tag-9), .getColorRgbStr(@dark-tag-9)[], replace(~'@{dark-tag-9}', 'rgb\((.*)\)$', '$1'));
+@{arco-cssvars-prefix}-tag-10: if(iscolor(@dark-tag-10), .getColorRgbStr(@dark-tag-10)[], replace(~'@{dark-tag-10}', 'rgb\((.*)\)$', '$1'));
+
+  }
+// Button Icon
+.arco-btn-size-default {
+  svg.arco-icon {
+    font-size: 16px;
+  }
+}
+.arco-btn-size-large {
+  svg.arco-icon {
+    font-size: 16px;
+  }
+}
+.arco-btn-size-small {
+  svg.arco-icon {
+    font-size: 16px;
+  }
+}
+.arco-btn-size-mini {
+  svg.arco-icon {
+    font-size: 14px;
+  }
+}
+
+// Link
+.arco-link.arco-link-dark:not(:hover) {
+  color: var(--color-text-2);
+}
+
+// Table remove border
+.arco-table.arco-table-border {
+  .arco-table-container {
+    border-top: none;
+  }
     
+  thead>.arco-table-tr>.arco-table-th {
+    border: none;
+    border-bottom: 1px solid var(--color-border-2);
+  }
+
+  .arco-table-td:first-child {
+    border-left: none;
+  }
+
+  .arco-table-container {
+    border-right: none;
+  }
+}
+
+// tooltip
+.arco-tooltip-content {
+  background-color: var(--color-bg-5);
+  color: var(--color-text-2);
+  border-width: 0 !important;
+  box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.1);
+  padding: 8px 12px;
+  font-size: 12px;
+  border-radius: 4px;
+  line-height: 1.5715;
+}
+.arco-tooltip .arco-trigger-arrow {
+  z-index: 0;
+}
+.arco-trigger-arrow.arco-tooltip-arrow {
+  background-color: var(--color-bg-5);
+}
+
+// Form required mark
+.arco-form-label-item .arco-form-item-symbol svg {
+  margin-top: 2px;
+}
+
+// Cascader Icon
+.arco-cascader.arco-cascader-size-default {
+  .arco-cascader-suffix {
+    svg.arco-icon {
+      font-size: 16px
+    }
+  }
+}
+
+// Form Icon
+.arco-form.arco-form-size-default {
+  .arco-form-item-feedback {
+    svg.arco-icon {
+      font-size: 16px;
+    }
+  }
+}
+
+// Input Icon
+.arco-input-inner-wrapper .arco-input-group-prefix > svg, 
+.arco-input-inner-wrapper .arco-input-group-suffix > svg {
+  font-size: 16px;
+}
+.arco-input-group-addbefore > svg, .arco-input-group-addafter > svg {
+  font-size: 16px;
+}
+.arco-input-search.arco-input-group-wrapper .arco-input-search-btn > svg {
+  font-size: 16px;
+}
+
+// DataPicker Icon
+.arco-picker.arco-picker-size-default {
+  .arco-picker-suffix>.arco-picker-suffix-icon>svg.arco-icon {
+    font-size: 16px;
+  }
+}
+
+// TimePicker Icon
+.arco-picker.arco-picker-size-default.arco-picker-has-prefix {
+  .arco-picker-prefix {
+    display: flex;
+    align-items: center;
+
+    svg.arco-icon {
+     font-size: 16px;
+    }
+  }
+  .arco-picker-suffix {
+    display: flex;
+    align-items: center;
+  }
+}
+
+// TreeSelect
+.arco-tree-select {
+  &.arco-tree-select-size-default {
+    .arco-tree-select-suffix {
+      .arco-tree-select-arrow-icon>svg.arco-icon {
+        font-size: 16px;
+      }
+    }
+  }
+
+  &.arco-tree-select-size-mini {
+    .arco-tree-select-suffix {
+      .arco-tree-select-arrow-icon>svg.arco-icon {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+// InputTag Icon
+.arco-input-tag.arco-input-tag-size-default {
+  .arco-input-tag-tag>.arco-tag-close-btn>svg.arco-icon {
+    font-size: 16px;
+  }
+}
+.arco-input-tag.arco-input-tag-size-small {
+  .arco-input-tag-tag>.arco-tag-close-btn>svg.arco-icon {
+    font-size: 14px;
+  }
+}
+
+// InputNumber Icon
+.arco-input-group-wrapper.arco-input-group-wrapper-default {
+  .arco-input-number-step-button {
+    font-size: 16px;
+  }
+}
+
+// Select Icon
+.arco-select.arco-select-size-default {
+  .arco-select-suffix {
+    svg.arco-icon {
+      font-size: 16px;
+    }
+  }
+}
+
+.arco-select.arco-select-size-mini {
+  .arco-select-suffix {
+    svg.arco-icon {
+      font-size: 14px;
+    }
+  }
+}
+
+// Alert
+.arco-alert {
+  display: flex;
+  align-items: start;
+
+  .arco-alert-close-btn {
+    margin-top:6px;
+  }
+}
+
+// TimePicker
+.arco-timepicker-cell:not(.arco-timepicker-cell-selected):not(.arco-timepicker-cell-disabled):hover .arco-timepicker-cell-inner {
+  background-color: rgb(var(--primary-1));
+}
+.arco-timepicker-cell-selected:not(.arco-timepicker-cell-disabled) .arco-timepicker-cell-inner {
+  background-color: rgb(var(--primary-1));
+  color: rgb(var(--primary-6))
+}
+
+// Transfer
+.arco-transfer {
+  .arco-transfer-view-header {
+    border-radius: 4px;
+  }
+
+  .arco-transfer-operations {
+    svg.arco-icon {
+      font-size: 16px;
+    }
+  }
+
+  .arco-transfer-view-header {
+    .arco-transfer-view-icon-clear>svg.arco-icon {
+      font-size: 16px;
+    }
+  }
+
+  .arco-transfer-view-list {
+    .arco-transfer-view-item {
+      .arco-icon-hover.arco-checkbox-icon-hover::before {
+        display: none;
+      }
+
+      .arco-checkbox.arco-transfer-view-item-content:not(.arco-checkbox-checked) {
+        &:hover {
+          .arco-checkbox-mask {
+            border-color: rgb(var(--primary-5))
+          }
+        }
+        &:active {
+          .arco-checkbox-mask {
+            border-color: rgb(var(--primary-7))
+          }
+        }
+      }
+    }
+    .arco-transfer-view-item-icon-remove {
+      font-size: 16px;
+    }
+  }
+
+  .arco-transfer-view-search {
+    .arco-input-has-suffix {
+      .arco-input-group-suffix>svg.arco-icon {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+// Pagination Simple
+.arco-pagination {
+  .arco-pagination-item-simple-pager {
+    margin-right: 4px;
+
+    .arco-input.arco-pagination-jumper-input {
+      margin-right: 4px;
+      border-radius: 4px;
+      border: 1px solid var(--color-border-3);
+      background: var(--color-bg-2);
+    }
+  }
+
+  &.arco-pagination-size-small {
+    .arco-pagination-item-simple-pager {
+      .arco-input.arco-input-size-small.arco-pagination-jumper-input {
+        width: 28px;
+      }
+    }
+  }
+
+  &.arco-pagination-size-mini {
+    .arco-pagination-item-simple-pager {
+      .arco-input.arco-input-size-mini.arco-pagination-jumper-input {
+        width: 24px;
+      }
+    }
   }
+}