diff --git a/build/api/ui.api.md b/build/api/ui.api.md
index 8dc8d37f81..a49e0bbb6d 100644
--- a/build/api/ui.api.md
+++ b/build/api/ui.api.md
@@ -276,6 +276,8 @@ export interface ButtonListProps extends ComponentClassNameProps, DeprecatedButt
 
 // @public (undocumented)
 export interface ButtonOwnProps extends DeprecatedButtonOwnProps, ComponentClassNameProps {
+    // (undocumented)
+    accent?: false | 'strong' | 'theme';
     // (undocumented)
     active?: boolean;
     // (undocumented)
diff --git a/packages/admin-sandbox/admin/pages/buttons.tsx b/packages/admin-sandbox/admin/pages/buttons.tsx
index cb19147d90..c0ba2b717b 100644
--- a/packages/admin-sandbox/admin/pages/buttons.tsx
+++ b/packages/admin-sandbox/admin/pages/buttons.tsx
@@ -1,167 +1,164 @@
-import { Button, ButtonGroup, ButtonList, ButtonProps, Select, Tag, TextInput, TextareaInput } from '@contember/admin'
+import { Button, ButtonGroup, ButtonList, ButtonProps, Label, Select, Stack, Tag, TextInput, TextareaInput } from '@contember/admin'
 import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
 import { Fragment, useState } from 'react'
 import { SlotSources } from '../components/Slots'
 
-const options = [
-	{ value: 'small', label: 'small' },
-	{ value: 'medium', label: 'medium' },
-	{ value: 'large', label: 'large' },
-]
-
 export default () => {
+	const [accent, setAccent] = useState<ButtonProps['accent']>('theme')
 	const [size, setSize] = useState<'small' | 'medium' | 'large'>('medium')
-	const [v, setV] = useState(2)
 
 	return (
 		<>
 			<SlotSources.Title>Buttons</SlotSources.Title>
+
+			<SlotSources.ContentHeader>
+				<Stack horizontal wrap>
+					<Stack horizontal align="center" gap="gap">
+						<Label>Size:</Label>
+						<Select
+							value={size}
+							notNull={true}
+							options={[
+								{ value: 'small', label: 'small' },
+								{ value: 'medium', label: 'medium' },
+								{ value: 'large', label: 'large' },
+							]}
+							onChange={it => setSize(it ?? 'medium')}
+						/>
+					</Stack>
+
+					<Stack horizontal align="center" gap="gap">
+						<Label>Accent:</Label>
+						<Select
+							value={accent}
+							notNull={true}
+							options={[
+								{ value: 'theme', label: 'theme' },
+								{ value: 'strong', label: 'strong' },
+								{ value: false, label: 'false' },
+							]}
+							onChange={it => setAccent(it ?? 'theme')}
+						/>
+					</Stack>
+				</Stack>
+			</SlotSources.ContentHeader>
+
 			<TextInput name="name" placeholder="Enter name..." />
 			<TextareaInput minRows={4} maxRows={9} name="message" placeholder="Enter message..." defaultValue={'1\n2\n3\n4\n5\n6\n7\n8\n9\n10'} />
 
-			<Select
-				value={size}
-				notNull={true}
-				options={[
-					{ value: 'small', label: 'small' },
-					{ value: 'medium', label: 'medium' },
-					{ value: 'large', label: 'large' },
-				]}
-				onChange={it => setSize(it ?? 'medium')}
-			/>
-
 			<Tag>hi</Tag>
 
 			{[ButtonList, ButtonGroup].map((Wrapper, index) => (
 				<Fragment key={index}>
 					<div>
 						<Wrapper>
-							<Button size={size}>Default</Button>
+							<Button accent={accent} size={size}>Default</Button>
 							<TextInput placeholder="Enter text..." name="name" />
-							<Button size={size} elevated>Elevated</Button>
-							<Button size={size} active>Default</Button>
-							<Button size={size}>Go <ArrowRightIcon /></Button>
-							<Button size={size} disabled>Default</Button>
-							<Button size={size} square>+</Button>
-							<Button size={size} borderRadius={false}><ArrowLeftIcon /></Button>
-							<Button size={size}><ArrowLeftIcon /></Button>
-							<Button size={size} square><ArrowRightIcon /></Button>
-							<Button size={size} borderRadius="gutter"><ArrowRightIcon /></Button>
-							<Button size={size} borderRadius="full"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} elevated>Elevated</Button>
+							<Button accent={accent} size={size} active>Default</Button>
+							<Button accent={accent} size={size}>Go <ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} disabled>Default</Button>
+							<Button accent={accent} size={size} square>+</Button>
+							<Button accent={accent} size={size} borderRadius={false}><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size}><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} square><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} borderRadius="gutter"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} borderRadius="full"><ArrowRightIcon /></Button>
 						</Wrapper>
 						Lorem ipsum
 					</div>
 
-					{/* <div>
-						<Wrapper>
-							<div className="cui-view" data-pressable data-background-color data-padding>Default</div>
-							<TextInput placeholder="Enter text..." name="name" />
-							<div className="cui-view" data-pressable data-background-color data-padding data-elevated>Elevated</div>
-							<div className="cui-view" data-pressable data-background-color data-padding data-pressed>Default</div>
-							<div className="cui-view" data-pressable data-background-color data-padding>Go <ArrowRightIcon /></div>
-							<div className="cui-view" data-pressable data-background-color data-padding data-disabled>Default</div>
-							<div className="cui-view" data-pressable data-background-color data-padding data-square>+</div>
-							<div className="cui-view" data-pressable data-background-color data-padding data-border-radius={false}><ArrowLeftIcon /></div>
-							<div className="cui-view" data-pressable data-background-color data-padding><ArrowLeftIcon /></div>
-							<div className="cui-view" data-pressable data-background-color data-padding data-square><ArrowRightIcon /></div>
-							<div className="cui-view" data-pressable data-background-color data-padding data-border-radius="gutter"><ArrowRightIcon /></div>
-							<div className="cui-view" data-pressable data-background-color data-padding data-border-radius="full"><ArrowRightIcon /></div>
-						</Wrapper>
-						data-Lorem ipsum
-					</div> */}
-
 					<div>
 						<Wrapper>
-							<Button size={size} distinction="inverse">Inverse</Button>
+							<Button accent={accent} size={size} distinction="inverse">Inverse</Button>
 							<TextInput placeholder="Enter text..." name="name" />
-							<Button size={size} distinction="inverse" elevated>Elevated Inverse</Button>
-							<Button size={size} distinction="inverse" active>Inverse</Button>
-							<Button size={size} distinction="inverse">Go <ArrowRightIcon /></Button>
-							<Button size={size} distinction="inverse" disabled>Inverse</Button>
-							<Button size={size} distinction="inverse" square>+</Button>
-							<Button size={size} distinction="inverse" borderRadius={false}><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="inverse"><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="inverse" square><ArrowRightIcon /></Button>
-							<Button size={size} distinction="inverse" borderRadius="gutter"><ArrowRightIcon /></Button>
-							<Button size={size} distinction="inverse" borderRadius="full"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="inverse" elevated>Elevated Inverse</Button>
+							<Button accent={accent} size={size} distinction="inverse" active>Inverse</Button>
+							<Button accent={accent} size={size} distinction="inverse">Go <ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="inverse" disabled>Inverse</Button>
+							<Button accent={accent} size={size} distinction="inverse" square>+</Button>
+							<Button accent={accent} size={size} distinction="inverse" borderRadius={false}><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="inverse"><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="inverse" square><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="inverse" borderRadius="gutter"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="inverse" borderRadius="full"><ArrowRightIcon /></Button>
 						</Wrapper>
 						Lorem ipsum
 					</div>
 
 					<div>
 						<Wrapper>
-							<Button size={size} distinction="primary">Primary</Button>
+							<Button accent={accent} size={size} distinction="primary">Primary</Button>
 							<TextInput placeholder="Enter text..." name="name" />
-							<Button size={size} distinction="primary" elevated>Elevated Primary</Button>
-							<Button size={size} distinction="primary" active>Primary</Button>
-							<Button size={size} distinction="primary">Go <ArrowRightIcon /></Button>
-							<Button size={size} distinction="primary" disabled>Primary</Button>
-							<Button size={size} distinction="primary" square>+</Button>
-							<Button size={size} distinction="primary" borderRadius={false}><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="primary"><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="primary" square><ArrowRightIcon /></Button>
-							<Button size={size} distinction="primary" borderRadius="gutter"><ArrowRightIcon /></Button>
-							<Button size={size} distinction="primary" borderRadius="full"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="primary" elevated>Elevated Primary</Button>
+							<Button accent={accent} size={size} distinction="primary" active>Primary</Button>
+							<Button accent={accent} size={size} distinction="primary">Go <ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="primary" disabled>Primary</Button>
+							<Button accent={accent} size={size} distinction="primary" square>+</Button>
+							<Button accent={accent} size={size} distinction="primary" borderRadius={false}><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="primary"><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="primary" square><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="primary" borderRadius="gutter"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="primary" borderRadius="full"><ArrowRightIcon /></Button>
 						</Wrapper>
 						Lorem ipsum
 					</div>
 
 					<div>
 						<Wrapper>
-							<Button size={size} distinction="seamless">Seamless</Button>
+							<Button accent={accent} size={size} distinction="seamless">Seamless</Button>
 							<TextInput placeholder="Enter text..." name="name" />
-							<Button size={size} distinction="seamless" elevated>Elevated Seamless</Button>
-							<Button size={size} distinction="seamless" active>Seamless</Button>
-							<Button size={size} distinction="seamless">Go <ArrowRightIcon /></Button>
-							<Button size={size} distinction="seamless" disabled>Seamless</Button>
-							<Button size={size} distinction="seamless" square>+</Button>
-							<Button size={size} distinction="seamless" borderRadius={false}><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="seamless"><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="seamless" square><ArrowRightIcon /></Button>
-							<Button size={size} distinction="seamless" borderRadius="gutter"><ArrowRightIcon /></Button>
-							<Button size={size} distinction="seamless" borderRadius="full"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="seamless" elevated>Elevated Seamless</Button>
+							<Button accent={accent} size={size} distinction="seamless" active>Seamless</Button>
+							<Button accent={accent} size={size} distinction="seamless">Go <ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="seamless" disabled>Seamless</Button>
+							<Button accent={accent} size={size} distinction="seamless" square>+</Button>
+							<Button accent={accent} size={size} distinction="seamless" borderRadius={false}><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="seamless"><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="seamless" square><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="seamless" borderRadius="gutter"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="seamless" borderRadius="full"><ArrowRightIcon /></Button>
 						</Wrapper>
 						Lorem ipsum
 					</div>
 
 					<div>
 						<Wrapper>
