Design Customization

The Commentix widget is implemented as a Web Component and is embedded directly into the page (no iframe). This allows it to inherit styles from your site and be customized using a set of predefined CSS variables.

All visual customization is done by targeting the <commentix-widget> element and overriding variables as needed.

Scaling

All dimensions within the widget, such as font sizes, spacing, and element dimensions, are derived from a single base value. Adjusting this base size scales the entire widget proportionally.

This is the recommended way to make the widget feel more compact or more spacious without modifying individual values.

Example

commentix-widget {
    --commentix-base-size: 14px; // Makes the widget smaller/narrower (Default: 16px)
}

Font

The widget does not load external fonts. By default, it uses the system UI font.

Because the widget is not isolated in an iframe, it can reference any font already loaded by your site. You can override the font family using the corresponding CSS variable.

Example

commentix-widget {
    --commentix-font-family: Roboto;
}

Branding and Accent Colors

To align the widget with your site's visual identity, you can configure the primary brand color used for interactive elements such as buttons, links, and highlights.

Derived colors, such as hover states, are calculated automatically unless explicitly overridden.

Example

commentix-widget {
    --commentix-color-brand: #396bf1;
}

Dark Mode

The widget ships with a light color palette by default. To implement a dark theme, override the relevant background, border, and text color variables.

You can scope these overrides globally or conditionally (for example, using prefers-color-scheme).

Example

commentix-widget {
    --commentix-color-background-primary: #1f1f22;
    --commentix-color-background-secondary: #202023;
    --commentix-color-background-tertiary: #232327;
    --commentix-color-border: #323236;
    --commentix-color-text-primary: #ffffff;
    --commentix-color-text-secondary: #ffffff;
    --commentix-color-text-tertiary: #dddddd;
}

Roundness

Buttons, inputs, and other UI elements use rounded corners by default. You can adjust the roundness globally by changing the border radius variable.

Example

commentix-widget {
    --commentix-border-radius: 4px;
}

Line Clamping

Long comment bodies are clamped to a fixed number of lines to keep threads readable. The default limit is five lines.

You can increase or decrease this value depending on how much content you want visible before expansion.

Example

commentix-widget {
    --commentix-line-clamp-max-lines: 10;
}

All CSS Variables

Below is the complete list of CSS variables supported by the widget, grouped by category. Any variable can be overridden by defining it on the <commentix-widget> element.

