diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js
index 9d474682b..d467d3958 100644
--- a/src/Alert/Alert.js
+++ b/src/Alert/Alert.js
@@ -3,24 +3,26 @@ import React, { type Node } from 'react';
import type { Palette } from '../types';
import _Alert from './styled';
-import _AlertTitle from './AlertTitle';
+import AlertTitle from './AlertTitle';
+import Text from '../Text';
type Props = {
className?: string,
- children: Node,
+ children?: Node,
palette?: Palette,
title?: string
};
const Alert = ({ className, children, palette, title, ...props }: Props) => (
<_Alert role="alert" className={className} palette={palette} {...props}>
- {title && <_AlertTitle>{title}}
- {children}
+ {title && {title}}
+ {typeof children === 'string' ? {children} : children}
);
Alert.defaultProps = {
- className: null,
+ className: undefined,
+ children: undefined,
palette: 'default',
title: undefined
};
diff --git a/src/Alert/Alert.mdx b/src/Alert/Alert.mdx
index 43aec6dd3..88f524c2d 100644
--- a/src/Alert/Alert.mdx
+++ b/src/Alert/Alert.mdx
@@ -16,11 +16,22 @@ import Alert from '../Alert';
## Basic Usage
- Alert message
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+
+
+## Titles
+
+You can set a title with the `title` prop.
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+
## Colors
+An alert can take a color from the palette.
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
@@ -30,6 +41,25 @@ import Alert from '../Alert';
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+## Inline alerts
+
+To inline an alert, set the `display` prop to `inline-block`.
+
+
+ This is an inline alert.
+
+
+## Tints
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+
+
## Props
diff --git a/src/Alert/AlertTitle.js b/src/Alert/AlertTitle.js
index e8a7b34fb..e993f60ab 100644
--- a/src/Alert/AlertTitle.js
+++ b/src/Alert/AlertTitle.js
@@ -6,6 +6,10 @@ type Props = {
children: Node
};
-const AlertTitle = ({ children, ...props }: Props) => <_AlertTitle {...props}>{children};
+const AlertTitle = ({ children, ...props }: Props) => (
+ <_AlertTitle as="h6" isSemiBold {...props}>
+ {children}
+
+);
export default AlertTitle;
diff --git a/src/Alert/__tests__/__snapshots__/Alert.test.js.snap b/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
index e390e6247..bb1107bf6 100644
--- a/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
+++ b/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
@@ -53,13 +53,67 @@ exports[`renders correctly 1`] = `
}
.c2 {
- background-color: #d9dee2;
+ background-color: white;
+ border: 1px solid #e6e6e6;
border-left: 4px solid #435a6f;
border-radius: 4px;
- color: #2e3e4d;
+ color: #435a6f;
padding: 1rem;
}
+abbr.c4 {
+ border-bottom: 1px dotted;
+ cursor: help;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+i.c4 {
+ font-style: italic;
+}
+
+kbd.c4 {
+ background: #454d5d;
+ border-radius: 0.1rem;
+ color: #fff;
+ padding: 0.1rem 0.2rem;
+}
+
+mark.c4 {
+ background: #ffe9b3;
+ border-radius: 0.1rem;
+ padding: 0.1rem 0.2rem;
+}
+
+strong.c4 {
+ font-weight: bold;
+}
+
+sub.c4,
+sup.c4 {
+ font-size: 0.8em;
+ vertical-align: baseline;
+}
+
+ins.c4,
+u.c4 {
+ -webkit-text-decoration-skip: ink edges;
+ text-decoration-skip: ink edges;
+}
+
+i.c4,
+cite.c4,
+var.c4,
+em.c4 {
+ font-style: italic;
+}
+
+kbd.c4,
+pre.c4,
+samp.c4 {
+ font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+}
+
@@ -67,7 +121,11 @@ exports[`renders correctly 1`] = `
class="c2 c3"
role="alert"
>
- Alert
+
+ Alert
+
`;
@@ -125,13 +183,67 @@ exports[`renders correctly when a palette prop is set 1`] = `
}
.c2 {
- background-color: #d7d3ed;
+ background-color: white;
+ border: 1px solid #e6e6e6;
border-left: 4px solid #3926a5;
border-radius: 4px;
- color: #1c1352;
+ color: #3926a5;
padding: 1rem;
}
+abbr.c4 {
+ border-bottom: 1px dotted;
+ cursor: help;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+i.c4 {
+ font-style: italic;
+}
+
+kbd.c4 {
+ background: #454d5d;
+ border-radius: 0.1rem;
+ color: #fff;
+ padding: 0.1rem 0.2rem;
+}
+
+mark.c4 {
+ background: #ffe9b3;
+ border-radius: 0.1rem;
+ padding: 0.1rem 0.2rem;
+}
+
+strong.c4 {
+ font-weight: bold;
+}
+
+sub.c4,
+sup.c4 {
+ font-size: 0.8em;
+ vertical-align: baseline;
+}
+
+ins.c4,
+u.c4 {
+ -webkit-text-decoration-skip: ink edges;
+ text-decoration-skip: ink edges;
+}
+
+i.c4,
+cite.c4,
+var.c4,
+em.c4 {
+ font-style: italic;
+}
+
+kbd.c4,
+pre.c4,
+samp.c4 {
+ font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+}
+
@@ -139,7 +251,11 @@ exports[`renders correctly when a palette prop is set 1`] = `
class="c2 c3"
role="alert"
>
- Alert
+
+ Alert
+
`;
@@ -171,20 +287,6 @@ exports[`renders correctly when a title prop is set 1`] = `
color: #fcfcfc;
}
-.c6 {
- margin: unset;
- padding: unset;
- border: unset;
- background: unset;
- font: unset;
- font-family: inherit;
- font-size: 100%;
- box-sizing: border-box;
- background-color: unset;
- color: inherit;
- margin-bottom: 0.25rem !important;
-}
-
.c0 {
box-sizing: border-box;
font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
@@ -211,21 +313,140 @@ exports[`renders correctly when a title prop is set 1`] = `
}
.c5 {
- display: inline-block;
+ font-weight: 700;
+ line-height: 1.2;
+ margin-bottom: 1rem;
+}
+
+.heading.c5 + .sub-heading {
+ margin-top: -1rem;
+}
+
+.c5:last-child {
+ margin-bottom: 0;
+}
+
+h1.c5 {
+ font-size: 3rem;
+}
+
+h2.c5 {
+ font-size: 2.5rem;
+}
+
+h3.c5 {
+ font-size: 2rem;
+}
+
+h4.c5 {
+ font-size: 1.5rem;
+}
+
+h5.c5 {
+ font-size: 1.25rem;
+}
+
+h6.c5 {
+ font-size: 1rem;
}
.c4 {
- display: block;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
}
.c2 {
- background-color: #d9dee2;
+ background-color: white;
+ border: 1px solid #e6e6e6;
border-left: 4px solid #435a6f;
border-radius: 4px;
- color: #2e3e4d;
+ color: #435a6f;
padding: 1rem;
}
+abbr.c6 {
+ border-bottom: 1px dotted;
+ cursor: help;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+i.c6 {
+ font-style: italic;
+}
+
+kbd.c6 {
+ background: #454d5d;
+ border-radius: 0.1rem;
+ color: #fff;
+ padding: 0.1rem 0.2rem;
+}
+
+mark.c6 {
+ background: #ffe9b3;
+ border-radius: 0.1rem;
+ padding: 0.1rem 0.2rem;
+}
+
+strong.c6 {
+ font-weight: bold;
+}
+
+sub.c6,
+sup.c6 {
+ font-size: 0.8em;
+ vertical-align: baseline;
+}
+
+ins.c6,
+u.c6 {
+ -webkit-text-decoration-skip: ink edges;
+ text-decoration-skip: ink edges;
+}
+
+i.c6,
+cite.c6,
+var.c6,
+em.c6 {
+ font-style: italic;
+}
+
+kbd.c6,
+pre.c6,
+samp.c6 {
+ font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+}
+
+@media (max-width:480px) {
+ h1.c5 {
+ font-size: 2rem;
+ }
+}
+
+@media (max-width:480px) {
+ h2.c5 {
+ font-size: 1.8rem;
+ }
+}
+
+@media (max-width:480px) {
+ h3.c5 {
+ font-size: 1.6rem;
+ }
+}
+
+@media (max-width:480px) {
+ h4.c5 {
+ font-size: 1.4rem;
+ }
+}
+
+@media (max-width:480px) {
+ h5.c5 {
+ font-size: 1.2rem;
+ }
+}
+
@@ -233,14 +454,16 @@ exports[`renders correctly when a title prop is set 1`] = `
class="c2 c3"
role="alert"
>
-
- Alert
+
+
+ Alert
+
`;
@@ -298,10 +521,11 @@ exports[`renders correctly with a custom element 1`] = `
}
.c2 {
- background-color: #d9dee2;
+ background-color: white;
+ border: 1px solid #e6e6e6;
border-left: 4px solid #435a6f;
border-radius: 4px;
- color: #2e3e4d;
+ color: #435a6f;
padding: 1rem;
}
diff --git a/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap b/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap
index 8881cabb7..b19649b9e 100644
--- a/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap
+++ b/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap
@@ -14,20 +14,6 @@ exports[`renders correctly 1`] = `
color: inherit;
}
-.c4 {
- margin: unset;
- padding: unset;
- border: unset;
- background: unset;
- font: unset;
- font-family: inherit;
- font-size: 100%;
- box-sizing: border-box;
- background-color: unset;
- color: inherit;
- margin-bottom: 0.25rem !important;
-}
-
.c0 {
box-sizing: border-box;
font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
@@ -54,22 +40,85 @@ exports[`renders correctly 1`] = `
}
.c3 {
- display: inline-block;
+ font-weight: 700;
+ line-height: 1.2;
+ margin-bottom: 1rem;
+}
+
+.heading.c3 + .sub-heading {
+ margin-top: -1rem;
+}
+
+.c3:last-child {
+ margin-bottom: 0;
+}
+
+h1.c3 {
+ font-size: 3rem;
+}
+
+h2.c3 {
+ font-size: 2.5rem;
+}
+
+h3.c3 {
+ font-size: 2rem;
+}
+
+h4.c3 {
+ font-size: 1.5rem;
+}
+
+h5.c3 {
+ font-size: 1.25rem;
+}
+
+h6.c3 {
+ font-size: 1rem;
}
.c2 {
- display: block;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+}
+
+@media (max-width:480px) {
+ h1.c3 {
+ font-size: 2rem;
+ }
+}
+
+@media (max-width:480px) {
+ h2.c3 {
+ font-size: 1.8rem;
+ }
+}
+
+@media (max-width:480px) {
+ h3.c3 {
+ font-size: 1.6rem;
+ }
+}
+
+@media (max-width:480px) {
+ h4.c3 {
+ font-size: 1.4rem;
+ }
+}
+
+@media (max-width:480px) {
+ h5.c3 {
+ font-size: 1.2rem;
+ }
}
-
+
`;
diff --git a/src/Alert/styled.js b/src/Alert/styled.js
index 4aa3679de..793bc07f9 100644
--- a/src/Alert/styled.js
+++ b/src/Alert/styled.js
@@ -1,24 +1,51 @@
-import styled from 'reakit/styled';
+import styled, { css } from 'reakit/styled';
import { palette, theme } from 'styled-tools';
import { Box } from '../primitives';
-import Label from '../Label';
+import Heading from '../Heading';
+
+export const AlertTitle = styled(Heading)`
+ font-weight: ${theme('fannypack.fontWeights.semibold')};
+ margin-bottom: ${theme('fannypack.layout.spacing.xxsmall')}rem;
-export const AlertTitle = styled(Label)`
& {
- ${theme('fannypack.Alert.title.base')};
+ ${theme('fannypack.Alert.Title.base')};
}
`;
-export default styled(Box)`
+const getTextColor = props => {
+ const { palette: _palette } = props;
+ if (_palette === 'default') {
+ return palette('text')(props);
+ }
+ if (_palette === 'warning') {
+ return palette('warningDarkest')(props);
+ }
+ return palette(_palette)(props);
+};
+
+const tintAttributes = css`
background-color: ${props =>
props.palette === 'default' ? palette('textTint')(props) : palette(`${props.palette}Tint`)(props)};
+ border-top-width: 0;
+ border-right-width: 0;
+ border-bottom-width: 0;
+ color: ${props =>
+ props.palette === 'default' ? palette('textTintInverted')(props) : palette(`${props.palette}TintInverted`)(props)};
+`;
+
+export default styled(Box)`
+ background-color: white;
+ border: 1px solid ${palette('whiteDarkest')};
border-left: 4px solid
${props => (props.palette === 'default' ? palette('text')(props) : palette(props.palette)(props))};
border-radius: 4px;
- color: ${props =>
- props.palette === 'default' ? palette('textTintInverted')(props) : palette(`${props.palette}TintInverted`)(props)};
+ color: ${getTextColor};
padding: 1rem;
+ & {
+ ${props => props.hasTint && tintAttributes};
+ }
+
& {
${theme('fannypack.Alert.base')};
}
diff --git a/src/Button/__tests__/__snapshots__/Button.test.js.snap b/src/Button/__tests__/__snapshots__/Button.test.js.snap
index 62ecbd989..c406bdb5b 100644
--- a/src/Button/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/Button/__tests__/__snapshots__/Button.test.js.snap
@@ -94,7 +94,7 @@ exports[`renders correctly for a button that is loading 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -236,7 +236,7 @@ exports[`renders correctly for a button with a custom element 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -350,7 +350,7 @@ exports[`renders correctly for a button with a palette prop set 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -491,7 +491,7 @@ exports[`renders correctly for a colored button that is loading 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -633,7 +633,7 @@ exports[`renders correctly for a default button 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -746,7 +746,7 @@ exports[`renders correctly for a disabled button 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -852,7 +852,7 @@ exports[`renders correctly for a link button 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -998,7 +998,7 @@ exports[`renders correctly for a link button that is loading 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -1153,7 +1153,7 @@ exports[`renders correctly for an outlined button 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -1304,7 +1304,7 @@ exports[`renders correctly for an outlined button that is loading 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
diff --git a/src/Buttons/__tests__/__snapshots__/Buttons.test.js.snap b/src/Buttons/__tests__/__snapshots__/Buttons.test.js.snap
index 373814edb..bc9dd995a 100644
--- a/src/Buttons/__tests__/__snapshots__/Buttons.test.js.snap
+++ b/src/Buttons/__tests__/__snapshots__/Buttons.test.js.snap
@@ -70,7 +70,7 @@ exports[`renders correctly 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -216,7 +216,7 @@ exports[`renders correctly for grouped buttons 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
diff --git a/src/Group/__tests__/__snapshots__/Group.test.js.snap b/src/Group/__tests__/__snapshots__/Group.test.js.snap
index 596375d87..a27b3c63f 100644
--- a/src/Group/__tests__/__snapshots__/Group.test.js.snap
+++ b/src/Group/__tests__/__snapshots__/Group.test.js.snap
@@ -81,7 +81,7 @@ exports[`renders correctly for a basic group 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -281,7 +281,7 @@ exports[`renders correctly for a responsive group 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
@@ -529,7 +529,7 @@ exports[`renders correctly for a vertical group 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
- font-weight: 500;
+ font-weight: 600;
height: 2.5em;
-webkit-box-pack: center;
-webkit-justify-content: center;
diff --git a/src/Heading/__tests__/__snapshots__/Heading.test.js.snap b/src/Heading/__tests__/__snapshots__/Heading.test.js.snap
index 3ecdb1540..c74090190 100644
--- a/src/Heading/__tests__/__snapshots__/Heading.test.js.snap
+++ b/src/Heading/__tests__/__snapshots__/Heading.test.js.snap
@@ -352,7 +352,7 @@ h6.c3 {
}
.c3 {
- font-weight: 500;
+ font-weight: 600;
}
@media (max-width:480px) {
@@ -511,7 +511,7 @@ h6.c2 {
}
.c2 {
- font-weight: 500;
+ font-weight: 600;
}
@media (max-width:480px) {
diff --git a/src/Tag/__tests__/__snapshots__/Tag.test.js.snap b/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
index ce2d3baba..311ba20fa 100644
--- a/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
+++ b/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
@@ -61,7 +61,7 @@ exports[`colors renders correctly for a tag with color danger 1`] = `
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 600;
padding: 0.2em 0.4em;
}
@@ -135,7 +135,7 @@ exports[`colors renders correctly for a tag with color primary 1`] = `
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 600;
padding: 0.2em 0.4em;
}
@@ -209,7 +209,7 @@ exports[`colors renders correctly for a tag with color success 1`] = `
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 600;
padding: 0.2em 0.4em;
}
@@ -283,7 +283,7 @@ exports[`colors renders correctly for a tag with color warning 1`] = `
border-radius: 4px;
color: #000;
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 600;
padding: 0.2em 0.4em;
}
@@ -357,7 +357,7 @@ exports[`renders correctly 1`] = `
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 600;
padding: 0.2em 0.4em;
}
@@ -440,7 +440,7 @@ exports[`renders correctly for a list of tags 1`] = `
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 600;
padding: 0.2em 0.4em;
}
@@ -552,7 +552,7 @@ exports[`sizes renders correctly for a tag with size large 1`] = `
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 600;
padding: 0.2em 0.4em;
}
@@ -631,7 +631,7 @@ exports[`sizes renders correctly for a tag with size medium 1`] = `
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 600;
padding: 0.2em 0.4em;
}
diff --git a/src/themes/default.js b/src/themes/default.js
index c4c291917..ca4482588 100644
--- a/src/themes/default.js
+++ b/src/themes/default.js
@@ -119,7 +119,7 @@ export default (overrides: ThemeConfig = {}): ThemeConfig => ({
},
fontWeights: {
normal: 400,
- semibold: 500,
+ semibold: 600,
bold: 700
},
Container: {
diff --git a/src/types.js b/src/types.js
index ff8e2f903..d3e973378 100644
--- a/src/types.js
+++ b/src/types.js
@@ -11,7 +11,10 @@ export type Size = 'default' | 'small' | 'medium' | 'large';
/* ====== START: THEMES ====== */
export type Stylesheet = string | Object;
export type AlertThemeConfig = {
- base?: Stylesheet
+ base?: Stylesheet,
+ Title?: {
+ base?: Stylesheet
+ }
};
export type BlockquoteThemeConfig = {
base?: Stylesheet