-							<Button size={size} distinction="outlined">Outlined</Button>
+							<Button accent={accent} size={size} distinction="outlined">Outlined</Button>
 							<TextInput placeholder="Enter text..." name="name" />
-							<Button size={size} distinction="outlined" elevated>Elevated Outlined</Button>
-							<Button size={size} distinction="outlined" active>Outlined</Button>
-							<Button size={size} distinction="outlined">Go <ArrowRightIcon /></Button>
-							<Button size={size} distinction="outlined" disabled>Outlined</Button>
-							<Button size={size} distinction="outlined" square>+</Button>
-							<Button size={size} distinction="outlined" borderRadius={false}><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="outlined"><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="outlined" square><ArrowRightIcon /></Button>
-							<Button size={size} distinction="outlined" borderRadius="gutter"><ArrowRightIcon /></Button>
-							<Button size={size} distinction="outlined" borderRadius="full"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="outlined" elevated>Elevated Outlined</Button>
+							<Button accent={accent} size={size} distinction="outlined" active>Outlined</Button>
+							<Button accent={accent} size={size} distinction="outlined">Go <ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="outlined" disabled>Outlined</Button>
+							<Button accent={accent} size={size} distinction="outlined" square>+</Button>
+							<Button accent={accent} size={size} distinction="outlined" borderRadius={false}><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="outlined"><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="outlined" square><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="outlined" borderRadius="gutter"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="outlined" borderRadius="full"><ArrowRightIcon /></Button>
 						</Wrapper>
 						Lorem ipsum
 					</div>
 
 					<div>
 						<Wrapper>
-							<Button size={size} distinction="toned">Toned</Button>
+							<Button accent={accent} size={size} distinction="toned">Toned</Button>
 							<TextInput placeholder="Enter text..." name="name" />
-							<Button size={size} distinction="toned" elevated>Elevated Toned</Button>
-							<Button size={size} distinction="toned" active>Toned</Button>
-							<Button size={size} distinction="toned">Go <ArrowRightIcon /></Button>
-							<Button size={size} distinction="toned" disabled>Toned</Button>
-							<Button size={size} distinction="toned" square>+</Button>
-							<Button size={size} distinction="toned" borderRadius={false}><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="toned"><ArrowLeftIcon /></Button>
-							<Button size={size} distinction="toned" square><ArrowRightIcon /></Button>
-							<Button size={size} distinction="toned" borderRadius="gutter"><ArrowRightIcon /></Button>
-							<Button size={size} distinction="toned" borderRadius="full"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="toned" elevated>Elevated Toned</Button>
+							<Button accent={accent} size={size} distinction="toned" active>Toned</Button>
+							<Button accent={accent} size={size} distinction="toned">Go <ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="toned" disabled>Toned</Button>
+							<Button accent={accent} size={size} distinction="toned" square>+</Button>
+							<Button accent={accent} size={size} distinction="toned" borderRadius={false}><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="toned"><ArrowLeftIcon /></Button>
+							<Button accent={accent} size={size} distinction="toned" square><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="toned" borderRadius="gutter"><ArrowRightIcon /></Button>
+							<Button accent={accent} size={size} distinction="toned" borderRadius="full"><ArrowRightIcon /></Button>
 						</Wrapper>
 						Lorem ipsum
 					</div>
 				</Fragment>
 			))}
-
 		</>
 	)
 }
diff --git a/packages/admin-sandbox/admin/pages/fieldContainers.tsx b/packages/admin-sandbox/admin/pages/fieldContainers.tsx
index 08abb1529a..de7902bb0f 100644
--- a/packages/admin-sandbox/admin/pages/fieldContainers.tsx
+++ b/packages/admin-sandbox/admin/pages/fieldContainers.tsx
@@ -1,5 +1,5 @@
 import { Button, ButtonGroup, Divider, FieldContainer, Label, Stack, TextInput } from '@contember/ui'
-import { AlignCenterHorizontalIcon, AlignCenterVerticalIcon, AlignEndHorizontalIcon, AlignEndVerticalIcon, AlignStartHorizontalIcon, AlignStartVerticalIcon, ColumnsIcon, RowsIcon, StretchHorizontalIcon } from 'lucide-react'
+import { AlignCenterVerticalIcon, AlignEndVerticalIcon, AlignStartVerticalIcon, ColumnsIcon, RowsIcon, StretchHorizontalIcon } from 'lucide-react'
 import { useState } from 'react'
 import { SlotSources } from '../components/Slots'
 
