create-starlight-cms 0.9.0

package/template/src/admin/navigation-tree.tsx

@@ -0,0 +1,82 @@
+import { createOnDropHandler, dragAndDropFeature, hotkeysCoreFeature, keyboardDragAndDropFeature, selectionFeature, syncDataLoaderFeature } from '@headless-tree/core';
+import { AssistiveTreeDescription, useTree } from '@headless-tree/react';
+import clsx from 'clsx';
+import { useEffect, useMemo, useRef } from 'react';
+
+export type NavigationItem = { id: string; parentId: string | null; kind: 'folder' | 'document'; name: string; slug: string; order: number; hasTranslation: boolean; translationLocales: string[]; translationStates: { locale: string; state: 'draft' | 'changes' | 'published' }[]; documentId?: string };
+const root: NavigationItem = { id: 'root', parentId: null, kind: 'folder', name: 'Navigation', slug: '', order: 0, hasTranslation: true, translationLocales: [], translationStates: [] };
+
+export function NavigationTree({ items, selectedDocumentId, selectedFolderId, onSelectDocument, onSelectFolder, onChangeChildren, onTreeChanged, canReorder = true }: {
+  items: NavigationItem[]; selectedDocumentId?: string; selectedFolderId: string | null;
+  onSelectDocument: (id: string) => void; onSelectFolder: (id: string) => void;
+  onChangeChildren: (parentId: string | null, childIds: string[]) => Promise<void>;
+  onTreeChanged: () => Promise<void>;
+  canReorder?: boolean;
+}) {
+  const saving = useRef(false);
+  const byId = useMemo(() => new Map([root, ...items].map((item) => [item.id, item])), [items]);
+  const children = useMemo(() => {
+    const entries: [string, string[]][] = [['root', items.filter((item) => item.parentId === null).sort((a, b) => a.order - b.order).map((item) => item.id)]];
+    for (const item of items) entries.push([item.id, items.filter((candidate) => candidate.parentId === item.id).sort((a, b) => a.order - b.order).map((candidate) => candidate.id)]);
+    return new Map(entries);
+  }, [items]);
+  const tree = useTree<NavigationItem>({
+    rootItemId: 'root', getItemName: (item) => item.getItemData().name,
+    isItemFolder: (item) => item.getItemData().kind === 'folder',
+    onPrimaryAction: (item) => {
+      const data = item.getItemData();
+      if (data.documentId) onSelectDocument(data.documentId);
+      else if (data.id !== 'root') onSelectFolder(data.id.slice('folder:'.length));
+    },
+    dataLoader: { getItem: (id) => byId.get(id) ?? root, getChildren: (id) => children.get(id) ?? [] },
+    initialState: { expandedItems: ['root', ...items.filter((item) => item.kind === 'folder').map((item) => item.id)] },
+    canReorder,
+    indent: 20,
+    canDrag: (dragged) => !saving.current && canReorder && dragged.length === 1 && dragged[0]?.getId() !== 'root',
+    // The sync loader must see the removal before the helper inserts the item.
+    // Persist only the final destination, never the intermediate removal.
+    onDrop: async (dragged, target) => {
+      if (saving.current) return;
+      saving.current = true;
+      const before = new Map(children);
+      try {
+        await createOnDropHandler<NavigationItem>((parent, childIds) => {
+          children.set(parent.getId(), childIds);
+        })(dragged, target);
+        const parentId = target.item.getId();
+        await onChangeChildren(parentId === 'root' ? null : parentId.slice('folder:'.length), children.get(parentId) ?? []);
+        await onTreeChanged();
+      } catch {
+        // The API caller displays the error; put the visible tree back as well.
+        children.clear();
+        for (const [id, ids] of before) children.set(id, ids);
+        tree.rebuildTree();
+      } finally {
+        saving.current = false;
+      }
+    },
+    features: [syncDataLoaderFeature, selectionFeature, dragAndDropFeature, hotkeysCoreFeature, keyboardDragAndDropFeature],
+  });
+  useEffect(() => { tree.rebuildTree(); }, [children, tree]);
+  return <div className="navigation-tree-scroll"><div {...tree.getContainerProps('Navigation tree')} className="tree">
+    <AssistiveTreeDescription tree={tree} />
+    {tree.getItems().filter((item) => item.getId() !== 'root').map((item) => {
+      const data = item.getItemData();
+      const isSelected = data.documentId ? selectedDocumentId === data.documentId : selectedFolderId === data.id.slice('folder:'.length);
+      const hasChanges = data.translationStates.some((entry) => entry.state === 'changes');
+      const hasDraft = data.translationStates.some((entry) => entry.state === 'draft');
+      const publicationLabel = hasChanges ? 'Changes' : hasDraft ? 'Draft' : null;
+      const publicationTitle = data.translationStates.filter((entry) => entry.state !== 'published').map((entry) => `${entry.locale}: ${entry.state === 'changes' ? 'Changes' : 'Draft'}`).join(', ');
+      return <button {...item.getProps()} key={item.getKey()} style={{ paddingLeft: `${item.getItemMeta().level * 20}px` }}>
+        <div className={clsx('treeitem', {
+          focused: item.isFocused(),
+          expanded: item.isExpanded(),
+          selected: isSelected,
+          folder: item.isFolder(),
+          drop: item.isDragTarget(),
+        })}><span className="treeitem-name">{data.name}</span>{publicationLabel && <span className={clsx('treeitem-status', hasChanges ? 'changes' : 'draft')} title={publicationTitle}>{publicationLabel}</span>}</div>
+      </button>;
+    })}
+    <div className="dragline" style={tree.getDragLineStyle()} />
+  </div></div>;
+}

