Fonts

API

Importing

font-mixins.scss - set of mixins that can be used to apply defined font styles or introduce custom changes; import it to your stylesheet to be able to style your enclosed component or apply custom font styles (@import "~@dynatrace/barista-components/style/font-mixins";).

font-styles.scss - stylesheet with rule-sets for all predefined use cases of font styles; import it to your stylesheet to have basic html tags styled automatically (@import "~@dynatrace/barista-components/style/font-styles";).

Usage

To use certain mixin simply include it in your rule-set:

.example {
  @include dt-main-font();
}
Default values

$monospace-font-family: 'VeraMonoWeb'

$default-font-family: 'BerninaSansWeb', 'OpenSans', sans-serif;

$default-font-color: #454646

$default-font-weight: normal

$default-font-size: 14px

$default-line-height: 1.6

Mixins for defined cases
Name Arguments Description Values
dt-main-font() line-height (optional) default, most basic font style font-family: $default-font-family;
font-size: $default-font-size;
font-weight: $default-font-weight;
line-height: $default-line-height; (default value)
color: $default-font-color;
dt-h1-font() line-height (optional) style for headings 1 font-family: $default-font-family;
font-size: fluid
- screen size 360px: 24px;
- screen size 1280px: 26.4px;
- screen size 1920px: 28px;
font-weight: 300;
line-height: $default-line-height; (default value)
color: $default-font-color;
dt-h2-font() line-height (optional) style for headings 2 font-family: $default-font-family;
font-size: 20px;
font-weight: 600;
line-height: $default-line-height; (default value)
color: $default-font-color;
dt-h3-font() line-height (optional) style for headings 3 font-family: $default-font-family;
font-size: 18px;
font-weight: $default-font-weight;
line-height: $default-line-height; (default value)
color: $default-font-color;
dt-label-font() line-height (optional) style for labels font-family: $default-font-family;
font-size: 12px;
font-weight: $default-font-weight;
line-height: $default-line-height; (default value)
color: $default-font-color;
dt-code-font() - style for code snippets font-family: $monospace-font-family;
font-size: $default-font-size;
font-weight: $default-font-weight;
line-height: $default-line-height;
color: $default-font-color;
Name Arguments Purpose Examples of use
dt-custom-font-styles(...) color*
font-weight*
font-size*
line-height*		 changing style-and-size-related properties dt-custom-font-styles(#facade, 700);
dt-custom-font-styles(#c0ffee, 700, 14px, 32px)
dt-custom-font-styles(false, 300)
dt-custom-font-styles($custom-font-weight: 300)

* - optional argument; NOTE: if not used but not last in order should be replaced by false; you can also use explicitly specified arguments not to worry about the order of arguments (see last example in the table above)

<a class="dt-link">Sample link</a>

API

Importing

Links are not Angular components, thus it's not necessary to import any module. However, make sure you include link.scss into your stylesheet (it's also automatically imported when using main.scss stylesheet).

Initialization

Link styles are automatically applied to any <a> tag.

Options

CSS classes
Name Description
fonticon-* Sets selected font-icon
dt-external Marks link as leading to outside the product (add external link icon)
theme--dark Set on the button itself or on any of its parent, changes button colors to be better visible on a dark background 
<a class="dt-link dt-external">External link</a>

Dark theme

<div class="dt-example-dark" dtTheme=":dark">
  <a class="dt-link">Link on a dark background</a>
  <br />
  <a class="dt-link dt-external">External link on a dark background</a>
</div>

Notification

The link can be used in any context and inherits the font size.

<div class="dt-example-notification">
  A new Dynatrace ActiveGate is available for you.
  <a class="dt-link">Upgrade now</a>
  to make sure you benefit from all the
  <a class="dt-link dt-external">new features and improvements</a>
</div>