Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-09-25 13:36: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

39
demo/playground/index.html
View File

@ -1,25 +1,22 @@
<!DOCTYPE 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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ReDoc</title>
<style>
body {
margin: 0;
padding: 0;
}
redoc {
display: block;
}
</style>
</head>
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>
</html>
<body>
<redoc id="example"></redoc>
</body>
</html>

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

@ -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')};
`;

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

@ -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 = <LogoImgEl src={logoInfo.url} alt={altText} />;
return (
<LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}>
{logoHref ? LinkWrap(logoHref)(logo) : logo}
</LogoWrap>
);
// 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 <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};
width: 100%;
display: block;
height: 150px;
`;
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 { 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: {
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;

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

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