diff --git a/src/lib/providers/prime-preset/tokens/components/drawer.ts b/src/lib/providers/prime-preset/tokens/components/drawer.ts index 2ddbe8c7..ab86947d 100644 --- a/src/lib/providers/prime-preset/tokens/components/drawer.ts +++ b/src/lib/providers/prime-preset/tokens/components/drawer.ts @@ -29,13 +29,30 @@ export const drawerCss = ({ dt }: { dt: (token: string) => string }): string => padding: 0 ${dt('dimension.space.600')} ${dt('dimension.space.600')} ${dt('dimension.space.600')}; } +/* Ширина панели по размерам: drawer.extend.overlayWidth — ступени семантической шкалы + dimension.size (макет просит 280 / 350 / 420 / 630, ближайшие ступени дают 272 / 336 / 400 / 630) */ .p-drawer.p-component.p-drawer-left, .p-drawer.p-component.p-drawer-right { margin: ${dt('drawer.extend.margin')}; - width: ${dt('drawer.extend.width')}; + width: ${dt('drawer.extend.overlayWidth.base')}; height: calc(100% - ${dt('drawer.extend.margin')} * 2); } +.p-drawer.p-component.p-drawer-left.p-drawer-sm, +.p-drawer.p-component.p-drawer-right.p-drawer-sm { + width: ${dt('drawer.extend.overlayWidth.sm')}; +} + +.p-drawer.p-component.p-drawer-left.p-drawer-lg, +.p-drawer.p-component.p-drawer-right.p-drawer-lg { + width: ${dt('drawer.extend.overlayWidth.lg')}; +} + +.p-drawer.p-component.p-drawer-left.p-drawer-xlg, +.p-drawer.p-component.p-drawer-right.p-drawer-xlg { + width: ${dt('drawer.extend.overlayWidth.xlg')}; +} + .p-drawer.p-component.p-drawer-top, .p-drawer.p-component.p-drawer-bottom { margin: ${dt('drawer.extend.margin')}; diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index 363335f8..3be83fa6 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -1054,6 +1054,7 @@ "1800": "{sizing.152x}", "1900": "{sizing.168x}", "2000": "{sizing.200x}", + "2200": "{sizing.315x}", "max": "{sizing.max}" }, "borderRadius": { @@ -2942,6 +2943,12 @@ "borderRadius": "{dimension.borderRadius.200}", "borderWidth": "{dimension.borderWidth.100}", "width": "{dimension.size.2000}", + "overlayWidth": { + "sm": "{dimension.size.1700}", + "base": "{dimension.size.1900}", + "lg": "{dimension.size.2000}", + "xlg": "{dimension.size.2200}" + }, "extHeader": { "gap": "{dimension.space.200}", "borderColor": "{color.border.neutral.strong}"