_font-stacks.scss

@charset "UTF-8";

/// A variable that outputs a Helvetica font stack.
///
/// @link https://goo.gl/uSJvZe
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-helvetica;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
///   }

$font-stack-helvetica: (
  "Helvetica Neue",
  "Helvetica",
  "Arial",
  sans-serif,
);

/// A variable that outputs a Lucida Grande font stack.
///
/// @link https://goo.gl/R5UyYE
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-lucida-grande;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", "Verdana", sans-serif;
///   }

$font-stack-lucida-grande: (
  "Lucida Grande",
  "Lucida Sans Unicode",
  "Geneva",
  "Verdana",
  sans-serif,
);

/// A variable that outputs a Verdana font stack.
///
/// @link https://goo.gl/yGXWSS
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-verdana;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Verdana", "Geneva", sans-serif;
///   }

$font-stack-verdana: (
  "Verdana",
  "Geneva",
  sans-serif,
);

/// A variable that outputs a system font stack.
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-system;
///   }
///
///   // CSS Output
///   .element {
///     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
///   }

$font-stack-system: (
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Avenir Next",
  "Avenir",
  "Segoe UI",
  "Lucida Grande",
  "Helvetica Neue",
  "Helvetica",
  "Fira Sans",
  "Roboto",
  "Noto",
  "Droid Sans",
  "Cantarell",
  "Oxygen",
  "Ubuntu",
  "Franklin Gothic Medium",
  "Century Gothic",
  "Liberation Sans",
  sans-serif,
);

/// A variable that outputs a Garamond font stack.
///
/// @link https://goo.gl/QQFEkV
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-garamond;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Garamond", "Baskerville", "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
///   }

$font-stack-garamond: (
  "Garamond",
  "Baskerville",
  "Baskerville Old Face",
  "Hoefler Text",
  "Times New Roman",
  serif,
);

/// A variable that outputs a Georgia font stack.
///
/// @link https://goo.gl/wtzVPy
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-georgia;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Georgia", "Times", "Times New Roman", serif;
///   }

$font-stack-georgia: (
  "Georgia",
  "Times",
  "Times New Roman",
  serif,
);

/// A variable that outputs a Hoefler Text font stack.
///
/// @link https://goo.gl/n7U7zx
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-hoefler-text;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Hoefler Text", "Baskerville Old Face", "Garamond", "Times New Roman", serif;
///   }

$font-stack-hoefler-text: (
  "Hoefler Text",
  "Baskerville Old Face",
  "Garamond",
  "Times New Roman",
  serif,
);

/// A variable that outputs a Consolas font stack.
///
/// @link https://goo.gl/iKrtqv
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-consolas;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Consolas", "monaco", monospace;
///   }

$font-stack-consolas: (
  "Consolas",
  "monaco",
  monospace,
);

/// A variable that outputs a Courier New font stack.
///
/// @link https://goo.gl/bHfWMP
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-courier-new;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Courier New", "Courier", "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
///   }

$font-stack-courier-new: (
  "Courier New",
  "Courier",
  "Lucida Sans Typewriter",
  "Lucida Typewriter",
  monospace,
);

/// A variable that outputs a Monaco font stack.
///
/// @link https://goo.gl/9PgKDO
///
/// @type list
///
/// @example scss
///   .element {
///     font-family: $font-stack-monaco;
///   }
///
///   // CSS Output
///   .element {
///     font-family: "Monaco", "Consolas", "Lucida Console", monospace;
///   }

$font-stack-monaco: (
  "Monaco",
  "Consolas",
  "Lucida Console",
  monospace,
);