diff --git a/packages/admin/src/components/Auto/AutoGrid.tsx b/packages/admin/src/components/Auto/AutoGrid.tsx
index 54f9558c25..ba387b2957 100644
--- a/packages/admin/src/components/Auto/AutoGrid.tsx
+++ b/packages/admin/src/components/Auto/AutoGrid.tsx
@@ -42,7 +42,7 @@ const createDataGridColumns = (
 		<GenericCell key="action" shrunk>
 			<Stack horizontal>
 				{createEditLinkTarget && (
-					<LinkButton to={createEditLinkTarget(entityName)} distinction="seamless" size="small">
+					<LinkButton accent="strong" to={createEditLinkTarget(entityName)} distinction="seamless" size="small">
 						edit
 					</LinkButton>
 				)}
diff --git a/packages/admin/src/components/bindingFacade/collections/helpers/DeleteEntityButton.tsx b/packages/admin/src/components/bindingFacade/collections/helpers/DeleteEntityButton.tsx
index 7d4ebbf363..5a75803579 100644
--- a/packages/admin/src/components/bindingFacade/collections/helpers/DeleteEntityButton.tsx
+++ b/packages/admin/src/components/bindingFacade/collections/helpers/DeleteEntityButton.tsx
@@ -1,7 +1,5 @@
 import { EntityAccessor, useEntity, useMutationState } from '@contember/binding'
-import { useColorScheme } from '@contember/react-utils'
 import { Button, ButtonProps } from '@contember/ui'
-import { colorSchemeClassName, controlsThemeClassName, listClassName } from '@contember/utilities'
 import { Trash2Icon } from 'lucide-react'
 import { ReactNode, memo, useCallback } from 'react'
 import { usePersistWithFeedback } from '../../../ui'
@@ -24,22 +22,20 @@ export type DeleteEntityButtonProps =
  * @group Action buttons
  */
 export const DeleteEntityButton = memo((props: DeleteEntityButtonProps) => {
-	const { children, immediatePersist, className, ...rest } = props
+	const { children, immediatePersist, ...rest } = props
 	const parentEntity = useEntity()
 	const triggerPersist = usePersistWithFeedback()
 	const isMutating = useMutationState()
 	const onClick = useCallback(() => {
-		if (props.immediatePersist && !confirm('Really?')) {
+		if (immediatePersist && !confirm('Really?')) {
 			return
 		}
 		parentEntity.deleteEntity()
 
-		if (props.immediatePersist && triggerPersist) {
+		if (immediatePersist && triggerPersist) {
 			triggerPersist().catch(() => { })
 		}
-	}, [triggerPersist, props.immediatePersist, parentEntity])
-
-	const colorScheme = useColorScheme()
+	}, [triggerPersist, immediatePersist, parentEntity])
 
 	if (!(parentEntity instanceof EntityAccessor)) {
 		return null
@@ -48,15 +44,12 @@ export const DeleteEntityButton = memo((props: DeleteEntityButtonProps) => {
 	return (
 		<Button
 			square
+			accent="strong"
 			borderRadius="full"
 			distinction="seamless"
 			size="small"
 			{...rest}
-			className={listClassName([
-				controlsThemeClassName('danger', ':hover'),
-				colorSchemeClassName(colorScheme),
-				className,
-			])}
+			intent="danger"
 			disabled={isMutating || rest.disabled}
 			onClick={onClick}
 		>
diff --git a/packages/admin/tests/playwright/snapshots/blockEditor.spec.ts-snapshots/selected-iPhone-11-linux.png b/packages/admin/tests/playwright/snapshots/blockEditor.spec.ts-snapshots/selected-iPhone-11-linux.png
index ba9db4156b..242cabc5ba 100644
Binary files a/packages/admin/tests/playwright/snapshots/blockEditor.spec.ts-snapshots/selected-iPhone-11-linux.png and b/packages/admin/tests/playwright/snapshots/blockEditor.spec.ts-snapshots/selected-iPhone-11-linux.png differ
diff --git a/packages/admin/tests/playwright/snapshots/repeaterItemContainer.spec.ts-snapshots/with-actions-iPad-landscape-linux.png b/packages/admin/tests/playwright/snapshots/repeaterItemContainer.spec.ts-snapshots/with-actions-iPad-landscape-linux.png
index 72b404a9f5..6f618f6f08 100644
Binary files a/packages/admin/tests/playwright/snapshots/repeaterItemContainer.spec.ts-snapshots/with-actions-iPad-landscape-linux.png and b/packages/admin/tests/playwright/snapshots/repeaterItemContainer.spec.ts-snapshots/with-actions-iPad-landscape-linux.png differ
diff --git a/packages/admin/tests/playwright/snapshots/select.spec.ts-snapshots/03-opened-dialog-iPhone-11-linux.png b/packages/admin/tests/playwright/snapshots/select.spec.ts-snapshots/03-opened-dialog-iPhone-11-linux.png
index 1dad5b3081..f33f923d3b 100644
Binary files a/packages/admin/tests/playwright/snapshots/select.spec.ts-snapshots/03-opened-dialog-iPhone-11-linux.png and b/packages/admin/tests/playwright/snapshots/select.spec.ts-snapshots/03-opened-dialog-iPhone-11-linux.png differ
diff --git a/packages/admin/tests/playwright/snapshots/selectOrCreate.spec.ts-snapshots/02-opened-dialog-iPhone-11-linux.png b/packages/admin/tests/playwright/snapshots/selectOrCreate.spec.ts-snapshots/02-opened-dialog-iPhone-11-linux.png
index 61e579237c..69b0aee872 100644
Binary files a/packages/admin/tests/playwright/snapshots/selectOrCreate.spec.ts-snapshots/02-opened-dialog-iPhone-11-linux.png and b/packages/admin/tests/playwright/snapshots/selectOrCreate.spec.ts-snapshots/02-opened-dialog-iPhone-11-linux.png differ
diff --git a/packages/ui/src/components/ActionableBox/ActionableBox.tsx b/packages/ui/src/components/ActionableBox/ActionableBox.tsx
index f477a57f24..76ae1d655d 100644
--- a/packages/ui/src/components/ActionableBox/ActionableBox.tsx
+++ b/packages/ui/src/components/ActionableBox/ActionableBox.tsx
@@ -1,7 +1,7 @@
 import { useClassNameFactory, useComposeRef } from '@contember/react-utils'
 import { ComponentClassNameProps, flatClassNameList } from '@contember/utilities'
 import { PencilIcon, Trash2Icon } from 'lucide-react'
-import { MouseEvent as ReactMouseEvent, ReactNode, memo, useCallback, useMemo, useRef, useState } from 'react'
+import { MouseEvent as ReactMouseEvent, ReactNode, memo, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { HTMLDivElementProps } from '../../types'
 import { Box, BoxOwnProps } from '../Box'
diff --git a/packages/ui/src/components/Forms/Button/Button.css b/packages/ui/src/components/Forms/Button/Button.css
index af52c40dbe..8bc79de580 100644
--- a/packages/ui/src/components/Forms/Button/Button.css
+++ b/packages/ui/src/components/Forms/Button/Button.css
@@ -1,56 +1,81 @@
 :where(.cui-button) {
-	--cui-line-height: var(--cui-line-height--controls);
+	----background-color-opacity--disabled: 0;
+	----background-color-opacity--highlighted: var(--cui-opacity--low);
+	----background-color-opacity--pressed: var(--cui-opacity--low);
+	----background-color-opacity: 0;
+	----background-color-rgb--disabled: var(----background-color-rgb);
+	----background-color-rgb--highlighted: var(--cui-background-color--toned-controls-rgb-50);
+	----background-color-rgb--pressed: var(--cui-color--accent-rgb-75);
+	----background-color-rgb: var(--cui-background-color--rgb-50);
+	----border-color-opacity--disabled: var(--cui-opacity--lower);
+	----border-color-opacity--highlighted: var(--cui-opacity--medium);
+	----border-color-opacity--pressed: var(--cui-opacity--high);
+	----border-color-opacity: var(--cui-opacity--low);
+	----border-color-rgb--disabled: var(----border-color-rgb);
+	----border-color-rgb--highlighted: var(--cui-color--accent-rgb-50);
+	----border-color-rgb--pressed: var(--cui-color--accent-rgb-50);
+	----border-color-rgb: var(--cui-color--rgb-50);
+	----box-shadow--bottom-inner-darken: inset 0 -2px 0 -1px rgba(var(----color-rgb), 0.1);
+	----box-shadow--elevated: 0 0 2px 1px rgba(var(----box-shadow-color-rgb--elevated), 0.125), 0 1px 1em 4px rgba(var(----box-shadow-color-rgb--elevated), 0.25);
+	----box-shadow--pressed: inset 0 1px 5em 1px rgba(var(----box-shadow-color-rgb--pressed), 0.125), inset 0 1px 4px 0px rgba(var(----box-shadow-color-rgb--pressed), 0.125);
+	----box-shadow--top-inner-lighten: inset 0 1px 0 0px rgba(var(--cui-background-color--rgb-100), 0.1);
+	----box-shadow-color-rgb--elevated: var(--cui-theme-content--rgb-500);
+	----box-shadow-color-rgb--pressed: var(----border-color-rgb--pressed);
+	----color-opacity--disabled: var(--cui-opacity--low);
+	----color-opacity--highlighted: 1;
+	----color-opacity--pressed: 1;
+	----color-opacity: 1;
+	----color-rgb--disabled: var(--cui-color--rgb-50);
+	----color-rgb--highlighted: var(--cui-color--accent-rgb-50);
+	----color-rgb--pressed: var(--cui-color--accent-rgb-25);
+	----color-rgb: var(--cui-color--rgb-50);
 	--cui-button--align-items: center;
-	--cui-button--justify-content: center;
-	--cui-button--background-color--disabled: rgba(var(--cui-background-color--toned-controls-rgb-75), var(--cui-opacity--lower));
-	--cui-button--background-color--highlighted: rgba(var(--cui-background-color--toned-controls-rgb-75), var(--cui-opacity--low));
-	--cui-button--background-color--pressed: rgba(var(--cui-background-color--toned-controls-rgb-75), var(--cui-opacity--medium));
-	--cui-button--background-color: rgb(var(--cui-background-color--rgb-75));
-	--cui-button--border-color--disabled: rgba(var(--cui-color--rgb-50), var(--cui-opacity--lower));
-	--cui-button--border-color--highlighted: rgba(var(--cui-color--accent-rgb-50), var(--cui-opacity--medium));
-	--cui-button--border-color--pressed: rgb(var(--cui-color--accent-rgb-50));
-	--cui-button--border-color: rgba(var(--cui-color--rgb-50), var(--cui-opacity--lower));
+	--cui-button--background-color--disabled: rgba(var(----background-color-rgb--disabled), var(----background-color-opacity--disabled));
+	--cui-button--background-color--highlighted: rgba(var(----background-color-rgb--highlighted), var(----background-color-opacity--highlighted));
+	--cui-button--background-color--pressed: rgba(var(----background-color-rgb--pressed), var(----background-color-opacity--pressed));
+	--cui-button--background-color: rgba(var(----background-color-rgb), var(----background-color-opacity));
+	--cui-button--border-color--disabled: rgb(var(----border-color-rgb--disabled), var(----border-color-opacity--disabled));
+	--cui-button--border-color--highlighted: rgba(var(----border-color-rgb--highlighted), var(----border-color-opacity--highlighted));
+	--cui-button--border-color--pressed: rgb(var(----border-color-rgb--pressed), var(----border-color-opacity--pressed));
+	--cui-button--border-color: rgba(var(----border-color-rgb), var(----border-color-opacity));
 	--cui-button--border-radius: 0px;
 	--cui-button--border-width: var(--cui-border-width, 1px);
-	--cui-button--box-shadow--disabled: 0 0 transparent;
-	--cui-button--box-shadow--highlighted: var(--cui-button--box-shadow-dark-edge-bottom);
-	--cui-button--box-shadow--pressed: 0 0 transparent;
-	--cui-button--box-shadow-dark-edge-bottom: inset 0 -2px 0 -1px rgba(var(--cui-theme-content--rgb-0), 0.1);
-	--cui-button--box-shadow-dark-edge-top: inset 0 1px 0 1px rgba(var(--cui-theme-content--rgb-0), 0.5);
-	--cui-button--box-shadow-shadow-below: 0 0 transparent;
-	--cui-button--box-shadow: var(--cui-button--box-shadow-shadow-below), var(--cui-button--box-shadow-dark-edge-bottom);
-	--cui-button--color--disabled: rgba(var(--cui-color--accent-rgb-50), var(--cui-opacity--low));
-	--cui-button--color--highlighted: rgb(var(--cui-color--accent-rgb-75));
-	--cui-button--color--pressed: rgb(var(--cui-color--toned-controls-rgb-100));
-	--cui-button--color-rgb: var(--cui-color--accent-rgb-50);
-	--cui-button--color: rgb(var(--cui-button--color-rgb));
+	--cui-button--box-shadow--highlighted: var(--cui-button--box-shadow-below--highlighted, 0 0 transparent), var(--cui-button--box-shadow-border-bottom--highlighted, var(----box-shadow--bottom-inner-darken)), var(--cui-button--box-shadow-border-top--highlighted, var(----box-shadow--top-inner-lighten)), var(--cui-button--box-shadow-above--highlighted, 0 0 transparent);
+	--cui-button--box-shadow--pressed: var(--cui-button--box-shadow-below--pressed, 0 0 transparent), var(--cui-button--box-shadow-border-bottom--pressed, 0 0 transparent), var(--cui-button--box-shadow-border-top--pressed, 0 0 transparent), var(--cui-button--box-shadow-above--pressed, var(----box-shadow--pressed));
+	--cui-button--box-shadow: var(--cui-button--box-shadow-below, 0 0 transparent), var(--cui-button--box-shadow-border-bottom, 0 0 transparent), var(--cui-button--box-shadow-border-top, 0 0 transparent), var(--cui-button--box-shadow-above, 0 0 transparent);
+	--cui-button--color--disabled: rgba(var(----color-rgb--disabled), var(----color-opacity--disabled));
+	--cui-button--color--highlighted: rgba(var(----color-rgb--highlighted), var(----color-opacity--highlighted));
+	--cui-button--color--pressed: rgba(var(----color-rgb--pressed), var(----color-opacity--pressed));
+	--cui-button--color: rgba(var(----color-rgb), var(----color-opacity));
 	--cui-button--height: var(--cui-size--controls);
-	--cui-button--inset: 0px;
 	--cui-button--inset-horizontal: var(--cui-button--inset);
-	--cui-button--inset-vertical: var(--cui-button--inset);
-	--cui-button--inset-optical: calc((var(--cui-button--border-radius)) * var(--cui-border-radius-optical-grow));
 	--cui-button--inset-optical-horizontal: var(--cui-button--inset-optical);
 	--cui-button--inset-optical-vertical: var(--cui-button--inset-optical);
+	--cui-button--inset-optical: calc((var(--cui-button--border-radius)) * var(--cui-border-radius-optical-grow));
+	--cui-button--inset-vertical: var(--cui-button--inset);
+	--cui-button--inset: 0px;
+	--cui-button--justify-content: center;
 	--cui-button--label-font-size: var(--cui-font-size--label);
 	--cui-button--line-height: var(--cui-line-height--controls);
-	--cui-button--padding: 0px;
 	--cui-button--padding-horizontal: var(--cui-button--padding);
 	--cui-button--padding-vertical: var(--cui-button--padding);
+	--cui-button--padding: 0px;
 	--cui-button--size-horizontal: 1;
 	--cui-button--size-vertical: 1;
+	--cui-line-height: var(--cui-line-height--controls);
 	align-items: center;
-	justify-content: center;
 	background: transparent;
 	border-color: var(--cui-button--border-color);
 	border-radius: var(--cui-button--border-radius);
-	border-style: solid;
+	border-style: var(--cui-button--border-style, solid);
 	border-width: 0px;
-	color: rgb(var(--cui-color--accent-rgb-50));
+	color: inherit;
 	display: inline-flex;
 	font-family: inherit;
 	font-size: var(--cui-button--label-font-size);
 	font-weight: 600;
 	gap: var(--cui-gap);
+	justify-content: center;
 	line-height: var(--cui-button--line-height);
 	margin: 0px;
 	outline: none;
@@ -61,6 +86,13 @@
 	user-select: none;
 	vertical-align: baseline;
 }
+:where(.cui-button[data-accent="strong"]) {
+	----color-rgb: var(--cui-color--strong-rgb-50);
+}
+:where(.cui-button[data-accent="theme"]) {
+	----box-shadow-color-rgb--elevated: var(--cui-theme-controls--rgb-300);
+	----color-rgb: var(--cui-color--accent-rgb-50);
+}
 
 :where(.cui-button:focus) {
 	z-index: 1;
@@ -105,16 +137,6 @@
 :where(.cui-button[data-justify="space-between"]) { --cui-button--justify-content: space-between }
 :where(.cui-button[data-justify="space-evenly"]) { --cui-button--justify-content: space-evenly }
 
-:where(.cui-button[data-distinction="seamless"]) {
-	--cui-button--background-color--highlighted: transparent;
-	--cui-button--background-color: transparent;
-	--cui-button--box-shadow--highlighted: 0 0 transparent;
-	--cui-button--box-shadow: var(--cui-button--box-shadow-shadow-below);
-	--cui-button--color-rgb: var(--cui-color--accent-rgb-50);
-	--cui-button--border-width: 0px;
-	--cui-button--color--highlighted: rgb(var(--cui-color--accent-rgb-75));
-}
-
 :where(.cui-button[data-padding]) { --cui-button--padding: calc(2.25 * var(--cui-gap)) }
 :where(.cui-button[data-padding="gap"]) { --cui-button--padding: calc(var(--cui-gap)) }
 :where(.cui-button[data-padding="double"]) { --cui-button--padding: calc(var(--cui-double-gap)) }
@@ -142,50 +164,114 @@
 	--cui-button--size-vertical: 2;
 }
 
+:where(.cui-button[data-distinction="seamless"]) {
+	----background-color-opacity--disabled: 0;
+	----background-color-opacity: 0;
+	----background-color-rgb--highlighted: var(--cui-background-color--toned-controls-rgb-50);
+	----color-rgb: var(--cui-color--rgb-50);
+	--cui-button--border-width: 0px;
+	--cui-button--box-shadow-border-bottom--highlighted: 0 0 transparent;
+	--cui-button--box-shadow-border-top--highlighted: 0 0 transparent;
+	--cui-button--color-rgb--highlighted: var(--cui-color--accent-rgb-50);
+}
+:where(.cui-button[data-distinction="seamless"][data-accent="strong"]) {
+	----color-rgb: var(--cui-color--strong-rgb-50);
+}
+:where(.cui-button[data-distinction="seamless"][data-accent="theme"]) {
+	----color-rgb: var(--cui-color--accent-rgb-50);
+}
+
 :where(.cui-button[data-distinction="inverse"]) {
-	--cui-button--background-color--highlighted: rgb(var(--cui-background-color--controls-inverse-rgb-75));
-	--cui-button--background-color--pressed: rgb(var(--cui-background-color--controls-inverse-rgb-100));
-	--cui-button--background-color: rgb(var(--cui-background-color--controls-inverse-rgb-50));
-	--cui-button--border-color--pressed: rgb(var(--cui-background-color--controls-inverse-rgb-75));
-	--cui-button--color--highlighted: rgb(var(--cui-color--controls-inverse-rgb-75));
-	--cui-button--color--pressed: rgb(var(--cui-color--controls-inverse-rgb-75));
-	--cui-button--color-rgb: var(--cui-color--controls-inverse-rgb-50);
+	----background-color-opacity--disabled: var(--cui-opacity--lower);
+	----background-color-opacity--highlighted: 1;
+	----background-color-opacity--pressed: 1;
+	----background-color-opacity: 1;
+	----background-color-rgb--disabled: var(--cui-background-color--content-inverse-rgb-100);
+	----background-color-rgb--pressed: var(--cui-background-color--controls-inverse-rgb-50);
+	----background-color-rgb--highlighted: var(--cui-background-color--controls-inverse-rgb-25);
+	----background-color-rgb: var(--cui-background-color--content-inverse-rgb-0);
+	----border-color-rgb: var(----background-color-rgb);
+	----color-rgb--pressed: var(--cui-color--controls-inverse-rgb-50);
+	----color-rgb--highlighted: var(--cui-color--controls-inverse-rgb-25);
+	----color-rgb: var(--cui-color--content-inverse-rgb-0);
+}
+:where(.cui-button[data-distinction="inverse"][data-accent="strong"]) {
+	----background-color-rgb--disabled: var(--cui-background-color--content-inverse-rgb-100);
+	----color-rgb: var(--cui-color--content-inverse-rgb-25);
+}
+:where(.cui-button[data-distinction="inverse"][data-accent="theme"]) {
+	----background-color-rgb: var(--cui-background-color--controls-inverse-rgb-0);
+	----color-rgb: var(--cui-color--controls-inverse-rgb-0);
 }
 
 :where(.cui-button[data-distinction="primary"]) {
-	--cui-button--background-color--highlighted: rgb(var(--cui-background-color--controls-rgb-75));
-	--cui-button--background-color--pressed: rgb(var(--cui-background-color--controls-rgb-100));
-	--cui-button--background-color: rgb(var(--cui-background-color--controls-rgb-50));
-	--cui-button--border-color--pressed: rgb(var(--cui-background-color--controls-rgb-0));
-	--cui-button--border-width: 0px;
-	--cui-button--color--highlighted: rgb(var(--cui-color--controls-rgb-75));
-	--cui-button--color--pressed: rgb(var(--cui-color--controls-rgb-100));
-	--cui-button--color-rgb: var(--cui-color--controls-rgb-50);
+	----background-color-opacity--disabled: var(--cui-opacity--lower);
+	----background-color-opacity--highlighted: 1;
+	----background-color-opacity--pressed: 1;
+	----background-color-opacity: 1;
+	----background-color-rgb--disabled: var(--cui-background-color--content-rgb-100);
+	----background-color-rgb--highlighted: var(--cui-background-color--controls-rgb-100);
+	----background-color-rgb--pressed: var(--cui-background-color--controls-rgb-25);
+	----background-color-rgb: var(--cui-background-color--content-rgb-25);
+	----border-color-rgb--highlighted: var(--cui-background-color--controls-rgb-100);
+	----border-color-rgb--pressed: var(--cui-background-color--controls-rgb-0);
+	----border-color-rgb: var(----background-color-rgb);
+	----color-rgb--highlighted: var(--cui-color--controls-rgb-25);
+	----color-rgb--pressed: var(--cui-color--controls-rgb-100);
+	----color-rgb: var(--cui-color--content-rgb-50);
+	----box-shadow-color-rgb--pressed: var(--cui-background-color--controls-rgb-0);
+}
+:where(.cui-button[data-distinction="primary"][data-accent="strong"]) {
+	----background-color-rgb: var(--cui-background-color--content-rgb-75);
+}
+:where(.cui-button[data-distinction="primary"][data-accent="theme"]) {
+	----background-color-rgb: var(--cui-background-color--controls-rgb-75);
+	----color-rgb: var(--cui-color--controls-rgb-50);
 }
 
 :where(.cui-button[data-distinction="toned"]) {
-	--cui-button--background-color--highlighted: rgba(var(--cui-background-color--toned-controls-rgb-50), var(--cui-opacity--low));
-	--cui-button--background-color--pressed: rgba(var(--cui-background-color--toned-controls-rgb-50), var(--cui-opacity--medium));
-	--cui-button--background-color: rgba(var(--cui-background-color--toned-controls-rgb-50), var(--cui-opacity--lower));
-	--cui-button--border-color--pressed: rgb(var(--cui-color--toned-controls-rgb-100));
+	----background-color-opacity--disabled: var(--cui-opacity--lower);
+	----background-color-opacity: var(--cui-opacity--lower);
+	----background-color-rgb--disabled: var(--cui-background-color--toned-rgb-50);
+	----background-color-rgb--highlighted: var(--cui-background-color--toned-controls-rgb-50);
+	----background-color-rgb--pressed: var(--cui-background-color--toned-controls-rgb-50);
+	----background-color-rgb: var(--cui-background-color--toned-rgb-50);
+	----border-color-opacity: 0;
+	----border-color-rgb: var(--color-rgb);
+	----color--highlighted-rgb: var(--cui-color--toned-controls-rgb-75);
+	----color-rgb: var(--cui-color--toned-rgb-50);
 	--cui-button--border-width: 0px;
-	--cui-button--box-shadow--highlighted: 0 0 transparent;
-	--cui-button--box-shadow: var(--cui-button--box-shadow-shadow-below);
-	--cui-button--color--highlighted: rgb(var(--cui-color--toned-controls-rgb-75));
-	--cui-button--color-rgb: var(--cui-color--toned-controls-rgb-50);
+	--cui-button--box-shadow-border-bottom--highlighted: 0 0 transparent;
+	--cui-button--box-shadow-border-top--highlighted: 0 0 transparent;
+}
+:where(.cui-button[data-distinction="toned"][data-accent="strong"]) {
+	----color-rgb: var(--cui-color--strong-rgb-50);
+}
+:where(.cui-button[data-distinction="toned"][data-accent="theme"]) {
+	----background-color-rgb: var(--cui-background-color--toned-controls-rgb-50);
+	----color-rgb: var(--cui-color--toned-controls-rgb-50);
 }
 
 :where(.cui-button[data-distinction="outlined"]) {
-	--cui-button--background-color--disabled: transparent;
-	--cui-button--background-color--highlighted: transparent;
-	--cui-button--background-color: transparent;
-	--cui-button--border-color--highlighted: rgb(var(--cui-color--accent-rgb-75));
-	--cui-button--border-color--pressed: rgb(var(--cui-color--accent-rgb-100));
-	--cui-button--border-color: rgb(var(--cui-color--accent-rgb-50));
+	----background-color-rgb--disabled: transparent;
+	----background-color-rgb--highlighted: var(--cui-background-color--toned-controls-rgb-50);
+	----background-color-rgb: transparent;
+	----border-color-rgb--highlighted: var(--cui-color--accent-rgb-50);
+	----border-color-rgb: var(--cui-color--rgb-50);
+	----color-rgb--highlighted: var(--cui-color--accent-rgb-50);
+	----color-rgb: var(--cui-color--rgb-50);
 	--cui-button--border-width: var(--cui-border-width--controls, 2px);;
-	--cui-button--box-shadow--highlighted: 0 0 transparent;
-	--cui-button--color--highlighted: rgb(var(--cui-color--accent-rgb-75));
-	--cui-button--color-rgb: var(--cui-color--accent-rgb-50);
+	--cui-button--box-shadow-border-bottom--highlighted: 0 0 transparent;
+	--cui-button--box-shadow-border-top--highlighted: 0 0 transparent;
+}
+:where(.cui-button[data-distinction="outlined"][data-accent="strong"]) {
+	----border-color-rgb: var(--cui-color--strong-rgb-50);
+	----color-rgb: var(--cui-color--strong-rgb-50);
+}
+:where(.cui-button[data-distinction="outlined"][data-accent="theme"]) {
+	----border-color-rgb--disabled: var(--cui-color--rgb-50);
+	----border-color-rgb: var(--cui-color--accent-rgb-50);
+	----color-rgb: var(--cui-color--accent-rgb-50);
 }
 
 /* TODO: deprecated since v1.3.0 */
@@ -194,15 +280,8 @@
 }
 
 :where(.cui-button[data-elevated]) {
-	--cui-button--box-shadow-shadow-below:
-	0 0 1px rgba(var(--cui-button--color-rgb), 0.25),
-	0 1px 1em rgba(var(--cui-button--color-rgb), 0.25);
-}
-
-:where(.cui-button[data-distinction="primary"][data-elevated]) {
-	--cui-button--box-shadow-shadow-below:
-	0 0 1px rgba(var(--cui-background-color--controls-rgb-50), 0.25),
-	0 1px 1em rgba(var(--cui-background-color--controls-rgb-50), 0.25);
+	--cui-button--box-shadow-below--highlighted: var(----box-shadow--elevated);
+	--cui-button--box-shadow-below: var(----box-shadow--elevated);
 }
 
 :where(.cui-button > .cui-button-content) {
@@ -225,33 +304,55 @@
 	align-items: var(--cui-button--align-items);
 	background: var(--cui-button--background-color);
 	border-color: inherit;
+	border-radius: inherit;
 	border-style: inherit;
 	border-width: var(--cui-button--border-width);
-	box-sizing: content-box;
 	box-shadow: var(--cui-button--box-shadow);
-	border-radius: inherit;
+	box-sizing: content-box;
 	color: var(--cui-button--color);
-	justify-content: var(--cui-button--justify-content);
 	display: flex;
 	flex: 1;
 	gap: inherit;
-	overflow: hidden;
-	outline: none;
+	justify-content: var(--cui-button--justify-content);
+	line-height: var(--cui-line-height);
 	margin: var(--cui-button-content--inset-vertical) var(--cui-button-content--inset-horizontal);
-	min-width: calc(var(--cui-line-height) * 1em);
-	min-height: calc(var(--cui-line-height) * 1em);
+	outline: none;
+	overflow: hidden;
 	padding: var(--cui-button-content--padding-vertical) var(--cui-button-content--padding-horizontal);
 	text-overflow: ellipsis;
 	transition-duration: var(--cui-transition-duration--fast);
-	transition-property: box-shadow, color, background, opacity, border-color;
+	transition-property: box-shadow, border-color, color, background-color, opacity, border-color;
 	transition-timing-function: ease-in-out;
 	vertical-align: middle;
 	white-space: nowrap;
 }
 
+/* <Firefox.workaround https://caniuse.com/?search=lh%20unit> */
+:where(.cui-button > .cui-button-content) {
+	min-height: calc(var(--cui-line-height) * 1em);
+	min-width: calc(var(--cui-line-height) * 1em);
+}
+/* </Firefox.workaround> */
+
+@supports (line-height: 1lh) {
+	:where(.cui-button > .cui-button-content) {
+		min-height: 1lh;
+		min-width: 1lh;
+	}
+}
+
+/* <Firefox.workaround https://caniuse.com/?search=lh%20unit> */
 :where(.cui-button[data-square] > .cui-button-content) {
-	max-width: calc(var(--cui-line-height) * 1em);
 	max-height: calc(var(--cui-line-height) * 1em);
+	max-width: calc(var(--cui-line-height) * 1em);
+}
+/* </Firefox.workaround> */
+
+@supports (line-height: 1lh) {
+	:where(.cui-button[data-square] > .cui-button-content) {
+		max-height: 1lh;
+		max-width: 1lh;
+	}
 }
 
 :where(.cui-button:not([disabled]):hover > .cui-button-content) {
@@ -271,17 +372,16 @@
 
 :where(.cui-button:focus:focus-visible:not([disabled]) > .cui-button-content) {
 	background: var(--cui-button--background-color--highlighted);
-	box-shadow: var(--cui-button--box-shadow--highlighted);
+	border-color: var(--cui-button--border-color--highlighted);
 	color: var(--cui-button--color--highlighted);
 }
 
-:where(.cui-button[data-focus-ring]:focus:focus-visible:not([disabled]) > .cui-button-content) {
-	box-shadow: var(--cui-button--box-shadow--highlighted), var(--cui-box-shadow--controls-focus-ring);
-}
-
+:where(.cui-button[data-focus-ring]:focus:focus-visible:not([disabled]) > .cui-button-content),
 :where(.cui-button[data-focus-ring]:active:focus:focus-visible > .cui-button-content),
 :where(.cui-button[data-focus-ring][data-active]:focus:focus-visible > .cui-button-content) {
-	box-shadow: var(--cui-button--box-shadow--pressed), var(--cui-box-shadow--controls-focus-ring);
+	outline-color: rgb(var(--cui-color--accent-rgb-50));
+	outline-offset: 4px;
+	outline-style: auto;
 }
 
 :where(.cui-button-list),
@@ -325,16 +425,15 @@
 :where(.cui-button-group > .cui-button[data-inset]) {
 	--cui-button--inset: 0px;
 }
-:where(.cui-button-group > .cui-button[data-distinction="outlined"]) {
-	--cui-button--border-color--disabled: rgb(var(--cui-color--accent-rgb-50));
-	--cui-button--border-color--pressed: rgb(var(--cui-color--accent-rgb-50));
-}
-:where(.cui-button-group > .cui-button[data-distinction="default"]) {
-	--cui-button--box-shadow--disabled: var(--cui-button--box-shadow-shadow-below), var(--cui-button--box-shadow-dark-edge-bottom);
+:where(.cui-button-group > .cui-button) {
+	----border-color-opacity--disabled: var(--cui-opacity--low);
 }
+
+:where(.cui-button-group > .cui-button[data-distinction="inverse"]),
 :where(.cui-button-group > .cui-button[data-distinction="primary"]) {
-	--cui-button--background-color--disabled: rgb(var(--cui-background-color--controls-rgb-75));
-	--cui-button--color--disabled: rgba(var(--cui-color--controls-rgb-100), var(--cui-opacity--low));
+	----background-color-opacity--disabled: var(----background-color-opacity);
+	----background-color-rgb--disabled: var(----background-color-rgb);
+	----color-rgb--disabled: var(----color-rgb);
 }
 
 /* TODO: Should be removed with deprecated code */
@@ -396,19 +495,14 @@
 :where(.cui-button-group[data-inset="padding"]),
 :where(.cui-button-list[data-inset="padding"]) { --cui-view--inset: var(--cui-padding) }
 
-:where(.cui-button-group[data-focus-ring]:focus-within) {
-	box-shadow: var(--cui-box-shadow--controls-focus-ring);
-	z-index: 1;
-}
-
 :where(.cui-button[disabled]) {
 	--cui-button--background-color--highlighted: var(--cui-button--background-color--disabled);
 	--cui-button--background-color--pressed: var(--cui-button--background-color--disabled);
 	--cui-button--background-color: var(--cui-button--background-color--disabled);
 	--cui-button--border-color: var(--cui-button--border-color--disabled);
+	--cui-button--box-shadow--pressed: none;
 	--cui-button--box-shadow--highlighted: none;
-	--cui-button--box-shadow-pressed: none;
-	--cui-button--box-shadow: var(--cui-button--box-shadow--disabled);
+	--cui-button--box-shadow: none;
 	--cui-button--color--highlighted: var(--cui-button--color--disabled);
 	--cui-button--color--pressed: var(--cui-button--color--disabled);
 	--cui-button--color: var(--cui-button--color--disabled);
diff --git a/packages/ui/src/components/Forms/Button/Button.tsx b/packages/ui/src/components/Forms/Button/Button.tsx
index ed4bce2fbf..b721526642 100644
--- a/packages/ui/src/components/Forms/Button/Button.tsx
+++ b/packages/ui/src/components/Forms/Button/Button.tsx
@@ -1,7 +1,6 @@
 import { ColorSchemeContext, useClassNameFactory, useColorScheme } from '@contember/react-utils'
-import { colorSchemeClassName, contentThemeClassName, controlsThemeClassName, dataAttribute, deprecate, fallback } from '@contember/utilities'
+import { colorSchemeClassName, controlsThemeClassName, dataAttribute, deprecate, fallback, isDefined } from '@contember/utilities'
 import { createElement, forwardRef, memo } from 'react'
-import type { HTMLButtonElementProps } from '../../../types'
 import { Spinner } from '../../Spinner/Spinner'
 import { Text } from '../../Typography'
 import { AnchorButtonProps, BaseButtonProps, ButtonProps } from './Types'
@@ -89,6 +88,7 @@ Button.displayName = 'Interface.Button'
 
 export const BaseButton = memo(forwardRef<any, BaseButtonProps>(({
 	Component,
+	accent = 'theme',
 	active,
 	align,
 	bland,
@@ -130,7 +130,7 @@ export const BaseButton = memo(forwardRef<any, BaseButtonProps>(({
 	padding = fallback(padding, flow === 'generous' || flow === 'generousBlock', 'padding')
 
 	deprecate('1.3.0', typeof elevated !== 'boolean', '`elevate` prop', '`elevate` prop')
-	elevated = fallback(elevated, typeof elevation !== 'boolean', elevation === 'default' ? true : false)
+	elevated = fallback(elevated, elevation === 'default', true)
 
 	deprecate('1.3.0', justification !== undefined, '`justification` prop', '`justify` prop')
 	justify = fallback(justify, justification !== undefined, ({ default: 'center', justifyStart: 'start', justifyCenter: 'center', justifyEnd: 'end' } as const)[justification ?? 'default'])
@@ -146,17 +146,16 @@ export const BaseButton = memo(forwardRef<any, BaseButtonProps>(({
 		rest['tabIndex'] = -1
 	}
 
-	const themeIntent = !disabled ? intent : 'default'
 	const className = useClassNameFactory(componentClassName)
 	const colorScheme = useColorScheme()
 	const scheme = schemeProp ?? colorScheme
 
 	return createElement(Component, {
 		...rest,
+		'data-accent': dataAttribute(accent),
 		'data-active': dataAttribute(active),
 		'data-align': dataAttribute(align),
-		// TODO: deprecated since v1.3.0
-		'data-bland': dataAttribute(bland),
+		'data-bland': dataAttribute(bland), // TODO: deprecated since v1.3.0
 		'data-border-radius': dataAttribute(borderRadius),
 		'data-disabled': dataAttribute(disabled),
 		'data-display': dataAttribute(display),
@@ -172,8 +171,7 @@ export const BaseButton = memo(forwardRef<any, BaseButtonProps>(({
 		'data-square': dataAttribute(square),
 		disabled,
 		'className': className(null, [
-			contentThemeClassName(distinction === 'default' ? null : themeIntent),
-			controlsThemeClassName(themeIntent),
+			controlsThemeClassName(intent),
 			colorSchemeClassName(scheme),
 			classNameProp,
 		]),
diff --git a/packages/ui/src/components/Forms/Button/Types.ts b/packages/ui/src/components/Forms/Button/Types.ts
index af086ce8ef..71906e74d9 100644
--- a/packages/ui/src/components/Forms/Button/Types.ts
+++ b/packages/ui/src/components/Forms/Button/Types.ts
@@ -19,6 +19,7 @@ export interface AnchorBasedProps extends Omit<HTMLAnchorElementProps, 'ref' | '
 }
 
 export interface ButtonOwnProps extends DeprecatedButtonOwnProps, ComponentClassNameProps {
+	accent?: false | 'strong' | 'theme'
 	active?: boolean
 	align?: 'start' | 'center' | 'end' | 'stretch'
 	borderRadius?: Exclude<StackOwnProps['gap'], 'large' | 'larger'> | 'full'
@@ -88,7 +89,7 @@ export type ButtonGroupOrientation = Default | 'horizontal' | 'vertical'
 export type DeprecatedButtonDefault = Default
 /** @deprecated No alternative */
 export interface DeprecatedButtonOwnProps {
-	/** @deprecated Use `distinction` instead to suppress button visuals */
+	/** @deprecated Use `distinction`, `theme` or `accent={false}` props instead to suppress button visuals */
 	bland?: boolean
 	/** @deprecated Use `elevated` instead */
 	elevation?: ButtonElevation
diff --git a/packages/ui/src/components/Typography/Text.tsx b/packages/ui/src/components/Typography/Text.tsx
index c85b80f013..f045d8d30d 100644
--- a/packages/ui/src/components/Typography/Text.tsx
+++ b/packages/ui/src/components/Typography/Text.tsx
@@ -1,7 +1,6 @@
 import { useClassName } from '@contember/react-utils'
-import { ComponentClassNameProps, PolymorphicComponent, assert } from '@contember/utilities'
+import { ComponentClassNameProps, PolymorphicComponent } from '@contember/utilities'
 import { ReactNode, forwardRef, memo } from 'react'
-import { HTMLSpanElementProps } from '../../types'
 
 export interface TextOwnProps<Translate extends Function = Function> extends ComponentClassNameProps {
 	children?: ReactNode
diff --git a/packages/ui/src/styles/schemes.css b/packages/ui/src/styles/schemes.css
index c2357c335a..a593cd15ff 100644
--- a/packages/ui/src/styles/schemes.css
+++ b/packages/ui/src/styles/schemes.css
@@ -72,16 +72,22 @@
 		--cui-background-color--toned-controls-rgb-25: var(--cui-theme-controls--rgb-500);
 		--cui-background-color--toned-controls-rgb-0: var(--cui-theme-controls--rgb-400);
 
-		--cui-color--toned-controls-rgb-100: var(--cui-theme-controls--rgb-300);
-		--cui-color--toned-controls-rgb-75: var(--cui-theme-controls--rgb-400);
+		--cui-color--toned-controls-rgb-100: var(--cui-theme-controls--rgb-200);
+		--cui-color--toned-controls-rgb-75: var(--cui-theme-controls--rgb-450);
 		--cui-color--toned-controls-rgb-50: var(--cui-theme-controls--rgb-500);
-		--cui-color--toned-controls-rgb-25: var(--cui-theme-controls--rgb-600);
-		--cui-color--toned-controls-rgb-0: var(--cui-theme-controls--rgb-700);
+		--cui-color--toned-controls-rgb-25: var(--cui-theme-controls--rgb-650);
+		--cui-color--toned-controls-rgb-0: var(--cui-theme-controls--rgb-800);
 
-		--cui-background-color--controls-rgb-100: var(--cui-theme-controls--rgb-550);
-		--cui-background-color--controls-rgb-75: var(--cui-theme-controls--rgb-450);
+		--cui-background-color--content-rgb-100: var(--cui-theme-content--rgb-150);
+		--cui-background-color--content-rgb-75: var(--cui-theme-content--rgb-225);
+		--cui-background-color--content-rgb-50: var(--cui-theme-content--rgb-350);
+		--cui-background-color--content-rgb-25: var(--cui-theme-content--rgb-425);
+		--cui-background-color--content-rgb-0: var(--cui-theme-content--rgb-450);
+
+		--cui-background-color--controls-rgb-100: var(--cui-theme-controls--rgb-450);
+		--cui-background-color--controls-rgb-75: var(--cui-theme-controls--rgb-425);
 		--cui-background-color--controls-rgb-50: var(--cui-theme-controls--rgb-350);
-		--cui-background-color--controls-rgb-25: var(--cui-theme-controls--rgb-250);
+		--cui-background-color--controls-rgb-25: var(--cui-theme-controls--rgb-225);
 		--cui-background-color--controls-rgb-0: var(--cui-theme-controls--rgb-150);
 
 		--cui-color--controls-rgb-100: var(--cui-theme-controls--rgb-1000);
@@ -90,17 +96,35 @@
 		--cui-color--controls-rgb-25: var(--cui-theme-controls--rgb-950);
 		--cui-color--controls-rgb-0: var(--cui-theme-controls--rgb-900);
 
-		--cui-background-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-250);
-		--cui-background-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-150);
-		--cui-background-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-50);
-		--cui-background-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-0);
-		--cui-background-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-0);
+		--cui-color--content-rgb-100: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-75: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-50: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-25: var(--cui-theme-content--rgb-950);
+		--cui-color--content-rgb-0: var(--cui-theme-content--rgb-900);
+
+		--cui-background-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-700);
+		--cui-background-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-550);
+		--cui-background-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-400);
+		--cui-background-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-250);
+		--cui-background-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-100);
+
+		--cui-background-color--content-inverse-rgb-100: var(--cui-theme-content--rgb-700);
+		--cui-background-color--content-inverse-rgb-75: var(--cui-theme-content--rgb-550);
+		--cui-background-color--content-inverse-rgb-50: var(--cui-theme-content--rgb-400);
+		--cui-background-color--content-inverse-rgb-25: var(--cui-theme-content--rgb-250);
+		--cui-background-color--content-inverse-rgb-0: var(--cui-theme-content--rgb-100);
 
 		--cui-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-1000);
 		--cui-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-1000);
 		--cui-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-1000);
 		--cui-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-950);
 		--cui-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-900);
+
+		--cui-color--content-inverse-rgb-100: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-inverse-rgb-75: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-inverse-rgb-50: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-inverse-rgb-25: var(--cui-theme-content--rgb-950);
+		--cui-color--content-inverse-rgb-0: var(--cui-theme-content--rgb-900);
 	}
 
 	:where(.scheme-dark) {
@@ -122,11 +146,11 @@
 		--cui-color--strong-rgb-25: var(--cui-theme-content--rgb-900);
 		--cui-color--strong-rgb-0: var(--cui-theme-content--rgb-800);
 
-		--cui-color--accent-rgb-100: var(--cui-theme-controls--rgb-700);
-		--cui-color--accent-rgb-75: var(--cui-theme-controls--rgb-600);
+		--cui-color--accent-rgb-100: var(--cui-theme-controls--rgb-300);
+		--cui-color--accent-rgb-75: var(--cui-theme-controls--rgb-400);
 		--cui-color--accent-rgb-50: var(--cui-theme-controls--rgb-500);
-		--cui-color--accent-rgb-25: var(--cui-theme-controls--rgb-400);
-		--cui-color--accent-rgb-0: var(--cui-theme-controls--rgb-300);
+		--cui-color--accent-rgb-25: var(--cui-theme-controls--rgb-600);
+		--cui-color--accent-rgb-0: var(--cui-theme-controls--rgb-700);
 
 		--cui-background-color--toned-rgb-100: var(--cui-theme-content--rgb-200);
 		--cui-background-color--toned-rgb-75: var(--cui-theme-content--rgb-300);
@@ -152,11 +176,17 @@
 		--cui-color--toned-controls-rgb-25: var(--cui-theme-controls--rgb-400);
 		--cui-color--toned-controls-rgb-0: var(--cui-theme-controls--rgb-200);
 
-		--cui-background-color--controls-rgb-100: var(--cui-theme-controls--rgb-450);
+		--cui-background-color--controls-rgb-100: var(--cui-theme-controls--rgb-400);
 		--cui-background-color--controls-rgb-75: var(--cui-theme-controls--rgb-350);
-		--cui-background-color--controls-rgb-50: var(--cui-theme-controls--rgb-250);
-		--cui-background-color--controls-rgb-25: var(--cui-theme-controls--rgb-150);
-		--cui-background-color--controls-rgb-0: var(--cui-theme-controls--rgb-50);
+		--cui-background-color--controls-rgb-50: var(--cui-theme-controls--rgb-300);
+		--cui-background-color--controls-rgb-25: var(--cui-theme-controls--rgb-250);
+		--cui-background-color--controls-rgb-0: var(--cui-theme-controls--rgb-200);
+
+		--cui-background-color--content-rgb-100: var(--cui-theme-content--rgb-400);
+		--cui-background-color--content-rgb-75: var(--cui-theme-content--rgb-350);
+		--cui-background-color--content-rgb-50: var(--cui-theme-content--rgb-300);
+		--cui-background-color--content-rgb-25: var(--cui-theme-content--rgb-250);
+		--cui-background-color--content-rgb-0: var(--cui-theme-content--rgb-200);
 
 		--cui-color--controls-rgb-100: var(--cui-theme-controls--rgb-1000);
 		--cui-color--controls-rgb-75: var(--cui-theme-controls--rgb-1000);
@@ -164,17 +194,35 @@
 		--cui-color--controls-rgb-25: var(--cui-theme-controls--rgb-900);
 		--cui-color--controls-rgb-0: var(--cui-theme-controls--rgb-850);
 
-		--cui-background-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-800);
-		--cui-background-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-900);
-		--cui-background-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-1000);
-		--cui-background-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-1000);
+		--cui-color--content-rgb-100: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-75: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-50: var(--cui-theme-content--rgb-950);
+		--cui-color--content-rgb-25: var(--cui-theme-content--rgb-900);
+		--cui-color--content-rgb-0: var(--cui-theme-content--rgb-850);
+
+		--cui-background-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-300);
+		--cui-background-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-400);
+		--cui-background-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-600);
+		--cui-background-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-800);
 		--cui-background-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-1000);
 
-		--cui-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-300);
-		--cui-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-250);
-		--cui-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-200);
-		--cui-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-150);
-		--cui-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-100);
+		--cui-background-color--content-inverse-rgb-100: var(--cui-theme-content--rgb-300);
+		--cui-background-color--content-inverse-rgb-75: var(--cui-theme-content--rgb-400);
+		--cui-background-color--content-inverse-rgb-50: var(--cui-theme-content--rgb-600);
+		--cui-background-color--content-inverse-rgb-25: var(--cui-theme-content--rgb-800);
+		--cui-background-color--content-inverse-rgb-0: var(--cui-theme-content--rgb-1000);
+
+		--cui-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-0);
+		--cui-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-50);
+		--cui-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-150);
+		--cui-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-250);
+		--cui-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-350);
+
+		--cui-color--content-inverse-rgb-100: var(--cui-theme-content--rgb-0);
+		--cui-color--content-inverse-rgb-75: var(--cui-theme-content--rgb-50);
+		--cui-color--content-inverse-rgb-50: var(--cui-theme-content--rgb-150);
+		--cui-color--content-inverse-rgb-25: var(--cui-theme-content--rgb-250);
+		--cui-color--content-inverse-rgb-0: var(--cui-theme-content--rgb-350);
 	}
 }
 
