@apia/theme 0.3.2 → 0.3.4

package/dist/index.d.ts

@@ -210,7 +210,7 @@ type TColorDefinition = TColorDefinitionPrimitive & {
 declare global {
     interface Window {
         currentPalette: TParsedPalette;
-        customPalette?: TPalette;
+        customPalettes?: TPalette[];
         defaultPalette?: TPalette;
     }
 }
@@ -376,7 +376,7 @@ declare function getSpacingLayouts(): {
 interface TThemeProvider {
     children: ReactNode;
     customTheme?: () => Omit<Theme, 'palette'>;
-    customPalette?: TCustomPalette;
+    customPalette?: () => TCustomPalette | undefined;
     themeModifier?: TThemeModifier;
 }
 declare const ApiaThemeProvider: ({ children, customTheme, customPalette, themeModifier, }: TThemeProvider) => react.JSX.Element;
@@ -387,4 +387,4 @@ declare module 'theme-ui' {
     }
 }
 
-export { ApiaThemeProvider, CustomTheme, TColorDefinition, TPalette, TParsedPalette, TSpacingLayout, TThemeModifier, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getSpacingLayouts, getVariant, injectStyles, makeStyledComponent, parsePalette, responsive, smallButton, spacing, spacingLayouts, useMainTheme };
+export { ApiaThemeProvider, CustomTheme, TColorDefinition, TCustomPalette, TPalette, TParsedPalette, TSpacingLayout, TThemeModifier, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getSpacingLayouts, getVariant, injectStyles, makeStyledComponent, parsePalette, responsive, smallButton, spacing, spacingLayouts, useMainTheme };

package/dist/index.js

@@ -201,10 +201,10 @@ const defaultPalette = {
     main: "#fff"
   },
   primary: {
-    main: "#00496c",
-    light: "#fcfcfc"
+    main: "#00496c"
   },
   secondary: {
+    light: "#fcfcfc",
     main: "#6c757d"
   },
   spacing: (index) => {
@@ -393,7 +393,7 @@ function getColorsAndStatesByPath(incomingPath, options) {
   }, getColorsByPath(`${incomingPath}.readonly`, options));
   const selected = getColorsByPath(`${incomingPath}.selected`, options);
   return merge(
-    __spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r({}, ((_b = options == null ? void 0 : options.states) == null ? void 0 : _b.default) !== false ? getColorsByPath(incomingPath, options) : null), ((_c = options == null ? void 0 : options.states) == null ? void 0 : _c.checked) !== false ? buildStateObject(checked, "checked") : null), buildStateObject(focus, "focus")), ((_d = options == null ? void 0 : options.states) == null ? void 0 : _d.hover) !== false ? buildStateObject(hover, "hover") : null), ((_e = options == null ? void 0 : options.states) == null ? void 0 : _e.selected) !== false ? buildStateObject(selected, "selected") : null), ((_f = options == null ? void 0 : options.states) == null ? void 0 : _f.active) !== false ? buildStateObject(active, "active") : null), ((_g = options == null ? void 0 : options.states) == null ? void 0 : _g.disabled) !== false ? buildStateObject(disabled, "disabled") : null), ((_h = options == null ? void 0 : options.states) == null ? void 0 : _h.readonly) !== false ? buildStateObject(readonly, "readonly") : null), ((_i = options == null ? void 0 : options.states) == null ? void 0 : _i.path) !== false ? { path: { fill: `${incomingPath}.color` } } : null),
+    __spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r({}, ((_b = options == null ? void 0 : options.states) == null ? void 0 : _b.default) !== false ? getColorsByPath(incomingPath, options) : null), ((_c = options == null ? void 0 : options.states) == null ? void 0 : _c.checked) !== false ? buildStateObject(checked, "checked") : null), buildStateObject(focus, "focus")), ((_d = options == null ? void 0 : options.states) == null ? void 0 : _d.hover) !== false ? buildStateObject(hover, "hover") : null), ((_e = options == null ? void 0 : options.states) == null ? void 0 : _e.selected) !== false ? buildStateObject(selected, "selected") : null), ((_f = options == null ? void 0 : options.states) == null ? void 0 : _f.active) !== false ? buildStateObject(active, "active") : null), ((_g = options == null ? void 0 : options.states) == null ? void 0 : _g.disabled) !== false ? buildStateObject(disabled, "disabled") : null), ((_h = options == null ? void 0 : options.states) == null ? void 0 : _h.readonly) !== false ? buildStateObject(readonly, "readonly") : null), ((_i = options == null ? void 0 : options.states) == null ? void 0 : _i.path) !== false ? { path: { fill: `currentColor` } } : null),
     options == null ? void 0 : options.mergeObject
   );
 }
