@softheon/armature 10.24.0 → 10.26.1

package/README.md

@@ -2,8 +2,12 @@ This document is also available on [Softheon Wiki](https://wiki.softheon.com/Wik
 
 # Getting started
 
+## Step 1 - Create an empty project with the correct dependencies
+
 To create a project targeting angular 10, in the directory you wish to create your project in, run `npm i @angular/cli@10`, once the command completes, run `ng new your-project-name`. This will create an angular project with the latest stable version of angular 10
 
+It is preferred to select routing as `yes` and style sheet to `SCSS`
+
 Then install the peer dependencies required by the Armature, they can be found below for easy reference
 
 * "@angular/animations": "~10.2.4",
@@ -23,28 +27,135 @@ Then install the peer dependencies required by the Armature, they can be found b
 * "angular-oauth2-oidc-jwks": "^9.0.0",
 * "rxjs": "~6.6.3"
 
-1. Include the `ArmatureModule.forRoot(ConfigurationServiceClassName)` in your `CoreModule` or `AppModule` depending on your project structure. The `ConfigurationServiceClassName` should be replaced with the name of your custom configuration service that extends `BaseConfigService`. If you don't have a custom configuration service, the `DefaultConfigService` will be used.
-2. Add the following directories and files to your assets folder, `/baseline/appsettings.json`, `/configurations/appsettings.json`, `/configurations/en.json`, and `/configurations/theme.json`. These files serve as the configurations for your application and will be loaded at start up.
-3. If you wish to extend the application initializer, first create a service that implements `AbstractStartupService` and implement the load function. Next, in the module from step 1, add the following to your providers. If you do not wish to extend the start up service, the in the `ArmatureModule.forRoot` function provide `true` as the value for the `ignoreCustomAppInitializer` parameter.
+After these have been installed, run the following to install armature `npm i @softheon/armature`
+
+Include the `HttpClientModule` in the imports of your `app.module.ts`.
+
+## Step 2 - Armature Set Up
+
+### 2.1 Configurations
+
+Create the following directory(ies) `src/app/configs/models`.
+
+inside the `src/app/configs/models` directory create a `config.ts` file.
+
+Set the contents of the file to the following
 
 ```javascript
-  providers: [
-    ...
-      { provide: AbstractStartupService, useClass: CustomStartUpService },
-    ...
-  ]
+import { BaseConfig, HeaderConfig, NavigationConfig, OidcAuthSettings, ThemePaletteModel } from '@softheon/armature';
+
+/** The configurations - new properties can be added here to add more application specific configurations */
+export class Config implements BaseConfig {
+  /** the odic settings */
+  public oAuthSettings: OidcAuthSettings;
+
+  /** The header configurations */
+  public header: HeaderConfig;
+
+  /** The theme palette */
+  public theme: ThemePaletteModel;
+
+  /** The navigation config */
+  public navigation: NavigationConfig;
+}
+```
+
+cd into the `src/app/configs` directory and run the following command `ng g service config`
+
+In the generated `config.service.ts` extend `ConfigService` class with `BaseConfig<Config>`. The end result should show as below
+
+```javascript
+
+import { Injectable } from '@angular/core';
+import { BaseConfigService } from '@softheon/armature';
+import { Config } from './models/config';
+
+/**
+ * The Config service is used to get the applications configurations
+ */
+@Injectable()
+export class ConfigService extends BaseConfigService<Config> {
+}
+
+```
+
+In the `src/assets` directory create a `baseline` folder and a `configurations` folder.
+
+In the `src/assets/baseline` folder create an `appsettings.json` file. This will be where you configure your default configurations for your applications. For now it can be an empty object as seen below
+
+```json
+{}
+```
+
+In the `src/assets/configurations` folder create an `appsettings.json` file, a `en.json` file and a `theme.json` file. These will be the overrides for your languages, theme and configurations. For now it can be an empty as seen below
+
+```json
+{}
+```
+
+Finally in your `app.module.ts` include the following line in your imports array
+
+```javascript
+
+ArmatureModule.forRoot(ConfigService)
+
+```
+
+Make sure your `ConfigService` is added to the providers array in `app.module.ts`
+
+### 2.3 Start-up service
+
+cd into the `src/app` directory and run the following command `ng g module core`. This will create a core module for later user.
+
+Inside the `src/app/core` directory create a `start-up` folder.
+
+cd into `src/app/core/start-up` and run `ng g service start-up`.
+
+In the generated `start-up.service.ts` implement the `AbstractStartupService` and create a `load` function that returns `Promise.resolve(true)`. The end result can be found below
+
+```javascript
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { AbstractStartupService } from '@softheon/armature';
+
+/** The start up service */
+@Injectable({
+  providedIn: 'root'
+})
+export class StartupService implements AbstractStartupService {
+    constructor(){}
+
+    public async load(): Promise<any> {
+        return Promise.resolve(true);
+    }
+}
+```
+
+The body of the load function is where you would run your own custom start up logic if any is required.
+
+In your `app.module.ts` add the following to your array of providers `{ provide: AbstractStartupService, useClass: StartupService }`.
+
+**Note** - The `StartUpService` should not need to be included in your providers array in `app.module.ts`.
+
+### 2.4 Styles
+
+ In your `src/style.scss` file, import the following two scss files at the top
+
+```scss
+@import "../node_modules/@softheon/armature/assets/styles/arm-theme.scss";
+@import "../node_modules/@softheon/armature/assets/styles/material-overrides.scss";
 ```
 
-`CustomStartUpService` should be replaced with the name of your service that implements AbstractStartupService
+### 2.5 Setting the app-template selector
 
-4. In your app.component.html, use the following selector to add a full header, nav and footer page layout template
+In your app.component.html, use the following selector to add a full header, nav and footer page layout template
 
 ```html
 <sof-ar-app-template>
 </sof-ar-app-template>
 ```
 
-5. Add footer content using the following ng-content selector
+**Optional** Add footer content using the following ng-content selector
 
 ```html
 <sof-ar-app-template>
@@ -54,7 +165,7 @@ Then install the peer dependencies required by the Armature, they can be found b
 </sof-ar-app-template>
 ```
 
-6. Add additional content between the header and nav using the following selector
+**Optional** Add additional content between the header and nav using the following selector
 
 ```html
 <sof-ar-app-template>
@@ -64,27 +175,9 @@ Then install the peer dependencies required by the Armature, they can be found b
 </sof-ar-app-template>
 ```
 
-7. Configure the navigation by including a section in your `/baseline/appsettings.json` file called `navigation`. Set the nodes property of this object to the nodes of the navigation you wish to display. An example of how to configure navigation nodes can be found in the navigation section bellow.
-
-8. In your style.scss file, import the following two scss files at the top
-
-```scss
-@import "../node_modules/@softheon/armature/assets/styles/arm-theme.scss";
-@import "../node_modules/@softheon/armature/assets/styles/material-overrides.scss";
-```
+### 2.6 NGX Translate
 
-9. In your app module imports, set up the oauth module by doing the following, this is required even if you do not plan on including login:
-
-```javascript
- OAuthModule.forRoot({
-            resourceServer: {
-                allowedUrls: [''],
-                sendAccessToken: true
-            }
-        }),
-```
-
-10. Initialize the translate module by doing the following in app module imports and including the factory towards the top of the file outside of the ngModule decorator and create an `en.json` file under assets/i18n:
+Initialize the translate module by doing the following in `app.module.ts` imports and including the factory towards the top of the file outside of the ngModule decorator and make sure an `src/assets/i18n/en.json` file exists:
 
 ```javascript
 
@@ -108,11 +201,20 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
 
 ```
 
-## Configuring the functionality
+### 2.7 Application log in
 
-### OAuth2 Sign in
+In your `app.module.ts` imports, set up the oauth module by doing the following
 
-In your baseline `appsettings.json` use following property to configure oauth2 login (This uses code flow and cannot be changed as code flow is the most secure and recommended for client side application log in)
+```javascript
+ OAuthModule.forRoot({
+            resourceServer: {
+                allowedUrls: [],
+                sendAccessToken: true
+            }
+        }),
+```
+
+Then add the following object to the root level of your `src/assets/baseline/appsettings.json` file
 
 ```json
  "oAuthSettings": {
@@ -127,11 +229,17 @@ In your baseline `appsettings.json` use following property to configure oauth2 l
     }
 ```
 
-Supply actual values in place of the place holder ones. The `logInText` and `logOutText` can be set to string values or to translate keys. Armature will translate the values if a key is found in your `ngx TranslateService`.
+if you wish to use implicit flow add the following entry to the object above `"responseType": "id_token token"`
+
+**Note** -- The `logInText` and `logOutText` support translate keys or plain text
 
-If your application does not offer sign in, leave the values empty and set the `header.settings.displayAuthInfo` to false in your baseline appsettings file.
+**Note** -- If your application does not offer sign in, leave the values empty and set the `header.settings.displayAuthInfo` to false in your baseline appsettings file.
 
-If your application requires sign in immediately, set `requireLoginOnStartup` to `true`
+**Note** -- If your application requires sign in immediately, set `requireLoginOnStartup` to `true`
+
+### 2.8 Turn off User Entity Service
+
+In your `app.module.ts` include the following in your providers array `{ provide: USER_ENTITY_SERVICE_CONFIG, useValue: { getUserOnInit: false }},`. This will disable the user entity look up, and can be turned on if needed for user information outside of your OIDC provider.
 
 ### Theming
 
@@ -291,6 +399,12 @@ export class MyClass {
 }
 ```
 
+## Colors with opacity
+
+The theme palettes all offer a rgb value through css variables, the following naming convention is used `--{{palette}}-color-{{partsNumber}}-parts-rgb`. So in order to get an opacity of .2 on the primary color, 500 parts the following css can be used
+
+`rgba(var(--primary-color-500-parts-rgb), .2)`
+
 # Armature Navigation
 
 `<sof-ar-navigation></sof-ar-navigation>` is a mobile-responsive navigation component. It structures the application view content to the right and the navigation to the left.
@@ -313,10 +427,12 @@ export class MyClass {
          2. `route` - the sub-node route
 5. Configure Armature component settings in the TS
    1. `[settings]` - these are the required settings to configure your navigation
-      1. `fontAwesomeMenuIcon`  the Header Menu FontAwesome icon
-      2. `mainMenuText` the main menu text that appears in the mobile SubNav
-      3. `headerHeight` the header height
-      4. `menuButtonSRText` the menu button screen reader text
+      1. `fontAwesomeMenuIcon` the Header toggle navigation icon when navigation is open
+      2. `fontAwesomeMenuIconClosed` the Header toggle navigation icon when navigation is closed
+      3. `mainMenuText` the main menu text that appears in the mobile SubNav
+      4. `headerHeight` the header height
+      5. `menuButtonSRText` the menu button screen reader text
+      6. `allowNavToggle` whether to allow navigation toggle
    2. `[advancedSettings]`- these settings are optional, and only needed for advanced height/offset customizations. These will override `headerHeight` in `[settings]`.
       1. `topGapDesktop` & `topGapMobile`- the navigation top gap
       2. `marginTopDesktop/marginTopMobile`- the navigation margin top
@@ -327,7 +443,7 @@ export class MyClass {
       4. `bgGradientColor2` the Nav background gradient color 2
       5. `borderRightColor` the Nav border-right color
       6. `listBorderColor` the Nav border color between each list item
-      7. `highlightGradient1` the Nav highlight gradient color 1
+      7. `highlightGradient1` the Nav highlight gradient color 1, Only setting this will create a solid navigation highlight.
       8. `highlightGradient2` the Nav highlight gradient color 2
       9. `subHighlightBorderColor` the SubNav highlight border color
       10. `subHighlightBgColor` the SubNav highlight bg color
@@ -381,28 +497,30 @@ The navigation data consists of an array of `NavNode`s:
 
 The `[settings]` required input receives a `NavigationSettings` object in order to configure your navigation.
 
-1. `fontAwesomeMenuIcon`  the Header Menu FontAwesome icon string
-2. `mainMenuText` the main menu text that appears in the mobile SubNav
-3. `headerHeight` the header height number
-4. `menuButtonSRText` the menu button screen reader text
-5. `menuStyle` (optional - 'static' | 'stepper' | 'progress') static by default, changes the menu between static, stepper and progress
-6. `hideNavigation` true if hiding the navigation container, defaulted to false
-7. `displayNumbers`true if the navigaiton sections should be numbered, defaulted to true
-8. `progressSectionCompleteIcon` the Progress menu completed section icon string  
-9. `progressSectionFutureIcon` the Progress menu future section icon string
-10. `progressSectionCurrentIcon` the Progress menu current section icon string
-11. `progressMenuCompleteIcon` the Progress menu item complete icon string
-12. `showProgressBar` true if the Progress menu should also display the progress bar, defaulted to true
-13. `sideNavWidthDesktop` the side navigation width for desktop, defaulted to 500
-14. `sideNavWidthMobile` the side navigation width for mobile, defaulted to 500
-15. `progressMenuWidth` the progress menu dropdown width, defaulted to 280
-16. `overrideNavigation` overrides the navigation and enables all routes (to be used for testing) defaulted to false
-17. `maxContentWidthDesktop` the maximum width for the desktop content, defaulted to 100%
-18. `maxContentWidthMobile` the maximum width for the mobile content, defaulted to 100%
-19. `useCustomMobileFooter` true if the navigation is using a custom mobile footer. This hides the language options and signout buttons for mobile nav
-20. `customUserName` the custom user name to be displayed in the mobile side nav
-21. `toggleProgressNavParentIndex` the custom parent node index to be set when menu style is toggled to progress navigation
-22. `toggleProgressNavChildIndex` the custom child node index to be set when menu style is toggled to progress navigation
+1. `fontAwesomeMenuIcon` the Header toggle navigation icon when navigation is open
+2. `fontAwesomeMenuIconClosed` the Header toggle navigation icon when navigation is closed
+3. `mainMenuText` the main menu text that appears in the mobile SubNav
+4. `headerHeight` the header height number
+5. `menuButtonSRText` the menu button screen reader text
+6. `menuStyle` (optional - 'static' | 'stepper' | 'progress') static by default, changes the menu between static, stepper and progress
+7. `hideNavigation` true if hiding the navigation container, defaulted to false
+8. `displayNumbers`true if the navigaiton sections should be numbered, defaulted to true
+9. `progressSectionCompleteIcon` the Progress menu completed section icon string  
+10. `progressSectionFutureIcon` the Progress menu future section icon string
+11. `progressSectionCurrentIcon` the Progress menu current section icon string
+12. `progressMenuCompleteIcon` the Progress menu item complete icon string
+13. `showProgressBar` true if the Progress menu should also display the progress bar, defaulted to true
+14. `sideNavWidthDesktop` the side navigation width for desktop, defaulted to 500
+15. `sideNavWidthMobile` the side navigation width for mobile, defaulted to 500
+16. `progressMenuWidth` the progress menu dropdown width, defaulted to 280
+17. `overrideNavigation` overrides the navigation and enables all routes (to be used for testing) defaulted to false
+18. `maxContentWidthDesktop` the maximum width for the desktop content, defaulted to 100%
+19. `maxContentWidthMobile` the maximum width for the mobile content, defaulted to 100%
+20. `useCustomMobileFooter` true if the navigation is using a custom mobile footer. This hides the language options and signout buttons for mobile nav
+21. `customUserName` the custom user name to be displayed in the mobile side nav
+22. `toggleProgressNavParentIndex` the custom parent node index to be set when menu style is toggled to progress navigation
+23. `toggleProgressNavChildIndex` the custom child node index to be set when menu style is toggled to progress navigation
+24. `allowNavToggle` whether to allow navigation toggle
 
 ### Theme Settings
 
@@ -443,10 +561,12 @@ The `[themeSettings]` - required input receives a `ThemeSettings` object in orde
 
     // the navigation settings
     this.exampleSettings = {
-      fontAwesomeMenuIcon: 'fal fa-bars',
+      fontAwesomeMenuIcon: 'fas fa-angle-double-left',
+      fontAwesomeMenuIconClosed: 'fas fa-angle-double-right',
       mainMenuText: 'MAIN MENU',
       headerHeight: 60,
-      menuButtonSRText: 'Menu Button'
+      menuButtonSRText: 'Menu Button',
+      allowNagToggle: true
     };
 
     // the navigation
@@ -662,7 +782,7 @@ i.e.
    5. `sof-ar-super-header` this is for the header at the very top of the page
 4. Configure Armature component settings in the TS
    1. `[settings]` - these are the required settings to configure your header
-      1. `armatureNavigation` if the header is being paired with the armature navigation. this will auto create the room on mobile for the navigation icon
+      1. `armatureNavigation` if the header is being paired with the armature navigation. this will auto create the room for the navigation icon
       2. `displayLogo` whether or not to display the logo, default false
       3. `logoUrl` the logo url
       4. `logoAltText` the logo alt text
@@ -673,11 +793,14 @@ i.e.
       9. `dropDownAriaText` the drop down menu aria text
       10. `headerDropDownIcon` the header menu drop down icon
       11. `displaySuperHeader` whether or not to show the super header
+      12. `createSpaceForNavToggle` whether to create space for the nav toggle button, regardless of screen size
    2. `[themeSettings]` - this will colorize your header.
       1. `headerColor` the header color - uses a neutral background color based on the current theme (light or dark). can be primary, secondary, or warn
       2. `iconColor` using color string icon color
       3. `headerDropShadow` whether or not to add a drop shadow to the header
       4. `superHeaderColor` the super header color
+      5. `borderBottomColor` The color of the bottom border for the header
+      6. `borderBottomSize` The size of teh bottom border for the header
 
 ## Header Module Setup
 
@@ -712,6 +835,7 @@ These settings will display the header with a logo.
   /** Armature Header - settings */
   public exampleHeaderSettings: HeaderSettings = {
     armatureNavigation: true,
+    createSpaceForNavToggle: true,
     displayLogo: true,
     logoUrl: './assets/logos/logo.svg',
     logoAltText: 'the example portal header logo',

package/assets/styles/arm-theme.scss

@@ -28,6 +28,21 @@
     --primary-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --primary-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
+    --primary-color-50-parts-rgb: 237, 244, 255;
+    --primary-color-100-parts-rgb: 185, 212, 252;
+    --primary-color-200-parts-rgb: 138, 183, 251;
+    --primary-color-300-parts-rgb: 91, 154, 249;
+    --primary-color-400-parts-rgb: 55, 132, 247;
+    --primary-color-500-parts-rgb: 20, 110, 246;
+    --primary-color-600-parts-rgb: 18, 102, 245;
+    --primary-color-700-parts-rgb: 14, 91, 243;
+    --primary-color-800-parts-rgb: 11, 81, 242;
+    --primary-color-900-parts-rgb: 6, 63, 239;
+    --primary-color-A100-parts-rgb: 255, 255, 255;
+    --primary-color-A200-parts-rgb: 228, 233, 255;
+    --primary-color-A400-parts-rgb: 177, 192, 255;
+    --primary-color-A700-parts-rgb: 151, 172, 255;
+
     --accent-color-50-parts: #e0f2f1;
     --accent-color-100-parts: #b2dfdb;
     --accent-color-200-parts: #80cbc4;
@@ -57,6 +72,21 @@
     --accent-color-contrast-A400-parts: #000000;
     --accent-color-contrast-A700-parts: #000000;
 
+    --accent-color-50-parts-rgb: 224, 242, 241;
+    --accent-color-100-parts-rgb: 178, 223, 219;
+    --accent-color-200-parts-rgb: 128, 203, 196;
+    --accent-color-300-parts-rgb: 77, 182, 172;
+    --accent-color-400-parts-rgb: 38, 166, 154;
+    --accent-color-500-parts-rgb: 0, 150, 136;
+    --accent-color-600-parts-rgb: 0, 137, 123;
+    --accent-color-700-parts-rgb: 0, 121, 107;
+    --accent-color-800-parts-rgb: 0, 105, 92;
+    --accent-color-900-parts-rgb: 0, 77, 64;
+    --accent-color-A100-parts-rgb: 167, 255, 235;
+    --accent-color-A200-parts-rgb: 100, 255, 218;
+    --accent-color-A400-parts-rgb: 29, 233, 182;
+    --accent-color-A700-parts-rgb: 0, 191, 165;
+
     --warn-color-50-parts: #fdf3e7;
     --warn-color-100-parts: #fbe1c3;
     --warn-color-200-parts: #f9ce9c;
@@ -86,6 +116,21 @@
     --warn-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --warn-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
+    --warn-color-50-parts-rgb: 253, 243, 231;
+    --warn-color-100-parts-rgb: 251, 225, 195;
+    --warn-color-200-parts-rgb: 249, 206, 156;
+    --warn-color-300-parts-rgb: 246, 186, 116;
+    --warn-color-400-parts-rgb: 244, 171, 86;
+    --warn-color-500-parts-rgb: 242, 156, 56;
+    --warn-color-600-parts-rgb: 240, 148, 50;
+    --warn-color-700-parts-rgb: 238, 138, 43;
+    --warn-color-800-parts-rgb: 236, 128, 36;
+    --warn-color-900-parts-rgb: 232, 110, 23;
+    --warn-color-A100-parts-rgb: 255, 255, 255;
+    --warn-color-A200-parts-rgb: 255, 240, 230;
+    --warn-color-A400-parts-rgb: 255, 208, 179;
+    --warn-color-A700-parts-rgb: 255, 193, 154;
+
     --info-color-50-parts: #e7f3fb;
     --info-color-100-parts: #c2e0f4;
     --info-color-200-parts: #9acced;
@@ -115,6 +160,21 @@
     --info-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --info-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
+    --info-color-50-parts-rgb: 231, 243, 251;
+    --info-color-100-parts-rgb: 194, 224, 244;
+    --info-color-200-parts-rgb: 154, 204, 237;
+    --info-color-300-parts-rgb: 113, 183, 230;
+    --info-color-400-parts-rgb: 82, 167, 224;
+    --info-color-500-parts-rgb: 52, 152, 219;
+    --info-color-600-parts-rgb: 47, 144, 215;
+    --info-color-700-parts-rgb: 39, 133, 210;
+    --info-color-800-parts-rgb: 33, 123, 205;
+    --info-color-900-parts-rgb: 21, 106, 196;
+    --info-color-A100-parts-rgb: 245, 249, 255;
+    --info-color-A200-parts-rgb: 194, 221, 255;
+    --info-color-A400-parts-rgb: 143, 193, 255;
+    --info-color-A700-parts-rgb: 117, 179, 255;
+
     --success-color-50-parts: #edf5eb;
     --success-color-100-parts: #d1e6ce;
     --success-color-200-parts: #b3d6ae;
@@ -144,6 +204,21 @@
     --success-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --success-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
+    --success-color-50-parts-rgb: 237, 245, 235;
+    --success-color-100-parts-rgb: 209, 230, 206;
+    --success-color-200-parts-rgb: 179, 214, 174;
+    --success-color-300-parts-rgb: 149, 197, 141;
+    --success-color-400-parts-rgb: 126, 184, 116;
+    --success-color-500-parts-rgb: 103, 172, 92;
+    --success-color-600-parts-rgb: 95, 165, 84;
+    --success-color-700-parts-rgb: 84, 155, 74;
+    --success-color-800-parts-rgb: 74, 146, 65;
+    --success-color-900-parts-rgb: 57, 130, 48;
+    --success-color-A100-parts-rgb: 208, 255, 203;
+    --success-color-A200-parts-rgb: 162, 255, 152;
+    --success-color-A400-parts-rgb: 116, 255, 101;
+    --success-color-A700-parts-rgb: 93, 255, 76;
+
     --error-color-50-parts: #fceae8;
     --error-color-100-parts: #f8c9c5;
     --error-color-200-parts: #f3a69e;
@@ -172,6 +247,21 @@
     --error-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
     --error-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --error-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
+
+    --error-color-50-parts-rgb: 252, 234, 232;
+    --error-color-100-parts-rgb: 248, 201, 197;
+    --error-color-200-parts-rgb: 248, 201, 197;
+    --error-color-300-parts-rgb: 238, 130, 119;
+    --error-color-400-parts-rgb: 235, 103, 89;
+    --error-color-500-parts-rgb: 231, 76, 60;
+    --error-color-600-parts-rgb: 228, 69, 54;
+    --error-color-700-parts-rgb: 224, 60, 46;
+    --error-color-800-parts-rgb: 221, 51, 39;
+    --error-color-900-parts-rgb: 215, 36, 26;
+    --error-color-A100-parts-rgb: 255, 255, 255;
+    --error-color-A200-parts-rgb: 255, 217, 215;
+    --error-color-A400-parts-rgb: 255, 168, 164;
+    --error-color-A700-parts-rgb: 255, 143, 139;
 }
 
 $arm-primary: (