{ "name": "button", "title": "Uiscore Button", "description": "Button component with Uiscore tokens and legacy variant aliases.", "type": "ui", "dependencies": [ "class-variance-authority", "clsx", "lucide-react", "tailwind-merge" ], "cssPrefixes": [ "uis-btn-" ], "files": [ { "path": "src/components/ui/button.tsx", "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Plus } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Slot } from \"../lib/slot\";\nimport {\n type ButtonRadius,\n type ButtonTheme,\n type ButtonType,\n type LegacyButtonType,\n} from \"./button-tokens\";\n\nconst buttonVariants = cva(\n \"relative inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap border-0 font-['Plus_Jakarta_Sans'] text-[14px] font-medium leading-5 outline-none transition-[background-color,box-shadow,color] duration-150 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-default\",\n {\n variants: {\n size: {\n sm: \"px-[10px] py-1\",\n md: \"px-[10px] py-1.5\",\n lg: \"p-[10px]\",\n },\n radius: {\n squared: \"rounded-[6px]\",\n rounded: \"rounded-[999px]\",\n },\n theme: {\n light: \"\",\n dark: \"\",\n },\n variant: {\n primary:\n \"text-[var(--uis-btn-primary-text)] [--btn-icon:var(--uis-btn-primary-icon)] [background-color:var(--uis-btn-primary-bg)] [box-shadow:var(--uis-btn-primary-shadow)] hover:[background-color:var(--uis-btn-primary-bg-hover)] active:[background-color:var(--uis-btn-primary-bg-active)] focus-visible:[background-color:var(--uis-btn-primary-bg-focus)] focus-visible:[box-shadow:var(--uis-btn-primary-shadow-focus)] disabled:[background-color:var(--uis-btn-primary-disabled-bg)] disabled:text-[var(--uis-btn-primary-disabled-text)] disabled:[--btn-icon:var(--uis-btn-primary-disabled-icon)] disabled:[box-shadow:var(--uis-btn-primary-disabled-shadow)]\",\n neutral:\n \"text-[var(--uis-btn-neutral-text)] [--btn-icon:var(--uis-btn-neutral-icon)] [background-color:var(--uis-btn-neutral-bg)] [box-shadow:var(--uis-btn-neutral-shadow)] hover:[background-color:var(--uis-btn-neutral-bg-hover)] active:[background-color:var(--uis-btn-neutral-bg-active)] focus-visible:[background-color:var(--uis-btn-neutral-bg-focus)] focus-visible:[box-shadow:var(--uis-btn-neutral-shadow-focus)] disabled:[background-color:var(--uis-btn-neutral-disabled-bg)] disabled:text-[var(--uis-btn-neutral-disabled-text)] disabled:[--btn-icon:var(--uis-btn-neutral-disabled-icon)] disabled:[box-shadow:var(--uis-btn-neutral-disabled-shadow)]\",\n danger:\n \"text-[var(--uis-btn-danger-text)] [--btn-icon:var(--uis-btn-danger-icon)] [background-color:var(--uis-btn-danger-bg)] [box-shadow:var(--uis-btn-danger-shadow)] hover:[background-color:var(--uis-btn-danger-bg-hover)] active:[background-color:var(--uis-btn-danger-bg-active)] focus-visible:[background-color:var(--uis-btn-danger-bg-focus)] focus-visible:[box-shadow:var(--uis-btn-danger-shadow-focus)] disabled:[background-color:var(--uis-btn-danger-disabled-bg)] disabled:text-[var(--uis-btn-danger-disabled-text)] disabled:[--btn-icon:var(--uis-btn-danger-disabled-icon)] disabled:[box-shadow:var(--uis-btn-danger-disabled-shadow)]\",\n transparent:\n \"text-[var(--uis-btn-transparent-text)] [--btn-icon:var(--uis-btn-transparent-icon)] [background-color:var(--uis-btn-transparent-bg)] [box-shadow:var(--uis-btn-transparent-shadow)] hover:[background-color:var(--uis-btn-transparent-bg-hover)] active:[background-color:var(--uis-btn-transparent-bg-active)] focus-visible:[background-color:var(--uis-btn-transparent-bg-focus)] focus-visible:[box-shadow:var(--uis-btn-transparent-shadow-focus)] disabled:[background-color:var(--uis-btn-transparent-disabled-bg)] disabled:text-[var(--uis-btn-transparent-disabled-text)] disabled:[--btn-icon:var(--uis-btn-transparent-disabled-icon)] disabled:[box-shadow:var(--uis-btn-transparent-disabled-shadow)]\",\n transparentMuted:\n \"text-[var(--uis-btn-transparent-muted-text)] [--btn-icon:var(--uis-btn-transparent-muted-icon)] [background-color:var(--uis-btn-transparent-muted-bg)] [box-shadow:var(--uis-btn-transparent-muted-shadow)] hover:[background-color:var(--uis-btn-transparent-muted-bg-hover)] active:[background-color:var(--uis-btn-transparent-muted-bg-active)] focus-visible:[background-color:var(--uis-btn-transparent-muted-bg-focus)] focus-visible:[box-shadow:var(--uis-btn-transparent-muted-shadow-focus)] disabled:[background-color:var(--uis-btn-transparent-muted-disabled-bg)] disabled:text-[var(--uis-btn-transparent-muted-disabled-text)] disabled:[--btn-icon:var(--uis-btn-transparent-muted-disabled-icon)] disabled:[box-shadow:var(--uis-btn-transparent-muted-disabled-shadow)]\",\n },\n },\n defaultVariants: {\n size: \"sm\",\n radius: \"squared\",\n theme: \"light\",\n variant: \"primary\",\n },\n },\n);\n\nconst legacyVariantMap: Record = {\n inverted: \"neutral\",\n purple: \"primary\",\n};\n\nfunction normalizeVariant(\n value: ButtonType | LegacyButtonType | undefined,\n): ButtonType {\n if (!value) {\n return \"primary\";\n }\n return value in legacyVariantMap\n ? legacyVariantMap[value as LegacyButtonType]\n : (value as ButtonType);\n}\n\nfunction isElementWithChildren(\n value: React.ReactNode,\n): value is React.ReactElement<{ children?: React.ReactNode }> {\n return React.isValidElement<{ children?: React.ReactNode }>(value);\n}\n\nexport interface ButtonProps\n extends\n React.ButtonHTMLAttributes,\n Omit, \"variant\" | \"theme\" | \"radius\"> {\n asChild?: boolean;\n leftIcon?: boolean;\n rightIcon?: boolean;\n theme?: ButtonTheme;\n variant?: ButtonType | LegacyButtonType;\n radius?: ButtonRadius;\n\n // Backward-compatible aliases.\n buttonTheme?: ButtonTheme;\n buttonType?: ButtonType | LegacyButtonType;\n buttonRadius?: ButtonRadius;\n}\n\nconst Button = React.forwardRef(\n (\n {\n className,\n size,\n theme,\n variant,\n radius,\n asChild = false,\n leftIcon = false,\n rightIcon = false,\n buttonTheme,\n buttonType,\n buttonRadius,\n children,\n disabled,\n onClick,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : \"button\";\n const resolvedTheme = theme ?? buttonTheme ?? \"light\";\n const resolvedVariant = normalizeVariant(variant ?? buttonType);\n const resolvedRadius = radius ?? buttonRadius ?? \"squared\";\n const isMuted = resolvedVariant === \"transparentMuted\";\n const resolvedDisabled = disabled || isMuted;\n const handleClick = (event: React.MouseEvent) => {\n if (isMuted) {\n event.preventDefault();\n return;\n }\n\n onClick?.(event);\n };\n const content =\n asChild && isElementWithChildren(children)\n ? React.cloneElement(\n children,\n undefined,\n <>\n {leftIcon ? (\n \n ) : null}\n {children.props.children}\n {rightIcon ? (\n \n ) : null}\n ,\n )\n : (\n <>\n {leftIcon ? (\n \n ) : null}\n {children}\n {rightIcon ? (\n \n ) : null}\n \n );\n\n return (\n \n {content}\n \n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button };\n", "type": "component", "target": "components/button.tsx" }, { "path": "src/components/ui/button-tokens.ts", "content": "export const buttonThemes = [\"light\", \"dark\"] as const;\nexport const buttonTypes = [\n \"primary\",\n \"neutral\",\n \"danger\",\n \"transparent\",\n \"transparentMuted\",\n] as const;\nexport const buttonSizes = [\"sm\", \"md\", \"lg\"] as const;\nexport const buttonRadii = [\"squared\", \"rounded\"] as const;\nexport const legacyButtonTypes = [\"inverted\", \"purple\"] as const;\n\nexport type ButtonTheme = (typeof buttonThemes)[number];\nexport type ButtonType = (typeof buttonTypes)[number];\nexport type ButtonSize = (typeof buttonSizes)[number];\nexport type ButtonRadius = (typeof buttonRadii)[number];\nexport type LegacyButtonType = (typeof legacyButtonTypes)[number];\n", "type": "tokens", "target": "components/button-tokens.ts" }, { "path": "src/lib/utils.ts", "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n", "type": "lib", "target": "lib/utils.ts" }, { "path": "src/lib/slot.tsx", "content": "import * as React from \"react\";\n\ntype SlotProps = React.HTMLAttributes & {\n children: React.ReactNode;\n};\n\nfunction composeRefs(\n ...refs: Array | undefined>\n): React.RefCallback {\n return (node) => {\n for (const ref of refs) {\n if (!ref) {\n continue;\n }\n\n if (typeof ref === \"function\") {\n ref(node);\n continue;\n }\n\n try {\n (\n ref as React.MutableRefObject\n ).current = node;\n } catch {\n // Ignore readonly refs.\n }\n }\n };\n}\n\nfunction mergeProps(\n slotProps: Record,\n childProps: Record,\n) {\n const result = { ...slotProps, ...childProps };\n\n const slotClassName =\n typeof slotProps.className === \"string\" ? slotProps.className : \"\";\n const childClassName =\n typeof childProps.className === \"string\" ? childProps.className : \"\";\n\n if (slotClassName || childClassName) {\n result.className = [slotClassName, childClassName].filter(Boolean).join(\" \");\n }\n\n if (slotProps.style || childProps.style) {\n result.style = {\n ...(slotProps.style as React.CSSProperties | undefined),\n ...(childProps.style as React.CSSProperties | undefined),\n };\n }\n\n for (const [key, value] of Object.entries(slotProps)) {\n if (!key.startsWith(\"on\") || typeof value !== \"function\") {\n continue;\n }\n\n const childHandler = childProps[key];\n if (typeof childHandler !== \"function\") {\n continue;\n }\n\n result[key] = (...args: unknown[]) => {\n value(...args);\n\n if (\n typeof args[0] === \"object\" &&\n args[0] !== null &&\n \"defaultPrevented\" in args[0] &&\n args[0].defaultPrevented\n ) {\n return;\n }\n\n childHandler(...args);\n };\n }\n\n return result;\n}\n\nconst Slot = React.forwardRef(\n ({ children, ...slotProps }, forwardedRef) => {\n if (!React.isValidElement(children)) {\n return null;\n }\n\n const child = React.Children.only(children) as React.ReactElement<\n Record\n >;\n const childProps = child.props as Record;\n const mergedProps = mergeProps(slotProps, childProps);\n const childRef =\n \"ref\" in child\n ? (child as React.ReactElement & { ref?: React.Ref }).ref\n : undefined;\n\n return React.cloneElement(\n child,\n {\n ...mergedProps,\n ref: composeRefs(forwardedRef, childRef),\n } as Record,\n );\n },\n);\n\nSlot.displayName = \"Slot\";\n\nexport { Slot };\n", "type": "lib", "target": "lib/slot.tsx" } ], "cssVars": { "light": { "500": "var(--blue-500)", "600": "var(--blue-600)", "700": "var(--blue-700)", "uis-btn-primary-text": "var(--text-inverted-txt-default)", "uis-btn-primary-icon": "var(--icon-inverted-icon-default)", "uis-btn-primary-bg": "var(--button-default-button)", "uis-btn-primary-shadow": "0 1px 2px rgba(23, 73, 182, 0.4), 0 0 0 1px #1b71f5,\n inset 0 0.75px 0 rgba(255, 255, 255, 0.2)", "uis-btn-primary-bg-hover": "var(--button-default-button-hover)", "uis-btn-primary-bg-active": "var(--button-default-button-default-active)", "uis-btn-primary-bg-focus": "var(--button-default-button)", "uis-btn-primary-shadow-focus": "0 1px 2px rgba(23, 73, 182, 0.4), 0 0 0 1px #1b71f5, 0 0 0 2px #ffffff,\n 0 0 0 4px rgba(36, 137, 255, 0.6),\n inset 0 0.75px 0 rgba(255, 255, 255, 0.2)", "uis-btn-primary-disabled-bg": "var(--backround-component-component-disabled)", "uis-btn-primary-disabled-text": "var(--text-default-txt-disabled)", "uis-btn-primary-disabled-icon": "var(--icon-default-icon-disabled)", "uis-btn-primary-disabled-shadow": "none", "uis-btn-neutral-text": "var(--text-default-txt-default)", "uis-btn-neutral-icon": "var(--icon-default-icon-muted)", "uis-btn-neutral-bg": "var(--button-neutral-button)", "uis-btn-neutral-shadow": "0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08)", "uis-btn-neutral-bg-hover": "var(--button-neutral-button-hover)", "uis-btn-neutral-bg-active": "var(--button-neutral-button-default-active)", "uis-btn-neutral-bg-focus": "var(--button-neutral-button)", "uis-btn-neutral-shadow-focus": "0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08),\n 0 0 0 2px #ffffff, 0 0 0 4px rgba(36, 137, 255, 0.6)", "uis-btn-neutral-disabled-bg": "var(--backround-component-component-disabled)", "uis-btn-neutral-disabled-text": "var(--text-default-txt-disabled)", "uis-btn-neutral-disabled-icon": "var(--icon-default-icon-disabled)", "uis-btn-neutral-disabled-shadow": "none", "uis-btn-danger-text": "var(--text-inverted-txt-default)", "uis-btn-danger-icon": "var(--icon-inverted-icon-default)", "uis-btn-danger-bg": "var(--button-error-button)", "uis-btn-danger-shadow": "0 1px 2px rgba(165, 15, 30, 0.4), 0 0 0 1px #ed152a,\n inset 0 0.75px 0 rgba(255, 255, 255, 0.2)", "uis-btn-danger-bg-hover": "var(--button-error-button-hover)", "uis-btn-danger-bg-active": "var(--button-error-button-active)", "uis-btn-danger-bg-focus": "var(--button-error-button)", "uis-btn-danger-shadow-focus": "0 1px 2px rgba(165, 15, 30, 0.4), 0 0 0 1px #ed152a, 0 0 0 2px #ffffff,\n 0 0 0 4px rgba(36, 137, 255, 0.6),\n inset 0 0.75px 0 rgba(255, 255, 255, 0.2)", "uis-btn-danger-disabled-bg": "var(--backround-component-component-disabled)", "uis-btn-danger-disabled-text": "var(--text-default-txt-disabled)", "uis-btn-danger-disabled-icon": "var(--icon-default-icon-disabled)", "uis-btn-danger-disabled-shadow": "none", "uis-btn-transparent-text": "var(--text-default-txt-default)", "uis-btn-transparent-icon": "var(--icon-default-icon-muted)", "uis-btn-transparent-bg": "var(--button-transparrent-button)", "uis-btn-transparent-shadow": "none", "uis-btn-transparent-bg-hover": "var(--button-transparrent-button-hover)", "uis-btn-transparent-bg-active": "var(--button-transparrent-button-active)", "uis-btn-transparent-bg-focus": "var(--button-neutral-button)", "uis-btn-transparent-shadow-focus": "0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08),\n 0 0 0 2px #ffffff, 0 0 0 4px rgba(36, 137, 255, 0.6)", "uis-btn-transparent-disabled-bg": "var(--button-transparrent-button)", "uis-btn-transparent-disabled-text": "var(--text-default-txt-disabled)", "uis-btn-transparent-disabled-icon": "var(--icon-default-icon-disabled)", "uis-btn-transparent-disabled-shadow": "none", "uis-btn-transparent-muted-text": "var(--text-default-txt-muted)", "uis-btn-transparent-muted-icon": "var(--icon-default-icon-muted)", "uis-btn-transparent-muted-bg": "var(--button-transparrent-button)", "uis-btn-transparent-muted-shadow": "none", "uis-btn-transparent-muted-bg-hover": "var(--button-transparrent-button-hover)", "uis-btn-transparent-muted-bg-active": "var(--button-transparrent-button-active)", "uis-btn-transparent-muted-bg-focus": "var(--button-neutral-button)", "uis-btn-transparent-muted-shadow-focus": "0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08),\n 0 0 0 2px #ffffff, 0 0 0 4px rgba(36, 137, 255, 0.6)", "uis-btn-transparent-muted-disabled-bg": "var(--button-transparrent-button)", "uis-btn-transparent-muted-disabled-text": "var(--text-default-txt-muted)", "uis-btn-transparent-muted-disabled-icon": "var(--icon-default-icon-muted)", "uis-btn-transparent-muted-disabled-shadow": "none", "icon-default-icon-muted": "var(--neutral-500)", "neutral-500": "#71717b", "text-default-txt-muted": "var(--neutral-500)", "button-transparrent-button": "var(--alpha-white-alpha-0)", "alpha-white-alpha-0": "#ffffff00", "button-neutral-button": "var(--neutral-0)", "neutral-0": "#ffffff", "button-transparrent-button-active": "var(--alpha-black-alpha-10)", "alpha-black-alpha-10": "#09090b1a", "button-transparrent-button-hover": "var(--alpha-black-alpha-6)", "alpha-black-alpha-6": "#09090b0f", "icon-default-icon-disabled": "var(--neutral-400)", "neutral-400": "#9f9fa9", "text-default-txt-disabled": "var(--neutral-400)", "text-default-txt-default": "var(--neutral-950)", "neutral-950": "#09090b", "backround-component-component-disabled": "var(--neutral-100)", "neutral-100": "#f4f4f5", "button-error-button": "var(--red-500)", "red-500": "#ff3347", "button-error-button-active": "var(--red-700)", "red-700": "#c80d1f", "button-error-button-hover": "var(--red-600)", "red-600": "#ed152a", "icon-inverted-icon-default": "var(--neutral-0)", "text-inverted-txt-default": "var(--neutral-0)", "button-neutral-button-default-active": "var(--neutral-200)", "neutral-200": "#e4e4e7", "button-neutral-button-hover": "var(--neutral-100)", "button-default-button": "var(--500)", "blue-500": "#2489ff", "button-default-button-default-active": "var(--700)", "blue-700": "#145be1", "button-default-button-hover": "var(--600)", "blue-600": "#1b71f5" }, "dark": { "500": "var(--blue-500)", "600": "var(--blue-600)", "700": "var(--blue-700)", "uis-btn-primary-text": "var(--text-inverted-txt-default)", "uis-btn-primary-icon": "var(--icon-inverted-icon-default)", "uis-btn-primary-bg": "var(--button-default-button)", "uis-btn-primary-shadow": "0 1px 2px rgba(23, 73, 182, 0.4), 0 0 0 1px #1b71f5,\n inset 0 0.75px 0 rgba(255, 255, 255, 0.2)", "uis-btn-primary-bg-hover": "var(--button-default-button-hover)", "uis-btn-primary-bg-active": "var(--button-default-button-default-active)", "uis-btn-primary-bg-focus": "var(--button-default-button)", "uis-btn-primary-shadow-focus": "0 1px 2px rgba(23, 73, 182, 0.4), 0 0 0 1px #1b71f5, 0 0 0 2px #ffffff,\n 0 0 0 4px rgba(36, 137, 255, 0.6),\n inset 0 0.75px 0 rgba(255, 255, 255, 0.2)", "uis-btn-primary-disabled-bg": "var(--backround-component-component-disabled)", "uis-btn-primary-disabled-text": "var(--text-default-txt-disabled)", "uis-btn-primary-disabled-icon": "var(--icon-default-icon-disabled)", "uis-btn-primary-disabled-shadow": "none", "uis-btn-neutral-text": "var(--text-default-txt-default)", "uis-btn-neutral-icon": "var(--icon-default-icon-muted)", "uis-btn-neutral-bg": "var(--button-neutral-button)", "uis-btn-neutral-shadow": "0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08)", "uis-btn-neutral-bg-hover": "var(--button-neutral-button-hover)", "uis-btn-neutral-bg-active": "var(--button-neutral-button-default-active)", "uis-btn-neutral-bg-focus": "var(--button-neutral-button)", "uis-btn-neutral-shadow-focus": "0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08),\n 0 0 0 2px #ffffff, 0 0 0 4px rgba(36, 137, 255, 0.6)", "uis-btn-neutral-disabled-bg": "var(--backround-component-component-disabled)", "uis-btn-neutral-disabled-text": "var(--text-default-txt-disabled)", "uis-btn-neutral-disabled-icon": "var(--icon-default-icon-disabled)", "uis-btn-neutral-disabled-shadow": "none", "uis-btn-danger-text": "var(--text-inverted-txt-default)", "uis-btn-danger-icon": "var(--icon-inverted-icon-default)", "uis-btn-danger-bg": "var(--button-error-button)", "uis-btn-danger-shadow": "0 1px 2px rgba(165, 15, 30, 0.4), 0 0 0 1px #ed152a,\n inset 0 0.75px 0 rgba(255, 255, 255, 0.2)", "uis-btn-danger-bg-hover": "var(--button-error-button-hover)", "uis-btn-danger-bg-active": "var(--button-error-button-active)", "uis-btn-danger-bg-focus": "var(--button-error-button)", "uis-btn-danger-shadow-focus": "0 1px 2px rgba(165, 15, 30, 0.4), 0 0 0 1px #ed152a, 0 0 0 2px #ffffff,\n 0 0 0 4px rgba(36, 137, 255, 0.6),\n inset 0 0.75px 0 rgba(255, 255, 255, 0.2)", "uis-btn-danger-disabled-bg": "var(--backround-component-component-disabled)", "uis-btn-danger-disabled-text": "var(--text-default-txt-disabled)", "uis-btn-danger-disabled-icon": "var(--icon-default-icon-disabled)", "uis-btn-danger-disabled-shadow": "none", "uis-btn-transparent-text": "var(--text-default-txt-default)", "uis-btn-transparent-icon": "var(--icon-default-icon-muted)", "uis-btn-transparent-bg": "var(--button-transparrent-button)", "uis-btn-transparent-shadow": "none", "uis-btn-transparent-bg-hover": "var(--button-transparrent-button-hover)", "uis-btn-transparent-bg-active": "var(--button-transparrent-button-active)", "uis-btn-transparent-bg-focus": "var(--button-neutral-button)", "uis-btn-transparent-shadow-focus": "0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08),\n 0 0 0 2px #ffffff, 0 0 0 4px rgba(36, 137, 255, 0.6)", "uis-btn-transparent-disabled-bg": "var(--button-transparrent-button)", "uis-btn-transparent-disabled-text": "var(--text-default-txt-disabled)", "uis-btn-transparent-disabled-icon": "var(--icon-default-icon-disabled)", "uis-btn-transparent-disabled-shadow": "none", "uis-btn-transparent-muted-text": "var(--text-default-txt-muted)", "uis-btn-transparent-muted-icon": "var(--icon-default-icon-muted)", "uis-btn-transparent-muted-bg": "var(--button-transparrent-button)", "uis-btn-transparent-muted-shadow": "none", "uis-btn-transparent-muted-bg-hover": "var(--button-transparrent-button-hover)", "uis-btn-transparent-muted-bg-active": "var(--button-transparrent-button-active)", "uis-btn-transparent-muted-bg-focus": "var(--button-neutral-button)", "uis-btn-transparent-muted-shadow-focus": "0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08),\n 0 0 0 2px #ffffff, 0 0 0 4px rgba(36, 137, 255, 0.6)", "uis-btn-transparent-muted-disabled-bg": "var(--button-transparrent-button)", "uis-btn-transparent-muted-disabled-text": "var(--text-default-txt-muted)", "uis-btn-transparent-muted-disabled-icon": "var(--icon-default-icon-muted)", "uis-btn-transparent-muted-disabled-shadow": "none", "icon-default-icon-muted": "var(--neutral-500)", "neutral-500": "#71717b", "text-default-txt-muted": "var(--neutral-500)", "button-transparrent-button": "var(--alpha-white-alpha-0)", "alpha-white-alpha-0": "#ffffff00", "button-neutral-button": "var(--alpha-white-alpha-4)", "alpha-white-alpha-4": "#ffffff0a", "button-transparrent-button-active": "var(--alpha-white-alpha-12)", "alpha-white-alpha-12": "#ffffff1f", "button-transparrent-button-hover": "var(--alpha-white-alpha-8)", "alpha-white-alpha-8": "#ffffff14", "icon-default-icon-disabled": "var(--neutral-600)", "neutral-600": "#52525c", "text-default-txt-disabled": "var(--neutral-600)", "text-default-txt-default": "var(--neutral-100)", "neutral-100": "#f4f4f5", "backround-component-component-disabled": "var(--neutral-800)", "neutral-800": "#27272a", "button-error-button": "var(--red-600)", "red-600": "#ed152a", "button-error-button-active": "var(--red-700)", "red-700": "#c80d1f", "button-error-button-hover": "var(--red-500)", "red-500": "#ff3347", "icon-inverted-icon-default": "var(--neutral-0)", "neutral-0": "#ffffff", "text-inverted-txt-default": "var(--neutral-0)", "button-neutral-button-default-active": "var(--alpha-white-alpha-12)", "button-neutral-button-hover": "var(--alpha-white-alpha-8)", "button-default-button": "var(--600)", "blue-600": "#1b71f5", "button-default-button-default-active": "var(--700)", "blue-700": "#145be1", "button-default-button-hover": "var(--500)", "blue-500": "#2489ff" } } }