@itcase/ui 1.4.8 → 1.4.10

package/dist/css/mixins/mixin_typography.css

@@ -1,216 +1,237 @@
 @define-mixin h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h1-min, 32px), var(--typography-h1-max, 38px),
-    $minLetterSpacing, var(--typography-h1-min-line-height, 64px),
-    var(--typography-h1-max-line-height, 80px), $maxLetterSpacing,
-    var(--typography-h1-font, system-ui);
+  @mixin font $weight, var(--typography-h1-min), var(--typography-h1-max),
+    $minLetterSpacing, var(--typography-h1-min-line-height),
+    var(--typography-h1-max-line-height), $maxLetterSpacing,
+    var(--typography-h1-font);
 }
 
 @define-mixin h2 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h2-min, 26px), var(--typography-h2-max, 32px),
-    $minLetterSpacing, var(--typography-h2-min-line-height, 46px),
-    var(--typography-h2-max-line-height, 58px), $maxLetterSpacing,
-    var(--typography-h2-font, system-ui);
+  @mixin font $weight, var(--typography-h2-min), var(--typography-h2-max),
+    $minLetterSpacing, var(--typography-h2-min-line-height),
+    var(--typography-h2-max-line-height), $maxLetterSpacing,
+    var(--typography-h2-font);
 }
 
 @define-mixin h3 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h3-min, 18px), var(--typography-h3-max, 24px),
-    $minLetterSpacing, var(--typography-h3-min-line-height, 32px),
-    var(--typography-h3-max-line-height, 40px), $maxLetterSpacing,
-    var(--typography-h3-font, system-ui);
+  @mixin font $weight, var(--typography-h3-min), var(--typography-h3-max),
+    $minLetterSpacing, var(--typography-h3-min-line-height),
+    var(--typography-h3-max-line-height), $maxLetterSpacing,
+    var(--typography-h3-font);
 }
 
 @define-mixin h4 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h4-min, 16px), var(--typography-h4-max, 18px),
-    $minLetterSpacing, var(--typography-h4-min-line-height, 24px),
-    var(--typography-h4-max-line-height, 30px), $maxLetterSpacing,
-    var(--typography-h4-font, system-ui);
+  @mixin font $weight, var(--typography-h4-min), var(--typography-h4-max),
+    $minLetterSpacing, var(--typography-h4-min-line-height),
+    var(--typography-h4-max-line-height), $maxLetterSpacing,
+    var(--typography-h4-font);
 }
 
 @define-mixin h5 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h5-min, 14px), var(--typography-h5-max, 16px),
-    $minLetterSpacing, var(--typography-h5-min-line-height, 18px),
-    var(--typography-h5-max-line-height, 26px), $maxLetterSpacing,
-    var(--typography-h5-font, system-ui);
+  @mixin font $weight, var(--typography-h5-min), var(--typography-h5-max),
+    $minLetterSpacing, var(--typography-h5-min-line-height),
+    var(--typography-h5-max-line-height), $maxLetterSpacing,
+    var(--typography-h5-font);
 }
 
 @define-mixin h6 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h6-min, 12px), var(--typography-h6-max, 18px),
-    $minLetterSpacing, var(--typography-h6-min-line-height, 16px),
-    var(--typography-h6-max-line-height, 24px), $maxLetterSpacing,
-    var(--typography-h6-font, system-ui);
+  @mixin font $weight, var(--typography-h6-min), var(--typography-h6-max),
+    $minLetterSpacing, var(--typography-h6-min-line-height),
+    var(--typography-h6-max-line-height), $maxLetterSpacing,
+    var(--typography-h6-font);
 }
 
-@define-mixin hero_h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-hero1-min, 32px), var(--typography-hero1-max, 38px),
-    $minLetterSpacing, var(--typography-hero1-min-line-height, 64px),
-    var(--typography-hero1-max-line-height, 80px), $maxLetterSpacing,
-    var(--typography-hero1-font, system-ui);
+@define-mixin hero_h1 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero1-min), var(--typography-hero1-max),
+    $minLetterSpacing, var(--typography-hero1-min-line-height),
+    var(--typography-hero1-max-line-height), $maxLetterSpacing,
+    var(--typography-hero1-font);
 }
 
-@define-mixin hero_h2 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-hero2-min, 26px), var(--typography-hero2-max, 32px),
-    $minLetterSpacing, var(--typography-hero2-min-line-height, 46px),
-    var(--typography-hero2-max-line-height, 58px), $maxLetterSpacing,
-    var(--typography-hero2-font, system-ui);
+@define-mixin hero_h2 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero2-min), var(--typography-hero2-max),
+    $minLetterSpacing, var(--typography-hero2-min-line-height),
+    var(--typography-hero2-max-line-height), $maxLetterSpacing,
+    var(--typography-hero2-font);
 }
 
