index.css

@import '@node-core/ui-components/styles/index.css';
@import '@node-core/rehype-shiki/index.css';

/* Fonts (We only load the three fonts that we preload) */
@font-face {
  font-family: 'Open Sans Variable';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('@fontsource-variable/open-sans/files/open-sans-latin-wght-normal.woff2')
    format('woff2-variations');
}

@font-face {
  font-family: 'Open Sans Variable';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('@fontsource-variable/open-sans/files/open-sans-latin-wght-italic.woff2')
    format('woff2-variations');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff2')
    format('woff2');
}

/* Variables */
:root {
  --font-open-sans: 'Open Sans Variable', sans-serif;
  --font-ibm-plex-mono: 'IBM Plex Mono', monospace;

  --color-brand-100: #f4f4f5;
  --color-brand-200: #e4e4e7;
  --color-brand-300: #c9c9ce;
  --color-brand-400: #a8a8af;
  --color-brand-500: #83838c;
  --color-brand-600: #62626b;
  --color-brand-700: #4b4b53;
  --color-brand-800: #3a3a41;
  --color-brand-900: #27272b;
}

is-land,
island-slot {
  display: contents;
}

/* TODO(@avivkeller): make this component's CSS more agnostic */
is-land[data-island-name='SideBar'] {
  display: flex;
  flex-direction: column;

  > aside {
    flex: 1 0 auto;
  }
}

main {
  /* Code should inherit its font size */
  code {
    font-size: inherit;
    font-weight: inherit;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Don't overflow the parent */
  .overflow-container {
    overflow-x: auto;
    width: 100%;
    table td a + a {
      margin-right: 0;
    }
  }

  table {
    td {
      word-break: break-all;
    }

    /* In tables, don't pad `a` elements */
    a {
      padding-right: unset;
    }

    @media (min-width: 1024px) {
      td code {
        overflow-wrap: normal;
        word-break: normal;
      }
    }
  }

  /* Change history positioning */
  div:has(> h1, > h2, > h3, > h4, > h5, > h6) {
    display: flex;
    align-items: start;
    gap: 8px;
    flex-direction: column;

    > h1,
    > h2,
    > h3,
    > h4,
    > h5,
    > h6 {
      flex: 1;
      margin-top: 0;
      margin-bottom: 8px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .change-history {
      margin-left: 0;

      div[role='menu'] {
        left: 0;

        /* Prevent long labels from overflowing dropdown width */
        a[role='menuitem'] div {
          overflow-wrap: anywhere;
          word-break: break-word;
        }
      }
    }
  }

  @media (min-width: 768px) {
    div:has(> h1, > h2, > h3, > h4, > h5, > h6) {
      flex-direction: row;
      align-items: center;

      > h1,
      > h2,
      > h3,
      > h4,
      > h5,
      > h6 {
        margin-bottom: 0;
        overflow-wrap: normal;
        word-break: normal;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .change-history {
        margin-left: auto;

        div[role='menu'] {
          left: initial;
        }
      }
    }
  }

  .arrow {
    /* Arrow icon styling */
    width: calc(var(--spacing, 0.25rem) * 3);
    display: inline;
    margin-left: var(--spacing, 0.25rem);
  }

  .signature {
    /* Signature styling - remove line numbers and padding */
    .line {
      padding-left: unset !important;

      &::after {
        all: unset !important;
      }
    }
  }

  code.type {
    /* Inline type annotations - one highlighted fragment per type */
    padding: 0 calc(var(--spacing, 0.25rem) * 1);
    border-radius: calc(var(--spacing, 0.25rem) * 1);

    .type-link {
      /* Links keep their token color; underline marks the affordance */
      color: inherit;
      text-decoration: underline dotted;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}