@mlut/core 1.0.0

package/dist/sass/tools/functions/high/utils/_value-converters.scss

@@ -0,0 +1,294 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:string';
+
+@use '../forward-tools' as ml;
+
+// Value converters
+//
+// Simple converters are listed here, and more complex ones are made in separate sections on this page. Available converters:
+// ```scss
+//@debug ml.unitless(10); // 10
+//@debug ml.resolution(2x); // 2dppx
+//@debug ml.global-kw('a'); // auto
+//@debug ml.abbr('bgc'); // background-color
+// ```
+//
+// $value - value for converting
+// $data = () - map with data required for converting
+//
+/// Styleguide: sass-tools.functions.utils.value_converters
+
+
+@function convert-uv-number($value, $data: ()) {
+	$val-number: ml.str2n($value, true);
+	$units-key: map.get($data, 'units-key');
+
+	@if meta.type-of($val-number) == 'number' {
+		$unit-number: 0;
+		$unit: math.unit($val-number);
+
+		@if (
+			not $units-key and $unit == '' and
+			($val-number - math.floor($val-number)) != 0
+		) {
+			// TODO: add setting for changing unit
+			$unit-number: 1rem;
+		} @else {
+			$unit-number: map.get(
+				ml.$utils-cfg, 'units', $units-key or 'default', $unit
+			);
+		}
+
+		@if $unit-number {
+			@return math.div($val-number, map.get(ml.$units-all, $unit)) * $unit-number;
+		}
+
+		@if map.has-key(ml.$general-cfg, 'custom-unit-values', $unit) {
+			$custom-unit-value: map.get(ml.$general-cfg, 'custom-unit-values', $unit);
+			$custom-unit-val-type: meta.type-of($custom-unit-value);
+
+			@if $custom-unit-val-type == 'function' {
+				@return meta.call(
+					$custom-unit-value,
+					$val-number,
+					('util': map.get($data, 'name'))
+				);
+			} @else if $custom-unit-val-type == 'number' {
+				@return (
+					math.div($val-number, map.get(ml.$units-all, $unit)) * $custom-unit-value
+				);
+			}
+		}
+
+		@return $val-number;
+	}
+
+	@if not $units-key and meta.type-of($value) == 'string' {
+		$fraction: ml.str-split($value, '/');
+
+		@if list.length($fraction) > 1 {
+			$dividend: list.nth($fraction, 1);
+
+			@if map.get($data, 'negative') {
+				$dividend: '-' + $dividend;
+			}
+
+			@return calc(
+				ml.apply-value-converter($dividend, 'O')
+				/ ml.apply-value-converter(list.nth($fraction, 2), 'O')
+				* 100%
+			);
+		}
+	}
+
+	@return $value;
+}
+
+@function convert-uv-keyword($value, $data: ()) {
+	$name: map.get($data, 'name');
+	$section: map.get($data, 'section');
+
+	@if not map.has-key(ml.$utils-db, $section, 'registry', $name, 'keywords') {
+		@return $value;
+	}
+
+	@if map.has-key(
+		ml.$utils-db, $section, 'registry', $name, 'keywords', $value
+	) {
+		@return map.get(
+			ml.$utils-db, $section, 'registry', $name, 'keywords', $value
+		);
+	}
+
+	@if map.has-key(
+		ml.$utils-db, $section, 'registry', $name, 'custom-keywords', $value
+	) {
+		@return map.get(
+			ml.$utils-db, $section, 'registry', $name, 'custom-keywords', $value
+		);
+	}
+
+	$links: map.get(
+		ml.$utils-db, $section, 'registry', $name, 'keywords'
+	);
+
+	@each $item in $links {
+		@if map.has-key(ml.$utils-db, $section, 'keywords', $item, $value) {
+			@return map.get(ml.$utils-db, $section, 'keywords', $item, $value);
+		} @else if map.has-key(
+			ml.$utils-db, $section, 'registry', $item, 'keywords', $value
+		) {
+			@return map.get(
+				ml.$utils-db, $section, 'registry', $item, 'keywords', $value
+			);
+		}
+	}
+
+	@return (
+		map.get(ml.$utils-db, 'common', 'keywords', $links, $value) or
+		$value
+	);
+}
+
+@function convert-uv-resolution($value, $data: ()) {
+	@return convert-uv-number(
+		$value, ('units-key': 'resolution')
+	);
+}
+
+@function convert-uv-num-percent($value, $data: ()) {
+	@return convert-uv-number(
+		$value, map.set($data, 'units-key', 'num-percent')
+	);
+}
+
+@function convert-uv-angle($value, $data: ()) {
+	@return convert-uv-number(
+		$value, map.set($data, 'units-key', 'angle')
+	);
+}
+
+@function convert-uv-num-length($value, $data: ()) {
+	@return convert-uv-number(
+		$value, map.set($data, 'units-key', 'num-length')
+	);
+}
+
+@function convert-uv-global-kw($value, $data: ()) {
+	@if map.has-key(
+		ml.$utils-db, 'common', 'keywords', 'css-oft', $value
+	) {
+		@return map.get(
+			ml.$utils-db, 'common', 'keywords', 'css-oft', $value
+		);
+	}
+
+	@return (
+		map.get(ml.$utils-db, 'common', 'keywords', 'global', $value) or $value
+	);
+}
+
+@function convert-uv-abbr($value, $data: ()) {
+	@return (
+		ml.util-prop(
+			ml.str-ucfirst($value), map.get($data, 'section'), false, true
+		) or
+		// maybe in the future, the keys of utils in the registry will be unified
+		ml.util-prop($value, map.get($data, 'section'), false, true) or
+		$value
+	);
+}
+
+$-tUCp-length: string.length(ml.$tUCp);
+
+@function convert-uv-cust-prop($value, $data: ()) {
+	@if (
+		meta.type-of($value) != 'string' or
+		string.slice($value, 1, $-tUCp-length) != ml.$tUCp
+	) {
+		@return $value;
+	}
+
+	$fallback-pos: string.index($value, ml.$tUFv);
+	$result: '';
+
+	// TODO: change stylelint rules to allow this code
+	//stylelint-disable
+	@if $fallback-pos {
+		$result: var(
+			#{
+				'--' + ml.$uv-css-var-prefix + string.slice(
+					$value, $-tUCp-length + 1, $fallback-pos - 1
+				)
+			},
+			#{
+				ml.apply-value-converter(
+					string.slice($value, $fallback-pos + 1),
+					map.remove($data, 'negative')...
+				)
+			}
+		);
+	} @else {
+		$result: var(#{
+			'--' + ml.$uv-css-var-prefix + string.slice(
+				$value, $-tUCp-length + 1
+			)
+		});
+	}
+	//stylelint-enable
+
+	@return if(
+		map.get($data, 'negative'),
+		calc($result * -1),
+		$result
+	);
+}
+
+@function convert-uv-color($value, $data: ()) {
+	@if map.has-key(
+		ml.$utils-db, 'common', 'keywords', 'colors', $value
+	) {
+		@return map.get(
+			ml.$utils-db, 'common', 'keywords', 'colors', $value
+		);
+	}
+
+	@if meta.type-of($value) == 'string' {
+		$mod-color-list: ml.str-split($value, ml.$tUCla);
+
+		@if list.length($mod-color-list) > 1 {
+			//stylelint-disable
+			$part-color: list.nth($mod-color-list, 1);
+			$converted-part: ml.apply-value-converter(
+				$part-color, map.remove($data, 'negative')...
+			);
+			$color: ml.str-hex2color($converted-part);
+			//stylelint-enable
+
+			@if $color or ml.is-css-var($converted-part) {
+				$part-alpha: list.nth($mod-color-list, 2);
+				$alpha: ml.apply-value-converter($part-alpha, 'O');
+
+				@if ml.is-css-var($alpha) and not string.index($part-alpha, ml.$tUFv) {
+					$alpha: string.insert($alpha, ', 1', -2);
+				}
+
+				@return rgba($color or $converted-part, $alpha);
+			}
+		}
+	}
+
+	@return $value;
+}
+
+@function -is-kw-with-num($value, $str-part, $str-length: 1) {
+	@return (
+		meta.type-of($value) == 'string' and
+		string.slice($value, 1, $str-length) == $str-part and
+		ml.str-digit-index($value) == $str-length + 1
+	);
+}
+
+@function convert-uv-grid-tracks($value, $data: ()) {
+	@return if(
+		-is-kw-with-num($value, 't'),
+		repeat(
+			string.unquote(string.slice($value, 2)), minmax(0, 1fr)
+		),
+		$value
+	);
+}
+
+@function convert-uv-grid-span($value, $data: ()) {
+	@if not -is-kw-with-num($value, 's') {
+		@return $value;
+	}
+
+	// string is not converted to the number because it is unlikely to use this value in the future
+	$number: string.unquote(string.slice($value, 2));
+
+	@return span $number / span $number;
+}

