@heliosgraphics/ui 2.0.0-alpha.62

package/constants/intentions.ts

@@ -0,0 +1,28 @@
+import type { HeliosColorType } from "../types/colors"
+import type { HeliosIntentionType } from "../types/intentions"
+
+export const INTENTIONS: Array<HeliosIntentionType> = [
+	"action",
+	"automation",
+	"confirmation",
+	"danger",
+	"highlight",
+	"question",
+	"organic",
+	"neutral",
+	"success",
+	"warning",
+]
+
+export const INTENTION_COLOR_MAP: Readonly<Record<HeliosIntentionType, HeliosColorType>> = {
+	action: "blue",
+	automation: "pink",
+	confirmation: "purple",
+	danger: "red",
+	highlight: "orange",
+	neutral: "gray",
+	organic: "olive",
+	question: "aqua",
+	success: "green",
+	warning: "yellow",
+}

package/constants/meta.ts

@@ -0,0 +1,63 @@
+import {
+	COMPONENTS,
+	type HeliosComponentStatusType,
+	type HeliosComponentCategoryType,
+	type HeliosColorType,
+	type HeliosIconType,
+} from ".."
+
+export const STATUS_COLORS: Record<HeliosComponentStatusType, HeliosColorType> = {
+	experimental: "pink",
+	nominal: "gray",
+	stable: "green",
+	internal: "gray",
+}
+
+export const STATUS_ICONS: Record<HeliosComponentStatusType, HeliosIconType> = {
+	experimental: "bolt",
+	nominal: "bolt",
+	stable: "check",
+	internal: "bullseye",
+}
+
+export const STATUS_NAMES: Record<HeliosComponentStatusType, string> = {
+	experimental: "Experimental",
+	nominal: "Might Change",
+	stable: "Stable",
+	internal: "Internal",
+}
+
+export const TYPE_NAMES: Record<HeliosComponentCategoryType, string> = {
+	content: "Content",
+	pattern: "Pattern",
+	core: "Core",
+	layout: "Layout",
+	meta: "Meta",
+}
+
+interface StatusReturnType {
+	color: HeliosColorType
+	icon: HeliosIconType
+	name: string
+	status: HeliosComponentStatusType
+}
+
+export const getStatus = (component: string = "Example"): StatusReturnType => {
+	const componentMeta = COMPONENTS[component]
+
+	if (!componentMeta || !componentMeta._status) {
+		throw new Error(`Component "${component}" not found or missing _status`)
+	}
+
+	const _status = componentMeta._status as HeliosComponentStatusType
+	const color = STATUS_COLORS[_status]
+	const icon = STATUS_ICONS[_status]
+	const name = STATUS_NAMES[_status]
+
+	return {
+		status: _status,
+		color,
+		icon,
+		name,
+	}
+}

package/constants/positions.ts

@@ -0,0 +1,3 @@
+import { HeliosPositionType } from "../types/positions"
+
+export const POSITIONS: Array<HeliosPositionType> = ["bottom-left", "bottom-right", "top-left", "top-right"]

package/constants/scale.ts

@@ -0,0 +1,5 @@
+import type { HeliosScaleType } from ".."
+
+export const SCALE: Array<HeliosScaleType> = [
+	1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 48, 64, 80, 96,
+] as const

package/constants/scope.ts

