PayAdvantage UI Components

Appearance

Design Tokens ​

Not Currently Available

Design tokens are not yet implemented in PayAdvantage UI Components. This documentation serves as a reference for future implementation when design tokens are integrated into the library.

Design tokens are CSS custom properties that would control the visual appearance of PayAdvantage UI Components. They would allow you to customize colors, spacing, typography, and component-specific styling to match your brand.

Why Use Design Tokens? ​

When implemented, design tokens will provide:

  • Easy Customization: Change one token to update styling across all components
  • Brand Consistency: Use the same colors and spacing throughout your app
  • Maintainable: Update your theme in one place instead of scattered CSS
  • Future-Proof: New components automatically inherit your custom theme

How Design Tokens Will Work ​

Once implemented, you would override any token in your application's CSS to customize the appearance:

css
/* In your main CSS file */
:root {
  --color-brand-primary: #your-brand-color;
  --spacing-md: 1.5rem;
  --font-family-sans: 'Your Font', sans-serif;
}

Available Design Tokens ​

Core Tokens ​

Colors ​

Base colors, brand palette, and semantic colors for consistent theming.

css
/* Base Colors */
--color-base-white: #ffffff;
--color-base-black: #000000;

/* Brand Palette */
--color-brand-primary: #dc3545;     /* PayAdvantage Red */
--color-brand-secondary: #ced4da;
--color-brand-tertiary: #e9ecef;

/* Semantic Colors */
--color-semantic-success: #23c349;  /* Green for success states */
--color-semantic-info: #17a2b8;     /* Blue for informational states */
--color-semantic-warning: #F5A623;  /* Orange for warning states */
--color-semantic-danger: #F00000;   /* Red for error states */

/* Gray Scale */
--color-gray-50: #f8f9fa;          /* Lightest gray */
--color-gray-100: #f8f9fa;
--color-gray-200: #e9ecef;
--color-gray-300: #dee2e6;         /* Border color */
--color-gray-400: #ced4da;
--color-gray-500: #adb5bd;         /* Placeholder text */
--color-gray-600: #6c757d;         /* Secondary text */
--color-gray-700: #495057;
--color-gray-800: #343a40;
--color-gray-900: #212529;         /* Primary text */

/* PayAdvantage Specific */
--color-payadvantage-yellow-bright: #FFC400;
--color-payadvantage-green-light: #00B050;
--color-payadvantage-green-lightest: #2BB85E;

/* Surface Colors */
--color-surface-light: #f8f9fa;    /* Light background */
--color-surface-dark: #212529;     /* Dark background */
--color-surface-form: #ffffff;     /* Form backgrounds */
--color-surface-form-dark: #343a40;

Spacing & Sizing ​

Standardized spacing values, font sizes, border radius, and other dimensional properties.

css
/* Spacing Scale */
--spacing-none: 0;                 /* 0px */
--spacing-xs: 0.25rem;            /* 4px */
--spacing-sm: 0.5rem;             /* 8px */
--spacing-md: 1rem;               /* 16px - base unit */
--spacing-lg: 1.5rem;             /* 24px */
--spacing-xl: 3rem;               /* 48px */
--spacing-2xl: 4rem;              /* 64px */
--spacing-3xl: 6rem;              /* 96px */

/* Font Sizes */
--size-font-xs: 0.75rem;          /* 12px */
--size-font-sm: 0.875rem;         /* 14px */
--size-font-base: 1rem;           /* 16px - base font size */
--size-font-lg: 1.125rem;         /* 18px */
--size-font-xl: 1.25rem;          /* 20px */
--size-font-2xl: 1.5rem;          /* 24px */
--size-font-3xl: 1.875rem;        /* 30px */
--size-font-4xl: 2.25rem;         /* 36px */

/* Border Widths */
--size-border-none: 0;
--size-border-thin: 1px;          /* Standard border */
--size-border-base: 2px;          /* Medium border */
--size-border-thick: 4px;         /* Thick border */

/* Border Radius */
--size-radius-none: 0;
--size-radius-sm: 0.125rem;       /* 2px */
--size-radius-base: 0.375rem;     /* 6px - standard radius */
--size-radius-lg: 0.5rem;         /* 8px */
--size-radius-xl: 0.75rem;        /* 12px */
--size-radius-full: 9999px;       /* Pill shape */

Typography ​

Font families, weights, and line heights for consistent text styling.

css
/* Font Families */
--font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-family-serif: Georgia, 'Times New Roman', Times, serif;
--font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

/* Font Weights */
--font-weight-light: 300;         /* Light text */
--font-weight-normal: 400;        /* Regular text */
--font-weight-medium: 500;        /* Medium weight */
--font-weight-semibold: 600;      /* Semi-bold */
--font-weight-bold: 700;          /* Bold text */

/* Line Heights */
--font-line-height-tight: 1.25;   /* Tight line spacing */
--font-line-height-normal: 1.5;   /* Standard line spacing */
--font-line-height-relaxed: 1.75; /* Relaxed line spacing */

Component Tokens ​

Specialized tokens for specific components that you can override to customize individual component styles.

css
/* Button Component Tokens */
--component-button-background-primary: #dc3545;
--component-button-background-secondary: #ced4da;
--component-button-background-success: #23c349;
--component-button-background-warning: #F5A623;
--component-button-background-danger: #F00000;
--component-button-text-primary: #ffffff;
--component-button-text-secondary: #343a40;
--component-button-border-radius: 0.375rem;
--component-button-border-width: 2px;
--component-button-spacing-padding-x: 1rem;
--component-button-spacing-padding-y: 0.5rem;

