@projectdiscoveryio/design-system 1.0.0 → 1.0.2

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

@@ -144,7 +144,7 @@ function getAvailableIconNames() {
   );
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "pd-inline-flex pd-items-center pd-justify-center pd-font-medium pd-transition-colors pd-focus-visible:outline-none pd-focus-visible:ring-2 pd-focus-visible:ring-[var(--pd-border-blue)] pd-focus-visible:ring-offset-2 pd-disabled:pointer-events-none pd-disabled:cursor-not-allowed pd-disabled:hover:pd-bg-[inherit] pd-disabled:hover:pd-text-[inherit] pd-disabled:hover:pd-border-[inherit] pd-disabled:active:pd-bg-[inherit] pd-disabled:active:pd-text-[inherit] pd-disabled:active:pd-border-[inherit] [font-family:var(--pd-font-sans,Geist,sans-serif)] [gap:var(--pd-button-gap)] [border-radius:var(--pd-radius-button)] pd-shadow-none",
+  "pd-inline-flex pd-items-center pd-justify-center pd-font-medium pd-transition-colors pd-focus-visible:outline-none pd-focus-visible:ring-2 pd-focus-visible:ring-[var(--pd-border-blue)] pd-focus-visible:ring-offset-2 pd-disabled:pointer-events-none pd-disabled:cursor-not-allowed pd-disabled:hover:pd-bg-[inherit] pd-disabled:hover:pd-text-[inherit] pd-disabled:hover:pd-border-[inherit] pd-disabled:active:pd-bg-[inherit] pd-disabled:active:pd-text-[inherit] pd-disabled:active:pd-border-[inherit] [font-family:var(--pd-font-sans,Geist,sans-serif)] [gap:var(--pd-button-gap)] [border-radius:var(--pd-radius-button)] [box-sizing:border-box] pd-shadow-none",
   {
     variants: {
       variant: {
@@ -161,9 +161,9 @@ var buttonVariants = classVarianceAuthority.cva(
         neutral: ""
       },
       size: {
-        sm: "[padding-top:var(--pd-button-padding-sm-vertical)] [padding-bottom:var(--pd-button-padding-sm-vertical)] [padding-left:var(--pd-button-padding-sm-horizontal)] [padding-right:var(--pd-button-padding-sm-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-sm)] [letter-spacing:var(--pd-button-letter-spacing)]",
-        md: "[padding-top:var(--pd-button-padding-md-vertical)] [padding-bottom:var(--pd-button-padding-md-vertical)] [padding-left:var(--pd-button-padding-md-horizontal)] [padding-right:var(--pd-button-padding-md-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-md)] [letter-spacing:var(--pd-button-letter-spacing)]",
-        lg: "[padding-top:var(--pd-button-padding-lg-vertical)] [padding-bottom:var(--pd-button-padding-lg-vertical)] [padding-left:var(--pd-button-padding-lg-horizontal)] [padding-right:var(--pd-button-padding-lg-horizontal)] pd-text-base [line-height:var(--pd-button-line-height-lg)] [letter-spacing:var(--pd-button-letter-spacing)]"
+        sm: "[height:var(--pd-button-height-sm)] [padding-top:var(--pd-button-padding-sm-vertical)] [padding-bottom:var(--pd-button-padding-sm-vertical)] [padding-left:var(--pd-button-padding-sm-horizontal)] [padding-right:var(--pd-button-padding-sm-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-sm)] [letter-spacing:var(--pd-button-letter-spacing)]",
+        md: "[height:var(--pd-button-height-md)] [padding-top:var(--pd-button-padding-md-vertical)] [padding-bottom:var(--pd-button-padding-md-vertical)] [padding-left:var(--pd-button-padding-md-horizontal)] [padding-right:var(--pd-button-padding-md-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-md)] [letter-spacing:var(--pd-button-letter-spacing)]",
+        lg: "[height:var(--pd-button-height-lg)] [padding-top:var(--pd-button-padding-lg-vertical)] [padding-bottom:var(--pd-button-padding-lg-vertical)] [padding-left:var(--pd-button-padding-lg-horizontal)] [padding-right:var(--pd-button-padding-lg-horizontal)] pd-text-base [line-height:var(--pd-button-line-height-lg)] [letter-spacing:var(--pd-button-letter-spacing)]"
       }
     },
     compoundVariants: [
@@ -359,8 +359,8 @@ function renderButtonContent({
   variant,
   intent
 }) {
-  const iconSizeClass = size === "sm" ? "pd-h-3 pd-w-3" : size === "lg" ? "pd-h-5 pd-w-5" : "pd-h-4 pd-w-4";
-  const spinnerSizeClass = size === "sm" ? "pd-h-3 pd-w-3" : size === "lg" ? "pd-h-5 pd-w-5" : "pd-h-4 pd-w-4";
+  const iconSizeClass = size === "sm" ? "pd-h-4 pd-w-4" : size === "lg" ? "pd-h-6 pd-w-6" : "pd-h-5 pd-w-5";
+  const spinnerSizeClass = size === "sm" ? "pd-h-4 pd-w-4" : size === "lg" ? "pd-h-6 pd-w-6" : "pd-h-5 pd-w-5";
   const getLoadingTextColor = () => {
     if (variant === "primary" && intent === "primary") {
       return "pd-text-[var(--pd-content-secondary)]";
@@ -719,33 +719,40 @@ var button = {
   padding: {
     sm: {
       vertical: "0.5em",
-      // 8px
-      horizontal: "0.75em"
-      // 12px
+      // 6px
+      horizontal: "1em"
+      // 12px 
     },
     md: {
-      vertical: "0.625em",
+      vertical: "0.8333em",
       // 10px 
-      horizontal: "1em"
+      horizontal: "1.3333em"
       // 16px 
     },
     lg: {
       vertical: "0.75em",
-      // 12px
-      horizontal: "1.25em"
-      // 20px
+      // 12px (0.75 × 16px font-size) - 44px height (12px top + 20px line-height + 12px bottom)
+      horizontal: "1.5em"
+      // 24px (1.5 × 16px font-size)
     }
   },
   gap: "0.5em",
-  // 8px - gap between icon and text 
+  // 8px (0.5 × 16px) - gap between icon and text 
   lineHeight: {
     sm: "1.333em",
+    // 16px for 12px font-size (1.333 × 12px = 16px)
     md: "1.333em",
     // 16px for 12px font-size (1.333 × 12px = 16px)
-    lg: "1.333em"
+    lg: "1.25em"
+    // 20px for 16px font-size (1.25 × 16px = 20px) - exact whole pixels 
   },
-  letterSpacing: "0.00833em"
+  letterSpacing: "0.00833em",
   // 0.1px for 12px font
+  height: {
+    sm: "28px",
+    md: "36px",
+    lg: "44px"
+  }
 };
 var semanticTokens = {
   light: {
@@ -1124,8 +1131,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 +1241,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");
     };