chore: bump mktg-global-styles (#823)

* chore: bump mktg-global-styles

* chore: update card colors

* bold description

* update proct badge background

* update VideoFeature colors

* update AuthorByline colors

* update Intro colors

* update NextSteps colors

* fix duplicate position

* set override

* install override

* canary release

* bump react-content

* bump products used

* bump products-used

* update toggle colors

* update to stable release

* fix products-used mktg-global-styles

* update standalone link color

* refactor: only show outline in focus-visible

* update products used styling

* bring back y padding

* update product badge dark background color

* Add changeset

.changeset/pink-pants-confess.md

@@ -0,0 +1,17 @@
+---
+'@hashicorp/react-alert': minor
+'@hashicorp/react-author-byline': minor
+'@hashicorp/react-card': minor
+'@hashicorp/react-content': minor
+'@hashicorp/react-inline-svg': minor
+'@hashicorp/react-intro': minor
+'@hashicorp/react-next-steps': minor
+'@hashicorp/react-product-badge': minor
+'@hashicorp/react-products-used': minor
+'@hashicorp/react-quote': minor
+'@hashicorp/react-standalone-link': minor
+'@hashicorp/react-toggle': minor
+'@hashicorp/react-video-feature': minor
+---
+
+Update neutral and blue colors

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "dependencies": {
     "@hashicorp/flight-icons": "^2.5.0",
-    "@hashicorp/mktg-global-styles": "^4.3.1",
+    "@hashicorp/mktg-global-styles": "^4.4.0",
     "@hashicorp/mktg-logos": "^1.3.2",
     "@hashicorp/sentinel-embedded": "^0.0.14",
     "classnames": "^2.3.1",

packages/alert/package.json

@@ -4,7 +4,9 @@
   "version": "6.0.2",
   "author": "HashiCorp",
   "bugs": "https://github.com/hashicorp/react-components/issues?q=is:issue+%22alert%22",
-  "contributors": ["Jeff Escalante"],
+  "contributors": [
+    "Jeff Escalante"
+  ],
   "homepage": "https://github.com/hashicorp/react-components/tree/master/packages/alert",
   "license": "MPL-2.0",
   "main": "index.jsx",

packages/author-byline/style.module.css

@@ -1,14 +1,14 @@
 .authorByline {
-  --name-color: var(--black);
-  --role-color: var(--gray-3);
+  --name-color: var(--wpl-neutral-900);
+  --role-color: var(--wpl-neutral-500);
 
   display: flex;
   align-items: center;
   gap: 16px;
 
   &.dark {
-    --name-color: var(--white);
-    --role-color: var(--white);
+    --name-color: var(--wpl-neutral-0);
+    --role-color: var(--wpl-neutral-400);
   }
 }
 

packages/card/person-card/style.module.css

@@ -20,16 +20,10 @@
   place-items: center;
   border-radius: 9999px;
   overflow: hidden;
+  background-color: var(--wpl-neutral-0);
+  opacity: 0.5;
 
   & svg {
     position: relative;
   }
-
-  &::before {
-    position: absolute;
-    inset: 0;
-    content: '';
-    background-color: var(--wpl-neutral-50);
-    opacity: 0.75;
-  }
 }

packages/card/style.module.css

@@ -1,7 +1,7 @@
 .card {
-  --border-color: var(--wpl-neutral-200);
-  --primary-text-color: var(--wpl-neutral-700);
-  --secondary-text-color: #75757a;
+  --border-color: var(--wpl-neutral-50);
+  --primary-text-color: var(--wpl-neutral-900);
+  --secondary-text-color: var(--wpl-neutral-500);
   --background-color: var(--wpl-neutral-0);
 
   display: flex;
@@ -10,8 +10,6 @@
   border-radius: 8px;
 
   &:hover {
-    --border-color: var(--wpl-neutral-300);
-
     & .contentContainer {
       transform: translateY(-2px);
     }
@@ -21,28 +19,24 @@
     }
   }
 
-  &.light {
-    box-shadow: 0 16px 24px -16px #cbcbcd33, 0 8px 12px -8px #cbcbcd66;
+  &.light .contentContainer {
+    box-shadow: 0 8px 12px -8px rgba(203, 203, 205, 0.4),
+      0 16px 24px -16px rgba(203, 203, 205, 0.2);
 
     &:hover {
-      & .contentContainer {
-        box-shadow: 0 16px 16px -10px #656a7633, 0 2px 3px 0 #656a7626;
-      }
-
-      & .cta {
-        color: var(--border-color);
-      }
+      box-shadow: 0 10px 12px -8px rgba(203, 203, 205, 0.5),
+        0 18px 24px -16px rgba(203, 203, 205, 0.3);
     }
   }
 
   &.dark {
-    --border-color: var(--wpl-neutral-800);
+    --border-color: transparent;
     --primary-text-color: var(--wpl-neutral-0);
-    --secondary-text-color: #9a9a9e;
-    --background-color: #323234;
+    --secondary-text-color: var(--wpl-neutral-400);
+    --background-color: var(--wpl-neutral-700);
 
     &:hover {
-      --background-color: #3e3e41;
+      --background-color: var(--wpl-neutral-600);
     }
   }
 }
@@ -108,6 +102,7 @@
 
 .description {
   composes: g-type-body-small from global;
+  font-weight: var(--font-weight-bold);
   margin: 0;
   color: var(--secondary-text-color);
 }
@@ -119,14 +114,20 @@
 }
 
 .cta {
+  --color: var(--wpl-neutral-400);
+
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  color: var(--wpl-neutral-200);
+  color: var(--color);
   padding: 8px 20px 20px 20px;
   margin-top: auto;
   transition: color 0.25s ease;
 
+  @nest .dark & {
+    --color: var(--wpl-neutral-500);
+  }
+
   & svg {
     transition: transform 0.25s ease;
   }

packages/content/package.json

@@ -9,7 +9,7 @@
   ],
   "license": "MPL-2.0",
   "peerDependencies": {
-    "@hashicorp/mktg-global-styles": ">=3.2.x",
+    "@hashicorp/mktg-global-styles": ">=3.x",
     "react": ">=16.x"
   },
   "publishConfig": {