@@ -202,11 +250,11 @@
 		--cui-color--strong-rgb-25: var(--cui-theme-content--rgb-900);
 		--cui-color--strong-rgb-0: var(--cui-theme-content--rgb-800);
 
-		--cui-color--accent-rgb-100: var(--cui-theme-controls--rgb-700);
-		--cui-color--accent-rgb-75: var(--cui-theme-controls--rgb-600);
+		--cui-color--accent-rgb-100: var(--cui-theme-controls--rgb-300);
+		--cui-color--accent-rgb-75: var(--cui-theme-controls--rgb-400);
 		--cui-color--accent-rgb-50: var(--cui-theme-controls--rgb-500);
-		--cui-color--accent-rgb-25: var(--cui-theme-controls--rgb-400);
-		--cui-color--accent-rgb-0: var(--cui-theme-controls--rgb-300);
+		--cui-color--accent-rgb-25: var(--cui-theme-controls--rgb-600);
+		--cui-color--accent-rgb-0: var(--cui-theme-controls--rgb-700);
 
 		--cui-background-color--toned-rgb-100: var(--cui-theme-content--rgb-200);
 		--cui-background-color--toned-rgb-75: var(--cui-theme-content--rgb-300);
@@ -232,11 +280,17 @@
 		--cui-color--toned-controls-rgb-25: var(--cui-theme-controls--rgb-400);
 		--cui-color--toned-controls-rgb-0: var(--cui-theme-controls--rgb-200);
 
