@cuby-ui/core 0.0.487 → 0.0.488

package/styles/mixins/inputs.scss

@@ -0,0 +1,91 @@
+@use '../variables/colors' as colors;
+@use '../variables/fonts' as fonts;
+@use './texts' as texts;
+@use './paddings' as paddings;
+@use './shadows' as shadows;
+@use './buttons' as buttons;
+
+@mixin cui-clear-input() {
+    padding: 0;
+    outline: none;
+    margin: 0;
+    border-width: 0;
+    appearance: none;
+    caret-color: currentColor;
+    background: none;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+}
+
+@mixin cui-default-input() {
+    :host {
+        $border-width: 1px;
+
+        @include paddings.cui-padding(horizontal, 1.75, $border-width);
+        @include texts.cui-text-sm-regular();
+
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        border: $border-width solid colors.$cui-base-200;
+        border-radius: 8px;
+        cursor: text;
+        background: colors.$cui-input;
+        color: colors.$cui-base-900;
+        font-family: fonts.$cui-main-font;
+
+        &:hover {
+            border-color: colors.$cui-base-300;
+        }
+
+        &:focus-within {
+            @include shadows.cui-shadow-focused();
+
+            border-color: colors.$cui-info;
+        }
+
+        &[data-size='sm'] {
+            @include paddings.cui-padding(vertical, 1, $border-width);
+        }
+
+        &[data-size='md'] {
+            @include paddings.cui-padding(vertical, 1.125, $border-width);
+        }
+
+        &._disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+            background: colors.$cui-base-50;
+            border-color: colors.$cui-base-200;
+        }
+
+        &._with-error {
+            border-color: colors.$cui-danger;
+
+            &:focus-within {
+                @include shadows.cui-shadow-error-focused();
+            }
+        }
+    }
+
+    .c-input {
+        @include cui-clear-input();
+
+        width: 100%;
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+
+        &::placeholder {
+            color: colors.$cui-base-400;
+        }
+    }
+
+    .c-button {
+        @include buttons.cui-clear-button();
+
+        display: flex;
+    }
+}

package/styles/mixins/lists.scss

@@ -0,0 +1,41 @@
+@use '../variables/colors' as colors;
+
+@mixin cui-clear-list() {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+// The list should have no padding or border
+// The $offset should correspond to the border-radius of the elements
+@mixin cui-line-between-items($offset, $style: solid, $width: 1px) {
+    position: relative;
+
+    & > * {
+        z-index: 1;
+    }
+
+    &:has(> :nth-child(2))::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: $offset;
+        border-left: $width $style colors.$cui-base-200;
+    }
+}
+
+@mixin cui-line-after-item($offset, $list-gap) {
+    position: relative;
+
+    &:not(:last-child)::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: $offset;
+        bottom: -$list-gap;
+        z-index: -1;
+        width: 1px;
+        background: colors.$cui-base-200;
+    }
+}

package/styles/mixins/paddings.scss

@@ -0,0 +1,35 @@
+$space: 8px;
+
+@mixin cui-padding($direction, $size, $offset: 0) {
+    $padding: $space * $size - $offset;
+
+    @if ($direction == all) {
+        padding: $padding;
+    }
+
+    @if ($direction == top) {
+        padding-top: $padding;
+    }
+
+    @if ($direction == bottom) {
+        padding-bottom: $padding;
+    }
+
+    @if ($direction == vertical) {
+        padding-top: $padding;
+        padding-bottom: $padding;
+    }
+
+    @if ($direction == left) {
+        padding-left: $padding;
+    }
+
+    @if ($direction == right) {
+        padding-right: $padding;
+    }
+
+    @if ($direction == horizontal) {
+        padding-right: $padding;
+        padding-left: $padding;
+    }
+}

package/styles/mixins/shadows.scss

