@primer/brand-css 0.0.0-20250718130819 → 0.0.0-20250718135503

package/components/ActionMenu/ActionMenu.css

@@ -278,13 +278,6 @@
   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,11 +50,3 @@
   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,14 +117,6 @@
   }
 }
 
-@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,166 +352,3 @@
     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-bottom: 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-bottom: 0;
-  }
-}

package/components/VideoPlayer/VideoPlayer.css

@@ -31,12 +31,6 @@
   height: 100%;
 }
 
-@media (forced-colors: active) {
-  .VideoPlayer__container {
-    border: var(--brand-borderWidth-thin) solid ButtonBorder;
-  }
-}
-
 /* ---------------------------------------------------------- */
 /* 2. Player                                                  */
 /* ---------------------------------------------------------- */
@@ -93,13 +87,6 @@
   color: var(--brand-videoPlayer-playButton-fgColor-rest);
 }
 
-@media (forced-colors: active) {
-  .VideoPlayer__playButton {
-    color: Highlight;
-    opacity: 1;
-  }
-}
-
 /* ---------------------------------------------------------- */
 /* 4. Title                                                   */
 /* ---------------------------------------------------------- */
@@ -127,13 +114,6 @@
   visibility: hidden;
 }
 
-@media (forced-colors: active) {
-  .VideoPlayer__title {
-    background: Canvas;
-    color: CanvasText;
-  }
-}
-
 /* ---------------------------------------------------------- */
 /* 5. Controls                                                */
 /* ---------------------------------------------------------- */
@@ -193,15 +173,12 @@
 }
 
 .VideoPlayer__iconControl:focus-visible {
-  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
-  outline-offset: var(--base-size-6);
+  border-color: var(--brand-color-focus);
+  outline: none;
+  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
   opacity: 1;
 }
 
-.VideoPlayer__iconControl:not(.VideoPlayer__closedCaption):focus-visible {
-  border-radius: var(--brand-borderRadius-small);
-}
-
 .VideoPlayer__iconControl svg {
   color: var(--brand-videoPlayer-controls-fgColor);
 }
@@ -247,30 +224,6 @@
   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                                           */
 /* ---------------------------------------------------------- */
@@ -301,8 +254,7 @@
 
 .VideoPlayer__rangeInput:focus-visible {
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
-  outline-offset: var(--base-size-8);
-  border-radius: var(--brand-borderRadius-small);
+  outline-offset: var(--base-size-4);
   opacity: 1;
 }
 
@@ -351,28 +303,6 @@
   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,21 +87,6 @@
   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,17 +110,6 @@ 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,13 +41,6 @@
   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,13 +107,6 @@
   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,13 +114,6 @@
   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.0.0-20250718130819",
+  "version": "0.0.0-20250718135503",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",