// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

// Usage: ../typography/_typography.clarity.scss
$clr-fontSkipBase64: false !default;
$clr-font: Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif !default; //Default font stack for Clarity

// Usage: ../data/datagrid/_datagrid.clarity.scss
// Usage: ../typography/_typography.clarity.scss
// @deprecated in 2.0 $clr-app-font-color-primary to be replaced by $clr-global-font-color
$clr-app-font-color-primary: $clr-global-font-color !default;

$clr-altFont: $clr-font !default; //TODO: TBD. Alternative font for Clarity

// Usage: ../code/syntax-highlight/_code.clarity.scss
// @deprecated in 1.0 $clr-monoFont only used in removed code component
$clr-monoFont: Consolas, Monaco, Courier, monospace !default;

// Usage: ../typography/_typography.clarity.scss
// Usage: ../utils/_helpers.clarity.scss
$clr-font-base-size: 14 !default; // Moved to general for now. Needs a better general name

$clr-font-weight-light: 200 !default;
$clr-font-weight-regular: 400 !default;
$clr-font-weight-semibold: 500 !default;
$clr-font-weight-bold: 600 !default;
$clr-font-weight-extrabold: 600 !default;

// @deprecated in 2.0 $clr-font-weights could not be removed because it is public
// in the overwrites file. it had to be deprecated first
$clr-font-weights: (
  light: $clr-font-weight-light,
  regular: $clr-font-weight-regular,
  semibold: $clr-font-weight-semibold,
  bold: $clr-font-weight-bold
) !default;

$clr-kerning-lotsatext: normal !default; // 14px, but a lot of it
$clr-kerning-smalltext: normal !default; // 14px-12px
$clr-kerning-bigtext: 0.01em !default; // some types of 16px over dark background
$clr-kerning-tinytext: 0.03em !default; // 11px and lower
$clr-typography-lightfont: $clr-font-weight-light;
$clr-typography-regfont: $clr-font-weight-regular;
$clr-typography-sboldfont: $clr-font-weight-semibold;
$clr-typography-boldfont: $clr-font-weight-bold;

// Paragraphs
$clr-typography-smalltext: 0.541667rem !default; // 13px
$clr-typography-xsmalltext: 0.5rem !default; // 12px
$clr-typography-xxsmalltext: 0.458333rem !default; // 11px
$clr-typography-tinytext: 0.416667rem !default; // 10px

$clr-global-typography-margin-top: 1rem !default;
$clr-global-typography-margin-bottom: 0 !default;

// Header styles
//H1 - login_productName
$clr-h1-color: $clr-global-content-header-font-color !default;
$clr-h1-font-weight: $clr-typography-lightfont !default;
$clr-h1-font-family: $clr-altFont !default;
$clr-h1-font-size: 1.333333rem !default;
$clr-h1-letter-spacing: normal !default;
$clr-h1-line-height: 2rem !default;

//H2 - login_trademark, page_mainHeading
$clr-h2-color: $clr-global-content-header-font-color !default;
$clr-h2-font-weight: $clr-typography-lightfont !default;
$clr-h2-font-family: $clr-altFont !default;
$clr-h2-font-size: 1.166667rem !default;
$clr-h2-letter-spacing: normal !default;
$clr-h2-line-height: 2rem !default;

//H3 - login_subtitle, modal_header, page_secondaryHeading
$clr-h3-color: $clr-global-content-header-font-color !default;
$clr-h3-font-weight: $clr-typography-lightfont !default;
$clr-h3-font-family: $clr-altFont !default;
$clr-h3-font-size: 0.916667rem !default;
$clr-h3-letter-spacing: normal !default;
$clr-h3-line-height: 1rem !default;

//H4 - card titles, page_tertiaryHeading
$clr-h4-color: $clr-global-content-header-font-color !default;
$clr-h4-font-weight: $clr-typography-lightfont !default;
$clr-h4-font-family: $clr-altFont !default;
$clr-h4-font-size: 0.75rem !default;
$clr-h4-letter-spacing: normal !default;
$clr-h4-line-height: 1rem !default;