@@ -0,0 +1,42 @@
+@use '../variables/colors' as colors;
+// TODO: вынести все цвета в перемнные
+
+@mixin cui-shadow-10() {
+    box-shadow:
+        0 1px 4px 0 rgba(0, 0, 0, 0.04),
+        0 1px 4px 0 rgba(0, 0, 0, 0.04);
+}
+
+@mixin cui-shadow-15() {
+    box-shadow:
+        0 1px 2px 0 rgba(0, 0, 0, 0.06),
+        0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+@mixin cui-shadow-20() {
+    box-shadow:
+        0 2px 4px -1px rgba(0, 0, 0, 0.06),
+        0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+@mixin cui-shadow-25() {
+    box-shadow:
+        0 4px 6px -2px rgba(0, 0, 0, 0.05),
+        0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+@mixin cui-shadow-right() {
+    box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+@mixin cui-shadow-left() {
+    box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+@mixin cui-shadow-focused() {
+    box-shadow: 0 0 0 2px colors.$cui-focus;
+}
+
+@mixin cui-shadow-error-focused() {
+    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.25);
+}

package/styles/mixins/texts.scss

@@ -0,0 +1,224 @@
+@mixin cui-text-regular() {
+    font-weight: 400;
+}
+
+@mixin cui-text-medium() {
+    font-weight: 500;
+}
+
+@mixin cui-text-semi-bold() {
+    font-weight: 600;
+}
+
+@mixin cui-text-bold() {
+    font-weight: 700;
+}
+
+@mixin cui-text-xxxs() {
+    font-size: 10px;
+    line-height: 12px;
+}
+
+@mixin cui-text-xxxs-regular() {
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+}
+
+@mixin cui-text-xxxs-medium() {
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 12px;
+}
+
+@mixin cui-text-xxxs-semi-bold() {
+    font-weight: 600;
+    font-size: 10px;
+    line-height: 12px;
+}
+
+@mixin cui-text-xxxs-bold() {
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 12px;
+}
+
+@mixin cui-text-xxs() {
+    font-size: 12px;
+    line-height: 14px;
+}
+
+@mixin cui-text-xxs-regular() {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+}
+
+@mixin cui-text-xxs-medium() {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
+}
+
+@mixin cui-text-xxs-semi-bold() {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 14px;
+}
+
+@mixin cui-text-xxs-bold() {
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+}
+
+@mixin cui-text-xs() {
+    font-size: 13px;
+    line-height: 16px;
+}
+
+@mixin cui-text-xs-regular() {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+@mixin cui-text-xs-medium() {
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+@mixin cui-text-xs-semi-bold() {
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+@mixin cui-text-xs-bold() {
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+@mixin cui-text-sm() {
+    font-size: 14px;
+    line-height: 20px;
+}
+
+@mixin cui-text-sm-regular() {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+@mixin cui-text-sm-medium() {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+@mixin cui-text-sm-semi-bold() {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+@mixin cui-text-sm-bold() {
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+@mixin cui-text-md() {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+@mixin cui-text-md-regular() {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+@mixin cui-text-md-medium() {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+@mixin cui-text-md-semi-bold() {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+@mixin cui-text-md-bold() {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+@mixin cui-text-lg() {
+    font-size: 18px;
+    line-height: 28px;
+}
+
+@mixin cui-text-lg-regular() {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 28px;
+}
+
+@mixin cui-text-lg-medium() {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 28px;
+}
+
+@mixin cui-text-lg-semi-bold() {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 28px;
+}
+
+@mixin cui-text-lg-bold() {
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 28px;
+}
+
+@mixin cui-text-xl() {
+    font-size: 20px;
+    line-height: 30px;
+}
+
+@mixin cui-text-xl-regular() {
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 30px;
+}
+
+@mixin cui-text-xl-medium() {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 30px;
+}
+
+@mixin cui-text-xl-semi-bold() {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 30px;
+}
+
+@mixin cui-text-xl-bold() {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+}
+
+@mixin cui-text-overflow($wrap: nowrap) {
+    white-space: $wrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/styles/reset.scss

@@ -0,0 +1,111 @@
+/**
+  Нормализация блочной модели
+ */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/**
+   Убираем внутренние отступы слева тегам списков
+  */
+:where(ul, ol) {
+    padding-left: 0;
+}
+
+/**
+   Убираем внешние отступы body и двум другим тегам
+  */
+body,
+:where(blockquote, figure) {
+    margin: 0;
+}
+
+/**
+   Убираем внешние отступы вертикали нужным тегам
+  */
+:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, hr) {
+    margin-block: 0;
+}
+
+:where(dd) {
+    margin-left: 0;
+}
+
+:where(fieldset) {
+    margin-left: 0;
+    padding: 0;
+    border: none;
+}
+
+/**
+   Убираем стандартный маркер маркированному списку
+  */
+:where(ul) {
+    list-style: none;
+}
+
+/**
+   Упрощаем работу с изображениями
+  */
+img {
+    display: block;
+    max-width: 100%;
+}
+
+/**
+   Наследуем свойства шрифт для полей ввода
+  */
+input,
+textarea,
+select,
+button {
+    color: inherit;
+    font: inherit;
+}
+
+button {
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+
+a {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+html {
+    /**
+       Пригодится в большинстве ситуаций
+       (когда, например, нужно будет "прижать" футер к низу сайта)
+      */
+    height: 100%;
+
+    /**
+       Плавный скролл
+      */
+    scroll-behavior: smooth;
+}
+
+/**
+   Чиним баг задержки смены цвета при взаимодействии с svg-элементами
+  */
+svg * {
+    transition-property: fill, stroke;
+}
+
+/**
+   Удаляем все анимации и переходы для людей,
+   которые предпочитают их не использовать
+  */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}