Saltar a contenido

Frontend Styles

Variables

  • Use Ionic CSS variables: --ion-color-primary, --ion-text-color, --ion-background-color, --ion-color-step-*
  • Define new colors ONLY in src/theme/variables.scss or global.scss
  • Custom tokens prefixed with --pp-: --pp-margin-ok, --pp-margin-warn, --pp-margin-bad

Prohibitions

  • No hardcoded hex/rgb in component SCSS
  • Avoid !important unless overriding Ionic internals (and add comment explaining why)
  • No inline styles in templates

Breakpoints

  • 768px for tablet/desktop queries (consistent with denpora)
  • Use ion-split-pane when="lg" for desktop sidebar
  • Centralize modal styles in global.scss, not duplicated per component