From 94c772bbeabf15adf60c3971e120adc99e4ee51e Mon Sep 17 00:00:00 2001 From: Hannah Date: Wed, 28 Aug 2024 12:51:23 +0200 Subject: [PATCH 1/9] change sans font from Source Sans Pro to Asap --- gradio/themes/base.py | 2 +- gradio/themes/default.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/gradio/themes/base.py b/gradio/themes/base.py index 93c53f52a7f29..d1cb528c87fe6 100644 --- a/gradio/themes/base.py +++ b/gradio/themes/base.py @@ -352,7 +352,7 @@ def __init__( spacing_size: sizes.Size | str = sizes.spacing_md, radius_size: sizes.Size | str = sizes.radius_md, font: fonts.Font | str | Iterable[fonts.Font | str] = ( - fonts.GoogleFont("Source Sans Pro"), + fonts.GoogleFont("Asap"), "ui-sans-serif", "system-ui", "sans-serif", diff --git a/gradio/themes/default.py b/gradio/themes/default.py index 8f5dd2d5a1954..8d338a84fcc71 100644 --- a/gradio/themes/default.py +++ b/gradio/themes/default.py @@ -17,7 +17,7 @@ def __init__( radius_size: sizes.Size | str = sizes.radius_md, text_size: sizes.Size | str = sizes.text_md, font: fonts.Font | str | Iterable[fonts.Font | str] = ( - fonts.GoogleFont("Source Sans Pro"), + fonts.GoogleFont("Asap"), "ui-sans-serif", "system-ui", "sans-serif", From f5fe7e8eac8e2038664743c2d40bc9e8accd3c3f Mon Sep 17 00:00:00 2001 From: Hannah Date: Wed, 28 Aug 2024 12:54:15 +0200 Subject: [PATCH 2/9] change misc refs to Source Sans Pro --- guides/09_other-tutorials/theming-guide.md | 2 +- guides/cn/07_other-tutorials/theming-guide.md | 2 +- js/_cdn-test/index.html | 2 +- js/column/Index.svelte | 2 -- js/component-test/src/theme.css | 4 ++-- js/lite/src/theme.css | 4 ++-- js/storybook/themeLight.js | 2 +- js/theme/src/pollen.config.cjs | 2 +- 8 files changed, 9 insertions(+), 11 deletions(-) diff --git a/guides/09_other-tutorials/theming-guide.md b/guides/09_other-tutorials/theming-guide.md index 48fd97c5c8908..3500a72637ad9 100644 --- a/guides/09_other-tutorials/theming-guide.md +++ b/guides/09_other-tutorials/theming-guide.md @@ -156,7 +156,7 @@ You could also create your own custom `Size` objects and pass them in. The final 2 constructor arguments set the fonts of the theme. You can pass a list of fonts to each of these arguments to specify fallbacks. If you provide a string, it will be loaded as a system font. If you provide a `gradio.themes.GoogleFont`, the font will be loaded from Google Fonts. -- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("Source Sans Pro")`. +- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("Asap")`. - `font_mono`: This sets the monospace font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Mono")`. You could modify these values such as the following: diff --git a/guides/cn/07_other-tutorials/theming-guide.md b/guides/cn/07_other-tutorials/theming-guide.md index 89515a61bb023..fd28ffb688210 100644 --- a/guides/cn/07_other-tutorials/theming-guide.md +++ b/guides/cn/07_other-tutorials/theming-guide.md @@ -156,7 +156,7 @@ with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.sizes.spacing_sm, 最后的 2 个构造函数参数设置主题的字体。您可以将一系列字体传递给这些参数，以指定回退字体。如果提供了字符串，它将被加载为系统字体。如果提供了 `gradio.themes.GoogleFont`，则将从 Google Fonts 加载该字体。 -- `font`：此设置主题的主要字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("Source Sans Pro")`。 +- `font`：此设置主题的主要字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("Asap")`。 - `font_mono`：此设置主题的等宽字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("IBM Plex Mono")`。 您可以修改这些值，例如以下方式： diff --git a/js/_cdn-test/index.html b/js/_cdn-test/index.html index ea91273f74ca8..00553e00acd26 100644 --- a/js/_cdn-test/index.html +++ b/js/_cdn-test/index.html @@ -5,7 +5,7 @@ html { /* background: #111; */ /* color: #eee; */ - font-family: Source Sans Pro; + font-family: Asap; } diff --git a/js/column/Index.svelte b/js/column/Index.svelte index 67cc50cbaaee8..9c5a77662add5 100644 --- a/js/column/Index.svelte +++ b/js/column/Index.svelte @@ -69,7 +69,5 @@ .panel { border: solid var(--panel-border-width) var(--panel-border-color); border-radius: var(--container-radius); - background: var(--panel-background-fill); - padding: var(--spacing-lg); } diff --git a/js/component-test/src/theme.css b/js/component-test/src/theme.css index f931dc90bd0e8..405b7ad67c465 100644 --- a/js/component-test/src/theme.css +++ b/js/component-test/src/theme.css @@ -54,7 +54,7 @@ --text-lg: 16px; --text-xl: 22px; --text-xxl: 26px; - --font: "Source Sans Pro", "ui-sans-serif", "system-ui", sans-serif; + --font: "Asap", "ui-sans-serif", "system-ui", sans-serif; --font-mono: "IBM Plex Mono", "ui-monospace", "Consolas", monospace; --body-background-fill: var(--background-fill-primary); --body-text-color: var(--neutral-800); @@ -432,7 +432,7 @@ --text-lg: 16px; --text-xl: 22px; --text-xxl: 26px; - --font: "Source Sans Pro", "ui-sans-serif", "system-ui", sans-serif; + --font: "Asap", "ui-sans-serif", "system-ui", sans-serif; --font-mono: "IBM Plex Mono", "ui-monospace", "Consolas", monospace; --body-text-size: var(--text-md); --body-text-weight: 400; diff --git a/js/lite/src/theme.css b/js/lite/src/theme.css index 19e647060cfcc..86c60ffb609b4 100644 --- a/js/lite/src/theme.css +++ b/js/lite/src/theme.css @@ -54,7 +54,7 @@ --text-lg: 16px; --text-xl: 22px; --text-xxl: 26px; - --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif; + --font: 'Asap', 'ui-sans-serif', 'system-ui', sans-serif; --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace; --body-background-fill: var(--background-fill-primary); --body-text-color: var(--neutral-800); @@ -351,7 +351,7 @@ --text-lg: 16px; --text-xl: 22px; --text-xxl: 26px; - --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif; + --font: 'Asap', 'ui-sans-serif', 'system-ui', sans-serif; --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace; --body-text-size: var(--text-md); --body-text-weight: 400; diff --git a/js/storybook/themeLight.js b/js/storybook/themeLight.js index 51d5170f32fe0..e7687316d5d29 100644 --- a/js/storybook/themeLight.js +++ b/js/storybook/themeLight.js @@ -8,7 +8,7 @@ export default create({ brandImage: Logo, brandTarget: "_blank", - fontBase: '"Source Sans Pro", sans-serif', + fontBase: '"Asap", sans-serif', fontCode: "monospace", // theme colours diff --git a/js/theme/src/pollen.config.cjs b/js/theme/src/pollen.config.cjs index b1e0f949109cb..5da3d8e2ac507 100644 --- a/js/theme/src/pollen.config.cjs +++ b/js/theme/src/pollen.config.cjs @@ -11,7 +11,7 @@ module.exports = defineConfig((pollen) => { }, font: { ...pollen.font, - sans: `Source Sans Pro, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, + sans: `Asap, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, mono: `IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` }, radius: { From 90cbc95c9c0c67bb94284e3c1c50c6c3b21190e8 Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Wed, 28 Aug 2024 11:24:24 +0000 Subject: [PATCH 3/9] add changeset --- .changeset/pink-shirts-fry.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/pink-shirts-fry.md diff --git a/.changeset/pink-shirts-fry.md b/.changeset/pink-shirts-fry.md new file mode 100644 index 0000000000000..af75cd398c040 --- /dev/null +++ b/.changeset/pink-shirts-fry.md @@ -0,0 +1,11 @@ +--- +"@gradio/column": minor +"@gradio/lite": minor +"@gradio/theme": minor +"@self/cdn-test": minor +"@self/component-test": minor +"@self/storybook": minor +"gradio": minor +--- + +feat:🔡 Update default core Gradio font From 2afc3800e710f473d41b8260fe1ab0b326f9dd42 Mon Sep 17 00:00:00 2001 From: Hannah Date: Wed, 28 Aug 2024 13:28:44 +0200 Subject: [PATCH 4/9] revert old changes --- js/column/Index.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/column/Index.svelte b/js/column/Index.svelte index 9c5a77662add5..67cc50cbaaee8 100644 --- a/js/column/Index.svelte +++ b/js/column/Index.svelte @@ -69,5 +69,7 @@ .panel { border: solid var(--panel-border-width) var(--panel-border-color); border-radius: var(--container-radius); + background: var(--panel-background-fill); + padding: var(--spacing-lg); } From a4bf5864a63665396b7658afdc4dc29cfc732ad0 Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Wed, 28 Aug 2024 11:29:47 +0000 Subject: [PATCH 5/9] add changeset --- .changeset/pink-shirts-fry.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/pink-shirts-fry.md b/.changeset/pink-shirts-fry.md index af75cd398c040..bbe65e9b4dba8 100644 --- a/.changeset/pink-shirts-fry.md +++ b/.changeset/pink-shirts-fry.md @@ -1,5 +1,4 @@ --- -"@gradio/column": minor "@gradio/lite": minor "@gradio/theme": minor "@self/cdn-test": minor From 80e428708c5d5d44a5d6d6a6c907b4e028b60d34 Mon Sep 17 00:00:00 2001 From: Hannah Date: Thu, 29 Aug 2024 00:48:44 +0200 Subject: [PATCH 6/9] replace asap with IBM Plex Sans --- gradio/themes/base.py | 2 +- gradio/themes/default.py | 2 +- js/_website/tailwind.config.cjs | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/gradio/themes/base.py b/gradio/themes/base.py index d1cb528c87fe6..feafe8975e610 100644 --- a/gradio/themes/base.py +++ b/gradio/themes/base.py @@ -352,7 +352,7 @@ def __init__( spacing_size: sizes.Size | str = sizes.spacing_md, radius_size: sizes.Size | str = sizes.radius_md, font: fonts.Font | str | Iterable[fonts.Font | str] = ( - fonts.GoogleFont("Asap"), + fonts.GoogleFont("IBM Plex Sans"), "ui-sans-serif", "system-ui", "sans-serif", diff --git a/gradio/themes/default.py b/gradio/themes/default.py index 8d338a84fcc71..e08a62115de3d 100644 --- a/gradio/themes/default.py +++ b/gradio/themes/default.py @@ -17,7 +17,7 @@ def __init__( radius_size: sizes.Size | str = sizes.radius_md, text_size: sizes.Size | str = sizes.text_md, font: fonts.Font | str | Iterable[fonts.Font | str] = ( - fonts.GoogleFont("Asap"), + fonts.GoogleFont("IBM Plex Sans"), "ui-sans-serif", "system-ui", "sans-serif", diff --git a/js/_website/tailwind.config.cjs b/js/_website/tailwind.config.cjs index 9272f8a112401..b975c6a590204 100644 --- a/js/_website/tailwind.config.cjs +++ b/js/_website/tailwind.config.cjs @@ -10,7 +10,7 @@ module.exports = { theme: { extend: { fontFamily: { - sans: ["Source Sans Pro", ...defaultTheme.fontFamily.sans], + sans: ["IBM Plex Sans", ...defaultTheme.fontFamily.sans], mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono] }, colors: { From cb4f8ffb065b3890ea1ebc359fd93f154ee1600c Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Wed, 28 Aug 2024 22:49:37 +0000 Subject: [PATCH 7/9] add changeset --- .changeset/pink-shirts-fry.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/pink-shirts-fry.md b/.changeset/pink-shirts-fry.md index bbe65e9b4dba8..4bc8b7a8da607 100644 --- a/.changeset/pink-shirts-fry.md +++ b/.changeset/pink-shirts-fry.md @@ -5,6 +5,7 @@ "@self/component-test": minor "@self/storybook": minor "gradio": minor +"website": minor --- feat:🔡 Update default core Gradio font From a486f9f8d70b224d6d9ed7cf08884ecbc04cc6c2 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 30 Aug 2024 00:40:44 +0200 Subject: [PATCH 8/9] repalce asaps with ibm plex --- guides/09_other-tutorials/theming-guide.md | 2 +- guides/cn/07_other-tutorials/theming-guide.md | 2 +- js/_cdn-test/index.html | 2 +- js/component-test/src/theme.css | 4 ++-- js/lite/src/theme.css | 4 ++-- js/storybook/themeLight.js | 2 +- js/theme/src/pollen.config.cjs | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/guides/09_other-tutorials/theming-guide.md b/guides/09_other-tutorials/theming-guide.md index 3500a72637ad9..767a725040064 100644 --- a/guides/09_other-tutorials/theming-guide.md +++ b/guides/09_other-tutorials/theming-guide.md @@ -156,7 +156,7 @@ You could also create your own custom `Size` objects and pass them in. The final 2 constructor arguments set the fonts of the theme. You can pass a list of fonts to each of these arguments to specify fallbacks. If you provide a string, it will be loaded as a system font. If you provide a `gradio.themes.GoogleFont`, the font will be loaded from Google Fonts. -- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("Asap")`. +- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Sans")`. - `font_mono`: This sets the monospace font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Mono")`. You could modify these values such as the following: diff --git a/guides/cn/07_other-tutorials/theming-guide.md b/guides/cn/07_other-tutorials/theming-guide.md index fd28ffb688210..f411f4203b758 100644 --- a/guides/cn/07_other-tutorials/theming-guide.md +++ b/guides/cn/07_other-tutorials/theming-guide.md @@ -156,7 +156,7 @@ with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.sizes.spacing_sm, 最后的 2 个构造函数参数设置主题的字体。您可以将一系列字体传递给这些参数，以指定回退字体。如果提供了字符串，它将被加载为系统字体。如果提供了 `gradio.themes.GoogleFont`，则将从 Google Fonts 加载该字体。 -- `font`：此设置主题的主要字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("Asap")`。 +- `font`：此设置主题的主要字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("IBM Plex Sans")`。 - `font_mono`：此设置主题的等宽字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("IBM Plex Mono")`。 您可以修改这些值，例如以下方式： diff --git a/js/_cdn-test/index.html b/js/_cdn-test/index.html index 00553e00acd26..f1f395926a49f 100644 --- a/js/_cdn-test/index.html +++ b/js/_cdn-test/index.html @@ -5,7 +5,7 @@ html { /* background: #111; */ /* color: #eee; */ - font-family: Asap; + font-family: "IBM Plex Sans"; } diff --git a/js/component-test/src/theme.css b/js/component-test/src/theme.css index 405b7ad67c465..f773c3d5b8dc6 100644 --- a/js/component-test/src/theme.css +++ b/js/component-test/src/theme.css @@ -54,7 +54,7 @@ --text-lg: 16px; --text-xl: 22px; --text-xxl: 26px; - --font: "Asap", "ui-sans-serif", "system-ui", sans-serif; + --font: "IBM Plex Sans", "ui-sans-serif", "system-ui", sans-serif; --font-mono: "IBM Plex Mono", "ui-monospace", "Consolas", monospace; --body-background-fill: var(--background-fill-primary); --body-text-color: var(--neutral-800); @@ -432,7 +432,7 @@ --text-lg: 16px; --text-xl: 22px; --text-xxl: 26px; - --font: "Asap", "ui-sans-serif", "system-ui", sans-serif; + --font: "IBM Plex Sans", "ui-sans-serif", "system-ui", sans-serif; --font-mono: "IBM Plex Mono", "ui-monospace", "Consolas", monospace; --body-text-size: var(--text-md); --body-text-weight: 400; diff --git a/js/lite/src/theme.css b/js/lite/src/theme.css index 86c60ffb609b4..d0667ad26dee4 100644 --- a/js/lite/src/theme.css +++ b/js/lite/src/theme.css @@ -54,7 +54,7 @@ --text-lg: 16px; --text-xl: 22px; --text-xxl: 26px; - --font: 'Asap', 'ui-sans-serif', 'system-ui', sans-serif; + --font: 'IBM Plex Sans', 'ui-sans-serif', 'system-ui', sans-serif; --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace; --body-background-fill: var(--background-fill-primary); --body-text-color: var(--neutral-800); @@ -351,7 +351,7 @@ --text-lg: 16px; --text-xl: 22px; --text-xxl: 26px; - --font: 'Asap', 'ui-sans-serif', 'system-ui', sans-serif; + --font: 'IBM Plex Sans', 'ui-sans-serif', 'system-ui', sans-serif; --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace; --body-text-size: var(--text-md); --body-text-weight: 400; diff --git a/js/storybook/themeLight.js b/js/storybook/themeLight.js index e7687316d5d29..29925b72a4c84 100644 --- a/js/storybook/themeLight.js +++ b/js/storybook/themeLight.js @@ -8,7 +8,7 @@ export default create({ brandImage: Logo, brandTarget: "_blank", - fontBase: '"Asap", sans-serif', + fontBase: '"IBM Plex Sans", sans-serif', fontCode: "monospace", // theme colours diff --git a/js/theme/src/pollen.config.cjs b/js/theme/src/pollen.config.cjs index 5da3d8e2ac507..8cf39001733f7 100644 --- a/js/theme/src/pollen.config.cjs +++ b/js/theme/src/pollen.config.cjs @@ -11,7 +11,7 @@ module.exports = defineConfig((pollen) => { }, font: { ...pollen.font, - sans: `Asap, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, + sans: `IBM Plex Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, mono: `IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` }, radius: { From 9b49a8a9cfa4fddf0a38cd2c7ddb62aae5444138 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 30 Aug 2024 00:43:36 +0200 Subject: [PATCH 9/9] tweak --- js/_cdn-test/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/_cdn-test/index.html b/js/_cdn-test/index.html index f1f395926a49f..21dfe14af3898 100644 --- a/js/_cdn-test/index.html +++ b/js/_cdn-test/index.html @@ -5,7 +5,7 @@ html { /* background: #111; */ /* color: #eee; */ - font-family: "IBM Plex Sans"; + font-family: IBM Plex Sans; }