@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

package/src/css/{compile/compileTheme_v3.ts → compileTheme_v3.ts}

@@ -13,16 +13,23 @@ import {
   ThemeColorSchemeKey,
 } from '@sanity/ui/theme'
 
-import {Properties} from '../types'
-import {px, rem, toBoxShadow} from '../util'
-import {varNames} from '../varNames'
-import {compileRule} from './compileRule'
+import {_compileStyle} from './_compileStyle'
+import {Properties} from './types'
+import {px, rem, toBoxShadow} from './util'
+import {varNames} from './varNames'
 
 const THEME_COLOR_SCHEMES = ['dark', 'light'] as const
 const THEME_COLOR_VARIANTS = ['tinted', 'solid'] as const
 
+/** @internal */
 export function compileTheme_v3(theme: Theme_v3): string {
-  return compileRule(':root', compileThemeProperties(theme), {keyframes: {}, media: {}})
+  return _compileStyle({
+    layers: {
+      theme: {
+        ':root': compileThemeProperties(theme),
+      },
+    },
+  })
 }
 
 function compileThemeProperties(theme: Theme_v3): Properties {
@@ -30,6 +37,7 @@ function compileThemeProperties(theme: Theme_v3): Properties {
     ...buildAvatarThemeProperties(theme),
     ...buildButtonThemeProperties(theme),
     [varNames.card.shadow.outline]: px(theme.card.shadow.outline),
+    ...buildColorThemeProperties(theme),
     ...buildContainerThemeProperties(theme),
     ...buildFontCodeThemeProperties(theme),
     ...buildFontHeadingThemeProperties(theme),
@@ -39,7 +47,6 @@ function compileThemeProperties(theme: Theme_v3): Properties {
     ...buildRadiusThemeProperties(theme),
     ...buildShadowThemeProperties(theme),
     ...buildSpaceThemeProperties(theme),
-    ...buildColorThemeProperties(theme),
   }
 }
 
@@ -48,17 +55,17 @@ function buildAvatarThemeProperties(theme: Theme_v3): Properties {
     [varNames.avatar.focusRing.offset]: px(theme.avatar.focusRing.offset),
     [varNames.avatar.focusRing.width]: px(theme.avatar.focusRing.width),
 
-    [varNames.avatar.sizes[0].distance]: px(theme.avatar.sizes[0].distance),
-    [varNames.avatar.sizes[0].size]: px(theme.avatar.sizes[0].size),
+    [varNames.avatar.sizes[0].distance]: rem(theme.avatar.sizes[0].distance),
+    [varNames.avatar.sizes[0].size]: rem(theme.avatar.sizes[0].size),
 
-    [varNames.avatar.sizes[1].distance]: px(theme.avatar.sizes[1].distance),
-    [varNames.avatar.sizes[1].size]: px(theme.avatar.sizes[1].size),
+    [varNames.avatar.sizes[1].distance]: rem(theme.avatar.sizes[1].distance),
+    [varNames.avatar.sizes[1].size]: rem(theme.avatar.sizes[1].size),
 
-    [varNames.avatar.sizes[2].distance]: px(theme.avatar.sizes[2].distance),
-    [varNames.avatar.sizes[2].size]: px(theme.avatar.sizes[2].size),
+    [varNames.avatar.sizes[2].distance]: rem(theme.avatar.sizes[2].distance),
+    [varNames.avatar.sizes[2].size]: rem(theme.avatar.sizes[2].size),
 
-    [varNames.avatar.sizes[3].distance]: px(theme.avatar.sizes[3].distance),
-    [varNames.avatar.sizes[3].size]: px(theme.avatar.sizes[3].size),
+    [varNames.avatar.sizes[3].distance]: rem(theme.avatar.sizes[3].distance),
+    [varNames.avatar.sizes[3].size]: rem(theme.avatar.sizes[3].size),
   }
 }
 
