Remove theme.colors.palette usage (#989)

* Port all components to slots instead of palette
* Deprecate all internal palette usage
* Snapshot updates (palette to slot)
* Polishing up snapshots and changes
* Menu fix-ups
* Change `inverseText` to `inverseOn` to be internally consistent with `icon` use cases
* Fix-up AvatarIcon background color
* Tweak docs a bit

Author: Luke Bowerman

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- `theme.colors.palette` no longer used internally except in very limited (and soon-to-be-deprecated) cases.
 - `Button*` font sizes updated to match design specifications
 - `theme.colors` shape has been significantly refactored (documentation updates to follow)
 - `Banner` is now `MessageBar`

packages/components/src/Accordion/AccordionDisclosure.tsx

@@ -80,7 +80,7 @@ export const AccordionDisclosure = styled(AccordionDisclosureLayout)`
   padding: ${({ theme: { space } }) => `${space.xsmall} ${space.none}`};
 
   &:focus {
-    border-color: ${({ theme }) => theme.colors.palette.purple300};
+    border-color: ${({ theme }) => theme.colors.keyFocus};
   }
 `
 

packages/components/src/ActionList/ActionListHeader/ActionListHeader.tsx

@@ -51,8 +51,8 @@ const ActionListHeaderInternal: FC<CompatibleHTMLProps<HTMLDivElement>> = ({
 }
 
 export const ActionListHeader = styled(ActionListHeaderInternal)`
-  border-bottom: solid 1px ${(props) => props.theme.colors.palette.charcoal200};
-  color: ${(props) => props.theme.colors.palette.charcoal900};
+  border-bottom: solid 1px ${({ theme }) => theme.colors.ui2};
+  color: ${(props) => props.theme.colors.text0};
   display: flex;
   font-size: ${(props) => props.theme.fontSizes.xsmall};
   font-weight: ${(props) => props.theme.fontWeights.semiBold};

packages/components/src/ActionList/ActionListItem.tsx

@@ -128,6 +128,6 @@ const ActionListItemInternal: FC<ActionListItemProps> = ({
 }
 
 export const ActionListItem = styled(ActionListItemInternal)`
-  border-bottom: solid 1px ${(props) => props.theme.colors.palette.charcoal200};
+  border-bottom: solid 1px ${(props) => props.theme.colors.ui2};
   display: flex;
 `

packages/components/src/ActionList/ActionListItemColumn.tsx

@@ -62,9 +62,9 @@ const ActionListItemColumnLayout: FC<ActionListItemColumnProps> = ({
 export const ActionListItemColumn = styled(ActionListItemColumnLayout)<
   ActionListItemColumnProps
 >`
-  color: ${(props) => props.theme.colors.palette.charcoal700};
-  display: ${(props) => (props.indicator ? 'flex' : undefined)};
-  font-size: ${(props) => props.theme.fontSizes.xsmall};
+  color: ${({ theme }) => theme.colors.text2};
+  display: ${({ indicator }) => indicator && 'flex'};
+  font-size: ${({ theme }) => theme.fontSizes.xsmall};
   word-break: break-all;
   overflow: hidden;
 

packages/components/src/ActionList/ActionListRow.tsx

@@ -82,8 +82,7 @@ ActionListRowLayout.displayName = 'ActionListRowLayout'
 export const ActionListRow = styled(ActionListRowLayout)`
   display: flex;
 
-  background: ${({ disabled, theme }) =>
-    disabled && theme.colors.palette.charcoal100};
+  background: ${({ disabled, theme }) => disabled && theme.colors.ui1};
 
   &:focus,
   &:hover {

packages/components/src/ActionList/utils/actionListFormatting.ts

@@ -46,7 +46,7 @@ export const primaryKeyColumnCSS = (columnIndices: number[]) =>
       (columnIndex) =>
         css`
           ${ActionListItemColumn}:nth-child(${columnIndex + 1}) {
-            color: ${(props) => props.theme.colors.palette.charcoal900};
+            color: ${({ theme }) => theme.colors.text0};
             font-size: ${(props) => props.theme.fontSizes.small};
           }
         `

packages/components/src/Avatar/Avatar.tsx

@@ -49,7 +49,7 @@ export type AvatarSizes =
 export interface AvatarProps extends SpaceProps {
   className?: string
   /**
-   *  @default `palette.purple400`
+   *  @default `key`
    **/
   color?: string
   /**

packages/components/src/Avatar/AvatarCombo.tsx

@@ -35,11 +35,11 @@ export interface AvatarComboProps
   extends Omit<AvatarIconProps & AvatarUserProps, 'size'> {
   secondaryIcon: IconNames
   /**
-   *  @default `palette.purple300`
+   *  @default `keyFocus`
    **/
   secondaryColor?: string
   /**
-   *  @default `palette.purple300`
+   *  @default `keyFocus`
    **/
   secondaryBg?: string
 }

packages/components/src/Avatar/AvatarIcon.tsx

@@ -38,12 +38,12 @@ export interface AvatarIconProps extends AvatarProps {
   icon?: IconNames
 
   /**
-   * @default 'palette.purple300'
+   * @default 'keyFocus'
    */
   color?: string
 
   /**
-   * @default 'palette.white'
+   * @default 'keyText'
    */
   bg?: string
 }
@@ -95,7 +95,7 @@ export const AvatarIcon = styled(AvatarLayout)`
 `
 
 AvatarIcon.defaultProps = {
-  bg: 'palette.white',
-  color: 'palette.purple300',
+  bg: 'background',
+  color: 'keyFocus',
   size: 'small',
 }