@granularjs/ui 0.1.3 → 0.2.0

package/dist/granular-ui.min.js

@@ -392,6 +392,11 @@ var zr="granular-ui-styles",It=new URL("./fonts/Poppins-400.ttf",import.meta.url
   --g-ui-primary-strong: var(--g-ui-primary-active);
   --g-ui-shadow: var(--g-ui-shadow-md);
   
+  /* Overlays (themeable) */
+  --g-ui-overlay-light: rgba(0,0,0,0.4);
+  --g-ui-overlay-normal: rgba(0,0,0,0.6);
+  --g-ui-overlay-dark: rgba(0,0,0,0.8);
+
   /* Misc */
   --g-ui-radius: 4px;
   --g-ui-font: 'Inter', 'Arimo', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -612,6 +617,13 @@ var zr="granular-ui-styles",It=new URL("./fonts/Poppins-400.ttf",import.meta.url
   --g-ui-shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   --g-ui-shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
 }
+  
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -985,15 +997,15 @@ body {
 .g-ui-modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.6);
+  background: var(--g-ui-overlay-normal);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 999;
 }
-.g-ui-modal-overlay-light { background: rgba(0,0,0,0.4); }
-.g-ui-modal-overlay-normal { background: rgba(0,0,0,0.6); }
-.g-ui-modal-overlay-dark { background: rgba(0,0,0,0.8); }
+.g-ui-modal-overlay-light { background: var(--g-ui-overlay-light); }
+.g-ui-modal-overlay-normal { background: var(--g-ui-overlay-normal); }
+.g-ui-modal-overlay-dark { background: var(--g-ui-overlay-dark); }
 .g-ui-modal-centered { align-items: center; justify-content: center; }
 .g-ui-modal-top { align-items: flex-start; justify-content: center; padding-top: var(--g-ui-space-40); }
 .g-ui-modal-position-top-left { align-items: flex-start; justify-content: flex-start; padding: var(--g-ui-space-40) var(--g-ui-space-20); }
@@ -1142,7 +1154,7 @@ body {
   width: var(--g-ui-switch-thumb, 14px);
   height: var(--g-ui-switch-thumb, 14px);
   border-radius: 50%;
-  background: #fff;
+  background: var(--g-ui-white);
   top: var(--g-ui-switch-offset, 2px);
   left: var(--g-ui-switch-offset, 2px);
   transition: transform .15s ease;
@@ -1410,9 +1422,9 @@ body {
   inset: 0;
   z-index: 998;
 }
-.g-ui-drawer-overlay-normal { background: rgba(0,0,0,0.6); }
-.g-ui-drawer-overlay-light { background: rgba(0,0,0,0.4); }
-.g-ui-drawer-overlay-dark { background: rgba(0,0,0,0.8); }
+.g-ui-drawer-overlay-normal { background: var(--g-ui-overlay-normal); }
+.g-ui-drawer-overlay-light { background: var(--g-ui-overlay-light); }
+.g-ui-drawer-overlay-dark { background: var(--g-ui-overlay-dark); }
 .g-ui-drawer {
   position: fixed;
   top: 0;
@@ -3140,7 +3152,7 @@ body {
 .g-ui-loading-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(15,17,21,0.6);
+  background: var(--g-ui-overlay-normal);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3660,7 +3672,7 @@ body {
   position: fixed;
   inset: 0;
   z-index: 998;
-  background: rgba(0,0,0,0.6);
+  background: var(--g-ui-overlay-normal);
   opacity: 0;
   pointer-events: none;
   transition: opacity .22s ease, backdrop-filter .22s ease;