package/template/src/admin/preview.ts

@@ -0,0 +1,73 @@
+import { getDocument } from '../documents/service.ts';
+import type { RuntimeEnv } from '../env.ts';
+import { defaultLocale, type SupportedLocale } from '../locales.ts';
+import { renderPreviewDocument, renderPreviewTocItems } from '../starlight/preview-render.ts';
+
+function previewShellPath(locale: SupportedLocale): string {
+  return locale === defaultLocale ? '/cms-preview-shell/' : `/${locale}/cms-preview-shell/`;
+}
+
+function previewHeaders(asset: Response): Headers {
+  const headers = new Headers(asset.headers);
+  headers.delete('ETag');
+  headers.delete('CF-Cache-Status');
+  headers.delete('Content-Length');
+  headers.set('Cache-Control', 'private, no-store');
+  headers.set('X-Robots-Tag', 'noindex, nofollow');
+  return headers;
+}
+
+function headingLevel(value: string | null, fallback: number): number {
+  const level = Number(value);
+  return Number.isInteger(level) && level >= 1 && level <= 6 ? level : fallback;
+}
+
+/**
+ * Keep Preview on the protected admin path while reusing the actual Starlight
+ * page frame and assets generated by the most recent public build.
+ */
+export async function previewDocument(env: RuntimeEnv, request: Request, id: string, locale: SupportedLocale): Promise<Response> {
+  const document = await getDocument(env, id, locale);
+  const shellRequest = new Request(new URL(previewShellPath(locale), request.url));
+  const shell = await env.ASSETS.fetch(shellRequest);
+  if (!shell.ok || !shell.headers.get('content-type')?.includes('text/html')) {
+    throw new Error('Preview shell is unavailable. Rebuild the public site, then try again.');
+  }
+
+  const title = document.title || 'Untitled document';
+  const preview = renderPreviewDocument(document.contentJson);
+  let desktopLevels = { min: 2, max: 3 };
+  let mobileLevels = { min: 2, max: 3 };
+  const response = new HTMLRewriter()
+    .on('title', { element: (element) => { element.setInnerContent(`${title} | Preview`); } })
+    .on('meta[name="description"], meta[property="og:description"]', { element: (element) => { element.setAttribute('content', document.description); } })
+    .on('meta[property="og:title"]', { element: (element) => { element.setAttribute('content', title); } })
+    .on('meta[name="robots"]', { element: (element) => { element.setAttribute('content', 'noindex, nofollow'); } })
+    .on('link[rel="canonical"]', { element: (element) => { element.remove(); } })
+    // A preview is opened for one document locale. The public-site selector
+    // would navigate to an empty static shell rather than this saved draft.
+    .on('starlight-lang-select', { element: (element) => { element.remove(); } })
+    .on('#_top', { element: (element) => { element.setInnerContent(title); } })
+    .on('#cms-preview-content', { element: (element) => { element.setInnerContent(preview.html, { html: true }); } })
+    .on('starlight-toc', { element: (element) => {
+      desktopLevels = {
+        min: headingLevel(element.getAttribute('data-min-h'), 2),
+        max: headingLevel(element.getAttribute('data-max-h'), 3),
+      };
+    } })
+    .on('mobile-starlight-toc', { element: (element) => {
+      mobileLevels = {
+        min: headingLevel(element.getAttribute('data-min-h'), 2),
+        max: headingLevel(element.getAttribute('data-max-h'), 3),
+      };
+    } })
+    .on('starlight-toc ul', { element: (element) => {
+      element.setInnerContent(renderPreviewTocItems(preview.headings, desktopLevels.min, desktopLevels.max, element.getAttribute('class') ?? ''), { html: true });
+    } })
+    .on('mobile-starlight-toc ul', { element: (element) => {
+      element.setInnerContent(renderPreviewTocItems(preview.headings, mobileLevels.min, mobileLevels.max, element.getAttribute('class') ?? ''), { html: true });
+    } })
+    .transform(shell);
+
+  return new Response(response.body, { status: response.status, statusText: response.statusText, headers: previewHeaders(shell) });
+}

