Rename theme props (#1845)

_we should merge #1844 first..._ ## What are you changing? - renaming theme props ## Why? - so they're more explicit for consumers
guardian · Dec 11, 2024 · 58f7015 · 58f7015
2 parents 33cbe41 + 3167790
commit 58f7015
Show file tree

Hide file tree

Showing 14 changed files with 146 additions and 120 deletions.
diff --git a/libs/@guardian/react-crossword/package.json b/libs/@guardian/react-crossword/package.json
@@ -60,7 +60,6 @@
 		"@emotion/react": "^11.11.3",
 		"@guardian/libs": "^19.1.0",
 		"@guardian/source": "^8.0.0",
-		"@guardian/source-development-kitchen": "^13.1.0",
 		"@types/react": "^18.2.79",
 		"react": "^18.2.0",
 		"typescript": "~5.5.2"
@@ -78,8 +77,7 @@
 			"command": "rollup -c",
 			"dependencies": [
 				"../libs:build",
-				"../source:build",
-				"../source-development-kitchen:build"
+				"../source:build"
 			],
 			"files": [
 				"src/**",

diff --git a/libs/@guardian/react-crossword/src/@types/crossword.ts b/libs/@guardian/react-crossword/src/@types/crossword.ts
@@ -47,23 +47,41 @@ export type Separators = Array<{
 }>;
 
 export type Theme = {
-	background: string;
-	foreground: string;
-	anagramHelperBackground: string;
-	text: string;
-	provisionalText: string;
-	errorText: string;
-	gutter: number;
-	highlight: string;
-	focus: string;
-	active: string;
-	unsavedBackground: string;
-	cellSize: number;
-	buttonBackground: string;
-	buttonBackgroundHover: string;
-	border: string;
+	/** The background colour of 'black' squares/dividers etc on the grid */
+	gridBackgroundColor: string;
+	/** The background colour of 'white' squares on the grid */
+	gridForegroundColor: string;
+	/** The size of the gap between grid cells */
+	gridGutterSize: number;
+	/** The length of one side of a cell on on the grid */
+	gridCellSize: number;
+
+	/** The main text colour (grid text, clues etc) */
+	textColor: string;
+	/** The colour of the currently selected cell border */
+	focusColor: string;
+	/** The colour of cells/clues that are currently selected clue */
+	selectedColor: string;
+	/** The colour of cells/clues that are related to the currently selected clue */
+	relatedColor: string;
+
+	/** The background colour of clue-helper buttons */
+	buttonBackgroundColor: string;
+	/** The hover colour of clue-helper buttons */
+	buttonBackgroundHoverColor: string;
+
+	/** Border colour used to visually separate parts of the UI */
+	borderColor: string;
+
+	/** The minimum width of a clue */
 	clueMinWidth: number;
+	/** The maximum width of a clue */
 	clueMaxWidth: number;
+
+	/** The background colour of the anagram helper */
+	anagramHelperBackgroundColor: string;
+	/** The text colour of shuffled letter that are not yet on the grid */
+	anagramHelperCandidateTextColor: string;
 };
 
 export type Dimensions = {

diff --git a/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx b/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx
@@ -68,7 +68,7 @@ export const AnagramHelper = () => {
 				left: 0;
 				display: flex;
 				flex-direction: column;
-				background-color: ${theme.anagramHelperBackground};
+				background-color: ${theme.anagramHelperBackgroundColor};
 				padding: 10px;
 				min-height: fit-content;
 				z-index: 2;
@@ -158,7 +158,7 @@ export const AnagramHelper = () => {
 					css={css`
 						width: 100%;
 						margin: ${space[4]}px 0 ${space[4]}px;
-						border-top: 1px solid ${theme.background};
+						border-top: 1px solid ${theme.gridBackgroundColor};
 					`}
 				/>
 				{entry && <Clue entry={entry} />}

diff --git a/libs/@guardian/react-crossword/src/components/Cell.stories.tsx b/libs/@guardian/react-crossword/src/components/Cell.stories.tsx
@@ -18,12 +18,12 @@ const meta: Meta<typeof Cell> = {
 			return (
 				<svg
 					style={{
-						padding: theme.gutter,
-						width: theme.cellSize,
-						height: theme.cellSize,
-						backgroundColor: theme.background,
+						padding: theme.gridGutterSize,
+						width: theme.gridCellSize,
+						height: theme.gridCellSize,
+						backgroundColor: theme.gridBackgroundColor,
 					}}
-					viewBox={`0 0 ${theme.cellSize} ${theme.cellSize}`}
+					viewBox={`0 0 ${theme.gridCellSize} ${theme.gridCellSize}`}
 				>
 					<Story />
 				</svg>
@@ -126,7 +126,7 @@ export const BigCellProgressWithNumber: Story = {
 	parameters: {
 		theme: {
 			...defaultTheme,
-			cellSize: 50,
+			gridCellSize: 50,
 		},
 	},
 };
@@ -143,7 +143,7 @@ export const HugeCellProgressWithNumber: Story = {
 	parameters: {
 		theme: {
 			...defaultTheme,
-			cellSize: 100,
+			gridCellSize: 100,
 		},
 	},
 };
diff --git a/libs/@guardian/react-crossword/src/components/Cell.tsx b/libs/@guardian/react-crossword/src/components/Cell.tsx
@@ -32,44 +32,44 @@ const CellComponent = ({
 		? 'transparent'
 		: isHighlighted
 			? isActive
-				? theme.active
-				: theme.highlight
-			: theme.foreground;
+				? theme.selectedColor
+				: theme.relatedColor
+			: theme.gridForegroundColor;
 
 	return (
 		<g data-x={data.x} data-y={data.y}>
 			<rect
 				x={x}
 				y={y}
-				width={theme.cellSize}
-				height={theme.cellSize}
+				width={theme.gridCellSize}
+				height={theme.gridCellSize}
 				fill={backgroundColor}
 			/>
 			{data.number && (
 				<text
 					x={x}
 					y={y}
-					dx={Math.max(1, theme.cellSize * 0.05)}
-					dy={Math.max(9, theme.cellSize * 0.22)}
-					fill={theme.text}
+					dx={Math.max(1, theme.gridCellSize * 0.05)}
+					dy={Math.max(9, theme.gridCellSize * 0.22)}
+					fill={theme.textColor}
 					css={css`
 						${textSans12};
-						font-size: ${Math.max(9, Math.round(theme.cellSize * 0.2))}px;
+						font-size: ${Math.max(9, Math.round(theme.gridCellSize * 0.2))}px;
 					`}
 				>
 					{data.number}
 				</text>
 			)}
 			<text
-				x={x + theme.cellSize / 2}
-				y={y + theme.cellSize / 2}
-				dy={theme.cellSize * 0.07}
+				x={x + theme.gridCellSize / 2}
+				y={y + theme.gridCellSize / 2}
+				dy={theme.gridCellSize * 0.07}
 				textAnchor="middle"
 				dominantBaseline="middle"
-				fill={theme.text}
+				fill={theme.textColor}
 				css={css`
 					${textSans12};
-					font-size: ${theme.cellSize * 0.6}px;
+					font-size: ${theme.gridCellSize * 0.6}px;
 				`}
 			>
 				{guess}

diff --git a/libs/@guardian/react-crossword/src/components/Clue.tsx b/libs/@guardian/react-crossword/src/components/Clue.tsx
@@ -35,9 +35,9 @@ const ClueComponent = ({
 			aria-selected={isHighlighted}
 			css={css`
 				background-color: ${isActive
-					? theme.active
+					? theme.selectedColor
 					: isHighlighted
-						? theme.highlight
+						? theme.relatedColor
 						: 'transparent'};
 				cursor: ${isHighlighted ? 'default' : 'pointer'};
 				opacity: ${isComplete ? 0.5 : 1};

diff --git a/libs/@guardian/react-crossword/src/components/Controls.tsx b/libs/@guardian/react-crossword/src/components/Controls.tsx
@@ -32,8 +32,8 @@ const ClueControls = ({ currentEntryId }: { currentEntryId: EntryID }) => {
 	const { updateCell } = useUpdateCell();
 
 	const crosswordButtonTheme: Partial<ThemeButton> = {
-		backgroundPrimary: theme.buttonBackground,
-		backgroundPrimaryHover: theme.buttonBackgroundHover,
+		backgroundPrimary: theme.buttonBackgroundColor,
+		backgroundPrimaryHover: theme.buttonBackgroundHoverColor,
 	};
 
 	const revealEntry = useCallback(() => {

diff --git a/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx b/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
@@ -134,17 +134,17 @@ export const CustomisedLayout: StoryFn = () => {
 
 export const Themed: Story = {
 	args: {
-		background:
+		gridBackgroundColor:
 			'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',
-		foreground: 'blue',
-		text: 'limegreen',
-		gutter: 0,
-		highlight: 'yellow',
-		focus: 'black',
-		active: 'orange',
-		cellSize: 30,
-		buttonBackground: 'cyan',
-		buttonBackgroundHover: 'magenta',
-		border: 'lightpink',
+		gridForegroundColor: 'blue',
+		textColor: 'limegreen',
+		gridGutterSize: 0,
+		relatedColor: 'yellow',
+		focusColor: 'black',
+		selectedColor: 'orange',
+		gridCellSize: 30,
+		buttonBackgroundColor: 'cyan',
+		buttonBackgroundHoverColor: 'magenta',
+		borderColor: 'lightpink',
 	},
 };
diff --git a/libs/@guardian/react-crossword/src/components/Grid.tsx b/libs/@guardian/react-crossword/src/components/Grid.tsx
@@ -13,8 +13,10 @@ import { useUpdateCell } from '../hooks/useUpdateCell';
 import { keyDownRegex } from '../utils/keydownRegex';
 import { Cell } from './Cell';
 
-const getCellPosition = (index: number, { cellSize, gutter }: Theme) =>
-	index * (cellSize + gutter) + gutter;
+const getCellPosition = (
+	index: number,
+	{ gridCellSize, gridGutterSize }: Theme,
+) => index * (gridCellSize + gridGutterSize) + gridGutterSize;
 
 const Separator = memo(
 	({
@@ -32,35 +34,35 @@ const Separator = memo(
 		const x = getCellPosition(position.x, theme);
 		const y = getCellPosition(position.y, theme);
 
-		const { cellSize, gutter } = theme;
+		const { gridCellSize, gridGutterSize } = theme;
 
 		// if this is a 'down' entry, we'll rotate the separator 90 degrees
 		// around the center of the cell
 		const transform: Partial<Record<Direction, string>> = {
-			down: `rotate(90 ${x + cellSize / 2} ${y + cellSize / 2})`,
+			down: `rotate(90 ${x + gridCellSize / 2} ${y + gridCellSize / 2})`,
 		};
 
 		return type === '-' ? (
 			// draws a dash (-) that bisects the border with the next cell
 			<line
-				x1={x + cellSize - 3}
-				y1={y + cellSize / 2}
-				x2={x + cellSize + 4}
-				y2={y + cellSize / 2}
-				strokeWidth={gutter}
-				stroke={theme.background}
+				x1={x + gridCellSize - 3}
+				y1={y + gridCellSize / 2}
+				x2={x + gridCellSize + 4}
+				y2={y + gridCellSize / 2}
+				strokeWidth={gridGutterSize}
+				stroke={theme.gridBackgroundColor}
 				transform={transform[direction]}
 				{...props}
 			/>
 		) : (
 			// draws a thicker border with the next cell
 			<line
-				x1={x + cellSize + gutter / 2}
+				x1={x + gridCellSize + gridGutterSize / 2}
 				y1={y}
-				x2={x + cellSize + gutter / 2}
-				y2={y + cellSize}
-				strokeWidth={gutter * 2}
-				stroke={theme.background}
+				x2={x + gridCellSize + gridGutterSize / 2}
+				y2={y + gridCellSize}
+				strokeWidth={gridGutterSize * 2}
+				stroke={theme.gridBackgroundColor}
 				transform={transform[direction]}
 				{...props}
 			/>
@@ -77,11 +79,17 @@ const FocusIndicator = ({
 
 	return (
 		<rect
-			x={currentCell.x * (theme.cellSize + theme.gutter) + theme.gutter * 0.5}
-			y={currentCell.y * (theme.cellSize + theme.gutter) + theme.gutter * 0.5}
-			width={theme.cellSize + theme.gutter}
-			height={theme.cellSize + theme.gutter}
-			stroke={theme.focus}
+			x={
+				currentCell.x * (theme.gridCellSize + theme.gridGutterSize) +
+				theme.gridGutterSize * 0.5
+			}
+			y={
+				currentCell.y * (theme.gridCellSize + theme.gridGutterSize) +
+				theme.gridGutterSize * 0.5
+			}
+			width={theme.gridCellSize + theme.gridGutterSize}
+			height={theme.gridCellSize + theme.gridGutterSize}
+			stroke={theme.focusColor}
 			strokeWidth={2}
 			fill="none"
 			rx={2}
@@ -364,15 +372,17 @@ export const Grid = () => {
 	}, [handleKeyDown, selectClickedCell]);
 
 	const height =
-		theme.cellSize * dimensions.rows + theme.gutter * (dimensions.rows + 1);
+		theme.gridCellSize * dimensions.rows +
+		theme.gridGutterSize * (dimensions.rows + 1);
 	const width =
-		theme.cellSize * dimensions.cols + theme.gutter * (dimensions.cols + 1);
+		theme.gridCellSize * dimensions.cols +
+		theme.gridGutterSize * (dimensions.cols + 1);
 
 	return (
 		<svg
 			css={[
 				css`
-					background: ${theme.background};
+					background: ${theme.gridBackgroundColor};
 					width: 100%;
 					max-width: ${width}px;
 				`,