@wallarm-org/design-system 0.1.0

package/dist/icons/index.js

@@ -0,0 +1,145 @@
+import { Activity } from "./Activity.js";
+import { Alt } from "./Alt.js";
+import { ArrowBigUp } from "./ArrowBigUp.js";
+import { ArrowBigUpDash } from "./ArrowBigUpDash.js";
+import { ArrowDown } from "./ArrowDown.js";
+import { ArrowDownLeft } from "./ArrowDownLeft.js";
+import { ArrowDownRight } from "./ArrowDownRight.js";
+import { ArrowLeft } from "./ArrowLeft.js";
+import { ArrowRight } from "./ArrowRight.js";
+import { ArrowUp } from "./ArrowUp.js";
+import { ArrowUpLeft } from "./ArrowUpLeft.js";
+import { ArrowUpRight } from "./ArrowUpRight.js";
+import { Check } from "./Check.js";
+import { CheckCheck } from "./CheckCheck.js";
+import { ChevronDown } from "./ChevronDown.js";
+import { ChevronFirst } from "./ChevronFirst.js";
+import { ChevronLast } from "./ChevronLast.js";
+import { ChevronLeft } from "./ChevronLeft.js";
+import { ChevronRight } from "./ChevronRight.js";
+import { ChevronsDown } from "./ChevronsDown.js";
+import { ChevronsLeft } from "./ChevronsLeft.js";
+import { ChevronsRight } from "./ChevronsRight.js";
+import { ChevronsUp } from "./ChevronsUp.js";
+import { ChevronUp } from "./ChevronUp.js";
+import { Circle } from "./Circle.js";
+import { CircleArrowDown } from "./CircleArrowDown.js";
+import { CircleArrowLeft } from "./CircleArrowLeft.js";
+import { CircleArrowOutDownLeft } from "./CircleArrowOutDownLeft.js";
+import { CircleArrowOutDownRight } from "./CircleArrowOutDownRight.js";
+import { CircleArrowOutUpLeft } from "./CircleArrowOutUpLeft.js";
+import { CircleArrowOutUpRight } from "./CircleArrowOutUpRight.js";
+import { CircleArrowRight } from "./CircleArrowRight.js";
+import { CircleArrowUp } from "./CircleArrowUp.js";
+import { CircleCheck } from "./CircleCheck.js";
+import { CircleCheckBig } from "./CircleCheckBig.js";
+import { CircleChevronDown } from "./CircleChevronDown.js";
+import { CircleChevronLeft } from "./CircleChevronLeft.js";
+import { CircleChevronRight } from "./CircleChevronRight.js";
+import { CircleChevronUp } from "./CircleChevronUp.js";
+import { CircleDashed } from "./CircleDashed.js";
+import { CircleDotDashed } from "./CircleDotDashed.js";
+import { CircleEllipsis } from "./CircleEllipsis.js";
+import { CircleHelp } from "./CircleHelp.js";
+import { CirclePlus } from "./CirclePlus.js";
+import { Command } from "./Command.js";
+import { Ctrl } from "./Ctrl.js";
+import { Dot } from "./Dot.js";
+import { Earth } from "./Earth.js";
+import { EarthLock } from "./EarthLock.js";
+import { Ellipsis } from "./Ellipsis.js";
+import { Filter } from "./Filter.js";
+import { FilterX } from "./FilterX.js";
+import { Folder } from "./Folder.js";
+import { FunnelPlus } from "./FunnelPlus.js";
+import { GitCommitHorizontal } from "./GitCommitHorizontal.js";
+import { GitCommitVertical } from "./GitCommitVertical.js";
+import { GitCompare } from "./GitCompare.js";
+import { GitCompareArrows } from "./GitCompareArrows.js";
+import { GitFork } from "./GitFork.js";
+import { GitGraph } from "./GitGraph.js";
+import { GitMerge } from "./GitMerge.js";
+import { GitPullRequest } from "./GitPullRequest.js";
+import { GitPullRequestArrow } from "./GitPullRequestArrow.js";
+import { GitPullRequestClosed } from "./GitPullRequestClosed.js";
+import { GitPullRequestCreate } from "./GitPullRequestCreate.js";
+import { GitPullRequestCreateArrow } from "./GitPullRequestCreateArrow.js";
+import { GitPullRequestDraft } from "./GitPullRequestDraft.js";
+import { Globe } from "./Globe.js";
+import { GlobeLock } from "./GlobeLock.js";
+import { History } from "./History.js";
+import { Home } from "./Home.js";
+import { Info } from "./Info.js";
+import { Keyboard } from "./Keyboard.js";
+import { KeyRound } from "./KeyRound.js";
+import { KeySquare } from "./KeySquare.js";
+import { Layers } from "./Layers.js";
+import { Layers2 } from "./Layers2.js";
+import { Layers3 } from "./Layers3.js";
+import { LayoutDashboard } from "./LayoutDashboard.js";
+import { LayoutGrid } from "./LayoutGrid.js";
+import { LayoutList } from "./LayoutList.js";
+import { LayoutPanelLeft } from "./LayoutPanelLeft.js";
+import { LayoutPanelTop } from "./LayoutPanelTop.js";
+import { LayoutTemplate } from "./LayoutTemplate.js";
+import { LibraryBig } from "./LibraryBig.js";
+import { Loader } from "./Loader.js";
+import { LoaderCircle } from "./LoaderCircle.js";
+import { Lock } from "./Lock.js";
+import { LockOpen } from "./LockOpen.js";
+import { Maximize } from "./Maximize.js";
+import { Maximize2 } from "./Maximize2.js";
+import { Megaphone } from "./Megaphone.js";
+import { MegaphoneOff } from "./MegaphoneOff.js";
+import { MessageSquare } from "./MessageSquare.js";
+import { MessageSquareText } from "./MessageSquareText.js";
+import { MessageSquareWarning } from "./MessageSquareWarning.js";
+import { MessageSquareX } from "./MessageSquareX.js";
+import { MessagesSquare } from "./MessagesSquare.js";
+import { Minus } from "./Minus.js";
+import { Mouse } from "./Mouse.js";
+import { Move3D } from "./Move3D.js";
+import { NotebookPen } from "./NotebookPen.js";
+import { NotepadText } from "./NotepadText.js";
+import { OctagonAlert } from "./OctagonAlert.js";
+import { PanelBottom } from "./PanelBottom.js";
+import { PanelBottomOpen } from "./PanelBottomOpen.js";
+import { PanelRight } from "./PanelRight.js";
+import { PanelRightClose } from "./PanelRightClose.js";
+import { PanelRightDashed } from "./PanelRightDashed.js";
+import { PanelRightOpen } from "./PanelRightOpen.js";
+import { Paperclip } from "./Paperclip.js";
+import { Pen } from "./Pen.js";
+import { Pencil } from "./Pencil.js";
+import { PencilLine } from "./PencilLine.js";
+import { PencilOff } from "./PencilOff.js";
+import { PencilRuler } from "./PencilRuler.js";
+import { PenLine } from "./PenLine.js";
+import { PenOff } from "./PenOff.js";
+import { PenTool } from "./PenTool.js";
+import { Pentagon } from "./Pentagon.js";
+import { Plus } from "./Plus.js";
+import { Quote } from "./Quote.js";
+import { Redo } from "./Redo.js";
+import { Redo2 } from "./Redo2.js";
+import { RedoDot } from "./RedoDot.js";
+import { RefreshCcw } from "./RefreshCcw.js";
+import { RefreshCwOff } from "./RefreshCwOff.js";
+import { Search } from "./Search.js";
+import { Shift } from "./Shift.js";
+import { Skull } from "./Skull.js";
+import { SlidersHorizontal } from "./SlidersHorizontal.js";
+import { SlidersVertical } from "./SlidersVertical.js";
+import { Space } from "./Space.js";
+import { SquareArrowOutUpRight } from "./SquareArrowOutUpRight.js";
+import { Trash } from "./Trash.js";
+import { Trash2 } from "./Trash2.js";
+import { TriangleAlert } from "./TriangleAlert.js";
+import { Undo } from "./Undo.js";
+import { Undo2 } from "./Undo2.js";
+import { UndoDot } from "./UndoDot.js";
+import { Wrench } from "./Wrench.js";
+import { X } from "./X.js";
+import { ZoomIn } from "./ZoomIn.js";
+import { ZoomOut } from "./ZoomOut.js";
+export { Activity, Alt, ArrowBigUp, ArrowBigUpDash, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Check, CheckCheck, ChevronDown, ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Circle, CircleArrowDown, CircleArrowLeft, CircleArrowOutDownLeft, CircleArrowOutDownRight, CircleArrowOutUpLeft, CircleArrowOutUpRight, CircleArrowRight, CircleArrowUp, CircleCheck, CircleCheckBig, CircleChevronDown, CircleChevronLeft, CircleChevronRight, CircleChevronUp, CircleDashed, CircleDotDashed, CircleEllipsis, CircleHelp, CirclePlus, Command, Ctrl, Dot, Earth, EarthLock, Ellipsis, Filter, FilterX, Folder, FunnelPlus, GitCommitHorizontal, GitCommitVertical, GitCompare, GitCompareArrows, GitFork, GitGraph, GitMerge, GitPullRequest, GitPullRequestArrow, GitPullRequestClosed, GitPullRequestCreate, GitPullRequestCreateArrow, GitPullRequestDraft, Globe, GlobeLock, History, Home, Info, KeyRound, KeySquare, Keyboard, Layers, Layers2, Layers3, LayoutDashboard, LayoutGrid, LayoutList, LayoutPanelLeft, LayoutPanelTop, LayoutTemplate, LibraryBig, Loader, LoaderCircle, Lock, LockOpen, Maximize, Maximize2, Megaphone, MegaphoneOff, MessageSquare, MessageSquareText, MessageSquareWarning, MessageSquareX, MessagesSquare, Minus, Mouse, Move3D, NotebookPen, NotepadText, OctagonAlert, PanelBottom, PanelBottomOpen, PanelRight, PanelRightClose, PanelRightDashed, PanelRightOpen, Paperclip, Pen, PenLine, PenOff, PenTool, Pencil, PencilLine, PencilOff, PencilRuler, Pentagon, Plus, Quote, Redo, Redo2, RedoDot, RefreshCcw, RefreshCwOff, Search, Shift, Skull, SlidersHorizontal, SlidersVertical, Space, SquareArrowOutUpRight, Trash, Trash2, TriangleAlert, Undo, Undo2, UndoDot, Wrench, X, ZoomIn, ZoomOut };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+export { Alert, AlertClose, type AlertCloseProps, type AlertColor, AlertContent, type AlertContentProps, AlertControls, type AlertControlsProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, AlertTitle, type AlertTitleProps, } from './components/Alert';
+export { Badge, type BadgeProps } from './components/Badge';
+export { Button, type ButtonProps } from './components/Button';
+export { Checkbox, CheckboxDescription, type CheckboxDescriptionProps, CheckboxGroup, type CheckboxGroupProps, CheckboxIndicator, CheckboxLabel, type CheckboxLabelProps, type CheckboxProps, } from './components/Checkbox';
+export { Code, type CodeProps } from './components/Code';
+export { Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerFooter, DrawerFooterControls, type DrawerFooterControlsProps, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerPositioner, type DrawerPositionerProps, type DrawerProps, DrawerResizeHandle, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, drawerContentVariants, drawerPositionerVariants, useDrawerContext, } from './components/Drawer';
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from './components/DropdownMenu';
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from './components/Field';
+export { Flex, type FlexProps } from './components/Flex';
+export { Heading, type HeadingProps } from './components/Heading';
+export { Input, type InputProps } from './components/Input';
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, } from './components/InputGroup';
+export { Kbd, KbdGroup } from './components/Kbd';
+export { Link, type LinkProps } from './components/Link';
+export { Loader, type LoaderProps } from './components/Loader';
+export { NumberInput, type NumberInputProps } from './components/NumberInput';
+export { NumericBadge, type NumericBadgeProps, } from './components/NumericBadge';
+export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentProps, type OverflowTooltipProps, } from './components/OverflowTooltip';
+export { Popover, PopoverContent, PopoverTrigger } from './components/Popover';
+export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type RadioGroupProps, RadioIndicator, RadioLabel, type RadioLabelProps, type RadioProps, } from './components/Radio';
+export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
+export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
+export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
+export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, } from './components/Select';
+export { Separator, type SeparatorProps } from './components/Separator';
+export { HStack, type HStackProps, Stack, type StackProps, VStack, type VStackProps, } from './components/Stack';
+export { Switch, SwitchControl, SwitchDescription, type SwitchDescriptionProps, SwitchLabel, type SwitchLabelProps, type SwitchProps, } from './components/Switch';
+export { Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, } from './components/Tabs';
+export { Tag, TagClose, type TagProps } from './components/Tag';
+export { Text, type TextProps } from './components/Text';
+export { Textarea, type TextareaProps } from './components/Textarea';
+export { type Theme, ThemeProvider, useTheme, } from './components/ThemeProvider';
+export { Toast, ToastActions, Toaster, toaster } from './components/Toast';
+export { ToggleButton, type ToggleButtonProps, } from './components/ToggleButton';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './components/Tooltip';

