@softheon/armature 17.17.0 → 17.18.0

package/README.md

@@ -142,10 +142,9 @@ In your `app.module.ts` add the following to your array of providers `{ provide:
 
 ### 2.4 Styles
 
- In your `src/style.scss` file, import the following two scss files at the top
+ In your `src/style.scss` file, import the following scss file at the top
 
 ```scss
-@import "../node_modules/@softheon/armature/assets/styles/arm-theme.scss";
 @import "../node_modules/@softheon/armature/assets/styles/sof-styles.scss";
 ```
 
@@ -305,7 +304,9 @@ Its recommended to set the theme in an app initializer, though it can be done fr
         "nineHundred": "#130F52",
         "a100": "#908AFF",
         "a200": "#5F57FF",
-        "a400": "#2F24FF",
+        "a300": "#5F57FF",
+        "a400": "#5F57FF",
+        "a500": "#2F24FF",
         "a700": "#160AFF"
     },
     "primaryContrast": {
@@ -321,71 +322,9 @@ Its recommended to set the theme in an app initializer, though it can be done fr
         "nineHundred": "#ffffff",
         "a100": "#000000",
         "a200": "#000000",
+        "a300": "#000000",
         "a400": "#000000",
-        "a700": "#000000"
-    },
-    "accentColor": {
-        "fifty": "#FFF7E6",
-        "oneHundred": "#FEEAC0",
-        "twoHundred": "#FEDD96",
-        "threeHundred": "#FDCF6C",
-        "fourHundred": "#FCC44D",
-        "fiveHundred": "#FCBA2D",
-        "sixHundred": "#FCB328",
-        "sevenHundred": "#FBAB22",
-        "eightHundred": "#FBA31C",
-        "nineHundred": "#FA9411",
-        "a100": "#FFFFFF",
-        "a200": "#FFF9F3",
-        "a400": "#FFE1C0",
-        "a700": "#FFD5A7"
-    },
-    "accentContrast": {
-        "fifty": "#000000",
-        "oneHundred": "#000000",
-        "twoHundred": "#000000",
-        "threeHundred": "#000000",
-        "fourHundred": "#ffffff",
-        "fiveHundred": "#ffffff",
-        "sixHundred": "#ffffff",
-        "sevenHundred": "#ffffff",
-        "eightHundred": "#ffffff",
-        "nineHundred": "#ffffff",
-        "a100": "#000000",
-        "a200": "#000000",
-        "a400": "#000000",
-        "a700": "#000000"
-    },
-    "warningColor": {
-        "fifty": "#FDE8E7",
-        "oneHundred": "#FAC7C3",
-        "twoHundred": "#F6A19B",
-        "threeHundred": "#F27B73",
-        "fourHundred": "#F05F55",
-        "fiveHundred": "#ED4337",
-        "sixHundred": "#EB3D31",
-        "sevenHundred": "#E8342A",
-        "eightHundred": "#E52C23",
-        "nineHundred": "#E01E16",
-        "a100": "#FFFFFF",
-        "a200": "#FFDFDE",
-        "a400": "#FFADAB",
-        "a700": "#FF9491"
-    },
-    "warningContrast": {
-        "fifty": "#000000",
-        "oneHundred": "#000000",
-        "twoHundred": "#000000",
-        "threeHundred": "#000000",
-        "fourHundred": "#ffffff",
-        "fiveHundred": "#ffffff",
-        "sixHundred": "#ffffff",
-        "sevenHundred": "#ffffff",
-        "eightHundred": "#ffffff",
-        "nineHundred": "#ffffff",
-        "a100": "#000000",
-        "a200": "#000000",
-        "a400": "#000000",
+        "a500": "#000000",
         "a700": "#000000"
     }
 }

package/assets/styles/{arm-theme.scss → _arm-theme.scss}

@@ -1,3 +1,4 @@
+
 :root {
     --primary-color-50-parts: #edf4ff;
     --primary-color-100-parts: #b9d4fc;

package/assets/styles/_responsive.scss

@@ -0,0 +1,85 @@
+@use "./variables" as vars;
+
+@media screen and (max-width: vars.$mat-lt-md) {
+  .hidden-small-screen {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: vars.$mat-lt-lg) {
+  .hidden-md-screen {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: vars.$mat-gt-sm) {
+  .visible-small-screen {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: vars.$mat-gt-md) {
+  .visible-md-screen {
+    display: none !important;
+  }
+}
+
+.sm-screen-op-7 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    opacity: 0.7;
+  }
+}
+
+.sm-d-inline-flex {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    display: inline-flex !important;
+  }
+}
+
+
+.mobile-full-width {
+  @media only screen and (max-width: vars.$mat-lt-sm) {
+    width: 100%;
+  }
+}
+
+.sm-screen-full-width {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    width: 100%;
+  }
+}
+
+.mobile-no-card {
+  padding: 36px 30px !important;
+
+  @media only screen and (max-width: vars.$mat-lt-sm) {
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}
+
+.sm-screen-no-card {
+  padding: 36px 30px !important;
+
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}
+
+.sm-screen-no-white-bg {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    background: transparent !important;
+  }
+}
+
+.sm-screen-card-shadow-z1 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    box-shadow:
+      0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+      0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  }
+}

package/assets/styles/_typography.scss

@@ -0,0 +1,180 @@
+@use "@angular/material" as mat;
+@use "./arm-theme" as theme;
+@use "./variables" as vars;
+
+body {
+  font-family: "Poppins", sans-serif !important;
+  letter-spacing: 0px;
+  font-size: 14px;
+  margin: 0 !important;
+}
+
+.merriweather {
+  font-family: "Merriweather", serif !important;
+}
+
+.poppins {
+  font-family: "Poppins", sans-serif !important;
+}
+
+.h1, [h1], h1,
+.h2, [h2], h2,
+.h3, [h3], h3,
+.h4, [h4], h4 {
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  margin: 0px;
+  padding: 0px;
+}
+
+.h1, [h1], h1 {
+  font-size: 34px;
+  line-height: 48px;
+
+  @media only screen and (max-width: vars.$screen-sm-end) {
+    font-size: 28px;
+  }
+}
+
+.h2, [h2], h2 {
+  font-size: 24px;
+  line-height: 33px;
+}
+
+.h3, [h3], h3 {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.h4, [h4], h4 {
+  font-size: 18px;
+  line-height: 27px;
+}
+
+.body1, .body2 {
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+}
+
+.body1 {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.body2 {
+  font-size: 14px;
+  line-height: 21px;
+
+  @media only screen and (max-width: vars.$screen-sm-end) {
+    font-size: 16px;
+  }
+}
+
+mat-form-field {
+  &.body1, &.body2 {
+    font-family: "Poppins", sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    letter-spacing: normal;
+  }
+
+  &.body1 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &.body2 {
+    font-size: 14px;
+    line-height: 21px;
+
+    @media only screen and (max-width: vars.$screen-sm-end) {
+      font-size: 16px;
+    }
+  }
+}
+
+.ls-half {
+  letter-spacing: 0.5px !important;
+}
+
+.ls-quarter {
+  letter-spacing: 0.25px !important;
+}
+
+.fw-500 {
+  font-weight: 500 !important;
+}
+
+.fw-600 {
+  font-weight: 600 !important;
+}
+
+.color-primary {
+  color: mat.get-color-from-palette(theme.$arm-primary, 500);
+}
+
+.color-accent {
+  color: mat.get-color-from-palette(theme.$arm-accent, 500);
+}
+
+.color-warn {
+  color: mat.get-color-from-palette(theme.$arm-warn, 500);
+}
+
+.color-info {
+  color: mat.get-color-from-palette(theme.$arm-info, 500);
+}
+
+.color-success {
+  color: mat.get-color-from-palette(theme.$arm-success, 500);
+}
+
+.color-error {
+  color: mat.get-color-from-palette(theme.$arm-error, 900);
+}
+
+.color-neutral {
+  color: mat.get-color-from-palette(theme.$arm-neutral, 500);
+}
+
+.left-align {
+  text-align: left;
+}
+
+.center-align {
+  text-align: center;
+}
+
+.text-left,
+[text-left] {
+  text-align: left !important;
+}
+
+.text-center,
+[text-center] {
+  text-align: center !important;
+}
+
+[text-high-emphasis],
+.text-high-emphasis {
+  color: vars.$text-high-emphasis;
+}
+
+[text-medium-emphasis],
+.text-medium-emphasis {
+  color: vars.$text-medium-emphasis;
+}
+
+[text-low-emphasis],
+.text-low-emphasis {
+  color: vars.$text-low-emphasis;
+}
+
+[text-inverse],
+.text-inverse {
+  color: vars.$text-inverse;
+}

package/assets/styles/_utility.scss

@@ -1,6 +1,10 @@
+@use "./variables" as vars;
+
+/** This file includes classes/attributes to control the margin & padding of elements */
+
 /** Margin Styling */
-/** M-Top */
 
+/** M-Top */
 [m-t-auto],
 .m-t-auto {
   margin-top: auto !important;
@@ -61,6 +65,7 @@
 .m-t-60 {
   margin-top: 60px !important;
 }
+
 /** M-Right */
 .m-r-auto,
 [m-r-auto] {
@@ -90,6 +95,7 @@
 [m-r-60] {
   margin-right: 60px !important;
 }
+
 /** M-Bottom */
 [m-b-auto],
 .m-b-auto {
@@ -143,6 +149,7 @@
 .m-b-65 {
   margin-bottom: 65px !important;
 }
+
 /** M-Left */
 .m-l-auto,
 [m-l-auto] {
@@ -176,6 +183,7 @@
 [m-l-35] {
   margin-left: 35px !important;
 }
+
 /** M-Horizontal */
 .m-h-auto,
 [m-h-auto] {
@@ -232,6 +240,7 @@
   margin-left: 70px !important;
   margin-right: 70px !important;
 }
+
 /** M-Vertical */
 .m-v-auto,
 [m-v-auto] {
@@ -308,6 +317,7 @@
   margin-top: 60px !important;
   margin-bottom: 60px !important;
 }
+
 /** M-All */
 .m-a-auto,
 [m-a-auto] {
@@ -341,8 +351,9 @@
 [m-a-30] {
   margin: 30px !important;
 }
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 /** Padding Styling */
+
 /** P-Top */
 [p-t-0],
 .p-t-0 {
@@ -436,6 +447,7 @@
 [p-t-60] {
   padding-top: 65px !important;
 }
+
 /** P-Right */
 [p-r-0],
 .p-r-0 {
@@ -469,6 +481,7 @@
 .p-r-30 {
   padding-right: 30px !important;
 }
+
 /** P-Bottom */
 [p-b-0],
 .p-b-0 {
@@ -530,6 +543,7 @@
 .p-b-100 {
   padding-bottom: 100px !important;
 }
+
 /** P-Left */
 .p-l-0,
 [p-l-0] {
@@ -567,6 +581,7 @@
 [p-l-30] {
   padding-left: 30px !important;
 }
+
 /** P-Horizontal */
 [p-h-0],
 .p-h-0 {
@@ -603,6 +618,7 @@
   padding-left: 20px !important;
   padding-right: 20px !important;
 }
+
 /** P-Vertical */
 [p-v-0],
 .p-v-0 {
@@ -679,6 +695,7 @@
   padding-top: 100px !important;
   padding-bottom: 100px !important;
 }
+
 /** P-All */
 [p-a-0],
 .p-a-0 {
@@ -708,37 +725,109 @@
 .p-a-40 {
   padding: 40px !important;
 }
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/** Input Width Styling */
-.input-w-300,
-[input-w-300] {
-  width: 300px !important;
+
+/** Mobile responsive */
+
+.sm-m-b-16 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 16px !important;
+  }
 }
-.input-w-200,
-[input-w-200] {
-  width: 200px !important;
+
+.sm-m-b-24 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 24px !important;
+  }
 }
-.input-w-150,
-[input-w-150] {
-  width: 150px !important;
+
+.sm-m-v-24 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+  }
 }
-.input-w-120,
-[input-w-120] {
-  width: 120px !important;
+
+.sm-m-b-32 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 32px !important;
+  }
 }
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/** Text Styling */
-.text-left,
-[text-left] {
-  text-align: left;
+
+.sm-m-b-64 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 64px !important;
+  }
 }
-.text-center,
-[text-center] {
-  text-align: center !important;
+
+.sm-screen-m-a-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    margin: 0 !important;
+  }
 }
 
-[p-x-16],
-.p-x-16 {
-  padding-left: 16px !important;
-  padding-right: 16px !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;
+  }
+}
+
+/** Generic utility classes */
+
+body.inheritCursors * {
+  cursor: inherit !important;
+}
+
+.full-width {
+  width: 100% !important;
+}
+
+.relative {
+  position: relative;
+}

package/assets/styles/_variables.scss

@@ -9,6 +9,7 @@ $screen-lg-start: 1280px;
 $screen-lg-end: 1919px;
 $screen-xl-start: 1920px;
 $screen-xl-end: 5000px;
+
 $mat-lt-sm: 599px;
 $mat-lt-md: 959px;
 $mat-lt-lg: 1279px;
@@ -31,4 +32,4 @@ $surface-color-inverse-light: #333333;
 $surface-color-inverse-level-one-light: #424242;
 $surface-color-inverse-level-two-light: #515151;
 
-$sof-nav-panel-width: 328px;
+$sof-nav-panel-width: 328px;