adminjs-design-system/src/utils/content-styles.ts

import { css } from 'styled-components'
import themeGet from './theme-get'

/**
 *
 * Gives you the default styles for all "content" elements like:
 * ul, li, h1-h5 etc.
 *
 * ### Example
 *
 * ```typescript
 * import styled from 'styled-components'
 * import { contentCSS } from '@adminjs/design-system'
 *
 * const myComponent = styled`
 *   ${contentCSS};
 * `
 * ```
 *
 * @memberof module:@adminjs/design-system
 */
const contentCSS = css`
  font-family: ${({ theme }): string => theme.font};
  font-size: ${themeGet('fontSizes', 'md')};
  line-height: ${themeGet('lineHeights', 'lg')};
  font-weight: ${themeGet('fontWeights', 'light')};
  div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  main, menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    &:not([class*="adminjs_"]) {
      margin: 0;
      padding: 0;
    }
  }

  img {
    max-width: 100%;
  }

  p, div {
    margin-bottom: ${themeGet('space', 'xl')};
    font-size: ${themeGet('fontSizes', 'md')};
    font-weight: ${themeGet('fontWeights', 'light')};
  }

  strong, b {
    font-weight: ${themeGet('fontWeights', 'bolder')}
  }

  li + li {
    margin-top: ${themeGet('space', 'md')};
  }

  p:not(:last-child),
  dl:not(:last-child),
  ol:not(:last-child),
  ul:not(:last-child),
  blockquote:not(:last-child),
  pre:not(:last-child),
  table:not(:last-child) {
    margin-bottom: ${themeGet('space', 'xl')};
  }

  pre {
    background-color: ${themeGet('colors', 'grey20')};
    border: 1px solid ${themeGet('colors', 'grey40')};
    padding: ${themeGet('space', 'xl')};
    margin: ${themeGet('space', 'xl')} 0 ${themeGet('space', 'xxl')};
    white-space: pre;
    font-family: 'Courier New', Courier, monospace;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: ${themeGet('fontWeights', 'light')};
    line-height: ${themeGet('lineHeights', 'xl')};
    font-size: ${themeGet('fontSizes', 'h3')};
    margin-top: ${themeGet('space', 'xxl')};
    margin-bottom: ${themeGet('space', 'xl')};
  }

  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: ${themeGet('space', 'sm')};
  }

  h1 {
    font-size: ${themeGet('fontSizes', 'h1')};
    line-height: ${themeGet('lineHeights', 'xxl')};
    margin-top: ${themeGet('space', 'x4')};
    margin-bottom: ${themeGet('space', 'x3')};
  }

  h2 {
    font-size: ${themeGet('fontSizes', 'h2')};
    line-height: ${themeGet('lineHeights', 'xxl')};
    margin-top: ${themeGet('space', 'x3')};
    margin-bottom: ${themeGet('space', 'xxl')};
  }

  h3 {
    
  }

  h4 {
    font-size: ${themeGet('fontSizes', 'h4')};
    line-height: ${themeGet('lineHeights', 'xl')};
    margin-top: ${themeGet('space', 'xxl')};
    margin-bottom: ${themeGet('space', 'xl')};
  }

  h5 {
    font-size: ${themeGet('fontSizes', 'xl')};
    line-height: ${themeGet('lineHeights', 'lg')};
    margin-top: ${themeGet('space', 'xl')};
    margin-bottom: ${themeGet('space', 'lg')};
    font-weight: ${themeGet('fontWeights', 'normal')};
  }

  h6 {
    font-size: ${themeGet('fontSizes', 'lg')};
    line-height: ${themeGet('lineHeights', 'lg')};
    margin-top: ${themeGet('space', 'lg')};
    margin-bottom: ${themeGet('space', 'default')};
    font-weight: ${themeGet('fontWeights', 'normal')};
  }

  blockquote {
    background-color: ${themeGet('colors', 'grey20')};
    border-left: ${themeGet('space', 'sm')} solid ${themeGet('colors', 'primary20')};
    padding: ${themeGet('space', 'xl')};
    margin: ${themeGet('space', 'xxl')} 0;
  }

  ol {
    list-style-position: outside;
    margin-top: ${themeGet('space', 'lg')};
    margin-left: ${themeGet('space', 'xl')};
  }
  ol:not([type]) {
    list-style-type: decimal;
  }
  ol:not([type]).is-lower-alpha {
    list-style-type: lower-alpha;
  }
  ol:not([type]).is-lower-roman {
    list-style-type: lower-roman;
  }
  ol:not([type]).is-upper-alpha {
    list-style-type: upper-alpha;
  }
  ol:not([type]).is-upper-roman {
    list-style-type: upper-roman;
  }

  ul {
    list-style: disc outside;
    margin-left: ${themeGet('space', 'xl')};
    margin-top: ${themeGet('space', 'lg')};
  }
  ul ul {
    list-style-type: circle;
    margin-top: ${themeGet('space', 'sm')};
  }
  ul ul ul {
    list-style-type: square;
  }

  em {
    font-style: italic;
  }

  dd {
    margin-left: ${themeGet('space', 'xl')};
  }

  figure {
    margin-left: ${themeGet('space', 'md')};
    margin-right: ${themeGet('space', 'md')};
    text-align: center;
  }
  figure:not(:first-child) {
    margin-top: ${themeGet('space', 'md')};
  }
  figure:not(:last-child) {
    margin-bottom: ${themeGet('space', 'md')};
  }
  figure img {
    display: inline-block;
  }
  figure figcaption {
    font-style: italic;
  }

  sup,
  sub {
    font-size: 75%;
  }

  table {
    width: 100%;
    margin: ${themeGet('space', 'xl')} 0;
  }
  table td,
  table th {
    padding: ${themeGet('space', 'lg')};
    vertical-align: top;
  }
  table th {
    color: ${themeGet('colors', 'grey60')};
    border-bottom: 1px solid ${themeGet('colors', 'grey40')};
  }

  table td {
    border-bottom: 1px solid ${themeGet('colors', 'grey20')};
  }
  table th:not([align]) {
    text-align: inherit;
  }
  table thead td,
  table thead th {
    border-bottom: 1px solid ${themeGet('colors', 'grey40')};
    color: ${themeGet('colors', 'grey60')};
  }
  table tfoot td,
  table tfoot th {
    border-bottom: 1px solid ${themeGet('colors', 'grey40')};
    color: ${themeGet('colors', 'grey60')};
  }
  table tbody tr:last-child td,
  table tbody tr:last-child th {
    border-bottom-width: 0;
  }

  .tabs li + li {
    margin-top: 0;
  }
`

export default contentCSS