commentix-widget {
    // Scaling
    --commentix-base-size: 16px;

    // Font settings
    --commentix-font-family: system-ui, sans-serif;
    --commentix-font-size: var(--commentix-base-size);
    --commentix-font-size-sm: calc(var(--commentix-base-size) * 0.875);
    --commentix-font-size-lg: calc(var(--commentix-base-size) * 1.25);
    --commentix-line-height: 1.5;

    // Borders
    --commentix-border-radius: calc(var(--commentix-base-size) * 0.25);
    --commentix-border-width: 1px;

    // Colors
    --commentix-color-background-primary: #ffffff;
    --commentix-color-background-secondary: #ffffff;
    --commentix-color-background-tertiary: #ffffff;
    --commentix-color-border: #dddddd;
    --commentix-color-border-focus: var(--commentix-color-brand-hover);
    --commentix-color-brand: #396bf1;
    --commentix-color-brand-hover: color-mix(in srgb, var(--commentix-color-brand), black 10%);
    --commentix-color-danger: #ff3737;
    --commentix-color-success: #2eb32e;
    --commentix-color-text-inverse: #ffffff;
    --commentix-color-text-primary: #111111;
    --commentix-color-text-secondary: #505050;
    --commentix-color-text-tertiary: #757575;

    // Focus outline for keyboard navigation and accessibility
    --commentix-focus-outline: 2px solid var(--commentix-color-brand-hover);
    --commentix-focus-outline-offset: -2px;

    // Spacing
    --commentix-spacing-xxs: calc(var(--commentix-base-size) * 0.25);
    --commentix-spacing-xs: calc(var(--commentix-base-size) * 0.5);
    --commentix-spacing-sm: calc(var(--commentix-base-size) * 0.75);
    --commentix-spacing-md: var(--commentix-base-size);
    --commentix-spacing-lg: calc(var(--commentix-base-size) * 1.25);
    --commentix-spacing-xl: calc(var(--commentix-base-size) * 1.5);
    --commentix-spacing-xxl: calc(var(--commentix-base-size) * 2);

    // Badge
    --commentix-badge-background: var(--commentix-color-brand);
    --commentix-badge-border: none;
    --commentix-badge-border-radius: var(--commentix-border-radius);
    --commentix-badge-color: var(--commentix-color-text-inverse);
    --commentix-badge-font-size: var(--commentix-font-size-sm);
    --commentix-badge-padding: var(--commentix-spacing-xxs) var(--commentix-spacing-xs);

    // Buttons
    --commentix-button-font-size: var(--commentix-font-size);
    --commentix-button-font-size-sm: var(--commentix-font-size-sm);
    --commentix-button-padding: var(--commentix-spacing-xs) var(--commentix-spacing-md);
    --commentix-button-padding-sm: var(--commentix-spacing-xxs) var(--commentix-spacing-xs);
    --commentix-button-primary-background: var(--commentix-color-brand);
    --commentix-button-primary-background-hover: var(--commentix-color-brand-hover);
    --commentix-button-primary-border: var(--commentix-border-width) solid var(--commentix-color-brand);
    --commentix-button-primary-border-hover: var(--commentix-border-width) solid var(--commentix-color-brand-hover);
    --commentix-button-primary-border-radius: var(--commentix-border-radius);
    --commentix-button-primary-color: var(--commentix-color-text-inverse);
    --commentix-button-primary-color-hover: var(--commentix-color-text-inverse);
    --commentix-button-primary-focus-outline-offset: 2px;
    --commentix-button-secondary-background: var(--commentix-color-background-tertiary);
    --commentix-button-secondary-background-hover: var(--commentix-color-background-tertiary);
    --commentix-button-secondary-border: var(--commentix-border-width) solid var(--commentix-color-border);
    --commentix-button-secondary-border-hover: var(--commentix-border-width) solid var(--commentix-color-brand-hover);
    --commentix-button-secondary-border-radius: var(--commentix-border-radius);
    --commentix-button-secondary-color: var(--commentix-color-text-secondary);
    --commentix-button-secondary-color-hover: var(--commentix-color-brand-hover);
    --commentix-button-secondary-focus-outline-offset: var(--commentix-focus-outline-offset);
    --commentix-button-tertiary-background: transparent;
    --commentix-button-tertiary-background-hover: transparent;
    --commentix-button-tertiary-border: var(--commentix-border-width) solid transparent;
    --commentix-button-tertiary-border-hover: var(--commentix-border-width) solid transparent;
    --commentix-button-tertiary-border-radius: var(--commentix-border-radius);
    --commentix-button-tertiary-color: var(--commentix-color-text-tertiary);
    --commentix-button-tertiary-color-hover: var(--commentix-color-brand-hover);
    --commentix-button-tertiary-focus-outline-offset: 0;

    // Checkbox
    --commentix-checkbox-background: var(--commentix-input-background);
    --commentix-checkbox-background-checked: var(--commentix-color-brand);
    --commentix-checkbox-border: var(--commentix-input-border);
    --commentix-checkbox-border-radius: var(--commentix-input-border-radius);
    --commentix-checkbox-box-shadow: var(--commentix-input-box-shadow);
    --commentix-checkbox-color: var(--commentix-color-text-primary);
    --commentix-checkbox-font-size: var(--commentix-font-size);
    --commentix-checkbox-font-weight: normal;

    // Comment
    --commentix-comment-date-color: var(--commentix-color-text-tertiary);
    --commentix-comment-date-font-size: var(--commentix-font-size-sm);
    --commentix-comment-message-color: var(--commentix-color-text-primary);
    --commentix-comment-message-font-size: var(--commentix-font-size);
    --commentix-comment-user-color: var(--commentix-color-text-primary);
    --commentix-comment-user-font-size: var(--commentix-font-size);
    --commentix-comment-user-font-weight: bold;

    // Comment count
    --commentix-comment-count-background-color: var(--commentix-color-brand);
    --commentix-comment-count-border-radius: var(--commentix-border-radius);
    --commentix-comment-count-color: var(--commentix-color-text-inverse);
    --commentix-comment-count-font-size: var(--commentix-font-size-lg);
    --commentix-comment-count-font-weight: bold;
    --commentix-comment-count-min-width: calc(var(--commentix-base-size) * 3);
    --commentix-comment-count-padding: var(--commentix-spacing-xs) var(--commentix-spacing-md);
    --commentix-comment-count-spinner-size: var(--commentix-base-size);
    --commentix-comment-count-triangle-height: calc(var(--commentix-base-size) * 0.4);

    // Divider
    --commentix-divider-border: var(--commentix-border-width) solid var(--commentix-color-border);

    // Dropdown
    --commentix-dropdown-background: var(--commentix-color-background-primary);
    --commentix-dropdown-border: var(--commentix-border-width) solid var(--commentix-color-border);
    --commentix-dropdown-border-radius: var(--commentix-border-radius);
    --commentix-dropdown-box-shadow: 0 0 4px rgba(0, 0, 0, 0.075);
    --commentix-dropdown-padding: var(--commentix-spacing-xxs) 0;

    // Error message
    --commentix-error-color: var(--commentix-color-danger);
    --commentix-error-font-size: var(--commentix-font-size);

    // Hint
    --commentix-hint-color: var(--commentix-color-text-tertiary);
    --commentix-hint-font-size: var(--commentix-font-size-sm);

    // Input field
    --commentix-input-background: var(--commentix-color-background-secondary);
    --commentix-input-border: var(--commentix-border-width) solid var(--commentix-color-border);
    --commentix-input-border-radius: var(--commentix-border-radius);
    --commentix-input-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
    --commentix-input-color: var(--commentix-color-text-primary);
    --commentix-input-font-size: var(--commentix-font-size);
    --commentix-input-font-size-sm: var(--commentix-font-size-sm);
    --commentix-input-padding: var(--commentix-spacing-sm);
    --commentix-input-padding-sm: var(--commentix-spacing-xs);
    --commentix-input-placeholder-color: var(--commentix-color-text-tertiary);

    // Input label
    --commentix-label-color: var(--commentix-color-text-tertiary);
    --commentix-label-color-error: var(--commentix-color-danger);
    --commentix-label-font-size: var(--commentix-font-size);
    --commentix-label-font-weight: bold;

    // Line clamping
    --commentix-line-clamp-max-lines: 5;

    // Notice
    --commentix-notice-border-radius: var(--commentix-border-radius);
    --commentix-notice-border-width: 1px;
    --commentix-notice-font-size: var(--commentix-font-size);
    --commentix-notice-padding: var(--commentix-spacing-sm) var(--commentix-spacing-md);
    --commentix-notice-danger-background: color-mix(in srgb, transparent, var(--commentix-color-danger) 15%);
    --commentix-notice-danger-border-color: color-mix(in srgb, transparent, var(--commentix-color-danger) 50%);
    --commentix-notice-danger-color: var(--commentix-color-text-primary);
    --commentix-notice-neutral-background: var(--commentix-color-background-primary);
    --commentix-notice-neutral-border-color: var(--commentix-color-border);
    --commentix-notice-success-background: color-mix(in srgb, transparent, var(--commentix-color-success) 15%);
    --commentix-notice-success-border-color: color-mix(in srgb, transparent, var(--commentix-color-success) 50%);
    --commentix-notice-success-color: var(--commentix-color-text-primary);

    // Textarea field
    --commentix-textarea-background: var(--commentix-input-background);
    --commentix-textarea-border: var(--commentix-input-border);
    --commentix-textarea-border-radius: var(--commentix-input-border-radius);
    --commentix-textarea-box-shadow: var(--commentix-input-box-shadow);
    --commentix-textarea-color: var(--commentix-input-color);
    --commentix-textarea-font-size: var(--commentix-input-font-size);
    --commentix-textarea-min-height: calc(var(--commentix-base-size) * var(--commentix-line-height) * 3);
    --commentix-textarea-padding: var(--commentix-input-padding);
    --commentix-textarea-placeholder-color: var(--commentix-input-placeholder-color);

    // Thread
    --commentix-thread-border: var(--commentix-border-width) solid var(--commentix-color-border);
    --commentix-thread-indent: var(--commentix-spacing-sm);

    // Title
    --commentix-title-color: var(--commentix-color-text-primary);
    --commentix-title-font-size: var(--commentix-font-size-lg);
    --commentix-title-font-weight: bold;
}