Export multiple workspaces

src-web/components/core/Button.tsx

@@ -60,17 +60,27 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     size === 'sm' && 'h-sm px-2.5 text-sm',
     size === 'xs' && 'h-xs px-2 text-sm',
     // Solids
-    variant === 'solid' && color === 'custom' && 'ring-blue-400',
+    variant === 'solid' &&
+      color === 'custom' &&
+      'ring-blue-400 enabled:hocus:bg-highlightSecondary',
     variant === 'solid' &&
       color === 'default' &&
       'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-800 ring-blue-400',
     variant === 'solid' &&
       color === 'gray' &&
-      'text-gray-800 bg-highlight enabled:hocus:text-gray-1000 ring-blue-400',
-    variant === 'solid' && color === 'primary' && 'bg-blue-400 text-white ring-blue-700',
-    variant === 'solid' && color === 'secondary' && 'bg-violet-400 text-white ring-violet-700',
-    variant === 'solid' && color === 'warning' && 'bg-orange-400 text-white ring-orange-700',
-    variant === 'solid' && color === 'danger' && 'bg-red-400 text-white ring-red-700',
+      'text-gray-800 bg-gray-200/70 enabled:hocus:bg-gray-200 ring-blue-400',
+    variant === 'solid' &&
+      color === 'primary' &&
+      'bg-blue-400 text-white ring-blue-700 enabled:hocus:bg-blue-500',
+    variant === 'solid' &&
+      color === 'secondary' &&
+      'bg-violet-400 text-white ring-violet-700 enabled:hocus:bg-violet-500',
+    variant === 'solid' &&
+      color === 'warning' &&
+      'bg-orange-400 text-white ring-orange-700 enabled:hocus:bg-orange-500',
+    variant === 'solid' &&
+      color === 'danger' &&
+      'bg-red-400 text-white ring-red-700 enabled:hocus:bg-red-500',
     // Borders
     variant === 'border' && 'border',
     variant === 'border' &&

src-web/components/core/Checkbox.tsx

@@ -8,10 +8,21 @@ interface Props {
   onChange: (checked: boolean) => void;
   disabled?: boolean;
   className?: string;
+  inputWrapperClassName?: string;
+  indeterminate?: boolean;
   hideLabel?: boolean;
 }
 
-export function Checkbox({ checked, onChange, className, disabled, title, hideLabel }: Props) {
+export function Checkbox({
+  checked,
+  indeterminate,
+  onChange,
+  className,
+  inputWrapperClassName,
+  disabled,
+  title,
+  hideLabel,
+}: Props) {
   return (
     <HStack
       as="label"
@@ -19,16 +30,19 @@ export function Checkbox({ checked, onChange, className, disabled, title, hideLa
       alignItems="center"
       className={classNames(className, 'text-gray-900 text-sm', disabled && 'opacity-disabled')}
     >
-      <div className="relative flex">
+      <div className={classNames(inputWrapperClassName, 'relative flex')}>
         <input
           aria-hidden
-          className="appearance-none w-4 h-4 flex-shrink-0 border border-gray-200 rounded focus:border-focus outline-none ring-0"
+          className={classNames(
+            'opacity-50 appearance-none w-4 h-4 flex-shrink-0 border border-[currentColor]',
+            'rounded focus:border-focus focus:opacity-100 outline-none ring-0',
+          )}
           type="checkbox"
           disabled={disabled}
           onChange={() => onChange(!checked)}
         />
         <div className="absolute inset-0 flex items-center justify-center">
-          <Icon size="sm" icon={checked ? 'check' : 'empty'} />
+          <Icon size="sm" icon={indeterminate ? 'minus' : checked ? 'check' : 'empty'} />
         </div>
       </div>
       {/*<button*/}

src-web/components/core/Icon.tsx

@@ -17,6 +17,7 @@ const icons = {
   arrowUpFromDot: lucide.ArrowUpFromDotIcon,
   box: lucide.BoxIcon,
   cake: lucide.CakeIcon,
+  minus: lucide.MinusIcon,
   chat: lucide.MessageSquare,
   check: lucide.CheckIcon,
   chevronDown: lucide.ChevronDownIcon,