diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 5eac82e7bd8..024f2d301ca 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -342,7 +342,7 @@ /packages/grafana-o11y-ds-frontend/ @grafana/observability-logs @grafana/observability-traces-and-profiling /packages/grafana-sql/ @grafana/partner-datasources @grafana/oss-big-tent -# root files, mostly frontend +# root files, mostly frontend /.browserslistrc @grafana/frontend-ops /package.json @grafana/frontend-ops /tsconfig.json @grafana/frontend-ops @@ -464,13 +464,13 @@ /public/app/types/ @grafana/grafana-frontend-platform /public/app/types/alerting.ts @grafana/alerting-frontend /public/dashboards/ @grafana/dashboards-squad -/public/fonts/ @grafana/alerting-frontend /public/gazetteer/ @ryantxu /public/img/ @grafana/grafana-frontend-platform /public/lib/ @grafana/grafana-frontend-platform /public/lib/monaco-languages/kusto.ts @grafana/partner-datasources /public/maps/ @ryantxu /public/robots.txt @grafana/frontend-ops +/public/fonts/ @grafana/grafana-frontend-platform /public/sass/ @grafana/grafana-frontend-platform /public/test/ @grafana/grafana-frontend-platform /public/test/helpers/alertingRuleEditor.tsx @grafana/alerting-frontend diff --git a/packages/grafana-ui/src/components/Text/Typography.internal.story.tsx b/packages/grafana-ui/src/components/Text/Typography.internal.story.tsx new file mode 100644 index 00000000000..d7014936a02 --- /dev/null +++ b/packages/grafana-ui/src/components/Text/Typography.internal.story.tsx @@ -0,0 +1,87 @@ +import { Meta, StoryFn } from '@storybook/react'; +import React, { useState } from 'react'; + +import { Divider } from '../Divider/Divider'; +import { Field } from '../Forms/Field'; +import { Stack } from '../Layout/Stack/Stack'; + +import { Text } from './Text'; + +const meta: Meta = { + title: 'General/Text', +}; + +const FONT_WEIGHTS = [/*100, 200, 300, */ 400, 500 /*600, 700, 800, 900*/]; + +export const TypographySamples: StoryFn = () => { + const [fontWeight, setFontWeight] = useState(400); + const [fontSize, setFontSize] = useState(30); + + const handleFontWeightChange = (event: React.ChangeEvent) => { + setFontWeight(Number(event.target.value)); + }; + + const handleFontSizeChange = (event: React.ChangeEvent) => { + setFontSize(Number(event.target.value)); + }; + + return ( +
+ + + + + + + + +
Add new time series panel to Grafana dashboard
+ + + + + {FONT_WEIGHTS.map((weight) => { + return ( +
+ Font weight {weight} + +
+ Add new time series panel +
+ Figure A⃝ #⃞ 3⃝ ×⃞ +
+ 3x9 12:34 3–8 +8+x +
+ 01 02 03 04 05 06 07 08 09 00 +
+ 11 12 13 14 15 16 17 18 19 10 +
+ 01 02 03 04 05 06 07 08 09 00 +
+ 11 12 13 14 15 16 17 18 19 10 +
+
+
+ ); + })} +
+
+ ); +}; + +export default meta; diff --git a/public/fonts/inter/Inter-Medium.woff2 b/public/fonts/inter/Inter-Medium.woff2 new file mode 100644 index 00000000000..0fd2ee7370b Binary files /dev/null and b/public/fonts/inter/Inter-Medium.woff2 differ diff --git a/public/fonts/inter/Inter-Regular.woff2 b/public/fonts/inter/Inter-Regular.woff2 new file mode 100644 index 00000000000..b8699af29b0 Binary files /dev/null and b/public/fonts/inter/Inter-Regular.woff2 differ diff --git a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2 b/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2 deleted file mode 100644 index 1b018738cf2..00000000000 Binary files a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2 and /dev/null differ diff --git a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2 b/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2 deleted file mode 100644 index 422a5538da0..00000000000 Binary files a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2 and /dev/null differ diff --git a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2 b/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2 deleted file mode 100644 index a7f9f92d1aa..00000000000 Binary files a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2 and /dev/null differ diff --git a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2 b/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2 deleted file mode 100644 index 7ab93608504..00000000000 Binary files a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2 and /dev/null differ diff --git a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2 b/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2 deleted file mode 100644 index 27b06439cad..00000000000 Binary files a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2 and /dev/null differ diff --git a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2 b/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2 deleted file mode 100644 index 9026d231077..00000000000 Binary files a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2 and /dev/null differ diff --git a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2 b/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2 deleted file mode 100644 index 11afe85d707..00000000000 Binary files a/public/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2 and /dev/null differ diff --git a/public/sass/base/_fonts.scss b/public/sass/base/_fonts.scss index 3d08a216a33..f75c1d8aaff 100644 --- a/public/sass/base/_fonts.scss +++ b/public/sass/base/_fonts.scss @@ -25,131 +25,26 @@ U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } -/* cyrillic-ext */ +/* +To add new variations/version of Inter, download from https://rsms.me/inter/ and add the +web font files to the public/fonts/inter folder. Do not download the fonts from Google Fonts +or somewhere else because they don't support the features we require (like tabular numerals). + +If adding additional weights, consider switching to the InterVariable variable font as combined +it may take less space than multiple static weights. +*/ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; - src: url(#{$font-file-path}/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: url('#{$font-file-path}/inter/Inter-Regular.woff2') format('woff2'); } -/* cyrillic */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* greek-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} -/* greek */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} -/* vietnamese */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(#{$font-file-path}/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; -} -/* latin-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(#{$font-file-path}/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; -} -/* latin */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(#{$font-file-path}/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; -} -/* cyrillic-ext */ + @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; - src: url(#{$font-file-path}/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; -} -/* cyrillic */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* greek-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} -/* greek */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} -/* vietnamese */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url(#{$font-file-path}/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; -} -/* latin-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url(#{$font-file-path}/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; -} -/* latin */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url(#{$font-file-path}/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: url('#{$font-file-path}/inter/Inter-Medium.woff2') format('woff2'); }