@mlut/core 1.0.0

package/dist/sass/tools/mixins/high/utils/_mk-util.scss

@@ -0,0 +1,366 @@
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:selector';
+
+@use '../forward-tools' as ml;
+
+// mk-util
+//
+// Creates utilities based on a map or a list with values. Simple examples you can see [here](section-how_to.html#kssref-how_to-mk_utils).
+//
+// Even if you started using a map, you can still use the conversion of values. To do this, specify `null` instead of CSS values. And if you want that CSS value corresponds to the value of the utility, use `false`:
+// ```scss
+//	@include ml.mk-util(
+//		'Mxw', (
+//		500: false,
+//		'sm0': 560px,
+//		'n': null,
+//		[5e, 7]: null,
+//	));
+//
+//	// CSS
+//	.Mxw500 {
+//		max-width: 500;
+//	}
+//
+//	.Mxw-sm0 {
+//		max-width: 560px;
+//	}
+//
+//	.Mxw-n {
+//		max-width: none;
+//	}
+//
+//	.Mxw5e {
+//		max-width: 5em;
+//	}
+//
+//	// etc
+// ```
+// Do not forget that you can use Generation Syntax for any utility value. This is available, both in a map of values and in the list.
+// ```scss
+//	@include ml.mk-util(
+//		'Mxw', (
+//		'sm0_ af bf': 560px,
+//	));
+//
+//	@include ml.mk-util(
+//		'Mxw', (
+//		':f _100_ +:h',
+//		'@:pr _10p',
+//	));
+// ```
+//
+// $raw-name - `string` <div> name of the utility. You can use [generation syntax](section-concepts.html#kssref-concepts-util-components-syntax) here </div>
+// $values - <div class="Mt3u"> `list | map` </div> You can specify a map with utility values and CSS properties values. Or you can pass a list with only utility values. It will be converted to CSS values depends on conversion type of utility
+// $components = () - <div class="Mt3u"> `map` </div> Contains utility [components](section-concepts.html#kssref-concepts-util-components) in longhand format
+// $options = () - <div class="Mt3u"> `map` </div> Options of utilities, similarly to [those](section-settings.html#kssref-settings-utils-data-options) that are in the utility registry. Here you can change the options for a specific set of values without changing the main utility options. Also, you can create a new utility in-place, without registration ~~and SMS~~
+//
+// Styleguide: sass-tools.mixins.utils.mk_util
+
+@mixin mk-util($raw-name, $values, $components: (), $options: ()) {
+	$util-data: ml.parse-util($raw-name);
+	$util-name: map.get($util-data, 'value');
+	$is-range: map.has-key($options, 'isRange');
+
+	$main-options: if(
+		$is-range,
+		$options,
+		-util-main-options($util-name, $options),
+	);
+
+	$props: map.get($main-options, 'properties');
+	$custom-selector: map.get($main-options, 'selector');
+	$bound-comp-str: map.get($main-options, 'components');
+	$bound-components: $bound-comp-str and ml.parse-util($bound-comp-str);
+	$is-bound-comp: list.length($bound-components) > 1;
+	$range-generator: map.get(
+		ml.$utils-cfg,
+		'range-generators',
+		(
+			map.get($main-options, 'range-generator')
+			or 'number'
+		)
+	);
+
+	$class-name: if(
+		$bound-components,
+		map.get($bound-components, 'value'),
+		$util-name
+	);
+
+	@if not map.has-key(ml.$utils-db, 'utils', 'registry', $util-name) {
+		ml.$utils-db: map.set(
+			ml.$utils-db, 'utils', 'registry', $util-name, if($options, $options, $props)
+		);
+	}
+
+	@if $is-bound-comp {
+		$util-data: $bound-components;
+	} @else if list.length($components) > 0 {
+		$util-data: $components;
+	}
+
+	$is-values-map: meta.type-of($values) == 'map';
+	$is-bound-comp: $is-bound-comp or map.get($main-options, 'groupBoundComp');
+	$new-keywords: ();
+	$i: 1;
+
+	@each $key, $value in $values {
+		$range-list: if($is-values-map, $key, list.nth($values, $i));
+		$range-data: null;
+
+		@if list.is-bracketed($range-list) {
+			$range-data: meta.call($range-generator, $range-list, $util-name);
+		} @else if meta.type-of($key) == 'string' and string.index($key, ml.$kUvKA) {
+			$range-data: ml.expand-util-kw-alias($key, $util-name);
+		}
+
+		@if $range-data {
+			@if not map.has-key($range-data, 'components') {
+				$range-data: map.set($range-data, 'components', $util-data);
+			}
+
+			@include mk-util(
+				$util-name,
+				$options: map.set($main-options, 'isRange', true),
+				$range-data...
+			);
+		} @else {
+			$util-val-data: ml.parse-util($key);
+			$util-parsed-val: map.get($util-val-data, 'value');
+
+			@if $is-bound-comp or list.length($util-val-data) < 2 {
+				$util-val-data: $util-data;
+			}
+
+			$at-rules: map.get($util-val-data, 'at-rules');
+			$post-states: map.get($util-val-data, 'post-states');
+			$pre-states: map.get($util-val-data, 'pre-states');
+			$is-important: map.get($util-val-data, 'important');
+			$css-values: $value;
+
+			@if $css-values == null {
+				$css-values: ml.convert-util-value($util-parsed-val, $util-name);
+			} @else if $css-values == false {
+				$css-values: $util-parsed-val;
+			} @else if not $is-range {
+				$new-keywords: map.set($new-keywords, $util-parsed-val + '', $value);
+			}
+
+			$separated-value: ml.util-separated-value($util-parsed-val);
+			$this-util: (
+				'name': $util-name,
+				'value': $separated-value
+			);
+
+			@if $class-name == '' {
+				$separated-value: $util-parsed-val;
+			}
+
+			@if $is-important {
+				$separated-value: $separated-value + ml.$tUIm;
+			}
+
+			$selector: ml.str-escape(
+				ml.$class-prefix + $class-name + $separated-value
+			);
+
+			$val-feat-str: meta.inspect(
+				map.values(map.remove($util-val-data, 'value'))
+			);
+			$st-only: string.index($val-feat-str, ml.$kStOl);
+			$ar-st-only: string.index($val-feat-str, ml.$kArSO);
+			$ar-st: string.index($val-feat-str, ml.$kArSt);
+			$args: (
+				$props,
+				$css-values,
+				$is-important,
+				map.get($main-options, 'repeat-prop-values'),
+				map.get($main-options, 'preset-properties'),
+				$util-name,
+				$util-parsed-val,
+			);
+
+			@if not string.index($val-feat-str, ml.$kArOl) and not $ar-st-only {
+				@include ml.mk-state(
+					$post-states,
+					$pre-states,
+					not $st-only,
+					$selector,
+					$class-name,
+					$custom-selector,
+				) {
+					@include -generate-props($args...);
+				}
+			}
+
+			@if $at-rules {
+				@include ml.mk-ar($at-rules, $this-util) using ($ar) {
+					$util-selector: '.' + ml.str-escape($ar + ml.$tUCm) + $selector;
+
+					@if not $ar-st-only {
+						@at-root {
+							#{ml.util-apply-selector($custom-selector, $util-selector)} {
+								@include -generate-props($args...);
+							}
+						}
+					}
+
+					@if $ar-st or $ar-st-only {
+						@include ml.mk-state(
+							$post-states,
+							$pre-states,
+							false,
+							$util-selector,
+							$class-name,
+							$custom-selector,
+						) {
+							@include -generate-props($args...);
+						}
+					}
+				}
+			}
+		}
+
+		$i: $i + 1;
+	}
+
+	@if list.length($new-keywords) > 0 {
+		@include -save-new-keywords(
+			$new-keywords, $util-name, $props, map.get($main-options, 'groupItemIndex')
+		);
+	}
+}
+
+@mixin -save-new-keywords($new-keywords, $util-name, $props, $group-item-index) {
+	$conversion: (
+		map.get(ml.$utils-db, 'utils', 'registry', $util-name, 'conversion') or
+		'default'
+	);
+	$converters-list: map.get(ml.$utils-cfg, 'conversion-types', $conversion);
+
+	@if list.nth($converters-list, 1) != 'color' {
+		$util-keywords: map.get(
+			ml.$utils-db, 'utils', 'registry', $util-name, 'keywords'
+		);
+
+		$util-map: (
+			'properties': $props,
+		);
+
+		@if not list.index($converters-list, 'keyword') {
+			$conversion: 'kw_' + $conversion;
+			$util-map: map.set($util-map, 'conversion', $conversion);
+
+			@if not map.has-key(ml.$utils-cfg, 'conversion-types', $conversion) {
+				$converters-list: list.join('keyword', $converters-list);
+				ml.$utils-cfg: map.set(
+					ml.$utils-cfg,
+					'conversion-types',
+					$conversion,
+					$converters-list
+				);
+			} @else {
+				$converters-list: map.get(ml.$utils-cfg, 'conversion-types', $conversion);
+			}
+		}
+
+		@if meta.type-of($util-keywords) == 'map' or not $util-keywords {
+			$util-map: map.set($util-map, 'keywords', $new-keywords);
+		} @else {
+			$util-map: map.set($util-map, 'custom-keywords', $new-keywords);
+		}
+
+		ml.$utils-db: map.deep-merge(
+			ml.$utils-db,
+			('utils': ('registry': ($util-name: $util-map)))
+		);
+	} @else if not $group-item-index or $group-item-index < 2 {
+		ml.$utils-db: map.merge(
+			ml.$utils-db, 'common', 'keywords', 'colors', $new-keywords
+		);
+	}
+}
+
+@mixin -generate-props(
+	$props, $values, $is-important, $repeat-values, $preset-props, $util, $util-value
+) {
+	$i: if($repeat-values == null, 0, 1);
+	$values-count: list.length($values);
+	$important: (
+		(ml.$utils-up-specificity == true) or $is-important
+	) and string.unquote('!important');
+
+	$css-values: if(
+		list.length($props) < 2 and $values-count > 1,
+		($values,),
+		$values
+	);
+
+	@if $preset-props {
+		@each $key, $value in $preset-props {
+			@if meta.type-of($value) == 'function' {
+				$final-value: meta.call($value, $util, $util-value, $values, $important);
+
+				// temporary fix, because Sass does not allow `null` value for hiding custom properties
+				@if $final-value {
+					#{$key}: $final-value;
+				}
+			} @else {
+				#{$key}: $value $important;
+			}
+		}
+	}
+
+	@each $item in $props {
+		@if $repeat-values == null {
+			#{$item}: list.nth($css-values, ($i % $values-count) + 1) $important;
+		} @else if $i <= $values-count {
+			#{$item}: list.nth($css-values, $i) $important;
+		}
+
+		$i: $i + 1;
+	}
+}
+
+@function -util-main-options($name, $options) {
+	$prop: null;
+	$result: ();
+	$needed-options: (
+		'repeat-prop-values', 'preset-properties',
+		'selector', 'range-generator', 'components'
+	);
+
+	@each $item in $needed-options {
+		$result: map.set(
+			$result,
+			$item,
+			map.get(ml.$utils-db, 'utils', 'registry', $name, $item),
+		);
+	}
+
+	$prop: map.get($options, 'properties');
+	$external-selector: map.get($options, 'selector');
+
+	@if (
+		$external-selector and
+		map.has-key(ml.$utils-db, 'utils', 'registry', $name, 'selector') and
+		not string.index(meta.inspect($external-selector), ml.$tSTu)
+	) {
+		$options: map.set(
+			$options,
+			'selector',
+			selector.nest($external-selector, map.get($result, 'selector'))
+		);
+	}
+
+	$result: map.merge($result, $options);
+
+	@return map.set(
+		$result, 'properties', $prop or ml.util-prop($name, 'utils', true)
+	);
+}

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

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

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

