Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: theme switching fully on the docsite #124

Merged
merged 2 commits into from Nov 8, 2019

Conversation

@SiTaggart
Copy link
Collaborator

SiTaggart commented Oct 7, 2019

  • Implement a full site theme switcher
  • Fix any out of the box styling issues with Paste
  • Fix TOC styling
  • Fix small sized inline code snippets
  • Fix small sized code blocks
@now

This comment has been minimized.

Copy link

now bot commented Oct 7, 2019

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/twilio-dsys/paste/nndyycaa9
🌍 Preview: https://paste-git-experiment-theme-switching.twilio-dsys.now.sh

@@ -18,7 +18,7 @@ interface SiteNavNestListProps {
}

export const SiteNavNestList: React.FC<SiteNavNestListProps> = styled(SiteNavList)`
max-height: ${props => (props.isOpen ? '3000px' : '0')};
display: ${props => (props.isOpen ? 'block' : 'none')};

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Nov 8, 2019

Author Collaborator

Makes the nav accessible

/* Hide default browser styles */
appearance: none;
border: none;
display: inline-block;
outline: none;
background: none;
font-size: 100%;

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Nov 8, 2019

Author Collaborator

Moving this to where it's needed. The ordering was weird so even though this is added first for each button, 100% was coming last and overriding the font sizes

@now now bot temporarily deployed to staging Nov 8, 2019 Inactive
@now now bot temporarily deployed to staging Nov 8, 2019 Inactive
@now now bot temporarily deployed to staging Nov 8, 2019 Inactive
body {
margin: ${themeGet('space.space0')};
font-size: ${themeGet('fontSizes.fontSize30')};
}

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Nov 8, 2019

Author Collaborator

So, these might seem risky, but I've tried them in my custom css plugin in console, flex and marketing campaigns and it seems totally fine to do so.

Font size not on the body results in some elements like code rendering incorrectly, even when given an explicit font size. It looks for the body instead of the html element for it's base. And we still want a good out of the box experience size wise.

`;

export const StyledBase = styled.div`
font-family: ${themeGet('fonts.fontFamilyText')};
line-height: 1.15;
line-height: ${themeGet('lineHeights.lineHeight30')};

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Nov 8, 2019

Author Collaborator

this on the body is too risky, but to set it here we need to reset the font size as it's unitless and bases itself on the elements font size at calculation

@SiTaggart SiTaggart changed the title feat: Experimental theme switching feat: theme switching fully on the docsite Nov 8, 2019
@SiTaggart SiTaggart force-pushed the experiment-theme-switching branch from 38aa726 to e936746 Nov 8, 2019
@now now bot temporarily deployed to staging Nov 8, 2019 Inactive
@SiTaggart SiTaggart force-pushed the experiment-theme-switching branch from e936746 to 3883f7d Nov 8, 2019
@SiTaggart SiTaggart merged commit df797e5 into master Nov 8, 2019
8 checks passed
8 checks passed
Semantic Pull Request ready to be squashed
Details
ci/circleci: applitools Your tests passed on CircleCI!
Details
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: prettier Your tests passed on CircleCI!
Details
ci/circleci: test Your tests passed on CircleCI!
Details
now Deployment has completed
Details
scm/applitools No baseline conflicts found! (9 changes found)
Details
tests/applitools All visual tests passed! (26 tests)
Details
@SiTaggart SiTaggart deleted the experiment-theme-switching branch Nov 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.