Luuk/orbiit surt font

doczrc.js

@@ -1,17 +1,17 @@
 export default {
-  title: 'Hoppin Design System',
-  description: 'Getting consistent design at Hoppin',
+  title: 'Orbiit Design System',
+  description: 'Getting consistent design at Orbiit',
   port: 2000,
   src: './src',
   files: '**/*.{md,markdown,mdx}',
   themeConfig: {
     colors: {
-      primary: '#44E2D6',
+      primary: '#008CE6',
     },
     showPlaygroundEditor: true,
     styles: {
       root: {
-        fontFamily: '"Nunito Sans", sans-serif',
+        fontFamily: 'sans-serif',
         fontSize: 2,
       },
       Container: {

package.json

@@ -2,7 +2,7 @@
   "name": "orbiit-design-system",
   "version": "1.3.10",
   "private": true,
-  "description": "Design system and shared components for Hoppin.",
+  "description": "Design system and shared components for Orbiit.",
   "main": "lib/index.js",
   "module": "es/index.js",
   "engines": {
@@ -42,7 +42,13 @@
     "slate-react": "^0.21.20",
     "styled-components": "^5.2.0",
     "styled-system": "^5.0.6",
-    "unified": "^8.3.2"
+    "unified": "^8.3.2",
+    "node-forge": "^0.10.0",
+    "node-fetch": "^2.6.1",
+    "yargs-parser": "^13.1.2",
+    "http-proxy": "^1.18.1",
+    "dot-prop": "^4.2.1",
+    "serialize-javascript": "^3.1.0"
   },
   "devDependencies": {
     "docz": "^2.2.0",

src/components/Box/Readme.mdx

@@ -9,7 +9,7 @@ import { Props, Playground } from 'docz';
 
 # Box
 
-The Box is the basic building block of most elements in the Hoppin Design System.
+The Box is the basic building block of most elements in the Orbiit Design System.
 
 ## Props
 

src/components/DesignProvider/DesignProvider.js

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import { ThemeProvider, ThemeContext } from 'styled-components';
-import tokens from '../../tokens';
 import propTypes from 'prop-types';
 import { createGlobalStyle } from 'styled-components';
 import { merge } from 'lodash';
 
+import tokens from '../../tokens';
+
 const GlobalStyle = createGlobalStyle`
   html,
   body,
@@ -17,10 +18,12 @@ const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     background: ${({ theme }) => theme.colors.whiteout.lightest};
+
+    /** Set default text color and family, so inheritance works */
     font-size: 16px;
-    /* set default text color and family, so inheritance works */
     font-family: ${tokens.fonts.primary};
     color: ${({ theme }) => theme.colors.neutral.darker};
+
     text-align: left;
    }
 
@@ -31,7 +34,7 @@ const GlobalStyle = createGlobalStyle`
 
 export const Fonts = () => (
   <link
-    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,600;1,300;1,600&display=swap"
+    href="https://storage.googleapis.com/orbiit-assets/fonts/surt/surt-cdn.css"
     rel="stylesheet"
   />
 );

src/components/DesignProvider/Readme.mdx

@@ -27,6 +27,7 @@ function MyApp({ Component, pageProps }) {
   ${ /* .... other components  ....*/ }
   );
 }
+```
 
 ## Props
 
@@ -37,6 +38,7 @@ function MyApp({ Component, pageProps }) {
     <Button variant="full" context="primary">Primary Button</Button>
   </DesignProvider>
 
+
 <br/>
 <DesignProvider context="shadower">
   <Button variant="full" context="primary">
@@ -48,4 +50,4 @@ function MyApp({ Component, pageProps }) {
     <Button variant="full" context="primary">Primary Button</Button>
   </DesignProvider>
 </Playground>
-```
+

src/components/Heading/Readme.mdx

@@ -7,6 +7,7 @@ menu: Components
 import { Props, Playground } from 'docz';
 import { Heading } from '../Heading';
 import { Paragraph } from '../Paragraph';
+import { Box } from '../Box';
 
 # Heading
 
@@ -26,7 +27,9 @@ Make sure you only have one h1 per page.
 If you need more options, consider using [Text](components/Text) or [Paragraph](components/Paragraph).
 
 <Playground>
-  <Heading as="h1">The big site title, just one per page, please</Heading>
+  <Box bg="primary.darker" p="medium">
+    <Heading as="h1">The big site title, just one per page, please</Heading>
+  </Box>
   <Heading>Default is the H2</Heading>
   <Paragraph>
     Lorem ipsum dolor amet photo booth scenester cornhole trust fund vaporware

src/components/Lede/Readme.mdx

@@ -19,7 +19,7 @@ The Lede is used for the main introducory paragraph after big page Headings. It
 Props table might not render due to a [bug in docz](https://github.com/pedronauck/docz/issues/777)
 
 <Playground>
-  <Heading as='h1'>Welcome to Hoppin</Heading>
+  <Heading as='h1'>Welcome to Orbiit</Heading>
   <Lede>
     Scenester cornhole trust fund vaporware williamsburg. Selfies tbh tumeric
     XOXO man braid cred. Skateboard heirloom locavore, kogi everyday carry af

src/components/Link/Readme.mdx

@@ -23,7 +23,7 @@ To trigger navigation within the app, use a `RoutedLink`.
 `Styled` links have an underline, where as unstyled links will inherit the styles from it's parent, but also accepts basic styled-system props.
 
 > `RoutedLink` and `RoutedLinkUnstyled` need `react-router-dom` as a peer dependency. So it will pick up withever version of react-router-dom you're using in the app through the react context API.
-> This is to avoid version clashes. Hoppin Design System does not bundle `react-router-dom`, it's up to you to provide it in your app as a dependency.
+> This is to avoid version clashes. Orbiit Design System does not bundle `react-router-dom`, it's up to you to provide it in your app as a dependency.
 
 All demos here use the un-routed versions because react-router-dom `<LinkUnstyled/>` can't be rendendered outside a `<Router>` component.
 

src/components/Logo/Readme.mdx

@@ -13,7 +13,7 @@ import { Props, Playground } from 'docz';
 
 ## Logo
 
-The Logo is the basic building block of most elements in the Hoppin Design System.
+The Logo is the basic building block of most elements in the Orbiit Design System.
 
 ### Props
 

src/components/Markdown/Readme.mdx

@@ -55,7 +55,7 @@ You can also pass children as a string:
 
 <Playground>
   {() => {
-    const mdstring = `This is a _great_ way to render content consistently with Hoppin Design.\n\n **Especially** if fetched from a DB.`;
+    const mdstring = `This is a _great_ way to render content consistently with Orbiit Design.\n\n **Especially** if fetched from a DB.`;
     return (
       <div>
         <Markdown>{mdstring}</Markdown>

src/components/SteppedForm/Readme.mdx

@@ -32,7 +32,7 @@ const STEPS = [
     type: 'md',
     actions: [{ label: 'Get started', navigate: 'next' }],
     lede:
-      "We're excited to hear about you, your work and the shadowing experience you could host on Hoppin.  \n\n You will shortly start creating your host profile, then you’ll submit it to the Hoppin team for review.",
+      "We're excited to hear about you, your work and the shadowing experience you could host on Orbiit.  \n\n You will shortly start creating your host profile, then you’ll submit it to the Hoppin team for review.",
     body:
       '![excited welcome from the office dog](https://media.giphy.com/media/BpS6k9mXoDiZa/giphy.gif)',
   },
@@ -79,7 +79,7 @@ There are different kinds of slides possible, but all share some common props:
       type: 'md',
       actions: [{ label: 'Get started', navigate: 'next' }],
       lede:
-        "We're excited to hear about you, your work and the shadowing experience you could host on Hoppin.\n\nYou will shortly start creating your host profile, then you’ll submit it to the Hoppin team for review.",
+        "We're excited to hear about you, your work and the shadowing experience you could host on Orbiit.\n\nYou will shortly start creating your host profile, then you’ll submit it to the Hoppin team for review.",
       body:
         '![excited welcome from the office dog](https://storage.googleapis.com/orbiit-platform/CDN_LIVE/images/app-backgrounds/host-onboard-welcome.gif)',
     };

src/gatsby-theme-docz/components/Logo/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
-import { Logo as HoppinLogo } from '@ds';
 
-export const Logo = () => <HoppinLogo margin="base" />;
+import { Logo as OrbiitLogo } from '@ds';
+
+export const Logo = () => <OrbiitLogo margin="base" />;

src/index.mdx

@@ -1,9 +1,9 @@
 ---
-name: Hoppin Design System
+name: Orbiit Design System
 route: /
 ---
 
-# Breaking Barriers with Well-Designed Job Shadowing
+# Connecting Communities in Style
 
 This project uses [Docz](https://www.docz.site/) for UI components development and styleguide generation.
 

src/reading-list.mdx

@@ -4,7 +4,7 @@ name: Reading List
 
 # Get Started
 
-## The Hoppin Design System is based on:
+## The Orbiit Design System is based on:
 
 - Styled-System for token-based theming
 - Styled-Components for CSS-in-JS (see below)

src/tokens/typography.js

@@ -1,11 +1,12 @@
 import { space } from './space';
 
 const fonts = {
-  primary: '"Poppins", sans-serif',
-  secondary: '"Poppins", sans-serif',
+  primary: '"Surt", sans-serif',
+  secondary: '"Surt", sans-serif',
   system:
     '-apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue',
 };
+
 // font-sizes are multiples of 2, 8 if possible, to create a natural rythm, together with space tokens.
 const fontSizes = [
   '.5rem', // 8px
@@ -50,9 +51,9 @@ lineHeights.large = lineHeights[2];
 const fontWeights = {
   light: 300,
   normal: 300,
-  medium: 600,
-  bold: 600,
-  heavy: 600,
+  medium: 500,
+  bold: 500,
+  heavy: 500,
 };
 
 // headings style attributes, all but color, since color is dependent on host/shadower context

yarn.lock

@@ -5768,7 +5768,7 @@ dot-case@^3.0.3:
     no-case "^3.0.3"
     tslib "^1.10.0"
 
-dot-prop@^4.2.0:
+dot-prop@^4.2.0, dot-prop@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4"
   integrity sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==
@@ -11191,7 +11191,7 @@ node-fetch@2.1.2:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.2.tgz#ab884e8e7e57e38a944753cec706f788d1768bb5"
   integrity sha1-q4hOjn5X44qUR1POxwb3iNF2i7U=
 
-node-fetch@2.6.1, node-fetch@^2.5.0, node-fetch@^2.6.0:
+node-fetch@2.6.1, node-fetch@^2.5.0, node-fetch@^2.6.0, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
@@ -14498,7 +14498,7 @@ sentence-case@^2.1.0:
     no-case "^2.2.0"
     upper-case-first "^1.1.2"
 
-serialize-javascript@^3.0.0:
+serialize-javascript@^3.0.0, serialize-javascript@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea"
   integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==