@tiny-design/react 1.4.0 → 1.5.0

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;

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;

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 {

package/es/collapse/style/index.css

@@ -1,6 +1,6 @@
 .ty-collapse {
   box-sizing: border-box;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   color: var(--ty-color-text);
   font-size: 14px;
   border: 1px solid var(--ty-collapse-border);
@@ -13,10 +13,10 @@
   border-bottom: 1px solid var(--ty-collapse-border);
 }
 .ty-collapse-item:last-child {
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 var(--ty-border-radius) var(--ty-border-radius);
 }
 .ty-collapse-item:last-child .ty-collapse-item__content {
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 var(--ty-border-radius) var(--ty-border-radius);
 }
 .ty-collapse-item__header {
   display: flex;

package/es/color-picker/style/_index.scss

@@ -23,7 +23,7 @@
   &__swatch {
     width: 32px;
     height: 32px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     border: 1px solid var(--ty-color-picker-border, #{$gray-300});
     padding: 3px;
     cursor: pointer;
@@ -39,7 +39,7 @@
     padding: 12px;
     background: var(--ty-color-picker-bg, #fff);
     border-radius: 8px;
-    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
     width: 240px;
   }
 
@@ -70,7 +70,7 @@
     height: 12px;
     border-radius: 50%;
     border: 2px solid #fff;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 2px rgb(0 0 0 / 30%);
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
@@ -128,7 +128,7 @@
     height: 14px;
     border-radius: 50%;
     border: 2px solid #fff;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 2px rgb(0 0 0 / 30%);
     transform: translate(-50%, -50%);
     pointer-events: none;
     background: transparent;
@@ -144,7 +144,7 @@
   &__format-btn {
     border: 1px solid var(--ty-color-picker-border, #{$gray-300});
     background: transparent;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     padding: 2px 6px;
     cursor: pointer;
     font-size: 12px;
@@ -159,7 +159,7 @@
   &__hex-input {
     flex: 1;
     border: 1px solid var(--ty-color-picker-border, #{$gray-300});
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     padding: 2px 6px;
     font-size: 12px;
     font-family: $font-family-monospace;
@@ -184,7 +184,7 @@
   &__preset {
     width: 20px;
     height: 20px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     cursor: pointer;
     border: 1px solid var(--ty-color-picker-border, #{$gray-300});
     transition: transform 0.15s;