fix(comp:*): update components style (#1238)

* style(comp:select): selector item disabled style selector item is of disabled style only when selector is disabled * style(comp:anchor): add padding top & bottom to anchor * style(comp:avatar): change avatar background color for seer theme * style(comp:checkbox): change check mark color for seer theme * style(comp:form): change form status color for seer theme * fix(comp:carousel): change carousel default arrow icons * style(comp:progress): change icon and font size for seer theme * style(comp:rate): fix rate color for seer theme * style(comp:result): optimize result style * style(comp:skeleton): change skeleton color * style(comp:statistic): change statistic color for seer theme * style(comp:spin): modify spin container blur opacity * fix(comp:tree-select): change container padding for seer theme * fix(comp:upload): add upload font-size style * style(comp:radio): change checked mark disabled color for seer theme * style(comp:alert): change alert background and text color * fix(comp:pagination): pagination vertical align should be centered * fix(comp:modal,comp:drawer): change default close icon * style(comp:header): change header suffix color for seer theme * style(comp:table): change table row style for seer theme * style(comp:card): midify card mark icon size
IDuxFE · Nov 1, 2022 · 68435df · 68435df
1 parent dacfe18
commit 68435df
Show file tree

Hide file tree

Showing 37 changed files with 121 additions and 38 deletions.
diff --git a/packages/components/_private/selector/style/multiple.less b/packages/components/_private/selector/style/multiple.less
@@ -66,12 +66,6 @@
       border-radius: @select-multiple-item-border-radius;
       cursor: default;
 
-      &-disabled {
-        color: @select-multiple-item-disabled-color;
-        border-color: @select-multiple-item-disabled-border-color;
-        cursor: not-allowed;
-      }
-
       &-label {
         display: inline-block;
         .ellipsis();
@@ -103,6 +97,11 @@
       }
     }
   }
