Merge pull request #67 from omnifed/66-docs-add-missing-preset-instal…

…lation-step 66 docs add missing preset installation step
omnifed · May 17, 2024 · 020d686 · 020d686
2 parents c41f897 + 4da92d6
commit 020d686
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/docs/app/preset/overview.mdx b/docs/app/preset/overview.mdx
@@ -43,7 +43,21 @@ Now that you have extended Panda, you need to update your local styles by runnin
 pnpm run prepare
 ```
 
-### Step 4 - Setup Cerberus Fonts (optional)
+### Step 4 - Connect the Cerberus Theme
+
+To connect the Cerberus theme, you need to add the required `data` attributes to your `html` tag.
+
+```tsx title="app/layout.tsx" {3}
+function Layout({ children }) {
+  return (
+    <html lang="en" data-theme="cerberus" data-color-mode="light">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+### Step 5 - Setup Cerberus Fonts (optional)
 
 If you would like to use the Brand font associated with Cerberus, we recommend Poppins. Unfortunately, it is not a variable font, so another great solution which is, is the Inter font (comes pre-configured in NextJS apps).
 

diff --git a/docs/app/preset/theme/theme.mdx b/docs/app/preset/theme/theme.mdx
@@ -1,7 +1,23 @@
+import { NoteAdmonition } from '@/app/components/Admonition'
+
 # Theme
 
 **The color palette is a key element in the design system. It is used to create a visual hierarchy, guide the user's attention, and reinforce the brand identity.**
 
+## Theme vs. Mode
+
+It is important to understand the difference between the theme and mode.
+
+### Theme
+
+The theme is the color palette that is used to style the design system. It is divided into six categories: neutral, action, info, success, warning, and danger. Each category has a set of tokens that define the color palette.
+
+### Mode
+
+The mode is the color scheme that is used to style the design system. It is divided into two categories: light and dark.
+
+<NoteAdmonition description="Cerberus comes built in with one theme (cerberus) that includes a light and dark mode." />
+
 ## Understanding the Color Palette
 
 Cerberus uses a semantic token design to define a theme that is scalable and easy to maintain. The theme is divided into six palette categories:

diff --git a/docs/app/styles/markdown.ts b/docs/app/styles/markdown.ts
@@ -81,4 +81,15 @@ export const markdown = css({
       p: '2',
     },
   },
+  '& :is(p,li) > code:not(.code)': {
+    border: '2px solid',
+    borderColor: 'var(--ec-brdCol)',
+    bgColor: 'var(--ec-codeBg)',
+    color: '#ECC48D',
+    fontSize: 'var(--ec-uiFontSize)',
+    fontWeight: 'var(--ec-uiFontWg)',
+    lineHeight: 'var(--ec-uiLineHt)',
+    pxi: '1',
+    rounded: 'md',
+  },
 })