Skip to content
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

Jump to bottom

feat: switch to variable fonts. Rewrite welcome page docs #2619

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat: switch to variable fonts. Rewrite welcome page docs #2619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 2 additions & 11 deletions .storybook/designmanual.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
@import "@ndla/core/scss/core";
@import "@ndla/core/scss/utilities";

@import "@fontsource/source-sans-pro/index.css";
@import "@fontsource/source-sans-pro/400-italic.css";
@import "@fontsource/source-sans-pro/300.css";
@import "@fontsource/source-sans-pro/300-italic.css";
@import "@fontsource/source-sans-pro/600.css";
@import "@fontsource/source-sans-pro/700.css";
@import "@fontsource/source-code-pro/variable.css";
@import "@fontsource/source-serif-pro/index.css";
@import "@fontsource/source-serif-pro/400-italic.css";
@import "@fontsource/source-serif-pro/700.css";
@import "@fontsource-variable/source-serif-4";
@import "@fontsource-variable/source-code-pro";

h2 > a,
h3 > a {
Expand Down
6 changes: 2 additions & 4 deletions .storybook/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import "@fontsource/source-code-pro/variable.css";
@import "@fontsource/source-serif-pro/index.css";
@import "@fontsource/source-serif-pro/400-italic.css";
@import "@fontsource/source-serif-pro/700.css";
@import "@fontsource-variable/source-serif-4";
@import "@fontsource-variable/source-code-pro";

@layer reset, base, tokens, recipes, utilities;
5 changes: 2 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,8 @@
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.25.9",
"@babel/preset-typescript": "^7.26.0",
"@fontsource/source-code-pro": "^4.5.9",
"@fontsource/source-sans-pro": "^4.5.9",
"@fontsource/source-serif-pro": "^4.5.7",
"@fontsource-variable/source-code-pro": "^5.1.0",
"@fontsource-variable/source-serif-4": "^5.1.0",
"@ndla/types-backend": "^0.2.86",
"@pandacss/dev": "^0.46.0",
"@storybook/addon-a11y": "^8.4.5",
Expand Down
4 changes: 2 additions & 2 deletions packages/preset-panda/src/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const fonts = defineTokens.fonts({
},
serif: {
value: [
"'Source Serif Pro'",
"'Source Serif 4 Variable'",
"Times",
"STKaiti",
"'华文楷体'",
Expand All @@ -53,7 +53,7 @@ export const fonts = defineTokens.fonts({
],
},
code: {
value: ["'Source Code ProVariable'", "Monaco"],
value: ["'Source Code Pro Variable'", "Monaco"],
},
});

Expand Down
4 changes: 2 additions & 2 deletions packages/styled-system/src/tokens/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -808,11 +808,11 @@ const tokens = {
"variable": "var(--fonts-sans)"
},
"fonts.serif": {
"value": "'Source Serif Pro', Times, STKaiti, '华文楷体', KaiTi, SimKai, '楷体', KaiU, DFKai-SB, '標楷體', SongTi, '宋体', serif",
"value": "'Source Serif 4 Variable', Times, STKaiti, '华文楷体', KaiTi, SimKai, '楷体', KaiU, DFKai-SB, '標楷體', SongTi, '宋体', serif",
"variable": "var(--fonts-serif)"
},
"fonts.code": {
"value": "'Source Code ProVariable', Monaco",
"value": "'Source Code Pro Variable', Monaco",
"variable": "var(--fonts-code)"
},
"animations.spin": {
Expand Down
91 changes: 52 additions & 39 deletions stories/welcome.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import { Meta, StoryFn } from "@storybook/react";
import { NdlaLogoText, PageContent } from "@ndla/primitives";
import { NdlaLogoText, PageContent, UnOrderedList } from "@ndla/primitives";
import { styled } from "@ndla/styled-system/jsx";
import { ArticleWrapper, ArticleContent } from "@ndla/ui";

Expand Down Expand Up @@ -47,7 +47,7 @@ export const Welcome: StoryFn = () => (
derfor ikke se helt korrekte ut her.
</i>
</p>
<h2 style={{ marginTop: "26px" }}>Hva designmanualen er, og hva den ikke er</h2>
<h2>Hva designmanualen er, og hva den ikke er</h2>
<p>
Designmanualen inneholder retningslinjer for formatering, visuelt uttrykk, interaksjon og innholdselementer.
</p>
Expand All @@ -63,55 +63,68 @@ export const Welcome: StoryFn = () => (
</a>
</p>
<h2>Hvordan bruke designmanualen?</h2>
<p>Designmanual er for produksjon av teknisk innhold. Den består av hovedsakelig tre deler:</p>
<UnOrderedList>
<li>
<b>preset-panda</b>: En <a href="https://panda-css.com">Panda-css</a>-preset som genererer CSS som alle
NDLA-applikasjoner bruker.
</li>
<li>
<b>primitives</b>: Et komponentbibliotek bestående av grunnkomponenter, bygget på toppen av Panda-CSS og{" "}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<b>primitives</b>: Et komponentbibliotek bestående av grunnkomponenter, bygget på toppen av Panda-CSS og{" "}
<b>primitives</b>: Et komponentbibliotek bestående av grunnkomponenter, bygget på toppen av Panda-CSS og

<a href="https://ark-ui.com">ark-ui</a>.
</li>
<li>
<b>ui</b>: NDLA-spesifikke komponenter som bygger på toppen av våre eksisterende primitives.
</li>
</UnOrderedList>
<p>
Designmanual er for produksjon av teknisk innhold. Den består av hovedsakelig to deler: et CSS-bibliotek som
styler de mest brukte HTML-elementene, og et komponent-bibliotek for{" "}
<a href="https://facebook.github.io/react/">React</a>. Den er også publisert på{" "}
<a href="https://www.npmjs.com/package/@ndla/ui">npm</a>.
Hovedapplikasjonene til NDLA er skrevet i <a href="https://react.dev">React</a>, og publiseres på{" "}
<a href="https://www.npmjs.com/org/ndla">npm</a>.
</p>
<h3>Hente inn prosjekt direkte via npm</h3>
<code>npm install @ndla/ui --save</code>
<code>npm install @ndla/ui</code>
<br />
<code>yarn add @ndla/ui -S</code>
<code>yarn add @ndla/ui</code>
<h3>Fonter</h3>
<p>NDLA bruker tre forskjellige fonter:</p>
<UnOrderedList>
<li>
<b>Satoshi</b>: Hovedfonten til NDLA. Hentes fra{" "}
<a href="https://www.fontshare.com/fonts/satoshi">Fontshare</a>.
</li>
<li>
<b>Source Serif 4</b>: Serif-fonten til NDLA. Hentes fra <a href="https://fontsource.org/">Fontsource</a>.
</li>
<li>
<b>Source Code Pro Variable</b>: Brukes til fremvisning av kodesnutter. Hentes fra{" "}
<a href="https://fontsource.org/">Fontsource</a>.
</li>
</UnOrderedList>
<p>
Vi henter fonter ved hjelp av <a href="https://github.com/fontsource/fontsource">Fontsource</a>. Installer
fontene du trenger, og importer deretter fontene du trenger i inngangspunktet til appen.
Fontsource-fontene kan installeres ved hjelp av NPM. De heter henholdsvis{" "}
<code>@fontsource-variable/source-serif-4</code> og <code>@fontsource-variable/source-code-pro</code>.
Satoshi må hentes fra Fontshare sin CDN.
</p>
<p>
Dersom du kun skal bruke primitives-komponentene vil du kun ha behov for Satoshi, gitt at du ikke bruker
tekststiler som er tiltenkt for bruk i NDLA sine artikler.
</p>
<p>Følgende fonter tas i bruk: </p>
<code>import '@fontsource/source-sans-pro/index.css';</code>
<br />
<code>import '@fontsource/source-sans-pro/400-italic.css';</code>
<br />
<code>import '@fontsource/source-sans-pro/300.css';</code>
<br />
<code>import '@fontsource/source-sans-pro/300-italic.css';</code>
<br />
<code>import '@fontsource/source-sans-pro/600.css';</code>
<br />
<code>import '@fontsource/source-sans-pro/700.css';</code>
<br />
<code>import '@fontsource/source-code-pro/index.css';</code>
<br />
<code>import '@fontsource/source-code-pro/400-italic.css';</code>
<br />
<code>import '@fontsource/source-code-pro/700.css';</code>
<br />
<code>import '@fontsource/source-serif-pro/index.css';</code>
<br />
<code>import '@fontsource/source-serif-pro/400-italic.css';</code>
<br />
<code>import '@fontsource/source-serif-pro/700.css';</code>
<h3>Hente inn stilark</h3>
<code>@import '^@ndla/ui/lib/all.css';</code>
<br />
Eller
<br />
<code>@import '~@ndla/core/scss/core';</code>
<br />
<code>@import '~@ndla/ui/src/main';</code>
<br />
Osv.
<p>
Dersom du bruker Panda-CSS kan du ta inspirasjon fra oppsett i{" "}
<a href="https://github.com/NDLANO/ndla-frontend/blob/master/panda.config.ts">ndla-frontend</a>
</p>
<p>
Alternativt eksporterer vi CSS-filer fra alle pakker. Dersom du skal bruke en av pakkene våre er det
nødvendig å ha med css fra <code>@ndla/preset-panda</code>:
</p>
<code>@import '@ndla/preset-panda/dist/styles.css';</code>
<p>Du vil deretter være nødt til å importere css for hver pakke du tar i bruk.</p>
<code>@import '@ndla/primitives/dist/styles.css';</code>
</section>
</ArticleContent>
</ArticleWrapper>
Expand Down
28 changes: 10 additions & 18 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2142,24 +2142,17 @@ __metadata:
languageName: node
linkType: hard

"@fontsource/source-code-pro@npm:^4.5.9":
version: 4.5.9
resolution: "@fontsource/source-code-pro@npm:4.5.9"
checksum: 10c0/e21523a82a2174f20887edd45fb18deedf1383256b8dcad2bdbe40b75670a81ecc0a238a9be80154797046a830bac9415624fed9e5e112b6801e56a07d097b47
languageName: node
linkType: hard

"@fontsource/source-sans-pro@npm:^4.5.9":
version: 4.5.9
resolution: "@fontsource/source-sans-pro@npm:4.5.9"
checksum: 10c0/4ae2c75f3b2315e5a23f00ae4491867118ccc1161ee7c2ea5d45ee1f80534fdb37764ab6b2cf80382bca7b3c3d909df69d869df7880128cc8f949e747d8d12f1
"@fontsource-variable/source-code-pro@npm:^5.1.0":
version: 5.1.0
resolution: "@fontsource-variable/source-code-pro@npm:5.1.0"
checksum: 10c0/d1567710406e05c655bd96c03392bec3aeebe4f6c6e089611ca708deada35246170a5230e0939f608bd6ec54d324001d15ea4641ff67d0d104482dbb58de18ca
languageName: node
linkType: hard

"@fontsource/source-serif-pro@npm:^4.5.7":
version: 4.5.7
resolution: "@fontsource/source-serif-pro@npm:4.5.7"
checksum: 10c0/cb30a860d7b45efd9ea4f5f083e5241c228991a05e7a7bc2f35c65b6ace518b9f9659a16ef96d936c8ec2e085eea34a2bcf2937de64ea419666f8bf211279916
"@fontsource-variable/source-serif-4@npm:^5.1.0":
version: 5.1.0
resolution: "@fontsource-variable/source-serif-4@npm:5.1.0"
checksum: 10c0/9fddb90a7255ae6f6d7cca9c02bb6d129a03a2b6dd1180d3bd69f0be41535b9b56ff3507d2a3384bd5287ade69fe30793e877322c28653c946cceb802f7e6eba
languageName: node
linkType: hard

Expand Down Expand Up @@ -9659,9 +9652,8 @@ __metadata:
"@babel/preset-env": "npm:^7.26.0"
"@babel/preset-react": "npm:^7.25.9"
"@babel/preset-typescript": "npm:^7.26.0"
"@fontsource/source-code-pro": "npm:^4.5.9"
"@fontsource/source-sans-pro": "npm:^4.5.9"
"@fontsource/source-serif-pro": "npm:^4.5.7"
"@fontsource-variable/source-code-pro": "npm:^5.1.0"
"@fontsource-variable/source-serif-4": "npm:^5.1.0"
"@ndla/types-backend": "npm:^0.2.86"
"@pandacss/dev": "npm:^0.46.0"
"@storybook/addon-a11y": "npm:^8.4.5"
Expand Down
Loading