Чакра3 Пользовательский интерфейс выберите рецепт слота - изменение цвета индикатора при изменении состояния триггера (с ⇐ Html

[Anonymous]

Я пытаюсь составить свой собственный рецепт слота пользовательского интерфейса Chakra 3, основанный на рецепте эталонного слота, предоставленного Phakra. /> Я сосредотачиваюсь на первичном варианте, смотрю, индикатор не может вывести родительское состояние триггера. Есть идеи об этом? Спасибо.

Код: Выделить всё

  variants: {
variant: {
primary: {
trigger: {
_hover: {
bg: '{colors.button.surface.secondary.hover}',
borderColor: '{colors.button.border.secondary.hover}',
color: '{colors.button.text.secondary.hover}',

},
_focus: {
ring: '4px',
ringColor: '{colors.gray.300}',
bg: '{colors.button.surface.secondary.focused}',
color: '{colors.button.text.secondary.focused}',
borderColor: '{colors.button.border.secondary.focused}',
},
_disabled: {
bg: '{colors.button.surface.secondary.disabled}',
borderColor: '{colors.button.border.secondary.disabled}',
color: '{colors.button.text.secondary.disabled}',
},
_expanded: {
bg: '{colors.button.surface.secondary.hover}',
color: '{colors.button.text.secondary.hover}',
borderColor: '{colors.button.border.secondary.hover}',
},
'&:not([data-placeholder-shown])': {
borderColor: '{colors.green.800}',
color: '{colors.gray.800}',
bg: '{colors.green.50}',
},
'&:is(:placeholder-shown, [data-placeholder-shown])': {
color: '{colors.gray.600}',
},
bg: '{colors.button.surface.secondary.default}',
borderWidth: '1px',
borderWeight: '1',
borderColor: '{colors.button.border.secondary.default}',
},
indicator: {
color: '{colors.yellow.800}',
'[data-hover] &': {
color: '{colors.green.600}'
},
},
},
secondary: {
trigger: {
_hover: {
bg: '{colors.button.surface.tertiary.hover}',
borderColor: '{colors.button.border.tertiary.hover}',
color: '{colors.button.text.tertiary.hover}',
},
_focus: {
ring: '4px',
ringColor: '{colors.gray.300}',
dropShadow: '0 0 0 4px {colors.black}',
bg: '{colors.button.surface.tertiary.focused}',
borderColor: '{colors.button.border.tertiary.focused}',
color: '{colors.button.text.tertiary.focused}',
},
_disabled: {
bg: '{colors.button.surface.secondary.disabled}',
borderColor: '{colors.button.border.tertiary.disabled}',
color: '{colors.button.text.tertiary.disabled}',
},
_expanded: {
bg: '{colors.button.surface.tertiary.hover}',
borderColor: '{colors.button.border.tertiary.hover}',
color: '{colors.button.text.tertiary.hover}',
},
'&:not([data-placeholder-shown])': {
borderColor: '{colors.green.800}',
color: '{colors.green.800}',
bg: '{colors.green.50}',
},
'&:is(:placeholder-shown, [data-placeholder-shown])': {
color: '{colors.gray.600}',
},
bg: '{colors.button.surface.tertiary.default}',
borderWidth: '1px',
borderWeight: '1',
borderColor: '{colors.button.border.tertiary.default}',
},
},
},
},

Подробнее здесь: https://stackoverflow.com/questions/796 ... ate-change