{"id":14994764,"url":"https://github.com/plone/pastanaga-angular","last_synced_at":"2025-08-11T11:10:25.949Z","repository":{"id":37431666,"uuid":"107765048","full_name":"plone/pastanaga-angular","owner":"plone","description":"Angular implementation of the Pastanaga UI","archived":false,"fork":false,"pushed_at":"2025-07-22T07:31:48.000Z","size":48410,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":164,"default_branch":"main","last_synced_at":"2025-08-08T17:02:14.896Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plone.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"plone"}},"created_at":"2017-10-21T08:44:34.000Z","updated_at":"2025-07-24T14:35:33.000Z","dependencies_parsed_at":"2023-12-11T11:45:19.391Z","dependency_job_id":"127f39b1-ecca-4234-90e0-7c29a8c5b2c8","html_url":"https://github.com/plone/pastanaga-angular","commit_stats":{"total_commits":563,"total_committers":17,"mean_commits":33.11764705882353,"dds":0.763765541740675,"last_synced_commit":"6939ed7d264bdaef08b4cf8b5b4f7b2bf0ce5ff4"},"previous_names":[],"tags_count":574,"template":false,"template_full_name":null,"purl":"pkg:github/plone/pastanaga-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plone%2Fpastanaga-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plone%2Fpastanaga-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plone%2Fpastanaga-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plone%2Fpastanaga-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plone","download_url":"https://codeload.github.com/plone/pastanaga-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plone%2Fpastanaga-angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269606235,"owners_count":24446147,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T16:08:32.419Z","updated_at":"2025-08-11T11:10:25.932Z","avatar_url":"https://github.com/plone.png","language":"TypeScript","readme":"# Pastanaga Angular\n\n[![Build Status](https://github.com/plone/pastanaga-angular/workflows/CI/badge.svg)](https://github.com/plone/pastanaga-angular/actions?query=workflow%3ACI)\n[![npm version](https://badge.fury.io/js/@guillotinaweb%2Fpastanaga-angular.svg)](https://badge.fury.io/js/@guillotinaweb%2Fpastanaga-angular)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nPastanaga Angular is an Angular implementation of Pastanaga design system offering a set of re-usable UI components which are covering typical needs of any web application.\nIt is maintained by [Plone](http://plone.org) and [Guillotina](http://guillotina.io) communities.\nIt aims to remain simple, and pays particular attention to:\n\n- **Accessibility**: semantic is respected, and aria attributes are implemented where needed;\n- **Internationalisation**: the translation service allows to manage several languages in a single Angular build, and support granular overriding;\n- **Maintenance**: releases are frequent, and upgrade to latest Angular version is performed very quickly after each Angular release.\n\nSee https://plone.github.io/pastanaga-angular for usage examples and developer guide.\n\n## Table of content\n\n- [Setup](#setup)\n  - [Installation](#installation)\n  - [Configuration](#configuration)\n- [Theming](#theming)\n  - [Fonts](#fonts)\n  - [Overriding theme](#overriding-theme)\n- [Migration guide version 1.x to version 2.x](#migration-guide-version-1x-to-version-2x)\n\n## Setup\n\n### Installation\n\nYou can install Pastanaga-angular using its npm package:\n\n- using npm:\n\n```shell\nnpm install @guillotinaweb/pastanaga-angular\n```\n\n- using yarn:\n\n```shell\nyarn add @guillotinaweb/pastanaga-angular\n```\n\nBut if you want to build your own demo application using pastanaga demo components, you need to install it using [mrs-developer](https://www.npmjs.com/package/mrs-developer):\n\n- first install `mrs-developer` if you don't already have it:\n\n```shell\nyarn add mrs-developer\n```\n\n- then add pastanaga-angular to your `mrs.developer.json` configuration (you can choose a specific tag as below, or a branch):\n\n```json\n{\n  \"pastanaga-angular\": {\n    \"url\": \"git@github.com:plone/pastanaga-angular.git\",\n    \"https\": \"https://github.com/plone/pastanaga-angular.git\",\n    \"path\": \"/projects/pastanaga-angular/src\",\n    \"package\": \"@guillotinaweb/pastanaga-angular\",\n    \"tag\": \"2.68.2\"\n  }\n}\n```\n\n- and launch the installation by running `missdev`:\n\n```shell\nmissdev\n```\n\n**Note:**\nBy default, `missdev` will install the dependencies in `src/dev` folder.\nIf you're in a workspace with a mono-repository structure (using [nx](https://nx.dev/) for instance), then you probably want to install pastanaga-angular in your `libs` folder.\nYou can do so by using missdev `--output` option:\n\n```shell\nmissdev --output=../libs\n```\n\n### Configuration\n\n#### Style preprocessing\n\nPastanaga-angular requires two files (`pastanaga-core-overrides.scss` and `pastanaga-component-overrides.scss`) to be in the `src` folder of any project using it.\nIn order for those files to be found during the compilation, you have to add `src` folder in style preprocessing options of `angular.json`:\n\n```json\n    \"stylePreprocessorOptions\": {\n        \"includePaths\": [\n            \"src\"\n        ]\n    }\n```\n\n#### Assets\n\nPastanaga-angular is using [Poppins](https://fonts.google.com/specimen/Poppins) fonts and [Quanta](https://github.com/plone/quanta-icons) glyphs.\n\nIf you want to use the same fonts and glyphs sprite, declare Pastanaga assets in `angular.json`:\n\n- when using npm package:\n\n```json\n{\n  \"assets\": [\n    \"src/favicon.ico\",\n    \"src/assets\",\n    {\n      \"glob\": \"**/*\",\n      \"input\": \"./node_modules/@guillotinaweb/pastanaga-angular/assets\",\n      \"output\": \"assets\"\n    }\n  ]\n}\n```\n\n- when using mrs-developer:\n\n```json\n{\n  \"assets\": [\n    \"src/favicon.ico\",\n    \"src/assets\",\n    {\n      \"glob\": \"**/*\",\n      \"input\": \"./src/develop/pastanaga-angular/projects/pastanaga-angular/assets\",\n      \"output\": \"assets\"\n    }\n  ]\n}\n```\n\n#### Core style\n\nImport Pastanaga core style in your application style (usually `src/styles.scss`):\n\n- when using npm package:\n\n```scss\n@use '~@guillotinaweb/pastanaga-angular/lib/styles/core';\n```\n\n- when using mrs-developer\n\n```scss\n@use './develop/pastanaga-angular/projects/pastanaga-angular/lib/styles/core';\n```\n\n## Theming\n\n### Fonts\n\nIf you want to use Pastanaga fonts in your application, you need to and import Pastanaga fonts in your application style as well:\n\n- when using npm package\n\n```scss\n@use '~@guillotinaweb/pastanaga-angular/lib/styles/theme/fonts';\n```\n\n- when using `mrs-developer`\n\n```scss\n@use './develop/pastanaga-angular/projects/pastanaga-angular/lib/styles/theme/fonts';\n```\n\n### Overriding theme\n\n#### Pastanaga theme is based on tokens\n\nPastanaga theme is defined in `src/lib/styles/theme` folder. Any variable with `!default` suffix can be overwritten.\n\nPastanaga theme is built around token. For example, `_palette.token.scss` contains all the colors used in Pastanaga with general token names (_e.g._ `$color-neutral-regular`, `$color-primary-stronger`).\nSee the full list in https://plone.github.io/pastanaga-angular/palette.\n\nThen, some components have a second layer of tokens. For example buttons have a list of tokens for each aspect and kind (_e.g._ `$color-text-button-primary-solid`, `$color-background-button-primary-solid`,…).\nSo you can have your own theme by overwriting the whole color palette or just by changing some aspects of some components.\n\n#### Setting up your own theme\n\nIf you have your own theme, you can override Pastanaga theme by creating a file `_overrides.scss` forwarding all the Pastanaga token files and overriding the ones you need, and loading it before loading Pastanaga cores in your main style.\nIn the following example, we have a monorepo with a lib containing our theme next to Pastanaga library. In our theme library we have a file `_overrides.scss` as follow:\n\n```scss\n// core\n@forward '../theme/fonts';\n@forward '../theme/tokens/palette.tokens';\n@forward '../theme/tokens/spacing.tokens';\n@forward '../theme/tokens/typography.tokens';\n@forward '../theme/tokens/scrollbar.tokens';\n@forward '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/shadows.tokens';\n@forward '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/transitions.tokens';\n@forward '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/z-index.tokens';\n@forward '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/layout.tokens';\n\n// components\n@forward '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/avatar.tokens';\n@forward '../theme/tokens/body.tokens';\n@forward '../theme/tokens/buttons.tokens';\n@forward '../theme/tokens/card.tokens';\n@forward '../theme/tokens/chips.tokens';\n@forward '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/icon.tokens';\n@forward '../theme/tokens/expander.tokens';\n@forward '../theme/tokens/menu.tokens';\n@forward '../theme/tokens/modal.tokens';\n@forward '../theme/tokens/popover.tokens';\n@forward '../theme/tokens/table.tokens';\n@forward '../theme/tokens/tabs.tokens';\n@forward '../theme/tokens/textfield.tokens';\n@forward '../theme/tokens/toasts.tokens';\n@forward '../theme/tokens/toggle.tokens';\n@forward '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/tooltip.tokens';\n\n// Utility scss functions and mixin\n@forward '../../pastanaga-angular/projects/pastanaga-angular/src/styles/utils';\n```\n\nThen in each of our theme file, we can override the token we want by using Sass `@forward with` syntax. In our example above, `_body.tokens.scss` is as followed:\n\n```scss\n@use '../tokens/palette.tokens' as palette;\n@use '../tokens/typography.tokens' as typography;\n@forward '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/body.tokens'\n  with(\n    $color-text-link-regular: inherit,\n    $color-text-link-regular-hover: inherit,\n    $color-text-disabled: palette.$color-neutral-regular,\n    $font-weight-label: typography.$font-weight-regular\n  );\n```\n\n#### Overriding the palette\n\nOverriding the palette is possible but a bit different as Pastanaga palette is defining Sass variables using pure CSS variable like\n\n```scss\n$color-neutral-regular: var(--color-neutral-regular, hsl(207, 17%, 58%)) !default;\n```\n\nOverriding them is done by defining CSS variables, like for example:\n\n```scss\n@forward '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/palette.tokens';\n:root {\n  --color-dark-stronger: #000;\n  --color-light-stronger: #fff;\n\n  --color-neutral-regular: hsl(0, 0%, 44%);\n  --color-neutral-light: hsl(0, 0%, 77%);\n  --color-neutral-lighter: hsl(0, 0%, 90%);\n  --color-neutral-lightest: hsl(240, 7%, 97%);\n\n  --color-primary-stronger: hsl(249, 100%, 24%);\n  --color-primary-strong: hsl(249, 100%, 40%);\n  --color-primary-regular: hsl(249, 100%, 50%);\n  --color-primary-light: hsl(249, 100%, 65%);\n  --color-primary-lighter: hsl(249, 100%, 92%);\n  --color-primary-lightest: hsl(249, 100%, 96%);\n\n  --color-secondary-stronger: hsl(336, 100%, 24%);\n  --color-secondary-strong: hsl(336, 100%, 36%);\n  --color-secondary-regular: hsl(336, 100%, 50%);\n  --color-secondary-light: hsl(336, 100%, 73%);\n  --color-secondary-lighter: hsl(336, 100%, 90%);\n  --color-secondary-lightest: hsl(336, 100%, 96%);\n}\n```\n\n## Migration guide version 1.x to version 2.x\n\n### Module names\n\nIn Pastanaga 2+, we prefix all modules with `Pa`: `ButtonModule` becomes `PaButtonModule`.\n\n### Components common properties\n\nPastanaga now contains some useful types for properties configuring several components:\n\n- `Kind`: primary | secondary | destructive | inverted\n- `Size`: tee-shirt size going from `small` to `xxlarge`. Not all sizes are available for all components\n\n### Buttons\n\nWe changed the way to configure buttons:\n\n- `color` is now managed by `kind` property\n- `size` is now expecting to be one of the values of `Size` type\n- `border` property is replaced by `aspect` which can be `solid` or `basic`\n\nSee https://plone.github.io/pastanaga-angular/button for full documentation.\n\n### Icons\n\n`pa-icon` is now using a svg sprites to display icons by name. You can still provide a full path to display any other image though.\n\nSee https://plone.github.io/pastanaga-angular/icon for full documentation.\n\n### Form elements\n\nWe changed form elements hierarchy: now they are all in the same place under `controls` folder.\nThey still belong to two distinct modules (`PaTextFieldModule` and `PaTogglesModule`).\n\nAll controls are sharing some properties:\n\n- `PaFormControlDirective` is the base class containing common properties (like `id`, `name`, `disabled`…) for all form elements components\n- `NativeTextFieldDirective` is extending `PaFormControlDirective` and contains common properties for all text field elements (like `placeholder`, `value`, `readonly`,…)\n","funding_links":["https://github.com/sponsors/plone"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplone%2Fpastanaga-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplone%2Fpastanaga-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplone%2Fpastanaga-angular/lists"}