Component Patterns

Core principle

Every component declares CSS custom properties at the top of its main selector, then consumes them via var(). State changes (hover, disabled, variants) override the variable, never the property. This creates one source of truth and enables runtime theming.

SCSS structure template

#{$ouds-root-selector} {
  --#{$prefix}my-comp-border-radius: #{$ouds-border-radius-default};
}