@primer/brand-css 0.65.1 → 0.66.0-rc.0209d4ca

package/components/IDE/IDE.css

@@ -224,7 +224,7 @@
 
 .IDE--glass .IDE__Editor-tab {
   background: transparent;
-  color: var(--brand-color-text-subtle);
+  color: var(--brand-color-text-muted);
 }
 
 .IDE--glass .IDE__Editor-tab--active {
@@ -242,7 +242,7 @@
 
 .IDE__Editor-tab[disabled] {
   cursor: not-allowed;
-  color: var(--brand-color-text-subtle) !important;
+  color: var(--brand-color-text-muted) !important;
   opacity: 0.7;
 }
 

package/components/Testimonial/Testimonial.css

@@ -1,5 +1,4 @@
 .Testimonial {
-  display: grid;
   color: var(--brand-color-text-default);
   font-family: var(--brand-fontStack-sansSerif);
 }
@@ -87,11 +86,27 @@
   mask-composite: exclude;
 }
 
-.Testimonial--size-large .Testimonial__quoteMark {
+.Testimonial__quoteMark--hasBackground {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--base-size-48) + var(--base-size-8));
+  height: calc(var(--base-size-48) + var(--base-size-8));
+  border-radius: var(--base-size-12);
+  background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));
+  font-size: var(--base-size-64);
+  line-height: 1;
+}
+
+.Testimonial--size-large .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {
   font-size: 7.5rem; /* 120px */
   line-height: 1;
 }
 
+.Testimonial__quoteMarkGlyph {
+  display: block;
+}
+
 .Testimonial-quote {
   font-family: var(--brand-fontStack-sansSerif);
   font-size: var(--brand-Testimonial-quote-fontSize-default);
@@ -107,13 +122,9 @@
   letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);
 }
 
-.Testimonial-quote--muted {
-  color: var(--brand-color-text-muted);
-}
-
 .Testimonial-quote em,
 .Testimonial-quote b {
-  color: var(--brand-color-text-default);
+  color: var(--brand-Testimonial-quote-color-emphasis);
   font-style: normal;
   font-weight: inherit;
 }
@@ -146,83 +157,187 @@
   font-family: var(--brand-fontStack-monospace);
 }
 
+/* Expressive variant */
+.Testimonial--variant-expressive {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-48);
+}
+
+@media screen and (min-width: 48rem) {
+  .Testimonial--variant-expressive {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: var(--base-size-64);
+  }
+}
+
+.Testimonial--variant-expressive .Testimonial__quoteWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--base-size-24);
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.Testimonial--variant-expressive .Testimonial__media {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--base-size-24);
+  margin-block-start: 0;
+  flex: 0 0 auto;
+}
+
+.Testimonial--variant-expressive .Testimonial-caption {
+  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  padding-block-start: var(--base-size-24);
+  width: 100%;
+}
+
+@media screen and (min-width: 48rem) {
+  .Testimonial--variant-expressive .Testimonial__media {
+    min-width: 240px;
+    max-width: 320px;
+  }
+}
+
+.Testimonial--variant-expressive .Testimonial-from {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  font-family: var(--brand-fontStack-monospace);
+  font-weight: var(--base-text-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+}
+
+.Testimonial--variant-expressive .Testimonial-from::before {
+  content: '';
+  display: inline-block;
+  width: 9px;
+  height: 14px;
+  background-color: var(--testimonial-accent-color, var(--brand-Testimonial-quoteMarkColor-default));
+  flex-shrink: 0;
+}
+
+.Testimonial--variant-expressive .Testimonial__quoteMark {
+  font-family: var(--brand-fontStack-monospace);
+  font-weight: var(--brand-fontWeight-300);
+}
+
+.Testimonial--variant-expressive .Testimonial__quoteMarkGlyph {
+  transform: translateY(var(--base-size-12));
+}
+
+.Testimonial--variant-expressive .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {
+  margin-left: -0.18em;
+}
+
+.Testimonial--variant-expressive .Testimonial-quote {
+  font-family: var(--brand-fontStack-monospace);
+}
+
+.Testimonial-link {
+  margin-top: var(--base-size-8);
+}
+
 .Testimonial__quoteMark--default {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-default);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-default);
 }
 
 .Testimonial__quoteMark--blue {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-blue);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue);
 }
 
 .Testimonial__quoteMark--blue-purple {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-blue-purple-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-blue-purple-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue-purple);
 }
 
 .Testimonial__quoteMark--coral {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-coral);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-coral);
 }
 
 .Testimonial__quoteMark--green {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-green);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green);
 }
 
 .Testimonial__quoteMark--green-blue {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-green-blue-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-green-blue-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green-blue);
 }
 
 .Testimonial__quoteMark--gray {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-gray);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-gray);
 }
 
 .Testimonial__quoteMark--indigo {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-indigo);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-indigo);
 }
 
 .Testimonial__quoteMark--lemon {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lemon);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lemon);
 }
 
 .Testimonial__quoteMark--lime {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lime);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lime);
 }
 
 .Testimonial__quoteMark--orange {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-orange);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-orange);
 }
 
 .Testimonial__quoteMark--pink {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-pink);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink);
 }
 
 .Testimonial__quoteMark--pink-blue {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-pink-blue-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-pink-blue-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink-blue);
 }
 
 .Testimonial__quoteMark--purple {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-purple);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple);
 }
 
 .Testimonial__quoteMark--purple-red {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-purple-red-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-purple-red-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple-red);
 }
 
 .Testimonial__quoteMark--red {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-red);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red);
 }
 
 .Testimonial__quoteMark--red-orange {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-red-orange-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-red-orange-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red-orange);
 }
 
 .Testimonial__quoteMark--teal {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-teal);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-teal);
 }
 
 .Testimonial__quoteMark--yellow {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-yellow);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-yellow);
 }

