@primer/brand-css 0.56.4-rc.59a048f0 → 0.56.4-rc.99f23b6a

package/components/PricingOptions/PricingOptions.css

@@ -17,16 +17,8 @@
     'footnote'
     ;
 
-  /* prettier-ignore */
-  --brand-pricing-options-template-areas-single-item: 
-    'leadingComponent actions'
-      'header actions'
-      'description actions'
-      'price actions'
-      'feature-list actions';
-
   display: grid;
-  row-gap: var(--brand-pricing-options-item-gap);
+  row-gap: var(--brand-pricing-options-item-gap, 0);
   padding-inline: var(--brand-pricing-options-container-padding-inline);
 }
 
@@ -40,6 +32,10 @@
 @media (min-width: 63.25rem) {
   .PricingOptions {
     grid-template-areas: var(--brand-pricing-options-template-areas);
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    -moz-column-gap: var(--brand-pricing-options-item-gap, 0);
+         column-gap: var(--brand-pricing-options-item-gap, 0);
+    row-gap: 0;
   }
 }
 
@@ -140,51 +136,23 @@
 }
 
 /* ---------------------------------------------------------- */
-/* Single item                                             */
-/* ---------------------------------------------------------- */
-
-@media (min-width: 63.25rem) {
-  .PricingOptions--items1 {
-    --brand-pricing-options-container-padding-inline: var(--base-size-48);
-
-    display: block;
-  }
-
-  .PricingOptions--items1 .PricingOptions__item {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    -moz-column-gap: calc(var(--base-size-96) * 2);
-         column-gap: calc(var(--base-size-96) * 2);
-    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
-    grid-template-areas: var(--brand-pricing-options-template-areas-single-item);
-  }
-
-  .PricingOptions--items1 .PricingOptions__actions {
-    align-self: center;
-  }
-}
-
-/* ---------------------------------------------------------- */
-/* Multiple items                                          */
+/* Items                                                      */
 /* ---------------------------------------------------------- */
 
 @media (min-width: 48rem) {
-  :where(.PricingOptions--layout-cards).PricingOptions--items4 {
-    display: grid;
-    -moz-column-gap: var(--brand-pricing-options-item-gap);
-         column-gap: var(--brand-pricing-options-item-gap);
+  :where(.PricingOptions--layout-cards.PricingOptions--items4) {
     row-gap: var(--brand-pricing-options-item-gap);
   }
 }
 
 @media (min-width: 63.25rem) {
-  .PricingOptions--items2,
-  .PricingOptions--items3,
-  .PricingOptions--items4 {
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    -moz-column-gap: var(--brand-pricing-options-item-gap);
-         column-gap: var(--brand-pricing-options-item-gap);
-    row-gap: 0;
+  .PricingOptions--items1 {
+    width: 50%;
+    margin-inline: auto;
+  }
+
+  .PricingOptions--layout-default.PricingOptions--items1 {
+    --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items1-container-paddingInline);
   }
 
   .PricingOptions--layout-default.PricingOptions--items2 {

package/components/Prose/Prose.css

@@ -352,3 +352,166 @@
     transition: none !important;
   }
 }
+
+/* Tables */
+
+.Prose table {
+  --spacing: var(--base-size-32);
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+}
+
+.Prose table caption {
+  text-align: left;
+  padding-block-end: var(--base-size-24);
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--brand-text-weight-100);
+  line-height: var(--brand-text-lineHeight-100);
+  color: var(--brand-color-text-muted);
+}
+
+.Prose table th,
+.Prose table td {
+  padding-block: var(--base-size-16);
+  padding-inline: var(--base-size-12);
+  text-align: left;
+  vertical-align: top;
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.Prose table th:first-child,
+.Prose table td:first-child,
+.Prose table th:last-child,
+.Prose table td:last-child {
+  padding-inline: 0;
+}
+
+.Prose table th {
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--brand-text-weight-400);
+  line-height: var(--brand-text-lineHeight-100);
+  color: var(--brand-color-text-muted);
+}
+
+.Prose table thead th {
+  border-bottom: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);
+}
+
+.Prose table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.Prose--editorial table {
+  --spacing: var(--base-size-48);
+}
+
+.Prose td > ul:first-child,
+.Prose td > ol:first-child {
+  margin-block-start: 0;
+}
+
+@media screen and (min-width: 48rem) {
+  .Prose table th,
+  .Prose table td {
+    padding: var(--base-size-16) var(--base-size-8);
+  }
+
+  .Prose table th:not(:first-child):not(:last-child),
+  .Prose table td:not(:first-child):not(:last-child) {
+    padding-inline: var(--base-size-16);
+  }
+
+  .Prose table th:first-child,
+  .Prose table td:first-child {
+    padding-inline-start: 0;
+  }
+
+  .Prose table th:last-child,
+  .Prose table td:last-child {
+    padding-inline-end: 0;
+  }
+
+  .Prose table tbody tr:hover {
+    background-color: var(--brand-color-canvas-subtle);
+  }
+}
+
+@media screen and (max-width: 47.99rem) {
+  .Prose table:has(td[data-label]) {
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    background: none;
+    box-shadow: none;
+    font-size: var(--brand-text-size-200); /* inherit from Prose */
+  }
+
+  /* Visually hidden only */
+  .Prose table:has(td[data-label]) thead {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  .Prose table:has(td[data-label]) tbody,
+  .Prose table:has(td[data-label]) tr {
+    display: block;
+    width: 100%;
+  }
+
+  .Prose table:has(td[data-label]) th:not(:first-child):not(:last-child),
+  .Prose table:has(td[data-label]) td:not(:first-child):not(:last-child) {
+    padding-inline: 0;
+  }
+
+  .Prose table:has(td[data-label]) tr {
+    border-block-start: var(--brand-borderWidth-thicker) solid var(--brand-color-border-muted);
+    padding-block-start: var(--base-size-20);
+    margin-block-end: var(--spacing);
+  }
+
+  .Prose td[data-label] {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0;
+    margin: 0 0 var(--base-size-16, 16px) 0;
+    border: none;
+    align-items: flex-start;
+  }
+
+  .Prose td[data-label]:not(:last-child) {
+    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+    padding-block-end: var(--base-size-20);
+  }
+
+  .Prose td[data-label]::before {
+    content: attr(data-label);
+    color: var(--brand-color-text-muted);
+    margin-block-end: var(--base-size-4);
+    text-align: left;
+    font-weight: var(--brand-text-weight-400);
+  }
+
+  .Prose table:has(td[data-label]) td:not([data-label]) {
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin-block-end: var(--base-size-16);
+    border: none;
+  }
+
+  .Prose table:has(td[data-label]) td:not([data-label]):not(:last-child) {
+    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+    padding-block-end: var(--base-size-20);
+  }
+
+  .Prose td[data-label]:last-child {
+    margin-block-end: 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.56.4-rc.59a048f0",
+  "version": "0.56.4-rc.99f23b6a",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",