Revert "Merge branch 'main' of github.com:primer/react into api/actio…

…nlist-trailing-visual"

This reverts commit ddb6a6f, reversing
changes made to 1f18ad6.

.changeset/violet-cougars-yawn.md

@@ -0,0 +1,7 @@
+---
+"@primer/components": major
+---
+
+Remove deprecated color variables by upgrading to @primer/primitives [v5](https://github.com/primer/primitives/pull/251)
+
+**Note:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated or removed color variables.

CHANGELOG.md

@@ -1,17 +1,5 @@
 # @primer/components
 
-## 31.0.0
-
-### Major Changes
-
-- [#1514](https://github.com/primer/react/pull/1514) [`dc789025`](https://github.com/primer/react/commit/dc789025d4976e2f0863e1f377c4a834aab88e3a) Thanks [@colebemis](https://github.com/colebemis)! - Remove deprecated color variables by upgrading to @primer/primitives [v5](https://github.com/primer/primitives/pull/251)
-
-  **Note:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated or removed color variables.
-
-### Patch Changes
-
-- [#1512](https://github.com/primer/react/pull/1512) [`1e5ac406`](https://github.com/primer/react/commit/1e5ac406f8558a20248157a9bfe13ee4709890c8) Thanks [@pksjce](https://github.com/pksjce)! - Change disabled color from muted to custom primer disabled color
-
 ## 30.3.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.0",
+  "version": "30.3.0",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

src/ActionList/Item.tsx

@@ -153,9 +153,9 @@ export interface ItemProps extends SxProp {
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
   if (disabled) {
     return {
-      color: get('colors.primer.fg.disabled'),
-      iconColor: get('colors.primer.fg.disabled'),
-      annotationColor: get('colors.primer.fg.disabled'),
+      color: get('colors.fg.muted'),
+      iconColor: get('colors.fg.muted'),
+      annotationColor: get('colors.fg.muted'),
       hoverCursor: 'default'
     }
   }

src/Button/Button.tsx

@@ -27,7 +27,7 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   }
 
   &:disabled {
-    color: ${get('colors.primer.fg.disabled')};
+    color: ${get('colors.fg.muted')};
     background-color: ${get('colors.btn.bg')};
     border-color: ${get('colors.btn.border')};
   }

src/Button/ButtonTableList.tsx

@@ -33,7 +33,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   &:disabled {
     &,
     &:hover {
-      color: ${get('colors.primer.fg.disabled')};
+      color: rgba(${get('colors.fg.muted')}, 0.5);
       cursor: default;
     }
   }

src/Pagination/Pagination.tsx

@@ -55,7 +55,7 @@ const Page = styled.a`
 
   &[aria-disabled],
   &[aria-disabled]:hover {
-    color: ${get('colors.primer.fg.disabled')}; // check
+    color: ${get('colors.fg.muted')}; // check
     cursor: default;
     border-color: transparent;
   }

src/_TextInputWrapper.tsx

@@ -79,7 +79,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   ${props =>
     props.disabled &&
     css`
-      color: ${get('colors.primer.fg.disabled')};
+      color: ${get('colors.fg.muted')};
       background-color: ${get('colors.input.disabledBg')};
       border-color: ${get('colors.border.default')};
     `}

src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -61,7 +61,7 @@ exports[`Pagination renders consistently 1`] = `
 
 .c2[aria-disabled],
 .c2[aria-disabled]:hover {
-  color: #8c959f;
+  color: #57606a;
   cursor: default;
   border-color: transparent;
 }

src/__tests__/__snapshots__/ActionMenu.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -163,7 +163,7 @@ Object {
 }
 
 .c1:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -243,7 +243,7 @@ Object {
       <button
         aria-haspopup="true"
         aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
+        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jPURef"
         id="react-aria-1"
         tabindex="0"
       >

src/__tests__/__snapshots__/Button.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -134,7 +134,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 }
 
 .c0:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -819,7 +819,7 @@ exports[`ButtonTableList renders consistently 1`] = `
 
 .c0:disabled,
 .c0:disabled:hover {
-  color: #8c959f;
+  color: rgba(#57606a,0.5);
   cursor: default;
 }
 

src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

src/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -84,7 +84,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

src/__tests__/__snapshots__/SelectMenu.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 }
 
 .c1:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

src/__tests__/__snapshots__/SelectPanel.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`SelectPanel renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

src/stories/Button.stories.tsx

@@ -77,10 +77,6 @@ export const buttonGroup = (args: StrictButtonStyleProps) => (
 export const buttonTableList = (args: ButtonStyleProps) => (
   <ButtonTableList {...args}>Button Table List</ButtonTableList>
 )
-export const disabledButton = (args: ButtonStyleProps) => {
-  const props = {disabled: true, ...args}
-  return <Button {...props}>Disabled</Button>
-}
 
 defaultButton.args = {variant: 'medium'}
 dangerButton.args = {variant: 'medium'}