@redis-ui/components 37.0.0 → 38.1.4

package/dist/Tooltip/Tooltip.d.ts

@@ -1,18 +1,18 @@
 import { TooltipProps } from './Tooltip.types';
 declare const Tooltip: (({ children, openDelayDuration, open, onOpenChange, defaultOpen, withButton, disabled, interactive, ...restProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, openDelayDuration, open, disabled, onOpenChange, defaultOpen, interactive }: import("./components/Compose/Compose.types").TooltipComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Content: (({ content, textColor, ...composeProps }: import("./components/Content/Content.types").TooltipContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    Content: (({ content, ...composeProps }: import("./components/Content/Content.types").TooltipContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
         Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, disableInteractionHelper, portal, ...restProps }: import("./components/Content/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
         Text: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
     };
     Trigger: ({ withButton, ...restProps }: import("./components/Trigger/Trigger.types").TooltipTriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Card: (({ text, title, textColor, actionButtonText, actionButtonHandler, link, linkText, ...composeProps }: import("./components/TooltipCard").TooltipCardProps) => import("react/jsx-runtime").JSX.Element) & {
+    Card: (({ text, title, actionButtonText, actionButtonHandler, link, linkText, ...composeProps }: import("./components/TooltipCard").TooltipCardProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...restProps }: import("./components/TooltipCard/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
         Header: ((props: import("../Popover/components/Content/components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: (props: import("../Popover/components/Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
             Title: ({ children, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
         };
-        Body: (({ text, textColor, ...restProps }: import("../Popover/components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
+        Body: (({ text, ...restProps }: import("../Popover/components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: (props: import("../Popover/components/Content/components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
             Text: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
         };

package/dist/Tooltip/components/Content/Content.cjs

@@ -5,14 +5,12 @@ const Compose = require("./components/Compose/Compose.cjs");
 const Text = require("./components/Text/Text.cjs");
 const Content = Object.assign(({
   content,
-  textColor,
   ...composeProps
 }) => {
   if (!content) return null;
   return jsxRuntime.jsxRuntimeExports.jsx(Content.Compose, {
     ...composeProps,
-    children: typeof content === "string" || textColor ? jsxRuntime.jsxRuntimeExports.jsx(Content.Text, {
-      color: textColor,
+    children: typeof content === "string" ? jsxRuntime.jsxRuntimeExports.jsx(Content.Text, {
       children: content
     }) : content
   });

package/dist/Tooltip/components/Content/Content.d.ts

@@ -1,5 +1,5 @@
 import { TooltipContentProps } from './Content.types';
-declare const Content: (({ content, textColor, ...composeProps }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
+declare const Content: (({ content, ...composeProps }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
     Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, disableInteractionHelper, portal, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
     Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/Tooltip/components/Content/Content.js

@@ -3,14 +3,12 @@ import Compose from "./components/Compose/Compose.js";
 import Text from "./components/Text/Text.js";
 const Content = Object.assign(({
   content,
-  textColor,
   ...composeProps
 }) => {
   if (!content) return null;
   return jsxRuntimeExports.jsx(Content.Compose, {
     ...composeProps,
-    children: typeof content === "string" || textColor ? jsxRuntimeExports.jsx(Content.Text, {
-      color: textColor,
+    children: typeof content === "string" ? jsxRuntimeExports.jsx(Content.Text, {
       children: content
     }) : content
   });

package/dist/Tooltip/components/Content/Content.types.d.ts

@@ -1,7 +1,5 @@
 import { ReactNode } from 'react';
-import { Theme } from '@redislabsdev/redis-ui-styles';
 import { ComposeProps } from './components/Compose/Compose.types';
 export type TooltipContentProps = Omit<ComposeProps, 'children' | 'title' | 'content'> & {
     content?: ReactNode;
-    textColor?: keyof Theme['semantic']['color']['text'];
 };

package/dist/Tooltip/components/Content/components/Compose/Compose.style.cjs

@@ -31,7 +31,7 @@ const Content = _styled__default.default(index.Content).withConfig({
 }) => {
   const theme = redisUiStyles.useTheme();
   const tooltipTheme = theme.components.tooltip;
-  const bgColor = $backgroundColor && theme.semantic.color.background[$backgroundColor] || tooltipTheme.bgColor;
+  const bgColor = $backgroundColor || tooltipTheme.bgColor;
   const triggerOffset = `(${tooltipTheme.arrow.height} + ${sideOffset}px)`;
   const vertOffset = `calc(-1 * (var(--radix-tooltip-trigger-height) + ${triggerOffset}))`;
   const horzOffset = `calc(-1 * (var(--radix-tooltip-trigger-width) + ${triggerOffset}))`;

package/dist/Tooltip/components/Content/components/Compose/Compose.style.d.ts

@@ -3,7 +3,7 @@ import * as Tooltip from '@radix-ui/react-tooltip';
 export declare const Arrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tooltip.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
 export declare const InteractionHelper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {
-    $backgroundColor?: "transparent" | "neutral100" | "neutral200" | "neutral300" | "neutral400" | "neutral500" | "neutral600" | "neutral700" | "neutral800" | "primary50" | "primary100" | "primary200" | "primary300" | "primary400" | "primary500" | "primary600" | "primary700" | "success100" | "success200" | "success300" | "success500" | "success600" | "success700" | "success800" | "notice100" | "notice200" | "notice300" | "notice500" | "notice600" | "notice700" | "notice800" | "informative50" | "informative100" | "informative200" | "informative300" | "informative400" | "informative500" | "informative600" | "informative700" | "attention100" | "attention200" | "attention300" | "attention500" | "attention600" | "attention700" | "attention800" | "danger100" | "danger200" | "danger300" | "danger500" | "danger600" | "danger700" | "danger800" | undefined;
+    $backgroundColor?: string | undefined;
     $maxWidth?: string | undefined;
     $interactive?: boolean | undefined;
 }, never>;

package/dist/Tooltip/components/Content/components/Compose/Compose.style.js

@@ -27,7 +27,7 @@ const Content = _styled(Content2).withConfig({
 }) => {
   const theme = useTheme();
   const tooltipTheme = theme.components.tooltip;
-  const bgColor = $backgroundColor && theme.semantic.color.background[$backgroundColor] || tooltipTheme.bgColor;
+  const bgColor = $backgroundColor || tooltipTheme.bgColor;
   const triggerOffset = `(${tooltipTheme.arrow.height} + ${sideOffset}px)`;
   const vertOffset = `calc(-1 * (var(--radix-tooltip-trigger-height) + ${triggerOffset}))`;
   const horzOffset = `calc(-1 * (var(--radix-tooltip-trigger-width) + ${triggerOffset}))`;

package/dist/Tooltip/components/Content/components/Compose/Compose.types.d.ts

@@ -1,9 +1,8 @@
-import { Theme } from '@redislabsdev/redis-ui-styles';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { ComposeElementProps } from '../../../../../Helpers/common.types';
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 export interface ComposeProps extends ComposeElementProps {
-    backgroundColor?: keyof Theme['semantic']['color']['background'];
+    backgroundColor?: string;
     placement?: TooltipPlacement;
     sideOffset?: number;
     maxWidth?: string;

package/dist/Tooltip/components/Content/components/Text/Text.styles.cjs

@@ -8,10 +8,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Text = _styled__default.default(Typography.default.Body).withConfig({
   displayName: "Textstyles__Text",
   componentId: "RedisUI__sc-2fcqih-0"
-})(["color:", ";"], ({
-  color
-}) => {
-  const theme = redisUiStyles.useTheme().components.tooltip;
-  return color ? void 0 : theme.textColor;
-});
+})(["color:", ";"], () => redisUiStyles.useTheme().components.tooltip.textColor);
 exports.Text = Text;

package/dist/Tooltip/components/Content/components/Text/Text.styles.d.ts

@@ -1 +1 @@
-export declare const Text: import("styled-components").StyledComponent<({ size, variant, component, color, ellipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Tooltip/components/Content/components/Text/Text.styles.js

@@ -4,12 +4,7 @@ import Typography from "../../../../../Typography/Typography.js";
 const Text = _styled(Typography.Body).withConfig({
   displayName: "Textstyles__Text",
   componentId: "RedisUI__sc-2fcqih-0"
-})(["color:", ";"], ({
-  color
-}) => {
-  const theme = useTheme().components.tooltip;
-  return color ? void 0 : theme.textColor;
-});
+})(["color:", ";"], () => useTheme().components.tooltip.textColor);
 export {
   Text
 };

package/dist/Tooltip/components/TooltipCard/TooltipCard.cjs

@@ -8,7 +8,6 @@ const Footer = require("../../../Popover/components/Content/components/Footer/Fo
 const TooltipCard = Object.assign(({
   text,
   title,
-  textColor,
   actionButtonText,
   actionButtonHandler,
   link,
@@ -20,8 +19,7 @@ const TooltipCard = Object.assign(({
     children: [jsxRuntime.jsxRuntimeExports.jsx(TooltipCard.Header, {
       title
     }), jsxRuntime.jsxRuntimeExports.jsx(TooltipCard.Body, {
-      text,
-      textColor
+      text
     }), jsxRuntime.jsxRuntimeExports.jsx(TooltipCard.Footer, {
       ...{
         actionButtonText,

package/dist/Tooltip/components/TooltipCard/TooltipCard.d.ts

@@ -1,11 +1,11 @@
 import { TooltipCardProps } from './TooltipCard.types';
-declare const TooltipCard: (({ text, title, textColor, actionButtonText, actionButtonHandler, link, linkText, ...composeProps }: TooltipCardProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const TooltipCard: (({ text, title, actionButtonText, actionButtonHandler, link, linkText, ...composeProps }: TooltipCardProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
     Header: ((props: import("../../../Popover/components/Content/components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("../../../Popover/components/Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
         Title: ({ children, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
     };
-    Body: (({ text, textColor, ...restProps }: import("../../../Popover/components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
+    Body: (({ text, ...restProps }: import("../../../Popover/components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("../../../Popover/components/Content/components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
         Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
     };

package/dist/Tooltip/components/TooltipCard/TooltipCard.js

@@ -6,7 +6,6 @@ import Footer from "../../../Popover/components/Content/components/Footer/Footer
 const TooltipCard = Object.assign(({
   text,
   title,
-  textColor,
   actionButtonText,
   actionButtonHandler,
   link,
@@ -18,8 +17,7 @@ const TooltipCard = Object.assign(({
     children: [jsxRuntimeExports.jsx(TooltipCard.Header, {
       title
     }), jsxRuntimeExports.jsx(TooltipCard.Body, {
-      text,
-      textColor
+      text
     }), jsxRuntimeExports.jsx(TooltipCard.Footer, {
       ...{
         actionButtonText,

package/dist/Tooltip/components/TooltipCard/TooltipCard.types.d.ts

@@ -2,5 +2,5 @@ import type { ComposeProps } from './components/Compose/Compose.types';
 import type { ContentHeaderProps } from '../../../Popover/components/Content/components/Header/Header.types';
 import type { ContentBodyProps } from '../../../Popover/components/Content/components/Body/Body.types';
 import type { ContentFooterProps } from '../../../Popover/components/Content/components/Footer/Footer.types';
-export interface TooltipCardProps extends Pick<ContentHeaderProps, 'title'>, Pick<ContentBodyProps, 'text' | 'textColor'>, Pick<ContentFooterProps, 'actionButtonText' | 'actionButtonHandler' | 'link' | 'linkText'>, Omit<ComposeProps, 'children' | 'title'> {
+export interface TooltipCardProps extends Pick<ContentHeaderProps, 'title'>, Pick<ContentBodyProps, 'text'>, Pick<ContentFooterProps, 'actionButtonText' | 'actionButtonHandler' | 'link' | 'linkText'>, Omit<ComposeProps, 'children' | 'title'> {
 }

package/dist/TreeView/components/TreeItem/components/Checkbox/Checkbox.style.d.ts

@@ -1,3 +1,3 @@
 export declare const FullWidthCheckbox: import("styled-components").StyledComponent<({ defaultChecked, checked, onCheckedChange, required, disabled, id, variant, ...restProps }: import("../../../../../Checkbox/components/Compose/Compose.types").CheckboxComposeProps & import("../../../../../Checkbox/components/Compose/Compose.types").RestCheckboxComposeProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const FullWidthCheckboxLabel: import("styled-components").StyledComponent<({ children, ...restProps }: import("../../../../../Checkbox/components/Label/Label.types").CheckboxLabelProps) => import("react/jsx-runtime").JSX.Element | null, any, {}, never>;
-export declare const TextEllipsis: import("styled-components").StyledComponent<({ size, variant, component, color, ellipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TextEllipsis: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Typography/Typography.d.ts

@@ -1,6 +1,6 @@
 declare const Typography: {
-    Heading: ({ size, color, ellipsis, ...restProps }: import("./components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
-    Body: ({ size, variant, component, color, ellipsis, ...restProps }: import("./components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ size, ellipsis, color, ...restProps }: import("./components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ size, variant, color, component, ellipsis, ...restProps }: import("./components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
     Code: ({ size, variant, color, ellipsis, ...restProps }: import("./components/Code/Code.types").CodeProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Typography;

package/dist/Typography/components/Body/Body.cjs

@@ -6,15 +6,15 @@ const Body_style = require("./Body.style.cjs");
 const Body = ({
   size,
   variant,
-  component,
   color,
+  component,
   ellipsis = false,
   ...restProps
 }) => jsxRuntime.jsxRuntimeExports.jsx(Body_style.Body, {
   as: component || "p",
   "$size": size || "M",
-  "$variant": variant || "regular",
   "$color": color,
+  "$variant": variant || "regular",
   "$ellipsis": ellipsis,
   ...restProps,
   ...useEllipsisTooltip.useEllipsisTooltip(restProps)

package/dist/Typography/components/Body/Body.d.ts

@@ -1,3 +1,3 @@
 import { BodyProps } from './Body.types';
-declare const Body: ({ size, variant, component, color, ellipsis, ...restProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Body: ({ size, variant, color, component, ellipsis, ...restProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Body;

package/dist/Typography/components/Body/Body.js

@@ -4,15 +4,15 @@ import { Body as Body$1 } from "./Body.style.js";
 const Body = ({
   size,
   variant,
-  component,
   color,
+  component,
   ellipsis = false,
   ...restProps
 }) => jsxRuntimeExports.jsx(Body$1, {
   as: component || "p",
   "$size": size || "M",
-  "$variant": variant || "regular",
   "$color": color,
+  "$variant": variant || "regular",
   "$ellipsis": ellipsis,
   ...restProps,
   ...useEllipsisTooltip(restProps)

package/dist/Typography/components/Body/Body.style.cjs

@@ -7,17 +7,25 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const useBodyStyles = ({
   $size = "M",
   $variant = "regular",
-  $color,
-  $ellipsis
+  $ellipsis,
+  $color
 } = {}) => {
   const theme = redisUiStyles.useTheme();
   const bodyTheme = theme.components.typography.body;
+  const getColorValue = (color) => {
+    if (!color) return "inherit";
+    if (color === "primary") return theme.components.typography.colors.primary;
+    if (color === "secondary") return theme.components.typography.colors.secondary;
+    return "inherit";
+  };
   return _styled.css`
-    color: ${$color ? theme.semantic.color.text[$color] || $color : "inherit"};
     font-family: ${bodyTheme.fontFamily};
     font-size: ${bodyTheme.fontSizes[$size]};
     font-weight: ${bodyTheme.fontWeight[$variant]};
     font-style: ${bodyTheme.fontStyle[$variant]};
+    ${$color && _styled.css`
+      color: ${getColorValue($color)};
+    `}
     ${$ellipsis && _styled.css`
       overflow: hidden;
       text-overflow: ellipsis;

package/dist/Typography/components/Body/Body.style.d.ts

@@ -1,3 +1,3 @@
 import { MapProps } from './Body.types';
-export declare const useBodyStyles: ({ $size, $variant, $color, $ellipsis }?: MapProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const useBodyStyles: ({ $size, $variant, $ellipsis, $color }?: MapProps) => import("styled-components").FlattenSimpleInterpolation;
 export declare const Body: import("styled-components").StyledComponent<"span", any, MapProps, never>;

package/dist/Typography/components/Body/Body.style.js

@@ -3,17 +3,25 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 const useBodyStyles = ({
   $size = "M",
   $variant = "regular",
-  $color,
-  $ellipsis
+  $ellipsis,
+  $color
 } = {}) => {
   const theme = useTheme();
   const bodyTheme = theme.components.typography.body;
+  const getColorValue = (color) => {
+    if (!color) return "inherit";
+    if (color === "primary") return theme.components.typography.colors.primary;
+    if (color === "secondary") return theme.components.typography.colors.secondary;
+    return "inherit";
+  };
   return css`
-    color: ${$color ? theme.semantic.color.text[$color] || $color : "inherit"};
     font-family: ${bodyTheme.fontFamily};
     font-size: ${bodyTheme.fontSizes[$size]};
     font-weight: ${bodyTheme.fontWeight[$variant]};
     font-style: ${bodyTheme.fontStyle[$variant]};
+    ${$color && css`
+      color: ${getColorValue($color)};
+    `}
     ${$ellipsis && css`
       overflow: hidden;
       text-overflow: ellipsis;

package/dist/Typography/components/Body/Body.types.d.ts

@@ -1,20 +1,20 @@
-import { Theme } from '@redislabsdev/redis-ui-styles';
 import React, { HTMLAttributes } from 'react';
 import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
 export type BodySizesType = 'XL' | 'L' | 'M' | 'S' | 'XS';
 export type VariantType = 'regular' | 'semiBold' | 'italic';
 export type ComponentType = 'p' | 'span' | 'div';
+export type ColorType = 'primary' | 'secondary';
 export interface BodyProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
     children: React.ReactNode;
     component?: ComponentType;
     size?: BodySizesType;
     variant?: VariantType;
     ellipsis?: boolean;
-    color?: keyof Theme['semantic']['color']['text'];
+    color?: ColorType;
 }
 export interface MapProps extends HTMLAttributes<HTMLElement> {
     $size?: BodyProps['size'];
     $variant?: BodyProps['variant'];
-    $color?: BodyProps['color'];
     $ellipsis?: boolean;
+    $color?: BodyProps['color'];
 }

package/dist/Typography/components/Code/Code.style.cjs

@@ -7,16 +7,24 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const useCodeStyles = ({
   $size = "M",
   $variant = "regular",
-  $color,
-  $ellipsis
+  $ellipsis,
+  $color
 } = {}) => {
   const theme = redisUiStyles.useTheme();
   const codeTheme = theme.components.typography.code;
+  const getColorValue = (color) => {
+    if (!color) return "inherit";
+    if (color === "primary") return theme.components.typography.colors.primary;
+    if (color === "secondary") return theme.components.typography.colors.secondary;
+    return "inherit";
+  };
   return _styled.css`
-    color: ${$color ? theme.semantic.color.text[$color] || $color : "inherit"};
     font-family: ${codeTheme.fontFamily};
     font-size: ${codeTheme.fontSizes[$size]};
     font-weight: ${codeTheme.fontWeight[$variant]};
+    ${$color && _styled.css`
+      color: ${getColorValue($color)};
+    `}
     ${$ellipsis && _styled.css`
       overflow: hidden;
       text-overflow: ellipsis;

package/dist/Typography/components/Code/Code.style.js

@@ -3,16 +3,24 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 const useCodeStyles = ({
   $size = "M",
   $variant = "regular",
-  $color,
-  $ellipsis
+  $ellipsis,
+  $color
 } = {}) => {
   const theme = useTheme();
   const codeTheme = theme.components.typography.code;
+  const getColorValue = (color) => {
+    if (!color) return "inherit";
+    if (color === "primary") return theme.components.typography.colors.primary;
+    if (color === "secondary") return theme.components.typography.colors.secondary;
+    return "inherit";
+  };
   return css`
-    color: ${$color ? theme.semantic.color.text[$color] || $color : "inherit"};
     font-family: ${codeTheme.fontFamily};
     font-size: ${codeTheme.fontSizes[$size]};
     font-weight: ${codeTheme.fontWeight[$variant]};
+    ${$color && css`
+      color: ${getColorValue($color)};
+    `}
     ${$ellipsis && css`
       overflow: hidden;
       text-overflow: ellipsis;

package/dist/Typography/components/Code/Code.types.d.ts

@@ -1,18 +1,18 @@
-import { Theme } from '@redislabsdev/redis-ui-styles';
 import React, { HTMLAttributes } from 'react';
 import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
 export type CodeSizeType = 'S' | 'M' | 'L';
 export type CodeVariantType = 'regular' | 'semiBold';
+export type ColorType = 'primary' | 'secondary';
 export interface CodeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
     children: React.ReactNode;
     size?: CodeSizeType;
     variant?: CodeVariantType;
     ellipsis?: boolean;
-    color?: keyof Theme['semantic']['color']['text'];
+    color?: ColorType;
 }
 export interface MapProps extends HTMLAttributes<HTMLElement> {
     $size?: CodeProps['size'];
     $variant?: CodeProps['variant'];
-    $color?: CodeProps['color'];
     $ellipsis?: boolean;
+    $color?: CodeProps['color'];
 }

package/dist/Typography/components/Heading/Heading.cjs

@@ -13,16 +13,16 @@ const tag = {
 };
 const Heading = ({
   size = "XL",
-  color,
   ellipsis = false,
+  color,
   ...restProps
 }) => {
   const etProps = useEllipsisTooltip.useEllipsisTooltip(restProps);
   return jsxRuntime.jsxRuntimeExports.jsx(Heading_style.Heading, {
     as: tag[size],
-    "$color": color,
     "$ellipsis": ellipsis,
     "$size": size,
+    "$color": color,
     ...restProps,
     ...etProps
   });

package/dist/Typography/components/Heading/Heading.d.ts

@@ -1,3 +1,3 @@
 import { HeadingProps } from './Heading.types';
-declare const Heading: ({ size, color, ellipsis, ...restProps }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+declare const Heading: ({ size, ellipsis, color, ...restProps }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
 export default Heading;

package/dist/Typography/components/Heading/Heading.js

@@ -11,16 +11,16 @@ const tag = {
 };
 const Heading = ({
   size = "XL",
-  color,
   ellipsis = false,
+  color,
   ...restProps
 }) => {
   const etProps = useEllipsisTooltip(restProps);
   return jsxRuntimeExports.jsx(Heading$1, {
     as: tag[size],
-    "$color": color,
     "$ellipsis": ellipsis,
     "$size": size,
+    "$color": color,
     ...restProps,
     ...etProps
   });

package/dist/Typography/components/Heading/Heading.style.cjs

@@ -8,19 +8,25 @@ const Heading = _styled__default.default.span.withConfig({
   displayName: "Headingstyle__Heading",
   componentId: "RedisUI__sc-14rmj7o-0"
 })(["", ""], ({
-  $color,
   $size,
-  $ellipsis
+  $ellipsis,
+  $color
 }) => {
   const theme = redisUiStyles.useTheme();
   const headingTheme = theme.components.typography.heading;
   const sizeTheme = headingTheme.sizes[$size];
+  const getColorValue = (color) => {
+    if (!color) return "inherit";
+    if (color === "primary") return theme.components.typography.colors.primary;
+    if (color === "secondary") return theme.components.typography.colors.secondary;
+    return "inherit";
+  };
   return _styled.css`
       font-weight: ${sizeTheme.fontWeight};
       font-size: ${sizeTheme.fontSize};
       font-family: ${headingTheme.fontFamily};
       margin: ${sizeTheme.margin || 0};
-      color: ${$color ? theme.semantic.color.text[$color] || $color : "inherit"};
+      color: ${getColorValue($color)};
 
       ${$ellipsis && _styled.css`
         overflow: hidden;

package/dist/Typography/components/Heading/Heading.style.d.ts

@@ -1,6 +1,6 @@
-import { HeadingProps, TShirtSizes } from './Heading.types';
+import { ColorType, TShirtSizes } from './Heading.types';
 export declare const Heading: import("styled-components").StyledComponent<"span", any, {
-    $color?: HeadingProps['color'];
     $size: TShirtSizes;
     $ellipsis: boolean;
+    $color?: ColorType | undefined;
 }, never>;

package/dist/Typography/components/Heading/Heading.style.js

@@ -4,19 +4,25 @@ const Heading = _styled.span.withConfig({
   displayName: "Headingstyle__Heading",
   componentId: "RedisUI__sc-14rmj7o-0"
 })(["", ""], ({
-  $color,
   $size,
-  $ellipsis
+  $ellipsis,
+  $color
 }) => {
   const theme = useTheme();
   const headingTheme = theme.components.typography.heading;
   const sizeTheme = headingTheme.sizes[$size];
+  const getColorValue = (color) => {
+    if (!color) return "inherit";
+    if (color === "primary") return theme.components.typography.colors.primary;
+    if (color === "secondary") return theme.components.typography.colors.secondary;
+    return "inherit";
+  };
   return css`
       font-weight: ${sizeTheme.fontWeight};
       font-size: ${sizeTheme.fontSize};
       font-family: ${headingTheme.fontFamily};
       margin: ${sizeTheme.margin || 0};
-      color: ${$color ? theme.semantic.color.text[$color] || $color : "inherit"};
+      color: ${getColorValue($color)};
 
       ${$ellipsis && css`
         overflow: hidden;

package/dist/Typography/components/Heading/Heading.types.d.ts

@@ -1,10 +1,10 @@
 import React, { HTMLAttributes } from 'react';
-import { Theme } from '@redislabsdev/redis-ui-styles';
 import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
 export type TShirtSizes = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+export type ColorType = 'primary' | 'secondary';
 export interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
     size?: TShirtSizes;
-    color?: keyof Theme['semantic']['color']['text'];
     ellipsis?: boolean;
     children: React.ReactNode;
+    color?: ColorType;
 }

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@redis-ui/components",
-  "version": "37.0.0",
+  "license": "UNLICENSED",
+  "version": "38.1.4",
   "type": "module",
   "sideEffects": false,
   "publishConfig": {
@@ -27,7 +28,7 @@
   },
   "peerDependencies": {
     "@redis-ui/icons": "^4.7.0",
-    "@redis-ui/styles": "^11.0.0",
+    "@redis-ui/styles": "^11.4.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0"