diff --git a/website/app/[locale]/(root)/docs/colors/content.mdx b/website/app/[locale]/(root)/docs/colors/content.mdx index fa9cb5281..cb01c09f0 100644 --- a/website/app/[locale]/(root)/docs/colors/content.mdx +++ b/website/app/[locale]/(root)/docs/colors/content.mdx @@ -3,7 +3,7 @@ --- -## Customization +## Basic usage ### Add a color Add your color variables using hex codes and extend the defaults. ```js name=master.css.js @@ -80,26 +80,7 @@ export default { --- -## Style guide -### Create background colors -Create color variables for backgrounds in apps, panels, cards, and more. -```js name=master.css.js -export default { - variables: { -+ neutral: '$(white)', -+ fade: '$(slate-5)' - } -} -``` -Use [background-color](/docs/background-color) syntax to set the app background color: -```html -… -``` -| Token | Description | -|-------------------|-----------------------------------------------------------------------------------------------------------------------------------| -| `neutral` | The background color for apps... | -| `fade` | The background color for panels... | - +## Foreground ### Create text colors Create accessible color variables for titles, descriptions, icons, and other body text. ```js name=master.css.js @@ -134,3 +115,25 @@ You can apply them using any color-related syntax. | `text-strong` | Strong color, used for main titles, subheadings, or slightly emphasized fields, creating a high contrast with the background. | | `text-dim` | Dim color, a foreground color that contrasts slightly with the background. | | `text-{color}` | Other accessible text foreground colors. | + +--- + +## Background +### Create background colors +Create color variables for backgrounds in apps, panels, cards, and more. +```js name=master.css.js +export default { + variables: { ++ neutral: '$(white)', ++ fade: '$(slate-5)' + } +} +``` +Use [background-color](/docs/background-color) syntax to set the app background color: +```html +… +``` +| Token | Description | +|-------------------|-----------------------------------------------------------------------------------------------------------------------------------| +| `neutral` | The background color for apps... | +| `fade` | The background color for panels... | diff --git a/website/app/[locale]/(root)/play/Play.tsx b/website/app/[locale]/(root)/play/Play.tsx index 3d6c97d87..5111e60d5 100644 --- a/website/app/[locale]/(root)/play/Play.tsx +++ b/website/app/[locale]/(root)/play/Play.tsx @@ -12,7 +12,6 @@ import dedent from 'ts-dedent' // import DocHeader from 'websites/layouts/Doc/DocHeader' import { IconBrandCss3, IconChevronDown, IconDeviceDesktop, IconDeviceMobile } from '@tabler/icons-react' import Tabs, { Tab } from 'websites/components/Tabs' -import { l } from 'to-line' // import { Button } from 'websites/components/App/AppBtn' import { usePathname, useRouter } from 'next/navigation' import LanguageButton from 'websites/components/LanguageButton'; @@ -40,11 +39,12 @@ import dynamic from 'next/dynamic' import i18n from 'websites/i18n.config.mjs' import { mediaQueries } from '@master/css' import config from '~/master.css' +import clsx from 'clsx' // import { Registry } from 'monaco-textmate' // import { wireTmGrammars } from 'monaco-editor-textmate' -// loader.config({ +// loader.config({ // paths: { // vs: '/monaco-editor/vs', // } @@ -92,7 +92,7 @@ export default function Play(props: any) { const [shareId, setShareId] = useState(props.shareId ?? '') const [sharing, setSharing] = useState(false) const [version, setVersion] = useState(props.shareItem?.version ?? latestMasterCSSVersion) - const [generatedCssText, setGeneratedCssText] = useState('') + const [generatedCSSText, setGeneratedCSSText] = useState('') const template = useMemo(() => templates.find((eachTemplate) => eachTemplate.version === version), [version]) const [previewErrorEvent, setPreviewErrorEvent] = useState() const shareItem: PlayShare = useMemo(() => { @@ -155,7 +155,7 @@ export default function Play(props: any) { ); useEffect(() => { - const urlSearchParams = new URLSearchParams(location.search) + const urlSearchParams = new URLSearchParams(location.search) setLayout(urlSearchParams.get('layout') || '') setPreview(urlSearchParams.get('preview') || '') const queryTab = urlSearchParams.get('tab') @@ -187,13 +187,13 @@ export default function Play(props: any) { if (new URLSearchParams(location.search).get('layout') !== layout) { router.push(pathname + '?' + createQueryString('layout', layout)) } - }, [layout, searchParams]) + }, [createQueryString, layout, pathname, router, searchParams]) useEffect(() => { if (new URLSearchParams(location.search).get('preview') !== preview) { router.push(pathname + '?' + createQueryString('preview', preview)) } - }, [preview, searchParams]) + }, [createQueryString, pathname, preview, router, searchParams]) /** * 需避免即時編輯 HTML, Config 或切換 Theme 時更新 previewHTML，否則 Preview 將重載並造成視覺閃爍 @@ -269,7 +269,7 @@ export default function Play(props: any) { title: 'Generated CSS', name: 'master.css', language: 'css', - content: generatedCssText, + content: generatedCSSText, readOnly: true } // mobile @@ -278,7 +278,7 @@ export default function Play(props: any) { default: return shareItem.files.find((eachTab: any) => eachTab.title === currentTabTitle) as any } - }, [currentTabTitle, generatedCssText, shareItem.files]) + }, [currentTabTitle, generatedCSSText, shareItem.files]) // eslint-disable-next-line react-hooks/exhaustive-deps const hotUpdatePreviewByFile = useCallback(debounce(250, () => { @@ -309,7 +309,7 @@ export default function Play(props: any) { */ useEffect(() => { if (currentTabTitle !== 'Preview' && editorRef.current && monacoRef.current) { - const content = currentTabTitle === 'Generated CSS' ? generatedCssText : currentCodeTab.content + const content = currentTabTitle === 'Generated CSS' ? generatedCSSText : currentCodeTab.content let currentEditorModel: any = editorModelRef.current?.[currentCodeTab.id] if (currentEditorModel) { if (currentEditorModel.getValue() !== content) { @@ -328,7 +328,7 @@ export default function Play(props: any) { /* 取消因上文觸發 hotUpdatePreviewByFile() */ hotUpdatePreviewByFile.cancel({ upcomingOnly: true }) } - }, [currentCodeTab, currentTabTitle, generatedCssText, hotUpdatePreviewByFile, shareItem.files]) + }, [currentCodeTab, currentTabTitle, generatedCSSText, hotUpdatePreviewByFile, shareItem.files]) // dispose monaco providers useEffect(() => { @@ -351,7 +351,7 @@ export default function Play(props: any) { switch (type) { case 'cssUpdate': const cssText = content ? beautifyCSS(content) : '' - setGeneratedCssText(cssText) + setGeneratedCSSText(cssText) break; case 'error': setPreviewErrorEvent(event.data) @@ -612,7 +612,7 @@ export default function Play(props: any) { } {/* share button */} - {shareable && } {(shareId || shareable) &&
} {/* preview: responsive */} {/* preview: css */}