Customization (CSS)

Example configuration:

window.ddoComponent.init({
    containerId: 'ddo-component-container',
    backendUrl: 'https://ddo.metapack.com',

    // Reference your custom CSS file
    customCssUrl: '/css/custom-theme.css',

    getToken: async function() {
        const response = await fetch('/api/ddo-token');
        return (await response.json()).token;
    },

    senderDetails: {
        warehouseCode: 'UK',
        wh_cc: 'GB'
    }
});

Important: The CSS file must contain a :root block with CSS variables. The component will parse and apply only the CSS variables from the :root block.

You can override these variables in your custom CSS file:

:root {
    /* Colors */
    --ddo-primary-color: #007bff;
    --ddo-text-primary: #0F0F10;
    --ddo-text-secondary: #6B7280;
    --ddo-surface-default: #FFFFFF;
    --ddo-surface-container: #F9FAFB;
    --ddo-border-input: #D1D5DB;
    --ddo-border-light: #E5E7EB;

    /* Typography */
    --ddo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ddo-font-size-sm: 0.875rem;
    --ddo-font-size-md: 1rem;
    --ddo-font-size-lg: 1.125rem;

    /* Spacing */
    --ddo-space-1: 0.5rem;
    --ddo-space-2: 1rem;
    --ddo-space-3: 1.5rem;

    /* Border Radius */
    --ddo-radius-xs: 0.375rem;
    --ddo-radius-sm: 0.5rem;
    --ddo-radius-md: 0.75rem;

    /* Shadows */
    --ddo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ddo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Create a file custom-theme.css:

/* Custom theme - only CSS variables in :root block will be applied */
:root {
    --ddo-primary-color: #10b981;
    --ddo-surface-default: #f0fdf4;
    --ddo-border-input: #86efac;
    --ddo-text-primary: #065f46;
}

Then reference it in your configuration:

window.ddoComponent.init({
    containerId: 'ddo-component-container',
    backendUrl: 'https://ddo.metapack.com',
    customCssUrl: '/css/custom-theme.css',

    getToken: async function() {
        const response = await fetch('/api/ddo-token');
        return (await response.json()).token;
    },

    senderDetails: {
        warehouseCode: 'UK',
        wh_cc: 'GB'
    }
});

Note: Only CSS variables defined in the :root block will be applied. Other CSS rules (like class selectors) in the file will be ignored.

If you need to apply additional styles beyond CSS variables, you can add a separate style & tag or CSS file in your HTML that targets the component's CSS classes:

<style>
    /* Additional custom styles */
    #ddo-component-container {
        max-width: 800px;
        margin: 2rem auto;
    }
</style>

Available CSS classes for targeting: