Skip to content

Commit

Permalink
feat: enable theme switching on the docsite (#124)
Browse files Browse the repository at this point in the history 
* feat: improve out of the box styling for all paste components

* feat: add theme switching to the website
  • Loading branch information
@SiTaggart
SiTaggart committed Nov 8, 2019
1 parent 582245b commit df797e5
Show file tree
Hide file tree
Showing 49 changed files with 893 additions and 805 deletions.
9 changes: 6 additions & 3 deletions packages/paste-core/components/anchor/__tests__/__snapshots__/anchor.test.tsx.snap
View file
Expand Up @@ -3,7 +3,8 @@
exports[`Anchor it should render an anchor 1`] = ` exports[`Anchor it should render an anchor 1`] = `
.emotion-2 { .emotion-2 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -48,7 +49,8 @@ exports[`Anchor it should render an anchor 1`] = `
exports[`Anchor it should render an external anchor 1`] = ` exports[`Anchor it should render an external anchor 1`] = `
.emotion-2 { .emotion-2 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -95,7 +97,8 @@ exports[`Anchor it should render an external anchor 1`] = `
exports[`Anchor it should render an external anchor with overwritten target and rel 1`] = ` exports[`Anchor it should render an external anchor with overwritten target and rel 1`] = `
.emotion-2 { .emotion-2 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down
91 changes: 48 additions & 43 deletions packages/paste-core/components/button/src/styles.ts
View file
Expand Up @@ -9,11 +9,13 @@ import {ButtonWrapperProps, ButtonChildrenProps} from './types';
* Sizes * Sizes
*/ */
const sizeReset = css` const sizeReset = css`
font-size: 100%;
padding: 0; padding: 0;
`; `;
const sizeIcon = (props: ButtonWrapperProps): SerializedStyles => css` const sizeIcon = (props: ButtonWrapperProps): SerializedStyles => css`
padding: ${themeGet('space.space30')(props)}; padding: ${themeGet('space.space30')(props)};
border-radius: ${themeGet('radii.borderRadius20')(props)}; border-radius: ${themeGet('radii.borderRadius20')(props)};
font-size: 100%;
/* To fix abnormal button padding-bottom */ /* To fix abnormal button padding-bottom */
line-height: unset; line-height: unset;
`; `;
Expand All @@ -22,58 +24,61 @@ const sizeSmall = (props: ButtonWrapperProps): SerializedStyles => css`
border-radius: ${themeGet('radii.borderRadius10')(props)}; border-radius: ${themeGet('radii.borderRadius10')(props)};
font-size: ${themeGet('fontSizes.fontSize30')(props)}; font-size: ${themeGet('fontSizes.fontSize30')(props)};
font-weight: ${themeGet('fontWeights.fontWeightSemibold')(props)}; font-weight: ${themeGet('fontWeights.fontWeightSemibold')(props)};
line-height: 24px; line-height: ${themeGet('lineHeights.lineHeight30')(props)};
`; `;
const sizeDefault = (props: ButtonWrapperProps): SerializedStyles => css` const sizeDefault = (props: ButtonWrapperProps): SerializedStyles => css`
padding: ${themeGet('space.space30')(props)} ${themeGet('space.space60')(props)}; padding: ${themeGet('space.space30')(props)} ${themeGet('space.space60')(props)};
border-radius: ${themeGet('radii.borderRadius20')(props)}; border-radius: ${themeGet('radii.borderRadius20')(props)};
font-size: ${themeGet('fontSizes.fontSize30')(props)}; font-size: ${themeGet('fontSizes.fontSize30')(props)};
font-weight: ${themeGet('fontWeights.fontWeightSemibold')(props)}; font-weight: ${themeGet('fontWeights.fontWeightSemibold')(props)};
line-height: 24px; line-height: ${themeGet('lineHeights.lineHeight30')(props)};
`; `;


/* /*
* Base * Base
*/ */
const baseButtonWrapper = css` const baseButtonWrapper = (props: ButtonWrapperProps): SerializedStyles => css`
/* Hide default browser styles */ /* Hide default browser styles */
appearance: none; appearance: none;
border: none; border: none;
display: inline-block; display: inline-block;
outline: none; outline: none;
background: none; background: none;
font-size: 100%;
transition: background-color 100ms ease-in, border-color 100ms ease-in; transition: background-color 100ms ease-in, border-color 100ms ease-in;
font-family: ${themeGet('fonts.fontFamilyText')(props)};
/* Remove extra black dotted border FF adds */ /* Remove extra black dotted border FF adds */
&::-moz-focus-inner { &::-moz-focus-inner {
border: none; border: none;
} }
`; `;
const baseEnabled = css([ const baseEnabled = (props: ButtonWrapperProps): SerializedStyles =>
baseButtonWrapper, css([
css` baseButtonWrapper(props),
text-decoration: none; css`
cursor: pointer; text-decoration: none;
cursor: pointer;
&:focus,
&:active { &:focus,
box-shadow: 0 0 0 4px rgba(0, 117, 195, 0.5); &:active {
} box-shadow: 0 0 0 4px rgba(0, 117, 195, 0.5);
`, }
]); `,
const baseLoading = css([ ]);
baseButtonWrapper, const baseLoading = (props: ButtonWrapperProps): SerializedStyles =>
css` css([
cursor: wait; baseButtonWrapper(props),
`, css`
]); cursor: wait;
const baseDisabled = css([ `,
baseButtonWrapper, ]);
css` const baseDisabled = (props: ButtonWrapperProps): SerializedStyles =>
cursor: not-allowed; css([
`, baseButtonWrapper(props),
]); css`
cursor: not-allowed;
`,
]);


/* /*
* Variants * Variants
Expand All @@ -87,7 +92,7 @@ const variantPrimaryBase = (props: ButtonWrapperProps): SerializedStyles => css`


const variantPrimaryEnabled = (props: ButtonWrapperProps): SerializedStyles => const variantPrimaryEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseEnabled, baseEnabled(props),
variantPrimaryBase(props), variantPrimaryBase(props),
css` css`
border-color: ${themeGet('borderColors.colorBorderPrimary')(props)}; border-color: ${themeGet('borderColors.colorBorderPrimary')(props)};
Expand All @@ -109,7 +114,7 @@ const variantPrimaryEnabled = (props: ButtonWrapperProps): SerializedStyles =>
]); ]);
const variantPrimaryLoading = (props: ButtonWrapperProps): SerializedStyles => const variantPrimaryLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseLoading, baseLoading(props),
variantPrimaryBase(props), variantPrimaryBase(props),
css` css`
&, &,
Expand All @@ -123,7 +128,7 @@ const variantPrimaryLoading = (props: ButtonWrapperProps): SerializedStyles =>
]); ]);
const variantPrimaryDisabled = (props: ButtonWrapperProps): SerializedStyles => const variantPrimaryDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseDisabled, baseDisabled(props),
variantPrimaryBase(props), variantPrimaryBase(props),
css` css`
border-color: ${themeGet('borderColors.colorBorderPrimaryLight')(props)}; border-color: ${themeGet('borderColors.colorBorderPrimaryLight')(props)};
Expand All @@ -144,7 +149,7 @@ const variantSecondaryBase = (props: ButtonWrapperProps): SerializedStyles => cs
`; `;
const variantSecondaryEnabled = (props: ButtonWrapperProps): SerializedStyles => const variantSecondaryEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseEnabled, baseEnabled(props),
variantSecondaryBase(props), variantSecondaryBase(props),
css` css`
color: ${themeGet('textColors.colorTextLink')(props)}; color: ${themeGet('textColors.colorTextLink')(props)};
Expand Down Expand Up @@ -172,7 +177,7 @@ const variantSecondaryEnabled = (props: ButtonWrapperProps): SerializedStyles =>
]); ]);
const variantSecondaryLoading = (props: ButtonWrapperProps): SerializedStyles => const variantSecondaryLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseLoading, baseLoading(props),
variantSecondaryBase(props), variantSecondaryBase(props),
css` css`
color: ${themeGet('textColors.colorTextLinkDarker')(props)}; color: ${themeGet('textColors.colorTextLinkDarker')(props)};
Expand All @@ -182,7 +187,7 @@ const variantSecondaryLoading = (props: ButtonWrapperProps): SerializedStyles =>
]); ]);
const variantSecondaryDisabled = (props: ButtonWrapperProps): SerializedStyles => const variantSecondaryDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseDisabled, baseDisabled(props),
variantSecondaryBase(props), variantSecondaryBase(props),
css` css`
color: ${themeGet('textColors.colorTextLinkLight')(props)}; color: ${themeGet('textColors.colorTextLinkLight')(props)};
Expand All @@ -199,7 +204,7 @@ const variantDestructiveBase = (props: ButtonWrapperProps): SerializedStyles =>


const variantDestructiveEnabled = (props: ButtonWrapperProps): SerializedStyles => const variantDestructiveEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseEnabled, baseEnabled(props),
variantDestructiveBase(props), variantDestructiveBase(props),
css` css`
color: ${themeGet('textColors.colorTextLinkDestructive')(props)}; color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
Expand Down Expand Up @@ -227,7 +232,7 @@ const variantDestructiveEnabled = (props: ButtonWrapperProps): SerializedStyles
]); ]);
const variantDestructiveLoading = (props: ButtonWrapperProps): SerializedStyles => const variantDestructiveLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseLoading, baseLoading(props),
variantDestructiveBase(props), variantDestructiveBase(props),
css` css`
color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)}; color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
Expand All @@ -237,7 +242,7 @@ const variantDestructiveLoading = (props: ButtonWrapperProps): SerializedStyles
]); ]);
const variantDestructiveDisabled = (props: ButtonWrapperProps): SerializedStyles => const variantDestructiveDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseDisabled, baseDisabled(props),
variantDestructiveBase(props), variantDestructiveBase(props),
css` css`
color: ${themeGet('textColors.colorTextLinkDestructiveLight')(props)}; color: ${themeGet('textColors.colorTextLinkDestructiveLight')(props)};
Expand All @@ -251,7 +256,7 @@ const variantDestructiveLinkBase = css`
`; `;
const variantDestructiveLinkEnabled = (props: ButtonWrapperProps): SerializedStyles => const variantDestructiveLinkEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseEnabled, baseEnabled(props),
variantDestructiveLinkBase, variantDestructiveLinkBase,
css` css`
color: ${themeGet('textColors.colorTextLinkDestructive')(props)}; color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
Expand All @@ -273,15 +278,15 @@ const variantDestructiveLinkEnabled = (props: ButtonWrapperProps): SerializedSty
]); ]);
const variantDestructiveLinkLoading = (props: ButtonWrapperProps): SerializedStyles => const variantDestructiveLinkLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseLoading, baseLoading(props),
variantDestructiveLinkBase, variantDestructiveLinkBase,
css` css`
color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)}; color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
`, `,
]); ]);
const variantDestructiveLinkDisabled = (props: ButtonWrapperProps): SerializedStyles => const variantDestructiveLinkDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseDisabled, baseDisabled(props),
variantDestructiveLinkBase, variantDestructiveLinkBase,
css` css`
color: ${themeGet('textColors.colorTextLinkDestructiveLight')(props)}; color: ${themeGet('textColors.colorTextLinkDestructiveLight')(props)};
Expand All @@ -294,7 +299,7 @@ const variantLinkBase = css`
`; `;
const variantLinkEnabled = (props: ButtonWrapperProps): SerializedStyles => const variantLinkEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseEnabled, baseEnabled(props),
variantLinkBase, variantLinkBase,
css` css`
color: ${themeGet('textColors.colorTextLink')(props)}; color: ${themeGet('textColors.colorTextLink')(props)};
Expand All @@ -316,15 +321,15 @@ const variantLinkEnabled = (props: ButtonWrapperProps): SerializedStyles =>
]); ]);
const variantLinkLoading = (props: ButtonWrapperProps): SerializedStyles => const variantLinkLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseLoading, baseLoading(props),
variantLinkBase, variantLinkBase,
css` css`
color: ${themeGet('textColors.colorTextLinkDarker')(props)}; color: ${themeGet('textColors.colorTextLinkDarker')(props)};
`, `,
]); ]);
const variantLinkDisabled = (props: ButtonWrapperProps): SerializedStyles => const variantLinkDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([ css([
baseDisabled, baseDisabled(props),
variantLinkBase, variantLinkBase,
css` css`
color: ${themeGet('textColors.colorTextLinkLight')(props)}; color: ${themeGet('textColors.colorTextLinkLight')(props)};
Expand Down
21 changes: 14 additions & 7 deletions packages/paste-core/components/heading/__tests__/__snapshots__/heading.test.tsx.snap
View file
Expand Up @@ -3,7 +3,8 @@
exports[`Heading it should render an H1 at fontSize90 1`] = ` exports[`Heading it should render an H1 at fontSize90 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -42,7 +43,8 @@ exports[`Heading it should render an H1 at fontSize90 1`] = `
exports[`Heading it should render an H2 at fontSize70 1`] = ` exports[`Heading it should render an H2 at fontSize70 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -81,7 +83,8 @@ exports[`Heading it should render an H2 at fontSize70 1`] = `
exports[`Heading it should render an H3 at fontSize60 1`] = ` exports[`Heading it should render an H3 at fontSize60 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -120,7 +123,8 @@ exports[`Heading it should render an H3 at fontSize60 1`] = `
exports[`Heading it should render an H4 at fontSize40 1`] = ` exports[`Heading it should render an H4 at fontSize40 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -159,7 +163,8 @@ exports[`Heading it should render an H4 at fontSize40 1`] = `
exports[`Heading it should render an H5 at fontSize30 1`] = ` exports[`Heading it should render an H5 at fontSize30 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -198,7 +203,8 @@ exports[`Heading it should render an H5 at fontSize30 1`] = `
exports[`Heading it should render an H6 at fontSize20 1`] = ` exports[`Heading it should render an H6 at fontSize20 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -237,7 +243,8 @@ exports[`Heading it should render an H6 at fontSize20 1`] = `
exports[`Heading it should render an italic H2 at fontSize50 1`] = ` exports[`Heading it should render an italic H2 at fontSize50 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down
6 changes: 3 additions & 3 deletions packages/paste-core/components/heading/src/index.tsx
View file
Expand Up @@ -13,7 +13,7 @@ export type HeadingStyle =


interface Heading { interface Heading {
as: asTags; as: asTags;
id?: never; id?: string;
className?: never; className?: never;
variant?: HeadingStyle; variant?: HeadingStyle;
} }
Expand Down Expand Up @@ -70,9 +70,9 @@ function getHeadingStyles(headingStyle?: HeadingStyle): {} {
} }
} }


const Heading: React.FC<Heading> = ({as, children, variant}) => { const Heading: React.FC<Heading> = ({as, children, id, variant}) => {
return ( return (
<Text as={as} display="block" textColor="colorText" {...getHeadingStyles(variant)}> <Text as={as} display="block" id={id} textColor="colorText" {...getHeadingStyles(variant)}>
{children} {children}
</Text> </Text>
); );
Expand Down
9 changes: 6 additions & 3 deletions packages/paste-core/components/paragraph/__tests__/__snapshots__/paragraph.test.tsx.snap
View file
Expand Up @@ -3,7 +3,8 @@
exports[`Paragraph it should render a single paragraph 1`] = ` exports[`Paragraph it should render a single paragraph 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -40,7 +41,8 @@ exports[`Paragraph it should render a single paragraph 1`] = `
exports[`Paragraph it should render a single paragraph with bold text 1`] = ` exports[`Paragraph it should render a single paragraph with bold text 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down Expand Up @@ -79,7 +81,8 @@ exports[`Paragraph it should render a single paragraph with bold text 1`] = `
exports[`Paragraph it should render a single paragraph with italic text 1`] = ` exports[`Paragraph it should render a single paragraph with italic text 1`] = `
.emotion-1 { .emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15; font-size: 0.875rem;
line-height: 1.5;
color: #282a2b; color: #282a2b;
font-weight: 400; font-weight: 400;
} }
Expand Down

1 comment on commit df797e5

@vercel
Copy link

@vercel vercel bot commented on df797e5 Nov 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.