package/components/forms/ControlGroup/ControlGroup.css

@@ -26,7 +26,7 @@
 }
 
 .ControlGroup__validation--error {
-  color: var(--brand-color-error-fg);
+  color: var(--brand-color-danger-fg);
 }
 
 .ControlGroup__validation-icon--success {

package/components/forms/FormControl/FormControl.css

@@ -80,7 +80,7 @@
 }
 
 .FormControl-validation--error {
-  color: var(--brand-color-error-fg);
+  color: var(--brand-color-danger-fg);
 }
 
 .FormControl-validation-success-icon {

package/components/forms/Select/Select.css

@@ -26,12 +26,12 @@
 }
 
 .Select::-moz-placeholder {
-  color: var(--brand-color-text-subtle);
+  color: var(--brand-color-text-muted);
   opacity: 1;
 }
 
 .Select::placeholder {
-  color: var(--brand-color-text-subtle);
+  color: var(--brand-color-text-muted);
   opacity: 1;
 }
 
@@ -146,7 +146,7 @@
 }
 
 .Select--error {
-  border-color: var(--brand-color-error-fg);
+  border-color: var(--brand-color-danger-fg);
 }
 
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

package/components/forms/TextInput/TextInput.css

@@ -13,12 +13,12 @@
 }
 
 .TextInput::-moz-placeholder {
-  color: var(--brand-color-text-subtle);
+  color: var(--brand-color-text-muted);
   opacity: 1;
 }
 
 .TextInput::placeholder {
-  color: var(--brand-color-text-subtle);
+  color: var(--brand-color-text-muted);
   opacity: 1;
 }
 
@@ -125,7 +125,7 @@
 
 .TextInput-wrapper--error,
 .TextInput-wrapper--error.TextInput-wrapper--disabled {
-  border-color: var(--brand-color-error-fg);
+  border-color: var(--brand-color-danger-fg);
 }
 
 /*
@@ -269,7 +269,7 @@
 
 .TextInput-leading-text--error,
 .TextInput-trailing-text--error {
-  border-color: var(--brand-color-error-fg);
+  border-color: var(--brand-color-danger-fg);
 }
 
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

package/components/forms/Textarea/Textarea.css

@@ -13,12 +13,12 @@
 }
 
 .Textarea::-moz-placeholder {
-  color: var(--brand-color-text-subtle);
+  color: var(--brand-color-text-muted);
   opacity: 1;
 }
 
 .Textarea::placeholder {
-  color: var(--brand-color-text-subtle);
+  color: var(--brand-color-text-muted);
   opacity: 1;
 }
 
@@ -132,7 +132,7 @@
 
 .Textarea-wrapper--error,
 .Textarea-wrapper--error.Textarea-wrapper--disabled {
-  border-color: var(--brand-color-error-fg);
+  border-color: var(--brand-color-danger-fg);
 }
 
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

package/components/river/river-shared.css

@@ -407,7 +407,7 @@
 }
 
 .RiverBreakout--muted .River__text {
-  color: var(--brand-color-text-subtle);
+  color: var(--brand-color-text-muted);
 }
 
 .RiverBreakout .River__text em,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.65.1",
+  "version": "0.66.0-rc.0209d4ca",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",
@@ -30,11 +30,11 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@types/node": "22.18.1",
-    "autoprefixer": "10.4.20",
-    "postcss": "8.5.1",
-    "tsx": "^4.19.2",
-    "typescript": "5.8.2"
+    "@types/node": "24.12.0",
+    "autoprefixer": "10.4.27",
+    "postcss": "8.5.8",
+    "tsx": "^4.21.0",
+    "typescript": "5.9.3"
   },
   "engines": {
     "node": ">=24.0.0",