Update styles

Ensure components have consistent styles.

categories/web/action/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-action-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/action/react/src/components/ActionButton/index.tsx

@@ -87,10 +87,11 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
     type={type}
     ref={forwardedRef}
     className={tw(
-      'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none',
+      'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none relative',
       'focus:outline-0 focus:ring-4',
       'active:ring-tertiary/50',
       'disabled:opacity-50 disabled:cursor-not-allowed',
+			'text-primary focus:text-secondary active:text-tertiary',
       {
         'flex w-full': block,
         'inline-flex max-w-full align-middle': !block,
@@ -102,9 +103,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
         'pr-2': compact || menuItem,
       },
       {
-        'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare',
-        'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled',
-        'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled',
+        'bg-current': variant === 'filled',
       },
       {
         'h-10': size === 'small',
@@ -117,8 +116,9 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
     <span
 			data-testid="childrenParent"
       className={tw(
-				'flex-auto min-w-0 flex items-center gap-2',
+				'flex-auto min-w-0 flex items-center gap-2 relative',
 				iconAfterChildren ? 'flex-row-reverse' : 'flex-row',
+				variant === 'filled' && 'text-negative',
 			)}
     >
 			{icon && (
@@ -171,6 +171,10 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
         </span>
         <span
           data-testid="badge"
+					className={tw(
+						'relative',
+						variant === 'filled' && 'text-negative',
+					)}
         >
           {badge}
         </span>
@@ -179,6 +183,10 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
     {menuItem && (
       <span
         data-testid="menuItemIndicator"
+				className={tw(
+					'relative',
+					variant === 'filled' && 'text-negative',
+				)}
       >
         <svg
           className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
@@ -189,6 +197,14 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
         </svg>
       </span>
     )}
+		{
+			variant !== 'bare'
+			&& (
+				<span
+					className="border-current border-2 rounded-inherit absolute w-full h-full top-0 left-0"
+				/>
+			)
+		}
   </ActionButtonDerivedElementComponent>
 ));
 

categories/web/blob/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-blob-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/blob/react/src/components/FileSelectBox/index.tsx

@@ -188,7 +188,7 @@ export interface FileSelectBoxProps<
 	/**
 	 * Should the component resize vertically?
 	 */
-	resize?: boolean,
+	resizable?: boolean,
 }
 
 const isButtonElement = (el: HTMLElement): el is FileSelectBoxActionElement => el.tagName === 'BUTTON';
@@ -234,7 +234,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
     reselectLabel = 'Reselect' as const,
     clearLabel = 'Clear' as const,
     onPaste,
-		resize = false as const,
+		resizable = false as const,
     ...etcProps
   },
   forwardedRef,
@@ -445,7 +445,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
 					{
 						'h-4': clientSide,
 						'h-16': !clientSide,
-						'resize-y': resize,
+						'resize-y': resizable,
 						'pb-4': clientSide && filesCount > 0,
 					},
 				)}
