Rename Tokens - Light Theme Prep (#67)

* add build alias to package scripts * REVERT THIS: disabled husky * updateTokenNames * rename and repair tokens * consolidate utility styles * rename styles.ts files * reorg client/ui-styles package * setting up theme vars * add theme switching toggle to settings * hide light theme so it doesn't end up in develop * Revert "REVERT THIS: disabled husky" This reverts commit 388b45a. Co-authored-by: James Bradford <j.bradford@pnnl.gov>
cisagov · Jan 19, 2023 · 731596c · 731596c
1 parent 0d5fae6
commit 731596c
Show file tree

Hide file tree

Showing 57 changed files with 487 additions and 352 deletions.
diff --git a/applications/client/src/components/Dialogs/DialogCustom.tsx b/applications/client/src/components/Dialogs/DialogCustom.tsx
@@ -3,7 +3,7 @@ import { Button, Classes, Dialog } from '@blueprintjs/core';
 import { Close16 } from '@carbon/icons-react';
 import { css } from '@emotion/react';
 import type { WithConditionalCSSProp } from '@emotion/react/types/jsx-namespace';
-import { Header, Tokens } from '@redeye/ui-styles';
+import { CoreTokens, Header } from '@redeye/ui-styles';
 import type { ComponentProps, FC, ReactNode } from 'react';
 import { CarbonIcon } from '../CarbonIcon';
 
@@ -28,7 +28,7 @@ export const DialogCustom: FC<DialogCustomProps> = ({ children, title, headerPro
 					top: 0;
 					right: 0;
 					margin: 0.25rem;
-					color: ${Tokens.TextColors.PtTextColorMuted};
+					color: ${CoreTokens.TextMuted};
 				`}
 				rightIcon={<CarbonIcon icon={Close16} />}
 				// text={'Cancel'}
@@ -51,8 +51,8 @@ const dialogHeaderStyles = css`
 	top: 0;
 	z-index: 10;
 	opacity: 0.97; // to see wats scrollin underneath
-	background-color: ${Tokens.CoreTokens.BackgroundColor2};
-	border-bottom: 1px solid ${Tokens.CoreTokens.BorderColorEmphasis};
+	background-color: ${CoreTokens.Background1};
+	border-bottom: 1px solid ${CoreTokens.BorderEmphasis};
 	box-shadow: none;
 	/* display: block; */
 	/* padding: 1rem; */

diff --git a/applications/client/src/components/DragResize.tsx b/applications/client/src/components/DragResize.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Tokens } from '@redeye/ui-styles';
+import { AdvancedTokens, CoreTokens } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps, FC } from 'react';
 import { useEffect, useRef } from 'react';
@@ -203,17 +203,17 @@ export const DefaultDraggerComponent: FC<DraggerRendererProps> = ({
 const draggerWidth = 5;
 const draggerStyle = css`
 	width: 1px;
-	background-color: ${Tokens.CoreTokens.BorderColorNormal};
+	background-color: ${CoreTokens.BorderNormal};
 	cursor: col-resize;
 	display: flex;
 	position: relative;
 	&:before {
 		content: '';
-		background-color: ${Tokens.CoreTokens.BorderColorNormal};
+		background-color: ${CoreTokens.BorderNormal};
 		width: ${draggerWidth}px;
 		margin: -2px -${draggerWidth / 2}px;
 		opacity: 0;
-		border: 1px solid ${Tokens.CoreTokens.BorderColorNormal};
+		border: 1px solid ${CoreTokens.BorderNormal};
 	}
 	&:hover:before {
 		opacity: 0.3;
@@ -224,7 +224,7 @@ const isDraggingStyle = css`
 	&:before,
 	&:hover:before,
 	&:active:before {
-		background-color: ${Tokens.IntentColors.PtIntentPrimary};
+		background-color: ${CoreTokens.Intent.Primary3};
 		opacity: 1;
 		z-index: 2;
 	}
@@ -248,24 +248,24 @@ const handleStyle = css`
 	justify-content: center;
 	align-items: center;
 	border-radius: 99px;
-	border: 1px solid ${Tokens.CoreTokens.BorderColorNormal};
+	border: 1px solid ${CoreTokens.BorderNormal};
 	min-height: 23px;
 	max-height: 23px;
 	min-width: 9px;
 	max-width: 9px;
 	margin: 0.75rem -4px;
-	background-color: ${Tokens.Components.ButtonBackgroundColor};
+	background-color: ${AdvancedTokens.ButtonBackgroundColor};
 	&:hover {
-		background-color: ${Tokens.Components.ButtonBackgroundColorHover};
+		background-color: ${AdvancedTokens.ButtonBackgroundColorHover};
 	}
 	&:active {
-		background-color: ${Tokens.Components.ButtonBackgroundColorActive};
+		background-color: ${AdvancedTokens.ButtonBackgroundColorActive};
 	}
 `;
 const handleStyleIsDraggingStyle = css``;
 const DragCircle = styled.div`
 	border-radius: 99px;
-	background-color: ${Tokens.IconColors.PtIconColor};
+	background-color: ${CoreTokens.TextIcon};
 	height: 1px;
 	width: 1px;
 	margin: 1px;

diff --git a/applications/client/src/components/ErrorFallback.tsx b/applications/client/src/components/ErrorFallback.tsx
@@ -2,7 +2,7 @@ import { Button, NonIdealState } from '@blueprintjs/core';
 import { Warning16 } from '@carbon/icons-react';
 import { css } from '@emotion/react';
 import { CarbonIcon } from '@redeye/client/components';
-import { Tokens } from '@redeye/ui-styles';
+import { CoreTokens } from '@redeye/ui-styles';
 import { useCallback } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 
@@ -25,7 +25,7 @@ export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
 				<CarbonIcon
 					icon={Warning16}
 					css={css`
-						color: ${Tokens.IntentColors.PtIntentDangerTextColor};
+						color: ${CoreTokens.TextIntentDanger};
 
 						& svg {
 							height: 2rem;

diff --git a/applications/client/src/components/Forms/SettingsForm.tsx b/applications/client/src/components/Forms/SettingsForm.tsx
@@ -8,14 +8,12 @@ import type { ChangeEvent, ComponentProps } from 'react';
 import { CampaignViews, Tabs } from '../../types';
 import { createState } from '../mobx-create-state';
 
-type UiTheme = 'light' | 'dark' | 'system';
-
 type SettingsFormProps = ComponentProps<'form'> & {};
 
 export const SettingsForm = observer<SettingsFormProps>(({ ...props }) => {
 	const store = useStore();
 	const state = createState({
-		theme: getAppTheme(),
+		// theme: getAppTheme(),
 		tester: { value: 3 },
 		enableAutoSelect: store.settings.isDefaultTimezone,
 		setEnableAutoSelect(e: ChangeEvent<HTMLInputElement>) {
@@ -71,39 +69,15 @@ export const SettingsForm = observer<SettingsFormProps>(({ ...props }) => {
 				}}
 				label="Show Hidden Beacons, Host, and Servers"
 			/>
-			{/* <Switch
-				checked={state.theme === 'dark'}
-				onChange={state.setTheme}
-				label={'Dark theme'}
+			{/* <Switch // Uncomment to test light theme
+				checked={store.settings.theme === 'light'}
+				onChange={(event) => store.settings.setTheme(event.currentTarget.checked ? 'light' : 'dark')}
+				label="Light Theme (beta)"
 			/> */}
 		</form>
 	);
 });
 
-export const updateAppTheme = (theme: UiTheme = 'dark') => {
-	// light theme is just the absence of the Classes.DARK class
-	const rootClassList = document.documentElement.classList;
-	switch (theme) {
-		case 'light':
-			rootClassList.remove(Classes.DARK);
-			break;
-		case 'system':
-			// TODO: query the system theme somehow?
-			// set accordingly
-			rootClassList.add(Classes.DARK);
-			break;
-		case 'dark':
-			rootClassList.add(Classes.DARK);
-			break; // fallthrough expected
-		default:
-			rootClassList.add(Classes.DARK);
-			break;
-	}
-};
-
-export const getAppTheme = (): UiTheme =>
-	document.documentElement.classList.contains(Classes.DARK) ? 'dark' : 'light';
-
 const timezonePickerStyle = css`
 	.${Classes.POPOVER_TARGET} {
 		display: block;

diff --git a/applications/client/src/components/Forms/UsernameInput.tsx b/applications/client/src/components/Forms/UsernameInput.tsx
@@ -6,7 +6,7 @@ import { ClassNames, css } from '@emotion/react';
 import { CarbonIcon, createState, escapeRegExpChars } from '@redeye/client/components';
 import type { GlobalOperatorModel } from '@redeye/client/store';
 import { useStore } from '@redeye/client/store';
-import { Styles, TokensAll, Txt } from '@redeye/ui-styles';
+import { UtilityStyles, Txt, CoreTokens } from '@redeye/ui-styles';
 import { useMutation } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 
@@ -129,7 +129,7 @@ const menuParentStyle = css`
 `;
 
 const newUserStyle = css`
-	border-top: 1px solid ${TokensAll.BorderColorMuted};
+	border-top: 1px solid ${CoreTokens.BorderMuted};
 `;
 
 function highlightText(text: string, query: string) {
@@ -156,7 +156,7 @@ function highlightText(text: string, query: string) {
 		}
 		lastIndex = regexp.lastIndex;
 		tokens.push(
-			<Txt css={Styles.textHighlight} key={lastIndex}>
+			<Txt css={UtilityStyles.textHighlight} key={lastIndex}>
 				{match[0]}
 			</Txt>
 		);

diff --git a/applications/client/src/components/Header/NavBar.tsx b/applications/client/src/components/Header/NavBar.tsx
@@ -5,7 +5,7 @@ import { css } from '@emotion/react';
 import { AppOptions, CarbonIcon, Logo } from '@redeye/client/components';
 import { routes, useStore } from '@redeye/client/store';
 import { Tabs } from '@redeye/client/types/explore';
-import { FlexSplitter, Tokens } from '@redeye/ui-styles';
+import { CoreTokens, FlexSplitter } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps, FC } from 'react';
 import { CampaignViews, Views } from '../../types';
@@ -100,7 +100,7 @@ const wrapperStyle = css`
 	align-items: center;
 	width: 4rem;
 	padding-bottom: 1rem;
-	background-color: ${Tokens.CoreTokens.BackgroundColor2};
+	background-color: ${CoreTokens.Background1};
 `;
 const logoSize = 48;
 const logoStyle = css`
@@ -131,5 +131,5 @@ const navButtonStyles = css`
 `;
 
 const navButtonActiveStyles = css`
-	border-left-color: ${Tokens.IntentColors.PtIntentPrimary};
+	border-left-color: ${CoreTokens.Intent.Primary3};
 `;
diff --git a/applications/client/src/components/ScrollBox.tsx b/applications/client/src/components/ScrollBox.tsx
@@ -1,7 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Tokens } from '@redeye/ui-styles';
+import { CoreTokens } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
 
@@ -40,7 +40,7 @@ export const scrollBoxShadowsStyle = css`
 	/* top shadow */
 
 	&:before {
-		background-image: linear-gradient(to bottom, ${Tokens.CoreTokens.ShadowGradient});
+		background-image: linear-gradient(to bottom, ${CoreTokens.ShadowGradient});
 		top: 0;
 		left: 0;
 		right: 0;
@@ -49,7 +49,7 @@ export const scrollBoxShadowsStyle = css`
 	/* bottom shadow */
 
 	&:after {
-		background-image: linear-gradient(to top, ${Tokens.CoreTokens.ShadowGradient});
+		background-image: linear-gradient(to top, ${CoreTokens.ShadowGradient});
 		bottom: -1px;
 		left: 0;
 		right: 0;

diff --git a/applications/client/src/index.tsx b/applications/client/src/index.tsx
@@ -1,13 +1,12 @@
 import { Global } from '@emotion/react';
-import { globalStyle } from '@redeye/ui-styles';
+import { customCssVars, globalStyle } from '@redeye/ui-styles';
 import { QueryClientProvider } from '@tanstack/react-query';
 
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
-import { updateAppTheme } from './components';
 import { CustomRouter } from './CustomRouter';
-import { AppStoreProvider, store } from './store';
+import { AppStoreProvider, store, updateAppTheme } from './store';
 
 // necessary for blueprint to function
 import 'blueprint-styler/base/blueprint-tokens.css';
@@ -19,7 +18,7 @@ updateAppTheme();
 
 createRoot(document.getElementById('root')!).render(
 	<StrictMode>
-		<Global styles={globalStyle} />
+		<Global styles={[customCssVars, globalStyle]} />
 		<AppStoreProvider store={store}>
 			<QueryClientProvider client={store.queryClient}>
 				<CustomRouter history={store.router.history}>

diff --git a/applications/client/src/store/settings.ts b/applications/client/src/store/settings.ts
@@ -1,3 +1,4 @@
+import { Classes } from '@blueprintjs/core';
 import { computed } from 'mobx';
 import { Model, model, modelAction, prop } from 'mobx-keystone';
 import { computedFn } from 'mobx-utils';
@@ -6,10 +7,16 @@ import moment from 'moment-timezone';
 
 export const defaultTimeZone = moment.tz.guess();
 
+export type UiTheme = 'light' | 'dark' | 'system';
+const defaultTheme: UiTheme = 'dark';
+const getAppTheme = () => (window.localStorage.getItem('theme') as UiTheme) || (defaultTheme as UiTheme);
+// const getAppTheme = (): UiTheme => (document.documentElement.classList.contains(Classes.DARK) ? 'dark' : 'light');
+
 @model('Settings')
 export class Settings extends Model({
 	showHidden: prop<boolean>(window.localStorage.getItem('showHidden') === 'true'),
 	timezone: prop<string>(window.localStorage.getItem('timezone') || defaultTimeZone),
+	theme: prop<UiTheme>(getAppTheme()),
 }) {
 	@modelAction setShowHidden(showHidden: boolean) {
 		this.showHidden = showHidden;
@@ -19,6 +26,11 @@ export class Settings extends Model({
 		this.timezone = tz;
 		window.localStorage.setItem('timezone', tz);
 	}
+	@modelAction setTheme(th: UiTheme) {
+		this.theme = th;
+		updateAppTheme(th);
+		window.localStorage.setItem('theme', th);
+	}
 	@modelAction setDefaultTimezone() {
 		this.setTimezone(defaultTimeZone);
 	}
@@ -27,3 +39,28 @@ export class Settings extends Model({
 	}
 	momentTz = computedFn((d: MomentInput | Moment) => moment(d).tz(this.timezone));
 }
+
+// @Austin, does this belong here?
+export const updateAppTheme = (theme?: UiTheme) => {
+	theme = theme || getAppTheme()
+	// light theme is just the absence of the Classes.DARK class
+	const rootClassList = document.documentElement.classList;
+	switch (theme) {
+		case 'light':
+			rootClassList.remove(Classes.DARK);
+			break;
+		case 'system':
+			// TODO: query the system theme somehow?
+			// set accordingly
+			rootClassList.add(Classes.DARK);
+			break;
+		case 'dark':
+			rootClassList.add(Classes.DARK);
+			break; // fallthrough expected
+		default:
+			rootClassList.add(Classes.DARK);
+			break;
+	}
+};
+
+