@softheon/armature 10.26.0 → 10.27.0

package/README.md

@@ -399,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.
@@ -1612,7 +1618,9 @@ The second looks at any calls being made to console.error and intercepts them. I
 
 ### Softheon Error Handler
 
-For instances where RUM has not been set up or there are problems connecting, the softheon error handler has been introduced. By using this service errors are shipped to a provided api endpoint and can be handled by that given endpoint. Logs are shipped in the string format
+For instances where RUM has not been set up or there are problems connecting, the softheon error handler has been introduced. By using this service errors are shipped to a provided api endpoint and can be handled by that given endpoint. Logs are shipped in the string format.
+
+The default log level is `Warn`.
 
 # Error Module
 

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: (