package/dist/sass/tools/functions/high/utils/_value-transformers.scss

@@ -0,0 +1,65 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:string';
+
+@use '../forward-tools' as ml;
+
+// Value transformers
+//
+// Available transformers:
+// ```scss
+//@debug ml.transform-uv-gradiend();
+// ```
+//
+// $value - value for transforming
+// $data = () - map with data required for transforming
+//
+/// Styleguide: sass-tools.functions.high.utils.value_transformers
+
+$-directions: map.values(ml.$main-directions);
+
+@function gradient($values, $data: ()) {
+	$first-list: list.nth($values, 1);
+
+	@if list.index($-directions, list.nth($first-list, 1)) {
+		$first-list: list.join(to, $first-list);
+	}
+
+	@return meta.call(
+		// TODO: add cache with frequently used CSS functions
+		meta.get-function(
+			map.get(
+				ml.$utils-db, 'utils', 'registry', map.get($data, 'name'), 'css-function'
+			),
+			true
+		),
+		list.set-nth($values, 1, $first-list)
+	);
+}
+
+@function to-css-fn($values, $data: ()) {
+	$result: ();
+
+	@each $item in if(
+		list.separator($values) == comma,
+		$values, ($values,)
+	) {
+		// maybe worth doing it more readable
+		$result: list.append(
+			$result,
+			meta.call(
+				meta.get-function(
+					map.get(
+						ml.$utils-db, 'utils', 'registry', map.get($data, 'name'), 'css-function'
+					),
+					true
+				),
+				$item
+			)
+		);
+	}
+
+	@return $result;
+}

