headline/view/uno.config.ts

import { defineConfig } from "unocss";
import presetMini, { theme, Theme } from "@unocss/preset-mini";
import { css } from "./helpers";
import {
  gray,
  grayDark,
  green,
  greenDark,
  indigo,
  indigoDark,
  red,
  redDark,
} from "@radix-ui/colors";

const globalCss = (theme: Required<Theme>) => css`
  /* This file is dynamically generated. Do not edit this file. */

  :root {
    --color-gray-1: ${gray.gray1};
    --color-gray-2: ${gray.gray2};
    --color-gray-3: ${gray.gray3};
    --color-gray-4: ${gray.gray4};
    --color-gray-5: ${gray.gray5};
    --color-gray-6: ${gray.gray6};
    --color-gray-7: ${gray.gray7};
    --color-gray-8: ${gray.gray8};
    --color-gray-9: ${gray.gray9};
    --color-gray-10: ${gray.gray10};
    --color-gray-11: ${gray.gray11};
    --color-gray-12: ${gray.gray12};

    --color-accent-1: ${indigo.indigo1};
    --color-accent-2: ${indigo.indigo2};
    --color-accent-3: ${indigo.indigo3};
    --color-accent-4: ${indigo.indigo4};
    --color-accent-5: ${indigo.indigo5};
    --color-accent-6: ${indigo.indigo6};
    --color-accent-7: ${indigo.indigo7};
    --color-accent-8: ${indigo.indigo8};
    --color-accent-9: ${indigo.indigo9};
    --color-accent-10: ${indigo.indigo10};
    --color-accent-11: ${indigo.indigo11};
    --color-accent-12: ${indigo.indigo12};

    --color-ins-1: ${green.green1};
    --color-ins-2: ${green.green2};
    --color-ins-3: ${green.green3};
    --color-ins-4: ${green.green4};
    --color-ins-5: ${green.green5};
    --color-ins-6: ${green.green6};
    --color-ins-7: ${green.green7};
    --color-ins-8: ${green.green8};
    --color-ins-9: ${green.green9};
    --color-ins-10: ${green.green10};
    --color-ins-11: ${green.green11};
    --color-ins-12: ${green.green12};

    --color-del-1: ${red.red1};
    --color-del-2: ${red.red2};
    --color-del-3: ${red.red3};
    --color-del-4: ${red.red4};
    --color-del-5: ${red.red5};
    --color-del-6: ${red.red6};
    --color-del-7: ${red.red7};
    --color-del-8: ${red.red8};
    --color-del-9: ${red.red9};
    --color-del-10: ${red.red10};
    --color-del-11: ${red.red11};
    --color-del-12: ${red.red12};
  }

  .dark-theme {
    --color-gray-1: ${grayDark.gray1};
    --color-gray-2: ${grayDark.gray2};
    --color-gray-3: ${grayDark.gray3};
    --color-gray-4: ${grayDark.gray4};
    --color-gray-5: ${grayDark.gray5};
    --color-gray-6: ${grayDark.gray6};
    --color-gray-7: ${grayDark.gray7};
    --color-gray-8: ${grayDark.gray8};
    --color-gray-9: ${grayDark.gray9};
    --color-gray-10: ${grayDark.gray10};
    --color-gray-11: ${grayDark.gray11};
    --color-gray-12: ${grayDark.gray12};

    --color-accent-1: ${indigoDark.indigo1};
    --color-accent-2: ${indigoDark.indigo2};
    --color-accent-3: ${indigoDark.indigo3};
    --color-accent-4: ${indigoDark.indigo4};
    --color-accent-5: ${indigoDark.indigo5};
    --color-accent-6: ${indigoDark.indigo6};
    --color-accent-7: ${indigoDark.indigo7};
    --color-accent-8: ${indigoDark.indigo8};
    --color-accent-9: ${indigoDark.indigo9};
    --color-accent-10: ${indigoDark.indigo10};
    --color-accent-11: ${indigoDark.indigo11};
    --color-accent-12: ${indigoDark.indigo12};

    --color-ins-1: ${greenDark.green1};
    --color-ins-2: ${greenDark.green2};
    --color-ins-3: ${greenDark.green3};
    --color-ins-4: ${greenDark.green4};
    --color-ins-5: ${greenDark.green5};
    --color-ins-6: ${greenDark.green6};
    --color-ins-7: ${greenDark.green7};
    --color-ins-8: ${greenDark.green8};
    --color-ins-9: ${greenDark.green9};
    --color-ins-10: ${greenDark.green10};
    --color-ins-11: ${greenDark.green11};
    --color-ins-12: ${greenDark.green12};

    --color-del-1: ${redDark.red1};
    --color-del-2: ${redDark.red2};
    --color-del-3: ${redDark.red3};
    --color-del-4: ${redDark.red4};
    --color-del-5: ${redDark.red5};
    --color-del-6: ${redDark.red6};
    --color-del-7: ${redDark.red7};
    --color-del-8: ${redDark.red8};
    --color-del-9: ${redDark.red9};
    --color-del-10: ${redDark.red10};
    --color-del-11: ${redDark.red11};
    --color-del-12: ${redDark.red12};
  }

  html {
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    line-height: 1.5;
    background-color: var(--color-gray-2);
    color: var(--color-gray-12);
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
    border-width: 0;
    border-style: solid;
    border-color: var(--color-gray-6);
  }

  :not(dialog) {
    margin: 0;
  }

  body {
    line-height: 1.5;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
    font-size: inherit;
    font-weight: inherit;
  }

  table,
  th,
  tr,
  td {
    text-align: inherit;
    border-collapse: collapse;
  }

  a {
    color: var(--color-accent-10);
    font-weight: 500;
    text-decoration: none;
    transition: color 120ms;
  }

  a:hover {
    color: var(--color-accent-12);
  }

  ins,
  del {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    border-radius: ${theme.borderRadius.sm};
  }

  ins {
    background-color: var(--color-ins-4);
    color: var(--color-ins-12);
    border-color: var(--color-ins-6);
  }

  del {
    background-color: var(--color-del-4);
    color: var(--color-del-12);
    border-color: var(--color-del-6);
  }

  .diff-before ins {
    display: none;
  }

  .diff-after del {
    display: none;
  }

  /* Forms */

  .text-input {
    border-radius: ${theme.borderRadius.sm};
    border: 1px solid var(--color-gray-7);
    padding: 0.375rem 0.75rem;
    transition: border-color 120ms, box-shadow 120ms;
    background-color: var(--color-gray-1);
    color: var(--color-gray-11);
  }

  .checkbox-label {
    font-size: ${theme.fontSize.sm[0]};
    line-height: ${theme.fontSize.sm[1]};
    display: flex;
    align-items: center;
    color: var(--color-gray-11);
    font-weight: 500;
    cursor: pointer;
  }

  .checkbox-label input {
    margin-right: 0.5rem;
  }

  .checkbox {
    appearance: none;
    background-color: var(--color-gray-1);
    font: inherit;
    color: currentColor;
    width: 1.25em;
    height: 1.25em;
    border: 0.15em solid var(--color-gray-8);
    border-radius: 0.15em;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
  }

  .checkbox:checked {
    background-color: var(--color-accent-9);
    border-color: var(--color-accent-9);
  }

  .checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
  }

  .checkbox:checked::before {
    transform: scale(1);
  }

  .switch {
    appearance: none;
    background-color: var(--color-gray-3);
    font: inherit;
    color: currentColor;
    width: 3em;
    height: 1.5em;
    border-radius: 100px;
    border: 1px solid var(--color-gray-7);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
  }

  .switch:checked {
    background-color: var(--color-accent-9);
    border-color: var(--color-accent-9);
  }

  .switch::before {
    content: "";
    width: 1.3em;
    height: 1.3em;
    clip-path: circle(30%);
    transform: translateX(-50%);
    transition: 120ms transform ease-in-out;
    background-color: var(--color-gray-11);
  }

  .switch:checked::before {
    transform: translateX(50%);
    background-color: white;
  }

  .button,
  .button-outline {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5em;
    border-radius: ${theme.borderRadius.sm};
    transition: background-color 120ms;
  }

  .button {
    border: 1px solid var(--color-gray-7);
    background: var(--color-gray-3);
    color: var(--color-gray-11);
  }

  .button:not(:disabled):hover {
    background: var(--color-gray-5);
    color: var(--color-gray-12);
  }

  .button-outline {
    border: 1px solid var(--color-gray-6);
    background: var(--color-gray-1);
    color: var(--color-gray-11);
  }

  .button-outline:not(:disabled):hover {
    background: var(--color-gray-3);
    color: var(--color-gray-12);
  }

  .button-md {
    font-size: 0.9em;
    line-height: 1.5rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
  }

  button:not(:disabled) {
    cursor: pointer;
  }

  :is(button, input):focus-visible {
    border-color: var(--color-accent-7);
    box-shadow: 0 0 0 2px var(--color-accent-7);
    outline: none;
  }

  /* Pagination */

  .pagination {
    list-style-type: none;
    padding: 0;
    display: flex;
  }

  .page-link {
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: inherit;
  }

  .page-item {
    border: 1px solid var(--color-gray-7);
    background: var(--color-gray-3);
    transition: background-color 120ms, color 120ms;
    color: var(--color-gray-11);
    font-weight: 500;
    font-size: 0.85em;
    line-height: 1.5rem;
  }

  .page-item a {
    color: inherit;
  }

  .page-item:not(.active):hover {
    background: var(--color-gray-4);
    color: var(--color-gray-12);
  }

  .page-item:first-of-type {
    border-radius: ${theme.borderRadius.sm} 0 0 ${theme.borderRadius.sm};
  }

  .page-item:last-of-type {
    border-radius: 0 ${theme.borderRadius.sm} ${theme.borderRadius.sm} 0;
  }

  .page-item:not(:last-of-type) {
    border-right-width: 0px;
  }

  .page-item.active {
    background-color: var(--color-accent-9);
    color: white;
    border-color: transparent;
  }

  .prose p:not(:last-of-type) {
    margin-bottom: 1rem;
  }

  /* Misc components */

  .card {
    border: 1px solid var(--color-gray-6);
    border-radius: ${theme.borderRadius.md};
    background-color: var(--color-gray-1);
    box-shadow: 0 2px 0 var(--color-gray-3);
    overflow: hidden;
  }

  .dark-theme .card {
    box-shadow: none;
  }

  .table-styled td,
  .table-styled th {
    padding: 0.5rem 0.5rem;
  }

  .table-styled tr:not(:last-child),
  .table-styled thead tr {
    border-bottom-width: 1px;
  }

  [hx-swap-oob] {
    display: none;
  }

  .dialog {
    border-radius: ${theme.borderRadius["md"]};
    border: 1px solid var(--color-gray-6);
    box-shadow: ${theme.boxShadow.DEFAULT};
    background-color: var(--color-gray-2);
    color: var(--color-gray-12);
  }

  .dialog::backdrop {
    background-color: hsl(0 0% 90% / 80%);
  }

  .dark-theme .dialog::backdrop {
    background-color: hsl(0 0% 10% / 90%);
  }
`;

