@itcase/ui 1.9.0 → 1.9.2

package/dist/css/mediaqueries/mediaqueries.css

@@ -0,0 +1,78 @@
+:root {
+  --mobile-tiny: 15em; /* 240px */
+  --mobile-small: 20em; /* 320px */
+  --mobile-medium: 23.435em; /* 375px */
+  --mobile-large: 25.875em; /* 414px */
+  --mobile-extra-large: 30em; /* 480px */
+  --mobile-super-extra-large: 40em; /* 640px */
+  --tablet: 48em; /* 768px */
+  --desktop-small: 60em; /* 960px */
+  --desktop-medium: 64em; /* 1024px */
+  --desktop-normal: 72.5em; /* 1160px */
+  --desktop-large: 80em; /* 1280px */
+  --desktop-extra-large: 90em; /* 1441px */
+  --desktop-super-extra-large: 120em; /* 1920px */
+  --desktop-huge: 160em; /* 2560px */
+}
+
+@custom-media --warning (width <= 15em);
+
+@custom-media --mobile (width >= 15em) and (width < 48em);
+
+@custom-media --mobile-tiny (width >= 15em) and (width < 20em);
+
+@custom-media --mobile-small (width >= 20em) and (width < 23.435em);
+
+@custom-media --mobile-medium (width >= 23.435em) and (width < 25.875em);
+
+@custom-media --mobile-standart (width >= 25.875em) and (width < 30em);
+
+@custom-media --mobile-large (width >= 30em) and (width < 40em);
+
+@custom-media --mobile-huge (width >= 40em) and (width < 48em);
+
+@custom-media --tablet (width >= 48em) and (width < 60em);
+
+@custom-media --tablet-small (width >= 40em) and (width < 48em);
+
+@custom-media --tablet-large (width >= 48em) and (width < 60em);
+
+@custom-media --desktop (width >= 60em);
+
+@custom-media --desktop-small (width >= 60em) and (width < 64em);
+
+@custom-media --desktop-medium (width >= 64em) and (width < 72.5em);
+
+@custom-media --desktop-normal (width >= 72.5em) and (width < 80em);
+
+@custom-media --desktop-standart (width >= 80em) and (width < 90em);
+
+@custom-media --desktop-large (width >= 90em) and (width < 120em);
+
+@custom-media --desktop-huge (width >= 120em) and (width < 160em);
+
+@custom-media --desktop-super-huge (width >= 160em);
+
+@custom-media --landscape (orientation: landscape) and (width >= 15em) and (width < 60em);
+
+@custom-media --portrait (orientation: portrait) and (width >= 15em) and (width < 60em);
+
+@custom-media --touch (hover: none) and (pointer: coarse);
+
+@custom-media --stylus (hover: none) and (pointer: fine);
+
+@custom-media --console (hover: hover) and (pointer: coarse);
+
+@custom-media --mouse (hover: hover) and (pointer: fine);
+
+@custom-media --tiny-viewport (width <= 1366px) and (height <= 720px);
+
+@custom-media --small-viewport (width >= 1366px) and (height < 768px);
+
+@custom-media --medium-viewport (width >= 1440px) and (height < 900px);
+
+@custom-media --large-viewport (width >= 1440px) and (height < 900px);
+
+@custom-media --huge-viewport (width >= 1600px) and (height < 900px);
+
+@custom-media --super-huge-viewport (width >= 1920px) and (height >= 1080px);

package/dist/css/mixins/mixin_animation.css

@@ -0,0 +1,8 @@
+@define-mixin disableAnimation {
+  transform: translate(0, 0);
+  opacity: 100%;
+}
+
+@define-mixin easing $ease: easeInSine, $type: all, $time: 0.2s {
+  transition: $type $time $ease;
+}

package/dist/css/mixins/mixin_dark-light.css

@@ -0,0 +1,16 @@
+@define-mixin dark {
+  @media (prefers-color-scheme: dark) {
+    & {
+      @mixin-content;
+    }
+  }
+}
+
+@define-mixin light {
+  @media (prefers-color-scheme: light) {
+    & {
+      @mixin-content;
+    }
+  }
+  @mixin-content;
+}

package/dist/css/mixins/mixin_elevation.css

