@sheinx/shineout-style 3.9.13-beta.1 → 3.9.13-beta.11

package/esm/select/select.js

@@ -89,6 +89,9 @@ var selectStyle = _objectSpread(_objectSpread({
       '& $placeholder,$ellipsis,$space,input': {
         marginTop: 0,
         marginBottom: 0
+      },
+      '& $arrowIcon': {
+        width: token.inputSmallFontSize
       }
     },
     '&$wrapperLarge': {
@@ -97,7 +100,7 @@ var selectStyle = _objectSpread(_objectSpread({
         marginBottom: token.selectLargePlaceholderMarginY
       },
       '& $arrowIcon': {
-        width: token.selectLargeFontSize
+        width: token.inputLargeFontSize
       }
     },
     '&:hover': _objectSpread(_objectSpread({}, wrapper['&:hover']), {}, {
@@ -124,7 +127,7 @@ var selectStyle = _objectSpread(_objectSpread({
       color: token.selectDisabledIconColor
     },
     '& $placeholder': {
-      color: token.selectDisabledPlaceholderColor
+      color: token.inputDisabledPlaceholderColor
     }
   }),
   triggerHover: {
@@ -180,7 +183,7 @@ var selectStyle = _objectSpread(_objectSpread({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       '&::placeholder': {
-        color: token.selectPlaceholderColor
+        color: token.inputPlaceholderColor
       }
     }
   },
@@ -230,7 +233,7 @@ var selectStyle = _objectSpread(_objectSpread({
       backgroundColor: 'transparent',
       width: '100%',
       '&::placeholder': {
-        color: token.selectPlaceholderColor
+        color: token.inputPlaceholderColor
       }
     }
   },
@@ -240,8 +243,11 @@ var selectStyle = _objectSpread(_objectSpread({
     }
   },
   resultTextDisabled: {
-    color: token.selectDisabledFontColor,
-    cursor: 'not-allowed'
+    color: token.inputDisabledFontColor,
+    cursor: 'not-allowed',
+    '& input::placeholder': {
+      color: token.inputDisabledPlaceholderColor
+    }
   },
   compressedWrapper: {
     width: 0,
@@ -263,7 +269,7 @@ var selectStyle = _objectSpread(_objectSpread({
     }
   },
   placeholder: {
-    color: token.selectPlaceholderColor,
+    color: token.inputPlaceholderColor,
     lineHeight: token.lineHeightDynamic,
     marginTop: token.selectPlaceholderMarginY,
     marginBottom: token.selectPlaceholderMarginY
@@ -289,19 +295,18 @@ var selectStyle = _objectSpread(_objectSpread({
       fontSize: token.selectSmallFontSize
     },
     '& $optionGroupTitle': {
-      padding: "calc(".concat(token.selectFontSize, " - 10px) ").concat(token.selectGroupTitlePaddingX, " 0 ").concat(token.selectGroupTitlePaddingX)
+      padding: "calc(".concat(token.selectFontSize, " - 10px) calc(").concat(token.selectSmallOptionInnerPaddingX, " + ").concat(token.selectOptionPaddingX, ") 0")
     }
   },
   pickerLarge: {
     '& $optionInner': {
-      // padding: `${token.selectLargeOptionInnerPaddingY} ${token.selectLargeOptionInnerPaddingX}`,
       paddingTop: token.selectLargeOptionInnerPaddingY,
       paddingBottom: token.selectLargeOptionInnerPaddingY,
       paddingLeft: token.selectLargeOptionInnerPaddingX,
       fontSize: token.selectLargeFontSize
     },
     '& $optionGroupTitle': {
-      padding: "".concat(token.selectFontSize, " calc(").concat(token.selectOptionPaddingX, " + ").concat(token.selectLargeOptionInnerPaddingX, ") ").concat(token.selectGroupTitleLargeBottom, " calc(").concat(token.selectOptionPaddingX, " + ").concat(token.selectLargeOptionInnerPaddingX, ")")
+      padding: "".concat(token.selectFontSize, " calc(").concat(token.selectLargeOptionInnerPaddingX, " + ").concat(token.selectOptionPaddingX, ") ").concat(token.selectGroupTitleLargeBottom)
     }
   },
   iconWrapper: {
@@ -315,26 +320,26 @@ var selectStyle = _objectSpread(_objectSpread({
   clearable: {},
   clearIcon: {
     cursor: 'pointer',
-    width: token.selectFontSize,
+    width: token.inputFontSize,
     lineHeight: 0,
-    color: token.selectClearColor,
+    color: token.inputClearColor,
     verticalAlign: 'middle',
     '&:hover': {
-      color: token.selectIconColor
+      color: token.inputHoverClearColor
     },
     '$wrapperSmall &': {
-      width: token.selectSmallFontSize
+      width: token.inputSmallFontSize
     },
     '$wrapperLarge &': {
-      width: token.selectLargeFontSize
+      width: token.inputLargeFontSize
     }
   },
   arrowIcon: {
     display: 'inline-block',
     verticalAlign: 'middle',
-    width: token.selectFontSize,
+    width: token.inputFontSize,
     lineHeight: 0,
-    color: token.selectIconColor,
+    color: token.inputIconColor,
     transition: 'transform 0.3s'
   },
   arrowIconOpen: {
@@ -388,7 +393,15 @@ var selectStyle = _objectSpread(_objectSpread({
     position: 'absolute',
     display: 'inline-flex',
     width: token.selectFontSize,
-    fontSize: token.selectFontSize
+    fontSize: token.selectFontSize,
+    '$pickerSmall &': {
+      width: token.selectSmallFontSize,
+      fontSize: token.selectSmallFontSize
+    },
+    '$pickerLarge &': {
+      width: token.selectLargeFontSize,
+      fontSize: token.selectLargeFontSize
+    }
   },
   moreIcon: {},
   hideTag: {},
@@ -479,13 +492,13 @@ var selectStyle = _objectSpread(_objectSpread({
     // not disabled
     '&:not($optionDisabled)': {
       cursor: 'pointer'
+    },
+    '&:first-child': {
+      paddingTop: 0
+    },
+    '&:last-child': {
+      paddingBottom: 0
     }
-    // hover
-    // '&:hover': {
-    //   '& $optionInner': {
-    //     backgroundColor: token.selectOptionHoverBackgroundColor,
-    //   },
-    // },
   },
   optionInner: {
     position: 'relative',
@@ -531,7 +544,7 @@ var selectStyle = _objectSpread(_objectSpread({
   optionGroupTitle: {
     fontSize: "var(--group-font-size, ".concat(token.selectGroupTitleFontSize, ")"),
     lineHeight: token.lineHeightDynamic,
-    padding: "calc(".concat(token.selectFontSize, " - 2px) ").concat(token.selectGroupTitlePaddingX, " ").concat(token.selectGroupTitlePaddingBottom, " ").concat(token.selectGroupTitlePaddingX),
+    padding: "calc(".concat(token.selectFontSize, " - 2px) calc(").concat(token.selectOptionInnerPaddingX, " + ").concat(token.selectOptionPaddingX, ") ").concat(token.selectGroupTitlePaddingBottom),
     color: token.selectGroupTitleFontColor,
     fontWeight: token.selectGroupTitleFontWeight
   },
@@ -544,7 +557,7 @@ var selectStyle = _objectSpread(_objectSpread({
     '& > $columnsCheckbox': {
       padding: 0,
       marginRight: 0,
-      marginLeft: token.selectColumnPadding,
+      marginLeft: token.selectOptionInnerPaddingX,
       width: 'auto'
     },
     '$pickerSmall &': {
@@ -573,7 +586,7 @@ var selectStyle = _objectSpread(_objectSpread({
     padding: "0 ".concat(token.selectOptionPaddingX),
     '& $optionGroupTitle': {
       padding: 0,
-      marginLeft: token.selectColumnPadding
+      marginLeft: token.selectOptionInnerPaddingX
     },
     '$pickerSmall &': {
       '& $optionGroupTitle': {
@@ -602,14 +615,14 @@ var selectStyle = _objectSpread(_objectSpread({
     },
     '&:not($optionDisabled):hover': {
       background: token.selectOptionHoverBackgroundColor,
-      borderRadius: token.selectPanelRadius
+      borderRadius: token.selectOptionInnerBorderRadius
     }
   },
   columnsRadio: {
     width: '100%',
     height: '100%',
-    paddingLeft: token.selectColumnPadding,
-    paddingRight: token.selectColumnPadding,
+    paddingLeft: token.selectOptionInnerPaddingX,
+    paddingRight: token.selectOptionInnerPaddingX,
     marginLeft: token.selectColumnOptionMargin,
     '& :last-child': {
       flex: 1,
@@ -621,8 +634,8 @@ var selectStyle = _objectSpread(_objectSpread({
   columnsCheckbox: {
     width: '100%',
     height: '100%',
-    paddingLeft: token.selectColumnPadding,
-    paddingRight: token.selectColumnPadding,
+    paddingLeft: token.selectOptionInnerPaddingX,
+    paddingRight: token.selectOptionInnerPaddingX,
     marginLeft: 0,
     '$pickerSmall &': {
       paddingLeft: token.selectSmallColumnPadding,

package/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAyOxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA+f1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAwNxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CAyf1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/tabs/tabs.js

@@ -187,17 +187,6 @@ var getLineStyle = function getLineStyle() {
         top: 0,
         height: 1,
         width: '100%'
-      },
-      '& $tab': {
-        '&:after': {
-          position: 'absolute',
-          content: '""',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: 1,
-          background: Token.tabsBorderColor
-        }
       }
     }
   };
@@ -215,12 +204,6 @@ var getFillStyle = function getFillStyle() {
   return {
     '&[data-soui-shape="fill"]': {
       '& $tab': {
-        '&[data-soui-state="active"]': {
-          '& $fillInner': {
-            background: '#FFFFFF',
-            color: Token.tabsActiveFontColor
-          }
-        },
         '&:before': {
           content: '""',
           position: 'absolute',
@@ -355,12 +338,7 @@ var tabsStyle = {
     boxSizing: 'border-box',
     cursor: 'pointer',
     lineHeight: Token.lineHeightDynamic,
-    fontSize: Token.tabsTabFontSize,
-    '&[data-soui-state="active"]': {
-      '&:after': {
-        background: Token.tabsActiveFontColor
-      }
-    }
+    fontSize: Token.tabsTabFontSize
   },
   hr: {
     position: 'absolute',
@@ -477,7 +455,7 @@ var tabsStyle = {
       border: '1px solid transparent'
     },
     '&[data-soui-shape="card"] $prev, &[data-soui-shape="card"] $next': {
-      background: '#FFFFFF',
+      background: Token.tabsCardBackgroundColor,
       alignSelf: 'stretch',
       display: 'flex',
       alignItems: 'center',
@@ -563,13 +541,13 @@ var tabsStyle = {
   },
   headerScrollBar: {
     position: 'absolute',
-    background: Token.tabsActiveFontColor,
+    background: Token.tabsLineCheckedInkColor,
     transition: "left .2s ease-in-out, top .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out",
     '[data-soui-position^="top-"] &,[data-soui-position^="bottom-"] &': {
-      height: Token.tabsLineActiveHeight
+      height: Token.tabsLineCheckedInkHeight
     },
     '[data-soui-position^="left-"] &,[data-soui-position^="right-"] &': {
-      width: Token.tabsLineActiveHeight
+      width: Token.tabsLineCheckedInkHeight
     }
   },
   header: {
@@ -584,7 +562,7 @@ var tabsStyle = {
       '& $tab': {
         marginTop: Token.tabsBadgeMargin,
         position: 'relative',
-        border: "1px solid ".concat(Token.tabsCardBorderColor),
+        border: "1px solid ".concat(Token.tabsBorderColor),
         padding: "".concat(Token.tabsCardPaddingY, " ").concat(Token.tabsCardPaddingX),
         color: Token.tabsCardFontColor,
         fontSize: Token.tabsCardFontSize,
@@ -672,7 +650,7 @@ var tabsStyle = {
           background: Token.tabsLineCheckedBackgroundColor,
           fontWeight: Token.tabsLineCheckedFontWeight,
           '&:after': {
-            background: Token.tabsLineAfterBackgroundColor
+            background: Token.tabsLineCheckedInkColor
           }
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {

package/esm/textarea/textarea.js

@@ -74,7 +74,7 @@ var input = _objectSpread(_objectSpread(_objectSpread({
   textarea: {
     padding: 0,
     '&::placeholder': {
-      color: token.textareaPlaceholderColor
+      color: token.inputPlaceholderColor
     },
     width: '100%',
     background: 'transparent',
@@ -136,51 +136,51 @@ var input = _objectSpread(_objectSpread(_objectSpread({
   },
   clear: {
     position: 'absolute',
-    right: token.textareaPaddingX,
-    top: token.textareaPaddingY,
+    right: token.inputPaddingX,
+    top: token.inputPaddingY,
     cursor: 'pointer',
     padding: 4,
-    color: token.textareaClearColor,
+    color: token.inputClearColor,
     opacity: 0,
     '$wrapperWithClear:hover &, $wrapperWithClear$wrapperFocus &': {
       opacity: 1
     },
     '$wrapperSmall &': {
-      top: token.textareaSmallPaddingY
+      top: token.inputSmallPaddingY
     },
     '$wrapperLarge &': {
-      top: token.textareaLargePaddingY
+      top: token.inputLargePaddingY
     },
     '&:hover': {
-      color: token.textareaClearHoverColor
+      color: token.inputHoverClearColor
     },
     '& > svg': {
       display: 'block',
-      width: token.textareaClearSize,
-      height: token.textareaClearSize,
+      width: token.inputFontSize,
+      height: token.inputFontSize,
       '$wrapperSmall &': {
-        width: token.textareaSmallClearSize,
-        height: token.textareaSmallClearSize
+        width: token.inputSmallFontSize,
+        height: token.inputSmallFontSize
       },
       '$wrapperLarge &': {
-        width: token.textareaLargeClearSize,
-        height: token.textareaLargeClearSize
+        width: token.inputLargeFontSize,
+        height: token.inputLargeFontSize
       }
     },
     '[dir="rtl"] &': {
       right: 'auto',
-      left: token.textareaPaddingX
+      left: token.inputPaddingX
     }
   },
   wrapperWithClear: {
     '&& $textarea': {
-      paddingRight: "calc(".concat(token.textareaPaddingX, " + ").concat(token.textareaClearSize, " + 12px)")
+      paddingRight: "calc(".concat(token.inputPaddingX, " + ").concat(token.inputFontSize, " + 12px)")
     },
     '&&$wrapperSmall > $textarea': {
-      paddingRight: "calc(".concat(token.textareaSmallPaddingX, " + ").concat(token.textareaSmallClearSize, " + 12px)")
+      paddingRight: "calc(".concat(token.inputSmallPaddingX, " + ").concat(token.inputSmallFontSize, " + 12px)")
     },
     '&&$wrapperLarge > $textarea': {
-      paddingRight: "calc(".concat(token.textareaLargePaddingX, " + ").concat(token.textareaLargeClearSize, " + 12px)")
+      paddingRight: "calc(".concat(token.inputLargePaddingX, " + ").concat(token.inputLargeFontSize, " + 12px)")
     }
   },
   wrapperShowClear: {

package/esm/transfer/transfer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transfer.d.ts","sourceRoot":"","sources":["transfer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,MAAM,eAAe,CAAC;AAElD,QAAA,MAAM,aAAa,EAAE,QAAQ,CAAC,aAAa,CAiN1C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"transfer.d.ts","sourceRoot":"","sources":["transfer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,MAAM,eAAe,CAAC;AAElD,QAAA,MAAM,aAAa,EAAE,QAAQ,CAAC,aAAa,CAuN1C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/transfer/transfer.js

@@ -185,6 +185,12 @@ var TransferStyle = {
       '& $itemWrapper': {
         background: Token.transferItemHoverBackgroundColor
       }
+    },
+    '&:first-child': {
+      paddingTop: 0
+    },
+    '&:last-child': {
+      paddingBottom: 0
     }
   },
   disabled: {

package/esm/tree/tree.js

@@ -385,9 +385,9 @@ var treeStyle = {
       background: Token.treeItemActiveBackgroundColor
     },
     '& svg': {
-      width: Token.treeIconSize,
+      width: Token.treeFontSize,
       '$sizeLarge &': {
-        width: "calc(".concat(Token.treeIconSize, " + 2px)")
+        width: "calc(".concat(Token.treeFontSize, " + 2px)")
       }
     }
   },

package/esm/tree-select/tree-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-select.d.ts","sourceRoot":"","sources":["tree-select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAwD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAogBlD,CAAC;AACF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"tree-select.d.ts","sourceRoot":"","sources":["tree-select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAwD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CA0gBlD,CAAC;AACF,eAAe,eAAe,CAAC"}

package/esm/tree-select/tree-select.js

@@ -99,6 +99,9 @@ var treeSelectStyle = _objectSpread(_objectSpread({
       },
       '& $clearIcon': {
         right: token.treeSelectSmallPaddingX
+      },
+      '& $arrowIcon': {
+        width: token.inputSmallFontSize
       }
     },
     '&$wrapperLarge': {
@@ -114,7 +117,7 @@ var treeSelectStyle = _objectSpread(_objectSpread({
         fontSize: token.treeSelectLargeFontSize
       },
       '& $arrowIcon': {
-        width: token.treeSelectLargeFontSize
+        width: token.inputLargeFontSize
       },
       '& $clearIcon': {
         right: token.treeSelectLargePaddingX
@@ -183,7 +186,7 @@ var treeSelectStyle = _objectSpread(_objectSpread({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       '&::placeholder': {
-        color: token.treeSelectPlaceholderColor
+        color: token.inputPlaceholderColor
       }
     }
   },
@@ -230,7 +233,7 @@ var treeSelectStyle = _objectSpread(_objectSpread({
       backgroundColor: 'transparent',
       width: '100%',
       '&::placeholder': {
-        color: token.treeSelectPlaceholderColor
+        color: token.inputPlaceholderColor
       }
     }
   },
@@ -240,8 +243,11 @@ var treeSelectStyle = _objectSpread(_objectSpread({
     }
   },
   resultTextDisabled: {
-    color: token.treeSelectDisabledFontColor,
-    cursor: 'not-allowed'
+    color: token.inputDisabledFontColor,
+    cursor: 'not-allowed',
+    '& input::placeholder': {
+      color: token.inputDisabledPlaceholderColor
+    }
   },
   compressedWrapper: {
     width: 0,
@@ -263,7 +269,7 @@ var treeSelectStyle = _objectSpread(_objectSpread({
     }
   },
   placeholder: {
-    color: token.treeSelectPlaceholderColor,
+    color: token.inputPlaceholderColor,
     lineHeight: token.lineHeightDynamic,
     marginTop: token.treeSelectPlaceholderMarginY,
     marginBottom: token.treeSelectPlaceholderMarginY
@@ -292,24 +298,24 @@ var treeSelectStyle = _objectSpread(_objectSpread({
   clearable: {},
   clearIcon: {
     cursor: 'pointer',
-    width: token.treeSelectFontSize,
+    width: token.inputFontSize,
     lineHeight: 0,
-    color: token.treeSelectClearColor,
+    color: token.inputClearColor,
     verticalAlign: 'middle',
     '&:hover svg': {
       color: token.treeSelectClearHoverColor
     },
     '$wrapperSmall &': {
-      width: token.treeSelectSmallFontSize
+      width: token.inputSmallFontSize
     },
     '$wrapperLarge &': {
-      width: token.treeSelectLargeFontSize
+      width: token.inputLargeFontSize
     }
   },
   arrowIcon: {
     display: 'inline-block',
     verticalAlign: 'middle',
-    width: token.treeSelectFontSize,
+    width: token.inputFontSize,
     lineHeight: 0,
     color: token.treeSelectIconColor,
     transition: 'transform 0.3s',
@@ -546,7 +552,7 @@ var treeSelectStyle = _objectSpread(_objectSpread({
     }
   },
   empty: {
-    color: token.selectPlaceholderColor
+    color: token.inputPlaceholderColor
   }
 });
 export default treeSelectStyle;

package/esm/version.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "3.9.13-beta.1";
+declare const _default: "3.9.13-beta.11";
 export default _default;
 //# sourceMappingURL=version.d.ts.map

package/esm/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAA+B"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAAgC"}

package/esm/version.js

@@ -1 +1 @@
-export default '3.9.13-beta.1';
+export default '3.9.13-beta.11';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/shineout-style",
-  "version": "3.9.13-beta.1",
+  "version": "3.9.13-beta.11",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -17,8 +17,8 @@
   "dependencies": {
     "jss": "10.9.2",
     "react-jss": "10.9.2",
-    "@sheinx/theme": "3.9.13-beta.1",
-    "@sheinx/base": "3.9.13-beta.1"
+    "@sheinx/theme": "3.9.13-beta.11",
+    "@sheinx/base": "3.9.13-beta.11"
   },
   "peerDependencies": {
     "core-js": ">=3"