@qoretechnologies/reqore 0.28.0 → 0.28.2

package/dist/hooks/useTheme.js

@@ -9,9 +9,16 @@ var react_1 = require("react");
 var ThemeContext_1 = __importDefault(require("../context/ThemeContext"));
 var colors_1 = require("../helpers/colors");
 var useReqoreTheme = function (element, customTheme, intent) {
+    var _a;
     if (customTheme === void 0) { customTheme = {}; }
     var theme = (0, react_1.useContext)(ThemeContext_1["default"]);
     var _customTheme = (0, lodash_1.cloneDeep)(customTheme);
+    if (_customTheme.main) {
+        _customTheme.main = (0, colors_1.getColorFromMaybeString)(theme, customTheme.main);
+    }
+    if ((_a = _customTheme.text) === null || _a === void 0 ? void 0 : _a.color) {
+        _customTheme.text.color = (0, colors_1.getColorFromMaybeString)(theme, customTheme.text.color);
+    }
     if (element === 'main' && intent) {
         _customTheme.main = theme.intents[intent];
     }

package/dist/hooks/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAmC;AACnC,+BAAmC;AAEnC,yEAAmD;AACnD,4CAAgD;AAEzC,IAAM,cAAc,GAAG,UAC5B,OAAe,EACf,WAAuC,EACvC,MAAsB;IADtB,4BAAA,EAAA,gBAAuC;IAGvC,IAAM,KAAK,GAAiB,IAAA,kBAAU,EAAe,yBAAY,CAAC,CAAC;IACnE,IAAI,YAAY,GAA0B,IAAA,kBAAS,EAAC,WAAW,CAAC,CAAC;IAEjE,IAAI,OAAO,KAAK,MAAM,IAAI,MAAM,EAAE;QAChC,YAAY,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;KAC3C;IAED,OAAO,IAAA,oBAAW,EAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAiB,CAAC;AACnE,CAAC,CAAC;AAbW,QAAA,cAAc,kBAazB"}
+{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAmC;AACnC,+BAAmC;AAGnC,yEAAmD;AACnD,4CAAyE;AAUlE,IAAM,cAAc,GAAG,UAC5B,OAAe,EACf,WAAoC,EACpC,MAAsB;;IADtB,4BAAA,EAAA,gBAAoC;IAGpC,IAAM,KAAK,GAAiB,IAAA,kBAAU,EAAe,yBAAY,CAAC,CAAC;IACnE,IAAI,YAAY,GAAuB,IAAA,kBAAS,EAAC,WAAW,CAAC,CAAC;IAE9D,IAAI,YAAY,CAAC,IAAI,EAAE;QACrB,YAAY,CAAC,IAAI,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,IAAI,MAAA,YAAY,CAAC,IAAI,0CAAE,KAAK,EAAE;QAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClF;IAED,IAAI,OAAO,KAAK,MAAM,IAAI,MAAM,EAAE;QAChC,YAAY,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;KAC3C;IAED,OAAO,IAAA,oBAAW,EAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAiB,CAAC;AACnE,CAAC,CAAC;AArBW,QAAA,cAAc,kBAqBzB"}

package/dist/types/global.d.ts

@@ -129,6 +129,19 @@ export interface IWithReqoreMinimal {
      */
     minimal?: boolean;
 }
+export interface IWithReqoreTransparent {
+    /**
+     * If true, the component will be transparent
+     * @default false
+     * @type boolean
+     * @example
+     * <ReqoreButton transparent />
+     * <ReqoreButton transparent={true} />
+     * <ReqoreButton transparent={false} />
+     *
+     */
+    transparent?: boolean;
+}
 export interface IWithReqoreEffect {
     /**
      * If true, the component will have an effect

package/dist/types/global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}
+{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Button/index.tsx

@@ -31,7 +31,13 @@ import {
   TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
+import {
+  ReqoreTextEffect,
+  StyledEffect,
+  StyledTextEffect,
+  TReqoreEffectColor,
+  TReqoreHexColor,
+} from '../Effect';
 import ReqoreIcon from '../Icon';
 import { ReqoreSpacer } from '../Spacer';
 import ReqoreTag, { IReqoreTagProps } from '../Tag';
@@ -65,9 +71,10 @@ export interface IReqoreButtonProps
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
   theme: IReqoreTheme;
   animate?: boolean;
+  color?: TReqoreHexColor;
 }
 
-const getButtonMainColor = (theme: IReqoreTheme, color?: string) => {
+const getButtonMainColor = (theme: IReqoreTheme, color?: TReqoreHexColor) => {
   if (color) {
     return color;
   }
@@ -173,8 +180,8 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   ${InactiveIconScale}
 
-  ${({ readOnly, animate }) =>
-    !readOnly
+  ${({ readOnly, animate, active }) =>
+    !readOnly && !active
       ? css`
           &:not(:disabled) {
             ${ScaleIconOnHover}
@@ -187,11 +194,16 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             }
 
             &:hover,
+            &:active,
             &:focus {
-              background-color: ${({ theme, color }: IReqoreButtonStyle) =>
-                changeLightness(getButtonMainColor(theme, color), 0.05)};
-              color: ${({ theme, color }) =>
-                getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
+              background-color: ${({ theme, color, minimal }: IReqoreButtonStyle) =>
+                minimal ? `#00000030` : changeLightness(getButtonMainColor(theme, color), 0.05)};
+              color: ${({ theme, color, minimal }) =>
+                getReadableColor(
+                  { main: minimal ? '#00000030' : getButtonMainColor(theme, color) },
+                  undefined,
+                  undefined
+                )};
               border-color: ${({ flat, theme, color }) =>
                 flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
 
@@ -212,17 +224,28 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             }
           }
         `
-      : css`
+      : readOnly
+      ? css`
           ${ReadOnlyElement};
-        `}
+        `
+      : undefined}
 
   ${({ active, flat, theme, color }: IReqoreButtonStyle) =>
     active &&
     css`
+      cursor: pointer;
       background-color: ${changeLightness(getButtonMainColor(theme, color), 0.1)};
       color: ${getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
       border-color: ${flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.175)};
 
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: ${flat
+          ? undefined
+          : changeLightness(getButtonMainColor(theme, color), 0.275)};
+      }
+
       ${ActiveIconScale}
     `}
 
@@ -264,7 +287,7 @@ export const StyledButtonContent = styled.div`
 `;
 
 export interface IReqoreButtonBadgeProps extends IWithReqoreSize {
-  color?: string;
+  color?: TReqoreEffectColor;
   content?: TReqoreBadge | TReqoreBadge[];
 }
 
@@ -275,7 +298,8 @@ export const ButtonBadge = memo((props: IReqoreButtonBadgeProps) => {
         key={key}
         size={getOneLessSize(size)}
         badge
-        color={color ? `${color}70` : undefined}
+        color={color}
+        minimal={!(content as IReqoreTagProps)?.effect?.gradient}
         {...(typeof content === 'string' || typeof content === 'number'
           ? { label: content }
           : content)}
@@ -342,7 +366,7 @@ const ReqoreButton = memo(
       // If color or intent was specified, set the color
       const customColor = intent ? theme.main : changeLightness(theme.main, 0.07);
       const _flat = minimal ? flat : flat !== false;
-      const color = customColor
+      const color: TReqoreHexColor = customColor
         ? minimal
           ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
           : getReadableColorFrom(customColor, true)

package/src/components/Collection/item.tsx

@@ -182,7 +182,7 @@ export const ReqoreCollectionItem = ({
           { icon: 'CloseLine', onClick: handleItemClick },
         ] as IReqorePanelAction[])
       : size(actions)
-      ? [{ icon: 'More2Fill', actions }]
+      ? [{ icon: 'More2Fill', actions, minimal: true, flat: true }]
       : undefined;
 
     return (

package/src/components/Dropdown/list.tsx

@@ -3,7 +3,6 @@ import { IReqoreComponent } from '../../types/global';
 import ReqoreInput from '../Input';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
-import { ReqoreSpacer } from '../Spacer';
 
 export type TDropdownItemOnClick = (item: IReqoreDropdownItem) => void;
 export interface IReqoreDropdownItem extends Omit<IReqoreMenuItemProps, 'onClick'> {
@@ -86,7 +85,6 @@ const ReqoreDropdownList = memo(
               placeholder='Filter'
               onClearClick={() => setQuery('')}
             />
-            <ReqoreSpacer height={10} />
           </>
         )}
         {filteredItems.map((item: IReqoreDropdownItem, index: number) => (

package/src/components/Effect/index.tsx

@@ -1,24 +1,43 @@
 import { reduce } from 'lodash';
+import { mix } from 'polished';
 import { HTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 import { TEXT_FROM_SIZE, TSizes, WEIGHT_TO_NUMBER } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import {
-  changeDarkness,
   changeLightness,
-  getColorFromMaybeIntentOrString,
+  getColorFromMaybeString,
+  getReadableColorFrom,
 } from '../../helpers/colors';
 
+export type TReqoreEffectColorManipulation = 'darken' | 'lighten';
+export type TReqoreEffectColorManipulationMultiplier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export type TReqoreHexColor = `#${string}`;
+export type TReqoreColor = TReqoreHexColor | 'transparent';
+export type TReqoreEffectColor =
+  | TReqoreColor
+  | TReqoreIntent
+  | `${TReqoreIntent}:${TReqoreEffectColorManipulation}`
+  | `${TReqoreIntent}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`
+  | 'main'
+  | `main:${TReqoreEffectColorManipulation}`
+  | `main:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`;
+export type TReqoreEffectColorList = [
+  'main' | TReqoreIntent | TReqoreColor,
+  TReqoreEffectColorManipulation | undefined,
+  TReqoreEffectColorManipulationMultiplier | undefined
+];
+
 export interface IReqoreEffect {
   gradient?: {
     type?: 'linear' | 'radial';
     shape?: 'circle' | 'ellipse';
-    colors: { [key: number]: string };
+    colors: Record<number, TReqoreEffectColor>;
     direction?: string;
-    borderColor?: TReqoreIntent | string;
+    borderColor?: TReqoreEffectColor;
   };
   noWrap?: boolean;
-  color?: string;
+  color?: TReqoreEffectColor;
   spaced?: number;
   weight?: number | 'thin' | 'light' | 'normal' | 'bold' | 'thick';
   uppercase?: boolean;
@@ -26,7 +45,7 @@ export interface IReqoreEffect {
   textAlign?: 'left' | 'center' | 'right';
   glow?: {
     size?: number;
-    color: TReqoreIntent | string;
+    color: TReqoreEffectColor;
     inset?: boolean;
     blur?: number;
     useBorder?: boolean;
@@ -55,13 +74,16 @@ export const StyledEffect = styled.span`
       effect.gradient.colors,
       (colorsString, color, percentage) =>
         `${colorsString}, ${
-          color === 'transparent' || !effect.interactive ? color : changeLightness(color, 0.03)
+          color === 'transparent' || !effect.interactive
+            ? getColorFromMaybeString(theme, color)
+            : changeLightness(getColorFromMaybeString(theme, color), 0.03)
         } ${percentage}%`,
       ''
     );
     const gradientColorsActive = reduce(
       effect.gradient.colors,
-      (colorsString, color, percentage) => `${colorsString}, ${color} ${percentage}%`,
+      (colorsString, color, percentage) =>
+        `${colorsString}, ${getColorFromMaybeString(theme, color)} ${percentage}%`,
       ''
     );
 
@@ -72,28 +94,55 @@ export const StyledEffect = styled.span`
     const gradient = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColors})`;
     const gradientActive = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColorsActive})`;
 
+    // Determine the text color based on the gradient colors
+    let color: TReqoreHexColor | undefined;
+    // Only works if there are 2 colors not more and color was not provided
+    if (!effect.color) {
+      if (Object.keys(effect.gradient.colors).length === 2) {
+        const gradientColor1: TReqoreHexColor = getColorFromMaybeString(
+          theme,
+          Object.values(effect.gradient.colors)[0]
+        );
+        const gradientColor2: TReqoreHexColor = getColorFromMaybeString(
+          theme,
+          Object.values(effect.gradient.colors)[1]
+        );
+
+        color = mix(
+          0.5,
+          gradientColor1 === '#00000000' ? theme.main : gradientColor1,
+          gradientColor2 === '#00000000' ? theme.main : gradientColor2
+        ) as TReqoreHexColor;
+      }
+    }
+
     return css`
       background-image: ${gradient};
       // Get the first color from the colors object
       border-color: ${changeLightness(
-        getColorFromMaybeIntentOrString(
+        getColorFromMaybeString(
           theme,
-          effect.gradient.borderColor ||
-            changeDarkness(Object.values(effect.gradient.colors)[0], 0.05)
+          effect.gradient.borderColor || Object.values(effect.gradient.colors)[0]
         ),
         0.04
       )} !important;
 
+      ${color &&
+      css`
+        color: ${getReadableColorFrom(getColorFromMaybeString(theme, color), false)} !important;
+      `}
+
       ${effect.interactive &&
       css`
+        cursor: pointer;
+
         &:hover,
         &:focus,
         &:active {
           background-image: ${gradientActive};
-          border-color: ${getColorFromMaybeIntentOrString(
+          border-color: ${getColorFromMaybeString(
             theme,
-            effect.gradient.borderColor ||
-              changeDarkness(Object.values(effect.gradient.colors)[0], 0.05)
+            effect.gradient.borderColor || Object.values(effect.gradient.colors)[0]
           )} !important;
         }
       `}
@@ -108,13 +157,13 @@ export const StyledEffect = styled.span`
     if (effect.glow.useBorder) {
       return css`
         border: ${effect.glow.size || 2}px solid
-          ${getColorFromMaybeIntentOrString(theme, effect.glow.color)} !important;
+          ${getColorFromMaybeString(theme, effect.glow.color)} !important;
       `;
     }
 
     return css`
       box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}
-        ${effect.glow.size || 2}px ${getColorFromMaybeIntentOrString(theme, effect.glow.color)};
+        ${effect.glow.size || 2}px ${getColorFromMaybeString(theme, effect.glow.color)};
     `;
   }}
 
@@ -154,10 +203,10 @@ export const StyledEffect = styled.span`
         `
       : undefined}
 
-  ${({ effect }: IReqoreTextEffectProps) =>
+  ${({ effect, theme }: IReqoreTextEffectProps) =>
     effect && effect.color
       ? css`
-          color: ${effect.color} !important;
+          color: ${getColorFromMaybeString(theme, effect.color)} !important;
         `
       : undefined}
 

package/src/components/Header/index.tsx

@@ -2,7 +2,6 @@ import { memo, useMemo } from 'react';
 import styled from 'styled-components';
 import { HEADER_SIZE_TO_NUMBER, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import { getReadableColor } from '../../helpers/colors';
 import { isStringSize } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IWithReqoreEffect } from '../../types/global';
@@ -23,8 +22,7 @@ export interface IReqoreHeadingStyle extends IReqoreHeadingProps {
 export const StyledHeader = styled(StyledTextEffect)`
   margin: 0;
   padding: 0;
-  color: ${({ theme, intent }) =>
-    intent ? theme.intents[intent] : getReadableColor(theme, undefined, undefined, true)};
+  color: ${({ theme, intent }) => (intent ? theme.intents[intent] : 'inherit')};
 `;
 
 export const ReqoreHeading = memo(

package/src/components/Input/index.tsx

@@ -41,6 +41,7 @@ export interface IReqoreInputProps
   flat?: boolean;
   rounded?: boolean;
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+  wrapperStyle?: React.CSSProperties;
 }
 
 export interface IReqoreInputStyle extends IReqoreInputProps {
@@ -150,6 +151,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       readOnly,
       customTheme,
       intent,
+      wrapperStyle,
       ...rest
     }: IReqoreInputProps,
     ref
@@ -173,6 +175,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
         ref={targetRef}
         readOnly={readOnly}
         disabled={rest.disabled}
+        style={wrapperStyle}
       >
         {icon && (
           <StyledIconWrapper _size={size}>

package/src/components/InternalPopover/index.tsx

@@ -9,6 +9,7 @@ import PopoverContext from '../../context/PopoverContext';
 import { fadeIn } from '../../helpers/animations';
 import { getReadableColor } from '../../helpers/colors';
 import { StyledBackdrop } from '../Drawer';
+import { TReqoreHexColor } from '../Effect';
 
 const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
   width: 10px;
@@ -37,7 +38,7 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   max-height: ${({ maxHeight = '80vh' }) => maxHeight};
 
   ${({ theme, opaque }) => {
-    const defaultColor: string = theme.popover?.main || theme.main;
+    const defaultColor: TReqoreHexColor = theme.popover?.main || theme.main;
 
     if (opaque) {
       return css`

package/src/components/Menu/divider.tsx

@@ -15,7 +15,7 @@ export interface IReqoreMenuDividerProps
 const StyledMenuDivider = styled(StyledTextEffect)`
   width: 100%;
   padding: ${({ size }) => `${PADDING_FROM_SIZE[size]}px 0`};
-  background-color: ${({ theme }) => theme.main};
+  background-color: transparent;
 
   color: ${({ theme }) => getReadableColor(theme, undefined, undefined)};
 `;

package/src/components/Menu/index.tsx

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { RADIUS_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import { changeLightness } from '../../helpers/colors';
+import { changeDarkness, changeLightness, getMainBackgroundColor } from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
-import { IReqoreComponent } from '../../types/global';
-import { StyledReqoreControlGroup } from '../ControlGroup';
+import { IReqoreComponent, IWithReqoreMinimal, IWithReqoreTransparent } from '../../types/global';
 
-export interface IReqoreMenuProps extends IReqoreComponent, React.HTMLAttributes<HTMLDivElement> {
+export interface IReqoreMenuProps
+  extends IReqoreComponent,
+    IWithReqoreMinimal,
+    IWithReqoreTransparent,
+    React.HTMLAttributes<HTMLDivElement> {
   children: any;
   position?: 'left' | 'right';
   width?: string;
@@ -16,6 +20,7 @@ export interface IReqoreMenuProps extends IReqoreComponent, React.HTMLAttributes
   intent?: TReqoreIntent;
   wrapText?: boolean;
   flat?: boolean;
+  rounded?: boolean;
 }
 
 export interface IReqoreMenuStyle extends IReqoreMenuProps {
@@ -30,7 +35,9 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
   overflow-y: auto;
   overflow-x: hidden;
 
-  background-color: ${({ theme }) => theme.main};
+  background-color: ${({ theme, transparent }) =>
+    transparent ? 'transparent' : changeDarkness(getMainBackgroundColor(theme), 0.03)};
+  border-radius: ${({ rounded }) => (rounded ? `${RADIUS_FROM_SIZE['normal']}px` : `0`)};
 
   ${({ theme, position }) =>
     position &&
@@ -42,7 +49,7 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
     padding-${position === 'left' ? 'right' : 'left'}: 10px;
   `}
 
-  ${StyledReqoreControlGroup}:not(:last-child) {
+  > *:not(:last-child) {
     margin-bottom: 5px;
   }
 `;
@@ -58,6 +65,7 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
       intent,
       wrapText,
       flat = true,
+      minimal,
       ...rest
     }: IReqoreMenuProps,
     ref: any
@@ -75,7 +83,8 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
                   _popoverId,
                   customTheme: child?.props.customTheme || theme,
                   wrap: wrapText,
-                  flat: child?.props.flat || flat,
+                  flat: 'flat' in child?.props ? child.props.flat : flat,
+                  minimal: 'minimal' in child?.props ? child.props.minimal : minimal,
                 })
               : null;
           })}

package/src/components/Message/index.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { getColorFromMaybeString } from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import {
   IReqoreIntent,
@@ -132,7 +133,9 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
               <ReqoreHeading
                 size={size}
                 customTheme={
-                  rest.effect?.color ? { text: { color: rest.effect.color } } : undefined
+                  rest.effect?.color
+                    ? { text: { color: getColorFromMaybeString(theme, rest.effect.color) } }
+                    : undefined
                 }
               >
                 {title}

package/src/components/Notifications/notification.tsx

@@ -149,6 +149,9 @@ export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
   ${({ clickable, theme, intent, type }) =>
     clickable &&
     css`
+      margin-top: unset;
+      height: unset;
+
       .reqore-icon {
         transform: scale(0.85);
       }

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -459,7 +459,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               ) : (
                 label
               )}
-              {badge && (
+              {badge || badge === 0 ? (
                 <>
                   <ButtonBadge
                     color={changeLightness(theme.main, 0.18)}
@@ -468,7 +468,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                   />
                   <ReqoreSpacer width={PADDING_FROM_SIZE.normal} />
                 </>
-              )}
+              ) : null}
             </StyledPanelTitleHeader>
             <ReqoreControlGroup>
               {actions.map(renderActions)}

package/src/components/Table/row.tsx

@@ -13,6 +13,7 @@ import { ReqorePopover } from '../..';
 import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
+import { TReqoreColor, TReqoreHexColor } from '../Effect';
 import { ReqoreH4 } from '../Header';
 import ReqoreIcon from '../Icon';
 import { ReqoreP } from '../Paragraph';
@@ -102,7 +103,7 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
     disabled,
     hovered,
   }: IReqoreTableCellStyle) => {
-    const getBackgroundColor = () => {
+    const getBackgroundColor = (): TReqoreColor => {
       let color = theme.main;
       let opacity = 0;
       // Is there any intent
@@ -147,11 +148,11 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
         ? 'transparent'
         : rgba(getBackgroundColor(), 0.8)};
       color: ${getReadableColorFrom(
-        backgroundColor === 'transparent' ? theme.main : getBackgroundColor(),
+        backgroundColor === 'transparent' ? theme.main : backgroundColor,
         !hovered
       )};
       border-color: ${changeLightness(
-        backgroundColor === 'transparent' ? theme.main : getBackgroundColor(),
+        backgroundColor === 'transparent' ? theme.main : backgroundColor,
         0.1
       )};
       transition: background-color 0.2s ease-out;
@@ -214,8 +215,10 @@ const ReqoreTableRow = ({
       let intent: TReqoreIntent = intentOrColor?.startsWith('#')
         ? undefined
         : (intentOrColor as TReqoreIntent);
-      let color: string =
-        intentOrColor?.startsWith('#') && type === 'tag' ? intentOrColor : undefined;
+      let color: TReqoreHexColor =
+        intentOrColor?.startsWith('#') && type === 'tag'
+          ? (intentOrColor as TReqoreHexColor)
+          : undefined;
       // Render content based on the type
       switch (type) {
         case 'time-ago':

package/src/components/Tabs/list.tsx

@@ -203,9 +203,11 @@ const ReqoreTabsList = ({
                     label: getMoreLabel(item, activeTab),
                     active: !!isTabHidden(item, activeTab),
                     activeIntent: activeTabIntent,
-                    customTheme: {
-                      main: currentTabColor,
-                    },
+                    customTheme: !!isTabHidden(item, activeTab)
+                      ? {
+                          main: currentTabColor,
+                        }
+                      : theme,
                     vertical,
                     flat,
                     size,