@gdwc/components/styles/normalize.css.js

A library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Drupal

import { css } from 'lit';

/**
 * Duplicating these styles feels gross, but all other approaches to import from the
 * package either don't pierce the shadow DOM, are ignored by css template literals,
 * or result in a flash of partially styled content.
 */

export default css`
  :host {
    --link: var(--indigo-7);
    --link-visited: var(--grape-7);
    --text-1: var(--gray-9);
    --text-2: var(--gray-7);
    --surface-1: var(--gray-0);
    --surface-2: var(--gray-2);
    --surface-3: var(--gray-3);
    --surface-4: var(--gray-4);
    --scrollbar-color: var(--gray-7);
    accent-color: var(--link);
    -webkit-text-size-adjust: none;
    background-color: var(--surface-1);
    block-size: 100%;
    caret-color: var(--link);
    color: var(--text-2);
    color-scheme: light;
    font-family: var(--font-sans);
    line-height: var(--font-lineheight-3);
    scrollbar-color: var(--scrollbar-color) transparent;
  }
  @media (dynamic-range: high) {
    @supports (color(display-p3 0 0.5 1)) {
      :host {
        --link: color(display-p3 0 0.5 1);
        --link-visited: color(display-p3 0.6 0.2 1);
      }
    }
  }
  @media (prefers-color-scheme: dark) {
    :host {
      --link: var(--indigo-3);
      --link-visited: var(--grape-3);
      --text-1: var(--gray-1);
      --text-2: var(--gray-4);
      --surface-1: var(--gray-9);
      --surface-2: var(--gray-8);
      --surface-3: var(--gray-7);
      --surface-4: var(--gray-6);
      color-scheme: dark;
    }
  }
  :where(h1, h2, h3, h4, h5, h6, dt) {
    color: var(--text-1);
  }
  :where(a[href]) {
    color: var(--link);
  }
  :where(a[href]):visited {
    color: var(--link-visited);
  }
  :focus-visible {
    outline-color: var(--link);
  }
  @media (prefers-color-scheme: light) {
    :host {
      --scrollbar-color: var(--gray-4);
    }
  }
  *,
  :after,
  :before {
    box-sizing: border-box;
  }
  :where(:not(dialog)) {
    margin: 0;
  }
  :where(:not(fieldset, progress, meter)) {
    background-origin: border-box;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    :host {
      scroll-behavior: smooth;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    :focus-visible {
      transition: outline-offset 145ms var(--ease-2);
    }
    :where(:not(:active)):focus-visible {
      transition-duration: 0.25s;
    }
  }
  :where(:not(:active)):focus-visible {
    outline-offset: 5px;
  }
  :where(body) {
    scrollbar-gutter: stable both-edges;
    min-block-size: 100%;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-weight-9);
    line-height: var(--font-lineheight-1);
  }
  :where(h1) {
    font-size: var(--font-size-8);
    max-inline-size: var(--size-header-1);
  }
  :where(h2) {
    font-size: var(--font-size-6);
    max-inline-size: var(--size-header-2);
  }
  :where(h3) {
    font-size: var(--font-size-5);
  }
  :where(h4) {
    font-size: var(--font-size-4);
  }
  :where(h5) {
    font-size: var(--font-size-3);
  }
  :where(h3, h4, h5, h6, dt) {
    max-inline-size: var(--size-header-3);
  }
  :where(p, ul, ol, dl, h6) {
    font-size: var(--font-size-2);
  }
  :where(a, u, ins, abbr) {
    text-underline-offset: 1px;
  }
  :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*='-'])) {
    cursor: pointer;
    touch-action: manipulation;
  }
  :where(a) {
    margin-block: calc(var(--size-1) * -1);
    margin-inline: calc(var(--size-1) * -1);
    padding-block: var(--size-1);
    padding-inline: var(--size-1);
  }
  :where(a):where([href]) {
    text-decoration-color: var(--indigo-2);
  }
  :where(a):where([href]):where(:visited) {
    text-decoration-color: var(--grape-2);
  }
  :where(a):where(:not(:hover)) {
    text-decoration: inherit;
  }
  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
  }
  :where(img, svg, video) {
    block-size: auto;
    max-inline-size: 100%;
  }
  :where(input, button, textarea, select),
  :where(input[type='file'])::-webkit-file-upload-button {
    color: inherit;
    font: inherit;
    font-size: inherit;
    letter-spacing: inherit;
  }
  :where(input, textarea) {
    padding-block: var(--size-1);
    padding-inline: var(--size-2);
  }
  :where(select) {
    padding-block: 0.75ch;
    padding-inline: 1.25ch 0;
  }
  :where(textarea, select, input:not(button, button[type], input[type='button'], input[type='submit'], input[type='reset'])) {
    background-color: var(--surface-2);
    border-radius: var(--radius-2);
  }
  @media (prefers-color-scheme: dark) {
    :where(textarea, select, input:not(button, button[type], input[type='button'], input[type='submit'], input[type='reset'])) {
      background-color: #171a1c;
    }
  }
  :where(textarea) {
    resize: block;
  }
  :where(input[type='checkbox'], input[type='radio']) {
    block-size: var(--size-3);
    inline-size: var(--size-3);
  }
  :where(svg) {
    stroke: none;
    fill: currentColor;
  }
  :where(svg):where(:not([fill])) {
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :where(svg):where(:not([width])) {
    inline-size: var(--size-10);
  }
  :where(code, kbd, samp, pre) {
    font-family: var(--font-mono);
  }
  :where(:not(pre) > code, kbd) {
    white-space: nowrap;
  }
  :where(pre) {
    max-inline-size: max-content;
    min-inline-size: 0;
    white-space: pre;
  }
  :where(:not(pre) > code) {
    background: var(--surface-2);
    border-radius: var(--radius-2);
    padding: var(--size-1) var(--size-2);
  }
  :where(kbd, var) {
    border-color: var(--surface-4);
    border-radius: var(--radius-2);
    border-width: var(--border-size-1);
    padding: var(--size-1) var(--size-2);
  }
  :where(mark) {
    border-radius: var(--radius-2);
    padding-inline: var(--size-1);
  }
  :where(ol, ul) {
    padding-inline-start: var(--size-8);
  }
  :where(li) {
    padding-inline-start: var(--size-2);
  }
  :where(li, dd, figcaption) {
    max-inline-size: var(--size-content-2);
  }
  :where(p) {
    max-inline-size: var(--size-content-3);
  }
  :where(dt, summary) {
    font-weight: var(--font-weight-7);
  }
  :where(dt:not(:first-of-type)) {
    margin-block-start: var(--size-5);
  }
  :where(small) {
    font-size: max(0.5em, var(--font-size-0));
    max-inline-size: var(--size-content-1);
  }
  :where(hr) {
    background-color: var(--surface-3);
    height: var(--border-size-2);
    margin-block: var(--size-fluid-5);
  }
  :where(figure) {
    display: grid;
    gap: var(--size-2);
    place-items: center;
  }
  :where(figure) > :where(figcaption) {
    font-size: var(--font-size-1);
  }
  :where(blockquote, :not > cite) {
    border-inline-start-width: var(--border-size-3);
  }
  :where(blockquote) {
    display: grid;
    gap: var(--size-3);
    max-inline-size: var(--size-content-2);
    padding-block: var(--size-3);
    padding-inline: var(--size-4);
  }
  :where(:not(blockquote) > cite) {
    padding-inline-start: var(--size-2);
  }
  :where(summary) {
    background: var(--surface-3);
    border-radius: var(--radius-2);
    margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
    padding: var(--size-2) var(--size-3);
  }
  :where(details) {
    background: var(--surface-2);
    border-radius: var(--radius-2);
    padding-block: var(--size-2);
    padding-inline: var(--size-3);
  }
  :where(details[open] > summary) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    margin-bottom: var(--size-2);
  }
  :where(fieldset) {
    border: var(--border-size-1) solid var(--surface-4);
    border-radius: var(--radius-2);
  }
  :where(del) {
    background: var(--red-9);
    color: var(--red-2);
  }
  :where(ins) {
    background: var(--green-9);
    color: var(--green-1);
  }
  :where(abbr) {
    text-decoration-color: var(--blue-5);
  }
  :where(dialog) {
    background-color: var(--surface-1);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-6);
    color: inherit;
  }
  @media (prefers-color-scheme: dark) {
    :where(dialog) {
      background-color: var(--surface-2);
    }
  }
  :where(dialog)::backdrop {
    backdrop-filter: blur(25px);
  }
  :host[
\:has
\(dialog
\[open
\]\)] {
    overflow: hidden;
  }
  :host:has(dialog[open]) {
    overflow: hidden;
  }
  :where(menu) {
    display: flex;
    gap: var(--size-3);
    padding-inline-start: 0;
  }
`;