postcss-preset-mantine - npm Package Compare versions

Comparing version 1.11.1 to 1.12.0

dist/preset.js

@@ -5,4 +5,6 @@ "use strict";
 const remEm = require('./postcss-rem-em');
+const colorMixAlpha = require('./postcss-color-mix');
 const lightDark = require('./postcss-light-dark');
 const converters = require('./converters');
+const theme = require('./postcss-mantine-theme');
 function colorSchemeMixin(colorScheme) {
@@ -69,3 +71,5 @@ return {
             lightDark(),
+            theme(),
             nested(),
+            colorMixAlpha(),
             remEm(),
@@ -72,0 +76,0 @@ mixins({

package.json

 {
   "name": "postcss-preset-mantine",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "PostCSS preset for Mantine (7.0+) applications",
@@ -49,3 +49,4 @@ "main": "dist/preset.js",
   "author": "[e-mail]",
-  "license": "MIT"
-}
+  "license": "MIT",
+  "packageManager": "yarn@4.0.2"
+}

README.md

@@ -209,2 +209,42 @@ # postcss-preset-mantine
 
+## alpha function
+
+`alpha` function can be used to add alpha channel to color. Note that it uses [color-mix](https://caniuse.com/mdn-css_types_color_color-mix) which is not supported in some older browsers.
+
+```scss
+.demo {
+  color: alpha(var(--mantine-color-red-4), 0.5);
+  border: 1px solid alpha(#ffc, 0.2);
+}
+```
+
+Will be transformed to:
+
+```scss
+.demo {
+  color: color-mix(in srgb, var(--mantine-color-red-4), transparent 50%);
+  border: 1px solid color-mix(in srgb, #ffc, transparent 80%);
+}
+```
+
+## lighten and darken functions
+
+`lighten` and `darken` functions work similar to `alpha` function, but instead of adding alpha channel they add white or black color to the color with [color-mix](https://caniuse.com/mdn-css_types_color_color-mix).
+
+```scss
+.demo {
+  color: lighten(var(--mantine-color-red-4), 0.5);
+  border: 1px solid darken(#ffc, 0.2);
+}
+```
+
+Will be transformed to:
+
+```scss
+.demo {
+  color: color-mix(in srgb, var(--mantine-color-red-4), white 50%);
+  border: 1px solid color-mix(in srgb, #ffc, black 20%);
+}
+```
+
 ## hover mixin
@@ -211,0 +251,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31978

increased by56.3%

Number of package files

16

increased by33.33%

Lines of code

455

increased by86.48%

Number of lines in readme file

355

increased by12.7%

No dependency changes