@itcase/ui 1.0.1

package/dist/css/components/Grid/Grid.css

@@ -0,0 +1,208 @@
+.grid {
+  width: 100%;
+  position: relative;
+  &__before {
+    position: relative;
+    overflow: hidden;
+  }
+  &__after {
+    position: relative;
+    overflow: hidden;
+  }
+  &__background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  &__wrapper {
+    width: 100%;
+    max-width: var(--max);
+    margin: 0 auto;
+    &-inner {
+      display: grid;
+      position: relative;
+    }
+    ^&__item {
+      position: relative;
+    }
+    &-background {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+}
+.grid {
+  @each $val in auto, normal, stretch, center, start, end, space-around, space-between, space-evenly, safe center, unsafe center, self-start, self-end, first, baseline, first, baseline, last baseline {
+    &_align-content_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          align-content: $(val);
+        }
+      }
+    }
+    &_align-items_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          align-items: $(val);
+        }
+      }
+    }
+  }
+}
+.grid {
+  @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,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    &_columns_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat($(val), 1fr);
+        }
+      }
+    }
+  }
+}
+.grid {
+  @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,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    &_row-gap_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          row-gap: $(val)px;
+        }
+      }
+    }
+    &_column-gap_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          column-gap: $(val)px;
+        }
+      }
+    }
+  }
+}
+.grid {
+  @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around, space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right, baseline, first baseline, last baseline {
+    &_justify-content_$(val) {
+      justify-content: $(val);
+    }
+    &_justify-items_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          justify-items: $(val);
+        }
+      }
+    }
+  }
+}
+.grid {
+  @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,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    &_rows_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat($(val), 1fr);
+          }
+      }
+    }
+  }
+}
+.grid {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+  }
+}
+.grid {
+  &&_state {
+    &_system {
+      ^^&__wrapper {
+        padding: 0 var(--grid-system-margin);
+        &-inner {
+          grid-template-columns: 1fr repeat(var(--grid-system-columns), var(--grid-system-gutter) 1fr);
+        }
+      }
+    }
+  }
+}
+.grid {
+  &&_type {
+    &_surface {
+      &-secondary {
+        ^^^&__wrapper {
+          background: var(--color-surface-secondary);
+        }
+      }
+    }
+  }
+}
+.grid {
+  &&_vertical-resizing {
+    &_fill {
+      & > ^&__wrapper {
+        height: 100%;
+        & > div {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+  }
+}
+.grid {
+  &__item {
+    @each $val in auto, normal, stretch, center, start, end, space-around, space-between, space-evenly, safe center, unsafe center, self-start, self-end, first, baseline, first, baseline, last baseline {
+      &_align-self_$(val) {
+        align-self: $(val);
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+    @each $val in -1,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,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+      &_column {
+        &-start_$(val) {
+          grid-column-start: $(val);
+        }
+        &-end_$(val) {
+          grid-column-end: $(val);
+        }
+        &-span_$(val) {
+          grid-column-end: span $(val);
+        }
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+    @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around, space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right, baseline, first baseline, last baseline {
+      &_justify-self_$(val) {
+        justify-self: $(val);
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+      &_row {
+        &-start_$(val) {
+          grid-row-start: $(val);
+        }
+        &-end_$(val) {
+          grid-row-end: $(val);
+        }
+        &-span_$(val) {
+          grid-row-end: span $(val);
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Grid/css/__item/grid__item.css

@@ -0,0 +1,4 @@
+.grid {
+  &__item {
+  }
+}

package/dist/css/components/Grid/css/__item/grid__item_align-self.css

@@ -0,0 +1,9 @@
+.grid {
+  &__item {
+    @each $val in auto, normal, stretch, center, start, end, space-around, space-between, space-evenly, safe center, unsafe center, self-start, self-end, first, baseline, first, baseline, last baseline {
+      &_align-self_$(val) {
+        align-self: $(val);
+      }
+    }
+  }
+}

package/dist/css/components/Grid/css/__item/grid__item_column.css

@@ -0,0 +1,17 @@
+.grid {
+  &__item {
+    @each $val in -1,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,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+      &_column {
+        &-start_$(val) {
+          grid-column-start: $(val);
+        }
+        &-end_$(val) {
+          grid-column-end: $(val);
+        }
+        &-span_$(val) {
+          grid-column-end: span $(val);
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Grid/css/__item/grid__item_justify-self.css

@@ -0,0 +1,9 @@
+.grid {
+  &__item {
+    @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around, space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right, baseline, first baseline, last baseline {
+      &_justify-self_$(val) {
+        justify-self: $(val);
+      }
+    }
+  }
+}

package/dist/css/components/Grid/css/__item/grid__item_row.css

@@ -0,0 +1,17 @@
+.grid {
+  &__item {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+      &_row {
+        &-start_$(val) {
+          grid-row-start: $(val);
+        }
+        &-end_$(val) {
+          grid-row-end: $(val);
+        }
+        &-span_$(val) {
+          grid-row-end: span $(val);
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Group/Group.css

@@ -0,0 +1,106 @@
+.group {
+  &_wrap {
+    &_wrap {
+      flex-wrap: wrap;
+    }
+    &_nowrap {
+      flex-wrap: nowrap;
+    }
+    &_wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
+
+.group {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-self_$(val) {
+      align-self: $(val);
+    }
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}
+
+.group {
+  @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 {
+    &&_columns_$(val) {
+      display: grid;
+      grid-template-columns: repeat($(val), 1fr);
+    }
+  }
+}
+
+.group {
+  &_direction {
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}
+
+.group {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+
+.group {
+  &_stacking {
+    &_first-on-top {
+      @each $order, $indexValue in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20), (20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1) {
+        :nth-child($order) {
+          z-index: $indexValue;
+        }
+      }
+    }
+    &_last-on-top {
+      @each $order, $indexValue in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20), (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20) {
+        :nth-child($order) {
+          z-index: $indexValue;
+        }
+      }
+    }
+  }
+}
+
+.group {
+  &_wrap {
+    @each $val in nowrap, wrap, wrap-reverse {
+      &_wrap_$(val) {
+        flex-wrap: $(val);
+      }
+    }
+  }
+}
+
+.group {
+  &_type {
+    &_horizontal_scroll {
+      ^^&__wrapper {
+        display: flex;
+        overflow-x: scroll;
+        overflow-y: hidden;
+      }
+    }
+  }
+}

package/dist/css/components/Icon/Icon.css

@@ -0,0 +1,149 @@
+.icon {
+  &__item {
+    display: flex;
+    & svg {
+      transition: var(--icon-transition);
+    }
+  }
+}
+.icon {
+  &_size {
+    @each $size in 14, 16, 24, 32, 40, 56, 60, 72 {
+      &_$(size) {
+        height: $(size)px;
+        width: $(size)px;
+        min-height: $(size)px;
+        min-width: $(size)px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: $(size)px;
+      }
+    }
+  }
+}
+.icon_fill {
+  @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) {
+            & svg {
+              stroke: none;
+              fill: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        &-$(color) {
+          & svg {
+            stroke: none;
+            fill: var(--color-$(type)-$(color));
+          }
+        }
+      }
+    }
+  }
+}
+.icon_fill_hover {
+  @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 {
+              & svg {
+                stroke: none;
+                fill: var(--color-$(type)-item-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.icon_fill {
+  &_size {
+    @each $size in 14, 16, 24, 32, 40, 56, 60, 72 {
+      &_$(size) {
+        height: $(size)px;
+        width: $(size)px;
+        min-height: $(size)px;
+        min-width: $(size)px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: $(size)px;
+      }
+    }
+  }
+}
+.icon_stroke {
+  @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) {
+            & svg {
+              fill: none;
+              stroke: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.icon_stroke_hover {
+  @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 {
+              & svg {
+                fill: none;
+                stroke: var(--color-$(type)-item-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.icon_shape {
+  &_rounded {
+    border-radius: 12px;
+  }
+  &_circular {
+    border-radius: 50%;
+  }
+  &_geometric {
+    border-radius: 0;
+  }
+}
+.icon {
+  &_type {
+    &_with-counter {
+      position: relative;
+      ^^&__link,
+      ^^&__item {
+        text-decoration: none;
+        @each $size in 14, 16, 24, 32, 40, 56, 60, 72 {
+          &^^^&_size_$(size) {
+            & .counter {
+              transform: translate(var(--icon-size-$(size)-counter-position));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+:root {
+  --icon-transition: all 0.2s ease 0s;
+  --icon-size-24-counter-position: 12px, 12px;
+}

package/dist/css/components/Image/Image.css

@@ -0,0 +1,106 @@
+.image {
+  font-size: 0;
+  &__wrapper {
+    position: relative;
+    font-size: 0;
+  }
+}
+.image {
+  &_horizontal-content-align {
+    &_center {
+      ^^&__wrapper {
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}
+.image {
+  &_resize-mode {
+    &_cover {
+      > ^^&__wrapper {
+        & > ^^^&__item {
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+    &_caption-back {
+      > ^^&__wrapper {
+        position: relative;
+        & > ^^^&__item {
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+      .caption {
+        position: inherit;
+      }
+    }
+  }
+}
+.image {
+  &_shape {
+    &_rounded {
+      > ^^&__wrapper {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        border-radius: 12px;
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+          border-radius: 12px;
+        }
+      }
+    }
+    &_circular {
+      > ^^&__wrapper {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+      }
+    }
+    &_geometric {
+      > ^^&__wrapper {
+        width: 100%;
+        height: 100%;
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.image {
+  &&_type_cover {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    ^&__wrapper {
+      height: 100%;
+      & img {
+        width: 100%;
+      }
+    }
+  }
+}
+.image {
+  &_vertical-content-align {
+    &_center {
+      ^^&__wrapper {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}

package/dist/css/components/Input/Input.css

@@ -0,0 +1,41 @@
+.input {
+  border: none;
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  min-width: unset;
+  box-shadow: none;
+  outline: 0;
+  position: relative;
+  &:focus {
+    outline: none;
+  }
+  &&_state {
+    &_success {
+      border: solid 1px var(--color-success-border-primary);
+    }
+    &_error {
+      border: solid 1px var(--color-error-border-primary);
+    }
+    &_focus {
+      background: var(--color-surface-primary);
+    }
+  }
+}
+.input {
+  &_shape {
+    &_rounded {
+      border-radius: 4px;
+      position: relative;
+    }
+  }
+}
+.input {
+  &&_size {
+    @each $size in xs, s, m, l, xl, xxl {
+      &_$(size) {
+        padding: var(--input-size-$(size)-padding);
+      }
+    }
+  }
+}

package/dist/css/components/Label/Label.css

@@ -0,0 +1,33 @@
+.label {
+  display: inline-flex;
+  &__inner {
+    font-size: 0;
+    line-height: 0;
+  }
+}
+
+.label {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        padding: var(--label-size-$(size)-padding);
+      }
+    }
+  }
+}
+
+.label {
+  &_shape {
+    &_rounded {
+      border-radius: var(--label-shape-rounded-default);
+      @each $size in xxs, xs, s, m, l, xl, xxl {
+        &.label_size_$(size) {
+          border-radius: var(--label-size-$(size)-shape-rounded);
+        }
+      }
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}