@clds/paper - npm Package Compare versions

Comparing version 0.53.5 to 0.56.0-beta.1

dist/Paper.d.ts

@@ -6,3 +6,3 @@ import { PaperProps } from './PaperProps.js';
  */
-declare const Paper: import("styled-components").StyledComponent<"div", any, PaperProps, never>;
+declare const Paper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, PaperProps, never>;
 export { Paper };

dist/Paper.js

@@ -12,7 +12,7 @@ import { default as styled, css } from 'styled-components';
   background-color: ${paperTheme.background};
-  box-shadow: ${depthVariant((variant) => variant.shadow)};
-  border-radius: ${radiusVariant((variant) => variant.radius)};
-  ${({ isPadded }) => isPadded &&
+  box-shadow: ${(props) => depthVariant(props.depth).shadow};
+  border-radius: ${(props) => radiusVariant(props.borderRadius).radius};
+  ${({ isPadded, borderRadius }) => isPadded &&
     css `
-      padding: ${radiusVariant((variant) => variant.padding)};
+      padding: ${radiusVariant(borderRadius).radius};
     `}
@@ -19,0 +19,0 @@ `;

dist/theme.d.ts

@@ -0,20 +1,24 @@
+import { Theme } from '@clds/themes';
 import { PaperProps } from './PaperProps.js';
-export declare const paperTheme: import("libs/foundations/component-theme/src/api/createTheme.types.js").Compiled<import("@clds/component-theme").Mixin<{
-    background: import("@clds/component-theme").Mixin<string>;
+export interface ThemeProps {
+    theme: Theme;
+}
+export declare const paperTheme: {
+    background: (props: ThemeProps) => string;
     radiusVariant: {
         sm: {
-            radius: import("@clds/component-theme").Mixin<string>;
-            padding: import("@clds/component-theme").Mixin<string>;
+            radius: (props: ThemeProps) => string;
+            padding: (props: ThemeProps) => string;
         };
         md: {
-            radius: import("@clds/component-theme").Mixin<string>;
-            padding: import("@clds/component-theme").Mixin<string>;
+            radius: (props: ThemeProps) => string;
+            padding: (props: ThemeProps) => string;
         };
         lg: {
-            radius: import("@clds/component-theme").Mixin<string>;
-            padding: import("@clds/component-theme").Mixin<string>;
+            radius: (props: ThemeProps) => string;
+            padding: (props: ThemeProps) => string;
         };
         xl: {
-            radius: import("@clds/component-theme").Mixin<string>;
-            padding: import("@clds/component-theme").Mixin<string>;
+            radius: (props: ThemeProps) => string;
+            padding: (props: ThemeProps) => string;
         };
@@ -27,69 +31,33 @@ };
         sm: {
-            shadow: import("@clds/component-theme").Mixin<string>;
+            shadow: (props: ThemeProps) => string;
         };
         md: {
-            shadow: import("@clds/component-theme").Mixin<string>;
+            shadow: (props: ThemeProps) => string;
         };
         lg: {
-            shadow: import("@clds/component-theme").Mixin<string>;
+            shadow: (props: ThemeProps) => string;
         };
     };
-}>> & import("libs/foundations/component-theme/src/api/createTheme.types.js").MappedChildren<{
-    background: import("@clds/component-theme").Mixin<string>;
-    radiusVariant: {
-        sm: {
-            radius: import("@clds/component-theme").Mixin<string>;
-            padding: import("@clds/component-theme").Mixin<string>;
-        };
-        md: {
-            radius: import("@clds/component-theme").Mixin<string>;
-            padding: import("@clds/component-theme").Mixin<string>;
-        };
-        lg: {
-            radius: import("@clds/component-theme").Mixin<string>;
-            padding: import("@clds/component-theme").Mixin<string>;
-        };
-        xl: {
-            radius: import("@clds/component-theme").Mixin<string>;
-            padding: import("@clds/component-theme").Mixin<string>;
-        };
-    };
-    depthVariant: {
-        none: {
-            shadow: string;
-        };
-        sm: {
-            shadow: import("@clds/component-theme").Mixin<string>;
-        };
-        md: {
-            shadow: import("@clds/component-theme").Mixin<string>;
-        };
-        lg: {
-            shadow: import("@clds/component-theme").Mixin<string>;
-        };
-    };
-}> & {
-    [idField]: import("libs/foundations/component-theme/src/types.js").ThemeId;
 };
-export declare const radiusVariant: <R>(calculator?: ((value: {
-    radius: string;
-    padding: string;
+export declare const radiusVariant: (borderRadius?: PaperProps['borderRadius']) => {
+    radius: (props: ThemeProps) => string;
+    padding: (props: ThemeProps) => string;
 } | {
-    radius: string;
-    padding: string;
+    radius: (props: ThemeProps) => string;
+    padding: (props: ThemeProps) => string;
 } | {
-    radius: string;
-    padding: string;
+    radius: (props: ThemeProps) => string;
+    padding: (props: ThemeProps) => string;
 } | {
-    radius: string;
-    padding: string;
-}, props: PaperProps) => R) | undefined) => (props: PaperProps) => any;
-export declare const depthVariant: <R>(calculator?: ((value: {
+    radius: (props: ThemeProps) => string;
+    padding: (props: ThemeProps) => string;
+};
+export declare const depthVariant: (depth?: PaperProps['depth']) => {
     shadow: string;
 } | {
-    shadow: string;
+    shadow: (props: ThemeProps) => string;
 } | {
-    shadow: string;
+    shadow: (props: ThemeProps) => string;
 } | {
-    shadow: string;
-}, props: PaperProps) => R) | undefined) => (props: PaperProps) => any;
+    shadow: (props: ThemeProps) => string;
+};

dist/theme.js

@@ -1,21 +0,19 @@
-import { createTheme, createVariant, globalTheme } from '@clds/component-theme';
-const { palette, radius, shadow, spacing } = globalTheme;
-export const paperTheme = createTheme({
-    background: palette.surface,
+export const paperTheme = {
+    background: (props) => props.theme.palette.surface,
     radiusVariant: {
         sm: {
-            radius: radius.unstable_new.sm,
-            padding: spacing.sm,
+            radius: (props) => props.theme.radius.unstable_new.sm,
+            padding: (props) => props.theme.spacing.sm,
         },
         md: {
-            radius: radius.unstable_new.md,
-            padding: spacing.sm,
+            radius: (props) => props.theme.radius.unstable_new.md,
+            padding: (props) => props.theme.spacing.sm,
         },
         lg: {
-            radius: radius.unstable_new.lg,
-            padding: spacing.sm,
+            radius: (props) => props.theme.radius.unstable_new.lg,
+            padding: (props) => props.theme.spacing.sm,
         },
         xl: {
-            radius: radius.unstable_new.xl,
-            padding: spacing.lg,
+            radius: (props) => props.theme.radius.unstable_new.xl,
+            padding: (props) => props.theme.spacing.lg,
         },
@@ -28,18 +26,14 @@ },
         sm: {
-            shadow: shadow.sm,
+            shadow: (props) => props.theme.shadow.sm,
         },
         md: {
-            shadow: shadow.md,
+            shadow: (props) => props.theme.shadow.md,
         },
         lg: {
-            shadow: shadow.lg,
+            shadow: (props) => props.theme.shadow.lg,
         },
     },
-}, 'paper');
-export const radiusVariant = createVariant(
-// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-(props) => paperTheme.radiusVariant[props.borderRadius || 'md']);
-export const depthVariant = createVariant(
-// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-(props) => paperTheme.depthVariant[props.depth || 'md']);
+};
+export const radiusVariant = (borderRadius = 'md') => paperTheme.radiusVariant[borderRadius];
+export const depthVariant = (depth = 'md') => paperTheme.depthVariant[depth];
 //# sourceMappingURL=theme.js.map

package.json

 {
   "name": "@clds/paper",
   "description": "",
-  "version": "0.53.5",
+  "version": "0.56.0-beta.1",
   "author": "Cloudinary",
@@ -12,3 +12,3 @@ "main": "./dist/index.js",
   "dependencies": {
-    "@clds/component-theme": "0.53.5"
+    "@clds/themes": "0.56.0-beta.1"
   },
@@ -21,4 +21,4 @@ "devDependencies": {
     "styled-components": "5.3.11",
-    "@clds/testing-library": "0.53.5",
-    "@clds/typography": "0.53.5"
+    "@clds/testing-library": "0.56.0-beta.1",
+    "@clds/typography": "0.56.0-beta.1"
   },
@@ -25,0 +25,0 @@ "files": [

No alert changes

Worsened metrics

Total package byte prevSize

45698

decreased by-4.3%

Lines of code

143

decreased by-20.99%

Dependency changes

• + Added@clds/themes@0.56.0-beta.1

• + Added@clds/themes@0.56.0-beta.1(transitive)

• - Removed@clds/component-theme@0.53.5

• - Removed@clds/component-theme@0.53.5(transitive)

• - Removed@clds/theme-helper@0.53.5(transitive)

• - Removed@clds/themes@0.53.5(transitive)

• - Removeddeepmerge@4.3.1(transitive)

• - Removedes-toolkit@1.32.0(transitive)