//H5 - dgrid placeholder, datagrid_column_toggle_title, form_block_label, nav_title, page_introParagraph, page_sectionHeader
$clr-h5-color: $clr-global-font-color !default;
$clr-h5-font-weight: $clr-typography-regfont !default;
$clr-h5-font-family: $clr-altFont !default;
$clr-h5-font-size: 0.666667rem !default;
$clr-h5-letter-spacing: $clr-kerning-bigtext !default;
$clr-h5-line-height: 1rem !default;

//H6 - sidenav_sectionHeader, toc_header
$clr-h6-color: $clr-color-neutral-900 !default;
$clr-h6-font-weight: $clr-typography-sboldfont !default;
$clr-h6-font-family: $clr-altFont !default;
$clr-h6-font-size: 0.583333rem !default;
$clr-h6-letter-spacing: $clr-kerning-smalltext !default;
$clr-h6-line-height: 1rem !default;

// Non-header text styles
//P0 - Intro text
$clr-p0-color: $clr-global-font-color !default;
$clr-p0-font-weight: $clr-typography-lightfont !default;
$clr-p0-font-size: 0.833333rem !default;
$clr-p0-letter-spacing: normal !default;
$clr-p0-line-height: 1rem !default;

//P1 - card text, dropdown_text, page_bodyText, sidenav_text, tab_text, toc_text
$clr-p1-color: $clr-global-font-color !default;
$clr-p1-font-weight: $clr-typography-regfont !default;
$clr-p1-font-size: 0.583333rem !default;
$clr-p1-letter-spacing: $clr-kerning-lotsatext !default;
$clr-p1-line-height: 1rem !default;

//P2 - form_label, stackview_header
$clr-p2-color: $clr-global-font-color !default;
$clr-p2-font-weight: $clr-typography-sboldfont !default;
$clr-p2-font-size: $clr-typography-smalltext !default;
$clr-p2-letter-spacing: $clr-kerning-smalltext !default;
$clr-p2-line-height: 1rem !default;

//P3 - alerts, form_group_fields, stackview_text, table_text, tooltip_text
$clr-p3-color: $clr-global-font-color !default;
$clr-p3-font-weight: $clr-typography-regfont !default;
$clr-p3-font-size: $clr-typography-smalltext !default;
$clr-p3-letter-spacing: $clr-kerning-smalltext !default;
$clr-p3-line-height: 1rem !default;

//P4 - small alerts, dropdown_header, vertical_nav_header
$clr-p4-color: $clr-global-font-color !default;
$clr-p4-font-weight: $clr-typography-boldfont !default;
$clr-p4-font-size: $clr-typography-xsmalltext !default;
$clr-p4-letter-spacing: $clr-kerning-smalltext !default;
$clr-p4-line-height: 1rem !default;

//P5
$clr-p5-color: $clr-global-font-color !default;
$clr-p5-font-weight: $clr-typography-regfont !default;
$clr-p5-font-size: $clr-typography-xsmalltext !default;
$clr-p5-letter-spacing: $clr-kerning-smalltext !default;
$clr-p5-line-height: 1rem !default;

//P6 - card link btns, form_subtext, table_header
$clr-p6-color: $clr-global-font-color !default;
$clr-p6-font-weight: $clr-typography-boldfont !default;
$clr-p6-font-size: $clr-typography-xxsmalltext !default;
$clr-p6-letter-spacing: $clr-kerning-tinytext !default;
$clr-p6-line-height: 0.5rem !default;

//P7 - label_text
$clr-p7-color: $clr-global-font-color !default;
$clr-p7-font-weight: $clr-typography-regfont !default;
$clr-p7-font-size: $clr-typography-xxsmalltext !default;
$clr-p7-letter-spacing: $clr-kerning-tinytext !default;
$clr-p7-line-height: 0.5rem !default;

//P8
$clr-p8-color: $clr-global-font-color !default;
$clr-p8-font-weight: $clr-typography-regfont !default;
$clr-p8-font-size: $clr-typography-tinytext !default;
$clr-p8-letter-spacing: $clr-kerning-tinytext !default;
$clr-p8-line-height: 0.5rem !default;