@inkline/inkline/css/variables/scale-ratio.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

:root {
  /**
   * Scale ratio variables
   */
  --scale-ratio-minor-second: 1.067;
  --scale-ratio-major-second: 1.125;
  --scale-ratio-minor-third: 1.2;
  --scale-ratio-major-third: 1.25;
  --scale-ratio-perfect-fourth: 1.333;
  --scale-ratio-augmented-fourth: 1.414;
  --scale-ratio-perfect-fifth: 1.5;
  --scale-ratio-golden: 1.618;
  --scale-ratio: var(--scale-ratio-minor-third);
  --scale-ratio-pow-1: var(--scale-ratio);
  --scale-ratio-pow-2: calc(var(--scale-ratio-pow-1) * var(--scale-ratio));
  --scale-ratio-pow-3: calc(var(--scale-ratio-pow-2) * var(--scale-ratio));
  --scale-ratio-pow-4: calc(var(--scale-ratio-pow-3) * var(--scale-ratio));
  --scale-ratio-pow-5: calc(var(--scale-ratio-pow-4) * var(--scale-ratio));
  --scale-ratio-pow-6: calc(var(--scale-ratio-pow-5) * var(--scale-ratio));
}