@@ -0,0 +1,3 @@
+@forward 'base';
+@forward 'common';
+@forward 'high';

package/dist/sass/tools/settings/base/_general.scss

@@ -0,0 +1,175 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+
+// General
+//
+// Settings that affect the work of the all toolkit.
+//
+// $browser-font-size = 16px - font size for converting [px to rem](section-sass-tools.html#kssref-sass-tools-functions-px2rem). 16px used because is default font size in settings of most browsers.
+// $su = 0.25rem - space unit value
+// $css-vars-fallback = false - add fallback for values in `grid-gutters` units
+// $css-transition-time = 0.3s - default transition duration.
+// $ratio-box-flex = false - adds a more advanced version of [Ratio-box](section-css_lib.html#kssref-css_lib-helpers-ratio-box) helper with an arbitrary height \- `ratio-box-flex`
+// $wrapper-max-width = 1200px - max width of the [Wraper](section-css_lib.html#kssref-css_lib-helpers-wrapper) helper
+// $css-var-prefix = 'ml-' - prefix for the CSS custom properties, which are generated in the values of utilities. For example, value of `W-$myCard` with prefix: `var(--ml-myCard)`, and without:  `var(--myCard)`
+// $class-prefix - prefix, which will be added to CSS classes of all utilities. This can be useful when using mlut on top of the existing CSS
+//
+// Styleguide: settings.general
+
+// TODO: add docs
+// Generic CSS
+//
+// Generic styles like a reset/normalize, setting `box-sizing` etc. See example here.
+//
+/// Styleguide: settings.general.generic_css
+
+// TODO: add docs for css vars
+// CSS variables
+//
+// Settings of global [CSS custom properties](section-css_lib.html#kssref-css_lib-styles-css_vars) which used in mlut.
+//
+/// Styleguide: settings.general.css_vars
+
+// Names
+//
+// In addition to variables, the names of custom properties are contained in the map `$css-vars`.
+// Below are the names of the variables, the corresponding keys in the map and names of custom properties.
+//
+// $var-gg = --gg - `gg`.
+// $var-grid-cols = --grid-cols - `grid-cols`.
+//
+/// Styleguide: settings.general.css_vars.names
+
+$ratio-box-flex: false !default;
+$browser-font-size: 16px !default;
+$css-transition-time: 0.3s !default;
+$wrapper-max-width: 1200px !default;
+
+$su: 0.25rem !default;
+
+$is-test-env: false !default;
+
+$css-var-prefix: 'ml-' !default;
+$css-vars-fallback: false !default;
+
+$class-prefix: '' !default;
+
+$hex-digits: (
+	'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'
+);
+
+$dec-digits: (
+	'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
+);
+
+$spec-chars: (
+	' ', '!', '#', '$', '%', '&', '(', ')', '*', '+', ',', '.', '/', ':', ';', '<', '=', '>', '?', '@', '[', ']', '^', '`', '{', '|', '}', '~', "'",
+) !default;
+
+$number-max: 2e9 !default;
+
+$general-cfg: (
+	'main-directions': (
+		't': top,
+		'r': right,
+		'b': bottom,
+		'l': left,
+	),
+	'custom-unit-values': (
+		'u': $su,
+	),
+	'units': (
+		'css': (
+			'px': 1px,
+			'cm': 1cm,
+			'mm': 1mm,
+			'q': 1q,
+			'rem': 1rem,
+			'%': 1%,
+			'fr': 1fr,
+			'ch': 1ch,
+			'pc': 1pc,
+			'in': 1in,
+			'em': 1em,
+			'pt': 1pt,
+			'ex': 1ex,
+			'vw': 1vw,
+			'vh': 1vh,
+			'vmin': 1vmin,
+			'vmax': 1vmax,
+			'deg': 1deg,
+			'turn': 1turn,
+			'grad': 1grad,
+			'rad': 1rad,
+			's': 1s,
+			'ms': 1ms,
+			'hz': 1hz,
+			'khz': 1khz,
+			'dpi': 1dpi,
+			'dpcm': 1dpcm,
+			'dppx': 1dppx,
+			'x': 1x,
+		),
+		'custom': (
+			'': 1,
+			'gg': 1gg,
+			'gc': 1gc,
+			'u': 1u,
+			'd': 1d,
+			'e': 1e,
+			'g': 1g,
+			'i': 1i,
+			'p': 1p,
+			'r': 1r,
+			'ra': 1ra,
+			't': 1t,
+		),
+	),
+	'generic-css': (
+		'border-box': true,
+		'sup-sub-no-v-align': true,
+		'embeds-v-align': true,
+		'embeds-aspect-ratio': true,
+		'forms-normalize': true,
+		'embeds-block': false,
+		'svg-fill-cur-color': false,
+		'default-reduce-motion': false,
+		'reset-border': false,
+		'reset': false,
+	),
+	'css-vars': (
+		'gg': 'gg',
+		'gs-formula-diff': 'gsfd',
+		'gs-columns-count': 'gscc',
+	),
+) !default;
+
+$general-config: () !default;
+$general-config-ext: () !default;
+
+$general-cfg: map.deep-merge($general-cfg, $general-config);
+$general-cfg: map.deep-merge($general-cfg, $general-config-ext);
+
+$main-directions: map.get($general-cfg, 'main-directions');
+
+$units-all: map.merge(
+	map.get($general-cfg, 'units', 'css'),
+	map.get($general-cfg, 'units', 'custom'),
+);
+
+$-prefixed-vars: ();
+
+@each $key, $value in map.get($general-cfg, 'css-vars') {
+	$-prefixed-vars: map.set(
+		$-prefixed-vars, $key, string.unquote('--#{$css-var-prefix}#{$value}')
+	);
+}
+
+$general-cfg: map.set($general-cfg, 'css-vars', $-prefixed-vars);
+
+$var-gg: map.get($general-cfg, 'css-vars', 'gg');
+$var-gsfd: map.get($general-cfg, 'css-vars', 'gs-formula-diff');
+$var-gscc: map.get($general-cfg, 'css-vars', 'gs-columns-count');
+
+$base-border-box: map.get($general-cfg, 'generic-css', 'border-box');

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

@@ -0,0 +1,2 @@
+@forward 'general';
+@forward 'utils';