@tiny-design/react 1.4.0 → 1.5.1

package/lib/segmented/style/_index.scss

@@ -5,7 +5,7 @@
   align-items: center;
   padding: 2px;
   background: var(--ty-segmented-bg, #{$gray-200});
-  border-radius: $border-radius;
+  border-radius: var(--ty-border-radius);
   box-sizing: border-box;
 
   &_block {
@@ -30,20 +30,20 @@
 
   &_sm .#{$prefix}-segmented__item {
     padding: 0 8px;
-    height: calc(#{$height-sm} - 4px);
-    font-size: $font-size-sm;
+    height: calc(var(--ty-height-sm) - 4px);
+    font-size: var(--ty-font-size-sm);
   }
 
   &_md .#{$prefix}-segmented__item {
     padding: 0 12px;
-    height: calc(#{$height-md} - 4px);
-    font-size: $font-size-base;
+    height: calc(var(--ty-height-md) - 4px);
+    font-size: var(--ty-font-size-base);
   }
 
   &_lg .#{$prefix}-segmented__item {
     padding: 0 16px;
-    height: calc(#{$height-lg} - 4px);
-    font-size: $font-size-lg;
+    height: calc(var(--ty-height-lg) - 4px);
+    font-size: var(--ty-font-size-lg);
   }
 
   &__item {
@@ -52,19 +52,19 @@
     align-items: center;
     gap: 4px;
     cursor: pointer;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     transition: all 0.2s;
     user-select: none;
     white-space: nowrap;
 
-    &:hover:not(&_active):not(&_disabled) {
+    &:hover:not(&_active, &_disabled) {
       color: var(--ty-color-text, #{$gray-900});
     }
 
     &_active {
       background: var(--ty-segmented-active-bg, #fff);
       color: var(--ty-color-text, #{$gray-900});
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 10%);
       font-weight: 500;
     }
 

package/lib/segmented/style/index.css

@@ -3,7 +3,7 @@
   align-items: center;
   padding: 2px;
   background: var(--ty-segmented-bg, #e9ecef);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   box-sizing: border-box;
 }
 .ty-segmented_block {
@@ -24,18 +24,18 @@
 }
 .ty-segmented_sm .ty-segmented__item {
   padding: 0 8px;
-  height: calc(24px - 4px);
-  font-size: 0.875rem;
+  height: calc(var(--ty-height-sm) - 4px);
+  font-size: var(--ty-font-size-sm);
 }
 .ty-segmented_md .ty-segmented__item {
   padding: 0 12px;
-  height: calc(32px - 4px);
-  font-size: 1rem;
+  height: calc(var(--ty-height-md) - 4px);
+  font-size: var(--ty-font-size-base);
 }
 .ty-segmented_lg .ty-segmented__item {
   padding: 0 16px;
-  height: calc(42px - 4px);
-  font-size: 1.25rem;
+  height: calc(var(--ty-height-lg) - 4px);
+  font-size: var(--ty-font-size-lg);
 }
 .ty-segmented__item {
   position: relative;
@@ -43,14 +43,14 @@
   align-items: center;
   gap: 4px;
   cursor: pointer;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   transition: all 0.2s;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   white-space: nowrap;
 }
-.ty-segmented__item:hover:not(.ty-segmented__item_active):not(.ty-segmented__item_disabled) {
+.ty-segmented__item:hover:not(.ty-segmented__item_active, .ty-segmented__item_disabled) {
   color: var(--ty-color-text, #212529);
 }
 .ty-segmented__item_active {

package/lib/select/style/_index.scss

@@ -4,7 +4,7 @@
   position: relative;
   display: inline-block;
   width: 100%;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   cursor: pointer;
   outline: none;
 
@@ -20,20 +20,20 @@
 
   // Sizes
   &_sm .#{$prefix}-select__selector {
-    min-height: $height-sm;
-    font-size: $font-size-sm;
+    min-height: var(--ty-height-sm);
+    font-size: var(--ty-font-size-sm);
     padding: 0 24px 0 8px;
   }
 
   &_md .#{$prefix}-select__selector {
-    min-height: $height-md;
-    font-size: $font-size-base;
+    min-height: var(--ty-height-md);
+    font-size: var(--ty-font-size-base);
     padding: 0 28px 0 10px;
   }
 
   &_lg .#{$prefix}-select__selector {
-    min-height: $height-lg;
-    font-size: $font-size-lg;
+    min-height: var(--ty-height-lg);
+    font-size: var(--ty-font-size-lg);
     padding: 0 32px 0 12px;
   }
 
@@ -62,7 +62,7 @@
     align-items: center;
     width: 100%;
     border: $border-width solid var(--ty-input-border);
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     background-color: var(--ty-input-bg);
     box-sizing: border-box;
     transition: all 0.3s;
@@ -173,9 +173,9 @@
     max-width: 100%;
     height: 22px;
     padding: 0 4px 0 8px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     background-color: var(--ty-color-fill-secondary);
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
     line-height: 20px;
     color: var(--ty-color-text);
     box-sizing: border-box;
@@ -212,12 +212,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;
   }
 
@@ -238,7 +237,7 @@
     padding: 16px;
     text-align: center;
     color: var(--ty-color-text-quaternary);
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
   }
 }
 
@@ -284,9 +283,8 @@
 }
 
 .#{$prefix}-select-group {
-
   &__title {
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
     cursor: default;
     color: $gray-600;
     padding: 7px 12px;
@@ -307,6 +305,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

package/lib/select/style/index.css

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-block;
   width: 100%;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   cursor: pointer;
   outline: none;
 }
@@ -15,18 +15,18 @@
   cursor: not-allowed;
 }
 .ty-select_sm .ty-select__selector {
-  min-height: 24px;
-  font-size: 0.875rem;
+  min-height: var(--ty-height-sm);
+  font-size: var(--ty-font-size-sm);
   padding: 0 24px 0 8px;
 }
 .ty-select_md .ty-select__selector {
-  min-height: 32px;
-  font-size: 1rem;
+  min-height: var(--ty-height-md);
+  font-size: var(--ty-font-size-base);
   padding: 0 28px 0 10px;
 }
 .ty-select_lg .ty-select__selector {
-  min-height: 42px;
-  font-size: 1.25rem;
+  min-height: var(--ty-height-lg);
+  font-size: var(--ty-font-size-lg);
   padding: 0 32px 0 12px;
 }
 .ty-select_multiple .ty-select__selector {
@@ -46,7 +46,7 @@
   align-items: center;
   width: 100%;
   border: 1px solid var(--ty-input-border);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   background-color: var(--ty-input-bg);
   box-sizing: border-box;
   transition: all 0.3s;
@@ -143,9 +143,9 @@
   max-width: 100%;
   height: 22px;
   padding: 0 4px 0 8px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   background-color: var(--ty-color-fill-secondary);
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
   line-height: 20px;
   color: var(--ty-color-text);
   box-sizing: border-box;
@@ -176,12 +176,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: 2px;
-  font-size: 1rem;
+  border-radius: var(--ty-border-radius);
+  font-size: var(--ty-font-size-base);
   max-height: 300px;
 }
 .ty-select__loading {
@@ -197,7 +196,7 @@
   padding: 16px;
   text-align: center;
   color: var(--ty-color-text-quaternary);
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 
 .ty-select-option {
@@ -236,7 +235,7 @@
 }
 
 .ty-select-group__title {
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
   cursor: default;
   color: #8898aa;
   padding: 7px 12px;

package/lib/speed-dial/style/_index.scss

@@ -197,9 +197,9 @@ $speed-dial-actions-gap: 16px;
     white-space: nowrap;
     background-color: var(--ty-speed-dial-tooltip-bg, #{$gray-800});
     color: var(--ty-speed-dial-tooltip-color, #{$white-color});
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
     padding: 4px 8px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     pointer-events: none;
 
     &_left {

package/lib/speed-dial/style/index.css

@@ -156,9 +156,9 @@
   white-space: nowrap;
   background-color: var(--ty-speed-dial-tooltip-bg, #32325d);
   color: var(--ty-speed-dial-tooltip-color, #fff);
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
   padding: 4px 8px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   pointer-events: none;
 }
 .ty-speed-dial__action-tooltip_left {

package/lib/statistic/style/_index.scss

@@ -4,7 +4,7 @@
   &__title {
     margin-bottom: 4px;
     color: var(--ty-color-text-secondary, #{$gray-600});
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
   }
 
   &__content {
@@ -24,7 +24,7 @@
 
   &__suffix {
     margin-left: 4px;
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
     display: inline-flex;
     align-items: center;
   }

package/lib/statistic/style/index.css

@@ -1,7 +1,7 @@
 .ty-statistic__title {
   margin-bottom: 4px;
   color: var(--ty-color-text-secondary, #8898aa);
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-statistic__content {
   display: flex;
@@ -18,7 +18,7 @@
 }
 .ty-statistic__suffix {
   margin-left: 4px;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   display: inline-flex;
   align-items: center;
 }

package/lib/strength-indicator/strength-indicator.js

@@ -12,10 +12,11 @@ const StrengthIndicator = react.default.forwardRef((props, ref) => {
 		"#f44336",
 		"#ff9800",
 		"#52c41a"
-	], className, prefixCls: customisedCls, ...otherProps } = props;
+	], labels, className, prefixCls: customisedCls, ...otherProps } = props;
 	const prefixCls = require_general.getPrefixCls("strength-indicator", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
 	const cls = (0, classnames.default)(prefixCls, className);
-	const displayLabels = Array.isArray(props.labels) ? props.labels : [
+	const showLabels = labels !== void 0;
+	const displayLabels = Array.isArray(labels) ? labels : [
 		"Weak",
 		"Medium",
 		"Strong"
@@ -36,7 +37,7 @@ const StrengthIndicator = react.default.forwardRef((props, ref) => {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: `${prefixCls}__inner`,
 					style: { backgroundColor: bgColor }
-				}), "labels" in props && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}), showLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: `${prefixCls}__label`,
 					children: displayLabels[idx]
 				})]

package/lib/strength-indicator/strength-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"strength-indicator.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/strength-indicator/strength-indicator.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { StrengthIndicatorProps } from './types';\n\nconst StrengthIndicator = React.forwardRef<HTMLDivElement, StrengthIndicatorProps>(\n  (props: StrengthIndicatorProps, ref): React.ReactElement => {\n    const {\n      current = 0,\n      blocks = 3,\n      colors = ['#f44336', '#ff9800', '#52c41a'],\n      className,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('strength-indicator', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className);\n    const displayLabels: React.ReactNode[] = Array.isArray(props.labels)\n      ? props.labels\n      : ['Weak', 'Medium', 'Strong'];\n\n    return (\n      <div {...otherProps} className={cls} ref={ref} role=\"progressbar\" aria-valuenow={current} aria-valuemin={0} aria-valuemax={blocks}>\n        {Array.from(new Array(blocks)).map((item, idx) => {\n          const itemCls = classNames(`${prefixCls}__item`, {\n            [`${prefixCls}__item_active`]: idx < current,\n          });\n          const bgColor = idx < current ? colors[current - 1] : undefined;\n          return (\n            <div key={idx} className={itemCls}>\n              <div className={`${prefixCls}__inner`} style={{ backgroundColor: bgColor }} />\n              {'labels' in props && (\n                <div className={`${prefixCls}__label`}>{displayLabels[idx]}</div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nStrengthIndicator.displayName = 'StrengthIndicator';\n\nexport default StrengthIndicator;\n"],"mappings":";;;;;;;;;AAMA,MAAM,oBAAoBA,MAAAA,QAAM,YAC7B,OAA+B,QAA4B;CAC1D,MAAM,EACJ,UAAU,GACV,SAAS,GACT,SAAS;EAAC;EAAW;EAAW;EAAU,EAC1C,WACA,WAAW,eACX,GAAG,eACD;CAEJ,MAAM,YAAYC,gBAAAA,aAAa,uBAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACoB,WAAW,cAAc;CAC5F,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,UAAU;CAC5C,MAAM,gBAAmC,MAAM,QAAQ,MAAM,OAAO,GAChE,MAAM,SACN;EAAC;EAAQ;EAAU;EAAS;AAEhC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAU;EAAK,MAAK;EAAc,iBAAe;EAAS,iBAAe;EAAG,iBAAe;YACxH,MAAM,KAAK,IAAI,MAAM,OAAO,CAAC,CAAC,KAAK,MAAM,QAAQ;GAChD,MAAM,WAAA,GAAA,WAAA,SAAqB,GAAG,UAAU,SAAS,GAC9C,GAAG,UAAU,iBAAiB,MAAM,SACtC,CAAC;GACF,MAAM,UAAU,MAAM,UAAU,OAAO,UAAU,KAAK,KAAA;AACtD,UACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAe,WAAW;cAA1B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;KAAU,OAAO,EAAE,iBAAiB,SAAS;KAAI,CAAA,EAC7E,YAAY,SACX,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,cAAc;KAAW,CAAA,CAE/D;MALI,IAKJ;IAER;EACE,CAAA;EAGX;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"strength-indicator.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/strength-indicator/strength-indicator.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { StrengthIndicatorProps } from './types';\n\nconst StrengthIndicator = React.forwardRef<HTMLDivElement, StrengthIndicatorProps>(\n  (props: StrengthIndicatorProps, ref): React.ReactElement => {\n    const {\n      current = 0,\n      blocks = 3,\n      colors = ['#f44336', '#ff9800', '#52c41a'],\n      labels,\n      className,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('strength-indicator', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className);\n    const showLabels = labels !== undefined;\n    const displayLabels: React.ReactNode[] = Array.isArray(labels)\n      ? labels\n      : ['Weak', 'Medium', 'Strong'];\n\n    return (\n      <div {...otherProps} className={cls} ref={ref} role=\"progressbar\" aria-valuenow={current} aria-valuemin={0} aria-valuemax={blocks}>\n        {Array.from(new Array(blocks)).map((item, idx) => {\n          const itemCls = classNames(`${prefixCls}__item`, {\n            [`${prefixCls}__item_active`]: idx < current,\n          });\n          const bgColor = idx < current ? colors[current - 1] : undefined;\n          return (\n            <div key={idx} className={itemCls}>\n              <div className={`${prefixCls}__inner`} style={{ backgroundColor: bgColor }} />\n              {showLabels && (\n                <div className={`${prefixCls}__label`}>{displayLabels[idx]}</div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nStrengthIndicator.displayName = 'StrengthIndicator';\n\nexport default StrengthIndicator;\n"],"mappings":";;;;;;;;;AAMA,MAAM,oBAAoBA,MAAAA,QAAM,YAC7B,OAA+B,QAA4B;CAC1D,MAAM,EACJ,UAAU,GACV,SAAS,GACT,SAAS;EAAC;EAAW;EAAW;EAAU,EAC1C,QACA,WACA,WAAW,eACX,GAAG,eACD;CAEJ,MAAM,YAAYC,gBAAAA,aAAa,uBAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACoB,WAAW,cAAc;CAC5F,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,UAAU;CAC5C,MAAM,aAAa,WAAW,KAAA;CAC9B,MAAM,gBAAmC,MAAM,QAAQ,OAAO,GAC1D,SACA;EAAC;EAAQ;EAAU;EAAS;AAEhC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAU;EAAK,MAAK;EAAc,iBAAe;EAAS,iBAAe;EAAG,iBAAe;YACxH,MAAM,KAAK,IAAI,MAAM,OAAO,CAAC,CAAC,KAAK,MAAM,QAAQ;GAChD,MAAM,WAAA,GAAA,WAAA,SAAqB,GAAG,UAAU,SAAS,GAC9C,GAAG,UAAU,iBAAiB,MAAM,SACtC,CAAC;GACF,MAAM,UAAU,MAAM,UAAU,OAAO,UAAU,KAAK,KAAA;AACtD,UACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAe,WAAW;cAA1B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;KAAU,OAAO,EAAE,iBAAiB,SAAS;KAAI,CAAA,EAC7E,cACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,cAAc;KAAW,CAAA,CAE/D;MALI,IAKJ;IAER;EACE,CAAA;EAGX;AAED,kBAAkB,cAAc"}

package/lib/style/_component.scss

@@ -36,6 +36,7 @@
 @use "../loader/style/index" as *;
 @use "../loading-bar/style/index" as *;
 @use "../keyboard/style/index" as *;
+@use "../marquee/style/index" as *;
 @use "../menu/style/index" as *;
 @use "../message/style/index" as *;
 @use "../modal/style/index" as *;

package/lib/style/base.css

@@ -270,6 +270,25 @@
   --ty-calendar-bg: #fff;
   --ty-calendar-border: #e9ecef;
   --ty-calendar-hover: #f6f9fc;
+  --ty-font-family: -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --ty-font-family-monospace: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace;
+  --ty-font-size-base: 1rem;
+  --ty-font-size-sm: 0.875rem;
+  --ty-font-size-lg: 1.25rem;
+  --ty-font-weight: 400;
+  --ty-line-height-base: 1.5;
+  --ty-headings-font-weight: 500;
+  --ty-h1-font-size: 2.5rem;
+  --ty-h2-font-size: 2rem;
+  --ty-h3-font-size: 1.75rem;
+  --ty-h4-font-size: 1.5rem;
+  --ty-h5-font-size: 1.25rem;
+  --ty-h6-font-size: 1rem;
+  --ty-border-radius: 2px;
+  --ty-height-sm: 24px;
+  --ty-height-md: 32px;
+  --ty-height-lg: 42px;
+  --ty-spacer: 1rem;
 }
 
 html[data-tiny-theme=dark] {
@@ -544,6 +563,25 @@ html[data-tiny-theme=dark] {
   --ty-calendar-bg: #1f1f1f;
   --ty-calendar-border: #363636;
   --ty-calendar-hover: #2a2a2a;
+  --ty-font-family: -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --ty-font-family-monospace: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace;
+  --ty-font-size-base: 1rem;
+  --ty-font-size-sm: 0.875rem;
+  --ty-font-size-lg: 1.25rem;
+  --ty-font-weight: 400;
+  --ty-line-height-base: 1.5;
+  --ty-headings-font-weight: 500;
+  --ty-h1-font-size: 2.5rem;
+  --ty-h2-font-size: 2rem;
+  --ty-h3-font-size: 1.75rem;
+  --ty-h4-font-size: 1.5rem;
+  --ty-h5-font-size: 1.25rem;
+  --ty-h6-font-size: 1rem;
+  --ty-border-radius: 2px;
+  --ty-height-sm: 24px;
+  --ty-height-md: 32px;
+  --ty-height-lg: 42px;
+  --ty-spacer: 1rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -819,6 +857,25 @@ html[data-tiny-theme=dark] {
     --ty-calendar-bg: #1f1f1f;
     --ty-calendar-border: #363636;
     --ty-calendar-hover: #2a2a2a;
+    --ty-font-family: -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    --ty-font-family-monospace: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace;
+    --ty-font-size-base: 1rem;
+    --ty-font-size-sm: 0.875rem;
+    --ty-font-size-lg: 1.25rem;
+    --ty-font-weight: 400;
+    --ty-line-height-base: 1.5;
+    --ty-headings-font-weight: 500;
+    --ty-h1-font-size: 2.5rem;
+    --ty-h2-font-size: 2rem;
+    --ty-h3-font-size: 1.75rem;
+    --ty-h4-font-size: 1.5rem;
+    --ty-h5-font-size: 1.25rem;
+    --ty-h6-font-size: 1rem;
+    --ty-border-radius: 2px;
+    --ty-height-sm: 24px;
+    --ty-height-md: 32px;
+    --ty-height-lg: 42px;
+    --ty-spacer: 1rem;
   }
 }
 /* stylelint-disable scss/comment-no-empty */

package/lib/table/style/_index.scss

@@ -2,7 +2,7 @@
 
 .#{$prefix}-table {
   color: var(--ty-color-text, #{$gray-800});
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
 
   &__wrapper {
     overflow-x: auto;
@@ -24,8 +24,8 @@
 
   // Sizes
   &_sm &__cell {
-    padding: 8px 8px;
-    font-size: $font-size-sm;
+    padding: 8px;
+    font-size: var(--ty-font-size-sm);
   }
 
   &_md &__cell {
@@ -33,8 +33,8 @@
   }
 
   &_lg &__cell {
-    padding: 16px 16px;
-    font-size: $font-size-lg;
+    padding: 16px;
+    font-size: var(--ty-font-size-lg);
   }
 
   // Sticky header for virtual scroll
@@ -99,7 +99,7 @@
     }
 
     &_selected {
-      background: var(--ty-table-selected-bg, rgba(110, 65, 191, 0.06));
+      background: var(--ty-table-selected-bg, rgb(110 65 191 / 6%));
     }
   }
 

package/lib/table/style/index.css

@@ -1,6 +1,6 @@
 .ty-table {
   color: var(--ty-color-text, #32325d);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-table__wrapper {
   overflow-x: auto;
@@ -17,15 +17,15 @@
   border: 1px solid var(--ty-table-border, #dee2e6);
 }
 .ty-table_sm .ty-table__cell {
-  padding: 8px 8px;
-  font-size: 0.875rem;
+  padding: 8px;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-table_md .ty-table__cell {
   padding: 12px 16px;
 }
 .ty-table_lg .ty-table__cell {
-  padding: 16px 16px;
-  font-size: 1.25rem;
+  padding: 16px;
+  font-size: var(--ty-font-size-lg);
 }
 .ty-table__thead_sticky {
   position: sticky;

package/lib/tag/style/index.css

@@ -7,7 +7,7 @@
   padding: 3px 7px;
   font-size: 12px;
   border: 1px solid var(--ty-tag-border);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   color: var(--ty-color-text);
   background: var(--ty-tag-bg);
 }

package/lib/tag/tag.js

@@ -9,8 +9,8 @@ classnames = require_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/tag/tag.tsx
 const Tag = react.default.memo((0, react.forwardRef)((props, ref) => {
-	const { closable = false, defaultVisible = true, prefixCls: customisedCls, color, onClose, onClick, className, style, children, ...otherProps } = props;
-	const [visible, setVisible] = (0, react.useState)("visible" in props ? props.visible : defaultVisible);
+	const { closable = false, visible: visibleProp, defaultVisible = true, prefixCls: customisedCls, color, onClose, onClick, className, style, children, ...otherProps } = props;
+	const [visible, setVisible] = (0, react.useState)(visibleProp !== void 0 ? visibleProp : defaultVisible);
 	const prefixCls = require_general.getPrefixCls("tag", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
 	const cls = (0, classnames.default)(prefixCls, className, {
 		[`${prefixCls}_${color}`]: color && require_types.PresetColors.includes(color),
@@ -24,7 +24,7 @@ const Tag = react.default.memo((0, react.forwardRef)((props, ref) => {
 	const closeBtnOnClick = (e) => {
 		onClose && onClose(e);
 		if (e.defaultPrevented) return;
-		!("visible" in props) && setVisible(false);
+		visibleProp === void 0 && setVisible(false);
 	};
 	const tagStyle = {
 		backgroundColor: color ? require_types.PresetColors.includes(color) ? void 0 : color : void 0,
@@ -33,8 +33,8 @@ const Tag = react.default.memo((0, react.forwardRef)((props, ref) => {
 		...style
 	};
 	(0, react.useEffect)(() => {
-		"visible" in props && setVisible(props.visible);
-	}, [props]);
+		if (visibleProp !== void 0) setVisible(visibleProp);
+	}, [visibleProp]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...otherProps,
 		ref,

package/lib/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":["React","getPrefixCls","ConfigContext","PresetColors"],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import React, { useState, useEffect, MouseEvent, useContext, forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { PresetColors, TagProps } from './types';\n\nconst Tag = React.memo(forwardRef<HTMLDivElement, TagProps>((props, ref) => {\n  const {\n    closable = false,\n    defaultVisible = true,\n    prefixCls: customisedCls,\n    color,\n    onClose,\n    onClick,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n  const [visible, setVisible] = useState<boolean>(\n    'visible' in props ? (props.visible as boolean) : defaultVisible\n  );\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('tag', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${color}`]: color && PresetColors.includes(color),\n    [`${prefixCls}_visible`]: visible,\n    [`${prefixCls}_closeable`]: closable,\n  });\n\n  /**\n   * Callback when the close button is clicked.\n   * @param e\n   */\n  const closeBtnOnClick = (e: MouseEvent<HTMLSpanElement>): void => {\n    onClose && onClose(e);\n    if (e.defaultPrevented) {\n      return;\n    }\n    !('visible' in props) && setVisible(false);\n  };\n\n  const tagStyle: React.CSSProperties = {\n    backgroundColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined,\n    borderColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined,\n    color: color ? (PresetColors.includes(color) ? undefined : '#fff') : undefined,\n    ...style,\n  };\n\n  useEffect(() => {\n    'visible' in props && setVisible(props.visible as boolean);\n  }, [props]);\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={tagStyle} onClick={onClick}>\n      {children}\n      {closable && (\n        <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Remove\">\n          ✕\n        </button>\n      )}\n    </div>\n  );\n}));\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;AAMA,MAAM,MAAMA,MAAAA,QAAM,MAAA,GAAA,MAAA,aAA2C,OAAO,QAAQ;CAC1E,MAAM,EACJ,WAAW,OACX,iBAAiB,MACjB,WAAW,eACX,OACA,SACA,SACA,WACA,OACA,UACA,GAAG,eACD;CACJ,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UACd,aAAa,QAAS,MAAM,UAAsB,eACnD;CAED,MAAM,YAAYC,gBAAAA,aAAa,QAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACK,WAAW,cAAc;CAC7E,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW;GAC1C,GAAG,UAAU,GAAG,UAAU,SAASC,cAAAA,aAAa,SAAS,MAAM;GAC/D,GAAG,UAAU,YAAY;GACzB,GAAG,UAAU,cAAc;EAC7B,CAAC;;;;;CAMF,MAAM,mBAAmB,MAAyC;AAChE,aAAW,QAAQ,EAAE;AACrB,MAAI,EAAE,iBACJ;AAEF,IAAE,aAAa,UAAU,WAAW,MAAM;;CAG5C,MAAM,WAAgC;EACpC,iBAAiB,QAASA,cAAAA,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,QAAS,KAAA;EAC9E,aAAa,QAASA,cAAAA,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,QAAS,KAAA;EAC1E,OAAO,QAASA,cAAAA,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,SAAU,KAAA;EACrE,GAAG;EACJ;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,eAAa,SAAS,WAAW,MAAM,QAAmB;IACzD,CAAC,MAAM,CAAC;AAEX,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;EAAK,OAAO;EAAmB;YAAzE,CACG,UACA,YACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;GAAQ,MAAK;GAAS,WAAW,GAAG,UAAU;GAAc,SAAS;GAAiB,cAAW;aAAS;GAEjG,CAAA,CAEP;;EAER,CAAC;AAEH,IAAI,cAAc"}
+{"version":3,"file":"tag.js","names":["React","getPrefixCls","ConfigContext","PresetColors"],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import React, { useState, useEffect, MouseEvent, useContext, forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { PresetColors, TagProps } from './types';\n\nconst Tag = React.memo(forwardRef<HTMLDivElement, TagProps>((props, ref) => {\n  const {\n    closable = false,\n    visible: visibleProp,\n    defaultVisible = true,\n    prefixCls: customisedCls,\n    color,\n    onClose,\n    onClick,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n  const [visible, setVisible] = useState<boolean>(\n    visibleProp !== undefined ? visibleProp : defaultVisible\n  );\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('tag', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${color}`]: color && PresetColors.includes(color),\n    [`${prefixCls}_visible`]: visible,\n    [`${prefixCls}_closeable`]: closable,\n  });\n\n  /**\n   * Callback when the close button is clicked.\n   * @param e\n   */\n  const closeBtnOnClick = (e: MouseEvent<HTMLSpanElement>): void => {\n    onClose && onClose(e);\n    if (e.defaultPrevented) {\n      return;\n    }\n    visibleProp === undefined && setVisible(false);\n  };\n\n  const tagStyle: React.CSSProperties = {\n    backgroundColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined,\n    borderColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined,\n    color: color ? (PresetColors.includes(color) ? undefined : '#fff') : undefined,\n    ...style,\n  };\n\n  useEffect(() => {\n    if (visibleProp !== undefined) setVisible(visibleProp);\n  }, [visibleProp]);\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={tagStyle} onClick={onClick}>\n      {children}\n      {closable && (\n        <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Remove\">\n          ✕\n        </button>\n      )}\n    </div>\n  );\n}));\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;AAMA,MAAM,MAAMA,MAAAA,QAAM,MAAA,GAAA,MAAA,aAA2C,OAAO,QAAQ;CAC1E,MAAM,EACJ,WAAW,OACX,SAAS,aACT,iBAAiB,MACjB,WAAW,eACX,OACA,SACA,SACA,WACA,OACA,UACA,GAAG,eACD;CACJ,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UACd,gBAAgB,KAAA,IAAY,cAAc,eAC3C;CAED,MAAM,YAAYC,gBAAAA,aAAa,QAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACK,WAAW,cAAc;CAC7E,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW;GAC1C,GAAG,UAAU,GAAG,UAAU,SAASC,cAAAA,aAAa,SAAS,MAAM;GAC/D,GAAG,UAAU,YAAY;GACzB,GAAG,UAAU,cAAc;EAC7B,CAAC;;;;;CAMF,MAAM,mBAAmB,MAAyC;AAChE,aAAW,QAAQ,EAAE;AACrB,MAAI,EAAE,iBACJ;AAEF,kBAAgB,KAAA,KAAa,WAAW,MAAM;;CAGhD,MAAM,WAAgC;EACpC,iBAAiB,QAASA,cAAAA,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,QAAS,KAAA;EAC9E,aAAa,QAASA,cAAAA,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,QAAS,KAAA;EAC1E,OAAO,QAASA,cAAAA,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,SAAU,KAAA;EACrE,GAAG;EACJ;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,gBAAgB,KAAA,EAAW,YAAW,YAAY;IACrD,CAAC,YAAY,CAAC;AAEjB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;EAAK,OAAO;EAAmB;YAAzE,CACG,UACA,YACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;GAAQ,MAAK;GAAS,WAAW,GAAG,UAAU;GAAc,SAAS;GAAiB,cAAW;aAAS;GAEjG,CAAA,CAEP;;EAER,CAAC;AAEH,IAAI,cAAc"}

package/lib/textarea/style/index.css

@@ -6,8 +6,8 @@
   border: 1px solid var(--ty-input-border);
   transition: all 0.3s;
   outline: 0;
-  border-radius: 2px;
-  font-size: 1rem;
+  border-radius: var(--ty-border-radius);
+  font-size: var(--ty-font-size-base);
   background-color: var(--ty-input-bg);
 }
 .ty-textarea:hover {

package/lib/time-picker/style/_index.scss

@@ -5,7 +5,7 @@ $tp: #{$prefix}-time-picker;
 .#{$tp} {
   display: inline-flex;
   position: relative;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
 
   // ---- Input ----
   &__input {

package/lib/time-picker/style/index.css

@@ -1,7 +1,7 @@
 .ty-time-picker {
   display: inline-flex;
   position: relative;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-time-picker__input {
   display: inline-flex;