triafly-ui-kit 1.0.24 → 1.0.26

package/src/styles/typography.scss

@@ -0,0 +1,102 @@
+//Подключение шрифтов
+@font-face {
+  font-family: "Roboto Slab";
+  src: url("../assets/fonts/RobotoSlab-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Manrope";
+  src: url("../assets/fonts/Manrope-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Manrope";
+  src: url("../assets/fonts/Manrope-Semibold.ttf") format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Manrope";
+  src: url("../assets/fonts/Manrope-Bold.ttf") format("truetype");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("../assets/fonts/FiraCode-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+//Глобальные свойства шрифтов
+* {
+  font-family: "Manrope", sans-serif;
+  font-size: 14px;
+  line-height: 1.2em;
+  letter-spacing: 0.02em;
+  font-weight: 400;
+  color: var(--color-text-primary-default);
+}
+
+//Заголовки
+
+//NOTE:
+//по макетам у нас 8 уровней заголовков, JSX понимает только шесть.
+//AI: Использовать уровни заголовков начиная с h1 в контексте страницы,
+//как это принято общей практикой вёрстки,
+//а для указания размеров и начертания использовать миксин.
+//В противном случае основными хедерами будут h4-h8 + варнинги JSX
+
+//Дефолтные значения font-size и font-weight = 14 и 400
+//При необходимости кастомизации текста в компоненте импортируется данные миксины
+//с указанием необходимых значений согласно макету
+//TODO: подготовить переменные для стандартизаии размеров
+
+//Акцидентная гарнитура для заголовков
+@mixin accidental($size, $margin) {
+  font-family: "Roboto Slab", sans-serif;
+  font-size: $size;
+  margin: 0 0 $margin 0;
+}
+
+//Гротескная гарнитура для заголовков и регулярного текста
+@mixin grotesque($size, $weight) {
+  font-size: $size;
+  font-weight: $weight;
+}
+
+//сброс дефолтных отступов в заголовках
+@for $i from 1 through 6 {
+  h#{$i} {
+    margin: 0;
+  }
+}
+
+//Ссылки
+a {
+  color: var(--color-text-brand-default);
+  text-decoration: none;
+  &:hover {
+    color: var(--color-text-brand-hover);
+  }
+  &[href=""] {
+    //стили неактивной ссылки
+    opacity: 40%;
+    cursor: default;
+    pointer-events: none;
+    //не совсем понятно зачем она нам
+    //+ линтер неадекватно реагирует на пустой href
+    //добавить .disabled с JS-логикой?
+  }
+}
+
+//Параграфы
+
+//TODO: недостаточно кейсов в моках, запросить для уточнения
+p {
+  // font-size: 12px;
+  &:not(:last-child) {
+    margin: 0 0 8px 0;
+  }
+}

package/src/styles/variables.scss

@@ -0,0 +1,273 @@
+:root {
+    /* Font */
+    --3afly-fonts-body: 'Manrope', sans-serif;
+    --3afly-fonts-heading: 'Roboto Slab', sans-serif;
+
+    //temp
+    --light-brand-50: #C2D0FF;
+    --dark-brand-50: #C2D0FF;
+
+    /* Primitives */
+    --dark-brand-20: #153398;
+    --dark-brand-50: #1E46CD;
+    --dark-brand-100: #5076FF;
+    --dark-brand-200: #7C98FF;
+    --dark-brand-300: #A7BBFF;
+
+    --light-brand-20: #EEF2FF;
+    --light-brand-50: #C2D0FF;
+    --light-brand-100: #2454FF;
+    --light-brand-200: #1A3AB2;
+    --light-brand-300: #0E2266;
+
+    /* Primitives - Base */
+    --base-dark: #121212;
+    --base-light: #FFFFFF;
+
+    /* Primitives - Neutral */
+    --dark-neutral-0: #121212;
+    --dark-neutral-20: #292929;
+    --dark-neutral-50: #333333;
+    --dark-neutral-100: #4D4D4D;
+    --dark-neutral-200: #6E6E6E;
+    --dark-neutral-300: #FFFFFF;
+
+    --light-neutral-0: #FFFFFF;
+    --light-neutral-20: #F6F7F8;
+    --light-neutral-50: #F1F2F4;
+    --light-neutral-100: #D2D5DA;
+    --light-neutral-200: #A5A8AC;
+    --light-neutral-300: #121212;
+
+    /* Primitives - Status */
+    --dark-green-50: #044329;
+    --dark-green-100: #12A26C;
+    --dark-green-200: #CEF8E0;
+    --dark-orange-50: #662500;
+    --dark-orange-100: #E16D00;
+    --dark-orange-200: #FFECCC;
+    --dark-red-50: #7B0000;
+    --dark-red-100: #F65843;
+    --dark-red-200: #FFEBE7;
+
+    --light-green-50: #CEF8E0;
+    --light-green-100: #15A46E;
+    --light-green-200: #06603B;
+    --light-orange-50: #FFECCC;
+    --light-orange-100: #E46F00;
+    --light-orange-200: #9E3900;
+    --light-red-50: #FFEBE7;
+    --light-red-100: #F75C46;
+    --light-red-200: #9E0000;
+
+    /* Shadows & Effects */
+    --color-fader: #12121220;
+
+    /* Light Theme */
+
+    --default-font-color: var(--base-dark);
+
+    /* Light Theme - Background */
+    --color-bg-brand-default: var(--light-brand-100);
+    --color-bg-brand-hover: var(--light-brand-200);
+    --color-bg-brand-selected: var(--light-brand-300);
+    --color-bg-brand-lightest-default: var(--light-brand-20);
+    --color-bg-brand-light-default: var(--light-brand-50);
+    --color-bg-error-default: var(--light-red-100);
+    --color-bg-error-hover: var(--light-red-200);
+    --color-bg-innerisland-default: var(--light-neutral-20);
+    --color-bg-island-default: var(--base-light);
+    --color-bg-island-disabled: var(--light-neutral-50);
+    --color-bg-island-inversed: var(--base-dark);
+    --color-bg-island-selected: var(--light-neutral-50);
+    --color-bg-page-primary-default: var(--light-neutral-50);
+    --color-bg-page-secondary-default: var(--light-neutral-0);
+    --color-bg-neutral-basic-default: var(--light-neutral-0);
+    --color-bg-neutral-basic-inversed: var(--light-neutral-300);
+    --color-bg-neutral-lightest-default: var(--light-neutral-20);
+    --color-bg-neutral-medium-default: var(--light-neutral-100);
+
+    /* Light Theme - Border */
+    --color-border-brand-default: var(--light-brand-100);
+    --color-border-error-default: var(--light-red-100);
+    --color-border-primary-default: var(--light-neutral-100);
+    --color-border-primary-hover: var(--base-dark);
+    --color-border-secondary-default: var(--light-neutral-200);
+    --color-border-secondary-hover: var(--base-dark);
+    --color-border-success-default: var(--light-green-100);
+
+    /* Light Theme - Chart */
+    --color-chart-critical: var(--light-red-100);
+    --color-chart-low: var(--light-green-100);
+    --color-chart-medium: var(--light-orange-100);
+
+    /* Light Theme - Effects */
+    --effect-shadow-drop: #12121214;
+    --effect-shadow-L: #12121208;
+    --effect-shadow-XL: #12121215;
+
+    /* Light Theme - Icon */
+    --color-icon-brand-default: var(--light-brand-100);
+    --color-icon-brand-hover: var(--light-brand-200);
+    --color-icon-error-default: var(--light-red-100);
+    --color-icon-error-hover: var(--light-red-200);
+    --color-icon-primary-default: var(--base-dark);
+    --color-icon-primary-inversed: var(--base-light);
+    --color-icon-secondary-default: var(--light-neutral-200);
+    --color-icon-secondary-hover: var(--base-dark);
+    --color-icon-success-default: var(--light-green-100);
+
+    /* Light Theme - SideMenu */
+    --color-sidemenu-bg-default: var(--base-light);
+    --color-sidemenu-bg-hover: var(--light-neutral-50);
+    --color-sidemenu-bg-selected: var(--light-brand-100);
+    --color-sidemenu-icon-default: var(--base-dark);
+    --color-sidemenu-icon-selected: var(--light-color-static);
+    --color-sidemenu-plus_button_bg-selected-hover: var(--light-brand-200);
+    --color-sidemenu-plus_button_bg-unselected-hover: var(--base-dark);
+    --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
+    --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
+    --color-sidemenu-plus_button_icon-unselected-default: var(--base-dark);
+    --color-sidemenu-plus_button_icon-unselected-hover: var(--base-light);
+    --color-sidemenu-text-default: var(--base-dark);
+    --color-sidemenu-text-selected: var(--light-color-static);
+
+    /* Light Theme - Static */
+    --dark-color-static: var(--base-dark);
+    --dark-color-static-brand: var(--dark-brand-100);
+    --light-color-static: var(--base-light);
+    --light-color-static-brand: var(--light-brand-100);
+
+    /* Light Theme - Status */
+    --color-status-error-background: var(--light-red-50);
+    --color-status-error-foreground: var(--light-red-100);
+    --color-status-success-background: var(--light-green-50);
+    --color-status-success-foreground: var(--light-green-100);
+    --color-status-warning-background: var(--light-orange-50);
+    --color-status-warning-foreground: var(--light-orange-100);
+
+    /* Light Theme - Text */
+    --color-text-brand-default: var(--light-brand-100);
+    --color-text-brand-hover: var(--light-brand-200);
+    --color-text-error-default: var(--light-red-100);
+    --color-text-primary-default: var(--base-dark);
+    --color-text-primary-inversed: var(--light-neutral-0);
+    --color-text-secondary-default: var(--light-neutral-200);
+    --color-text-success-default: var(--light-green-100);
+    --color-text-tertiary-default: var(--light-neutral-100);
+
+    /* Light Theme - Buttons */
+    --color-button-brandlight-filled-hover: var(--light-brand-50);
+}
+
+/* Primitives - Test Client */
+html[data-client="test"] {
+    --light-brand-20: #F3E8FF;
+    --light-brand-50: #D8B4FE;
+    --light-brand-100: #A855F7;
+    --light-brand-200: #7E22CE;
+    --light-brand-300: #4C1D95;
+    
+    --dark-brand-20: #5B21B6;
+    --dark-brand-50: #7C3AED;
+    --dark-brand-100: #A78BFA;
+    --dark-brand-200: #C4B5FD;
+    --dark-brand-300: #DDD6FE;
+}
+
+html[data-theme="dark"] {
+    /* Dark Theme */
+
+    --default-font-color: var(--base-light);
+    
+    /* Dark Theme - Background */
+    --color-bg-brand-default: var(--dark-brand-100);
+    --color-bg-brand-hover: var(--dark-brand-200);
+    --color-bg-brand-selected: var(--dark-brand-300);
+    --color-bg-brand-light-default: var(--dark-brand-50);
+    --color-bg-error-default: var(--dark-red-100);
+    --color-bg-error-hover: var(--dark-red-50);
+    --color-bg-innerisland-default: var(--dark-neutral-20);
+    --color-bg-island-default: var(--base-dark);
+    --color-bg-island-disabled: var(--dark-neutral-50);
+    --color-bg-island-inversed: var(--base-light);
+    --color-bg-island-selected: var(--dark-neutral-50);
+    --color-bg-page-default: var(--dark-neutral-50);
+    --color-bg-page-secondary-default: var(--dark-neutral-0);
+    --color-bg-page-secondary-default: var(--dark-neutral-0);
+    --color-bg-neutral-basic-default: var(--dark-neutral-20);
+    --color-bg-neutral-basic-inversed: var(--dark-neutral-300);
+    --color-bg-neutral-lightest-default: var(--dark-neutral-20);
+    --color-bg-neutral-medium-default: var(--dark-neutral-100);
+
+    /* Dark Theme - Border */
+    --color-border-brand-default: var(--dark-brand-100);
+    --color-border-error-default: var(--dark-red-100);
+    --color-border-primary-default: var(--dark-neutral-100);
+    --color-border-primary-hover: var(--base-light);
+    --color-border-secondary-default: var(--dark-neutral-200);
+    --color-border-secondary-hover: var(--base-light);
+    --color-border-success-default: var(--dark-green-100);
+
+    /* Dark Theme - Chart */
+    --color-chart-critical: var(--dark-red-100);
+    --color-chart-low: var(--dark-green-100);
+    --color-chart-medium: var(--dark-orange-100);
+
+    /* Dark Theme - Effects */
+    --effect-shadow-drop: #12121299;
+
+    /* Dark Theme - Icon */
+    --color-icon-brand-default: var(--dark-brand-100);
+    --color-icon-brand-hover: var(--dark-brand-200); 
+    --color-icon-error-default: var(--dark-red-100);
+    --color-icon-error-hover: var(--dark-red-200);
+    --color-icon-primary-default: var(--base-light);
+    --color-icon-primary-inversed: var(--base-dark); 
+    --color-icon-secondary-default: var(--dark-neutral-200); 
+    --color-icon-secondary-hover: var(--base-light);
+    --color-icon-success-default: var(--dark-green-100);
+
+    /* Dark Theme - SideMenu */
+    --color-sidemenu-bg-default: var(--base-dark);
+    --color-sidemenu-bg-hover: var(--dark-neutral-50);
+    --color-sidemenu-bg-selected: var(--dark-brand-100);
+    --color-sidemenu-icon-default: var(--base-light);
+    --color-sidemenu-icon-selected: var(--light-color-static);
+    --color-sidemenu-plus_button_bg-selected-hover: var(--dark-brand-200);
+    --color-sidemenu-plus_button_bg-unselected-hover: var(--base-light);
+    --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
+    --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
+    --color-sidemenu-plus_button_icon-unselected-default: var(--base-light);
+    --color-sidemenu-plus_button_icon-unselected-hover: var(--base-dark);
+    --color-sidemenu-text-default: var(--base-light);
+    --color-sidemenu-text-selected: var(--light-color-static);
+
+    /* Dark Theme - Static */
+    --dark-color-static: var(--base-dark);
+    --dark-color-static-brand: var(--dark-brand-100);
+    --light-color-static: var(--base-light);
+    --light-color-static-brand: var(--light-brand-100);
+
+    /* Dark Theme - Status */
+    --color-status-error-background: var(--dark-red-50);
+    --color-status-error-foreground: var(--dark-red-100);
+    --color-status-success-background: var(--dark-green-50);
+    --color-status-success-foreground: var(--dark-green-100);
+    --color-status-warning-background: var(--dark-orange-50);
+    --color-status-warning-foreground: var(--dark-orange-100);
+
+    /* Dark Theme - Text */
+    --color-text-brand-default: var(--dark-brand-100);
+    --color-text-brand-hover: var(--dark-brand-200);
+    --color-text-error-default: var(--dark-red-100);
+    --color-text-primary-default: var(--base-light);
+    --color-text-primary-inversed: var(--dark-neutral-0);
+    --color-text-secondary-default: var(--dark-neutral-200);
+    --color-text-success-default: var(--dark-green-100);
+    --color-text-tertiary-default: var(--dark-neutral-100);
+
+    /* Dark Theme - Buttons */
+    --color-button-brandlight-filled-hover: var(--dark-brand-50);
+}
+

package/dist/assets/Tooltip.css

@@ -1 +0,0 @@
-._container_193w2_1{position:relative;width:100%;height:100vh;padding:20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:space-between;border:1px dashed #ccc;box-sizing:border-box}._trigger_193w2_14{padding:8px 16px;background-color:#1976d2;color:#fff;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s;text-align:center}._trigger_193w2_14:hover{background-color:#1565c0}._clickTrigger_193w2_29{background-color:#388e3c}._clickTrigger_193w2_29:hover{background-color:#2e7d32}._positionsContainer_193w2_38{padding:20px}._positionGroup_193w2_42{display:flex;gap:20px;margin-bottom:30px;justify-content:center;flex-wrap:wrap}

package/dist/components/Ui/DatePicker/index.js

@@ -1,4 +0,0 @@
-import { DatePicker as o } from "./DatePicker.js";
-export {
-  o as DatePicker
-};

package/dist/index-2QXL0WYc.js

@@ -1,45 +0,0 @@
-import { g as c } from "./_commonjsHelpers-C6fGbg64.js";
-var n = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var a;
-function p() {
-  return a || (a = 1, function(o) {
-    (function() {
-      var f = {}.hasOwnProperty;
-      function e() {
-        for (var t = "", r = 0; r < arguments.length; r++) {
-          var s = arguments[r];
-          s && (t = i(t, u(s)));
-        }
-        return t;
-      }
-      function u(t) {
-        if (typeof t == "string" || typeof t == "number")
-          return t;
-        if (typeof t != "object")
-          return "";
-        if (Array.isArray(t))
-          return e.apply(null, t);
-        if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
-          return t.toString();
-        var r = "";
-        for (var s in t)
-          f.call(t, s) && t[s] && (r = i(r, s));
-        return r;
-      }
-      function i(t, r) {
-        return r ? t ? t + " " + r : t + r : t;
-      }
-      o.exports ? (e.default = e, o.exports = e) : window.classNames = e;
-    })();
-  }(n)), n.exports;
-}
-var l = p();
-const x = /* @__PURE__ */ c(l);
-export {
-  x as c
-};