@qoretechnologies/reqore 0.28.1 → 0.28.2

package/dist/helpers/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/helpers/colors.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAElF,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,EAC5B,OAAO,CAAC,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,OAAO,EAChB,QAAQ,CAAC,EAAE,MAAM,KACd,MAaJ,CAAC;AAEF,eAAO,MAAM,oBAAoB,SACzB,MAAM,QACN,OAAO,YACH,MAAM,WACP,MAAM,WAMhB,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAO,MAAM,WAM1C,CAAC;AAEF,eAAO,MAAM,YAAY,cAAe,MAAM,YAI7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,KAAK,MAG9B,CAAC;AAI1C,eAAO,MAAM,eAAe,UAAW,MAAM,cAAc,MAAM,KAAG,MAMnE,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,MAAM,cAAc,MAAM,KAAG,MAC+B,CAAC;AAEnG,eAAO,MAAM,iBAAiB,8CAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAS,MAAM,KAAG,OAE/C,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,YAAY,KAAG,YAiChD,CAAC;AAEF,eAAO,MAAM,WAAW,YAAa,MAAM,SAAS,YAAY,eAAe,GAAG,iBAkBjF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,YAAY,WAAW,aAAa,WAMhF,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,YAAY,KAAG,MAC1B,CAAC;AAEpC,eAAO,MAAM,+BAA+B,UACnC,YAAY,UACX,aAAa,GAAG,MAAM,KAC7B,MAUF,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/helpers/colors.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAA0B,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEnG,OAAO,EAAmB,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAElF,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,EAC5B,OAAO,CAAC,EAAE,eAAe,EACzB,MAAM,CAAC,EAAE,eAAe,EACxB,MAAM,CAAC,EAAE,OAAO,EAChB,QAAQ,CAAC,EAAE,eAAe,KACvB,eAaJ,CAAC;AAEF,eAAO,MAAM,oBAAoB,SACzB,eAAe,QACf,OAAO,YACH,eAAe,WAChB,eAAe,KACvB,eAKF,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAO,MAAM,WAM1C,CAAC;AAEF,eAAO,MAAM,YAAY,cAAe,eAAe,KAAG,OAIzD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,KAAK,eAG9B,CAAC;AAI1C,eAAO,MAAM,eAAe,UAAW,eAAe,cAAc,MAAM,KAAG,eAM5E,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,eAAe,cAAc,MAAM,KAAG,eAKjE,CAAC;AAEZ,eAAO,MAAM,iBAAiB,8CAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAS,MAAM,KAAG,OAE/C,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,YAAY,KAAG,YAiChD,CAAC;AAEF,eAAO,MAAM,WAAW,YAAa,MAAM,SAAS,YAAY,eAAe,GAAG,iBAkBjF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,YAAY,WAAW,aAAa,iBAMhF,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,YAAY,KAAG,eAC1B,CAAC;AAEpC,eAAO,MAAM,uBAAuB,UAC3B,YAAY,SACZ,kBAAkB,KACxB,eAqCF,CAAC"}

package/dist/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.getColorFromMaybeIntentOrString = exports.getMainBackgroundColor = exports.getNotificationIntent = exports.mergeThemes = exports.buildTheme = exports.isValidSixCharHex = exports.getColorByBgColor = exports.changeDarkness = exports.changeLightness = exports.getMainColor = exports.shouldDarken = exports.percentToHexAlpha = exports.getReadableColorFrom = exports.getReadableColor = void 0;
+exports.getColorFromMaybeString = exports.getMainBackgroundColor = exports.getNotificationIntent = exports.mergeThemes = exports.buildTheme = exports.isValidSixCharHex = exports.getColorByBgColor = exports.changeDarkness = exports.changeLightness = exports.getMainColor = exports.shouldDarken = exports.percentToHexAlpha = exports.getReadableColorFrom = exports.getReadableColor = void 0;
 var lodash_1 = require("lodash");
 var polished_1 = require("polished");
 var colors_1 = require("../constants/colors");
