@onehat/ui 0.4.12 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.12",
+	"version": "0.4.14",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Buttons/IconButton.js

@@ -14,14 +14,11 @@ const IconButtonElement = forwardRef((props, ref) => {
 
 	let buttonClassName = `
 		IconButton
-		${styles.ICON_BUTTON_PY}
-		${styles.ICON_BUTTON_PX}
-		${styles.ICON_BUTTON_BG}
-		${styles.ICON_BUTTON_BG_HOVER}
-		${styles.ICON_BUTTON_BG_ACTIVE}
-		${styles.ICON_BUTTON_BG_DISABLED}
 		rounded-md
 		self-center
+		px-[10px]
+		py-[10px]
+		${styles.ICON_BUTTON_CLASSNAME}
 	`;
 	if (props.className) {
 		buttonClassName += ' ' + props.className;

package/src/Components/Editor/InlineEditor.js

@@ -157,8 +157,8 @@ function InlineEditor(props) {
 							py-1
 							border-t-4
 							border-b-4
-							${styles.GRID_INLINE_EDITOR_BORDER_TOP_COLOR}
-							${styles.GRID_INLINE_EDITOR_BORDER_BOTTOM_COLOR}
+							border-t-primary-100
+							border-b-primary-100
 						`}
 					/>
 				</VStack>

package/src/Components/Form/Field/Color.js

@@ -137,7 +137,12 @@ export function ColorElement(props) {
 	assembledComponents =
 		<HStackNative
 			onLayout={() => setIsRendered(true)}
-			className="flex-1 h-full items-center"
+			className={`
+				ColorElement-HStackNative
+				flex-1
+				h-full
+				items-center
+			`}
 		>
 			<Pressable
 				ref={triggerRef}
@@ -147,7 +152,14 @@ export function ColorElement(props) {
 				borderBottomLeftRadius={6}
 				borderTopRightRadius={0}
 				borderBottomRightRadius={0}
-				className={` bg-${value} h-[10px] w-[10px] border border-grey-300 `}
+				className={`
+					ColorElement-Pressable
+					bg-${value}
+					h-[10px]
+					w-[10px]
+					border
+					border-grey-300
+				`}
 			/>
 			<Input
 				ref={inputRef}
@@ -157,6 +169,7 @@ export function ColorElement(props) {
 				onBlur={onInputBlur}
 				onClick={onInputClick}
 				className={`
+					ColorElement-Input
 					flex-1
 					h-full
 					p-2
@@ -167,9 +180,7 @@ export function ColorElement(props) {
 					border-bottom-left-radius-0
 					border-top-right-radius-6
 					border-bottom-right-radius-6
-					${styles.FORM_COLOR_READOUT_FONTSIZE}
-					${styles.FORM_COLOR_INPUT_BG}
-					${styles.FORM_COLOR_INPUT_BG_FOCUS}
+					${styles.FORM_COLOR_INPUT_CLASSNAME}
 				`}
 				onLayout={(e) => {
 					// On web, this is not needed, but on RN it might be, so leave it in for now
@@ -190,11 +201,14 @@ export function ColorElement(props) {
 				trigger={emptyFn}
 				trapFocus={true}
 				placement={'auto'}
-				{...props}
+				className={`
+					ColorElement-Popover
+				`}
 			>
 				<PopoverContent
 					position="absolute"
 					className={`
+						ColorElement-PopoverContent
 						w-[220px]
 						h-[287px]
 					`}
@@ -206,7 +220,10 @@ export function ColorElement(props) {
 				>
 					<PopoverBody
 						ref={pickerRef}
-						className="p-0"
+						className={`
+							ColorElement-PopoverBody
+							p-0
+						`}
 					>
 						<SketchPicker
 							disableAlpha={true}

package/src/Components/Form/Field/Combo/Combo.js

@@ -519,8 +519,7 @@ export function ComboComponent(props) {
 						className={`
 							h-full
 							mr-1
-							${styles.FORM_COMBO_TRIGGER_BG}
-							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 						`}
 					/>;
 	}
@@ -538,8 +537,7 @@ export function ComboComponent(props) {
 						className={`
 							h-full
 							mr-1
-							${styles.FORM_COMBO_TRIGGER_BG}
-							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 						`}
 					/>;
 	}
@@ -552,8 +550,7 @@ export function ComboComponent(props) {
 		border-gray-400
 		rounded-l-none
 		rounded-r-md
-		${styles.FORM_COMBO_TRIGGER_BG}
-		${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+		${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 	`;
 	trigger = <IconButton
 				{...testProps('trigger')}
@@ -575,7 +572,7 @@ export function ComboComponent(props) {
 						{...testProps('toggleMenuBtn')}
 						onPress={toggleMenu}
 						className={`
-							toggleMenuBtn
+							Combo-toggleMenuBtn
 							h-auto
 							self-stretch
 							flex-1
@@ -596,12 +593,12 @@ export function ComboComponent(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 							className={`
-								Text
+								Combo-TextNative
 								h-auto
 								self-stretch
 								flex-1
 								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-								${styles.FORM_COMBO_INPUT_FONTSIZE}
+								${styles.FORM_COMBO_INPUT_CLASSNAME}
 							`}
 						>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 					</Pressable> :
@@ -620,7 +617,7 @@ export function ComboComponent(props) {
 						autoSubmitDelay={500}
 						placeholder={placeholder}
 						className={`
-							ComboInput
+							Combo-Input
 							grow
 							h-auto
 							self-stretch
@@ -628,9 +625,7 @@ export function ComboComponent(props) {
 							m-0
 							rounded-tr-none
 							rounded-br-none
-							${styles.FORM_COMBO_INPUT_FONTSIZE}
-							${styles.FORM_COMBO_INPUT_BG}
-							${styles.FORM_COMBO_INPUT_BG_FOCUS}
+							${styles.FORM_COMBO_INPUT_CLASSNAME}
 						`}
 						{..._input}
 					/>;
@@ -665,7 +660,7 @@ export function ComboComponent(props) {
 							m-0
 							p-1
 							${_.isEmpty(displayValue) ? "text-grey-400" : "text-black"}
-							${styles.FORM_COMBO_INPUT_FONTSIZE}
+							${styles.FORM_COMBO_INPUT_CLASSNAME}
 						`}
 					>{_.isEmpty(displayValue) ? placeholder : displayValue}</TextNative>
 				</Pressable>;
@@ -854,9 +849,7 @@ export function ComboComponent(props) {
 										m-0
 										rounded-tr-none
 										rounded-br-none
-										${styles.FORM_COMBO_INPUT_FONTSIZE}
-										${styles.FORM_COMBO_INPUT_BG}
-										${styles.FORM_COMBO_INPUT_BG_FOCUS}
+										${styles.FORM_COMBO_INPUT_CLASSNAME}
 									`}
 									{..._input}
 								/>
@@ -915,8 +908,7 @@ export function ComboComponent(props) {
 									border
 									border-grey-400
 									rounded-md
-									${styles.FORM_COMBO_TRIGGER_BG}
-									${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+									${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 								`}
 							/>;
 			}
@@ -937,9 +929,7 @@ export function ComboComponent(props) {
 								border
 								border-grey-400
 								rounded-r-none
-								${styles.FORM_COMBO_INPUT_BG}
-								${styles.FORM_COMBO_INPUT_BG_FOCUS}
-								${styles.FORM_COMBO_INPUT_FONTSIZE}
+								${styles.FORM_COMBO_INPUT_CLASSNAME}
 							`}
 						>{textInputValue}</TextNative> :
 						<Input
@@ -961,9 +951,7 @@ export function ComboComponent(props) {
 								flex-1
 								m-0
 								rounded-r-none
-								${styles.FORM_COMBO_INPUT_FONTSIZE}
-								${styles.FORM_COMBO_INPUT_BG}
-								${styles.FORM_COMBO_INPUT_BG_FOCUS}
+								${styles.FORM_COMBO_INPUT_CLASSNAME}
 							`}
 							{..._input}
 						/>}
@@ -982,8 +970,7 @@ export function ComboComponent(props) {
 							border-grey-400
 							rounded-l-none
 							rounded-r-md
-							${styles.FORM_COMBO_TRIGGER_BG}
-							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 						`}
 					/>
 					{checkButton}

package/src/Components/Form/Field/Date.js

@@ -292,9 +292,9 @@ export const DateElement = forwardRef((props, ref) => {
 						isDisabled={isDisabled}
 						onPress={onClearBtn}
 						className={`
+							Date-xBtn
 							h-full
-							${styles.FORM_COMBO_TRIGGER_BG}
-							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 						`}
 					/>;
 	}
@@ -304,20 +304,20 @@ export const DateElement = forwardRef((props, ref) => {
 				icon={Calendar}
 				_icon={{
 					size: 'sm',
-					className: styles.FORM_DATE_ICON_COLOR,
+					className: styles.FORM_DATE_TRIGGER_ICON_CLASSNAME,
 				}}
 				onPress={onTriggerPress}
 				onBlur={onTriggerBlur}
 				isDisabled={isDisabled}
 				className={`
+					Date-trigger
 					h-10
 					w-10
 					border
 					border-grey-400
 					rounded-l-md
 					rounded-r-none
-					${styles.FORM_DATE_ICON_BG}
-					${styles.FORM_DATE_ICON_BG_HOVER}
+					${styles.FORM_DATE_TRIGGER_CLASSNAME}
 				`}
 			/>;
 
@@ -326,13 +326,14 @@ export const DateElement = forwardRef((props, ref) => {
 			<Pressable
 				{...testProps('togglePickerBtn')}
 				onPress={togglePicker}
-				className="flex-1 h-full"
+				className="Date-togglePickerBtn flex-1 h-full"
 			>
 				<TextNative
 					ref={inputRef}
 					numberOfLines={1}
 					ellipsizeMode="head"
 					className={`
+						Date-TextNative
 						flex-1
 						h-full
 						m-0
@@ -343,9 +344,7 @@ export const DateElement = forwardRef((props, ref) => {
 						rounded-l-none
 						rounded-r-md
 						${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-						${styles.FORM_DATE_INPUT_BG}
-						${styles.FORM_DATE_INPUT_BG_FOCUS}
-						${styles.FORM_DATE_READOUT_FONTSIZE}
+						${styles.FORM_DATE_INPUT_CLASSNAME}
 					`}
 				>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 			</Pressable> :
@@ -369,13 +368,12 @@ export const DateElement = forwardRef((props, ref) => {
 				// 	setTop(Math.round(height));
 				// }}
 				className={`
+					Date-Input
 					flex-1
 					h-full
 					m-0
 					rounded-r-lg
-					${styles.FORM_DATE_INPUT_BG}
-					${styles.FORM_DATE_INPUT_BG_FOCUS}
-					${styles.FORM_DATE_READOUT_FONTSIZE}
+					${styles.FORM_DATE_INPUT_CLASSNAME}
 					${_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black'}
 				`}
 				autoSubmitDelay={1000}
@@ -407,8 +405,8 @@ export const DateElement = forwardRef((props, ref) => {
 							rounded-r-md
 							${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"} 
 							${styles.FORM_DATE_READOUT_FONTSIZE} 
-							${styles.FORM_DATE_INPUT_BG}
-							${styles.FORM_DATE_INPUT_BG_FOCUS}
+							${styles.FORM_DATE_INPUT_CLASSNAME}
+							${styles.FORM_DATE_INPUT_CLASSNAME_FOCUS}
 						`}
 					>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 				</Pressable>;
@@ -422,13 +420,13 @@ export const DateElement = forwardRef((props, ref) => {
 									hidePicker();
 								}}
 								trigger={emptyFn}
-								className="block"
+								className="Date-Popover block"
 							>
 								<PopoverBackdrop className="PopoverBackdrop bg-[#000]" />
 								<PopoverContent
 									ref={pickerRef}
 									className={`
-										PopoverContent
+										Date-PopoverContent
 									`}
 									style={{
 										top,
@@ -440,7 +438,7 @@ export const DateElement = forwardRef((props, ref) => {
 								>
 									<PopoverBody
 										className={`
-											PopoverBody
+											Date-PopoverBody
 											overflow-hidden
 										`}
 									>
@@ -463,10 +461,10 @@ export const DateElement = forwardRef((props, ref) => {
 				<HStack className="h-[10px]">
 					<IconButton
 						{...testProps('hidePickerBtn')}
+						icon={Calendar}
 						_icon={{
-							as: Calendar,
-							color: styles.FORM_DATE_ICON_COLOR,
 							size: 'sm',
+							className: styles.FORM_DATE_TRIGGER_ICON_CLASSNAME,
 						}}
 						isDisabled={isDisabled}
 						onPress={() => hidePicker()}
@@ -477,8 +475,7 @@ export const DateElement = forwardRef((props, ref) => {
 							border-grey-400
 							rounded-l-md
 							rounded-r-none
-							${styles.FORM_DATE_ICON_BG}
-							${styles.FORM_DATE_ICON_BG_HOVER}
+							${styles.FORM_DATE_TRIGGER_CLASSNAME}
 						`}
 					/>
 					{disableDirectEntry ?
@@ -497,9 +494,7 @@ export const DateElement = forwardRef((props, ref) => {
 								rounded-l-none
 								rounded-r-md
 								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-								${styles.FORM_DATE_INPUT_BG}
-								${styles.FORM_DATE_INPUT_BG_FOCUS}
-								${styles.FORM_DATE_READOUT_FONTSIZE}
+								${styles.FORM_DATE_INPUT_CLASSNAME}
 							`}
 						>{textInputValue}</TextNative> :
 						<Input
@@ -521,9 +516,7 @@ export const DateElement = forwardRef((props, ref) => {
 								rounded-tr-none
 								rounded-br-none
 								${_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black'}
-								${styles.FORM_DATE_READOUT_FONTSIZE}
-								${styles.FORM_DATE_INPUT_BG}
-								${styles.FORM_DATE_INPUT_BG_FOCUS}
+								${styles.FORM_DATE_INPUT_CLASSNAME}
 							`}
 							{..._input}
 						/>}
@@ -532,7 +525,13 @@ export const DateElement = forwardRef((props, ref) => {
 								isOpen={true}
 								safeAreaTop={true}
 								onClose={() => setIsPickerShown(false)}
-								className="mt-auto mb-auto w-full h-[400px] p-[5px]"
+								className={`
+									Date-Modal
+									my-auto
+									w-full
+									h-[400px]
+									p-3
+								`}
 							>
 								<ModalBackdrop />
 								<ModalContent>
@@ -548,7 +547,7 @@ export const DateElement = forwardRef((props, ref) => {
 											timeFormat={mode === TIME || mode === DATETIME ? 'HH:mm:ss' : false}
 											onChange={onPickerChange}
 										/> */}
-										<Box className="bg-white">
+										<Box className="Date-Box bg-white">
 											<Datetime
 												{...testProps('picker')}
 												initialDate={moment(value).toDate()}
@@ -570,7 +569,7 @@ export const DateElement = forwardRef((props, ref) => {
 		flex-1
 		justify-center
 		items-center
-		${styles.FORM_COMBO_HEIGHT}
+		${styles.FORM_DATE_CLASSNAME}
 	`;
 	if (props.className) {
 		className += props.className;

package/src/Components/Form/Field/FormikForm.js

@@ -642,12 +642,12 @@ function FormikForm(props) {
 							title += ' for ' + record.displayValue;
 						}
 						title = <Text
-									className={` ${styles.FORM_ANCILLARY_TITLE_FONTSIZE} font-bold `}
+									className={` ${styles.FORM_ANCILLARY_TITLE_CLASSNAME} font-bold `}
 								>{title}</Text>;
 					}
 					if (description) {
 						description = <Text
-											className={` ${styles.FORM_ANCILLARY_DESCRIPTION_FONTSIZE} italic-italic `}
+											className={` ${styles.FORM_ANCILLARY_DESCRIPTION_CLASSNAME} italic-italic `}
 										>{description}</Text>;
 					}
 					components.push(<VStack key={'ancillary-' + ix} className="mx-1 my-3">{title}{description}{element}</VStack>);

package/src/Components/Form/Field/Input.js

@@ -113,9 +113,7 @@ const InputElement = forwardRef((props, ref) => {
 	}
 	let inputClassName = `
 			Input
-			${styles.FORM_INPUT_BG}
-			${styles.FORM_INPUT_BG_FOCUS}
-			${styles.FORM_INPUT_BG_HOVER}
+			${styles.FORM_INPUT_CLASSNAME}
 		`,
 		inputFieldClassName = `
 			InputField
@@ -124,10 +122,8 @@ const InputElement = forwardRef((props, ref) => {
 			w-full
 			p-2
 			${textAlignIsCenter ? 'text-center' : 'text-left'}
-			${styles.FORM_INPUT_FONTSIZE}
-			${styles.FORM_INPUT_BG}
-			${styles.FORM_INPUT_BG_FOCUS}
-			${styles.FORM_INPUT_BG_HOVER}
+			${styles.FORM_INPUT_CLASSNAME}
+			${styles.FORM_INPUT_FIELD_CLASSNAME}
 		`;
 	if (className) {
 		inputClassName += className;

package/src/Components/Form/Field/Number.js

@@ -170,10 +170,6 @@ function NumberElement(props) {
 						h-full
 						text-center
 						rounded-none
-						${styles.FORM_INPUT_FONTSIZE}
-						${styles.FORM_INPUT_BG}
-						${styles.FORM_INPUT_BG_HOVER}
-						${styles.FORM_INPUT_BG_FOCUS}
 					`}
 					style={{
 						flex: 3

package/src/Components/Form/Field/Select/Select.js

@@ -72,10 +72,7 @@ const SelectElement = forwardRef((props, ref) => {
 		w-full
 		text-left
 		rounded-lg
-		${styles.FORM_SELECT_FONTSIZE}
-		${styles.FORM_SELECT_BG}
-		${styles.FORM_SELECT_BG_FOCUS}
-		${styles.FORM_SELECT_BG_HOVER}
+		${styles.FORM_SELECT_CLASSNAME}
 	`;
 	if (props.className) {
 		className += props.className;

package/src/Components/Form/Field/Tag/Tag.js

@@ -274,15 +274,15 @@ function TagComponent(props) {
 		w-full
 		min-h-[40px]
 		max-h-[200px]
+		mb-1
+		p-1
 		flex-wrap
 		overflow-auto
 		border
 		border-grey-300
 		rounded-md
 		bg-grey-100
-		${styles.FORM_TAG_MIN_HEIGHT}
-		${styles.FORM_TAG_MB}
-		${styles.FORM_TAG_PADDING}
+		${styles.FORM_TAG_CLASSNAME}
 	`,
 	comboClassName = '';
 	if (_combo.className) {

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -19,6 +19,7 @@ export default function ValueBox(props) {
 	return <HStackNative
 				{...testProps('valueBox-' + text)}
 				className={`
+					ValueBox-HStackNative
 					max-w-full
 					items-center
 					mr-1
@@ -37,12 +38,13 @@ export default function ValueBox(props) {
 						className: 'text-grey-600',
 					}}
 					onPress={onView}
-					className="h-full"
+					className="ValueBox-eyeBtn h-full"
 				/>
 				<Text
 					className={`
+						ValueBox-Text
 						text-grey-600
-						${styles.FORM_TAG_VALUEBOX_FONTSIZE}
+						${styles.FORM_TAG_VALUEBOX_CLASSNAME}
 						${onDelete ? 'mr-0' : 'mr-1'}
 					`}
 				>{text}</Text>
@@ -55,7 +57,7 @@ export default function ValueBox(props) {
 							className: 'text-grey-600',
 						}}
 						onPress={onDelete}
-						className="h-full"
+						className="ValueBox-xBtn h-full"
 					/>}
 			</HStackNative>;
 }

package/src/Components/Form/Field/Text.js

@@ -16,7 +16,7 @@ const
 			min-h-[40px]
 			px-3
 			py-2
-			${styles.FORM_TEXT_FONTSIZE}
+			${styles.FORM_TEXT_CLASSNAME}
 		`;
 		if (props.className) {
 			className += ' ' + props.className;

package/src/Components/Form/Field/TextArea.js

@@ -83,9 +83,7 @@ const
 			inputClassName = `
 				TextAreaInput
 				flex-1
-				${styles.FORM_TEXTAREA_BG}
-				${styles.FORM_TEXTAREA_FONTSIZE}
-				${styles.FORM_TEXTAREA_HEIGHT}
+				${styles.FORM_TEXTAREA_CLASSNAME}
 			`;
 		if (props.className) {
 			inputClassName += ' ' + props.className;
@@ -99,9 +97,6 @@ const
 					<TextareaInput
 						ref={props.outerRef}
 						onChangeText={onChangeTextLocal}
-						_focus={{
-							bg: styles.FORM_TEXTAREA_BG,
-						}}
 						value={localValue}
 						className={inputClassName}
 						placeholder={placeholder}

package/src/Components/Form/Field/Toggle.js

@@ -101,7 +101,7 @@ const
 							className={`
 								ml-1
 								mr-2
-								${styles.FORM_TOGGLE_FONTSIZE}
+								${styles.FORM_TOGGLE_READOUT_CLASSNAME}
 							`}
 						>{_.isNil(value) ? 'N/A' : (!!value ? onText : offText)}</Text>
 					</Pressable>

package/src/Components/Form/FieldSet.js

@@ -109,7 +109,7 @@ export default function FieldSet(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 							className={`
-								FieldSet-title-Text
+								FieldSet-title-TextNative
 								flex-1
 								py-1
 								px-3
@@ -119,25 +119,15 @@ export default function FieldSet(props) {
 						>{title}</TextNative>
 
 						{showToggleAllCheckbox && 
-							<HStack className="self-right">
-								<TextNative
-									numberOfLines={1}
-									className={`
-										flex-1
-										py-1
-										px-3
-										${styles.FORM_FIELDSET_FONTSIZE}
-									`}
-								>Toggle All?</TextNative>
-								<CheckboxButton
-									{...testProps('toggleAllBtn')}
-									isChecked={getIsAllChecked()}
-									onPress={onToggleAllChecked}
-									_icon={{
-										size: 'lg',
-									}}
-								/>
-							</HStack>}
+							<CheckboxButton
+								{...testProps('toggleAllBtn')}
+								isChecked={getIsAllChecked()}
+								onPress={onToggleAllChecked}
+								className="FieldSet-title-showToggleAllCheckbox self-right"
+								_icon={{
+									size: 'lg',
+								}}
+							/>}
 						
 						{isCollapsible && 
 							<IconButton

package/src/Components/Form/Form.js

@@ -646,7 +646,7 @@ function Form(props) {
 					}
 					if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
 						if (!style.width) {
-							style.width = '100px';
+							style.width = '120px';
 						}
 						element = <HStack className="Form-HStack1 w-full py-1">
 										<Label style={style}>{label}</Label>
@@ -812,7 +812,15 @@ function Form(props) {
 									isRequired = true;
 								}
 								if (isRequired) {
-									requiredIndicator = <Text className="text-[#f00] text-[30px] pr-1">*</Text>;
+									requiredIndicator = <Text
+															className={`
+																Form-requiredIndicator
+																self-center
+																text-[#f00]
+																text-[30px]
+																pr-1
+															`}
+														>*</Text>;
 								}
 							}
 							if (!disableLabels && label && editorType !== EDITOR_TYPE__INLINE) {
@@ -822,15 +830,21 @@ function Form(props) {
 								}
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
 									if (!style.width) {
-										style.width = '100px';
+										style.width = '120px';
 									}
 									element = <HStack className="Form-HStack8 w-full">
-								 					<Label style={style}>{requiredIndicator}{label}</Label>
+								 					<Label style={style}>
+														{requiredIndicator}
+														{label}
+													</Label>
 													{element}
 								 				</HStack>;
 								} else {
 									element = <VStack className="Form-VStack9 w-full mt-3">
-													<Label style={style}>{requiredIndicator}{label}</Label>
+													<Label style={style}>
+														{requiredIndicator}
+														{label}
+													</Label>
 													{element}
 												</VStack>;
 								}
@@ -907,7 +921,7 @@ function Form(props) {
 									className={`
 										Form-Ancillary-Title
 										font-bold
-										${styles.FORM_ANCILLARY_TITLE_FONTSIZE}
+										${styles.FORM_ANCILLARY_TITLE_CLASSNAME}
 									`}
 								>{title}</Text>;
 					}
@@ -916,7 +930,7 @@ function Form(props) {
 										className={`
 											Form-Ancillary-Description
 											italic
-											${styles.FORM_ANCILLARY_DESCRIPTION_FONTSIZE}
+											${styles.FORM_ANCILLARY_DESCRIPTION_CLASSNAME}
 										`}
 									>{description}</Text>;
 					}
@@ -1280,8 +1294,7 @@ function Form(props) {
 							justify-center
 							items-center
 							rounded-b-lg
-							bg-red-500
-							${styles.GRID_INLINE_EDITOR_BG}
+							bg-primary-700
 						`}
 					>{footerButtons}</HStack>
 				</Box>;

package/src/Components/Form/Label.js

@@ -16,8 +16,9 @@ export default function Label(props) {
 	}
 	let textClassName = `
 		Label-TextNative
+		flex
 		text-ellipsis
-		${styles.FORM_LABEL_FONTSIZE}
+		${styles.FORM_LABEL_CLASSNAME}
 	`;
 	if (props._text?.className) {
 		textClassName += ' ' + props._text.className;

package/src/Components/Grid/GridHeaderRow.js

@@ -363,8 +363,7 @@ export default function GridHeaderRow(props) {
 									items-center
 									justify-center
 									${rowClassName}
-									${styles.GRID_HEADER_BG}
-									${styles.GRID_HEADER_BG_HOVER}
+									${styles.GRID_HEADER_PRESSABLE_CLASSNAME}
 								`}
 								style={rowStyle}
 							>
@@ -404,9 +403,9 @@ export default function GridHeaderRow(props) {
 										text-center
 										overflow-hidden
 										text-ellipsis
-										${styles.GRID_HEADER_FONTSIZE}
-										${styles.GRID_HEADER_CELL_PX}
-										${styles.GRID_HEADER_CELL_PY}
+										px-2
+										py-3
+										${styles.GRID_HEADER_CLASSNAME}
 									`}
 								>{header}</TextNative>
 								
@@ -419,8 +418,7 @@ export default function GridHeaderRow(props) {
 											GridHeaderRow-Icon
 											text-center
 											text-grey-500
-											${styles.GRID_HEADER_ICON_MT}
-											${styles.GRID_HEADER_ICON_MR}
+											${styles.GRID_HEADER_ICON_CLASSNAME}
 										`} />}
 								
 								{isOver && UiGlobals.mode === UI_MODE_WEB && // only works for web for now 

package/src/Components/Grid/GridRow.js

@@ -180,10 +180,10 @@ function GridRow(props) {
 													GridRow-Element
 													self-center
 													text-ellipsis
+													px-2
+													py-3
 													${colClassName}
-													${styles.GRID_CELL_FONTSIZE}
-													${styles.GRID_CELL_PX}
-													${styles.GRID_CELL_PY}
+													${styles.GRID_CELL_CLASSNAME}
 												`}
 												numberOfLines={1}
 												ellipsizeMode="head"
@@ -228,8 +228,11 @@ function GridRow(props) {
 									self-center
 									overflow-hidden
 									text-ellipsis
+									truncate
+									whitespace-nowrap
+									overflow-hidden
 									${colClassName}
-									${styles.GRID_CELL_FONTSIZE} 
+									${styles.GRID_CELL_CLASSNAME} 
 									${styles.GRID_CELL_PX} 
 									${styles.GRID_CELL_PY} 
 								`}
@@ -278,7 +281,7 @@ function GridRow(props) {
 			rowContents = <HStack
 								ref={dragSourceRef}
 								className={`
-									dragSourceRef
+									GridRow-dragSourceRef
 									w-full
 									flex-1
 									grow-1
@@ -292,7 +295,7 @@ function GridRow(props) {
 			rowContents = <HStack
 								ref={dropTargetRef}
 								className={`
-									dropTargetRef
+									GridRow-dropTargetRef
 									w-full
 									flex-1
 									grow-1

package/src/Components/Hoc/withFilters.js

@@ -313,7 +313,7 @@ export default function withFilters(WrappedComponent) {
 											<Label
 												className="min-w-0 mr-1"
 												_text={{
-													className: UiGlobals.styles.FILTER_LABEL_FONTSIZE,
+													className: UiGlobals.styles.FILTER_LABEL_CLASSNAME,
 												}}
 											>{title}</Label>
 											{filterElement}

package/src/Components/Hoc/withModal.js

@@ -184,9 +184,9 @@ export default function withModal(WrappedComponent) {
 						<Modal
 							isOpen={true}
 							onClose={onCancel}
-							className="Modal"
+							className="withModal-Modal"
 						>
-							<ModalBackdrop />
+							<ModalBackdrop className="withModal-ModalBackdrop" />
 							{modalBody}
 						</Modal>}
 					

package/src/Components/Hoc/withWindowedEditor.js

@@ -74,8 +74,9 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 						<Modal
 							isOpen={true}
 							onClose={onEditorCancel}
+							className="withEditor-Modal"
 						>
-							<ModalBackdrop />
+							<ModalBackdrop className="withEditor-ModalBackdrop" />
 							<Editor
 								editorType={EDITOR_TYPE__WINDOWED}
 								{...propsToPass}

package/src/Components/Layout/Footer.js

@@ -13,7 +13,7 @@ export default function Footer(props) {
 		self-end
 		p-2
 		border-t-2
-		${styles.PANEL_FOOTER_BORDER_TOP_COLOR}
+		${styles.PANEL_FOOTER_CLASSNAME}
 	`;
 	if (props.className) {
 		className += ' ' + props.className

package/src/Components/Panel/Header.js

@@ -55,7 +55,7 @@ export default function Header(props) {
 						icon={Xmark}
 						_icon={{
 							// size: styles.PANEL_HEADER_ICON_SIZE,
-							className: styles.PANEL_HEADER_ICON_COLOR,
+							className: styles.PANEL_HEADER_ICON_CLASSNAME,
 						}}
 						className={closeClassName}
 					/>;
@@ -76,7 +76,7 @@ export default function Header(props) {
 						icon={isCollapsed ? Plus : Minus}
 						_icon={{
 							size: styles.PANEL_HEADER_ICON_SIZE,
-							className: styles.PANEL_HEADER_ICON_COLOR,
+							className: styles.PANEL_HEADER_ICON_CLASSNAME,
 						}}
 						className={collapseClassName}
 					/>;
@@ -131,8 +131,7 @@ export default function Header(props) {
 											Header-TextNative1
 											flex-1
 											font-bold
-											${styles.PANEL_HEADER_TEXT_COLOR}
-											${styles.PANEL_HEADER_TEXT_FONTSIZE}
+											${styles.PANEL_HEADER_TEXT_CLASSNAME}
 										`}>{title}</TextNative>
 								</div>
 							</VStack>
@@ -169,8 +168,7 @@ export default function Header(props) {
 								Header-TextNative2
 								flex-1
 								font-bold
-								${styles.PANEL_HEADER_TEXT_COLOR}
-								${styles.PANEL_HEADER_TEXT_FONTSIZE}
+								${styles.PANEL_HEADER_TEXT_CLASSNAME}
 							`}
 						>{title}</TextNative>
 						{collapseBtn}
@@ -211,8 +209,7 @@ export default function Header(props) {
 											font-bold
 											w-[200px]
 											text-right
-											${styles.PANEL_HEADER_TEXT_COLOR}
-											${styles.PANEL_HEADER_TEXT_FONTSIZE}
+											${styles.PANEL_HEADER_TEXT_CLASSNAME}
 										`}
 									>{title}</TextNative>
 								</VStack>
@@ -246,8 +243,7 @@ export default function Header(props) {
 								Header-TextNative4
 								font-bold
 								flex-1
-								${styles.PANEL_HEADER_TEXT_COLOR}
-								${styles.PANEL_HEADER_TEXT_FONTSIZE}
+								${styles.PANEL_HEADER_TEXT_CLASSNAME}
 							`}>{title}</TextNative>
 						{collapseBtn}
 					</HStack>

package/src/Components/Tab/TabBar.js

@@ -155,10 +155,10 @@ function TabBar(props) {
 				buttonProps = {
 					className: `
 						${styles.TAB_BG}
+						${isCollapsed ? 'justify-center' : 'justify-start'}
 						${styles.TAB_BG_HOVER}
 						${styles.TAB_BG_ACTIVE}
 						${styles.TAB_BG_DISABLED}
-						${isCollapsed ? 'justify-center' : 'justify-start'}
 					`,
 				},
 				textProps = {
@@ -496,10 +496,10 @@ function TabBar(props) {
 					className={`
 						${isCollapsed ? 'w-[50px]' : 'w-[' + tabWidth + 'px]'}
 						${isCollapsed ? 'pl-1' : 'pl-4'}
-						${styles.TAB_BAR_BG}
 						items-center
 						justify-start
 						py-2
+						${styles.TAB_BAR_CLASSNAME}
 					`}
 				>
 					{renderedTabs}
@@ -521,11 +521,11 @@ function TabBar(props) {
 					{...testProps('TabBar')}
 					className={`
 						${isCollapsed ? 'h-[38px]' : 'h-[' + tabHeight + 'px]'}
-						${styles.TAB_BAR_BG}
 						items-center
 						justify-start
 						p-1
 						pb-0
+						${styles.TAB_BAR_CLASSNAME}
 					`}
 				>
 					<ScrollView

package/src/Components/Toolbar/Toolbar.js

@@ -20,7 +20,7 @@ export default function Toolbar(props) {
 		border-b
 		border-solid
 		border-b-grey-400
-		${styles.TOOLBAR_BG}
+		${styles.TOOLBAR_CLASSNAME}
 	`;
 	if (props.className) {
 		className += ' ' + props.className

package/src/Components/Tree/Tree.js

@@ -1380,7 +1380,7 @@ function TreeComponent(props) {
 					<ScrollView {...testProps('ScrollView')} className="ScrollView flex-1 w-full">
 						{!treeNodes?.length ? 
 						<CenterBox>
-							<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} />
+							{Repository.isLoading ? <Loading /> : <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} />}
 						</CenterBox> :
 						treeNodes}
 					</ScrollView>

package/src/Components/Tree/TreeNode.js

@@ -65,7 +65,7 @@ export default function TreeNode(props) {
 		}
 
 		let className = `
-			treenode
+			TreeNode
 			items-center
 			flex
 			flex-1
@@ -101,15 +101,13 @@ export default function TreeNode(props) {
 						ellipsizeMode="head"
 						// {...propsToPass}
 						className={`
-							treenode-text
+							TreeNode-TextNative
 							self-center
 							overflow-hidden
 							flex
 							flex-1
 							text-ellipsis
-							${styles.TREE_NODE_PY}
-							${styles.TREE_NODE_PX}
-							${styles.TREE_NODE_FONTSIZE}
+							${styles.TREE_NODE_CLASSNAME}
 						`}
 						style={{ userSelect: 'none', }}
 					>{text}</TextNative>

package/src/Constants/Styles.js

@@ -11,77 +11,63 @@ const defaults = {
 	ATTACHMENTS_MAX_FILESIZE: 1024 * 1024 * 5, // 5MB
 	DEFAULT_WINDOW_WIDTH: 900,
 	DEFAULT_WINDOW_HEIGHT: 800,
-	FILTER_LABEL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_ANCILLARY_TITLE_FONTSIZE: 'text-[22px]',
-	FORM_ANCILLARY_DESCRIPTION_FONTSIZE: 'text-[16px]',
-	FORM_COLOR_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_COLOR_INPUT_BG: 'bg-' + WHITE,
-	FORM_COLOR_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
-	FORM_COMBO_HEIGHT: 'h-[40px]',
-	FORM_COMBO_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_COMBO_INPUT_BG: 'bg-' + WHITE,
-	FORM_COMBO_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
+	FILTER_LABEL_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
+	FORM_ANCILLARY_TITLE_CLASSNAME: 'text-[22px]',
+	FORM_ANCILLARY_DESCRIPTION_CLASSNAME: 'text-[16px]',
+	FORM_COLOR_INPUT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE + ' ' +
+								'bg-' + WHITE + ' ' + 
+								'focus:bg-' + FOCUS,
+	FORM_COMBO_INPUT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE + ' ' + 
+								'bg-' + WHITE + ' ' +
+								'focus:bg-' + FOCUS,
 	FORM_COMBO_MENU_HEIGHT: 250,
 	FORM_COMBO_MENU_MIN_WIDTH: 250,
-	FORM_COMBO_TRIGGER_BG: 'bg-' + WHITE,
-	FORM_COMBO_TRIGGER_BG_HOVER: 'hover:bg-grey-300',
-	FORM_DATE_ICON_BG: 'bg-primary-200',
-	FORM_DATE_ICON_BG_HOVER: 'hover:bg-primary-400',
-	FORM_DATE_ICON_COLOR: 'text-' + WHITE,
-	FORM_DATE_INPUT_BG: 'bg-' + WHITE,
-	FORM_DATE_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
-	FORM_DATE_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_COMBO_TRIGGER_CLASSNAME: 'bg-' + WHITE + ' ' +
+									'hover:bg-grey-300',
+	FORM_DATE_CLASSNAME: 'h-[40px]',
+	FORM_DATE_TRIGGER_CLASSNAME: 'bg-primary-200 ' +
+								'hover:bg-primary-400',
+	FORM_DATE_TRIGGER_ICON_CLASSNAME: 'text-' + WHITE,
+	FORM_DATE_INPUT_CLASSNAME: 'bg-' + WHITE + ' ' +
+								'focus:bg-' + FOCUS + ' ' +
+								'text-' + DEFAULT_FONTSIZE,
 	FORM_FIELDSET_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
 	FORM_FIELDSET_BG: 'bg-[#f6f6f6]',
-	FORM_FILE_ICON_BG: 'bg-primary-200',
-	FORM_FILE_ICON_BG_HOVER: 'hover:bg-primary-400',
-	FORM_FILE_ICON_COLOR: 'text-' + WHITE,
-	FORM_FILE_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_FILE_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_FILE_READOUT_BG: 'bg-' + WHITE,
-	FORM_INPUT_BG: 'bg-' + WHITE,
-	FORM_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
-	FORM_INPUT_BG_HOVER: 'hover:bg-' + HOVER,
-	FORM_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_LABEL_WIDTH: '30%',
-	FORM_LABEL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_NUMBER_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_SELECT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_SELECT_BG: 'bg-grey-100',
-	FORM_SELECT_BG_FOCUS: 'focus:bg-' + FOCUS,
-	FORM_SELECT_BG_HOVER: 'hover:bg-' + HOVER,
-	FORM_TAG_MB: 'mb-1',
-	FORM_TAG_MIN_HEIGHT: 'min-h-10',
-	FORM_TAG_PADDING: 'p-1',
-	FORM_TAG_VALUEBOX_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	// FORM_FILE_ICON_BG: 'bg-primary-200',
+	// FORM_FILE_ICON_BG_HOVER: 'hover:bg-primary-400',
+	// FORM_FILE_ICON_COLOR: 'text-' + WHITE,
+	// FORM_FILE_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	// FORM_FILE_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	// FORM_FILE_READOUT_BG: 'bg-' + WHITE,
+	FORM_INPUT_CLASSNAME: 'bg-' + WHITE + ' ' +
+						'focus:bg-' + FOCUS + ' ' +
+						'hover:bg-' + HOVER,
+	FORM_INPUT_FIELD_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
+	FORM_LABEL_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
+	FORM_SELECT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE + ' ' + 
+							'bg-grey-100 ' +
+							'focus:bg-' + FOCUS + ' ' +
+							'hover:bg-' + HOVER,
+	FORM_TAG_CLASSNAME: '',
+	FORM_TAG_VALUEBOX_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
 	FORM_TAG_VALUEBOX_ICON_SIZE: 'sm',
-	FORM_TEXT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_TEXTAREA_BG: 'bg-' + WHITE,
-	FORM_TEXTAREA_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	FORM_TEXTAREA_HEIGHT: 'h-[130px]',
+	FORM_TEXT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
+	FORM_TEXTAREA_CLASSNAME: 'bg-' + WHITE + ' ' +
+							'text-' + DEFAULT_FONTSIZE + ' ' +
+							'h-[130px]',
 	FORM_TOGGLE_BG: null,
-	FORM_TOGGLE_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_TOGGLE_READOUT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
 	FORM_TOGGLE_SIZE: 'md',
 	FORM_TOGGLE_ON_COLOR: '#0b0',
-	FORM_TOGGLE_ON_HOVER_COLOR: '#090',
 	FORM_TOGGLE_OFF_COLOR: '#f00',
-	FORM_TOGGLE_OFF_HOVER_COLOR: '#c00',
 	FORM_ONE_COLUMN_THRESHOLD: 900, // only allow one column in form unless form is wider than this
 	FORM_STACK_ROW_THRESHOLD: 400, // stack labels & fields if row is less than this width
-	GRID_CELL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	GRID_CELL_PX: 'px-2',
-	GRID_CELL_PY: 'py-3',
-	GRID_HEADER_BG: 'bg-[#eee]',
-	GRID_HEADER_BG_HOVER: 'hover:bg-[#ddd]',
-	GRID_HEADER_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	GRID_HEADER_CELL_PX: 'px-2',
-	GRID_HEADER_CELL_PY: 'py-3',
-	GRID_HEADER_ICON_MT: 'mt-3',
-	GRID_HEADER_ICON_MR: 'mt-2',
+	GRID_CELL_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
+	GRID_HEADER_PRESSABLE_CLASSNAME: 'bg-[#eee] ' +
+									'hover:bg-[#ddd]',
+	GRID_HEADER_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
+	GRID_HEADER_ICON_CLASSNAME: 'mt-3 mr-2',
 	GRID_HEADER_ICON_SIZE: 'sm',
-	GRID_INLINE_EDITOR_BORDER_TOP_COLOR: 'border-t-primary-100',
-	GRID_INLINE_EDITOR_BORDER_BOTTOM_COLOR: 'border-b-primary-100',
-	GRID_INLINE_EDITOR_BG: 'bg-primary-700',
 	GRID_NAV_COLUMN_COLOR: 'text-grey-400',
 	GRID_ROW_BG: '#fff', // must be hex
 	GRID_ROW_ALTERNATE_BG: '#ddd', // must be hex
@@ -91,25 +77,22 @@ const defaults = {
 	GRID_REORDER_BORDER_COLOR: 'border-[#23d9ea]',
 	GRID_REORDER_BORDER_WIDTH: 'border-4',
 	GRID_REORDER_BORDER_STYLE: 'border-dashed',
-	ICON_BUTTON_BG: 'bg-grey-100',
-	ICON_BUTTON_BG_ACTIVE: 'active:bg-grey-900/50',
-	ICON_BUTTON_BG_DISABLED: 'disabled:bg-grey-200',
-	ICON_BUTTON_BG_HOVER: 'hover:bg-grey-900/20',
-	ICON_BUTTON_BG_ACTIVE_HOVER: 'hover:bg-grey-200',
-	ICON_BUTTON_PX: 'px-[10px]',
-	ICON_BUTTON_PY: 'py-[10px]',
+	ICON_BUTTON_CLASSNAME: 'bg-grey-100 ' + 
+							'active:bg-grey-900/50 ' +
+							'disabled:bg-grey-200 ' +
+							'hover:bg-grey-900/20',
 	INLINE_EDITOR_MIN_WIDTH: 'min-w-[150px]',
-	PANEL_FOOTER_BORDER_TOP_COLOR: 'border-t-primary-300', // :alpha.50
+	PANEL_FOOTER_CLASSNAME: 'border-t-primary-300', // :alpha.50
 	PANEL_HEADER_BG: 'bg-primary-500',
-	PANEL_HEADER_ICON_COLOR: 'text-' + WHITE,
+	PANEL_HEADER_ICON_CLASSNAME: 'text-' + WHITE,
 	PANEL_HEADER_ICON_SIZE: 'md',
-	PANEL_HEADER_TEXT_COLOR: 'text-' + WHITE,
-	PANEL_HEADER_TEXT_FONTSIZE: 'text-[18px]',
+	PANEL_HEADER_TEXT_CLASSNAME: 'text-' + WHITE + ' ' +
+								'text-[18px]',
 	SLIDER_MIN_TRACK_COLOR: '#000',
 	SLIDER_MAX_TRACK_COLOR: '#ccc',
 	SLIDER_THUMB_COLOR: '#000',
 	SLIDER_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	TAB_BAR_BG: 'bg-grey-300',
+	TAB_BAR_CLASSNAME: 'bg-grey-300',
 	TAB_BG: 'bg-grey-300',
 	TAB_BG_ACTIVE: 'active:bg-grey-900/50',
 	TAB_BG_CURRENT: 'bg-grey-0',
@@ -127,17 +110,16 @@ const defaults = {
 	TAB_ICON_COLOR_DISABLED: 'group-disabled/button:text-grey-400',
 	TAB_FONTSIZE: 'text-md',
 	TEXT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	TREE_NODE_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
-	TREE_NODE_PX: 'px-2',
-	TREE_NODE_PY: 'py-3',
+	TREE_NODE_CLASSNAME: 'text-' + DEFAULT_FONTSIZE + ' ' +
+						'px-2 ' + 
+						'py-3',
 	TREE_NODE_BG: '#fff', // must be hex
 	TREE_NODE_BG_HOVER: '#cce', // must be hex
 	TREE_NODE_SELECTED_BG: '#ff0', // must be hex
 	TREE_NODE_SELECTED_BG_HOVER: '#cc0', // must be hex
 	TREE_NODE_HIGHLIGHTED_BG: '#0f0', // must be hex
-	TOOLBAR_BG: 'bg-grey-200',
+	TOOLBAR_CLASSNAME: 'bg-grey-200',
 	TOOLBAR_ITEMS_COLOR: 'text-grey-800',
-	TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled:text-grey-400',
 	TOOLBAR_ITEMS_ICON_SIZE: 'sm',
 	VIEWER_ANCILLARY_FONTSIZE: 'text-[22px]',
 };

package/src/PlatformImports/Web/File.js

@@ -126,8 +126,7 @@ function FileComponent(props) {
 					className={`
 						h-full
 						mr-1
-						${styles.FORM_COMBO_TRIGGER_BG}
-						${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+						${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 					`}
 				/>
 				<Text>{plainFiles[0].name}</Text>