fulldev-ui 0.11.1 → 0.13.0

package/src/components/ui/typography/typography.astro

@@ -1,6 +1,8 @@
 ---
 import type { HTMLTag, Polymorphic } from "astro/types"
 
+import "./typeset.css"
+
 import { cn } from "@/lib/utils"
 
 type Size = "sm" | "default" | "lg"
@@ -12,295 +14,20 @@ const {
   size = "default",
   ...props
 } = Astro.props
+
+const sizeClass =
+  size === "sm"
+    ? "[--typeset-flow:1.125em] [--typeset-leading:1.7] [--typeset-size:0.875rem]"
+    : size === "lg"
+      ? "[--typeset-flow:1.5em] [--typeset-leading:1.8] [--typeset-size:1.125rem]"
+      : "[--typeset-flow:1.25em] [--typeset-leading:1.75] [--typeset-size:1rem]"
 ---
 
 <Tag
   data-slot="typography"
   data-size={size}
-  class={cn("text-foreground text-base", className)}
+  class={cn("typeset", sizeClass, className)}
   {...props}
 >
   <slot />
 </Tag>
-
-<style is:global>
-  @reference "@/styles/global.css";
-
-  [data-slot="typography"]
-    > :is(
-      [data-slot="typography-lead"],
-      [data-slot="typography-table-container"],
-      div,
-      section,
-      article,
-      aside,
-      nav,
-      figure,
-      details,
-      pre,
-      small,
-      dl,
-      img,
-      picture,
-      video,
-      iframe
-    ):not(:first-child) {
-    @apply mt-6;
-  }
-
-  [data-slot="typography"] > h1 {
-    @apply scroll-m-20 text-4xl font-semibold tracking-tight text-balance;
-  }
-
-  [data-slot="typography"] > h2 {
-    @apply scroll-m-20 text-3xl font-semibold tracking-tight;
-  }
-
-  [data-slot="typography"] > h2:first-child {
-    @apply mt-0;
-  }
-
-  [data-slot="typography"] > h2:not(:first-child) {
-    @apply mt-10;
-  }
-
-  [data-slot="typography"] > h3 {
-    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
-  }
-
-  [data-slot="typography"] > h3:not(:first-child) {
-    @apply mt-8;
-  }
-
-  [data-slot="typography"] > h4 {
-    @apply scroll-m-20 text-xl font-semibold tracking-tight;
-  }
-
-  [data-slot="typography"] > h4:not(:first-child) {
-    @apply mt-8;
-  }
-
-  [data-slot="typography"]
-    > :is(h1, h2, h3, h4)
-    + :is(
-      [data-slot="typography-lead"],
-      [data-slot="typography-table-container"],
-      div,
-      section,
-      article,
-      aside,
-      nav,
-      figure,
-      details,
-      p,
-      blockquote,
-      pre,
-      ul,
-      ol,
-      table,
-      small,
-      dl,
-      img,
-      picture,
-      video,
-      iframe
-    ) {
-    @apply mt-4;
-  }
-
-  [data-slot="typography"] > p {
-    @apply text-base leading-7;
-  }
-
-  [data-slot="typography"] > p:not(:first-child) {
-    @apply mt-6;
-  }
-
-  [data-slot="typography"]
-    > :is(h1, h2, h3, h4)
-    + :is(p, [data-slot="typography-lead"]):not(:first-child) {
-    @apply mt-4;
-  }
-
-  [data-slot="typography"] > a:not([data-slot]),
-  [data-slot="typography"]
-    > :is(p, blockquote, ul, ol, dl, table)
-    a:not([data-slot]) {
-    @apply text-foreground font-medium underline underline-offset-4;
-  }
-
-  [data-slot="typography"] > blockquote {
-    @apply mt-6 border-l-2 pl-6 text-base italic;
-  }
-
-  [data-slot="typography"] > hr {
-    @apply border-border my-8;
-  }
-
-  [data-slot="typography"] > pre {
-    @apply border-border bg-muted/60 overflow-x-auto rounded-xl border p-4 text-sm;
-  }
-
-  [data-slot="typography"] > .docs-code-block {
-    @apply border-border bg-muted/60 relative overflow-hidden rounded-xl border;
-  }
-
-  [data-slot="typography"] > .docs-code-block > pre,
-  [data-slot="typography"] > .docs-code-block > pre.astro-code {
-    @apply m-0 rounded-none border-0 !bg-transparent p-4 pr-14 text-sm leading-[var(--text-sm--line-height)];
-    font-family: var(--font-mono);
-  }
-
-  [data-slot="typography"] > .docs-code-block > pre.astro-code code {
-    @apply text-sm leading-[var(--text-sm--line-height)] !text-[var(--shiki-light,var(--foreground))];
-  }
-
-  .dark [data-slot="typography"] > .docs-code-block > pre.astro-code code {
-    @apply !text-[var(--shiki-dark,var(--foreground))];
-  }
-
-  .dark
-    [data-slot="typography"]
-    > .docs-code-block
-    > pre.astro-code
-    span[style*="--shiki-dark"] {
-    @apply ![font-weight:var(--shiki-dark-font-weight,inherit)] !text-[var(--shiki-dark)] ![font-style:var(--shiki-dark-font-style,inherit)] ![text-decoration:var(--shiki-dark-text-decoration,inherit)];
-  }
-
-  [data-slot="typography"] > .docs-code-block > .docs-code-copy {
-    @apply border-border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground absolute top-3 right-3 z-10 inline-flex size-8 items-center justify-center rounded-md border shadow-sm transition-colors;
-  }
-
-  [data-slot="typography"] > .docs-code-block svg {
-    @apply size-4;
-  }
-
-  [data-slot="typography"] > ul,
-  [data-slot="typography"] > ol {
-    @apply my-6 ml-6 text-base;
-  }
-
-  [data-slot="typography"] > ul {
-    @apply list-disc;
-  }
-
-  [data-slot="typography"] > ol {
-    @apply list-decimal;
-  }
-
-  [data-slot="typography"] > ul > li,
-  [data-slot="typography"] > ol > li {
-    @apply mt-2;
-  }
-
-  [data-slot="typography"] > [data-slot="typography-lead"] {
-    @apply text-muted-foreground;
-  }
-
-  [data-slot="typography"][data-size="sm"] > [data-slot="typography-lead"] {
-    @apply text-base;
-  }
-
-  [data-slot="typography"] > [data-slot="typography-lead"],
-  [data-slot="typography"][data-size="default"]
-    > [data-slot="typography-lead"] {
-    @apply text-lg;
-  }
-
-  [data-slot="typography"][data-size="lg"] > [data-slot="typography-lead"] {
-    @apply text-xl;
-  }
-
-  [data-slot="typography"] > small {
-    @apply block leading-none font-medium;
-  }
-
-  [data-slot="typography"] > small {
-    @apply text-sm;
-  }
-
-  [data-slot="typography"] > table {
-    @apply border-border my-6 block w-full overflow-x-auto rounded-lg border;
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-
-  [data-slot="typography"] > table th,
-  [data-slot="typography"] > table td {
-    @apply border-border border-b px-4 py-2 text-left align-top whitespace-nowrap;
-  }
-
-  [data-slot="typography"] > table th {
-    @apply text-foreground bg-muted/40 font-medium;
-  }
-
-  [data-slot="typography"] > table tr:last-child td {
-    @apply border-b-0;
-  }
-
-  [data-slot="typography"] > table thead,
-  [data-slot="typography"] > table tbody,
-  [data-slot="typography"] > table tr {
-    @apply w-full;
-  }
-
-  [data-slot="typography"] > table tr {
-    @apply grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)];
-  }
-
-  [data-slot="typography"] > table tr {
-    @apply even:bg-muted/40 m-0 border-t p-0 first:border-t-0;
-  }
-
-  [data-slot="typography"] > table th {
-    @apply border-r px-4 py-2 text-left font-bold last:border-r-0;
-  }
-
-  [data-slot="typography"] > table th[align="center"] {
-    @apply text-center;
-  }
-
-  [data-slot="typography"] > table th[align="right"] {
-    @apply text-right;
-  }
-
-  [data-slot="typography"] > table td {
-    @apply border-r px-4 py-2 text-left last:border-r-0;
-  }
-
-  [data-slot="typography"] > table td[align="center"] {
-    @apply text-center;
-  }
-
-  [data-slot="typography"] > table td[align="right"] {
-    @apply text-right;
-  }
-
-  [data-slot="typography"] > table tbody tr:last-child td {
-    @apply border-b-0;
-  }
-
-  [data-slot="typography"] :not(pre) > code {
-    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
-  }
-
-  [data-slot="typography"] > table :not(pre) > code {
-    @apply rounded-md text-sm leading-5 font-normal;
-  }
-
-  [data-slot="typography"] > pre.astro-code {
-    @apply border-border !bg-muted/60 rounded-xl border p-4 text-sm leading-[var(--text-sm--line-height)];
-  }
-
-  [data-slot="typography"] > pre.astro-code code {
-    @apply !text-inherit;
-  }
-
-  .dark [data-slot="typography"] > pre.astro-code {
-    @apply !text-[var(--shiki-dark,var(--foreground))];
-  }
-
-  .dark [data-slot="typography"] > pre.astro-code span[style*="--shiki-dark"] {
-    @apply ![font-weight:var(--shiki-dark-font-weight,inherit)] !text-[var(--shiki-dark)] ![font-style:var(--shiki-dark-font-style,inherit)] ![text-decoration:var(--shiki-dark-text-decoration,inherit)];
-  }
-</style>

package/src/styles/global.css

@@ -115,6 +115,8 @@
 }
 
 @theme inline {
+  --font-heading: var(--font-sans);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);