From 6de1d5fbae34fab1f3c42c1aa9eebe2a7e53458d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Sun, 12 Jan 2025 22:28:07 +0000 Subject: [PATCH] Fix some styling Signed-off-by: Charles de Dreuille --- canon-docs/package.json | 2 ++ canon-docs/src/app/globals.css | 9 +++-- .../components/CustomTheme/customTheme.tsx | 34 +++++++++++++++++++ .../src/components/Sidebar/Sidebar.module.css | 14 ++++---- .../components/Toolbar/theme-name.module.css | 2 +- canon-docs/yarn.lock | 19 ++++++++++- 6 files changed, 65 insertions(+), 15 deletions(-) diff --git a/canon-docs/package.json b/canon-docs/package.json index af440bf9d5..9fddf08c20 100644 --- a/canon-docs/package.json +++ b/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", diff --git a/canon-docs/src/app/globals.css b/canon-docs/src/app/globals.css index 249f05ea8c..5efc0407e7 100644 --- a/canon-docs/src/app/globals.css +++ b/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; -} diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx index b29b5458cd..3d8ed394bd 100644 --- a/canon-docs/src/components/CustomTheme/customTheme.tsx +++ b/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} /> diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css index 870f504d28..f3bdd3f2e7 100644 --- a/canon-docs/src/components/Sidebar/Sidebar.module.css +++ b/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; diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css index 6f2ceb427f..c9700c571b 100644 --- a/canon-docs/src/components/Toolbar/theme-name.module.css +++ b/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; diff --git a/canon-docs/yarn.lock b/canon-docs/yarn.lock index f7a3d103a4..90107a541b 100644 --- a/canon-docs/yarn.lock +++ b/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