package/template/src/admin/styles/_cms-theme.scss

@@ -0,0 +1,58 @@
+/* CMS-owned semantic tokens. Tiptap's editor tokens remain in _variables.scss. */
+:root {
+  --cms-bg: #f7f8fa;
+  --cms-surface: #ffffff;
+  --cms-elevated: #ffffff;
+  --cms-border: #e2e5ea;
+  --cms-accent: #7c3aed;
+  --cms-accent-hover: #6d28d9;
+  --cms-accent-subtle: rgba(124, 58, 237, .10);
+  --cms-success: #16a34a;
+  --cms-success-subtle: rgba(22, 163, 74, .10);
+  --cms-warning: #d97706;
+  --cms-warning-subtle: rgba(217, 119, 6, .10);
+  --cms-danger: #dc2626;
+  --cms-danger-subtle: rgba(220, 38, 38, .10);
+
+  --cms-text: #182230;
+  --cms-text-muted: #667085;
+  --cms-text-subtle: #98a2b3;
+  --cms-hover: #f1f3f6;
+  --cms-input-bg: #ffffff;
+  --cms-focus-ring: rgba(124, 58, 237, .20);
+  --cms-backdrop: rgba(16, 24, 40, .32);
+  --cms-shadow: rgba(16, 24, 40, .12);
+  --cms-accent-foreground: #ffffff;
+  --cms-success-text: #166534;
+  --cms-warning-text: #92400e;
+  --cms-danger-text: #b91c1c;
+}
+
+html.dark {
+  --cms-bg: #111318;
+  --cms-surface: #181b21;
+  --cms-elevated: #1d2027;
+  --cms-border: #2b303a;
+  --cms-accent: #8b5cf6;
+  --cms-accent-hover: #a78bfa;
+  --cms-accent-subtle: rgba(139, 92, 246, .14);
+  --cms-success: #22c55e;
+  --cms-success-subtle: rgba(34, 197, 94, .14);
+  --cms-warning: #f59e0b;
+  --cms-warning-subtle: rgba(245, 158, 11, .14);
+  --cms-danger: #ef4444;
+  --cms-danger-subtle: rgba(239, 68, 68, .14);
+
+  --cms-text: #f5f7fa;
+  --cms-text-muted: #b0b7c3;
+  --cms-text-subtle: #87909f;
+  --cms-hover: #252a33;
+  --cms-input-bg: #181b21;
+  --cms-focus-ring: rgba(139, 92, 246, .32);
+  --cms-backdrop: rgba(0, 0, 0, .50);
+  --cms-shadow: rgba(0, 0, 0, .42);
+  --cms-accent-foreground: #ffffff;
+  --cms-success-text: #86efac;
+  --cms-warning-text: #fcd34d;
+  --cms-danger-text: #fca5a5;
+}

package/template/src/admin/styles/_keyframe-animations.scss

