Skip to content

Instantly share code, notes, and snippets.

@flukyrobot

flukyrobot/test.js

Created February 11, 2025 21:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save flukyrobot/41a92c0287d1e50a040b1925e779b845 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save flukyrobot/41a92c0287d1e50a040b1925e779b845 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. flukyrobot created this gist Feb 11, 2025.
    215 changes: 215 additions & 0 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,215 @@
    import { definePreset } from 'primevue/theming';

    export default definePreset({
    // Primitive color tokens
    primitive: {
    // Primary Bootstrap colors
    blue: {
    50: '#e3f2fd',
    100: '#bbdefb',
    200: '#90caf9',
    300: '#64b5f6',
    400: '#42a5f5',
    500: '#337ab7', // Bootstrap primary
    600: '#1e88e5',
    700: '#1976d2',
    800: '#1565c0',
    900: '#0d47a1',
    950: '#0a2f6f'
    },
    gray: {
    50: '#fafafa',
    100: '#f5f5f5',
    200: '#eeeeee',
    300: '#e0e0e0',
    400: '#bdbdbd',
    500: '#9e9e9e',
    600: '#757575',
    700: '#616161',
    800: '#424242',
    900: '#212121',
    950: '#161616'
    }
    },

    // Semantic tokens for consistent theming
    semantic: {
    primary: {
    50: '{blue.50}',
    100: '{blue.100}',
    200: '{blue.200}',
    300: '{blue.300}',
    400: '{blue.400}',
    500: '{blue.500}',
    600: '{blue.600}',
    700: '{blue.700}',
    800: '{blue.800}',
    900: '{blue.900}',
    950: '{blue.950}'
    },

    // Color scheme tokens for light/dark modes
    colorScheme: {
    light: {
    // Surface colors
    surface: {
    ground: '#ffffff',
    section: '{gray.100}',
    card: '#ffffff',
    overlay: '#ffffff',
    border: '#dddddd',
    hover: '{gray.100}'
    },
    // Text colors
    text: {
    primary: '#333333',
    secondary: '#777777',
    tertiary: '#999999',
    disabled: '#bbbbbb'
    },
    // Form field tokens
    formField: {
    background: '#ffffff',
    border: '#cccccc',
    hoverBorder: '{primary.400}',
    focusBorder: '{primary.500}',
    error: '#dc3545',
    placeholder: '{gray.600}'
    }
    },
    dark: {
    surface: {
    ground: '{gray.900}',
    section: '{gray.800}',
    card: '{gray.800}',
    overlay: '{gray.800}',
    border: '{gray.700}',
    hover: '{gray.700}'
    },
    text: {
    primary: '#ffffff',
    secondary: '{gray.400}',
    tertiary: '{gray.500}',
    disabled: '{gray.600}'
    },
    formField: {
    background: '{gray.800}',
    border: '{gray.700}',
    hoverBorder: '{primary.400}',
    focusBorder: '{primary.500}',
    error: '#dc3545',
    placeholder: '{gray.500}'
    }
    }
    }
    },

    // Component-specific tokens
    components: {
    // Button component tokens
    button: {
    root: {
    backgroundColor: '{primary.500}',
    borderColor: '{primary.600}',
    color: '#ffffff',
    fontSize: '14px',
    padding: '6px 12px',
    borderRadius: '4px',
    transition: 'all 0.15s ease-in-out'
    },
    states: {
    hover: {
    backgroundColor: '{primary.600}',
    borderColor: '{primary.700}',
    color: '#ffffff'
    },
    active: {
    backgroundColor: '{primary.700}',
    borderColor: '{primary.800}',
    color: '#ffffff'
    },
    disabled: {
    backgroundColor: '{gray.300}',
    borderColor: '{gray.400}',
    color: '{gray.600}'
    }
    }
    },

    // Input component tokens
    inputtext: {
    root: {
    backgroundColor: 'var(--surface-ground)',
    borderColor: 'var(--surface-border)',
    color: 'var(--text-color)',
    fontSize: '14px',
    padding: '6px 12px',
    borderRadius: '4px',
    transition: 'border-color 0.15s ease-in-out'
    },
    states: {
    hover: {
    borderColor: '{primary.400}'
    },
    focus: {
    borderColor: '{primary.500}',
    boxShadow: '0 0 0 0.2rem rgba(51, 122, 183, 0.25)'
    }
    }
    },

    // Panel component tokens
    panel: {
    root: {
    backgroundColor: 'var(--surface-card)',
    borderColor: 'var(--surface-border)',
    borderRadius: '4px'
    },
    header: {
    backgroundColor: 'var(--surface-section)',
    padding: '10px 15px',
    borderBottom: '1px solid var(--surface-border)'
    },
    content: {
    padding: '15px'
    }
    },

    // Table component tokens
    datatable: {
    header: {
    backgroundColor: 'var(--surface-section)',
    borderColor: 'var(--surface-border)',
    padding: '8px'
    },
    cell: {
    backgroundColor: 'var(--surface-card)',
    borderColor: 'var(--surface-border)',
    padding: '8px'
    },
    row: {
    hover: {
    backgroundColor: 'var(--surface-hover)'
    },
    striped: {
    backgroundColor: 'var(--surface-ground)'
    }
    }
    }
    },

    // Extended styles and utilities
    extend: {
    // Custom transitions
    transitions: {
    quick: '0.15s ease-in-out',
    smooth: '0.3s ease-in-out'
    },
    // Custom focus styles
    focusRing: {
    width: '2px',
    color: 'rgba(51, 122, 183, 0.25)',
    offset: '2px'
    }
    }
    });