-@define-mixin hero_h3 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-hero3-min, 18px), var(--typography-hero3-max, 24px),
-    $minLetterSpacing, var(--typography-hero3-min-line-height, 32px),
-    var(--typography-hero3-max-line-height, 40px), $maxLetterSpacing,
-    var(--typography-hero3-font, system-ui);
+@define-mixin hero_h3 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero3-min), var(--typography-hero3-max),
+    $minLetterSpacing, var(--typography-hero3-min-line-height),
+    var(--typography-hero3-max-line-height), $maxLetterSpacing,
+    var(--typography-hero3-font);
 }
 
-@define-mixin hero_h4 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-hero4-min, 16px), var(--typography-hero4-max, 18px),
-    $minLetterSpacing, var(--typography-hero4-min-line-height, 24px),
-    var(--typography-hero4-max-line-height, 30px), $maxLetterSpacing,
-    var(--typography-hero4-font, system-ui);
+@define-mixin hero_h4 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero4-min), var(--typography-hero4-max),
+    $minLetterSpacing, var(--typography-hero4-min-line-height),
+    var(--typography-hero4-max-line-height), $maxLetterSpacing,
+    var(--typography-hero4-font);
 }
 
-@define-mixin hero_h5 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-hero5-min, 14px), var(--typography-hero5-max, 16px),
-    $minLetterSpacing, var(--typography-hero5-min-line-height, 18px),
-    var(--typography-hero5-max-line-height, 26px), $maxLetterSpacing,
-    var(--typography-hero5-font, system-ui);
+@define-mixin hero_h5 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero5-min), var(--typography-hero5-max),
+    $minLetterSpacing, var(--typography-hero5-min-line-height),
+    var(--typography-hero5-max-line-height), $maxLetterSpacing,
+    var(--typography-hero5-font);
 }
 
-@define-mixin hero_h6 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-hero6-min, 12px), var(--typography-hero6-max, 18px),
-    $minLetterSpacing, var(--typography-hero6-min-line-height, 16px),
-    var(--typography-hero6-max-line-height, 24px), $maxLetterSpacing,
-    var(--typography-hero6-font, system-ui);
+@define-mixin hero_h6 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero6-min), var(--typography-hero6-max),
+    $minLetterSpacing, var(--typography-hero6-min-line-height),
+    var(--typography-hero6-max-line-height), $maxLetterSpacing,
+    var(--typography-hero6-font);
 }
 
 @define-mixin p $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-p-min, 16px), var(--typography-p-max, 24px),
-    $minLetterSpacing, var(--typography-p-min-line-height, 24px),
-    var(--typography-p-max-line-height, 36px), $maxLetterSpacing,
-    var(--typography-p-font, system-ui);
+  @mixin font $weight, var(--typography-p-min), var(--typography-p-max),
+    $minLetterSpacing, var(--typography-p-min-line-height),
+    var(--typography-p-max-line-height), $maxLetterSpacing,
+    var(--typography-p-font);
 }
 
-@define-mixin text-xxl $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-xxl-min, 24px), var(--typography-text-xxl-max, 28px),
-    $minLetterSpacing, var(--typography-text-xxl-min-line-height, 24px),
-    var(--typography-text-xxl-max-line-height, 28px), $maxLetterSpacing,
-    var(--typography-text-xxl-font, system-ui);
+@define-mixin text-xxl $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xxl-min),
+    var(--typography-text-xxl-max), $minLetterSpacing,
+    var(--typography-text-xxl-min-line-height),
+    var(--typography-text-xxl-max-line-height), $maxLetterSpacing,
+    var(--typography-text-xxl-font);
 }
 
-@define-mixin text-xl $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-xl-min, 20px), var(--typography-text-xl-max, 24px),
-    $minLetterSpacing, var(--typography-text-xl-min-line-height, 20px),
-    var(--typography-text-xl-max-line-height, 24px), $maxLetterSpacing,
-    var(--typography-text-xl-font, system-ui);
+@define-mixin text-xl $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xl-min),
+    var(--typography-text-xl-max), $minLetterSpacing,
+    var(--typography-text-xl-min-line-height),
+    var(--typography-text-xl-max-line-height), $maxLetterSpacing,
+    var(--typography-text-xl-font);
 }
 
 @define-mixin text-l $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-l-min, 18px), var(--typography-text-l-max, 24px),
