Skip to main content

In CSS, docebo uses variables for colors to represent your branding-and-look colors.

As we migrate to extended enterprise, I am cleaning up my CSS and trying to use more variable colors - so that companies with different branding colors won’t have their colors overwritten by my CSS.

Here’s all the variables I found so far. The only one I know that corresponds to the branding-and-look colors is the first one: --ui-color-layout-background. Some are presumably predictable like error and alert vars.

 

var(--ui-color-layout-background)
var(--ui-color-layout-shadow)
var(--ui-color-layout-dark)
var(--ui-color-layout-overlay-dark)
var(--ui-color-layout-surface)
var(--ui-color-button-background-primary)
var(--ui-color-button-background-secondary)
var(--ui-color-button-label-neutral)
var(--ui-color-button-label-primary)
var(--ui-color-button-label-accent)
var(--ui-color-button-label-accent-secondary)
var(--ui-color-button-label-negative)
var(--ui-color-button-label-error)
var(--ui-color-button-label-dark)
var(--ui-color-interaction-hover-dark)
var(--ui-color-interaction-hover-light)
var(--ui-color-border-neutral)
var(--ui-color-border-accessibility-default)
var(--ui-color-border-accessibility-negative)
var(--ui-color-icon-accent-primary)
var(--ui-color-icon-accent-secondary)
var(--ui-color-icon-accent-tertiary)
var(--ui-color-icon-dark)
var(--ui-color-icon-neutral)
var(--ui-color-icon-negative)
var(--ui-color-icon-success)
var(--ui-color-icon-alert)
var(--ui-color-icon-error)
var(--ui-color-icon-rating)
var(--ui-color-avatar-background-negative)
var(--ui-color-avatar-background-dark)
var(--ui-color-avatar-background-light)
var(--ui-color-avatar-background-accent)
var(--ui-color-avatar-background-error)
var(--ui-color-avatar-background-alert)
var(--ui-color-avatar-background-success)
var(--ui-color-avatar-label-negative)
var(--ui-color-avatar-label-dark)
var(--ui-color-avatar-label-accent)


    --hyd-color-accent-primary: #000000;
    --ui-color-accent-primary: #000000;
    --hyd-color-icon-accent: #333333;
    --ui-color-icon-accent-primary: #333333;
    --hyd-color-layout-brand: #000000;
    --ui-color-layout-brand: #000000;
    --hyd-color-button-label-accent: #000000;
    --ui-color-button-label-accent: #000000;
    --hyd-color-avatar-background-accent: #000000;
    --ui-color-avatar-background-accent: #000000;
    --hyd-color-interaction-hover-accent-primary: #000000;
    --ui-color-interaction-hover-accent-primary: #000000;
    --hyd-color-interaction-ripple-accent-primary: #000000;
    --ui-color-interaction-ripple-accent-primary: #000000;
    --hyd-color-loading-accent: #000000;
    --ui-color-loading-accent: #000000;
    --ui-color-dialog-background-accent: #000000;
    --hyd-color-border-accent-secondary: #333333;
    --ui-color-border-accent-secondary: #333333;
    --hyd-color-typography-accent: #333333;
    --ui-color-typography-accent: #333333;
    --hyd-color-typography-accent-secondary: #333333;
    --ui-color-typography-accent-secondary: #333333;
    --hyd-color-interaction-hover-accent-secondary: #333333;
    --ui-color-interaction-hover-accent-secondary: #333333;
    --hyd-color-button-label-accent-secondary: #333333;
    --ui-color-button-label-accent-secondary: #333333;
    --hyd-color-border-accent-tertiary: #000000;
    --ui-color-border-accent-tertiary: #000000;
    --hyd-color-button-background-primary: #000000;
    --ui-color-button-background-primary: #000000;
    --hyd-color-typography-accent-tertiary: #000000;
    --ui-color-typography-accent-tertiary: #000000;
    --hyd-color-choice-background-active: #000000;
    --ui-color-choice-background-active: #000000;
    --hyd-color-typography-primary: #000000;
    --ui-color-typography-primary: #000000;
    --hyd-color-button-label-neutral: #222222;
    --ui-color-button-label-neutral: #222222;
    --hyd-color-chip-label: #000000;
    --ui-color-chip-label: #000000;
    --hyd-color-typography-secondary: #222222;
    --ui-color-typography-secondary: #222222;
    --hyd-color-border-neutral: #cccccc;
    --ui-color-border-neutral: #cccccc;
    --hyd-color-layout-background: #f9f9f9;
    --ui-color-layout-background: #f9f9f9;
    --hyd-color-semantic-success: #000000;
    --ui-color-semantic-success: #000000;
    --hyd-color-icon-success: #000000;
    --ui-color-icon-success: #000000;
    --hyd-color-typography-success: #000000;
    --ui-color-typography-success: #000000;
    --ui-color-dialog-background-success: #000000;
    --hyd-color-semantic-alert: #F7681E;
    --ui-color-semantic-alert: #F7681E;
    --hyd-color-icon-alert: #F7681E;
    --ui-color-icon-alert: #F7681E;
    --ui-color-dialog-background-alert: #F7681E;
    --hyd-color-semantic-error: #E62231;
    --ui-color-semantic-error-default: #E62231;
    --hyd-color-border-error: #E62231;
    --ui-color-border-error: #E62231;
    --hyd-color-button-label-error: #E62231;
    --ui-color-button-label-error: #E62231;
    --hyd-color-typography-error: #E62231;
    --ui-color-typography-error: #E62231;
    --ui-color-dialog-background-error: #E62231;
    --hyd-color-semantic-info: #333333;

 

Reply


Terms & ConditionsCookie settings