@apify/ui-library 1.124.0 → 1.124.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.124.0",
+    "version": "1.124.2",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -17,6 +17,7 @@
         "build": "npm run clean && npm run compile",
         "clean": "rimraf ./dist",
         "compile": "tsc -p tsconfig.build.json",
+        "type-check": "tsc --noEmit",
         "generate-theme": "node src/codemods/generate_typograpy_tokens_files.mjs  && npm run lint:fix",
         "build-color-tokens": "node src/design_system/colors/build_color_tokens.js",
         "postpublish": "npm run clean"
@@ -26,7 +27,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.27.2",
+        "@apify/ui-icons": "^1.27.3",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -65,5 +66,5 @@
         "src",
         "style"
     ],
-    "gitHead": "ff2c20e23c4cf3a03725bd4b5f293d9f121174a3"
+    "gitHead": "c8c84eea89ee014b908267a67d8cc6395db18a60"
 }

package/src/components/button.tsx

@@ -59,6 +59,8 @@ type ButtonColorCombinations = {
 
             // hover state effects override
             hoverColor?: string,
+            // Optional gradient overlay on hover (e.g., for primaryBlack)
+            hoverGradient?: string,
 
             // active state effects override
             activeColor?: string,
@@ -104,7 +106,7 @@ export const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
             textColor: theme.color.neutral.textOnPrimary,
             backgroundColor: theme.color.primaryBlack.action,
             borderColor: theme.color.primaryBlack.action,
-            hoverColor: theme.color.primaryBlack.actionHover,
+            hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
             activeColor: theme.color.primaryBlack.actionActive,
         },
     },
@@ -138,7 +140,7 @@ export const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
             textColor: theme.color.neutral.textOnPrimary,
             backgroundColor: theme.color.primaryBlack.action,
             borderColor: theme.color.primaryBlack.action,
-            hoverColor: theme.color.primaryBlack.actionHover,
+            hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
             activeColor: theme.color.primaryBlack.actionActive,
         },
     },
@@ -169,7 +171,7 @@ export const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
             textColor: theme.color.neutral.textOnPrimary,
             backgroundColor: theme.color.primaryBlack.action,
             borderColor: theme.color.primaryBlack.action,
-            hoverColor: theme.color.primaryBlack.actionHover,
+            hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
             activeColor: theme.color.primaryBlack.actionActive,
         },
     },
@@ -221,6 +223,7 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         actionBorderColor,
         actionTextColor,
         hoverColor,
+        hoverGradient,
         activeColor,
         activeTextColor,
     } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
@@ -232,13 +235,20 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
 
         &:hover {
             color: ${actionTextColor || textColor};
-            background-color: ${hoverColor};
-            border-color: ${actionBorderColor || hoverColor};
+            ${hoverGradient
+        ? css`
+                    background-image: ${hoverGradient};
+                    background-color: ${backgroundColor};
+                `
+        : css`background-color: ${hoverColor};`
+}
+            border-color: ${actionBorderColor || (hoverGradient ? borderColor : hoverColor)};
         }
 
         &:active {
             color: ${activeTextColor || actionTextColor || textColor};
             background-color: ${activeColor};
+            ${hoverGradient && 'background-image: none;'}
             border-color: ${actionBorderColor || activeColor};
         }
 

package/src/components/icon_button.tsx

@@ -21,7 +21,20 @@ export const ICON_BUTTON_VARIANTS = {
 } as const;
 export type ICON_BUTTON_VARIANTS = ValueOf<typeof ICON_BUTTON_VARIANTS>;
 
-const iconButtonVariantStyle = {
+type IconButtonVariantStyle = {
+    backgroundColor: string;
+    backgroundHoverColor: string;
+    backgroundHoverGradient?: string;
+    backgroundActiveColor: string;
+    backgroundDisabledColor: string;
+    borderColor: string;
+    borderHoverColor: string;
+    borderActiveColor: string;
+    borderDisabledColor: string;
+    iconColor: string;
+};
+
+const iconButtonVariantStyle: Record<ICON_BUTTON_VARIANTS, IconButtonVariantStyle> = {
     [ICON_BUTTON_VARIANTS.DEFAULT]: {
         backgroundColor: 'transparent',
         backgroundHoverColor: theme.color.neutral.hover,
@@ -69,6 +82,7 @@ const iconButtonVariantStyle = {
     [ICON_BUTTON_VARIANTS.PRIMARY_BLACK]: {
         backgroundColor: theme.color.primaryBlack.action,
         backgroundHoverColor: theme.color.primaryBlack.actionHover,
+        backgroundHoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
         backgroundActiveColor: theme.color.primaryBlack.actionActive,
         backgroundDisabledColor: theme.color.neutral.disabled,
         borderColor: theme.color.primaryBlack.action,
@@ -77,7 +91,7 @@ const iconButtonVariantStyle = {
         borderDisabledColor: theme.color.neutral.disabled,
         iconColor: theme.color.neutral.textOnPrimary,
     },
-} satisfies Record<ICON_BUTTON_VARIANTS, unknown>;
+};
 
 type IconButtonSizeConfig = {
     iconSize: IconSize;
@@ -111,6 +125,7 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
     const {
         backgroundColor,
         backgroundHoverColor,
+        backgroundHoverGradient,
         backgroundActiveColor,
         backgroundDisabledColor,
         borderDisabledColor,
@@ -126,7 +141,13 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
         border-color: ${borderColor};
 
         &:hover {
-            background-color: ${backgroundHoverColor};
+            ${backgroundHoverGradient
+        ? css`
+                    background-image: ${backgroundHoverGradient};
+                    background-color: ${backgroundColor};
+                `
+        : css`background-color: ${backgroundHoverColor};`
+}
             border-color: ${borderHoverColor || borderColor};
             color: ${iconColor};
         }
@@ -137,6 +158,7 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
 
         &:active {
             background-color: ${backgroundActiveColor};
+            ${backgroundHoverGradient && 'background-image: none;'}
             border-color: ${borderActiveColor || backgroundActiveColor};
         }