-    $minLetterSpacing, var(--typography-text-l-min-line-height, 18px),
-    var(--typography-text-l-max-line-height, 24px), $maxLetterSpacing,
-    var(--typography-text-l-font, system-ui);
+  @mixin font $weight, var(--typography-text-l-min),
+    var(--typography-text-l-max), $minLetterSpacing,
+    var(--typography-text-l-min-line-height),
+    var(--typography-text-l-max-line-height), $maxLetterSpacing,
+    var(--typography-text-l-font);
 }
 
 @define-mixin text-m $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-m-min, 16px), var(--typography-text-m-max, 18px),
-    $minLetterSpacing, var(--typography-text-m-min-line-height, 16px),
-    var(--typography-text-m-max-line-height, 20px), $maxLetterSpacing,
-    var(--typography-text-m-font, system-ui);
+  @mixin font $weight, var(--typography-text-m-min),
+    var(--typography-text-m-max), $minLetterSpacing,
+    var(--typography-text-m-min-line-height),
+    var(--typography-text-m-max-line-height), $maxLetterSpacing,
+    var(--typography-text-m-font);
 }
 
 @define-mixin text-s $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-s-min, 14px), var(--typography-text-s-max, 18px),
-    $minLetterSpacing, var(--typography-text-s-min-line-height, 14px),
-    var(--typography-text-s-max-line-height, 18px), $maxLetterSpacing,
-    var(--typography-text-s-font, system-ui);
+  @mixin font $weight, var(--typography-text-s-min),
+    var(--typography-text-s-max), $minLetterSpacing,
+    var(--typography-text-s-min-line-height),
+    var(--typography-text-s-max-line-height), $maxLetterSpacing,
+    var(--typography-text-s-font);
 }
 
-@define-mixin text-xs $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-xs-min, 12px), var(--typography-text-xs-max, 16px),
-    $minLetterSpacing, var(--typography-text-xs-min-line-height, 12px),
-    var(--typography-text-xs-max-line-height, 16px), $maxLetterSpacing,
-    var(--typography-text-xs-font, system-ui);
+@define-mixin text-xs $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xs-min),
+    var(--typography-text-xs-max), $minLetterSpacing,
+    var(--typography-text-xs-min-line-height),
+    var(--typography-text-xs-max-line-height), $maxLetterSpacing,
+    var(--typography-text-xs-font);
 }
 
-@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-xxs-min, 10px), var(--typography-text-xxs-max, 14px),
-    $minLetterSpacing, var(--typography-text-xxs-min-line-height, 10px),
-    var(--typography-text-xxs-max-line-height, 14px), $maxLetterSpacing,
-    var(--typography-text-xxs-font, system-ui);
+@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xxs-min),
+    var(--typography-text-xxs-max), $minLetterSpacing,
+    var(--typography-text-xxs-min-line-height),
+    var(--typography-text-xxs-max-line-height), $maxLetterSpacing,
+    var(--typography-text-xxs-font);
 }
 
 @define-mixin email-h1 $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-h1, 32px),
-    var(--typography-email-h1-line-height, 38px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-h1),
+    var(--typography-email-h1-line-height), var(--font-email);
 }
 
 @define-mixin email-h2 $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-h2, 26px),
-    var(--typography-email-h2-line-height, 32px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-h2),
+    var(--typography-email-h2-line-height), var(--font-email);
 }
 
 @define-mixin email-h3 $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-h3, 18px),
-    var(--typography-email-h3-line-height, 24px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-h3),
+    var(--typography-email-h3-line-height), var(--font-email);
 }
 
 @define-mixin email-h4 $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-h4, 24px),
-    var(--typography-email-h4-line-height, 30px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-h4),
+    var(--typography-email-h4-line-height), var(--font-email);
 }
 
 @define-mixin email-h5 $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-h5, 18px),
-    var(--typography-email-h5-line-height, 24px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-h5),
+    var(--typography-email-h5-line-height), var(--font-email);
 }
 
 @define-mixin email-h6 $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-h6, 12px),
-    var(--typography-email-h6-line-height, 18px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-h6),
+    var(--typography-email-h6-line-height), var(--font-email);
 }
 
 @define-mixin email-p $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-p, 16px),
-    var(--typography-email-p-line-height, 24px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-p),
+    var(--typography-email-p-line-height), var(--font-email);
 }
 
 @define-mixin email-text-xxl $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-text-xxl, 24px),
-    var(--typography-email-text-xxl-line-height, 28px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-text-xxl),
+    var(--typography-email-text-xxl-line-height), var(--font-email);
 }
 
 @define-mixin email-text-xl $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-text-xl, 20px),
