@televet/kibble-ui 1.6.0 → 1.6.1

package/build/components/Typography/Heading/heading.component.d.ts

@@ -5,7 +5,7 @@ import { TextColor } from '../typography.types';
 export interface HeadingProps extends ChakraHeadingProps {
     children: ReactNode;
     size?: HeadingSize;
-    color?: TextColor;
+    colorToken?: TextColor;
     darkMode?: boolean;
 }
-export declare const Heading: ({ children, size, color, darkMode, ...rest }: HeadingProps) => JSX.Element;
+export declare const Heading: ({ children, size, color, colorToken, darkMode, ...rest }: HeadingProps) => JSX.Element;

package/build/components/Typography/Text/text.component.d.ts

@@ -6,7 +6,7 @@ export interface TextProps extends ChakraTextProps {
     children: ReactNode;
     as?: HTMLTagName;
     variant?: TextVariant;
-    color?: TextColor;
+    colorToken?: TextColor;
     darkMode?: boolean;
 }
-export declare const Text: ({ children, variant, as, color, darkMode, ...rest }: TextProps) => JSX.Element;
+export declare const Text: ({ children, variant, as, color, colorToken, darkMode, ...rest }: TextProps) => JSX.Element;

package/build/hooks/useAdaptiveColorMap.d.ts

@@ -1,2 +1,2 @@
-import { AdaptiveColorMap } from '../theme/tokens/colors';
-export declare const useAdaptiveColorMap: <T extends string | number | symbol>(map: AdaptiveColorMap<T>, token: T) => string;
+import { AdaptiveColorMap } from '../theme/tokens';
+export declare const useAdaptiveColorMap: <T extends string | number | symbol>(map: AdaptiveColorMap<T>, token: T, darkMode?: boolean | undefined) => string;

package/build/index.js

@@ -1464,9 +1464,7 @@ var IconSizeMap = {
     '2xl': 38,
 };
 
-var useAdaptiveColorMap = function (map, token) {
-    return react.useColorModeValue(map.light[token], map.dark[token]);
-};
+var useAdaptiveColorMap = function (map, token, darkMode) { return react.useColorModeValue(map[darkMode ? 'dark' : 'light'][token], map.dark[token]); };
 
 var Icon = React.forwardRef(function (_a, ref) {
     var name = _a.name, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c;
@@ -5773,22 +5771,14 @@ var DrawerConfig = {
     },
 };
 
-var withDarkMode = function (children, darkMode) {
-    return darkMode ? React__default["default"].createElement(react.DarkMode, null, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
-};
-
-var withTheme = function (children, theme) {
-    return theme ? React__default["default"].createElement(react.ChakraProvider, { theme: theme }, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
-};
-
 var Heading = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.color, color = _c === void 0 ? 'headline' : _c, darkMode = _a.darkMode, rest = __rest(_a, ["children", "size", "color", "darkMode"]);
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, color = _a.color, _c = _a.colorToken, colorToken = _c === void 0 ? 'headline' : _c, darkMode = _a.darkMode, rest = __rest(_a, ["children", "size", "color", "colorToken", "darkMode"]);
     var _d = useTheme(), components = _d.components, colors = _d.colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, color);
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
     var variant = react.useBreakpointValue({ base: 'small', md: 'large' }) || 'small';
     var sizes = components.Heading.variants[variant].sizes;
     var sizeProps = !sizes ? undefined : sizes[size];
-    return withDarkMode(React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: adaptiveColor }, rest), children), !!darkMode);
+    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: color || adaptiveColor }, rest), children));
 };
 
 var HeadingConfig = {
@@ -5885,10 +5875,10 @@ var HeadingConfig = {
 };
 
 var Text = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, _c = _a.as, as = _c === void 0 ? 'span' : _c, _d = _a.color, color = _d === void 0 ? 'default' : _d, darkMode = _a.darkMode, rest = __rest(_a, ["children", "variant", "as", "color", "darkMode"]);
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, _c = _a.as, as = _c === void 0 ? 'span' : _c, color = _a.color, _d = _a.colorToken, colorToken = _d === void 0 ? 'default' : _d, darkMode = _a.darkMode, rest = __rest(_a, ["children", "variant", "as", "color", "colorToken", "darkMode"]);
     var colors = useTheme().colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, color);
-    return withDarkMode(React__default["default"].createElement(react.Text, __assign({ variant: variant, as: as, color: adaptiveColor }, rest), children), !!darkMode);
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
+    return (React__default["default"].createElement(react.Text, __assign({ variant: variant, as: as, color: color || adaptiveColor }, rest), children));
 };
 
 var TextConfig = {
@@ -5989,6 +5979,14 @@ var KibbleThemeProvider = function (_a) {
         React__default["default"].createElement(styledComponents.ThemeProvider, { theme: theme }, children)));
 };
 
+var withDarkMode = function (children, darkMode) {
+    return darkMode ? React__default["default"].createElement(react.DarkMode, null, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
+
+var withTheme = function (children, theme) {
+    return theme ? React__default["default"].createElement(react.ChakraProvider, { theme: theme }, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
+
 Object.defineProperty(exports, 'Box', {
     enumerable: true,
     get: function () { return react.Box; }