@@ -0,0 +1,146 @@
+import type { Scope } from "../types/scope"
+import type { BreadcrumbItem, SelectItem, PieItem, ResultItem } from ".."
+
+const BREADCRUMB_ITEMS: Array<BreadcrumbItem> = [
+	{ name: "Index", href: "/", onClick: () => null },
+	{ name: "Books", href: "/", onClick: () => null },
+	{
+		name: "Lorem Ipsum",
+		href: "/",
+		isActive: true,
+		onClick: () => null,
+	},
+]
+
+const RESULT_ITEMS: Array<ResultItem> = [
+	{ name: "First Item", icon: "bullseye" },
+	{
+		name: "Second Item",
+		icon: "bell",
+		description: "Nulla ultricies ultrices mauris, sed posuere justo ultrices in.",
+	},
+	{ name: "Separator", type: "separator" },
+	{ name: "Disabled", isDisabled: false },
+	{ name: "Checkbox", type: "checkbox", isActive: false, onClick: () => null },
+	{
+		name: "Checkbox Checked",
+		type: "checkbox",
+		isActive: true,
+		onClick: () => null,
+		description: "Nulla ultricies ultrices mauris, sed posuere justo ultrices in.",
+	},
+	{ name: "Random Item", icon: "person" },
+	{ name: "Active Item", icon: "bell", isActive: true },
+	{ name: "Lorem Ipsum Dolor Sit Ameta", icon: "x-x" },
+]
+
+const MARKDOWN: string = `# Donec vestibulum
+## Nam porta, orci porta commodo
+### Pellentesque eu est luctus
+#### Nullam pulvinar convallis
+##### Luctus sollicitudin ipsum
+###### Aliquam erat volutpat
+
+Praesent tincidunt elit ante, <a href="">sit amet aliquet nunc imperdiet</a> nec. In pulvinar volutpat lacus sed semper. Aliquam vulputate risus at lacinia aliquam.
+
+|feature|description|
+|--|--|
+|calt|Contextual alternates|
+|dlig|Discretionary Ligatures|
+
+Mauris efficitur aliquam risus, id tempus quam pharetra vitae.
+
+\`\`\`tsx
+<Flex isCentered={true} gap={4}>
+  <Dot size={8} color="blue"/>
+  <Dot size={8} color="red"/>
+</Flex>
+\`\`\`
+
+Integer leo est, lobortis at nulla at, tempus dignissim velit. ~~Suspendisse dignissim~~, ipsum sit amet rhoncus tristique, urna risus accumsan leo, ut \`auctor augue function() {}\` sit amet metus. Proin purus risus, tincidunt a est a, porttitor dignissim erat. Sed vitae varius urna, sed <mark>mark tincidunt neque</mark>. Aenean egestas molestie ante nec pellentesque. Donec massa diam, molestie ac gravida at, commodo et diam.
+
+---
+
+- First item
+- Second item
+
+Orci varius natoque penatibus et <a>magnis dis parturient</a> montes, nascetur ridiculus mus. Aenean varius non magna dapibus pharetra. Pellentesque eget sapien sit amet massa dapibus lacinia. Integer auctor pulvinar erat, non pharetra felis fermentum ac.
+
+> Proin purus risus, ~~tincidunt~~ a est a, porttitor dignissim erat. Sed vitae varius urna, sed tincidunt neque. Aenean egestas molestie ante nec pellentesque. Donec massa diam, molestie ac gravida at, commodo et diam.
+
+<small>
+Phasellus tristique tortor sed malesuada aliquam. Quisque cursus sodales velit, eget condimentum erat accumsan a. Fusce feugiat felis eros, in dignissim arcu imperdiet non. Fusce tincidunt eu dolor vitae pulvinar. Quisque dignissim nibh erat, eu iaculis est maximus sit amet. Vestibulum id lobortis nisi, a maximus leo. Etiam mattis rhoncus felis id condimentum. Vivamus ut nisi non nunc sollicitudin consectetur at id nisl. Vivamus quis turpis a leo pellentesque interdum et id diam. Fusce egestas diam orci, ut volutpat diam semper nec. Pellentesque accumsan consequat erat, id mattis mi ultrices sit amet.
+</small>
+`
+
+const TAB_ITEMS: Array<string> = ["First", "Second", "Third"]
+
+const TAB_SECTIONS: Array<unknown> = ["1. Content", "2. Content", "3. Content"]
+
+const PIE_ITEMS: Array<PieItem> = [
+	{ name: "X", value: 24 },
+	{ name: "First", value: 24 },
+	{ name: "Second", value: 34 },
+	{ name: "Third", value: 63 },
+]
+
+const SELECT_ITEMS: Array<SelectItem> = [
+	{ name: "First", value: "first" },
+	{ name: "Second", value: "second" },
+]
+
+export const SCOPE: Scope = {
+	APPEARANCE: "light",
+	BREADCRUMB_ITEMS: BREADCRUMB_ITEMS,
+	BUTTONGROUP_ALIGN: "left",
+	CHECKBOX_LABEL: "Helium Enabled",
+	CHILDREN: "Hello World",
+	COLOR: "blue",
+	COLOR_ACCENT: "purple",
+	DATE: new Date().toISOString(),
+	DATE_FORMAT: "YYYY-MM-DD",
+	DONUT_SIZE: 48,
+	EMPHASIS: "primary",
+	FUNCTION: () => console.log(0),
+	GAP: 8,
+	HELPER_TEXT: "Learn this with love",
+	ICON: "robot",
+	ICON_ACCENT: "asterisk",
+	INPUT_LABEL: "Helium Enabled",
+	INTENT: "action",
+	INTENT_PARAGRAPH: "Offer guidance or recommendations based on expertise or experience, allowing for personal choice",
+	INTENT_TITLE: "Action",
+	IS_ACTIVE: false,
+	IS_CENTERED: false,
+	IS_CHECKED: true,
+	IS_COLUMN: true,
+	IS_DISABLED: false,
+	IS_LOADING: false,
+	IS_NARROW: false,
+	IS_OPEN: false,
+	IS_ROUND: false,
+	IS_ROUNDED: true,
+	MARKDOWN,
+	ON_RADIO_CHANGE: () => console.log(0),
+	ON_SELECT_ITEM: (item: SelectItem) => console.log(item),
+	ON_TEXTAREA_CHANGE: () => console.log(0),
+	ON_TEXT_CHANGE: () => console.log(0),
+	ON_TOGGLE_OPEN: () => console.log(0),
+	PERCENTAGE: 49,
+	PIE_ITEMS,
+	PILL_LABEL: "Deployed",
+	POSITION: "bottom-left",
+	RADIO: "radio-state-01",
+	RADIO_LABEL: "Atmosphere",
+	RESULT_LIST_ITEMS: RESULT_ITEMS,
+	SCALE: 24,
+	SELECT_ITEMS,
+	SIZE: "normal",
+	TAB_ITEMS,
+	TAB_SECTIONS,
+	TEXTAREA: "Your Message",
+	TEXTAREA_LABEL: "Your Message",
+	TEXTAREA_PLACEHOLDER: "Your Message",
+	TEXT_LABEL: "Email Address",
+	TEXT_VALUE: "",
+}

