npm - @televet/kibble-ui - Versions diffs - 1.2.1 → 1.2.2-beta.2p81ym7.2 - Mend

@televet/kibble-ui 1.2.1 → 1.2.2-beta.2p81ym7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/build/index.js CHANGED Viewed

@@ -2219,93 +2219,14 @@ function __rest(s, e) {
 }
 var Heading = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.variant, variant = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["children", "size", "variant"]);
-    var components = useTheme().components;
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, color = _a.color, darkMode = _a.darkMode, rest = __rest(_a, ["children", "size", "color", "darkMode"]);
+    var _c = useTheme(), components = _c.components, colors = _c.colors;
+    var darkColor = colors.text.dark[color || 'headline'];
+    var adaptiveColor = useAdaptiveColorMap(colors.text, color || 'headline');
+    var variant = react.useBreakpointValue({ base: 'small', md: 'large' }) || 'small';
     var sizes = components.Heading.variants[variant].sizes;
     var sizeProps = !sizes ? undefined : sizes[size];
-    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, rest), children));
-};
-var HeadingConfig = {
-    variants: {
-        large: {
-            sizes: {
-                xs: {
-                    fontSize: '14px',
-                    lineHeight: '120%',
-                },
-                sm: {
-                    fontSize: '16px',
-                    lineHeight: '120%',
-                },
-                md: {
-                    fontSize: '20px',
-                    lineHeight: '120%',
-                },
-                lg: {
-                    fontSize: '30px',
-                    lineHeight: '133%',
-                },
-                xl: {
-                    fontSize: '36px',
-                    lineHeight: '133%',
-                },
-                '2xl': {
-                    fontSize: '48px',
-                    lineHeight: '120%',
-                },
-                '3xl': {
-                    fontSize: '60px',
-                    lineHeight: '100%',
-                },
-                '4xl': {
-                    fontSize: '72px',
-                    lineHeight: '100%',
-                },
-            },
-        },
-        small: {
-            sizes: {
-                xs: {
-                    fontSize: '14px',
-                    lineHeight: '120%',
-                },
-                sm: {
-                    fontSize: '16px',
-                    lineHeight: '120%',
-                },
-                md: {
-                    fontSize: '20px',
-                    lineHeight: '120%',
-                },
-                lg: {
-                    fontSize: '24px',
-                    lineHeight: '133%',
-                },
-                xl: {
-                    fontSize: '30px',
-                    lineHeight: '133%',
-                },
-                '2xl': {
-                    fontSize: '36px',
-                    lineHeight: '120%',
-                },
-                '3xl': {
-                    fontSize: '48px',
-                    lineHeight: '100%',
-                },
-                '4xl': {
-                    fontSize: '60px',
-                    lineHeight: '100%',
-                },
-            },
-        },
-    },
-};
-var Text = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, rest = __rest(_a, ["children", "variant"]);
-    return (React__default["default"].createElement(react.Text, __assign({ variant: variant }, rest), children));
+    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: !darkMode ? adaptiveColor : darkColor }, rest), children));
 };
 var blur = {
@@ -2466,28 +2387,6 @@ var coreColors = {
     },
 };
 var semanticColors = {
-    text: {
-        light: {
-            default: coreColors.comet[700],
-            headline: coreColors.blue[800],
-            subtle: coreColors.gray[800],
-            link: coreColors.teal[600],
-            placeholder: coreColors.blackAlpha[500],
-            success: coreColors.green[600],
-            warning: coreColors.yellow[600],
-            error: coreColors.red[500],
-        },
-        dark: {
-            default: coreColors.white,
-            headline: coreColors.white,
-            subtle: coreColors.comet[300],
-            link: coreColors.teal[400],
-            success: coreColors.green[400],
-            warning: coreColors.yellow[300],
-            error: coreColors.red[300],
-            placeholder: coreColors.whiteAlpha[600],
-        },
-    },
     background: {
         light: coreColors.white,
         grayLight: coreColors.gray[50],
@@ -2565,6 +2464,28 @@ var adaptiveColors = {
             error: coreColors.red[300],
         },
     },
+    text: {
+        light: {
+            default: coreColors.comet[700],
+            headline: coreColors.blue[800],
+            subtle: coreColors.gray[800],
+            link: coreColors.teal[600],
+            success: coreColors.green[600],
+            warning: coreColors.yellow[600],
+            error: coreColors.red[500],
+            placeholder: coreColors.blackAlpha[500],
+        },
+        dark: {
+            default: coreColors.white,
+            headline: coreColors.white,
+            subtle: coreColors.comet[300],
+            link: coreColors.teal[400],
+            success: coreColors.green[400],
+            warning: coreColors.yellow[300],
+            error: coreColors.red[300],
+            placeholder: coreColors.whiteAlpha[600],
+        },
+    },
 };
 var colors = __assign(__assign(__assign({}, coreColors), semanticColors), adaptiveColors);
