Components 1.2.2

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

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Override component-level CSS variables after the core stylesheet.
Prefer token-level changes when many components should shift together.

When not

Do not copy entire component CSS into apps if a variable override suffices.

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="velin-alert velin-alert--info"
     style="--velin-alert-padding: 1.5rem; --velin-alert-radius: 1rem">
  Custom padded and rounded alert.
</div>

<button class="velin-btn velin-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);
}