diff --git a/docs/components/design/buttonStyleText.js b/docs/components/design/buttonStyleText.js
new file mode 100644
index 0000000..4bc81f2
--- /dev/null
+++ b/docs/components/design/buttonStyleText.js
@@ -0,0 +1,9 @@
+import { Text } from '@hack4impact-uiuc/bridge';
+
+const ButtonStyleText = ({ children, order, ...props }) => (
+
+ {children}
+
+);
+
+export default ButtonStyleText;
diff --git a/docs/components/design/colorPalette.js b/docs/components/design/colorPalette.js
index 0755acf..8b2a261 100644
--- a/docs/components/design/colorPalette.js
+++ b/docs/components/design/colorPalette.js
@@ -18,7 +18,7 @@ const PaletteShade = ({ palette, name }) => (
color = palette.text;
}
if (label === 'white') {
- color = theme.colors.text.grayScale.main;
+ color = theme.colors.text.greyScale.main;
borderStyling = WhiteBorderStyling;
}
if (label === 'primary') {
diff --git a/docs/components/layout.js b/docs/components/layout.js
index d9d76b1..f254296 100644
--- a/docs/components/layout.js
+++ b/docs/components/layout.js
@@ -2,7 +2,7 @@
/* eslint-disable global-require */
import React from 'react';
import {
- Flex, Link, Heading, Text,
+ Flex, Heading,
} from '@hack4impact-uiuc/bridge';
import FeedbackContext from './feedback-context';
import Markdown from './markdown';
diff --git a/docs/components/sidebar.js b/docs/components/sidebar.js
index 99d15dd..2eef0b2 100644
--- a/docs/components/sidebar.js
+++ b/docs/components/sidebar.js
@@ -7,7 +7,7 @@ const sidebarSection = (section, title) => (
{section.name}
{
section.routes.map((elm) => (
- {elm.title}
+ {elm.title}
))
}
diff --git a/docs/package.json b/docs/package.json
index 7625421..1ae86b0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
"start": "next start"
},
"dependencies": {
- "@hack4impact-uiuc/bridge": "^0.0.7",
+ "@hack4impact-uiuc/bridge": "^0.0.8",
"@mdx-js/loader": "^1.6.1",
"@mdx-js/tag": "^0.20.3",
"@next/mdx": "^9.3.6",
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index a3ee0e0..72ba28c 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -25,15 +25,10 @@ class DocSite extends Document {
sizes="16x16"
href="/favicons/favicon-16x16.svg"
/>
-
-
-
-
-
diff --git a/docs/pages/design/alerts.mdx b/docs/pages/design/alerts.mdx
index 810aceb..8324280 100644
--- a/docs/pages/design/alerts.mdx
+++ b/docs/pages/design/alerts.mdx
@@ -57,7 +57,7 @@ Links within alerts are set in 18px HK Grotesk SemiBold text (check [typography]
- This is a success alert! This is an accompanying link.
+ This is a success alert! This is an accompanying {" link"}.
diff --git a/docs/pages/design/buttons.mdx b/docs/pages/design/buttons.mdx
index 4e0ad35..7acd5c0 100644
--- a/docs/pages/design/buttons.mdx
+++ b/docs/pages/design/buttons.mdx
@@ -1,7 +1,545 @@
export const meta = {type: "design", title: "Buttons"}
-import ColorPalette from '../../components/design/colorPalette.js'
-import { theme, Flex, Box } from '@hack4impact-uiuc/bridge'
+import CodeExampleBox from '../../components/CodeExampleBox'
+import { theme, Flex, Box, Heading, Button, Link, Text } from '@hack4impact-uiuc/bridge'
+import Row from '../../components/row.js'
+import Col from '../../components/col.js'
+import ButtonStyleText from '../../components/design/buttonStyleText.js'
+import LgButton from '../../public/docs-content/design/buttons/LgButton.svg'
+import MedButton from '../../public/docs-content/design/buttons/MedButton.svg'
+import SmButton from '../../public/docs-content/design/buttons/SmButton.svg'
import Layout from '../../components/layout.js'
-export default Layout({...meta})
\ No newline at end of file
+export default Layout({...meta})
+
+A button is used to trigger an action.
+
+- **Primary Buttons** are strong visual indicators to guide the user to complete their goal or journey. Example situations are where the user would want to go to the next step, starting a journey, etc. These should be obvious.
+- **Secondary Buttons** are used for to provide an alternative action to the primary one. These should be clear but not obvious.
+- **Tertiary Buttons** are used for actions that may be used by the user but not necessarily the action they would need to do right then.
+
+For the primary set of colors (blue), you should use a different shade based on the background its on top of (note the differences in hover as well).
+
+#### Primary Color
+
+
+
+
+ n/a
+
+
+
+
+
+
+#### For all other colors
+
+This includes secondary colors (red, green, yellow) and indigo. You should use the "dark" shade of the color for the hover state and the "light" shade of the color for disabled state. Look at [Colors](/design/colors) from more specifics.
+
+
+
+
+ State
+
+
+
+
+ Primary
+
+
+
+
+ Secondary
+
+
+
+
+
+
+
+
+
+ Active
+
+
+
+
+
+
+ Use the primary color in the palette.
+
+
+
+
+
+
+
+ Use the primary color in the palette for both border and text.
+
+
+
+
+
+
+
+
+ Hovered
+
+
+
+
+
+
+ Use the “dark” color in the palette.
+
+
+
+
+
+
+
+ Use the “dark” color in the palette for both border and text..
+
+
+
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+ Use the “lighter” color in the palette.
+
+
+
+
+
+
+
+ Use the “lighter” color in the palette for both border and text.
+
+
+
+
+
+
+
+#### Button Sizing
+There are 3 sizes of buttons. Large buttons are mainly used for call to actions and homepage. Use sparingly.
+
+Large
+
+
+
+Medium
+
+
+
+Small
+
+
+
+
+
+
+#### Basic Visual Style
+
+**Borders**
+
+Buttons have a border radius of 13 px.
+Secondary Buttons have border widths of 2 px.
+
+
+
+**Drop Shadow**
+
+Drop shadows have these attributes: `box-shadow: 0 1px 6px 2px rgba(0,0,0,0.15);`
+
+
+
+**Inline Links**
+
+Inline links should inherit text style.
+
+
+
+**Button Typography**
+
+Large & Medium Button
+
+
+
+ Font
+ {theme.typography.button.fontFamily}
+
+
+
+
+ Letter Spacing
+ {theme.typography.buttonSmall.letterSpacing}
+
+
+
+
+ Line Height
+ {theme.typography.buttonSmall.lineHeight}
+
+
+
+
+
diff --git a/docs/pages/design/colors.mdx b/docs/pages/design/colors.mdx
index 2ddbc83..3c2ba91 100644
--- a/docs/pages/design/colors.mdx
+++ b/docs/pages/design/colors.mdx
@@ -23,7 +23,7 @@ Secondary colors are for actions or states. Green is for success. Red is for err
Top color indicates a color that can be used for main text.
Bottom color is used for supporting text.
-
+
#### Usage
diff --git a/docs/pages/design/tags.mdx b/docs/pages/design/tags.mdx
index 088e2f0..a1baba3 100644
--- a/docs/pages/design/tags.mdx
+++ b/docs/pages/design/tags.mdx
@@ -1,4 +1,88 @@
export const meta = {type: "design", title: "Tags"}
+import { Tag, Box, Flex } from '@hack4impact-uiuc/bridge'
+import CodeExampleBox from '../../components/CodeExampleBox'
+
import Layout from '../../components/layout.js'
-export default Layout({...meta})
\ No newline at end of file
+export default Layout({...meta})
+
+Tags are used for categorizing and labeling. Tags may be any color in your color palette, along with their light, primary, dark shades with white text. Check out [Bridge's color palette](/design/colors) for more information on colors.
+
+
+
+#### Light
+
+Light Red
+Light Yellow
+Light Green
+
+Light Blue
+Light Indigo
+Light Grey
+
+
+
+
+#### Primary
+
+Red
+Yellow
+Green
+
+Blue
+Indigo
+Grey
+
+
+
+
+#### Dark
+
+Dark Red
+Dark Yellow
+Dark Green
+
+Dark Blue
+Dark Indigo
+Dark Grey
+
+
+
+
+
+
+### Tags Visual Style
+
+**Structure and Spacing**
+
+
+
+**Dimensions**
+
+Tags have horizontal padding of 8 px and vertical padding of 8 px.
+Tags have a default height of 28 px.
+
+
+
+**Borders**
+
+Tags have a border radius of 4 px.
+
+
+
+**Text**
+
+Buttons use body text style.
+
+
+
+### Usage
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/pages/design/typography.mdx b/docs/pages/design/typography.mdx
index d40de81..99d455d 100644
--- a/docs/pages/design/typography.mdx
+++ b/docs/pages/design/typography.mdx
@@ -1,6 +1,6 @@
export const meta = {type: "design", title: "Typography"}
-import { Heading, Text, theme} from '@hack4impact-uiuc/bridge'
+import { Heading, Text, Box, theme } from '@hack4impact-uiuc/bridge'
import Row from '../../components/row.js'
import Col from '../../components/col.js'
@@ -412,31 +412,31 @@ typography styles.
Font
- {theme.typography.body.fontFamily}
+ {theme.typography.tags.fontFamily}
+
+
+**Dimensions**
+
+Tags have horizontal padding of 8 px and vertical padding of 8 px.
+Tags have a default height of 28 px.
+
+
+ 
+