Update tailwind styles

Revert default styles.

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

@@ -4,6 +4,40 @@ import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-uti
 
 const { tw } = tailwind;
 
+const digitalUnits = [
+	'byte',
+	'kilobyte',
+	'megabyte',
+	'gigabyte',
+	'terabyte',
+	'petabyte',
+	'exabyte',
+	'zettabyte',
+	'yottabyte',
+	'brontobyte',
+] as const;
+
+const getCompactDigitalUnitValue = (byteCount: number) => {
+	// kibibytes, mebibytes...
+	// return byteCount / (2 ** (10 * getCompactDigitalUnitTier(byteCount)));
+	return byteCount / (10 ** (3 * getCompactDigitalUnitTier(byteCount)));
+}
+
+const getCompactDigitalUnitTier = (byteCount: string | number | bigint) => {
+	const byteCountBigInt = BigInt(byteCount);
+	for (let i = 0; i < digitalUnits.length - 1; i += 1) {
+		// kibibytes, mebibytes...
+		// if (byteCountBigInt < BigInt(2) ** BigInt(10 * i)) {
+		// 	return i - 1;
+		// }
+		if (byteCountBigInt < BigInt(10) ** BigInt(3 * i)) {
+			return i - 1;
+		}
+	}
+
+	return digitalUnits.length - 1;
+};
+
 const FileSelectBoxDefaultPreviewComponentDerivedElementComponent = 'div' as const;
 
 /**
@@ -62,9 +96,9 @@ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef<
     </div>
     {!mini && (
       <>
-        {typeof file?.type === 'string' && (
-          <div className="w-full whitespace-nowrap overflow-hidden text-ellipsis">{file?.type}</div>
-        )}
+				<div className="w-full whitespace-nowrap text-sm overflow-hidden text-ellipsis">
+					{file?.type || 'application/octet-stream'}
+				</div>
         {typeof file?.size === 'number' && (
           <div
             title={new Intl.NumberFormat(undefined, {
@@ -72,17 +106,17 @@ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef<
               unit: 'byte',
               unitDisplay: 'long',
             }).format(file.size)}
-            className="w-full whitespace-nowrap overflow-hidden text-ellipsis tabular-nums"
+            className="w-full whitespace-nowrap text-sm overflow-hidden text-ellipsis tabular-nums"
           >
             {new Intl.NumberFormat(undefined, {
               style: 'unit',
-              unit: 'kilobyte',
-              unitDisplay: 'long',
-            }).format(file.size)}
+              unit: digitalUnits[getCompactDigitalUnitTier(file.size)],
+              unitDisplay: getCompactDigitalUnitTier(file.size) === 0 ? 'long' : 'short',
+            }).format(getCompactDigitalUnitValue(file.size))}
           </div>
         )}
         {typeof file?.lastModified === 'number' && (
-          <div className="w-full whitespace-nowrap overflow-hidden text-ellipsis">
+          <div className="w-full whitespace-nowrap text-sm overflow-hidden text-ellipsis">
             <time dateTime={new Date(file.lastModified).toISOString()}>
               {new Date(file.lastModified).toDateString()}
             </time>
@@ -93,10 +127,6 @@ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef<
   </FileSelectBoxDefaultPreviewComponentDerivedElementComponent>
 ));
 
-const DEFAULT_ENHANCED_HEIGHT_PX = 64 as const;
-
-const DEFAULT_NON_ENHANCED_SIDE_HEIGHT_PX = 256 as const;
-
 const FileSelectBoxRootElementComponent = 'div' as const;
 
 type FileSelectBoxRootElement = HTMLElementTagNameMap[typeof FileSelectBoxRootElementComponent];
@@ -463,7 +493,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
 					onKeyDown={clientSide ? handleKeyDown : undefined}
 					onKeyUp={clientSide ? doSetFileList : undefined}
 					className={tw(
-						'peer box-border focus:outline-0 file:cursor-pointer disabled:file:cursor-pointer block cursor-pointer disabled:cursor-not-allowed file:bg-transparent file:text-primary file:block file:font-bold file:font-semi-expanded file:uppercase file:p-0 file:border-0 group-focus-within:file:text-secondary',
+						'peer text-sm box-border focus:outline-0 file:cursor-pointer disabled:file:cursor-pointer block cursor-pointer disabled:cursor-not-allowed file:bg-transparent file:text-primary file:block file:font-bold file:font-semi-expanded file:uppercase file:p-0 file:border-0 group-focus-within:file:text-secondary',
 						{
 							'sr-only': clientSide,
 							'h-full w-full px-4': !clientSide,

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { useFallbackId } from '@modal-sh/react-utils';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { tailwind } from '@tesseract-design/web-base';
+
+const { tw } = tailwind;
 
 const RadioTickBoxDerivedElementComponent = 'input' as const;
 
@@ -25,7 +27,7 @@ export interface RadioTickBoxProps extends Omit<React.InputHTMLAttributes<RadioT
   subtext?: React.ReactNode;
 }
 
-export const radioTickBoxPlugin: PluginCreator = ({ addComponents }) => {
+export const radioTickBoxPlugin: tailwind.PluginCreator = ({ addComponents }) => {
   addComponents({
     '.radio-tick-box': {
       '& + label + label > :first-child > :first-child': {
@@ -59,7 +61,7 @@ export const RadioTickBox = React.forwardRef<RadioTickBoxDerivedElement, RadioTi
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'gap-x-4 flex-wrap',
         block && 'flex',
         !block && 'inline-flex align-center',
@@ -87,7 +89,7 @@ export const RadioTickBox = React.forwardRef<RadioTickBoxDerivedElement, RadioTi
       </label>
       <label
         htmlFor={id}
-        className={clsx(
+        className={tw(
           'order-1 block rounded-full ring-secondary/50 overflow-hidden gap-4 leading-none select-none cursor-pointer',
           'peer-focus/radio:outline-0 peer-focus/radio:ring-4 peer-focus/radio:ring-secondary/50',
           'active:ring-tertiary/50 active:ring-4',
@@ -97,12 +99,12 @@ export const RadioTickBox = React.forwardRef<RadioTickBoxDerivedElement, RadioTi
         )}
       >
         <span
-          className={clsx(
+          className={tw(
             'w-6 h-6 block rounded-full border-2 p-0.5 box-border border-current',
           )}
         >
           <span
-            className={clsx(
+            className={tw(
               'w-full h-full rounded-full bg-current text-current',
             )}
           />

storybook/react/tailwind.config.ts

@@ -39,16 +39,6 @@ const config: Config = {
 			headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
 			mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
 		},
-		fontSize: {
-			'lg': '1.125em',
-			'xl': '1.25em',
-			'2xl': '1.5em',
-			'3xl': '1.75em',
-			'4xl': '2em',
-			'5xl': '3em',
-			'6xl': '4em',
-			'xxs': '0.625rem',
-		},
 		colors: {
 			'sidebar': 'rgb(var(--color-sidebar)',
 			'topbar': 'rgb(var(--color-topbar)',
@@ -72,6 +62,21 @@ const config: Config = {
 			'code-url': 'rgb(var(--color-code-url))',
 			'code-global': 'rgb(var(--color-code-global))',
 		},
+		extend: {
+			fontSize: {
+				'xxs': '0.625rem',
+				'xs': '0.75em',
+				'sm': '0.875em',
+				'base': '1em',
+				'lg': '1.125em',
+				'xl': '1.25em',
+				'2xl': '1.5em',
+				'3xl': '1.75em',
+				'4xl': '2em',
+				'5xl': '3em',
+				'6xl': '4em',
+			},
+		}
 	},
 	plugins: [
 		tailwind.basePlugin,