@x-plat/design-system 0.2.3 → 0.2.4

package/dist/index.cjs

@@ -5994,9 +5994,10 @@ var Avatar = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -6019,9 +6020,10 @@ var Badge = (props) => {
     colorNamespace = "xplat",
     color: color2 = "red",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -6061,11 +6063,12 @@ var Button = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -20703,6 +20706,7 @@ var CheckBox = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     checked,
     label,
     onChange,
@@ -20714,7 +20718,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = getColorClass(
+  const mainColor = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -20749,11 +20753,12 @@ var Chip = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32627,9 +32632,10 @@ var Pagination = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32746,9 +32752,10 @@ var Progress = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32801,6 +32808,7 @@ var Radio = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     size: sizeProp,
     ...rest
   } = props;
@@ -32813,7 +32821,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32885,9 +32893,10 @@ var Spinner = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32936,9 +32945,10 @@ var Steps = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32973,6 +32983,7 @@ var Switch = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
   const [isAnimating, setIsAnimating] = import_react29.default.useState(false);
@@ -32992,7 +33003,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -33241,6 +33252,7 @@ var TableRow = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "secondary",
     isHover,
     onClick
@@ -33253,7 +33265,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -33287,9 +33299,10 @@ var Tag = (props) => {
     colorNamespace = "xplat",
     color: color2 = "neutral",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -33459,11 +33472,12 @@ var Tooltip2 = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     description,
     children
   } = props;
   const iconRef = import_react39.default.useRef(null);
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500

package/dist/index.d.cts

@@ -42,7 +42,7 @@ export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig
 export { Header } from './layout/Header/index.cjs';
 export { Layout } from './layout/Layout/index.cjs';
 export { SideBar, SideBarContext, useSideBarContext } from './layout/SideBar/index.cjs';
-export { e as ColorDepth, d as ColorName, b as ColorNamespace, f as ColorProps, C as CustomColors, a as CustomNamespaces, c as colors } from './colors-BNxEsOY3.cjs';
+export { e as ColorDepth, d as ColorName, b as ColorNamespace, g as ColorProps, f as ColorToken, C as CustomColors, a as CustomNamespaces, c as colors } from './colors-cxE7RsuF.cjs';
 export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CalenderIcon, CallActiveIcon, CallForwardedIcon, DefaultCall as CallIcon, CallIncomingIcon, CallMissedIcon, CallOffIcon, CallOutgoingIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseEyeIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DefaultCall, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GierIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkIcon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, OpenEyeIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProfileIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SuccessIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from './tokens/index.cjs';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -42,7 +42,7 @@ export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig
 export { Header } from './layout/Header/index.js';
 export { Layout } from './layout/Layout/index.js';
 export { SideBar, SideBarContext, useSideBarContext } from './layout/SideBar/index.js';
-export { e as ColorDepth, d as ColorName, b as ColorNamespace, f as ColorProps, C as CustomColors, a as CustomNamespaces, c as colors } from './colors-BNxEsOY3.js';
+export { e as ColorDepth, d as ColorName, b as ColorNamespace, g as ColorProps, f as ColorToken, C as CustomColors, a as CustomNamespaces, c as colors } from './colors-cxE7RsuF.js';
 export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CalenderIcon, CallActiveIcon, CallForwardedIcon, DefaultCall as CallIcon, CallIncomingIcon, CallMissedIcon, CallOffIcon, CallOutgoingIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseEyeIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DefaultCall, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GierIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkIcon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, OpenEyeIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProfileIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SuccessIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from './tokens/index.js';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -5612,9 +5612,10 @@ var Avatar = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -5637,9 +5638,10 @@ var Badge = (props) => {
     colorNamespace = "xplat",
     color: color2 = "red",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -5679,11 +5681,12 @@ var Button = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -20321,6 +20324,7 @@ var CheckBox = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     checked,
     label,
     onChange,
@@ -20332,7 +20336,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = getColorClass(
+  const mainColor = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -20367,11 +20371,12 @@ var Chip = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32245,9 +32250,10 @@ var Pagination = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32364,9 +32370,10 @@ var Progress = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32419,6 +32426,7 @@ var Radio = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     size: sizeProp,
     ...rest
   } = props;
@@ -32431,7 +32439,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32503,9 +32511,10 @@ var Spinner = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32554,9 +32563,10 @@ var Steps = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32591,6 +32601,7 @@ var Switch = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
   const [isAnimating, setIsAnimating] = React27.useState(false);
@@ -32610,7 +32621,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32859,6 +32870,7 @@ var TableRow = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "secondary",
     isHover,
     onClick
@@ -32871,7 +32883,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32905,9 +32917,10 @@ var Tag = (props) => {
     colorNamespace = "xplat",
     color: color2 = "neutral",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -33077,11 +33090,12 @@ var Tooltip2 = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     description,
     children
   } = props;
   const iconRef = React37.useRef(null);
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500

package/dist/tokens/index.d.cts

@@ -1,5 +1,5 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.cjs';
-export { e as ColorDepth, d as ColorName, b as ColorNamespace, f as ColorProps, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-BNxEsOY3.cjs';
+export { e as ColorDepth, d as ColorName, b as ColorNamespace, g as ColorProps, f as ColorToken, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-cxE7RsuF.cjs';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/dist/tokens/index.d.ts

@@ -1,5 +1,5 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.js';
-export { e as ColorDepth, d as ColorName, b as ColorNamespace, f as ColorProps, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-BNxEsOY3.js';
+export { e as ColorDepth, d as ColorName, b as ColorNamespace, g as ColorProps, f as ColorToken, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-cxE7RsuF.js';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",