refactor(theme-chalk): remove default size class & simplify button css (#6782)

* refactor(theme-chalk): [button] remove default size class & simplify css

* test: fix test caused by size remove default

* fix: adapt for form default & remove tag default button m 0

* fix: add uno.css & bem for tag

docs/.vitepress/vitepress/index.ts

@@ -10,6 +10,8 @@ import '../../../packages/theme-chalk/src/dark/css-vars.scss'
 
 import './styles/app.scss'
 
+import 'uno.css'
+
 import VPApp from './components/vp-app.vue'
 import VPDemo from './components/vp-demo.vue'
 import Changelog from './components/globals/vp-changelog.vue'

packages/components/config-provider/__tests__/config-provider.spec.ts

@@ -152,14 +152,10 @@ describe('config-provider', () => {
         `,
       })
       await nextTick()
-      expect(wrapper.find('button').classes().join('')).toBe(
-        'el-button' + 'el-button--default'
-      )
+      expect(wrapper.find('button').classes().join('')).toBe('el-button')
       wrapper.vm.namespace = 'ep'
       await nextTick()
-      expect(wrapper.find('button').classes().join('')).toBe(
-        'ep-button' + 'ep-button--default'
-      )
+      expect(wrapper.find('button').classes().join('')).toBe('ep-button')
     })
   })
 

packages/components/config-provider/src/config-provider.ts

@@ -23,7 +23,7 @@ export const configProviderProps = buildProps({
 
   size: {
     type: String,
-    values: ['large', 'default', 'small'],
+    values: ['large', '', 'small'],
   },
 
   button: {

packages/components/form/src/form.vue

@@ -37,7 +37,9 @@ const formClasses = computed(() => {
   const { labelPosition, inline } = props
   return [
     ns.b(),
-    ns.m(formSize.value),
+    // todo: in v2.2.0, we can remove default
+    // in fact, remove it doesn't affect the final style
+    ns.m(formSize.value || 'default'),
     {
       [ns.m(`label-${labelPosition}`)]: labelPosition,
       [ns.m('inline')]: inline,

packages/components/input/__tests__/input.spec.tsx

@@ -89,7 +89,6 @@ describe('Input.vue', () => {
       expect(Array.from(vm.$el.classList)).toMatchInlineSnapshot(`
         Array [
           "el-input",
-          "el-input--default",
           "is-exceed",
           "test-exceed",
         ]
@@ -123,7 +122,6 @@ describe('Input.vue', () => {
       expect(Array.from(vm.$el.classList)).toMatchInlineSnapshot(`
         Array [
           "el-textarea",
-          "el-input--default",
           "is-exceed",
         ]
       `)
@@ -252,7 +250,6 @@ describe('Input.vue', () => {
     expect(Array.from(inputElm4.classList)).toMatchInlineSnapshot(`
       Array [
         "el-input",
-        "el-input--default",
         "is-exceed",
         "test-initial-exceed",
       ]
@@ -267,7 +264,6 @@ describe('Input.vue', () => {
     expect(Array.from(inputElm4.classList)).toMatchInlineSnapshot(`
       Array [
         "el-input",
-        "el-input--default",
         "test-initial-exceed",
       ]
     `)

packages/components/rate/__tests__/rate.vitest.tsx

@@ -24,7 +24,7 @@ describe('Rate.vue', () => {
     })
     expect(wrapper.find('.el-rate--large').exists()).toBe(true)
     await wrapper.setProps({ size: '' })
-    expect(wrapper.find('.el-rate--default').exists()).toBe(true)
+    expect(wrapper.find('.el-rate').exists()).toBe(true)
   })
 
   it('allow half', async () => {

packages/constants/size.ts

@@ -1,2 +1,2 @@
-export const componentSizes = ['default', 'small', 'large'] as const
+export const componentSizes = ['', 'default', 'small', 'large'] as const
 export type ComponentSize = typeof componentSizes[number]

packages/hooks/__tests__/use-form-item.vitest.tsx

@@ -31,7 +31,7 @@ const mountComponent = (setup = NOOP, options = {}) =>
 describe('use-form-item', () => {
   it('should return local value', () => {
     const wrapper = mountComponent()
-    expect(wrapper.find('.el-button--default').exists()).toBe(true)
+    expect(wrapper.find('.el-button').exists()).toBe(true)
   })
 
   it('should return props.size instead of injected.size', () => {

packages/hooks/use-common-props/index.ts

@@ -35,7 +35,7 @@ export const useSize = (
       formItem?.size ||
       form?.size ||
       globalConfig.value ||
-      'default'
+      ''
   )
 }
 

packages/theme-chalk/src/button.scss

@@ -6,10 +6,6 @@
 @use 'mixins/utils' as *;
 @use 'mixins/var' as *;
 
-@include b(button) {
-  @include set-component-css-var('button', $button);
-}
-
 $button-icon-span-gap: () !default;
 $button-icon-span-gap: map.merge(
   (
@@ -20,6 +16,10 @@ $button-icon-span-gap: map.merge(
   $button-icon-span-gap
 );
 
+@include b(button) {
+  @include set-component-css-var('button', $button);
+}
+
 @include b(button) {
   display: inline-flex;
   justify-content: center;
@@ -30,20 +30,16 @@ $button-icon-span-gap: map.merge(
   height: map.get($input-height, 'default');
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--el-button-bg-color, #{map.get($button, 'bg-color')});
-  border: var(--el-border);
-  border-color: var(
-    --el-button-border-color,
-    #{map.get($button, 'border-color')}
-  );
-  color: var(--el-button-text-color, #{map.get($button, 'text-color')});
+  background-color: getCssVar('button', 'bg-color');
+  border: getCssVar('border');
+  border-color: getCssVar('button', 'border-color');
+  color: getCssVar('button', 'text-color');
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
   outline: none;
-  margin: 0;
   transition: 0.1s;
-  font-weight: var(--el-button-font-weight);
+  font-weight: getCssVar('button', 'font-weight');
   user-select: none;
   vertical-align: middle;
 
@@ -65,25 +61,16 @@ $button-icon-span-gap: map.merge(
 
   &:hover,
   &:focus {
-    color: var(--el-button-hover-text-color);
-    border-color: var(
-      --el-button-hover-border-color,
-      var(--el-button-hover-bg-color)
-    );
-    background-color: var(--el-button-hover-bg-color);
+    color: getCssVar('button', 'hover', 'text-color');
+    border-color: getCssVar('button', 'hover', 'border-color');
+    background-color: getCssVar('button', 'hover', 'bg-color');
     outline: none;
   }
 
   &:active {
-    color: var(--el-button-active-text-color);
-    border-color: var(
-      --el-button-active-border-color,
-      var(--el-button-active-bg-color)
-    );
-    background-color: var(
-      --el-button-active-bg-color,
-      var(--el-button-bg-color)
-    );
+    color: getCssVar('button', 'active', 'text-color');
+    border-color: getCssVar('button', 'active', 'border-color');
+    background-color: getCssVar('button', 'active', 'bg-color');
     outline: none;
   }
 
@@ -101,32 +88,24 @@ $button-icon-span-gap: map.merge(
   }
 
   @include when(plain) {
-    --el-button-active-text-color: #{mix(
-        $color-black,
-        $color-primary,
-        $button-active-shade-percent
-      )};
-    --el-button-active-border-color: #{mix(
-        $color-black,
-        $color-primary,
-        $button-active-shade-percent
-      )};
-
-    --el-button-hover-text-color: var(--el-color-primary);
+    @include css-var-from-global(
+      ('button', 'hover', 'text-color'),
+      ('color', 'primary')
+    );
     @include css-var-from-global(
       ('button', 'hover-bg-color'),
       ('fill-color', 'blank')
     );
-    --el-button-hover-border-color: var(--el-color-primary);
+    @include css-var-from-global(
+      ('button', 'hover-border-color'),
+      ('color', 'primary')
+    );
   }
 
   @include when(active) {
-    color: var(--el-button-active-text-color);
-    border-color: var(
-      --el-button-active-border-color,
-      --el-button-active-bg-color
-    );
-    background-color: var(--el-button-active-bg-color);
+    color: getCssVar('button', 'active', 'text-color');
+    border-color: getCssVar('button', 'active', 'border-color');
+    background-color: getCssVar('button', 'active', 'bg-color');
     outline: none;
   }
 
@@ -134,25 +113,11 @@ $button-icon-span-gap: map.merge(
     &,
     &:hover,
     &:focus {
-      color: var(--el-button-disabled-text-color);
+      color: getCssVar('button', 'disabled', 'text-color');
       cursor: not-allowed;
       background-image: none;
-      background-color: var(--el-button-disabled-bg-color);
-      border-color: var(--el-button-disabled-border-color);
-    }
-
-    &.#{$namespace}-button--text {
-      background-color: transparent;
-    }
-
-    &.is-plain {
-      &,
-      &:hover,
-      &:focus {
-        background-color: getCssVar('fill-color', 'blank');
-        border-color: var(--el-button-disabled-border-color);
-        color: var(--el-button-disabled-text-color);
-      }
+      background-color: getCssVar('button', 'disabled', 'bg-color');
+      border-color: getCssVar('button', 'disabled', 'border-color');
     }
   }
 
@@ -173,7 +138,7 @@ $button-icon-span-gap: map.merge(
     }
   }
   @include when(round) {
-    border-radius: var(--el-border-radius-round);
+    border-radius: getCssVar('border-radius', 'round');
   }
   @include when(circle) {
     border-radius: 50%;
@@ -187,12 +152,6 @@ $button-icon-span-gap: map.merge(
     }
   }
 
-  @include m(default) {
-    --el-button-text-color: var(--el-text-color-regular);
-    --el-button-hover-text-color: var(--el-color-primary);
-    --el-button-disabled-text-color: var(--el-text-color-placeholder);
-  }
-
   @each $type in (primary, success, warning, danger, info) {
     @include m($type) {
       @include button-variant($type);
@@ -201,8 +160,12 @@ $button-icon-span-gap: map.merge(
 
   @each $size in (large, small) {
     @include m($size) {
-      --el-button-size: #{map.get($input-height, $size)};
-      height: var(--el-button-size);
+      @include set-css-var-value(
+        ('button', 'size'),
+        map.get($input-height, $size)
+      );
+
+      height: getCssVar('button', 'size');
 
       & [class*='#{$namespace}-icon'] {
         & + span {
@@ -218,7 +181,7 @@ $button-icon-span-gap: map.merge(
       );
 
       @include when(circle) {
-        width: var(--el-button-size);
+        width: getCssVar('button', 'size');
         padding: map.get($button-padding-vertical, $size) - $button-border-width;
       }
     }
@@ -226,19 +189,19 @@ $button-icon-span-gap: map.merge(
 
   @include m(text) {
     border-color: transparent;
-    color: var(--el-color-primary);
+    color: getCssVar('color', 'primary');
     background: transparent;
     padding-left: 0;
     padding-right: 0;
 
     &:hover,
     &:focus {
-      color: var(--el-color-primary-light-3);
+      color: getCssVar('color', 'primary', 'light-3');
       border-color: transparent;
       background-color: transparent;
     }
     &:active {
-      color: mix($color-black, $color-primary, $button-active-shade-percent);
+      color: getCssVar('color', 'primary', 'dark-2');
       border-color: transparent;
       background-color: transparent;
     }

packages/theme-chalk/src/common/var.scss

@@ -612,17 +612,17 @@ $button: map.merge(
     'font-weight': getCssVar('font-weight-primary'),
     'border-color': getCssVar('border-color'),
     'bg-color': getCssVar('fill-color', 'blank'),
-    'text-color': getCssVar('text-color-regular'),
+    'text-color': getCssVar('text-color', 'regular'),
     'disabled-text-color': getCssVar('disabled-text-color'),
     'disabled-bg-color': getCssVar('fill-color', 'blank'),
     'disabled-border-color': getCssVar('border-color-light'),
     'divide-border-color': rgba($color-white, 0.5),
     'hover-text-color': getCssVar('color-primary'),
-    'hover-bg-color': getCssVar('color-primary-light-9'),
+    'hover-bg-color': getCssVar('color-primary', 'light-9'),
     'hover-border-color': getCssVar('color-primary-light-7'),
     'active-text-color': getCssVar('button-hover-text-color'),
     'active-border-color': getCssVar('color-primary'),
-    'active-bg-color': getCssVar('button-hover-bg-color'),
+    'active-bg-color': getCssVar('button', 'hover-bg-color'),
   ),
   $button
 );

packages/theme-chalk/src/mixins/_button.scss

@@ -4,7 +4,7 @@
 @use '../mixins/function' as *;
 @use '../common/var' as *;
 
-@mixin button-plain($color, $type) {
+@mixin button-plain($type) {
   $button-color-types: (
     '': (
       'text-color': (
@@ -41,10 +41,6 @@
         'color',
         'white',
       ),
-      'border-color': (
-        'color',
-        $type,
-      ),
     ),
   );
 
@@ -135,7 +131,7 @@
   }
 
   &.is-plain {
-    @include button-plain(var(--el-button-bg-color), $type);
+    @include button-plain($type);
   }
 }
 

packages/theme-chalk/src/reset.scss

@@ -13,7 +13,7 @@ body {
 }
 
 a {
-  color: var(--el-color-primary);
+  color: getCssVar('color', 'primary');
   text-decoration: none;
 
   &:hover,
@@ -22,7 +22,7 @@ a {
   }
 
   &:active {
-    color: mix($color-black, $color-primary, $button-active-shade-percent);
+    color: getCssVar('color-primary', 'dark-2');
   }
 }
 
@@ -32,7 +32,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: var(--el-text-color-regular);
+  color: getCssVar('text-color', 'regular');
   font-weight: inherit;
 
   &:first-child {

packages/theme-chalk/src/tag.scss

@@ -97,6 +97,7 @@ $tag-icon-span-gap: map.merge(
 
   height: map.get($tag-height, 'default');
   padding: 0 map.get($tag-padding, 'default') - $border-width;
+
   font-size: var(--el-tag-font-size);
   line-height: 1;
   border-width: $tag-border-width;
@@ -133,7 +134,7 @@ $tag-icon-span-gap: map.merge(
     padding-right: map.get($tag-icon-span-gap, 'default') - $border-width;
   }
 
-  @each $size in (large, default, small) {
+  @each $size in (large, small) {
     @include m($size) {
       padding: 0 map.get($tag-padding, $size) - $tag-border-width;
       height: map.get($tag-height, $size);
@@ -157,7 +158,7 @@ $tag-icon-span-gap: map.merge(
   }
 
   @each $type in $types {
-    &.#{$namespace}-tag--#{$type} {
+    &.#{bem('tag', '', $type)} {
       @include when(hit) {
         border-color: getCssVar('color', $type);
       }