Merge branch 'main' into VanAnderson/implement-functional-color-vars-4

.changeset/fifty-peaches-ring.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Update SelectMenu and child components to use functional color variables

src/SelectMenu/SelectMenu.tsx

@@ -97,7 +97,6 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuInternalProps>(
 
 SelectMenu.displayName = 'SelectMenu'
 
-
 export type SelectMenuProps = ComponentProps<typeof SelectMenu>
 export type { SelectMenuDividerProps } from './SelectMenuDivider'
 export type { SelectMenuFilterProps } from './SelectMenuFilter'

src/SelectMenu/SelectMenuDivider.tsx

@@ -8,9 +8,9 @@ const dividerStyles = css`
   margin: 0;
   font-size: ${get('fontSizes.0')};
   font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.text.grayLight')};
-  background-color: ${get('colors.bg.gray')};
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.grayLight')};
+  color: ${get('colors.text.tertiary')};
+  background-color: ${get('colors.bg.tertiary')};
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
 `
 
 const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`

src/SelectMenu/SelectMenuFilter.tsx

@@ -9,8 +9,8 @@ import {MenuContext} from './SelectMenuContext'
 const StyledForm = styled.form<SystemCommonProps & SxProp>`
   padding: ${get('space.3')};
   margin: 0;
-  border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
-  background-color: ${get('colors.white')};
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
+  background-color: ${get('colors.bg.overlay')};
   ${COMMON};
 
   @media (min-width: ${get('breakpoints.0')}) {
@@ -39,7 +39,7 @@ const SelectMenuFilter = forwardRef<HTMLInputElement, SelectMenuFilterInternalPr
 
     return (
       <StyledForm theme={theme} sx={sx}>
-        <TextInput theme={theme} ref={ref} width="100%" block value={value} {...rest} />
+        <TextInput theme={theme} ref={ref} width="100%" block value={value} contrast {...rest} />
       </StyledForm>
     )
   }

src/SelectMenu/SelectMenuFooter.tsx

@@ -7,9 +7,9 @@ const footerStyles = css`
   margin-top: -1px;
   padding: ${get('space.2')} ${get('space.3')};
   font-size: ${get('fontSizes.0')};
-  color: ${get('colors.text.grayLight')};
+  color: ${get('colors.text.tertiary')};
   text-align: center;
-  border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
+  border-top: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
 
   @media (min-width: ${get('breakpoints.0')}) {
     padding: ${get('space.1')} ${get('space.2')};

src/SelectMenu/SelectMenuHeader.tsx

@@ -8,6 +8,7 @@ import {ComponentProps} from '../utils/types'
 // SelectMenu.Modal
 
 const SelectMenuTitle = styled.h3`
+  color: ${get('colors.text.primary')};
   flex: auto;
   font-size: ${get('fontSizes.1')};
   font-weight: ${get('fontWeights.bold')};
@@ -22,7 +23,7 @@ const StyledHeader = styled.header<SystemTypographyProps & SystemCommonProps & S
   display: flex;
   flex: none; // fixes header from getting squeezed in Safari iOS
   padding: ${get('space.3')};
-  border-bottom: ${get('borderWidths')} solid ${get('colors.border.gray')};
+  border-bottom: ${get('borderWidths')} solid ${get('colors.selectMenu.borderSecondary')};
   ${COMMON}
   ${TYPOGRAPHY}
 

src/SelectMenu/SelectMenuItem.tsx

@@ -14,10 +14,10 @@ export const listItemStyles = css`
   overflow: hidden;
   text-align: left;
   cursor: pointer;
-  background-color: ${get('colors.white')};
+  background-color: ${get('colors.bg.overlay')};
   border: 0;
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.grayLight')};
-  color: ${get('colors.text.gray')};
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
+  color: ${get('colors.text.secondary')};
   text-decoration: none;
   font-size: ${get('fontSizes.0')};
   font-family: inherit; // needed if user uses a "button" tag
@@ -54,7 +54,7 @@ export const listItemStyles = css`
   // selected items
   &[aria-checked='true'] {
     font-weight: 500;
-    color: ${get('colors.gray.9')};
+    color: ${get('colors.text.primary')};
 
     .SelectMenu-selected-icon {
       visibility: visible;
@@ -69,7 +69,7 @@ export const listItemStyles = css`
     &:hover,
     &:active,
     &:focus {
-      background-color: ${get('colors.bg.gray')};
+      background-color: ${get('colors.state.hover.secondaryBg')};
     }
   }
 
@@ -81,13 +81,13 @@ export const listItemStyles = css`
     // Android
     &:focus,
     &:active {
-      background-color: ${get('colors.bg.grayLight')};
+      background-color: ${get('colors.bg.secondary')};
     }
 
     // iOS Safari
     // :active would work if ontouchstart is added to the button
     // Instead this tweaks the "native" highlight color
-    -webkit-tap-highlight-color: rgba(${get('colors.gray.3')}, 0.5);
+    -webkit-tap-highlight-color: ${get('colors.selectMenu.tapHighlight')};
   }
 `
 

src/SelectMenu/SelectMenuList.tsx

@@ -10,22 +10,22 @@ const listStyles = css`
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: ${get('colors.white')};
+  background-color: ${get('colors.bg.overlay')};
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 
   @media (hover: hover) {
     .SelectMenuTab:focus {
-      background-color: ${get('colors.blue.1')};
+      background-color: ${get('colors.selectMenu.tapFocusBg')};
     }
 
     .SelectMenuTab:not([aria-checked='true']):hover {
-      color: ${get('colors.gray.9')};
-      background-color: ${get('colors.gray.2')};
+      color: ${get('colors.text.primary')};
+      background-color: ${get('colors.bg.tertiary')};
     }
 
     .SelectMenuTab:not([aria-checked='true']):active {
-      color: ${get('colors.gray.9')};
-      background-color: ${get('colors.gray.1')};
+      color: ${get('colors.text.primary')};
+      background-color: ${get('colors.bg.tertiary')};
     }
   }
 `

src/SelectMenu/SelectMenuLoadingAnimation.tsx

@@ -20,7 +20,7 @@ const pulseKeyframes = keyframes`
 const Animation = styled.div<SystemCommonProps>`
   padding: ${get('space.6')} ${get('space.4')};
   text-align: center;
-  background-color: ${get('colors.white')};
+  background-color: ${get('colors.bg.overlay')};
   animation-name: ${pulseKeyframes};
   animation-duration: 2s;
   animation-timing-function: linear;

src/SelectMenu/SelectMenuModal.tsx

@@ -32,19 +32,19 @@ const modalStyles = css<StyledModalProps>`
   overflow: hidden; // Enables border radius on scrollable child elements
   pointer-events: auto;
   flex-direction: column;
-  background-color: ${get('colors.white')};
+  background-color: ${get('colors.bg.overlay')};
   border-radius: ${get('radii.2')};
-  box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15);
+  box-shadow: ${get('shadows.small')};
   animation: ${animateModal} 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
 
   @media (min-width: ${get('breakpoints.0')}) {
     height: auto;
     max-height: 350px;
     margin: ${get('space.1')} 0 ${get('space.3')} 0;
     font-size: ${get('fontSizes.0')};
-    border: ${get('borderWidths.1')} solid ${get('colors.border.grayDark')};
+    border: ${get('borderWidths.1')} solid ${get('colors.border.overlay')};
     border-radius: ${get('radii.2')};
-    box-shadow: 0 1px 5px ${get('colors.blackfade15')};
+    box-shadow: ${get('shadows.shadow.small')};
   }
 `
 
@@ -68,7 +68,7 @@ const modalWrapperStyles = css<StyledModalWrapperProps>`
     left: 0;
     pointer-events: none;
     content: '';
-    background-color: ${get('colors.blackfade50')};
+    background-color: ${get('colors.selectMenu.backdropBg')};
 
     @media (min-width: ${get('breakpoints.0')}) {
       display: none;

src/SelectMenu/SelectMenuTab.tsx

@@ -11,11 +11,11 @@ const tabStyles = css`
   padding: ${get('space.2')} ${get('space.3')};
   font-size: ${get('fontSizes.0')};
   font-weight: 500;
-  color: ${get('colors.gray.5')};
+  color: ${get('colors.text.tertiary')};
   text-align: center;
-  background-color: ${get('colors.gray.1')};
+  background-color: transparent;
   border: 0;
-  box-shadow: inset 0 -1px 0 ${get('colors.border.gray')};
+  box-shadow: inset 0 -1px 0 ${get('colors.selectMenu.borderSecondary')};
 
   @media (min-width: ${get('breakpoints.0')}) {
     flex: none;
@@ -24,23 +24,22 @@ const tabStyles = css`
     border-bottom-width: 0;
     border-top-left-radius: ${get('radii.2')};
     border-top-right-radius: ${get('radii.2')};
-    background-color: ${get('colors.white')};
   }
 
   &[aria-selected='true'] {
     z-index: 1; // Keeps box-shadow visible when hovering
-    color: ${get('colors.gray.9')};
-    background-color: ${get('colors.white')};
-    box-shadow: 0 0 0 1px ${get('colors.border.gray')};
+    color: ${get('colors.text-primary')};
+    background-color: ${get('colors.bg.overlay')};
+    box-shadow: 0 0 0 1px ${get('colors.selectMenu.borderSecondary')};
 
     @media (min-width: ${get('breakpoints.0')}) {
-      border-color: ${get('colors.border.gray')};
+      border-color: ${get('colors.selectMenu.borderSecondary')};
       box-shadow: none;
     }
   }
 
   &:focus {
-    background-color: #dbedff;
+    background-color: ${get('colors.state.hover.secondaryBg')};
   }
 `
 

src/SelectMenu/SelectMenuTabPanel.tsx

@@ -7,7 +7,7 @@ import {MenuContext} from './SelectMenuContext'
 import SelectMenuList from './SelectMenuList'
 
 const TabPanelBase = styled.div<SystemCommonProps & SxProp>`
-  border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
+  border-top: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
   ${COMMON}
   ${sx};
 `

src/__tests__/__snapshots__/SelectMenu.tsx.snap

@@ -84,7 +84,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   font-size: 12px;
   color: #6a737d;
   text-align: center;
-  border-top: 1px solid #e1e4e8;
+  border-top: 1px solid #eaecef;
 }
 
 .c5 {
@@ -186,7 +186,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   flex-direction: column;
   background-color: #ffffff;
   border-radius: 6px;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 1px 0 rgba(149,157,165,0.1);
   -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
   animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
   width: 300px;
@@ -257,7 +257,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 
 @media (hover:none) {
   .c5 {
-    -webkit-tap-highlight-color: rgba(#d1d5da,0.5);
+    -webkit-tap-highlight-color: rgba(209,213,218,0.5);
   }
 
   .c5:focus,
@@ -273,7 +273,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 
   .c4 .SelectMenuTab:not([aria-checked='true']):hover {
     color: #24292e;
-    background-color: #e1e4e8;
+    background-color: #f6f8fa;
   }
 
   .c4 .SelectMenuTab:not([aria-checked='true']):active {
@@ -288,9 +288,9 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
     max-height: 350px;
     margin: 4px 0 16px 0;
     font-size: 12px;
-    border: 1px solid #d1d5da;
+    border: 1px solid #e1e4e8;
     border-radius: 6px;
-    box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+    box-shadow: 0 1px 0 rgba(27,31,35,0.04);
   }
 }
 

src/stories/Button.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from 'react'
 import {Meta} from '@storybook/react'
+import {ThemeProvider} from 'styled-components'
 
 import {
   BaseStyles,
@@ -11,7 +12,8 @@ import {
   ButtonInvisible,
   ButtonOutline,
   ButtonPrimary,
-  ButtonTableList
+  ButtonTableList,
+  theme
 } from '..'
 import {ButtonStyleProps} from 'styled-system'
 import {ButtonBaseProps} from '../Button/ButtonBase'
@@ -23,9 +25,11 @@ export default {
   decorators: [
     Story => {
       return (
-        <BaseStyles>
-          <Story />
-        </BaseStyles>
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
       )
     }
   ],

src/stories/Portal.stories.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from 'react'
 import {Meta} from '@storybook/react'
+import {ThemeProvider} from 'styled-components'
 
-import {BaseStyles, Box} from '..'
+import {BaseStyles, Box, theme} from '..'
 import Portal, {registerPortalRoot} from '../Portal'
 
 export default {
@@ -14,9 +15,11 @@ export default {
       // story works in isolation.
       registerPortalRoot(undefined)
       return (
-        <BaseStyles>
-          <Story />
-        </BaseStyles>
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
       )
     }
   ]

src/stories/useAnchoredPosition.stories.tsx

@@ -2,9 +2,9 @@
 import React from 'react'
 import {Meta} from '@storybook/react'
 
-import {BaseStyles, Box, ButtonPrimary, Position} from '..'
+import {BaseStyles, Box, ButtonPrimary, Position, theme} from '..'
 import {useAnchoredPosition} from '../hooks/useAnchoredPosition'
-import styled from 'styled-components'
+import styled, {ThemeProvider} from 'styled-components'
 import {get} from '../constants'
 import {AnchorSide} from '../behaviors/anchoredPosition'
 import Portal, {registerPortalRoot} from '../Portal'
@@ -15,7 +15,11 @@ export default {
     // Note: For some reason, if you use <BaseStyles><Story /></BaseStyles>,
     // the component gets unmounted from the root every time a control changes!
     Story => {
-      return <BaseStyles>{Story()}</BaseStyles>
+      return (
+        <ThemeProvider theme={theme}>
+          <BaseStyles>{Story()}</BaseStyles>
+        </ThemeProvider>
+      )
     }
   ],
   argTypes: {
@@ -229,7 +233,7 @@ export const WithPortal = () => {
                 left={position?.left ?? 0}
                 width={250}
                 height={400}
-                sx={{visibility: position ? "visible" : "hidden"}}
+                sx={{visibility: position ? 'visible' : 'hidden'}}
               >
                 An un-constrained overlay!
               </Float>
@@ -239,7 +243,9 @@ export const WithPortal = () => {
       </Nav>
       <Box sx={{flexGrow: 1}} p={3}>
         <h1>The body!</h1>
-        <p><em>Note: The controls below have no effect in this story.</em></p>
+        <p>
+          <em>Note: The controls below have no effect in this story.</em>
+        </p>
       </Box>
     </Main>
   )