-    var(--typography-email-text-xl-line-height, 24px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-text-xl),
+    var(--typography-email-text-xl-line-height), var(--font-email);
 }
 
 @define-mixin email-text-l $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-text-l, 18px),
-    var(--typography-email-text-l-line-height, 24px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-text-l),
+    var(--typography-email-text-l-line-height), var(--font-email);
 }
 
 @define-mixin email-text-m $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-text-m, 16px),
-    var(--typography-email-text-m-line-height, 18px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-text-m),
+    var(--typography-email-text-m-line-height), var(--font-email);
 }
 
 @define-mixin email-text-s $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-text-s, 14px),
-    var(--typography-email-text-s-line-height, 18px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-text-s),
+    var(--typography-email-text-s-line-height), var(--font-email);
 }
 
 @define-mixin email-text-xs $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-text-xs, 12px),
-    var(--typographyemail-text-xs-line-height, 16px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-text-xs),
+    var(--typographyemail-text-xs-line-height), var(--font-email);
 }
 
 @define-mixin email-text-xxs $weight: normal {
-  @mixin font-fixed $weight, var(--typography-email-text-xxs, 10px),
-    var(--typography-email-text-xxs-line-height, 14px), var(--font-email);
+  @mixin font-fixed $weight, var(--typography-email-text-xxs),
+    var(--typography-email-text-xxs-line-height), var(--font-email);
 }
 
 @define-mixin text-gradient-primary {
   color: transparent;
-  background: linear-gradient(90deg, hsla(266, 100%, 64%, 1) 0%, hsla(213, 79%, 68%, 1) 50%);
+  background: linear-gradient(
+    90deg,
+    hsl(266, 100%, 64%, 1) 0%,
+    hsl(213, 79%, 68%, 1) 50%
+  );
   background-clip: text;
   text-fill-color: transparent;
 }

package/dist/css/mixins/mixin_utils.css

