@primer/brand-css 0.56.3 → 0.56.4-rc.2db7b07e

package/components/ActionMenu/ActionMenu.css

@@ -278,6 +278,13 @@
   fill: var(--base-color-scale-gray-3);
 }
 
+@media (forced-colors: active) {
+  .ActionMenu__item:focus-visible {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .ActionMenu,

package/components/FAQ/FAQGroup.css

@@ -50,3 +50,11 @@
   font-size: var(--brand-text-size-200);
   line-height: var(--brand-text-lineHeight-200);
 }
+
+@media (forced-colors: active) {
+  .FAQGroup__tablist-button[aria-selected='true'] {
+    border-color: Highlight;
+    border-width: var(--brand-borderWidth-thicker);
+    color: HighlightText;
+  }
+}

package/components/Pagination/Pagination.css

@@ -117,6 +117,14 @@
   }
 }
 
+@media (forced-colors: active) {
+  .Pagination__item[aria-current],
+  .Pagination__item[aria-current]:hover {
+    border-color: Highlight;
+    border-width: var(--brand-borderWidth-thicker);
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Pagination,

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/components/VideoPlayer/VideoPlayer.css

@@ -31,6 +31,12 @@
   height: 100%;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__container {
+    border: var(--brand-borderWidth-thin) solid ButtonBorder;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 2. Player                                                  */
 /* ---------------------------------------------------------- */
@@ -87,6 +93,13 @@
   color: var(--brand-videoPlayer-playButton-fgColor-rest);
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__playButton {
+    color: Highlight;
+    opacity: 1;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 4. Title                                                   */
 /* ---------------------------------------------------------- */
@@ -114,6 +127,13 @@
   visibility: hidden;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__title {
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 5. Controls                                                */
 /* ---------------------------------------------------------- */
@@ -173,12 +193,15 @@
 }
 
 .VideoPlayer__iconControl:focus-visible {
-  border-color: var(--brand-color-focus);
-  outline: none;
-  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-6);
   opacity: 1;
 }
 
+.VideoPlayer__iconControl:not(.VideoPlayer__closedCaption):focus-visible {
+  border-radius: var(--brand-borderRadius-small);
+}
+
 .VideoPlayer__iconControl svg {
   color: var(--brand-videoPlayer-controls-fgColor);
 }
@@ -224,6 +247,30 @@
   color: var(--brand-videoPlayer-closedCaption-fgColor-disabled);
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__iconControl svg {
+    color: ButtonText;
+  }
+
+  .VideoPlayer__iconControl:focus-visible {
+    outline-color: Highlight;
+  }
+
+  .VideoPlayer__closedCaption:focus-visible {
+    outline: none;
+  }
+
+  .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) {
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) .VideoPlayer__ccText {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 6. Range Element                                           */
 /* ---------------------------------------------------------- */
@@ -254,7 +301,8 @@
 
 .VideoPlayer__rangeInput:focus-visible {
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
-  outline-offset: var(--base-size-4);
+  outline-offset: var(--base-size-8);
+  border-radius: var(--brand-borderRadius-small);
   opacity: 1;
 }
 
@@ -303,6 +351,28 @@
   border: none;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__rangeProgress::-webkit-progress-bar {
+    background-color: FieldText;
+  }
+
+  .VideoPlayer__rangeProgress::-webkit-progress-value {
+    background-color: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-moz-progress-bar {
+    background: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-ms-fill-lower {
+    background-color: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-ms-fill-upper {
+    background-color: FieldText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 7. Tooltip                                                 */
 /* ---------------------------------------------------------- */

package/components/forms/Checkbox/Checkbox.css

@@ -87,6 +87,21 @@
   opacity: 1;
 }
 
+@media (forced-colors: active) {
+  .Checkbox-input:focus + .Checkbox {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+
+  .Checkbox-input:checked + .Checkbox .Checkbox-checkmark-path {
+    stroke: Highlight;
+  }
+
+  .Checkbox {
+    transition: none;
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Checkbox,

package/components/forms/Radio/Radio.css

@@ -110,6 +110,17 @@ Fixes safari bug where outline doesn't respect border-radius
   opacity: 1;
 }
 
+@media (forced-colors: active) {
+  .Radio-input:focus + .Radio {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-4);
+  }
+
+  .Radio-input:checked + .Radio .Radio-dot {
+    background-color: Highlight;
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Radio,

package/components/forms/Select/Select.css

@@ -41,6 +41,13 @@
   box-shadow: 0 0 0 2px var(--brand-color-focus);
 }
 
+@media (forced-colors: active) {
+  .Select:focus-visible {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 .Select[disabled] {
   -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
   color: var(--brand-control-color-fg-disabled);

package/components/forms/TextInput/TextInput.css

@@ -107,6 +107,13 @@
   outline: none;
 }
 
+@media (forced-colors: active) {
+  .TextInput-wrapper:focus-within {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /*
  * Validation
  */

package/components/forms/Textarea/Textarea.css

@@ -114,6 +114,13 @@
   outline: none;
 }
 
+@media (forced-colors: active) {
+  .Textarea-wrapper:focus-within {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /*
  * Validation
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.56.3",
+  "version": "0.56.4-rc.2db7b07e",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",