chore(contented-preview): simplify style and fix favicon (#633)

#### What this PR does / why we need it:

As per title.

Author: fuxingloh

packages/contented-example/docs/04-markdown.md

@@ -182,14 +182,14 @@ They can be declared via long-form `:::div{class="table-fixed"}` or short-form `
 
 ### Table Directive
 
-| Header 1 | Header 2 | Header 3 |
-| -------- | -------- | -------- |
-| Cell 1   | Cell 2   | Cell 3   |
+| Header 1 | Header 2 | Header 3                            |
+| -------- | -------- | ----------------------------------- |
+| Cell 1   | Cell 2   | Cell 3 `LongTextThatCannotTruncate` |
 
 ```markdown
-| Header 1 | Header 2 | Header 3 |
-| -------- | -------- | -------- |
-| Cell 1   | Cell 2   | Cell 3   |
+| Header 1 | Header 2 | Header 3                            |
+| -------- | -------- | ----------------------------------- |
+| Cell 1   | Cell 2   | Cell 3 `LongTextThatCannotTruncate` |
 ```
 
 :::div{class="table-fixed"}

packages/contented-example/package.json

@@ -12,6 +12,7 @@
   ],
   "scripts": {
     "build": "contented build",
+    "clean": "rm -rf .contented dist",
     "generate": "contented generate",
     "watch": "contented build --watch",
     "write": "contented generate --watch"

packages/contented-preview/src/app/favicon.ico

@@ -51,7 +51,7 @@ export default function ContentNavigation({ sections, className }) {
                         className={clsx('truncate', {
                           'block w-full cursor-pointer truncate pl-3.5 before:pointer-events-none before:absolute before:inset-y-0 before:-left-1 before:w-1':
                             folderName,
-                          'text-primary-500 before:bg-primary-500 font-semibold': isCurrentPath,
+                          'font-semibold text-rose-500 before:bg-rose-500': isCurrentPath,
                           'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300':
                             !isCurrentPath,
                         })}

packages/contented-preview/src/components/ContentNavigation.jsx

@@ -11,7 +11,7 @@ export default function ContentProse({ as: Component = 'div', className, ...prop
         // lead
         'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
         // links
-        'prose-a:font-semibold prose-a:text-primary-500 dark:prose-a:text-primary-400',
+        'prose-a:font-semibold prose-a:text-rose-500 dark:prose-a:text-rose-400',
         // link underline
         'prose-a:no-underline hover:prose-a:underline ',
         // code

packages/contented-preview/src/components/ContentProse.jsx

@@ -29,7 +29,7 @@ export default function Header() {
             </div>
 
             <a href="/" className="flex items-center">
-              <Square3Stack3DIcon className="text-primary-500 h-6 w-6" />
+              <Square3Stack3DIcon className="h-6 w-6 text-rose-500" />
               <h1 className="ml-2 font-semibold">{process.env.CONTENTED_PREVIEW_SITE_NAME}</h1>
             </a>
 

packages/contented-preview/src/components/Header.jsx

@@ -2,13 +2,11 @@ export default function NotFound() {
   return (
     <main className="max-w-8xl mx-auto flex w-full flex-grow flex-col px-4 sm:px-6 lg:px-8">
       <div className="my-auto flex-shrink-0 py-16 sm:py-32">
-        <p className="text-primary-600 dark:text-primary-500 text-sm font-semibold uppercase tracking-wide">
-          404 error
-        </p>
+        <p className="text-sm font-semibold uppercase tracking-wide text-rose-600 dark:text-rose-500">404 error</p>
         <h1 className="mt-2 text-4xl font-extrabold tracking-tight sm:text-5xl">Page not found</h1>
         <p className="mt-2 text-base text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
         <div className="mt-6">
-          <a href="/" className="text-primary-600 dark:text-primary-500 text-base font-medium">
+          <a href="/" className="text-base font-medium text-rose-600 dark:text-rose-500">
             Go back home<span aria-hidden="true"> &rarr;</span>
           </a>
         </div>

packages/contented-preview/src/pages/404.jsx

@@ -41,7 +41,7 @@
 
 .prose :is(h1, h2, h3, h4, h5, h6) a:first-child:before {
   content: '#';
-  @apply text-primary-500 absolute -ml-6;
+  @apply absolute -ml-6 text-rose-500;
 }
 
 .prose code:not(pre code):not(:where([class~='not-prose'] *)) {

packages/contented-preview/src/styles/prose.css

@@ -7,32 +7,6 @@ module.exports = {
       maxWidth: {
         '8xl': '100rem',
       },
-      colors: {
-        primary: {
-          50: '#FFE5F7',
-          100: '#FFCCEF',
-          200: '#FF99DF',
-          300: '#FF66CF',
-          400: '#FF33BF',
-          500: '#FF00AF',
-          600: '#D60093',
-          700: '#AD0077',
-          800: '#85005B',
-          900: '#5C003F',
-        },
-        'dark-primary': {
-          25: '#2F0421',
-          50: '#460632',
-          100: '#751657',
-          200: '#8F1A6A',
-          300: '#CD1F96',
-          400: '#D6249E',
-          500: '#EE2CB1',
-          600: '#F268C7',
-          700: '#F8ABE0',
-          900: '#FFDFF5',
-        },
-      },
       typography: ({ theme }) => ({
         DEFAULT: {
           css: {