From c1fd40c33161f011a7497fbc2659eba30f402270 Mon Sep 17 00:00:00 2001 From: lerte smith Date: Sun, 2 Jun 2024 15:58:54 +0800 Subject: [PATCH] theme page --- apps/docs/content/getting-started/theme.md | 5 + apps/docs/src/components/Markdown.tsx | 4 +- apps/docs/src/views/theme.tsx | 221 +++++++++++++++++++++ 3 files changed, 229 insertions(+), 1 deletion(-) create mode 100644 apps/docs/content/getting-started/theme.md create mode 100644 apps/docs/src/views/theme.tsx diff --git a/apps/docs/content/getting-started/theme.md b/apps/docs/content/getting-started/theme.md new file mode 100644 index 0000000..c2cc5ea --- /dev/null +++ b/apps/docs/content/getting-started/theme.md @@ -0,0 +1,5 @@ +--- +title: Theme +--- + + diff --git a/apps/docs/src/components/Markdown.tsx b/apps/docs/src/components/Markdown.tsx index 830ce4d..99a85f5 100644 --- a/apps/docs/src/components/Markdown.tsx +++ b/apps/docs/src/components/Markdown.tsx @@ -3,6 +3,7 @@ import DocTabs from '@/components/DocTabs' import DocUsage from '@/components/DocUsage' import ReactMarkdown from 'react-markdown' import SyntaxHighlighter from '@/components/SyntaxHighlighter' +import Theme from '@/views/theme' import rehypeAutolinkHeadings from 'rehype-autolink-headings' import rehypeRaw from 'rehype-raw' import rehypeSlug from 'rehype-slug' @@ -60,7 +61,8 @@ export default function Markdown({ docs, usage }: MarkdownProps) { ), // @ts-ignore - preview: ({ node, children, ...rest }) => + preview: ({ node, children, ...rest }) => , + theme: () => }} > {`# ${docs.title} ${docs.description ? '\r\n>' + docs.description : ''}\r\n` + diff --git a/apps/docs/src/views/theme.tsx b/apps/docs/src/views/theme.tsx new file mode 100644 index 0000000..ddca049 --- /dev/null +++ b/apps/docs/src/views/theme.tsx @@ -0,0 +1,221 @@ +'use client' + +import { + changeColor, + getCurrentSeedColor, + getCurrentThemeString +} from '@/utils/theme' +import { useEffect, useState } from 'react' + +import { Button } from 'actify' +import SyntaxHighlighter from '@/components/SyntaxHighlighter' + +export default () => { + const [seedColor, setSeedColor] = useState('') + const [cssString, setCssString] = useState('') + const exportColors = () => { + const blob = new Blob([cssString], { type: 'text/css' }) + const url = URL.createObjectURL(blob) + const link = document.createElement('a') + link.href = url + link.download = 'actify-color-theme.css' + link.click() + URL.revokeObjectURL(url) + } + + useEffect(() => { + const currentSeedColor = getCurrentSeedColor() + setSeedColor(currentSeedColor ?? '') + const colorString = getCurrentThemeString() + setCssString(colorString ?? '') + }, []) + + const handleChange = (e: React.ChangeEvent) => { + const { value: color } = e.target + setSeedColor(color) + changeColor(color) + const colorString = getCurrentThemeString() + setCssString(colorString ?? '') + } + + return ( + <> +

Color scheme

+ <> + {/* Primary */} +
+
+
+ Primary +
+
+
+
+ On Primary +
+
+
+
+ Primary Container +
+
+
+
+ On Primary Container +
+
+
+ {/* Secondary */} +
+
+
+ Secondary +
+
+
+
+ On Secondary +
+
+
+
+ Secondary Container +
+
+
+
+ On Secondary Container +
+
+
+ {/* Tertiary */} +
+
+
+ Tertiary +
+
+
+
+ On Tertiary +
+
+
+
+ Tertiary Container +
+
+
+
+ On Tertiary Container +
+
+
+ {/* Error */} +
+
+
Error
+
+
+
+ On Error +
+
+
+
+ Error Container +
+
+
+
+ On Error Container +
+
+
+ {/* Backgroun And Surface */} +
+
+
+ Background +
+
+
+
+ On Background +
+
+
+
+ Surface +
+
+
+
+ On Surface +
+
+
+
+
+
+ Inverse Surface +
+
+
+
+ Inverse Primary +
+
+
+
+ Srim +
+
+
+
+ Shadow +
+
+
+ {/* Outline And Surface */} +
+
+
+ Outline +
+
+
+
+ Outline Variant +
+
+
+
+ Surface-Variant +
+
+
+
+ On Surface-Variant +
+
+
+ +
+
+ +
+ +
+ {cssString} + + ) +}