2 | 
12 | 
12 |
13 | );
14 |
15 | | Name | Hex Code | Preview |
16 | | ---------------------- | ----------- | -------------------------- |
17 | | `gray-50` | #F8F8F8 | 
8 |
--------------------------------------------------------------------------------
/docusaurus.config.js:
--------------------------------------------------------------------------------
1 | const lightCodeTheme = require('prism-react-renderer/themes/github');
2 | const darkCodeTheme = require('prism-react-renderer/themes/dracula');
3 |
4 | /** @type {import('@docusaurus/types').DocusaurusConfig} */
5 | module.exports = {
6 | title: 'Cal.com Design Documentation',
7 | tagline: 'Open Scheduling',
8 | url: 'https://design.cal.com',
9 | baseUrl: '/',
10 | onBrokenLinks: 'throw',
11 | onBrokenMarkdownLinks: 'warn',
12 | favicon: 'img/favicon.ico',
13 | organizationName: 'calendso', // Usually your GitHub org/user name.
14 | projectName: 'design', // Usually your repo name.
15 | themeConfig: {
16 | announcementBar: {
17 | id: 'beta',
18 | content:
19 | 'Our design system is in alpha preview. This site is under development and will be updated frequently.',
20 | backgroundColor: '#F97316',
21 | textColor: '#FFF7ED',
22 | isCloseable: false,
23 | },
24 | navbar: {
25 | logo: {
26 | alt: 'Cal.com Logo',
27 | src: 'img/logo.svg',
28 | srcDark: 'img/logo-white.svg'
29 | },
30 | items: [
31 | {href: 'https://docs.cal.com', label: 'Product Docs', position: 'left'},
32 | {href: 'https://developer.cal.com', label: 'Developer', position: 'left'},
33 | {
34 | type: 'doc',
35 | docId: 'intro',
36 | position: 'left',
37 | label: 'Design',
38 | },
39 | {
40 | href: 'https://github.com/calendso/calendso',
41 | label: 'GitHub',
42 | position: 'right',
43 | },
44 | ],
45 | },
46 | footer: {
47 | style: 'light',
48 | links: [
49 | {
50 | title: 'Cal.com, Inc.',
51 | items: [
52 | {
53 | label: 'Website',
54 | href: 'https://cal.com',
55 | },
56 | {
57 | label: 'Slack',
58 | href: 'https://cal.com/slack',
59 | },
60 | {
61 | label: 'Jobs',
62 | href: 'https://cal.com/jobs',
63 | },
64 | ],
65 | },
66 | {
67 | title: 'Repositories',
68 | items: [
69 | {
70 | label: 'Calendso',
71 | href: 'https://github.com/calendso/calendso',
72 | },
73 | {
74 | label: 'Documentation',
75 | href: 'https://github.com/calendso/docs',
76 | },
77 | {
78 | label: 'Docker',
79 | href: 'https://github.com/calendso/docker',
80 | },
81 | ],
82 | },
83 | {
84 | title: 'Social',
85 | items: [
86 | {
87 | label: 'Twitter',
88 | href: 'https://twitter.com/calendso',
89 | },
90 | {
91 | label: 'GitHub',
92 | href: 'https://github.com/calendso/calendso',
93 | },
94 | ],
95 | },
96 | ],
97 | copyright: `Copyright © ${new Date().getFullYear()} Cal.com, Inc.`,
98 | },
99 | prism: {
100 | theme: lightCodeTheme,
101 | darkTheme: darkCodeTheme,
102 | },
103 | },
104 | presets: [
105 | [
106 | '@docusaurus/preset-classic',
107 | {
108 | docs: {
109 | sidebarPath: require.resolve('./sidebars.js'),
110 | // Please change this to your repo.
111 | editUrl:
112 | 'https://github.com/calendso/design/edit/main/',
113 | },
114 | blog: {
115 | showReadingTime: true,
116 | // Please change this to your repo.
117 | editUrl:
118 | 'https://github.com/calendso/design/edit/main/blog/',
119 | },
120 | theme: {
121 | customCss: require.resolve('./src/css/custom.css'),
122 | },
123 | },
124 | ],
125 | ],
126 | };
127 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "design",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "docusaurus": "docusaurus",
7 | "start": "docusaurus start",
8 | "build": "docusaurus build",
9 | "swizzle": "docusaurus swizzle",
10 | "deploy": "docusaurus deploy",
11 | "clear": "docusaurus clear",
12 | "serve": "docusaurus serve",
13 | "write-translations": "docusaurus write-translations",
14 | "write-heading-ids": "docusaurus write-heading-ids"
15 | },
16 | "dependencies": {
17 | "@docusaurus/core": "2.0.0-beta.6",
18 | "@docusaurus/preset-classic": "2.0.0-beta.6",
19 | "@mdx-js/react": "^1.6.21",
20 | "@svgr/webpack": "^5.5.0",
21 | "clsx": "^1.1.1",
22 | "file-loader": "^6.2.0",
23 | "prism-react-renderer": "^1.2.1",
24 | "react": "^17.0.1",
25 | "react-dom": "^17.0.1",
26 | "url-loader": "^4.1.1"
27 | },
28 | "browserslist": {
29 | "production": [
30 | ">0.5%",
31 | "not dead",
32 | "not op_mini all"
33 | ],
34 | "development": [
35 | "last 1 chrome version",
36 | "last 1 firefox version",
37 | "last 1 safari version"
38 | ]
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/sidebars.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creating a sidebar enables you to:
3 | - create an ordered group of docs
4 | - render a sidebar for each doc of that group
5 | - provide next/previous navigation
6 |
7 | The sidebars can be generated from the filesystem, or explicitly defined here.
8 |
9 | Create as many sidebars as you want.
10 | */
11 |
12 | module.exports = {
13 | // By default, Docusaurus generates a sidebar from the docs folder structure
14 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
15 |
16 | // But you can create a sidebar manually
17 | /*
18 | tutorialSidebar: [
19 | {
20 | type: 'category',
21 | label: 'Tutorial',
22 | items: ['hello'],
23 | },
24 | ],
25 | */
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/HomepageFeatures.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import styles from './HomepageFeatures.module.css';
4 | import Link from '@docusaurus/Link';
5 |
6 | const CategoryList = [
7 | {
8 | link: "/docs/branding",
9 | title: "Cal Branding",
10 | Svg: require("../../static/img/categories/default.svg").default,
11 | description: (
12 | <>Our branding guidelines and *.svgs to download.
13 | ),
14 | },
15 | {
16 | link: "/docs/colors",
17 | title: "Colors",
18 | Svg: require("../../static/img/categories/colors.svg").default,
19 | description: (
20 | <>Our color palette that all of our applications and services use.
21 | ),
22 | },
23 | {
24 | link: "/docs/typography",
25 | title: "Typography",
26 | Svg: require("../../static/img/categories/typography.svg").default,
27 | description: (
28 | <>The fonts that we use and the best practices surrounding text.
29 | ),
30 | },
31 | {
32 | link: "/docs/icons",
33 | title: "Icons",
34 | Svg: require("../../static/img/categories/icons.svg").default,
35 | description: (
36 | <>Our icon set and guidelines on when to use each type of icon.
37 | ),
38 | },
39 | ];
40 |
41 | function Category({Svg, title, description, link}) {
42 | return (
43 |
44 |
45 |
53 |
54 | );
55 | }
56 |
57 | export default function HomepageCategories() {
58 | return (
59 |
46 |
47 |
48 |
49 |
52 | {title}
50 |{description}
51 |
61 |
67 |
62 | {CategoryList.map((props, idx) => (
63 |
66 |
12 |
15 | Design Documentation
13 |Explore our design system that all of our products and services are built with.
14 |