Components

Every VelinStyle component exposes its own set of CSS custom properties, making it easy to customize appearance without writing complex selectors or increasing specificity.

Token Architecture

Each component defines scoped variables that reference global tokens as defaults. This two-layer approach means global changes cascade down, but per-component overrides take priority:

.btn {
  --velin-btn-padding-x:   0.75rem;
  --velin-btn-padding-y:   0.375rem;
  --velin-btn-font-size:   var(--velin-fs-base);
  --velin-btn-font-weight: var(--velin-fw-medium);
  --velin-btn-radius:      var(--velin-radius);
  --velin-btn-bg:          transparent;
  --velin-btn-color:       var(--velin-body-color);
  --velin-btn-border:      var(--velin-border-color);

  padding: var(--velin-btn-padding-y) var(--velin-btn-padding-x);
  font-size: var(--velin-btn-font-size);
  font-weight: var(--velin-btn-font-weight);
  border-radius: var(--velin-btn-radius);
  background: var(--velin-btn-bg);
  color: var(--velin-btn-color);
  border: var(--velin-border-width) solid var(--velin-btn-border);
}

Customizing via CSS Variables

Override component variables globally or on specific instances:

/* Global: make all buttons rounder */
.btn {
  --velin-btn-radius: var(--velin-radius-pill);
}

/* Scoped: just this card has more padding */
.feature-card {
  --velin-card-padding: 2rem;
  --velin-card-radius: 1.5rem;
  --velin-card-shadow: var(--velin-shadow-lg);
}

Inline Style Overrides

For quick one-off changes, set component variables directly in the style attribute:

<div class="alert alert-info"
     style="--velin-alert-padding: 1.5rem; --velin-alert-radius: 1rem">
  Custom padded and rounded alert.
</div>

<button class="btn btn-primary"
        style="--velin-btn-padding-x: 2rem; --velin-btn-padding-y: 0.75rem">
  Large padded button
</button>

Custom padded and rounded alert.

Common Component Variables

Here are the CSS variables exposed by frequently used components:

Component	Key Variables
`.btn`	`--velin-btn-bg`, `--velin-btn-color`, `--velin-btn-border`, `--velin-btn-radius`, `--velin-btn-padding-x/y`
`.card`	`--velin-card-bg`, `--velin-card-padding`, `--velin-card-radius`, `--velin-card-shadow`, `--velin-card-border`
`.alert`	`--velin-alert-bg`, `--velin-alert-color`, `--velin-alert-border`, `--velin-alert-padding`, `--velin-alert-radius`
`.badge`	`--velin-badge-bg`, `--velin-badge-color`, `--velin-badge-radius`, `--velin-badge-padding`
`.modal`	`--velin-modal-bg`, `--velin-modal-width`, `--velin-modal-radius`, `--velin-modal-shadow`, `--velin-modal-backdrop`
`.form-control`	`--velin-input-bg`, `--velin-input-color`, `--velin-input-border`, `--velin-input-radius`, `--velin-input-padding`

Scoped Theming

You can scope component overrides to specific sections of a page. This is useful for landing page sections with different visual treatments:

.hero-section {
  --velin-btn-radius: var(--velin-radius-pill);
  --velin-btn-padding-x: 2rem;
  --velin-card-shadow: var(--velin-shadow-lg);
}

.footer-section {
  --velin-btn-radius: 0;
  --velin-link-color: var(--velin-gray-400);
}