package/dist/sass/tools/mixins/_index.import.scss

@@ -0,0 +1,2 @@
+@forward 'base' as ml-*;
+@forward 'high' as ml-*;

package/dist/sass/tools/mixins/_index.scss

@@ -0,0 +1,8 @@
+// Mixins
+//
+// Useful mixins. Most of the mixins are used for internal needs, but some can be useful in ordinary code.
+//
+// Styleguide: sass-tools.mixins
+
+@forward 'base';
+@forward 'high';

package/dist/sass/tools/mixins/base/_forward-tools.scss

@@ -0,0 +1,2 @@
+@forward '../../settings';
+@forward '../../functions';

package/dist/sass/tools/mixins/base/_index.scss

@@ -0,0 +1,93 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:string';
+
+@use 'forward-tools' as ml;
+
+@forward 'mk-ar';
+@forward 'mk-state';
+
+// At-Rules
+//
+// At-Rules mixins.
+//
+// Styleguide: sass-tools.mixins.ar
+
+// bp
+//
+// Mixin for creation media queries with breakpoints. You can use [syntax](section-concepts.html#kssref-concepts-at_rules-bp) for breakpoints from utilities or one-two arbitrary numbers. When using numbers:
+// - one number: `min-width` query
+// - two from zero: `max-width`
+// - two numbers: range
+// ```scss
+// @include ml.bp('<sm,md:lg') {
+//		.inp--common {
+//			padding-left: 48px;
+//		}
+// }
+//
+// @include ml.bp(0 600px) {
+//		.btn__icon {
+//			margin-left: 18px;
+//		}
+// }
+//
+// @include ml.bp(16em 32em) {
+//		.btn__icon {
+//			margin-top: 8px;
+//		}
+// }
+//
+// // CSS
+// @media (max-width: 519px), (min-width: 768px) and (max-width: 991px) {
+//		.inp--common {
+//			padding-left: 48px;
+//		}
+// }
+//
+// @media (max-width: 599px) {
+//		.btn__icon {
+//			margin-left: 18px;
+//		}
+// }
+//
+// @media (min-width: 16em) and (max-width: 31.94em) {
+//		.btn__icon {
+//			margin-top: 8px;
+//		}
+// }
+// ```
+//
+// $bp - string in syntax for breakpoins or list with numbers.
+// @content - CSS relus that will be placed into mediaquery.
+//
+// Styleguide: sass-tools.mixins.ar.bp
+
+@mixin bp($bp) {
+	$bp-type: meta.type-of($bp);
+	$mq-str: '';
+
+	@if $bp-type == 'string' {
+		$mq-str: ml.convert-ar-bp($bp);
+	} @else if $bp-type == 'number' {
+		$mq-str: '(min-width: #{$bp})';
+	} @else if $bp-type == 'list' {
+		$from: list.nth($bp, 1);
+		$to: list.nth($bp, 2);
+		$to: $to - ml.bp-value-diff($to);
+
+		$mq-str: if(
+			$from == 0,
+			'(max-width: #{$to})',
+			'(min-width: #{$from}) and (max-width: #{$to})'
+		);
+	} @else {
+		@error 'Wrong type of argument $bp: `#{$bp-type}`. Expected `string`, `number` or numbers `list`';
+	}
+
+	@media #{$mq-str} {
+		@content;
+	}
+}

