feat: migrate to primer design tokens

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/fields/Checkbox.test.tsx

@@ -5,7 +5,6 @@ describe('renderer/components/fields/Checkbox.tsx', () => {
   const props: ICheckbox = {
     name: 'appearance',
     label: 'Appearance',
-    helpText: 'This is some helper text',
     checked: true,
     onChange: jest.fn(),
   };

src/renderer/components/fields/Checkbox.tsx

@@ -4,7 +4,6 @@ import { Tooltip } from './Tooltip';
 export interface ICheckbox {
   name: string;
   label: string;
-  helpText?: ReactNode | string;
   tooltip?: ReactNode | string;
   checked: boolean;
   disabled?: boolean;
@@ -39,12 +38,6 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
           )}
         </div>
       </div>
-
-      {props.helpText && (
-        <div className="mt-1 text-xs italic text-gray-500 dark:text-gray-300">
-          {props.helpText}
-        </div>
-      )}
     </div>
   );
 };

src/renderer/components/fields/FieldInput.tsx

@@ -33,8 +33,8 @@ export const FieldInput: FC<IFieldInput> = ({
           <input
             type={type}
             className={cn(
-              'mb-2 block w-full appearance-none',
-              'rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800',
+              'text-sm mb-2 px-4 py-1.5 block w-full appearance-none',
+              'rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none',
               error ? 'border-red-500' : 'border-gray-500',
             )}
             id={input.name}

src/renderer/components/fields/RadioGroup.test.tsx

@@ -5,7 +5,6 @@ describe('renderer/components/fields/RadioGroup.tsx', () => {
   const props: IRadioGroup = {
     label: 'Appearance',
     name: 'appearance',
-    helpText: 'This is some helper text',
     options: [
       { label: 'Value 1', value: 'one' },
       { label: 'Value 2', value: 'two' },

src/renderer/components/fields/RadioGroup.tsx

@@ -6,7 +6,6 @@ import { Tooltip } from './Tooltip';
 export interface IRadioGroup {
   name: string;
   label: string;
-  helpText?: ReactNode | string;
   tooltip?: ReactNode | string;
   options: RadioGroupItem[];
   value: string;
@@ -66,12 +65,6 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           })}
         </div>
       </div>
-
-      {props.helpText && (
-        <div className="mt-1 text-xs italic text-gray-500 dark:text-gray-300">
-          {props.helpText}
-        </div>
-      )}
     </div>
   );
 };

src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap

@@ -7,7 +7,7 @@ interface IPage {
 
 export const Page: FC<IPage> = (props: IPage) => {
   return (
-    <div className="flex h-screen flex-col" data-testid={props.id}>
+    <div className="flex flex-col h-screen" data-testid={props.id}>
       {props.children}
     </div>
   );