-		--cui-background-color--controls-rgb-100: var(--cui-theme-controls--rgb-450);
+		--cui-background-color--controls-rgb-100: var(--cui-theme-controls--rgb-400);
 		--cui-background-color--controls-rgb-75: var(--cui-theme-controls--rgb-350);
-		--cui-background-color--controls-rgb-50: var(--cui-theme-controls--rgb-250);
-		--cui-background-color--controls-rgb-25: var(--cui-theme-controls--rgb-150);
-		--cui-background-color--controls-rgb-0: var(--cui-theme-controls--rgb-50);
+		--cui-background-color--controls-rgb-50: var(--cui-theme-controls--rgb-300);
+		--cui-background-color--controls-rgb-25: var(--cui-theme-controls--rgb-250);
+		--cui-background-color--controls-rgb-0: var(--cui-theme-controls--rgb-200);
+
+		--cui-background-color--content-rgb-100: var(--cui-theme-content--rgb-400);
+		--cui-background-color--content-rgb-75: var(--cui-theme-content--rgb-350);
+		--cui-background-color--content-rgb-50: var(--cui-theme-content--rgb-300);
+		--cui-background-color--content-rgb-25: var(--cui-theme-content--rgb-250);
+		--cui-background-color--content-rgb-0: var(--cui-theme-content--rgb-200);
 
 		--cui-color--controls-rgb-100: var(--cui-theme-controls--rgb-1000);
 		--cui-color--controls-rgb-75: var(--cui-theme-controls--rgb-1000);
