@mackin.com/styleguide 8.2.0 → 8.2.3

package/index.d.ts

@@ -1049,4 +1049,10 @@ interface LinkProps extends LinkContentProps, React.DetailedHTMLProps<React.Anch
 }
 declare const Link: (props: LinkProps) => JSX.Element;
 
-export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+interface ThemeRendererProps extends MackinTheme {
+    backgroundColor?: string;
+    color?: string;
+}
+declare const ThemeRenderer: (p: ThemeRendererProps) => JSX.Element;
+
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -118,7 +118,6 @@ const calcDynamicThemeProps = (theme) => {
     theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
     theme.controls.dividerBorder = `${theme.controls.dividerThickness} solid ${theme.colors.divider}`;
     theme.controls.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
-    theme.controls.buttonBoxShadow = theme.controls.boxShadow;
     theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
     theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
 };
@@ -181,6 +180,8 @@ const defaultTheme = {
         height: '44px',
         heightSmall: '34px',
         boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
+        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
+        buttonBoxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
         hoverBrightness: 'brightness(0.75)',
         transitionDuration: '0.25s',
         transitionEasing: 'ease-in-out',
@@ -194,8 +195,6 @@ const defaultTheme = {
         dividerMargin: '1rem',
         dividerBorder: '',
         dividerThickness: '2px',
-        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
-        buttonBoxShadow: '',
         inputErrorMinHeight: '',
         paragraphPadding: '1rem'
     },
@@ -4430,7 +4429,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
+  /* line-height: 1.15; This causes issues with Chrome buttons. */
   margin: 0; /* 2 */
 }
 
@@ -4612,6 +4611,59 @@ const Link = (props) => {
         React__namespace.createElement(LinkContent, Object.assign({}, props))));
 };
 
+const ThemeRenderer = (p) => {
+    const { backgroundColor, color } = p, theme = __rest(p, ["backgroundColor", "color"]);
+    const flatTheme = flatten(theme);
+    const entries = lodash.orderBy(Object.entries(flatTheme), x => x[0]);
+    return (React__namespace.createElement(Table, { caption: (React__namespace.createElement("div", null,
+            React__namespace.createElement(Text, { tag: "h1", align: "center" }, "Theme"),
+            React__namespace.createElement(Text, { tag: "p", align: "center", italics: true }, "Background color applied to show colors with alpha ('rgba(X, X, X, 0.X)')"))), className: css.css({
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#eee7ca',
+            color: color !== null && color !== void 0 ? color : 'black'
+        }) },
+        React__namespace.createElement("thead", null,
+            React__namespace.createElement(Tr, null,
+                React__namespace.createElement(Th, { align: "left" }, "Property"),
+                React__namespace.createElement(Th, { align: "left" }, "Value"))),
+        React__namespace.createElement("tbody", null, entries.map(([key, value]) => {
+            let colorBox;
+            if (/color/i.test(key)) {
+                colorBox = (React__namespace.createElement("span", { className: css.css({
+                        display: 'inline-block',
+                        border: '1px solid black',
+                        width: 24,
+                        height: 24,
+                        backgroundColor: value
+                    }) }));
+            }
+            return (React__namespace.createElement(Tr, { key: key },
+                React__namespace.createElement(Td, { align: "left" }, key),
+                React__namespace.createElement(Td, { align: "left" },
+                    React__namespace.createElement("div", { className: css.css({
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '1rem'
+                        }) },
+                        value,
+                        " ",
+                        colorBox))));
+        }))));
+};
+const flatten = (obj, parent, path = 'theme') => {
+    const flatObj = parent !== null && parent !== void 0 ? parent : {};
+    for (const prop in obj) {
+        const value = obj[prop];
+        const fullPath = `${path}.${prop}`;
+        if (typeof value !== 'object') {
+            flatObj[fullPath] = value;
+        }
+        else {
+            flatten(value, flatObj, fullPath);
+        }
+    }
+    return flatObj;
+};
+
 exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop$1;
@@ -4668,6 +4720,7 @@ exports.TextInput = TextInput;
 exports.Th = Th;
 exports.ThSort = ThSort;
 exports.ThemeProvider = ThemeProvider;
+exports.ThemeRenderer = ThemeRenderer;
 exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.TogglePasswordInput = TogglePasswordInput;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "8.2.0",
+	"version": "8.2.3",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",