@symphony-talent/component-library 3.88.0 → 3.89.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symphony-talent/component-library",
-  "version": "3.88.0",
+  "version": "3.89.0",
   "private": false,
   "peerDependencies": {
     "ag-grid-angular": "^24.0.0",

package/projects/component-library/global-assets/variables-v2.scss

@@ -0,0 +1,65 @@
+// Font
+$font-v2-reg: "runda", sans-serif;
+$font-v2-300: 300;
+$font-v2-500: 500;
+$font-v2-600: 600;
+$font-v2-700: 700;
+// Font size
+$font-v2-12: 0.75rem;
+$font-v2-14: 0.875rem;
+$font-v2-18: 1.125rem;
+$font-v2-24: 1.5rem;
+$font-v2-32: 2rem;
+$font-v2-48: 3rem;
+$font-v2-56: 3.5rem;
+// old-variables
+$font-12: 0.75rem;
+$font-14: 0.875rem;
+$font-18: 1.125rem;
+$font-24: 1.5rem;
+$font-30: 1.875rem;
+$font-40: 2.5rem;
+$font-46: 2.875rem;
+$font-56: 3.5rem;
+// end old variables
+// Line height
+$line-height-v2-16: 1rem;
+$line-height-v2-20: 1.25rem;
+$line-height-v2-24: 1.5rem;
+$line-height-v2-30: 1.875rem;
+$line-height-v2-38: 2.375rem;
+$line-height-v2-52: 3.25rem;
+$line-height-v2-60: 3.75rem;
+// Color Primary
+$color-v2-slate-1: #08203E;
+$color-v2-slate-2: #334860;
+$color-v2-slate-3: #5B6D80;
+$color-v2-slate-4: #82919F;
+$color-v2-gray-1: #C3CBDC;
+$color-v2-gray-2: #D2D8E5;
+$color-v2-gray-3: #E4E7EF;
+$color-v2-gray-4: #F1F2F5;
+$color-v2-purple-1: #712ACE;
+$color-v2-purple-2: #814DFF;
+$color-v2-purple-3: #9D79FF;
+$color-v2-purple-4: #C5AEFF;
+$color-v2-mdm-blue: #2B8FF3;
+$color-v2-aqua: #48DEDA;
+// Secondary-color
+$color-v2-lemon-1: #D7DF23;
+$color-v2-lemon-2: #EAE851;
+$color-v2-orange-1: #F6861F;
+$color-v2-orange-2: #FAA83D;
+$color-v2-red-1: #AC4463;
+$color-v2-red-2: #BD6F80;
+$color-v2-green-1: #2CB45F;
+$color-v2-green-2: #82C676;
+// Override
+%sfx-filter-label {
+    font-size: $font-v2-14;
+    font-family: $font-v2-reg;
+    font-weight: 500;
+    margin-bottom: $space-5;
+    padding-left: $space-5;
+    line-height: $space-20;
+}

package/projects/component-library/global.scss

@@ -1,6 +1,9 @@
 :root {
   font-size: 16px;
 }
+@import url('https://use.typekit.net/krt0kxk.css');
+@import "global-assets/spacing.scss";
+@import "global-assets/variables-v2.scss";
 // Color Palette
 $color-white: #ffffff;
 $color-black: #000000;
@@ -44,88 +47,27 @@ $color-scroll-thumb: #d4d4d4;
 }
 // End Custom Scroll
 // Typography
