diff --git a/demo/playground/index.html b/demo/playground/index.html index d322ee3e..afc35f07 100644 --- a/demo/playground/index.html +++ b/demo/playground/index.html @@ -1,25 +1,22 @@ + + + + ReDoc - Sofico + + - redoc { - display: block; - } - - - - - - - - - \ No newline at end of file + + + + diff --git a/src/common-elements/headers.ts b/src/common-elements/headers.ts index 88b1c377..1a14a6ec 100644 --- a/src/common-elements/headers.ts +++ b/src/common-elements/headers.ts @@ -22,7 +22,7 @@ export const H1 = styled.h1` export const H2 = styled.h2` ${headerCommonMixin(2)}; - color: black; + color: ${({ theme }) => theme.colors.secondary.main}; ${extensionsHook('H2')}; `; diff --git a/src/components/ApiLogo/ApiLogo.tsx b/src/components/ApiLogo/ApiLogo.tsx index bd959e38..fe82d1cd 100644 --- a/src/components/ApiLogo/ApiLogo.tsx +++ b/src/components/ApiLogo/ApiLogo.tsx @@ -1,6 +1,6 @@ import { observer } from 'mobx-react'; import * as React from 'react'; -import { OpenAPIInfo } from '../../types'; +import { MilesConstants, OpenAPIInfo } from '../../types'; import { LinkWrap, LogoImgEl, LogoWrap } from './styled.elements'; @observer @@ -17,11 +17,19 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> { // Use the english word logo if no alt text is provided const altText = logoInfo.altText ? logoInfo.altText : 'logo'; - const logo = ; - return ( - - {logoHref ? LinkWrap(logoHref)(logo) : logo} - - ); + // When certain query param is set we want to hide the logo + const hideLogo = + new URLSearchParams(window.location.search).get(MilesConstants.HIDE_LOGO_QUERY_PARAM) == + 'true'; + if (hideLogo) { + return
; + } else { + const logo = ; + return ( + + {logoHref ? LinkWrap(logoHref)(logo) : logo} + + ); + } } } diff --git a/src/components/ApiLogo/styled.elements.tsx b/src/components/ApiLogo/styled.elements.tsx index 54339089..822fa00b 100644 --- a/src/components/ApiLogo/styled.elements.tsx +++ b/src/components/ApiLogo/styled.elements.tsx @@ -7,6 +7,7 @@ export const LogoImgEl = styled.img` padding: ${props => props.theme.logo.gutter}; width: 100%; display: block; + height: 150px; `; export const LogoWrap = styled.div` diff --git a/src/custom-styles/fonts.css b/src/custom-styles/fonts.css new file mode 100644 index 00000000..170f93fb --- /dev/null +++ b/src/custom-styles/fonts.css @@ -0,0 +1,72 @@ +@font-face { + font-family: aller; + src: url(https://use.typekit.net/af/411412/000000000000000000017540/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) + format('woff2'), + url(https://use.typekit.net/af/411412/000000000000000000017540/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) + format('woff'), + url(https://use.typekit.net/af/411412/000000000000000000017540/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) + format('opentype'); + font-weight: 400; + font-style: normal; + font-display: auto; +} +@font-face { + font-family: aller; + src: url(https://use.typekit.net/af/5608e4/000000000000000000017541/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) + format('woff2'), + url(https://use.typekit.net/af/5608e4/000000000000000000017541/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) + format('woff'), + url(https://use.typekit.net/af/5608e4/000000000000000000017541/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) + format('opentype'); + font-weight: 400; + font-style: italic; + font-display: auto; +} +@font-face { + font-family: aller; + src: url(https://use.typekit.net/af/792cd5/000000000000000000017543/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) + format('woff2'), + url(https://use.typekit.net/af/792cd5/000000000000000000017543/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) + format('woff'), + url(https://use.typekit.net/af/792cd5/000000000000000000017543/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) + format('opentype'); + font-weight: 700; + font-style: normal; + font-display: auto; +} +@font-face { + font-family: aller; + src: url(https://use.typekit.net/af/1fd190/000000000000000000017544/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) + format('woff2'), + url(https://use.typekit.net/af/1fd190/000000000000000000017544/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) + format('woff'), + url(https://use.typekit.net/af/1fd190/000000000000000000017544/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) + format('opentype'); + font-weight: 700; + font-style: italic; + font-display: auto; +} +@font-face { + font-family: aller; + src: url(https://use.typekit.net/af/3ed6f0/00000000000000000001753e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) + format('woff2'), + url(https://use.typekit.net/af/3ed6f0/00000000000000000001753e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) + format('woff'), + url(https://use.typekit.net/af/3ed6f0/00000000000000000001753e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) + format('opentype'); + font-weight: 300; + font-style: normal; + font-display: auto; +} +@font-face { + font-family: aller; + src: url(https://use.typekit.net/af/2f801d/00000000000000000001753f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3) + format('woff2'), + url(https://use.typekit.net/af/2f801d/00000000000000000001753f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3) + format('woff'), + url(https://use.typekit.net/af/2f801d/00000000000000000001753f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3) + format('opentype'); + font-weight: 300; + font-style: italic; + font-display: auto; +} diff --git a/src/index.ts b/src/index.ts index e8be304c..2d981256 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,3 +14,5 @@ export * from './utils'; export * from './styled-components'; export { default as styled } from './styled-components'; + +import './custom-styles/fonts.css'; diff --git a/src/theme.ts b/src/theme.ts index 8856451f..00599774 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -14,7 +14,13 @@ const defaultTheme: ThemeInterface = { colors: { tonalOffset: 0.2, primary: { - main: '#32329f', + main: '#003659', + light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main), + dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main), + contrastText: ({ colors }) => readableColor(colors.primary.main), + }, + secondary: { + main: '#6BA4B8', light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main), dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main), contrastText: ({ colors }) => readableColor(colors.primary.main), @@ -107,11 +113,11 @@ const defaultTheme: ThemeInterface = { fontWeightRegular: '400', fontWeightBold: '600', fontWeightLight: '300', - fontFamily: 'Roboto, sans-serif', + fontFamily: 'aller, sans-serif', smoothing: 'antialiased', optimizeSpeed: true, headings: { - fontFamily: 'Montserrat, sans-serif', + fontFamily: 'aller, sans-serif', fontWeight: '400', lineHeight: '1.6em', }, @@ -235,6 +241,7 @@ export interface ResolvedThemeInterface { colors: { tonalOffset: number; primary: ColorSetting; + secondary: ColorSetting; success: ColorSetting; warning: ColorSetting; error: ColorSetting; diff --git a/src/types/miles.constants.ts b/src/types/miles.constants.ts index 4b541bc9..4d73cdc3 100644 --- a/src/types/miles.constants.ts +++ b/src/types/miles.constants.ts @@ -1,3 +1,4 @@ export const MilesConstants = { MILES_EXTRA_DESCRIPTION_PROPERTY_NAME: 'x-miles-extra-description', + HIDE_LOGO_QUERY_PARAM: 'hideLogo', };