fix(ui-toolkit): toolkit bugs (#4329)

libs/ui-toolkit/src/components/button/button.tsx

@@ -30,14 +30,14 @@ const primary = [
   'enabled:active:bg-vega-yellow-550 enabled:active:border-vega-yellow-550',
 ];
 const secondary = [
-  'text-white dark:text-black',
+  'text-white',
   'border-vega-pink',
   'dark:bg-vega-pink bg-vega-pink-550',
   'enabled:hover:bg-vega-pink enabled:hover:border-vega-pink',
   'enabled:active:bg-vega-pink enabled:active:border-vega-pink',
 ];
 const ternary = [
-  'text-white dark:text-black',
+  'text-black',
   'border-vega-green',
   'dark:bg-vega-green bg-vega-green-550',
   'enabled:hover:bg-vega-green enabled:hover:border-vega-green',

libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx

@@ -15,6 +15,13 @@ Default.args = {
   label: 'Regular checkbox',
 };
 
+export const Overflow = Template.bind({});
+Overflow.args = {
+  name: 'overflow',
+  label:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,

libs/ui-toolkit/src/components/checkbox/checkbox.tsx

@@ -20,7 +20,7 @@ export const Checkbox = ({
   disabled = false,
 }: CheckboxProps) => {
   const rootClasses = classNames(
-    'relative flex justify-center items-center w-[15px] h-[15px]',
+    'relative flex justify-center items-center w-[15px] h-[15px] mt-1',
     'border rounded-sm overflow-hidden',
     {
       'opacity-40 cursor-default': disabled,
@@ -30,7 +30,7 @@ export const Checkbox = ({
   );
 
   return (
-    <div className="flex gap-1 items-center">
+    <div className="flex gap-1">
       <CheckboxPrimitive.Root
         name={name}
         id={name}

libs/ui-toolkit/src/utils/shared.ts

@@ -8,10 +8,11 @@ export const defaultFormElement = (hasError?: boolean) =>
     'flex items-center w-full text-sm',
     'p-2 border-2 rounded',
     'bg-transparent',
-    'border border-vega-light-200 dark:border-vega-dark-200',
+    'border',
     'focus:border-vega-light-300 dark:focus:border-vega-dark-300',
     'disabled:opacity-60',
     {
-      'border-vega-pink': hasError,
+      'border-vega-pink text-vega-pink': hasError,
+      'border-vega-light-200 dark:border-vega-dark-200': !hasError,
     }
   );