@projectdiscoveryio/design-system 1.0.0 → 1.0.1

package/dist/fallback.css

@@ -142,10 +142,14 @@ body {
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  background-color: transparent;
+input:-webkit-autofill:active,
+input:-internal-autofill-selected {
+  background-color: var(--pd-background-primary) !important;
+  background-image: none !important;
   transition: background-color 5000s ease-in-out 0s;
-  -webkit-text-fill-color: #ffffff;
+  -webkit-text-fill-color: var(--pd-content-primary) !important;
+  color: var(--pd-content-primary) !important;
+  box-shadow: 0 0 0px 1000px var(--pd-background-primary) inset !important;
 }
 
 @layer base {
@@ -163,6 +167,9 @@ input:-webkit-autofill:active {
   textarea::placeholder {
     font-size: 1.25rem
   }
+  input,textarea{
+    font-size: 1.25rem !important;
+  }
 }
 
 .monaco-editor {
@@ -215,6 +222,7 @@ input:-webkit-autofill:active {
 
     /* Legacy variables mapped to PD tokens for backward compatibility */
     --background: var(--pd-background-primary);
+    --background-primary: var(--pd-background-primary);
     --foreground: var(--pd-content-primary);
     --card: var(--pd-background-secondary);
     --card-foreground: var(--pd-content-primary);
@@ -822,3 +830,16 @@ input:-webkit-autofill:active {
 .ant-picker-focused {
   background: var(--background-primary) !important;
 }
+/* Skeleton shimmer animation */
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(50%);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 1.5s ease-in-out infinite;
+}

package/dist/index.cjs

@@ -1124,8 +1124,11 @@ function ThemeProvider({
     return initialMode;
   };
   const [mode, setMode] = React.useState(getInitialMode);
+  React.useEffect(() => {
+    setMode(initialMode);
+  }, [initialMode]);
   const [resolvedMode, setResolvedMode] = React.useState(
-    () => resolveThemeMode(mode)
+    () => resolveThemeMode(initialMode)
   );
   React.useEffect(() => {
     if (mode !== "system" || typeof window === "undefined" || !window.matchMedia) {
@@ -1231,31 +1234,6 @@ function ThemeProvider({
     } else {
       body.classList.remove("pd-dark");
     }
-    if (mode === "system") {
-      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-      const handleSystemChange = (e) => {
-        const systemIsDark = e.matches;
-        if (systemIsDark) {
-          body.classList.add("pd-dark");
-        } else {
-          body.classList.remove("pd-dark");
-        }
-      };
-      handleSystemChange(mediaQuery);
-      if (mediaQuery.addEventListener) {
-        mediaQuery.addEventListener("change", handleSystemChange);
-        return () => {
-          mediaQuery.removeEventListener("change", handleSystemChange);
-          body.classList.remove("pd-root", "pd-dark");
-        };
-      } else {
-        mediaQuery.addListener(handleSystemChange);
-        return () => {
-          mediaQuery.removeListener(handleSystemChange);
-          body.classList.remove("pd-root", "pd-dark");
-        };
-      }
-    }
     return () => {
       body.classList.remove("pd-root", "pd-dark");
     };