@apify/ui-library 1.93.2 → 1.93.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.93.2",
+    "version": "1.93.4",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.17.0",
+        "@apify/ui-icons": "^1.17.1",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -66,5 +66,5 @@
         "src",
         "style"
     ],
-    "gitHead": "a106d70b85cbfe603b87aa3d3e94ae3c0db6665c"
+    "gitHead": "e724c8f2160e51f05b1ab175697941d328c56068"
 }

package/src/components/button.tsx

@@ -217,7 +217,7 @@ export const getButtonSizeStyles = (size: ButtonSize = 'medium') => {
     `;
 };
 
-const StyledButton = styled(Box)<WithTransientProps<TransientButtonProps>>`
+const StyledButton = styled(Box)<WithTransientProps<Required<TransientButtonProps>>>`
     /* Basic positioning */
     display: inline-flex;
     align-items: center;
@@ -250,8 +250,8 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
         as,
         children,
         size = 'medium',
-        color,
-        variant,
+        color = 'default',
+        variant = 'primary',
         LeftIcon,
         RightIcon,
         onClick,

package/src/design_system/colors/Colors.mdx

@@ -0,0 +1,31 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+import { lightTheme } from './generated/colors_theme.light.ts';
+import { darkTheme } from './generated/colors_theme.dark.ts';
+
+<Meta title="Design Tokens/Colors" />
+
+# Colors
+
+<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
+  <div>
+    <h2>Light Theme</h2>
+    <ColorPalette>
+      {Object.entries(lightTheme)
+        .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
+        .map(([name, value]) => (
+          <ColorItem key={name} title={name} subtitle={value} colors={{ color: value }} />
+        ))}
+    </ColorPalette>
+  </div>
+  <div>
+    <h2>Dark Theme</h2>
+    <ColorPalette>
+      {Object.entries(darkTheme)
+        .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
+        .map(([name, value]) => (
+          <ColorItem key={name} title={name} subtitle={value} colors={{ color: value }} />
+        ))}
+    </ColorPalette>
+  </div>
+</div>
+

package/dist/src/design_system/colors/colors.stories.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=colors.stories.d.ts.map

package/dist/src/design_system/colors/colors.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.stories.d.ts","sourceRoot":"","sources":["../../../../src/design_system/colors/colors.stories.tsx"],"names":[],"mappings":";;;AAEA,wBAEE;AAUF,eAAO,MAAM,OAAO,+CAMnB,CAAC"}

package/dist/src/design_system/colors/colors.stories.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-export default {
-    title: 'Design Tokens/Colors',
-};
-const Grid = styled.div `
-    padding: 32px;
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
-    gap: 32px 16px;
-`;
-export const Default = () => {
-    return (_jsx(Grid, { children: "TODO COLORS PALETTE" }));
-};
-//# sourceMappingURL=colors.stories.js.map

package/dist/src/design_system/colors/colors.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.stories.js","sourceRoot":"","sources":["../../../../src/design_system/colors/colors.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,eAAe;IACX,KAAK,EAAE,sBAAsB;CAChC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMtB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IACxB,OAAO,CACH,KAAC,IAAI,sCAEE,CACV,CAAC;AACN,CAAC,CAAC"}

package/src/design_system/colors/colors.stories.tsx

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-export default {
-    title: 'Design Tokens/Colors',
-};
-
-const Grid = styled.div`
-    padding: 32px;
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
-    gap: 32px 16px;
-`;
-
-export const Default = () => {
-    return (
-        <Grid>
-         TODO COLORS PALETTE
-        </Grid>
-    );
-};