@profitliga/ui 1.0.0

package/dist/styles/mixins.scss

@@ -0,0 +1,152 @@
+@use 'sass:map';
+
+/**
+ * Миксин для подключения шрифтов
+ * @param {string} $font-family - Название семейства шрифтов
+ * @param {list} $weights - Список весов шрифта (100-900)
+ * 
+ * Пример использования:
+ * $weights: (100, 200, 300, 400, 500, 600, 700, 800, 900);
+ * $styles: (normal, italic);
+ * @include font-face('Roboto', $weights);
+ * 
+ * Структура файлов шрифтов должна быть следующей:
+ * fonts/
+ *   Roboto/
+ *     Roboto-Thin.woff2
+ *     Roboto-Thin.woff
+ *     ...
+ */
+
+@mixin font-face($font-family, $weights) {
+	$weight-names: (
+		100: 'Thin',
+		200: 'ExtraLight',
+		300: 'Light',
+		400: 'Regular',
+		500: 'Medium',
+		600: 'SemiBold',
+		700: 'Bold',
+		800: 'ExtraBold',
+		900: 'Black'
+	);
+
+	@each $weight in $weights {
+		// Используем новый синтаксис map.get()
+		$weight-name: map.get($weight-names, $weight);
+
+		@font-face {
+			font-family: '#{$font-family}';
+			font-weight: #{$weight};
+			src:
+				url('/fonts/#{$font-family}/#{$font-family}-#{$weight-name}.woff2')
+					format('woff2'),
+				url('/fonts/#{$font-family}/#{$font-family}-#{$weight-name}.woff')
+					format('woff');
+		}
+	}
+}
+
+/**
+ * Миксин для создания медиа-запросов с минимальной шириной
+ * 
+ * @param {number} $width - Минимальная ширина в пикселях
+ * 
+ * Пример использования:
+ * @include media-min-width(768px) {
+ *   .container {
+ *     padding: 20px;
+ *   }
+ * }
+ * 
+ * Применит стили для экранов шириной от 768px и больше
+ */
+
+@mixin media-min-width($width) {
+	@media screen and (min-width: $width) {
+		@content;
+	}
+}
+
+/// Миксин для обрезки многострочного текста с троеточием
+///
+/// @param {Number} $lines - Количество отображаемых строк (по умолчанию: 2)
+///
+/// Используется для ограничения текста по количеству строк с добавлением "..."
+/// Работает на основе -webkit-line-clamp и поддерживается в современных браузерах.
+///
+/// 🔁 Пример использования:
+/// .text {
+///   @include ellipsis-multiline(3);
+/// }
+@mixin ellipsis-multiline($lines: 2) {
+	display: -webkit-box;
+	-webkit-line-clamp: $lines;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+// 📱 Адаптив
+@mixin respond($breakpoint) {
+	@if $breakpoint == sm {
+		@media (min-width: 640px) {
+			@content;
+		}
+	} @else if $breakpoint == md {
+		@media (min-width: 768px) {
+			@content;
+		}
+	} @else if $breakpoint == lg {
+		@media (min-width: 1010px) {
+			@content;
+		}
+	} @else if $breakpoint == xl {
+		@media (min-width: 1220px) {
+			@content;
+		}
+	} @else if $breakpoint == xxl {
+		@media (min-width: 1420px) {
+			@content;
+		}
+	} @else if $breakpoint == xxxl {
+		@media (min-width: 1620px) {
+			@content;
+		}
+	}
+}
+
+// ✨ Кастомный скроллбар
+@mixin custom-scrollbar($direction) {
+	box-sizing: content-box;
+
+	scrollbar-width: thin;
+	scrollbar-color: var(--theme-neutral-border-default) transparent;
+
+	// WebKit scrollbar
+	&::-webkit-scrollbar {
+		@if $direction == 'right' {
+			width: 8px;
+			height: 0;
+		} @else if $direction == 'bottom' {
+			width: 0;
+			height: 8px;
+		} @else if $direction == 'both' {
+			width: 8px;
+			height: 8px;
+		}
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--theme-neutral-border-default);
+		border-radius: 4px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+}

package/dist/styles/reset.css

@@ -0,0 +1,64 @@
+@layer ui-kit {
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	html,
+	body {
+		height: 100%;
+		width: 100%;
+
+		font-size: var(--font-size);
+		line-height: 1.5;
+	}
+
+	body {
+		font-family: 'Inter', sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+
+		color: var(--theme-neutral-950);
+	}
+
+	a {
+		text-decoration: none;
+		color: inherit;
+	}
+
+	button {
+		border: none;
+		background: none;
+		cursor: pointer;
+		font: inherit;
+	}
+
+	ul,
+	ol {
+		list-style: none;
+	}
+
+	img {
+		max-width: 100%;
+		height: auto;
+		display: block;
+	}
+
+	input,
+	textarea,
+	select {
+		font: inherit;
+		border: none;
+		outline: none;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-weight: normal;
+	}
+}

package/dist/styles/tailwind.css

@@ -0,0 +1,307 @@
+@import 'tailwindcss';
+
+/* для того чтобы tailwind подтягивал классы */
+@source "../../../**/*.{vue,js,ts}";
+
+@theme {
+	/* breakpoints */
+	--breakpoint-sm: 640px;
+	--breakpoint-md: 768px;
+	--breakpoint-lg: 1010px;
+	--breakpoint-xl: 1220px;
+	--breakpoint-2xl: 1420px;
+	--breakpoint-3xl: 1620px;
+
+	/* typography */
+	--font-sans: 'Inter', 'sans-serif';
+
+	/* neutral */
+	--color-neutral-0: var(--theme-neutral-0);
+	--color-neutral-100: var(--theme-neutral-100);
+	--color-neutral-200: var(--theme-neutral-200);
+	--color-neutral-250: var(--theme-neutral-250);
+	--color-neutral-250_40: var(--theme-neutral-250_40);
+	--color-neutral-300: var(--theme-neutral-300);
+	--color-neutral-300_40: var(--theme-neutral-300_40);
+	--color-neutral-400: var(--theme-neutral-400);
+	--color-neutral-400_40: var(--theme-neutral-400_40);
+	--color-neutral-500: var(--theme-neutral-500);
+	--color-neutral-600: var(--theme-neutral-600);
+	--color-neutral-700: var(--theme-neutral-700);
+	--color-neutral-800: var(--theme-neutral-800);
+	--color-neutral-850: var(--theme-neutral-850);
+	--color-neutral-950: var(--theme-neutral-950);
+
+	--color-neutral-surface-bg: var(--theme-neutral-surface-bg);
+	--color-neutral-surface-default: var(--theme-neutral-surface-default);
+	--color-neutral-surface-subtitle: var(--theme-neutral-surface-subtitle);
+	--color-neutral-surface-icon: var(--theme-neutral-surface-icon);
+	--color-neutral-surface-disabled: var(--theme-neutral-surface-disabled);
+
+	--color-text-icon-body: var(--theme-text-icon-body);
+	--color-neutral-text-title: var(--theme-neutral-text-title);
+	--color-neutral-text-subtitle: var(--theme-neutral-text-subtitle);
+	--color-neutral-text-body: var(--theme-neutral-text-body);
+	--color-neutral-text-caption: var(--theme-neutral-text-caption);
+	--color-neutral-text-disabled: var(--theme-neutral-text-disabled);
+	--color-neutral-text-negative: var(--theme-neutral-text-negative);
+
+	--color-neutral-icon-primary: var(--theme-neutral-icon-primary);
+	--color-neutral-icon-secondary: var(--theme-neutral-icon-secondary);
+	--color-neutral-icon-caption: var(--theme-neutral-icon-caption);
+	--color-neutral-icon-disabled: var(--theme-neutral-icon-disabled);
+	--color-neutral-icon-negative: var(--theme-neutral-icon-negative);
+
+	--color-neutral-border-default: var(--theme-neutral-border-default);
+	--color-neutral-border-darker: var(--theme-neutral-border-darker);
+	--color-neutral-border-divider: var(--theme-neutral-border-divider);
+	--color-neutral-border-disabled: var(--theme-neutral-border-disabled);
+
+	--color-main-interface-shadow: var(--theme-main-interface-shadow);
+	--color-hover-interface-shadow: var(--theme-hover-interface-shadow);
+
+	/* primary */
+	--color-primary-50: var(--theme-primary-50);
+	--color-primary-50_40: var(--theme-primary-50_40);
+	--color-primary-75: var(--theme-primary-75);
+	--color-primary-100: var(--theme-primary-100);
+	--color-primary-200: var(--theme-primary-200);
+	--color-primary-200_15: var(--theme-primary-200_15);
+	--color-primary-200_25: var(--theme-primary-200_25);
+	--color-primary-200_50: var(--theme-primary-200_50);
+	--color-primary-250: var(--theme-primary-250);
+	--color-primary-300: var(--theme-primary-300);
+	--color-primary-400: var(--theme-primary-400);
+	--color-primary-500_5: var(--theme-primary-500_5);
+	--color-primary-500: var(--theme-primary-500);
+	--color-primary-600: var(--theme-primary-600);
+	--color-primary-700: var(--theme-primary-700);
+	--color-primary-800: var(--theme-primary-800);
+	--color-primary-900: var(--theme-primary-900);
+
+	--color-primary-surface-default: var(--theme-primary-surface-default);
+	--color-primary-surface-subtitle: var(--theme-primary-surface-subtitle);
+	--color-primary-surface-darker: var(--theme-primary-surface-darker);
+	--color-primary-surface-lighter: var(--theme-primary-surface-lighter);
+	--color-primary-surface-hover: var(--theme-primary-surface-hover);
+
+	--color-primary-border-default: var(--theme-primary-border-default);
+	--color-primary-border-subtitle: var(--theme-primary-border-subtitle);
+	--color-primary-border-darker: var(--theme-primary-border-darker);
+	--color-primary-border-lighter: var(--theme-primary-border-lighter);
+
+	--color-primary-icon-default: var(--theme-primary-icon-default);
+
+	/* secondary */
+	--color-secondary-50: var(--theme-secondary-50);
+	--color-secondary-100: var(--theme-secondary-100);
+	--color-secondary-150: var(--theme-secondary-150);
+	--color-secondary-200: var(--theme-secondary-200);
+	--color-secondary-250: var(--theme-secondary-250);
+	--color-secondary-300: var(--theme-secondary-300);
+	--color-secondary-350: var(--theme-secondary-350);
+	--color-secondary-400: var(--theme-secondary-400);
+	--color-secondary-450: var(--theme-secondary-450);
+	--color-secondary-500: var(--theme-secondary-500);
+	--color-secondary-600: var(--theme-secondary-600);
+	--color-secondary-700: var(--theme-secondary-700);
+	--color-secondary-800: var(--theme-secondary-800);
+	--color-secondary-900: var(--theme-secondary-900);
+
+	/* info */
+	--color-info-100: var(--theme-info-100);
+	--color-info-100_50: var(--theme-info-100_50);
+	--color-info-200: var(--theme-info-200);
+	--color-info-300: var(--theme-info-300);
+	--color-info-400: var(--theme-info-400);
+	--color-info-500: var(--theme-info-500);
+	--color-info-600: var(--theme-info-600);
+	--color-info-700: var(--theme-info-700);
+	--color-info-800: var(--theme-info-800);
+	--color-info-900: var(--theme-info-900);
+
+	/* warning */
+	--color-warn-50: var(--theme-warn-50);
+	--color-warn-100: var(--theme-warn-100);
+	--color-warn-200: var(--theme-warn-200);
+	--color-warn-300: var(--theme-warn-300);
+	--color-warn-400: var(--theme-warn-400);
+	--color-warn-500: var(--theme-warn-500);
+	--color-warn-600: var(--theme-warn-600);
+	--color-warn-700: var(--theme-warn-700);
+	--color-warn-800: var(--theme-warn-800);
+	--color-warn-900: var(--theme-warn-900);
+
+	/* error */
+	--color-error-100: var(--theme-error-100);
+	--color-error-100_50: var(--theme-error-100_50);
+	--color-error-200_50: var(--theme-error-200_50);
+	--color-error-200: var(--theme-error-200);
+	--color-error-300: var(--theme-error-300);
+	--color-error-400: var(--theme-error-400);
+	--color-error-500: var(--theme-error-500);
+	--color-error-600: var(--theme-error-600);
+	--color-error-700: var(--theme-error-700);
+	--color-error-800: var(--theme-error-800);
+	--color-error-900: var(--theme-error-900);
+}
+
+@utility text-h1-semibold {
+	font-weight: 600;
+	font-size: 24px;
+	line-height: 28px;
+}
+@utility text-h1 {
+	font-weight: 400;
+	font-size: 24px;
+	line-height: 28px;
+}
+
+@utility text-h2-bold {
+	font-weight: 700;
+	font-size: 20px;
+	line-height: 24px;
+}
+@utility text-h2-medium {
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 24px;
+}
+@utility text-h2 {
+	font-weight: 400;
+	font-size: 20px;
+	line-height: 24px;
+}
+
+@utility text-h3-medium {
+	font-weight: 500;
+	font-size: 18px;
+	line-height: 24px;
+}
+@utility text-h3 {
+	font-weight: 400;
+	font-size: 18px;
+	line-height: 24px;
+}
+
+@utility text-h4-semibold {
+	font-weight: 600;
+	font-size: 16px;
+	line-height: 20px;
+}
+@utility text-h4-medium {
+	font-weight: 500;
+	font-size: 16px;
+	line-height: 20px;
+}
+@utility text-h4 {
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 20px;
+}
+
+@utility text-h5-bold {
+	font-weight: 700;
+	font-size: 14px;
+	line-height: 16px;
+}
+@utility text-h5-semibold {
+	font-weight: 600;
+	font-size: 14px;
+	line-height: 16px;
+}
+@utility text-h5-medium {
+	font-weight: 500;
+	font-size: 14px;
+	line-height: 16px;
+}
+@utility text-h5 {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 16px;
+}
+
+@utility text-h6-bold {
+	font-weight: 700;
+	font-size: 12px;
+	line-height: 16px;
+}
+@utility text-h6-semibold {
+	font-weight: 600;
+	font-size: 12px;
+	line-height: 16px;
+}
+@utility text-h6-medium {
+	font-weight: 500;
+	font-size: 12px;
+	line-height: 16px;
+}
+@utility text-h6 {
+	font-weight: 400;
+	font-size: 12px;
+	line-height: 16px;
+}
+
+@utility text-body-1 {
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 24px;
+}
+@utility text-body-2 {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+}
+@utility text-body-3 {
+	font-weight: 400;
+	font-size: 12px;
+	line-height: 16px;
+}
+
+@utility text-table {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+@utility text-ceo {
+	font-weight: 400;
+	font-size: 10px;
+	line-height: 16px;
+}
+
+@layer utilities {
+	.scrollbar-thin {
+		scrollbar-width: thin;
+		scrollbar-color: var(--theme-neutral-border-default) transparent;
+	}
+
+	.scrollbar-thin::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+
+	.scrollbar-thin::-webkit-scrollbar-thumb {
+		background-color: var(--theme-neutral-border-default);
+		border-radius: 4px;
+	}
+
+	.scrollbar-thin::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.scrollbar-thin::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+
+	/* направления */
+	.scrollbar-x::-webkit-scrollbar {
+		height: 8px;
+		width: 0;
+	}
+
+	.scrollbar-y::-webkit-scrollbar {
+		width: 8px;
+		height: 0;
+	}
+}

package/dist/styles/typography.css

@@ -0,0 +1,43 @@
+@layer ui-kit {
+	h1 {
+		font-size: 1.5rem;
+		line-height: 120%;
+		color: var(--theme-neutral-text-title);
+	}
+
+	h2 {
+		font-size: 1.25rem;
+		line-height: 120%;
+		color: var(--theme-neutral-text-title);
+	}
+
+	h3 {
+		font-size: 1.1875rem;
+		line-height: 120%;
+		color: var(--theme-neutral-text-title);
+	}
+
+	h4 {
+		font-size: 1rem;
+		line-height: 120%;
+		color: var(--theme-neutral-text-title);
+	}
+
+	h5 {
+		font-size: 0.9375rem;
+		line-height: 120%;
+		color: var(--theme-neutral-text-title);
+	}
+
+	h6 {
+		font-size: 0.8125rem;
+		line-height: 120%;
+		color: var(--theme-neutral-text-title);
+	}
+
+	p {
+		font-size: 1rem;
+		line-height: 160%;
+		color: var(--theme-neutral-text-body);
+	}
+}

package/dist/styles/vars.scss

@@ -0,0 +1,57 @@
+@use './mixins.scss' as *;
+
+:root {
+	//GLOBAL
+	--animation-duration: 0.3s;
+	--font-size: 1rem;
+
+	--card-border-box-shadow:
+		1px 0px 0px 0px #74889c33 inset, -1px 0px 0px 0px #74889c33 inset,
+		0px 1px 0px 0px #74889c33 inset, 0px -1px 0px 0px #74889c33 inset;
+}
+
+//Переменные для INPUT
+:root {
+	--input-height-extrasmall: 24px;
+	--input-height-small: 36px;
+	--input-height: 40px;
+	--input-height-large: 44px;
+
+	--input-font-size-extrasmall: 1rem;
+	--input-font-size-small: 1rem;
+	--input-font-size: 1rem;
+	--input-font-size-large: 1rem;
+
+	--input-padding: 0 8px;
+
+	--input-color-text: var(--theme-neutral-text-body);
+	--input-color-placeholder: var(--theme-neutral-500);
+	--input-color-disabled: var(--theme-neutral-text-disabled);
+	--input-color-error: var(--theme-error-500);
+
+	--input-border-color: var(--theme-neutral-border-default);
+	--input-border-color-hover: var(--theme-primary-300);
+	--input-border-color-focus: var(--theme-primary-500);
+	--input-border-color-disabled: var(--theme-neutral-border-disabled);
+}
+
+@include respond(lg) {
+	:root {
+		--input-font-size-extrasmall: 0.75rem;
+		--input-font-size-small: 0.875rem;
+		--input-font-size: 1rem;
+		--input-font-size-large: 1rem;
+	}
+}
+
+//Удалить после перехода на reka-ui
+:root {
+	--modal-z-index: 1000;
+	--drawer-z-index: 1000;
+	--confirm-z-index: 1008;
+	--toast-z-index: 1009;
+
+	//BOX-SHADOW
+	--dropdown-shadow: -1px 1px 10px 0 #8d8f9340;
+	--popover-shadow: 0 12px 25px 0 #0000001a, 0 0 8px 0 #0000001a;
+}