diff --git a/doczrc.js b/doczrc.js index 603d810..ab276d5 100644 --- a/doczrc.js +++ b/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: { diff --git a/es/components/DesignProvider/DesignProvider.js b/es/components/DesignProvider/DesignProvider.js index c5295a8..ff1846d 100644 --- a/es/components/DesignProvider/DesignProvider.js +++ b/es/components/DesignProvider/DesignProvider.js @@ -1,5 +1,5 @@ function _templateObject() { - var data = _taggedTemplateLiteralLoose(["\n html,\n body,\n * {\n /* use border-box model */\n box-sizing: border-box;\n }\n\n html,\n body {\n margin: 0;\n background: ", ";\n font-size: 16px;\n /* set default text color and family, so inheritance works */\n font-family: ", ";\n color: ", ";\n text-align: left;\n }\n\n * {\n color: inherit;\n }\n"]); + var data = _taggedTemplateLiteralLoose(["\n html,\n body,\n * {\n /* use border-box model */\n box-sizing: border-box;\n }\n\n html,\n body {\n margin: 0;\n background: ", ";\n\n /** Set default text color and family, so inheritance works */\n font-size: 16px;\n font-family: ", ";\n color: ", ";\n\n text-align: left;\n }\n\n * {\n color: inherit;\n }\n"]); _templateObject = function _templateObject() { return data; @@ -12,10 +12,10 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s 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'; var GlobalStyle = createGlobalStyle(_templateObject(), function (_ref) { var theme = _ref.theme; return theme.colors.whiteout.lightest; @@ -25,7 +25,7 @@ var GlobalStyle = createGlobalStyle(_templateObject(), function (_ref) { }); export var Fonts = function Fonts() { return /*#__PURE__*/React.createElement("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" }); }; diff --git a/es/gatsby-theme-docz/components/Logo/index.js b/es/gatsby-theme-docz/components/Logo/index.js index 8dd92ca..e57da08 100644 --- a/es/gatsby-theme-docz/components/Logo/index.js +++ b/es/gatsby-theme-docz/components/Logo/index.js @@ -1,7 +1,7 @@ import React from 'react'; -import { Logo as HoppinLogo } from '@ds'; +import { Logo as OrbiitLogo } from '@ds'; export var Logo = function Logo() { - return /*#__PURE__*/React.createElement(HoppinLogo, { + return /*#__PURE__*/React.createElement(OrbiitLogo, { margin: "base" }); }; \ No newline at end of file diff --git a/es/tokens/typography.js b/es/tokens/typography.js index b257646..491d934 100644 --- a/es/tokens/typography.js +++ b/es/tokens/typography.js @@ -1,7 +1,7 @@ import { space } from './space'; var 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. @@ -43,9 +43,9 @@ lineHeights.large = lineHeights[2]; var 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 var headings = { diff --git a/lib/components/DesignProvider/DesignProvider.js b/lib/components/DesignProvider/DesignProvider.js index 8c084fc..6a6448b 100644 --- a/lib/components/DesignProvider/DesignProvider.js +++ b/lib/components/DesignProvider/DesignProvider.js @@ -7,12 +7,12 @@ var _react = _interopRequireWildcard(require("react")); var _styledComponents = require("styled-components"); -var _tokens = _interopRequireDefault(require("../../tokens")); - var _propTypes = _interopRequireDefault(require("prop-types")); var _lodash = require("lodash"); +var _tokens = _interopRequireDefault(require("../../tokens")); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } @@ -20,7 +20,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function _templateObject() { - var data = _taggedTemplateLiteralLoose(["\n html,\n body,\n * {\n /* use border-box model */\n box-sizing: border-box;\n }\n\n html,\n body {\n margin: 0;\n background: ", ";\n font-size: 16px;\n /* set default text color and family, so inheritance works */\n font-family: ", ";\n color: ", ";\n text-align: left;\n }\n\n * {\n color: inherit;\n }\n"]); + var data = _taggedTemplateLiteralLoose(["\n html,\n body,\n * {\n /* use border-box model */\n box-sizing: border-box;\n }\n\n html,\n body {\n margin: 0;\n background: ", ";\n\n /** Set default text color and family, so inheritance works */\n font-size: 16px;\n font-family: ", ";\n color: ", ";\n\n text-align: left;\n }\n\n * {\n color: inherit;\n }\n"]); _templateObject = function _templateObject() { return data; @@ -41,7 +41,7 @@ var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject(), fu var Fonts = function Fonts() { return /*#__PURE__*/_react["default"].createElement("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" }); }; diff --git a/lib/tokens/typography.js b/lib/tokens/typography.js index 513ac8d..7d6ce83 100644 --- a/lib/tokens/typography.js +++ b/lib/tokens/typography.js @@ -6,8 +6,8 @@ exports.headings = exports.fontWeights = exports.lineHeights = exports.fontSizes var _space = require("./space"); var 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. @@ -52,9 +52,9 @@ lineHeights.large = lineHeights[2]; var 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 exports.fontWeights = fontWeights; diff --git a/package.json b/package.json index d4369ab..9b7286a 100644 --- a/package.json +++ b/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", diff --git a/src/components/Box/Readme.mdx b/src/components/Box/Readme.mdx index b65fe30..e57921a 100644 --- a/src/components/Box/Readme.mdx +++ b/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 diff --git a/src/components/DesignProvider/DesignProvider.js b/src/components/DesignProvider/DesignProvider.js index c06d910..c54cbe4 100644 --- a/src/components/DesignProvider/DesignProvider.js +++ b/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 = () => ( ); diff --git a/src/components/DesignProvider/Readme.mdx b/src/components/DesignProvider/Readme.mdx index edf0a60..4877266 100644 --- a/src/components/DesignProvider/Readme.mdx +++ b/src/components/DesignProvider/Readme.mdx @@ -27,6 +27,7 @@ function MyApp({ Component, pageProps }) { ${ /* .... other components ....*/ } ); } +``` ## Props @@ -37,6 +38,7 @@ function MyApp({ Component, pageProps }) { +
-``` + diff --git a/src/components/Heading/Readme.mdx b/src/components/Heading/Readme.mdx index 05cb77e..217fa33 100644 --- a/src/components/Heading/Readme.mdx +++ b/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). - The big site title, just one per page, please + + The big site title, just one per page, please + Default is the H2 Lorem ipsum dolor amet photo booth scenester cornhole trust fund vaporware diff --git a/src/components/Lede/Readme.mdx b/src/components/Lede/Readme.mdx index 45e8eb8..3a70c69 100644 --- a/src/components/Lede/Readme.mdx +++ b/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) - Welcome to Hoppin + Welcome to Orbiit Scenester cornhole trust fund vaporware williamsburg. Selfies tbh tumeric XOXO man braid cred. Skateboard heirloom locavore, kogi everyday carry af diff --git a/src/components/Link/Readme.mdx b/src/components/Link/Readme.mdx index 9d755ec..d2816f9 100644 --- a/src/components/Link/Readme.mdx +++ b/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 `` can't be rendendered outside a `` component. diff --git a/src/components/Logo/Readme.mdx b/src/components/Logo/Readme.mdx index f0c0922..66612f6 100644 --- a/src/components/Logo/Readme.mdx +++ b/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 diff --git a/src/components/Markdown/Readme.mdx b/src/components/Markdown/Readme.mdx index ec69677..0d8243a 100644 --- a/src/components/Markdown/Readme.mdx +++ b/src/components/Markdown/Readme.mdx @@ -55,7 +55,7 @@ You can also pass children as a string: {() => { - 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 (
{mdstring} diff --git a/src/components/SteppedForm/Readme.mdx b/src/components/SteppedForm/Readme.mdx index a01b937..a1fe018 100644 --- a/src/components/SteppedForm/Readme.mdx +++ b/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)', }; diff --git a/src/gatsby-theme-docz/components/Logo/index.js b/src/gatsby-theme-docz/components/Logo/index.js index 6e545ab..8271c2a 100644 --- a/src/gatsby-theme-docz/components/Logo/index.js +++ b/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 = () => ; +import { Logo as OrbiitLogo } from '@ds'; + +export const Logo = () => ; diff --git a/src/index.mdx b/src/index.mdx index d4e3d58..8902c1b 100644 --- a/src/index.mdx +++ b/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. diff --git a/src/reading-list.mdx b/src/reading-list.mdx index 7749830..118919f 100644 --- a/src/reading-list.mdx +++ b/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) diff --git a/src/tokens/typography.js b/src/tokens/typography.js index 5ea1ad8..6b0e17f 100644 --- a/src/tokens/typography.js +++ b/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 diff --git a/yarn.lock b/yarn.lock index a06a636..3c14dd7 100644 --- a/yarn.lock +++ b/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==