@inkline/inkline/css/variables/elements.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 {
  /**
   * Code variables
   */
  --code--color: var(--color-red);
  --code--background: var(--color-gray-50);
  /**
   * Body variables
   */
  --body--background: var(--color-white);
  --body--color: var(--color-gray-900);
  /**
   * Grid variables
   */
  --grid--columns: 12;
  --grid--gutter: 28px;
  --grid--xs--gutter: calc(var(--grid--gutter) * var(--size-multiplier-xs));
  --grid--xs--width: 100%;
  --grid--sm--gutter: calc(var(--grid--gutter) * var(--size-multiplier-sm));
  --grid--sm--width: calc(var(--breakpoint-sm) - var(--grid--sm--gutter));
  --grid--md--gutter: calc(var(--grid--gutter) * var(--size-multiplier-md));
  --grid--md--width: calc(var(--breakpoint-md) - var(--grid--md--gutter));
  --grid--lg--gutter: calc(var(--grid--gutter) * var(--size-multiplier-lg));
  --grid--lg--width: calc(var(--breakpoint-lg) - var(--grid--lg--gutter));
  --grid--xl--gutter: calc(var(--grid--gutter) * var(--size-multiplier-xl));
  --grid--xl--width: calc(var(--breakpoint-xl) - var(--grid--xl--gutter));
  --grid--2xl--gutter: calc(var(--grid--gutter) * var(--size-multiplier-2xl));
  --grid--2xl--width: calc(var(--breakpoint-2xl) - var(--grid--2xl--gutter));
  /**
   * D1 variables
   */
  --d1--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-5));
  /**
   * D2 variables
   */
  --d2--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-4));
  /**
   * D3 variables
   */
  --d3--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-3));
  /**
   * D4 variables
   */
  --d4--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-2));
  /**
   * D5 variables
   */
  --d5--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-1));
  /**
   * D6 variables
   */
  --d6--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5));
  /**
   * H1 variables
   */
  --h1--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5));
  /**
   * H2 variables
   */
  --h2--font-size: calc(var(--font-size) * var(--scale-ratio-pow-4));
  /**
   * H3 variables
   */
  --h3--font-size: calc(var(--font-size) * var(--scale-ratio-pow-3));
  /**
   * H4 variables
   */
  --h4--font-size: calc(var(--font-size) * var(--scale-ratio-pow-2));
  /**
   * H5 variables
   */
  --h5--font-size: calc(var(--font-size) * var(--scale-ratio-pow-1));
  /**
   * H6 variables
   */
  --h6--font-size: var(--font-size);
}