@@ -0,0 +1,31 @@
+@define-mixin elevation-1 {
+  box-shadow: var(--elevation-1);
+}
+
+@define-mixin elevation-2 {
+  box-shadow: var(--elevation-2);
+}
+
+@define-mixin elevation-4 {
+  box-shadow: var(--elevation-4);
+}
+
+@define-mixin elevation-6 {
+  box-shadow: var(--elevation-6);
+}
+
+@define-mixin elevation-8 {
+  box-shadow: var(--elevation-8);
+}
+
+@define-mixin elevation-12 {
+  box-shadow: var(--elevation-12);
+}
+
+@define-mixin elevation-16 {
+  box-shadow: var(--elevation-16);
+}
+
+@define-mixin elevation-24 {
+  box-shadow: var(--elevation-24);
+}

package/dist/css/mixins/mixin_fill-gradient.css

@@ -0,0 +1,47 @@
+@define-mixin fill-gradient_surface-primary-left {
+  background: linear-gradient(
+    to left,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-top {
+  background: linear-gradient(
+    to top,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-right {
+  background: linear-gradient(
+    to left,
+    hsl(0, 0%, 0%, 0.65) 0%,
+    hsl(0, 0%, 0%, 0) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-bottom {
+  background: linear-gradient(
+    to top,
+    hsl(0, 0%, 0%, 0.65) 0%,
+    hsl(0, 0%, 0%, 0) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-diagonal-left {
+  background: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-diagonal-right {
+  background: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
+}

package/dist/css/mixins/mixin_typography.css

@@ -0,0 +1,237 @@
+@define-mixin h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @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), 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), 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), 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), 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), 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), 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), 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), 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), 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), 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), 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), 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),
+    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),
+    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),
+    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),
+    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),
+    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),
+    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),
+    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),
+    var(--typography-email-h1-line-height), var(--font-email);
+}
+
+@define-mixin email-h2 $weight: normal {
+  @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),
+    var(--typography-email-h3-line-height), var(--font-email);
+}
+
+@define-mixin email-h4 $weight: normal {
+  @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),
+    var(--typography-email-h5-line-height), var(--font-email);
+}
+
+@define-mixin email-h6 $weight: normal {
+  @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),
+    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),
+    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),
+    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),
+    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),
+    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),
+    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),
+    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),
+    var(--typography-email-text-xxs-line-height), var(--font-email);
+}
+
+@define-mixin text-gradient-primary {
+  color: transparent;
+  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

@@ -0,0 +1,54 @@
+/* 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),
+    var(--typography-max-viewport)
+  );
+  font-weight: $fontWeight;
+  line-height: fluid(
+    $minLineHeight,
+    $maxLineHeight,
+    var(--typography-min-viewport),
+    var(--typography-max-viewport)
+  );
+  letter-spacing: fluid(
+    $minLetterSpacing,
+    $maxLetterSpacing,
+    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;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
+}
+@define-mixin truncate-text $font-size: 16px, $line-height: 1.4,
+  $lines-to-show: 2 {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines-to-show;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  text-overflow: ellipsis;
+  visibility: visible;
+  @supports not (-webkit-line-clamp: $lines-to-show) {
+    max-height: $font-size * $line-height * $lines-to-show;
+    line-height: $line-height;
+    display: block;
+  }
+}

package/dist/css/styles/bundles.css

@@ -38298,6 +38298,18 @@ textarea.fill {
 .shape {
   &_rounded {
     border-radius: 8px;
+    &S {
+      border-radius: 0.5m;
+    }
+    &M {
+      border-radius: 1m;
+    }
+    &L {
+      border-radius: 1.5m;
+    }
+    &XL {
+      border-radius: 2m;
+    }
   }
   &_circular {
     border-radius: 50%;
@@ -40195,7 +40207,7 @@ textarea.fill {
         }
   }
 }
-.text_align {
+.text-align {
     &_left {
       text-align: left;
     }
@@ -43833,6 +43845,17 @@ textarea.fill {
       }
   }
 }
+.text-font {
+    &_primary {
+      font-family: primary;
+    }
+    &_secondary {
+      font-family: secondary;
+    }
+    &_tertiary {
+      font-family: tertiary;
+    }
+}
 .text-gradient {
   &_primary {
     @mixin text-gradient-primary;