// ----------------------------------------------------------------------------------------------
// TODO:
// √√√√√ WOOOOOOOW ** Refactor Text and his StyleGuide
// √√√√√ WOOOOOOOW ** Button  and unlink from Text component and his StyleGuide
// ** Button merge with Castify Button
// ** Refactor get cleanTextProps() of <AnimatedText />
// ** Trivia - refactor all scss file and rewire class names with "spinal-case" instead of "camelCase"
// ** think about color vars ==> $primary-color === $primary-color-color or $color-primary

// ----------------------------------------------------------------------------------------------
// NOTE:
// 1. all scss classes have to be prefixed by _.theme.scss --> $prefix
// 2. all scss classes have to be written in "spinal-case"
// 3. try to avoid usage of MediaQueries from _theme.scss in <Component>.js

// ----------------------------------------------------------------------------------------------
// NOTE:
// 1. что делать с :global (лучше было бы найти способ импортировать такие файлы не обрабатывая css модулем)
// 2. что делать с $prefix который использован в js,
//    если его менять, то только тут, в ui kit, иначе изменится только scss, но не js (так как уже скомпилирован)
//    (можно чтоб префикс брали из window но это того наверно не стоит)
//    (все компоненты берут класс из utils функций, так что если может там что то намудрить то ...)

// ----------------------------------------------------------------------------------------------
// Text from style guide

// #1
//export const BUTTON = {
//	'tag': 'span',
//	'family': 'sans',
//	'size': 'legal',
//	'weight': '400',
//	'transform': 'uppercase',
//};

// #2
//.button {
//	@include font($family: sans, $size: legal, $weight: 400, $transform: uppercase);
//}

// #1
//  + able change from one place
//  - harder to override with css and change by media query

// #2
//  + able change from one place
//  + easy to change with css by media query


// ---

/*
	1.1 replace StyleGuide "BUTTON" with simple mixin for class;
	1.2 replace StyleGuide "BUTTON_LARGE" with simple mixin for class;
	<=>
	Сценарий 1:
		заменяем все CONST из StyleGuide по примеру кнопки и потом применяем как <Text baseClass="mega" />
		в новом проекте в другим шрифтом переопределяем $font-size, а также все классы основанные на нем =(
			- каждый проект с новым шрфитом будет иметь абсолютно лишний набор правил для всех из StyleGuide
			+ нету их особо
	Сценарий 2:
		в UI-kit нет StyleGuide, нет заготовленных классов для тектов.
		в новом проекте с или без нового шрифта - создаем $font-size и
		та нахуй ...
	Сценарий 3:
		• в Ui-kit есть $text-preset (конекртно для текстов)
		* для ui-kit компнентов остается $font-size но его необходимо урезать
		• <Text /> будет будет получать классы созданные в каждом новом проекте
		  на основе базового или переопределенного $text-preset
		  В ui-kit $text-preset существует только в качестве демонстрации соглашений относительно текстовых градаций
		  
		  + нет лишних для переопределения классов
		  +/- классы нужно создавать вручную на основе $text-preset в каждом проекте
		  + прочие компоненты из UI-kit не будут затронуты при переопределении $text-preset, ведь они зависимы только
		    от $font-size созданного исключительно для прочих компонентов и глобальных размеров, но не для типов текстов.
	      + вся логика для тектовых типов изолирована от других комопнентов.
	      
	      $text-preset: ( 'title': (..), 'subtitle': (...), 'caption': (...), 'legal': (...)  );
	      .title-[hash:md5] { ... }
	      .subtitle-[hash:md5] { ... }
	      <Text tag="h1" preset="title" />  - title ==> .title-[hash:md5] только для этого нужно Text обернуть в HOC
	            который будет получив "title" запрашитьва css.title и модуля что создали
	      
	      -----
	      <Text tag="span" transform="uppercase" />
	      !!! Не хочу давать Text возможность применять классы типа ra-uppercase
	          потому как напр. потом на мобайле будет странно в css присать .ra-uppercase { text-transform: lowercase; }
	      Но без этого разве нужен компонент текста???? ведь он получает итого только:
	        - ТЕГ
	        - КЛАСС созданные к новом проекте
	        - refCB
         
	      
	<=>
	2.1 $font-size
	
	MEGA, LEGAL_UPPERCASE, MICRO, MEGA, SMALL, PICO, MEDIUM
	
	props "title" ==> .ra-title ==> scss ==>
		.ra-title {
			@include font()
		}
		@each $key, $value in $font-size {
			.#{$key} { : .ra-title
				@include font($size: $key: title);
			}
		}
	
.btn {
	@include font($family: sans, $size: legal, $weight: 400, $transform: uppercase);
}
export const BUTTON = {
	'tag': 'span',
	'family': 'sans',
	'size': 'legal',
	'weight': '400',
	'transform': 'uppercase',
};


*/

// ----------------------- Text types
/*
	'article': (
		font-size: 1.8rem,
	    line-height: 3.0rem,
	),
	'paragraph': (
		font-size: 1.6rem,
	    line-height: 2.5rem,
	),
	'ui-text': (
		font-size: 1.4rem,
	    line-height: 2.0rem,
	),
	'caption': (
		font-size: 1.2rem,
	    line-height: 2.0rem,
	),
	'legal': (
		font-size: 1.1rem,
	    line-height: 1.5rem,
	),
*/

// giga => giga
// mega => huge
// large => large-xx
// medium => large-x
// small => large
// mini => medium
// micro => regular
// nano => small
// pico => tiny