This list is generated from the Velt SDK. If a variable isn’t listed here, it doesn’t exist; don’t guess names. Coverage is complete for comments, notifications, and core theming (palette, spacing, type, radius); variables for other component clusters (view-analytics, recorder, huddle, video-editor, cursor, …) are summarized rather than enumerated.
CSS). Variables cross the shadow DOM; class CSS needs shadowDom={false} or injectCustomCss (see the shadowDom rule).
- Modern
--velt-*: use these. - Legacy
--legacy-velt-*: older surfaces only.
This lists the--velt-*properties intended for theming; a small number of internal/feature-scoped names exist in source but are not meant to be overridden directly. Two value shapes appear: colon-defined vars (--velt-x: <default>, listed with their default) and settable hooks consumed viavar(--velt-x, <fallback>)with no source default (noted inline).
Modern --velt-*
Active (theme-resolved) color tokens
These are the live tokens components actually read. Each resolves to its--velt-light-mode-*value (or--velt-dark-mode-*under[data-velt-theme="dark"]). Override a single token to retheme everywhere it’s used; override thelight-mode/dark-modepair to retheme per theme.
--velt-accent: var(--velt-light-mode-accent) / var(--velt-dark-mode-accent)
--velt-accent-foreground: var(--velt-*-mode-accent-foreground)
--velt-accent-hover: var(--velt-*-mode-accent-hover)
--velt-accent-light: var(--velt-*-mode-accent-light)
--velt-accent-text: var(--velt-*-mode-accent-text)
--velt-accent-transparent: var(--velt-*-mode-accent-transparent)
--velt-animation-transparent: var(--velt-*-mode-animation-transparent)
--velt-background-0: var(--velt-*-mode-background-0)
--velt-background-1: var(--velt-*-mode-background-1)
--velt-background-2: var(--velt-*-mode-background-2)
--velt-background-3: var(--velt-*-mode-background-3)
--velt-background-4: var(--velt-*-mode-background-4)
--velt-background-5: var(--velt-*-mode-background-5)
--velt-background-6: var(--velt-*-mode-background-6)
--velt-background-7: var(--velt-*-mode-background-7)
--velt-background-8: var(--velt-*-mode-background-8)
--velt-background-9: var(--velt-*-mode-background-9)
--velt-background-10: var(--velt-*-mode-background-10)
--velt-background-transparent: var(--velt-*-mode-background-transparent)
--velt-border-0: var(--velt-*-mode-border-0)
--velt-border-1: var(--velt-*-mode-border-1)
--velt-border-2: var(--velt-*-mode-border-2)
--velt-border-3: var(--velt-*-mode-border-3)
--velt-border-4: var(--velt-*-mode-border-4)
--velt-border-5: var(--velt-*-mode-border-5)
--velt-border-6: var(--velt-*-mode-border-6)
--velt-border-7: var(--velt-*-mode-border-7)
--velt-border-8: var(--velt-*-mode-border-8)
--velt-border-9: var(--velt-*-mode-border-9)
--velt-border-10: var(--velt-*-mode-border-10)
--velt-border-transparent: var(--velt-*-mode-border-transparent)
--velt-text-0: var(--velt-*-mode-text-0)
--velt-text-1: var(--velt-*-mode-text-1)
--velt-text-2: var(--velt-*-mode-text-2)
--velt-text-3: var(--velt-*-mode-text-3)
--velt-text-4: var(--velt-*-mode-text-4)
--velt-text-5: var(--velt-*-mode-text-5)
--velt-text-6: var(--velt-*-mode-text-6)
--velt-text-7: var(--velt-*-mode-text-7)
--velt-text-8: var(--velt-*-mode-text-8)
--velt-text-9: var(--velt-*-mode-text-9)
--velt-text-10: var(--velt-*-mode-text-10)
--velt-text-11: var(--velt-*-mode-text-11)
--velt-text-12: var(--velt-*-mode-text-12)
--velt-black: var(--velt-*-mode-black)
--velt-white: var(--velt-*-mode-white)
--velt-gray: var(--velt-*-mode-gray)
--velt-green: var(--velt-*-mode-green)
--velt-amber: var(--velt-*-mode-amber)
--velt-cyan: var(--velt-*-mode-cyan)
--velt-magenta: var(--velt-*-mode-magenta)
--velt-orange: var(--velt-*-mode-orange)
--velt-purple: var(--velt-*-mode-purple)
--velt-error: var(--velt-*-mode-error)
--velt-error-foreground: var(--velt-*-mode-error-foreground)
--velt-error-hover: var(--velt-*-mode-error-hover)
--velt-error-light: var(--velt-*-mode-error-light)
--velt-error-transparent: var(--velt-*-mode-error-transparent)
--velt-success: var(--velt-*-mode-success)
--velt-success-foreground: var(--velt-*-mode-success-foreground)
--velt-success-hover: var(--velt-*-mode-success-hover)
--velt-success-light: var(--velt-*-mode-success-light)
--velt-success-transparent: var(--velt-*-mode-success-transparent)
--velt-warning: var(--velt-*-mode-warning)
--velt-warning-foreground: var(--velt-*-mode-warning-foreground)
--velt-warning-hover: var(--velt-*-mode-warning-hover)
--velt-warning-light: var(--velt-*-mode-warning-light)
--velt-warning-transparent: var(--velt-*-mode-warning-transparent)
Spacing
--velt-base-rem-unit: 1 (global multiplier applied to the rem-based scales below; raise/lower it to scale all Velt spacing/type at once)
--velt-spacing-2xl: 1.5rem /* 24px */
--velt-spacing-2xs: 0.125rem /* 2px */
--velt-spacing-3xl: 80px
--velt-spacing-lg: 1rem /* 16px */
--velt-spacing-md: 0.75rem /* 12px */
--velt-spacing-sm: 0.5rem /* 8px */
--velt-spacing-xl: 1.25rem /* 20px */
--velt-spacing-xs: 0.25rem /* 4px */
Border radius
--velt-border-radius-2xl: 1.5rem /* 24px */
--velt-border-radius-2xs: 0.125rem /* 2px */
--velt-border-radius-3xl: 2rem /* 32px */
--velt-border-radius-full: 5rem /* 80px */
--velt-border-radius-lg: 1rem /* 16px */
--velt-border-radius-md: 0.75rem /* 12px */
--velt-border-radius-sm: 0.5rem /* 8px */
--velt-border-radius-xl: 1.25rem /* 20px */
--velt-border-radius-xs: 0.25rem /* 4px */
Font
--velt-default-font-family: sans-serif
--velt-font-size-2xl: 2rem /* 32px */
--velt-font-size-2xs: 0.625rem /* 10px */
--velt-font-size-lg: 1.5rem /* 24px */
--velt-font-size-md: 1rem /* 16px */
--velt-font-size-sm: 0.875rem /* 14px */
--velt-font-size-xl: 1.75rem /* 28px */
--velt-font-size-xs: 0.75rem /* 12px */
Font weights
Consumed via font-weight: var(--velt-font-weight-N). No literal default in source: set to the numeric weight you want.
--velt-font-weight-400 (regular)
--velt-font-weight-500 (medium)
--velt-font-weight-600 (semibold)
Icon sizes
--Icon-Size-Large: 24px
--Icon-Size-Medium: 16px
--Icon-Size-Small: 12px
Light mode
--velt-light-mode-accent-foreground: #FFFFFF
--velt-light-mode-accent-hover: #534FCF
--velt-light-mode-accent-light: #F2F2FE
--velt-light-mode-accent-text: #625DF5
--velt-light-mode-accent-transparent: rgba(148, 145, 248, 0.08)
--velt-light-mode-accent: #625DF5
--velt-light-mode-amber: #FF7162
--velt-light-mode-animation-transparent: rgba(255, 255, 255, 0.2)
--velt-light-mode-background-0: #FFFFFF
--velt-light-mode-background-1: #FAFAFA
--velt-light-mode-background-10: #CCCCCC
--velt-light-mode-background-2: #F5F5F5
--velt-light-mode-background-3: #F0F0F0
--velt-light-mode-background-4: #EBEBEB
--velt-light-mode-background-5: #E5E5E5
--velt-light-mode-background-6: #E0E0E0
--velt-light-mode-background-7: #DBDBDB
--velt-light-mode-background-8: #D6D6D6
--velt-light-mode-background-9: #D1D1D1
--velt-light-mode-background-transparent: rgba(255, 255, 255, 0.80)
--velt-light-mode-black: #080808
--velt-light-mode-border-0: #FFFFFF
--velt-light-mode-border-1: #FAFAFA
--velt-light-mode-border-10: #CCCCCC
--velt-light-mode-border-2: #F5F5F5
--velt-light-mode-border-3: #F0F0F0
--velt-light-mode-border-4: #EBEBEB
--velt-light-mode-border-5: #E5E5E5
--velt-light-mode-border-6: #E0E0E0
--velt-light-mode-border-7: #DBDBDB
--velt-light-mode-border-8: #D6D6D6
--velt-light-mode-border-9: #D1D1D1
--velt-light-mode-border-transparent: rgba(0, 0, 0, 0.16)
--velt-light-mode-cyan: #4BC9F0
--velt-light-mode-error-foreground: #FFFFFF
--velt-light-mode-error-hover: #DE5041
--velt-light-mode-error-light: #FFF4F2
--velt-light-mode-error-transparent: rgba(255, 113, 98, 0.08)
--velt-light-mode-error: #FF7162
--velt-light-mode-gray: #EBEBEB
--velt-light-mode-green: #0DCF82
--velt-light-mode-magenta: #A259FE
--velt-light-mode-orange: #FE965C
--velt-light-mode-purple: #625DF5
--velt-light-mode-success-foreground: #FFFFFF
--velt-light-mode-success-hover: #006B41
--velt-light-mode-success-light: #EDF6F3
--velt-light-mode-success-transparent: rgba(25, 143, 101, 0.08)
--velt-light-mode-success: #198F65
--velt-light-mode-text-0: #0A0A0A
--velt-light-mode-text-1: #141414
--velt-light-mode-text-10: #B8B8B8
--velt-light-mode-text-11: #A3A3A3
--velt-light-mode-text-12: #8F8F8F
--velt-light-mode-text-2: #1F1F1F
--velt-light-mode-text-3: #292929
--velt-light-mode-text-4: #3D3D3D
--velt-light-mode-text-5: #525252
--velt-light-mode-text-6: #666666
--velt-light-mode-text-7: #7A7A7A
--velt-light-mode-text-8: #858585
--velt-light-mode-text-9: #999999
--velt-light-mode-warning-foreground: #474747
--velt-light-mode-warning-hover: #C69400
--velt-light-mode-warning-light: #FFFBEE
--velt-light-mode-warning-transparent: rgba(255, 205, 46, 0.08)
--velt-light-mode-warning: #FFCD2E
--velt-light-mode-white: #FFFFFF
Dark mode
--velt-dark-mode-accent-foreground: #FFFFFF
--velt-dark-mode-accent-hover: #534FCF
--velt-dark-mode-accent-light: #F2F2FE
--velt-dark-mode-accent-text: #9491F8
--velt-dark-mode-accent-transparent: rgba(148, 145, 248, 0.08)
--velt-dark-mode-accent: #625DF5
--velt-dark-mode-amber: #FF7162
--velt-dark-mode-animation-transparent: rgba(255, 255, 255, 0.2)
--velt-dark-mode-background-0: #0F0F0F
--velt-dark-mode-background-1: #1A1A1A
--velt-dark-mode-background-10: #474747
--velt-dark-mode-background-2: #1F1F1F
--velt-dark-mode-background-3: #242424
--velt-dark-mode-background-4: #292929
--velt-dark-mode-background-5: #2E2E2E
--velt-dark-mode-background-6: #333333
--velt-dark-mode-background-7: #383838
--velt-dark-mode-background-8: #3D3D3D
--velt-dark-mode-background-9: #424242
--velt-dark-mode-background-transparent: rgba(0, 0, 0, 0.80)
--velt-dark-mode-black: #080808
--velt-dark-mode-border-0: #0F0F0F
--velt-dark-mode-border-1: #1A1A1A
--velt-dark-mode-border-10: #474747
--velt-dark-mode-border-2: #1F1F1F
--velt-dark-mode-border-3: #242424
--velt-dark-mode-border-4: #292929
--velt-dark-mode-border-5: #2E2E2E
--velt-dark-mode-border-6: #333333
--velt-dark-mode-border-7: #383838
--velt-dark-mode-border-8: #3D3D3D
--velt-dark-mode-border-9: #424242
--velt-dark-mode-border-transparent: rgba(255, 255, 255, 0.16)
--velt-dark-mode-cyan: #4BC9F0
--velt-dark-mode-error-foreground: #FFFFFF
--velt-dark-mode-error-hover: #DE5041
--velt-dark-mode-error-light: #FFF4F2
--velt-dark-mode-error-transparent: rgba(255, 113, 98, 0.08)
--velt-dark-mode-error: #FF7162
--velt-dark-mode-gray: #EBEBEB
--velt-dark-mode-green: #0DCF82
--velt-dark-mode-magenta: #A259FE
--velt-dark-mode-orange: #FE965C
--velt-dark-mode-purple: #625DF5
--velt-dark-mode-success-foreground: #FFFFFF
--velt-dark-mode-success-hover: #006B41
--velt-dark-mode-success-light: #EDF6F3
--velt-dark-mode-success-transparent: rgba(25, 143, 101, 0.08)
--velt-dark-mode-success: #198F65
--velt-dark-mode-text-0: #FFFFFF
--velt-dark-mode-text-1: #F5F5F5
--velt-dark-mode-text-10: #525252
--velt-dark-mode-text-11: #474747
--velt-dark-mode-text-12: #3D3D3D
--velt-dark-mode-text-2: #EBEBEB
--velt-dark-mode-text-3: #E0E0E0
--velt-dark-mode-text-4: #D6D6D6
--velt-dark-mode-text-5: #C2C2C2
--velt-dark-mode-text-6: #ADADAD
--velt-dark-mode-text-7: #8F8F8F
--velt-dark-mode-text-8: #7A7A7A
--velt-dark-mode-text-9: #666666
--velt-dark-mode-warning-foreground: #474747
--velt-dark-mode-warning-hover: #C69400
--velt-dark-mode-warning-light: #FFFBEE
--velt-dark-mode-warning-transparent: rgba(255, 205, 46, 0.08)
--velt-dark-mode-warning: #FFCD2E
--velt-dark-mode-white: #FFFFFF
Surface & text aliases
Semantic aliases components read in newer surfaces. Resolved from the active theme palette; no literal fallback is documented here.
--velt-surface-0 : base surface fill (used in color-mix for translucent surfaces)
--velt-text-primary : primary text color
--velt-text-secondary-color : secondary text color
--velt-bg-2 : elevated background fill (e.g. composer format toolbar)
--velt-bg-3 : higher-elevation background fill (e.g. toolbar buttons)
--velt-hover-background : hover background fill
--velt-component-foreground-on-active / white : foreground color when a component is in the active state
Legacy flat aliases
Older flat token names still referenced in a few surfaces. Each carries a literal fallback.
--velt-bg-color: #07054C
--velt-bg-color-active: #f44b64
--velt-font-color: #ffffff
--velt-font-color-active: #ffffff
--velt-border: 1px solid #ffffff30
--velt-border-radius: 0.5rem
--velt-icon-size: 1rem
--velt-padding: 6px
--velt-error-color / #dc3545
--velt-gray-100 / #f3f4f6
--velt-gray-500 / #6b7280
--velt-gray-700 / #374151
--velt-primary-500 / #6366f1
Dropdown
Resolved from the active theme palette.
--velt-dropdown-background: var(--velt-*-mode-background-0)
--velt-dropdown-border: var(--velt-*-mode-border-4)
--velt-dropdown-hover: var(--velt-*-mode-background-3)
--velt-dropdown-accent-transparent: var(--velt-*-mode-accent-transparent)
Skeleton loader
Set inline by the skeleton-loader component; override to size/shape loaders.
--velt-skeleton-loader-width (default: 100%)
--velt-skeleton-loader-height (default: 100%)
--velt-skeleton-loader-border-radius (default: inherit)
Comment pin
Per-component theming layer for the pin marker, its index/number badge, and the per-variant count-bubble offsets. Note:--velt-comment-pin-background-colordoes not exist; the pin fill variable is--velt-comment-pin-bg-color(defaultvar(--velt-purple)=#625DF5).
--velt-comment-pin-bg-color: var(--velt-purple) : pin fill color
--velt-comment-pin-border : pin border shorthand
--velt-comment-pin-border-color : pin border color
--velt-comment-pin-border-width : pin border width
--velt-comment-pin-border-radius : pin corner radius
--velt-comment-pin-box-shadow : pin drop shadow
--velt-comment-pin-size : pin overall size
--velt-comment-pin-avatar-size : avatar size inside the pin
--velt-comment-pin-ghost-color : ghost (unsaved) pin color
--velt-comment-pin-popover-color : pin popover color
--velt-comment-pin-index-bg : numeric index badge background
--velt-comment-pin-index-border : index badge border
--velt-comment-pin-index-color : index badge text color
--velt-comment-pin-index-font-size : index badge font size
--velt-comment-pin-bubble-size : reply-count bubble size
--velt-comment-pin-bubble-border-radius : count bubble radius
--velt-comment-pin-bubble-offset-top / -bottom / -left / -right : count bubble position offsets
--velt-comment-pin-3-digit-bubble-size : 3-digit count bubble size
--velt-comment-pin-3-digit-bubble-border-radius : 3-digit bubble radius
--velt-comment-pin-3-digit-bubble-offset-top / -bottom / -left / -right : 3-digit bubble offsets
--velt-ghost-comment-pin-bubble-size : ghost-pin bubble size
--velt-ghost-comment-pin-bubble-offset-top / -bottom / -left / -right : ghost-pin bubble offsets
--velt-private-comment-pin-bubble-size : private-pin bubble size
--velt-private-comment-pin-bubble-offset-top / -bottom / -left / -right : private-pin bubble offsets
--velt-different-device-comment-pin-size : pin size when placed by a different device
--velt-different-device-ghost-comment-pin-bubble-size : different-device ghost-pin bubble size
--velt-different-device-ghost-comment-pin-bubble-offset-top / -bottom / -left / -right : different-device ghost-pin bubble offsets
--velt-different-device-private-comment-pin-bubble-size : different-device private-pin bubble size
--velt-different-device-private-comment-pin-bubble-offset-top / -bottom / -left / -right : different-device private-pin bubble offsets
Settable hooks (no colon default in source: consumed with a fallback):
--velt-comment-pin-transform (settable hook; fallback `none`): extra transform applied to the pin
--velt-line-clamp (settable hook; fallback `4`): max lines before comment text truncates
Comment dialog
Per-component theming layer for the comment dialog shell, header, embedded composer wrapper, email/mention chips, and the private-comment indicator.
--velt-comment-dialog-bg-color : dialog background
--velt-comment-dialog-color : primary text color
--velt-comment-dialog-secondary-color : secondary / muted text color
--velt-comment-dialog-border : dialog border shorthand
--velt-comment-dialog-border-color : dialog border color
--velt-comment-dialog-border-radius : dialog corner radius
--velt-comment-dialog-box-shadow : dialog drop shadow
--velt-comment-dialog-padding : dialog inner padding
--velt-comment-dialog-gap : gap between dialog sections
--velt-comment-dialog-font-size : base font size
--velt-comment-dialog-hyperlink-color : link text color
--velt-comment-dialog-input-wrap-bg-color : composer/input wrapper background (the dialog's embedded composer)
--velt-comment-dialog-reply-container-bg-color : reply container background
--velt-comment-dialog-header-bg-color : header background
--velt-comment-dialog-header-border-radius : header corner radius
--velt-comment-dialog-header-gap : header inner gap
--velt-comment-dialog-header-margin : header margin
--velt-comment-dialog-header-padding : header padding
--velt-comment-dialog-email-chip-bg-color : email mention chip background
--velt-comment-dialog-email-chip-border-radius : email chip radius
--velt-comment-dialog-email-chip-highlight-color : email chip highlight color
--velt-comment-dialog-email-chip-padding : email chip padding
--velt-comment-dialog-email-link-color : email link color
--velt-comment-dialog-private-comment-header-bg-color : private-comment header background
--velt-comment-dialog-private-indicator-bg-color : private indicator badge background
--velt-comment-dialog-private-indicator-color : private indicator text color
--velt-comment-dialog-private-indicator-border : private indicator border
--velt-comment-dialog-private-indicator-border-radius : private indicator radius
--velt-comment-dialog-private-indicator-font-size : private indicator font size
--velt-comment-dialog-private-indicator-font-weight : private indicator font weight
--velt-comment-dialog-private-indicator-gap : private indicator inner gap
--velt-comment-dialog-private-indicator-margin : private indicator margin
--velt-comment-dialog-private-indicator-padding : private indicator padding
The comment composer has no dedicated--velt-composer-*colon-defined theming vars; it reads the global tokens (--velt-accent,--velt-spacing-*,--velt-text-*,--velt-border-radius-*) plus--velt-comment-dialog-input-wrap-bg-colorabove.
Comments sidebar
Per-component theming layer for the comments-sidebar shell. The sidebar filter subtree has no dedicated --velt-*filter* vars: it inherits these plus the global tokens.
--velt-comments-sidebar-bg-color : sidebar background
--velt-comments-sidebar-border-color : sidebar border color
--velt-comments-sidebar-primary-color : primary text color
--velt-comments-sidebar-secondary-color : secondary text color
--velt-comments-sidebar-close-icon-color : close-icon color
Notifications panel
Per-component theming layer for the notifications panel: shell, tab bar, notification item, per-item text colors, and the people-group section.
--velt-notifications-panel-bg-color : panel background
--velt-notifications-panel-border : panel border shorthand
--velt-notifications-panel-border-radius : panel radius
--velt-notifications-panel-box-shadow : panel shadow
--velt-notifications-panel-padding : panel padding
--velt-notifications-panel-back-btn-color : back-button color
--velt-notifications-panel-action-divider-color : action divider color
--velt-notifications-panel-tab-color : tab text color
--velt-notifications-panel-tabs-bg-color : tab bar background
--velt-notifications-panel-selected-tab-bg-color : selected tab background
--velt-notifications-panel-comment-bg-color : notification item background
--velt-notifications-panel-comment-hover-bg-color : item hover background
--velt-notifications-panel-comment-headline-color : item headline color
--velt-notifications-panel-comment-headline-highlight-color : item headline highlight color
--velt-notifications-panel-comment-message-color : item message color
--velt-notifications-panel-comment-timestamp-color : item timestamp color
--velt-notifications-panel-user-name-color : user name color
--velt-notifications-panel-user-timestamp-color : user timestamp color
--velt-notifications-panel-people-group-primary-color : people-group primary color
--velt-notifications-panel-people-group-secondary-color : people-group secondary color
Notifications history / settings panel
Per-component theming layer for the notifications history (settings) panel: parallel to the notifications panel above, with its own header/close-icon and primary/secondary text colors.
--velt-notifications-history-panel-bg-color : panel background
--velt-notifications-history-panel-border-color : panel border color
--velt-notifications-history-panel-header-color : header text color
--velt-notifications-history-panel-close-icon-color : close-icon color
--velt-notifications-history-panel-primary-color : primary text color
--velt-notifications-history-panel-secondary-color : secondary text color
--velt-notifications-history-panel-tab-color : tab text color
--velt-notifications-history-panel-tabs-bg-color : tab bar background
--velt-notifications-history-panel-selected-tab-bg-color : selected tab background
--velt-notifications-history-panel-comment-bg-color : item background
--velt-notifications-history-panel-comment-hover-bg-color : item hover background
--velt-notifications-history-panel-comment-headline-color : item headline color
--velt-notifications-history-panel-comment-headline-highlight-color : item headline highlight color
--velt-notifications-history-panel-comment-message-color : item message color
--velt-notifications-history-panel-comment-timestamp-color : item timestamp color
--velt-notifications-history-panel-user-name-color : user name color
--velt-notifications-history-panel-user-timestamp-color : user timestamp color
--velt-notifications-history-panel-people-group-primary-color : people-group primary color
--velt-notifications-history-panel-people-group-secondary-color : people-group secondary color
Tool-button state matrix
The generic toolbar-button theming matrix (comments tool, sidebar button, etc.) keyed by state: base ·focus·hover·active·active-focus·active-hover. The base/focus/hover/activerows have--legacy-velt-tool-*twins (listed in the Legacy section below); theactive-focus/active-hoverrows are modern-only.
--velt-tool-bg-color / -border / -border-color / -border-radius / -icon-color / -icon-size / -padding : base (idle) state
--velt-tool-focus-bg-color / -border / -border-color / -border-radius / -icon-color / -icon-size : focus state
--velt-tool-hover-bg-color / -border / -border-color / -border-radius / -icon-color / -icon-size : hover state
--velt-tool-active-bg-color / -border / -border-color / -border-radius / -icon-color / -icon-size : active (selected) state
--velt-tool-active-focus-bg-color / -border / -border-color / -border-radius / -icon-color / -icon-size : active + focus
--velt-tool-active-hover-bg-color / -border / -border-color / -border-radius / -icon-color / -icon-size : active + hover
Comments tool (own vars, no legacy twin):
--velt-comment-tool-active-bg-color : active background
--velt-comment-tool-active-fill-color : active icon fill
--velt-comment-tool-hover-bg-color : hover background
--velt-comment-tool-icon-color : icon color
--velt-comment-tool-icon-size : icon size
--velt-comment-tool-border-radius : corner radius
Reaction tool (has --legacy-velt-reaction-tool-* twins):
--velt-reaction-tool-active-bg-color : active background
--velt-reaction-tool-active-fill-color : active icon fill
--velt-reaction-tool-hover-bg-color : hover background
--velt-reaction-tool-icon-color : icon color
--velt-reaction-tool-icon-size : icon size
--velt-reaction-tool-border-radius : corner radius
Agent suggestion (comment AI suggestions)
--velt-agent-accent: #4495ff : accent color for agent suggestion UI
--velt-agent-accent-transparent: rgba(68, 149, 255, 0.2)
--velt-agent-suggestion-max-height: 320px : max height of the suggestion panel
Z-index
--velt-arrow-z-index: 2147483557
--velt-comment-pin-z-index: 2147483557
--velt-comments-minimap-z-index: 2147483637
--velt-cursor-z-index: 2147483647
--velt-follow-mode-overlay-z-index: 2147483647
--velt-global-overlay-z-index: 2147483637
--velt-live-state-sync-overlay-z-index: 2147483647
--velt-persistent-comment-frame-z-index: 2147483647
--velt-recorder-player-z-index: 2147483557
--velt-toast-popup-z-index: 2147483647
Legacy --legacy-velt-*
Some legacy names appear twice: the second is the [data-velt-theme="dark"] override value.
--legacy-velt-avatar-size: 2rem
--legacy-velt-bg-color: var(--legacy-velt-bg-dark-color)
--legacy-velt-bg-color: var(--legacy-velt-neutral-8)
--legacy-velt-bg-dark-color: var(--legacy-velt-dark-1)
--legacy-velt-blue: #0d6efd
--legacy-velt-border-color: var(--legacy-velt-border-dark-color)
--legacy-velt-border-color: var(--legacy-velt-neutral-6)
--legacy-velt-border-dark-color: var(--legacy-velt-dark-3)
--legacy-velt-dark-1: #141416
--legacy-velt-dark-2: #222226
--legacy-velt-dark-3: #303034
--legacy-velt-dark-4: #404044
--legacy-velt-dark-5: #59595F
--legacy-velt-dark-6: #80808A
--legacy-velt-dark-7: #91919C
--legacy-velt-dark-8: #E5E5E9
--legacy-velt-dropdown-item-color: var(--legacy-velt-neutral-2)
--legacy-velt-dropdown-item-color: var(--legacy-velt-secondary-dark-color)
--legacy-velt-green: #0DCF82
--legacy-velt-grey-2-color: #D4D6DF
--legacy-velt-grey-2-color: var(--legacy-velt-grey-2-dark-color)
--legacy-velt-grey-2-dark-color: var(--legacy-velt-dark-4)
--legacy-velt-grey-4-color: #989898
--legacy-velt-grey-4-color: var(--legacy-velt-grey-4-dark-color)
--legacy-velt-grey-4-dark-color: var(--legacy-velt-dark-6)
--legacy-velt-grey-btn-color: var(--legacy-velt-neutral-5)
--legacy-velt-grey-btn-color: var(--legacy-velt-secondary-dark-color)
--legacy-velt-header-btn-color: var(--legacy-velt-neutral-3)
--legacy-velt-header-btn-color: var(--legacy-velt-secondary-dark-color)
--legacy-velt-hyperlink-color: var(--legacy-velt-purple)
--legacy-velt-hyperlink-color: var(--legacy-velt-secondary-dark-color)
--legacy-velt-neutral-0: #000000
--legacy-velt-neutral-1: #141416
--legacy-velt-neutral-2: #23262F
--legacy-velt-neutral-3: #353945
--legacy-velt-neutral-4: #777E90
--legacy-velt-neutral-5: #B1B5C3
--legacy-velt-neutral-6: #E6E8EC
--legacy-velt-neutral-7: #F4F5F6
--legacy-velt-neutral-8: #FCFCFD
--legacy-velt-neutral-9: #FFFFFF
--legacy-velt-orange: #ECB000
--legacy-velt-primary-btn-color: var(--legacy-velt-border-dark-color)
--legacy-velt-primary-btn-color: var(--legacy-velt-purple)
--legacy-velt-primary-color: var(--legacy-velt-dark-1)
--legacy-velt-primary-color: var(--legacy-velt-primary-dark-color)
--legacy-velt-primary-dark-color: var(--legacy-velt-dark-8)
--legacy-velt-purple: #625DF5
--legacy-velt-secondary-color: var(--legacy-velt-neutral-4)
--legacy-velt-secondary-color: var(--legacy-velt-secondary-dark-color)
--legacy-velt-secondary-dark-color: var(--legacy-velt-dark-7)
--legacy-velt-status-in-progress-color: #ECB000
--legacy-velt-status-open-color: #625DF5
--legacy-velt-status-resolved-color: #00C48C
--legacy-velt-tool-active-bg-color: var(--legacy-velt-purple)
--legacy-velt-tool-active-border-color: var(--legacy-velt-purple)
--legacy-velt-tool-active-border-radius: var(--legacy-velt-tool-border-radius)
--legacy-velt-tool-active-border: 2px solid var(--legacy-velt-tool-active-border-color)
--legacy-velt-tool-active-icon-color: var(--legacy-velt-neutral-9)
--legacy-velt-tool-active-icon-size: var(--legacy-velt-tool-icon-size)
--legacy-velt-tool-bg-color: transparent
--legacy-velt-tool-border-color: transparent
--legacy-velt-tool-border-radius: 50px
--legacy-velt-tool-border: 2px solid var(--legacy-velt-tool-border-color)
--legacy-velt-tool-focus-bg-color: var(--legacy-velt-tool-bg-color)
--legacy-velt-tool-focus-border-color: var(--legacy-velt-neutral-2)
--legacy-velt-tool-focus-border-color: var(--legacy-velt-neutral-7)
--legacy-velt-tool-focus-border-radius: var(--legacy-velt-tool-border-radius)
--legacy-velt-tool-focus-border: 2px solid var(--legacy-velt-tool-focus-border-color)
--legacy-velt-tool-focus-icon-color: var(--legacy-velt-tool-icon-color)
--legacy-velt-tool-focus-icon-size: var(--legacy-velt-tool-icon-size)
--legacy-velt-tool-hover-bg-color: var(--legacy-velt-neutral-1)
--legacy-velt-tool-hover-bg-color: var(--legacy-velt-neutral-7)
--legacy-velt-tool-hover-border-color: var(--legacy-velt-neutral-1)
--legacy-velt-tool-hover-border-color: var(--legacy-velt-neutral-7)
--legacy-velt-tool-hover-border-radius: var(--legacy-velt-tool-border-radius)
--legacy-velt-tool-hover-border: 2px solid var(--legacy-velt-tool-hover-border-color)
--legacy-velt-tool-hover-icon-color: var(--legacy-velt-neutral-3)
--legacy-velt-tool-hover-icon-color: var(--legacy-velt-neutral-5)
--legacy-velt-tool-hover-icon-size: var(--legacy-velt-tool-icon-size)
--legacy-velt-tool-icon-color: var(--legacy-velt-neutral-4)
--legacy-velt-tool-icon-size: 1.5rem
--legacy-velt-tool-padding: 6px