@@ -72,110 +79,122 @@ function buildButtonThemeProperties(theme: Theme_v3): Properties {
 
 function buildContainerThemeProperties(theme: Theme_v3): Properties {
   return {
-    [varNames.container[0]]: px(theme.container[0]),
-    [varNames.container[1]]: px(theme.container[1]),
-    [varNames.container[2]]: px(theme.container[2]),
-    [varNames.container[3]]: px(theme.container[3]),
-    [varNames.container[4]]: px(theme.container[4]),
-    [varNames.container[5]]: px(theme.container[5]),
+    [varNames.container[0]]: rem(theme.container[0]),
+    [varNames.container[1]]: rem(theme.container[1]),
+    [varNames.container[2]]: rem(theme.container[2]),
+    [varNames.container[3]]: rem(theme.container[3]),
+    [varNames.container[4]]: rem(theme.container[4]),
+    [varNames.container[5]]: rem(theme.container[5]),
   }
 }
 
 function buildFontCodeThemeProperties(theme: Theme_v3): Properties {
+  const v = varNames.font.code
+  const t = theme.font.code
+
   const props: Properties = {
-    [varNames.font.code.family]: theme.font.code.family,
-    [varNames.font.code.featureSettings]: theme.font.code.featureSettings,
-    [varNames.font.code.weights.regular]: `${theme.font.code.weights.regular}`,
-    [varNames.font.code.weights.medium]: `${theme.font.code.weights.medium}`,
-    [varNames.font.code.weights.semibold]: `${theme.font.code.weights.semibold}`,
-    [varNames.font.code.weights.bold]: `${theme.font.code.weights.bold}`,
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings || 'normal',
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold,
   }
 
   for (const size of FONT_CODE_SIZE) {
-    const v = varNames.font.code.sizes[size]
-    const t = theme.font.code.sizes[size]
-
-    props[v.fontSize] = rem(t.fontSize)
-    props[v.lineHeight] = rem(t.lineHeight)
-    props[v.ascenderHeight] = px(t.ascenderHeight)
-    props[v.descenderHeight] = px(t.descenderHeight)
-    props[v.letterSpacing] = px(t.letterSpacing)
-    props[v.iconSize] = px(t.iconSize)
+    const _v = varNames.font.code.sizes[size]
+    const _t = theme.font.code.sizes[size]
+
+    props[_v.fontSize] = rem(_t.fontSize)
+    props[_v.lineHeight] = rem(_t.lineHeight)
+    props[_v.ascenderHeight] = rem(_t.ascenderHeight)
+    props[_v.descenderHeight] = rem(_t.descenderHeight)
+    props[_v.letterSpacing] = rem(_t.letterSpacing)
+    props[_v.iconSize] = rem(_t.iconSize)
   }
 
   return props
 }
 
 function buildFontHeadingThemeProperties(theme: Theme_v3): Properties {
+  const v = varNames.font.heading
+  const t = theme.font.heading
+
   const props: Properties = {
-    [varNames.font.heading.family]: theme.font.heading.family,
-    [varNames.font.heading.featureSettings]: theme.font.heading.featureSettings,
-    [varNames.font.heading.weights.regular]: `${theme.font.heading.weights.regular}`,
-    [varNames.font.heading.weights.medium]: `${theme.font.heading.weights.medium}`,
-    [varNames.font.heading.weights.semibold]: `${theme.font.heading.weights.semibold}`,
-    [varNames.font.heading.weights.bold]: `${theme.font.heading.weights.bold}`,
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold,
   }
 
   for (const size of FONT_HEADING_SIZE) {
-    const v = varNames.font.heading.sizes[size]
-    const t = theme.font.heading.sizes[size]
-
-    props[v.fontSize] = rem(t.fontSize)
-    props[v.lineHeight] = rem(t.lineHeight)
-    props[v.ascenderHeight] = px(t.ascenderHeight)
-    props[v.descenderHeight] = px(t.descenderHeight)
-    props[v.letterSpacing] = px(t.letterSpacing)
-    props[v.iconSize] = px(t.iconSize)
+    const _v = v.sizes[size]
+    const _t = t.sizes[size]
+
+    props[_v.fontSize] = rem(_t.fontSize)
+    props[_v.lineHeight] = rem(_t.lineHeight)
+    props[_v.ascenderHeight] = rem(_t.ascenderHeight)
+    props[_v.descenderHeight] = rem(_t.descenderHeight)
+    props[_v.letterSpacing] = rem(_t.letterSpacing)
+    props[_v.iconSize] = rem(_t.iconSize)
   }
 
   return props
 }
 
 function buildFontLabelThemeProperties(theme: Theme_v3): Properties {
+  const v = varNames.font.label
+  const t = theme.font.label
+
   const props: Properties = {
-    [varNames.font.label.family]: theme.font.label.family,
-    [varNames.font.label.featureSettings]: theme.font.label.featureSettings,
-    [varNames.font.label.weights.regular]: `${theme.font.label.weights.regular}`,
-    [varNames.font.label.weights.medium]: `${theme.font.label.weights.medium}`,
-    [varNames.font.label.weights.semibold]: `${theme.font.label.weights.semibold}`,
-    [varNames.font.label.weights.bold]: `${theme.font.label.weights.bold}`,
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold,
   }
 
   for (const size of FONT_LABEL_SIZE) {
-    const v = varNames.font.label.sizes[size]
-    const t = theme.font.label.sizes[size]
-
-    props[v.fontSize] = rem(t.fontSize)
-    props[v.lineHeight] = rem(t.lineHeight)
-    props[v.ascenderHeight] = px(t.ascenderHeight)
-    props[v.descenderHeight] = px(t.descenderHeight)
-    props[v.letterSpacing] = px(t.letterSpacing)
-    props[v.iconSize] = px(t.iconSize)
+    const _v = v.sizes[size]
+    const _t = t.sizes[size]
+
+    props[_v.fontSize] = rem(_t.fontSize)
+    props[_v.lineHeight] = rem(_t.lineHeight)
+    props[_v.ascenderHeight] = rem(_t.ascenderHeight)
+    props[_v.descenderHeight] = rem(_t.descenderHeight)
+    props[_v.letterSpacing] = rem(_t.letterSpacing)
+    props[_v.iconSize] = rem(_t.iconSize)
   }
 
   return props
 }
 
 function buildFontTextThemeProperties(theme: Theme_v3): Properties {
+  const v = varNames.font.text
+  const t = theme.font.text
+
   const props: Properties = {
-    [varNames.font.text.family]: theme.font.text.family,
-    [varNames.font.text.featureSettings]: theme.font.text.featureSettings,
-    [varNames.font.text.weights.regular]: `${theme.font.text.weights.regular}`,
-    [varNames.font.text.weights.medium]: `${theme.font.text.weights.medium}`,
-    [varNames.font.text.weights.semibold]: `${theme.font.text.weights.semibold}`,
-    [varNames.font.text.weights.bold]: `${theme.font.text.weights.bold}`,
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold,
   }
 
   for (const size of FONT_TEXT_SIZE) {
-    const v = varNames.font.text.sizes[size]
-    const t = theme.font.text.sizes[size]
-
-    props[v.fontSize] = rem(t.fontSize)
-    props[v.lineHeight] = rem(t.lineHeight)
-    props[v.ascenderHeight] = px(t.ascenderHeight)
-    props[v.descenderHeight] = px(t.descenderHeight)
-    props[v.letterSpacing] = px(t.letterSpacing)
-    props[v.iconSize] = px(t.iconSize)
+    const _v = v.sizes[size]
+    const _t = t.sizes[size]
+
+    props[_v.fontSize] = rem(_t.fontSize)
+    props[_v.lineHeight] = rem(_t.lineHeight)
+    props[_v.ascenderHeight] = rem(_t.ascenderHeight)
+    props[_v.descenderHeight] = rem(_t.descenderHeight)
+    props[_v.letterSpacing] = rem(_t.letterSpacing)
+    props[_v.iconSize] = rem(_t.iconSize)
   }
 
   return props
@@ -186,20 +205,20 @@ function buildInputThemeProperties(theme: Theme_v3): Properties {
     [varNames.input.border.width]: px(theme.input.border.width),
     [varNames.input.checkbox.focusRing.offset]: px(theme.input.checkbox.focusRing.offset),
     [varNames.input.checkbox.focusRing.width]: px(theme.input.checkbox.focusRing.width),
-    [varNames.input.checkbox.size]: px(theme.input.checkbox.size),
+    [varNames.input.checkbox.size]: rem(theme.input.checkbox.size),
     [varNames.input.radio.focusRing.offset]: px(theme.input.radio.focusRing.offset),
     [varNames.input.radio.focusRing.width]: px(theme.input.radio.focusRing.width),
-    [varNames.input.radio.markSize]: px(theme.input.radio.markSize),
-    [varNames.input.radio.size]: px(theme.input.radio.size),
+    [varNames.input.radio.markSize]: rem(theme.input.radio.markSize),
+    [varNames.input.radio.size]: rem(theme.input.radio.size),
     [varNames.input.select.focusRing.offset]: px(theme.input.select.focusRing.offset),
     [varNames.input.select.focusRing.width]: px(theme.input.select.focusRing.width),
     [varNames.input.switch.focusRing.offset]: px(theme.input.switch.focusRing.offset),
     [varNames.input.switch.focusRing.width]: px(theme.input.switch.focusRing.width),
-    [varNames.input.switch.height]: px(theme.input.switch.height),
-    [varNames.input.switch.padding]: px(theme.input.switch.padding),
+    [varNames.input.switch.height]: rem(theme.input.switch.height),
+    [varNames.input.switch.padding]: rem(theme.input.switch.padding),
     [varNames.input.switch.transitionDurationMs]: `${theme.input.switch.transitionDurationMs}ms`,
     [varNames.input.switch.transitionTimingFunction]: theme.input.switch.transitionTimingFunction,
-    [varNames.input.switch.width]: px(theme.input.switch.width),
+    [varNames.input.switch.width]: rem(theme.input.switch.width),
     [varNames.input.text.focusRing.offset]: px(theme.input.text.focusRing.offset),
     [varNames.input.text.focusRing.width]: px(theme.input.text.focusRing.width),
   }
@@ -207,13 +226,13 @@ function buildInputThemeProperties(theme: Theme_v3): Properties {
 
 function buildRadiusThemeProperties(theme: Theme_v3): Properties {
   return {
-    [varNames.radius[0]]: rem(theme.radius[0]),
-    [varNames.radius[1]]: rem(theme.radius[1]),
-    [varNames.radius[2]]: rem(theme.radius[2]),
-    [varNames.radius[3]]: rem(theme.radius[3]),
-    [varNames.radius[4]]: rem(theme.radius[4]),
-    [varNames.radius[5]]: rem(theme.radius[5]),
-    [varNames.radius[6]]: rem(theme.radius[6]),
+    [varNames.radius[0]]: px(theme.radius[0]),
+    [varNames.radius[1]]: px(theme.radius[1]),
+    [varNames.radius[2]]: px(theme.radius[2]),
+    [varNames.radius[3]]: px(theme.radius[3]),
+    [varNames.radius[4]]: px(theme.radius[4]),
+    [varNames.radius[5]]: px(theme.radius[5]),
+    [varNames.radius[6]]: px(theme.radius[6]),
   }
 }
 
@@ -247,17 +266,17 @@ function buildShadowThemeProperties(theme: Theme_v3): Properties {
 
 function buildSpaceThemeProperties(theme: Theme_v3): Properties {
   return {
-    [varNames.space[0]]: rem(theme.space[0]),
-    [varNames.space[0.5]]: rem(theme.space[1] / 2),
-    [varNames.space[1]]: rem(theme.space[1]),
-    [varNames.space[2]]: rem(theme.space[2]),
-    [varNames.space[3]]: rem(theme.space[3]),
-    [varNames.space[4]]: rem(theme.space[4]),
-    [varNames.space[5]]: rem(theme.space[5]),
-    [varNames.space[6]]: rem(theme.space[6]),
-    [varNames.space[7]]: rem(theme.space[7]),
-    [varNames.space[8]]: rem(theme.space[8]),
-    [varNames.space[9]]: rem(theme.space[9]),
+    [varNames.space[0]]: px(theme.space[0]),
+    [varNames.space[0.5]]: px(theme.space[1] / 2),
+    [varNames.space[1]]: px(theme.space[1]),
+    [varNames.space[2]]: px(theme.space[2]),
+    [varNames.space[3]]: px(theme.space[3]),
+    [varNames.space[4]]: px(theme.space[4]),
+    [varNames.space[5]]: px(theme.space[5]),
+    [varNames.space[6]]: px(theme.space[6]),
+    [varNames.space[7]]: px(theme.space[7]),
+    [varNames.space[8]]: px(theme.space[8]),
+    [varNames.space[9]]: px(theme.space[9]),
   }
 }
 

package/src/css/components/breadcrumbs/breadcrumbs.ts

@@ -1,5 +1,6 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function breadcrumbs(): string | undefined {
   return _comp('breadcrumbs')
 }

package/src/css/components/dialog/dialog.ts

@@ -1,30 +1,37 @@
 import {_comp} from '../../_comp'
 import {inset} from '../../aspects'
 
+/** @public */
 export function dialog(): string | undefined {
   return _comp('dialog', inset({inset: 0}))
 }
 
+/** @public */
 export function dialogContainer(): string | undefined {
   return _comp('dialog-container')
 }
 
+/** @public */
 export function dialogCardRoot(): string | undefined {
   return _comp('dialog-card-root')
 }
 
+/** @public */
 export function dialogLayout(): string | undefined {
   return _comp('dialog-layout')
 }
 
+/** @public */
 export function dialogHeader(): string | undefined {
   return _comp('dialog-header')
 }
 
+/** @public */
 export function dialogContent(): string | undefined {
   return _comp('dialog-content')
 }
 
+/** @public */
 export function dialogFooter(): string | undefined {
   return _comp('dialog-footer')
 }

package/src/css/components/menu/menu.ts

@@ -1,9 +1,11 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function menu(): string | undefined {
   return _comp('menu')
 }
 
+/** @public */
 export function menuDivider(): string | undefined {
   return _comp('menu-divider')
 }

package/src/css/components/skeleton/skeleton.ts

@@ -14,18 +14,22 @@ export function skeleton(props: SkeletonStyleProps): string | undefined {
   return _comp('skeleton', radius(props))
 }
 
+/** @beta */
 export function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined {
   return _comp('font-skeleton', _resp('code-skeleton', props.size))
 }
 
+/** @beta */
 export function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined {
   return _comp('font-skeleton', _resp('heading-skeleton', props.size))
 }
 
+/** @beta */
 export function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined {
   return _comp('font-skeleton', _resp('label-skeleton', props.size))
 }
 
+/** @beta */
 export function textSkeleton(props: TextSkeletonStyleProps): string | undefined {
   return _comp('font-skeleton', _resp('text-skeleton', props.size))
 }

package/src/css/components/skeleton/types.ts

@@ -9,18 +9,22 @@ export interface SkeletonStyleProps extends RadiusStyleProps {
   // visible?: boolean
 }
 
+/** @beta */
 export interface CodeSkeletonStyleProps {
   size?: ResponsiveProp<FontCodeSize>
 }
 
+/** @beta */
 export interface HeadingSkeletonStyleProps {
   size?: ResponsiveProp<FontHeadingSize>
 }
 
+/** @beta */
 export interface LabelSkeletonStyleProps {
   size?: ResponsiveProp<FontLabelSize>
 }
 
+/** @beta */
 export interface TextSkeletonStyleProps {
   size?: ResponsiveProp<FontTextSize>
 }

package/src/css/components/toast/toast.ts

@@ -1,21 +1,26 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function toastLayer() {
   return _comp('toast-layer')
 }
 
+/** @public */
 export function toast() {
   return _comp('toast')
 }
 
+/** @public */
 export function toastLoadingBar() {
   return _comp('toast-loading-bar')
 }
 
+/** @public */
 export function toastLoadingBarProgress() {
   return _comp('toast-loading-bar-progress')
 }
 
+/** @public */
 export function toastLoadingBarMask() {
   return _comp('toast-loading-bar-mask')
 }

package/src/css/components/tree/tree.ts

@@ -1,5 +1,6 @@
 import {_comp} from '../../_comp'
 
+/** @beta */
 export function treeItem(): string | undefined {
   return _comp('tree-item')
 }

package/src/css/composeClassNames.ts

@@ -1,4 +1,5 @@
-export function getClassNames(...classNames: Array<string | false | undefined>): string[] {
+/** @internal */
+export function _getClassNames(...classNames: Array<string | false | undefined>): string[] {
   return classNames
     .map((n) => typeof n === 'string' && n.trim())
     .filter(Boolean)
@@ -6,10 +7,11 @@ export function getClassNames(...classNames: Array<string | false | undefined>):
     .split(' ')
 }
 
+/** @public */
 export function composeClassNames(
   ...classNames: Array<string | false | undefined>
 ): string | undefined {
-  return unique(getClassNames(...classNames)).join(' ') || undefined
+  return unique(_getClassNames(...classNames)).join(' ') || undefined
 }
 
 function unique<T>(array: T[]): T[] {

package/src/css/constants.ts

@@ -1,3 +1,4 @@
+/** @public */
 export const BREAKPOINTS = {
   1: 360,
   2: 600,
@@ -7,4 +8,5 @@ export const BREAKPOINTS = {
   6: 2400,
 }
 
+/** @public */
 export const PREFIX = 's-'

package/src/css/index.ts

@@ -1,7 +1,7 @@
 export * from './aspects'
-export * from './compile/compilePalette'
-export * from './compile/compileSystem'
-export * from './compile/compileTheme'
+export * from './compilePalette'
+export * from './compileSystem'
+export * from './compileTheme'
 export * from './components/breadcrumbs'
 export * from './components/dialog'
 export * from './components/menu'

package/src/css/primitives/_arrow/_arrow.ts

@@ -5,14 +5,17 @@ export function _arrow(): string | undefined {
   return _comp('arrow')
 }
 
+/** @internal */
 export function _arrowStroke(): string | undefined {
   return _comp('arrow-stroke')
 }
 
+/** @internal */
 export function _arrowStrokeMask(): string | undefined {
   return _comp('arrow-stroke-mask')
 }
 
+/** @internal */
 export function _arrowShape(): string | undefined {
   return _comp('arrow-shape')
 }

package/src/css/primitives/_input/input.ts

@@ -16,10 +16,12 @@ export function _input(props: InputStyleProps): string | undefined {
   )
 }
 
+/** @internal */
 export function _inputElement(): string | undefined {
   return _comp('input-element')
 }
 
+/** @internal */
 export function _inputPresentation(): string | undefined {
   return _comp('input-presentation')
 }

package/src/css/primitives/_selectable/_selectable.style.ts

@@ -3,7 +3,6 @@ import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {Properties, Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
-import {toneMap} from './_contants'
 
 const primitive: StyleRules = {
   '.selectable': {
@@ -89,7 +88,7 @@ function buildSelectableTones(): Record<string, Properties> {
     const target = varNames.color
     const source = vars.color
 
-    rules[`&.${toneMap[tone]}`] = {
+    rules[`&.${tone}`] = {
       [target.tinted.bg[0]]: source.tinted[tone].bg[0],
       [target.tinted.bg[1]]: source.tinted[tone].bg[1],
       [target.tinted.bg[2]]: source.tinted[tone].bg[2],

package/src/css/primitives/_selectable/selectable.ts

@@ -1,9 +1,8 @@
 import {_comp} from '../../_comp'
 import {radius} from '../../aspects'
-import {toneMap} from './_contants'
 import {SelectableStyleProps} from './types'
 
 /** @internal */
 export function _selectable(props: SelectableStyleProps): string | undefined {
-  return _comp('selectable', toneMap[props.tone ?? 'default'], radius(props))
+  return _comp('selectable', props.tone ?? 'default', radius(props))
 }

package/src/css/primitives/avatar/avatar.style.ts

@@ -7,6 +7,8 @@ import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.avatar': {
+    [varNames.color.fg]: vars.color.avatar.fg,
+
     'backgroundColor': vars.color.avatar.bg,
     'position': 'relative',
     'boxSizing': 'border-box',
@@ -19,12 +21,7 @@ const primitive: StyleRules = {
     'borderRadius': vars.avatar.size,
 
     '@nest': {
-      '&[data-status="inactive"]': {
-        opacity: 0.5,
-      },
-
-      // &:is(button)
-      '&:is(button)': {
+      'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         margin: 0,
@@ -35,12 +32,12 @@ const primitive: StyleRules = {
         outline: 'none',
       },
 
-      '&:is(button):focus': {
+      'button&:focus': {
         outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
         outlineOffset: 'var(--avatar-focus-ring-offset)',
       },
 
-      '&:is(button):focus:not(:focus-visible)': {
+      'button&:focus:not(:focus-visible)': {
         boxShadow: 'none',
       },
 

package/src/css/primitives/avatar/avatar.ts

@@ -2,26 +2,32 @@ import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
 import {AvatarStyleProps} from './types'
 
+/** @public */
 export function avatar(props: AvatarStyleProps): string | undefined {
   return _comp('avatar', props.color || 'gray', _resp('avatar', props.size))
 }
 
+/** @public */
 export function avatarArrow(): string | undefined {
   return _comp('avatar-arrow')
 }
 
+/** @public */
 export function avatarInitials(): string | undefined {
   return _comp('avatar-initials')
 }
 
+/** @public */
 export function avatarImage(): string | undefined {
   return _comp('avatar-image')
 }
 
+/** @public */
 export function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined {
   return _comp('avatar-counter', _resp('avatar', props.size))
 }
 
+/** @public */
 export function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined {
   return _comp('avatar-stack', _resp('avatar', props.size))
 }