oui-kit/stylus/preset/text.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../mixins/utils.styl";
@require "../mixins/colors.styl";
@require "../mixins/base.styl";
@require "../mixins/text.styl";

oui-text() {
  --text-font-weight-bold: 600;
  --text-list-indent: px(32);
  --text-paragraph-spacing: px(16);
  --text-table-cell-padding: px(8);

  &, * {
    user-select: text;
    -webkit-user-select: text;
  }

  h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-weight: var(--text-font-weight-bold);
    line-height: 1.2;
    margin-y: var(--text-paragraph-spacing);
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  h3 {
    font-size: 1.4rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  h5 {
    font-size: 1rem;
  }

  h6 {
    font-size: 0.8rem;
  }

  // Paragraphs
  p, .p, ol, ul, hr {
    margin-y: var(--text-paragraph-spacing);
  }

  hr {
    height: 0;
    color: inherit;
  }

  // Semantic text elements
  a, ins, u {
    text-decoration-skip: ink edges;
  }

  a {
    color: var(--link-fg);

    &:hover {
      color: var(--link-fg-hover);
      text-decoration: underline;
    }

    &:active {
      color: var(--link-fg-active);
    }
  }

  abbr[title] {
    border-bottom: 1px dotted;
    cursor: unquote("help");
    text-decoration: unquote("none");
  }

  kbd, tt, *:not(pre) > code {
    font-size: 0.85rem;
    font-family: var(--font-mono, monospace);
    background-color: var(--s2-bg);
    color: inherit;
    padding: 0 2;
    margin: 0;
    border-radius: 2;
  }

  pre {
    font-size: 0.85rem;
    font-family: var(--font-mono, monospace);
    background-color: var(--s2-bg);
    color: inherit;
    padding: 8 12;
    border-radius: 4;

    code {
      color: inherit;
      padding: 0;
      background: none;
      font-size: 0.85rem;
    }
  }

  b, strong {
    font-weight: var(--text-font-weight-bold);
  }

  i, em {
    font-style: italic;
  }

  /*
    sub, sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
  
  
    sub {
      bottom: -0.25em;
    }
  
    sup {
      top: -0.5em;
    }
  */
  sup {
    vertical-align: baseline;
    font-feature-settings: "sups";
    font-size: 1em;
  }

  sub {
    vertical-align: baseline;
    font-feature-settings: "subs";
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  mark {
    color: var(--mark-fg);
    background: var(--mark-bg, yellow);
    padding-top: 0;
    padding-right: 2;
    padding-left: 2;
    padding-bottom: 1;
    border-radius: 2;
  }

  // Blockquote
  blockquote {
    margin: 0;
    border-left: 2px solid var(--p1-500);
    padding-left: var(--text-paragraph-spacing);
  }

  // Lists
  ul, ol {
    margin: 0;
    padding: 0;
    list-style-position: outside;
    margin-left: 32;

    li {
      margin: 0;
    }

    ul, ol {
      margin-left: 20;
    }
  }

  ul {
    list-style: disc;
  }

  ul ul {
    list-style-type: circle;
  }

  ol {
    list-style: decimal;
  }

  ol ol {
    list-style-type: lower-alpha;
  }

  dl dt {
    font-weight: var(--text-font-weight-bold);
  }

  dl dd {
    margin-left: var(--text-paragraph-spacing);
  }

  > :first-child {
    margin-top: 0;
  }

  > :last-child {
    margin-bottom: 0;
  }

  img, video, figure {
    display: block;
    margin-y: var(--text-paragraph-spacing);

    & > * {
      margin-y: 0;
    }
  }

  table {
    display: block; // for responsive scrolling
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-y: var(--text-paragraph-spacing);

    th, td {
      margin: 0;
      padding: rex(4) var(--text-table-cell-padding);
      vertical-align: top;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }

    th {
      font-weight: var(--text-font-weight-bold);
    }

    tbody {
      td, th {
        border-bottom: 1px solid var(--s2-fg);
        border-right: 1px solid var(--t3-bg);

        &:last-child {
          border-right: none;
        }
      }

      tr._selectable:hover:not(._active) {
        background: var(--t3-bg);
      }

      tr._active {
        background: var(--s2-bg);
      }
    }

    thead {
      th {
        border-bottom: 2px solid var(--s2-fg);
      }

      ._sortable {
        cursor: unquote("pointer");
        user-select: none;
        padding-right: rex(16);
        position: relative;
      }

      ._active {
        color: var(--p1-fg);
      }

      ._asc:after {
        content: "▴";
      }

      ._desc:after {
        content: "▾";
      }
    }
  }
}