triafly-ui-kit 1.0.43 → 1.0.45

package/dist/styles/reset.scss

@@ -1,106 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    border: 0;
-  
-    /*color: #1a2026;*/
-  }
-  
-  *,
-  *::before,
-  *::after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  
-  :focus,
-  :active {
-    outline: none;
-  }
-  
-  nav,
-  footer,
-  header,
-  aside {
-    display: block;
-  }
-  
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-  
-    font-size: 100%;
-    font-size: 14px;
-    line-height: 1;
-    -ms-text-size-adjust: 100%;
-    -moz-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-  }
-  
-  input,
-  button,
-  textarea {
-    font-family: inherit;
-  }
-  
-  input::-ms-clear {
-    display: none;
-  }
-  
-  button {
-    cursor: pointer;
-  }
-  
-  button::-moz-focus-inner {
-    padding: 0;
-  
-    border: 0;
-  }
-  
-  a,
-  a:visited {
-    text-decoration: none;
-  }
-  
-  a:focus,
-  a:active {
-    outline: none;
-  }
-  
-  a:hover {
-    text-decoration: none;
-  }
-  
-  ul li {
-    list-style: none;
-  }
-  
-  img {
-    vertical-align: top;
-  }
-  
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: 400;
-  }
-  
-  #root {
-    background-color: var(--color-bg-island-default);
-  }
-  
-  .page-wrapper {
-    width: 100%;
-    max-width: 1920px;
-    min-height: 100vh;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--color-bg-island-default);
-  }

package/dist/styles/typography.scss

@@ -1,106 +0,0 @@
-$font-path: '../assets/fonts' !default; // Для работы внутри Storybook
-// Переопределяется в основном проекте через:
-// $font-path: '~triafly-ui-kit/assets/fonts';
-
-//Подключение шрифтов
-@font-face {
-  font-family: "Roboto Slab";
-  src: url("#{$font-path}/RobotoSlab-SemiBold.ttf") format("truetype");
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Regular.ttf") format("truetype");
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Semibold.ttf") format("truetype");
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Bold.ttf") format("truetype");
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "Fira Code";
-  src: url("#{$font-path}/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/dist/styles/variables.scss

@@ -1,277 +0,0 @@
-: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;
-}
-
-/* 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="light"] {
-    /* 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-lightest-default: var(--light-neutral-20);
-    --color-bg-neutral-light-default: var(--light-neutral-50);
-    --color-bg-neutral-medium-default: var(--light-neutral-100);
-    --color-bg-neutral-basic-inversed: var(--light-neutral-300);
-
-    /* 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);
-}
-
-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-lightest-default: var(--dark-neutral-20);
-    --color-bg-neutral-light-default: var(--dark-neutral-50);
-    --color-bg-neutral-medium-default: var(--dark-neutral-100);
-    --color-bg-neutral-basic-inversed: var(--dark-neutral-300);
-
-    /* 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);
-}
-