#170 Bring in fonts (#172)

* SourceSansPro added * appy font family and fix styles
AbsaOSS · Aug 21, 2023 · e4b7fe8 · e4b7fe8
1 parent 0342861
commit e4b7fe8
Show file tree

Hide file tree

Showing 20 changed files with 50 additions and 17 deletions.
diff --git a/projects/cps-ui-kit/assets/fonts/SourceSansPro-Regular.ttf b/projects/cps-ui-kit/assets/fonts/SourceSansPro-Regular.ttf
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss
@@ -25,7 +25,7 @@ $hover-transition-duration: 0.2s;
     position: relative;
     width: 100%;
     outline: none;
-    font-family: Source Sans Pro, sans-serif;
+    font-family: 'Source Sans Pro', sans-serif;
     display: grid;
 
     &-container {
@@ -64,6 +64,7 @@ $hover-transition-duration: 0.2s;
       margin-bottom: 0.2rem;
       color: $autocomplete-label-color;
       font-size: 0.875rem;
+      font-weight: 600;
       .cps-autocomplete-label-info-circle {
         margin-left: 8px;
         pointer-events: all;
@@ -117,7 +118,7 @@ $hover-transition-duration: 0.2s;
         color: $autocomplete-option-value-color;
         border-style: none;
         outline: none;
-        font-family: Source Sans Pro, sans-serif;
+        font-family: 'Source Sans Pro', sans-serif;
         &::placeholder {
           color: $autocomplete-placeholder-color;
           font-style: italic;
@@ -173,10 +174,9 @@ $hover-transition-duration: 0.2s;
           flex-wrap: wrap;
           .text-group-item {
             padding-bottom: 3px;
-            padding-top: 2.5px;
+            padding-top: 2px;
             padding-right: 4px;
             height: 24px;
-            display: table;
           }
         }
       }
@@ -271,6 +271,7 @@ $hover-transition-duration: 0.2s;
 }
 
 .cps-autocomplete-options {
+  font-family: 'Source Sans Pro', sans-serif;
   background: white;
   overflow-x: hidden;
   max-height: 242px;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.scss b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.scss
@@ -17,6 +17,9 @@ $option-active-background: #f1eaec;
       margin-bottom: 0.5rem;
       align-items: center;
       display: inline-flex;
+      font-weight: normal;
+      font-size: 16px;
+      font-family: 'Source Sans Pro', sans-serif;
 
       .cps-btn-toggle-label-info-circle {
         margin-left: 8px;
@@ -75,7 +78,7 @@ $option-active-background: #f1eaec;
           border-right: 0;
           font-weight: normal;
           font-size: 16px;
-          font-family: Source Sans Pro, sans-serif;
+          font-family: 'Source Sans Pro', sans-serif;
           letter-spacing: 0.05em;
           color: $option-label-color;
           text-align: center;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.scss b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.scss
@@ -48,8 +48,11 @@ $tick-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZ
       }
 
       .cps-checkbox-label {
-        top: 1px;
-        position: relative;
+        font-family: 'Source Sans Pro', sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 1rem;
+        line-height: 1rem;
         color: $label-color;
         &-disabled {
           color: $disabled-label-color;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
@@ -8,6 +8,7 @@
     display: inline-flex;
     background-color: var(--cps-color-bg-dark);
     border-radius: 14px;
+    line-height: 16px;
     padding: 4px 12px;
     cursor: default;
     &-close-icon {
@@ -22,6 +23,9 @@
     &-label {
       font-size: 14px;
       color: var(--cps-color-text-darkest);
+      font-family: 'Source Sans Pro', sans-serif;
+      font-style: normal;
+      font-weight: 400;
     }
 
     &.cps-chip-disabled {

diff --git a/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.scss b/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.scss
@@ -35,6 +35,7 @@ $disabled-day-color: var(--cps-color-text-lightest);
 
   ::ng-deep {
     .p-datepicker {
+      font-family: 'Source Sans Pro', sans-serif;
       width: auto !important;
       padding: 0.5rem;
       background: #ffffff;
@@ -287,13 +288,12 @@ $disabled-day-color: var(--cps-color-text-lightest);
       -webkit-user-select: none;
       user-select: none;
       font-size: 1rem;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol';
+      font-family: 'Source Sans Pro', sans-serif;
       border-radius: 6px;
     }
 
     .p-button {
+      font-family: 'Source Sans Pro', sans-serif;
       background-color: transparent;
       color: $color-calm;
       border-color: transparent;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.scss b/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.scss
@@ -45,6 +45,7 @@ $hover-transition-duration: 0.2s;
       }
 
       input {
+        font-family: 'Source Sans Pro', sans-serif;
         font-size: 1rem;
         color: $input-text-color;
         background: #ffffff;
@@ -198,6 +199,7 @@ $hover-transition-duration: 0.2s;
       font-size: 0.875rem;
       align-items: center;
       display: inline-flex;
+      font-weight: 600;
 
       .cps-input-label-info-circle {
         margin-left: 8px;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.scss b/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.scss
@@ -24,7 +24,7 @@ $color-inner: var(--cps-color-energy);
         display: block;
         text-align: center;
         font-size: 20px;
-        font-family: 'Inter', sans-serif;
+        font-family: 'Source Sans Pro', sans-serif;
         font-weight: 600;
         padding-bottom: 15px;
         animation: cps-loader-text-animation 4s linear infinite;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.scss b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.scss
@@ -6,6 +6,7 @@
   margin-top: 14px;
   top: 0;
   left: 0;
+  font-family: 'Source Sans Pro', sans-serif;
 }
 
 .cps-menu-container:not(.cps-menu-no-arrow):before {
@@ -35,6 +36,7 @@
     padding: 0;
   }
   .cps-menu-content {
+    font-family: 'Source Sans Pro', sans-serif;
     display: flex;
     flex-direction: column;
     -webkit-user-select: none; /* Safari */

diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio/cps-radio.component.scss b/projects/cps-ui-kit/src/lib/components/cps-radio/cps-radio.component.scss
@@ -10,7 +10,11 @@ $disabled-label-color: var(--cps-color-text-light);
   display: inline-block;
 
   .cps-radio-group {
+    font-family: 'Source Sans Pro', sans-serif;
     &-label {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 1rem;
       color: $group-label-color;
       margin-bottom: 0.75rem;
       align-items: center;
@@ -46,8 +50,10 @@ $disabled-label-color: var(--cps-color-text-light);
         gap: 0.75em;
         &-label {
           font-size: 1rem;
-          align-self: center;
           color: $label-color;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1rem;
         }
         input[type='radio'] {
           -webkit-appearance: none;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
@@ -23,7 +23,7 @@ $hover-transition-duration: 0.2s;
     position: relative;
     width: 100%;
     outline: none;
-    font-family: Source Sans Pro, sans-serif;
+    font-family: 'Source Sans Pro', sans-serif;
     display: grid;
 
     &-container {
@@ -56,6 +56,7 @@ $hover-transition-duration: 0.2s;
       margin-bottom: 0.2rem;
       color: $select-label-color;
       font-size: 0.875rem;
+      font-weight: 600;
       .cps-select-label-info-circle {
         margin-left: 8px;
         pointer-events: all;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss
@@ -128,6 +128,8 @@
     position: relative;
     min-height: 100px;
     padding: 10px;
+    font-family: 'Source Sans Pro', sans-serif;
+    color: var(--cps-color-text-dark);
   }
 
   .cps-tab-content.cps-tab-content-subtabs {

diff --git a/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.scss b/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.scss
@@ -5,6 +5,7 @@
   -ms-user-select: none;
   user-select: none;
   .cps-tag {
+    font-family: 'Source Sans Pro', sans-serif;
     min-height: 25px;
     align-items: center;
     padding: 0 10px;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-textarea/cps-textarea.component.scss b/projects/cps-ui-kit/src/lib/components/cps-textarea/cps-textarea.component.scss
@@ -129,6 +129,7 @@ $hover-transition-duration: 0.2s;
       font-size: 0.875rem;
       align-items: center;
       display: inline-flex;
+      font-weight: 600;
 
       .cps-textarea-label-info-circle {
         margin-left: 8px;

diff --git a/.../cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.scss b/.../cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.scss
@@ -26,7 +26,7 @@ $hover-transition-duration: 0.2s;
     position: relative;
     width: 100%;
     outline: none;
-    font-family: Source Sans Pro, sans-serif;
+    font-family: 'Source Sans Pro', sans-serif;
     display: grid;
 
     &-container {
@@ -65,6 +65,7 @@ $hover-transition-duration: 0.2s;
       margin-bottom: 0.2rem;
       color: $treeautocomplete-label-color;
       font-size: 0.875rem;
+      font-weight: 600;
       .cps-treeautocomplete-label-info-circle {
         margin-left: 8px;
         pointer-events: all;
@@ -118,7 +119,7 @@ $hover-transition-duration: 0.2s;
         color: $treeautocomplete-option-value-color;
         border-style: none;
         outline: none;
-        font-family: Source Sans Pro, sans-serif;
+        font-family: 'Source Sans Pro', sans-serif;
         &::placeholder {
           color: $treeautocomplete-placeholder-color;
           font-style: italic;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.scss b/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.scss
@@ -24,7 +24,7 @@ $hover-transition-duration: 0.2s;
     position: relative;
     width: 100%;
     outline: none;
-    font-family: Source Sans Pro, sans-serif;
+    font-family: 'Source Sans Pro', sans-serif;
     display: grid;
 
     &-container {
@@ -57,6 +57,7 @@ $hover-transition-duration: 0.2s;
       margin-bottom: 0.2rem;
       color: $treeselect-label-color;
       font-size: 0.875rem;
+      font-weight: 600;
       .cps-treeselect-label-info-circle {
         margin-left: 8px;
         pointer-events: all;

diff --git a/projects/cps-ui-kit/styles/_colors.scss → projects/cps-ui-kit/styles/colors.scss b/projects/cps-ui-kit/styles/_colors.scss → projects/cps-ui-kit/styles/colors.scss
diff --git a/projects/cps-ui-kit/styles/fonts.scss b/projects/cps-ui-kit/styles/fonts.scss
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url(../assets/fonts/SourceSansPro-Regular.ttf) format('truetype');
+}
diff --git a/projects/cps-ui-kit/styles/styles.scss b/projects/cps-ui-kit/styles/styles.scss
@@ -1,3 +1,4 @@
 @import 'bootstrap-grid';
 @import 'variables.scss';
+@import 'fonts.scss';
 @import 'cps-tooltip-style.scss';
diff --git a/projects/cps-ui-kit/styles/variables.scss b/projects/cps-ui-kit/styles/variables.scss
@@ -1 +1 @@
-@import '_colors.scss';
+@import 'colors.scss';