@qoretechnologies/reqore 0.28.1 → 0.28.3

package/src/components/ControlGroup/index.tsx

@@ -36,6 +36,7 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
       ? css`
           > .reqore-control,
           > .reqore-control-wrapper,
+          > .reqore-tag,
           > * {
             &:not(:last-child) {
               margin-bottom: ${({ stack }) => (!stack ? '5px' : undefined)};
@@ -67,6 +68,7 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
       : css`
           > .reqore-control,
           > .reqore-control-wrapper,
+          > .reqore-tag,
           > * {
             &:not(:last-child) {
               margin-right: ${({ stack }) => (!stack ? '5px' : undefined)};

package/src/components/Dropdown/list.tsx

@@ -3,10 +3,10 @@ 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'> {
+export interface IReqoreDropdownItem
+  extends Omit<IReqoreMenuItemProps, 'onClick' | 'rightIcon' | 'onRightIconClick'> {
   value: any;
   label?: string;
   onClick?: TDropdownItemOnClick;
@@ -86,7 +86,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

@@ -1,7 +1,13 @@
 import { rgba } from 'polished';
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { RADIUS_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import {
+  PADDING_FROM_SIZE,
+  RADIUS_FROM_SIZE,
+  SIZE_TO_PX,
+  TEXT_FROM_SIZE,
+  TSizes,
+} from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
@@ -41,6 +47,7 @@ export interface IReqoreInputProps
   flat?: boolean;
   rounded?: boolean;
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+  wrapperStyle?: React.CSSProperties;
 }
 
 export interface IReqoreInputStyle extends IReqoreInputProps {
@@ -75,7 +82,7 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   width: 100%;
   flex: 1;
   margin: 0;
-  padding: 0 7px;
+  padding: ${({ _size }) => PADDING_FROM_SIZE[_size] / 2}px 7px;
   padding-right: ${({ clearable, _size }) => (clearable ? SIZE_TO_PX[_size] : 7)}px;
   padding-left: ${({ hasIcon, _size }) => (hasIcon ? SIZE_TO_PX[_size] : 7)}px;
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
@@ -150,6 +157,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       readOnly,
       customTheme,
       intent,
+      wrapperStyle,
       ...rest
     }: IReqoreInputProps,
     ref
@@ -173,6 +181,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/Menu/item.tsx

@@ -98,10 +98,11 @@ const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
           disabled={disabled}
           intent={intent}
           icon={icon}
+          rightIcon={onRightIconClick ? undefined : rightIcon}
         >
           {label || children}
         </ReqoreButton>
-        {rightIcon && (
+        {rightIcon && onRightIconClick ? (
           <ReqoreButton
             icon={rightIcon}
             flat={flat}
@@ -114,7 +115,7 @@ const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
             intent={intent}
             active={selected && !!onRightIconClick}
           />
-        )}
+        ) : null}
       </ReqoreControlGroup>
     );
   }

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

package/src/components/Tag/index.tsx

@@ -13,7 +13,12 @@ import {
 } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ThemeContext from '../../context/ThemeContext';
-import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import {
+  changeLightness,
+  getColorFromMaybeString,
+  getReadableColor,
+  getReadableColorFrom,
+} from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
 import {
@@ -24,7 +29,7 @@ import {
   IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { StyledEffect, TReqoreEffectColor, TReqoreHexColor } from '../Effect';
 import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
@@ -45,7 +50,7 @@ export interface IReqoreTagProps
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
-  color?: string;
+  color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
   badge?: boolean;
@@ -57,6 +62,7 @@ export interface IReqoreTagStyle extends IReqoreTagProps {
   theme: IReqoreTheme;
   removable?: boolean;
   interactive?: boolean;
+  color?: TReqoreHexColor;
 }
 
 export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
@@ -183,14 +189,16 @@ const StyledButtonWrapper = styled.span<IReqoreTagStyle>`
   align-items: center;
   transition: all 0.2s ease-out;
 
-  ${({ color }) =>
+  ${({ color, effect }) =>
     css`
       .reqore-icon {
         transform: scale(0.85);
       }
       &:hover {
         cursor: pointer;
-        background-color: ${color ? changeLightness(color, 0.09) : rgba('#000000', 0.2)};
+        background-color: ${color && !effect?.gradient
+          ? changeLightness(color, 0.09)
+          : rgba('#000000', 0.2)};
 
         .reqore-icon {
           transform: scale(1);
@@ -228,7 +236,9 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
-    let customColor = intent ? theme.intents[intent] : color;
+    let customColor: TReqoreHexColor = intent
+      ? theme.intents[intent]
+      : getColorFromMaybeString(theme, color);
     customColor = minimal ? `${customColor || '#000000'}40` : customColor;
 
     return (
@@ -301,6 +311,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                     color: customColor,
                     className: 'reqore-tag-action',
                     onClick: action.onClick,
+                    effect: rest.effect,
                   }}
                   {...(action.tooltip
                     ? typeof action.tooltip === 'string'
@@ -322,6 +333,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               color: customColor,
               className: 'reqore-tag-remove',
               onClick: onRemoveClick,
+              effect: rest.effect,
             }}
             noWrapper
             content='Remove'

package/src/components/Textarea/index.tsx

@@ -41,6 +41,7 @@ export interface IReqoreTextareaProps
   rounded?: boolean;
   flat?: boolean;
   onClearClick?: () => any;
+  wrapperStyle?: React.CSSProperties;
 }
 
 export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
@@ -132,6 +133,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       customTheme,
       intent,
       rounded = true,
+      wrapperStyle,
       ...rest
     }: IReqoreTextareaProps,
     ref: any
@@ -149,6 +151,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         fluid={fluid}
         _size={size}
         theme={theme}
+        style={wrapperStyle}
       >
         <StyledTextarea
           {...rest}

package/src/constants/colors.ts

@@ -1,5 +1,5 @@
 export const Colors = {
-  DARK: '#222222',
+  DARK: '#000000',
   LIGHT: '#ffffff',
   BLUE: '#0E5A8A',
   GREEN: '#0A6640',