styled-components#createGlobalStyle TypeScript Examples

The following examples show how to use styled-components#createGlobalStyle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: GlobalTheme.ts    From dxvote with GNU Affero General Public License v3.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    color: ${({ theme }) => theme.colors.text};
    background-color: ${({ theme }) => theme.colors.background};
    font-family: ${({ theme }) => theme.fonts.body};
    font-weight: ${({ theme }) => theme.fontWeights.regular};
    line-height: ${({ theme }) => theme.lineHeights.body};
    font-size: ${({ theme }) => theme.fontSizes.body};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  strong, b {
    font-weight: ${({ theme }) => theme.fontWeights.medium};
  }

  code {
    font-family: ${({ theme }) => theme.fonts.monospace};
  }

  button {
    font-family: ${({ theme }) => theme.fonts.body};
    font-weight: ${({ theme }) => theme.fontWeights.regular};
  }
  `
Example #2
Source File: index.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up 
FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.018em;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
`
Example #3
Source File: GlobalStyles.tsx    From frontend with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
    * {
        ${typography.globalStyles};
    }
    *, *::before, *::after {
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
`
Example #4
Source File: layout.tsx    From gonear-name with The Unlicense 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  :root {
    --root-background: #181B21;
    --header-height: 90px;
    --header-height__mob: 56px;
    --margin: 30px;
    --margin__mob: 25px;
  }

  body {
    background: var(--root-background);
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
  }
`
Example #5
Source File: global.ts    From github-explorer with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: #F0F0F5 url(${githubBackground}) no-repeat 70% top;
    --webkit-font-smoothing: antialiased;
  }

  #root, body, html {
    height: 100%;
  }

  #root {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
  }

  body, button, textarea, input {
    font: 16px Roboto, sans-serif;
  }

  button {
    cursor: pointer;
  }

  ul {
    list-style: none;
  }
`
Example #6
Source File: GlobalStyles.ts    From copy-image-clipboard with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
  *, *::before, *::after {
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
  }

  html {
    font-size: 62.5%;
    overflow-x: hidden;
  }

  html, body, #root {
    height: 100%;
    overflow-x: hidden;

    margin: 0;
    padding: 0;
    outline: 0;

    background: ${({ theme }) => theme.background};
    color: ${({ theme }) => theme.primaryText};
  }

  body, #root {
    font-size: 1.4rem;
  }

  button {
    font-size: 1.4rem;
    color: ${({ theme }) => theme.primaryText};
  }

  svg {
    overflow: initial;
  }
`
Example #7
Source File: ThemeProvider.style.ts    From design-system with Apache License 2.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`  
	html {
		/* 1rem = 10px */
		font-size: 62.5%;
	}
	
	body {
		margin: 0;
		padding: 0;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 14px;
		color: ${({ theme }) => theme?.colors.textColor};
		background: ${({ theme }) => theme?.colors.backgroundColor};
	}

	a {
		text-decoration: none;
	}
	
	[role="list"]  {
		margin: 0;
		padding: 0;
	}
	
	.focus-outline-hidden *:focus {
		outline: none;
	}

	::selection {
		color: ${tokens.colors.gray[900]};
		background-color: ${tokens.colors.coral[100]};
	}
	
	.sr-only {
		${hideVisually()}
	}
`
Example #8
Source File: GlobalStyle.ts    From useDApp with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
  }

  html,
  body,
  #root {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: ${Font.Body};
    background-color: ${Colors.Background};
    color: ${Colors.Text};
    font-size: 16px;
    line-height: 1;
  }
