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
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
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`] = `
.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;
}
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`] = `
.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;
}
Expand Down
91 changes: 48 additions & 43 deletions packages/paste-core/components/button/src/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Expand All @@ -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
Expand All @@ -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)};
Expand All @@ -109,7 +114,7 @@ const variantPrimaryEnabled = (props: ButtonWrapperProps): SerializedStyles =>
]);
const variantPrimaryLoading = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseLoading,
baseLoading(props),
variantPrimaryBase(props),
css`
&,
Expand All @@ -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)};
Expand All @@ -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)};
Expand Down Expand Up @@ -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)};
Expand All @@ -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)};
Expand All @@ -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)};
Expand Down Expand Up @@ -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)};
Expand All @@ -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)};
Expand All @@ -251,7 +256,7 @@ const variantDestructiveLinkBase = css`
`;
const variantDestructiveLinkEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseEnabled,
baseEnabled(props),
variantDestructiveLinkBase,
css`
color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
Expand All @@ -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)};
Expand All @@ -294,7 +299,7 @@ const variantLinkBase = css`
`;
const variantLinkEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseEnabled,
baseEnabled(props),
variantLinkBase,
css`
color: ${themeGet('textColors.colorTextLink')(props)};
Expand All @@ -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)};
Expand Down
21 changes: 14 additions & 7 deletions packages/paste-core/components/heading/__tests__/__snapshots__/heading.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
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`] = `
.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;
}
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`] = `
.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;
}
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`] = `
.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;
}
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`] = `
.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;
}
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`] = `
.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;
}
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`] = `
.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;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/paste-core/components/heading/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export type HeadingStyle =

interface Heading {
as: asTags;
id?: never;
id?: string;
className?: never;
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 (
<Text as={as} display="block" textColor="colorText" {...getHeadingStyles(variant)}>
<Text as={as} display="block" id={id} textColor="colorText" {...getHeadingStyles(variant)}>
{children}
</Text>
);
Expand Down
9 changes: 6 additions & 3 deletions packages/paste-core/components/paragraph/__tests__/__snapshots__/paragraph.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
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`] = `
.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;
}
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`] = `
.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;
}
Expand Down
Loading

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.