package/dist/sass/tools/mixins/base/_mk-ar.scss

@@ -0,0 +1,96 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:string';
+
+@use 'forward-tools' as ml;
+
+// mk-ar
+//
+// Generate at-rules from the string with space separated abbreviations. Used [syntax](section-concepts.html#kssref-concepts-at_rules) for at-rules from utilities.
+//
+// ```scss
+//@include ml.mk-ar('@s:apcr4/3@:dm') using ($ar) {
+// 	.block {
+// 		display: inline-grid;
+// 	}
+//}
+//
+//// CSS
+//@supports (aspect-ratio: 4/3) {
+// 	@media (display-mode: fullscreen) {
+// 		.block {
+// 			display: inline-grid;
+// 		}
+// 	}
+//}
+// ```
+//
+// $at-rules - string with abbreviations
+// $this-util = null - utility for which the at-rules will be generated.<br> This is a map in format `('name': '', 'value': '')`
+// @content - CSS rules that will be placed into at-rules
+//
+// Styleguide: sass-tools.mixins.ar.mk_ar
+
+@mixin mk-ar($at-rules, $this-util: null) {
+	$abbr-list: ml.str-split($at-rules, ' ');
+
+	@each $key, $value in map.get(ml.$at-rules-cfg, 'keywords') {
+		@if meta.type-of($value) == 'string' {
+			$value: map.keys(map.get(ml.$at-rules-cfg, $value));
+		}
+
+		$abbr-list: ml.replace-keyword($abbr-list, $key, $value);
+	}
+
+	@each $item in $abbr-list {
+		$ar-list: ml.str-split($item, ml.$tAAr);
+
+		@if list.nth($ar-list, 1) == '' {
+			$ar-list: ml.remove-nth($ar-list, 1);
+		}
+
+		@include -generate-ar($item, $this-util, $ar-list, 1, list.length($ar-list)) {
+			@content($item);
+		}
+	}
+}
+
+@mixin -generate-ar($at-rules, $this-util, $ar-list, $cur-index, $last-index) {
+	$item: list.nth($ar-list, $cur-index);
+	$ar-alias: list.nth(ml.str-split($item, ml.$tAAnd), 1);
+	$ar-name: ml.ls-find(
+		map.keys(ml.$at-rules-db), meta.get-function('-is-ar-alias'), $ar-alias
+	);
+	$converter: null;
+	$ar-str: $item;
+
+	@if string.index($at-rules, ml.$tAAr) == 1 or $cur-index > 1 {
+		@if not $ar-name {
+			@error 'At-rule for alias `#{$ar-alias}` is not defined';
+		}
+
+		$converter: map.get(ml.$at-rules-db, $ar-name, 'converter');
+		$ar-str: string.slice($item, string.length($ar-alias) + 2);
+	} @else {
+		$ar-name: 'media';
+		$converter: meta.get-function('convert-ar-bp', false, ml);
+	}
+
+	@#{$ar-name} #{meta.call($converter, $ar-str, $this-util)} {
+		@if $cur-index < $last-index {
+			@include -generate-ar($at-rules, $this-util, $ar-list, $cur-index + 1, $last-index) {
+				@content;
+			}
+		} @else {
+			@content;
+		}
+	}
+}
+
+@function -is-ar-alias($name, $i, $alias) {
+	@return (
+		($alias == '' and map.get(ml.$at-rules-db, $name, 'default')) or
+		map.get(ml.$at-rules-db, $name, 'alias') == $alias
+	);
+}