export default defineConfig({
  presets: [presetMini()],
  theme: {
    colors: {
      gray: {
        [1]: "var(--color-gray-1)",
        [2]: "var(--color-gray-2)",
        [3]: "var(--color-gray-3)",
        [4]: "var(--color-gray-4)",
        [5]: "var(--color-gray-5)",
        [6]: "var(--color-gray-6)",
        [7]: "var(--color-gray-7)",
        [8]: "var(--color-gray-8)",
        [9]: "var(--color-gray-9)",
        [10]: "var(--color-gray-10)",
        [11]: "var(--color-gray-11)",
        [12]: "var(--color-gray-12)",
      },
      accent: {
        [1]: "var(--color-accent-1)",
        [2]: "var(--color-accent-2)",
        [3]: "var(--color-accent-3)",
        [4]: "var(--color-accent-4)",
        [5]: "var(--color-accent-5)",
        [6]: "var(--color-accent-6)",
        [7]: "var(--color-accent-7)",
        [8]: "var(--color-accent-8)",
        [9]: "var(--color-accent-9)",
        [10]: "var(--color-accent-10)",
        [11]: "var(--color-accent-11)",
        [12]: "var(--color-accent-12)",
      },
    },
    borderRadius: {
      sm: "0.25rem",
      md: "0.5rem",
    },
  },
  rules: [[/^columns-(\d+)$/, ([_, num]) => ({ columns: num })]],
  shortcuts: {
    container: "max-w-1200px px-4 mx-auto",
    "action-link":
      "text-(sm gray-11) font-medium inline-flex items-center gap-1.5 hover:text-accent-9",
    "text-muted": "text-gray-11",
    "text-caption": "text-(sm gray-11) font-medium",
  },
  preflights: [
    {
      getCSS: (ctx) => globalCss(ctx.theme as Required<Theme>),
    },
  ],
});