sdaia-ui 1.5.0 → 1.6.0

package/dist/index.js

@@ -129,6 +129,65 @@ var DEFAULT_UTILS_DIR = "src/lib";
 var TAILWIND_IMPORT = '@import "tailwindcss";';
 var TOKENS_IMPORT = '@import "@sdaia-ds/tokens/css";';
 var DARK_VARIANT_RULE = "@custom-variant dark (&:where(.dark, .dark *, .theme-dark, .theme-dark *));";
+var GLASS_SURFACE_RULE = `/* \u2500\u2500 Liquid-glass surface \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Reusable translucent "glass" material, applied via \`surface="glass"\`
+ * on supporting components (DatePicker first, more to follow). The manual
+ * bevel box-shadow + backdrop blur come from Figma
+ * (Background/background-liquid-glass). Single source of truth: any element
+ * carrying \`.glass-surface\` adapts to light & dark scopes automatically
+ * because the bg + bevel are driven by theme-aware custom properties. */
+:root {
+  --ds-glass-blur: 5.4px;
+
+  --ds-glass-bg-light: rgba(255, 255, 255, 0.5);
+  --ds-glass-bg-dark: rgba(38, 38, 38, 0.45);
+
+  --ds-glass-shadow-light:
+    0 0 35.294px 0 #f2f2f2 inset,
+    0 0 6.618px 0 rgba(255, 255, 255, 0.5) inset,
+    -2.206px -2.206px 1.103px -2.206px #fff inset,
+    2.206px 2.206px 1.103px -2.206px #fff inset,
+    -2.206px -2.206px 0 -1.103px #262626 inset,
+    2.206px 2.206px 0 -1.103px #333 inset,
+    0 4px 4px 0 rgba(0, 0, 0, 0.05);
+  --ds-glass-shadow-dark:
+    0 0 35.294px 0 rgba(255, 255, 255, 0.04) inset,
+    0 0 6.618px 0 rgba(255, 255, 255, 0.06) inset,
+    -2.206px -2.206px 1.103px -2.206px rgba(255, 255, 255, 0.2) inset,
+    2.206px 2.206px 1.103px -2.206px rgba(255, 255, 255, 0.2) inset,
+    -2.206px -2.206px 0 -1.103px rgba(0, 0, 0, 0.7) inset,
+    2.206px 2.206px 0 -1.103px rgba(0, 0, 0, 0.55) inset,
+    0 4px 4px 0 rgba(0, 0, 0, 0.3);
+
+  --ds-glass-bg: var(--ds-glass-bg-light);
+  --ds-glass-shadow: var(--ds-glass-shadow-light);
+}
+
+.dark,
+.theme-dark,
+.preview-theme-dark {
+  --ds-glass-bg: var(--ds-glass-bg-dark);
+  --ds-glass-shadow: var(--ds-glass-shadow-dark);
+}
+
+.preview-theme-light {
+  --ds-glass-bg: var(--ds-glass-bg-light);
+  --ds-glass-shadow: var(--ds-glass-shadow-light);
+}
+
+.glass-surface {
+  background: var(--ds-glass-bg);
+  box-shadow: var(--ds-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
+  backdrop-filter: blur(var(--ds-glass-blur));
+}
+
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  :root {
+    --ds-glass-bg-light: rgba(255, 255, 255, 0.88);
+    --ds-glass-bg-dark: rgba(38, 38, 38, 0.92);
+  }
+}`;
 function isTailwindInstalled() {
   const pkgJsonPath = path3.resolve(process.cwd(), "package.json");
   if (!fs3.existsSync(pkgJsonPath)) return false;
@@ -185,6 +244,16 @@ ${content}`);
   }
   return true;
 }
+function ensureGlassSurfaceRule(cssFilePath) {
+  const content = fs3.readFileSync(cssFilePath, "utf-8");
+  if (/\.glass-surface\s*\{/.test(content)) return false;
+  const trimmed = content.replace(/\s*$/, "");
+  fs3.writeFileSync(cssFilePath, `${trimmed}
+
+${GLASS_SURFACE_RULE}
+`);
+  return true;
+}
 async function init() {
   logger.break();
   logger.info("Initializing SDAIA Design System in your project...");
@@ -341,11 +410,21 @@ export default config;
     } else {
       logger.info("Dark variant rule already present in CSS file");
     }
+    const addedGlass = ensureGlassSurfaceRule(cssFilePath);
+    if (addedGlass) {
+      logger.success(
+        `Added liquid-glass surface styles to ${path3.relative(process.cwd(), cssFilePath)}`
+      );
+    } else {
+      logger.info("Liquid-glass surface styles already present in CSS file");
+    }
   } else {
     logger.warn(
       `Could not find a CSS entry file. Add these to your main CSS file:
   ${TOKENS_IMPORT}
-  ${DARK_VARIANT_RULE}`
+  ${DARK_VARIANT_RULE}
+
+${GLASS_SURFACE_RULE}`
     );
   }
   const utilsPath = path3.resolve(process.cwd(), config.utilsDir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdaia-ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "CLI for installing SDAIA Design System components into your project",
   "type": "module",
   "bin": {