(
...restProps
} = props;
- const { breakpoint } = useTheme();
+ const { getResponsiveValue } = useCanon();
- const responsiveVariant = getResponsiveValue(variant, breakpoint);
- const responsiveWeight = getResponsiveValue(weight, breakpoint);
+ // Get the responsive values for the variant and weight
+ const responsiveVariant = getResponsiveValue(variant);
+ const responsiveWeight = getResponsiveValue(weight);
return (
) => string;
}
-const ThemeContext = createContext({
+const CanonContext = createContext({
icons: defaultIcons,
breakpoint: 'md',
+ getResponsiveValue: () => '',
});
-interface ThemeProviderProps {
+interface CanonProviderProps {
children?: ReactNode;
overrides?: Partial>;
breakpoints?: Partial;
}
/** @public */
-export const ThemeProvider = (props: ThemeProviderProps) => {
+export const CanonProvider = (props: CanonProviderProps) => {
const { children, overrides, breakpoints = defaultBreakpoints } = props;
// Merge provided overrides with default icons
@@ -68,12 +70,36 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
return 'xs';
})();
+ const getResponsiveValue = (value: string | Partial) => {
+ if (typeof value === 'object') {
+ const breakpointsOrder: (keyof Breakpoints)[] = [
+ 'xs',
+ 'sm',
+ 'md',
+ 'lg',
+ 'xl',
+ '2xl',
+ ];
+ const index = breakpointsOrder.indexOf(breakpoint);
+
+ for (let i = index; i >= 0; i--) {
+ if (value[breakpointsOrder[i]]) {
+ return value[breakpointsOrder[i]] as string;
+ }
+ }
+ return value['xs'] as string;
+ }
+ return value;
+ };
+
return (
-
+
{children}
-
+
);
};
/** @public */
-export const useTheme = () => useContext(ThemeContext);
+export const useCanon = () => useContext(CanonContext);
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index eec5b26836..2a3f2de61c 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -21,6 +21,7 @@
html,
body {
font-family: var(--canon-font-regular);
+ font-weight: var(--canon-font-weight-regular);
}
/* Light theme tokens */