package/dist/index.js

@@ -0,0 +1,36 @@
+import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from "./components/Alert/index.js";
+import { Badge } from "./components/Badge/index.js";
+import { Button } from "./components/Button/index.js";
+import { Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel } from "./components/Checkbox/index.js";
+import { Code } from "./components/Code/index.js";
+import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, drawerContentVariants, drawerPositionerVariants, useDrawerContext } from "./components/Drawer/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/DropdownMenu/index.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/Field/index.js";
+import { Flex } from "./components/Flex/index.js";
+import { Heading } from "./components/Heading/index.js";
+import { Input } from "./components/Input/index.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "./components/InputGroup/index.js";
+import { Kbd, KbdGroup } from "./components/Kbd/index.js";
+import { Link } from "./components/Link/index.js";
+import { Loader } from "./components/Loader/index.js";
+import { NumberInput } from "./components/NumberInput/index.js";
+import { NumericBadge } from "./components/NumericBadge/index.js";
+import { OverflowTooltip, OverflowTooltipContent } from "./components/OverflowTooltip/index.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./components/Popover/index.js";
+import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from "./components/Radio/index.js";
+import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
+import { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
+import { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
+import { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator } from "./components/Select/index.js";
+import { Separator } from "./components/Separator/index.js";
+import { HStack, Stack, VStack } from "./components/Stack/index.js";
+import { Switch, SwitchControl, SwitchDescription, SwitchLabel } from "./components/Switch/index.js";
+import { Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger } from "./components/Tabs/index.js";
+import { Tag, TagClose } from "./components/Tag/index.js";
+import { Text } from "./components/Text/index.js";
+import { Textarea } from "./components/Textarea/index.js";
+import { ThemeProvider, useTheme } from "./components/ThemeProvider/index.js";
+import { Toast, ToastActions, Toaster, toaster } from "./components/Toast/index.js";
+import { ToggleButton } from "./components/ToggleButton/index.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/Tooltip/index.js";
+export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Flex, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, Kbd, KbdGroup, Link, Loader, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, Text, Textarea, ThemeProvider, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VStack, drawerContentVariants, drawerPositionerVariants, toaster, useDrawerContext, useTheme };

package/dist/theme/blur.css

@@ -0,0 +1,9 @@
+@theme {
+    --blur-xs: 4px;
+    --blur-sm: 8px;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+}

package/dist/theme/colors/grayscale.css

@@ -0,0 +1,49 @@
+@theme {
+    --color-gray-50: #f9fafb;
+    --color-gray-100: #f3f4f6;
+    --color-gray-200: #e5e7eb;
+    --color-gray-300: #d1d5dc;
+    --color-gray-400: #99a1af;
+    --color-gray-500: #6a7282;
+    --color-gray-600: #4a5565;
+    --color-gray-700: #364153;
+    --color-gray-800: #1e2939;
+    --color-gray-900: #101828;
+    --color-gray-950: #030712;
+
+    --color-zinc-50: #fafafa;
+    --color-zinc-100: #f4f4f5;
+    --color-zinc-200: #e4e4e7;
+    --color-zinc-300: #d4d4d8;
+    --color-zinc-400: #9f9fa9;
+    --color-zinc-500: #71717b;
+    --color-zinc-600: #52525c;
+    --color-zinc-700: #3f3f47;
+    --color-zinc-800: #27272a;
+    --color-zinc-900: #18181b;
+    --color-zinc-950: #09090b;
+
+    --color-neutral-50: #fafafa;
+    --color-neutral-100: #f5f5f5;
+    --color-neutral-200: #e5e5e5;
+    --color-neutral-300: #d4d4d4;
+    --color-neutral-400: #a1a1a1;
+    --color-neutral-500: #737373;
+    --color-neutral-600: #525252;
+    --color-neutral-700: #404040;
+    --color-neutral-800: #262626;
+    --color-neutral-900: #171717;
+    --color-neutral-950: #0a0a0a;
+
+    --color-stone-50: #fafaf9;
+    --color-stone-100: #f5f5f4;
+    --color-stone-200: #e7e5e4;
+    --color-stone-300: #d6d3d1;
+    --color-stone-400: #a6a09b;
+    --color-stone-500: #79716b;
+    --color-stone-600: #57534d;
+    --color-stone-700: #44403b;
+    --color-stone-800: #292524;
+    --color-stone-900: #1c1917;
+    --color-stone-950: #0c0a09;
+}

package/dist/theme/colors/other.css

@@ -0,0 +1,5 @@
+@theme {
+    --color-transparent: transparent;
+    --color-black: #000000;
+    --color-white: #ffffff;
+}

package/dist/theme/colors/primary.css

@@ -0,0 +1,85 @@
+@theme {
+    --color-slate-50: #f8fafc;
+    --color-slate-100: #f1f5f9;
+    --color-slate-200: #e2e8f0;
+    --color-slate-300: #cad5e2;
+    --color-slate-400: #90a1b9;
+    --color-slate-500: #62748e;
+    --color-slate-600: #45556c;
+    --color-slate-700: #314158;
+    --color-slate-800: #1d293d;
+    --color-slate-900: #0f172b;
+    --color-slate-950: #020618;
+
+    --color-red-50: #fef2f2;
+    --color-red-100: #ffe2e2;
+    --color-red-200: #ffc9c9;
+    --color-red-300: #ffa2a2;
+    --color-red-400: #ff6467;
+    --color-red-500: #fb2c36;
+    --color-red-600: #e7000b;
+    --color-red-700: #c10007;
+    --color-red-800: #9f0712;
+    --color-red-900: #82181a;
+    --color-red-950: #460809;
+
+    --color-w-orange-50: #fff5ed;
+    --color-w-orange-100: #ffe1d0;
+    --color-w-orange-200: #ffc8ac;
+    --color-w-orange-300: #ffa985;
+    --color-w-orange-400: #ff8a52;
+    --color-w-orange-500: #ff6633;
+    --color-w-orange-600: #ff441c;
+    --color-w-orange-700: #e12f0c;
+    --color-w-orange-800: #b82005;
+    --color-w-orange-900: #911908;
+    --color-w-orange-950: #560e06;
+
+    --color-amber-50: #fffbeb;
+    --color-amber-100: #fef3c6;
+    --color-amber-200: #fee685;
+    --color-amber-300: #ffd230;
+    --color-amber-400: #ffb900;
+    --color-amber-500: #fe9a00;
+    --color-amber-600: #e17100;
+    --color-amber-700: #bb4d00;
+    --color-amber-800: #973c00;
+    --color-amber-900: #7b3306;
+    --color-amber-950: #461901;
+
+    --color-green-50: #f0fdf4;
+    --color-green-100: #dcfce7;
+    --color-green-200: #b9f8cf;
+    --color-green-300: #7bf1a8;
+    --color-green-400: #05df72;
+    --color-green-500: #00c950;
+    --color-green-600: #00a63e;
+    --color-green-700: #008236;
+    --color-green-800: #016630;
+    --color-green-900: #0d542b;
+    --color-green-950: #032e15;
+
+    --color-blue-50: #eff6ff;
+    --color-blue-100: #dbeafe;
+    --color-blue-200: #bedbff;
+    --color-blue-300: #8ec5ff;
+    --color-blue-400: #51a2ff;
+    --color-blue-500: #2b7fff;
+    --color-blue-600: #155dfc;
+    --color-blue-700: #1447e6;
+    --color-blue-800: #193cb8;
+    --color-blue-900: #1c398e;
+    --color-blue-950: #162456;
+
+    --color-purple-50: #faf5ff;
+    --color-purple-100: #f3e8ff;
+    --color-purple-200: #e9d4ff;
+    --color-purple-300: #dab2ff;
+    --color-purple-400: #c27aff;
+    --color-purple-500: #ad46ff;
+    --color-purple-600: #9810fa;
+    --color-purple-700: #8200db;
+    --color-purple-800: #6e11b0;
+    --color-purple-900: #59168b;
+    --color-purple-950: #3c0366;
+}

package/dist/theme/colors/secondary.css

@@ -0,0 +1,145 @@
+@theme {
+    --color-orange-50: #fff7ed;
+    --color-orange-100: #ffedd4;
+    --color-orange-200: #ffd6a8;
+    --color-orange-300: #ffb86a;
+    --color-orange-400: #ff8904;
+    --color-orange-500: #ff6900;
+    --color-orange-600: #f54900;
+    --color-orange-700: #ca3500;
+    --color-orange-800: #9f2d00;
+    --color-orange-900: #7e2a0c;
+    --color-orange-950: #441306;
+
+    --color-yellow-50: #fefce8;
+    --color-yellow-100: #fef9c2;
+    --color-yellow-200: #fff085;
+    --color-yellow-300: #ffdf20;
+    --color-yellow-400: #fdc700;
+    --color-yellow-500: #f0b100;
+    --color-yellow-600: #d08700;
+    --color-yellow-700: #a65f00;
+    --color-yellow-800: #894b00;
+    --color-yellow-900: #733e0a;
+    --color-yellow-950: #432004;
+
+    --color-lime-50: #f7fee7;
+    --color-lime-100: #ecfcca;
+    --color-lime-200: #d8f999;
+    --color-lime-300: #bbf451;
+    --color-lime-400: #9ae600;
+    --color-lime-500: #7ccf00;
+    --color-lime-600: #5ea500;
+    --color-lime-700: #497d00;
+    --color-lime-800: #3c6300;
+    --color-lime-900: #35530e;
+    --color-lime-950: #192e03;
+
+    --color-emerald-50: #ecfdf5;
+    --color-emerald-100: #d0fae5;
+    --color-emerald-200: #a4f4cf;
+    --color-emerald-300: #5ee9b5;
+    --color-emerald-400: #00d492;
+    --color-emerald-500: #00bc7d;
+    --color-emerald-600: #009966;
+    --color-emerald-700: #007a55;
+    --color-emerald-800: #006045;
+    --color-emerald-900: #004f3b;
+    --color-emerald-950: #002c22;
+
+    --color-teal-50: #f0fdfa;
+    --color-teal-100: #cbfbf1;
+    --color-teal-200: #96f7e4;
+    --color-teal-300: #46ecd5;
+    --color-teal-400: #00d5be;
+    --color-teal-500: #00bba7;
+    --color-teal-600: #009689;
+    --color-teal-700: #00786f;
+    --color-teal-800: #005f5a;
+    --color-teal-900: #0b4f4a;
+    --color-teal-950: #022f2e;
+
+    --color-cyan-50: #ecfeff;
+    --color-cyan-100: #cefafe;
+    --color-cyan-200: #a2f4fd;
+    --color-cyan-300: #53eafd;
+    --color-cyan-400: #00d3f3;
+    --color-cyan-500: #00b8db;
+    --color-cyan-600: #0092b8;
+    --color-cyan-700: #007595;
+    --color-cyan-800: #005f78;
+    --color-cyan-900: #104e64;
+    --color-cyan-950: #053345;
+
+    --color-sky-50: #f0f9ff;
+    --color-sky-100: #dff2fe;
+    --color-sky-200: #b8e6fe;
+    --color-sky-300: #74d4ff;
+    --color-sky-400: #00bcff;
+    --color-sky-500: #00a6f4;
+    --color-sky-600: #0084d1;
+    --color-sky-700: #0069a8;
+    --color-sky-800: #00598a;
+    --color-sky-900: #024a70;
+    --color-sky-950: #052f4a;
+
+    --color-indigo-50: #eef2ff;
+    --color-indigo-100: #e0e7ff;
+    --color-indigo-200: #c6d2ff;
+    --color-indigo-300: #a3b3ff;
+    --color-indigo-400: #7c86ff;
+    --color-indigo-500: #615fff;
+    --color-indigo-600: #4f39f6;
+    --color-indigo-700: #432dd7;
+    --color-indigo-800: #372aac;
+    --color-indigo-900: #312c85;
+    --color-indigo-950: #1e1a4d;
+
+    --color-violet-50: #f5f3ff;
+    --color-violet-100: #ede9fe;
+    --color-violet-200: #ddd6ff;
+    --color-violet-300: #c4b4ff;
+    --color-violet-400: #a684ff;
+    --color-violet-500: #8e51ff;
+    --color-violet-600: #7f22fe;
+    --color-violet-700: #7008e7;
+    --color-violet-800: #5d0ec0;
+    --color-violet-900: #4d179a;
+    --color-violet-950: #2f0d68;
+
+    --color-fuchsia-50: #fdf4ff;
+    --color-fuchsia-100: #fae8ff;
+    --color-fuchsia-200: #f6cfff;
+    --color-fuchsia-300: #f4a8ff;
+    --color-fuchsia-400: #ed6aff;
+    --color-fuchsia-500: #e12afb;
+    --color-fuchsia-600: #c800de;
+    --color-fuchsia-700: #a800b7;
+    --color-fuchsia-800: #8a0194;
+    --color-fuchsia-900: #721378;
+    --color-fuchsia-950: #4b004f;
+
+    --color-pink-50: #fdf2f8;
+    --color-pink-100: #fce7f3;
+    --color-pink-200: #fccee8;
+    --color-pink-300: #fda5d5;
+    --color-pink-400: #fb64b6;
+    --color-pink-500: #f6339a;
+    --color-pink-600: #e60076;
+    --color-pink-700: #c6005c;
+    --color-pink-800: #a3004c;
+    --color-pink-900: #861043;
+    --color-pink-950: #510424;
+
+    --color-rose-50: #fff1f2;
+    --color-rose-100: #ffe4e6;
+    --color-rose-200: #ffccd3;
+    --color-rose-300: #ffa1ad;
+    --color-rose-400: #ff637e;
+    --color-rose-500: #ff2056;
+    --color-rose-600: #ec003f;
+    --color-rose-700: #c70036;
+    --color-rose-800: #a50036;
+    --color-rose-900: #8b0836;
+    --color-rose-950: #4d0218;
+}

package/dist/theme/components/dialog.css

@@ -0,0 +1,5 @@
+:root {
+    --dialog-pushed-back-scale: 0.98;
+    --dialog-pushed-back-ratio: 0.02;
+    --dialog-pushed-back-offset: 32px;
+}

package/dist/theme/components/drawer.css

@@ -0,0 +1,8 @@
+:root {
+    --drawer-overlay-z-index: 40;
+    --drawer-positioner-z-index: 50;
+    --drawer-level-ratio: calc(var(--drawer-overlay-z-index) / 2);
+    --drawer-pushed-back-scale: 0.98;
+    --drawer-pushed-back-ratio: 0.02;
+    --drawer-pushed-back-offset: 60px;
+}

package/dist/theme/focus.css

@@ -0,0 +1,6 @@
+@theme {
+    --color-focus-brand: --alpha(var(--color-w-orange-600) / 30%);
+    --color-focus-primary: --alpha(var(--color-slate-400) / 30%);
+    --color-focus-destructive: --alpha(var(--color-red-600) / 20%);
+    --color-focus-destructive-hover: --alpha(var(--color-red-600) / 30%);
+}

package/dist/theme/icon.css

@@ -0,0 +1,13 @@
+@theme {
+  --icon-xs: 10px;
+  --icon-sm: 12px;
+  --icon-md: 16px;
+  --icon-lg: 20px;
+  --icon-xl: 24px;
+  --icon-2xl: 32px;
+}
+
+@utility icon-* {
+    width: --value(--icon-*);
+    height: --value(--icon-*);
+}

package/dist/theme/index.css

@@ -0,0 +1,38 @@
+@import './colors/primary.css';
+@import './colors/secondary.css';
+@import './colors/grayscale.css';
+@import './colors/other.css';
+@import './blur.css';
+@import './radius.css';
+@import './shadow.css';
+@import './spacing.css';
+@import './typography.css';
+@import './semantic.css';
+@import './focus.css';
+@import './icon.css';
+@import './utilities/hover-overlay.css';
+@import './components/drawer.css';
+@import './components/dialog.css';
+
+[data-scope='scroll-area'][data-part='viewport'] {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+/** Remove when old DS will be removed **/
+:where(:root) {
+    cursor: default;
+    overflow-wrap: break-word;
+}
+
+:where(svg:not([fill])) {
+    fill: currentColor;
+}
+
+@layer utilities {
+    textarea::-webkit-resizer {
+        display: none;
+    }
+}

package/dist/theme/radius.css

@@ -0,0 +1,11 @@
+@theme {
+    --radius-2: 2px;
+    --radius-4: 4px;
+    --radius-6: 6px;
+    --radius-8: 8px;
+    --radius-12: 12px;
+    --radius-16: 16px;
+    --radius-24: 24px;
+    --radius-32: 32px;
+    --radius-full: 9999px;
+}