feat: #2612 style documentation page to look like elements (#2672)

packages/developer-portal/src/components/ui/terms-and-conditions-modal/__styles__/termsAndConditionsModal.ts

@@ -34,17 +34,5 @@ export const termsParent = css`
         content: '(' counter(item, lower-alpha) ')';
       }
     }
-    /* [class*='terms-parent'] {
-      > .terms-child {
-        &:before {
-          content: counters(item, '.') ' ';
-        }
-        &.child-with-alpha-bullet {
-          &:before {
-            content: '(' counter(item, lower-alpha) ')';
-          }
-        }
-      }
-    } */
   }
 `

packages/elements-next/doczrc.js

@@ -1,53 +1,89 @@
 // TODO - a start on theming - needs some work - ideally, should look like Elements itself
+const colors = {
+  white: '#fff',
+  black: '#3b454e',
+  grey: '#74818d',
+  greyLight: '#dbdbdb',
+  greyLightest: '#f5f7f9',
+  green: '#a0c862',
+  greenLighter: '#acf2bd',
+  greenLightest: '#e6ffed',
+  red: '#d3033d',
+  redLighter: '#fdb8c0',
+  redLightest: '#ffeef0',
+  blue: '#0061a8',
+  blueDark: '#262f69',
+  blueDarkest: '#1e2554',
+  blueLight: '#23a4de',
+  blueLightest: '#7bc9eb',
+  orange: '#ec631b',
+  lime: '#cddb00',
+  teal: '#006580',
+  plumb: '#7a2c81',
+  purple: '#a4185c',
+  gold: '#ffb71b',
+  background: '#f5f7f9',
+  text: '#3b454e',
+  border: '#95aac9',
+}
+
 export default {
   dest: '/public/dist',
   typescript: true,
-  showDarkModeSwitch: false,
   themeConfig: {
-    colors: {
-      text: '#3b454e',
-      background: '#fff',
-      primary: '#0061a8',
+    showDarkModeSwitch: true,
+    fontWeights: {
+      body: 400,
+      heading: 700,
+      bold: 700,
     },
-    prism: {
-      plain: {
-        fontFamily: '"Source Code Pro", monospace',
-        color: '#393A34',
-        backgroundColor: '#f5f7f9',
-      },
+    lineHeights: {
+      body: 1.5,
+      heading: 1.125,
     },
+    fontSizes: ['0.5rem', '1rem', '1rem', '1rem', '1.5rem', '1.5rem', '2rem'],
     fonts: {
       body: '"Roboto", sans-serif',
       heading: '"Roboto", sans-serif',
       monospace: '"Source Code Pro", monospace',
     },
-    radii: {
-      square: 0,
-      radius: 0,
-      rounded: 0,
-    },
-    styles: {
-      h1: {
-        fontSize: '2rem',
-        fontFamily: 'heading',
-        fontWeight: 'heading',
-        color: 'text',
-        mt: 0,
-        mb: 4,
+    colors: {
+      primary: colors.blue,
+      text: colors.text,
+      muted: colors.gray,
+      link: colors.blue,
+      background: colors.background,
+      border: colors.border,
+      sidebar: {
+        bg: colors.white,
+        navGroup: colors.black,
+        navLink: colors.black,
+        navLinkActive: colors.blue,
+        tocLink: colors.black,
+        tocLinkActive: colors.black,
+      },
+      header: {
+        bg: colors.white,
+        text: colors.blue,
+        button: {
+          bg: colors.blue,
+          color: colors.white,
+        },
       },
-      code: {
-        fontFamily: '"Source Code Pro", monospace',
+      playground: {
+        bg: colors.white,
+        border: colors.border,
       },
-      inlineCode: {
-        fontFamily: '"Source Code Pro", monospace',
+      blockquote: {
+        color: colors.white,
       },
-      pre: {
-        my: 4,
-        p: 3,
-        variant: 'prism',
-        textAlign: 'left',
-        fontFamily: '"Source Code Pro", monospace',
-        borderRadius: 'radius',
+      props: {
+        bg: colors.white,
+        text: colors.black,
+        highlight: colors.blue,
+        defaultValue: colors.gray,
+        descriptionText: colors.grayDark,
+        descriptionBg: colors.background,
       },
     },
   },

packages/elements-next/src/components/headings/headings.mdx

@@ -3,12 +3,15 @@ name: Heading
 route: /headings
 ---
 
-import { Playground, Props } from 'docz'
+import { Props } from 'docz'
 import { Heading } from './headings'
 import DocsWrapper from '@/docz/docs-wrapper'
+import Playground from '@/components/playground'
 
 # Heading
-## Document
+Headings are used as the titles of each major section of a page in the interface
+
+## Properties
 <Props of={Heading.Main} />
 
 ## Usage
@@ -20,4 +23,3 @@ import DocsWrapper from '@/docz/docs-wrapper'
     <Heading.SubSecondary>SubHeading Secondary</Heading.SubSecondary>
   </DocsWrapper>
 </Playground>
-

packages/elements-next/src/components/playground/__styles__/playground-styles.ts

@@ -0,0 +1,10 @@
+import { css } from 'linaria'
+
+export const playground = css`
+  [class*='NormalWrapper'] {
+    padding: 15px;
+  }
+  .copy-clipboard-wrapper {
+    overflow-x: auto;
+  }
+`

packages/elements-next/src/components/playground/index.ts

@@ -0,0 +1,2 @@
+import Playground from './playground'
+export default Playground

packages/elements-next/src/components/playground/playground.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { Playground as BasePlayGround, PlaygroundProps } from 'docz'
+import { playground } from './__styles__/playground-styles'
+
+const PlayGround: React.FC<PlaygroundProps> = ({ children, ...rest }) => {
+  return (
+    <div className={playground}>
+      <BasePlayGround {...rest}>{children}</BasePlayGround>
+    </div>
+  )
+}
+
+export default PlayGround

packages/elements-next/src/docz/styles/global.ts

@@ -152,6 +152,7 @@ export const globalStyles = css`
       }
 
       [data-testid='playground'] {
+        font-size: 1rem !important;
       }
 
       [data-testid='live-editor'] * {