├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github └── workflows │ └── publish.yml ├── .gitignore ├── .gitmessage ├── .vercel ├── README.txt └── project.json ├── .vscode ├── extensions.json └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── deploy-gallery.sh ├── documentation-site ├── assets │ ├── github.tsx │ └── index.ts ├── components │ ├── code-editor.tsx │ ├── codesandbox-iframe.tsx │ ├── documentation-layout │ │ ├── documentation-layout.tsx │ │ ├── index.ts │ │ └── styled-components.tsx │ ├── ga-script.tsx │ ├── header │ │ ├── header.tsx │ │ ├── index.ts │ │ └── styled-components.tsx │ ├── iframe.tsx │ ├── layout.tsx │ ├── markdown-elements.tsx │ ├── side-navigation │ │ ├── index.ts │ │ ├── side-navigation.tsx │ │ └── styled-components.tsx │ └── theme-generator │ │ ├── constants.ts │ │ ├── import-export-theme.tsx │ │ ├── index.ts │ │ ├── token-editor │ │ ├── color-picker.tsx │ │ ├── color-select.tsx │ │ ├── color-token-editor.tsx │ │ ├── handler.ts │ │ ├── index.ts │ │ ├── lighting-token-editor.tsx │ │ ├── new-row-input.tsx │ │ ├── shadow-picker.tsx │ │ ├── shadow-select.tsx │ │ ├── token-copying.tsx │ │ └── token-editor.tsx │ │ └── using-with-code.tsx ├── constants.ts ├── hooks │ ├── components │ │ ├── index.ts │ │ └── use-typescript-file-data.tsx │ ├── index.ts │ └── use-clipboard.ts ├── lib │ └── typescript-files.ts ├── next-env.d.ts ├── next-seo.config.js ├── next.config.js ├── pages │ ├── _app.page.tsx │ ├── _document.page.tsx │ ├── api │ │ └── hello.js │ ├── components │ │ ├── [name].page.tsx │ │ ├── component-view.tsx │ │ └── styled-components.tsx │ ├── examples │ │ ├── with-cra.page.mdx │ │ ├── with-gatsby.page.mdx │ │ └── with-nextjs.page.mdx │ ├── getting-started │ │ ├── background.page.mdx │ │ ├── lighthouse-gallery.page.mdx │ │ ├── start-code.page.mdx │ │ └── start-design.page.mdx │ ├── home │ │ ├── home.tsx │ │ ├── index.ts │ │ └── styled-components.tsx │ ├── index.page.tsx │ └── theme │ │ ├── theme-generator.page.mdx │ │ ├── theming.page.mdx │ │ └── use-theme.page.mdx ├── public │ └── static │ │ ├── favicons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-256x256.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── mstile-150x150.png │ │ └── site.webmanifest │ │ └── images │ │ └── brand │ │ ├── logo-symbol.png │ │ ├── logo.png │ │ └── og.png ├── store │ ├── dark-theme.json │ ├── index.ts │ ├── light-theme.json │ └── store.ts ├── styles │ └── global.css ├── styletron.js ├── tsconfig.json └── utils │ ├── components.tsx │ ├── index.ts │ └── utils.ts ├── examples ├── gatsby │ ├── .gitignore │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── gatsby-browser.js │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── gatsby-ssr.js │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── header.js │ │ │ ├── image.js │ │ │ ├── layout.js │ │ │ └── seo.js │ │ ├── images │ │ │ ├── gatsby-astronaut.png │ │ │ └── gatsby-icon.png │ │ └── pages │ │ │ ├── 404.js │ │ │ ├── index.js │ │ │ ├── page-2.js │ │ │ └── using-typescript.tsx │ └── yarn.lock └── nextjs │ ├── .gitignore │ ├── README.md │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── _app.tsx │ └── index.tsx │ ├── styletron.js │ ├── tsconfig.json │ └── yarn.lock ├── lighthouse-gallery.framerfx ├── .gitignore ├── .yarnignore ├── README.md ├── code │ ├── Alert.tsx │ ├── Breadcrumbs.tsx │ ├── Button.tsx │ ├── Card.tsx │ ├── DisplayLarge.tsx │ ├── DisplayMedium.tsx │ ├── DisplaySmall.tsx │ ├── DisplayXSmall.tsx │ ├── Drawer.tsx │ ├── Form.tsx │ ├── HeaderNavigation.tsx │ ├── HeadingLarge.tsx │ ├── HeadingMedium.tsx │ ├── HeadingSmall.tsx │ ├── HeadingXLarge.tsx │ ├── HeadingXSmall.tsx │ ├── HeadingXXLarge.tsx │ ├── Icon.tsx │ ├── Input.tsx │ ├── LabelLarge.tsx │ ├── LabelMedium.tsx │ ├── LabelSmall.tsx │ ├── LabelXSmall.tsx │ ├── ListItem.tsx │ ├── Modal.tsx │ ├── ParagraphLarge.tsx │ ├── ParagraphMedium.tsx │ ├── ParagraphSmall.tsx │ ├── ParagraphXSmall.tsx │ ├── ProgressBar.tsx │ ├── Radio.tsx │ ├── Select.tsx │ ├── Spacing.tsx │ ├── Spinner.tsx │ ├── StyledLink.tsx │ ├── Table.tsx │ ├── Tabs.tsx │ ├── Toast.tsx │ ├── canvas.tsx │ ├── overrides │ │ ├── CONTENT.tsx │ │ ├── INPUTS.tsx │ │ ├── PICKERS.tsx │ │ ├── PROGRESS.tsx │ │ ├── SURFACES.tsx │ │ ├── harbor.school.tsx │ │ ├── tokens.css │ │ └── utils.ts │ ├── styles.css │ └── utils │ │ ├── BoxTitle.tsx │ │ ├── ColorChip.tsx │ │ ├── LightingChip.tsx │ │ ├── StyletronEngine.ts │ │ ├── ThemeManagement.ts │ │ ├── ThemeSwitcher.tsx │ │ ├── constants.ts │ │ ├── fonts.css │ │ ├── getThemeByKey.ts │ │ ├── index.ts │ │ ├── placeholderState.tsx │ │ ├── styles.ts │ │ ├── types.ts │ │ └── withHOC.tsx ├── design │ ├── document.json │ └── images │ │ ├── 2Odu3uWuOtEksCQhIKqXHGWAZxA.json │ │ ├── 2eHaTuK9lOCuKBfvfRy4YGNLfHE.json │ │ ├── 5VMflV19ebbrT1h8cmnw5Th1eY │ │ ├── 5nUwARjdc5e9YMTaI9CdPp6A │ │ ├── 63GqkpnqumalT3E8GJUd46fFJuQ │ │ ├── 6XviRk63dtcuuTzLHPLI9ifWWlg │ │ ├── 7FoMTnNZ5FI7kLbMrSU401Y.json │ │ ├── 8iQy4xV8iDL9jxHniXDWWuRtigk.json │ │ ├── 9MSDEse6xx4nG4Bndeh11WONvQ │ │ ├── A4aXeH0BNLvYY2vRXPEJ213TzU4 │ │ ├── AGh1FiegIGrDreENnwbOUdBtgFw │ │ ├── AW1iWFz3if4MpRYCwSMU1dQcPzk │ │ ├── CMkgvSZwqgRuuQr8ToRPqWGtoE.json │ │ ├── D2Oq62l2Dv61j2sCkwuwk0Xys │ │ ├── EkG998OtMtPMVoxqeo8rRxZxUQ.json │ │ ├── GlJR0XR8tdwKFXD1cMv6YTb3mC8 │ │ ├── Ia8iYrINOtvK5tx7hzm67Wa94.json │ │ ├── JoWEnvdV5vhrsi6twgDJfh65j3A │ │ ├── Kry52IYoGIXSjtgRMfVUoSpdGWM.json │ │ ├── O8SaFArMgWxpDIbkiLTa4v1rY │ │ ├── RhdJsP63YEpI8BzDyU5Jgs4Ps │ │ ├── Rpj0ijfUpuGaJ0DYGdKfpcHs8 │ │ ├── Rxh5BPWkNJiXOWUFvYZqGKQ6M │ │ ├── VgO0mYrvziJ5gEuRknvmD5Eek │ │ ├── WQrmTA9qRpdxap6KKb1n7rvpp4.json │ │ ├── bF30Fi8ZzKHHeFpySS8yeme8C9s │ │ ├── cUXu06pNJgTKTFUhVujRkZL0hc │ │ ├── di2fG2HLvHLvMRsQzEgLzBhDuU.json │ │ ├── e6ypWBvpX5fRGDC7BwdOFzzMV5Q │ │ ├── fO9dMf8SpQmYxGJmitIWOZJcs │ │ ├── fYx5dY4ZY9Mkbr8iEw09MR5yZ4c │ │ ├── hzTZvm5LO5E4ZqccKuGKHpwx2Y │ │ ├── iUXxxRSclMc46hoRl0FxyVtvsDQ │ │ ├── j139zmQXm6ypWv48qNLbWQzJcAc │ │ ├── tyZREquBez2L88lMk2reSNehP8 │ │ └── yGP6BQVLiKQFY1rMricy8l4qc.jpg ├── importer.config.json ├── metadata │ ├── artwork.png │ └── icon.png ├── package.json ├── tsconfig.json └── yarn.lock ├── package-lock.json ├── package.json ├── pnpm-lock.yaml ├── rollup.config.mjs ├── src ├── alert │ ├── alert.tsx │ ├── constants.ts │ ├── index.ts │ ├── styled-components.tsx │ └── types.ts ├── block │ ├── block.tsx │ ├── index.ts │ ├── styled-components.tsx │ └── types.ts ├── breadcrumbs │ ├── breadcrumbs.tsx │ ├── index.ts │ ├── styled-components.tsx │ └── types.ts ├── button │ ├── button.tsx │ ├── constants.ts │ ├── index.tsx │ ├── styled-components.tsx │ └── types.ts ├── card │ ├── card-action.tsx │ ├── card-body.tsx │ ├── card.tsx │ ├── index.ts │ ├── styled-components.tsx │ └── types.ts ├── color-chip │ ├── color-chip.tsx │ ├── constants.ts │ ├── index.ts │ └── types.ts ├── drawer │ ├── constants.ts │ ├── drawer.tsx │ ├── index.ts │ ├── styled-components.tsx │ └── types.ts ├── flex-box │ ├── flex-box.tsx │ ├── flex-item.tsx │ ├── index.ts │ └── types.ts ├── form │ ├── form.tsx │ ├── index.ts │ ├── styled-components.tsx │ └── types.ts ├── header-navigation │ ├── header-navigation-item.tsx │ ├── header-navigation.tsx │ ├── index.ts │ ├── styled-components.tsx │ └── types.ts ├── helpers │ ├── form-provider.tsx │ ├── lighthouse-provider.tsx │ ├── overrides.tsx │ ├── responsive-helpers.ts │ ├── tabs-provider.tsx │ └── use-theme.tsx ├── hooks │ ├── index.ts │ ├── use-hover.ts │ ├── use-onclick-outside.ts │ └── use-onclick-rect-outside.ts ├── icon │ ├── arrow.tsx │ ├── constants.ts │ ├── div-menu.tsx │ ├── external-link.tsx │ ├── icon.tsx │ ├── index.ts │ ├── lock.tsx │ ├── menu.tsx │ ├── symbol.tsx │ └── types.ts ├── input │ ├── index.ts │ ├── input.tsx │ ├── styled-components.tsx │ └── types.ts ├── lighthouse.ts ├── lighting-chip │ ├── index.ts │ ├── lighting-chip.tsx │ └── types.ts ├── link │ ├── constants.ts │ ├── index.ts │ ├── link.tsx │ ├── styled-components.tsx │ └── types.ts ├── list │ ├── index.ts │ ├── list-item-label.tsx │ ├── list-item.tsx │ ├── styled-components.tsx │ └── types.ts ├── modal │ ├── constants.ts │ ├── index.tsx │ ├── modal-content.tsx │ ├── modal.tsx │ ├── styled-components.tsx │ └── types.ts ├── overrides.ts ├── progress-bar │ ├── index.ts │ ├── progress-bar.tsx │ └── types.ts ├── radio │ ├── index.ts │ ├── radio.tsx │ ├── styled-components.tsx │ └── types.ts ├── select │ ├── animate-options.tsx │ ├── index.ts │ ├── select.tsx │ ├── styled-components.tsx │ └── types.ts ├── spacing │ ├── index.tsx │ ├── spacing.tsx │ └── types.ts ├── spinner │ ├── index.ts │ ├── spinner.tsx │ ├── styled-components.tsx │ └── types.ts ├── table │ ├── index.ts │ ├── styled-components.tsx │ ├── table.tsx │ └── types.ts ├── tabs │ ├── index.ts │ ├── styled-components.tsx │ ├── tab-list.tsx │ ├── tab-panel.tsx │ ├── tab-panels.tsx │ ├── tab.tsx │ ├── tabs.tsx │ └── types.ts ├── themes │ ├── dark-theme │ │ ├── color-foundation-tokens.ts │ │ ├── color-semantic-tokens.ts │ │ ├── create-dark-theme.ts │ │ └── dark-theme.ts │ ├── index.ts │ ├── light-theme │ │ ├── color-foundation-tokens.ts │ │ ├── color-semantic-tokens.ts │ │ ├── create-light-theme.ts │ │ └── light-theme.ts │ ├── shared │ │ ├── animation.ts │ │ ├── breakpoints.ts │ │ ├── lighting.ts │ │ ├── media-query.ts │ │ ├── sizing.ts │ │ ├── typography.ts │ │ └── zIndex.ts │ └── types.ts ├── toast │ ├── constants.ts │ ├── index.ts │ ├── styled-components.tsx │ ├── toast.tsx │ └── types.ts ├── tokens │ ├── color-scale.json │ ├── colors.ts │ ├── index.ts │ └── types.ts ├── typography │ ├── index.tsx │ ├── types.ts │ └── typography.tsx └── utils │ ├── deep-merge.ts │ ├── extendable.ts │ ├── handle-newline.tsx │ ├── hex-to-hsl.ts │ ├── hex-to-rgb.ts │ ├── increase-brightness.ts │ ├── is-empty.ts │ └── is-fragment.ts ├── tsconfig.json ├── tslint.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | #root = true 2 | 3 | [*] 4 | indent_style = space 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | max_line_length = 100 10 | indent_size = 2 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | canvas.tsx -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features 5 | "sourceType": "module", // Allows for the use of imports 6 | "ecmaFeatures": { 7 | "jsx": true // Allows for the parsing of JSX 8 | } 9 | }, 10 | "settings": { 11 | "react": { 12 | "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use 13 | } 14 | }, 15 | "extends": [ 16 | "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react 17 | "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin 18 | "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier 19 | "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. 20 | ], 21 | "rules": { 22 | "prettier/prettier": [ 23 | "error", 24 | { 25 | "semi": false, 26 | "trailingComma": "es5" 27 | } 28 | ], 29 | // ignore 30 | "react/prop-types": "off", 31 | "react/jsx-key": "off", 32 | "react/no-unescaped-entities": "off", 33 | "@typescript-eslint/explicit-module-boundary-types": "off", 34 | "@typescript-eslint/ban-ts-comment": "warn", 35 | "@typescript-eslint/no-var-requires": "off" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | --- 2 | on: 3 | push: 4 | branches: master 5 | 6 | name: Build and publish Framer Package 7 | jobs: 8 | publish: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2.1.0 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 10 15 | 16 | - name: Find and Replace 17 | uses: jacobtomlinson/gha-find-replace@master 18 | with: 19 | find: '(?:..\/..\/..\/..\/lighthouse|..\/..\/..\/lighthouse)' 20 | replace: '@harborschool/lighthouse' 21 | 22 | - name: Install Dependancies (@harborschool/lighthouse@latest, styletron-react@^5.2.7, styletron-engine-atomic@^1.4.6) 23 | run: cd lighthouse-gallery.framerfx && npm i --save @harborschool/lighthouse styletron-react@^5.2.7 styletron-engine-atomic@^1.4.6 24 | 25 | - name: Build 26 | uses: framer/bridge@master 27 | env: 28 | FRAMER_TOKEN: ${{ secrets.FRAMER_TOKEN }} 29 | with: 30 | args: build lighthouse-gallery.framerfx 31 | 32 | - name: Publish 33 | uses: framer/bridge@master 34 | env: 35 | FRAMER_TOKEN: ${{ secrets.FRAMER_TOKEN }} 36 | with: 37 | args: publish lighthouse-gallery.framerfx --yes --public 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | .nyc_output 4 | .DS_Store 5 | *.log 6 | .idea 7 | dist 8 | compiled 9 | .awcache 10 | .rpt2_cache 11 | docs 12 | .next 13 | out 14 | sketches.framerfx 15 | deploy.framerfx 16 | stats.html 17 | .env -------------------------------------------------------------------------------- /.gitmessage: -------------------------------------------------------------------------------- 1 | feat: Toast 2 | 3 | 4 | # Allowed 5 | # feat (feature) 6 | # pub (publishing) 7 | # fix (bug fix) 8 | # docs (documentation) 9 | # framer (framer canvas) 10 | # fmt (formatting, wmissing semi colons, …) 11 | # refactor 12 | # test (when adding missing tests) 13 | # chore (maintain) 14 | # qa (quality assurance) 15 | 16 | # Examples 17 | # feat($browser): onUrlChange event (popstate/hashchange/polling) 18 | 19 | # Added new event to $browser: 20 | # - forward popstate event if available 21 | # - forward hashchange event if popstate not available 22 | # - do polling when neither popstate nor hashchange available 23 | 24 | # Breaks $browser.onHashChange, which was removed (use onUrlChange instead) -------------------------------------------------------------------------------- /.vercel/README.txt: -------------------------------------------------------------------------------- 1 | > Why do I have a folder named ".vercel" in my project? 2 | The ".vercel" folder is created when you link a directory to a Vercel project. 3 | 4 | > What does the "project.json" file contain? 5 | The "project.json" file contains: 6 | - The ID of the Vercel project that you linked ("projectId") 7 | - The ID of the user or team your Vercel project is owned by ("orgId") 8 | 9 | > Should I commit the ".vercel" folder? 10 | No, you should not share the ".vercel" folder with anyone. 11 | Upon creation, it will be automatically added to your ".gitignore" file. 12 | -------------------------------------------------------------------------------- /.vercel/project.json: -------------------------------------------------------------------------------- 1 | {"projectId":"QmbyCJBqSp2LMmpdrnW9DdasHvYJNomApFvSCdFiX2WG25","orgId":"0joRHqrgxl0BSAGk6HjehaZW"} -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // tell the ESLint plugin to run on save 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true 5 | }, 6 | // turn it off for JS and JSX, we will do this via eslint 7 | "[javascript]": { 8 | "editor.formatOnSave": false 9 | }, 10 | "[javascriptreact]": { 11 | "editor.formatOnSave": false 12 | }, 13 | "[typescript]": { 14 | "editor.formatOnSave": false 15 | }, 16 | "[typescriptreact]": { 17 | "editor.formatOnSave": false 18 | }, 19 | } 20 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | We're really glad you're reading this, because we need volunteer developers and designers to help this project come to fruition. 👏 2 | 3 | ## Instructions 4 | 5 | These steps will guide you through contributing to this project: 6 | 7 | - Fork the repo 8 | - Clone it and install dependencies 9 | 10 | git clone https://github.com/YOUR-USERNAME/lighthouse 11 | yarn install && yarn start 12 | 13 | Make and commit your changes. Make sure the commands yarn run build is working. 14 | 15 | Finally send a [GitHub Pull Request](https://github.com/harbor-school/lighthouse/compare?expand=1) with a clear list of what you've done (read more [about pull requests](https://help.github.com/articles/about-pull-requests/)). Make sure all of your commits are atomic (one feature per commit). 16 | 17 | ## Development 18 | 19 | ### Tooling 20 | 21 | - [Framer](https://www.framer.com/) for rapid UI component prototyping and design 22 | - [Next.js](https://nextjs.org/) for a documentation website. 23 | 24 | ### Commands 25 | 26 | **`yarn start`**: Start the project. 27 | 28 | **`yarn build`**: run build for all component packages. 29 | 30 | **`yarn framer`**: Generate Framer Components at lighthouse-gallery.framerfx. 31 | 32 | **`yarn docs:dev`**: run the documentation site locally. 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2020 ruucm 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Lighthouse logo 4 | 5 |

