Skip to content
Permalink
Browse files

feat: enable theme switching on the docsite (#124)

* feat: improve out of the box styling for all paste components

* feat: add theme switching to the website
  • Loading branch information
SiTaggart committed Nov 8, 2019
1 parent 582245b commit df797e57ff1268367053d717f3b3c2ca48a0aa4f
Showing with 893 additions and 805 deletions.
  1. +6 −3 packages/paste-core/components/anchor/__tests__/__snapshots__/anchor.test.tsx.snap
  2. +48 −43 packages/paste-core/components/button/src/styles.ts
  3. +14 −7 packages/paste-core/components/heading/__tests__/__snapshots__/heading.test.tsx.snap
  4. +3 −3 packages/paste-core/components/heading/src/index.tsx
  5. +6 −3 packages/paste-core/components/paragraph/__tests__/__snapshots__/paragraph.test.tsx.snap
  6. +28 −14 packages/paste-core/utilities/box/__tests__/__snapshots__/box.test.tsx.snap
  7. +1 −1 packages/paste-core/utilities/box/package.json
  8. +82 −41 packages/paste-core/utilities/text/__tests__/__snapshots__/text.spec.tsx.snap
  9. +1 −1 packages/paste-core/utilities/text/package.json
  10. +6 −1 packages/paste-theme/src/themeProvider.tsx
  11. +2 −0 packages/paste-website/package.json
  12. +3 −2 packages/paste-website/src/components/DoDont.tsx
  13. +3 −83 packages/paste-website/src/components/Heading.tsx
  14. +1 −1 packages/paste-website/src/components/StyledHr.tsx
  15. +1 −0 packages/paste-website/src/components/ThemeSwitcher.tsx
  16. +2 −1 packages/paste-website/src/components/Typography.tsx
  17. +27 −15 packages/paste-website/src/components/breadcrumb/index.tsx
  18. +25 −7 packages/paste-website/src/components/callout/index.tsx
  19. +0 −43 packages/paste-website/src/components/callout/styles.ts
  20. +2 −1 packages/paste-website/src/components/callout/types.ts
  21. +1 −0 packages/paste-website/src/components/codeblock/index.tsx
  22. +6 −13 packages/paste-website/src/components/empty-state/InDevelopment.tsx
  23. +13 −19 packages/paste-website/src/components/empty-state/NotBuilt.tsx
  24. +5 −12 packages/paste-website/src/components/empty-state/NotFound.tsx
  25. +3 −2 packages/paste-website/src/components/input/index.tsx
  26. +10 −19 packages/paste-website/src/components/paste-mdx-provider/index.tsx
  27. +25 −15 packages/paste-website/src/components/shortcodes/component-header/index.tsx
  28. +2 −8 packages/paste-website/src/components/shortcodes/live-preview/index.tsx
  29. +4 −3 packages/paste-website/src/components/shortcodes/table-of-contents/index.tsx
  30. +6 −8 packages/paste-website/src/components/shortcodes/table-of-contents/styles.ts
  31. +0 −5 packages/paste-website/src/components/site-wrapper/SiteBody.tsx
  32. +11 −20 packages/paste-website/src/components/site-wrapper/SiteFooter.tsx
  33. +10 −0 packages/paste-website/src/components/site-wrapper/SiteThemeProvider.tsx
  34. +99 −12 packages/paste-website/src/components/site-wrapper/index.tsx
  35. +4 −2 packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.styles.ts
  36. +16 −4 packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx
  37. +1 −1 packages/paste-website/src/components/tokens-list/index.tsx
  38. +0 −1 packages/paste-website/src/layouts/DefaultLayout.tsx
  39. +16 −17 packages/paste-website/src/pages/components/anchor/index.mdx
  40. +6 −9 packages/paste-website/src/pages/components/index.mdx
  41. +13 −14 packages/paste-website/src/pages/index.tsx
  42. +2 −1 packages/paste-website/src/pages/utilities/text/index.mdx
  43. BIN packages/paste-website/static/fonts/colfax-light.woff
  44. BIN packages/paste-website/static/fonts/colfax-light.woff2
  45. BIN packages/paste-website/static/fonts/colfax-medium.woff
  46. BIN packages/paste-website/static/fonts/colfax-medium.woff2
  47. BIN packages/paste-website/static/fonts/colfax-regular.woff
  48. BIN packages/paste-website/static/fonts/colfax-regular.woff2
  49. +379 −350 yarn.lock
@@ -3,7 +3,8 @@
exports[`Anchor it should render an anchor 1`] = `
.emotion-2 {
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;
font-weight: 400;
}
@@ -48,7 +49,8 @@ exports[`Anchor it should render an anchor 1`] = `
exports[`Anchor it should render an external anchor 1`] = `
.emotion-2 {
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;
font-weight: 400;
}
@@ -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`] = `
.emotion-2 {
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;
font-weight: 400;
}
@@ -9,11 +9,13 @@ import {ButtonWrapperProps, ButtonChildrenProps} from './types';
* Sizes
*/
const sizeReset = css`
font-size: 100%;
padding: 0;
`;
const sizeIcon = (props: ButtonWrapperProps): SerializedStyles => css`
padding: ${themeGet('space.space30')(props)};
border-radius: ${themeGet('radii.borderRadius20')(props)};
font-size: 100%;
/* To fix abnormal button padding-bottom */
line-height: unset;
`;
@@ -22,58 +24,61 @@ const sizeSmall = (props: ButtonWrapperProps): SerializedStyles => css`
border-radius: ${themeGet('radii.borderRadius10')(props)};
font-size: ${themeGet('fontSizes.fontSize30')(props)};
font-weight: ${themeGet('fontWeights.fontWeightSemibold')(props)};
line-height: 24px;
line-height: ${themeGet('lineHeights.lineHeight30')(props)};
`;
const sizeDefault = (props: ButtonWrapperProps): SerializedStyles => css`
padding: ${themeGet('space.space30')(props)} ${themeGet('space.space60')(props)};
border-radius: ${themeGet('radii.borderRadius20')(props)};
font-size: ${themeGet('fontSizes.fontSize30')(props)};
font-weight: ${themeGet('fontWeights.fontWeightSemibold')(props)};
line-height: 24px;
line-height: ${themeGet('lineHeights.lineHeight30')(props)};
`;

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

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

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

const variantDestructiveEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseEnabled,
baseEnabled(props),
variantDestructiveBase(props),
css`
color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
@@ -227,7 +232,7 @@ const variantDestructiveEnabled = (props: ButtonWrapperProps): SerializedStyles
]);
const variantDestructiveLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseLoading,
baseLoading(props),
variantDestructiveBase(props),
css`
color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
@@ -237,7 +242,7 @@ const variantDestructiveLoading = (props: ButtonWrapperProps): SerializedStyles
]);
const variantDestructiveDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseDisabled,
baseDisabled(props),
variantDestructiveBase(props),
css`
color: ${themeGet('textColors.colorTextLinkDestructiveLight')(props)};
@@ -251,7 +256,7 @@ const variantDestructiveLinkBase = css`
`;
const variantDestructiveLinkEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseEnabled,
baseEnabled(props),
variantDestructiveLinkBase,
css`
color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
@@ -273,15 +278,15 @@ const variantDestructiveLinkEnabled = (props: ButtonWrapperProps): SerializedSty
]);
const variantDestructiveLinkLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseLoading,
baseLoading(props),
variantDestructiveLinkBase,
css`
color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
`,
]);
const variantDestructiveLinkDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseDisabled,
baseDisabled(props),
variantDestructiveLinkBase,
css`
color: ${themeGet('textColors.colorTextLinkDestructiveLight')(props)};
@@ -294,7 +299,7 @@ const variantLinkBase = css`
`;
const variantLinkEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseEnabled,
baseEnabled(props),
variantLinkBase,
css`
color: ${themeGet('textColors.colorTextLink')(props)};
@@ -316,15 +321,15 @@ const variantLinkEnabled = (props: ButtonWrapperProps): SerializedStyles =>
]);
const variantLinkLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseLoading,
baseLoading(props),
variantLinkBase,
css`
color: ${themeGet('textColors.colorTextLinkDarker')(props)};
`,
]);
const variantLinkDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseDisabled,
baseDisabled(props),
variantLinkBase,
css`
color: ${themeGet('textColors.colorTextLinkLight')(props)};
@@ -3,7 +3,8 @@
exports[`Heading it should render an H1 at fontSize90 1`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -42,7 +43,8 @@ exports[`Heading it should render an H1 at fontSize90 1`] = `
exports[`Heading it should render an H2 at fontSize70 1`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -81,7 +83,8 @@ exports[`Heading it should render an H2 at fontSize70 1`] = `
exports[`Heading it should render an H3 at fontSize60 1`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -120,7 +123,8 @@ exports[`Heading it should render an H3 at fontSize60 1`] = `
exports[`Heading it should render an H4 at fontSize40 1`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -159,7 +163,8 @@ exports[`Heading it should render an H4 at fontSize40 1`] = `
exports[`Heading it should render an H5 at fontSize30 1`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -198,7 +203,8 @@ exports[`Heading it should render an H5 at fontSize30 1`] = `
exports[`Heading it should render an H6 at fontSize20 1`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -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`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -13,7 +13,7 @@ export type HeadingStyle =

interface Heading {
as: asTags;
id?: never;
id?: string;
className?: never;
variant?: HeadingStyle;
}
@@ -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 (
<Text as={as} display="block" textColor="colorText" {...getHeadingStyles(variant)}>
<Text as={as} display="block" id={id} textColor="colorText" {...getHeadingStyles(variant)}>
{children}
</Text>
);
@@ -3,7 +3,8 @@
exports[`Paragraph it should render a single paragraph 1`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -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`] = `
.emotion-1 {
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;
font-weight: 400;
}
@@ -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`] = `
.emotion-1 {
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;
font-weight: 400;
}

1 comment on commit df797e5

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.