Ziro Components

Theming

You must set the following css variables in order for the components to work. To provide your own theme simply change these css variables.

Theming

html {
    --zc-primary-color: #ff3333;
    --zc-primary-text-color: #fff;
    --zc-secondary-color: #264653;
    --zc-secondary-text-color: #fff;
    --zc-background-color: #fff;
    --zc-background-mild-color: #666;
    --zc-background-text-color: #111;
    --zc-selected-color: #ddd;
    --zc-background-mild-color: #555;
    --zc-selected-text-color: #111;

    --zc-border-radius: 3px;
    --zc-light-border: 1px solid var(--zc-background-mild-color);
    --zc-primary-border: 1px solid var(--zc-primary-color);

    --zc-space-tiny: 6px;
    --zc-space-mini: 8px;
    --zc-space-small: 10px;
    --zc-space-medium: 20px;
    --zc-space-large: 30px;
    --zc-space-x2: 40px;
    --zc-space-x3: 60px;

    --zc-font-size-small: 14px;
    --zc-font-size-medium: 16px;
    --zc-font-size-large: 20px;
    --zc-font-size-x2: 26px;
    --zc-font-size-x3: 36px;

    --zc-transition-speed: 300ms;
}