@tiny-design/react 1.3.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.scss

@@ -24,7 +24,7 @@ $btn-prefix: #{$prefix}-btn;
   line-height: $btn-line-height;
 
   &__loader {
-    @include loader();
+    @include loader;
   }
 
   &__icon-container, &__loader {
@@ -91,19 +91,27 @@ $btn-prefix: #{$prefix}-btn;
   }
 
   &_info {
-    @include button-style(#fff, var(--ty-color-info), var(--ty-color-info));
+    @include button-style(#fff, var(--ty-color-info), var(--ty-color-info),
+      var(--ty-color-info-hover), var(--ty-color-info-hover), #fff,
+      var(--ty-color-info-active), var(--ty-color-info-active), #fff);
   }
 
   &_success {
-    @include button-style(#fff, var(--ty-color-success), var(--ty-color-success));
+    @include button-style(#fff, var(--ty-color-success), var(--ty-color-success),
+      var(--ty-color-success-hover), var(--ty-color-success-hover), #fff,
+      var(--ty-color-success-active), var(--ty-color-success-active), #fff);
   }
 
   &_warning {
-    @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning));
+    @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning),
+      var(--ty-color-warning-hover), var(--ty-color-warning-hover), #fff,
+      var(--ty-color-warning-active), var(--ty-color-warning-active), #fff);
   }
 
   &_danger {
-    @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger));
+    @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger),
+      var(--ty-color-danger-hover), var(--ty-color-danger-hover), #fff,
+      var(--ty-color-danger-active), var(--ty-color-danger-active), #fff);
   }
 
   // Sizes
@@ -135,13 +143,10 @@ $btn-prefix: #{$prefix}-btn;
     position: relative;
     pointer-events: none;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
-      top: -1px;
-      right: -1px;
-      bottom: -1px;
-      left: -1px;
+      inset: -1px;
       z-index: 1;
       display: block;
       background: var(--ty-btn-loading-bg);
@@ -208,7 +213,7 @@ $btn-prefix: #{$prefix}-btn;
   &_danger {
     .#{$btn-prefix} {
       &:not(:first-child) {
-        border-left-color: rgba(255, 255, 255, 0.2);
+        border-left-color: rgb(255 255 255 / 20%);
       }
     }
   }

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 {
@@ -212,13 +212,19 @@
 }
 .ty-btn_info:hover {
   color: #fff;
+  background: var(--ty-color-info-hover);
+  border-color: var(--ty-color-info-hover);
 }
 .ty-btn_info:focus {
   color: #fff;
+  background: var(--ty-color-info-hover);
+  border-color: var(--ty-color-info-hover);
   z-index: 1;
 }
 .ty-btn_info:active {
   color: #fff;
+  background: var(--ty-color-info-active);
+  border-color: var(--ty-color-info-active);
 }
 .ty-btn_info:disabled {
   color: var(--ty-btn-disabled-color);
@@ -232,13 +238,19 @@
 }
 .ty-btn_success:hover {
   color: #fff;
+  background: var(--ty-color-success-hover);
+  border-color: var(--ty-color-success-hover);
 }
 .ty-btn_success:focus {
   color: #fff;
+  background: var(--ty-color-success-hover);
+  border-color: var(--ty-color-success-hover);
   z-index: 1;
 }
 .ty-btn_success:active {
   color: #fff;
+  background: var(--ty-color-success-active);
+  border-color: var(--ty-color-success-active);
 }
 .ty-btn_success:disabled {
   color: var(--ty-btn-disabled-color);
@@ -252,13 +264,19 @@
 }
 .ty-btn_warning:hover {
   color: #fff;
+  background: var(--ty-color-warning-hover);
+  border-color: var(--ty-color-warning-hover);
 }
 .ty-btn_warning:focus {
   color: #fff;
+  background: var(--ty-color-warning-hover);
+  border-color: var(--ty-color-warning-hover);
   z-index: 1;
 }
 .ty-btn_warning:active {
   color: #fff;
+  background: var(--ty-color-warning-active);
+  border-color: var(--ty-color-warning-active);
 }
 .ty-btn_warning:disabled {
   color: var(--ty-btn-disabled-color);
@@ -272,13 +290,19 @@
 }
 .ty-btn_danger:hover {
   color: #fff;
+  background: var(--ty-color-danger-hover);
+  border-color: var(--ty-color-danger-hover);
 }
 .ty-btn_danger:focus {
   color: #fff;
+  background: var(--ty-color-danger-hover);
+  border-color: var(--ty-color-danger-hover);
   z-index: 1;
 }
 .ty-btn_danger:active {
   color: #fff;
+  background: var(--ty-color-danger-active);
+  border-color: var(--ty-color-danger-active);
 }
 .ty-btn_danger:disabled {
   color: var(--ty-btn-disabled-color);
@@ -287,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%;
@@ -307,19 +331,16 @@
   margin: 0;
 }
 .ty-btn_round {
-  border-radius: 42px;
+  border-radius: var(--ty-height-lg);
 }
 .ty-btn_loading {
   position: relative;
   pointer-events: none;
 }
-.ty-btn_loading:before {
+.ty-btn_loading::before {
   content: "";
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  inset: -1px;
   z-index: 1;
   display: block;
   background: var(--ty-btn-loading-bg);
@@ -349,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);
         }