-@font-face {
-  font-family: "neuzeit_groteskregular";
-  src: url("global-assets/fonts/neuzeitgro-reg-webfont.woff2") format("woff2"),
-    url("global-assets/fonts/neuzeitgro-reg-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "neuzeit_grotesklight";
-  src: url("global-assets/fonts/neuzeitgro-lig-webfont.woff2") format("woff2"),
-    url("global-assets/fonts/neuzeitgro-lig-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "neuzeit_groteskbold";
-  src: url("global-assets/fonts/neuzeitgro-bol-webfont.woff2") format("woff2"),
-    url("global-assets/fonts/neuzeitgro-bol-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "neuzeit_groteskblack";
-  src: url("global-assets/fonts/neuzeitgro-bla-webfont.woff2") format("woff2"),
-    url("global-assets/fonts/neuzeitgro-bla-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "neuzeit_grotesk_t_otBlkCn";
-  src: url("global-assets/fonts/neuzeit-grotesk-t-ot-black-condensed_32179-webfont.woff2")
-      format("woff2"),
-    url("global-assets/fonts/neuzeit-grotesk-t-ot-black-condensed_32179-webfont.woff")
-      format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "neuzeit_grotesk_t_otBlkXCn";
-  src: url("global-assets/fonts/neuzeit-grotesk-t-ot-black-extra-condensed_32180-webfont.woff2")
-      format("woff2"),
-    url("global-assets/fonts/neuzeit-grotesk-t-ot-black-extra-condensed_32180-webfont.woff")
-      format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-$font-12: 0.75rem;
-$font-14: 0.875rem;
-$font-18: 1.125rem;
-$font-24: 1.5rem;
-$font-30: 1.875rem;
-$font-40: 2.5rem;
-$font-46: 2.875rem;
-$font-56: 3.5rem;
-$font-reg: "neuzeit_groteskregular", sans-serif;
-$font-light: "neuzeit_grotesklight", sans-serif;
-$font-bold: "neuzeit_groteskbold", sans-serif;
-$font-black: "neuzeit_groteskblack", sans-serif;
-$font-cond-black: "neuzeit_grotesk_t_otBlkCn", sans-serif;
 $font-sfxicon: "sfxicons", sans-serif;
 
 // Iconography
 @import "global-assets/iconography/library-icons.css";
 // End Iconography
 // Spacing
-
-@import "global-assets/spacing.scss";
 @import "node_modules/ag-grid-community/src/styles/ag-grid.scss";
 @import "node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss";
 .ag-theme-alpine {
   @include ag-theme-alpine();
 }
 body {
-  font-family: $font-reg !important;
+  font-family: $font-v2-reg !important;
   overflow-x: hidden;
   background: $color-white;
   color: $color-black;
   .sfx {
     @extend %sfx-custom-scroll;
     a {
-      font-size: $font-14;
-      color: $color-st-link;
+      font-size: $font-v2-14;
+      color: $color-v2-purple-1;
       text-decoration: none;
       &:hover {
         -webkit-transition: 0.3s ease-in-out;
@@ -136,28 +78,38 @@ body {
       }
     }
     p {
-      font-size: $font-14;
-      font-family: $font-reg;
-    }
-    h5 {
-      font-size: $font-14;
-      font-family: $font-bold;
-    }
-    h4 {
-      font-size: $font-24;
-      font-family: $font-bold;
+      font-size: $font-v2-14;
+      font-family: $font-v2-reg!important;
+  }
+
+  h5 {
+      font-size: $font-18;
+      font-weight: $font-v2-500;
+  }
+
+  h4 {
+      font-size: $font-v2-24;
+      font-family: $font-v2-reg;
+      font-weight: $font-v2-300;
+      line-height: $line-height-v2-30;
     }
     h3 {
-      font-size: $font-30;
-      font-family: $font-bold;
+      font-size: $font-v2-32;
+      font-family: $font-v2-reg;
+      font-weight: $font-v2-300;
+      line-height: $line-height-v2-38;
     }
     h2 {
-      font-size: $font-46;
-      font-family: $font-black;
+      font-size: $font-v2-48;
+      font-family: $font-v2-reg;
+      font-weight: $font-v2-300;
+      line-height: $line-height-v2-52;
     }
     h1 {
-      font-size: $font-56;
-      font-family: $font-black;
+      font-size: $font-v2-56;
+      font-family: $font-v2-reg;
+      font-weight: $font-v2-300;
+      line-height: $line-height-v2-60;
     }
     // End Typography
     // Utilities
@@ -196,13 +148,13 @@ body {
       font-weight: 600;
     }
     .sfx-font-light {
-      font-family: $font-light;
+      font-family: $font-v2-300;
     }
     .sfx-font-bold {
-      font-family: $font-bold;
+      font-family: $font-v2-500;
     }
     .sfx-font-black {
-      font-family: $font-black;
+      font-family: $font-v2-700;
     }
     // End Fonts
     // Color
@@ -393,7 +345,7 @@ body {
       }
     }
   }
-  font-family: $font-reg;
+  font-family: $font-v2-reg;
   .ag-root-wrapper {
     border-color: $color-white;
     border-radius: 0px;
@@ -404,7 +356,7 @@ body {
   // Grid Header
   .ag-header {
     font-size: $font-14;
-    font-family: $font-bold;
+    font-weight: $font-v2-500;
     background-color: $color-white;
     border-color: $color-light-gray2;
     .ag-header-cell-text {
@@ -484,7 +436,7 @@ body {
   .ag-row {
     z-index: 1;
     .ag-row div:first-child {
-      font-family: "neuzeit_groteskbold";
+      font-weight: $font-v2-500;
     }
     .ag-cell {
       .more-options {
@@ -508,6 +460,29 @@ body {
         .dropdown-menu::before {
           top: -24px;
         }
+        .btn-group{
+          button {
+            &.dropdown-toggle{
+              &.btn {
+                color: $color-v2-slate-2;
+                &:hover {
+                  background: $color-v2-gray-4;
+                  color: $color-v2-slate-2 !important;
+                }
+              }
+            }
+          }
+          &.open {
+            button {
+              &.dropdown-toggle{
+                &.btn {
+                  background: $color-v2-gray-4;
+                  color: $color-v2-slate-2;
+                }
+              }
+            }
+          }
+        }
       }
       .sfx-icon-show-password {
         display: inline-block;
@@ -606,7 +581,7 @@ body {
 .notification-text {
   .hasBold {
     b {
-      font-family: $font-bold;
+      font-weight: $font-v2-500;
     }
   }
 }