стилизация компонента button

.gitignore

@@ -52,6 +52,6 @@ api-generator/typedoc.json
 # файлы в этим папках компилятся и должны создаваться при сборке
 src/assets/components/themes
 
-./storybook-static
-./debug-storybook.log
-./documentation.json
+/storybook-static
+/debug-storybook.log
+/documentation.json

angular.json

@@ -117,5 +117,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/lib/components/button/button.component.ts

@@ -0,0 +1,78 @@
+import { Component, Input } from '@angular/core';
+import { Button, ButtonSeverity as PrimeButtonSeverity } from 'primeng/button';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text' | 'link';
+export type ButtonSeverity = 'success' | 'warning' | 'danger' | 'info' | null;
+export type ButtonSize = 'small' | 'base' | 'large' | 'xlarge';
+export type ButtonIconPos = 'prefix' | 'postfix' | null;
+export type BadgeSeverity = 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null;
+type PrimeBadgeSeverity = Extract<Button['badgeSeverity'], string | null>;
+
+@Component({
+  selector: 'button',
+  standalone: true,
+  imports: [Button],
+  template: `
+    <p-button
+      [label]="iconOnly ? '' : label"
+      [disabled]="disabled"
+      [loading]="loading"
+      [size]="primeSize"
+      [styleClass]="size === 'xlarge' ? 'p-button-xlg' : ''"
+      [rounded]="rounded"
+      [outlined]="variant === 'outlined'"
+      [text]="variant === 'text' || text"
+      [link]="variant === 'link'"
+      [icon]="icon"
+      [iconPos]="primeIconPos"
+      [severity]="primeSeverity"
+      [badge]="showBadge ? badge || ' ' : undefined"
+      [badgeSeverity]="primeBadgeSeverity"
+      [fluid]="fluid"
+      [ariaLabel]="ariaLabel"
+      [autofocus]="autofocus"
+      [tabindex]="tabindex"
+    ></p-button>
+  `
+})
+export class ButtonComponent {
+  @Input() label = 'Button';
+  @Input() variant: ButtonVariant = 'primary';
+  @Input() severity: ButtonSeverity = null;
+  @Input() size: ButtonSize = 'base';
+  @Input() rounded = false;
+  @Input() iconPos: ButtonIconPos = null;
+  @Input() iconOnly = false;
+  @Input() icon = '';
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() badge = '';
+  @Input() badgeSeverity: BadgeSeverity = null;
+  @Input() showBadge = false;
+  @Input() fluid = false;
+  @Input() ariaLabel: string | undefined = undefined;
+  @Input() autofocus = false;
+  @Input() tabindex: number | undefined = undefined;
+  @Input() text = false;
+
+  get primeSize(): 'small' | 'large' | undefined {
+    if (this.size === 'small') return 'small';
+    if (this.size === 'large') return 'large';
+    return undefined;
+  }
+
+  get primeIconPos(): 'left' | 'right' {
+    return this.iconPos === 'postfix' ? 'right' : 'left';
+  }
+
+  get primeSeverity(): PrimeButtonSeverity | null {
+    if (this.variant === 'secondary') return 'secondary';
+    if (this.severity === 'warning') return 'warn';
+    return this.severity;
+  }
+
+  get primeBadgeSeverity(): PrimeBadgeSeverity {
+    if (this.badgeSeverity === 'warning') return 'warn';
+    return this.badgeSeverity;
+  }
+}

src/prime-preset/map-tokens.ts

@@ -1,45 +1,15 @@
 import { Preset } from '@primeuix/themes/types';
+import type { ComponentsDesignTokens } from '@primeuix/themes/types';
 import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
 
-import primitive from './tokens/primitive-default.json';
-import semantic from './tokens/semantic-default.json';
-import components from './tokens/components-default.json';
-import themeLight from './tokens/theme-light.json';
-import themeDark from './tokens/theme-dark.json';
-import sizingBase from './tokens/sizing-base.json';
-import sizingSm from './tokens/sizing-sm.json';
-import sizingLg from './tokens/sizing-lg.json';
-import sizingXlg from './tokens/sizing-xlg.json';
-
-import button from './tokens/components/button.json';
+import primitive from './tokens/primitive';
+import semantic from './tokens/semantic';
+import components from './tokens/components';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
-  primitive,
-  semantic,
-  components: { ...components, ...button }
+  primitive: primitive as AuraBaseDesignTokens['primitive'],
+  semantic: semantic as unknown as AuraBaseDesignTokens['semantic'],
+  components: components as ComponentsDesignTokens
 };
 
-if (presetTokens?.semantic) {
-  presetTokens.semantic.colorScheme = {
-    light: themeLight,
-    dark: themeDark
-  };
-}
-
-presetTokens.semantic = { ...presetTokens.semantic, ...sizingBase };
-
-const semanticLink: Record<string, any> = presetTokens.semantic;
-
-function applySizing(semantic: Record<string, any>, sizing: Record<string, any>, sizeKey: 'sm' | 'lg' | 'xlg') {
-  Object.keys(sizing).forEach((key) => {
-    if (semantic[key]) {
-      semantic[key][sizeKey] = sizing[key]?.root ?? sizing[key];
-    }
-  });
-}
-
-applySizing(semanticLink, sizingSm, 'sm');
-applySizing(semanticLink, sizingLg, 'lg');
-applySizing(semanticLink, sizingXlg, 'xlg');
-
 export default presetTokens;