diff --git a/src/lib/providers/prime-preset/tokens/components/select.ts b/src/lib/providers/prime-preset/tokens/components/select.ts index 6670fc3b..8d1ede74 100644 --- a/src/lib/providers/prime-preset/tokens/components/select.ts +++ b/src/lib/providers/prime-preset/tokens/components/select.ts @@ -1,5 +1,4 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => ` - /* ─── Базовые стили ─── */ .p-select.p-component { width: 100%; border-width: ${dt('select.extend.borderWidth')}; @@ -11,18 +10,24 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => font-family: ${dt('fonts.fontFamily.base')}; } - /* ─── Focus ─── */ + .p-select-option { + background: ${dt('select.extend.extOption.background')}; + gap: ${dt('select.extend.extOption.gap')}; + } + + .p-select-option-group { + gap: ${dt('select.extend.extOptionGroup.gap')}; + } + .p-select.p-component:not(.p-disabled).p-focus { box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('select.root.focusRing.color')}; } - /* ─── Invalid + Focus ─── */ .p-select.p-component.p-invalid.p-focus { border-color: ${dt('select.root.invalidBorderColor')}; box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('color.bg.status.danger.weak.active')}; } - /* ─── Readonly ─── */ .p-select.p-component[readonly] { background: ${dt('select.extend.readonlyBackground')}; border-color: ${dt('select.root.borderColor')}; @@ -35,14 +40,12 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => color: ${dt('select.root.placeholderColor')}; } - /* ─── XLarge ─── */ .p-select.p-component.p-select-xlg .p-select-label { font-size: ${dt('inputtext.extend.extXlg.fontSize')}; padding-block: ${dt('inputtext.extend.extXlg.paddingY')}; padding-inline: ${dt('inputtext.extend.extXlg.paddingX')}; } - /* ─── FloatLabel ─── */ .p-floatlabel:has(.p-select.p-component) label { font-family: ${dt('fonts.fontFamily.base')}; font-weight: ${dt('fonts.fontWeight.regular')}; @@ -60,7 +63,6 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => padding-block-end: ${dt('dimension.space.300')}; } - /* ─── Checkmark: выбранный элемент ─── */ .p-select-option:has(.p-select-option-check-icon) { background: ${dt('select.option.selectedBackground')}; color: ${dt('select.option.selectedColor')}; @@ -71,7 +73,6 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => color: ${dt('select.option.selectedFocusColor')}; } - /* Скрываем PrimeNG SVG, заменяем на tabler-иконку */ .p-select-option .p-select-option-check-icon, .p-select-option .p-select-option-blank-icon { display: none; @@ -80,23 +81,22 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => .p-select-option:has(.p-select-option-check-icon)::before, .p-select-option:has(.p-select-option-blank-icon)::before { font-family: 'tabler-icons'; - content: var(--p-select-checkmark-content, "\\ea5e"); + content: "\\ea5e"; font-size: ${dt('select.extend.iconSize')}; - color: var(--p-select-option-selected-color); + color: ${dt('select.option.selectedColor')}; flex-shrink: 0; margin-inline-start: ${dt('select.checkmark.gutterStart')}; margin-inline-end: ${dt('select.checkmark.gutterEnd')}; } .p-select-option:has(.p-select-option-check-icon).p-focus::before { - color: var(--p-select-option-focus-color); + color: ${dt('select.option.focusColor')}; } .p-select-option:has(.p-select-option-blank-icon)::before { visibility: hidden; } - /* ─── Иконки ─── */ .p-select.p-component :is(.p-select-dropdown .p-select-dropdown-icon, .p-select-clear-icon, .p-select-loading-icon) { font-size: ${dt('select.extend.iconSize')}; width: ${dt('select.extend.iconSize')};