Merge branch 'main' into 4469-remove-deprecated-scss-variables-around…

…-font-weight
swisspost · Jan 31, 2025 · 787683f · 787683f
2 parents e0334d2 + 006e7c0
commit 787683f
Show file tree

Hide file tree

Showing 21 changed files with 154 additions and 73 deletions.
diff --git a/.changeset/grumpy-fishes-fail.md b/.changeset/grumpy-fishes-fail.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-tokens': patch
+---
+
+Added a transform function to avoid unitless zero values for specific token types (like `dimension`, etc.), which allows us to use these tokens also in css `calc()` functions.
+Because `<number-token>`s are always interpreted as `<number>`s or `<integer>`s, "unitless 0" `<length>`s aren’t supported in calc().
+Source: https://drafts.csswg.org/css-values-3/#calc-type-checking
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
@@ -27,4 +27,4 @@ jobs:
       # Test all changed packages and their dependents
       # https://pnpm.io/filtering#--filter-since
       - name: Lint packages
-        run: pnpm -r lint
+        run: pnpm lint
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -11,6 +11,8 @@ jobs:
   changeset-magic:
     name: Set up Changeset PR or Release Packages
     runs-on: ubuntu-latest
+    permissions:
+      id-token: write
     steps:
       # Checkout the Branch which was pushed ('main' or 'release/v*')
       - name: Checkout

diff --git a/.npmrc b/.npmrc
@@ -3,3 +3,5 @@ registry=https://registry.npmjs.org/
 strict-peer-dependencies=false
 # Install new dependencies with exact version to let renovate handle the update
 save-exact=true
+# Publish packages with provenance
+provenance=true
diff --git a/package.json b/package.json
@@ -15,77 +15,98 @@
     "bootstrap": "pnpm install && pnpm -r --filter \"!*-integration\" build",
     "start": "pnpm docs:start",
     "start:clean": "pnpm bootstrap && pnpm start",
-    "test": "pnpm -r test",
-    "unit": "pnpm -r unit",
     "e2e": "start-server-and-test docs:headless 9001 'pnpm -r --stream e2e'",
     "e2e:ci": "start-server-and-test docs:headless 9001 'pnpm --filter \"...[origin/main]\" --stream e2e:ci'",
+    "unit": "pnpm -r unit",
+    "lint": "pnpm -r lint",
+    "lint:fix": "pnpm -r lint:fix",
     "snapshots": "start-server-and-test 'pnpm docs:headless' 9001 'pnpm --filter design-system-documentation snapshots'",
-    "docs": "pnpm docs:start",
-    "docs:only": "pnpm --filter design-system-documentation start",
+    "help": "pnpm run",
     "docs:start": "pnpm --filter design-system-tokens build && pnpm --filter design-system-documentation... --parallel --stream start",
-    "docs:build": "pnpm --filter design-system-documentation build",
     "docs:headless": "pnpm --filter design-system-documentation start:headless",
-    "docs:test": "pnpm --filter design-system-documentation test",
+    "docs:build": "pnpm --filter design-system-documentation build",
+    "docs:only": "pnpm --filter design-system-documentation start",
     "docs:e2e": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-documentation e2e'",
     "docs:e2e:watch": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-documentation e2e:watch'",
+    "docs:lint": "pnpm --filter design-system-documentation lint",
+    "docs:lint:fix": "pnpm --filter design-system-documentation lint:fix",
     "styles": "pnpm styles:start",
-    "styles:start": "pnpm --filter design-system-styles start",
     "styles:play": "pnpm --filter design-system-styles play",
+    "styles:start": "pnpm --filter design-system-styles start",
     "styles:build": "pnpm --filter design-system-styles build",
+    "styles:unit": "pnpm --filter design-system-styles unit",
     "styles:lint": "pnpm --filter design-system-styles lint",
     "styles:lint:fix": "pnpm --filter design-system-styles lint:fix",
-    "styles:test": "pnpm --filter design-system-styles unit",
     "components": "pnpm components:start",
