@oslokommune/punkt-css 0.18.2 → 0.18.4

package/CONTRIBUTING.md

@@ -19,11 +19,33 @@ Happy coding!
 
 ## Bli kjent med koden
 
+
 ```sh
-src           # oslologo og diverse favicons
-└── scss/             # css-rammeverket med dets moduler
+@oslokommune/punkt-css
+├── dist/                          # Distribusjonsversjonen av pakken (lagt til i 0.10.0)
+|   ├── css/                       # generert css
+|   |   ├── components/            # hver komponent separat
+|   |   |   ├── alert.css          # komponent alert
+|   |   |   └── ...
+|   |   ├── pkt.css                # alle moduler
+|   |   ├── pkt.min.css            # alle moduler minimert
+|   |   ├── pkt-base.css           # base modul
+|   |   ├── pkt-base.min.css       # base modul minimert
+|   |   ├── pkt-components.css     # komponent modul med alle komponenpkt
+|   |   ├── pkt-components.min.css # komponent modul minimert
+|   |   ├── pkt-elements.css       # element modul
+|   |   ├── pkt-elements.min.css   # element modul minimert
+|   |   ├── pkt-normalise.css      # normalisering modul
+|   |   └── pkt-normalise.min.css  # normalisering modul minimert
+|   └── scss/                      # css-rammeverket med dets moduler
+├── CHANGELOG.md                   # alle nevneverdige endringer
+├── index.js                       # peker på komplett rammeverk
+├── LICENSE                        # MIT lisens
+├── package.json                   # all info om prosjektet
+└── README.md                      # kom i gang-informasjon
 ```
 
+
 ### Litt mer detaljer om SCSS-folderen
 
 Skal du jobbe med CSS-rammeverket er dette stedet å starte.

package/README.md

@@ -1,6 +1,6 @@
-## Bruk av @oslokommune/oslo-designsystem
+## Bruk av @oslokommune/punkt-css
 
-<a href="https://www.npmjs.com/package/@oslokommune/oslo-designsystem" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/oslo-designsystem?logo=sass&label=ressurser&style=for-the-badge&color=bf4080" alt="Ressurs versjon" /></a>
+<a href="https://www.npmjs.com/package/@oslokommune/punkt-css" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-css?logo=sass&label=ressurser&style=for-the-badge&color=bf4080" alt="Ressurs versjon" /></a>
 
 
 Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma. Det er ikke automatikk mellom Figma og denne koden, så kode vil som regel henge litt etter hva som oppdateres i Figma.
@@ -8,7 +8,7 @@ Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma. Det er
 ## Innhold
 
 ```sh
-@oslokommune/oslo-designsystem
+@oslokommune/punkt-css
 ├── dist/                          # Distribusjonsversjonen av pakken (lagt til i 0.10.0)
 |   ├── css/                       # generert css
 |   |   ├── components/            # hver komponent separat
@@ -40,7 +40,7 @@ Eksempelet under viser installasjon i en applikasjon med `Vue 3` + `Vite`.
 
 ```sh
 npm add -D sass                # Viktig å bruke denne og ikke node-sass
-npm add @oslokommune/oslo-designsystem
+npm add @oslokommune/punkt-css
 ```
 
 ### 2. Opprett en scss-fil
@@ -62,12 +62,12 @@ import "./main.scss";
 /* src/main.scss
 
 Overstyr stien til fontene (rammeverkspesifikt) */
-@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/variables" with (
-  $font-path: "@oslokommune/oslo-designsystem/dist"
+@use "@oslokommune/punkt-css/dist/scss/abstracts/variables" with (
+  $font-path: "@oslokommune/punkt-assets/dist"
 );
 
 /* Bruk designsystemet */
-@use "@oslokommune/oslo-designsystem/dist/scss/ods";
+@use "@oslokommune/punkt-css/dist/scss/pkt";
 ```
 
 ### 5. Fjern lokal css
@@ -86,10 +86,10 @@ font-family: Avenir, Helvetica, Arial, sans-serif;
 
 Legg til responsiv header */
 @use "sass:map";
-@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/variables";
+@use "@oslokommune/punkt-css/dist/scss/abstracts/variables";
 /* Legg merke til at breakpoints hentes inn uten namespace: */
-@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/mixins/breakpoints" as *;
-@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/mixins/typography";
+@use "@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints" as *;
+@use "@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography";
 
 .h1 {
   @include typography.get-text("pkt-txt-28");
@@ -117,13 +117,13 @@ Legg til logo -->
 <img
   class="oslologo"
   alt="Oslo kommune logo"
-  src="@oslokommune/oslo-designsystem/dist/logos/oslo-kommune.svg"
+  src="@oslokommune/punkt-assets/dist/logos/oslo-kommune.svg"
 />
 
 <style lang="scss">
 /* Legg til moduler */
 @use "sass:map";
-@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/variables";
+@use "@oslokommune/punkt-css/dist/scss/abstracts/variables";
 
 /* Legg til klassen for logoen */
 .oslologo {
@@ -216,6 +216,6 @@ med seg.
 
 ## 👮 Lisens
 
-`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/oslo-designsystem/blob/main/packages/ods-design/LICENSE) for åpen kildekode.
+`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/oslo-designsystem/blob/main/packages/css/LICENSE) for åpen kildekode.
 
-![NPM License](https://img.shields.io/npm/l/@oslokommune/oslo-designsystem?style=for-the-badge)
+![NPM License](https://img.shields.io/npm/l/@oslokommune/punkt-css?style=for-the-badge)

package/dist/css/pkt-base.css

@@ -7,42 +7,42 @@
   font-family: Oslo Sans;
   font-style: normal;
   font-weight: 400;
-  src: url("../fonts/OsloSans-Regular.woff2") format("woff2"), url("../fonts/OsloSans-Regular.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/fonts/OsloSans-Regular.woff2") format("woff2"), url("@oslokommune/punkt-assets/fonts/OsloSans-Regular.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Sans;
   font-style: italic;
   font-weight: 400;
-  src: url("../fonts/OsloSans-RegularItalic.woff2") format("woff2"), url("../fonts/OsloSans-RegularItalic.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/fonts/OsloSans-RegularItalic.woff2") format("woff2"), url("@oslokommune/punkt-assets/fonts/OsloSans-RegularItalic.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Sans;
   font-style: normal;
   font-weight: 300;
-  src: url("../fonts/OsloSans-Light.woff2") format("woff2"), url("../fonts/OsloSans-Light.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/fonts/OsloSans-Light.woff2") format("woff2"), url("@oslokommune/punkt-assets/fonts/OsloSans-Light.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Sans;
   font-style: normal;
   font-weight: 500;
-  src: url("../fonts/OsloSans-Medium.woff2") format("woff2"), url("../fonts/OsloSans-Medium.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/fonts/OsloSans-Medium.woff2") format("woff2"), url("@oslokommune/punkt-assets/fonts/OsloSans-Medium.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Sans;
   font-style: normal;
   font-weight: 700;
-  src: url("../fonts/OsloSans-Bold.woff2") format("woff2"), url("../fonts/OsloSans-Bold.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/fonts/OsloSans-Bold.woff2") format("woff2"), url("@oslokommune/punkt-assets/fonts/OsloSans-Bold.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Icons;
   font-style: normal;
   font-weight: 400;
-  src: url("../fonts/OsloIcons.woff2") format("woff2"), url("../fonts/OsloIcons.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/fonts/OsloIcons.woff2") format("woff2"), url("@oslokommune/punkt-assets/fonts/OsloIcons.woff") format("woff");
 }
 /* 
  * Colors