@shlinkio/shlink-frontend-kit 0.7.2 → 0.8.0

package/dist/tailwind.js

@@ -0,0 +1,534 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import w from "clsx";
+import { createContext as I, useContext as b, useId as B, useRef as S, useCallback as p, useEffect as F, useMemo as T } from "react";
+import { Link as L } from "react-router";
+import { faClose as $, faSearch as O, faChevronLeft as q, faChevronRight as _ } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
+const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r }) => {
+  const { responsive: e } = b(f);
+  return /* @__PURE__ */ n(y.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+    "thead",
+    {
+      className: w(
+        { "tw:hidden tw:lg:table-header-group": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, J = ({ children: t, className: r }) => {
+  const { responsive: e } = b(f);
+  return /* @__PURE__ */ n(y.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+    "tbody",
+    {
+      className: w(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, K = ({ children: t, className: r }) => {
+  const { responsive: e } = b(f);
+  return /* @__PURE__ */ n(y.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+    "tfoot",
+    {
+      className: w(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, Q = ({ children: t, className: r, ...e }) => {
+  const o = b(y), d = (o == null ? void 0 : o.section) === "body", { responsive: l } = b(f);
+  return /* @__PURE__ */ n(
+    "tr",
+    {
+      className: w(
+        "tw:group",
+        {
+          "tw:lg:table-row tw:flex tw:flex-col": l,
+          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": l,
+          "tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary": d,
+          // Use a different hover bg color depending on the table being inside a card or not
+          "tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary": d
+        },
+        r
+      ),
+      ...e,
+      children: t
+    }
+  );
+}, V = ({ children: t, className: r, columnName: e, type: o, ...d }) => {
+  const l = b(y), a = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: s } = b(f);
+  return /* @__PURE__ */ n(
+    a,
+    {
+      "data-column": s ? e : void 0,
+      className: w(
+        "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
+        {
+          "tw:border-b-1": !s,
+          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": s,
+          // For md and lower, display the content in data-column attribute as before
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && a === "td"
+        },
+        r
+      ),
+      ...d,
+      children: t
+    }
+  );
+}, W = ({ header: t, footer: r, children: e, responsive: o = !0, ...d }) => /* @__PURE__ */ n(f.Provider, { value: { responsive: o }, children: /* @__PURE__ */ c("table", { className: "tw:w-full", ...d, children: [
+  /* @__PURE__ */ n(G, { children: t }),
+  /* @__PURE__ */ n(J, { children: e }),
+  r && /* @__PURE__ */ n(K, { children: r })
+] }) }), yt = Object.assign(W, { Row: Q, Cell: V }), X = ({
+  children: t,
+  className: r,
+  disabled: e,
+  variant: o = "primary",
+  size: d = "md",
+  inline: l = !1,
+  solid: a = !1,
+  ...s
+}) => {
+  const m = "to" in s ? L : "button";
+  return (
+    // @ts-expect-error We are explicitly checking for the `to` prop before using Link
+    /* @__PURE__ */ n(
+      m,
+      {
+        className: w(
+          {
+            "tw:inline-flex": l,
+            "tw:flex": !l
+          },
+          "tw:gap-2 tw:items-center tw:justify-center",
+          "tw:border tw:rounded-md tw:no-underline",
+          "tw:transition-colors",
+          {
+            "tw:focus-ring": o !== "danger",
+            "tw:focus-ring-danger": o === "danger"
+          },
+          {
+            "tw:px-1.5 tw:py-1 tw:text-sm": d === "sm",
+            "tw:px-3 tw:py-1.5": d === "md",
+            "tw:px-4 tw:py-2 tw:text-lg": d === "lg"
+          },
+          {
+            "tw:border-brand tw:text-brand": o === "primary",
+            "tw:border-zinc-500": o === "secondary",
+            "tw:text-zinc-500": o === "secondary" && !a,
+            "tw:border-danger": o === "danger",
+            "tw:text-danger": o === "danger" && !a
+          },
+          a && {
+            "tw:text-white": !0,
+            "tw:bg-brand": o === "primary",
+            "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": o === "primary",
+            "tw:bg-zinc-500": o === "secondary",
+            "tw:highlight:bg-zinc-600 tw:highlight:border-zinc-600": o === "secondary",
+            "tw:bg-danger": o === "danger",
+            "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
+          },
+          !e && {
+            "tw:highlight:text-white": !a,
+            "tw:highlight:bg-brand": o === "primary",
+            "tw:highlight:bg-zinc-500": o === "secondary",
+            "tw:highlight:bg-danger": o === "danger"
+          },
+          {
+            "tw:pointer-events-none tw:opacity-65": e
+          },
+          r
+        ),
+        disabled: e,
+        ...s,
+        children: t
+      }
+    )
+  );
+}, Y = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
+  "button",
+  {
+    onClick: t,
+    className: w(
+      "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
+      "tw:rounded-md tw:focus-ring"
+    ),
+    "aria-label": r,
+    children: /* @__PURE__ */ n(k, { icon: $, size: "xl" })
+  }
+), R = ({
+  borderless: t = !1,
+  size: r = "md",
+  feedback: e,
+  className: o,
+  disabled: d,
+  readOnly: l,
+  ...a
+}) => {
+  const s = !d && !l;
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      className: w(
+        "tw:w-full",
+        {
+          "tw:focus-ring": !e,
+          "tw:focus-ring-danger": e === "error"
+        },
+        {
+          "tw:px-2 tw:py-1 tw:text-sm": r === "sm",
+          "tw:px-3 tw:py-1.5": r === "md",
+          "tw:px-4 tw:py-2 tw:text-xl": r === "lg"
+        },
+        {
+          "tw:rounded-md tw:border": !t,
+          "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !e,
+          "tw:border-danger": !t && e === "error",
+          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !s,
+          "tw:bg-lm-primary tw:dark:bg-dm-primary": s,
+          // Use different background color when rendered inside a card
+          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": s
+        },
+        o
+      ),
+      disabled: d,
+      readOnly: l,
+      ...a
+    }
+  );
+}, E = ({ required: t, children: r, ...e }) => /* @__PURE__ */ c("label", { ...e, children: [
+  r,
+  t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
+] }), kt = ({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: d, ...l }) => {
+  const a = B();
+  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(E, { htmlFor: a, required: e, children: t }),
+    /* @__PURE__ */ n(
+      R,
+      {
+        id: a,
+        className: r,
+        required: e || o,
+        feedback: d ? "error" : void 0,
+        ...l
+      }
+    ),
+    d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
+  ] });
+}, Z = String.raw`data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>`, z = ({
+  className: t,
+  size: r = "md",
+  feedback: e,
+  style: o = {},
+  disabled: d,
+  ...l
+}) => /* @__PURE__ */ n(
+  "select",
+  {
+    className: w(
+      "tw:w-full tw:appearance-none tw:pr-9 tw:bg-no-repeat",
+      {
+        "tw:focus-ring": !e,
+        "tw:focus-ring-danger": e === "error"
+      },
+      "tw:rounded-md tw:border",
+      {
+        "tw:border-lm-input-border tw:dark:border-dm-input-border": !e,
+        "tw:border-danger": e === "error"
+      },
+      {
+        "tw:pl-2 tw:py-1 tw:text-sm": r === "sm",
+        "tw:pl-3 tw:py-1.5": r === "md",
+        "tw:pl-4 tw:py-2 tw:text-xl": r === "lg",
+        "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": d,
+        // Apply different background color when rendered inside a card
+        "tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !d
+      },
+      t
+    ),
+    style: {
+      ...o,
+      backgroundImage: `url("${Z}")`,
+      backgroundSize: "16px 12px",
+      backgroundPosition: "right 0.75rem center"
+    },
+    disabled: d,
+    ...l
+  }
+), vt = ({ selectClassName: t, label: r, required: e, hiddenRequired: o, ...d }) => {
+  const l = B();
+  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(E, { htmlFor: l, required: e, children: r }),
+    /* @__PURE__ */ n(z, { id: l, className: t, required: e || o, ...d })
+  ] });
+};
+function tt(t, r = globalThis.setTimeout.bind(globalThis), e = globalThis.clearTimeout.bind(globalThis)) {
+  const o = S(null), d = p(() => {
+    o.current && e(o.current);
+  }, [e]), l = p((a, s) => {
+    d(), o.current = r(() => {
+      a(), o.current = null;
+    }, s ?? t);
+  }, [d, t, r]);
+  return F(() => d, [d]), T(
+    () => ({ setTimeout: l, clearCurrentTimeout: d }),
+    [d, l]
+  );
+}
+const Nt = ({
+  onChange: t,
+  containerClassName: r,
+  inputClassName: e,
+  // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
+  size: o = "lg",
+  ...d
+}) => {
+  const { setTimeout: l, clearCurrentTimeout: a } = tt(500), s = p((m) => {
+    m ? l(() => t(m)) : (a(), t(m));
+  }, [a, t, l]);
+  return /* @__PURE__ */ c("div", { className: w("tw:group tw:relative tw:focus-within:z-10", r), children: [
+    /* @__PURE__ */ n(
+      k,
+      {
+        icon: O,
+        className: w(
+          "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
+          "tw:text-placeholder tw:group-focus-within:text-lm-text tw:dark:group-focus-within:text-dm-text",
+          {
+            "tw:left-3": o !== "sm",
+            "tw:scale-85 tw:left-2": o === "sm"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      R,
+      {
+        type: "search",
+        className: w(
+          {
+            "tw:pl-9": o !== "sm",
+            "tw:pl-7": o === "sm"
+          },
+          e
+        ),
+        placeholder: "Search...",
+        onChange: (m) => s(m.target.value),
+        size: o,
+        ...d
+      }
+    )
+  ] });
+}, rt = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
+  "button",
+  {
+    className: w(
+      "tw:inline-flex tw:rounded-md tw:focus-ring",
+      "tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline",
+      {
+        "tw:px-1.5 tw:py-1 tw:text-sm": e === "sm",
+        "tw:px-3 tw:py-1.5": e === "md",
+        "tw:px-4 tw:py-2 tw:text-lg": e === "lg",
+        "tw:pointer-events-none tw:opacity-65": r
+      },
+      t
+    ),
+    disabled: r,
+    ...o
+  }
+), et = new Intl.NumberFormat("en-US"), ot = (t) => et.format(Number(t)), P = 10, Tt = (t) => Math.ceil(t / P) * P, h = 2, v = "...", nt = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), dt = (t, r) => {
+  const e = nt(
+    Math.max(h, t - h),
+    Math.min(r - 1, t + h) + 1
+  );
+  return t - h > h && e.unshift(v), t + h < r - 1 && e.push(v), e.unshift(1), e.push(r), e;
+}, x = (t) => t === v, lt = (t) => x(t) ? t : ot(t), at = (t, r) => x(t) ? `${t}_${r}` : `${t}`, M = (t = !1) => w(
+  "tw:border tw:border-r-0 tw:last:border-r tw:border-lm-border tw:dark:border-dm-border",
+  "tw:first:rounded-l tw:last:rounded-r",
+  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
+  "tw:outline-none tw:focus-visible:ring-3 tw:focus-visible:ring-brand/75 tw:focus-visible:z-1",
+  {
+    "tw:hover:bg-lm-secondary tw:dark:hover:bg-dm-secondary tw:text-brand tw:border-r-lm-border tw:dark:border-r-dm-border": !t,
+    "tw:bg-brand tw:text-white tw:border-r-brand": t
+  }
+);
+function j() {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      "aria-hidden": !0,
+      className: "tw:border-r tw:last:border-none tw:px-3 py-2 tw:text-gray-400 tw:border-r-(--border-color)",
+      children: v
+    }
+  );
+}
+function st({ children: t, active: r, isEllipsis: e, href: o, ...d }) {
+  const l = T(() => M(r), [r]);
+  return e ? /* @__PURE__ */ n(j, {}) : /* @__PURE__ */ n(L, { className: l, to: o, ...d, children: t });
+}
+function wt({ children: t, active: r, isEllipsis: e, ...o }) {
+  const d = T(() => M(r), [r]);
+  return e ? /* @__PURE__ */ n(j, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
+}
+const Ct = ({ currentPage: t, pagesCount: r, ...e }) => {
+  const o = "urlForPage" in e, d = o ? st : wt, l = p(
+    (a) => o ? { href: x(a) ? void 0 : e.urlForPage(a) } : { onClick: () => !x(a) && e.onPageChange(a) },
+    [o, e]
+  );
+  return r < 2 ? null : /* @__PURE__ */ c("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    /* @__PURE__ */ n(d, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: q }) }),
+    dt(t, r).map((a, s) => /* @__PURE__ */ n(
+      d,
+      {
+        active: a === t,
+        isEllipsis: x(a),
+        ...l(a),
+        children: lt(a)
+      },
+      at(a, s)
+    )),
+    /* @__PURE__ */ n(d, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: _ }) })
+  ] });
+}, it = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: w(
+      "tw:px-4 tw:py-3 tw:rounded-t-md",
+      "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
+      t
+    ),
+    ...r
+  }
+), ct = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: w(
+      "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
+      "tw:first:rounded-t-md tw:last:rounded-b-md",
+      t
+    ),
+    ...r
+  }
+), mt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: w(
+      "tw:px-4 tw:py-3 tw:rounded-b-md",
+      "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
+      t
+    ),
+    ...r
+  }
+), gt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: w(
+      "tw:group/card tw:rounded-md tw:shadow-md",
+      "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
+      t
+    ),
+    ...r
+  }
+), g = Object.assign(gt, { Body: ct, Header: it, Footer: mt }), Pt = ({ bodyClassName: t, children: r, ...e }) => {
+  const { title: o, titleSize: d = "md", ...l } = "title" in e ? e : {
+    ...e,
+    title: void 0,
+    titleSize: void 0
+  };
+  return /* @__PURE__ */ c(g, { ...l, children: [
+    o && /* @__PURE__ */ c(g.Header, { children: [
+      d === "lg" && /* @__PURE__ */ n("h4", { children: o }),
+      d === "md" && /* @__PURE__ */ n("h5", { children: o }),
+      d === "sm" && /* @__PURE__ */ n("h6", { children: o })
+    ] }),
+    /* @__PURE__ */ n(g.Body, { className: t, children: r })
+  ] });
+}, It = ({
+  open: t,
+  variant: r = "default",
+  size: e = "md",
+  title: o,
+  children: d,
+  className: l,
+  ...a
+}) => {
+  const { onConfirm: s, confirmText: m = "Confirm", ...H } = "onConfirm" in a ? a : {
+    ...a,
+    onConfirm: void 0,
+    confirmText: void 0
+  }, N = S(null), u = p(() => {
+    var i;
+    return (i = N.current) == null ? void 0 : i.close();
+  }, []), A = p(() => {
+    s == null || s(), u();
+  }, [u, s]);
+  return F(() => {
+    var C;
+    const i = document.querySelector("body"), D = i.style.overflow, U = i.style.paddingRight;
+    return t ? (i.style.overflow = "hidden", i.scrollHeight > i.clientHeight && (i.style.paddingRight = "15px"), (C = N.current) == null || C.showModal()) : u(), () => {
+      i.style.overflow = D, i.style.paddingRight = U;
+    };
+  }, [u, t]), /* @__PURE__ */ n(
+    "dialog",
+    {
+      ref: N,
+      className: w(
+        "tw:bg-transparent tw:backdrop:bg-black/50",
+        {
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen tw:px-4": t
+        },
+        l
+      ),
+      ...H,
+      children: t && /* @__PURE__ */ c(g, { className: w(
+        "tw:m-auto tw:w-full",
+        {
+          "tw:md:w-sm": e === "sm",
+          "tw:md:w-lg": e === "md",
+          "tw:md:w-4xl": e === "lg",
+          "tw:md:w-6xl": e === "xl",
+          "tw:w-full": e === "full"
+        }
+      ), children: [
+        /* @__PURE__ */ c(g.Header, { className: "tw:flex tw:items-center tw:justify-between tw:sticky tw:top-0", children: [
+          /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": r === "danger" }), children: o }),
+          /* @__PURE__ */ n(Y, { onClick: u, label: "Close dialog" })
+        ] }),
+        /* @__PURE__ */ n(g.Body, { children: d }),
+        /* @__PURE__ */ c(g.Footer, { className: "tw:flex tw:flex-row-reverse tw:gap-x-2 tw:items-center tw:py-4 tw:sticky tw:bottom-0", children: [
+          s && /* @__PURE__ */ n(X, { variant: r === "danger" ? "danger" : "primary", onClick: A, children: m }),
+          /* @__PURE__ */ n(rt, { onClick: u, children: "Cancel" })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  X as Button,
+  g as Card,
+  Y as CloseButton,
+  v as ELLIPSIS,
+  R as Input,
+  E as Label,
+  kt as LabelledInput,
+  vt as LabelledSelect,
+  rt as LinkButton,
+  It as ModalDialog,
+  Ct as Paginator,
+  Nt as SearchInput,
+  z as Select,
+  Pt as SimpleCard,
+  yt as Table,
+  ot as formatNumber,
+  at as keyForPage,
+  x as pageIsEllipsis,
+  lt as prettifyPageNumber,
+  dt as progressivePagination,
+  Tt as roundTen,
+  tt as useTimeout
+};

package/dist/tailwind.preset.css

@@ -0,0 +1,153 @@
+/*
+ * Override `dark:` variant, which applies based on `prefers-color-scheme` by default, and make it apply based on the
+ * presence of `data-theme="dark"` attribute instead.
+ */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme static inline {
+    /* Light mode */
+    /*--color-lm-main: #2078CF;*/ /*Properly accessible with white background*/
+    --color-lm-main: #4696e5; /* TODO Rename to "brand" */
+    --color-lm-main-dark: #1f69c0;
+    --color-lm-primary: #ffffff;
+    --color-lm-primary-alfa: rgba(var(--tw-color-lm-primary), .5);
+    --color-lm-secondary: #f5f6fe;
+    --color-lm-text: #232323;
+    --color-lm-border: rgb(0 0 0 / .125);
+    --color-lm-table-border: #dee2e6;
+    --color-lm-active: #eeeeee;
+    --color-lm-brand: var(--tw-color-lm-main); /* TODO Rename to "main" */
+    --color-lm-input: var(--tw-color-lm-primary);
+    --color-lm-disabled-input: var(--tw-color-lm-secondary);
+    --color-lm-input-text: #495057;
+    --color-lm-input-border: rgb(0 0 0 / .19);
+    --color-lm-table-highlight: rgb(0 0 0 / .075);
+
+    /* Dark mode */
+    --color-dm-main: #4696e5; /* TODO Rename to "brand" */
+    --color-dm-main-dark: #1f69c0;
+    --color-dm-primary: #161b22;
+    --color-dm-primary-alfa: rgba(var(--tw-color-dm-primary), .8);
+    --color-dm-secondary: #0f131a;
+    --color-dm-text: rgb(201 209 217);
+    --color-dm-border: rgb(255 255 255 / .15);
+    --color-dm-table-border: #393d43;
+    --color-dm-active: var(--tw-color-dm-secondary);
+    --color-dm-brand: #0b2d4e; /* TODO Rename to "main" */
+    --color-dm-input: rgb(17.9928571429 22.0821428571 27.8071428571);
+    --color-dm-disabled-input: rgb(26.0071428571 31.9178571429 40.1928571429);
+    --color-dm-input-text: var(--tw-color-dm-text);
+    --color-dm-input-border: var(--tw-color-dm-border);
+    --color-dm-table-highlight: var(--tw-color-dm-border);
+
+    /* TODO Remove these two colors */
+    --color-brand: #4696e5;
+    --color-brand-dark: #1f69c0;
+
+    /* General color palette */
+    --color-danger: #dc3545;
+    --color-danger-dark: #bb2d3b;
+    --color-warning: #ffc107;
+    --color-warning-dark: #ffca2c;
+    --color-placeholder: #6c757d;
+}
+
+@layer base {
+    html:not([data-theme='dark']) {
+        --primary-color: var(--tw-color-lm-primary);
+        --primary-color-alfa: var(--tw-color-lm-primary-alfa);
+        --secondary-color: var(--tw-color-lm-secondary);
+        --text-color: var(--tw-color-lm-text);
+        --border-color: var(--tw-color-lm-border);
+        --active-color: var(--tw-color-lm-active);
+        --brand-color: var(--tw-color-lm-brand);
+        --input-color: var(--tw-color-lm-input);
+        --input-disabled-color: var(--tw-color-lm-disabled-input);
+        --input-text-color: var(--tw-color-lm-input-text);
+        --input-border-color: var(--tw-color-lm-input-border);
+        --table-border-color: var(--tw-color-lm-table-border);
+        --table-highlight-color: var(--tw-color-lm-table-highlight);
+    }
+
+    html[data-theme='dark'] {
+        --primary-color: var(--tw-color-dm-primary);
+        --primary-color-alfa: var(--tw-color-dm-primary-alfa);
+        --secondary-color: var(--tw-color-dm-secondary);
+        --text-color: var(--tw-color-dm-text);
+        --border-color: var(--tw-color-dm-border);
+        --active-color: var(--tw-color-dm-active);
+        --brand-color: var(--tw-color-dm-brand);
+        --input-color: var(--tw-color-dm-input);
+        --input-disabled-color: var(--tw-color-dm-disabled-input);
+        --input-text-color: var(--tw-color-dm-input-text);
+        --input-border-color: var(--tw-color-dm-input-border);
+        --table-border-color: var(--tw-color-dm-table-border);
+        --table-highlight-color: var(--tw-color-dm-table-highlight);
+    }
+}
+
+@layer base {
+    :root {
+        --header-height: 56px;
+        @apply tw:scheme-normal tw:dark:scheme-dark tw:scroll-auto;
+    }
+
+    html, body {
+        @apply tw:h-full tw:bg-lm-secondary tw:dark:bg-dm-secondary tw:text-lm-text tw:dark:text-dm-text;
+    }
+
+    a {
+        /* Set these styles as plain CSS instead of @apply to avoid higher specificity */
+        /* TODO Use `main` color, not `brand` color */
+        color: var(--tw-color-brand);
+        border-radius: var(--tw-radius-xs);
+
+        @apply tw:focus-visible:outline-3 tw:focus-visible:outline-brand/50 tw:focus-visible:outline-offset-3 tw:focus-visible:z-1;
+    }
+
+    h1 {
+        @apply tw:text-[2.5rem]/[1.2] tw:m-0 tw:font-medium;
+    }
+    h2 {
+        @apply tw:text-[2rem]/[1.2] tw:m-0 tw:font-medium;
+    }
+    h3 {
+        @apply tw:text-[1.75rem]/[1.2] tw:m-0 tw:font-medium;
+    }
+    h4 {
+        @apply tw:text-2xl/[1.2] tw:m-0 tw:font-medium;
+    }
+    h5 {
+        @apply tw:text-xl/[1.2] tw:m-0 tw:font-medium;
+    }
+    h6 {
+        @apply tw:text-base/[1.2] tw:m-0 tw:font-medium;
+    }
+
+    hr {
+        @apply tw:my-3
+    }
+
+    p {
+        @apply tw:m-0;
+    }
+}
+
+@utility focus-ring-base {
+    @apply tw:outline-none tw:focus-visible:ring-3 tw:focus-visible:z-1 tw:transition-[box-shadow];
+}
+
+@utility focus-ring {
+    @apply tw:focus-ring-base tw:focus-visible:ring-brand/50;
+}
+
+@utility focus-ring-danger {
+    @apply tw:focus-ring-base tw:focus-visible:ring-danger/50;
+}
+
+@custom-variant highlight {
+    &:hover,
+    &:focus {
+        @slot;
+    }
+}