@atlaskit/css-reset/dist/es2019/base.js

A base stylesheet for the Atlassian Design System.

import evaluateInner from './utils/evaluate-inner';
const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;
const codeFontFamily = `ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`;

/* TODO body line height should be 1.25rem */
const _default_1 = evaluateInner`
  body,
  html {
    height: 100%;
    width: 100%;
  }

  body,
	[data-subtree-theme] {
		background-color: ${"var(--ds-surface, #fff)"};
		color: ${"var(--ds-text, #172B4D)"};
		font: ${`var(--ds-font-body, ${`normal 400 14px/1.42857142857143 ${fontFamily}`})`};
	}

	body {
		-ms-overflow-style: -ms-autohiding-scrollbar;
		text-decoration-skip-ink: auto;
	}

  /* Default margins */
  p,
  ul,
  ol,
  dl,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  blockquote,
  pre,
  form,
  table {
    margin: ${"var(--ds-space-150, 12px)"} 0 0 0;
  }

  /* Links */
  a {
    color: ${"var(--ds-link, #0052CC)"};
    text-decoration: none;
  }
  a:hover {
    color: ${"var(--ds-link, #0065FF)"};
    text-decoration: underline;
  }
  a:active {
    color: ${"var(--ds-link-pressed, #0747A6)"};
  }
  a:focus-visible {
    outline: ${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #2684FF)"};
    outline-offset: ${"var(--ds-space-025, 2px)"};
  }
  @supports not selector(*:focus-visible) {
    a:focus {
      outline: ${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4C9AFF)"};
      outline-offset: ${"var(--ds-space-025, 2px)"};
    }
  }
  /* Headings */
  h1 {
    font: ${`var(--ds-font-heading-xlarge, ${`600 2.0714285714285716em/1.103448275862069 ${fontFamily}`})`};
    color: ${"var(--ds-text, #292A2E)"};
    margin-top: ${"var(--ds-space-500, 40px)"};
  }
  h2 {
    font: ${`var(--ds-font-heading-large, ${`500 1.7142857142857142em/1.1666666666666667 ${fontFamily}`})`};
    color: ${"var(--ds-text, #292A2E)"};
    margin-top: ${"var(--ds-space-500, 40px)"};
  }
  h3 {
    font: ${`var(--ds-font-heading-medium, ${`500 1.4285714285714286em/1.2 ${fontFamily}`})`};
    color: ${"var(--ds-text, #292A2E)"};
    margin-top: 28px;
  }
  h4 {
    font: ${`var(--ds-font-heading-small, ${`600 1.1428571428571428em/1.25 ${fontFamily}`})`};
    color: ${"var(--ds-text, #292A2E)"};
    margin-top: ${"var(--ds-space-300, 24px)"};
  }
  h5 {
    font: ${`var(--ds-font-heading-xsmall, ${`600 1em/1.1428571428571428 ${fontFamily}`})`};
    color: ${"var(--ds-text, #292A2E)"};
    margin-top: ${"var(--ds-space-200, 16px)"};
  }
  h6 {
    font: ${`var(--ds-font-heading-xxsmall, ${`600 0.8571428571428571em/1.3333333333333333 ${fontFamily}`})`};
    color: ${"var(--ds-text, #292A2E)"};
    margin-top: ${"var(--ds-space-250, 20px)"};
    text-transform: uppercase;
  }

  /* Lists */
  ul,
  ol,
  dl {
    padding-left: ${"var(--ds-space-500, 40px)"};
  }

  dd,
  dd + dt,
  li + li {
    margin-top: ${"var(--ds-space-050, 4px)"};
  }

  ul ul:not(:first-child),
	ul style:first-child ~ * + ul,
  ol ul:not(:first-child),
	ol style:first-child ~ * + ul,
  ul ol:not(:first-child),
	ul style:first-child ~ * + ol,
  ol ol:not(:first-child),
	ol style:first-child ~ * + ol {
    margin-top: ${"var(--ds-space-050, 4px)"};
  }

  /* remove top margin for first element */
  p:first-child,
  style:first-child + p,
  ul:first-child,
  style:first-child + ul,
  ol:first-child,
  style:first-child + ol,
  dl:first-child,
  style:first-child + dl,
  h1:first-child,
  style:first-child + h1,
  h2:first-child,
  style:first-child + h2,
  h3:first-child,
  style:first-child + h3,
  h4:first-child,
  style:first-child + h4,
  h5:first-child,
  style:first-child + h5,
  h6:first-child,
  style:first-child + h6,
  blockquote:first-child,
  style:first-child + blockquote,
  pre:first-child,
  style:first-child + pre,
  form:first-child,
  style:first-child + form,
  table:first-child,
  style:first-child + table {
    margin-top: 0;
  }

  /* Quotes */
  blockquote,
  q {
    color: inherit;
  }
  blockquote {
    border: none;
    padding-left: ${"var(--ds-space-500, 40px)"};
  }
  [dir='rtl'] blockquote {
    padding-left: 0;
    padding-right: ${"var(--ds-space-500, 40px)"};
  }

  blockquote::before,
  q::before {
    content: '\\201C';
  }

  blockquote::after,
  q::after {
    content: '\\201D';
  }

  blockquote::before {
    float: left;
    /* to keep the quotes left of any child elements like blockquote > p */
    margin-left: -1em;
    text-align: right;
    width: 1em;
  }
  [dir='rtl'] blockquote::before {
    float: right;
    margin-right: -1em;
    text-align: left;
  }

  blockquote > :last-child {
    display: inline-block; /* so the quotes added via pseudos follow it immediately. */
  }

  /* Other typographical elements */
  small {
    font: ${`var(--ds-font-body-small, ${`normal 400 11px/16px ${fontFamily}`})`};
  }

  code,
  kbd {
    font-family: ${`var(--ds-font-family-code, ${`${codeFontFamily}`})`};
  }

  var,
  address,
  dfn,
  cite {
    font-style: italic;
  }

  abbr {
    border-bottom: ${"var(--ds-border-width, 1px)"} ${"var(--ds-border, #ccc)"} dotted;
    cursor: help;
  }

  @supports (color-scheme: dark) and (color-scheme: light) {
    [data-color-mode="light"] {
      color-scheme: light;
    }
    [data-color-mode="dark"] {
      color-scheme: dark;
    }
  }
`;
export default _default_1;