├── .github └── workflows │ ├── format.yml │ └── test.yml ├── .gitignore ├── .prettierignore ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── babel.config.js ├── docs ├── components │ └── color-switcher.js ├── next.config.js ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ └── index.js ├── vercel.json └── yarn.lock ├── lerna.json ├── package.json ├── packages ├── meta │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.js │ └── test │ │ ├── __snapshots__ │ │ └── index.js.snap │ │ └── index.js └── theme │ ├── README.md │ ├── fonts │ ├── reg-bold.css │ ├── reg-ital-bold.css │ └── reg.css │ ├── package.json │ ├── src │ ├── index.ts │ ├── overrides.d.ts │ └── prism.ts │ └── tsconfig.json ├── prettier.config.js └── yarn.lock /.github/workflows/format.yml: -------------------------------------------------------------------------------- 1 | name: format 2 | 3 | on: 4 | - push 5 | - pull_request 6 | 7 | jobs: 8 | prettier: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-node@v3 13 | - run: yarn install 14 | - run: yarn run checkFormat 15 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: test 2 | 3 | on: 4 | - push 5 | - pull_request 6 | 7 | jobs: 8 | jest: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-node@v3 13 | - run: yarn install 14 | - run: yarn run test 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .next 2 | public 3 | package-lock.json 4 | node_modules 5 | dist 6 | coverage 7 | .DS_Store 8 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | public 2 | package-lock.json 3 | yarn.lock 4 | node_modules 5 | dist 6 | coverage 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Hey—thanks for your interest in contributing! We follow the [Hack Club Code of Conduct](https://hackclub.com/conduct/), so please be kind and reach out if you have any questions or concerns. 4 | 5 | ## Local Development 6 | 7 | This repo uses [Yarn Workspaces][] and [Lerna][] to develop multiple packages together as a monorepo. 8 | Be sure to install [Yarn][] before setting up the development environment. 9 | 10 | Install dependencies and link local packages in the root directory: 11 | 12 | ```bash 13 | yarn 14 | ``` 15 | 16 | After yarn has linked packages and installed dependences in the repo, you can run whatever you’re looking for. 17 | 18 | ```bash 19 | yarn workspace 20 | ``` 21 | 22 | Where name of package is something like `@hackclub/theme` or `@hackclub/meta` (one of the packages 23 | listed by yarn when you run the `yarn workspaces info` command) 24 | 25 | Example: 26 | 27 | ```bash 28 | yarn workspace @hackclub/meta prepare 29 | ``` 30 | 31 | ## Tests 32 | 33 | Unit tests are run with [Jest][], and each relevant package includes a `test/` directory with unit tests for that package. 34 | 35 | Running tests: 36 | 37 | ```sh 38 | yarn test 39 | ``` 40 | 41 | Running tests in watch mode: 42 | 43 | ```sh 44 | yarn test --watch 45 | ``` 46 | 47 | ## Pull Requests 48 | 49 | When opening a pull request, please be sure to update any relevant documentation. 50 | 51 | --- 52 | 53 | _Doc adapted from [Theme UI][]_ 54 | 55 | [yarn]: https://yarnpkg.com 56 | [yarn workspaces]: https://yarnpkg.com/en/docs/workspaces 57 | [lerna]: https://github.com/lerna/lerna 58 | [jest]: https://jestjs.io/ 59 | [theme ui]: https://github.com/system-ui/theme-ui/blob/master/CONTRIBUTING.md 60 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) 2020 The Hack Foundation 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hack Club Theme 2 | 3 | ![format](https://github.com/hackclub/theme/workflows/format/badge.svg) 4 | ![test](https://github.com/hackclub/theme/workflows/test/badge.svg) 5 | 6 | [Hack Club](https://hackclub.com)’s frontend design system/tools, 7 | made for [Theme UI](https://theme-ui.com). An alternative for CSS 8 | projects is [available here](https://github.com/hackclub/css). 9 | 10 | > For getting started, check out [theme-starter](https://github.com/hackclub/theme-starter)! 11 | 12 | ## Packages 13 | 14 | 1. `@hackclub/theme` – Theme UI base theme 15 | 2. `@hackclub/meta` – React component for generating social tags for `` 16 | 17 | ## Docs 18 | 19 | The docs site source is in `/docs`. It is made with Next.js & deployed on Vercel. 20 | 21 | [**theme.hackclub.com**](https://theme.hackclub.com) 22 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/env', '@babel/react'] 3 | } 4 | -------------------------------------------------------------------------------- /docs/components/color-switcher.js: -------------------------------------------------------------------------------- 1 | import { IconButton, useColorMode } from 'theme-ui' 2 | 3 | const ColorSwitcher = props => { 4 | const [mode, setMode] = useColorMode() 5 | return ( 6 | setMode(mode === 'dark' ? 'light' : 'dark')} 8 | title="Invert Colors" 9 | sx={{ 10 | position: 'absolute', 11 | top: 3, 12 | right: 3, 13 | color: 'primary', 14 | borderRadius: 'circle', 15 | transition: 'box-shadow .125s ease-in-out', 16 | ':hover,:focus': { 17 | boxShadow: '0 0 0 2px', 18 | outline: 'none' 19 | } 20 | }} 21 | > 22 | 23 | 31 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default ColorSwitcher 38 | -------------------------------------------------------------------------------- /docs/next.config.js: -------------------------------------------------------------------------------- 1 | const isProd = process.env.NODE_ENV === 'production' 2 | const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ }) 3 | module.exports = withMDX({ 4 | pageExtensions: ['js', 'jsx', 'mdx'], 5 | assetPrefix: isProd ? 'https://theme.hackclub.com' : '' 6 | }) 7 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@hackclub/theme-docs", 3 | "version": "0.0.1", 4 | "author": "Lachlan Campbell (https://lachlanjc.me) ", 5 | "license": "MIT", 6 | "private": true, 7 | "scripts": { 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "yarn run dev" 11 | }, 12 | "dependencies": { 13 | "@hackclub/meta": "^1.0.0", 14 | "@hackclub/theme": "^0.3.1", 15 | "@mdx-js/loader": "^1.6.21", 16 | "@next/mdx": "^10.0.1", 17 | "@theme-ui/style-guide": "^0.3.3", 18 | "lodash": "^4.17.21", 19 | "next": "^12.1.0", 20 | "react": "^17.0.1", 21 | "react-dom": "^17.0.1", 22 | "theme-ui": "^0.3.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /docs/pages/_app.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import NextApp from 'next/app' 3 | 4 | import '@hackclub/theme/fonts/reg-ital-bold.css' 5 | import theme from '@hackclub/theme' 6 | import { ThemeProvider } from 'theme-ui' 7 | 8 | export default class App extends NextApp { 9 | render() { 10 | const { Component, pageProps } = this.props 11 | return ( 12 | 13 | 14 | 15 | ) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from 'next/document' 2 | import { InitializeColorMode } from 'theme-ui' 3 | 4 | export default class extends Document { 5 | static async getInitialProps(ctx) { 6 | const initialProps = await Document.getInitialProps(ctx) 7 | return { ...initialProps } 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | ) 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docs/pages/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | BaseStyles, 3 | Badge, 4 | Box, 5 | Button, 6 | Card, 7 | Checkbox, 8 | Container, 9 | Flex, 10 | Grid, 11 | Heading, 12 | Input, 13 | Label, 14 | Link, 15 | NavLink, 16 | Radio, 17 | Select, 18 | Slider, 19 | Text, 20 | Textarea 21 | } from 'theme-ui' 22 | import Head from 'next/head' 23 | import Meta from '@hackclub/meta' 24 | import theme from '@hackclub/theme' 25 | import ColorSwitcher from '../components/color-switcher' 26 | import { TypeScale, ColorPalette } from '@theme-ui/style-guide' 27 | 28 | const DocsPage = () => ( 29 | <> 30 | 31 | Hack Club Theme 32 | 36 | 37 | 38 | 39 | 40 | 41 | Hack Club Theme 42 | 43 | 44 | Hack Club’s theme + React 45 | components for Theme UI. 46 | 47 | 59 | GitHub 60 | 61 | NPM 62 | 63 | 64 | Starter 65 | 66 | 67 | 68 | 69 | 70 | 71 | Containers 72 | 73 | {Object.keys(theme.layout).map(key => ( 74 | 85 | {key} 86 | 87 | ))} 88 | 89 | 93 | 94 | Text 95 | 96 | {Object.keys(theme.text).map(key => { 97 | const Component = key.includes('head') ? Heading : Text 98 | return ( 99 | 100 | {key} 101 | 102 | ) 103 | })} 104 | 105 | 106 |

107 | This is a whole paragraph of text, include{' '} 108 | code like this, as well as{' '} 109 | 110 | linked code 111 | 112 | {' & '} 113 | regular links. The paragraph 114 | ended up being 1 sentence, but now I guess it’s two 115 | . 116 |

117 | 
118 |             Here’s a code block! No highlighting to be found.
119 |
120 | 121 | Buttons 122 | {Object.keys(theme.buttons).map(key => ( 123 | 126 | ))} 127 | Cards 128 | 133 | {Object.keys(theme.cards).map(key => ( 134 | 135 | {key} 136 | 137 | ))} 138 | t.util.gx('cyan', 'blue'), 141 | color: 'white' 142 | }} 143 | > 144 | 145 | Gradient BG 146 | 147 | 148 | theme.util.gx('color1', 'color2') 149 | 150 | 151 | 152 | t.util.gxText('cyan', 'blue')} 156 | my={0} 157 | > 158 | Gradient text 159 | 160 | 161 | theme.util.gxText('color1', 'color2') 162 | 163 | 164 | 165 | Forms 166 | 167 | 171 | 184 | 188 | 189 | 192 | 195 | 198 | 199 |