-    "components:start": "pnpm --filter design-system-components dev",
+    "components:play": "pnpm --filter design-system-components play",
+    "components:start": "pnpm --filter design-system-components start",
     "components:build": "pnpm --filter design-system-components build",
-    "components:generate": "pnpm --filter design-system-components generate",
-    "components:lint": "pnpm --filter design-system-components lint",
-    "components:test": "pnpm --filter design-system-components test",
     "components:unit": "pnpm --filter design-system-components unit",
     "components:unit:watch": "pnpm --filter design-system-components unit:watch",
     "components:e2e": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-components e2e'",
     "components:e2e:watch": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-components e2e:watch'",
-    "components:snapshots": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-components snapshots'",
+    "components:lint": "pnpm --filter design-system-components lint",
+    "components:lint:fix": "pnpm --filter design-system-components lint:fix",
+    "components:generate": "pnpm --filter design-system-components generate",
+    "components-angular": "pnpm components-angular:start",
     "components-angular:start": "pnpm --filter design-system-components-angular-workspace start",
     "components-angular:build": "pnpm --filter design-system-components-angular-workspace build",
     "components-angular:e2e": "pnpm --filter design-system-components-angular-workspace e2e",
     "components-angular:e2e:watch": "pnpm --filter design-system-components-angular-workspace e2e:watch",
+    "components-angular:lint": "pnpm --filter design-system-components-angular-workspace lint",
+    "components-angular:lint:fix": "pnpm --filter design-system-components-angular-workspace lint:fix",
+    "components-react:build": "pnpm --filter design-system-components-react build",
+    "components-react:lint": "pnpm --filter design-system-components-react lint",
+    "components-react:lint:fix": "pnpm --filter design-system-components-react lint:fix",
     "header": "pnpm header:start",
-    "header:start": "pnpm --filter internet-header dev",
+    "header:play": "pnpm --filter internet-header play",
+    "header:start": "pnpm --filter internet-header start",
     "header:build": "pnpm --filter internet-header build",
-    "header:test": "pnpm --filter internet-header test",
     "header:unit": "pnpm --filter internet-header unit",
     "header:unit:watch": "pnpm --filter internet-header unit:watch",
     "header:e2e": "start-server-and-test docs:headless 9001 'pnpm --filter internet-header e2e'",
     "header:e2e:watch": "start-server-and-test docs:headless 9001 'pnpm --filter internet-header e2e:watch'",
-    "header:snapshots": "start-server-and-test docs:headless 9001 'pnpm --filter internet-header snapshots'",
+    "header:lint": "pnpm --filter internet-header lint",
+    "header:lint:fix": "pnpm --filter internet-header lint:fix",
+    "header:generate": "pnpm --filter internet-header generate",
     "intranet-header": "pnpm intranet-header:start",
     "intranet-header:start": "pnpm --filter design-system-intranet-header-workspace start",
-    "icons": "pnpm icons:dev",
-    "icons:dev": "pnpm --filter design-system-icons dev",
+    "intranet-header:start:lib": "pnpm --filter design-system-intranet-header-workspace start:lib",
+    "intranet-header:start:app": "pnpm --filter design-system-intranet-header-workspace start:app",
+    "intranet-header:build": "pnpm --filter design-system-intranet-header-workspace build",
+    "intranet-header:lint": "pnpm --filter design-system-intranet-header-workspace lint",
+    "intranet-header:lint:fix": "pnpm --filter design-system-intranet-header-workspace lint:fix",
+    "icons": "pnpm icons:start",
+    "icons:play": "pnpm --filter design-system-icons play",
     "icons:start": "pnpm --filter design-system-icons start",
     "icons:build": "pnpm --filter design-system-icons build",
-    "icons:test": "pnpm --filter design-system-icons test",
-    "icons:unit": "pnpm --filter design-system-icons test",
-    "icons:unit:watch": "pnpm --filter design-system-icons test:watch",
+    "icons:unit": "pnpm --filter design-system-icons unit",
+    "icons:unit:watch": "pnpm --filter design-system-icons unit:watch",
     "icons:lint": "pnpm --filter design-system-icons lint",
+    "icons:lint:fix": "pnpm --filter design-system-icons lint:fix",
     "migrations:build": "pnpm --filter design-system-migrations build",
     "migrations:lint": "pnpm --filter design-system-migrations lint",
+    "migrations:lint:fix": "pnpm --filter design-system-migrations lint:fix",
     "nextjs": "pnpm nextjs:start",
-    "nextjs:start": "pnpm --filter design-system-nextjs-integration dev",
+    "nextjs:start": "pnpm --filter design-system-nextjs-integration start",
     "nextjs:build": "pnpm --filter design-system-nextjs-integration build",
+    "nextjs:build:serve": "pnpm --filter design-system-nextjs-integration build:serve",
     "nextjs:lint": "pnpm --filter design-system-nextjs-integration lint",
-    "changeset:publish": "pnpm changeset publish",
-    "changeset:version": "pnpm changeset version && pnpm install --lockfile-only",
-    "tokens:build": "pnpm --filter design-system-tokens build",
-    "tokens:build:verbose": "pnpm --filter design-system-tokens build:verbose",
-    "tokens:lint": "pnpm --filter design-system-tokens lint",
+    "nextjs:lint:fix": "pnpm --filter design-system-nextjs-integration lint:fix",
     "primeng": "pnpm primeng:start",
     "primeng:start": "pnpm --filter design-system-styles-primeng-workspace start",
+    "primeng:start:lib": "pnpm --filter design-system-styles-primeng-workspace start:lib",
+    "primeng:start:app": "pnpm --filter design-system-styles-primeng-workspace start:app",
     "primeng:build": "pnpm --filter design-system-styles-primeng-workspace build",
     "primeng:lint": "pnpm --filter design-system-styles-primeng-workspace lint",
     "primeng:lint:fix": "pnpm --filter design-system-styles-primeng-workspace lint:fix",
-    "tokens:usage": "node ./utilities/token-checker.cjs"
+    "tokens:build": "pnpm --filter design-system-tokens build",
+    "tokens:build:verbose": "pnpm --filter design-system-tokens build:verbose",
+    "tokens:lint": "pnpm --filter design-system-tokens lint",
+    "tokens:lint:fix": "pnpm --filter design-system-tokens lint:fix",
+    "tokens:usage": "node ./utilities/token-checker.cjs",
+    "changeset:publish": "pnpm changeset publish",
+    "changeset:version": "pnpm changeset version && pnpm install --lockfile-only"
   },
   "devDependencies": {
     "@changesets/cli": "2.27.11",

diff --git a/packages/changelog-github/package.json b/packages/changelog-github/package.json
@@ -18,7 +18,8 @@
   "main": "./dist/index.js",
   "scripts": {
     "build": "tsc",
-    "lint": "eslint"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   },
   "dependencies": {
     "@changesets/get-github-info": "0.6.0",

diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -4,10 +4,11 @@
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "pnpm clean && ng build components",
-    "lint": "ng lint",
+    "clean": "rimraf dist",
     "e2e": "ng e2e --watch=false",
     "e2e:watch": "ng e2e",
-    "clean": "rimraf dist"
+    "lint": "ng lint",
+    "lint:fix": "ng lint --fix"
   },
   "private": true,
   "dependencies": {

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -22,11 +22,10 @@
     "linkDirectory": true
   },
   "scripts": {
-    "build": "pnpm run clean && pnpm run compile",
+    "build": "pnpm run clean && tsc -p .",
     "clean": "rimraf dist",
-    "compile": "pnpm run tsc",
-    "tsc": "tsc -p .",
-    "lint": "eslint src/**/*.ts"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   },
   "dependencies": {
     "@swisspost/design-system-components": "workspace:9.0.0-next.13"

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -24,19 +24,18 @@
     "linkDirectory": true
   },
   "scripts": {
-    "dev": "stencil build --dev --port 9200 --serve --watch --docs --docs-readme",
+    "play": "stencil build --dev --port 9200 --serve --watch --docs --docs-readme",
     "start": "stencil build --dev --watch --docs --docs-readme",
     "build": "pnpm clean && stencil build --docs-readme",
     "clean": "rimraf www dist loader loaders",
-    "test": "pnpm run unit",
     "unit": "stencil test --spec",
     "unit:watch": "stencil test --spec --watchAll --silent",
     "e2e": "cypress run --browser chrome",
-    "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "e2e:watch": "cypress open",
-    "generate": "stencil generate",
+    "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "lint": "eslint",
-    "lint:fix": "eslint --fix"
+    "lint:fix": "eslint --fix",
+    "generate": "stencil generate"
   },
   "dependencies": {
     "@floating-ui/dom": "1.6.13",

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -21,12 +21,12 @@
     "build": "pnpm clean && pnpm prebuild:managerui --style=compressed --no-source-map & storybook build --quiet --docs",
     "clean": "rimraf storybook-static public/manager",
     "e2e": "cypress run --browser chrome",
-    "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "e2e:watch": "cypress open",
-    "doctor": "storybook doctor",
-    "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9",
+    "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "lint": "eslint",
-    "lint:fix": "eslint --fix"
+    "lint:fix": "eslint --fix",
+    "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9",
+    "doctor": "storybook doctor"
   },
   "dependencies": {
     "@swisspost/design-system-components": "workspace:9.0.0-next.13",

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -21,16 +21,17 @@
   ],
   "private": false,
   "scripts": {
-    "dev": "pnpm build && http-server ./public -o -a localhost -p 9330",
+    "play": "pnpm build && http-server ./public -o -a localhost -p 9330",
     "start": "nodemon",
     "build": "pnpm clean && ts-node src/build.ts",
-    "fetchSVGs": "ts-node src/index.ts",
-    "createUIReport": "ts-node src/build.ts createUIReport",
+    "clean": "rimraf public/post-icons public/report.json",
     "unit": "jest",
     "unit:watch": "jest --watch",
     "unit:updatesnapshots": "jest -u",
     "lint": "eslint",
-    "clean": "rimraf public/post-icons public/report.json"
+    "lint:fix": "eslint --fix",
+    "fetchSVGs": "ts-node src/index.ts",
+    "createUIReport": "ts-node src/build.ts createUIReport"
   },
   "devDependencies": {
     "@eslint/js": "9.18.0",

diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
@@ -28,16 +28,15 @@
     "loader/"
   ],
   "scripts": {
-    "dev": "stencil build --serve --port 9310 --watch --docs-readme --dev --config stencil.config.dev.ts",
+    "play": "stencil build --serve --port 9310 --watch --docs-readme --dev --config stencil.config.dev.ts",
     "start": "stencil build --watch --docs-readme",
     "build": "pnpm clean && stencil build --docs-readme",
     "clean": "rimraf www dist loader",
-    "test": "pnpm run unit",
     "unit": "jest",
     "unit:watch": "jest --watch",
     "e2e": "cypress run --browser chrome",
-    "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "e2e:watch": "cypress open",
+    "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "generate": "stencil generate"

diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
@@ -4,12 +4,13 @@
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
-    "clean": "rimraf dist",
     "start": "npm-run-all --parallel --print-label start:**",
     "start:lib": "rimraf dist/intranet-header && ng build intranet-header --watch",
     "start:app": "wait-on dist/intranet-header && ng serve --port 9320",
     "build": "pnpm clean && ng build intranet-header",
-    "lint": "ng lint"
+    "clean": "rimraf dist",
+    "lint": "ng lint",
+    "lint:fix": "ng lint --fix"
   },
   "dependencies": {
     "@angular/animations": "18.2.13",

diff --git a/packages/migrations/package.json b/packages/migrations/package.json
@@ -15,10 +15,11 @@
     "access": "public"
   },
   "scripts": {
-    "copy-files": "copyfiles -f LICENSE README.md package.json CONTRIBUTING.md CHANGELOG.md src/migrations.json dist",
     "build": "pnpm clean && tsc -p tsconfig.json && pnpm copy-files",
     "clean": "rimraf dist",
-    "lint": "eslint"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "copy-files": "copyfiles -f LICENSE README.md package.json CONTRIBUTING.md CHANGELOG.md src/migrations.json dist"
   },
   "dependencies": {
     "@angular-devkit/core": "=15.0.4",

diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json
@@ -3,11 +3,12 @@
   "version": "0.1.14-next.13",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "start": "next dev",
     "build": "pnpm clean && next build",
-    "start": "next start",
+    "build:serve": "pnpm build && next start",
+    "clean": "rimraf .next",
     "lint": "next lint",
-    "clean": "rimraf .next"
+    "lint:fix": "next lint --fix"
   },
   "dependencies": {
     "@swisspost/design-system-components-react": "workspace:9.0.0-next.13",

diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json
@@ -5,11 +5,11 @@
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
-    "clean": "rimraf dist",
-    "start": "npm-run-all --parallel watch:lib serve:app",
+    "start": "npm-run-all --parallel start:lib start:app",
+    "start:lib": "ng build --watch --configuration development styles-primeng",
+    "start:app": "ng serve --port 9325",
     "build": "pnpm clean && ng build styles-primeng",
-    "watch:lib": "ng build --watch --configuration development styles-primeng",
-    "serve:app": "ng serve --port 9325",
+    "clean": "rimraf dist",
     "lint": "stylelint projects/styles-primeng/src/**/*.scss",
     "lint:fix": "stylelint projects/styles-primeng/src/**/*.scss --fix"
   },
@@ -53,4 +53,4 @@
     "typescript": "5.5.4",
     "typescript-eslint": "8.16.0"
   }
-}
+}
diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -18,14 +18,14 @@
     "linkDirectory": true
   },
   "scripts": {
-    "start": "gulp watch",
     "play": "vite --open",
+    "start": "gulp watch",
     "build": "pnpm clean && gulp build",
-    "unit": "gulp sass:tests",
     "clean": "rimraf out-tsc dist src/tokens/temp",
-    "format": "prettier src/**/*.scss --write",
+    "unit": "gulp sass:tests",
     "lint": "stylelint src/**/*.scss !src/tokens/temp/**",
-    "lint:fix": "stylelint src/**/*.scss !src/tokens/temp/** --fix"
+    "lint:fix": "stylelint src/**/*.scss !src/tokens/temp/** --fix",
+    "format": "prettier src/**/*.scss --write"
   },
   "peerDependencies": {
     "@angular/core": "^18.0.0",

diff --git a/packages/tokens/_build/configs/all.js b/packages/tokens/_build/configs/all.js
@@ -19,7 +19,7 @@ registerConfigMethod((tokenSets, { sourcePath, buildPath }) => {
       include: [`${sourcePath}_temp/source/**/*.json`],
       platforms: {
         scss: {
-          transforms: ['name/kebab'],
+          transforms: ['name/kebab', 'swisspost/scss-no-unitless-zero-values'],
           buildPath,
           expand: {
             include: ['typography'],

diff --git a/packages/tokens/_build/constants.js b/packages/tokens/_build/constants.js
@@ -24,3 +24,16 @@ export const TOKENSET_LAYERS = {
 };
 export const TOKENSET_PREFIX = 'post';
 export const CUSTOM_FORMAT_INDENT = '  ';
+
+// https://docs.tokens.studio/token-types/token-type-overview#available-token-types
+export const NO_UNITLESS_ZERO_VALUE_TOKEN_TYPES = [
+  'fontSize',
+  'lineHeight',
+  'letterSpacing',
+  'paragraphSpacing',
+  'dimension',
+  'borderRadius',
+  'borderWidth',
+  'spacing',
+  'sizing',
+];