hb-vue-theme/dist/index.d.ts

Custom PrimeVue 4 theme with 'hb' prefix using design tokens and PrimeFlex

// =============================================================================
// HB VUE THEME - TYPESCRIPT DEFINITIONS
// =============================================================================

export interface HBDesignTokens {
  '--hb-primary-50': string;
  '--hb-primary-100': string;
  '--hb-primary-200': string;
  '--hb-primary-300': string;
  '--hb-primary-400': string;
  '--hb-primary-500': string;
  '--hb-primary-600': string;
  '--hb-primary-700': string;
  '--hb-primary-800': string;
  '--hb-primary-900': string;
  '--hb-secondary-50': string;
  '--hb-secondary-100': string;
  '--hb-secondary-200': string;
  '--hb-secondary-300': string;
  '--hb-secondary-400': string;
  '--hb-secondary-500': string;
  '--hb-secondary-600': string;
  '--hb-secondary-700': string;
  '--hb-secondary-800': string;
  '--hb-secondary-900': string;
  '--hb-success-50': string;
  '--hb-success-100': string;
  '--hb-success-200': string;
  '--hb-success-300': string;
  '--hb-success-400': string;
  '--hb-success-500': string;
  '--hb-success-600': string;
  '--hb-success-700': string;
  '--hb-success-800': string;
  '--hb-success-900': string;
  '--hb-warning-50': string;
  '--hb-warning-100': string;
  '--hb-warning-200': string;
  '--hb-warning-300': string;
  '--hb-warning-400': string;
  '--hb-warning-500': string;
  '--hb-warning-600': string;
  '--hb-warning-700': string;
  '--hb-warning-800': string;
  '--hb-warning-900': string;
  '--hb-danger-50': string;
  '--hb-danger-100': string;
  '--hb-danger-200': string;
  '--hb-danger-300': string;
  '--hb-danger-400': string;
  '--hb-danger-500': string;
  '--hb-danger-600': string;
  '--hb-danger-700': string;
  '--hb-danger-800': string;
  '--hb-danger-900': string;
  '--hb-info-50': string;
  '--hb-info-100': string;
  '--hb-info-200': string;
  '--hb-info-300': string;
  '--hb-info-400': string;
  '--hb-info-500': string;
  '--hb-info-600': string;
  '--hb-info-700': string;
  '--hb-info-800': string;
  '--hb-info-900': string;
  '--hb-neutral-50': string;
  '--hb-neutral-100': string;
  '--hb-neutral-200': string;
  '--hb-neutral-300': string;
  '--hb-neutral-400': string;
  '--hb-neutral-500': string;
  '--hb-neutral-600': string;
  '--hb-neutral-700': string;
  '--hb-neutral-800': string;
  '--hb-neutral-900': string;
  '--hb-primary': string;
  '--hb-primary-light': string;
  '--hb-primary-dark': string;
  '--hb-primary-hover': string;
  '--hb-primary-active': string;
  '--hb-secondary': string;
  '--hb-secondary-light': string;
  '--hb-secondary-dark': string;
  '--hb-success': string;
  '--hb-warning': string;
  '--hb-danger': string;
  '--hb-info': string;
  '--hb-text-primary': string;
  '--hb-text-secondary': string;
  '--hb-text-muted': string;
  '--hb-text-disabled': string;
  '--hb-text-inverse': string;
  '--hb-bg-primary': string;
  '--hb-bg-secondary': string;
  '--hb-bg-tertiary': string;
  '--hb-bg-overlay': string;
  '--hb-border-light': string;
  '--hb-border-medium': string;
  '--hb-border-dark': string;
  '--hb-border-focus': string;
  '--hb-font-family-primary': string;
  '--hb-font-family-mono': string;
  '--hb-font-size-xs': string;
  '--hb-font-size-sm': string;
  '--hb-font-size-base': string;
  '--hb-font-size-lg': string;
  '--hb-font-size-xl': string;
  '--hb-font-size-2xl': string;
  '--hb-font-size-3xl': string;
  '--hb-font-size-4xl': string;
  '--hb-font-weight-light': string;
  '--hb-font-weight-normal': string;
  '--hb-font-weight-medium': string;
  '--hb-font-weight-semibold': string;
  '--hb-font-weight-bold': string;
  '--hb-line-height-tight': string;
  '--hb-line-height-normal': string;
  '--hb-line-height-relaxed': string;
  '--hb-spacing-0': string;
  '--hb-spacing-1': string;
  '--hb-spacing-2': string;
  '--hb-spacing-3': string;
  '--hb-spacing-4': string;
  '--hb-spacing-5': string;
  '--hb-spacing-6': string;
  '--hb-spacing-8': string;
  '--hb-spacing-10': string;
  '--hb-spacing-12': string;
  '--hb-spacing-16': string;
  '--hb-spacing-20': string;
  '--hb-spacing-24': string;
  '--hb-border-radius-none': string;
  '--hb-border-radius-sm': string;
  '--hb-border-radius-base': string;
  '--hb-border-radius-md': string;
  '--hb-border-radius-lg': string;
  '--hb-border-radius-xl': string;
  '--hb-border-radius-2xl': string;
  '--hb-border-radius-full': string;
  '--hb-shadow-sm': string;
  '--hb-shadow-base': string;
  '--hb-shadow-md': string;
  '--hb-shadow-lg': string;
  '--hb-shadow-xl': string;
  '--hb-transition-fast': string;
  '--hb-transition-base': string;
  '--hb-transition-slow': string;
  '--hb-z-index-dropdown': string;
  '--hb-z-index-sticky': string;
  '--hb-z-index-fixed': string;
  '--hb-z-index-modal-backdrop': string;
  '--hb-z-index-modal': string;
  '--hb-z-index-popover': string;
  '--hb-z-index-tooltip': string;
  '--hb-breakpoint-sm': string;
  '--hb-breakpoint-md': string;
  '--hb-breakpoint-lg': string;
  '--hb-breakpoint-xl': string;
  '--hb-breakpoint-2xl': string;
  '--primary-color': string;
  '--primary-color-text': string;
  '--surface-ground': string;
  '--surface-section': string;
  '--surface-card': string;
  '--surface-overlay': string;
  '--surface-border': string;
  '--surface-hover': string;
  '--focus-ring': string;
  '--maskbg': string;
  '--text-color': string;
  '--text-color-secondary': string;
  '--text-muted-color': string;
  '--border-radius': string;
  '--border-radius-sm': string;
  '--border-radius-lg': string;
  '--content-padding': string;
  '--inline-spacing': string;
  '--transition-duration': string;
  '--font-family': string;
  '--font-size': string;
  '--font-weight': string;
  '--font-weight-bold': string;
  '--shadow-1': string;
  '--shadow-2': string;
  '--shadow-3': string;
  '--shadow-4': string;
  '--shadow-5': string;
  '--button-padding': string;
  '--button-border-radius': string;
  '--button-font-weight': string;
  '--button-transition': string;
  '--button-primary-bg': string;
  '--button-primary-color': string;
  '--button-primary-hover-bg': string;
  '--button-secondary-bg': string;
  '--button-secondary-color': string;
  '--button-secondary-border': string;
  '--button-success-bg': string;
  '--button-warning-bg': string;
  '--button-danger-bg': string;
  '--button-info-bg': string;
  '--input-padding': string;
  '--input-border-radius': string;
  '--input-border-color': string;
  '--input-focus-border-color': string;
  '--input-focus-box-shadow': string;
  '--input-bg': string;
  '--input-color': string;
  '--input-placeholder-color': string;
  '--input-disabled-bg': string;
  '--input-disabled-color': string;
  '--select-padding': string;
  '--select-border-radius': string;
  '--select-bg': string;
  '--select-border-color': string;
  '--select-focus-border-color': string;
  '--select-hover-bg': string;
  '--select-item-padding': string;
  '--select-item-hover-bg': string;
  '--select-item-selected-bg': string;
  '--select-item-selected-color': string;
  '--select-trigger-bg': string;
  '--select-trigger-border': string;
  '--select-trigger-border-radius': string;
  '--select-trigger-padding': string;
  '--select-trigger-hover-bg': string;
  '--select-trigger-focus-border-color': string;
  '--select-trigger-focus-box-shadow': string;
  '--multiselect-padding': string;
  '--multiselect-border-radius': string;
  '--multiselect-token-bg': string;
  '--multiselect-token-color': string;
  '--multiselect-token-border-radius': string;
  '--multiselect-token-padding': string;
  '--calendar-bg': string;
  '--calendar-border-radius': string;
  '--calendar-header-bg': string;
  '--calendar-day-hover-bg': string;
  '--calendar-day-selected-bg': string;
  '--calendar-day-selected-color': string;
  '--calendar-day-today-bg': string;
  '--calendar-day-today-color': string;
  '--checkbox-size': string;
  '--checkbox-border-radius': string;
  '--checkbox-border-color': string;
  '--checkbox-checked-bg': string;
  '--checkbox-checked-border-color': string;
  '--checkbox-hover-border-color': string;
  '--checkbox-focus-border-color': string;
  '--radiobutton-size': string;
  '--radiobutton-border-color': string;
  '--radiobutton-checked-bg': string;
  '--radiobutton-checked-border-color': string;
  '--radiobutton-hover-border-color': string;
  '--radiobutton-focus-border-color': string;
  '--switch-width': string;
  '--switch-height': string;
  '--switch-border-radius': string;
  '--switch-bg': string;
  '--switch-checked-bg': string;
  '--switch-thumb-size': string;
  '--switch-thumb-bg': string;
  '--switch-transition': string;
  '--slider-track-bg': string;
  '--slider-track-height': string;
  '--slider-track-border-radius': string;
  '--slider-range-bg': string;
  '--slider-handle-size': string;
  '--slider-handle-bg': string;
  '--slider-handle-border': string;
  '--slider-handle-border-radius': string;
  '--datatable-bg': string;
  '--datatable-border-radius': string;
  '--datatable-header-bg': string;
  '--datatable-header-color': string;
  '--datatable-header-font-weight': string;
  '--datatable-row-hover-bg': string;
  '--datatable-row-selected-bg': string;
  '--datatable-border-color': string;
  '--datatable-pagination-bg': string;
  '--datatable-pagination-border-color': string;
  '--tree-bg': string;
  '--tree-border-radius': string;
  '--tree-node-padding': string;
  '--tree-node-hover-bg': string;
  '--tree-node-selected-bg': string;
  '--tree-node-selected-color': string;
  '--tree-toggle-icon-color': string;
  '--treetable-bg': string;
  '--treetable-border-radius': string;
  '--treetable-header-bg': string;
  '--treetable-row-hover-bg': string;
  '--treetable-row-selected-bg': string;
  '--treetable-border-color': string;
  '--panel-bg': string;
  '--panel-border-radius': string;
  '--panel-header-bg': string;
  '--panel-header-color': string;
  '--panel-header-font-weight': string;
  '--panel-header-padding': string;
  '--panel-content-padding': string;
  '--panel-border-color': string;
  '--panel-shadow': string;
  '--accordion-bg': string;
  '--accordion-border-radius': string;
  '--accordion-header-bg': string;
  '--accordion-header-color': string;
  '--accordion-header-hover-bg': string;
  '--accordion-header-padding': string;
  '--accordion-content-padding': string;
  '--accordion-border-color': string;
  '--tabview-bg': string;
  '--tabview-border-radius': string;
  '--tabview-nav-bg': string;
  '--tabview-nav-border-color': string;
  '--tabview-nav-item-padding': string;
  '--tabview-nav-item-color': string;
  '--tabview-nav-item-hover-bg': string;
  '--tabview-nav-item-active-bg': string;
  '--tabview-nav-item-active-color': string;
  '--tabview-content-padding': string;
  '--card-bg': string;
  '--card-border-radius': string;
  '--card-header-bg': string;
  '--card-header-color': string;
  '--card-header-padding': string;
  '--card-content-padding': string;
  '--card-footer-padding': string;
  '--card-border-color': string;
  '--card-shadow': string;
  '--dialog-bg': string;
  '--dialog-border-radius': string;
  '--dialog-header-bg': string;
  '--dialog-header-color': string;
  '--dialog-header-padding': string;
  '--dialog-content-padding': string;
  '--dialog-footer-padding': string;
  '--dialog-shadow': string;
  '--dialog-mask-bg': string;
  '--sidebar-bg': string;
  '--sidebar-width': string;
  '--sidebar-header-bg': string;
  '--sidebar-header-color': string;
  '--sidebar-header-padding': string;
  '--sidebar-content-padding': string;
  '--sidebar-shadow': string;
  '--sidebar-mask-bg': string;
  '--overlaypanel-bg': string;
  '--overlaypanel-border-radius': string;
  '--overlaypanel-padding': string;
  '--overlaypanel-shadow': string;
  '--overlaypanel-arrow-size': string;
  '--tooltip-bg': string;
  '--tooltip-color': string;
  '--tooltip-border-radius': string;
  '--tooltip-padding': string;
  '--tooltip-font-size': string;
  '--tooltip-shadow': string;
  '--fileupload-bg': string;
  '--fileupload-border-radius': string;
  '--fileupload-border-color': string;
  '--fileupload-border-style': string;
  '--fileupload-border-width': string;
  '--fileupload-padding': string;
  '--fileupload-hover-border-color': string;
  '--fileupload-hover-bg': string;
  '--menu-bg': string;
  '--menu-border-radius': string;
  '--menu-padding': string;
  '--menu-item-padding': string;
  '--menu-item-color': string;
  '--menu-item-hover-bg': string;
  '--menu-item-active-bg': string;
  '--menu-item-active-color': string;
  '--menu-shadow': string;
  '--menubar-bg': string;
  '--menubar-border-radius': string;
  '--menubar-padding': string;
  '--menubar-item-padding': string;
  '--menubar-item-color': string;
  '--menubar-item-hover-bg': string;
  '--menubar-item-active-bg': string;
  '--menubar-item-active-color': string;
  '--menubar-shadow': string;
  '--message-padding': string;
  '--message-border-radius': string;
  '--message-info-bg': string;
  '--message-info-color': string;
  '--message-info-border-color': string;
  '--message-success-bg': string;
  '--message-success-color': string;
  '--message-success-border-color': string;
  '--message-warning-bg': string;
  '--message-warning-color': string;
  '--message-warning-border-color': string;
  '--message-error-bg': string;
  '--message-error-color': string;
  '--message-error-border-color': string;
  '--toast-bg': string;
  '--toast-border-radius': string;
  '--toast-padding': string;
  '--toast-shadow': string;
  '--toast-info-bg': string;
  '--toast-info-color': string;
  '--toast-success-bg': string;
  '--toast-success-color': string;
  '--toast-warning-bg': string;
  '--toast-warning-color': string;
  '--toast-error-bg': string;
  '--toast-error-color': string;
  '--progressbar-bg': string;
  '--progressbar-border-radius': string;
  '--progressbar-height': string;
  '--progressbar-value-bg': string;
  '--progressbar-value-border-radius': string;
  '--rating-item-size': string;
  '--rating-item-color': string;
  '--rating-item-active-color': string;
  '--rating-item-hover-color': string;
  '--chip-bg': string;
  '--chip-color': string;
  '--chip-border-radius': string;
  '--chip-padding': string;
  '--chip-font-size': string;
  '--chip-remove-icon-color': string;
  '--chip-remove-icon-hover-color': string;
  '--avatar-size-sm': string;
  '--avatar-size-md': string;
  '--avatar-size-lg': string;
  '--avatar-size-xl': string;
  '--avatar-bg': string;
  '--avatar-color': string;
  '--avatar-border-radius': string;
  '--avatar-font-weight': string;
  '--divider-color': string;
  '--divider-width': string;
  '--divider-margin': string;
  '--divider-text-color': string;
  '--divider-text-padding': string;
  '--divider-text-font-size': string;
  '--scrolltop-bg': string;
  '--scrolltop-color': string;
  '--scrolltop-border-radius': string;
  '--scrolltop-size': string;
  '--scrolltop-shadow': string;
  '--scrolltop-hover-bg': string;
  '--skeleton-bg': string;
  '--skeleton-border-radius': string;
  '--skeleton-animation-duration': string;
  '--skeleton-animation-timing': string;
  '--tag-bg': string;
  '--tag-color': string;
  '--tag-border-radius': string;
  '--tag-padding': string;
  '--tag-font-size': string;
  '--tag-font-weight': string;
  '--terminal-bg': string;
  '--terminal-color': string;
  '--terminal-font-family': string;
  '--terminal-padding': string;
  '--terminal-border-radius': string;
  '--terminal-header-bg': string;
  '--terminal-header-color': string;
  '--terminal-header-padding': string;
}

