Fix some styling

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/package.json

@@ -10,11 +10,13 @@
   },
   "dependencies": {
     "@codemirror/lang-sass": "^6.0.2",
+    "@lezer/highlight": "^1.2.1",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.1.4",
     "@storybook/react": "^8.4.7",
     "@types/mdx": "^2.0.13",
+    "@uiw/codemirror-themes": "^4.23.7",
     "@uiw/react-codemirror": "^4.23.7",
     "next": "14.2.23",
     "react": "^18",

canon-docs/src/app/globals.css

@@ -36,6 +36,10 @@ iframe {
   text-decoration: var(--shiki-dark-text-decoration) !important;
 }
 
+.cm-editor {
+  transition: background-color 0.2s ease-in-out;
+}
+
 .ͼ2 .cm-gutters {
   background-color: var(--canon-surface-2);
   border-right: 1px solid var(--canon-border-base);
@@ -65,8 +69,3 @@ iframe {
 .cm-focused {
   outline: none !important;
 }
-
-.cm-editor {
-  background-color: var(--canon-surface-1);
-  transition: background-color 0.2s ease-in-out;
-}

canon-docs/src/components/CustomTheme/customTheme.tsx

@@ -7,11 +7,44 @@ import styles from './styles.module.css';
 import { usePlayground } from '@/utils/playground-context';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Icon } from '../../../../packages/canon';
+import { createTheme } from '@uiw/codemirror-themes';
+import { tags as t } from '@lezer/highlight';
 
 const defaultTheme = `:root {
   --canon-accent: #000;
 }`;
 
+const myTheme = createTheme({
+  theme: 'light',
+  settings: {
+    background: 'var(--canon-surface-1)',
+    backgroundImage: '',
+    foreground: '#6182B8',
+    caret: '#5d00ff',
+    selection: '#036dd626',
+    selectionMatch: '#036dd626',
+    lineHighlight: '#8a91991a',
+    gutterBackground: '#fff',
+    gutterForeground: '#8a919966',
+  },
+  styles: [
+    { tag: t.comment, color: '#787b8099' },
+    { tag: t.variableName, color: '#0080ff' },
+    { tag: [t.string, t.special(t.brace)], color: '#6182B8' },
+    { tag: t.number, color: '#6182B8' },
+    { tag: t.bool, color: '#6182B8' },
+    { tag: t.null, color: '#6182B8' },
+    { tag: t.keyword, color: '#6182B8' },
+    { tag: t.operator, color: '#6182B8' },
+    { tag: t.className, color: '#6182B8' },
+    { tag: t.definition(t.typeName), color: '#6182B8' },
+    { tag: t.typeName, color: '#6182B8' },
+    { tag: t.angleBracket, color: '#6182B8' },
+    { tag: t.tagName, color: '#6182B8' },
+    { tag: t.attributeName, color: '#6182B8' },
+  ],
+});
+
 export const CustomTheme = () => {
   const [isClient, setIsClient] = useState(false);
   const [open, setOpen] = useState(true);
@@ -104,6 +137,7 @@ export const CustomTheme = () => {
               onChange={handleChange}
               className={styles.editor}
               basicSetup={{ foldGutter: false }}
+              theme={myTheme}
             />
           </div>
         </motion.div>

canon-docs/src/components/Sidebar/Sidebar.module.css

@@ -35,15 +35,11 @@
   position: relative;
 }
 
-.menu a {
-  display: flex;
-  text-decoration: none;
-  height: 28px;
-  align-items: center;
-}
-
 .section {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .sectionTitle {
@@ -54,12 +50,14 @@
 }
 
 .line {
+  text-decoration: none;
+  align-items: center;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 28px;
+  height: 26px;
   padding: 0 12px;
   border-radius: 4px;
   transition: background-color 0.2s ease-in-out;

canon-docs/src/components/Toolbar/theme-name.module.css

@@ -43,7 +43,7 @@
   box-sizing: border-box;
   padding-block: 0.25rem;
   border-radius: 0.375rem;
-  background-color: canvas;
+  background-color: var(--canon-surface-1);
   color: var(--color-gray-900);
   border: 1px solid var(--canon-border-base);
   padding-inline: 0.25rem;

canon-docs/yarn.lock

@@ -406,7 +406,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lezer/highlight@npm:^1.0.0":
+"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.2.1":
   version: 1.2.1
   resolution: "@lezer/highlight@npm:1.2.1"
   dependencies:
@@ -1108,6 +1108,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@uiw/codemirror-themes@npm:^4.23.7":
+  version: 4.23.7
+  resolution: "@uiw/codemirror-themes@npm:4.23.7"
+  dependencies:
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+  peerDependencies:
+    "@codemirror/language": ">=6.0.0"
+    "@codemirror/state": ">=6.0.0"
+    "@codemirror/view": ">=6.0.0"
+  checksum: 8c2a9a7ee8df2de3f09ad1f18979c4b407f7dd03e1f6ddfe47837b9e4769b566a70259ec8c398473b6b6db79cdb8809d4acc2f2ed7851743e13ff95308f52e33
+  languageName: node
+  linkType: hard
+
 "@uiw/react-codemirror@npm:^4.23.7":
   version: 4.23.7
   resolution: "@uiw/react-codemirror@npm:4.23.7"
@@ -1481,6 +1496,7 @@ __metadata:
   resolution: "canon-docs@workspace:."
   dependencies:
     "@codemirror/lang-sass": ^6.0.2
+    "@lezer/highlight": ^1.2.1
     "@mdx-js/loader": ^3.1.0
     "@mdx-js/react": ^3.1.0
     "@next/mdx": ^15.1.4
@@ -1489,6 +1505,7 @@ __metadata:
     "@types/node": ^20
     "@types/react": ^18
     "@types/react-dom": ^18
+    "@uiw/codemirror-themes": ^4.23.7
     "@uiw/react-codemirror": ^4.23.7
     concurrently: ^9.1.2
     eslint: ^8