Update large unit styles

WordPress · Jul 22, 2022 · 505c5d5 · 505c5d5
1 parent ef69c8f
commit 505c5d5
Showing 1 changed file with 77 additions and 60 deletions.
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -61,42 +61,33 @@ export const ValueInput = styled( NumberControl )`
 `;
 
 const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
-	const base = css`
-		appearance: none;
-		background: transparent;
-		border-radius: 2px;
-		border: none;
-		box-sizing: border-box;
-		display: block;
-		outline: none;
-		text-align-last: center;
-
-		${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-	`;
-	const defaultLabelSize = css`
-		padding: 2px 1px;
-		width: 20px;
-		color: ${ COLORS.darkGray[ 500 ] };
-		font-size: 8px;
-		letter-spacing: -0.5px;
-		text-transform: uppercase;
-	`;
-	const largeLabelSize = css`
-		padding-left: ${ space( 1 ) };
-		padding-right: ${ space( 4 ) };
-		color: ${ COLORS.ui.theme };
-		font-size: 13px;
-	`;
-	const labelSize = {
-		default: defaultLabelSize,
-		small: defaultLabelSize,
-		'__unstable-large': largeLabelSize,
+	const sizes = {
+		default: css`
+			box-sizing: border-box;
+			padding: 2px 1px;
+			width: 20px;
+			color: ${ COLORS.darkGray[ 500 ] };
+			font-size: 8px;
+			letter-spacing: -0.5px;
+			text-transform: uppercase;
+			text-align-last: center;
+		`,
+		large: css`
+			box-sizing: border-box;
+			width: 36px;
+			height: 36px;
+			margin-inline-end: 2px;
+			padding: ${ space( 1 ) };
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: ${ COLORS.ui.theme };
+			font-size: 13px;
+			text-align-last: center;
+		`,
 	};
 
-	return css`
-		${ base };
-		${ labelSize[ selectSize ] };
-	`;
+	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
 };
 
 export const UnitLabel = styled.div< SelectProps >`
@@ -109,36 +100,62 @@ export const UnitLabel = styled.div< SelectProps >`
 	}
 `;
 
-export const UnitSelect = styled.select< SelectProps >`
-	&&& {
-		${ baseUnitLabelStyles };
-		cursor: pointer;
-		border: 1px solid transparent;
-		height: 100%;
-		/* Removing margin ensures focus styles neatly overlay the wrapper. */
-		margin: 0;
-		transition: box-shadow 0.1s linear, border 0.1s linear;
-		font-family: inherit;
-
-		&:hover {
-			background-color: ${ COLORS.lightGray[ 300 ] };
-		}
+const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
+	const sizes = {
+		default: css`
+			height: 100%;
+			/* Removing margin ensures focus styles neatly overlay the wrapper. */
+			margin: 0;
+			border: 1px solid transparent;
+			transition: box-shadow 0.1s linear, border 0.1s linear;
 
-		&:focus {
-			border: 1px solid ${ COLORS.ui.borderFocus };
-			box-shadow: inset 0 0 0
-				${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
-			outline-offset: 0;
-			outline: 2px solid transparent;
-			z-index: 1;
-		}
+			${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
 
-		&:disabled {
-			cursor: initial;
+			&:not(:disabled):hover {
+				background-color: ${ COLORS.lightGray[ 300 ] };
+			}
 
+			&:focus {
+				border: 1px solid ${ COLORS.ui.borderFocus };
+				box-shadow: inset 0 0 0
+					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
+				outline-offset: 0;
+				outline: 2px solid transparent;
+				z-index: 1;
+			}
+		`,
+		large: css`
 			&:hover {
-				background-color: transparent;
+				color: ${ COLORS.ui.borderFocus };
+				box-shadow: inset 0 0 0
+					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
+				outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode
 			}
-		}
+
+			&:focus {
+				box-shadow: 0 0 0
+					${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };
+				outline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode
+			}
+		`,
+	};
+
+	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+};
+
+export const UnitSelect = styled.select< SelectProps >`
+	appearance: none;
+	background: transparent;
+	border-radius: 2px;
+	border: none;
+	display: block;
+	outline: none;
+	font-family: inherit;
+
+	&:not( :disabled ) {
+		cursor: pointer;
 	}
+
+	${ baseUnitLabelStyles };
+	${ unitSelectSizes };
 `;