@terrafirmagreg-team/ui 1.2.7 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/ui",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "type": "module",
   "description": "Shared UI kit",
   "license": "LGPL-3.0-only",
@@ -44,7 +44,7 @@
     "@react-three/drei": "10.7.9",
     "@react-three/fiber": "9.8.2",
     "@shadcn/react": "^0.3.1",
-    "@terrafirmagreg-team/translate": "^1.2.5",
+    "@terrafirmagreg-team/translate": "^1.2.6",
     "@xyflow/react": "12.12.0",
     "beautiful-mermaid": "^1.1.3",
     "class-variance-authority": "^0.7.1",

package/src/components/blocks/link/link-preview.tsx

@@ -2,7 +2,7 @@
 import { useContext, useState } from 'react';
 import type { ComponentProps } from 'react';
 import { useUiComponents } from '@terrafirmagreg-team/ui/provider';
-import { Globe } from 'lucide-react';
+import { Globe, SquareArrowOutUpRight } from 'lucide-react';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
 import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
@@ -86,6 +86,7 @@ function ExternalAnchor({
         }
       >
         {children}
+        <SquareArrowOutUpRight className="ms-0.5 inline-block size-3 align-baseline text-muted-foreground" />
       </HoverCardTrigger>
       <HoverCardContent className="w-fit max-w-[min(18rem,90vw)]">
         <div className="flex w-full min-w-0 items-center gap-2 font-medium">

package/src/components/blocks/page/heading.tsx

@@ -37,7 +37,7 @@ export function Heading({
         props.className,
       )}
     >
-      {props.children}
+      <span className="min-w-0">{props.children}</span>
       <button
         aria-live="polite"
         className={cn(

package/src/components/layouts/layout.tsx

@@ -29,6 +29,8 @@ export type LayoutProps = {
   sidebar?: ReactNode;
   navTitle?: ComponentType<ComponentProps<'a'>>;
   header?: ReactNode;
+  banner?: ReactNode;
+  defaultOpenLevel?: number;
   children?: ReactNode;
 };
 
@@ -41,23 +43,27 @@ export function Layout({
   sidebar,
   navTitle: Title = EmptyTitle,
   header = <LayoutHeader />,
+  banner,
+  defaultOpenLevel = 0,
   children,
 }: LayoutProps) {
   return (
     <LayoutContext value={useMemo(() => ({ navTitle: Title }), [Title])}>
       <TreeContextProvider tree={tree}>
-        <SidebarProvider>
+        <SidebarProvider defaultOpenLevel={defaultOpenLevel}>
           <LeftSidebarPortalProvider>
             <div
               id="spacious-layout"
               data-slot="layout"
               className="relative grid min-h-(--layout-height) bg-card transition-[grid-template-columns] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none [--layout-height:calc(100dvh_-_var(--banner-height,0px))] [--header-height:--spacing(14)] [--page-width:100%] [--sidebar-width:0px] [--sidebar-col:var(--sidebar-width)] [--toc-width:0px] max-md:[--docs-row-3:calc(var(--banner-height,0px)+var(--header-height)+var(--toc-popover-height,0px))] md:h-(--layout-height) md:overflow-clip print:h-auto print:overflow-visible"
               style={{
-                gridTemplate: `"sidebar header right" auto
+                gridTemplate: `"banner banner banner" auto
+"sidebar header right" auto
 "sidebar toc-popover right" var(--toc-popover-height, 0px)
 "sidebar main right" 1fr / var(--sidebar-col) minmax(0, 1fr) auto`,
               }}
             >
+              {banner}
               {sidebar}
               {header}
               <RightSidebar>{children}</RightSidebar>

package/src/components/layouts/left-sidebar/tree.tsx

@@ -25,6 +25,29 @@ import {
   LeftSidebarItem,
   LeftSidebarLabel,
 } from './items';
+import { isSkeletonTree } from '@terrafirmagreg-team/ui/lib/tree';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+
+const TREE_SKELETON_ROWS = [
+  'w-3/5',
+  'w-4/5 ms-4',
+  'w-2/3 ms-4',
+  'w-1/2 ms-4',
+  'w-3/4',
+  'w-1/2 ms-4',
+  'w-2/3 ms-4',
+  'w-3/5',
+];
+
+export function LeftSidebarTreeSkeleton() {
+  return (
+    <div aria-hidden className="flex flex-col gap-1 px-1 py-2">
+      {TREE_SKELETON_ROWS.map((width, i) => (
+        <Skeleton key={i} className={`h-7 ${width}`} />
+      ))}
+    </div>
+  );
+}
 
 type TreeRenderer = (props: {
   item: PageTree.Node;
@@ -61,6 +84,7 @@ export function LeftSidebarTree({
   const search = useLocationSearch();
   const { languages } = useLocaleRegistry();
   const resolved = tree ?? root;
+  if (isSkeletonTree(resolved)) return <LeftSidebarTreeSkeleton />;
   return (
     <RendererContext
       value={useMemo(

package/src/components/mdx/accordion.tsx

@@ -13,6 +13,7 @@ import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-transl
 export function AccordionRoot({ className, ...props }: ComponentProps<typeof Primitive.Root>) {
   return (
     <Primitive.Root
+      data-md="accordions"
       className={(s) =>
         cn(
           'divide-y divide-border overflow-hidden rounded-lg border bg-card',
@@ -98,6 +99,12 @@ export function Accordions({
   const rootRef = useRef<HTMLDivElement>(null);
   const composedRef = mergeRefs(ref, rootRef);
   const [value, setValue] = useState<unknown[]>(defaultValue ?? []);
+  const initial = JSON.stringify(defaultValue);
+
+  useEffect(() => {
+    setValue(defaultValue ?? []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initial]);
 
   useEffect(() => {
     const id = window.location.hash.substring(1);
@@ -144,7 +151,7 @@ export function Accordion({
         {id ? <CopyButton id={id} /> : null}
       </AccordionHeader>
       <AccordionContent hiddenUntilFound>
-        <div className="px-4 pb-2 text-[0.9375rem] prose-no-margin [&[hidden]:not([hidden='until-found'])]:hidden">
+        <div className="px-4 pb-2 text-[0.9375rem] prose-no-margin [&[hidden]:not([hidden='until-found'])]:hidden [&_[data-md=accordions]]:ms-1 [&_[data-md=accordions]]:border-s-2 [&_[data-md=accordions]]:bg-muted/40 [&_.fd-steps]:bg-muted/40 [&_.fd-steps]:rounded-md [&_.fd-steps]:pe-3">
           {children}
         </div>
       </AccordionContent>

package/src/components/mdx/banner.tsx

@@ -1,39 +1,60 @@
 'use client';
 
-import { type HTMLAttributes, useEffect, useState } from 'react';
+import { type CSSProperties, type HTMLAttributes, useEffect, useState } from 'react';
 import { X } from 'lucide-react';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import {
+  gradientImage,
+  type GradientProps,
+} from '@terrafirmagreg-team/ui/lib/mdx/gradient';
 
-type BannerVariant = 'rainbow' | 'normal';
+type BannerVariant = 'rainbow' | 'normal' | 'fade' | 'glow';
 
-export type BannerProps = HTMLAttributes<HTMLDivElement> & {
+export type BannerProps = HTMLAttributes<HTMLDivElement> &
+  GradientProps & {
 
-  height?: string;
+    height?: string;
 
-  variant?: BannerVariant;
+    variant?: BannerVariant;
 
-  rainbowColors?: string[];
+    gradient?: boolean;
 
-  changeLayout?: boolean;
-};
+    rainbowColors?: string[];
+
+    changeLayout?: boolean;
+  };
+
+const fadeMask = {
+  WebkitMask:
+    'linear-gradient(#fff 0 0) content-box, linear-gradient(to bottom, #fff 0%, transparent 100%) border-box',
+  WebkitMaskComposite: 'destination-out',
+  mask: 'linear-gradient(to bottom, #fff 0%, transparent 100%) border-box subtract, linear-gradient(#fff 0 0) content-box',
+} as CSSProperties;
 
 export function Banner({
   id,
   variant = 'normal',
   changeLayout = true,
-  height = '3rem',
+  height,
+  gradient,
+  from,
+  to,
+  dir,
+  image,
   rainbowColors = [
     'rgba(0,149,255,0.56)',
     'rgba(231,77,255,0.77)',
     'rgba(255,0,0,0.73)',
     'rgba(131,255,166,0.66)',
   ],
+  style,
   ...props
 }: BannerProps) {
   const t = useTranslations();
   const [open, setOpen] = useState(true);
+  const glow = variant === 'fade' || variant === 'glow';
   const globalKey = id ? `banner-${encodeBase32(id)}` : null;
 
   useEffect(() => {
@@ -47,19 +68,41 @@ export function Banner({
 
   if (!open) return null;
 
+  const gradientBg = gradientImage({ from, to, dir, image });
+  const textStyle: CSSProperties | undefined = gradient
+    ? {
+        backgroundImage: gradientBg,
+        WebkitBackgroundClip: 'text',
+        backgroundClip: 'text',
+        WebkitTextFillColor: 'transparent',
+        color: 'transparent',
+      }
+    : undefined;
+
   return (
     <div
       id={id}
       {...props}
       className={cn(
-        'sticky top-0 z-40 flex flex-row items-center justify-center rounded-xl px-4 text-center text-sm font-medium',
+        'flex flex-row items-center justify-center px-4 text-center font-medium',
+        glow
+          ? 'relative isolate mt-10 mb-6 overflow-hidden rounded-[20px] p-2.5 text-xl font-semibold [&_:is(h1,h2,h3,h4,h5,h6)]:m-0 [&_:is(h1,h2,h3,h4,h5,h6)]:border-0 [&_:is(h1,h2,h3,h4,h5,h6)]:p-0 [&_:is(h1,h2,h3,h4,h5,h6)_button]:hidden'
+          : 'sticky top-0 z-40 rounded-xl text-sm',
         variant === 'normal' && 'bg-secondary',
         variant === 'rainbow' && 'bg-background',
         !open && 'hidden',
         props.className,
       )}
       style={{
-        height,
+        height: height ?? (glow ? undefined : '3rem'),
+        ...(variant === 'glow'
+          ? {
+              backgroundImage:
+                'radial-gradient(var(--header-bg-inner), var(--header-bg-outer))',
+              boxShadow: '0 0 20px var(--header-shadow)',
+            }
+          : {}),
+        ...style,
       }}
     >
       {changeLayout && open ? (
@@ -83,7 +126,16 @@ export function Banner({
             colors: rainbowColors,
           })
         : null}
-      {props.children}
+      {variant === 'fade' ? (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-0 rounded-[inherit] p-px"
+          style={{ backgroundImage: gradientBg, ...fadeMask }}
+        />
+      ) : null}
+      <div className="relative" style={textStyle}>
+        {props.children}
+      </div>
       {id ? (
         <button
           type="button"

package/src/components/mdx/callout.tsx

@@ -1,35 +1,68 @@
-import { CircleCheck, CircleX, Info, Lightbulb, StickyNote, TriangleAlert } from 'lucide-react';
+import {
+  Bell,
+  Bug,
+  CircleAlert,
+  CircleCheck,
+  CircleHelp,
+  CircleX,
+  ClipboardList,
+  Info,
+  Lightbulb,
+  ListChecks,
+  Megaphone,
+  OctagonAlert,
+  OctagonX,
+  Quote,
+  StickyNote,
+  TriangleAlert,
+} from 'lucide-react';
 import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { calloutStyle } from '@terrafirmagreg-team/ui/lib/mdx/callout';
 
 export type CalloutType =
-  | 'info'
   | 'note'
   | 'tip'
+  | 'info'
+  | 'important'
   | 'warn'
   | 'warning'
-  | 'error'
+  | 'caution'
+  | 'attention'
   | 'danger'
+  | 'error'
   | 'success'
-  | 'idea';
+  | 'idea'
+  | 'question'
+  | 'failure'
+  | 'bug'
+  | 'abstract'
+  | 'example'
+  | 'quote';
 
 const iconClass = 'size-5 -me-0.5 fill-(--callout-color) text-card';
+const textIconClass =
+  'size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)';
 
 const ICONS: Record<string, ReactNode> = {
-  info: <Info className={iconClass} />,
   note: <StickyNote className={iconClass} />,
-  tip: (
-    <Lightbulb className="size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)" />
-  ),
+  tip: <Lightbulb className={textIconClass} />,
+  info: <Info className={iconClass} />,
+  important: <Megaphone className={iconClass} />,
   warn: <TriangleAlert className={iconClass} />,
   warning: <TriangleAlert className={iconClass} />,
-  error: <CircleX className={iconClass} />,
-  danger: <CircleX className={iconClass} />,
+  caution: <OctagonAlert className={iconClass} />,
+  attention: <Bell className={iconClass} />,
+  danger: <OctagonX className={iconClass} />,
+  error: <CircleAlert className={iconClass} />,
   success: <CircleCheck className={iconClass} />,
-  idea: (
-    <Lightbulb className="size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)" />
-  ),
+  idea: <Lightbulb className={textIconClass} />,
+  question: <CircleHelp className={iconClass} />,
+  failure: <CircleX className={iconClass} />,
+  bug: <Bug className={iconClass} />,
+  abstract: <ClipboardList className={iconClass} />,
+  example: <ListChecks className={iconClass} />,
+  quote: <Quote className={iconClass} />,
 };
 
 export function Callout({

package/src/components/mdx/files.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { cva } from 'class-variance-authority';
-import { FileIcon, FolderIcon, FolderOpen } from 'lucide-react';
+import { FileIcon, FolderIcon, FolderOpen, SquareArrowOutUpRight } from 'lucide-react';
+import Link from 'next/link';
 import { type HTMLAttributes, type ReactNode, useState } from 'react';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
@@ -19,45 +20,73 @@ export function Files({ className, ...props }: HTMLAttributes<HTMLDivElement>):
 }
 
 export interface FileProps extends HTMLAttributes<HTMLDivElement> {
-  name: string;
+  name: ReactNode;
   icon?: ReactNode;
+  href?: string;
+  description?: string;
 }
 
 export interface FolderProps extends HTMLAttributes<HTMLDivElement> {
-  name: string;
+  name: ReactNode;
 
   disabled?: boolean;
 
   defaultOpen?: boolean;
+
+  href?: string;
+
+  description?: string;
 }
 
 export function File({
   name,
   icon = <FileIcon />,
+  href,
+  description,
   className,
   ...rest
 }: FileProps): React.ReactElement {
   return (
-    <div className={cn(itemVariants({ className }))} {...rest}>
+    <div
+      className={cn(itemVariants({ className }))}
+      title={description}
+      {...rest}
+    >
       {icon}
-      {name}
+      {href ? (
+        <Link href={href} className="hover:underline">
+          {name}
+        </Link>
+      ) : (
+        name
+      )}
     </div>
   );
 }
 
-export function Folder({ name, defaultOpen = false, ...props }: FolderProps): React.ReactElement {
+export function Folder({ name, defaultOpen = false, href, description, ...props }: FolderProps): React.ReactElement {
   const [open, setOpen] = useState(defaultOpen);
 
   return (
     <Collapsible open={open} onOpenChange={setOpen} {...props}>
-      <CollapsibleTrigger className={cn(itemVariants({ className: 'w-full' }))}>
-        {open ? <FolderOpen /> : <FolderIcon />}
-        {name}
-      </CollapsibleTrigger>
+      <div className="flex items-center" title={description}>
+        <CollapsibleTrigger className={cn(itemVariants({ className: 'w-full' }))}>
+          {open ? <FolderOpen /> : <FolderIcon />}
+          {name}
+        </CollapsibleTrigger>
+        {href ? (
+          <Link
+            href={href}
+            className="me-1 rounded p-1 text-muted-foreground hover:text-foreground [&_svg]:size-3.5"
+            aria-label={typeof name === 'string' ? name : undefined}
+          >
+            <SquareArrowOutUpRight />
+          </Link>
+        ) : null}
+      </div>
       <CollapsibleContent>
         <div className="ms-2 flex flex-col border-l ps-2">{props.children}</div>
       </CollapsibleContent>
     </Collapsible>
   );
 }
-

package/src/components/mdx/gradient.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'react';
+import {
+  gradientImage,
+  type GradientProps,
+} from '@terrafirmagreg-team/ui/lib/mdx/gradient';
+
+export function Gradient({
+  from,
+  to,
+  dir,
+  image,
+  style,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & GradientProps) {
+  return (
+    <div
+      {...props}
+      style={{
+        backgroundImage: gradientImage({ from, to, dir, image }),
+        WebkitBackgroundClip: 'text',
+        backgroundClip: 'text',
+        WebkitTextFillColor: 'transparent',
+        color: 'transparent',
+        ...style,
+      }}
+    />
+  );
+}

package/src/components/mdx/video.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function Video({
+  src,
+  title,
+  className,
+  ...props
+}: ComponentProps<'div'> & { src: string; title?: string }) {
+  return (
+    <div
+      className={cn(
+        'not-prose my-6 mx-auto w-full max-w-2xl overflow-hidden rounded-xl border bg-card',
+        className,
+      )}
+      {...props}
+    >
+      <iframe
+        src={src}
+        title={title}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+        className="aspect-video w-full"
+      />
+    </div>
+  );
+}

package/src/hooks/use-last-result.ts

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'react';
+
+export function useLastResult<T>(result: {
+  value: T | undefined;
+  pending: boolean;
+  error: unknown;
+}, key?: string): {
+  value: T | undefined;
+  stale: boolean;
+  pending: boolean;
+  error: unknown;
+} {
+  const [held, setHeld] = useState<{ key?: string; value: T } | undefined>();
+  const keyMismatch = held !== undefined && held.key !== key;
+  if (
+    result.value !== undefined &&
+    (keyMismatch || !Object.is(held?.value, result.value))
+  ) {
+    setHeld({ key, value: result.value });
+  }
+  const value = result.value ?? (keyMismatch ? undefined : held?.value);
+  return {
+    value,
+    stale: value !== undefined && result.value === undefined,
+    pending: result.pending && value === undefined,
+    error: result.error,
+  };
+}

package/src/lib/config.ts

@@ -56,8 +56,10 @@ export const DEFAULT_EXTERNAL_META_PROVIDERS: ExternalMetaProvider[] = [
   },
   {
     host: /.*/,
-    url: 'https://api.allorigins.win/raw?url={href}',
-    kind: 'html',
+    url: 'https://api.microlink.io?url={href}',
+    kind: 'json',
+    title: 'data.title',
+    description: 'data.description',
   },
 ];
 

package/src/lib/mdx/callout.ts

@@ -1,15 +1,24 @@
 import type { CSSProperties } from 'react';
 
 export const COLORS: Record<string, string> = {
-  info: 'var(--color-info)',
   note: 'var(--color-note)',
   tip: 'var(--color-tip)',
+  info: 'var(--color-info)',
+  important: 'var(--color-important)',
   warn: 'var(--color-warning)',
   warning: 'var(--color-warning)',
+  caution: 'var(--color-caution)',
+  attention: 'var(--color-attention)',
+  danger: 'var(--color-danger)',
   error: 'var(--color-error)',
-  danger: 'var(--color-error)',
   success: 'var(--color-success)',
   idea: 'var(--color-idea)',
+  question: 'var(--color-question)',
+  failure: 'var(--color-failure)',
+  bug: 'var(--color-bug)',
+  abstract: 'var(--color-abstract)',
+  example: 'var(--color-example)',
+  quote: 'var(--color-quote)',
 };
 
 export function calloutStyle(

package/src/lib/tree.ts

@@ -1,5 +1,15 @@
 import type * as PageTree from '@terrafirmagreg-team/translate/types/tree';
 
+export function skeletonTree(id = 'sidebar:skeleton'): PageTree.Root {
+  return { name: '', children: [], $id: id, $skeleton: true } as PageTree.Root;
+}
+
+export function isSkeletonTree(
+  tree: PageTree.Root | PageTree.Folder | undefined,
+): boolean {
+  return (tree as { $skeleton?: boolean } | undefined)?.$skeleton === true;
+}
+
 export function normalizeUrl(url: string): string {
   if (url.startsWith('http://') || url.startsWith('https://')) return url;
   if (!url.startsWith('/')) url = `/${url}`;

package/src/types/mdx-directives.ts

@@ -17,17 +17,6 @@ export type GradientDirectiveProps = {
   className?: string;
 };
 
-export type GlowDirectiveProps = {
-  from?: string;
-  to?: string;
-  dir?: string;
-  image?: string;
-  gradient?: boolean;
-  fade?: boolean;
-  children: string;
-  className?: string;
-};
-
 export type CalloutDirectiveProps = {
   type?: CalloutType;
   title?: string;
@@ -48,7 +37,12 @@ export type CardDirectiveProps = {
 export type BannerDirectiveProps = {
   id?: string;
   height?: string;
-  variant?: 'rainbow' | 'normal';
+  variant?: 'normal' | 'rainbow' | 'fade' | 'glow';
+  gradient?: boolean;
+  from?: string;
+  to?: string;
+  dir?: string;
+  image?: string;
   rainbowColors?: string[];
   changeLayout?: boolean;
   children?: string;
@@ -64,6 +58,7 @@ export type TabsDirectiveProps = {
 };
 
 export type AccordionsDirectiveProps = {
+  format?: 'details' | 'accordions' | 'jsx';
   multiple?: boolean;
   defaultValue?: string | string[];
   children: string;
@@ -76,6 +71,13 @@ export type StepsDirectiveProps = {
 };
 
 export type FilesDirectiveProps = {
+  format?: 'list' | 'fenced';
+  name?: string;
+  icon?: string;
+  href?: string;
+  description?: string;
+  disabled?: boolean;
+  defaultOpen?: boolean;
   children: string;
   className?: string;
 };
@@ -93,6 +95,13 @@ export type MermaidDirectiveProps = {
 };
 
 export type MathDirectiveProps = {
+  format?:
+    | 'inline'
+    | 'dollar'
+    | 'leaf'
+    | 'container'
+    | 'fenced'
+    | 'display';
   children: string;
   block?: boolean;
 };

package/styles/content/default-colors.css

@@ -44,6 +44,12 @@
   --color-error: oklch(63.7% 0.237 25.331);
   --color-success: oklch(72.3% 0.219 149.579);
   --color-idea: oklch(70.5% 0.209 60.849);
+  --color-question: oklch(80% 0.16 95);
+  --color-failure: oklch(60% 0.22 0);
+  --color-bug: oklch(57% 0.19 340);
+  --color-abstract: oklch(75% 0.15 195);
+  --color-example: oklch(62% 0.2 310);
+  --color-quote: oklch(60% 0.02 260);
   --color-diff-remove: rgba(200, 10, 100, 0.12);
   --color-diff-remove-symbol: rgb(230, 10, 100);
   --color-diff-add: rgba(14, 180, 100, 0.1);

package/styles.css

@@ -40,10 +40,22 @@
   --color-sidebar-ring: hsl(0, 0%, 63.9%);
 
   --color-info: oklch(62.3% 0.214 259.815);
+  --color-note: oklch(65% 0.03 260);
+  --color-tip: oklch(70% 0.19 165);
+  --color-important: oklch(60% 0.22 295);
   --color-warning: oklch(76.9% 0.188 70.08);
+  --color-caution: oklch(68% 0.2 45);
+  --color-attention: oklch(65% 0.22 350);
+  --color-danger: oklch(56% 0.23 18);
   --color-error: oklch(63.7% 0.237 25.331);
   --color-success: oklch(72.3% 0.219 149.579);
-  --color-idea: oklch(70.5% 0.209 60.849);
+  --color-idea: oklch(78% 0.17 85);
+  --color-question: oklch(80% 0.16 95);
+  --color-failure: oklch(60% 0.22 0);
+  --color-bug: oklch(57% 0.19 340);
+  --color-abstract: oklch(75% 0.15 195);
+  --color-example: oklch(62% 0.2 310);
+  --color-quote: oklch(60% 0.02 260);
   --color-diff-remove: rgba(200, 10, 100, 0.12);
   --color-diff-remove-symbol: rgb(230, 10, 100);
   --color-diff-add: rgba(14, 180, 100, 0.1);
@@ -95,6 +107,9 @@
   --color-chart-5: oklch(0.645 0.246 16.439);
 
   --color-float: hsl(0, 0%, 11.6%);
+
+  --header-bg-inner: rgb(255 255 255 / 0.07);
+  --header-shadow: rgb(0 0 0 / 0.7);
 }
 
 :root {
@@ -103,6 +118,9 @@
     var(--color-primary) 10%,
     transparent
   );
+  --header-bg-inner: rgb(0 0 0 / 0.03);
+  --header-bg-outer: rgb(0 0 0 / 0);
+  --header-shadow: rgb(94 94 94 / 0.4);
 }
 
 html {

package/src/components/mdx/glow-header.tsx

@@ -1,54 +0,0 @@
-import type { ComponentProps } from 'react';
-import { gradientImage, type GradientProps } from '@terrafirmagreg-team/ui/lib/mdx/gradient';
-import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
-
-export function GlowHeader({
-  fade,
-  gradient,
-  from,
-  to,
-  dir,
-  image,
-  style,
-  className,
-  children,
-  ...props
-}: GradientProps & { fade?: boolean; gradient?: boolean } & ComponentProps<'span'>) {
-  const boxFrom = from ?? '#fa18cf';
-  const boxTo = to ?? '#ff7967';
-  const gradientBg = gradientImage({ from, to, dir, image });
-  const boxBg = `radial-gradient(color-mix(in srgb, ${boxFrom} 18%, transparent), color-mix(in srgb, ${boxTo} 8%, transparent))`;
-  return (
-    <span
-      className={cn(
-        'relative mb-6 inline-block rounded-[20px] px-4 py-2.5 text-center',
-        className,
-      )}
-      style={{
-        backgroundImage: gradient ? `${gradientBg}, ${boxBg}` : boxBg,
-        ...(gradient && {
-          WebkitBackgroundClip: 'text, border-box',
-          backgroundClip: 'text, border-box',
-          WebkitTextFillColor: 'transparent',
-        }),
-        boxShadow: `0 10px 20px color-mix(in srgb, ${boxFrom} 25%, transparent)`,
-        ...style,
-      }}
-      {...props}
-    >
-      {children}
-      {fade && (
-        <span
-          aria-hidden
-          className="pointer-events-none absolute inset-x-4 -bottom-0.5 h-0.5 rounded-full"
-          style={{
-            backgroundImage: gradientBg,
-            maskImage:
-              'linear-gradient(to right, transparent, black 25%, black 75%, transparent)',
-          }}
-        />
-      )}
-    </span>
-  );
-}
-

package/src/components/mdx/gradient-text.tsx

@@ -1,28 +0,0 @@
-import type { ComponentProps } from 'react';
-import { gradientImage, type GradientProps } from '@terrafirmagreg-team/ui/lib/mdx/gradient';
-import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
-
-export function GradientText({
-  from,
-  to,
-  dir,
-  image,
-  style,
-  className,
-  ...props
-}: GradientProps & ComponentProps<'span'>) {
-  return (
-    <span
-      className={cn('text-transparent', className)}
-      style={{
-        backgroundImage: gradientImage({ from, to, dir, image }),
-        WebkitBackgroundClip: 'text',
-        backgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        ...style,
-      }}
-      {...props}
-    />
-  );
-}
-