diff --git a/build-tools/tasks/generate-environment.js b/build-tools/tasks/generate-environment.js index 5bb2e80569..f43ecd1b4a 100644 --- a/build-tools/tasks/generate-environment.js +++ b/build-tools/tasks/generate-environment.js @@ -6,6 +6,7 @@ const themes = require('../utils/themes'); const workspace = require('../utils/workspace'); const ALWAYS_VISUAL_REFRESH = process.env.ALWAYS_VISUAL_REFRESH === 'true'; +const INCLUDE_ONE_THEME = process.env.INCLUDE_ONE_THEME === 'true'; function writeEnvironmentFile(theme) { const filepath = 'internal/environment'; @@ -16,6 +17,7 @@ function writeEnvironmentFile(theme) { THEME: theme.name, SYSTEM: 'core', ALWAYS_VISUAL_REFRESH: !!theme.alwaysVisualRefresh || ALWAYS_VISUAL_REFRESH, + INCLUDE_ONE_THEME: INCLUDE_ONE_THEME, }; const basePath = path.join(theme.outputPath, filepath); diff --git a/build-tools/utils/themes.js b/build-tools/utils/themes.js index 5066477bbf..6564bf32d4 100644 --- a/build-tools/utils/themes.js +++ b/build-tools/utils/themes.js @@ -3,6 +3,8 @@ const path = require('path'); const workspace = require('./workspace'); +const INCLUDE_ONE_THEME = process.env.INCLUDE_ONE_THEME === 'true'; + const themes = [ // This is the default Cloudscape theme, which is best used with Visual Refresh enabled (by default) { @@ -13,7 +15,10 @@ const themes = [ designTokensPackageJson: { name: '@cloudscape-design/design-tokens' }, outputPath: path.join(workspace.targetPath, 'components'), primaryThemePath: './classic/index.js', - secondaryThemePaths: ['./visual-refresh-secondary/index.js'], + secondaryThemePaths: [ + './visual-refresh-secondary/index.js', + ...(INCLUDE_ONE_THEME ? ['./one-theme/index.js'] : []), + ], }, ]; diff --git a/package.json b/package.json index fda995324a..379ae1fe69 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "homepage": "https://cloudscape.design", "files": [], "scripts": { - "quick-build": "gulp quick-build", + "quick-build": "cross-env INCLUDE_ONE_THEME=true gulp quick-build", "build": "cross-env NODE_ENV=production gulp build", "test": "TZ=UTC gulp test", "test:unit": "TZ=UTC gulp test:unit", @@ -20,7 +20,7 @@ "lint:stylelint": "stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'", "build:react18": "cross-env NODE_ENV=production REACT_VERSION=18 gulp build", "start": "npm-run-all --parallel start:watch start:dev", - "start:watch": "gulp watch", + "start:watch": "cross-env INCLUDE_ONE_THEME=true gulp watch", "start:dev": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.cjs", "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", diff --git a/pages/app/app-context.tsx b/pages/app/app-context.tsx index b0b2d48bd8..4807fdf5fe 100644 --- a/pages/app/app-context.tsx +++ b/pages/app/app-context.tsx @@ -12,6 +12,7 @@ interface AppUrlParams { density: Density; direction: 'ltr' | 'rtl'; visualRefresh: boolean; + oneTheme: boolean; motionDisabled: boolean; appLayoutWidget: boolean; mode?: Mode; @@ -32,6 +33,7 @@ const appContextDefaults: AppContextType = { density: Density.Comfortable, direction: 'ltr', visualRefresh: THEME === 'default', + oneTheme: false, motionDisabled: false, appLayoutWidget: false, }, diff --git a/pages/app/components/theme-switcher.tsx b/pages/app/components/theme-switcher.tsx index d6afde3416..26ade0902b 100644 --- a/pages/app/components/theme-switcher.tsx +++ b/pages/app/components/theme-switcher.tsx @@ -4,7 +4,7 @@ import React, { useContext } from 'react'; import { Density, Mode } from '@cloudscape-design/global-styles'; -import { ALWAYS_VISUAL_REFRESH } from '~components/internal/environment'; +import { ALWAYS_VISUAL_REFRESH, INCLUDE_ONE_THEME } from '~components/internal/environment'; import SpaceBetween from '~components/space-between'; import AppContext from '../app-context'; @@ -12,6 +12,14 @@ import AppContext from '../app-context'; export default function ThemeSwitcher() { const { mode, urlParams, setUrlParams, setMode } = useContext(AppContext); + function activateTheme(theme: 'visualRefresh' | 'oneTheme' | 'classic') { + setUrlParams({ + visualRefresh: theme === 'visualRefresh', + oneTheme: theme === 'oneTheme', + }); + window.location.reload(); + } + const vrSwitchProps: React.InputHTMLAttributes = { id: 'visual-refresh-toggle', type: 'checkbox', @@ -21,11 +29,8 @@ export default function ThemeSwitcher() { vrSwitchProps.checked = true; vrSwitchProps.readOnly = true; } else { - vrSwitchProps.checked = urlParams.visualRefresh; - vrSwitchProps.onChange = event => { - setUrlParams({ visualRefresh: event.target.checked }); - window.location.reload(); - }; + vrSwitchProps.checked = urlParams.visualRefresh && !urlParams.oneTheme; + vrSwitchProps.onChange = event => activateTheme(event.target.checked ? 'visualRefresh' : 'classic'); } return ( @@ -34,6 +39,17 @@ export default function ThemeSwitcher() { Visual refresh + {INCLUDE_ONE_THEME && ( + + )}