@carefirst/library 1.0.1

package/public/styles/font.scss

@@ -0,0 +1,241 @@
+@font-face {
+  font-family: 'Mulish';
+  font-weight: 200;
+  src: url(/assets/fonts/Mulish-200.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-weight: 300;
+  src: url(/assets/fonts/Mulish-300.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-weight: 400;
+  src: url(/assets/fonts/Mulish-400.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-weight: 500;
+  src: url(/assets/fonts/Mulish-500.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-weight: 600;
+  src: url(/assets/fonts/Mulish-600.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-weight: 700;
+  src: url(/assets/fonts/Mulish-700.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-weight: 800;
+  src: url(/assets/fonts/Mulish-800.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-weight: 900;
+  src: url(/assets/fonts/Mulish-900.ttf) format('truetype');
+}
+//--- Roboto
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 100;
+  src: url(/assets/fonts/Roboto-100.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 300;
+  src: url(/assets/fonts/Roboto-300.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 400;
+  src: url(/assets/fonts/Roboto-400.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 500;
+  src: url(/assets/fonts/Roboto-500.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 700;
+  src: url(/assets/fonts/Roboto-700.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 900;
+  src: url(/assets/fonts/Roboto-900.woff2) format('woff2');
+}
+
+/*===============================================
+==================== Colors =====================
+===============================================*/
+
+:root {
+  --cf-app-text-color-default: #4a4a4a;
+  --cf-app-text-color-light: #fff;
+  --cf-app-text-color-alt1: #6b6b6b;
+  --cf-app-text-color-alt2: #9d9d9d;
+}
+
+/*===============================================
+================== Base Text ====================
+===============================================*/
+
+//--- Normalize global font base
+:root {
+  font-size: 62.5%; //--- 63.5% of 16px (default) = 10px
+  font-family: 'Mulish', 'Roboto', sans-serif;
+}
+
+/*===============================================
+================== Headers ======================
+===============================================*/
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: auto;
+  font-family: 'Mulish', sans-serif;
+  font-style: normal;
+  font-weight: 900;
+  margin: 0;
+  display: inline-block;
+  color: var(--cf-app-color-primary);
+}
+
+h1.light,
+h2.light,
+h3.light,
+h4.light {
+  color: var(--cf-app-text-color-light);
+}
+
+/*================== Mobile ==================*/
+h1 {
+  font-size: 4.2rem;
+}
+
+h2 {
+  font-size: 3.6rem;
+}
+
+h3 {
+  font-size: 2.8rem;
+}
+
+h4 {
+  font-size: 1.8rem;
+}
+
+/*================== Desktop ==================*/
+
+@media (min-width: $desktop-breakpoint) {
+  h1 {
+    font-size: 6.4rem;
+  }
+
+  h2 {
+    font-size: 4.8rem;
+  }
+
+  h3 {
+    font-size: 3.6rem;
+  }
+
+  h4 {
+    font-size: 2.8rem;
+  }
+}
+
+/*===============================================
+================= Paragraphs ====================
+===============================================*/
+
+p {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  color: var(--cf-app-color-primary);
+}
+
+p[class^='body-'].bold {
+  font-weight: 500;
+}
+
+p[class^='body-'].light {
+  color: var(--cf-app-text-color-light);
+}
+
+/*================== Mobile ==================*/
+
+p.body-large {
+  font-size: 1.8rem;
+  line-height: 2.4rem;
+}
+
+p.body-standard {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+p.body-medium {
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+}
+
+p.body-small {
+  font-size: 1.2rem;
+  line-height: 1.6rem;
+}
+
+p.body-extra-small {
+  font-size: 1rem;
+  line-height: 1.6rem;
+}
+
+p.body-extra-extra-small {
+  font-size: 0.8rem;
+  line-height: 1.2rem;
+}
+
+/*================== Desktop ==================*/
+
+@media (min-width: $desktop-breakpoint) {
+  p.body-large {
+    font-size: 2.4rem;
+    line-height: 3.2rem;
+  }
+
+  p.body-standard {
+    font-size: 1.8rem;
+    line-height: 2.4rem;
+  }
+
+  p.body-medium {
+    font-size: 1.6rem;
+    line-height: 2.4rem;
+  }
+
+  p.body-small {
+    font-size: 1.4rem;
+    line-height: 1.6rem;
+  }
+
+  p.body-extra-small {
+    font-size: 1rem;
+    line-height: 1.6rem;
+  }
+
+  p.body-extra-extra-small {
+    font-size: 0.8rem;
+    line-height: 1.2rem;
+  }
+}

package/public/styles/forms.scss

@@ -0,0 +1,17 @@
+//--- Design
+ion-input,
+ion-textarea,
+ion-select {
+  label {
+    font-family: "Roboto", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 1.6rem;
+    color: var(--app-color-primary);
+  }
+  --border-radius: 8px !important; //--- important overrides the fill option
+  --highlight-color-focused: var(--app-color-primary) !important;
+  --highlight-color-invalid: var(app-system-color-error) !important;
+  --highlight-color-valid: var(--app-color-primary) !important;
+  text-align: start;
+}

package/public/styles/index.scss

@@ -0,0 +1,19 @@
+/**
+ * CareFirst CSS Index File
+ *
+ * @file          index.scss
+ * @description   Contains all the base CSS files pertaining to the CareFirst Design theme
+ * @author        Jacques Coetzee
+ * @since         2023 - 09 - 04
+ * @usage         @import "../node_modules/@carefirst/library/styles/index.scss";
+ */
+
+//--- Screen size breakpoint
+$desktop-breakpoint: 768px; //--- Same as ionic md breakpoint
+
+//--- SCSS Imports
+@import './app.scss';
+@import './colors.scss';
+@import './font.scss';
+@import './forms.scss';
+@import './scrollbar.scss';

package/public/styles/scrollbar.scss

@@ -0,0 +1,22 @@
+//--- Scroll bar style (Modals, ion-content not supported yet)
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: var(--cf-app-color-secondary);
+  border-radius: 20px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--cf-app-color-primary);
+  border-radius: 20px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--cf-app-text-color-default);
+}

package/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/library.module';
+export * from './lib/directives/button-loader.directive';
+export * from './lib/components/page/page.component';
+export * from './lib/components/button/button.component';
+export * from './lib/components/spacer/spacer.component';
+export * from './lib/components/icon/icon.component';