diff --git a/.storybook/designmanual.scss b/.storybook/designmanual.scss index f4911299f5..8e05718d4d 100644 --- a/.storybook/designmanual.scss +++ b/.storybook/designmanual.scss @@ -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 { diff --git a/.storybook/styles.css b/.storybook/styles.css index de18ee101d..be2c43bbf0 100644 --- a/.storybook/styles.css +++ b/.storybook/styles.css @@ -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; diff --git a/package.json b/package.json index 27667092f7..2077b677f2 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/preset-panda/src/typography.ts b/packages/preset-panda/src/typography.ts index 8391dceaf1..af98b944f5 100644 --- a/packages/preset-panda/src/typography.ts +++ b/packages/preset-panda/src/typography.ts @@ -37,7 +37,7 @@ export const fonts = defineTokens.fonts({ }, serif: { value: [ - "'Source Serif Pro'", + "'Source Serif 4 Variable'", "Times", "STKaiti", "'华文楷体'", @@ -53,7 +53,7 @@ export const fonts = defineTokens.fonts({ ], }, code: { - value: ["'Source Code ProVariable'", "Monaco"], + value: ["'Source Code Pro Variable'", "Monaco"], }, }); diff --git a/packages/styled-system/src/tokens/index.js b/packages/styled-system/src/tokens/index.js index 7feed78c51..dffba94277 100644 --- a/packages/styled-system/src/tokens/index.js +++ b/packages/styled-system/src/tokens/index.js @@ -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": { diff --git a/stories/welcome.stories.tsx b/stories/welcome.stories.tsx index b958df7b51..9a44a9a759 100644 --- a/stories/welcome.stories.tsx +++ b/stories/welcome.stories.tsx @@ -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"; @@ -47,7 +47,7 @@ export const Welcome: StoryFn = () => ( derfor ikke se helt korrekte ut her.

-

Hva designmanualen er, og hva den ikke er

+

Hva designmanualen er, og hva den ikke er

Designmanualen inneholder retningslinjer for formatering, visuelt uttrykk, interaksjon og innholdselementer.

@@ -63,55 +63,68 @@ export const Welcome: StoryFn = () => (

Hvordan bruke designmanualen?

+

Designmanual er for produksjon av teknisk innhold. Den består av hovedsakelig tre deler:

+ +
  • + preset-panda: En Panda-css-preset som genererer CSS som alle + NDLA-applikasjoner bruker. +
    • +
  • + primitives: Et komponentbibliotek bestående av grunnkomponenter, bygget på toppen av Panda-CSS og{" "} + ark-ui. +
    • +
  • + ui: NDLA-spesifikke komponenter som bygger på toppen av våre eksisterende primitives. +
    • +

    - 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{" "} - React. Den er også publisert på{" "} - npm. + Hovedapplikasjonene til NDLA er skrevet i React, og publiseres på{" "} + npm.

    Hente inn prosjekt direkte via npm

    - npm install @ndla/ui --save + npm install @ndla/ui
    - yarn add @ndla/ui -S + yarn add @ndla/ui

    Fonter

    +

    NDLA bruker tre forskjellige fonter:

    + +
  • + Satoshi: Hovedfonten til NDLA. Hentes fra{" "} + Fontshare. +
    • +
  • + Source Serif 4: Serif-fonten til NDLA. Hentes fra Fontsource. +
    • +
  • + Source Code Pro Variable: Brukes til fremvisning av kodesnutter. Hentes fra{" "} + Fontsource. +
    • +

    - Vi henter fonter ved hjelp av Fontsource. 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{" "} + @fontsource-variable/source-serif-4 og @fontsource-variable/source-code-pro. + Satoshi må hentes fra Fontshare sin CDN. +

    +

    + 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.

    Følgende fonter tas i bruk:

    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/index.css'; -
    - import '@fontsource/source-code-pro/400-italic.css'; -
    - import '@fontsource/source-code-pro/700.css'; -
    - import '@fontsource/source-serif-pro/index.css'; -
    - import '@fontsource/source-serif-pro/400-italic.css'; -
    - import '@fontsource/source-serif-pro/700.css';

    Hente inn stilark

    - @import '^@ndla/ui/lib/all.css'; -
    - Eller -
    - @import '~@ndla/core/scss/core'; -
    - @import '~@ndla/ui/src/main'; -
    - Osv. +

    + Dersom du bruker Panda-CSS kan du ta inspirasjon fra oppsett i{" "} + ndla-frontend +

    +

    + 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 @ndla/preset-panda: +

    + @import '@ndla/preset-panda/dist/styles.css'; +

    Du vil deretter være nødt til å importere css for hver pakke du tar i bruk.

    + @import '@ndla/primitives/dist/styles.css'; diff --git a/yarn.lock b/yarn.lock index 19245beb95..1975ab61be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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 @@ -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"