@material-tailwind/html - npm Package Compare versions

Comparing version 2.2.4 to 2.2.5

package.json

 {
   "name": "@material-tailwind/html",
   "homepage": "https://material-tailwind.com",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "@material-tailwind/html is an easy-to-use components library for Tailwind CSS inspired by Material Design.",
@@ -6,0 +6,0 @@ "repository": "https://github.com/creativetimofficial/material-tailwind",

README.md

@@ -11,3 +11,3 @@ <a href="https://www.material-tailwind.com">
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-2.2.3-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.2.5-blue.svg" alt="Version" />
   </a>
@@ -14,0 +14,0 @@ <a href="https://www.material-tailwind.com/docs/html/license">

scripts/ripple.js

 function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor}var Ripple=function(){"use strict";function Ripple(){_class_call_check(this,Ripple);this.x=0;this.y=0;this.z=0}_create_class(Ripple,[{key:"findFurthestPoint",value:function findFurthestPoint(clickPointX,elementWidth,offsetX,clickPointY,elementHeight,offsetY){this.x=clickPointX-offsetX>elementWidth/2?0:elementWidth;this.y=clickPointY-offsetY>elementHeight/2?0:elementHeight;this.z=Math.hypot(this.x-(clickPointX-offsetX),this.y-(clickPointY-offsetY));return this.z}},{key:"appyStyles",value:function appyStyles(element,color,rect,radius,event){element.classList.add("ripple");element.style.backgroundColor=color==="dark"?"rgba(0,0,0, 0.2)":"rgba(255,255,255, 0.3)";element.style.borderRadius="50%";element.style.pointerEvents="none";element.style.position="absolute";element.style.left=event.clientX-rect.left-radius+"px";element.style.top=event.clientY-rect.top-radius+"px";element.style.width=element.style.height=radius*2+"px"}},{key:"applyAnimation",value:function applyAnimation(element){element.animate([{transform:"scale(0)",opacity:1},{transform:"scale(1.5)",opacity:0}],{duration:500,easing:"linear"})}},{key:"create",value:function create(event,color){var element=event.currentTarget;element.style.position="relative";element.style.overflow="hidden";var rect=element.getBoundingClientRect();var radius=this.findFurthestPoint(event.clientX,element.offsetWidth,rect.left,event.clientY,element.offsetHeight,rect.top);var circle=document.createElement("span");this.appyStyles(circle,color,rect,radius,event);this.applyAnimation(circle);element.appendChild(circle);setTimeout(function(){return circle.remove()},500)}}]);return Ripple}();(function setRipple(){var ripple=new Ripple;var lightRipple=document.querySelectorAll('[data-ripple-light="true"]');var darkRipple=document.querySelectorAll('[data-ripple-dark="true"]');if(lightRipple){var _iteratorNormalCompletion=true,_didIteratorError=false,_iteratorError=undefined;try{for(var _iterator=lightRipple[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var element=_step.value;element.addEventListener("mouseup",function(event){ripple.create(event,"light")})}}catch(err){_didIteratorError=true;_iteratorError=err}finally{try{if(!_iteratorNormalCompletion&&_iterator.return!=null){_iterator.return()}}finally{if(_didIteratorError){throw _iteratorError}}}}if(darkRipple){var _iteratorNormalCompletion1=true,_didIteratorError1=false,_iteratorError1=undefined;try{for(var _iterator1=darkRipple[Symbol.iterator](),_step1;!(_iteratorNormalCompletion1=(_step1=_iterator1.next()).done);_iteratorNormalCompletion1=true){var element1=_step1.value;element1.addEventListener("mouseup",function(event){ripple.create(event,"dark")})}}catch(err){_didIteratorError1=true;_iteratorError1=err}finally{try{if(!_iteratorNormalCompletion1&&_iterator1.return!=null){_iterator1.return()}}finally{if(_didIteratorError1){throw _iteratorError1}}}}})();
-
-//# sourceMappingURL=ripple.js.map

theme/base/colors.js

@@ -7,2 +7,28 @@ const colors = {
   black: "#000000",
+  "neutral": {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a",
+  },
+  "slate": {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617",
+  },
   "blue-gray": {
@@ -9,0 +35,0 @@ 50: "#eceff1",

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

Worsened metrics

Total package byte prevSize

53715

decreased by-9.02%

Number of package files

16

decreased by-23.81%

Lines of code

354

decreased by-44.08%

No dependency changes