@itcase/ui 1.0.1

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

@@ -0,0 +1,28 @@
+.fill {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+    &_$(type) {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        &-$(color) {
+          background: var(--color-$(type)-$(color));
+          @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95  {
+            &$(alpha) {
+              background: var(--color-$(type)-$(color)-$(alpha));
+            }
+          }
+        }
+      }
+    }
+  }
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+    &_$(type) {
+      &-primary {
+        background: var(--color-$(type)-primary);
+          @each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95  {
+            &$(alpha) {
+              background: var(--color-$(type)-primary$(opacity));
+            }
+          }
+      }
+    }
+  }
+}

package/dist/css/styles/fill/fill_active.css

@@ -0,0 +1,22 @@
+.fill {
+  &_active {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+      &_$(type) {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &:hover {
+              background: var(--color-$(type)-$(color));
+            }
+          }
+        }
+      }
+    }
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+      &_$(type) {
+        &-primary {
+          background: var(--color-$(type)-primary);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+.fill {
+  &_active {
+    &_hover {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              &:hover {
+                background: var(--color-$(type)-$(color));
+              }
+            }
+          }
+        }
+      }
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error {
+        &_$(type) {
+          &-primary {
+            background: var(--color-$(type)-primary);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/fill/fill_disabled.css

@@ -0,0 +1,22 @@
+.fill {
+  &_disabled {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+      &_$(type) {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &:hover {
+              background: var(--color-$(type)-$(color));
+            }
+          }
+        }
+      }
+    }
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+      &_$(type) {
+        &-primary {
+          background: var(--color-$(type)-primary);
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/fill/fill_hover.css

@@ -0,0 +1,34 @@
+.fill {
+  &_hover {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+      &_$(type) {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &:hover {
+              background: var(--color-$(type)-$(color));
+            }
+            &-hover {
+              &:hover {
+                background: var(--color-$(type)-$(color)-hover);
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+      &_$(type) {
+        &-primary {
+          &:hover {
+            background: var(--color-$(type)-primary);
+          }
+          &-hover {
+            &:hover {
+              background: var(--color-$(type)-primary-hover);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/fill-gradient/fill-gradient.css

@@ -0,0 +1,15 @@
+.fill-gradient {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        &-$(color) {
+          @each $direction in left, top, right, bottom  {
+            &-$(direction) {
+              background: linear-gradient(to $(direction), var(--color-$(type)-gradient-$(color)-start) 0%, var(--color-$(type)-gradient-$(color)-end) 100%);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/height/height.css

@@ -0,0 +1,9 @@
+.height {
+  &_hug {
+    display: inline-flex;
+  }
+  &_fill {
+    height: 100%;
+  }
+}
+

package/dist/css/styles/hover/hover-fill-color.css

@@ -0,0 +1,13 @@
+.hover-fill-color {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        &-$(color) {
+          &:hover {
+            background: var(--color-$(type)-$(color));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/hover/hover-item-color.css

@@ -0,0 +1,15 @@
+.hover-item-color {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &:hover {
+              color: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/hover/hover-text-color.css

@@ -0,0 +1,15 @@
+.hover-text-color {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-text {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &:hover {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/mediaqueries.css

@@ -0,0 +1,66 @@
+: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; /* 560px */
+}
+
+@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);

package/dist/css/styles/mixin_elevation.css

@@ -0,0 +1,33 @@
+/* stylelint-disable length-zero-no-unit */
+
+@define-mixin elevation-1 {
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24);
+}
+
+@define-mixin elevation-2 {
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+@define-mixin elevation-4 {
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
+}
+
+@define-mixin elevation-6 {
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.24);
+}
+
+@define-mixin elevation-8 {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
+}
+
+@define-mixin elevation-12 {
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16)
+}
+
+@define-mixin elevation-16 {
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16);
+}
+
+@define-mixin elevation-24 {
+  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.12);
+}

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

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

package/dist/css/styles/mixin_global.css

@@ -0,0 +1,54 @@
+@define-mixin font $fontWeight, $minFontSize, $minLineHeight, $minLetterSpacing, $maxFontSize, $maxLineHeight, $maxLetterSpacing, $fontFamily {
+  font-size: responsive $minFontSize $maxFontSize;
+  font-range: var(--min-max);
+  font-weight: $fontWeight;
+  font-family: $fontFamily;
+  line-height: responsive $minLineHeight $maxLineHeight;
+  line-height-range: var(--min-max);
+  letter-spacing: responsive $minLetterSpacing $maxLetterSpacing;
+  letter-spacing-range: var(--min-max);
+  @media (--desktop-super-huge) {
+    font-size: $maxFontSize;
+    line-height: $maxLineHeight;
+    letter-spacing: $maxLetterSpacing;
+  }
+}
+
+@define-mixin dark {
+  @media (prefers-color-scheme: dark) {
+    & {
+      @mixin-content;
+    }
+  }
+}
+
+@define-mixin light {
+  @media (prefers-color-scheme: light) {
+    & {
+      @mixin-content;
+    }
+  }
+  @mixin-content;
+}
+
+@define-mixin disableAnimation {
+  transform: translate(0, 0);
+  opacity: 100%;
+}
+
+@define-mixin easing $ease: easeInSine, $type: all, $time: 0.2s {
+  transition: $type $time $ease;
+}
+
+@define-mixin easing $ease: easeInSine, $type: all, $time: 0.2s {
+  transition: $type $time $ease;
+}
+
+@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;
+}

package/dist/css/styles/opacity/opacity.css

@@ -0,0 +1,7 @@
+.opacity {
+  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100 {
+    &_$(val) {
+      opacity: $(val)%;
+    }
+  }
+}

package/dist/css/styles/placeholder-text-color/placeholder-text-color.css

@@ -0,0 +1,15 @@
+.placeholder-text-color {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-text {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &::placeholder {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/position/position.css

@@ -0,0 +1,14 @@
+.position {
+  &_absolute {
+    position: asoluite;
+  }
+  &_relative {
+    position: relative;
+  }
+  &_fixed {
+    position: fixed;
+  }
+  &_static {
+    position: static;
+  }
+}

package/dist/css/styles/resize-horizontal/resize-horizontal.css

@@ -0,0 +1,12 @@
+.resize-horizontal {
+  &_hug {
+    display: inline-flex;
+  }
+  &_fill {
+    width: 100%;
+  }
+  &_fit-content {
+    display: inline-flex;
+  }
+}
+

package/dist/css/styles/resize-vertical/resize-vertical.css

@@ -0,0 +1,10 @@
+.resize-vertical {
+  &_hug {
+    display: inline-flex;
+  }
+  &_fill {
+    min-height: 100%;
+    flex: 1;
+  }
+}
+

package/dist/css/styles/shape/shape.css

@@ -0,0 +1,8 @@
+.shape {
+  &_rounded {
+    border-radius: 8px;
+  }
+  &_circular {
+    border-radius: 50%;
+  }
+}

package/dist/css/styles/text-align/text-align.css

@@ -0,0 +1,7 @@
+.text_align {
+  @each $align in left, center, right {
+    &_$(align) {
+      text-align: ($align);
+    }
+  }
+}

package/dist/css/styles/text-color/text-color.css

@@ -0,0 +1,13 @@
+.text-color {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+    &_$(type) {
+      &-text {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            color: var(--color-$(type)-text-$(color));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/text-color/text-color_active.css

@@ -0,0 +1,15 @@
+.text-color {
+  &_active {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+      &_$(type) {
+        &-text {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/text-color/text-color_hover.css

@@ -0,0 +1,17 @@
+.text-color {
+  &_hover {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+      &_$(type) {
+        &-text {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              &:hover {
+                color: var(--color-$(type)-text-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/text-color-hover/text-color-hover.css

@@ -0,0 +1,15 @@
+.text-color-hover {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning{
+    &_$(type) {
+      &-text {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &:hover {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/text-decoration/text-decoration.css

@@ -0,0 +1,9 @@
+.text {
+  &-decoration {
+    @each $val in underline, none {
+      &_$(val) {
+        text-decoration: $(val);
+      }
+    }
+  }
+}

package/dist/css/styles/text-gradient/text-gradient.css

@@ -0,0 +1,24 @@
+.text-gradient {
+  &_primary {
+    @mixin text-gradient-primary;
+  }
+}
+
+.text-gradient {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        &-$(color) {
+          @each $direction in left, top, right, bottom  {
+            &-$(direction) {
+              background: linear-gradient(to $(direction), var(--color-$(type)-text-gradient-$(color)-start) 0%, var(--color-$(type)-text-gradient-$(color)-end) 100%);
+              background-clip: text;
+              text-fill-color: transparent;
+              color: transparent;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/text-style/text-style.css

@@ -0,0 +1,9 @@
+.text {
+  &&-style {
+    @each $val in normal, italic {
+      &_$(val) {
+        font-style: $(val);
+      }
+    }
+  }
+}

package/dist/css/styles/text-truncate/text-truncate.css

@@ -0,0 +1,7 @@
+.text-truncate {
+  &_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/dist/css/styles/text-weight/text-weight.css

@@ -0,0 +1,40 @@
+.text {
+  &-weight {
+    @each $val in 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 {
+      &_$(val) {
+        font-weight: $(val);
+      }
+    }
+    &_thin {
+      font-weight: 100;
+    }
+    &_extra-light,
+    &_ultra-light {
+      font-weight: 200;
+    }
+    &_light {
+      font-weight: 300;
+    }
+    &_normal {
+      font-weight: 400;
+    }
+    &_medium {
+      font-weight: 500;
+    }
+    &_semi-bold,
+    &_demi-bold {
+      font-weight: 600;
+    }
+    &_bold {
+      font-weight: 700;
+    }
+    &_extra-bold,
+    &_ultra-bold {
+      font-weight: 800;
+    }
+    &_black,
+    &_heavy {
+      font-weight: 900;
+    }
+  }
+}

package/dist/css/styles/width/width.css

@@ -0,0 +1,9 @@
+.width {
+  &_hug {
+    display: inline-flex;
+  }
+  &_fill {
+    width: 100%;
+  }
+}
+

package/dist/css/styles/word-wrap/word-wrap.css

@@ -0,0 +1,8 @@
+.word-wrap {
+  &_wrap {
+    @mixin word-wrap;
+  }
+  &_nowrap {
+    white-space: nowrap;
+  }
+}