`
Example #9
Source File: index.tsx    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up 
FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}


@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}


html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
  
}
`
Example #10
Source File: GlobalStyle.ts    From NextPay with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
    html, body {
        margin: 0;
        padding: 0;
    }
    *, *::after, *::before {
        box-sizing: border-box;
    }
    body {
        background: linear-gradient(0deg, rgba(101,181,252,1) 0%, rgba(145,202,255,1) 100%);
        color: black;
        font-family: 'Manrope', sans-serif;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
`
Example #11
Source File: global-styles.ts    From netflix-clone with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
	html, body {
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		background-color: black;
		color: #333333;
		font-size: 16px;
	}
`
Example #12
Source File: GlobalStyles.tsx    From crypto-capsule with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
    :root {
        --main: #5268A1;
        --sub: #82B4D1;
        --primary: rgb(215, 151, 211);
        --primary-light: rgba(215, 150, 211, 0.1);
        --primary-shadow: rgba(215, 150, 211, 0.6);
        --dark: #5268A1;
        --bg: #F8F2F2;
        --danger: #ef5252;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Caveat', cursive;
      font-size: 10px;
    }
  
    button {
      background: none;
      border: none;
      outline: none;
    }

    a{
        text-decoration: none;
    }
  `
Example #13
Source File: GlobalStyle.ts    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
FixedGlobalStyle = createGlobalStyle`
    html, input, textarea, button {
      font-family: Noto Sans, 'Inter',sans-serif;
      letter-spacing: -0.018em;
      font-display: fallback;
    }
    @supports (font-variation-settings: normal) {
      html, input, textarea, button {
        font-family: Noto Sans, 'Inter',sans-serif;
      }
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    button {
      user-select: none;
    }

    html {
      font-family: Noto Sans,'Inter', sans-serif;
      font-size: 14px;
      font-variant: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
`
Example #14
Source File: App.tsx    From craft-extension-inspirations with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
  html, body, #react-root {
    height: 100%;
  }
  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum" 1;
    -webkit-font-feature-settings: "lnum" 1;
    font-feature-settings: "lnum" 1;
  }
  html, body {
    padding: 0;
    margin: 0;
    font-family: system-ui, -apple-system;
  }
`
Example #15
Source File: app.tsx    From webminidisc with GNU General Public License v2.0 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
${styleReset}
body {
    font-family: 'ms_sans_serif';
}
img {
    image-rendering: pixelated;
}
`
Example #16
Source File: _app.tsx    From website with Apache License 2.0 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
html {
  background: ${({ theme }) => theme.background.backgroundColor};
  scroll-behavior: smooth;

}
body {
  max-width: 100vw;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0.25em;
}
 
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: ${({ theme }) => theme.background.backgroundColor};

}
 
::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 8px;
  outline: 1px solid ${({ theme }) => theme.background.backgroundColorLight}9d;
}
`
Example #17
Source File: style.tsx    From react-use-intercom with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  :root {
    --light: #ffffff;
    --dark: #181818;
    --cyan: #6afdef;
    --grey: #f4f0eb;
  }

  html {
    font-size: 15px;
  }

  h1, 
  h2, 
  h3,
  h4,
  h5,
  h6,
  p {
    color: var(--dark);
    line-height: 1.75rem;
  }

  body {
    font-family: 'Hind', Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
  }

  code {
    background: var(--grey);
    border-radius: 2px;
    font-family: 'Fira Code', monospace;
    font-size: 0.825rem;
    padding: 0.075rem 0.35rem;
  }
`
Example #18
Source File: _app.tsx    From covid19map with MIT License 6 votes vote down vote up 
Styles = createGlobalStyle`
  ${({ theme }) => css`
    html,
    body {
      padding: 0;
      margin: 0;
      font-family: "Nunito", sans-serif;
      background: ${theme.light};
    }
    button,
    a {
      font-family: "Nunito", sans-serif;
      transition: all 0.3s ease;
    }
    button:hover,
    a:hover {
      opacity: 0.7;
    }
    button {
      cursor: pointer;
      outline: none;
    }
    .inline-icon {
      display: inline-block;
      svg {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
  `}
`
Example #19
Source File: index.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up 
FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
  
}
`
Example #20
Source File: app.styled.ts    From react-weather-app with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}
html {
  font-size: 16px;
}
body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: url(${({ theme }) => theme.backgroundImage}) no-repeat center 120%, linear-gradient(${({ theme }) =>
  theme.backgroundGradient.color1} 0%, ${({ theme }) => theme.backgroundGradient.color2} 100%);
  background-size: auto;
}
#root {
  max-width: 960px;
  width: 100%;
  margin: auto 0;
  padding: 0 1rem;
}
`
Example #21
Source File: index.tsx    From limit-orders-lib with GNU General Public License v3.0 6 votes vote down vote up 
FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

 a {
   color: ${colors(false).blue1}; 
 }

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on,  'cv01' on, 'cv03' on;
  
}
`
Example #22
Source File: Global.tsx    From glide-frontend with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  * {
    font-family: 'Nunito', sans-serif;
  }
  body {
    background-color: #060914;

    img {
      height: auto;
      max-width: 100%;
    }
  }
`
Example #23
Source File: GlobalStyle.ts    From safe-app-template with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
    html {
        height: 100%
    }

    body {
       height: 100%;
       margin: 0px;
       padding: 0px;
    }

    #root {
        height: 100%;
        padding-right: 0.5rem;
    }

    .MuiFormControl-root,
    .MuiInputBase-root {
        width: 100% !important;
    }

    @font-face {
        font-family: 'Averta';
        src: local('Averta'), local('Averta Bold'),
        url(${avertaFont}) format('woff2'),
        url(${avertaBoldFont}) format('woff');
    }
`
Example #24
Source File: Global.ts    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  body {
    background-color: ${({ theme }) => theme.colors.background};

    img {
      height: auto;
      max-width: 100%;
    }
  }
`
Example #25
Source File: index.tsx    From skeleton-web3-interface with GNU General Public License v3.0 6 votes vote down vote up 
FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
  
}
`
Example #26
Source File: Confirmation.tsx    From idena-pocket with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
	.swal-button {
		border: 0!important;
	}
	.swal-button--confirm {
		background: ${colors.black};
	}
	.swal-button--confirm:hover {
		background: ${colors.darkBlack}!important;
	}
`
Example #27
Source File: theme.tsx    From recoil-todo-list with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
    body {
        background-color: ${(props: any) => props.theme.background};
        color: ${(props: any) => props.theme.text};
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        box-sizing: border-box;
        font-family: Sen;
        user-select: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin: 0;
    }

    #root {
        width: 100vw;
    }

    * {
        transition: 0.2s color ease-in-out, 0.2s background-color ease-in-out;
    }
`
Example #28
Source File: Layout.tsx    From iplocate with MIT License 6 votes vote down vote up 
Global = createGlobalStyle`
  * {
    box-sizing: border-box;
  }
  html, body {
    padding: 0;
    margin: 0;
    height: 100%;
  }
`
Example #29
Source File: globalTheme.ts    From nlw06-letmeask with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  html{
    font-size:62.5%;
    scroll-behavior:smooth;
    background:${({ theme }) => theme.colors.bg.body}
  }
  body, input, button, textarea{
    font:400 ${({ theme }) => theme.font.sizes.md} ${({ theme }) => theme.font.secondary};
  }
`