Introduce first minimal part of a design system

angular.json

@@ -33,7 +33,10 @@
                           "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
                           "src/styles.scss"
                         ],
-                        "scripts": []
+                        "scripts": [],
+                        "stylePreprocessorOptions": {
+                            "includePaths": ["projects/ppwcode/ng-ppw-ds"]
+                        }
                     },
                     "configurations": {
                         "production": {
@@ -521,6 +524,32 @@
               }
             }
           }
+        },
+        "@ppwcode/ng-ppw-ds": {
+            "projectType": "library",
+            "root": "projects/ppwcode/ng-ppw-ds",
+            "sourceRoot": "projects/ppwcode/ng-ppw-ds/src",
+            "prefix": "lib",
+            "architect": {
+                "build": {
+                    "builder": "@angular/build:ng-packagr",
+                    "configurations": {
+                        "production": {
+                            "tsConfig": "projects/ppwcode/ng-ppw-ds/tsconfig.lib.prod.json"
+                        },
+                        "development": {
+                            "tsConfig": "projects/ppwcode/ng-ppw-ds/tsconfig.lib.json"
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "test": {
+                    "builder": "@angular/build:unit-test",
+                    "options": {
+                        "tsConfig": "projects/ppwcode/ng-ppw-ds/tsconfig.spec.json"
+                    }
+                }
+            }
         }
     },
     "cli": {

projects/ppwcode/ng-ppw-ds/README.md

@@ -0,0 +1,3 @@
+# PeopleWare Design System
+
+This library holds the official PeopleWare Design System implementation for Angular.

projects/ppwcode/ng-ppw-ds/ng-package.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../../dist/ppwcode/ng-ppw-ds",
+    "lib": {
+        "entryFile": "src/public-api.ts"
+    },
+    "assets": [
+        "ppw-ds.scss"
+    ]
+}

projects/ppwcode/ng-ppw-ds/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@ppwcode/ng-ppw-ds",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

projects/ppwcode/ng-ppw-ds/ppw-ds.scss

@@ -0,0 +1,2 @@
+@use 'src/lib/scss/shapes';
+@use 'src/lib/scss/spacings';

projects/ppwcode/ng-ppw-ds/src/lib/docs/Shapes.mdx

@@ -0,0 +1,18 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as ShapesStories from '../stories/shapes.stories'
+
+<Meta of={ShapesStories} />
+
+# Shapes
+
+Shape defines the geometry of components throughout the design system, primarily through corner radius and outline style. Consistent shape tokens create a cohesive visual language, reinforce brand identity, and ensure components such as buttons, cards, inputs, and dialogs share a unified appearance. By using shape tokens instead of hardcoded values, the overall look and feel can be updated consistently across the entire application.
+
+## Usage
+
+The ppwcode design system provides CSS tokens that can be used for consistent shapes in your application.
+
+The CSS tokens follow the syntax `--ppw-ds-radius-[level]`, where `[level]` indicates a shaping level.
+
+A shaping level is one of the following demonstrated levels, where each greater level means a more rounded shape.
+
+<Canvas of={ShapesStories.AllLevels} />

projects/ppwcode/ng-ppw-ds/src/lib/docs/Spacings.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as SpacingsStories from '../stories/spacings.stories'
+
+<Meta of={SpacingsStories} />
+
+# Spacing
+
+Spacing defines the consistent use of whitespace throughout the design system. Spacing tokens provide a standardized scale for margins, padding, gaps, and layout dimensions, creating balanced, readable, and predictable interfaces. By using spacing tokens instead of hardcoded values, layouts remain consistent, responsive, and easy to maintain across all components and applications.
+
+## Usage
+
+The ppwcode design system provides linear and explicit CSS tokens that can be used for consistent spacing in your application.
+
+The CSS tokens follow the syntax `--ppw-ds-spacing-[level]`, where `[level]` indicates a spacing level.
+
+A linear spacing level is the multiplication of 4. Level 0 thus means 0px, where level 5 means 20px.
+
+<Canvas of={SpacingsStories.AllLevels} />
+
+The tokens `--ppw-ds-spacing-1px` and `--ppw-ds-spacing-2px` are explicit and intended for usage where space is limited and decreasing density would otherwise bring visual items far too close to each other.

projects/ppwcode/ng-ppw-ds/src/lib/scss/_shapes.scss

@@ -0,0 +1,13 @@
+$_radii: (
+    'none': 0,
+    'small': 4px,
+    'medium': 8px,
+    'large': 20px,
+    'full': 1000px
+);
+
+:root {
+    @each $radius, $value in $_radii {
+        --ppw-ds-radius-#{$radius}: #{$value};
+    }
+}

projects/ppwcode/ng-ppw-ds/src/lib/scss/_spacings.scss

@@ -0,0 +1,14 @@
+$_base-spacing: 4px;
+
+:root {
+    // The following CSS tokens are explicit spacing tokens that don't take part in the base-spacing linearity.
+    // They are a specifically targeted at situations where space is limited and decreasing density would otherwise
+    // bring visual items far too close to each other.
+    --ppw-ds-spacing-1px: 1px;
+    --ppw-ds-spacing-2px: 2px;
+
+    // Generate CSS tokens for a linear scale from 0 to 20 for increased spacing.
+    @for $i from 0 through 20 {
+        --ppw-ds-spacing-#{$i}: #{$i * $_base-spacing};
+    }
+}

projects/ppwcode/ng-ppw-ds/src/lib/stories/shapes.stories.ts

@@ -0,0 +1,48 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { Component } from '@angular/core'
+
+const shapes = ['none', 'small', 'medium', 'large', 'full']
+
+@Component({
+    selector: 'ppw-shapes-example',
+    template: `
+        @for (shape of shapes; track shape) {
+            <div class="box" [style.border-radius]="'var(--ppw-ds-radius-' + shape + ')'">{{ shape }}</div>
+        }
+    `,
+    styles: `
+        :host {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 16px;
+        }
+
+        .box {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            background: var(--ppw-primary-color);
+            color: var(--ppw-primary-contrast-color);
+            padding: 16px;
+            width: 250px;
+        }
+    `
+})
+export class ShapesExampleComponent {
+    public readonly shapes = shapes
+}
+
+const meta: Meta<ShapesExampleComponent> = {
+    title: 'ng-ppw-ds/Shapes',
+    component: ShapesExampleComponent,
+    decorators: [
+        moduleMetadata({
+            imports: [ShapesExampleComponent]
+        })
+    ]
+}
+
+export default meta
+type Story = StoryObj<ShapesExampleComponent>
+
+export const AllLevels: Story = {}

projects/ppwcode/ng-ppw-ds/src/lib/stories/spacings.stories.ts

@@ -0,0 +1,73 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { Component } from '@angular/core'
+
+const spacings = Array.from({ length: 21 }, (_, i) => i)
+
+@Component({
+    selector: 'ppw-spacings-example',
+    template: `
+        @for (level of spacings; track level) {
+            <div class="boxes-wrapper" [style.gap]="'var(--ppw-ds-spacing-' + level + ')'">
+                <div class="box box--primary">{{ level }}</div>
+                <div class="box box--secondary">{{ level * 4 }}px</div>
+            </div>
+        }
+    `,
+    styles: `
+        :host {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 16px;
+        }
+
+        .boxes-wrapper {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .box {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 16px;
+            width: 25px;
+
+            &--primary {
+            background: var(--ppw-primary-color);
+            color: var(--ppw-primary-contrast-color);
+            }
+
+            &--secondary {
+                background: var(--ppw-secondary-color);
+                color: var(--ppw-secondary-contrast-color);
+            }
+        }
+    `
+})
+export class SpacingsExampleComponent {
+    public readonly spacings = spacings
+}
+
+const meta: Meta<SpacingsExampleComponent> = {
+    title: 'ng-ppw-ds/Spacings',
+    component: SpacingsExampleComponent,
+    decorators: [
+        moduleMetadata({
+            imports: [SpacingsExampleComponent]
+        })
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+
+                `
+            }
+        }
+    }
+}
+
+export default meta
+type Story = StoryObj<SpacingsExampleComponent>
+
+export const AllLevels: Story = {}

projects/ppwcode/ng-ppw-ds/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ng-ppw-ds
+ */
+
+export {}

projects/ppwcode/ng-ppw-ds/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

projects/ppwcode/ng-ppw-ds/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

projects/ppwcode/ng-ppw-ds/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/ppwcode/ng-wireframe/src/stories/Configure.mdx

@@ -23,6 +23,11 @@ A collection of reusable UI components for data display and user interaction.
 - **Loader**: A simple yet customizable loading spinner for asynchronous operations.
 - **Dashboard Items Table**: A responsive grid layout designed specifically for hosting dashboard summary items.
 
+### 🎨 ng-ppw-ds
+The PeopleWare Design System provides design tokens for consistent styling across the SDK and consuming applications.
+- **Shapes**: Radius tokens for consistent component geometry.
+- **Spacings**: A 4px-based scale for consistent margins, padding, gaps, and layout dimensions.
+
 ### 💬 ng-dialogs
 Utilities and reusable dialogs to simplify common user interaction patterns.
 - **Confirmation Dialog**: A flexible dialog for standard "confirm/cancel" workflows.

scripts/ci/build-libs.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 export NODE_ENV="ci"
 
-declare -a LIBRARIES_LIST=("ng-utils" "ng-common" "ng-common-components" "ng-async" "ng-dialogs" "ng-forms" "ng-router" "ng-state-management" "ng-unit-testing" "ng-wireframe" "ng-sdk")
+declare -a LIBRARIES_LIST=("ng-ppw-ds" "ng-utils" "ng-common" "ng-common-components" "ng-async" "ng-dialogs" "ng-forms" "ng-router" "ng-state-management" "ng-unit-testing" "ng-wireframe" "ng-sdk")
 declare -a LIBRARIES_COUNT=${#LIBRARIES_LIST[@]}
 
 # Loop over libs