@granularjs/ui 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granularjs/ui",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "90+ production-ready UI components for Granular. Dark/light themes, CSS variables, accessible, zero dependencies beyond @granularjs/core.",
   "type": "module",
   "main": "./dist/granular-ui.min.js",

package/src/theme/styles.js

@@ -409,6 +409,11 @@ const css = `
   --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;
@@ -629,6 +634,13 @@ const css = `
   --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;
@@ -1002,15 +1014,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); }
@@ -1159,7 +1171,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;
@@ -1427,9 +1439,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;
@@ -3157,7 +3169,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;
@@ -3677,7 +3689,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;