@clds/typography - npm Package Compare versions

Comparing version 0.53.5 to 0.56.0-beta.1

dist/apps/theme.d.ts

@@ -1,2 +0,6 @@
-export declare const appsTheme: import("libs/foundations/component-theme/src/api/createTheme.types").Compiled<import("@clds/component-theme").Mixin<{
+import { Theme } from '@clds/themes';
+export interface ThemeProps {
+    theme: Theme;
+}
+export declare const appsTheme: {
     xxl: {
@@ -6,15 +10,15 @@ size: string;
         contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         regular: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
@@ -27,15 +31,15 @@ };
         contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         regular: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
@@ -48,27 +52,27 @@ };
         highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         url: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         regular: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
@@ -81,39 +85,39 @@ };
         highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         regular: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         url: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         error: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         warning: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         success: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
@@ -126,39 +130,39 @@ };
         highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         regular: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         url: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         success: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         warning: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         error: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
@@ -171,43 +175,43 @@ };
         highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         regular: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         disabled: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         url: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         success: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         warning: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         error: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
@@ -220,305 +224,46 @@ };
         highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         regular: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         disabled: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         url: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         success: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         warning: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         error: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
         overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
+            color: (props: ThemeProps) => string;
             weight: string;
         };
     };
-}>> & import("libs/foundations/component-theme/src/api/createTheme.types").MappedChildren<{
-    xxl: {
-        size: string;
-        lineHeight: string;
-        contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        regular: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-    };
-    xl: {
-        size: string;
-        lineHeight: string;
-        contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        regular: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-    };
-    lg: {
-        size: string;
-        lineHeight: string;
-        highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        url: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        regular: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-    };
-    md: {
-        size: string;
-        lineHeight: string;
-        highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        regular: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        url: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        error: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        warning: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        success: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-    };
-    sm: {
-        size: string;
-        lineHeight: string;
-        highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        regular: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        url: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        success: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        warning: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        error: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-    };
-    xs: {
-        size: string;
-        lineHeight: string;
-        highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        regular: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        disabled: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        url: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        success: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        warning: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        error: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-    };
-    xxs: {
-        size: string;
-        lineHeight: string;
-        highContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        lowContrast: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        regular: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        disabled: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        url: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        success: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        warning: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        error: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        contrastInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlay: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-        overlayInvert: {
-            color: import("@clds/component-theme").Mixin<string>;
-            weight: string;
-        };
-    };
-}> & {
-    [idField]: import("libs/foundations/component-theme/src/types").ThemeId;
 };

dist/apps/theme.js

