@tiny-design/react 1.3.0 → 1.5.0

package/lib/radio/style/_index.scss

@@ -4,16 +4,13 @@
   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);
 
   &__native {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
@@ -34,7 +31,7 @@
     align-items: center;
     justify-content: center;
 
-    &:after {
+    &::after {
       box-sizing: border-box;
       display: inline-block;
       content: '';
@@ -54,7 +51,7 @@
 
   &_checked {
     .#{$prefix}-radio {
-      &__inner:after {
+      &__inner::after {
         transform: scale(1);
       }
     }
@@ -69,7 +66,7 @@
       &__inner {
         border-color: var(--ty-radio-disabled-border);
 
-        &:after {
+        &::after {
           background-color: var(--ty-radio-disabled-dot);
         }
 

package/lib/radio/style/index.css

@@ -2,16 +2,13 @@
   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);
 }
 .ty-radio__native {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
@@ -31,7 +28,7 @@
   align-items: center;
   justify-content: center;
 }
-.ty-radio__inner:after {
+.ty-radio__inner::after {
   box-sizing: border-box;
   display: inline-block;
   content: "";
@@ -46,7 +43,7 @@
   padding: 0 5px;
   line-height: 16px;
 }
-.ty-radio_checked .ty-radio__inner:after {
+.ty-radio_checked .ty-radio__inner::after {
   transform: scale(1);
 }
 .ty-radio_disabled .ty-radio__native {
@@ -55,7 +52,7 @@
 .ty-radio_disabled .ty-radio__inner {
   border-color: var(--ty-radio-disabled-border);
 }
-.ty-radio_disabled .ty-radio__inner:after {
+.ty-radio_disabled .ty-radio__inner::after {
   background-color: var(--ty-radio-disabled-dot);
 }
 .ty-radio_disabled .ty-radio__inner + span {

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/slider/style/_index.scss

@@ -5,21 +5,13 @@
   box-sizing: border-box;
   cursor: pointer;
 
-  &_horizontal.#{$prefix}-slider {
-    margin-bottom: $slider-margin-bottom-with-marks;
-  }
-
-  &_vertical.#{$prefix}-slider {
-    margin-right: $slider-margin-bottom-with-marks;
-  }
-
   &_horizontal {
+    width: 100%;
     min-height: $slider-size;
     margin: 13px 7px;
     padding: 4px 0;
 
     .#{$prefix}-slider {
-
       &__rail {
         width: 100%;
         height: $slider-track-size;

package/lib/slider/style/index.css

@@ -3,13 +3,8 @@
   box-sizing: border-box;
   cursor: pointer;
 }
-.ty-slider_horizontal.ty-slider {
-  margin-bottom: 30px;
-}
-.ty-slider_vertical.ty-slider {
-  margin-right: 30px;
-}
 .ty-slider_horizontal {
+  width: 100%;
   min-height: 12px;
   margin: 13px 7px;
   padding: 4px 0;

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

@@ -1,5 +1,4 @@
 @use "../../style/variables" as *;
-@use "sass:color";
 
 $speed-dial-fab-size: 56px;
 $speed-dial-action-size: 40px;
@@ -18,8 +17,8 @@ $speed-dial-actions-gap: 16px;
     height: $speed-dial-fab-size;
     border-radius: 50%;
     border: none;
-    background-color: var(--ty-speed-dial-bg, #{$primary-color});
-    color: var(--ty-speed-dial-color, #{$white-color});
+    background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
+    color: var(--ty-speed-dial-color, #fff);
     font-size: 24px;
     cursor: pointer;
     box-shadow: $box-shadow;
@@ -27,11 +26,11 @@ $speed-dial-actions-gap: 16px;
     outline: none;
 
     &:hover:not(.#{$prefix}-speed-dial__button_disabled) {
-      background-color: var(--ty-speed-dial-bg-hover, #{color.adjust($primary-color, $lightness: -8%)});
+      background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow;
+      box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow;
     }
 
     &_open {
@@ -59,7 +58,7 @@ $speed-dial-actions-gap: 16px;
       position: absolute;
       top: 50%;
       left: 50%;
-      background-color: currentColor;
+      background-color: currentcolor;
       border-radius: 1px;
       translate: -50% -50%;
     }
@@ -183,7 +182,7 @@ $speed-dial-actions-gap: 16px;
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow-sm;
+      box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow-sm;
     }
 
     &_disabled {
@@ -198,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

@@ -10,7 +10,7 @@
   height: 56px;
   border-radius: 50%;
   border: none;
-  background-color: var(--ty-speed-dial-bg, #6e41bf);
+  background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
   color: var(--ty-speed-dial-color, #fff);
   font-size: 24px;
   cursor: pointer;
@@ -19,10 +19,10 @@
   outline: none;
 }
 .ty-speed-dial__button:hover:not(.ty-speed-dial__button_disabled) {
-  background-color: var(--ty-speed-dial-bg-hover, rgb(92.3496062992, 54.2236220472, 160.9763779528));
+  background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
 }
 .ty-speed-dial__button:focus-visible {
-  box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.3), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgba(110, 65, 191, 0.2)), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
 .ty-speed-dial__button_open .ty-speed-dial__icon-default {
   transform: rotate(45deg);
@@ -43,7 +43,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  background-color: currentColor;
+  background-color: currentcolor;
   border-radius: 1px;
   translate: -50% -50%;
 }
@@ -145,7 +145,7 @@
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
 .ty-speed-dial__action:focus-visible {
-  box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.3), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgba(110, 65, 191, 0.2)), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
 .ty-speed-dial__action_disabled {
   opacity: 0.5;
@@ -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/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 *;