IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Theme: V8 Theme updates (#33050)

Browse Source 
* GraphNG: Use new theme props

* Minor fix to letterspacing in button

* Minor tweaks

* Updated

* Revert to roboto

* Added concept of a dark or white base

* Style updates

* Sass

* Updated light text blue

* updates

* reverting button group design

* Fixed tests

* updates

* Updated tests
This commit is contained in:
Torkel Ödegaard 2021-04-16 09:48:52 +02:00 committed by GitHub
parent da03175d0b
commit 66485b3e70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 318 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-data/src/themes/colors.ts
View File

@ -34,7 +34,7 @@ export const colors = {
lightBorder1: '#E4E7E7',
blueDarkMain: '#4165F5',
blueDarkText: '#33a2e5', // '#5790FF',
blueDarkText: '#58a6ff', //'#33a2e5', // '#5790FF',
redDarkMain: '#D10E5C',
redDarkText: '#FF5286',
greenDarkMain: '#1A7F4B',
@ -43,7 +43,7 @@ export const colors = {
orangeDarkText: '#F8D06B',
blueLightMain: '#3871DC',
blueLightText: '#1F62E0',
blueLightText: '#0465d7', // '#1F62E0',
redLightMain: '#E0226E',
redLightText: '#CF0E5B',
greenLightMain: '#1A7F4B',

64
packages/grafana-data/src/themes/createPalette.ts
View File

@ -79,10 +79,12 @@ export type ThemePaletteInput = DeepPartial<ThemePaletteBase<ThemePaletteColor>>
class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
mode: ThemePaletteMode = 'dark';
whiteBase = '201, 209, 217';
text = {
primary: 'rgba(255, 255, 255, 0.77)',
secondary: 'rgba(255, 255, 255, 0.50)',
disabled: 'rgba(255, 255, 255, 0.35)',
primary: `rgb(${this.whiteBase})`,
secondary: `rgba(${this.whiteBase}, 0.65)`,
disabled: `rgba(${this.whiteBase}, 0.40)`,
link: colors.blueDarkText,
maxContrast: colors.white,
};
@ -94,10 +96,10 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
};
secondary = {
main: 'rgba(255,255,255,0.1)',
shade: 'rgba(255,255,255,0.15)',
text: 'rgba(255,255,255,0.13)',
contrastText: 'rgba(255, 255, 255, 0.8)',
main: `rgba(${this.whiteBase}, 0.1)`,
shade: `rgba(${this.whiteBase}, 0.15)`,
text: `rgba(${this.whiteBase}, 0.13)`,
contrastText: `rgb(${this.whiteBase})`,
};
info = this.primary;
@ -121,19 +123,19 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
layer1 = colors.gray10;
layer2 = colors.gray15;
divider = 'rgba(218,224,254,0.06)';
divider = `rgba(${this.whiteBase}, 0.10)`;
border0 = this.layer1;
border1 = 'rgba(218,224,254,0.15)';
border2 = 'rgba(218,224,254,0.20)';
border1 = `rgba(${this.whiteBase}, 0.15)`;
border2 = `rgba(${this.whiteBase}, 0.20)`;
action = {
hover: 'rgba(255, 255, 255, 0.08)',
selected: 'rgba(255, 255, 255, 0.12)',
focus: 'rgba(255, 255, 255, 0.16)',
hover: `rgba(${this.whiteBase}, 0.08)`,
selected: `rgba(${this.whiteBase}, 0.12)`,
focus: `rgba(${this.whiteBase}, 0.16)`,
hoverOpacity: 0.08,
disabledText: this.text.disabled,
disabledBackground: 'rgba(255,255,255,0.07)',
disabledBackground: `rgba(${this.whiteBase}, 0.07)`,
disabledOpacity: 0.38,
};
@ -143,13 +145,15 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
};
contrastThreshold = 3;
hoverFactor = 0.15;
hoverFactor = 0.03;
tonalOffset = 0.15;
}
class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
mode: ThemePaletteMode = 'light';
blackBase = '36, 41, 46';
primary = {
main: colors.blueLightMain,
border: colors.blueLightText,
@ -157,9 +161,9 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
};
secondary = {
main: 'rgba(0,0,0,0.11)',
shade: 'rgba(0,0,0,0.16)',
contrastText: 'rgba(0, 0, 0, 0.75)',
main: `rgba(${this.blackBase}, 0.11)`,
shade: `rgba(${this.blackBase}, 0.16)`,
contrastText: `rgba(${this.blackBase}, 1)`,
};
info = {
@ -184,9 +188,9 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
};
text = {
primary: 'rgba(0, 0, 0, 0.75)',
secondary: 'rgba(0, 0, 0, 0.60)',
disabled: 'rgba(0, 0, 0, 0.45)',
primary: `rgba(${this.blackBase}, 1)`,
secondary: `rgba(${this.blackBase}, 0.75)`,
disabled: `rgba(${this.blackBase}, 0.50)`,
link: this.primary.text,
maxContrast: colors.black,
};
@ -195,18 +199,18 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
layer1 = colors.white;
layer2 = colors.gray100;
divider = 'rgba(0, 2, 78, 0.07)';
divider = `rgba(${this.blackBase}, 0.12)`;
border0 = this.layer1;
border1 = 'rgba(0, 2, 78, 0.20)';
border2 = 'rgba(0, 2, 78, 0.30)';
border1 = `rgba(${this.blackBase}, 0.30)`;
border2 = `rgba(${this.blackBase}, 0.40)`;
action = {
hover: 'rgba(0, 0, 0, 0.04)',
selected: 'rgba(0, 0, 0, 0.08)',
hover: `rgba(${this.blackBase}, 0.04)`,
selected: `rgba(${this.blackBase}, 0.08)`,
hoverOpacity: 0.08,
focus: 'rgba(0, 0, 0, 0.12)',
disabledBackground: 'rgba(0,0,0,0.07)',
focus: `rgba(${this.blackBase}, 0.12)`,
disabledBackground: `rgba(${this.blackBase}, 0.07)`,
disabledText: this.text.disabled,
disabledOpacity: 0.38,
};
@ -217,7 +221,7 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
};
contrastThreshold = 3;
hoverFactor = 0.15;
hoverFactor = 0.03;
tonalOffset = 0.2;
}
@ -240,7 +244,7 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
function getContrastText(background: string) {
const contrastText =
getContrastRatio(background, dark.text.primary) >= contrastThreshold
getContrastRatio(background, dark.text.maxContrast) >= contrastThreshold
? dark.text.maxContrast
: light.text.maxContrast;
// todo, need color framework

24
packages/grafana-data/src/themes/createTypography.ts
View File

@ -63,7 +63,7 @@ export interface ThemeTypographyInput {
htmlFontSize?: number;
}
const defaultFontFamily = '"Inter", "Helvetica", "Arial", sans-serif';
const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
const defaultFontFamilyMonospace = "'Roboto Mono', monospace";
export function createTypography(palette: ThemePalette, typographyInput: ThemeTypographyInput = {}): ThemeTypography {
@ -104,19 +104,19 @@ export function createTypography(palette: ThemePalette, typographyInput: ThemeTy
fontWeight,
fontSize: pxToRem(size),
lineHeight,
letterSpacing: `${letterSpacing}em`,
...(fontFamily === defaultFontFamily ? { letterSpacing: `${round(letterSpacing / size)}em` } : {}),
...casing,
});
const variants = {
h1: buildVariant(fontWeightMedium, 28, 1.2, -0.01),
h2: buildVariant(fontWeightMedium, 24, 1.2, -0.01),
h3: buildVariant(fontWeightMedium, 21, 1.3, -0.01),
h4: buildVariant(fontWeightRegular, 18, 1.4, -0.005),
h5: buildVariant(fontWeightRegular, 16, 1.334, -0.005),
h6: buildVariant(fontWeightRegular, 14, 1.6, -0.005),
body: buildVariant(fontWeightRegular, 14, 1.5, -0.005),
bodySmall: buildVariant(fontWeightRegular, 12, 1.5, -0.005),
h1: buildVariant(fontWeightLight, 28, 1.167, -0.25),
h2: buildVariant(fontWeightLight, 24, 1.2, 0),
h3: buildVariant(fontWeightRegular, 21, 1.167, 0),
h4: buildVariant(fontWeightRegular, 18, 1.235, 0.25),
h5: buildVariant(fontWeightRegular, 16, 1.334, 0),
h6: buildVariant(fontWeightMedium, 14, 1.6, 0.15),
body: buildVariant(fontWeightRegular, 14, 1.5, 0.15),
bodySmall: buildVariant(fontWeightRegular, 12, 1.5, 0.15),
};
const size = {
@ -141,3 +141,7 @@ export function createTypography(palette: ThemePalette, typographyInput: ThemeTy
...variants,
};
}
function round(value: number) {
return Math.round(value * 1e5) / 1e5;
}

1
packages/grafana-ui/.storybook/preview.ts
View File

@ -43,6 +43,7 @@ export const parameters = {
dark: GrafanaDark,
light: GrafanaLight,
},
layout: 'fullscreen',
actions: { argTypesRegex: '^on[A-Z].*' },
options: {
showPanel: true,

4
packages/grafana-ui/.storybook/storybookTheme.ts
View File

@ -23,11 +23,11 @@ const createTheme = (theme: GrafanaTheme) => {
fontCode: theme.v2.typography.fontFamilyMonospace,
// Text colors
textColor: theme.v2.palette.text.primary,
textColor: theme.v2.palette.primary.text,
textInverseColor: theme.v2.palette.primary.contrastText,
// Toolbar default and active colors
barTextColor: theme.v2.palette.primary.text,
barTextColor: theme.v2.palette.text.primary,
barSelectedColor: theme.v2.palette.emphasize(theme.v2.palette.primary.text),
barBg: theme.v2.palette.layer1,

2
packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`CustomScrollbar renders correctly 1`] = `
<div
className="css-1xduqpt"
className="css-d4ozb2"
style={
Object {
"height": "auto",

13
packages/grafana-ui/src/components/Slider/styles.ts
View File

@ -3,7 +3,6 @@ import { GrafanaTheme } from '@grafana/data';
import { focusCss } from '../../themes/mixins';
import { css as cssCore } from '@emotion/react';
import { css } from '@emotion/css';
import tinycolor from 'tinycolor2';
export const getFocusStyle = (theme: GrafanaTheme) => css`
&:focus {
@ -12,11 +11,11 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
`;
export const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) => {
const { spacing, palette } = theme;
const railColor = theme.isLight ? palette.gray5 : palette.dark6;
const trackColor = theme.isLight ? palette.blue85 : palette.blue77;
const handleColor = theme.isLight ? palette.blue85 : palette.blue80;
const blueOpacity = tinycolor(handleColor).setAlpha(0.2).toString();
const { spacing } = theme;
const railColor = theme.v2.palette.border2;
const trackColor = theme.v2.palette.primary.main;
const handleColor = theme.v2.palette.primary.main;
const blueOpacity = theme.v2.palette.primary.transparent;
const hoverSyle = `box-shadow: 0px 0px 0px 6px ${blueOpacity}`;
return {
@ -37,6 +36,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boole
.rc-slider-handle {
border: none;
background-color: ${handleColor};
box-shadow: ${theme.v2.shadows.z1};
cursor: pointer;
}
.rc-slider-handle:hover,
@ -51,7 +51,6 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boole
}
.rc-slider-rail {
background-color: ${railColor};
border: 1px solid ${railColor};
cursor: pointer;
}
`,

2
packages/grafana-ui/src/components/Tabs/Counter.tsx
View File

@ -9,7 +9,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
label: counter;
margin-left: ${theme.spacing.sm};
border-radius: ${theme.spacing.lg};
background-color: ${theme.colors.bg2};
background-color: ${theme.v2.palette.action.hover};
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
color: ${theme.colors.textWeak};
font-weight: ${theme.typography.weight.semibold};

8
packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts
View File

@ -50,16 +50,14 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
theme,
} = this.props;
let { typography } = theme;
const font = `12px ${theme.v2.typography.fontFamily}`;
let font = `${typography.size.sm} ${typography.fontFamily.sansSerif}`;
const gridColor = theme.isDark ? theme.palette.gray25 : theme.palette.gray90;
const gridColor = theme.v2.isDark ? 'rgba(240, 250, 255, 0.09)' : 'rgba(0, 10, 23, 0.09)';
let config: Axis = {
scale: scaleKey,
show,
stroke: theme.colors.text,
stroke: theme.v2.palette.text.primary,
side: getUPlotSideFromAxis(placement),
font,
labelFont: font,

10
packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
View File

@ -299,15 +299,15 @@ describe('UPlotConfigBuilder', () => {
Object {
"axes": Array [
Object {
"font": "12px 'Inter', 'Helvetica Neue', Arial, sans-serif",
"font": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"gap": 5,
"grid": Object {
"show": false,
"stroke": "#2c3235",
"stroke": "rgba(240, 250, 255, 0.09)",
"width": 1,
},
"label": "test label",
"labelFont": "12px 'Inter', 'Helvetica Neue', Arial, sans-serif",
"labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"labelSize": 18,
"scale": "scale-x",
"show": true,
@ -315,10 +315,10 @@ describe('UPlotConfigBuilder', () => {
"size": [Function],
"space": [Function],
"splits": undefined,
"stroke": "rgba(255, 255, 255, 0.77)",
"stroke": "rgb(201, 209, 217)",
"ticks": Object {
"show": true,
"stroke": "#2c3235",
"stroke": "rgba(240, 250, 255, 0.09)",
"width": 1,
},
"timeZone": "browser",

4
packages/grafana-ui/src/themes/GlobalStyles/elements.ts
View File

@ -51,6 +51,10 @@ export function getElementStyles(theme: GrafanaThemeV2) {
margin: 0 0 ${theme.spacing(2)};
}
button {
letter-spacing: ${theme.typography.body.letterSpacing};
}
// Ex: 14px base font * 85% = about 12px
small {
font-size: ${theme.typography.bodySmall.fontSize};

2
packages/grafana-ui/src/themes/default.ts
View File

@ -31,7 +31,7 @@ const theme: GrafanaThemeCommons = {
name: 'Grafana Default',
typography: {
fontFamily: {
sansSerif: "'Inter', 'Helvetica Neue', Arial, sans-serif",
sansSerif: "'Roboto', 'Helvetica Neue', Arial, sans-serif",
monospace: "'Roboto Mono', monospace",
},
size: {

2
packages/grafana-ui/src/utils/measureText.ts
View File

@ -21,7 +21,7 @@ export function getCanvasContext() {
* @beta
*/
export function measureText(text: string, fontSize: number): TextMetrics {
const fontStyle = `${fontSize}px 'Inter'`;
const fontStyle = `${fontSize}px 'Roboto'`;
const cacheKey = text + fontStyle;
const fromCache = cache[cacheKey];

6
packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
View File

@ -1,14 +1,18 @@
import React from 'react';
import { GlobalStyles } from '../../themes';
import { GlobalStyles, useTheme } from '../../themes';
import { RenderFunction } from '../../types';
const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
const theme = useTheme();
return (
<div
style={{
width: '100%',
padding: '20px',
display: 'flex',
minHeight: '80vh',
background: `${theme.v2.palette.layer1}`,
}}
>
<GlobalStyles />

4
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`Render should render component 1`] = `
onCancel={[Function]}
styles={
Object {
"actionsRow": "css-sxfls",
"actionsRow": "css-l02n0m",
"actionsWrapper": "css-gxxmom",
"backButton": "css-1cdxa9p",
"headerRow": "css-3sdqvi",
@ -25,7 +25,7 @@ exports[`Render should render component 1`] = `
className="css-gxxmom"
>
<div
className="css-sxfls"
className="css-l02n0m"
>
<div
aria-label="Add new panel"

8
public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
View File

@ -114,15 +114,11 @@ const getStyles = (theme: GrafanaTheme) => {
cursor: pointer;
align-items: baseline;
padding: ${theme.spacing.sm};
color: ${theme.v2.palette.text.secondary};
color: ${theme.v2.palette.text.primary};
font-weight: ${theme.typography.weight.semibold};
&:hover {
color: ${theme.v2.palette.text.primary};
.editor-options-group-toggle {
color: ${theme.colors.text};
}
background: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.03)};
}
`,
headerExpanded: css`

6
public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
View File

@ -183,7 +183,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
<ValuePicker
label="Add override property"
variant="secondary"
isFullWidth={false}
isFullWidth={true}
icon="plus"
menuPlacement="auto"
options={configPropertiesOptions}
@ -209,9 +209,9 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
icon="plus"
label="Add a field override"
variant="secondary"
size="sm"
menuPlacement="auto"
isFullWidth={false}
isFullWidth={true}
size="md"
options={fieldMatchersUI
.list()
.filter((o) => !o.excludeFromPicker)

2
public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`MetaInfoText should render component 1`] = `
<div
className="css-7qzshi"
className="css-1nu680j"
>
<Memo(MetaInfoItem)
key="0-label"

BIN
public/fonts/roboto/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2 Normal file
View File

Binary file not shown.

46
public/sass/_variables.dark.generated.scss
View File

@ -62,10 +62,10 @@ $layer0: #111217;
$layer1: #181b1f;
$layer2: #22252b;
$divider: rgba(218,224,254,0.06);
$divider: rgba(201, 209, 217, 0.10);
$border0: #181b1f;
$border1: rgba(218,224,254,0.15);
$border1: rgba(201, 209, 217, 0.20);
// Accent colors
// -------------------------
@ -74,7 +74,7 @@ $red: $red-base;
$yellow: #ecbb13;
$orange: #eb7b18;
$purple: #9933cc;
$variable: #33a2e5;
$variable: #58a6ff;
$brand-primary: #eb7b18;
$brand-success: #299c46;
@ -99,12 +99,12 @@ $page-bg: #181b1f;
$dashboard-bg: #111217;
$text-color-strong: #fff;
$text-color: rgba(255, 255, 255, 0.77);
$text-color-semi-weak: rgba(255, 255, 255, 0.50);
$text-color-weak: rgba(255, 255, 255, 0.50);
$text-color-faint: rgba(255, 255, 255, 0.35);
$text-color: rgb(201, 209, 217);
$text-color-semi-weak: rgba(201, 209, 217, 0.65);
$text-color-weak: rgba(201, 209, 217, 0.65);
$text-color-faint: rgba(201, 209, 217, 0.40);
$text-color-emphasis: #fff;
$text-blue: #33a2e5;
$text-blue: #58a6ff;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none;
@ -122,7 +122,7 @@ $external-link-color: #33a2e5;
// Typography
// -------------------------
$headings-color: rgba(255, 255, 255, 0.77);
$headings-color: rgb(201, 209, 217);
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@ -132,7 +132,7 @@ $hr-border-color: $dark-9;
// -------------------------
$panel-bg: #181b1f;
$panel-border: #181b1f;
$panel-header-hover-bg: rgba(255, 255, 255, 0.08);
$panel-header-hover-bg: rgba(201, 209, 217, 0.08);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.15),0px 1px 3px 0px rgba(0,0,0,0.1);
$panel-corner: $panel-bg;
@ -147,7 +147,7 @@ $divider-border-color: $gray-1;
$tight-form-func-bg: #22252b;
$tight-form-func-highlight-bg: rgb(40, 43, 49);
$modal-backdrop-bg: rgba(255, 255, 255, 0.08);
$modal-backdrop-bg: rgba(201, 209, 217, 0.08);
$code-tag-bg: $dark-1;
$code-tag-border: $dark-9;
@ -171,7 +171,7 @@ $scrollbarBorder: black;
// Tables
// -------------------------
$table-bg-accent: #22252b;
$table-border: rgba(218,224,254,0.15);
$table-border: rgba(201, 209, 217, 0.20);
$table-bg-odd: rgb(28, 31, 35);
$table-bg-hover: rgb(35, 38, 42);
@ -213,11 +213,11 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: #c7d0d9;
$input-border-color: rgba(218,224,254,0.15);
$input-border-color: rgba(201, 209, 217, 0.20);
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: rgba(255, 255, 255, 0.35);
$input-color-placeholder: rgba(201, 209, 217, 0.40);
$input-label-bg: #22252b;
$input-color-select-arrow: $white;
@ -233,8 +233,8 @@ $typeahead-selected-color: $yellow;
// -------------------------
$dropdownBackground: #22252b;
$dropdownBorder: #181b1f;
$dropdownDividerTop: rgba(218,224,254,0.06);
$dropdownDividerBottom: rgba(218,224,254,0.06);
$dropdownDividerTop: rgba(201, 209, 217, 0.10);
$dropdownDividerBottom: rgba(201, 209, 217, 0.10);
$dropdownLinkColor: $link-color;
$dropdownLinkColorHover: $white;
@ -258,12 +258,12 @@ $side-menu-border: none;
$side-menu-item-hover-bg: #22252b;
$side-menu-shadow: 0 0 30px #111;
$side-menu-icon-color: #9fa7b3;
$side-menu-header-color: rgba(255, 255, 255, 0.77);
$side-menu-header-color: rgb(201, 209, 217);
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: #22252b;
$menu-dropdown-hover-bg: rgba(255, 255, 255, 0.08);
$menu-dropdown-hover-bg: rgba(201, 209, 217, 0.08);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.15),0px 1px 10px 0px rgba(0,0,0,0.1);
// Tabs
@ -288,14 +288,14 @@ $tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: #22252b;
$tooltipColor: rgba(255, 255, 255, 0.77);
$tooltipColor: rgb(201, 209, 217);
$tooltipArrowColor: #22252b;
$tooltipBackgroundError: #D10E5C;
$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.15),0px 1px 5px 0px rgba(0,0,0,0.1);
$popover-bg: #22252b;
$popover-color: rgba(255, 255, 255, 0.77);
$popover-border-color: rgba(218,224,254,0.15);
$popover-color: rgb(201, 209, 217);
$popover-border-color: rgba(201, 209, 217, 0.20);
$popover-header-bg: #22252b;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.15),0px 3px 14px 2px rgba(0,0,0,0.1);
@ -332,14 +332,14 @@ $json-explorer-url-color: #027bff;
// Changelog and diff
// -------------------------
$diff-label-bg: rgba(255, 255, 255, 0.08);
$diff-label-bg: rgba(201, 209, 217, 0.08);
$diff-label-fg: $white;
$diff-group-bg: #22252b;
$diff-arrow-color: $white;
$diff-json-bg: #22252b;
$diff-json-fg: rgba(255, 255, 255, 0.77);
$diff-json-fg: rgb(201, 209, 217);
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;

2
public/sass/_variables.generated.scss
View File

@ -99,7 +99,7 @@ $height-lg: 48;
// Typography
// -------------------------
$font-family-sans-serif: 'Inter', 'Helvetica Neue', Arial, sans-serif;
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
$font-family-monospace: 'Roboto Mono', monospace;
$font-size-base: 14px !default;

48
public/sass/_variables.light.generated.scss
View File

@ -57,19 +57,19 @@ $layer0: #F4F5F5;
$layer1: #fff;
$layer2: #F4F5F5;
$divider: rgba(0, 2, 78, 0.07);
$divider: rgba(36, 41, 46, 0.12);
$border0: #fff;
$border1: rgba(0, 2, 78, 0.20);
$border1: rgba(36, 41, 46, 0.30);
// Accent colors
// -------------------------
$blue: #1F62E0;
$blue: #0465d7;
$red: $red-base;
$yellow: #ff851b;
$orange: #ff7941;
$purple: #9954bb;
$variable: #1F62E0;
$variable: #0465d7;
$brand-primary: #ff7941;
$brand-success: #3eb15b;
@ -93,13 +93,13 @@ $body-bg: #fff;
$page-bg: #fff;
$dashboard-bg: #F4F5F5;
$text-color: rgba(0, 0, 0, 0.75);
$text-color: rgba(36, 41, 46, 1);
$text-color-strong: #000;
$text-color-semi-weak: rgba(0, 0, 0, 0.60);
$text-color-weak: rgba(0, 0, 0, 0.60);
$text-color-faint: rgba(0, 0, 0, 0.45);
$text-color-semi-weak: rgba(36, 41, 46, 0.75);
$text-color-weak: rgba(36, 41, 46, 0.75);
$text-color-faint: rgba(36, 41, 46, 0.50);
$text-color-emphasis: #000;
$text-blue: #1F62E0;
$text-blue: #0465d7;
$text-shadow-faint: none;
@ -109,14 +109,14 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
// Links
// -------------------------
$link-color: rgba(0, 0, 0, 0.75);
$link-color-disabled: rgba(0, 0, 0, 0.60);
$link-color: rgba(36, 41, 46, 1);
$link-color-disabled: rgba(36, 41, 46, 0.75);
$link-hover-color: #000;
$external-link-color: #33a2e5;
// Typography
// -------------------------
$headings-color: rgba(0, 0, 0, 0.75);
$headings-color: rgba(36, 41, 46, 1);
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@ -126,7 +126,7 @@ $hr-border-color: $gray-4 !default;
// -------------------------
$panel-bg: #fff;
$panel-border: #fff;
$panel-header-hover-bg: rgba(0, 0, 0, 0.04);
$panel-header-hover-bg: rgba(36, 41, 46, 0.04);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.15),0px 0px 0px 0px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.1);
$panel-corner: $panel-bg;
@ -165,7 +165,7 @@ $scrollbarBorder: $gray-7;
// Tables
// -------------------------
$table-bg-accent: #F4F5F5;
$table-border: rgba(0, 2, 78, 0.20);
$table-border: rgba(36, 41, 46, 0.30);
$table-bg-odd: rgb(249, 249, 249);
$table-bg-hover: rgb(242, 242, 242);
@ -206,12 +206,12 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
$input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: rgba(0, 0, 0, 0.75);
$input-color: rgba(36, 41, 46, 1);
$input-border-color: #c7d0d9;
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: #5794f2;
$input-color-placeholder: rgba(0, 0, 0, 0.45);
$input-color-placeholder: rgba(36, 41, 46, 0.50);
$input-label-bg: #F4F5F5;
$input-color-select-arrow: #7b8087;
@ -227,8 +227,8 @@ $typeahead-selected-color: $yellow;
// -------------------------
$dropdownBackground: #F4F5F5;
$dropdownBorder: #fff;
$dropdownDividerTop: rgba(0, 2, 78, 0.07);
$dropdownDividerBottom: rgba(0, 2, 78, 0.07);
$dropdownDividerTop: rgba(36, 41, 46, 0.12);
$dropdownDividerBottom: rgba(36, 41, 46, 0.12);
$dropdownLinkColor: $dark-2;
$dropdownLinkColorHover: $link-color;
@ -259,7 +259,7 @@ $side-menu-header-color: #e9edf2;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: #F4F5F5;
$menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04);
$menu-dropdown-hover-bg: rgba(36, 41, 46, 0.04);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.15),0px 4px 5px 0px rgba(0,0,0,0.1),0px 1px 10px 0px rgba(0,0,0,0.1);
// Tabs
@ -279,14 +279,14 @@ $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// Tooltips and popovers
$tooltipBackground: #F4F5F5;
$tooltipColor: rgba(0, 0, 0, 0.75);
$tooltipColor: rgba(36, 41, 46, 1);
$tooltipArrowColor: #F4F5F5;
$tooltipBackgroundError: #E0226E;
$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.15),0px 2px 2px 0px rgba(0,0,0,0.1),0px 1px 5px 0px rgba(0,0,0,0.1);
$popover-bg: #F4F5F5;
$popover-color: rgba(0, 0, 0, 0.75);
$popover-border-color: rgba(0, 2, 78, 0.20);
$popover-color: rgba(36, 41, 46, 1);
$popover-border-color: rgba(36, 41, 46, 0.30);
$popover-header-bg: #F4F5F5;
$popover-shadow: 0px 5px 5px -5px rgba(0,0,0,0.15),0px 8px 10px 1px rgba(0,0,0,0.1),0px 3px 14px 2px rgba(0,0,0,0.1);
@ -328,14 +328,14 @@ $json-explorer-url-color: $blue-base;
// Changelog and diff
// -------------------------
$diff-label-bg: rgba(0, 0, 0, 0.04);
$diff-label-bg: rgba(36, 41, 46, 0.04);
$diff-label-fg: $gray-2;
$diff-arrow-color: $dark-2;
$diff-group-bg: #F4F5F5;
$diff-json-bg: #F4F5F5;
$diff-json-fg: rgba(0, 0, 0, 0.75);
$diff-json-fg: rgba(36, 41, 46, 1);
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;

236
public/sass/base/_fonts.scss
View File

@ -3,131 +3,257 @@
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+1f00-1fff;
}
/* greek */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
src: url(../fonts/roboto/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+1f00-1fff;
}
/* greek */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
unicode-range: U+0370-03FF;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0370-03ff;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+1f00-1fff;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0370-03ff;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
}
/* latin */
@font-face {
font-display: swap;
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
unicode-range: U+1f00-1fff;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
unicode-range: U+0370-03ff;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
}
/* latin */

2
public/views/index-template.html
View File

@ -12,7 +12,7 @@
<link
rel="preload"
href="[[.ContentDeliveryURL]]public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2"
href="[[.ContentDeliveryURL]]public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2"
as="font"
crossorigin
/>