package/contexts/LayoutContext/LayoutContext.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { useState, createContext, useRef, useEffect } from "react"
+import type { FC, PropsWithChildren } from "react"
+import type { LayoutContextProps } from "./LayoutContext.types"
+
+const IGNORE_DATA_ATTRIBUTE = "data-ui-layout-ignore" as const
+
+const LayoutContext = createContext<LayoutContextProps | null>(null)
+
+interface LayoutProviderBaseProps {
+	breakpoint?: number
+}
+type LayoutProviderProps = PropsWithChildren<LayoutProviderBaseProps>
+
+const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 }) => {
+	const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false)
+	const [windowWidth, setWindowWidth] = useState<number>(0)
+	const [hasMounted, setHasMounted] = useState<boolean>(false)
+	const asideRef = useRef<HTMLElement | null>(null)
+	const isMenuVisibleRef = useRef<boolean>(false)
+
+	useEffect(() => {
+		isMenuVisibleRef.current = isMenuVisible
+	}, [isMenuVisible])
+
+	useEffect(() => {
+		const initialWidth = globalThis.innerWidth
+
+		setHasMounted(true)
+		setWindowWidth(initialWidth)
+
+		const initialMenuVisible = initialWidth >= breakpoint
+
+		setIsMenuVisible(initialMenuVisible)
+		isMenuVisibleRef.current = initialMenuVisible
+
+		const handleResize = (): void => {
+			const newWidth: number = globalThis.innerWidth
+			const wasWideEnough: boolean = windowWidth >= breakpoint
+			const isNowWideEnough: boolean = newWidth >= breakpoint
+
+			setWindowWidth(newWidth)
+
+			if (isNowWideEnough && !wasWideEnough) {
+				setIsMenuVisible(true)
+			} else if (!isNowWideEnough && wasWideEnough) {
+				setIsMenuVisible(false)
+			}
+		}
+
+		const handleClickOutside = (event: MouseEvent): void => {
+			if (asideRef?.current?.contains(event.target as Node)) return
+
+			const clickedElement = event.target as Element
+			const shouldIgnore: Element | null = clickedElement?.closest(`[${IGNORE_DATA_ATTRIBUTE}]`)
+
+			if (!shouldIgnore) {
+				const currentIsWideEnough: boolean = globalThis.innerWidth >= breakpoint
+
+				if (!currentIsWideEnough && isMenuVisibleRef.current) {
+					setIsMenuVisible(false)
+				}
+			}
+		}
+
+		globalThis.addEventListener("resize", handleResize)
+		globalThis.document.addEventListener("mousedown", handleClickOutside)
+
+		return (): void => {
+			globalThis.removeEventListener("resize", handleResize)
+			globalThis.document.removeEventListener("mousedown", handleClickOutside)
+		}
+	}, [breakpoint, windowWidth])
+
+	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>
+	)
+}
+
+export { LayoutContext, LayoutProvider }