@@ -1,34 +1,33 @@
-@define-mixin font $fontWeight, $minFontSize, $maxFontSize, $minLetterSpacing, $minLineHeight,
-  $maxLineHeight, $maxLetterSpacing, $fontFamily {
+/* stylelint-disable declaration-property-value-keyword-no-deprecated */
+@define-mixin font $fontWeight, $minFontSize, $maxFontSize, $minLetterSpacing,
+  $minLineHeight, $maxLineHeight, $maxLetterSpacing, $fontFamily {
   font-size: fluid(
     $minFontSize,
     $maxFontSize,
-    var(--typography-min-viewport, 360px),
-    var(--typography-max-viewport, 1920px)
+    var(--typography-min-viewport),
+    var(--typography-max-viewport)
   );
   font-weight: $fontWeight;
   line-height: fluid(
     $minLineHeight,
     $maxLineHeight,
-    var(--typography-min-viewport, 360px),
-    var(--typography-max-viewport, 1920px)
+    var(--typography-min-viewport),
+    var(--typography-max-viewport)
   );
   letter-spacing: fluid(
     $minLetterSpacing,
     $maxLetterSpacing,
-    var(--typography-min-viewport, 360px),
-    var(--typography-max-viewport, 1920px)
+    var(--typography-min-viewport),
+    var(--typography-max-viewport)
   );
   font-family: $fontFamily;
 }
-
 @define-mixin font-fixed $weight, $size, $line, $family {
   font-size: $size;
   font-weight: $weight;
   font-family: $family;
   line-height: $line;
 }
-
 @define-mixin word-wrap {
   overflow-wrap: break-word;
   word-wrap: break-word;

package/dist/css/styles/fill/fill_active_hover.css

@@ -2,28 +2,32 @@
   &_active {
     &_hover {
       @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-        senary, surface, error, success, warning, info, danger, disabled,
-        gradient {
+        senary, surface, error, success, warning, info, danger, gradient {
         &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary,
-            senary, accent, disabled, hover, active {
+          @each $color in primary, secondary, tertiary, quaternary {
             &-$(color) {
               &:hover {
                 background: var(--color-$(type)-$(color));
               }
+              &-hover {
+                &:hover {
+                  background: var(--color-$(type)-$(color)-hover);
+                }
+                &-active {
+                  &:hover {
+                    background: var(--color-$(type)-$(color)-active-hover);
+                  }
+                }
+              }
+              &-active {
+                &:hover {
+                  background: var(--color-$(type)-$(color)-active);
+                }
+              }
             }
           }
         }
       }
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-        senary, surface, error, success, warning, info, danger, disabled,
-        gradient {
-        &_$(type) {
-          &-primary {
-            background: var(--color-$(type)-primary);
-          }
-        }
-      }
     }
   }
 }

package/dist/stories/{Typography.mdx → TypographyAM.mdx}

@@ -1,10 +1,10 @@
 import { Meta, Typeset } from '@storybook/blocks'
 
-<Meta title="Tokens / Typography" />
+<Meta title="Tokens / Typography / AM" />
 
 export const typography = {
   type: {
-    primary: 'PF Din Display Pro Family, sans-serif',
+    primary: 'Wix Madefor Display, sans-serif',
   },
   weight: {
     regular: '400',
@@ -27,7 +27,7 @@ export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing el
 # Typography
 
 
-**Font:** PF Din Display Pro Family
+**Font:** Wix Madefor Display
 
 **Title:** H1- H6
 
@@ -47,7 +47,7 @@ export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing el
 
 export const textography = {
   type: {
-    primary: 'PF Din Display Pro Family, sans-serif',
+    primary: 'Wix Madefor Display, sans-serif',
   },
   weight: {
     regular: '400',

package/dist/stories/TypographyBaikal.mdx

@@ -0,0 +1,82 @@
+import { Meta, Typeset } from '@storybook/blocks'
+
+<Meta title="Tokens / Typography / Baikal" />
+
+export const typography = {
+  type: {
+    primary: 'PF-Din-Display-Pro, sans-serif',
+  },
+  weight: {
+    regular: '400',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+  },
+  size: {
+    h1: 64,
+    h2: 46,
+    h3: 32,
+    h4: 24,
+    h5: 18,
+    h6: 16,
+  },
+}
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+
+# Typography
+
+
+**Font:** PF-Din-Display-Pro
+
+**Title:** H1- H6
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.h1),
+    Number(typography.size.h2),
+    Number(typography.size.h3),
+    Number(typography.size.h4),
+    Number(typography.size.h5),
+    Number(typography.size.h6),
+  ]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+export const textography = {
+  type: {
+    primary: 'PF-Din-Display-Pro, sans-serif',
+  },
+  weight: {
+    regular: '400',
+    semibold: '600',
+  },
+  size: {
+    xxl: 24,
+    xl: 22,
+    l: 20,
+    m: 16,
+    s: 14,
+    xs: 12,
+    xxs: 10,
+  },
+}
+
+**Text:** xxl- xxs
+
+<Typeset
+  fontSizes={[
+    Number(textography.size.xxl),
+    Number(textography.size.xl),
+    Number(textography.size.l),
+    Number(textography.size.m),
+    Number(textography.size.s),
+    Number(textography.size.xs),
+    Number(textography.size.xxs),
+  ]}
+  fontWeight={textography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={textography.type.primary}
+/>

package/dist/types/components/Dropdown/Dropdown.interface.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { tAlignDirectionProps, tAlignmentProps, tAlignProps, tDirectionProps, tElevationProps, tFillHoverProps, tFillProps, tJustifyContentProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextSizeProps, tTextStyleProps, tTextWeightProps, tTextWrapProps, tTypeProps, tUnderlineProps, tWidthProps } from 'types';
+import { tAlignDirectionProps, tAlignmentProps, tDirectionProps, tFillHoverProps, tFillProps, tJustifyContentProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextSizeProps, tTextStyleProps, tTextWeightProps, tTextWrapProps, tTypeProps, tUnderlineProps } from 'types';
 import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
+import { tAlignProps, tElevationProps, tWidthProps } from '@itcase/types';
 import { iStyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 export interface iDropdownProps extends iStyleAttributes {
     [key: number | string | symbol]: any;

package/dist/types/types/componentProps/align.d.ts

@@ -1,3 +1,2 @@
 declare const alignProps: readonly ["topLeft", "topCenter", "topRight", "left", "center", "right", "bottomLeft", "bottomCenter", "bottomRight"];
-export type tAlignProps = (typeof alignProps)[number];
 export { alignProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -97,19 +97,19 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.22",
-    "@itcase/config": "^1.0.26",
+    "@itcase/config": "^1.0.36",
     "@itcase/icons": "^1.0.29",
-    "@itcase/storybook-config": "^1.1.8",
-    "@itcase/tokens-am": "^1.0.28",
-    "@itcase/tokens-baikal": "^1.0.30",
+    "@itcase/storybook-config": "^1.1.9",
+    "@itcase/tokens-am": "^1.1.0",
+    "@itcase/tokens-baikal": "^1.1.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "framer-motion": "^12.7.3",
+    "framer-motion": "^12.7.4",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "motion": "^12.7.3",
+    "motion": "^12.7.4",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -134,7 +134,7 @@
     "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@itcase/lint": "^1.1.5",
+    "@itcase/lint": "^1.1.7",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",