export interface HBUtilities {
  'hb-p-1': string;
  'hb-p-2': string;
  'hb-p-3': string;
  'hb-p-4': string;
  'hb-p-5': string;
  'hb-p-6': string;
  'hb-m-1': string;
  'hb-m-2': string;
  'hb-m-3': string;
  'hb-m-4': string;
  'hb-m-5': string;
  'hb-m-6': string;
  'hb-text-primary': string;
  'hb-text-secondary': string;
  'hb-text-muted': string;
  'hb-bg-primary': string;
  'hb-bg-secondary': string;
  'hb-bg-tertiary': string;
  'hb-rounded-sm': string;
  'hb-rounded': string;
  'hb-rounded-md': string;
  'hb-rounded-lg': string;
  'hb-rounded-xl': string;
  'hb-rounded-full': string;
  'hb-shadow-sm': string;
  'hb-shadow': string;
  'hb-shadow-md': string;
  'hb-shadow-lg': string;
  'hb-shadow-xl': string;
}

export interface HBThemePreset {
  name: string;
  version: string;
  description: string;
  author: string;
  license: string;
  tokens: HBDesignTokens;
  utilities: HBUtilities;
  components: Record<string, Record<string, string>>;
}

export class HBThemeInstaller {
  constructor();
  install(options?: { force?: boolean; target?: HTMLElement }): boolean;
  uninstall(target?: HTMLElement): boolean;
  update(newTokens: Partial<HBDesignTokens>, target?: HTMLElement): boolean;
  getInfo(): {
    name: string;
    version: string;
    description: string;
    author: string;
    license: string;
    isInstalled: boolean;
    tokenCount: number;
    utilityCount: number;
  };
  export(): HBThemePreset;
}

export const HBThemePlugin: {
  install(app: any, options?: any): void;
};

export function installHBTheme(options?: {
  autoInstall?: boolean;
  force?: boolean;
  target?: HTMLElement;
  customTokens?: Partial<HBDesignTokens>;
}): HBThemeInstaller;

export function createCustomPreset(
  customTokens?: Partial<HBDesignTokens>,
  customUtilities?: Partial<HBUtilities>
): HBThemePreset;

export function exportAsCSS(preset?: HBThemePreset): string;

export const hbPreset: HBThemePreset;
export const hbDesignTokens: HBDesignTokens;
export const hbPrimeVueTokens: Record<string, string>;

// CSS Loader exports
export function loadThemeCSS(id?: string): void;
export function removeThemeCSS(id?: string): void;
export function injectCSS(css: string, id?: string): void;

export default HBThemeInstaller;