@0xsquid/ui 0.2.0 → 0.4.0

package/dist/esm/types/components/buttons/AssetsButton.d.ts

@@ -0,0 +1,10 @@
+interface AssetsButtonProps {
+    tokenImageUrl?: string;
+    chainImageUrl?: string;
+    tokenSymbol?: string;
+    chainBgColor?: string;
+    tokenBgColor?: string;
+    tokenTextColor?: string;
+}
+export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/buttons/BoostButton.d.ts

@@ -1,6 +1,6 @@
 import { BoostMode } from '../../types/components';
 interface BoostButtonProps {
-    boostMode?: BoostMode;
+    boostMode: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;

package/dist/esm/types/components/buttons/SettingsButton.d.ts

@@ -0,0 +1,4 @@
+export interface SettingsButtonProps {
+    label: string;
+}
+export declare function SettingsButton({ label }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/buttons/index.d.ts

@@ -1,7 +1,8 @@
 export * from './AddressButton';
 export * from './ArrowButton';
+export * from './AssetsButton';
 export * from './BoostButton';
 export * from './Button';
 export * from './Chip';
-export * from './Dropdown';
 export * from './FeeButton';
+export * from './SettingsButton';

package/dist/esm/types/components/controls/SettingsSlider.d.ts

@@ -0,0 +1,5 @@
+export interface SettingsSliderProps {
+    value: number;
+    type: 'percentage' | 'amount';
+}
+export declare function SettingsSlider({ value, type }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/controls/Switch.d.ts

@@ -1,7 +1,7 @@
 import { SwitchSize } from '../../types/components';
 interface SwitchProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
     size: SwitchSize;
 }
 export declare function Switch({ checked, onChange, size }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/controls/Tooltip.d.ts

@@ -6,7 +6,9 @@ interface TooltipProps {
     tooltipContent: React.ReactNode;
     threshold?: TooltipThreshold;
     tooltipWidth?: TooltipWidth;
-    className?: string;
+    containerClassName?: string;
+    childrenClassName?: string;
+    tooltipClassName?: string;
 }
-export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, className, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/controls/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Input';
+export * from './SettingsSlider';
 export * from './Switch';
 export * from './Tooltip';

package/dist/esm/types/components/icons/Arrow.d.ts

@@ -11,3 +11,23 @@ export declare function ChevronRightSmallIcon(): import("react/jsx-runtime").JSX
 export declare function ArrowLeftIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowRightUpCircleIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowOutOfBoxIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronGrabberVerticalIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SquareArrowTopRight2Icon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowBottomTopIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowWallDownIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ReorderIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/Clock.d.ts

@@ -0,0 +1,8 @@
+export declare function ClockIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ClockOutlineIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/Coins.d.ts

@@ -1,2 +1,6 @@
 export declare function CoinsIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function CoinsAddIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function Dollar({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/CompassRound.d.ts

@@ -0,0 +1,8 @@
+export declare function CompassRound({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CircleX({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/DashboardFast.d.ts

@@ -0,0 +1,4 @@
+export declare function DashboardFast({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/DotGrid.d.ts

@@ -1 +1,4 @@
-export declare function DotGrid1x3HorizontalIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function DotGrid1x3HorizontalIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/Help.d.ts

@@ -0,0 +1,16 @@
+export declare function HelpIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GasIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ReceiptBillIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SnapIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/Infinity.d.ts

@@ -0,0 +1,4 @@
+export declare function InfinityIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/Lightning.d.ts

@@ -0,0 +1,4 @@
+export declare function LightningIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/SquidLogo.d.ts

@@ -0,0 +1 @@
+export declare function SquidLogo(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/SwapStepSeparator.d.ts

@@ -0,0 +1 @@
+export declare function SwapStepSeparator(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/TradingViewSteps.d.ts

@@ -0,0 +1,4 @@
+export declare function TradingViewStepsIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/layout/Boost.d.ts

@@ -1 +1,9 @@
-export declare function Boost(): import("react/jsx-runtime").JSX.Element;
+import { BoostMode } from '../../types/components';
+interface BoostProps {
+    boostMode: BoostMode;
+    onToggleBoostMode?: ({ boostMode }: {
+        boostMode: BoostMode;
+    }) => void;
+}
+export declare function Boost({ boostMode, onToggleBoostMode }: BoostProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/layout/DropdownMenu.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DropdownMenuItemProps } from '../lists';
+interface DropdownMenuProps {
+    dropdownRef?: React.RefObject<HTMLDivElement>;
+    items: DropdownMenuItemProps[];
+    className?: string;
+}
+export declare function DropdownMenu({ dropdownRef, items, className, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/layout/Menu.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
+type Rounded = 'sm' | 'lg';
 interface MenuProps extends React.ComponentProps<'div'> {
-    menuClassName?: string;
+    containerClassName?: string;
     contentClassName?: string;
+    title?: string;
+    displayControls?: boolean;
+    rounded?: Rounded;
 }
-export declare function Menu({ children, menuClassName, contentClassName, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/NavigationBar.d.ts

@@ -2,6 +2,8 @@ interface NavigationBarProps {
     title?: string;
     displayBackButton?: boolean;
     logoUrl?: string;
+    transparent?: boolean;
+    displayButtonShadows?: boolean;
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/SwapConfiguration.d.ts

@@ -8,10 +8,13 @@ interface SwapConfigurationProps {
     isFetching?: boolean;
     chain?: {
         iconUrl: string;
+        bgColor: string;
     };
     token?: {
         iconUrl: string;
         symbol: string;
+        bgColor: string;
+        textColor: string;
     };
 }
 export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/layout/SwapProgressViewHeader.d.ts

@@ -0,0 +1,6 @@
+interface SwapProgressViewHeaderProps {
+    title: string;
+    description: string;
+}
+export declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/layout/SwapStepsCollapsed.d.ts

@@ -0,0 +1,5 @@
+import { SwapStep } from '../../types/components';
+export declare function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }: {
+    steps: SwapStep[];
+    currentStepCount: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/layout/TokenPair.d.ts

@@ -0,0 +1,12 @@
+interface TokenPairProps {
+    firstToken: {
+        imageUrl: string;
+        bgColor: string;
+    };
+    secondToken: {
+        imageUrl: string;
+        bgColor: string;
+    };
+}
+export declare function TokenPair({ firstToken, secondToken }: TokenPairProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/layout/index.d.ts

@@ -5,4 +5,7 @@ export * from './Modal';
 export * from './NavigationBar';
 export * from './ProductCard';
 export * from './SwapConfiguration';
+export * from './SwapProgressViewHeader';
+export * from './SwapStepsCollapsed';
+export * from './TokenPair';
 export * from './WalletAddress';

package/dist/esm/types/components/lists/DropdownMenuItem.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-interface DropdownMenuItemProps {
+export interface DropdownMenuItemProps {
     label: string;
+    labelClassName?: string;
     imageUrl?: string;
     icon?: React.ReactNode;
 }
-export declare function DropdownMenuItem({ label, imageUrl, icon, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/lists/SettingsItem.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface SettingsItemProps {
+    icon: React.ReactNode;
+    label: string;
+    controls?: React.ReactNode;
+    transparentControls?: boolean;
+    showHelpIcon?: boolean;
+}
+export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/lists/SwapDetailListItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface SwapDetailListItemProps {
+    label: string;
+    icon: React.ReactNode;
+    detail?: React.ReactNode;
+}
+export declare function SwapDetailListItem({ label, detail, icon, }: SwapDetailListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/lists/SwapStepItem.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SwapStepDescriptionBlock } from '../../types/components';
+interface SwapStepItemProps {
+    descriptionBlocks: SwapStepDescriptionBlock[];
+    chipContent: React.ReactNode;
+    showStepSeparator?: boolean;
+}
+export declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, }: SwapStepItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/lists/index.d.ts

@@ -3,3 +3,6 @@ export * from './HistoryItem';
 export * from './ListItem';
 export * from './MenuItem';
 export * from './SectionTitle';
+export * from './SettingsItem';
+export * from './SwapDetailListItem';
+export * from './SwapStepItem';

package/dist/esm/types/components/views/ProfileView.d.ts

@@ -0,0 +1 @@
+export declare function ProfileView(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/views/SwapDetailsView.d.ts

@@ -0,0 +1 @@
+export declare function SwapDetailsView(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/core/themes.d.ts

@@ -1,8 +1,10 @@
+import { ThemeType } from '../types/components';
 import { ConfigTheme } from '../types/config';
 export type Theme = {
     name: string;
     themeImgPath: string;
     websiteBackgroundColor: string;
     theme: ConfigTheme;
+    type: ThemeType;
 };
 export declare const themes: Theme[];

package/dist/esm/types/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useModal';

package/dist/esm/types/hooks/useModal.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare function useModal(props?: {
+    initialIsModalOpen?: boolean;
+}): {
+    isModalOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+    modalRef: React.RefObject<HTMLDivElement>;
+    openModalButtonRef: React.RefObject<HTMLButtonElement>;
+};

package/dist/esm/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './providers';
+export * from './hooks';

package/dist/esm/types/providers/SquidConfigProvider.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { ConfigTheme } from '../types/config';
-export declare function SquidConfigProvider({ theme, children, }: {
-    theme?: ConfigTheme;
+import { ThemeType } from '../types/components';
+export declare function SquidConfigProvider({ theme, children, themeType, }: {
+    theme: ConfigTheme;
     children?: React.ReactNode;
+    themeType?: ThemeType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/stories/buttons/{Dropdown.stories.d.ts → AssetsButton.stories.d.ts}

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Dropdown } from '../../components/buttons/Dropdown';
-declare const meta: Meta<typeof Dropdown>;
+import { AssetsButton } from '../../components/buttons/AssetsButton';
+declare const meta: Meta<typeof AssetsButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Empty: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
+export declare const LongTokenSymbol: Story;

package/dist/esm/types/stories/buttons/SettingsButton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SettingsButton } from '../../components/buttons/SettingsButton';
+declare const meta: Meta<typeof SettingsButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/stories/controls/SettingsSlider.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SettingsSlider } from '../../components/controls/SettingsSlider';
+declare const meta: Meta<typeof SettingsSlider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Percentage: Story;
+export declare const Amount: Story;

package/dist/esm/types/stories/layout/Boost.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Boost } from '../../components/layout/Boost';
+declare const meta: Meta<typeof Boost>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/stories/layout/DropdownMenu.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DropdownMenu } from '../../components/layout/DropdownMenu';
+declare const meta: Meta<typeof DropdownMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/stories/layout/Menu.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta<typeof Menu>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithTitle: Story;
+export declare const WithControls: Story;

package/dist/esm/types/stories/layout/NavigationBar.stories.d.ts

@@ -8,3 +8,4 @@ export declare const Title: Story;
 export declare const BackButton: Story;
 export declare const Logo: Story;
 export declare const AllProps: Story;
+export declare const Transparent: Story;

package/dist/esm/types/stories/layout/SwapProgressView.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SwapStepsCollapsed } from '../../components/layout/SwapStepsCollapsed';
+declare const meta: Meta<typeof SwapStepsCollapsed>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FirstStep: Story;
+export declare const MiddleStep: Story;
+export declare const LastStep: Story;
+export declare const LongerRoute: Story;

package/dist/esm/types/stories/layout/SwapProgressViewHeader.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SwapProgressViewHeader } from '../../components/layout/SwapProgressViewHeader';
+declare const meta: Meta<typeof SwapProgressViewHeader>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/stories/layout/TokenPair.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TokenPair } from '../../components/layout/TokenPair';
+declare const meta: Meta<typeof TokenPair>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/stories/lists/SettingsItem.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SettingsItem } from '../../components/lists/SettingsItem';
+declare const meta: Meta<typeof SettingsItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithControls: Story;
+export declare const WithoutHelpIcon: Story;
+export declare const TransparentControls: Story;

package/dist/esm/types/stories/lists/SwapDetailListItem.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SwapDetailListItem } from '../../components/lists/SwapDetailListItem';
+declare const meta: Meta<typeof SwapDetailListItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDetail: Story;

package/dist/esm/types/stories/lists/SwapStepItem.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SwapStepItem } from '../../components/lists/SwapStepItem';
+declare const meta: Meta<typeof SwapStepItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TextOnlyDescription: Story;
+export declare const CustomDescription: Story;
+export declare const ShowSeparator: Story;
+export declare const LongDescription: Story;
+export declare const LongDescriptionWithSeparator: Story;

package/dist/esm/types/stories/views/ProfileView.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProfileView } from '../../components/views/ProfileView';
+declare const meta: Meta<typeof ProfileView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/stories/views/SwapDetailsView.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SwapDetailsView } from '../../components/views/SwapDetailsView';
+declare const meta: Meta<typeof SwapDetailsView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/types/components.d.ts

@@ -1,12 +1,23 @@
+/// <reference types="react" />
 export type TextSize = 'small' | 'medium' | 'large';
 export type SwitchSize = 'small' | 'large';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 export type ButtonSize = 'md' | 'lg';
 export type SwapDirection = 'from' | 'to';
 export type BoostMode = 'normal' | 'boost';
+export type SwapStepDescriptionBlock = {
+    type: 'string' | 'image';
+    value: string;
+};
+export type SwapStep = {
+    descriptionBlocks: SwapStepDescriptionBlock[];
+    chipContent: React.ReactNode;
+    routeStepOrder: number;
+};
 export declare enum DetailsToolbarState {
     FULL = 0,
     LOADING = 1,
     EMPTY = 2,
     ERROR = 3
 }
+export type ThemeType = 'light' | 'dark';

package/dist/esm/types/types/config.d.ts

@@ -37,6 +37,7 @@ export interface ConfigTheme {
     'accent-salmon': string;
     'accent-gold': string;
 }
+export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */