From 50a87f47d34a13de08da0936fbfd7cc0b0480acf Mon Sep 17 00:00:00 2001 From: Gunnar Johansson Date: Mon, 3 Aug 2026 17:55:34 +0000 Subject: [PATCH] Add services and work on styling --- frontend/.devcontainer/Dockerfile | 4 + frontend/.prettierrc | 1 + frontend/angular.json | 4 +- frontend/package-lock.json | 206 ++++++++++-- frontend/package.json | 9 + frontend/src/app/app.component.html | 318 +----------------- frontend/src/app/app.component.ts | 13 +- frontend/src/app/app.config.ts | 2 +- frontend/src/app/confetti/confetti.service.ts | 13 + frontend/src/app/shipment/shipment.service.ts | 18 + frontend/src/index.html | 2 +- frontend/src/main.ts | 4 + frontend/src/styles.css | 45 ++- 13 files changed, 300 insertions(+), 339 deletions(-) create mode 100644 frontend/src/app/confetti/confetti.service.ts create mode 100644 frontend/src/app/shipment/shipment.service.ts diff --git a/frontend/.devcontainer/Dockerfile b/frontend/.devcontainer/Dockerfile index 7bf97e8..078a359 100644 --- a/frontend/.devcontainer/Dockerfile +++ b/frontend/.devcontainer/Dockerfile @@ -1,6 +1,7 @@ ARG VARIANT=24-bookworm FROM mcr.microsoft.com/devcontainers/typescript-node:5-${VARIANT} +ARG NPM_VERSION=11.19.0 ARG ANGULAR_CLI_VERSION=21 USER root @@ -9,7 +10,10 @@ RUN npm install \ --global \ --no-audit \ --no-fund \ + "npm@${NPM_VERSION}" \ "@angular/cli@${ANGULAR_CLI_VERSION}" \ + && npm --version \ + && ng version \ && npm cache clean --force USER node \ No newline at end of file diff --git a/frontend/.prettierrc b/frontend/.prettierrc index 94f3ecd..3e97501 100644 --- a/frontend/.prettierrc +++ b/frontend/.prettierrc @@ -2,6 +2,7 @@ "printWidth": 140, "singleQuote": true, "tabWidth": 4, + "trailingComma": "none", "useTabs": true, "overrides": [ { diff --git a/frontend/angular.json b/frontend/angular.json index 9d3b49e..feea49f 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -2,8 +2,8 @@ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "cli": { - "packageManager": "npm", - "analytics": false + "packageManager": "npm", + "analytics": false }, "newProjectRoot": "projects", "projects": { diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 24b4493..0e16983 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,8 @@ "@angular/forms": "^21.2.0", "@angular/platform-browser": "^21.2.0", "@angular/router": "^21.2.0", + "@postnord/web-components": "^7.26.1", + "canvas-confetti": "^1.9.4", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, @@ -22,6 +24,7 @@ "@angular/cli": "^21.2.19", "@angular/compiler-cli": "^21.2.0", "@tailwindcss/postcss": "^4.1.12", + "@types/canvas-confetti": "^1.9.0", "postcss": "^8.5.3", "prettier": "^3.8.1", "tailwindcss": "^4.1.12", @@ -1398,9 +1401,9 @@ "optional": true }, "node_modules/@hono/node-server": { - "version": "1.19.15", - "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.15.tgz", - "integrity": "sha512-Za2ai6TLdKjUvnur+eenO6nuYYipVAEhyCAdaV8IRvmU9kK8crOZUSYvIXn72E4f8fJqyAbpcJuTsYYmZp9Deg==", + "version": "1.19.17", + "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.17.tgz", + "integrity": "sha512-dSneS5qhiauZWGDCeK4o695Xd9nUNjviSZCMQrj10eetr8Uln1ucn6bbphOM6UynAMMtNIzZNSpL9vnASJwrPQ==", "dev": true, "license": "MIT", "engines": { @@ -2968,6 +2971,15 @@ "license": "MIT", "optional": true }, + "node_modules/@postnord/web-components": { + "version": "7.26.1", + "resolved": "https://registry.npmjs.org/@postnord/web-components/-/web-components-7.26.1.tgz", + "integrity": "sha512-GAx1IJtDp6nNYIGHrZMyEmuHWu3hkG/IFSzMA7fe4XefhRVylCngdKvIFN0Hab5XaZJ/s7kUAJ7Im+iwMjMjPg==", + "license": "MIT", + "dependencies": { + "@stencil/core": "4.43.2" + } + }, "node_modules/@rolldown/binding-android-arm64": { "version": "1.0.0-rc.4", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.4.tgz", @@ -3700,6 +3712,145 @@ "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==", "license": "MIT" }, + "node_modules/@stencil/core": { + "version": "4.43.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.2.tgz", + "integrity": "sha512-hOprMw/n1fyu5OOtZG7N8sqiKxPshR1oss/y1qr6r98cVV9NcVoCMz2x2TT2enkHan6pCMpiQgUU7vmN90lIVw==", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" + } + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-x64": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@tailwindcss/node": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz", @@ -4018,6 +4169,13 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/canvas-confetti": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.9.0.tgz", + "integrity": "sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", @@ -4273,9 +4431,9 @@ "license": "ISC" }, "node_modules/brace-expansion": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.8.tgz", - "integrity": "sha512-JZyDyq3D4AUifKTPOB7DELf6XsB3WdPuNxCtob1vFXPsSXhdAiHBWJ/tJ8HAc9aH84BK+5JFZLNkJKx3G9kzQg==", + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz", + "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==", "dev": true, "license": "MIT", "dependencies": { @@ -4420,6 +4578,16 @@ ], "license": "CC-BY-4.0" }, + "node_modules/canvas-confetti": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz", + "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==", + "license": "ISC", + "funding": { + "type": "donate", + "url": "https://www.paypal.me/kirilvatev" + } + }, "node_modules/chalk": { "version": "5.6.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz", @@ -5091,9 +5259,9 @@ } }, "node_modules/express-rate-limit": { - "version": "8.6.0", - "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.6.0.tgz", - "integrity": "sha512-XKJXDsASUOo0LLtFwW5hCcQGH0N4WQc/Rn8/Pvoia+TJFOkkFPvrtW9lZOeeNcxQJspvOIERMwiRLsVFlhHEkA==", + "version": "8.6.1", + "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.6.1.tgz", + "integrity": "sha512-0D493aP61w0TJ2A0wy27riRsO7FMQ7FK+KUHOKCSfPvYo0R55aiC6emCVgFUeShH0fq0ICPVzNcgoS+BsbXQCA==", "dev": true, "license": "MIT", "dependencies": { @@ -5690,9 +5858,9 @@ } }, "node_modules/jose": { - "version": "6.2.4", - "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.4.tgz", - "integrity": "sha512-N8acGzVsQy6M/fjFcxtysNc4Q379TcM5dM/qKkNtsHFji88yANnXTr7BLeP75iPnFwBfQzM/jg2BZ9+HZrHCZA==", + "version": "6.2.5", + "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.5.tgz", + "integrity": "sha512-2E5L2yRp03FnwreJLJX8/r7mHiZICCf8kG7fAsTWkSQTDAcc46NIZoQLKy+EJ8sPoJlxyS4OQR5H70LjIZZlIQ==", "dev": true, "license": "MIT", "funding": { @@ -6341,13 +6509,13 @@ } }, "node_modules/minimatch": { - "version": "10.2.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz", - "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==", + "version": "10.2.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz", + "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==", "dev": true, "license": "BlueOak-1.0.0", "dependencies": { - "brace-expansion": "^5.0.5" + "brace-expansion": "^5.0.8" }, "engines": { "node": "18 || 20 || >=22" @@ -8351,9 +8519,9 @@ } }, "node_modules/yoctocolors": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz", - "integrity": "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.2.0.tgz", + "integrity": "sha512-xYqdZFUK/VYazNl/oCDYN+3WloWQwMfZxBoiNt6qNyk+xfOdi598muWE42rNZFp1kNOiqW936q5RhUdnpqElSg==", "dev": true, "license": "MIT", "engines": { diff --git a/frontend/package.json b/frontend/package.json index b9fb4c4..a2a55f2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,8 @@ "@angular/forms": "^21.2.0", "@angular/platform-browser": "^21.2.0", "@angular/router": "^21.2.0", + "@postnord/web-components": "^7.26.1", + "canvas-confetti": "^1.9.4", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, @@ -26,9 +28,16 @@ "@angular/cli": "^21.2.19", "@angular/compiler-cli": "^21.2.0", "@tailwindcss/postcss": "^4.1.12", + "@types/canvas-confetti": "^1.9.0", "postcss": "^8.5.3", "prettier": "^3.8.1", "tailwindcss": "^4.1.12", "typescript": "~5.9.2" + }, + "allowScripts": { + "@parcel/watcher@2.6.0": true, + "esbuild@0.28.1": true, + "lmdb@3.5.1": true, + "msgpackr-extract@3.0.4": true } } diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index e6c6139..f32dbe2 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,311 +1,9 @@ - - - - - - - - +
+
+ +
- - -
-
-
- -

Hello, {{ title() }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for ( - item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { - title: 'Prompt and best practices for AI', - link: 'https://angular.dev/ai/develop-with-ai', - }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { - title: 'Angular Language Service', - link: 'https://angular.dev/tools/language-service', - }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; - track item.title - ) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - +
+

Copyright © {{ currentYear }}

+
+
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 9f3623e..bfbccb8 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,12 +1,21 @@ -import { Component, signal } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { ConfettiService } from './confetti/confetti.service'; @Component({ selector: 'app-root', imports: [RouterOutlet], + schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './app.component.html', - styleUrl: './app.component.css', + styleUrl: './app.component.css' }) export class App { + private readonly confettiService = inject(ConfettiService); + protected readonly title = signal('PostNordLotteriet'); + protected readonly currentYear = new Date().getFullYear(); + + protected celebrate(): void { + this.confettiService.celebrate(); + } } diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts index d33b031..ab19b5c 100644 --- a/frontend/src/app/app.config.ts +++ b/frontend/src/app/app.config.ts @@ -4,5 +4,5 @@ import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)], + providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)] }; diff --git a/frontend/src/app/confetti/confetti.service.ts b/frontend/src/app/confetti/confetti.service.ts new file mode 100644 index 0000000..7b0ccc8 --- /dev/null +++ b/frontend/src/app/confetti/confetti.service.ts @@ -0,0 +1,13 @@ +import { Injectable } from '@angular/core'; +import confetti from 'canvas-confetti'; + +@Injectable({ + providedIn: 'root' +}) +export class ConfettiService { + celebrate(): void { + void confetti({ + disableForReducedMotion: true + }); + } +} diff --git a/frontend/src/app/shipment/shipment.service.ts b/frontend/src/app/shipment/shipment.service.ts new file mode 100644 index 0000000..9b38924 --- /dev/null +++ b/frontend/src/app/shipment/shipment.service.ts @@ -0,0 +1,18 @@ +import { inject, Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +export interface ShipmentResponse { + message: string; +} + +@Injectable({ + providedIn: 'root' +}) +export class ShipmentService { + private readonly http = inject(HttpClient); + + trackAndTrace(): Observable { + return this.http.get('/rest/Shipment/v1.0/trackandtrace'); + } +} diff --git a/frontend/src/index.html b/frontend/src/index.html index 6957a39..1632905 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -2,7 +2,7 @@ - Postnordlotteriet + PostNordLotteriet diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 88f4fde..2dcdba3 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,5 +1,9 @@ import { bootstrapApplication } from '@angular/platform-browser'; +import { defineCustomElements } from '@postnord/web-components/loader'; + import { appConfig } from './app/app.config'; import { App } from './app/app.component'; +defineCustomElements(); + bootstrapApplication(App, appConfig).catch((err) => console.error(err)); diff --git a/frontend/src/styles.css b/frontend/src/styles.css index a54854e..84ff96e 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -28,10 +28,47 @@ @theme { /* Colors */ - --color-pn-blue-default: #00a0d6; - --color-pn-blue-dark: #005d92; - --color-pn-blue-darkest: #0d234b; + --color-pn-blue-900: #0d234b; + --color-pn-blue-700: #005d92; + --color-pn-blue-400: #00a0d6; + --color-pn-blue-200: #8eddf9; + --color-pn-blue-50: #e0f8ff; + --color-pn-blue-25: #effbff; + --color-pn-coral-900: #500715; + --color-pn-coral-700: #9b1c2e; + --color-pn-coral-400: #f06365; + --color-pn-coral-200: #fbc2c1; + --color-pn-coral-50: #fdefee; + --color-pn-coral-25: #fef7f6; + --color-pn-gray-900: #2d2013; + --color-pn-gray-700: #5e554a; + --color-pn-gray-400: #969087; + --color-pn-gray-200: #d3cecb; + --color-pn-gray-100: #e9e6e5; + --color-pn-gray-50: #f3f2f2; + --color-pn-gray-25: #f9f8f8; + --color-pn-green-900: #002f24; + --color-pn-green-700: #005e41; + --color-pn-green-500: #0aa85c; + --color-pn-green-400: #5ec584; + --color-pn-green-200: #abe3bb; + --color-pn-green-50: #dcf6e7; + --color-pn-green-25: #edfbf3; + --color-pn-orange-900: #4f1600; + --color-pn-orange-700: #99290a; + --color-pn-orange-500: #ed7123; + --color-pn-orange-400: #f89142; + --color-pn-orange-200: #ffc8a3; + --color-pn-orange-50: #fff1e3; + --color-pn-orange-25: #fff8f1; + --color-pn-warning: #a70707; /* Fonts */ - --font-pn: 'PN Sans', ui-sans-serif, system-ui, sans-serif; + --font-sans: 'PN Sans', ui-sans-serif, system-ui, sans-serif; +} + +@layer base { + html { + font-family: var(--font-sans); + } }