package/contexts/LayoutContext/LayoutContext.types.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from "react"
+
+export interface LayoutContextProps {
+	asideRef: RefObject<HTMLElement | null>
+	hasMounted: boolean
+	isMenuVisible: boolean
+	isWideEnough: boolean
+	onAsideClose: () => void
+	onNavigationToggle: () => void
+	shouldShowNavigation: boolean
+}

package/contexts/LayoutContext/index.ts

@@ -0,0 +1,2 @@
+export { LayoutContext, LayoutProvider } from "./LayoutContext"
+export type { LayoutContextProps } from "./LayoutContext.types"

package/css/core.colors-helpers.css

@@ -0,0 +1,320 @@
+/* colors */
+.ui-gray {
+	--bg-active: var(--ui-bg-active-gray);
+	--bg-disabled: var(--ui-bg-disabled-gray);
+	--bg-hover: var(--ui-bg-hover-gray);
+	--bg: var(--ui-bg-gray);
+
+	--text-disabled: var(--ui-text-disabled-gray);
+	--text: var(--ui-text-gray);
+
+	--border: var(--ui-border-gray);
+	--border-hover: var(--ui-border-hover-gray);
+	--border-active: var(--ui-border-active-gray);
+	--border-focus: var(--ui-border-focus-gray);
+	--border-selected: var(--ui-border-selected-gray);
+}
+
+.ui-gray-soft {
+	--bg-active: var(--ui-bg-soft-active-gray);
+	--bg-disabled: var(--ui-bg-soft-disabled-gray);
+	--bg-hover: var(--ui-bg-soft-hover-gray);
+	--bg: var(--ui-bg-soft-gray);
+
+	--text-disabled: var(--ui-text-soft-disabled-gray);
+	--text: var(--ui-text-soft-gray);
+
+	--border: var(--ui-border-soft-gray);
+	--border-hover: var(--ui-border-soft-hover-gray);
+	--border-active: var(--ui-border-soft-active-gray);
+	--border-focus: var(--ui-border-focus-gray);
+	--border-selected: var(--ui-border-selected-gray);
+}
+
+.ui-purple {
+	--bg-active: var(--ui-bg-active-purple);
+	--bg-disabled: var(--ui-bg-disabled-purple);
+	--bg-hover: var(--ui-bg-hover-purple);
+	--bg: var(--ui-bg-purple);
+
+	--text-disabled: var(--ui-text-disabled-purple);
+	--text: var(--ui-text-purple);
+
+	--border: var(--ui-border-purple);
+	--border-hover: var(--ui-border-hover-purple);
+	--border-active: var(--ui-border-active-purple);
+	--border-focus: var(--ui-border-focus-purple);
+	--border-selected: var(--ui-border-selected-purple);
+}
+
+.ui-purple-soft {
+	--bg-active: var(--ui-bg-soft-active-purple);
+	--bg-disabled: var(--ui-bg-soft-disabled-purple);
+	--bg-hover: var(--ui-bg-soft-hover-purple);
+	--bg: var(--ui-bg-soft-purple);
+
+	--text-disabled: var(--ui-text-soft-disabled-purple);
+	--text: var(--ui-text-soft-purple);
+
+	--border: var(--ui-border-soft-purple);
+	--border-hover: var(--ui-border-soft-hover-purple);
+	--border-active: var(--ui-border-soft-active-purple);
+	--border-focus: var(--ui-border-focus-purple);
+	--border-selected: var(--ui-border-selected-purple);
+}
+
+.ui-blue {
+	--bg-active: var(--ui-bg-active-blue);
+	--bg-disabled: var(--ui-bg-disabled-blue);
+	--bg-hover: var(--ui-bg-hover-blue);
+	--bg: var(--ui-bg-blue);
+
+	--text-disabled: var(--ui-text-disabled-blue);
+	--text: var(--ui-text-blue);
+
+	--border: var(--ui-border-blue);
+	--border-hover: var(--ui-border-hover-blue);
+	--border-active: var(--ui-border-active-blue);
+	--border-focus: var(--ui-border-focus-blue);
+	--border-selected: var(--ui-border-selected-blue);
+}
+
+.ui-blue-soft {
+	--bg-active: var(--ui-bg-soft-active-blue);
+	--bg-disabled: var(--ui-bg-soft-disabled-blue);
+	--bg-hover: var(--ui-bg-soft-hover-blue);
+	--bg: var(--ui-bg-soft-blue);
+
+	--text-disabled: var(--ui-text-soft-disabled-blue);
+	--text: var(--ui-text-soft-blue);
+
+	--border: var(--ui-border-soft-blue);
+	--border-hover: var(--ui-border-soft-hover-blue);
+	--border-active: var(--ui-border-soft-active-blue);
+	--border-focus: var(--ui-border-focus-blue);
+	--border-selected: var(--ui-border-selected-blue);
+}
+
+.ui-aqua {
+	--bg-active: var(--ui-bg-active-aqua);
+	--bg-disabled: var(--ui-bg-disabled-aqua);
+	--bg-hover: var(--ui-bg-hover-aqua);
+	--bg: var(--ui-bg-aqua);
+
+	--text-disabled: var(--ui-text-disabled-aqua);
+	--text: var(--ui-text-aqua);
+
+	--border: var(--ui-border-aqua);
+	--border-hover: var(--ui-border-hover-aqua);
+	--border-active: var(--ui-border-active-aqua);
+	--border-focus: var(--ui-border-focus-aqua);
+	--border-selected: var(--ui-border-selected-aqua);
+}
+
+.ui-aqua-soft {
+	--bg-active: var(--ui-bg-soft-active-aqua);
+	--bg-disabled: var(--ui-bg-soft-disabled-aqua);
+	--bg-hover: var(--ui-bg-soft-hover-aqua);
+	--bg: var(--ui-bg-soft-aqua);
+
+	--text-disabled: var(--ui-text-soft-disabled-aqua);
+	--text: var(--ui-text-soft-aqua);
+
+	--border: var(--ui-border-soft-aqua);
+	--border-hover: var(--ui-border-soft-hover-aqua);
+	--border-active: var(--ui-border-soft-active-aqua);
+	--border-focus: var(--ui-border-focus-aqua);
+	--border-selected: var(--ui-border-selected-aqua);
+}
+
+.ui-green {
+	--bg-active: var(--ui-bg-active-green);
+	--bg-disabled: var(--ui-bg-disabled-green);
+	--bg-hover: var(--ui-bg-hover-green);
+	--bg: var(--ui-bg-green);
+
+	--text-disabled: var(--ui-text-disabled-green);
+	--text: var(--ui-text-green);
+
+	--border: var(--ui-border-green);
+	--border-hover: var(--ui-border-hover-green);
+	--border-active: var(--ui-border-active-green);
+	--border-focus: var(--ui-border-focus-green);
+	--border-selected: var(--ui-border-selected-green);
+}
+
+.ui-green-soft {
+	--bg-active: var(--ui-bg-soft-active-green);
+	--bg-disabled: var(--ui-bg-soft-disabled-green);
+	--bg-hover: var(--ui-bg-soft-hover-green);
+	--bg: var(--ui-bg-soft-green);
+
+	--text-disabled: var(--ui-text-soft-disabled-green);
+	--text: var(--ui-text-soft-green);
+
+	--border: var(--ui-border-soft-green);
+	--border-hover: var(--ui-border-soft-hover-green);
+	--border-active: var(--ui-border-soft-active-green);
+	--border-focus: var(--ui-border-focus-green);
+	--border-selected: var(--ui-border-selected-green);
+}
+
+.ui-olive {
+	--bg-active: var(--ui-bg-active-olive);
+	--bg-disabled: var(--ui-bg-disabled-olive);
+	--bg-hover: var(--ui-bg-hover-olive);
+	--bg: var(--ui-bg-olive);
+
+	--text-disabled: var(--ui-text-disabled-olive);
+	--text: var(--ui-text-olive);
+
+	--border: var(--ui-border-olive);
+	--border-hover: var(--ui-border-hover-olive);
+	--border-active: var(--ui-border-active-olive);
+	--border-focus: var(--ui-border-focus-olive);
+	--border-selected: var(--ui-border-selected-olive);
+}
+
+.ui-olive-soft {
+	--bg-active: var(--ui-bg-soft-active-olive);
+	--bg-disabled: var(--ui-bg-soft-disabled-olive);
+	--bg-hover: var(--ui-bg-soft-hover-olive);
+	--bg: var(--ui-bg-soft-olive);
+
+	--text-disabled: var(--ui-text-soft-disabled-olive);
+	--text: var(--ui-text-soft-olive);
+
+	--border: var(--ui-border-soft-olive);
+	--border-hover: var(--ui-border-soft-hover-olive);
+	--border-active: var(--ui-border-soft-active-olive);
+	--border-focus: var(--ui-border-focus-olive);
+	--border-selected: var(--ui-border-selected-olive);
+}
+
+.ui-yellow {
+	--bg-active: var(--ui-bg-active-yellow);
+	--bg-disabled: var(--ui-bg-disabled-yellow);
+	--bg-hover: var(--ui-bg-hover-yellow);
+	--bg: var(--ui-bg-yellow);
+
+	--text-disabled: var(--ui-text-disabled-yellow);
+	--text: var(--ui-text-yellow);
+
+	--border: var(--ui-border-yellow);
+	--border-hover: var(--ui-border-hover-yellow);
+	--border-active: var(--ui-border-active-yellow);
+	--border-focus: var(--ui-border-focus-yellow);
+	--border-selected: var(--ui-border-selected-yellow);
+}
+
+.ui-yellow-soft {
+	--bg-active: var(--ui-bg-soft-active-yellow);
+	--bg-disabled: var(--ui-bg-soft-disabled-yellow);
+	--bg-hover: var(--ui-bg-soft-hover-yellow);
+	--bg: var(--ui-bg-soft-yellow);
+
+	--text-disabled: var(--ui-text-soft-disabled-yellow);
+	--text: var(--ui-text-soft-yellow);
+
+	--border: var(--ui-border-soft-yellow);
+	--border-hover: var(--ui-border-soft-hover-yellow);
+	--border-active: var(--ui-border-soft-active-yellow);
+	--border-focus: var(--ui-border-focus-yellow);
+	--border-selected: var(--ui-border-selected-yellow);
+}
+
+.ui-orange {
+	--bg-active: var(--ui-bg-active-orange);
+	--bg-disabled: var(--ui-bg-disabled-orange);
+	--bg-hover: var(--ui-bg-hover-orange);
+	--bg: var(--ui-bg-orange);
+
+	--text-disabled: var(--ui-text-disabled-orange);
+	--text: var(--ui-text-orange);
+
+	--border: var(--ui-border-orange);
+	--border-hover: var(--ui-border-hover-orange);
+	--border-active: var(--ui-border-active-orange);
+	--border-focus: var(--ui-border-focus-orange);
+	--border-selected: var(--ui-border-selected-orange);
+}
+
+.ui-orange-soft {
+	--bg-active: var(--ui-bg-soft-active-orange);
+	--bg-disabled: var(--ui-bg-soft-disabled-orange);
+	--bg-hover: var(--ui-bg-soft-hover-orange);
+	--bg: var(--ui-bg-soft-orange);
+
+	--text-disabled: var(--ui-text-soft-disabled-orange);
+	--text: var(--ui-text-soft-orange);
+
+	--border: var(--ui-border-soft-orange);
+	--border-hover: var(--ui-border-soft-hover-orange);
+	--border-active: var(--ui-border-soft-active-orange);
+	--border-focus: var(--ui-border-focus-orange);
+	--border-selected: var(--ui-border-selected-orange);
+}
+
+.ui-red {
+	--bg-active: var(--ui-bg-active-red);
+	--bg-disabled: var(--ui-bg-disabled-red);
+	--bg-hover: var(--ui-bg-hover-red);
+	--bg: var(--ui-bg-red);
+
+	--text-disabled: var(--ui-text-disabled-red);
+	--text: var(--ui-text-red);
+
+	--border: var(--ui-border-red);
+	--border-hover: var(--ui-border-hover-red);
+	--border-active: var(--ui-border-active-red);
+	--border-focus: var(--ui-border-focus-red);
+	--border-selected: var(--ui-border-selected-red);
+}
+
+.ui-red-soft {
+	--bg-active: var(--ui-bg-soft-active-red);
+	--bg-disabled: var(--ui-bg-soft-disabled-red);
+	--bg-hover: var(--ui-bg-soft-hover-red);
+	--bg: var(--ui-bg-soft-red);
+
+	--text-disabled: var(--ui-text-soft-disabled-red);
+	--text: var(--ui-text-soft-red);
+
+	--border: var(--ui-border-soft-red);
+	--border-hover: var(--ui-border-soft-hover-red);
+	--border-active: var(--ui-border-soft-active-red);
+	--border-focus: var(--ui-border-focus-red);
+	--border-selected: var(--ui-border-selected-red);
+}
+
+.ui-pink {
+	--bg-active: var(--ui-bg-active-pink);
+	--bg-disabled: var(--ui-bg-disabled-pink);
+	--bg-hover: var(--ui-bg-hover-pink);
+	--bg: var(--ui-bg-pink);
+
+	--text-disabled: var(--ui-text-disabled-pink);
+	--text: var(--ui-text-pink);
+
+	--border: var(--ui-border-pink);
+	--border-hover: var(--ui-border-hover-pink);
+	--border-active: var(--ui-border-active-pink);
+	--border-focus: var(--ui-border-focus-pink);
+	--border-selected: var(--ui-border-selected-pink);
+}
+
+.ui-pink-soft {
+	--bg-active: var(--ui-bg-soft-active-pink);
+	--bg-disabled: var(--ui-bg-soft-disabled-pink);
+	--bg-hover: var(--ui-bg-soft-hover-pink);
+	--bg: var(--ui-bg-soft-pink);
+
+	--text-disabled: var(--ui-text-soft-disabled-pink);
+	--text: var(--ui-text-soft-pink);
+
+	--border: var(--ui-border-soft-pink);
+	--border-hover: var(--ui-border-soft-hover-pink);
+	--border-active: var(--ui-border-soft-active-pink);
+	--border-focus: var(--ui-border-focus-pink);
+	--border-selected: var(--ui-border-selected-pink);
+}