Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-09-25 21:46:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(): Add Sofico styling

Browse Source
This commit is contained in:
Sven Depickere 2022-01-28 10:41:07 +01:00
parent 87ab898096
commit 3560ed9b69
8 changed files with 120 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
demo/playground/index.html
View File

@ -1,25 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReDoc - Sofico</title>
<style>
body {
margin: 0;
padding: 0;
}
<head> redoc {
<meta charset="UTF-8" /> display: block;
<meta name="viewport" content="width=device-width, initial-scale=1"> }
<title>ReDoc</title> </style>
<style> </head>
body {
margin: 0;
padding: 0;
}
redoc {
display: block;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
</head>
<body>
<redoc id="example"></redoc>
</body>
<body>
<redoc id="example"></redoc>
</body>
</html> </html>

2
src/common-elements/headers.ts
View File

@ -22,7 +22,7 @@ export const H1 = styled.h1`
export const H2 = styled.h2` export const H2 = styled.h2`
${headerCommonMixin(2)}; ${headerCommonMixin(2)};
color: black; color: ${({ theme }) => theme.colors.secondary.main};
${extensionsHook('H2')}; ${extensionsHook('H2')};
`; `;

22
src/components/ApiLogo/ApiLogo.tsx
View File

@ -1,6 +1,6 @@
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import * as React from 'react'; import * as React from 'react';
import { OpenAPIInfo } from '../../types'; import { MilesConstants, OpenAPIInfo } from '../../types';
import { LinkWrap, LogoImgEl, LogoWrap } from './styled.elements'; import { LinkWrap, LogoImgEl, LogoWrap } from './styled.elements';
@observer @observer
@ -17,11 +17,19 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
// Use the english word logo if no alt text is provided // Use the english word logo if no alt text is provided
const altText = logoInfo.altText ? logoInfo.altText : 'logo'; const altText = logoInfo.altText ? logoInfo.altText : 'logo';
const logo = <LogoImgEl src={logoInfo.url} alt={altText} />; // When certain query param is set we want to hide the logo
return ( const hideLogo =
<LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}> new URLSearchParams(window.location.search).get(MilesConstants.HIDE_LOGO_QUERY_PARAM) ==
{logoHref ? LinkWrap(logoHref)(logo) : logo} 'true';
</LogoWrap> if (hideLogo) {
); return <div></div>;
} else {
const logo = <LogoImgEl src={logoInfo.url} alt={altText} />;
return (
<LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}>
{logoHref ? LinkWrap(logoHref)(logo) : logo}
</LogoWrap>
);
}
} }
} }

1
src/components/ApiLogo/styled.elements.tsx
View File

@ -7,6 +7,7 @@ export const LogoImgEl = styled.img`
padding: ${props => props.theme.logo.gutter}; padding: ${props => props.theme.logo.gutter};
width: 100%; width: 100%;
display: block; display: block;
height: 150px;
`; `;
export const LogoWrap = styled.div` export const LogoWrap = styled.div`

72
src/custom-styles/fonts.css Normal file
View File

@ -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;
}

2
src/index.ts
View File

@ -14,3 +14,5 @@ export * from './utils';
export * from './styled-components'; export * from './styled-components';
export { default as styled } from './styled-components'; export { default as styled } from './styled-components';
import './custom-styles/fonts.css';

13
src/theme.ts
View File

@ -14,7 +14,13 @@ const defaultTheme: ThemeInterface = {
colors: { colors: {
tonalOffset: 0.2, tonalOffset: 0.2,
primary: { 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), light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main), dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
contrastText: ({ colors }) => readableColor(colors.primary.main), contrastText: ({ colors }) => readableColor(colors.primary.main),
@ -107,11 +113,11 @@ const defaultTheme: ThemeInterface = {
fontWeightRegular: '400', fontWeightRegular: '400',
fontWeightBold: '600', fontWeightBold: '600',
fontWeightLight: '300', fontWeightLight: '300',
fontFamily: 'Roboto, sans-serif', fontFamily: 'aller, sans-serif',
smoothing: 'antialiased', smoothing: 'antialiased',
optimizeSpeed: true, optimizeSpeed: true,
headings: { headings: {
fontFamily: 'Montserrat, sans-serif', fontFamily: 'aller, sans-serif',
fontWeight: '400', fontWeight: '400',
lineHeight: '1.6em', lineHeight: '1.6em',
}, },
@ -235,6 +241,7 @@ export interface ResolvedThemeInterface {
colors: { colors: {
tonalOffset: number; tonalOffset: number;
primary: ColorSetting; primary: ColorSetting;
secondary: ColorSetting;
success: ColorSetting; success: ColorSetting;
warning: ColorSetting; warning: ColorSetting;
error: ColorSetting; error: ColorSetting;

1
src/types/miles.constants.ts
View File

@ -1,3 +1,4 @@
export const MilesConstants = { export const MilesConstants = {
MILES_EXTRA_DESCRIPTION_PROPERTY_NAME: 'x-miles-extra-description', MILES_EXTRA_DESCRIPTION_PROPERTY_NAME: 'x-miles-extra-description',
HIDE_LOGO_QUERY_PARAM: 'hideLogo',
}; };