diff --git a/package.json b/package.json index 81aefc9525..efefb321c6 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.cjs", "start:react18": "npm-run-all --parallel start:watch start:react18:dev", "start:react18:dev": "cross-env NODE_ENV=development REACT_VERSION=18 webpack serve --config pages/webpack.config.cjs", - "postinstall": "prepare-package-lock", + "postinstall": "prepare-package-lock && node ./scripts/install-peer-dependency.js theming-core:full-theme-css", "prepare": "husky" }, "dependencies": { diff --git a/pages/theming/integration.page.tsx b/pages/theming/integration.page.tsx index 595f6096f9..2a44baccce 100644 --- a/pages/theming/integration.page.tsx +++ b/pages/theming/integration.page.tsx @@ -1,13 +1,26 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useContext, useEffect, useState } from 'react'; -import { Button, Container, Header, Link, Multiselect, SpaceBetween, Table } from '~components'; -import { applyTheme, generateThemeStylesheet, Theme } from '~components/theming'; +import React, { useContext, useState } from 'react'; + +import { + Button, + Checkbox, + Container, + FormField, + Header, + Link, + Multiselect, + SpaceBetween, + Table, + Textarea, +} from '~components'; +import { applyTheme, generateFullThemeStylesheet, generateThemeStylesheet, Theme } from '~components/theming'; import * as Tokens from '~design-tokens'; import AppContext from '../app/app-context'; -import ScreenshotArea from '../utils/screenshot-area'; +import { SimplePage } from '../app/templates'; +import pink from './theme-pink'; const colorGreen900 = '#172211'; const colorGreen700 = '#1a520f'; @@ -66,69 +79,51 @@ const sharedItems = [ }, ]; +let resetApplyTheme: null | (() => void) = null; +let styleNode: null | HTMLStyleElement = null; + +function applyCss(css: null | string) { + if (styleNode) { + styleNode.remove(); + styleNode = null; + } + if (css) { + styleNode = document.createElement('style'); + styleNode.appendChild(document.createTextNode(css)); + document.head.appendChild(styleNode); + } +} + export default function () { const { urlParams } = useContext(AppContext); - const [themed, setThemed] = useState(false); const [secondaryTheme, setSecondaryTheme] = useState(urlParams.visualRefresh); - const [themeMethod, setThemeMethod] = useState<'applyTheme' | 'generateThemeStylesheet'>('applyTheme'); - - useEffect(() => { - let reset: () => void = () => {}; - if (themed) { - if (themeMethod === 'applyTheme') { - const result = applyTheme({ theme, baseThemeId: secondaryTheme ? 'visual-refresh' : undefined }); - reset = result.reset; - } else { - const stylesheet = generateThemeStylesheet({ - theme, - baseThemeId: secondaryTheme ? 'visual-refresh' : undefined, - }); - - const styleNode = document.createElement('style'); - styleNode.appendChild(document.createTextNode(stylesheet)); - document.head.appendChild(styleNode); - - reset = () => { - styleNode.remove(); - }; - } - } - return reset; - }, [themed, secondaryTheme, themeMethod]); + const fullThemeStylesheet = generateFullThemeStylesheet({ theme: pink }); + const baseThemeId = secondaryTheme ? 'visual-refresh' : undefined; + const callApplyTheme = () => (resetApplyTheme = applyTheme({ theme, baseThemeId }).reset); + const callGenerateThemeStylesheet = () => applyCss(generateThemeStylesheet({ theme, baseThemeId })); + const callGenerateFullThemeStylesheet = () => applyCss(fullThemeStylesheet); + const reset = () => { + applyCss(null); + resetApplyTheme?.(); + }; return ( -
-

Theming Integration Page

-

Only for internal theme

- - - - + + setSecondaryTheme(detail.checked)}> + Use secondary theme + + + + + + + } + > + @@ -196,7 +191,11 @@ export default function () { /> - -
+ + +