@heliosgraphics/ui 2.0.0-alpha.89 → 2.0.0-alpha.90

package/components/Textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { Text } from "../Text"
 import { useId, useRef, useEffect } from "react"
 import { InputLabel } from "../shared/InputLabel"
@@ -13,6 +13,7 @@ export const Textarea: FC<TextareaProps> = (props) => {
 	const { autoComplete: _autoComplete, helperText: _helperText, isDisabled, isLabelHidden, ...goodProps } = props
 
 	const htmlFor: string = useId()
+	const helperId: string = `${htmlFor}-helper`
 	const textareaClasses: string = getClasses(styles.textarea, "flex flex-column", {
 		[styles.textareaDisabled]: props.isDisabled,
 	})
@@ -24,17 +25,20 @@ export const Textarea: FC<TextareaProps> = (props) => {
 		}
 	}
 
-	// TODO no longer necessary <3
 	useEffect(() => {
 		if (textareaRef?.current) {
 			onInput()
 		}
 
-		setTimeout(() => onInput(), 100)
+		const timer: ReturnType<typeof setTimeout> = setTimeout(() => onInput(), 100)
+
+		return (): void => {
+			globalThis.clearTimeout(timer)
+		}
 	}, [props.value])
 
 	return (
-		<div className={textareaClasses}>
+		<div className={textareaClasses} data-ui-component="Textarea">
 			{!props.isLabelHidden && (
 				<InputLabel
 					id={htmlFor}
@@ -51,9 +55,10 @@ export const Textarea: FC<TextareaProps> = (props) => {
 				onInput={onInput}
 				onLoad={onInput}
 				disabled={isDisabled}
+				aria-describedby={props.helperText ? helperId : undefined}
 			/>
 			{!!props.helperText && (
-				<Text type="tiny" emphasis="tertiary" className={styles.input__helper}>
+				<Text type="tiny" emphasis="tertiary" className={styles.input__helper} id={helperId}>
 					{props.helperText}
 				</Text>
 			)}

package/components/Tile/Tile.tsx

@@ -1,5 +1,4 @@
-"use client"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { Icon } from "../Icon"
 import { Text } from "../Text"
@@ -35,6 +34,7 @@ export const Tile: FC<TileProps> = ({
 		<Flex
 			{...(onClick && { onClick })}
 			className={tileClasses}
+			data-ui-component="Tile"
 			isCentered={true}
 			isColumn={true}
 			style={{
@@ -44,13 +44,6 @@ export const Tile: FC<TileProps> = ({
 			}}
 		>
 			<Icon icon={icon} size={size * 0.5} emphasis="inherit" />
-			{/*<svg width="100%" height="100%" viewBox={`0 0 ${size} ${size}`} className={styles.tile__background}>
-				<linearGradient id={tileId}>
-					<stop stopColor={`var(--${resolvedColor})`} offset="0%" />
-					{colorAccent && <stop stopColor={`var(--${resolvedColorAccent})`} offset="100%" />}
-				</linearGradient>
-				<rect fill={`url(#${tileId})`} x={0} y={0} width={size} height={size} rx={isRound ? size : isRounded ? 8 : 0} />
-			</svg> */}
 			{iconAccent && (
 				<Flex isCentered={true}>
 					<Icon icon={iconAccent} size={size * 1} className={styles.tile__iconAccent} />

package/components/Tile/Tile.types.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from "react"
+import type { MouseEventHandler } from "react"
 import type { HeliosIconType } from "../../types/icons"
 import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
 

package/components/Timestamp/Timestamp.meta.ts

@@ -12,7 +12,11 @@ export const meta: HeliosAttributeMeta<TimestampProps> = {
 	_status: "nominal",
 	_category: "content",
 	date: { type: "string", isOptional: true },
-	format: { type: "string", isOptional: true, default: "MMMM D, YYYY" },
+	format: {
+		type: "Intl.DateTimeFormatOptions",
+		isOptional: true,
+		default: "{ year: numeric, month: long, day: numeric }",
+	},
 	fromNow: { type: "boolean", isOptional: true },
 	text: { type: "string", isOptional: true },
 }

package/components/Timestamp/Timestamp.tsx

@@ -1,8 +1,8 @@
-import { getIsValid, formatDate, getFromNow } from "../../utils/dayjs"
+import { getIsValid, formatDate, getFromNow } from "../../utils/date"
 import type { FC } from "react"
 import type { TimestampProps } from "./Timestamp.types"
 
-export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format = "MMMM D, YYYY" }) => {
+export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format }) => {
 	const fromNowDate = getFromNow(date)
 	const isValid: boolean = getIsValid(date)
 	const parsedIsoString: string = date && isValid ? new Date(Date.parse(date))?.toISOString() : ""
@@ -11,7 +11,7 @@ export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format = "M
 	const formattedDate: string = fromNow ? fromNowDate : formatDate(date, format)
 
 	return (
-		<time dateTime={timestampDate} suppressHydrationWarning={true}>
+		<time dateTime={timestampDate} suppressHydrationWarning={true} data-ui-component="Timestamp">
 			{!!text && text}
 			{formattedDate}
 		</time>

package/components/Timestamp/Timestamp.types.ts

@@ -1,6 +1,6 @@
 export interface TimestampProps {
 	date?: string
-	format?: string
+	format?: Intl.DateTimeFormatOptions
 	fromNow?: boolean
 	text?: string
 }

package/components/Toggle/Toggle.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useId } from "react"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { INTENTION_COLOR_MAP } from "../../constants/intentions"
 import { Text } from "../Text"
@@ -35,7 +35,7 @@ export const Toggle: FC<ToggleProps> = ({
 	const toggleLabelClasses = getClasses(styles.toggle__toggleLabel, "flex flex-y-center gap-4 flex-wrap")
 
 	return (
-		<div className={toggleClasses}>
+		<div className={toggleClasses} data-ui-component="Toggle">
 			<label className={toggleLabelClasses} htmlFor={toggleId}>
 				<input
 					type="checkbox"

package/components/Tooltip/Tooltip.module.css

@@ -2,6 +2,7 @@
 	position: relative;
 
 	display: inline-block;
+	anchor-scope: --tooltip;
 }
 
 .tooltip {
@@ -9,10 +10,41 @@
 	z-index: 10;
 
 	max-width: 320px;
+	margin: 8px;
 	padding: 8px;
 
 	background-color: var(--ui-bg-secondary);
 	border: 0;
 	color: var(--ui-text-primary);
 	border-radius: var(--radius-sm);
+
+	position-area: bottom center;
+}
+
+.tooltipBottomLeft {
+	position-area: bottom left;
+}
+
+.tooltipBottomRight {
+	position-area: bottom right;
+}
+
+.tooltipTopCenter {
+	position-area: top center;
+}
+
+.tooltipTopLeft {
+	position-area: top left;
+}
+
+.tooltipTopRight {
+	position-area: top right;
+}
+
+.tooltipLeftCenter {
+	position-area: left center;
+}
+
+.tooltipRightCenter {
+	position-area: right center;
 }

package/components/Tooltip/Tooltip.tsx

@@ -1,19 +1,37 @@
 "use client"
 
-import { useRef, useEffect, useMemo, useState, FC } from "react"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { useRef, useEffect, useMemo, useState, useId, type FC } from "react"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Tooltip.module.css"
 import type { TooltipProps, TooltipComposition, TooltipContextType } from "./Tooltip.types"
 import { TooltipTrigger } from "./components/TooltipTrigger"
 import { TooltipContent } from "./components/TooltipContent"
 import { TooltipContext } from "./Tooltip.utils"
 
+const POSITION_CLASS_MAP: Record<NonNullable<TooltipProps["position"]>, string | undefined> = {
+	"bottom-center": undefined,
+	"bottom-left": styles.tooltipBottomLeft,
+	"bottom-right": styles.tooltipBottomRight,
+	"top-center": styles.tooltipTopCenter,
+	"top-left": styles.tooltipTopLeft,
+	"top-right": styles.tooltipTopRight,
+	"left-center": styles.tooltipLeftCenter,
+	"right-center": styles.tooltipRightCenter,
+}
+
 const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "bottom-center", isVisible = false }) => {
 	const [isOpen, setIsOpen] = useState<boolean>(isVisible)
 	const triggerRef = useRef<HTMLDivElement | null>(null)
 	const popoverRef = useRef<HTMLDivElement | null>(null)
+	const id: string = useId()
+	const anchorName: string = `--tooltip-${id.replace(/:/g, "")}`
+
+	const positionClass: string | undefined = POSITION_CLASS_MAP[position]
 
-	const tooltipClasses: string = useMemo(() => getClasses(styles.tooltip, "elevation-medium"), [])
+	const tooltipClasses: string = useMemo(
+		() => getClasses(styles.tooltip, "elevation-md", positionClass),
+		[positionClass],
+	)
 
 	useEffect(() => {
 		const trigger = triggerRef.current
@@ -26,69 +44,14 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			return
 		}
 
-		const positionTooltip = (): void => {
-			if (!trigger || !popover) return
-
-			const triggerRect = trigger.getBoundingClientRect()
-			const popoverRect = popover.getBoundingClientRect()
-			const viewportWidth = globalThis.innerWidth
-			const viewportHeight = globalThis.innerHeight
-
-			let top = 0
-			let left = 0
-
-			switch (position) {
-				case "bottom-center":
-					top = triggerRect.bottom + 8
-					left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2
-					break
-				case "bottom-left":
-					top = triggerRect.bottom + 8
-					left = triggerRect.left
-					break
-				case "bottom-right":
-					top = triggerRect.bottom + 8
-					left = triggerRect.right - popoverRect.width
-					break
-				case "top-center":
-					top = triggerRect.top - popoverRect.height - 8
-					left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2
-					break
-				case "top-left":
-					top = triggerRect.top - popoverRect.height - 8
-					left = triggerRect.left
-					break
-				case "top-right":
-					top = triggerRect.top - popoverRect.height - 8
-					left = triggerRect.right - popoverRect.width
-					break
-				case "left-center":
-					top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2
-					left = triggerRect.left - popoverRect.width - 8
-					break
-				case "right-center":
-					top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2
-					left = triggerRect.right + 8
-					break
-			}
-
-			left = Math.max(10, Math.min(left, viewportWidth - popoverRect.width - 10))
-			top = Math.max(10, Math.min(top, viewportHeight - popoverRect.height - 10))
-
-			popover.style.top = `${top}px`
-			popover.style.left = `${left}px`
-		}
-
 		if (isVisible) {
 			popover.showPopover()
 			setIsOpen(true)
-			setTimeout(positionTooltip, 0)
 		}
 
 		const handleMouseEnter = (): void => {
 			popover.showPopover()
 			setIsOpen(true)
-			setTimeout(positionTooltip, 0)
 		}
 
 		const handleMouseLeave = (): void => {
@@ -109,28 +72,29 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 		trigger.addEventListener("mouseleave", handleMouseLeave)
 		trigger.addEventListener("keydown", handleKeyDown)
 
-		globalThis.addEventListener("resize", positionTooltip)
-		globalThis.addEventListener("scroll", positionTooltip, true)
-
 		return (): void => {
 			trigger.removeEventListener("mouseenter", handleMouseEnter)
 			trigger.removeEventListener("mouseleave", handleMouseLeave)
 			trigger.removeEventListener("keydown", handleKeyDown)
-			globalThis.removeEventListener("resize", positionTooltip)
-			globalThis.removeEventListener("scroll", positionTooltip, true)
 		}
-	}, [isVisible, position])
-
-	const contextValue: TooltipContextType = {
-		triggerRef,
-		popoverRef,
-		tooltipClasses,
-		isOpen,
-	}
+	}, [isVisible])
+
+	const contextValue: TooltipContextType = useMemo(
+		() => ({
+			triggerRef,
+			popoverRef,
+			tooltipClasses,
+			anchorName,
+			isOpen,
+		}),
+		[tooltipClasses, anchorName, isOpen],
+	)
 
 	return (
 		<TooltipContext.Provider value={contextValue}>
-			<div className={styles.tooltipContainer}>{children}</div>
+			<div className={styles.tooltipContainer} data-ui-component="Tooltip">
+				{children}
+			</div>
 		</TooltipContext.Provider>
 	)
 }

package/components/Tooltip/Tooltip.types.ts

@@ -21,6 +21,7 @@ export interface TooltipContextType {
 	triggerRef: RefObject<HTMLDivElement | null>
 	popoverRef: RefObject<HTMLDivElement | null>
 	tooltipClasses: string
+	anchorName: string
 	isOpen: boolean
 }
 

package/components/Tooltip/components/TooltipContent/TooltipContent.tsx

@@ -1,13 +1,15 @@
 import { Text } from "../../../Text"
 import { useTooltipContext } from "../../Tooltip.utils"
-import type { FC } from "react"
+import type { CSSProperties, FC } from "react"
 import type { TooltipContentProps } from "./TooltipContent.types"
 
 export const TooltipContent: FC<TooltipContentProps> = ({ children }) => {
-	const { popoverRef, tooltipClasses } = useTooltipContext()
+	const { popoverRef, tooltipClasses, anchorName } = useTooltipContext()
+
+	const contentStyle: CSSProperties = { positionAnchor: anchorName } as CSSProperties
 
 	return (
-		<div className={tooltipClasses} ref={popoverRef} popover="manual">
+		<div className={tooltipClasses} ref={popoverRef} popover="manual" style={contentStyle}>
 			<Text type="small">{children}</Text>
 		</div>
 	)

package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx

@@ -1,9 +1,15 @@
-import { TooltipTriggerProps } from "./TooltipTrigger.types"
+import type { TooltipTriggerProps } from "./TooltipTrigger.types"
 import { useTooltipContext } from "../../Tooltip.utils"
-import type { FC } from "react"
+import type { CSSProperties, FC } from "react"
 
 export const TooltipTrigger: FC<TooltipTriggerProps> = ({ children }) => {
-	const { triggerRef } = useTooltipContext()
+	const { triggerRef, anchorName } = useTooltipContext()
 
-	return <div ref={triggerRef}>{children}</div>
+	const triggerStyle: CSSProperties = { anchorName } as CSSProperties
+
+	return (
+		<div ref={triggerRef} style={triggerStyle}>
+			{children}
+		</div>
+	)
 }

package/components/shared/InputLabel/InputLabel.tsx

@@ -1,6 +1,6 @@
 import { type FC } from "react"
 import styles from "./InputLabel.module.css"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import type { InputLabelProps } from "./InputLabel.types"
 
 export const InputLabel: FC<InputLabelProps> = ({ id, label, isDisabled, isHidden }) => {

package/components/shared/ResultList/ResultList.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { Checkbox } from "../../Checkbox"
 import { Flex } from "../../Flex"
 import { Icon } from "../../Icon"
@@ -15,23 +15,22 @@ export const ResultList = forwardRef<HTMLOListElement, ResultListProps>(({ items
 
 	return (
 		<ol className={resultListClasses} data-ui-component="ResultList" role="listbox" ref={ref}>
-			{items?.map((item, key) => {
+			{items?.map((item, index) => {
+				const itemKey: string = item.name ? `${item.name}-${index}` : `separator-${index}`
 				const itemClasses: string = getClasses("flex flex-y-center gap-5", styles.item, {
 					[styles.itemActive]: item.isActive && !item.type,
 					[styles.itemDisabled]: item.isDisabled,
 				})
 
-				// NOTE @03b8 future composit
-				if (item.type === "separator") return <li key={key} className={styles.resultList__separator} />
+				if (item.type === "separator") return <li key={itemKey} className={styles.resultList__separator} />
 
-				// NOTE @03b8 future composit
 				if (item.type === "checkbox") {
 					const onCheck = (event: ChangeEvent<HTMLInputElement>): void =>
 						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 						item.onClick?.(event as any)
 
 					return (
-						<li key={key} onClick={item.onClick} className={itemClasses}>
+						<li key={itemKey} onClick={item.onClick} className={itemClasses}>
 							<Checkbox
 								label={item.name}
 								{...(item.description && { description: item.description })}
@@ -43,7 +42,7 @@ export const ResultList = forwardRef<HTMLOListElement, ResultListProps>(({ items
 				}
 
 				return (
-					<li key={key} onClick={item.onClick} className={itemClasses}>
+					<li key={itemKey} onClick={item.onClick} className={itemClasses}>
 						{item.icon && (
 							<Flex isCentered={true}>
 								<Icon icon={item.icon} size={18} />

package/constants/hooks.ts

@@ -1 +1 @@
-export const HOOKS = ["useIntersection", "usePrevious", "useLayoutContext", "useTheme"] as const
+export const HOOKS = ["useIntersection", "useLayoutContext", "usePrevious", "usePrint", "useTheme"] as const

package/contexts/LayoutContext/LayoutContext.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, createContext, useRef, useEffect } from "react"
+import { useState, createContext, useRef, useEffect, useMemo, useCallback } from "react"
 import type { FC, PropsWithChildren } from "react"
 import type { LayoutContextProps } from "./LayoutContext.types"
 
@@ -20,6 +20,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 	const asideRef = useRef<HTMLElement | null>(null)
 	const isMenuVisibleRef = useRef<boolean>(false)
 	const windowWidthRef = useRef<number>(0)
+	const resizeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	useEffect(() => {
 		isMenuVisibleRef.current = isMenuVisible
@@ -67,11 +68,20 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			}
 		}
 
-		globalThis.addEventListener("resize", handleResize)
+		const throttledResize = (): void => {
+			if (resizeTimerRef.current) return
+			resizeTimerRef.current = setTimeout(() => {
+				handleResize()
+				resizeTimerRef.current = null
+			}, 150)
+		}
+
+		globalThis.addEventListener("resize", throttledResize)
 		globalThis.document.addEventListener("mousedown", handleClickOutside)
 
 		return (): void => {
-			globalThis.removeEventListener("resize", handleResize)
+			if (resizeTimerRef.current) globalThis.clearTimeout(resizeTimerRef.current)
+			globalThis.removeEventListener("resize", throttledResize)
 			globalThis.document.removeEventListener("mousedown", handleClickOutside)
 		}
 	}, [breakpoint])
@@ -79,24 +89,24 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 	const isWideEnough: boolean = hasMounted ? windowWidth >= breakpoint : false
 	const shouldShowNavigation: boolean = isWideEnough || isMenuVisible
 
-	const onNavigationToggle = (): void => setIsMenuVisible((prev) => !prev)
-	const onAsideClose = (): void => setIsMenuVisible(false)
-
-	return (
-		<LayoutContext.Provider
-			value={{
-				asideRef,
-				hasMounted,
-				isMenuVisible,
-				isWideEnough,
-				onAsideClose,
-				onNavigationToggle,
-				shouldShowNavigation,
-			}}
-		>
-			{children}
-		</LayoutContext.Provider>
+	const onNavigationToggle = useCallback((): void => setIsMenuVisible((prev) => !prev), [])
+	const onAsideClose = useCallback((): void => setIsMenuVisible(false), [])
+
+	const contextValue: LayoutContextProps = useMemo(
+		() => ({
+			asideRef,
+			hasMounted,
+			isMenuVisible,
+			isWideEnough,
+			onAsideClose,
+			onNavigationToggle,
+			shouldShowNavigation,
+			windowWidth,
+		}),
+		[hasMounted, isMenuVisible, isWideEnough, shouldShowNavigation, onAsideClose, onNavigationToggle, windowWidth],
 	)
+
+	return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>
 }
 
 export { LayoutContext, LayoutProvider }

package/contexts/LayoutContext/LayoutContext.types.ts

@@ -8,4 +8,5 @@ export interface LayoutContextProps {
 	onAsideClose: () => void
 	onNavigationToggle: () => void
 	shouldShowNavigation: boolean
+	windowWidth: number
 }

package/hooks/useDebounce.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect } from "react"
 
-export const useDebounce = (value: unknown, delay: number): unknown => {
-	const [debouncedValue, setDebouncedValue] = useState<unknown>(value)
+export const useDebounce = <T,>(value: T, delay: number): T => {
+	const [debouncedValue, setDebouncedValue] = useState<T>(value)
 
 	useEffect(() => {
 		const handler: ReturnType<typeof setTimeout> = setTimeout(() => {

package/hooks/useLayoutContext.tsx

@@ -12,6 +12,7 @@ const DEFAULT_LAYOUT_CONTEXT: LayoutContextProps = {
 	onAsideClose: () => {},
 	onNavigationToggle: () => {},
 	shouldShowNavigation: true,
+	windowWidth: 0,
 }
 
 export const useLayoutContext = (): LayoutContextProps => {

package/hooks/usePrint.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+
+interface UsePrintReturn {
+	isPrinting: boolean
+	print: () => void
+}
+
+export const usePrint = (): UsePrintReturn => {
+	const [isPrinting, setIsPrinting] = useState<boolean>(false)
+
+	useEffect(() => {
+		const handleBeforePrint = (): void => setIsPrinting(true)
+		const handleAfterPrint = (): void => setIsPrinting(false)
+
+		globalThis.addEventListener("beforeprint", handleBeforePrint)
+		globalThis.addEventListener("afterprint", handleAfterPrint)
+
+		return (): void => {
+			globalThis.removeEventListener("beforeprint", handleBeforePrint)
+			globalThis.removeEventListener("afterprint", handleAfterPrint)
+		}
+	}, [])
+
+	const print = useCallback((): void => {
+		globalThis.print()
+	}, [])
+
+	return { isPrinting, print }
+}

package/index.ts

@@ -1,3 +1,6 @@
+// eslint-disable-next-line typescript/triple-slash-reference
+/// <reference path="./globals.d.ts" />
+
 export { Alert } from "./components/Alert"
 export { Breadcrumb } from "./components/Breadcrumb"
 export { Browser } from "./components/Browser"
@@ -64,6 +67,7 @@ export type { TextBaseProps, TextProps } from "./components/Text"
 export { useIntersection } from "./hooks/useIntersection"
 export { useLayoutContext } from "./hooks/useLayoutContext"
 export { usePrevious } from "./hooks/usePrevious"
+export { usePrint } from "./hooks/usePrint"
 export { useTheme } from "./hooks/useTheme"
 
 export type { HeliosAppearanceType, HeliosColorType } from "./types/colors"