@primer/brand-css 0.67.0 → 0.68.0-rc.59bbed40

package/components/CTABanner/CTABanner.css

@@ -19,21 +19,6 @@
   );
 }
 
-/* Heading size overrides for balanced and minimal variants */
-.CTABanner--variant-balanced .CTABanner-heading {
-  font-weight: var(--brand-heading-weight-700);
-  font-size: var(--brand-text-size-700);
-  line-height: var(--brand-heading-lineHeight-700);
-  letter-spacing: var(--brand-heading-letterSpacing-700);
-}
-
-.CTABanner--variant-minimal .CTABanner-heading {
-  font-weight: var(--brand-heading-weight-400);
-  font-size: var(--brand-text-size-400);
-  line-height: var(--brand-text-lineHeight-400);
-  letter-spacing: var(--brand-heading-letterSpacing-400);
-}
-
 .CTABanner-grid {
   row-gap: 0;
   --brand-Grid-spacing-row: 0;
@@ -189,7 +174,7 @@
     gap: var(--base-size-24);
   }
   .CTABanner--variant-balanced .CTABanner-content {
-    gap: var(--base-size-16);
+    gap: var(--base-size-32);
   }
   .CTABanner-container {
     padding: var(--base-size-96) var(--base-size-64);
@@ -230,6 +215,64 @@
   height: auto;
 }
 
+@media screen and (min-width: 63.25rem) {
+  .CTABanner--variant-balanced .CTABanner-image {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) {
+    align-items: stretch;
+  }
+
+  .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) > .CTABanner-content {
+    flex: 1;
+  }
+
+  .CTABanner--variant-balanced .CTABanner-content:has(> .CTABanner-logo) > .CTABanner-logo + * {
+    margin-block-start: auto;
+  }
+}
+
+.CTABanner-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  width: 100%;
+  padding-block-end: var(--base-size-32);
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.CTABanner-logo > svg,
+.CTABanner-logo > img {
+  height: var(--base-size-40);
+  width: auto;
+  display: block;
+}
+
+.CTABanner--variant-default .CTABanner-logo {
+  width: auto;
+  padding-block-end: 0;
+  border-block-end: none;
+}
+
+.CTABanner--variant-minimal .CTABanner-logo {
+  margin-block-end: var(--base-size-24);
+}
+
+.CTABanner-link {
+  align-self: auto;
+}
+
+/*
+ * We use a custom token here because text-emphasized doesn't reach 4.5 contrast
+ * against the default banner bgColor in light mode.
+ */
+.CTABanner-heading b {
+  color: var(--brand-CTABanner-color-heading-emphasis);
+  font-weight: inherit;
+}
+
 .CTABanner-heading code,
 .CTABanner-description code {
   font-size: inherit;

package/components/Pillar/Pillar.css

@@ -7,7 +7,7 @@
 
 .Pillar--has-border {
   border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  border-radius: var(--brand-borderRadius-xlarge);
+  border-radius: var(--brand-borderRadius-medium);
   padding: var(--base-size-32);
 }
 
@@ -33,10 +33,14 @@
 }
 
 .Pillar__icon {
-  display: flex;
   margin-bottom: var(--base-size-24);
 }
 
+.Pillar__icon--with-background > svg {
+  width: 100%;
+  height: 100%;
+}
+
 .Pillar__heading {
   margin-bottom: var(--base-size-16);
 }
@@ -48,59 +52,3 @@
 .Pillar__link {
   margin-top: auto;
 }
-
-.Pillar__icon--color-default {
-  color: var(--brand-Pillar-icon-color-default);
-}
-
-.Pillar__icon--color-blue {
-  color: var(--brand-Pillar-icon-color-blue);
-}
-
-.Pillar__icon--color-coral {
-  color: var(--brand-Pillar-icon-color-coral);
-}
-
-.Pillar__icon--color-green {
-  color: var(--brand-Pillar-icon-color-green);
-}
-
-.Pillar__icon--color-gray {
-  color: var(--brand-Pillar-icon-color-gray);
-}
-
-.Pillar__icon--color-indigo {
-  color: var(--brand-Pillar-icon-color-indigo);
-}
-
-.Pillar__icon--color-lemon {
-  color: var(--brand-Pillar-icon-color-lemon);
-}
-
-.Pillar__icon--color-lime {
-  color: var(--brand-Label-color-lime);
-}
-
-.Pillar__icon--color-orange {
-  color: var(--brand-Pillar-icon-color-orange);
-}
-
-.Pillar__icon--color-pink {
-  color: var(--brand-Pillar-icon-color-pink);
-}
-
-.Pillar__icon--color-purple {
-  color: var(--brand-Pillar-icon-color-purple);
-}
-
-.Pillar__icon--color-red {
-  color: var(--brand-Pillar-icon-color-red);
-}
-
-.Pillar__icon--color-teal {
-  color: var(--brand-Pillar-icon-color-teal);
-}
-
-.Pillar__icon--color-yellow {
-  color: var(--brand-Pillar-icon-color-yellow);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.67.0",
+  "version": "0.68.0-rc.59bbed40",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",