@tiny-design/react 1.4.0 → 1.5.1

package/es/alert/alert.js

@@ -24,7 +24,7 @@ const Alert = React.forwardRef((props, forwardedRef) => {
 	const closeBtnOnClick = (e) => {
 		ref.current && setClosedStyle(ref.current);
 		setShow(false);
-		onClose && onClose(e);
+		onClose?.(e);
 	};
 	const closeIcon = (closable || closeText) && /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -72,7 +72,7 @@ const Alert = React.forwardRef((props, forwardedRef) => {
 			children: [
 				icon && renderIcon(),
 				/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("p", {
-					className: `${prefixCls}__title`,
+					className: classNames(`${prefixCls}__title`, { [`${prefixCls}__title_has-content`]: children }),
 					children: title
 				}), children] }),
 				closeIcon

package/es/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":["Transition"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["import React, { useState, useRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CheckCircle, CloseCircle, InfoCircle, WarningCircle } from '../_utils/components';\nimport { AlertProps } from './types';\nimport Transition from '../transition';\n\nconst setClosedStyle = (node: HTMLElement): void => {\n  node.style.borderTopWidth = '0';\n  node.style.paddingTop = '0';\n  node.style.marginTop = '0';\n  node.style.height = '0';\n  node.style.paddingBottom = '0';\n  node.style.borderBottomWidth = '0';\n  node.style.marginBottom = '0';\n};\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, forwardedRef) => {\n  const {\n    type = 'info',\n    iconSize = 14,\n    prefixCls: customisedCls,\n    title,\n    icon,\n    closeText,\n    closable,\n    afterClose,\n    onClose,\n    children,\n    className,\n    style,\n    ...otherProps\n  } = props;\n  const [isShow, setShow] = useState(true);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('alert', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, [`${prefixCls}_${type}`]);\n\n  const closeBtnOnClick = (e: React.MouseEvent<HTMLSpanElement>): void => {\n    ref.current && setClosedStyle(ref.current as HTMLDivElement);\n    setShow(false);\n    onClose && onClose(e);\n  };\n\n  // Setting close text attribute also allows to be closable\n  const closeIcon = (closable || closeText) && (\n    <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Close\">\n      {closeText || '✕'}\n    </button>\n  );\n\n  const renderIcon = (): React.ReactNode => {\n    if (typeof icon === 'boolean') {\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={iconSize} className={`${prefixCls}__icon`} />;\n      }\n    }\n\n    return icon;\n  };\n\n  return (\n    <Transition timeout={300} in={isShow} nodeRef={ref} onExited={afterClose}>\n      <div {...otherProps} role=\"alert\" className={cls} style={style} ref={(node) => {\n        ref.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      }}>\n        {icon && renderIcon()}\n        <div>\n          {title && <p className={`${prefixCls}__title`}>{title}</p>}\n          {children}\n        </div>\n        {closeIcon}\n      </div>\n    </Transition>\n  );\n});\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB,SAA4B;AAClD,MAAK,MAAM,iBAAiB;AAC5B,MAAK,MAAM,aAAa;AACxB,MAAK,MAAM,YAAY;AACvB,MAAK,MAAM,SAAS;AACpB,MAAK,MAAM,gBAAgB;AAC3B,MAAK,MAAM,oBAAoB;AAC/B,MAAK,MAAM,eAAe;;AAG5B,MAAM,QAAQ,MAAM,YAAwC,OAAO,iBAAiB;CAClF,MAAM,EACJ,OAAO,QACP,WAAW,IACX,WAAW,eACX,OACA,MACA,WACA,UACA,YACA,SACA,UACA,WACA,OACA,GAAG,eACD;CACJ,MAAM,CAAC,QAAQ,WAAW,SAAS,KAAK;CACxC,MAAM,MAAM,OAA8B,KAAK;CAE/C,MAAM,YAAY,aAAa,SADT,WAAW,cAAc,CACO,WAAW,cAAc;CAC/E,MAAM,MAAM,WAAW,WAAW,WAAW,CAAC,GAAG,UAAU,GAAG,OAAO,CAAC;CAEtE,MAAM,mBAAmB,MAA+C;AACtE,MAAI,WAAW,eAAe,IAAI,QAA0B;AAC5D,UAAQ,MAAM;AACd,aAAW,QAAQ,EAAE;;CAIvB,MAAM,aAAa,YAAY,cAC7B,oBAAC,UAAD;EAAQ,MAAK;EAAS,WAAW,GAAG,UAAU;EAAc,SAAS;EAAiB,cAAW;YAC9F,aAAa;EACP,CAAA;CAGX,MAAM,mBAAoC;AACxC,MAAI,OAAO,SAAS,UAClB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACzE,KAAK,OACH,QAAO,oBAAC,YAAD;IAAY,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACxE,KAAK,UACH,QAAO,oBAAC,eAAD;IAAe,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GAC3E,KAAK,QACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;;AAI7E,SAAO;;AAGT,QACE,oBAACA,oBAAD;EAAY,SAAS;EAAK,IAAI;EAAQ,SAAS;EAAK,UAAU;YAC5D,qBAAC,OAAD;GAAK,GAAI;GAAY,MAAK;GAAQ,WAAW;GAAY;GAAO,MAAM,SAAS;AAC7E,QAAI,UAAU;AACd,QAAI,OAAO,iBAAiB,WAAY,cAAa,KAAK;aACjD,aAAc,cAAa,UAAU;;aAHhD;IAKG,QAAQ,YAAY;IACrB,qBAAC,OAAD,EAAA,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAW,GAAG,UAAU;eAAW;KAAU,CAAA,EACzD,SACG,EAAA,CAAA;IACL;IACG;;EACK,CAAA;EAEf;AAEF,MAAM,cAAc"}
+{"version":3,"file":"alert.js","names":["Transition"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["import React, { useState, useRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CheckCircle, CloseCircle, InfoCircle, WarningCircle } from '../_utils/components';\nimport { AlertProps } from './types';\nimport Transition from '../transition';\n\nconst setClosedStyle = (node: HTMLElement): void => {\n  node.style.borderTopWidth = '0';\n  node.style.paddingTop = '0';\n  node.style.marginTop = '0';\n  node.style.height = '0';\n  node.style.paddingBottom = '0';\n  node.style.borderBottomWidth = '0';\n  node.style.marginBottom = '0';\n};\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, forwardedRef) => {\n  const {\n    type = 'info',\n    iconSize = 14,\n    prefixCls: customisedCls,\n    title,\n    icon,\n    closeText,\n    closable,\n    afterClose,\n    onClose,\n    children,\n    className,\n    style,\n    ...otherProps\n  } = props;\n  const [isShow, setShow] = useState(true);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('alert', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, [`${prefixCls}_${type}`]);\n\n  const closeBtnOnClick = (e: React.MouseEvent<HTMLSpanElement>): void => {\n    ref.current && setClosedStyle(ref.current as HTMLDivElement);\n    setShow(false);\n    onClose?.(e);\n  };\n\n  // Setting close text attribute also allows to be closable\n  const closeIcon = (closable || closeText) && (\n    <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Close\">\n      {closeText || '✕'}\n    </button>\n  );\n\n  const renderIcon = (): React.ReactNode => {\n    if (typeof icon === 'boolean') {\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={iconSize} className={`${prefixCls}__icon`} />;\n      }\n    }\n\n    return icon;\n  };\n\n  return (\n    <Transition timeout={300} in={isShow} nodeRef={ref} onExited={afterClose}>\n      <div {...otherProps} role=\"alert\" className={cls} style={style} ref={(node) => {\n        ref.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      }}>\n        {icon && renderIcon()}\n        <div>\n          {title && <p className={classNames(`${prefixCls}__title`, { [`${prefixCls}__title_has-content`]: children })}>{title}</p>}\n          {children}\n        </div>\n        {closeIcon}\n      </div>\n    </Transition>\n  );\n});\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB,SAA4B;AAClD,MAAK,MAAM,iBAAiB;AAC5B,MAAK,MAAM,aAAa;AACxB,MAAK,MAAM,YAAY;AACvB,MAAK,MAAM,SAAS;AACpB,MAAK,MAAM,gBAAgB;AAC3B,MAAK,MAAM,oBAAoB;AAC/B,MAAK,MAAM,eAAe;;AAG5B,MAAM,QAAQ,MAAM,YAAwC,OAAO,iBAAiB;CAClF,MAAM,EACJ,OAAO,QACP,WAAW,IACX,WAAW,eACX,OACA,MACA,WACA,UACA,YACA,SACA,UACA,WACA,OACA,GAAG,eACD;CACJ,MAAM,CAAC,QAAQ,WAAW,SAAS,KAAK;CACxC,MAAM,MAAM,OAA8B,KAAK;CAE/C,MAAM,YAAY,aAAa,SADT,WAAW,cAAc,CACO,WAAW,cAAc;CAC/E,MAAM,MAAM,WAAW,WAAW,WAAW,CAAC,GAAG,UAAU,GAAG,OAAO,CAAC;CAEtE,MAAM,mBAAmB,MAA+C;AACtE,MAAI,WAAW,eAAe,IAAI,QAA0B;AAC5D,UAAQ,MAAM;AACd,YAAU,EAAE;;CAId,MAAM,aAAa,YAAY,cAC7B,oBAAC,UAAD;EAAQ,MAAK;EAAS,WAAW,GAAG,UAAU;EAAc,SAAS;EAAiB,cAAW;YAC9F,aAAa;EACP,CAAA;CAGX,MAAM,mBAAoC;AACxC,MAAI,OAAO,SAAS,UAClB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACzE,KAAK,OACH,QAAO,oBAAC,YAAD;IAAY,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACxE,KAAK,UACH,QAAO,oBAAC,eAAD;IAAe,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GAC3E,KAAK,QACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;;AAI7E,SAAO;;AAGT,QACE,oBAACA,oBAAD;EAAY,SAAS;EAAK,IAAI;EAAQ,SAAS;EAAK,UAAU;YAC5D,qBAAC,OAAD;GAAK,GAAI;GAAY,MAAK;GAAQ,WAAW;GAAY;GAAO,MAAM,SAAS;AAC7E,QAAI,UAAU;AACd,QAAI,OAAO,iBAAiB,WAAY,cAAa,KAAK;aACjD,aAAc,cAAa,UAAU;;aAHhD;IAKG,QAAQ,YAAY;IACrB,qBAAC,OAAD,EAAA,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAW,WAAW,GAAG,UAAU,UAAU,GAAG,GAAG,UAAU,uBAAuB,UAAU,CAAC;eAAG;KAAU,CAAA,EACxH,SACG,EAAA,CAAA;IACL;IACG;;EACK,CAAA;EAEf;AAEF,MAAM,cAAc"}

package/es/alert/style/_index.scss

@@ -7,9 +7,9 @@
   box-sizing: border-box;
   padding: 10px 30px 10px 13px;
   position: relative;
-  font-weight: $font-weight;
+  font-weight: var(--ty-font-weight);
   opacity: 1;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   transition: all 300ms;
   transform-origin: center top;
   overflow: hidden;
@@ -22,9 +22,13 @@
 
   &__title {
     box-sizing: border-box;
-    margin: 0 0 5px;
-    font-size: 18px;
+    margin: 0;
+    font-size: 17px;
     font-weight: 500;
+
+    &_has-content {
+      margin-bottom: 5px;
+    }
   }
 
   &__desc {

package/es/alert/style/index.css

@@ -4,9 +4,9 @@
   box-sizing: border-box;
   padding: 10px 30px 10px 13px;
   position: relative;
-  font-weight: 400;
+  font-weight: var(--ty-font-weight);
   opacity: 1;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   transition: all 300ms;
   transform-origin: center top;
   overflow: hidden;
@@ -18,10 +18,13 @@
 }
 .ty-alert__title {
   box-sizing: border-box;
-  margin: 0 0 5px;
-  font-size: 18px;
+  margin: 0;
+  font-size: 17px;
   font-weight: 500;
 }
+.ty-alert__title_has-content {
+  margin-bottom: 5px;
+}
 .ty-alert__desc {
   box-sizing: border-box;
   line-height: 16px;

package/es/auto-complete/style/_index.scss

@@ -18,12 +18,11 @@
     list-style-type: none;
     background-color: var(--ty-select-dropdown-bg);
     box-sizing: border-box;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
     z-index: 10;
     box-shadow: var(--ty-shadow-popup);
-    border-radius: $border-radius;
-    font-size: $font-size-base;
+    border-radius: var(--ty-border-radius);
+    font-size: var(--ty-font-size-base);
     max-height: $select-dropdown-max-height;
   }
 
@@ -32,7 +31,7 @@
     padding: 16px;
     text-align: center;
     color: var(--ty-color-text-quaternary);
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
   }
 }
 

package/es/auto-complete/style/index.css

@@ -14,19 +14,18 @@
   list-style-type: none;
   background-color: var(--ty-select-dropdown-bg);
   box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   z-index: 10;
   box-shadow: var(--ty-shadow-popup);
-  border-radius: 2px;
-  font-size: 1rem;
+  border-radius: var(--ty-border-radius);
+  font-size: var(--ty-font-size-base);
   max-height: 300px;
 }
 .ty-auto-complete__empty {
   padding: 16px;
   text-align: center;
   color: var(--ty-color-text-quaternary);
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 
 .ty-auto-complete-option {

package/es/breadcrumb/style/index.css

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   color: var(--ty-color-text-tertiary);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-breadcrumb-item__separator {
   margin: 0 8px;

package/es/breadcrumb/types.d.ts

@@ -4,7 +4,7 @@ import React, { ReactElement } from "react";
 //#region src/breadcrumb/types.d.ts
 interface BreadcrumbProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['nav']> {
   separator?: React.ReactNode;
-  children: ReactElement<BreadcrumbItemProps>;
+  children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
 }
 interface BreadcrumbItemProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['li']> {
   separator?: React.ReactNode;

package/es/button/style/index.css

@@ -41,9 +41,9 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  line-height: 1.5;
+  line-height: var(--ty-line-height-base);
 }
 .ty-btn__loader {
   display: inline-block;
@@ -59,7 +59,7 @@
 .ty-btn__icon-container, .ty-btn__loader {
   display: inline-block;
   pointer-events: none;
-  line-height: 1.5;
+  line-height: var(--ty-line-height-base);
   vertical-align: middle;
 }
 .ty-btn__icon-container + span, .ty-btn__loader + span {
@@ -311,18 +311,18 @@
 }
 .ty-btn_sm {
   padding: 0 10px;
-  font-size: 0.875rem;
-  height: 24px;
+  font-size: var(--ty-font-size-sm);
+  height: var(--ty-height-sm);
 }
 .ty-btn_md {
   padding: 0 15px;
-  font-size: 1rem;
-  height: 32px;
+  font-size: var(--ty-font-size-base);
+  height: var(--ty-height-md);
 }
 .ty-btn_lg {
   padding: 0 28px;
-  font-size: 1.25rem;
-  height: 42px;
+  font-size: var(--ty-font-size-lg);
+  height: var(--ty-height-lg);
 }
 .ty-btn_block {
   width: 100%;
@@ -331,7 +331,7 @@
   margin: 0;
 }
 .ty-btn_round {
-  border-radius: 42px;
+  border-radius: var(--ty-height-lg);
 }
 .ty-btn_loading {
   position: relative;
@@ -370,12 +370,12 @@
   z-index: 1;
 }
 .ty-btn-group .ty-btn:first-child {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-top-left-radius: var(--ty-border-radius);
+  border-bottom-left-radius: var(--ty-border-radius);
 }
 .ty-btn-group .ty-btn:last-child {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-top-right-radius: var(--ty-border-radius);
+  border-bottom-right-radius: var(--ty-border-radius);
 }
 .ty-btn-group_round .ty-btn:first-child {
   border-top-left-radius: 30px;

package/es/calendar/style/_index.scss

@@ -3,7 +3,7 @@
 .#{$prefix}-calendar {
   background: var(--ty-calendar-bg, #fff);
   border: 1px solid var(--ty-calendar-border, #{$gray-200});
-  border-radius: $border-radius;
+  border-radius: var(--ty-border-radius);
 
   &_fullscreen {
     width: 100%;
@@ -30,7 +30,7 @@
     border: none;
     background: transparent;
     cursor: pointer;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     font-size: 18px;
     color: var(--ty-color-text, #{$gray-700});
 
@@ -41,7 +41,7 @@
 
   &__title {
     font-weight: 500;
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
   }
 
   &__title-btn {
@@ -51,7 +51,7 @@
     font-weight: inherit;
     font-size: inherit;
     padding: 4px 8px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     color: var(--ty-color-text, #{$gray-800});
 
     &:hover {
@@ -73,7 +73,7 @@
     padding: 8px 0;
     text-align: center;
     font-weight: 500;
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
     color: var(--ty-color-text-secondary, #{$gray-600});
   }
 
@@ -111,7 +111,7 @@
     &_selected .#{$prefix}-calendar__cell-inner {
       background: var(--ty-color-primary, #{$primary-color});
       color: #fff;
-      border-radius: $border-radius;
+      border-radius: var(--ty-border-radius);
     }
 
     &_selected .#{$prefix}-calendar__cell-date {
@@ -121,7 +121,7 @@
 
   &__cell-inner {
     padding: 4px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     min-height: 24px;
     display: flex;
     flex-direction: column;
@@ -139,7 +139,7 @@
     line-height: 24px;
     min-width: 24px;
     text-align: center;
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
   }
 
   &__cell-content {
@@ -159,7 +159,7 @@
     text-align: center;
     padding: 16px 8px;
     cursor: pointer;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     transition: all 0.2s;
 
     &:hover {

package/es/calendar/style/index.css

@@ -1,7 +1,7 @@
 .ty-calendar {
   background: var(--ty-calendar-bg, #fff);
   border: 1px solid var(--ty-calendar-border, #e9ecef);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
 }
 .ty-calendar_fullscreen {
   width: 100%;
@@ -25,7 +25,7 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   font-size: 18px;
   color: var(--ty-color-text, #525f7f);
 }
@@ -34,7 +34,7 @@
 }
 .ty-calendar__title {
   font-weight: 500;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-calendar__title-btn {
   border: none;
@@ -43,7 +43,7 @@
   font-weight: inherit;
   font-size: inherit;
   padding: 4px 8px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   color: var(--ty-color-text, #32325d);
 }
 .ty-calendar__title-btn:hover {
@@ -61,7 +61,7 @@
   padding: 8px 0;
   text-align: center;
   font-weight: 500;
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
   color: var(--ty-color-text-secondary, #8898aa);
 }
 .ty-calendar__cell {
@@ -92,14 +92,14 @@
 .ty-calendar__cell_selected .ty-calendar__cell-inner {
   background: var(--ty-color-primary, #6e41bf);
   color: #fff;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
 }
 .ty-calendar__cell_selected .ty-calendar__cell-date {
   color: inherit;
 }
 .ty-calendar__cell-inner {
   padding: 4px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   min-height: 24px;
   display: flex;
   flex-direction: column;
@@ -115,7 +115,7 @@
   line-height: 24px;
   min-width: 24px;
   text-align: center;
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-calendar__cell-content {
   font-size: 12px;
@@ -131,7 +131,7 @@
   text-align: center;
   padding: 16px 8px;
   cursor: pointer;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   transition: all 0.2s;
 }
 .ty-calendar__month-cell:hover {

package/es/card/style/index.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   transition: all 0.3s;
   background-color: var(--ty-card-bg);
 }
@@ -10,7 +10,7 @@
   margin-top: 15px;
 }
 .ty-card > img:first-child {
-  border-radius: 2px 2px 0 0;
+  border-radius: var(--ty-border-radius) var(--ty-border-radius) 0 0;
 }
 .ty-card_bordered {
   border: 1px solid var(--ty-card-border);
@@ -36,7 +36,7 @@
   font-size: 16px;
   background: transparent;
   border-bottom: 1px solid var(--ty-card-border);
-  border-radius: 2px 2px 0 0;
+  border-radius: var(--ty-border-radius) var(--ty-border-radius) 0 0;
 }
 .ty-card__body {
   box-sizing: border-box;

package/es/cascader/style/_index.scss

@@ -11,20 +11,20 @@
   }
 
   &_sm &__selector {
-    height: $height-sm;
-    font-size: $font-size-sm;
+    height: var(--ty-height-sm);
+    font-size: var(--ty-font-size-sm);
     padding: 0 28px 0 8px;
   }
 
   &_md &__selector {
-    height: $height-md;
-    font-size: $font-size-base;
+    height: var(--ty-height-md);
+    font-size: var(--ty-font-size-base);
     padding: 0 32px 0 10px;
   }
 
   &_lg &__selector {
-    height: $height-lg;
-    font-size: $font-size-lg;
+    height: var(--ty-height-lg);
+    font-size: var(--ty-font-size-lg);
     padding: 0 36px 0 12px;
   }
 
@@ -33,7 +33,7 @@
     align-items: center;
     width: 100%;
     border: 1px solid var(--ty-cascader-border, #{$gray-300});
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     background: var(--ty-cascader-bg, #fff);
     cursor: pointer;
     transition: all 0.2s;
@@ -95,9 +95,9 @@
 
   &__dropdown {
     background: var(--ty-cascader-dropdown-bg, #fff);
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     box-shadow: $select-dropdown-shadow;
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
   }
 
   &__menus {

package/es/cascader/style/index.css

@@ -8,18 +8,18 @@
   pointer-events: none;
 }
 .ty-cascader_sm .ty-cascader__selector {
-  height: 24px;
-  font-size: 0.875rem;
+  height: var(--ty-height-sm);
+  font-size: var(--ty-font-size-sm);
   padding: 0 28px 0 8px;
 }
 .ty-cascader_md .ty-cascader__selector {
-  height: 32px;
-  font-size: 1rem;
+  height: var(--ty-height-md);
+  font-size: var(--ty-font-size-base);
   padding: 0 32px 0 10px;
 }
 .ty-cascader_lg .ty-cascader__selector {
-  height: 42px;
-  font-size: 1.25rem;
+  height: var(--ty-height-lg);
+  font-size: var(--ty-font-size-lg);
   padding: 0 36px 0 12px;
 }
 .ty-cascader__selector {
@@ -27,7 +27,7 @@
   align-items: center;
   width: 100%;
   border: 1px solid var(--ty-cascader-border, #dee2e6);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   background: var(--ty-cascader-bg, #fff);
   cursor: pointer;
   transition: all 0.2s;
@@ -79,9 +79,9 @@
 }
 .ty-cascader__dropdown {
   background: var(--ty-cascader-dropdown-bg, #fff);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-cascader__menus {
   display: flex;

package/es/checkbox/style/_index.scss

@@ -4,7 +4,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   margin-right: 8px;
   color: var(--ty-color-text);
   box-sizing: border-box;
@@ -17,10 +17,7 @@
 
   &__native {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
@@ -43,7 +40,7 @@
     line-height: 1;
     vertical-align: middle;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
       display: block;
@@ -56,7 +53,7 @@
       transform: scale(0);
     }
 
-    &:after {
+    &::after {
       transform: rotate(45deg) scaleY(1);
       pointer-events: none;
       box-sizing: content-box;
@@ -83,12 +80,12 @@
         background-color: var(--ty-color-primary);
         border-color: var(--ty-color-primary);
 
-        &:after {
+        &::after {
           content: '';
           transform: rotate(45deg) scale(1);
         }
 
-        &:before {
+        &::before {
           transform: scale(0);
         }
       }
@@ -101,11 +98,11 @@
         background-color: var(--ty-color-primary);
         border-color: var(--ty-color-primary);
 
-        &:before {
+        &::before {
           transform: scale(1);
         }
 
-        &:after {
+        &::after {
           transform: rotate(45deg) scale(0);
         }
       }
@@ -122,7 +119,7 @@
         background-color: var(--ty-checkbox-disabled-bg);
         border-color: var(--ty-checkbox-border) !important;
 
-        &:after {
+        &::after {
           border-color: var(--ty-color-text-quaternary);
         }
 

package/es/checkbox/style/index.css

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   margin-right: 8px;
   color: var(--ty-color-text);
   box-sizing: border-box;
@@ -12,10 +12,7 @@
 }
 .ty-checkbox__native {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
@@ -37,7 +34,7 @@
   line-height: 1;
   vertical-align: middle;
 }
-.ty-checkbox__inner:before {
+.ty-checkbox__inner::before {
   content: "";
   position: absolute;
   display: block;
@@ -49,7 +46,7 @@
   transition: all 200ms;
   transform: scale(0);
 }
-.ty-checkbox__inner:after {
+.ty-checkbox__inner::after {
   transform: rotate(45deg) scaleY(1);
   pointer-events: none;
   box-sizing: content-box;
@@ -71,21 +68,21 @@
   background-color: var(--ty-color-primary);
   border-color: var(--ty-color-primary);
 }
-.ty-checkbox_checked .ty-checkbox__inner:after {
+.ty-checkbox_checked .ty-checkbox__inner::after {
   content: "";
   transform: rotate(45deg) scale(1);
 }
-.ty-checkbox_checked .ty-checkbox__inner:before {
+.ty-checkbox_checked .ty-checkbox__inner::before {
   transform: scale(0);
 }
 .ty-checkbox_indeterminate .ty-checkbox__inner {
   background-color: var(--ty-color-primary);
   border-color: var(--ty-color-primary);
 }
-.ty-checkbox_indeterminate .ty-checkbox__inner:before {
+.ty-checkbox_indeterminate .ty-checkbox__inner::before {
   transform: scale(1);
 }
-.ty-checkbox_indeterminate .ty-checkbox__inner:after {
+.ty-checkbox_indeterminate .ty-checkbox__inner::after {
   transform: rotate(45deg) scale(0);
 }
 .ty-checkbox_disabled .ty-checkbox__native {
@@ -95,7 +92,7 @@
   background-color: var(--ty-checkbox-disabled-bg);
   border-color: var(--ty-checkbox-border) !important;
 }
-.ty-checkbox_disabled .ty-checkbox__inner:after {
+.ty-checkbox_disabled .ty-checkbox__inner::after {
   border-color: var(--ty-color-text-quaternary);
 }
 .ty-checkbox_disabled .ty-checkbox__inner + span {