@bobbykim/manguito-theme 0.27.0 → 0.28.0

package/dist/mcl-theme-v4.css

@@ -48,6 +48,30 @@
   --breakpoint-2xl: 96rem; /* 1536px */
 }
 
+/* property for background opacity class which has been deprecated with tailwind v4 */
+@property --mcl-bg-opacity {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --mcl-outline-opacity {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --mcl-gm-shadow {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 10;
+}
+
+@property --mcl-depth-color {
+  syntax: '<color>';
+  inherits: false;
+}
+
 /* Base Styles - replaces addBase from your plugin */
 @layer base {
   body {
@@ -520,6 +544,21 @@
     border-bottom-color: transparent;
     border-right-color: theme(--color-dark-3);
   }
+  .mcl-glassmorphism {
+    box-shadow:
+    /* base shadow */
+      0 8px 32px --alpha(theme(--color-dark-4) / 10%),
+      /* highlight edges */ inset 0 1px 0
+        --alpha(var(--mcl-depth-color, theme(--color-light-1)) / 50%),
+      inset 0 -1px 0
+        --alpha(var(--mcl-depth-color, theme(--color-light-1)) / 10%),
+      /* dynamic glow */ inset 0 0 calc(var(--mcl-gm-shadow) * 2px)
+        calc(var(--mcl-gm-shadow) * 1px)
+        --alpha(
+          var(--mcl-depth-color, theme(--color-light-1)) /
+            calc(var(--mcl-gm-shadow) / 10 * 100%)
+        );
+  }
 }
 
 /* set variable for color-specific button variants */
@@ -537,26 +576,30 @@
   --mcl-link-color: --value(--color-*);
 }
 
-/* background opacity class which has been deprecated with tailwind v4 */
 @utility bg-opacity-* {
-  --mcl-bg-opacity: calc(--value(integer) / 100);
+  --mcl-bg-opacity: calc(--value(integer) * 1%);
 }
 
 @utility bg-* {
-  background-color: --alpha(
-    --value(--color-*) / calc(var(--mcl-bg-opacity, 1) * 100%)
-  );
+  background-color: --alpha(--value(--color-*) / var(--mcl-bg-opacity));
 }
 
 /* new outline opacity class which will replace deprecated ring-opacity class */
 @utility outline-opacity-* {
-  --mcl-outline-opacity: calc(--value(integer) / 100);
+  --mcl-outline-opacity: calc(--value(integer) * 1%);
 }
 
 @utility outline-* {
-  outline-color: --alpha(
-    --value(--color-*) / calc(var(--mcl-outline-opacity, 1) * 100%)
-  );
+  outline-color: --alpha(--value(--color-*) / var(--mcl-outline-opacity));
+}
+
+/* utility classes for glassmorphism depth */
+@utility mcl-glass-* {
+  --mcl-depth-color: --value(--color-*);
+}
+
+@utility mcl-depth-* {
+  --mcl-gm-shadow: --value(integer);
 }
 
 /* Utility Classes - replaces addUtilities from your plugin */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
   "type": "module",
   "publishConfig": {
@@ -60,5 +60,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "cb87d8ea3ce5b3ae8d639237dbde742daac94390"
+  "gitHead": "c2d96267d7ae249fba7d58cdf8a69cbba218567e"
 }