@@ -1,4 +0,2 @@
-import { createTheme, globalTheme } from '@clds/component-theme';
-const { palette } = globalTheme;
-export const appsTheme = createTheme({
+export const appsTheme = {
     xxl: {
@@ -8,15 +6,15 @@ size: '2.25rem',
         contrastInvert: {
-            color: palette.contrastInvert,
+            color: (props) => props.theme.palette.contrastInvert,
             weight: '700',
         },
         regular: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '700',
         },
         overlay: {
-            color: palette.overlayLight,
+            color: (props) => props.theme.palette.overlayLight,
             weight: '700',
         },
         overlayInvert: {
-            color: palette.overlayDark,
+            color: (props) => props.theme.palette.overlayDark,
             weight: '700',
@@ -29,15 +27,15 @@ },
         contrastInvert: {
-            color: palette.contrastInvert,
+            color: (props) => props.theme.palette.contrastInvert,
             weight: '500',
         },
         regular: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '500',
         },
         overlay: {
-            color: palette.overlayLight,
+            color: (props) => props.theme.palette.overlayLight,
             weight: '500',
         },
         overlayInvert: {
-            color: palette.overlayDark,
+            color: (props) => props.theme.palette.overlayDark,
             weight: '500',
@@ -50,27 +48,27 @@ },
         highContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '500',
         },
         lowContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '300',
         },
         url: {
-            color: palette.primary,
+            color: (props) => props.theme.palette.primary,
             weight: '500',
         },
         contrastInvert: {
-            color: palette.contrastInvert,
+            color: (props) => props.theme.palette.contrastInvert,
             weight: '500',
         },
         regular: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '500',
         },
         overlay: {
-            color: palette.overlayLight,
+            color: (props) => props.theme.palette.overlayLight,
             weight: '500',
         },
         overlayInvert: {
-            color: palette.overlayDark,
+            color: (props) => props.theme.palette.overlayDark,
             weight: '500',
@@ -83,39 +81,39 @@ },
         highContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '500',
         },
         lowContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '300',
         },
         regular: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: 'normal',
         },
         url: {
-            color: palette.primary,
+            color: (props) => props.theme.palette.primary,
             weight: '500',
         },
         contrastInvert: {
-            color: palette.contrastInvert,
+            color: (props) => props.theme.palette.contrastInvert,
             weight: '500',
         },
         error: {
-            color: palette.errorAlt,
+            color: (props) => props.theme.palette.errorAlt,
             weight: '500',
         },
         warning: {
-            color: palette.warningAlt,
+            color: (props) => props.theme.palette.warningAlt,
             weight: '500',
         },
         success: {
-            color: palette.successAlt,
+            color: (props) => props.theme.palette.successAlt,
             weight: '500',
         },
         overlay: {
-            color: palette.overlayLight,
+            color: (props) => props.theme.palette.overlayLight,
             weight: '500',
         },
         overlayInvert: {
-            color: palette.overlayDark,
+            color: (props) => props.theme.palette.overlayDark,
             weight: '500',
@@ -128,39 +126,39 @@ },
         highContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '500',
         },
         regular: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '400',
         },
         lowContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '300',
         },
         url: {
-            color: palette.primary,
+            color: (props) => props.theme.palette.primary,
             weight: '500',
         },
         success: {
-            color: palette.successAlt,
+            color: (props) => props.theme.palette.successAlt,
             weight: '500',
         },
         warning: {
-            color: palette.warningAlt,
+            color: (props) => props.theme.palette.warningAlt,
             weight: '500',
         },
         error: {
-            color: palette.errorAlt,
+            color: (props) => props.theme.palette.errorAlt,
             weight: '500',
         },
         contrastInvert: {
-            color: palette.contrastInvert,
+            color: (props) => props.theme.palette.contrastInvert,
             weight: '500',
         },
         overlay: {
-            color: palette.overlayLight,
+            color: (props) => props.theme.palette.overlayLight,
             weight: '500',
         },
         overlayInvert: {
-            color: palette.overlayDark,
+            color: (props) => props.theme.palette.overlayDark,
             weight: '500',
@@ -173,43 +171,43 @@ },
         highContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '600',
         },
         regular: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '400',
         },
         lowContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '300',
         },
         disabled: {
-            color: palette.secondaryAlt,
+            color: (props) => props.theme.palette.secondaryAlt,
             weight: '400',
         },
         url: {
-            color: palette.primary,
+            color: (props) => props.theme.palette.primary,
             weight: '500',
         },
         success: {
-            color: palette.successAlt,
+            color: (props) => props.theme.palette.successAlt,
             weight: '500',
         },
         warning: {
-            color: palette.warningAlt,
+            color: (props) => props.theme.palette.warningAlt,
             weight: '500',
         },
         error: {
-            color: palette.errorAlt,
+            color: (props) => props.theme.palette.errorAlt,
             weight: '500',
         },
         contrastInvert: {
-            color: palette.contrastInvert,
+            color: (props) => props.theme.palette.contrastInvert,
             weight: '600',
         },
         overlay: {
-            color: palette.overlayLight,
+            color: (props) => props.theme.palette.overlayLight,
             weight: '500',
         },
         overlayInvert: {
-            color: palette.overlayDark,
+            color: (props) => props.theme.palette.overlayDark,
             weight: '500',
@@ -222,47 +220,47 @@ },
         highContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '500',
         },
         lowContrast: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '300',
         },
         regular: {
-            color: palette.contrastHigh,
+            color: (props) => props.theme.palette.contrastHigh,
             weight: '400',
         },
         disabled: {
-            color: palette.secondaryAlt,
+            color: (props) => props.theme.palette.secondaryAlt,
             weight: '400',
         },
         url: {
-            color: palette.primary,
+            color: (props) => props.theme.palette.primary,
             weight: '500',
         },
         success: {
-            color: palette.successAlt,
+            color: (props) => props.theme.palette.successAlt,
             weight: '500',
         },
         warning: {
-            color: palette.warningAlt,
+            color: (props) => props.theme.palette.warningAlt,
             weight: '500',
         },
         error: {
-            color: palette.errorAlt,
+            color: (props) => props.theme.palette.errorAlt,
             weight: '500',
         },
         contrastInvert: {
-            color: palette.contrastInvert,
+            color: (props) => props.theme.palette.contrastInvert,
             weight: '500',
         },
         overlay: {
-            color: palette.overlayLight,
+            color: (props) => props.theme.palette.overlayLight,
             weight: '500',
         },
         overlayInvert: {
-            color: palette.overlayDark,
+            color: (props) => props.theme.palette.overlayDark,
             weight: '500',
         },
     },
