bkui-vue 0.0.2-beta.129 → 0.0.2-beta.130

package/lib/menu/submenu.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/message/message.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/modal/modal.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/navigation/navigation.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/notify/notify.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/pagination/pagination.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/pop-confirm/pop-confirm.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/popover/popover.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/preset.d.ts

@@ -127,6 +127,11 @@ declare const _default: {
                     copySuccess: string;
                     copyFailed: string;
                 };
+                cascader: {
+                    pleaseSelect: string;
+                    noData: string;
+                    emptyText: string;
+                };
             }>;
         };
         prefix: {
@@ -261,6 +266,11 @@ declare const _default: {
                     copySuccess: string;
                     copyFailed: string;
                 };
+                cascader: {
+                    pleaseSelect: string;
+                    noData: string;
+                    emptyText: string;
+                };
             }>;
         };
         prefix: {

package/lib/process/process.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/progress/progress.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/radio/common.d.ts

@@ -6,6 +6,7 @@ export declare function useFocus(): [Ref<boolean>, {
     focus: () => void;
 }];
 export declare const useRadio: () => {
+    size: Ref<string>;
     isChecked: Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
     setChecked: (value?: boolean) => void;

package/lib/radio/index.d.ts

@@ -96,6 +96,7 @@ declare const BkRadio: {
             onChange?: (value: any) => any;
             "onUpdate:modelValue"?: (value: any) => any;
         }, {
+            size: import("vue").Ref<string>;
             isFocused: import("vue").Ref<boolean>;
             isChecked: import("vue").Ref<boolean>;
             isDisabled: import("vue").ComputedRef<boolean>;
@@ -158,6 +159,7 @@ declare const BkRadio: {
         onChange?: (value: any) => any;
         "onUpdate:modelValue"?: (value: any) => any;
     } & import("vue").ShallowUnwrapRef<{
+        size: import("vue").Ref<string>;
         isFocused: import("vue").Ref<boolean>;
         isChecked: import("vue").Ref<boolean>;
         isDisabled: import("vue").ComputedRef<boolean>;
@@ -196,6 +198,7 @@ declare const BkRadio: {
     onChange?: (value: any) => any;
     "onUpdate:modelValue"?: (value: any) => any;
 }, {
+    size: import("vue").Ref<string>;
     isFocused: import("vue").Ref<boolean>;
     isChecked: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
@@ -231,6 +234,7 @@ declare const BkRadio: {
         type: import("vue-types").VueTypeDef<string> & {
             default: string;
         };
+        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     }, {
         resolveClassName: (cls: string) => string;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -254,6 +258,7 @@ declare const BkRadio: {
         type: import("vue-types").VueTypeDef<string> & {
             default: string;
         };
+        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     }>> & {
         onChange?: (value: any) => any;
         "onUpdate:modelValue"?: (value: any) => any;
@@ -288,6 +293,7 @@ declare const BkRadio: {
         size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     }, {
         isFocused: import("vue").Ref<boolean>;
+        size: import("vue").Ref<string>;
         isChecked: import("vue").Ref<boolean>;
         isDisabled: import("vue").ComputedRef<boolean>;
         setChecked: (value?: boolean) => void;

package/lib/radio/index.js

@@ -199,6 +199,7 @@ var useRadio = function useRadio() {
   var radioGroup = (0,external_vue_namespaceObject.inject)(radioGroupKey, external_shared_namespaceObject.EMPTY_OBJ);
   var isGroup = !(0,external_shared_namespaceObject.isEmptyObj)(radioGroup);
   var isChecked = (0,external_vue_namespaceObject.ref)(false);
+  var size = (0,external_vue_namespaceObject.ref)('default');
   // 禁用状态
   var isDisabled = (0,external_vue_namespaceObject.computed)(function () {
     if (isGroup && radioGroup.props.disabled) {
@@ -208,6 +209,7 @@ var useRadio = function useRadio() {
   });
   // 响应modelValue
   if (isGroup) {
+    size.value = radioGroup.props.size;
     (0,external_vue_namespaceObject.watch)(function () {
       return radioGroup.props.modelValue;
     }, function (modelValue) {
@@ -263,6 +265,7 @@ var useRadio = function useRadio() {
     }
   });
   return {
+    size: size,
     isChecked: isChecked,
     isDisabled: isDisabled,
     setChecked: setChecked,
@@ -328,6 +331,7 @@ var radioProps = {
       handleBlur = _useFocus2$.blur,
       handleFocus = _useFocus2$.focus;
     var _useRadio = useRadio(),
+      size = _useRadio.size,
       isChecked = _useRadio.isChecked,
       isDisabled = _useRadio.isDisabled,
       setChecked = _useRadio.setChecked,
@@ -335,6 +339,7 @@ var radioProps = {
     var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     return {
+      size: size,
       isFocused: isFocused,
       isChecked: isChecked,
       isDisabled: isDisabled,
@@ -348,7 +353,7 @@ var radioProps = {
   render: function render() {
     var _classes,
       _this = this;
-    var radioClass = (0,external_shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(this.resolveClassName('radio')), true), _defineProperty(_classes, 'is-focused', this.isFocused), _defineProperty(_classes, 'is-disabled', this.isDisabled), _defineProperty(_classes, 'is-checked', this.isChecked), _classes));
+    var radioClass = (0,external_shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(this.resolveClassName('radio')), true), _defineProperty(_classes, "".concat(this.resolveClassName('radio'), "-").concat(this.size), true), _defineProperty(_classes, 'is-focused', this.isFocused), _defineProperty(_classes, 'is-disabled', this.isDisabled), _defineProperty(_classes, 'is-checked', this.isChecked), _classes));
     var renderLabel = function renderLabel() {
       if (!_this.label && !_this.$slots["default"]) {
         return null;
@@ -433,6 +438,7 @@ var radioButtonProps = {
       handleBlur = _useFocus2$.blur,
       handleFocus = _useFocus2$.focus;
     var _useRadio = useRadio(),
+      size = _useRadio.size,
       isChecked = _useRadio.isChecked,
       isDisabled = _useRadio.isDisabled,
       setChecked = _useRadio.setChecked,
@@ -441,6 +447,7 @@ var radioButtonProps = {
       resolveClassName = _usePrefix.resolveClassName;
     return {
       isFocused: isFocused,
+      size: size,
       isChecked: isChecked,
       isDisabled: isDisabled,
       setChecked: setChecked,
@@ -453,7 +460,7 @@ var radioButtonProps = {
   render: function render() {
     var _classes,
       _this = this;
-    var radioClass = (0,external_shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(this.resolveClassName('radio-button')), true), _defineProperty(_classes, 'is-focused', this.isFocused), _defineProperty(_classes, 'is-disabled', this.isDisabled), _defineProperty(_classes, 'is-checked', this.isChecked), _classes));
+    var radioClass = (0,external_shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(this.resolveClassName('radio-button')), true), _defineProperty(_classes, "".concat(this.resolveClassName('radio-button'), "-").concat(this.size), true), _defineProperty(_classes, 'is-focused', this.isFocused), _defineProperty(_classes, 'is-disabled', this.isDisabled), _defineProperty(_classes, 'is-checked', this.isChecked), _classes));
     var renderLabel = function renderLabel() {
       if (!_this.label && !_this.$slots["default"]) {
         return null;
@@ -514,7 +521,8 @@ var radioGroupProps = {
   modelValue: external_shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]),
   disabled: external_shared_namespaceObject.PropTypes.bool,
   withValidate: external_shared_namespaceObject.PropTypes.bool.def(true),
-  type: external_shared_namespaceObject.PropTypes.oneOf(['tab', 'capsule', 'card']).def('tab')
+  type: external_shared_namespaceObject.PropTypes.oneOf(['tab', 'capsule', 'card']).def('tab'),
+  size: external_shared_namespaceObject.PropTypes.size()
 };
 /* harmony default export */ const radio_group = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'RadioGroup',

package/lib/radio/radio-button.d.ts

@@ -49,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
     size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 }, {
     isFocused: import("vue").Ref<boolean>;
+    size: import("vue").Ref<string>;
     isChecked: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
     setChecked: (value?: boolean) => void;

package/lib/radio/radio-group.d.ts

@@ -17,6 +17,7 @@ declare const radioGroupProps: {
     type: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 };
 export type RadioGroupProps = Readonly<ExtractPropTypes<typeof radioGroupProps>>;
 declare const _default: import("vue").DefineComponent<{
@@ -37,6 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     type: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 }, {
     resolveClassName: (cls: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -60,6 +62,7 @@ declare const _default: import("vue").DefineComponent<{
     type: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 }>> & {
     onChange?: (value: any) => any;
     "onUpdate:modelValue"?: (value: any) => any;

package/lib/radio/radio.css

@@ -5,7 +5,6 @@
 .bk-radio {
   display: inline-flex;
   align-items: center;
-  font-size: 12px;
   font-weight: normal;
   letter-spacing: normal;
   color: #63656e;
@@ -17,6 +16,9 @@
 .bk-radio ~ .bk-radio {
   margin-left: 24px;
 }
+.bk-radio.bk-radio-small .bk-radio-label {
+  font-size: 12px;
+}
 .bk-radio.is-checked .bk-radio-input {
   padding: 3px;
   color: #3a84ff;
@@ -63,7 +65,7 @@
 }
 .bk-radio-label {
   margin-left: 6px;
-  font-size: 12px;
+  font-size: 14px;
   font-style: normal;
   font-weight: normal;
   vertical-align: middle;
@@ -82,7 +84,19 @@
   opacity: 1;
   user-select: none;
 }
-.bk-radio-button-input {
+.bk-radio-button.bk-radio-button-small .bk-radio-button-label {
+  height: 26px;
+  padding: var(--component-size-small-padding);
+  font-size: 12px;
+  line-height: 26px;
+}
+.bk-radio-button.bk-radio-button-large .bk-radio-button-label {
+  height: 40px;
+  padding: var(--component-size-large-padding);
+  font-size: 16px;
+  line-height: 40px;
+}
+.bk-radio-button .bk-radio-button-input {
   position: absolute;
   z-index: -1;
   width: 100%;
@@ -94,7 +108,7 @@
 }
 .bk-radio-button .bk-radio-button-label {
   width: 100%;
-  padding: 0 18px;
+  padding: var(--component-size-base-padding);
   font-size: 12px;
   font-style: normal;
   font-weight: normal;

package/lib/radio/radio.d.ts

@@ -46,6 +46,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
+    size: import("vue").Ref<string>;
     isFocused: import("vue").Ref<boolean>;
     isChecked: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;

package/lib/radio/radio.less

@@ -9,7 +9,6 @@
 .@{bk-prefix}-radio {
   display: inline-flex;
   align-items: center;
-  font-size: @font-size-base;
   font-weight: normal;
   letter-spacing: normal;
   color: @radio-font-color;
@@ -21,6 +20,11 @@
   & ~ .@{bk-prefix}-radio {
     margin-left: 24px;
   }
+  &.@{bk-prefix}-radio-small {
+    .@{bk-prefix}-radio-label {
+      font-size: @font-size-base;
+    }
+  }
 
   &.is-checked {
     .@{bk-prefix}-radio-input {
@@ -83,7 +87,7 @@
 
 .@{bk-prefix}-radio-label {
   margin-left: 6px;
-  font-size: 12px;
+  font-size: @font-size-medium;
   font-style: normal;
   font-weight: normal;
   vertical-align: middle;
@@ -104,7 +108,37 @@
   opacity: 1;
   user-select: none;
 
-  &-input {
+  @sizeSelectors: small, large;
+
+  @btnHeight: @component-size-base;
+  @btnPadding: @component-size-base-padding;
+  @btnBorderRadius: @border-radius-base;
+
+  @smallBtnHeight: @component-size-small;
+  @smallBtnPadding: @component-size-small-padding;
+  @smallBtnFontSize: @font-size-base;
+
+  @largeBtnHeight: @component-size-large;
+  @largeBtnPadding: @component-size-large-padding;
+  @largeBtnFontSize: @font-size-large;
+
+  each(@sizeSelectors, {
+    @sizeBtnHeight: '@{value}BtnHeight';
+    @sizeBtnPadding: '@{value}BtnPadding';
+    @sizeBtnFontSize: '@{value}BtnFontSize';
+
+    &.@{bk-prefix}-radio-button-@{value}{
+      .@{bk-prefix}-radio-button-label{
+        height: @@sizeBtnHeight;
+        padding: @@sizeBtnPadding;
+        font-size: @@sizeBtnFontSize;
+        line-height: @@sizeBtnHeight;
+      }
+    }
+  });
+
+
+  .@{bk-prefix}-radio-button-input {
     position: absolute;
     z-index: -1;
     width: 100%;
@@ -117,8 +151,8 @@
 
   .@{bk-prefix}-radio-button-label {
     width: 100%;
-    padding: 0 18px;
-    font-size: 12px;
+    padding: @btnPadding;
+    font-size: @font-size-base;
     font-style: normal;
     font-weight: normal;
     line-height: @component-size-base;
@@ -149,7 +183,6 @@
   }
 }
 
-
 .@{bk-prefix}-radio-capsule {
   padding: 4px;
   background: #f0f1f5;
@@ -192,7 +225,8 @@
   }
 }
 
-.@{bk-prefix}-radio-tab,.@{bk-prefix}-radio-card {
+.@{bk-prefix}-radio-tab,
+.@{bk-prefix}-radio-card {
 
   .@{bk-prefix}-radio-button {
     overflow: hidden;

package/lib/radio/radio.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -128,7 +131,6 @@
 .bk-radio {
   display: inline-flex;
   align-items: center;
-  font-size: var(--font-size-base);
   font-weight: normal;
   letter-spacing: normal;
   color: var(--radio-font-color);
@@ -140,6 +142,9 @@
 .bk-radio ~ .bk-radio {
   margin-left: 24px;
 }
+.bk-radio.bk-radio-small .bk-radio-label {
+  font-size: var(--font-size-base);
+}
 .bk-radio.is-checked .bk-radio-input {
   padding: 3px;
   color: var(--radio-active-color);
@@ -186,7 +191,7 @@
 }
 .bk-radio-label {
   margin-left: 6px;
-  font-size: 12px;
+  font-size: var(--font-size-medium);
   font-style: normal;
   font-weight: normal;
   vertical-align: middle;
@@ -205,7 +210,19 @@
   opacity: 1;
   user-select: none;
 }
-.bk-radio-button-input {
+.bk-radio-button.bk-radio-button-small .bk-radio-button-label {
+  height: var(--component-size-small);
+  padding: var(--component-size-small-padding);
+  font-size: var(--font-size-base);
+  line-height: var(--component-size-small);
+}
+.bk-radio-button.bk-radio-button-large .bk-radio-button-label {
+  height: var(--component-size-large);
+  padding: var(--component-size-large-padding);
+  font-size: var(--font-size-large);
+  line-height: var(--component-size-large);
+}
+.bk-radio-button .bk-radio-button-input {
   position: absolute;
   z-index: -1;
   width: 100%;
@@ -217,8 +234,8 @@
 }
 .bk-radio-button .bk-radio-button-label {
   width: 100%;
-  padding: 0 18px;
-  font-size: 12px;
+  padding: var(--component-size-base-padding);
+  font-size: var(--font-size-base);
   font-style: normal;
   font-weight: normal;
   line-height: var(--component-size-base);

package/lib/rate/rate.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/rate/star.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/resize-layout/resize-layout.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/search-select/search-select.variable.css

@@ -22,6 +22,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/select/select.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/sideslider/sideslider.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/slider/slider.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/steps/steps.variable.css

@@ -22,6 +22,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/styles/mixins/animate.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/styles/mixins/popper.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/styles/mixins/scroll.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/styles/reset.variable.css

@@ -21,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;