6 |
7 | 8 |

9 | NPM Version 10 | NPM Downloads 11 | MIT License 12 |

13 |
14 | 15 | Lighthouse is a continuous design system for integrating design with development workflows. 16 | 17 | Designing just got easier as you can directely import coded components, use the exact same layouts and measurments, and publish in no matter of time. Lighthouse Design System also provides fully customizable themes. 18 | 19 | ## Getting Started 20 | 21 | Visit Start Design to get started design with Lighthouse Design System. 22 | 23 | Visit Start Code to get started code with Lighthouse Design System. 24 | 25 | ## Documentation 26 | 27 | Visit [lighthouse.harbor.school](https://lighthouse.harbor.school) to view the full documentation. 28 | 29 | ## Contributing 30 | 31 | Please see our [CONTRIBUTING.md](/CONTRIBUTING.md). 32 | -------------------------------------------------------------------------------- /deploy-gallery.sh: -------------------------------------------------------------------------------- 1 | # Duplicate Gallery 2 | read -p "Target Project (.framerfx): " project 3 | 4 | rm -rf deploy.framerfx 5 | cp -r $project.framerfx deploy.framerfx 6 | 7 | # Remove Project code files "except overrides" directory 8 | find ./deploy.framerfx/code/* -maxdepth 0 -name 'overrides' -prune -o -exec rm -rf '{}' ';' 9 | 10 | # String find & replace (component files) 11 | find ./deploy.framerfx -type f -exec sed -i "" 's/..\/..\/..\/..\/lighthouse/@harborschool\/lighthouse/g' {} \; 12 | find ./deploy.framerfx -type f -exec sed -i "" 's/..\/..\/..\/lighthouse/@harborschool\/lighthouse/g' {} \; 13 | find ./deploy.framerfx -type f -exec sed -i "" 's/from "..\/utils/from "@framer\/ruucm-h.lighthouse\/code\/utils/g' {} \; 14 | # String find & replace (document.json) 15 | find ./deploy.framerfx -type f -exec sed -i "" 's/"codeComponentIdentifier" : "\./"codeComponentIdentifier" : "@framer\/ruucm-h.lighthouse\/./g' {} \; 16 | # String find & replace (package.json) 17 | find ./deploy.framerfx -type f -exec sed -i "" 's/"name": "@framer\/ruucm-h.lighthouse",//g' {} \; 18 | find ./deploy.framerfx -type f -exec sed -i "" 's/"dependencies": {/"dependencies": {\ 19 | "@harborschool\/lighthouse": "latest",/g' {} \; 20 | 21 | # Open Framer 22 | open deploy.framerfx 23 | 24 | #TODO 25 | # Install @framer/ruucm-h.lighthouse (Framer Package) 26 | # Remove scaleChip (Project Component) 27 | # Save it as .framerx project 28 | # Upload deploy.framerx to Framer Web -------------------------------------------------------------------------------- /documentation-site/assets/github.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | export function Github({ height, color }) { 4 | return ( 5 | 13 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /documentation-site/assets/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./github" 2 | -------------------------------------------------------------------------------- /documentation-site/components/codesandbox-iframe.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { useTheme } from "../../../lighthouse" 3 | import { Iframe } from "./iframe" 4 | import { isDarkTheme } from "../utils" 5 | 6 | export function CodeSandBoxIframe({ src }) { 7 | const theme = useTheme() 8 | return