@@ -735,7 +735,7 @@ const components$1 = (theme) => {
         color: palette.text.primary,
         evenRowsBackgroundColor: palette.background.paper,
         additionalInfoButton: {
-          backgroundColor: palette.primary.light,
+          backgroundColor: palette.secondary.light,
           color: "#4e4e4e",
           borderColor: "transparent"
         },
@@ -805,13 +805,18 @@ const components$1 = (theme) => {
         backgroundColor: "",
         borderColor: ""
       }
+    },
+    desktop: {
+      windowElement: {
+        color: ""
+      }
     }
   };
 };
 
 var __defProp$o = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
 var __hasOwnProp$o = Object.prototype.hasOwnProperty;
 var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
@@ -827,7 +832,7 @@ var __spreadValues$o = (a, b) => {
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 const white = "white";
 function getSelectedColors(palette) {
   return palette.getColorStates(
@@ -850,7 +855,7 @@ function getThemeColorsObject(theme) {
   const colors = merge(
     {},
     {
-      palette: __spreadProps$d(__spreadValues$o({}, theme.palette), {
+      palette: __spreadProps$e(__spreadValues$o({}, theme.palette), {
         lightenColor: void 0,
         darkenColor: void 0,
         getContrastText: void 0,
@@ -875,7 +880,7 @@ function getThemeColorsObject(theme) {
           borderColor: theme.palette.border.section,
           color: theme.palette.primary.contrastText
         },
-        close: __spreadProps$d(__spreadValues$o({}, applyStatesGetColor(
+        close: __spreadProps$e(__spreadValues$o({}, applyStatesGetColor(
           {
             color: theme.palette.text.primary,
             backgroundColor: theme.palette.background.paper
@@ -887,7 +892,7 @@ function getThemeColorsObject(theme) {
         collapsibleAsidePanelTitle: {
           color: theme.palette.text.primary
         },
-        deletableInputButton: __spreadProps$d(__spreadValues$o({}, applyStatesGetColor(
+        deletableInputButton: __spreadProps$e(__spreadValues$o({}, applyStatesGetColor(
           {
             backgroundColor: "transparent",
             color: theme.palette.secondary.main
@@ -1354,7 +1359,11 @@ const alerts = {
       fontWeight: "normal",
       gap: spacing(3),
       width: "100%",
-      wordBreak: "break-word"
+      wordBreak: "break-word",
+      ul: {
+        listStyle: "disc",
+        ml: "20px"
+      }
     },
     ".notification__trace": {
       maxWidth: "100%",
@@ -1394,8 +1403,8 @@ const alerts = {
 };
 
 var __defProp$m = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
 var __hasOwnProp$m = Object.prototype.hasOwnProperty;
 var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
@@ -1411,7 +1420,7 @@ var __spreadValues$m = (a, b) => {
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 const buttons = {
   inherit: {
     color: "inherit",
@@ -1430,7 +1439,7 @@ const buttons = {
     alignItems: "center",
     width: "100%"
   }, getColorsAndStatesByPath("buttons.collapsibleAsidePanelTitle")),
-  primary: __spreadProps$c(__spreadValues$m({
+  primary: __spreadProps$d(__spreadValues$m({
     borderWidth: "2px",
     borderStyle: "solid",
     variant: "text.default",
@@ -1518,7 +1527,7 @@ const buttons = {
     variant: "buttons.accordion",
     border: "none"
   }, getColorsAndStatesByPath("buttons.accordionPrimary")),
-  icon: __spreadProps$c(__spreadValues$m({
+  icon: __spreadProps$d(__spreadValues$m({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -1552,8 +1561,8 @@ const buttons = {
   link: __spreadValues$m({
     variant: "inherit",
     width: "auto",
-    border: "none !important",
-    background: "transparent !important",
+    border: "none",
+    background: "transparent",
     textDecoration: "underline",
     px: 2,
     py: 1,
@@ -1773,7 +1782,125 @@ const transitions = {
   }
 };
 
+const menu = {
+  ".szh-menu": (theme) => ({
+    margin: "0",
+    padding: "0.5rem 0",
+    listStyle: "none",
+    boxSizing: "border-box",
+    width: "max-content",
+    zIndex: "contextMenu",
+    border: "1px solid  #656565",
+    backgroundColor: theme.palette.background.paper,
+    userSelect: "none",
+    color: theme.palette.text.primary,
+    // 'var(--theme-ui-colors-palette-text-primary)',
+    borderRadius: "0.25rem",
+    boxShadow: "0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1)",
+    minWidth: "10rem"
+  }),
+  ".szh-menu__arrow": (theme) => ({
+    boxSizing: "border-box",
+    width: "0.75rem",
+    height: "0.75rem",
+    backgroundColor: theme.palette.background.paper,
+    border: "1px solid transparent",
+    borderLeftColor: "rgba(0, 0, 0, 0.1)",
+    borderTopColor: "rgba(0, 0, 0, 0.1)",
+    zIndex: -1
+  }),
+  ".szh-menu__arrow--dir-left": {
+    right: "-0.375rem",
+    transform: "translateY(-50%) rotate(135deg)"
+  },
+  ".szh-menu__arrow--dir-right": {
+    left: "-0.375rem",
+    transform: "translateY(-50%) rotate(-45deg)"
+  },
+  ".szh-menu__arrow--dir-top": {
+    bottom: "-0.375rem",
+    transform: "translateX(-50%) rotate(-135deg)"
+  },
+  ".szh-menu__arrow--dir-bottom": {
+    top: "-0.375rem",
+    transform: "translateX(-50%) rotate(45deg)"
+  },
+  ".szh-menu__item": {
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    padding: "0.375rem 1.5rem",
+    paddingLeft: "2.2rem"
+  },
+  ".szh-menu__item--hover": (theme) => ({
+    backgroundColor: theme.palette.background.default
+  }),
+  ".szh-menu__item--focusable": {
+    cursor: "default"
+  },
+  ".szh-menu__item--disabled": {
+    cursor: "default",
+    color: "#ccc"
+  },
+  ".szh-menu__group": { boxSizing: "border-box" },
+  ".szh-menu__radio-group": {
+    margin: "0",
+    padding: "0",
+    listStyle: "none"
+  },
+  ".szh-menu__divider": {
+    height: "1px",
+    margin: "0.5rem 0",
+    backgroundColor: "rgba(0, 0, 0, 0.12)"
+  },
+  ".szh-menu-button": { boxSizing: "border-box" },
+  ".szh-menu-container--itemTransition .szh-menu__item": {
+    transitionProperty: "background-color, color",
+    transitionDuration: "0.15s",
+    transitionTimingFunction: "ease-in-out"
+  },
+  ".szh-menu__item--type-radio": { paddingLeft: "2.2rem" },
+  ".szh-menu__item--type-radio::before": {
+    content: '"\u25CB"',
+    position: "absolute",
+    left: "0.8rem",
+    top: "0.55rem",
+    fontSize: "0.8rem"
+  },
+  ".szh-menu__item--type-radio.szh-menu__item--checked::before": {
+    content: '"\u25CF"'
+  },
+  ".szh-menu__item--type-checkbox": { paddingLeft: "2.2rem" },
+  ".szh-menu__item--type-checkbox::before": {
+    position: "absolute",
+    left: "0.8rem"
+  },
+  ".szh-menu__item--type-checkbox.szh-menu__item--checked::before": {
+    content: '"\u2714"'
+  },
+  ".szh-menu__submenu>.szh-menu__item": { paddingRight: "2.5rem" },
+  ".szh-menu__submenu>.szh-menu__item::after": {
+    content: '"\u276F"',
+    position: "absolute",
+    right: "1rem"
+  },
+  ".szh-menu__header": {
+    color: "#888",
+    fontSize: "0.8rem",
+    padding: "0.2rem 1.5rem",
+    textTransform: "uppercase"
+  },
+  ".szh-menu__item--anchor,\n.szh-menu__item--anchor:hover,\n.szh-menu__item--anchor:focus,\n.szh-menu__item--anchor:active": (theme) => ({
+    paddingLeft: "2.2rem",
+    textDecoration: "none",
+    color: theme.palette.text.primary
+  })
+};
+
 var __defProp$l = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
 var __hasOwnProp$l = Object.prototype.hasOwnProperty;
 var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
@@ -1789,7 +1916,8 @@ var __spreadValues$l = (a, b) => {
     }
   return a;
 };
-const root = __spreadValues$l({
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+const root = __spreadValues$l(__spreadProps$c(__spreadValues$l({}, menu), {
   height: "100%",
   "*": {
     fontFamily: "body",
@@ -1910,8 +2038,18 @@ const root = __spreadValues$l({
   },
   ".hidden": {
     display: "none"
+  },
+  ".field__withError": {
+    borderLeftStyle: "solid",
+    borderLeftWidth: "4px",
+    borderLeftColor: "danger"
+  },
+  ".field__touched": {
+    borderStyle: "solid",
+    borderWidth: "1px",
+    borderColor: "touchedBorderColor"
   }
-}, transitions);
+}), transitions);
 
 const baseTheme = () => {
   return {
@@ -1960,7 +2098,10 @@ const baseTheme = () => {
       tabs: "",
       panel: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
       tableFilters: "3px 3px 3px rgba(0,0,0,0.2)",
-      toolbar: "3px 3px 3px rgba(0,0,0,0.1)"
+      toolbar: "3px 3px 3px rgba(0,0,0,0.1)",
+      desktop: {
+        windowElement: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px"
+      }
     },
     space: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128],
     sizes: {
@@ -2640,7 +2781,7 @@ const apiaApi = {
 const confirm = {
   display: "flex",
   flexDirection: "column",
-  gap: spacing$1(5),
+  gap: spacing$1(6),
   width: "100%",
   ".confirm__content": {
     overflow: "auto",
@@ -2666,7 +2807,6 @@ const confirm = {
 };
 
 const buttonsBar = {
-  flexBasis: "20%",
   flexDirection: "row",
   display: "flex",
   justifyContent: "flex-end",
@@ -2735,6 +2875,7 @@ const modals = __spreadProps$5(__spreadValues$b({
       overflow: "auto",
       width: "100%",
       flexBasis: "100%",
+      flexDirection: "column",
       flexShrink: 1,
       display: "flex",
       justifyContent: "stretch",
@@ -2917,7 +3058,7 @@ var __spreadValues$9 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const primary$3 = (theme) => {
+const primary$4 = (theme) => {
   return __spreadProps$3(__spreadValues$9({
     variant: "colors.tables.primary",
     width: "100%",
@@ -3202,9 +3343,6 @@ const accordion$1 = {
         color: "palette.primary.contrastText"
       }
     },
-    "& svg path": {
-      fill: "palette.primary.main"
-    },
     ".accordionElement__toggler__checkbox": {
       flexShrink: 0,
       m: spacing(2)
@@ -3231,7 +3369,6 @@ const accordion$1 = {
     }
   }),
   ".responsiveTable__accordionElement__content": {
-    maxHeight: "300px",
     display: "flex",
     flexDirection: "column",
     "& > div": {
@@ -3652,7 +3789,7 @@ const tables = (theme) => {
   return {
     accordion: accordion$1,
     information,
-    primary: primary$3(theme),
+    primary: primary$4(theme),
     print,
     responsive: responsive(theme),
     secondary,
@@ -3720,7 +3857,7 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-const primary$2 = (theme) => {
+const primary$3 = (theme) => {
   return {
     /* PREPEND HERE */
     position: "relative",
@@ -3836,7 +3973,20 @@ const primary$2 = (theme) => {
 };
 
 const trees = {
+  primary: primary$3
+};
+
+const primary$2 = {
+  background: "white",
+  border: "1px solid #ccc",
+  p: 3,
+  zIndex: "tooltip"
+  /* PREPEND HERE */
+};
+
+const tooltips = {
   primary: primary$2
+  /* PREPEND HERE */
 };
 
 var __defProp$5 = Object.defineProperty;
@@ -4076,7 +4226,7 @@ const accordion = {
       height: "32px",
       background: "palette.background.paper",
       border: "1px solid",
-      borderColor: "palette.border.field",
+      // borderColor: 'palette.border.field',
       cursor: "pointer",
       display: "flex",
       alignItems: "stretch",
@@ -4143,8 +4293,12 @@ const accordion = {
     '.accordion__item__content[aria-hidden="true"]': {
       border: "none"
     },
+    ".accordion__item__button__check": {
+      borderColor: "palette.border.section",
+      borderRadius: "3px"
+    },
     ".accordion__item__content": {
-      background: "palette.primary.light",
+      background: "palette.secondary.light",
       '[data-variant="link"]': {
         px: 0
       },
@@ -4166,7 +4320,8 @@ const common = (theme) => {
     modals,
     tables: tables(theme),
     components,
-    trees
+    trees,
+    tooltips
     /* PREPEND HERE */
   };
 };
@@ -4352,7 +4507,14 @@ const ApiaThemeProvider = ({
   customPalette,
   themeModifier
 }) => {
-  const theme = useMainTheme(customTheme, customPalette, themeModifier);
+  const parsedCustomPalette = useMemo(() => {
+    return customPalette == null ? void 0 : customPalette();
+  }, [customPalette]);
+  const theme = useMainTheme(
+    customTheme,
+    parsedCustomPalette,
+    themeModifier
+  );
   logTheme(theme);
   return /* @__PURE__ */ jsx(ThemeProvider, { theme, children });
 };