[Design adjustments] Replace RibbonIcon with ClipboardIcon (#1751)

* refactor: replace the RibbonIcon with the ClipboardIcon

* chore: adjust changeset

* refactor: introduce new icon color in design system

.changeset/wild-falcons-hug.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/ui-kit': patch
+---
+
+Replace the "Ribbon" icon with the "Clipboard" icon. The icon is being displayed next to section headers.

packages/ui-kit/src/components/markdown.tsx

@@ -3,7 +3,7 @@ import reactIs from 'react-is';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import Tooltip from '@commercetools-uikit/tooltip';
-import { RibbonSvgIcon } from '../icons';
+import { ClipboardIcon } from '@commercetools-uikit/icons';
 import { colors, dimensions, typography, tokens } from '../design-system';
 import { CodeBlockMarkdownWrapper as CodeBlock } from './multi-code-block';
 import copyToClipboard from '../utils/copy-to-clipboard';
@@ -334,6 +334,10 @@ const CopyArea = styled.div`
   cursor: pointer;
 `;
 
+const IconColorWrapper = styled.div`
+  fill: ${colors.light.iconSecondary};
+`;
+
 const TooltipBodyComponent = styled.div`
   background-color: ${colors.light.surfaceCodeCopy};
   color: ${colors.light.textInverted};
@@ -386,7 +390,9 @@ const withCopyToClipboard =
           onClose={handleTooltipClose}
         >
           <CopyArea onClick={handleCopyToClipboardClick}>
-            <RibbonSvgIcon />
+            <IconColorWrapper>
+              <ClipboardIcon />
+            </IconColorWrapper>
           </CopyArea>
         </Tooltip>
       </Component>

packages/ui-kit/src/design-system.ts

@@ -58,6 +58,8 @@ export type ThemeColorTokens = {
   linkNavigation: string;
   // Headlines
   headlinePrimary: string;
+  // Icons
+  iconSecondary: string;
 };
 
 export type ThemeCodeBlocksColorTokens = {
@@ -126,6 +128,8 @@ export const colors: ThemeColors = {
     linkNavigation: designTokens.colorInfo,
     // Headlines
     headlinePrimary: '#003037',
+    // Icons
+    iconSecondary: '#949494',
     // Code blocks
     // We support 2 theme versions: a primary one and a secondary one.
     // This is not to be confused with a (potential) website theme, hence