-});
+};
 //# sourceMappingURL=theme.js.map

dist/apps/Typography.d.ts

 import './theme.js';
 import { TypographyProps } from './types.js';
 /** `Typography` is responsible for styling the text according to the designs */
-export declare const Typography: import("styled-components").StyledComponent<"div", any, TypographyProps, never>;
+export declare const Typography: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TypographyProps, never>;

dist/apps/typographyMixin.d.ts

 import { SimpleInterpolation } from 'styled-components';
 import { TypographyProps, TypographySize, TypographyType } from './types.js';
 export declare const getTypographyRuleMixins: (size: TypographySize, type: TypographyType) => {
-    fontSize: import("@clds/component-theme").Mixin<string>;
-    lineHeight: import("@clds/component-theme").Mixin<string>;
-    color: import("libs/foundations/component-theme/src/api/createTheme.types.js").Compiled<import("@clds/component-theme").Mixin<string>>;
-    fontWeight: import("@clds/component-theme").Mixin<string>;
+    fontSize: string;
+    lineHeight: string;
+    color: ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string) | ((props: import("./theme.js").ThemeProps) => string);
+    fontWeight: string;
 };
 export declare function typographyMixin(props: TypographyProps): ReadonlyArray<SimpleInterpolation>;
 export declare function typographyMixin(size: TypographySize, type: TypographyType): ReadonlyArray<SimpleInterpolation>;

dist/website/predefinedWebsiteMixins.d.ts

 export declare const predefinedWebsiteMixins: {
     headlines: {
         xxxxl: {
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
         xxxl: {
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
         xl: {
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
         lg: {
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
         md: {
-            contrastInvertBold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            regular: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvertBold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            regular: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
         sm: {
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
@@ -32,16 +32,16 @@ };
         lg: {
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            regular: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            regular: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
         sm: {
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            accentCoral: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            bold: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            accentCoral: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
         xs: {
-            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-            regular: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+            contrastInvert: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+            regular: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
         };
     };
 };

dist/website/websiteTheme.d.ts

@@ -1,2 +0,6 @@
-export declare const websiteTheme: import("libs/foundations/component-theme/src/api/createTheme.types").Compiled<import("@clds/component-theme").Mixin<{
+import { Theme } from '@clds/themes';
+export interface WebsiteThemeProps {
+    theme: Theme;
+}
+export declare const websiteTheme: {
     headlines: {
@@ -8,7 +12,7 @@ fontFamily: string;
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             bold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -21,7 +25,7 @@ };
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             bold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -34,7 +38,7 @@ };
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             bold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -47,7 +51,7 @@ };
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             bold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -60,15 +64,15 @@ };
             contrastInvertBold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             bold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             regular: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -81,7 +85,7 @@ };
             bold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -97,11 +101,11 @@ };
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             bold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             regular: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -114,11 +118,11 @@ };
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             bold: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             accentCoral: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -131,7 +135,7 @@ };
             contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
             };
             regular: {
-                color: import("@clds/component-theme").Mixin<string>;
+                color: (props: WebsiteThemeProps) => string;
                 fontWeight: string;
@@ -141,135 +145,2 @@ };
     };