@@ -49,7 +49,11 @@ var changeLightness = function (color, lightness) {
 };
 exports.changeLightness = changeLightness;
 var changeDarkness = function (color, lightness) {
-    return lightness ? ((0, exports.shouldDarken)(color) ? (0, polished_1.lighten)(lightness, color) : (0, polished_1.darken)(lightness, color)) : color;
+    return lightness
+        ? (0, exports.shouldDarken)(color)
+            ? (0, polished_1.lighten)(lightness, color)
+            : (0, polished_1.darken)(lightness, color)
+        : color;
 };
 exports.changeDarkness = changeDarkness;
 var getColorByBgColor = function (bgColor) {
@@ -60,7 +64,7 @@ var getColorByBgColor = function (bgColor) {
 };
 exports.getColorByBgColor = getColorByBgColor;
 var isValidSixCharHex = function (hex) {
-    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex);
+    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/.test(hex);
 };
 exports.isValidSixCharHex = isValidSixCharHex;
 var buildTheme = function (theme) {
@@ -121,14 +125,34 @@ var getMainBackgroundColor = function (theme) {
     return (0, exports.changeLightness)(theme.main, 0.02);
 };
 exports.getMainBackgroundColor = getMainBackgroundColor;
-var getColorFromMaybeIntentOrString = function (theme, intent) {
-    if (theme.intents[intent]) {
-        return theme.intents[intent];
+var getColorFromMaybeString = function (theme, color) {
+    if (!color) {
+        return undefined;
+    }
+    var _a = color.split(':'), providedColor = _a[0], shading = _a[1], _b = _a[2], multiplier = _b === void 0 ? 1 : _b;
+    if (providedColor === 'transparent') {
+        return '#00000000';
+    }
+    // First we need to get the actual color
+    var _color;
+    if (!providedColor || providedColor === 'main') {
+        _color = theme.main;
+    }
+    if (theme.intents[providedColor]) {
+        _color = theme.intents[providedColor];
+    }
+    if ((0, exports.isValidSixCharHex)(color)) {
+        _color = providedColor;
     }
-    if ((0, exports.isValidSixCharHex)(intent)) {
-        return intent;
+    if (shading) {
+        if (shading === 'lighten') {
+            _color = (0, polished_1.lighten)(0.1 * multiplier, _color);
+        }
+        else if (shading === 'darken') {
+            _color = (0, polished_1.darken)(0.1 * multiplier, _color);
+        }
     }
-    return theme.main;
+    return _color;
 };
-exports.getColorFromMaybeIntentOrString = getColorFromMaybeIntentOrString;
+exports.getColorFromMaybeString = getColorFromMaybeString;
 //# sourceMappingURL=colors.js.map

package/dist/helpers/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/helpers/colors.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/helpers/colors.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useTheme.d.ts

@@ -1,3 +1,11 @@
+import { TReqoreEffectColor } from '../components/Effect';
 import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
-export declare const useReqoreTheme: (element: string, customTheme?: Partial<IReqoreTheme>, intent?: TReqoreIntent) => IReqoreTheme;
+export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' | 'text'>> {
+    main?: TReqoreEffectColor;
+    text?: {
+        color?: TReqoreEffectColor;
+        dim?: boolean;
+    };
+}
+export declare const useReqoreTheme: (element: string, customTheme?: IReqoreCustomTheme, intent?: TReqoreIntent) => IReqoreTheme;
 //# sourceMappingURL=useTheme.d.ts.map

package/dist/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIjE,eAAO,MAAM,cAAc,YAChB,MAAM,gBACF,QAAQ,YAAY,CAAC,WACzB,aAAa,iBAUvB,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIjE,MAAM,WAAW,kBAAmB,SAAQ,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACtF,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,kBAAkB,CAAC;QAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;CACH;AAED,eAAO,MAAM,cAAc,YAChB,MAAM,gBACF,kBAAkB,WACtB,aAAa,iBAkBvB,CAAC"}

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.1",
+  "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;
   }
@@ -280,7 +287,7 @@ export const StyledButtonContent = styled.div`
 `;
 
 export interface IReqoreButtonBadgeProps extends IWithReqoreSize {
-  color?: string;
+  color?: TReqoreEffectColor;
   content?: TReqoreBadge | TReqoreBadge[];
 }
 
@@ -291,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)}
@@ -358,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/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,20 +94,44 @@ export const StyledEffect = styled.span`
     const gradient = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColors})`;
     const gradientActive = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColorsActive})`;
 
-    console.log(effect);
+    // 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;
@@ -94,10 +140,9 @@ export const StyledEffect = styled.span`
         &: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;
         }
       `}
@@ -112,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)};
     `;
   }}
 
@@ -158,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/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 {

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':