/* Form Component Tokens */
--component-form-label-color: #dc3545;
--component-form-input-background: #ffffff;
--component-form-input-background-dark: #343a40;
--component-form-input-border: #dee2e6;
--component-form-input-border-dark: #6c757d;
--component-form-input-text: #212529;
--component-form-input-placeholder: #adb5bd;

/* Theme Tokens */
--theme-background-primary: #f8f9fa;
--theme-background-secondary: #e9ecef;
--theme-background-dark: #212529;
--theme-text-primary: #212529;
--theme-text-secondary: #adb5bd;
--theme-text-light: #ffffff;
--theme-accent-primary: #dc3545;

Using Design Tokens in Your Components ​

You can use the same design tokens in your own components to maintain consistency with the PayAdvantage design system:

vue
<template>
  <div class="my-card">
    <h2 class="my-card__title">Card Title</h2>
    <p class="my-card__content">Your content here</p>
    <button class="my-card__button">Action</button>
  </div>
</template>

<style scoped>
.my-card {
  /* Use design tokens for consistent styling */
  background-color: var(--color-base-white);
  border: var(--size-border-thin) solid var(--color-gray-300);
  border-radius: var(--size-radius-base);
  padding: var(--spacing-lg);
  margin: var(--spacing-md);
}

.my-card__title {
  color: var(--color-brand-primary);
  font-family: var(--font-family-sans);
  font-size: var(--size-font-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}

.my-card__content {
  color: var(--color-gray-700);
  font-size: var(--size-font-base);
  line-height: var(--font-line-height-normal);
  margin-bottom: var(--spacing-md);
}

.my-card__button {
  background-color: var(--color-brand-primary);
  color: var(--color-base-white);
  border: none;
  border-radius: var(--size-radius-base);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
}
</style>

Common Theming Examples ​

Brand Color Theme ​

Update all brand-related colors to match your company branding:

css
:root {
  /* Update primary brand color everywhere */
  --color-brand-primary: #0066cc;
  --component-button-background-primary: #0066cc;
  --component-form-label-color: #0066cc;
  --theme-accent-primary: #0066cc;
  
  /* Update semantic colors */
  --color-semantic-success: #28a745;
  --color-semantic-warning: #ffc107;
  --color-semantic-danger: #dc3545;
}

Spacing Theme ​

Adjust spacing throughout the application for tighter or looser layouts:

css
:root {
  /* Increase base spacing for more breathing room */
  --spacing-xs: 0.375rem;    /* was 0.25rem */
  --spacing-sm: 0.75rem;     /* was 0.5rem */
  --spacing-md: 1.5rem;      /* was 1rem */
  --spacing-lg: 2.25rem;     /* was 1.5rem */
  
  /* Update component spacing accordingly */
  --component-button-spacing-padding-x: 1.5rem;
  --component-button-spacing-padding-y: 0.75rem;
}

Typography Theme ​

Change fonts and text styling across all components:

css
:root {
  /* Update font family */
  --font-family-sans: 'Inter', 'SF Pro Display', system-ui, sans-serif;
  
  /* Adjust font sizes */
  --size-font-sm: 0.8125rem;   /* slightly smaller */
  --size-font-base: 1.0625rem; /* slightly larger */
  --size-font-lg: 1.25rem;
  
  /* Update font weights */
  --font-weight-normal: 450;    /* slightly heavier than default */
  --font-weight-semibold: 650;  /* between 600 and 700 */
}

Dark Theme ​

Create a dark theme variant:

css
[data-theme="dark"] {
  /* Dark backgrounds */
  --color-base-white: #1a1a1a;
  --color-base-black: #ffffff;
  --theme-background-primary: #1a1a1a;
  --theme-background-secondary: #2d2d2d;
  
  /* Dark text colors */
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #a0a0a0;
  --color-gray-600: #a0a0a0;
  --color-gray-700: #d0d0d0;
  
  /* Dark form styling */
  --component-form-input-background: #2d2d2d;
  --component-form-input-border: #404040;
  --component-form-input-text: #ffffff;
}

Tips for Custom Theming ​

Start Small ​

Begin by overriding just the brand colors, then gradually customize spacing and typography as needed.

Use Browser DevTools ​

Inspect PayAdvantage components in your browser's DevTools to see which tokens are being used.

Test Across Components ​

After changing tokens, test multiple components to ensure your changes work well everywhere.

Maintain Contrast ​

When changing colors, ensure sufficient contrast for accessibility (especially for text and interactive elements).

Troubleshooting ​

Design tokens not applying?

  • Check that you have imported the theme CSS: @payadvantage/ui_components/dist/theme-payadvantage.css
  • Verify your custom CSS is loaded after the PayAdvantage CSS
  • Use browser DevTools to confirm your CSS overrides are taking effect

Custom colors not showing?

  • Ensure you're using the correct token names (check browser DevTools)
  • Verify CSS specificity isn't preventing your overrides
  • Check that your :root selector is properly formed

Components look broken after customization?

  • Test with default values first, then gradually add customizations
  • Some tokens work together (e.g., button background and text colors)
  • Check browser console for any CSS errors

Next Steps ​

  • Explore the full Component Library to see all available components
  • Check out Usage Examples for implementation patterns
  • View individual component documentation for specific customization options