+  &.@{selector-prefix}-disabled .@{selector-prefix}-item-disabled {
+    color: @select-multiple-item-disabled-color;
+    border-color: @select-multiple-item-disabled-border-color;
+    cursor: not-allowed;
+  }
 
   &.@{selector-prefix}-sm {
     .select-size(@select-height-sm, @select-font-size-sm);

diff --git a/packages/components/alert/style/mixin.less b/packages/components/alert/style/mixin.less
@@ -1,5 +1,5 @@
 .alert-status-color (@type, @color, @background-color) {
-  &&-@{type} &-icon {
+  &&-@{type} {
     color: @color;
   }
 

diff --git a/packages/components/alert/style/themes/seer.variable.less b/packages/components/alert/style/themes/seer.variable.less
@@ -4,6 +4,16 @@
 
 @alert-color-secondary: @color-graphite-l10;
 
+@alert-success-background-color: #f1faf7;
+@alert-info-background-color: #f2f7ff;
+@alert-warning-background-color: #fffaf2;
+@alert-error-background-color: #fff2f2;
+
+@alert-success-color: #12a679;
+@alert-info-color: @color-blue;
+@alert-warning-color: #a35f40;
+@alert-error-color: @color-red-d10;
+
 @alert-padding: @spacing-xs @spacing-lg;
 
 @alert-line-height: @font-size-2xl;

diff --git a/packages/components/anchor/style/index.less b/packages/components/anchor/style/index.less
@@ -5,7 +5,7 @@
   .reset-component();
 
   position: relative;
-  padding-left: @anchor-border-width;
+  padding: @spacing-xs 0 @spacing-xs @anchor-border-width;
 
   &-wrapper {
     margin-left: @anchor-wrapper-margin-left;
@@ -49,6 +49,13 @@
     display: none;
   }
 
+  & > &-ink + &-link {
+    margin-top: 0;
+  }
+  &-link:last-child {
+    margin-bottom: 0;
+  }
+
   &-link {
     margin: @anchor-link-margin;
     line-height: @anchor-link-line-height;

diff --git a/packages/components/avatar/style/themes/seer.variable.less b/packages/components/avatar/style/themes/seer.variable.less
@@ -1 +1,3 @@
 @import './default.variable.less';
+
+@avatar-background-color: @color-graphite-l20;
diff --git a/packages/components/card/style/index.less b/packages/components/card/style/index.less
@@ -16,6 +16,10 @@
 
   &-has-shadow {
     box-shadow: @card-box-shadow;
+
+    & when (@theme = seer) {
+      border: none;
+    }
   }
 
   &-hoverable {
@@ -152,10 +156,10 @@
   }
 
   &-mark-icon {
-    font-size: @font-size-xl;
+    font-size: @font-size-md;
     position: absolute;
-    top: -6px;
-    right: -4px;
+    top: -3px;
+    right: -1px;
   }
 
   &-selected {

diff --git a/packages/components/carousel/src/Carousel.tsx b/packages/components/carousel/src/Carousel.tsx
@@ -187,10 +187,10 @@ export default defineComponent({
           {mergedShowArrow.value && (
             <>
               <div key="__arrow-prev" class={`${prefixCls}-arrow ${prefixCls}-arrow-prev`} onClick={prev}>
-                {slots.arrow ? slots.arrow({ type: 'prev' }) : <IxIcon name="left-circle" />}
+                {slots.arrow ? slots.arrow({ type: 'prev' }) : <IxIcon name="left-filled" />}
               </div>
               <div key="__arrow-next" class={`${prefixCls}-arrow ${prefixCls}-arrow-next`} onClick={next}>
-                {slots.arrow ? slots.arrow({ type: 'next' }) : <IxIcon name="right-circle" />}
+                {slots.arrow ? slots.arrow({ type: 'next' }) : <IxIcon name="right-filled" />}
               </div>
             </>
           )}

diff --git a/packages/components/checkbox/style/index.less b/packages/components/checkbox/style/index.less
@@ -127,7 +127,7 @@
         border-color: @checkbox-border-color;
 
         &::after {
-          border-color: @checkbox-disabled-color;
+          border-color: if((@theme = seer), @color-graphite-l10, @checkbox-disabled-color);
         }
       }
     }

diff --git a/packages/components/checkbox/style/themes/seer.variable.less b/packages/components/checkbox/style/themes/seer.variable.less
@@ -7,4 +7,4 @@
 @checkbox-label-padding: 0 @spacing-xs;
 
 @checkbox-focus-color: @form-active-color;
-@checkbox-hover-color: @form-active-color;
+@checkbox-hover-color: @form-active-color;
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -97,7 +97,7 @@ export const defaultConfig: GlobalConfig = {
   drawer: {
     closable: true,
     closeOnEsc: true,
-    closeIcon: 'close',
+    closeIcon: 'dialog-close',
     height: 256,
     mask: true,
     maskClosable: true,
@@ -185,7 +185,7 @@ export const defaultConfig: GlobalConfig = {
   modal: {
     centered: false,
     closable: true,
-    closeIcon: 'close',
+    closeIcon: 'dialog-close',
     closeOnEsc: true,
     mask: true,
     maskClosable: true,

diff --git a/packages/components/drawer/__tests__/drawer.spec.ts b/packages/components/drawer/__tests__/drawer.spec.ts
@@ -36,7 +36,7 @@ describe('Drawer', () => {
 
   test('v-model:visible work', async () => {
     const onUpdateVisible = vi.fn()
-    const wrapper = DrawerMount({ props: { visible: false, 'onUpdate:visible': onUpdateVisible } })
+    const wrapper = DrawerMount({ props: { closeIcon: 'close', visible: false, 'onUpdate:visible': onUpdateVisible } })
     expect(isElementVisible(document.querySelector('.ix-drawer-wrapper'))).toBe(false)
 
     await wrapper.setProps({ visible: true })
@@ -51,7 +51,7 @@ describe('Drawer', () => {
   })
 
   test('closable work', async () => {
-    const wrapper = DrawerMount({ props: { closable: false } })
+    const wrapper = DrawerMount({ props: { closable: false, closeIcon: 'close' } })
     const drawerWrapper = wrapper.getComponent(DrawerWrapper)
 
     expect(drawerWrapper.find('.ix-icon-close').exists()).toBe(false)
@@ -66,7 +66,7 @@ describe('Drawer', () => {
     const wrapper = DrawerMount({ props: { closeIcon: 'up', onClose } })
     const drawerWrapper = wrapper.getComponent(DrawerWrapper)
 
-    expect(drawerWrapper.find('.ix-icon-close').exists()).toBe(false)
+    expect(drawerWrapper.find('.ix-icon-dialog-close').exists()).toBe(false)
     expect(drawerWrapper.find('.ix-icon-up').exists()).toBe(true)
 
     await drawerWrapper.find('.ix-icon-up').trigger('click')

diff --git a/packages/components/form/style/themes/seer.variable.less b/packages/components/form/style/themes/seer.variable.less
@@ -5,6 +5,10 @@
 @form-font-size-md: @font-size-sm;
 @form-font-size-lg: @font-size-md;
 
+@form-item-valid-color: @color-success-d10;
+@form-item-validating-color: @color-pending-d10;
+@form-item-invalid-color: @color-error-d10;
+
 @form-tooltip-color: @color-primary-l10;
 
 @form-item-margin-bottom: @spacing-sm;

diff --git a/packages/components/header/style/index.less b/packages/components/header/style/index.less
@@ -68,6 +68,10 @@
     .@{icon-prefix}:hover {
       color: @header-suffix-active-color;
     }
+
+    .@{icon-prefix}:active when (@theme = seer) {
+      color: @color-blue-d10;
+    }
   }
 
   &-description {

diff --git a/packages/components/header/style/themes/seer.variable.less b/packages/components/header/style/themes/seer.variable.less
@@ -14,3 +14,5 @@
 @header-title-font-size-sm: @font-size-md;
 
 @header-prefix-border-right: none;
+@header-suffix-color: @color-graphite-d20;
+@header-suffix-active-color: @color-blue-l10;
diff --git a/packages/components/icon/demo/all.ts b/packages/components/icon/demo/all.ts
@@ -53,6 +53,7 @@ export const allIcons = [
   'delete',
   'delivered-procedure',
   'desktop',
+  'dialog-close',
   'disconnect',
   'dislike-filled',
   'dislike',

diff --git a/packages/components/icon/src/definitions.ts b/packages/components/icon/src/definitions.ts
@@ -275,6 +275,11 @@ export const Desktop = {
   svg: '<svg viewBox="0 0 1024 1024" focusable="false"><path d="M332.8 832h358.4q12.8 0 12.8 12.8v38.4q0 12.8-12.8 12.8H332.8q-12.8 0-12.8-12.8v-38.4q0-12.8 12.8-12.8Z"/><path d="M460.8 640h102.4q12.8 0 12.8 12.8v230.4q0 12.8-12.8 12.8H460.8q-12.8 0-12.8-12.8V652.8q0-12.8 12.8-12.8Z"/><path d="M947.2 64c7.04 0 12.8 5.76 12.8 12.8v614.4a12.8 12.8 0 0 1-12.8 12.8H76.8A12.8 12.8 0 0 1 64 691.2V76.8C64 69.76 69.76 64 76.8 64h870.4zM896 128H128v512h768V128z"/><path d="M204.8 192h550.4q12.8 0 12.8 12.8v38.4q0 12.8-12.8 12.8H204.8q-12.8 0-12.8-12.8v-38.4q0-12.8 12.8-12.8Zm0 128h166.4q12.8 0 12.8 12.8v38.4q0 12.8-12.8 12.8H204.8q-12.8 0-12.8-12.8v-38.4q0-12.8 12.8-12.8Z"/></svg>',
 }
 
+export const DialogClose = {
+  name: 'dialog-close',
+  svg: '<svg viewBox="0 0 1024 1024" focusable="false"><path fill-rule="evenodd" d="M916.741 210.766c4.999-4.999 4.999-13.103 0-18.102l-45.255-45.255c-4.999-4.999-13.103-4.999-18.102 0L532.073 468.721 210.766 147.414c-4.999-5-13.103-5-18.102 0l-45.255 45.254c-4.999 5-4.999 13.104 0 18.102l321.307 321.307-321.307 321.307c-5 5.001-4.999 13.103 0 18.102l45.255 45.255c4.999 4.999 13.101 5 18.102 0l321.307-321.307 321.311 321.312c5.001 5 13.103 4.999 18.102 0l45.255-45.255c4.999-4.999 5-13.101 0-18.102L595.43 532.077 916.74 210.766Z"/></svg>',
+}
+
 export const Disconnect = {
   name: 'disconnect',
   svg: '<svg viewBox="0 0 1024 1024" focusable="false"><path d="M579.84 683.648 444.032 819.52c-99.968 99.968-241.792 120.192-316.8 45.248-74.944-75.008-54.72-216.832 45.248-316.8l135.872-135.872 45.312 45.312-137.152 137.024c-74.944 75.008-95.232 176.32-45.248 226.304 48.192 48.192 151.296 29.696 226.112-45.44l137.152-136.96 45.376 45.312zm272.512-544c74.944 75.008 54.72 216.832-45.312 316.8L670.4 593.152l-45.312-45.312L761.28 411.712c75.008-74.944 95.232-176.256 45.248-226.24-48.192-48.192-152.064-23.104-226.112 45.44l-136.192 136-45.376-45.376L535.552 184.96c99.968-100.032 241.792-120.32 316.8-45.312zM353.728 276.224l-45.248 45.248-135.744-135.744 45.248-45.248zm99.904-222.4v128h-64v-128zM86.08 357.376h128v64h-128zm629.696 280.896-45.248 45.248 135.744 135.744 45.248-45.248zm222.4-99.904h-128v64h128zM634.624 905.92v-128h-64v128z"/></svg>',

diff --git a/packages/components/icon/src/dependencies.ts b/packages/components/icon/src/dependencies.ts
@@ -20,6 +20,7 @@ import {
   CloseCircle,
   CloseCircleFilled,
   Collapse,
+  DialogClose,
   DoubleLeft,
   DoubleRight,
   Down,
@@ -69,10 +70,11 @@ export const IDUX_ICON_DEPENDENCIES: IconDefinition[] = [
   CheckCircleFilled, // Progress Modal FormItem
   Clear, // Transfer
   ClockCircle, // TimePicker
-  Close, // Stepper Modal Drawer Image Message Alert Transfer
+  Close, // Stepper Image Message Alert Transfer
   CloseCircle, // TimePicker TimeRangePicker Input Textarea Notification
   CloseCircleFilled, // Modal FormItem
   Collapse, // Pro Tree
+  DialogClose, // Modal Drawer
   DoubleLeft, // Pagination
   DoubleRight, // Pagination
   Down, // Select Table

diff --git a/packages/components/modal/__tests__/modal.spec.ts b/packages/components/modal/__tests__/modal.spec.ts
@@ -87,7 +87,7 @@ describe('Modal', () => {
   })
 
   test('closable work', async () => {
-    const wrapper = ModalMount({ props: { closable: false } })
+    const wrapper = ModalMount({ props: { closable: false, closeIcon: 'close' } })
     const modalWrapper = wrapper.getComponent(ModalWrapper)
 
     expect(modalWrapper.find('.ix-icon-close').exists()).toBe(false)

diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less
@@ -128,6 +128,10 @@
     min-height: @modal-footer-min-height;
     padding: @modal-footer-padding;
 
+    .@{button-prefix} {
+      vertical-align: bottom;
+    }
+
     .@{button-prefix} + .@{button-prefix} {
       margin-left: @modal-footer-button-margin-left;
     }

diff --git a/packages/components/pagination/style/index.less b/packages/components/pagination/style/index.less
@@ -5,6 +5,7 @@
   .reset-component();
 
   display: flex;
+  align-items: center;
 
   &-item,
   &-total,

diff --git a/packages/components/progress/src/composables/useInfo.ts b/packages/components/progress/src/composables/useInfo.ts
@@ -8,7 +8,7 @@
 import type { ConvertProgressSuccess, ProgressProps, ProgressStatus } from '../types'
 import type { ProgressConfig } from '@idux/components/config'
 
-import { type ComputedRef, computed } from 'vue'
+import { type ComputedRef, type VNodeChild, computed } from 'vue'
 
 import { isFunction } from 'lodash-es'
 
@@ -21,7 +21,7 @@ export const useInfo = (
   percent: ComputedRef<number>,
   success: ComputedRef<ConvertProgressSuccess>,
 ): {
-  formattedText: ComputedRef<string>
+  formattedText: ComputedRef<VNodeChild>
   showFormat: ComputedRef<boolean>
   showSuccessIcon: ComputedRef<boolean>
   showExceptionIcon: ComputedRef<boolean>

diff --git a/packages/components/progress/style/index.less b/packages/components/progress/style/index.less
@@ -103,10 +103,16 @@
 
   &-success-icon {
     color: @progress-success-background-color;
+    .@{progress-prefix}-line & when (@theme = seer) {
+      font-size: @font-size-lg;
+    }
   }
 
   &-exception-icon {
     color: @progress-exception-background-color;
+    .@{progress-prefix}-line & when (@theme = seer) {
+      font-size: @font-size-lg;
+    }
   }
   // circle
 

diff --git a/packages/components/progress/style/themes/seer.variable.less b/packages/components/progress/style/themes/seer.variable.less
@@ -1,3 +1,4 @@
 @import './default.variable.less';
 
+@progress-line-font-size-md: @font-size-sm;
 @progress-exception-background-color: @color-red-l10;
diff --git a/packages/components/radio/style/index.less b/packages/components/radio/style/index.less
@@ -103,7 +103,7 @@
         border-color: @radio-disabled-border-color;
 
         &::after {
-          background-color: @radio-disabled-border-color;
+          background-color: if((@theme = seer), @color-graphite-l10, @radio-disabled-border-color);
         }
       }
     }

diff --git a/packages/components/rate/style/themes/seer.variable.less b/packages/components/rate/style/themes/seer.variable.less
@@ -1 +1,4 @@
 @import './default.variable.less';
+
+@rate-placeholder-color: @color-graphite-l10;
+@rate-active-color: @color-brown-l10;
diff --git a/packages/components/result/style/index.less b/packages/components/result/style/index.less
@@ -10,6 +10,7 @@
   &-icon {
     margin-bottom: @result-icon-margin;
     font-size: @result-icon-size;
+    line-height: 1;
   }
 
   &-title {
@@ -22,8 +23,9 @@
   &-subtitle {
     font-size: @result-subtitle-font-size;
     line-height: @result-subtitle-line-height;
-    font-weight: @result-subtitle-font-weight;
     color: @result-subtitle-color;
+    font-weight: @result-subtitle-font-weight;
+    margin-top: @result-subtitle-margin-top;
   }
 
   &-extra {

diff --git a/packages/components/skeleton/style/themes/default.variable.less b/packages/components/skeleton/style/themes/default.variable.less
@@ -2,6 +2,6 @@
 
 @skeleton-loader-margin-bottom: @spacing-xs;
 
-@skeleton-start-color: @color-grey-l20;
+@skeleton-start-color: @color-graphite-l40;
 
-@skeleton-end-color: @color-grey-l30;
+@skeleton-end-color: @color-graphite-l30;
diff --git a/packages/components/spin/style/index.less b/packages/components/spin/style/index.less
@@ -108,7 +108,7 @@
     transition: opacity @transition-duration-base;
 
     &-blur {
-      opacity: 0.5;
+      opacity: 0.7;
       user-select: none;
       clear: both;
       overflow: hidden;

diff --git a/packages/components/statistic/demo/Unit.vue b/packages/components/statistic/demo/Unit.vue
@@ -37,12 +37,12 @@ export default defineComponent({
 .statistic-demo-unit {
   .unit-up {
     :deep(.ix-statistic-content) {
-      color: red;
+      color: #cf171d;
     }
   }
   .unit-down {
     :deep(.ix-statistic-content) {
-      color: green;
+      color: #12a679;
     }
   }
 }

diff --git a/packages/components/statistic/style/themes/seer.variable.less b/packages/components/statistic/style/themes/seer.variable.less
@@ -1 +1,3 @@
 @import './default.variable.less';
+
+@statistic-color: @color-graphite-d40;