@@ -0,0 +1,91 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes zoom {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideFromTop {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideFromRight {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromBottom {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/template/src/admin/styles/_variables.scss

@@ -0,0 +1,298 @@
+:root {
+  /****************** 
+  Basics
+  ******************/
+
+  overflow-wrap: break-word;
+  /* iOS WebKit only honors the -webkit- prefixed form */
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /****************** 
+  Colors variables
+  ******************/
+
+  /* Gray alpha (light mode) */
+  --tt-gray-light-a-50: rgba(56, 56, 56, 0.04);
+  --tt-gray-light-a-100: rgba(15, 22, 36, 0.05);
+  --tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
+  --tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
+  --tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
+  --tt-gray-light-a-500: rgba(52, 55, 60, 0.64);
+  --tt-gray-light-a-600: rgba(36, 39, 46, 0.78);
+  --tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
+  --tt-gray-light-a-800: rgba(30, 32, 36, 0.95);
+  --tt-gray-light-a-900: rgba(29, 30, 32, 0.98);
+
+  /* Gray (light mode) */
+  --tt-gray-light-50: rgba(250, 250, 250, 1);
+  --tt-gray-light-100: rgba(244, 244, 245, 1);
+  --tt-gray-light-200: rgba(234, 234, 235, 1);
+  --tt-gray-light-300: rgba(213, 214, 215, 1);
+  --tt-gray-light-400: rgba(166, 167, 171, 1);
+  --tt-gray-light-500: rgba(125, 127, 130, 1);
+  --tt-gray-light-600: rgba(83, 86, 90, 1);
+  --tt-gray-light-700: rgba(64, 65, 69, 1);
+  --tt-gray-light-800: rgba(44, 45, 48, 1);
+  --tt-gray-light-900: rgba(34, 35, 37, 1);
+
+  /* Gray alpha (dark mode) */
+  --tt-gray-dark-a-50: rgba(232, 232, 253, 0.05);
+  --tt-gray-dark-a-100: rgba(231, 231, 243, 0.07);
+  --tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
+  --tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
+  --tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
+  --tt-gray-dark-a-500: rgba(236, 238, 253, 0.5);
+  --tt-gray-dark-a-600: rgba(247, 247, 253, 0.64);
+  --tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
+  --tt-gray-dark-a-800: rgba(253, 253, 253, 0.88);
+  --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);
+
+  /* Gray (dark mode) */
+  --tt-gray-dark-50: rgba(25, 25, 26, 1);
+  --tt-gray-dark-100: rgba(32, 32, 34, 1);
+  --tt-gray-dark-200: rgba(45, 45, 47, 1);
+  --tt-gray-dark-300: rgba(70, 70, 73, 1);
+  --tt-gray-dark-400: rgba(99, 99, 105, 1);
+  --tt-gray-dark-500: rgba(124, 124, 131, 1);
+  --tt-gray-dark-600: rgba(163, 163, 168, 1);
+  --tt-gray-dark-700: rgba(192, 192, 195, 1);
+  --tt-gray-dark-800: rgba(224, 224, 225, 1);
+  --tt-gray-dark-900: rgba(245, 245, 245, 1);
+
+  /* Brand colors */
+  --tt-brand-color-50: rgba(239, 238, 255, 1);
+  --tt-brand-color-100: rgba(222, 219, 255, 1);
+  --tt-brand-color-200: rgba(195, 189, 255, 1);
+  --tt-brand-color-300: rgba(157, 138, 255, 1);
+  --tt-brand-color-400: rgba(122, 82, 255, 1);
+  --tt-brand-color-500: rgba(98, 41, 255, 1);
+  --tt-brand-color-600: rgba(84, 0, 229, 1);
+  --tt-brand-color-700: rgba(75, 0, 204, 1);
+  --tt-brand-color-800: rgba(56, 0, 153, 1);
+  --tt-brand-color-900: rgba(43, 25, 102, 1);
+  --tt-brand-color-950: hsla(257, 100%, 9%, 1);
+
+  /* Green */
+  --tt-color-green-inc-5: hsla(129, 100%, 97%, 1);
+  --tt-color-green-inc-4: hsla(129, 100%, 92%, 1);
+  --tt-color-green-inc-3: hsla(131, 100%, 86%, 1);
+  --tt-color-green-inc-2: hsla(133, 98%, 78%, 1);
+  --tt-color-green-inc-1: hsla(137, 99%, 70%, 1);
+  --tt-color-green-base: hsla(147, 99%, 50%, 1);
+  --tt-color-green-dec-1: hsla(147, 97%, 41%, 1);
+  --tt-color-green-dec-2: hsla(146, 98%, 32%, 1);
+  --tt-color-green-dec-3: hsla(146, 100%, 24%, 1);
+  --tt-color-green-dec-4: hsla(144, 100%, 16%, 1);
+  --tt-color-green-dec-5: hsla(140, 100%, 9%, 1);
+
+  /* Yellow */
+  --tt-color-yellow-inc-5: hsla(50, 100%, 97%, 1);
+  --tt-color-yellow-inc-4: hsla(50, 100%, 91%, 1);
+  --tt-color-yellow-inc-3: hsla(50, 100%, 84%, 1);
+  --tt-color-yellow-inc-2: hsla(50, 100%, 77%, 1);
+  --tt-color-yellow-inc-1: hsla(50, 100%, 68%, 1);
+  --tt-color-yellow-base: hsla(52, 100%, 50%, 1);
+  --tt-color-yellow-dec-1: hsla(52, 100%, 41%, 1);
+  --tt-color-yellow-dec-2: hsla(52, 100%, 32%, 1);
+  --tt-color-yellow-dec-3: hsla(52, 100%, 24%, 1);
+  --tt-color-yellow-dec-4: hsla(51, 100%, 16%, 1);
+  --tt-color-yellow-dec-5: hsla(50, 100%, 9%, 1);
+
+  /* Red */
+  --tt-color-red-inc-5: hsla(11, 100%, 96%, 1);
+  --tt-color-red-inc-4: hsla(11, 100%, 88%, 1);
+  --tt-color-red-inc-3: hsla(10, 100%, 80%, 1);
+  --tt-color-red-inc-2: hsla(9, 100%, 73%, 1);
+  --tt-color-red-inc-1: hsla(7, 100%, 64%, 1);
+  --tt-color-red-base: hsla(7, 100%, 54%, 1);
+  --tt-color-red-dec-1: hsla(7, 100%, 41%, 1);
+  --tt-color-red-dec-2: hsla(5, 100%, 32%, 1);
+  --tt-color-red-dec-3: hsla(4, 100%, 24%, 1);
+  --tt-color-red-dec-4: hsla(3, 100%, 16%, 1);
+  --tt-color-red-dec-5: hsla(1, 100%, 9%, 1);
+
+  /* Basic colors */
+  --white: rgba(255, 255, 255, 1);
+  --black: rgba(14, 14, 17, 1);
+  --transparent: rgba(255, 255, 255, 0);
+
+  /****************** 
+  Shadow variables
+  ******************/
+
+  /* Shadows Light */
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(17, 24, 39, 0.04),
+    0px 12px 24px 0px rgba(17, 24, 39, 0.04),
+    0px 6px 8px 0px rgba(17, 24, 39, 0.02),
+    0px 2px 3px 0px rgba(17, 24, 39, 0.02);
+
+  /************************************************** 
+       Radius variables 
+    **************************************************/
+
+  --tt-radius-xxs: 0.125rem; /* 2px */
+  --tt-radius-xs: 0.25rem; /* 4px */
+  --tt-radius-sm: 0.375rem; /* 6px */
+  --tt-radius-md: 0.5rem; /* 8px */
+  --tt-radius-lg: 0.75rem; /* 12px */
+  --tt-radius-xl: 1rem; /* 16px */
+
+  /************************************************** 
+       Transition variables 
+    **************************************************/
+
+  --tt-transition-duration-short: 0.1s;
+  --tt-transition-duration-default: 0.2s;
+  --tt-transition-duration-long: 0.64s;
+  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
+  --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
+  --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+  /****************** 
+  Contrast variables
+  ******************/
+
+  --tt-accent-contrast: 8%;
+  --tt-destructive-contrast: 8%;
+  --tt-foreground-contrast: 8%;
+
+  &,
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    transition: none var(--tt-transition-duration-default)
+      var(--tt-transition-easing-default);
+  }
+}
+
+:root {
+  /************************************************** 
+      Global colors 
+  **************************************************/
+
+  /* Global colors - Light mode */
+  --tt-bg-color: var(--white);
+  --tt-border-color: var(--tt-gray-light-a-200);
+  --tt-border-color-tint: var(--tt-gray-light-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-light-100);
+  --tt-scrollbar-color: var(--tt-gray-light-a-200);
+  --tt-cursor-color: var(--tt-brand-color-500);
+  --tt-selection-color: rgba(157, 138, 255, 0.2);
+  --tt-card-bg-color: var(--white);
+  --tt-card-border-color: var(--tt-gray-light-a-100);
+}
+
+/* Global colors - Dark mode */
+.dark {
+  --tt-bg-color: var(--black);
+  --tt-border-color: var(--tt-gray-dark-a-200);
+  --tt-border-color-tint: var(--tt-gray-dark-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-dark-100);
+  --tt-scrollbar-color: var(--tt-gray-dark-a-200);
+  --tt-cursor-color: var(--tt-brand-color-400);
+  --tt-selection-color: rgba(122, 82, 255, 0.2);
+  --tt-card-bg-color: var(--tt-gray-dark-50);
+  --tt-card-border-color: var(--tt-gray-dark-a-50);
+
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(0, 0, 0, 0.5), 0px 12px 24px 0px rgba(0, 0, 0, 0.24),
+    0px 6px 8px 0px rgba(0, 0, 0, 0.22), 0px 2px 3px 0px rgba(0, 0, 0, 0.12);
+}
+
+/* Text colors */
+:root {
+  --tt-color-text-gray: hsl(45, 2%, 46%);
+  --tt-color-text-brown: hsl(19, 31%, 47%);
+  --tt-color-text-orange: hsl(30, 89%, 45%);
+  --tt-color-text-yellow: hsl(38, 62%, 49%);
+  --tt-color-text-green: hsl(148, 32%, 39%);
+  --tt-color-text-blue: hsl(202, 54%, 43%);
+  --tt-color-text-purple: hsl(274, 32%, 54%);
+  --tt-color-text-pink: hsl(328, 49%, 53%);
+  --tt-color-text-red: hsl(2, 62%, 55%);
+
+  --tt-color-text-gray-contrast: hsla(39, 26%, 26%, 0.15);
+  --tt-color-text-brown-contrast: hsla(18, 43%, 69%, 0.35);
+  --tt-color-text-orange-contrast: hsla(24, 73%, 55%, 0.27);
+  --tt-color-text-yellow-contrast: hsla(44, 82%, 59%, 0.39);
+  --tt-color-text-green-contrast: hsla(126, 29%, 60%, 0.27);
+  --tt-color-text-blue-contrast: hsla(202, 54%, 59%, 0.27);
+  --tt-color-text-purple-contrast: hsla(274, 37%, 64%, 0.27);
+  --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
+  --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
+}
+
+.dark {
+  --tt-color-text-gray: hsl(0, 0%, 61%);
+  --tt-color-text-brown: hsl(18, 35%, 58%);
+  --tt-color-text-orange: hsl(25, 53%, 53%);
+  --tt-color-text-yellow: hsl(36, 54%, 55%);
+  --tt-color-text-green: hsl(145, 32%, 47%);
+  --tt-color-text-blue: hsl(202, 64%, 52%);
+  --tt-color-text-purple: hsl(270, 55%, 62%);
+  --tt-color-text-pink: hsl(329, 57%, 58%);
+  --tt-color-text-red: hsl(1, 69%, 60%);
+
+  --tt-color-text-gray-contrast: hsla(0, 0%, 100%, 0.09);
+  --tt-color-text-brown-contrast: hsla(17, 45%, 50%, 0.25);
+  --tt-color-text-orange-contrast: hsla(27, 82%, 53%, 0.2);
+  --tt-color-text-yellow-contrast: hsla(35, 49%, 47%, 0.2);
+  --tt-color-text-green-contrast: hsla(151, 55%, 39%, 0.2);
+  --tt-color-text-blue-contrast: hsla(202, 54%, 43%, 0.2);
+  --tt-color-text-purple-contrast: hsla(271, 56%, 60%, 0.18);
+  --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
+  --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
+}
+
+/* Highlight colors */
+:root {
+  --tt-color-highlight-yellow: #fef9c3;
+  --tt-color-highlight-green: #dcfce7;
+  --tt-color-highlight-blue: #e0f2fe;
+  --tt-color-highlight-purple: #f3e8ff;
+  --tt-color-highlight-red: #ffe4e6;
+  --tt-color-highlight-gray: rgb(248, 248, 247);
+  --tt-color-highlight-brown: rgb(244, 238, 238);
+  --tt-color-highlight-orange: rgb(251, 236, 221);
+  --tt-color-highlight-pink: rgb(252, 241, 246);
+
+  --tt-color-highlight-yellow-contrast: #fbe604;
+  --tt-color-highlight-green-contrast: #c7fad8;
+  --tt-color-highlight-blue-contrast: #ceeafd;
+  --tt-color-highlight-purple-contrast: #e4ccff;
+  --tt-color-highlight-red-contrast: #ffccd0;
+  --tt-color-highlight-gray-contrast: rgba(84, 72, 49, 0.15);
+  --tt-color-highlight-brown-contrast: rgba(210, 162, 141, 0.35);
+  --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
+  --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
+}
+
+.dark {
+  --tt-color-highlight-yellow: #6b6524;
+  --tt-color-highlight-green: #509568;
+  --tt-color-highlight-blue: #6e92aa;
+  --tt-color-highlight-purple: #583e74;
+  --tt-color-highlight-red: #743e42;
+  --tt-color-highlight-gray: rgb(47, 47, 47);
+  --tt-color-highlight-brown: rgb(74, 50, 40);
+  --tt-color-highlight-orange: rgb(92, 59, 35);
+  --tt-color-highlight-pink: rgb(78, 44, 60);
+
+  --tt-color-highlight-yellow-contrast: #58531e;
+  --tt-color-highlight-green-contrast: #47855d;
+  --tt-color-highlight-blue-contrast: #5e86a1;
+  --tt-color-highlight-purple-contrast: #4c3564;
+  --tt-color-highlight-red-contrast: #643539;
+  --tt-color-highlight-gray-contrast: rgba(255, 255, 255, 0.094);
+  --tt-color-highlight-brown-contrast: rgba(184, 101, 69, 0.25);
+  --tt-color-highlight-orange-contrast: rgba(233, 126, 37, 0.2);
+  --tt-color-highlight-pink-contrast: rgba(220, 76, 145, 0.22);
+}

package/template/src/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="45 45 160 160"><g id="cloud-document-icon" data-name="Cloud document icon" fill="none" stroke="#111827" stroke-width="2"><path id="document-back" data-name="Purple document backing" fill="#8B5CF6" stroke="none" stroke-width="2" d="M 71.235 164.233 L 71.235 83.433 C 71.235 73.033 79.635 65.833 91.135 65.833 L 139.976 66.011 L 164.02 90.497 L 164.035 155.433 Z" /><path id="paper" data-name="White paper sheet" fill="#FFFFFF" stroke="none" stroke-width="2" d="M 81.235 164.233 L 81.235 85.833 C 81.235 79.833 85.935 75.833 91.935 75.833 L 132.9 75.833 C 132.9 87 142 96 154.035 96 L 154.035 156.5 Z" /><path id="path-6" data-name="Folded page flap" fill="#8B5CF6" stroke="none" stroke-width="2" d="M 139.976 66.011 L 164.02 90.497 L 154.035 96 C 142 96 132.9 87 132.9 75.833 L 139.976 66.011 Z" /><rect id="line-one" data-name="Text line one" fill="#8B5CF6" stroke="none" stroke-width="2" x="93.277" y="100.317" width="33.6" height="8.4" rx="4.8" ry="4.8" /><rect id="line-two" data-name="Text line two" fill="#8B5CF6" stroke="none" stroke-width="2" x="93.277" y="114.317" width="51.2" height="8.4" rx="4.8" ry="4.8" /><rect id="line-three" data-name="Text line three" fill="#8B5CF6" stroke="none" stroke-width="2" x="93.277" y="127.717" width="30.4" height="8.4" rx="4.8" ry="4.8" /><path id="cloud" data-name="Foreground cloud embracing document" fill="#8B5CF6" stroke="none" stroke-width="2" d="M 64.625 193.917 C 54.625 193.917 47.825 186.117 47.825 173.717 C 47.825 158.317 58.425 145.917 73.625 141.517 C 88.225 137.517 100.625 143.117 109.825 151.117 C 118.625 131.917 134.025 128.517 150.825 128.517 C 170.625 128.517 185.225 142.717 186.425 156.717 C 197.825 158.517 202.625 168.117 202.625 174.517 C 202.625 186.517 193.625 193.917 180.625 193.917 Z" /><path id="sparkle" data-name="Four-point sparkle" fill="#8B5CF6" stroke="none" stroke-width="2" d="M 175.877 56.717 C 178.677 68.917 181.677 72.917 194.477 75.517 C 181.477 78.117 178.677 81.917 175.877 94.117 C 172.877 81.917 170.077 78.517 157.077 75.517 C 170.077 72.717 172.877 68.917 175.877 56.717 Z" /></g></svg>