@@ -651,7 +651,7 @@ FileSelectBox.defaultProps = {
   previewComponent: FileSelectBoxDefaultPreviewComponent,
   reselectLabel: 'Reselect' as const,
   clearLabel: 'Clear' as const,
-	resize: false as const,
+	resizable: false as const,
 };
 
 FileSelectBoxDefaultPreviewComponent.defaultProps = {

categories/web/choice/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-choice-react",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/choice/react/src/components/RadioButton/index.tsx

@@ -96,10 +96,11 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
         htmlFor={id}
         data-testid="button"
         className={tw(
-          'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer',
+          'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer relative',
           'peer-focus:outline-0 peer-focus:ring-4 peer-focus:ring-secondary/50',
           'active:ring-tertiary/50 active:ring-4',
           'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:ring-0',
+					'text-primary focus:text-secondary active:text-tertiary',
           {
             'flex w-full': block,
             'inline-flex max-w-full align-middle': !block,
@@ -108,9 +109,11 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
             'pl-2 gap-2 pr-2': compact,
             'pl-4 gap-4 pr-4': !compact,
           },
+					{
+						'bg-current': variant === 'filled',
+					},
           {
-            'border-2 border-primary peer-disabled:border-primary peer-focus:border-secondary peer-checked:border-tertiary active:border-tertiary': variant !== 'bare',
-            'bg-negative text-primary peer-disabled:text-primary peer-focus:text-secondary peer-checked:text-tertiary active:text-tertiary': variant !== 'filled',
+            'text-primary peer-disabled:text-primary peer-focus:text-secondary peer-checked:text-tertiary active:text-tertiary': variant !== 'filled',
             'bg-primary text-negative peer-disabled:bg-primary peer-focus:bg-secondary peer-checked:bg-tertiary active:bg-tertiary': variant === 'filled',
           },
           {
@@ -187,6 +190,14 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
             </>
           )}
         </span>
+				{
+					variant !== 'bare'
+					&& (
+						<span
+							className="border-current border-2 rounded-inherit absolute w-full h-full top-0 left-0"
+						/>
+					)
+				}
       </label>
     </span>
   );

categories/web/color/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-color-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/formatted/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-formatted-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/freeform/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-freeform-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/information/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-information-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/multichoice/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-multichoice-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/navigation/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-navigation-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/navigation/react/src/components/LinkButton/index.tsx

@@ -119,41 +119,41 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
       href={disabled ? undefined : href as string}
       type={disabled ? 'button' : undefined}
       ref={forwardedRef}
-      className={tw(
-        'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline m-0',
-        'focus:outline-0 focus:ring-4',
-        'active:ring-tertiary/50',
-        'disabled:opacity-50 disabled:cursor-not-allowed',
-        {
-          'flex w-full': block,
-          'inline-flex max-w-full align-middle': !block,
-        },
-        {
-          'pl-2 gap-2': compact,
-          'pl-4 gap-4': !compact,
-          'pr-4': !(compact || menuItem),
-          'pr-2': compact || menuItem,
-        },
-        {
-          'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare',
-          'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled',
-          'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled',
-        },
-        {
-          'h-10': size === 'small',
-          'h-12': size === 'medium',
-          'h-16': size === 'large',
-        },
-        className,
-      )}
+			className={tw(
+				'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none relative',
+				'focus:outline-0 focus:ring-4',
+				'active:ring-tertiary/50',
+				'disabled:opacity-50 disabled:cursor-not-allowed',
+				'text-primary focus:text-secondary active:text-tertiary',
+				{
+					'flex w-full': block,
+					'inline-flex max-w-full align-middle': !block,
+				},
+				{
+					'pl-2 gap-2': compact,
+					'pl-4 gap-4': !compact,
+					'pr-4': !(compact || menuItem),
+					'pr-2': compact || menuItem,
+				},
+				{
+					'bg-current': variant === 'filled',
+				},
+				{
+					'h-10': size === 'small',
+					'h-12': size === 'medium',
+					'h-16': size === 'large',
+				},
+				className,
+			)}
       data-testid="link"
       style={style}
     >
       <span
 				data-testid="childrenParent"
 				className={tw(
-					'flex-auto min-w-0 flex items-center gap-2',
+					'flex-auto min-w-0 flex items-center gap-2 relative',
 					iconAfterChildren ? 'flex-row-reverse' : 'flex-row',
+					variant === 'filled' && 'text-negative',
 				)}
       >
 				{icon && (
@@ -206,6 +206,10 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
           </span>
           <span
             data-testid="badge"
+						className={tw(
+							'relative',
+							variant === 'filled' && 'text-negative',
+						)}
           >
             {badge}
           </span>
@@ -214,6 +218,10 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
       {menuItem && (
         <span
           data-testid="menuItemIndicator"
+					className={tw(
+						'relative',
+						variant === 'filled' && 'text-negative',
+					)}
         >
           <svg
             className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
@@ -224,6 +232,14 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
           </svg>
         </span>
       )}
+			{
+				variant !== 'bare'
+				&& (
+					<span
+						className="border-current border-2 rounded-inherit absolute w-full h-full top-0 left-0"
+					/>
+				)
+			}
     </Component>
   );
 });

categories/web/number/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-number-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"

categories/web/temporal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-temporal-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"