-}>> & import("libs/foundations/component-theme/src/api/createTheme.types").MappedChildren<{
-    headlines: {
-        fontFamily: string;
-        xxxxl: {
-            fontSize: string;
-            lineHeight: string;
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            bold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-        xxxl: {
-            fontSize: string;
-            lineHeight: string;
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            bold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-        xl: {
-            fontSize: string;
-            lineHeight: string;
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            bold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-        lg: {
-            fontSize: string;
-            lineHeight: string;
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            bold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-        md: {
-            fontSize: string;
-            lineHeight: string;
-            contrastInvertBold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            bold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            regular: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-        sm: {
-            fontSize: string;
-            lineHeight: string;
-            bold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-    };
-    brandText: {
-        fontFamily: string;
-        lg: {
-            fontSize: string;
-            lineHeight: string;
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            bold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            regular: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-        sm: {
-            fontSize: string;
-            lineHeight: string;
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            bold: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            accentCoral: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-        xs: {
-            fontSize: string;
-            lineHeight: string;
-            contrastInvert: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-            regular: {
-                color: import("@clds/component-theme").Mixin<string>;
-                fontWeight: string;
-            };
-        };
-    };
-}> & {
-    [idField]: import("libs/foundations/component-theme/src/types").ThemeId;
 };

dist/website/websiteTheme.js

@@ -1,5 +0,2 @@
-import { createTheme, globalTheme } from '@clds/component-theme';
-const { palette } = globalTheme;
-const { brand } = globalTheme.palette;
-export const websiteTheme = createTheme({
+export const websiteTheme = {
     headlines: {
@@ -11,7 +8,7 @@ fontFamily: 'sofia-pro',
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'bold',
             },
             bold: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'bold',
@@ -24,7 +21,7 @@ },
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'bold',
             },
             bold: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'bold',
@@ -37,7 +34,7 @@ },
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'bold',
             },
             bold: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'bold',
@@ -50,7 +47,7 @@ },
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'normal',
             },
             bold: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'normal',
@@ -63,15 +60,15 @@ },
             contrastInvertBold: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'bold',
             },
             bold: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'bold',
             },
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'normal',
             },
             regular: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'normal',
@@ -84,7 +81,7 @@ },
             bold: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'bold',
             },
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'normal',
@@ -100,11 +97,11 @@ },
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'normal',
             },
             bold: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'normal',
             },
             regular: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'normal',
@@ -117,11 +114,11 @@ },
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'normal',
             },
             bold: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'bold',
             },
             accentCoral: {
-                color: brand.accentCoral,
+                color: (props) => props.theme.palette.brand.accentCoral,
                 fontWeight: 'bold',
@@ -134,7 +131,7 @@ },
             contrastInvert: {
-                color: palette.contrastInvert,
+                color: (props) => props.theme.palette.contrastInvert,
                 fontWeight: 'normal',
             },
             regular: {
-                color: brand.darkBlue,
+                color: (props) => props.theme.palette.brand.darkBlue,
                 fontWeight: 'normal',
@@ -144,3 +141,3 @@ },
     },
-});
+};
 //# sourceMappingURL=websiteTheme.js.map

dist/website/WebsiteTypography.d.ts

 import { WebsiteTypographyProps } from './websiteTypes.js';
-export declare const WebsiteTypography: import("styled-components").StyledComponent<"div", any, WebsiteTypographyProps, never>;
+export declare const WebsiteTypography: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WebsiteTypographyProps, never>;

dist/website/websiteTypographyMixin.d.ts

 import { WebsiteKind, WebsiteSize, WebsiteType } from './websiteTypes.js';
-export declare const websiteTypographyMixin: (kind: WebsiteKind, size: WebsiteSize, type: WebsiteType) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const websiteTypographyMixin: (kind: WebsiteKind, size: WebsiteSize, type: WebsiteType) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;

package.json

 {
   "name": "@clds/typography",
   "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"
   },
@@ -15,0 +15,0 @@ "devDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

105721

decreased by-6.11%

Lines of code

1149

decreased by-25.05%

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)