@cuby-ui/core 0.0.193 → 0.0.195

package/styles/mixins/shadows.scss

@@ -1,38 +1,38 @@
-@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.10);
-}
-
-@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.10);
-}
-
-@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.10);
-}
-
-@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);
-}
+@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.10);
+}
+
+@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.10);
+}
+
+@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.10);
+}
+
+@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

@@ -1,225 +1,225 @@
-@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;
-}
+@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;
+     }
+ }