tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-accent-1: hsl(45, 94%, 50%);
    --color-accent-2: hsl(45, 94%, 65%);
    --color-alpha-0: hsla(0, 0%, 100%, 3%);
    --color-alpha-1: hsla(0, 0%, 100%, 5%);
    --color-alpha-2: hsla(0, 0%, 100%, 10%);
    --color-alpha-3: hsla(0, 0%, 100%, 15%);
    --color-alpha-4: hsla(0, 0%, 100%, 20%);
    --color-alpha-reverse-1: hsla(0, 0%, 0%, 40%);
    --color-alpha-reverse-2: hsla(0, 0%, 0%, 10%);
    --color-bg-1: hsl(0, 0%, 12%);
    --color-bg-2: hsl(0, 0%, 14%);
    --color-bg-3: hsl(0, 0%, 16%);
    --color-fg-1: hsla(0, 0%, 100%, 90%);
    --color-fg-2: hsla(0, 0%, 100%, 74%);
    --color-fg-3: hsla(0, 0%, 100%, 58%);
    --color-fg-4: hsla(0, 0%, 100%, 42%);
    --color-red-1: hsl(5, 85%, 40%);
    --font-weight-bold: 700;
    --font-weight-normal: 400;
    --radius-default: 1rem;
    --radius-sm: 0.5rem;
  }

  html {
    -webkit-tap-highlight-color: transparent;
    @apply h-full select-none font-body text-[4vw] xs:text-[16px];
  }

  body {
    @apply h-full bg-bg-1 text-fg-2;
  }

  /* hack because list-inside with nest p tag forces marker to have its own line */
  li > p:first-child {
    @apply inline;
  }

  /* hack to left align ios date inputs */
  input::-webkit-date-and-time-value {
    @apply text-left;
  }

  /* hack to style observable plot titles */
  figure[class^='plot-'] h2 {
    @apply smallcaps;
  }

  /* hack to style observable plot charts */
  figure[class^='plot-'] svg {
    @apply overflow-visible bg-transparent font-mono text-fg-2;
  }

  /* hack to style observable plot tooltips */
  figure[class^='plot-'] svg [aria-label='tip'] {
    @apply fill-bg-1 stroke-0 text-fg-1;
  }

  /* hack to style observable plot swatches */
  figure[class^='plot-'] div[class$='-swatches-wrap'] {
    @apply gap-1 px-4 pt-4;
  }

  /* hack to style tip tap youtube videos */
  div[data-youtube-video] > iframe {
    @apply my-1.5 aspect-video h-auto w-full rounded;
  }
}

@layer components {
  .input {
    @apply w-full max-w-full appearance-none rounded border border-alpha-1 bg-alpha-1 px-4 py-2 text-fg-2 outline-none transition-colors placeholder:text-fg-4 focus-within:bg-alpha-2 focus-within:ring-1 focus-within:ring-accent-2 hover:bg-alpha-2;
  }

  .label {
    @apply block px-4 pb-2 leading-snug text-fg-3 transition-colors group-focus-within:text-fg-2 group-hover:text-fg-2;
  }
}

@layer utilities {
  .disabled {
    @apply pointer-events-none opacity-50;
  }

  .prose {
    @apply space-y-3 [overflow-wrap:anywhere] prose-a:-m-1 prose-a:p-1 prose-a:text-fg-3 prose-a:underline prose-a:transition-colors prose-a:hover:cursor-pointer prose-strong:font-bold prose-strong:text-fg-1 prose-ol:ml-8 prose-ol:list-decimal prose-ol:space-y-3 prose-ul:ml-8 prose-ul:list-disc prose-ul:space-y-3 prose-li:space-y-3 prose-li:marker:text-fg-3 prose-table:min-w-full prose-table:whitespace-nowrap prose-table:border prose-table:border-t-0 prose-table:border-alpha-1 prose-table:bg-bg-2 prose-table:text-sm prose-tr:border-t prose-tr:border-alpha-1 prose-th:px-3 prose-th:py-1 prose-th:text-left prose-th:font-normal prose-th:text-fg-4 prose-td:px-3 prose-td:py-1;
  }

  .smallcaps {
    @apply text-xs uppercase tracking-widest;
  }
}