A4A: Update the Color Studio package to import Automattic Blue. (#89310)

* Update color studio to 2.6.0 * Set global A8C primary color. * Fix all button to use same component and styling.
Automattic · Apr 10, 2024 · df5e6b8 · df5e6b8
1 parent 8350005
commit df5e6b8
Show file tree

Hide file tree

Showing 16 changed files with 137 additions and 72 deletions.
diff --git a/apps/happy-blocks/package.json b/apps/happy-blocks/package.json
@@ -29,7 +29,7 @@
 		"@automattic/calypso-build": "workspace:^",
 		"@automattic/calypso-config": "workspace:^",
 		"@automattic/calypso-products": "workspace:^",
-		"@automattic/color-studio": "2.5.0",
+		"@automattic/color-studio": "2.6.0",
 		"@automattic/components": "workspace:^",
 		"@automattic/format-currency": "workspace:^",
 		"@automattic/typography": "workspace:^",

diff --git a/client/a8c-for-agencies/components/sidebar/style.scss b/client/a8c-for-agencies/components/sidebar/style.scss
@@ -4,14 +4,14 @@
 // This file is meant to house style rules that all implementations of the base
 // sidebar will implement by default.
 .a4a-sidebar {
-	--color-sidebar-background: #021a23;
-	--color-sidebar-menu-hover-background: #02395c;
-	--color-sidebar-menu-hover-text: #fff;
-	--color-sidebar-menu-selected-background: #02395c;
-	--color-sidebar-menu-selected-text: #fff;
-	--color-sidebar-text: #fff;
-	--color-sidebar-text-alternative: #bbe0fa;
-	--color-sidebar-gridicon-fill: #bbe0fa;
+	--color-sidebar-background: var(--color-primary-100);
+	--color-sidebar-menu-hover-background: var(--color-primary-80);
+	--color-sidebar-menu-hover-text: var(--color-text-inverted);
+	--color-sidebar-menu-selected-background: var(--color-primary-80);
+	--color-sidebar-menu-selected-text: var(--color-text-inverted);
+	--color-sidebar-text: var(--color-text-inverted);
+	--color-sidebar-text-alternative: var(--color-primary-5);
+	--color-sidebar-gridicon-fill: var(--color-primary-5);
 
 	.a4a-sidebar__site-selector {
 		background-color: var(--color-sidebar-background);

diff --git a/client/a8c-for-agencies/sections/marketplace/pressable-overview/index.tsx b/client/a8c-for-agencies/sections/marketplace/pressable-overview/index.tsx
@@ -1,5 +1,5 @@
 import page from '@automattic/calypso-router';
-import { Button } from '@wordpress/components';
+import { Button } from '@automattic/components';
 import { Icon, external } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback } from 'react';
@@ -127,7 +127,7 @@ export default function PressableOverview() {
 						href={ PRESSABLE_LINK }
 						onClick={ onclickMoreInfo }
 						target="_blank"
-						variant="primary"
+						primary
 					>
 						{ translate( 'Learn more about Pressable' ) } <Icon icon={ external } size={ 18 } />
 					</Button>

diff --git a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/details.tsx b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/details.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@automattic/components';
 import formatNumber from '@automattic/components/src/number-formatters/lib/format-number';
 import formatCurrency from '@automattic/format-currency';
-import { Button } from '@wordpress/components';
 import { Icon, check, external } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { ReactNode, useCallback } from 'react';
@@ -110,7 +110,7 @@ export default function PlanSelectionDetails( { selectedPlan, onSelectPlan }: Pr
 					<Button
 						className="pressable-overview-plan-selection__details-card-cta-button"
 						onClick={ onSelectPlan }
-						variant="primary"
+						primary
 					>
 						{ translate( 'Select %(planName)s plan', {
 							args: {
@@ -127,7 +127,7 @@ export default function PlanSelectionDetails( { selectedPlan, onSelectPlan }: Pr
 						onClick={ onChatWithUs }
 						href={ PRESSABLE_CONTACT_LINK }
 						target="_blank"
-						variant="primary"
+						primary
 					>
 						{ translate( 'Chat with us' ) } <Icon icon={ external } size={ 16 } />
 					</Button>

diff --git a/client/a8c-for-agencies/sections/marketplace/products-overview/multi-product-card/index.tsx b/client/a8c-for-agencies/sections/marketplace/products-overview/multi-product-card/index.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@wordpress/components';
+import { Button } from '@automattic/components';
 import { Icon, check } from '@wordpress/icons';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
@@ -196,7 +196,7 @@ export default function MultiProductCard( props: Props ) {
 
 							<Button
 								className="product-card__select-button"
-								variant={ isSelected ? 'secondary' : 'primary' }
+								primary={ ! isSelected }
 								tabIndex={ -1 }
 							>
 								{ isSelected && <Icon icon={ check } /> }

diff --git a/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/index.tsx b/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/index.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@wordpress/components';
+import { Button } from '@automattic/components';
 import { Icon, check } from '@wordpress/icons';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
@@ -142,7 +142,7 @@ export default function ProductCard( props: Props ) {
 
 							<Button
 								className="product-card__select-button"
-								variant={ isSelected ? 'secondary' : 'primary' }
+								primary={ ! isSelected }
 								tabIndex={ -1 }
 							>
 								{ isSelected && <Icon icon={ check } /> }

diff --git a/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss b/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss
@@ -48,6 +48,8 @@ button.product-card__select-button {
 	font-weight: 600;
 	line-height: 1.1;
 	max-height: 36px;
+	min-width: 82px;
+	max-width: 82px;
 }
 
 @mixin product-card-block__details {

diff --git a/client/a8c-for-agencies/sections/marketplace/shopping-cart/index.tsx b/client/a8c-for-agencies/sections/marketplace/shopping-cart/index.tsx
@@ -1,6 +1,5 @@
 import page from '@automattic/calypso-router';
-import { Badge } from '@automattic/components';
-import { Button } from '@wordpress/components';
+import { Badge, Button } from '@automattic/components';
 import { Icon } from '@wordpress/icons';
 import classNames from 'classnames';
 import { useState } from 'react';
@@ -56,7 +55,7 @@ export default function ShoppingCart( { onCheckout, onRemoveItem, items }: Props
 
 	return (
 		<div className="shopping-cart">
-			<Button className="shopping-cart__button" onClick={ toggleShoppingCart }>
+			<Button className="shopping-cart__button" onClick={ toggleShoppingCart } borderless>
 				<Icon className="shopping-cart__button-icon" icon={ <ShoppingCartIcon /> } />
 
 				<Badge

diff --git a/client/a8c-for-agencies/sections/marketplace/shopping-cart/shopping-cart-menu/index.tsx b/client/a8c-for-agencies/sections/marketplace/shopping-cart/shopping-cart-menu/index.tsx
@@ -1,5 +1,6 @@
+import { Button } from '@automattic/components';
 import { formatCurrency } from '@automattic/format-currency';
-import { Button, Popover } from '@wordpress/components';
+import { Popover } from '@wordpress/components';
 import { Icon, close } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { getTotalInvoiceValue } from 'calypso/jetpack-cloud/sections/partner-portal/primary/issue-license/lib/pricing';
@@ -35,7 +36,11 @@ export default function ShoppingCartMenu( { onClose, onCheckout, onRemoveItem, i
 				<div className="shopping-cart__menu-header">
 					<h2 className="shopping-cart__menu-header-title">{ translate( 'Your cart' ) }</h2>
 
-					<Button className="shopping-cart__menu-header-close-button" onClick={ onClose }>
+					<Button
+						className="shopping-cart__menu-header-close-button"
+						onClick={ onClose }
+						borderless
+					>
 						<Icon icon={ close } size={ 24 } />
 					</Button>
 				</div>
@@ -64,7 +69,7 @@ export default function ShoppingCartMenu( { onClose, onCheckout, onRemoveItem, i
 						className="shopping-cart__menu-checkout-button"
 						onClick={ onCheckout }
 						disabled={ ! items.length }
-						variant="primary"
+						primary
 					>
 						{ translate( 'Checkout' ) }
 					</Button>

diff --git a/client/a8c-for-agencies/sections/overview/body/intro-cards/style.scss b/client/a8c-for-agencies/sections/overview/body/intro-cards/style.scss
@@ -23,7 +23,14 @@
 
 .a4a-intro-cards__wrapper {
 	border-radius: 4px;
+
 	.button {
 		border-radius: 4px;
 	}
+
+	.dot-pager__control-prev:focus-visible,
+	.dot-pager__control-next:focus-visible,
+	.dot-pager__control-choose-page:focus-visible {
+		border-radius: 4px;
+	}
 }
diff --git a/client/a8c-for-agencies/style.scss b/client/a8c-for-agencies/style.scss
@@ -4,42 +4,90 @@
 	--a4a-corners-sharp: 0;
 	--a4a-corners-soft: 4px;
 
-	// FIXME: Remove this when we have a proper color scheme
-	--studio-automattic-0: #ebf4fa;
-	--studio-automattic-5: #c4e2f5;
-	--studio-automattic-10: #88ccf2;
-	--studio-automattic-20: #5ab7e8;
-	--studio-automattic-30: #24a3e0;
-	--studio-automattic-40: #1490c7;
-	--studio-automattic-50: #0277a8;
-	--studio-automattic-60: #036085;
-	--studio-automattic-70: #02506e;
-	--studio-automattic-80: #02384d;
-	--studio-automattic-90: #022836;
-	--studio-automattic-100: #021b24;
-	--studio-automattic: #24a3e0;
-
 	--color-surface-backdrop: #021a23;
 
 	--color-text-gray: "#333";
 	--color-sidebar-text-alternative: #bbe0fa;
 
+	// FIXME: Need to move this colors to a color scheme file
 	--color-scary-0: var(--studio-red-0);
 	--color-scary-5: var(--studio-red-5);
 	--color-scary-40: var(--studio-red-40);
 	--color-scary-50: var(--studio-red-50);
 	--color-scary-60: var(--studio-red-60);
 	--color-scary-70: var(--studio-red-70);
 
-	--color-primary: var(--studio-automattic-60);
-	--color-primary-40: var(--studio-automattic-40);
-	--color-accent: var(--studio-automattic-40);
-	--color-accent-60: var(--studio-automattic-60);
-	--color-accent-70: var(--studio-automattic-70);
+	--color-primary: var(--studio-automattic-blue-50);
+	--color-primary-rgb: var(--studio-automattic-blue-50-rgb);
+	--color-primary-dark: var(--studio-automattic-blue-70);
+	--color-primary-dark-rgb: var(--studio-automattic-blue-70-rgb);
+	--color-primary-light: var(--studio-automattic-blue-30);
+	--color-primary-light-rgb: var(--studio-automattic-blue-30-rgb);
+	--color-primary-0: var(--studio-automattic-blue-0);
+	--color-primary-0-rgb: var(--studio-automattic-blue-0-rgb);
+	--color-primary-5: var(--studio-automattic-blue-5);
+	--color-primary-5-rgb: var(--studio-automattic-blue-5-rgb);
+	--color-primary-10: var(--studio-automattic-blue-10);
+	--color-primary-10-rgb: var(--studio-automattic-blue-10-rgb);
+	--color-primary-20: var(--studio-automattic-blue-20);
+	--color-primary-20-rgb: var(--studio-automattic-blue-20-rgb);
+	--color-primary-30: var(--studio-automattic-blue-30);
+	--color-primary-30-rgb: var(--studio-automattic-blue-30-rgb);
+	--color-primary-40: var(--studio-automattic-blue-40);
+	--color-primary-40-rgb: var(--studio-automattic-blue-40-rgb);
+	--color-primary-50: var(--studio-automattic-blue-50);
+	--color-primary-50-rgb: var(--studio-automattic-blue-50-rgb);
+	--color-primary-60: var(--studio-automattic-blue-60);
+	--color-primary-60-rgb: var(--studio-automattic-blue-60-rgb);
+	--color-primary-70: var(--studio-automattic-blue-70);
+	--color-primary-70-rgb: var(--studio-automattic-blue-70-rgb);
+	--color-primary-80: var(--studio-automattic-blue-80);
+	--color-primary-80-rgb: var(--studio-automattic-blue-80-rgb);
+	--color-primary-90: var(--studio-automattic-blue-90);
+	--color-primary-90-rgb: var(--studio-automattic-blue-90-rgb);
+	--color-primary-100: var(--studio-automattic-blue-100);
+	--color-primary-100-rgb: var(--studio-automattic-blue-100-rgb);
+
+	--color-accent: var(--studio-gray-50);
+	--color-accent-rgb: var(--studio-gray-50-rgb);
+	--color-accent-dark: var(--studio-gray-70);
+	--color-accent-dark-rgb: var(--studio-gray-70-rgb);
+	--color-accent-light: var(--studio-gray-30);
+	--color-accent-light-rgb: var(--studio-gray-30-rgb);
+	--color-accent-0: var(--studio-gray-0);
+	--color-accent-0-rgb: var(--studio-gray-0-rgb);
+	--color-accent-5: var(--studio-gray-5);
+	--color-accent-5-rgb: var(--studio-gray-5-rgb);
+	--color-accent-10: var(--studio-gray-10);
+	--color-accent-10-rgb: var(--studio-gray-10-rgb);
+	--color-accent-20: var(--studio-gray-20);
+	--color-accent-20-rgb: var(--studio-gray-20-rgb);
+	--color-accent-30: var(--studio-gray-30);
+	--color-accent-30-rgb: var(--studio-gray-30-rgb);
+	--color-accent-40: var(--studio-gray-40);
+	--color-accent-40-rgb: var(--studio-gray-40-rgb);
+	--color-accent-50: var(--studio-gray-50);
+	--color-accent-50-rgb: var(--studio-gray-50-rgb);
+	--color-accent-60: var(--studio-gray-60);
+	--color-accent-60-rgb: var(--studio-gray-60-rgb);
+	--color-accent-70: var(--studio-gray-70);
+	--color-accent-70-rgb: var(--studio-gray-70-rgb);
+	--color-accent-80: var(--studio-gray-80);
+	--color-accent-80-rgb: var(--studio-gray-80-rgb);
+	--color-accent-90: var(--studio-gray-90);
+	--color-accent-90-rgb: var(--studio-gray-90-rgb);
+	--color-accent-100: var(--studio-gray-100);
+	--color-accent-100-rgb: var(--studio-gray-100-rgb);
 }
 
 .theme-a8c-for-agencies {
 	.button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		white-space: nowrap;
+
+		box-sizing: border-box;
 		border-radius: 4px;
 	}
 
@@ -52,8 +100,19 @@
 	}
 
 	.button.is-primary {
-		background-color: var(--studio-automattic-40);
-		border-color: var(--studio-automattic-40);
+		background-color: var(--color-primary-50);
+		border-color: var(--color-primary-50);
+		fill: var(--color-text-inverted);
+
+		&:hover,
+		&:focus,
+		&:focus-visible {
+			background-color: var(--color-primary-70);
+			border-color: var(--color-primary-70);
+			color: var(--color-text-inverted);
+			box-shadow: none;
+			border: 1px solid;
+		}
 	}
 
 	.button.is-borderless:focus,
@@ -63,25 +122,25 @@
 	}
 
 	.components-form-toggle.is-checked .components-form-toggle__track {
-		background-color: var(--studio-automattic-60);
-		border-color: var(--studio-automattic-60);
+		background-color: var(--color-primary-60);
+		border-color: var(--color-primary-60);
 	}
 
 	.components-checkbox-control__input[type="checkbox"]:checked,
 	.components-checkbox-control__input[type="checkbox"]:indeterminate {
-		background: var(--studio-automattic-60);
-		border-color: var(--studio-automattic-60);
+		background: var(--color-primary-60);
+		border-color: var(--color-primary-60);
 	}
 
 	.components-button.is-tertiary {
-		color: var(--studio-automattic-60);
+		color: var(--color-primary-60);
 	}
 
 	.button.is-borderless.is-primary.is-active,
 	.button.is-borderless.is-primary:active,
 	.button.is-borderless.is-primary:focus,
 	.button.is-borderless.is-primary:hover {
-		color: var(--studio-automattic-60);
+		color: var(--color-primary-60);
 	}
 
 	// Masterbar
@@ -210,10 +269,3 @@ html {
 .site-selector .site-selector__actions {
 	padding: 16px;
 }
-
-.button.is-primary:hover,
-.button.is-primary:focus {
-	background-color: var(--studio-automattic-70);
-	border-color: var(--studio-automattic-70);
-	color: var(--color-text-inverted);
-}
diff --git a/client/package.json b/client/package.json
@@ -27,7 +27,7 @@
 		"@automattic/calypso-sentry": "workspace:^",
 		"@automattic/calypso-stripe": "workspace:^",
 		"@automattic/calypso-url": "workspace:^",
-		"@automattic/color-studio": "2.5.0",
+		"@automattic/color-studio": "2.6.0",
 		"@automattic/command-palette": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/composite-checkout": "workspace:^",

diff --git a/package.json b/package.json
@@ -146,7 +146,7 @@
 		"@automattic/calypso-products": "workspace:^",
 		"@automattic/calypso-razorpay": "workspace:^",
 		"@automattic/calypso-router": "workspace:^",
-		"@automattic/color-studio": "2.5.0",
+		"@automattic/color-studio": "2.6.0",
 		"@automattic/command-palette": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/data-stores": "workspace:^",

diff --git a/packages/calypso-color-schemes/package.json b/packages/calypso-color-schemes/package.json
@@ -28,7 +28,7 @@
 	"devDependencies": {
 		"@automattic/calypso-eslint-overrides": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"@automattic/color-studio": "2.5.0",
+		"@automattic/color-studio": "2.6.0",
 		"postcss": "^8.4.5",
 		"postcss-custom-properties": "^11.0.0",
 		"sass": "^1.37.5"

diff --git a/packages/composite-checkout/package.json b/packages/composite-checkout/package.json
@@ -46,7 +46,7 @@
 	"devDependencies": {
 		"@automattic/calypso-storybook": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"@automattic/color-studio": "2.5.0",
+		"@automattic/color-studio": "2.6.0",
 		"@storybook/cli": "^7.6.17",
 		"@storybook/react": "^7.6.17",
 		"@testing-library/dom": "^9.3.4",