headline/view/uno.config.ts

import { defineConfig } from "unocss";
import presetMini, { theme, Theme } from "@unocss/preset-mini";

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

  :root {
    --color-border: hsl(0 0% 80% / 60%);
  }

  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: ${theme.colors.gray[50]};
  }

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

  :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: ${theme.colors.accent[600]};
    font-weight: 500;
    text-decoration: none;
    transition: color 120ms;
  }

  a:hover {
    color: ${theme.colors.accent[800]};
  }

  ins {
    background-color: hsl(120 100% 95%);
    text-decoration-color: hsl(120 50% 75% / 50%);
  }

  del {
    background-color: hsl(0 100% 95%);
    text-decoration-color: hsl(0 50% 40% / 50%);
  }

  .diff-before ins {
    display: none;
  }

  .diff-after del {
    display: none;
  }

  /* Forms */

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

  .text-input:focus {
    border-color: ${theme.colors.accent[500]};
    box-shadow: 0 0 0 2px ${theme.colors.accent[500]};
    outline: none;
  }

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

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

  .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-border);
    background: ${theme.colors.gray[100]};
    color: ${theme.colors.gray[600]};
  }

  .button:not(:disabled):hover {
    background: hsl(0 0% 90%);
  }

  .button-outline {
    border: 1px solid var(--color-border);
    background: white;
    color: ${theme.colors.gray[600]};
  }

  .button-outline:not(:disabled):hover {
    background: hsl(0 0% 95%);
  }

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

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

  /* 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-border);
    background: ${theme.colors.gray[100]};
    transition: background-color 120ms;
    color: ${theme.colors.gray[600]};
    font-weight: 500;
    font-size: 0.85em;
    line-height: 1.5rem;
  }

  .page-item a {
    color: inherit;
  }

  .page-item:not(.active):hover {
    background: ${theme.colors.gray[200]};
  }

  .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: ${theme.colors.accent[600]};
    color: white;
    border-color: transparent;
  }

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

  /* Misc components */

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

  .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-border);
    box-shadow: ${theme.boxShadow.DEFAULT};
  }

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

/**
 * No-op tag function for CSS tagged templates, which works only as a hint for IDE for CSS syntax highlighting.
 */
function css(strings: TemplateStringsArray, ...exprs: Array<unknown>): string {
  let result = strings[0];

  for (let i = 1, l = strings.length; i < l; i++) {
    result += exprs[i - 1];
    result += strings[i];
  }

  return result;
}

export default defineConfig({
  presets: [presetMini()],
  theme: {
    colors: {
      accent: theme.colors.blue,
    },
    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-500) font-medium inline-flex items-center gap-1.5 hover:text-accent-700",
    "text-muted": "text-gray-500",
    "text-caption": "text-(sm gray-500) font-medium",
  },
  preflights: [
    {
      getCSS: (ctx) => globalCss(ctx.theme as Required<Theme>),
    },
  ],
});