@itcase/ui 1.0.1

package/dist/css/components/Button/Button.css

@@ -0,0 +1,362 @@
+.button {
+  text-decoration: none;
+  background: none;
+  border: solid 0 #fff;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  transition: var(--button-transition);
+  &__loader {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: none;
+    left: 0;
+    top: 0;
+    z-index: 1;
+  }
+  &__wrapper {
+    display: flex;
+    align-items: center;
+  }
+  &__label {
+    text-decoration: none;
+    text-align: center;
+  }
+  &__count {
+    position: relative;
+  }
+}
+.button {
+  &_shape {
+    &_rounded {
+      border-radius: var(--button-shape-rounded-default);
+      @each $size in xs, s, m, l, xl, xxl {
+        &.button_size_$(size) {
+          border-radius: var(--button-size-$(size)-shape-rounded);
+        }
+      }
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.button {
+  &_size {
+    @each $size in xs, s, m, l, xl, xxl {
+      &_$(size) {
+        ^^&__wrapper {
+          padding: var(--button-size-$(size)-padding);
+        }
+        &^^&_type_icon {
+          ^^^&__wrapper {
+            padding: var(--button-size-$(size)-icon-padding);
+          }
+        }
+        &^^&_type_with-icon {
+          &_$(size) {
+            ^^^^&__wrapper {
+              gap: var(--button-size-$(size)-gap);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_state {
+    &_loading {
+      ^^&__loader {
+        display: flex;
+      }
+      ^^&__text {
+        visibility: hidden;
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_accent {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-accent-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-accent-border-primary);
+          &:hover {
+            background: var(--color-accent-hover-secondary);
+            border: solid 1px var(--color-accent-border-primary-hover);
+            & > ^^^^^&__label {
+              color: var(--color-accent-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__label {
+            color: var(--color-accent-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-accent-primary);
+          border: solid 1px var(--color-accent-border-primary);
+          &:hover {
+            background: var(--color-accent-primary-hover);
+            border: solid 1px var(--color-accent-border-primary-hover);
+            & > ^^^^^&__label {
+              color: var(--color-accent-text-primary-hover);
+            }
+          }
+          & > ^^^^&__label {
+            color: var(--color-accent-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_primary {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-primary-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-primary-border-primary);
+          &:hover {
+            background: var(--color-primary-primary-hover);
+            border: solid 1px var(--color-primary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-primary-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-primary-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-primary-primary);
+          border: solid 1px var(--color-primary-border-primary);
+          &:hover {
+            background: var(--color-primary-primary-hover);
+            border: solid 1px var(--color-primary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-primary-text-primary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-primary-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_secondary {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-secondary-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-secondary-border-primary);
+          &:hover {
+            background: var(--color-secondary-primary-hover);
+            border: solid 1px var(--color-secondary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-secondary-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-secondary-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-secondary-primary);
+          border: solid 1px var(--color-secondary-border-primary);
+          &:hover {
+            background: var(--color-secondary-primary-hover);
+            border: solid 1px var(--color-secondary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-secondary-text-primary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-secondary-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_surface {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-surface-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-surface-border-primary);
+          &:hover {
+            background: var(--color-surface-primary-hover);
+            border: solid 1px var(--color-surface-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-surface-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-surface-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-surface-primary);
+          border: solid 1px var(--color-surface-border-primary);
+          &:hover {
+            background: var(--color-surface-primary-hover);
+            border: solid 1px var(--color-surface-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-surface-text-primary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-surface-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_tertiary {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-tertiary-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-tertiary-border-primary);
+          &:hover {
+            background: var(--color-tertiary-primary-hover);
+            border: solid 1px var(--color-tertiary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-tertiary-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-tertiary-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-tertiary-primary);
+          border: solid 1px var(--color-tertiary-border-primary);
+          &:hover {
+            background: var(--color-tertiary-primary-hover);
+            border: solid 1px var(--color-tertiary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-tertiary-text-primary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-tertiary-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_with-icon {
+      position: relative;
+      ^^&__icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_counter {
+      position: relative;
+      & .counter {
+        position: absolute;
+        right: -4px;
+        top: -4px;
+      }
+    }
+  }
+}
+.button {
+  &&_width {
+    &_fixed {
+      width: 240px;
+    }
+    &_hug {
+      display: inline-flex;
+    }
+    &_fill {
+      width: 100%;
+      max-width: none !important;
+    }
+  }
+}
+:root {
+  --button-shape-rounded-default: 6px;
+  --button-transition: all 0.2s ease 0s;
+
+  --button-size-xxs-padding: 4px 12px;
+  --button-size-xxs-icon-padding: 0px;
+  --button-size-xxs-gap: 6px;
+  --button-size-xxs-shape-rounded: 6px;
+
+  --button-size-xs-padding: 2px 8px;
+  --button-size-xs-icon-padding: 0px;
+  --button-size-xs-gap: 6px;
+  --button-size-xs-shape-rounded: 6px;
+
+  --button-size-s-padding: 4px 16px;
+  --button-size-s-icon-padding: 0px;
+  --button-size-s-gap: 6px;
+  --button-size-s-shape-rounded: 6px;
+
+  --button-size-m-padding: 8px 24px;
+  --button-size-m-icon-padding: 0px;
+  --button-size-m-gap: 6px;
+  --button-size-m-shape-rounded: 6px;
+
+  --button-size-l-padding: 12px 32px;
+  --button-size-l-icon-padding: 0px;
+  --button-size-l-gap: 6px;
+  --button-size-l-shape-rounded: 6px;
+
+  --button-size-xl-padding: 16px 32px;
+  --button-size-xl-icon-padding: 0px;
+  --button-size-xl-gap: 6px;
+  --button-size-xl-shape-rounded: 6px;
+
+  --button-size-xxl-padding: 24px 40px;
+  --button-size-xxl-icon-padding: 0px;
+  --button-size-xxl-gap: 6px;
+  --button-size-xxl-shape-rounded: 6px;
+}
+
+

package/dist/css/components/Caption/Caption.css

@@ -0,0 +1,22 @@
+.caption {
+  display: flex;
+  flex-flow: column nowrap;
+}
+.caption {
+  &_position {
+    &_on-image {
+      &-top {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      &-bottom {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+    }
+  }
+}

package/dist/css/components/Card/Card.css

@@ -0,0 +1,19 @@
+.card {
+  &__wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 16px;
+    ^&__image {
+      width: 100%;
+    }
+    ^&__data {
+      display: flex;
+      flex-flow: column nowrap;
+    }
+    ^&__icon {
+      padding: 8px 0 0 0;
+      display: flex;
+      gap: 16px;
+    }
+  }
+}

package/dist/css/components/Cell/Cell.css

@@ -0,0 +1,89 @@
+.cell {
+  &__wrapper {
+    ^&__data {
+      display: flex;
+      flex-flow: column nowrap;
+      flex: 1;
+    }
+    ^&__icon {
+      padding: 8px 0 0 0;
+      display: flex;
+      gap: 16px;
+      &-before {
+        display: flex;
+        padding: 0 16px 0 0;
+        align-items: center;
+      }
+      &-after {
+        display: flex;
+        padding: 0 0 0 16px;
+        align-items: center;
+      }
+    }
+  }
+}
+.cell {
+ &&_state {
+  &_active {
+  }
+ }
+}
+.cell {
+ &&_state {
+  &_disabled {
+    border: solid 1px red;
+  }
+ }
+}
+.cell {
+  &__wrapper {
+    min-width: 240px;
+    display: flex;
+    flex-flow: row nowrap;
+  }
+}
+.cell {
+  &__wrapper {
+    &_shape {
+      &_rounded {
+        border-radius: 8px;
+      }
+      &_circular {
+        border-radius: 50%;
+      }
+      &_geometric {
+        border-radius: 0;
+      }
+    }
+  }
+}
+.cell {
+  &_set {
+    &_default {
+      ^^&__wrapper {
+        padding: 8px 24px;
+        margin: 16px 24px;
+        ^^^&__data {
+          gap: 4px;
+        }
+      }
+    }
+  }
+}
+.cell {
+  &_set {
+    &_horizontal {
+      ^^&__wrapper {
+        padding: 8px 24px;
+        ^^^&__data {
+          gap: 4px;
+          flex-flow: row nowrap;
+          align-items: center;
+          ^^^^&_desc {
+            align-self: flex-start;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Cell/css/__wrapper/cell__wrapper.css

@@ -0,0 +1,7 @@
+.cell {
+  &__wrapper {
+    min-width: 240px;
+    display: flex;
+    flex-flow: row nowrap;
+  }
+}

package/dist/css/components/Cell/css/__wrapper/cell__wrapper_shape.css

@@ -0,0 +1,15 @@
+.cell {
+  &__wrapper {
+    &_shape {
+      &_rounded {
+        border-radius: 8px;
+      }
+      &_circular {
+        border-radius: 50%;
+      }
+      &_geometric {
+        border-radius: 0;
+      }
+    }
+  }
+}

package/dist/css/components/Checkbox/Checkbox.css

@@ -0,0 +1,97 @@
+.checkbox {
+  position: relative;
+  cursor: pointer;
+  font-size: 0;
+  line-height: 0;
+  display: flex;
+  min-height: 16px;
+  min-width: 16px;
+  &__checkbox {
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    margin: 0;
+    font-size: 0;
+    line-height: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+  }
+  &__bg {
+    flex: 1;
+    display: flex;
+    z-index: 1;
+  }
+  &__mark {
+    height: 8px;
+    width: 5px;
+    border-bottom-style: solid;
+    border-bottom-width: 2px;
+    border-right-style: solid;
+    border-right-width: 2px;
+    position: absolute;
+    z-index: 2;
+    left: 50%;
+    top: 50%;
+    margin: -1px 0 0 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+    display: none;
+  }
+}
+.checkbox {
+  &_shape {
+    &_rounded {
+      border-radius: 4px;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+}
+.checkbox {
+  &_fill {
+    &_checked {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              & ^^^^&__checkbox {
+                &:checked {
+                  & + ^^^^^^&__bg {
+                    background: var(--color-$(type)-$(color));
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox {
+  &_fill {
+    &_checkmark {
+      @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) {
+                & ^^^^^&__checkbox {
+                  &:checked {
+                    & ~ ^^^^^^^&__mark {
+                      display: block;
+                      border-color: var(--color-$(type)-item-$(color));
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Chips/Chips.css

@@ -0,0 +1,47 @@
+.chips {
+  display: inline-flex;
+  &__label {
+    white-space: nowrap;
+  }
+}
+
+.chips {
+  &&_size {
+    &_l {
+      padding: 2px 6px;
+      @mixin text-l;
+    }
+    &_m {
+      padding: 2px 6px;
+      @mixin text-m;
+    }
+    &_s {
+      padding: 2px 6px;
+      @mixin text-s;
+    }
+  }
+}
+
+.chips {
+  &_shape {
+    &_rounded {
+      border-radius: var(--chips-shape-rounded-default);
+      @each $size in xs, s, m, l, xl, xxl {
+        &.chips_size_$(size) {
+          border-radius: var(--chips-size-$(size)-shape-rounded);
+        }
+      }
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+
+:root {
+  --chips-shape-rounded-default: 6px;
+  --chips-size-s-shape-rounded: 6px;
+  --chips-size-m-shape-rounded: 8px;
+  --chips-size-l-shape-rounded: 12px;
+  --chips-size-xl-shape-rounded: 16px;
+}

package/dist/css/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,43 @@
+.context-menu__item {
+  cursor: pointer;
+  &-wrapper {
+    display: flex;
+  }
+  &-title {
+    flex: 1;
+    white-space: nowrap;
+  }
+}
+
+.context-menu {
+  position: relative;
+  min-width: 220px;
+}
+
+.context-menu {
+  &_shape {
+    &_rounded {
+      overflow: hidden;
+      border-radius: var(--context-menu-shape-rounded-default);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+
+.context-menu {
+  &_set {
+    &_selectable {
+      ^^&__item {
+        &-wrapper {
+          padding: 8px 16px;
+        }
+      }
+    }
+  }
+}
+
+:root {
+  --context-menu-shape-rounded-default: 12px;
+}

package/dist/css/components/ContextMenu/css/__item/context-menu__item.css

@@ -0,0 +1,10 @@
+.context-menu__item {
+  cursor: pointer;
+  &-wrapper {
+    display: flex;
+  }
+  &-title {
+    flex: 1;
+    white-space: nowrap;
+  }
+}