@@ -2688,6 +2609,107 @@ var zIndices = {
     tooltip: 1800,
 };
+var HeadingConfig = {
+    variants: {
+        large: {
+            sizes: {
+                xs: {
+                    fontSize: '14px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                sm: {
+                    fontSize: '16px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                md: {
+                    fontSize: '20px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                lg: {
+                    fontSize: '30px',
+                    lineHeight: '133%',
+                    fontWeight: fontWeights.semibold,
+                },
+                xl: {
+                    fontSize: '36px',
+                    lineHeight: '133%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '2xl': {
+                    fontSize: '48px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '3xl': {
+                    fontSize: '60px',
+                    lineHeight: '100%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '4xl': {
+                    fontSize: '72px',
+                    lineHeight: '100%',
+                    fontWeight: fontWeights.semibold,
+                },
+            },
+        },
+        small: {
+            sizes: {
+                xs: {
+                    fontSize: '14px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                sm: {
+                    fontSize: '16px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                md: {
+                    fontSize: '20px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                lg: {
+                    fontSize: '24px',
+                    lineHeight: '133%',
+                    fontWeight: fontWeights.semibold,
+                },
+                xl: {
+                    fontSize: '30px',
+                    lineHeight: '133%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '2xl': {
+                    fontSize: '36px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '3xl': {
+                    fontSize: '48px',
+                    lineHeight: '100%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '4xl': {
+                    fontSize: '60px',
+                    lineHeight: '100%',
+                    fontWeight: fontWeights.semibold,
+                },
+            },
+        },
+    },
+};
+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, color = _a.color, darkMode = _a.darkMode, rest = __rest(_a, ["children", "variant", "as", "color", "darkMode"]);
+    var colors = useTheme().colors;
+    var darkColor = colors.text.dark[color || 'default'];
+    var adaptiveColor = useAdaptiveColorMap(colors.text, color || 'default');
+    return (React__default["default"].createElement(react.Text, __assign({ variant: variant, as: as, color: !darkMode ? adaptiveColor : darkColor }, rest), children));
+};
 var TextConfig = {
     variants: {
         regular: {
@@ -2749,7 +2771,7 @@ var Textarea = function (props) {
 var TextareaConfig = {
     baseStyle: {
         borderRadius: borders['4px'],
-        color: semanticColors.text.light.default,
+        color: adaptiveColors.text.light.default,
     },
     variants: {
         outline: {
@@ -2825,8 +2847,8 @@ var toTitleCase = function (s) {
 };
 var Button = React.forwardRef(function (props, ref) {
-    var components = useTheme().components;
-    var _a = components.Button[props.variant || 'primary'], variant = _a.variant, light = _a.light, dark = _a.dark;
+    var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights;
+    var _b = components.Button[props.variant || 'primary'], variant = _b.variant, light = _b.light, dark = _b.dark;
     var modeColor = props.darkMode ? dark : light;
     var bg = react.useColorModeValue(modeColor.default, dark.default);
     var color = react.useColorModeValue(modeColor.content, dark.content);
@@ -2850,7 +2872,7 @@ var Button = React.forwardRef(function (props, ref) {
             p[position] = ButtonIcon;
         }
     }
-    return (React__default["default"].createElement(react.Button, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, whiteSpace: "normal", wordWrap: "break-word", iconSpacing: p.size === 'sm' || p.size === 'xs' ? '4px' : '8px' }, p), props.children));
+    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, whiteSpace: "normal", wordWrap: "break-word", iconSpacing: p.size === 'sm' || p.size === 'xs' ? '4px' : '8px' }, p), props.children));
 });
 Button.displayName = 'Button';
@@ -2858,188 +2880,188 @@ var ButtonVariantConfig = {
     primary: {
         variant: 'solid',
         light: {
-            content: semanticColors.text.dark.headline,
-            default: coreColors.teal['600'],
-            hover: coreColors.teal['700'],
-            active: coreColors.teal['800'],
-            border: coreColors.transparent,
+            content: colors.text.dark.headline,
+            default: colors.teal['600'],
+            hover: colors.teal['700'],
+            active: colors.teal['800'],
+            border: colors.transparent,
         },
         dark: {
-            content: semanticColors.text.light.headline,
-            default: coreColors.teal['400'],
-            hover: coreColors.teal['300'],
-            active: coreColors.teal['100'],
-            border: coreColors.transparent,
+            content: colors.text.light.headline,
+            default: colors.teal['400'],
+            hover: colors.teal['300'],
+            active: colors.teal['100'],
+            border: colors.transparent,
         },
     },
     primaryDestructive: {
         variant: 'solid',
         light: {
-            content: semanticColors.text.dark.headline,
-            default: coreColors.red['500'],
-            hover: coreColors.red['600'],
-            active: coreColors.red['700'],
-            border: coreColors.transparent,
+            content: colors.text.dark.headline,
+            default: colors.red['500'],
+            hover: colors.red['600'],
+            active: colors.red['700'],
+            border: colors.transparent,
         },
         dark: {
-            content: semanticColors.text.light.headline,
-            default: coreColors.red['200'],
-            hover: coreColors.red['100'],
-            active: coreColors.red['50'],
-            border: coreColors.transparent,
+            content: colors.text.light.headline,
+            default: colors.red['200'],
+            hover: colors.red['100'],
+            active: colors.red['50'],
+            border: colors.transparent,
         },
     },
     secondary: {
         variant: 'outline',
         light: {
-            content: semanticColors.text.light.default,
-            default: coreColors.transparent,
-            hover: coreColors.teal['100'],
-            active: coreColors.teal['200'],
-            border: semanticColors.border.light.heavy,
+            content: colors.text.light.default,
+            default: colors.transparent,
+            hover: colors.teal['100'],
+            active: colors.teal['200'],
+            border: colors.border.light.heavy,
         },
         dark: {
-            content: coreColors.white,
-            default: coreColors.transparent,
-            hover: coreColors.whiteAlpha['300'],
-            active: coreColors.whiteAlpha['400'],
-            border: coreColors.white,
+            content: colors.white,
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.white,
         },
     },
     secondaryDestructive: {
         variant: 'outline',
         light: {
-            content: semanticColors.text.light.error,
-            default: coreColors.transparent,
-            hover: coreColors.red['50'],
-            active: coreColors.red['100'],
-            border: semanticColors.border.light.error,
+            content: colors.text.light.error,
+            default: colors.transparent,
+            hover: colors.red['50'],
+            active: colors.red['100'],
+            border: colors.border.light.error,
         },
         dark: {
-            content: coreColors.red['300'],
-            default: coreColors.transparent,
-            hover: coreColors.whiteAlpha['300'],
-            active: coreColors.whiteAlpha['400'],
-            border: coreColors.red['300'],
+            content: colors.red['300'],
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.red['300'],
         },
     },
     secondarySubtle: {
         variant: 'outline',
         light: {
-            content: semanticColors.text.light.default,
-            default: coreColors.white,
-            hover: coreColors.gray['50'],
-            active: coreColors.gray['100'],
-            border: semanticColors.border.light.default,
+            content: colors.text.light.default,
+            default: colors.white,
+            hover: colors.gray['50'],
+            active: colors.gray['100'],
+            border: colors.border.light.default,
         },
         dark: {
-            content: semanticColors.text.dark.default,
-            default: coreColors.transparent,
-            hover: coreColors.whiteAlpha['300'],
-            active: coreColors.whiteAlpha['400'],
-            border: semanticColors.text.dark.default,
+            content: colors.text.dark.default,
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.text.dark.default,
         },
     },
     secondarySubtleDestructive: {
         variant: 'outline',
         light: {
-            content: semanticColors.text.light.error,
-            default: coreColors.white,
-            hover: coreColors.red['50'],
-            active: coreColors.red['100'],
-            border: semanticColors.border.light.default,
+            content: colors.text.light.error,
+            default: colors.white,
+            hover: colors.red['50'],
+            active: colors.red['100'],
+            border: colors.border.light.default,
         },
         dark: {
-            content: coreColors.red['300'],
-            default: coreColors.transparent,
-            hover: coreColors.whiteAlpha['300'],
-            active: coreColors.whiteAlpha['400'],
-            border: coreColors.whiteAlpha['500'],
+            content: colors.red['300'],
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.whiteAlpha['500'],
         },
     },
     tertiary: {
         variant: 'solid',
         light: {
-            content: semanticColors.text.light.default,
-            default: coreColors.gray['100'],
-            hover: coreColors.gray['200'],
-            active: coreColors.gray['300'],
-            border: coreColors.transparent,
+            content: colors.text.light.default,
+            default: colors.gray['100'],
+            hover: colors.gray['200'],
+            active: colors.gray['300'],
+            border: colors.transparent,
         },
         dark: {
-            content: semanticColors.text.dark.headline,
-            default: coreColors.whiteAlpha[200],
-            hover: coreColors.whiteAlpha[300],
-            active: coreColors.whiteAlpha[400],
-            border: coreColors.transparent,
+            content: colors.text.dark.headline,
+            default: colors.whiteAlpha[200],
+            hover: colors.whiteAlpha[300],
+            active: colors.whiteAlpha[400],
+            border: colors.transparent,
         },
     },
     tertiaryDestructive: {
         variant: 'solid',
         light: {
-            content: semanticColors.text.light.error,
-            default: coreColors.red['100'],
-            hover: coreColors.red['200'],
-            active: coreColors.red['300'],
-            border: coreColors.transparent,
+            content: colors.text.light.error,
+            default: colors.red['100'],
+            hover: colors.red['200'],
+            active: colors.red['300'],
+            border: colors.transparent,
         },
         dark: {
-            content: coreColors.red['300'],
-            default: coreColors.whiteAlpha['200'],
-            hover: coreColors.whiteAlpha['300'],
-            active: coreColors.whiteAlpha['400'],
-            border: coreColors.transparent,
+            content: colors.red['300'],
+            default: colors.whiteAlpha['200'],
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.transparent,
         },
     },
     ghost: {
         variant: 'ghost',
         light: {
-            content: semanticColors.text.light.link,
-            default: coreColors.transparent,
-            hover: coreColors.teal['100'],
-            active: coreColors.teal['200'],
-            border: coreColors.transparent,
+            content: colors.text.light.link,
+            default: colors.transparent,
+            hover: colors.teal['100'],
+            active: colors.teal['200'],
+            border: colors.transparent,
         },
         dark: {
-            content: coreColors.teal['400'],
-            default: coreColors.transparent,
-            hover: coreColors.whiteAlpha['300'],
-            active: coreColors.whiteAlpha['400'],
-            border: coreColors.transparent,
+            content: colors.teal['400'],
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.transparent,
         },
     },
     ghostNeutral: {
         variant: 'ghost',
         light: {
-            content: semanticColors.text.light.default,
-            default: coreColors.transparent,
-            hover: coreColors.blackAlpha['100'],
-            active: coreColors.blackAlpha['200'],
-            border: coreColors.transparent,
+            content: colors.text.light.default,
+            default: colors.transparent,
+            hover: colors.blackAlpha['100'],
+            active: colors.blackAlpha['200'],
+            border: colors.transparent,
         },
         dark: {
-            content: semanticColors.text.dark.headline,
-            default: coreColors.transparent,
-            hover: coreColors.whiteAlpha['300'],
-            active: coreColors.whiteAlpha['400'],
-            border: coreColors.transparent,
+            content: colors.text.dark.headline,
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.transparent,
         },
     },
     ghostDestructive: {
         variant: 'ghost',
         light: {
-            content: semanticColors.text.light.error,
-            default: coreColors.transparent,
-            hover: coreColors.red['100'],
-            active: coreColors.red['200'],
-            border: coreColors.transparent,
+            content: colors.text.light.error,
+            default: colors.transparent,
+            hover: colors.red['100'],
+            active: colors.red['200'],
+            border: colors.transparent,
         },
         dark: {
-            content: coreColors.red['300'],
-            default: coreColors.transparent,
-            hover: coreColors.whiteAlpha['300'],
-            active: coreColors.whiteAlpha['400'],
-            border: coreColors.transparent,
+            content: colors.red['300'],
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.transparent,
         },
     },
 };