@atlassian/aui/src/less/aui-page-typography.less

Atlassian User Interface library

@import (reference) './imports/global';
@import './fonts.less';

/**
 * TYPOGRAPHY
 */
body {
    color: @aui-text-color;
    font: var(
        --ds-font-body,
        normal 400 14px/1.42857142857143 -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Ubuntu',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
    text-align: left; // in case anybody used text-align for layout purposes
}

/* International Font Stacks*/
[lang|='ja'] {
    font-family:
        'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック',
        Verdana, Arial, sans-serif;
}

/* Default margins */
p,
ul,
ol,
dl,
blockquote,
pre,
form.aui,
table.aui,
.aui-tabs,
.aui-group {
    margin: @aui-grid 0 0 0;

    &:first-child {
        margin-top: 0; // No top margin to interfere with box padding
    }
}

/* Headings: based on Atlaskit design tokens, with desktop ADG3 fallbacks */
h1 {
    font: var(
        --ds-font-heading-xlarge,
        600 2.0714285714285716em/1.103448275862069 -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Ubuntu',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
    color: var(--ds-text);
    margin-top: var(--ds-space-400);
}
h2 {
    font: var(
        --ds-font-heading-large,
        500 1.7142857142857142em/1.1666666666666667 -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Ubuntu',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
    color: var(--ds-text);
    margin-top: var(--ds-space-400);
}
h3 {
    font: var(
        --ds-font-heading-medium,
        500 1.4285714285714286em/1.2 -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Ubuntu',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
    color: var(--ds-text);
    margin-top: var(--ds-space-300);
}
h4 {
    font: var(
        --ds-font-heading-small,
        600 1.1428571428571428em/1.25 -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Ubuntu',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
    color: var(--ds-text);
    margin-top: var(--ds-space-250);
}
h5 {
    font: var(
        --ds-font-heading-xsmall,
        600 1em/1.1428571428571428 -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Ubuntu',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
    color: var(--ds-text);
    margin-top: var(--ds-space-250);
}
h6 {
    font: var(
        --ds-font-heading-xxsmall,
        600 0.8571428571428571em/1.3333333333333333 -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Ubuntu',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
    color: var(--ds-text);
    margin-top: var(--ds-space-250);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    &:first-child {
        margin-top: 0;
    }
}

/* Nice styles for using subheadings */
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
    margin-top: var(--ds-space-200);
}
/* Increase the margins on all headings when used in the group/item pattern ... */
.aui-group > .aui-item > h1:first-child,
.aui-group > .aui-item > h2:first-child,
.aui-group > .aui-item > h3:first-child,
.aui-group > .aui-item > h4:first-child,
.aui-group > .aui-item > h5:first-child,
.aui-group > .aui-item > h6:first-child {
    margin-top: (@aui-grid * 2);
}
/* ... unless they're the first-child */
.aui-group:first-child > .aui-item > h1:first-child,
.aui-group:first-child > .aui-item > h2:first-child,
.aui-group:first-child > .aui-item > h3:first-child,
.aui-group:first-child > .aui-item > h4:first-child,
.aui-group:first-child > .aui-item > h5:first-child,
.aui-group:first-child > .aui-item > h6:first-child {
    margin-top: 0;
}

/* Other typographical elements */
small {
    color: @aui-lesser-text-color;
    font-size: @aui-font-size-small;
    line-height: unit((16 / @aui-font-size-small));
}
code,
kbd {
    font-family: var(
        --ds-font-family-code,
        ui-monospace,
        Menlo,
        'Segoe UI Mono',
        'Ubuntu Mono',
        monospace
    );
}
var,
address,
dfn,
cite {
    font-style: italic;
}
cite:before {
    display: inline-block;
    content: '\2014';
    padding-right: 0.5em;
}
blockquote {
    border-left: 2px solid @aui-border-color;
    color: @aui-blockquote-text-color;
    margin-left: (@aui-grid * 2 - 1);
    padding: @aui-grid (@aui-grid * 2);
}
blockquote > cite {
    display: block;
    margin-top: @aui-grid;
}
q {
    color: @aui-quote-text-color;
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}
abbr {
    border-bottom: 1px @aui-abbr-border-color dotted;
    cursor: help;
}