Skip to main content
To edit the styling for all Velt components, you can use the following global CSS variables. This is recommended over editing the CSS for each tool individually.
// default state
--velt-tool-padding: 6px;
--velt-tool-icon-size: 1.5rem;
--velt-tool-icon-color: var(--velt-neutral-4);
--velt-tool-border-radius: 50px;
--velt-tool-border-color: transparent;
--velt-tool-border: 2px solid var(--velt-tool-border-color);
--velt-tool-bg-color: transparent;

// default focus state
--velt-tool-focus-icon-size: var(--velt-tool-icon-size);
--velt-tool-focus-icon-color: var(--velt-tool-icon-color);
--velt-tool-focus-border-radius: var(--velt-tool-border-radius);
--velt-tool-focus-border-color: var(--velt-neutral-7);
--velt-tool-focus-border: 2px solid var(--velt-tool-focus-border-color);
--velt-tool-focus-bg-color: var(--velt-tool-bg-color);

// default hover state
--velt-tool-hover-icon-size: var(--velt-tool-icon-size);
--velt-tool-hover-icon-color: var(--velt-neutral-3);
--velt-tool-hover-border-radius: var(--velt-tool-border-radius);
--velt-tool-hover-border-color: var(--velt-neutral-7);
--velt-tool-hover-border: 2px solid var(--velt-tool-hover-border-color);
--velt-tool-hover-bg-color: var(--velt-neutral-7);

// active state
--velt-tool-active-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-icon-color: var(--velt-neutral-9);
--velt-tool-active-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-border-color: var(--velt-purple);
--velt-tool-active-border: 2px solid var(--velt-tool-active-border-color);
--velt-tool-active-bg-color: var(--velt-purple);

// active focus state
--velt-tool-active-focus-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-focus-icon-color: var(--velt-tool-icon-color);
--velt-tool-active-focus-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-focus-border-color: rgba(255, 255, 255, 0.24);
--velt-tool-active-focus-border: 2px solid
    var(--velt-tool-active-focus-border-color);
--velt-tool-active-focus-bg-color: var(--velt-purple);

// active hover state
--velt-tool-active-hover-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-hover-icon-color: var(--velt-tool-icon-color);
--velt-tool-active-hover-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-hover-border-color: #433fa7;
--velt-tool-active-hover-border: 2px solid
    var(--velt-tool-active-hover-border-color);
--velt-tool-active-hover-bg-color: #433fa7;
// default state
--velt-tool-padding: 6px;
--velt-tool-icon-size: 1.5rem;
--velt-tool-icon-color: var(--velt-neutral-4);
--velt-tool-border-radius: 50px;
--velt-tool-border-color: transparent;
--velt-tool-border: 2px solid var(--velt-tool-border-color);
--velt-tool-bg-color: transparent;

// default focus state
--velt-tool-focus-icon-size: var(--velt-tool-icon-size);
--velt-tool-focus-icon-color: var(--velt-tool-icon-color);
--velt-tool-focus-border-radius: var(--velt-tool-border-radius);
--velt-tool-focus-border-color: var(--velt-neutral-7);
--velt-tool-focus-border: 2px solid var(--velt-tool-focus-border-color);
--velt-tool-focus-bg-color: var(--velt-tool-bg-color);

// default hover state
--velt-tool-hover-icon-size: var(--velt-tool-icon-size);
--velt-tool-hover-icon-color: var(--velt-neutral-3);
--velt-tool-hover-border-radius: var(--velt-tool-border-radius);
--velt-tool-hover-border-color: var(--velt-neutral-7);
--velt-tool-hover-border: 2px solid var(--velt-tool-hover-border-color);
--velt-tool-hover-bg-color: var(--velt-neutral-7);

// active state
--velt-tool-active-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-icon-color: var(--velt-neutral-9);
--velt-tool-active-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-border-color: var(--velt-purple);
--velt-tool-active-border: 2px solid var(--velt-tool-active-border-color);
--velt-tool-active-bg-color: var(--velt-purple);

// active focus state
--velt-tool-active-focus-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-focus-icon-color: var(--velt-tool-icon-color);
--velt-tool-active-focus-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-focus-border-color: rgba(255, 255, 255, 0.24);
--velt-tool-active-focus-border: 2px solid
    var(--velt-tool-active-focus-border-color);
--velt-tool-active-focus-bg-color: var(--velt-purple);

// active hover state
--velt-tool-active-hover-icon-size: var(--velt-tool-icon-size);
--velt-tool-active-hover-icon-color: var(--velt-tool-icon-color);
--velt-tool-active-hover-border-radius: var(--velt-tool-border-radius);
--velt-tool-active-hover-border-color: #433fa7;
--velt-tool-active-hover-border: 2px solid
    var(--velt-tool-active-hover-border-color);
--velt-tool-active-hover-bg-color: #433fa7;