@mlut/core 2.3.1 → 2.5.0

package/README.md

@@ -18,7 +18,7 @@ When using this package, you will need to install Sass separately. We recommend
 This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
 
 ## Documentation ##
-Full documentation available [here](https://mlutcss.github.io/mlut/)
+Full documentation available [here](https://docs.mlut.style/)
 
 ## License ##
 MIT

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

@@ -71,6 +71,11 @@
 
 		@if list.length($fraction) > 1 {
 			$dividend: list.nth($fraction, 1);
+			$is-css-function: string.index($value, '(') and string.slice($value, -1) == ')';
+
+			@if $is-css-function {
+				@return $value;
+			}
 
 			@if map.get($data, 'negative') {
 				$dividend: '-' + $dividend;

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

@@ -22,20 +22,29 @@ $-directions: map.values(ml.$main-directions);
 
 @function gradient($values, $data: ()) {
 	$first-list: list.nth($values, 1);
+	$first-item: list.nth($first-list, 1);
+	$css-fn-name: map.get(
+		ml.$utils-db, 'utils', 'registry', map.get($data, 'name'), 'css-function'
+	);
 
-	@if list.index($-directions, list.nth($first-list, 1)) {
+	@if (
+		list.index($-directions, $first-item) and
+		string.index($css-fn-name, 'linear')
+	) {
 		$first-list: list.join(to, $first-list);
+	} @else if string.index($css-fn-name, 'conic') {
+		$is-first-item-calc:
+			meta.type-of($first-item) == 'string' and string.index($first-item, 'calc(');
+
+		@if (meta.type-of($first-item) == 'number' or $is-first-item-calc) {
+			$first-list: list.join(from, $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)
+		meta.get-function($css-fn-name, true),
+		list.set-nth($values, 1, $first-list),
 	);
 }
 

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

@@ -321,7 +321,8 @@
 // Usage:
 // ```scss
 //	@debug ml.uv('-Gdrl-b;r,black,#ff0'); // repeating-linear-gradient(to bottom right, black, #ff0)
-//	@debug ml.uv('-Gdl-50d,blue;3r,cc;80p'); // linear-gradient(50deg, blue 3rem, currentColor 80%)
+//	@debug ml.uv('-Msgl-50d,blue;3r,cc;80p'); // linear-gradient(-50deg, blue 3rem, currentColor 80%)
+//	@debug ml.uv('-Gdc45d,#000;0.5g,yellow'); // conic-gradient(from 45deg, #000 0.5grad, yellow)
 // ```
 //
 // Styleguide: settings.utils.config.conversion.gradient

package/dist/sass/tools/settings/common/_utils.scss

@@ -112,6 +112,20 @@ $-sizing-kw: (
 );
 
 $-bd-kw-links: ('border', 'line-style', 'line-width');
+$-radial-grad-kw: (
+	'position',
+	'radial-shape',
+	'ray-size',
+	'color-space',
+	'hue-interpolation',
+	'gradients',
+);
+$-conic-grad-kw: (
+	'position',
+	'color-space',
+	'hue-interpolation',
+	'gradients',
+);
 
 //stylelint-disable
 $utils-db: (
@@ -748,15 +762,7 @@ $utils-db: (
 			'Bgr': (
 				'properties': background-repeat,
 				'multi-list-separator': ml.$tULs1,
-				'keywords': (
-					'': no-repeat,
-					'nr': no-repeat,
-					'rx': repeat-x,
-					'ry': repeat-y,
-					'r': repeat,
-					's': space,
-					'rn': round,
-				)
+				'keywords': 'repeat-style',
 			),
 			'Bgp': (
 				'properties': background-position,
@@ -766,10 +772,7 @@ $utils-db: (
 			'Bgs': (
 				'properties': background-size,
 				'multi-list-separator': ml.$tULs1,
-				'keywords': (
-					'ct': contain,
-					'cv': cover,
-				),
+				'keywords': 'bg-size',
 			),
 			'Bga': (
 				'properties': background-attachment,
@@ -815,6 +818,38 @@ $utils-db: (
 				'multi-list-separator': ml.$tULs1,
 				'keywords': ('position', 'gradients'),
 			),
+			'-Gdrd': (
+				'properties': background-image,
+				'transformer': 'gradient',
+				'css-function': 'radial-gradient',
+				'conversion': 'gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': $-radial-grad-kw,
+			),
+			'-Gdrr': (
+				'properties': background-image,
+				'transformer': 'gradient',
+				'conversion': 'gradient',
+				'css-function': 'repeating-radial-gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': $-radial-grad-kw,
+			),
+			'-Gdc': (
+				'properties': background-image,
+				'transformer': 'gradient',
+				'css-function': 'conic-gradient',
+				'conversion': 'gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': $-conic-grad-kw,
+			),
+			'-Gdrc': (
+				'properties': background-image,
+				'transformer': 'gradient',
+				'css-function': 'repeating-conic-gradient',
+				'conversion': 'gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': $-conic-grad-kw,
+			),
 
 			// TRANSFORM
 			'Tf': (
@@ -1211,6 +1246,115 @@ $utils-db: (
 				'conversion': 'num-percent',
 			),
 
+			// MASK
+			'Ms': (
+				'properties': mask,
+				'multi-list-separator': ml.$tULs1,
+			),
+			'Msi': (
+				'properties': mask-image,
+				'multi-list-separator': ml.$tULs1,
+			),
+			'Mscl': (
+				'properties': mask-clip,
+				'multi-list-separator': ml.$tULs1,
+				'keywords': ('box-ext', 'mask-clip'),
+			),
+			'Mso': (
+				'properties': mask-origin,
+				'multi-list-separator': ml.$tULs1,
+				'keywords': 'box-ext',
+			),
+			'Msc': (
+				'properties': mask-composite,
+				'multi-list-separator': ml.$tULs1,
+				'keywords': (
+					'a': add,
+					's': subtract,
+					'i': intersect,
+					'e': exclude,
+				),
+			),
+			'Msm': (
+				'properties': mask-mode,
+				'multi-list-separator': ml.$tULs1,
+				'keywords': (
+					'a': alpha,
+					'l': luminance,
+					'ms': match-source,
+				),
+			),
+			'Msp': (
+				'properties': mask-position,
+				'multi-list-separator': ml.$tULs1,
+				'keywords': 'position',
+			),
+			'Msr': (
+				'properties': mask-repeat,
+				'multi-list-separator': ml.$tULs1,
+				'keywords': 'repeat-style',
+			),
+			'Mss': (
+				'properties': mask-size,
+				'multi-list-separator': ml.$tULs1,
+				'keywords': 'bg-size',
+			),
+			'Mst': (
+				'properties': mask-type,
+				'keywords': (
+					'a': alpha,
+					'l': luminance,
+				),
+			),
+			'-Msgl': (
+				'properties': mask-image,
+				'transformer': 'gradient',
+				'css-function': 'linear-gradient',
+				'conversion': 'gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': ('position', 'gradients'),
+			),
+			'-Msgrpl': (
+				'properties': mask-image,
+				'transformer': 'gradient',
+				'conversion': 'gradient',
+				'css-function': 'repeating-linear-gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': ('position', 'gradients'),
+			),
+			'-Msgr': (
+				'properties': mask-image,
+				'transformer': 'gradient',
+				'css-function': 'radial-gradient',
+				'conversion': 'gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': $-radial-grad-kw,
+			),
+			'-Msgrpr': (
+				'properties': mask-image,
+				'transformer': 'gradient',
+				'conversion': 'gradient',
+				'css-function': 'repeating-radial-gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': $-radial-grad-kw,
+			),
+			'-Msgc': (
+				'properties': mask-image,
+				'transformer': 'gradient',
+				'css-function': 'conic-gradient',
+				'conversion': 'gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': $-conic-grad-kw,
+			),
+			'-Msgrpc': (
+				'properties': mask-image,
+				'transformer': 'gradient',
+				'css-function': 'repeating-conic-gradient',
+				'conversion': 'gradient',
+				'multi-list-separator': ml.$tULs1,
+				'keywords': $-conic-grad-kw,
+			),
+
 			// BORDER
 			'Bd': (
 				'properties': border,
@@ -1756,8 +1900,14 @@ $utils-db: (
 				'bb': border-box,
 				'cb': content-box,
 				'pb': padding-box,
+				'fb': fill-box,
+				'sb': stroke-box,
+				'vb': view-box,
 				't': text,
 			),
+			'mask-clip': (
+				'nc': no-clip,
+			),
 			'blend-mode': (
 				'n': normal,
 				'm': multiply,
@@ -1831,6 +1981,42 @@ $utils-db: (
 					fill, outline-color, stroke,
 				),
 			),
+			'radial-shape': (
+				// c - center, cc - currentColor
+				'cr': circle,
+				'el': ellipse,
+			),
+			'ray-size': (
+				'css': closest-side,
+				'csc': closest-corner,
+				'fts': farthest-side,
+				'ftc': farthest-corner,
+				'sd': sides,
+			),
+			'color-space': (
+				'dpp': display-p3,
+				'dppl': display-p3-linear,
+				'ppr': prophoto-rgb,
+			),
+			'hue-interpolation': (
+				'sr': shorter,
+				'lr': longer,
+				'ic': increasing,
+				'dc': decreasing,
+			),
+			'repeat-style': (
+				'': no-repeat,
+				'nr': no-repeat,
+				'rx': repeat-x,
+				'ry': repeat-y,
+				'r': repeat,
+				's': space,
+				'rn': round,
+			),
+			'bg-size': (
+				'ct': contain,
+				'cv': cover,
+			),
 			'sizing': $-sizing-kw,
 		),
 	),

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@mlut/core",
-	"version": "2.3.1",
-	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
+	"version": "2.5.0",
+	"description": "Tailwind CSS alternative for custom websites and creative coding",
 	"author": "mr150",
 	"type": "module",
 	"license": "MIT",