Skip to content

feat(web): set HTML#lang attribute and use right fonts #2076

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dgdavid merged 3 commits into from
Feb 25, 2025
Merged

feat(web): set HTML#lang attribute and use right fonts #2076

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b62fe29
feat(web): adjust fonts based on SUSE brand guidelines
dgdavid Feb 25, 2025
43d966e
feat(web): set up HTML#lang attribute
dgdavid Feb 25, 2025
bcb1d8d
doc(web): add entry to changelog
dgdavid Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions web/package/agama-web-ui.changes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
-------------------------------------------------------------------
Tue Feb 25 18:44:07 UTC 2025 - David Diaz <dgonzalez@suse.com>

- Add fonts for CJK characters and monospaced text
(gh#agama-project/agama#2076, bsc#1237457).

-------------------------------------------------------------------
Tue Feb 25 15:57:49 UTC 2025 - Ancor Gonzalez Sosa <ancor@suse.com>

Expand Down
Binary file added web/src/assets/styles/fonts/NotoSansJP-VariableFont_wght.ttf
View file
Open in desktop
Binary file not shown.
Binary file added web/src/assets/styles/fonts/NotoSansKR-VariableFont_wght.ttf
View file
Open in desktop
Binary file not shown.
Binary file added web/src/assets/styles/fonts/NotoSansSC-VariableFont_wght.ttf
View file
Open in desktop
Binary file not shown.
Binary file added web/src/assets/styles/fonts/RobotoMono-VariableFont_wght.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed ...fonts/roboto-mono-v13-vietnamese_latin-ext_latin_greek_cyrillic-ext_cyrillic-regular.woff
View file
Open in desktop
Binary file not shown.
Binary file removed ...onts/roboto-mono-v13-vietnamese_latin-ext_latin_greek_cyrillic-ext_cyrillic-regular.woff2
View file
Open in desktop
Binary file not shown.
77 changes: 74 additions & 3 deletions web/src/assets/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,62 @@
src: local(""), url("./fonts/SUSE-VariableFont_wght.ttf");
}

@font-face {
font-family: "Noto Sans SC";
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
src: local(""), url("./fonts/NotoSansSC-VariableFont_wght.ttf");
}

@font-face {
font-family: "Noto Sans SC Display";
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
src: local(""), url("./fonts/NotoSansSC-VariableFont_wght.ttf");
}

@font-face {
font-family: "Noto Sans JP";
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
src: local(""), url("./fonts/NotoSansJP-VariableFont_wght.ttf");
}

@font-face {
font-family: "Noto Sans JP Display";
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
src: local(""), url("./fonts/NotoSansJP-VariableFont_wght.ttf");
}

@font-face {
font-family: "Noto Sans KR";
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
src: local(""), url("./fonts/NotoSansKR-VariableFont_wght.ttf");
}

@font-face {
font-family: "Noto Sans KR Display";
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
src: local(""), url("./fonts/NotoSansKR-VariableFont_wght.ttf");
}

@font-face {
font-family: "Roboto Mono";
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
src: local(""), url("./fonts/RobotoMono-VariableFont_wght.ttf");
}

:root {
--agm-t--color--pine: #0c322c;
--agm-t--color--pine--shade--100: #025937;
Expand All @@ -43,9 +99,9 @@

--pf-t--global--color--brand--default: var(--agm-t--color--pine);
--pf-t--global--color--brand--hover: var(--agm-t--color--pine--shade--100);
--pf-t--global--font--family--100: "SUSE Text";
--pf-t--global--font--family--200: "SUSE Display";
--pf-t--global--font--family--300: "Roboto mono", monospace;
--pf-t--global--font--family--100: "SUSE Text", verdana;
--pf-t--global--font--family--200: "SUSE Display", verdana;
--pf-t--global--font--family--300: "Roboto Mono", monospace;
--pf-t--global--font--line-height--100: 1.3;
--pf-t--global--font--line-height--200: 1.5;
--pf-t--global--font--size--100: 0.875rem;
Expand All @@ -70,6 +126,21 @@
--pf-t--global--color--brand--clicked: var(--agm-t--color--pine);
}

:root[lang="zh"] {
--pf-t--global--font--family--100: "Noto Sans SC";
--pf-t--global--font--family--200: "Noto Sans SC Display", "Noto Sans SC", serif;
}

:root[lang="ja"] {
--pf-t--global--font--family--100: "Noto Sans JP", serif;
--pf-t--global--font--family--200: "Noto Sans JP Display", "Noto Sans JP", serif;
}

:root[lang="ko"] {
--pf-t--global--font--family--100: "Noto Sans KR", serif;
--pf-t--global--font--family--200: "Noto Sans KR Display", "Noto Sans KR", serif;
}

// Temporary CSS rules written during migration to PFv6

// Reserve the sidebar space also for "lg" breakpoint
Expand Down
2 changes: 2 additions & 0 deletions web/src/context/installerL10n.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,8 @@ function InstallerL10nProvider({
const newLanguage = findSupportedLanguage(candidateLanguages) || "en-US";
const mustReload = storeAgamaLanguage(newLanguage);

document.documentElement.lang = newLanguage.split("-")[0];

if (mustReload) {
reload(newLanguage);
} else {
Expand Down