diff --git a/src/lib/providers/prime-preset/tokens/components/listbox.ts b/src/lib/providers/prime-preset/tokens/components/listbox.ts index 05489d17..acfc13f6 100644 --- a/src/lib/providers/prime-preset/tokens/components/listbox.ts +++ b/src/lib/providers/prime-preset/tokens/components/listbox.ts @@ -1,49 +1,43 @@ export const listboxCss = ({ dt }: { dt: (token: string) => string }): string => ` - /* ─── Listbox extend: публикуем кастомные переменные в :root ─── */ - :root { - --p-listbox-extend-ext-option-gap: ${dt('listbox.extend.extOption.gap')}; - --p-listbox-extend-ext-option-label-gap: ${dt('listbox.extend.extOption.label.gap')}; - --p-listbox-extend-ext-option-caption-color: ${dt('listbox.extend.extOption.caption.color')}; - --p-listbox-extend-ext-option-caption-striped-color: ${dt('listbox.extend.extOption.caption.stripedColor')}; - } +.p-listbox-option { + display: flex; + align-items: center; + gap: ${dt('listbox.extend.extOption.gap')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + line-height: ${dt('fonts.lineHeight.none')}; +} - /* ─── Расположение элемента списка ─── */ - .p-listbox-option { - display: flex; - align-items: center; - gap: var(--p-listbox-extend-ext-option-gap); - } +.p-listbox-option:has(.p-listbox-option-label-group) { + align-items: flex-start; +} - /* Многострочный контент (иконка + label-group): выравнивание по верху */ - .p-listbox-option:has(.p-listbox-option-label-group) { - align-items: flex-start; - } +.p-listbox-option:has(.p-listbox-option-check-icon) { + gap: unset; +} - .p-listbox-option:has(.p-listbox-option-check-icon) { - gap: unset; - } +.p-listbox-option-label-group { + display: flex; + flex-direction: column; + gap: ${dt('listbox.extend.extOption.label.gap')}; +} - /* ─── Группа: текст + подпись ─── */ - .p-listbox-option-label-group { - display: flex; - flex-direction: column; - gap: var(--p-listbox-extend-ext-option-label-gap); - } +.p-listbox-option-caption { + color: ${dt('listbox.extend.extOption.caption.color')}; + font-size: ${dt('fonts.fontSize.200')}; + font-family: ${dt('fonts.fontFamily.heading')}; +} - /* ─── Подпись элемента списка ─── */ - .p-listbox-option-caption { - color: var(--p-listbox-extend-ext-option-caption-color); - font-size: ${dt('fonts.fontSize.200')}; - font-family: ${dt('fonts.fontFamily.heading')}; - } +.p-listbox-striped li:nth-child(even of .p-listbox-option) .p-listbox-option-caption { + color: ${dt('listbox.extend.extOption.caption.stripedColor')}; +} - /* ─── Галочка выбора ─── */ - .p-listbox-check-icon { - margin-inline-start: ${dt('listbox.checkmark.gutterStart')}; - margin-inline-end: ${dt('listbox.checkmark.gutterEnd')}; - } +.p-listbox-check-icon { + margin-inline-start: ${dt('listbox.checkmark.gutterStart')}; + margin-inline-end: ${dt('listbox.checkmark.gutterEnd')}; +} - .p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected .p-listbox-option-check-icon { - color: ${dt('listbox.option.selectedColor')}; - } +.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected .p-listbox-option-check-icon { + color: ${dt('listbox.option.selectedColor')}; +} `;