@@ -244,17 +298,35 @@
 		--cui-color--controls-rgb-25: var(--cui-theme-controls--rgb-900);
 		--cui-color--controls-rgb-0: var(--cui-theme-controls--rgb-850);
 
-		--cui-background-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-800);
-		--cui-background-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-900);
-		--cui-background-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-1000);
-		--cui-background-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-1000);
+		--cui-color--content-rgb-100: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-75: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-50: var(--cui-theme-content--rgb-950);
+		--cui-color--content-rgb-25: var(--cui-theme-content--rgb-900);
+		--cui-color--content-rgb-0: var(--cui-theme-content--rgb-850);
+
+		--cui-background-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-300);
+		--cui-background-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-400);
+		--cui-background-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-600);
+		--cui-background-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-800);
 		--cui-background-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-1000);
 
-		--cui-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-300);
-		--cui-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-250);
-		--cui-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-200);
-		--cui-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-150);
-		--cui-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-100);
+		--cui-background-color--content-inverse-rgb-100: var(--cui-theme-content--rgb-300);
+		--cui-background-color--content-inverse-rgb-75: var(--cui-theme-content--rgb-400);
+		--cui-background-color--content-inverse-rgb-50: var(--cui-theme-content--rgb-600);
+		--cui-background-color--content-inverse-rgb-25: var(--cui-theme-content--rgb-800);
+		--cui-background-color--content-inverse-rgb-0: var(--cui-theme-content--rgb-1000);
+
+		--cui-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-0);
+		--cui-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-50);
+		--cui-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-150);
+		--cui-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-250);
+		--cui-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-350);
+
+		--cui-color--content-inverse-rgb-100: var(--cui-theme-content--rgb-0);
+		--cui-color--content-inverse-rgb-75: var(--cui-theme-content--rgb-50);
+		--cui-color--content-inverse-rgb-50: var(--cui-theme-content--rgb-150);
+		--cui-color--content-inverse-rgb-25: var(--cui-theme-content--rgb-250);
+		--cui-color--content-inverse-rgb-0: var(--cui-theme-content--rgb-350);
 	}
 
 	:where(.scheme-light) {
@@ -300,16 +372,22 @@
 		--cui-background-color--toned-controls-rgb-25: var(--cui-theme-controls--rgb-500);
 		--cui-background-color--toned-controls-rgb-0: var(--cui-theme-controls--rgb-400);
 
-		--cui-color--toned-controls-rgb-100: var(--cui-theme-controls--rgb-300);
-		--cui-color--toned-controls-rgb-75: var(--cui-theme-controls--rgb-400);
+		--cui-color--toned-controls-rgb-100: var(--cui-theme-controls--rgb-200);
+		--cui-color--toned-controls-rgb-75: var(--cui-theme-controls--rgb-450);
 		--cui-color--toned-controls-rgb-50: var(--cui-theme-controls--rgb-500);
-		--cui-color--toned-controls-rgb-25: var(--cui-theme-controls--rgb-600);
-		--cui-color--toned-controls-rgb-0: var(--cui-theme-controls--rgb-700);
+		--cui-color--toned-controls-rgb-25: var(--cui-theme-controls--rgb-650);
+		--cui-color--toned-controls-rgb-0: var(--cui-theme-controls--rgb-800);
+
+		--cui-background-color--content-rgb-100: var(--cui-theme-content--rgb-150);
+		--cui-background-color--content-rgb-75: var(--cui-theme-content--rgb-225);
+		--cui-background-color--content-rgb-50: var(--cui-theme-content--rgb-350);
+		--cui-background-color--content-rgb-25: var(--cui-theme-content--rgb-425);
+		--cui-background-color--content-rgb-0: var(--cui-theme-content--rgb-450);
 
-		--cui-background-color--controls-rgb-100: var(--cui-theme-controls--rgb-550);
-		--cui-background-color--controls-rgb-75: var(--cui-theme-controls--rgb-450);
+		--cui-background-color--controls-rgb-100: var(--cui-theme-controls--rgb-450);
+		--cui-background-color--controls-rgb-75: var(--cui-theme-controls--rgb-425);
 		--cui-background-color--controls-rgb-50: var(--cui-theme-controls--rgb-350);
-		--cui-background-color--controls-rgb-25: var(--cui-theme-controls--rgb-250);
+		--cui-background-color--controls-rgb-25: var(--cui-theme-controls--rgb-225);
 		--cui-background-color--controls-rgb-0: var(--cui-theme-controls--rgb-150);
 
 		--cui-color--controls-rgb-100: var(--cui-theme-controls--rgb-1000);
@@ -318,16 +396,34 @@
 		--cui-color--controls-rgb-25: var(--cui-theme-controls--rgb-950);
 		--cui-color--controls-rgb-0: var(--cui-theme-controls--rgb-900);
 
-		--cui-background-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-250);
-		--cui-background-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-150);
-		--cui-background-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-50);
-		--cui-background-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-0);
-		--cui-background-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-0);
+		--cui-color--content-rgb-100: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-75: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-50: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-rgb-25: var(--cui-theme-content--rgb-950);
+		--cui-color--content-rgb-0: var(--cui-theme-content--rgb-900);
+
+		--cui-background-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-700);
+		--cui-background-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-550);
+		--cui-background-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-400);
+		--cui-background-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-250);
+		--cui-background-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-100);
+
+		--cui-background-color--content-inverse-rgb-100: var(--cui-theme-content--rgb-700);
+		--cui-background-color--content-inverse-rgb-75: var(--cui-theme-content--rgb-550);
+		--cui-background-color--content-inverse-rgb-50: var(--cui-theme-content--rgb-400);
+		--cui-background-color--content-inverse-rgb-25: var(--cui-theme-content--rgb-250);
+		--cui-background-color--content-inverse-rgb-0: var(--cui-theme-content--rgb-100);
 
 		--cui-color--controls-inverse-rgb-100: var(--cui-theme-controls--rgb-1000);
 		--cui-color--controls-inverse-rgb-75: var(--cui-theme-controls--rgb-1000);
 		--cui-color--controls-inverse-rgb-50: var(--cui-theme-controls--rgb-1000);
 		--cui-color--controls-inverse-rgb-25: var(--cui-theme-controls--rgb-950);
 		--cui-color--controls-inverse-rgb-0: var(--cui-theme-controls--rgb-900);
