@spaced-out/ui-design-system/.storybook/preview-head.html

Sense UI components library

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.sensehq.com/genesis/hashed/static/fontawesome/css/all.min.css"
/>
<style type="text/css">
  @font-face {
    font-family: 'Centra No 2';
    src: url('fonts/CentraNo2-Book.woff2') format('woff2'),
      url('fonts/CentraNo2-Book.woff') format('woff');
    font-weight: 300 400;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'Centra No 2';
    src: url('fonts/CentraNo2-BookItalic.woff2') format('woff2'),
      url('fonts/CentraNo2-BookItalic.woff') format('woff');
    font-weight: 300 400;
    font-style: italic;
    font-display: auto;
  }

  @font-face {
    font-family: 'Centra No 2';
    src: url('fonts/CentraNo2-Medium.woff2') format('woff2'),
      url('fonts/CentraNo2-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
  }

  html,
  body {
    display: flex;
    width: 100%;
    min-height: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    background: #fafafa;
    color: #606060;
    font-size: 16px;
    text-size-adjust: none;
    font-feature-settings: 'tnum';
  }

  html.fixed,
  body.fixed {
    overflow: hidden;
  }

  /* standard resets */
  a {
    text-decoration: none;
    font-weight: inherit;
    color: inherit;
  }

  button {
    padding: 0;
  }
  input,
  textarea,
  button {
    font: inherit;
    font-size: inherit;
    text-transform: inherit;
    color: inherit;
    outline: none;
    background: transparent;
    border: none;
    margin: 0;
  }

  *,
  ::after,
  ::before {
    box-sizing: border-box;
  }
  div,
  nav,
  header,
  footer,
  section,
  h1,
  h2,
  h3,
  h4,
  h5,
  ul,
  ol,
  figure,
  figcaption,
  form,
  label,
  ::before,
  ::after {
    margin: 0;
  }

  body {
    font-family: 'Centra No 2';
    background: #fafafa;
  }

  #root {
    font-family: initial;
    background: #fafafa;
  }

  #docs-root {
    font-family: 'Centra No 2';
  }

  .sbdocs *:not(i):not(pre span) {
    font-family: 'Centra No 2' !important;
  }

  .sbdocs {
    background: #fafafa !important;
  }

  #docs-root .sbdocs .docs-story {
    font-family: initial !important;
  }

  #root,
  #root div {
    display: flex;
  }

  div:has(> .docblock-argstable) {
    overflow: auto !important;
  }

  .docblock-argstable {
    max-width: 98%;
  }

  code {
    white-space: pre-wrap !important;
    background-color: #f1f1f5 !important;
    border-color: #d3d2e0 !important;
    color: #17172a !important;
  }

  .docblock-source {
    background-color: #f1f1f5 !important;
    box-shadow: none !important;
    border-color: #d3d2e0 !important;
    font-family: 'Monaco' !important;
  }

  pre span {
    font-family: 'Monaco' !important;
  }

  a.sbdocs {
    color: #5c34cd !important;
  }

  svg.highcharts-root {
    font-family: 'Centra No 2' !important;
  }
</style>