@softheon/armature 19.15.0 → 19.17.0

package/README.md

@@ -302,30 +302,28 @@ Its recommended to set the theme in an app initializer, though it can be done fr
         "sevenHundred": "#261E6F",
         "eightHundred": "#1F1865",
         "nineHundred": "#130F52",
-        "a100": "#908AFF",
-        "a200": "#5F57FF",
-        "a300": "#5F57FF",
-        "a400": "#5F57FF",
-        "a500": "#2F24FF",
-        "a700": "#160AFF"
+        "a50": "rgba(50, 40, 130, 0.04)",
+        "a100": "rgba(50, 40, 130, 0.08)",
+        "a200": "rgba(50, 40, 130, 0.16)",
+        "a300": "rgba(50, 40, 130, 0.24)",
+        "a400": "rgba(50, 40, 130, 0.32)",
+        "a500": "rgba(50, 40, 130, 0.40)",
+        "a600": "rgba(50, 40, 130, 0.48)",
+        "a700": "rgba(50, 40, 130, 0.56)",
+        "a800": "rgba(50, 40, 130, 0.64)",
+        "a900": "rgba(50, 40, 130, 0.72)"
     },
     "primaryContrast": {
-        "fifty": "#000000",
-        "oneHundred": "#000000",
-        "twoHundred": "#000000",
-        "threeHundred": "#000000",
+        "fifty": "rgba(0, 0, 0, 0.87)",
+        "oneHundred": "rgba(0, 0, 0, 0.87)",
+        "twoHundred": "rgba(0, 0, 0, 0.87)",
+        "threeHundred": "rgba(0, 0, 0, 0.87)",
         "fourHundred": "#ffffff",
         "fiveHundred": "#ffffff",
         "sixHundred": "#ffffff",
         "sevenHundred": "#ffffff",
         "eightHundred": "#ffffff",
-        "nineHundred": "#ffffff",
-        "a100": "#000000",
-        "a200": "#000000",
-        "a300": "#000000",
-        "a400": "#000000",
-        "a500": "#000000",
-        "a700": "#000000"
+        "nineHundred": "#ffffff"
     }
 }
  ```
@@ -346,12 +344,6 @@ 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.

package/assets/styles/_responsive.scss

@@ -83,3 +83,95 @@
       0px 1px 3px 0px rgba(0, 0, 0, 0.12);
   }
 }
+
+/** Spacing Utility, Mobile responsive */
+
+.sm-m-b-16 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 16px !important;
+  }
+}
+
+.sm-m-b-24 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 24px !important;
+  }
+}
+
+.sm-m-v-24 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+  }
+}
+
+.sm-m-b-32 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 32px !important;
+  }
+}
+
+.sm-m-b-64 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 64px !important;
+  }
+}
+
+.sm-screen-m-a-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    margin: 0 !important;
+  }
+}
+
+.sm-screen-m-l-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    margin-left: 0 !important;
+  }
+}
+
+.sm-screen-m-h-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+.sm-screen-p-a-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    padding: 0 !important;
+  }
+}
+
+.sm-screen-p-h-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+.md-screen-p-a-0 {
+  @media screen and (max-width: vars.$mat-lt-lg) {
+    padding: 0 !important;
+  }
+}
+
+.md-m-v-24 {
+  @media only screen and (max-width: vars.$mat-lt-lg) {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+  }
+}
+
+.mobile-no-h-margin {
+  @media only screen and (max-width: vars.$mat-lt-sm) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+.mobile-no-h-padding {
+  @media only screen and (max-width: vars.$mat-lt-sm) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}

package/assets/styles/_typography.scss

@@ -42,29 +42,38 @@
 /* 
   Text Body/Emphasis
 */
-.body1, .body2, .body3 {
+.body1, .body2, .body3, 
+.link1, .link2, .link3 {
   font-family: var(--sftn-font-family-body, sans-serif); // Consumer = 'Poppins'
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
   letter-spacing: 0px;
-  line-height: 150%;
+  line-height: normal;
 }
 
 /* Body/Emphasis 1 */
-.body1 {
+.body1, .link1 {
   font-size: var(--sftn-base-font-size-body-1); // Consumer = 16px
 }
 
 /* Body/Emphasis 2 */
-.body2 {
+.body2, .link2 {
   font-size: var(--sftn-base-font-size-body-2); // Consumer = 14px
 }
 
 /* Body/Emphasis 3 */
-.body3 {
+.body3, .link3 {
   font-size: 12px;
 }
 
+/* Utility/Hyperlink 1 */
+.link1, .link2, .link3 {
+  cursor: pointer;
+  font-weight: 500 !important;
+  text-decoration: underline;
+  color: map.get(theme.$arm-primary, 500);
+}
+
 /* 
   Text Body/Emphasis for mat-form-field's
 */