+
+		--cui-color--content-inverse-rgb-100: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-inverse-rgb-75: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-inverse-rgb-50: var(--cui-theme-content--rgb-1000);
+		--cui-color--content-inverse-rgb-25: var(--cui-theme-content--rgb-950);
+		--cui-color--content-inverse-rgb-0: var(--cui-theme-content--rgb-900);
 	}
 }
diff --git a/packages/utilities/src/class-name/constants.ts b/packages/utilities/src/class-name/constants.ts
index 8d2db4ba31..2986728442 100644
--- a/packages/utilities/src/class-name/constants.ts
+++ b/packages/utilities/src/class-name/constants.ts
@@ -6,34 +6,17 @@
  * If theme is `default` then it will match:
  *
  * - theme-default
- * - theme-default:hover
- * - theme-default:active
- * - theme-default:focus
  * - theme-default-content
- * - theme-default-content:hover
- * - theme-default-content:active
- * - theme-default-content:focus
  * - theme-default-controls
- * - theme-default-controls:hover
- * - theme-default-controls:active
- * - theme-default-controls:focus
  *
  * If theme is `brand-color` then it will match:
  *
  * - theme-brand-color
- * - theme-brand-color:hover
- * - theme-brand-color:active
- * - theme-brand-color:focus
  * - theme-brand-color-content
- * - theme-brand-color-content:hover
- * - theme-brand-color-content:active
- * - theme-brand-color-content:focus
  * - theme-brand-color-controls
- * - theme-brand-color-controls:hover
- * - theme-brand-color-controls:active
- * - theme-brand-color-controls:focus
  */
 
+// TODO: v1.3.0 >>> THEME_CLASS_NAME_REG_EXP = /^theme-(?<name>[\w-]+?)(?:-(?<scope>content|controls))?$/
 export const THEME_CLASS_NAME_REG_EXP = /^theme-(?<name>[\w-]+?)(?:-(?<scope>content|controls))?(?<state>:[\w]+(?:[\w-]+)?)?$/
 
 /**
diff --git a/packages/utilities/src/class-name/filterThemedClassName.ts b/packages/utilities/src/class-name/filterThemedClassName.ts
index 022be1af11..d6af8f7020 100644
--- a/packages/utilities/src/class-name/filterThemedClassName.ts
+++ b/packages/utilities/src/class-name/filterThemedClassName.ts
@@ -1,4 +1,5 @@
 import { KebabCase } from 'type-fest'
+import { deprecate } from '../deprecate'
 import { isColorSchemeClassName } from './colorSchemeClassName'
 import { THEME_CLASS_NAME_REG_EXP } from './constants'
 import { flatClassNameList } from './flatClassNameList'
@@ -29,6 +30,7 @@ export function filterThemedClassName(
 			const state = match.groups!.state as `:${KebabCase<string>}`
 
 			if (state) {
+				deprecate('1.3.0', true, 'State themes are deprecated.', null)
 				stateThemes[state] = stateThemes[state] ?? { content: undefined, controls: undefined }
 
 				if (!scope) {
diff --git a/packages/utilities/src/class-name/themeClassName.ts b/packages/utilities/src/class-name/themeClassName.ts
index 3ea6e9bc8f..7af94e7fa0 100644
--- a/packages/utilities/src/class-name/themeClassName.ts
+++ b/packages/utilities/src/class-name/themeClassName.ts
@@ -1,4 +1,6 @@
 import { KebabCase } from 'type-fest'
+import { isDefined } from '../assert-types'
+import { deprecate } from '../deprecate'
 import { ThemeContentClassName, ThemeControlsClassName } from './types'
 
 /**
@@ -7,7 +9,6 @@ import { ThemeContentClassName, ThemeControlsClassName } from './types'
  * IMPORTANT: Make sure to use color scheme class in combination with theme class names.
  *
  * @param contentTheme - Theme name basis for content
- * @param state - State of the theme starting with a ":", e.g. `":hover"`, `":focus"`, `":active"`, `":focus-visible"`
  * @returns A content theme class name
  *
  * @see {@link controlsThemeClassName}
@@ -18,9 +19,7 @@ import { ThemeContentClassName, ThemeControlsClassName } from './types'
  * const colorScheme = colorSchemeClassName('system')
  * //  ^ 'scheme-system'
  * const contentThemeClassName = contentThemeClassName('default')
- * //  ^ 'theme-default-content:hover'
- * const dangerOnMouseOverTheme = controlsThemeClassName('danger', ':hover')
- * //  ^ 'theme-danger-controls:hover'
+ * //  ^ 'theme-default-content'
  *
  * return (
  * 	<div className={`${colorScheme} ${contentThemeClassName}`}>
@@ -36,6 +35,8 @@ export function contentThemeClassName<
 	theme: ContentTheme | null | undefined,
 	state?: State | null | undefined,
 ) {
+	deprecate('1.3.0', isDefined(state), '`state` argument', null)
+
 	return theme ? `theme-${theme}-content${state ?? ''}` as ThemeContentClassName<ContentTheme, State> : undefined
 }
 
@@ -45,7 +46,6 @@ export function contentThemeClassName<
  * IMPORTANT: Make sure to use color scheme class in combination with theme class names.
  *
  * @param theme - Theme name basis for controls
- * @param state - State of the theme starting with a ":", e.g. `":hover"`, `":focus"`, `":active"`, `":focus-visible"`
  * @returns A controls theme class name
  *
  * @see {@link contentThemeClassName}
@@ -56,9 +56,7 @@ export function contentThemeClassName<
  * const colorScheme = colorSchemeClassName('system')
  * //  ^ 'scheme-system'
  * const contentThemeClassName = contentThemeClassName('default')
- * //  ^ 'theme-default-content:hover'
- * const dangerOnMouseOverTheme = controlsThemeClassName('danger', ':hover')
- * //  ^ 'theme-danger-controls:hover'
+ * //  ^ 'theme-default-content'
  *
  * return (
  * 	<div className={`${colorScheme} ${contentThemeClassName}`}>
@@ -74,6 +72,8 @@ export function controlsThemeClassName<
 	theme: ControlsTheme | null | undefined,
 	state?: State | null | undefined,
 ) {
+	deprecate('1.3.0', isDefined(state), '`state` argument', null)
+
 	return theme ? `theme-${theme}-controls${state ?? ''}` as ThemeControlsClassName<ControlsTheme, State> : undefined
 }
 
@@ -83,7 +83,6 @@ export function controlsThemeClassName<
  * IMPORTANT: Make sure to use color scheme class in combination with theme class names.
  *
  * @param theme - Theme name basis for content and controls
- * @param state - State of the theme starting with a ":", e.g. `":hover"`, `":focus"`, `":active"`, `":focus-visible"`
  * @returns A tuple with a content theme class name and a controls theme class name
  *
  * @see {@link contentThemeClassName}
@@ -106,9 +105,11 @@ export function themeClassName<
 	Theme extends KebabCase<string> = KebabCase<string>,
 	State extends `:${KebabCase<string>}` | null | undefined = undefined,
 >(
-		theme: Theme | null | undefined,
-		state?: State | null | undefined,
+	theme: Theme | null | undefined,
+	state?: State | null | undefined,
 ) {
+	deprecate('1.3.0', isDefined(state), '`state` argument', null)
+
 	return [
 		contentThemeClassName(theme, state),
 		controlsThemeClassName(theme, state),