hrm_ui_lib 2.4.1 → 2.4.2

package/assets/styles/styles.css

@@ -2905,18 +2905,6 @@ body {
   background-color: var(--ds-avatar-group-add-bg-hover);
 }
 
-.badge--primary {
-  background-color: var(--ds-badge-primary-bg);
-}
-
-.badge--secondary {
-  background-color: var(--ds-badge-secondary-bg);
-}
-
-.badge--tertiary {
-  background-color: var(--ds-badge-tertiary-bg);
-}
-
 .badge {
   --ds-badge-primary-bg:var(--pink-500);
   --ds-badge-secondary-bg:var(--grey-50);
@@ -2943,76 +2931,511 @@ body {
   font: var(--ds-badge-font);
 }
 
-.badge--filled, .badge--filled p {
-  color: var(--white);
+.badge--primary {
+  background-color: var(--ds-badge-primary-bg);
+}
+
+.badge--secondary {
+  background-color: var(--ds-badge-secondary-bg);
+}
+
+.badge--tertiary {
+  background-color: var(--ds-badge-tertiary-bg);
+}
+
+.badge--large {
+  padding: var(--ds-badge-padding-lg);
+}
+
+.badge--large .badge__inner {
+  padding: var(--ds-badge-inner-padding-lg);
 }
 
-.badge--filled.badge--gray {
+.badge--small {
+  padding: var(--ds-badge-padding-sm);
+}
+
+.badge--small .badge__inner {
+  padding: var(--ds-badge-inner-padding-sm);
+}
+
+.badge-v2 {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  border-radius: var(--ds-border-radius-4xl);
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  gap: var(--ds-size-2);
+}
+
+.badge-v2__inner {
+  font: var(--ds-font-weight-default) var(--ds-paragraph-xs)/0.8 var(--ds-font-family);
+}
+
+.badge-v2--filled, .badge-v2--filled > .badge-v2__inner {
+  color: var(--grey-0);
+}
+
+.badge-v2--filled.badge-v2--gray {
   background-color: var(--grey-400);
 }
 
-.badge--filled.badge--blue {
+.badge-v2--filled.badge-v2--blue {
   background-color: var(--blue-800);
 }
 
-.badge--filled.badge--orange {
-  background-color: var(--yellow-900);
+.badge-v2--filled.badge-v2--orange {
+  background-color: var(--yellow-800);
 }
 
-.badge--filled.badge--red {
+.badge-v2--filled.badge-v2--red {
   background-color: var(--red-500);
 }
 
-.badge--filled.badge--green {
+.badge-v2--filled.badge-v2--green {
   background-color: var(--brand-500);
 }
 
-.badge--filled.badge--empty, .badge--filled.badge--pink, .badge--filled.badge--purple, .badge--filled.badge--sky, .badge--filled.badge--teal, .badge--filled.badge--yellow {
-  background-color: var(--ds-badge-primary-bg);
+.badge-v2--filled.badge-v2--yellow {
+  background-color: var(--yellow-500);
 }
 
-.badge--light, .badge--light p {
-  color: var(--grey-900);
+.badge-v2--filled.badge-v2--purple {
+  background-color: var(--purple-400);
+}
+
+.badge-v2--filled.badge-v2--sky {
+  background-color: var(--blue-500);
+}
+
+.badge-v2--filled.badge-v2--pink {
+  background-color: var(--pink-200);
+}
+
+.badge-v2--filled.badge-v2--teal {
+  background-color: var(--green-500);
+}
+
+.badge-v2--filled.badge-v2--with-dot {
+  background: var(--grey-0);
+}
+
+.badge-v2--light, .badge-v2--light > .badge-v2__inner {
+  color: var(--grey-800);
+}
+
+.badge-v2--light.badge-v2--gray {
+  background-color: var(--grey-200);
+}
+
+.badge-v2--light.badge-v2--gray .badge-v2--with-dot {
+  background-color: var(--grey-800);
+}
+
+.badge-v2--light.badge-v2--blue {
+  background-color: var(--blue-100);
+}
+
+.badge-v2--light.badge-v2--blue .badge-v2--with-dot {
+  background-color: var(--grey-800);
+}
+
+.badge-v2--light.badge-v2--orange {
+  background-color: var(--yellow-400);
+}
+
+.badge-v2--light.badge-v2--orange .badge-v2--with-dot {
+  background-color: var(--grey-800);
+}
+
+.badge-v2--light.badge-v2--red {
+  background-color: var(--red-200);
+}
+
+.badge-v2--light.badge-v2--red > .badge-v2__inner {
+  color: var(--red-900);
+}
+
+.badge-v2--light.badge-v2--red .badge-v2--with-dot {
+  background-color: var(--red-900);
+}
+
+.badge-v2--light.badge-v2--green {
+  background-color: var(--brand-20);
+}
+
+.badge-v2--light.badge-v2--green > .badge-v2__inner {
+  color: var(--brand-800);
+}
+
+.badge-v2--light.badge-v2--green .badge-v2--with-dot {
+  background-color: var(--brand-800);
+}
+
+.badge-v2--light.badge-v2--yellow {
+  background-color: var(--yellow-100);
+}
+
+.badge-v2--light.badge-v2--yellow > .badge-v2__inner {
+  color: var(--yellow-900);
+}
+
+.badge-v2--light.badge-v2--yellow .badge-v2--with-dot {
+  background-color: var(--yellow-900);
+}
+
+.badge-v2--light.badge-v2--purple {
+  background-color: var(--purple-100);
+}
+
+.badge-v2--light.badge-v2--purple > .badge-v2__inner {
+  color: var(--purple-900);
+}
+
+.badge-v2--light.badge-v2--purple .badge-v2--with-dot {
+  background-color: var(--purple-900);
+}
+
+.badge-v2--light.badge-v2--sky {
+  background-color: var(--blue-100);
+}
+
+.badge-v2--light.badge-v2--sky > .badge-v2__inner {
+  color: var(--blue-900);
+}
+
+.badge-v2--light.badge-v2--sky .badge-v2--with-dot {
+  background-color: var(--blue-900);
+}
+
+.badge-v2--light.badge-v2--pink {
+  background-color: var(--pink-100);
+}
+
+.badge-v2--light.badge-v2--pink > .badge-v2__inner {
+  color: var(--pink-900);
+}
+
+.badge-v2--light.badge-v2--pink .badge-v2--with-dot {
+  background-color: var(--pink-900);
+}
+
+.badge-v2--light.badge-v2--teal {
+  background-color: var(--green-100);
+}
+
+.badge-v2--light.badge-v2--teal > .badge-v2__inner {
+  color: var(--green-900);
+}
+
+.badge-v2--light.badge-v2--teal .badge-v2--with-dot {
+  background-color: var(--green-900);
+}
+
+.badge-v2--lighter, > .badge-v2--lighter.badge-v2__inner {
+  color: var(--grey-400);
+}
+
+.badge-v2--lighter.badge-v2--gray {
+  background-color: var(--grey-100);
+}
+
+.badge-v2--lighter.badge-v2--gray .badge-v2--with-dot {
+  background-color: var(--grey-400);
 }
 
-.badge--light.badge--gray {
+.badge-v2--lighter.badge-v2--blue {
+  background-color: var(--blue-50);
+}
+
+.badge-v2--lighter.badge-v2--blue > .badge-v2__inner {
+  color: var(--blue-800);
+}
+
+.badge-v2--lighter.badge-v2--blue .badge-v2--with-dot {
+  background-color: var(--blue-800);
+}
+
+.badge-v2--lighter.badge-v2--orange {
+  background-color: var(--yellow-50);
+}
+
+.badge-v2--lighter.badge-v2--orange > .badge-v2__inner {
+  color: var(--yellow-800);
+}
+
+.badge-v2--lighter.badge-v2--orange .badge-v2--with-dot {
+  background-color: var(--yellow-800);
+}
+
+.badge-v2--lighter.badge-v2--red {
+  background-color: var(--red-20);
+}
+
+.badge-v2--lighter.badge-v2--red > .badge-v2__inner {
+  color: var(--red-500);
+}
+
+.badge-v2--lighter.badge-v2--red .badge-v2--with-dot {
+  background-color: var(--red-500);
+}
+
+.badge-v2--lighter.badge-v2--green {
+  background-color: var(--green-50);
+}
+
+.badge-v2--lighter.badge-v2--green > .badge-v2__inner {
+  color: var(--brand-600);
+}
+
+.badge-v2--lighter.badge-v2--green .badge-v2--with-dot {
+  background-color: var(--brand-600);
+}
+
+.badge-v2--lighter.badge-v2--yellow {
+  background-color: var(--yellow-50);
+}
+
+.badge-v2--lighter.badge-v2--yellow > .badge-v2__inner {
+  color: var(--yellow-600);
+}
+
+.badge-v2--lighter.badge-v2--yellow .badge-v2--with-dot {
+  background-color: var(--yellow-600);
+}
+
+.badge-v2--lighter.badge-v2--purple {
+  background-color: var(--purple-50);
+}
+
+.badge-v2--lighter.badge-v2--purple > .badge-v2__inner {
+  color: var(--purple-400);
+}
+
+.badge-v2--lighter.badge-v2--purple .badge-v2--with-dot {
+  background-color: var(--purple-400);
+}
+
+.badge-v2--lighter.badge-v2--sky {
+  background-color: var(--blue-50);
+}
+
+.badge-v2--lighter.badge-v2--sky > .badge-v2__inner {
+  color: var(--blue-500);
+}
+
+.badge-v2--lighter.badge-v2--sky .badge-v2--with-dot {
+  background-color: var(--blue-500);
+}
+
+.badge-v2--lighter.badge-v2--pink {
+  background-color: var(--pink-50);
+}
+
+.badge-v2--lighter.badge-v2--pink > .badge-v2__inner {
+  color: var(--pink-300);
+}
+
+.badge-v2--lighter.badge-v2--pink .badge-v2--with-dot {
+  background-color: var(--pink-300);
+}
+
+.badge-v2--lighter.badge-v2--teal {
+  background-color: var(--green-50);
+}
+
+.badge-v2--lighter.badge-v2--teal > .badge-v2__inner {
+  color: var(--green-500);
+}
+
+.badge-v2--lighter.badge-v2--teal .badge-v2--with-dot {
+  background-color: var(--green-500);
+}
+
+.badge-v2--stroke {
+  background-color: var(--grey-0);
+  border: 1px solid var(--grey-400);
+}
+
+.badge-v2--stroke, > .badge-v2--stroke.badge-v2__inner {
+  color: var(--grey-400);
+}
+
+.badge-v2--stroke.badge-v2--gray {
+  background-color: var(--grey-0);
+}
+
+.badge-v2--stroke.badge-v2--gray .badge-v2--with-dot {
   background-color: var(--grey-400);
 }
 
-.badge--light.badge--blue {
+.badge-v2--stroke.badge-v2--blue {
+  border-color: var(--blue-600);
+}
+
+.badge-v2--stroke.badge-v2--blue > .badge-v2__inner {
+  color: var(--blue-800);
+}
+
+.badge-v2--stroke.badge-v2--blue .badge-v2--with-dot {
   background-color: var(--blue-800);
 }
 
-.badge--light.badge--orange {
-  background-color: var(--ds-badge-primary-bg);
+.badge-v2--stroke.badge-v2--orange {
+  border-color: var(--yellow-800);
+}
+
+.badge-v2--stroke.badge-v2--orange > .badge-v2__inner {
+  color: var(--yellow-800);
 }
 
-.badge--light.badge--red {
+.badge-v2--stroke.badge-v2--orange .badge-v2--with-dot {
+  background-color: var(--yellow-800);
+}
+
+.badge-v2--stroke.badge-v2--red {
+  border-color: var(--red-500);
+}
+
+.badge-v2--stroke.badge-v2--red > .badge-v2__inner {
+  color: var(--red-500);
+}
+
+.badge-v2--stroke.badge-v2--red .badge-v2--with-dot {
   background-color: var(--red-500);
 }
 
-.badge--light.badge--green {
+.badge-v2--stroke.badge-v2--green {
+  border-color: var(--brand-500);
+}
+
+.badge-v2--stroke.badge-v2--green > .badge-v2__inner {
+  color: var(--brand-500);
+}
+
+.badge-v2--stroke.badge-v2--green .badge-v2--with-dot {
   background-color: var(--brand-500);
 }
 
-.badge--light.badge--empty, .badge--light.badge--pink, .badge--light.badge--purple, .badge--light.badge--sky, .badge--light.badge--teal, .badge--light.badge--yellow {
-  background-color: var(--ds-badge-primary-bg);
+.badge-v2--stroke.badge-v2--yellow {
+  border-color: var(--yellow-500);
 }
 
-.badge--large {
-  padding: var(--ds-badge-padding-lg);
+.badge-v2--stroke.badge-v2--yellow > .badge-v2__inner {
+  color: var(--yellow-500);
 }
 
-.badge--large .badge__inner {
-  padding: var(--ds-badge-inner-padding-lg);
+.badge-v2--stroke.badge-v2--yellow .badge-v2--with-dot {
+  background-color: var(--yellow-500);
 }
 
-.badge--small {
-  padding: var(--ds-badge-padding-sm);
+.badge-v2--stroke.badge-v2--purple {
+  border-color: var(--purple-400);
 }
 
-.badge--small .badge__inner {
-  padding: var(--ds-badge-inner-padding-sm);
+.badge-v2--stroke.badge-v2--purple > .badge-v2__inner {
+  color: var(--purple-400);
+}
+
+.badge-v2--stroke.badge-v2--purple .badge-v2--with-dot {
+  background-color: var(--purple-400);
+}
+
+.badge-v2--stroke.badge-v2--sky {
+  border-color: var(--blue-50);
+}
+
+.badge-v2--stroke.badge-v2--sky > .badge-v2__inner {
+  color: var(--blue-500);
+}
+
+.badge-v2--stroke.badge-v2--sky .badge-v2--with-dot {
+  background-color: var(--blue-500);
+}
+
+.badge-v2--stroke.badge-v2--pink {
+  border-color: var(--pink-200);
+}
+
+.badge-v2--stroke.badge-v2--pink > .badge-v2__inner {
+  color: var(--pink-200);
+}
+
+.badge-v2--stroke.badge-v2--pink .badge-v2--with-dot {
+  background-color: var(--pink-200);
+}
+
+.badge-v2--stroke.badge-v2--teal {
+  border-color: var(--green-500);
+}
+
+.badge-v2--stroke.badge-v2--teal > .badge-v2__inner {
+  color: var(--green-500);
+}
+
+.badge-v2--stroke.badge-v2--teal .badge-v2--with-dot {
+  background-color: var(--green-500);
+}
+
+.badge-v2--large {
+  height: var(--ds-size-20);
+  padding: var(--ds-size-2) var(--ds-size-8);
+}
+
+.badge-v2--large .badge-v2__inner {
+  padding: 0 var(--ds-space-2);
+}
+
+.badge-v2--large.badge-v2--dot {
+  height: var(--ds-size-12);
+  width: var(--ds-size-12);
+}
+
+.badge-v2--large.badge-v2--with-dot {
+  height: var(--ds-size-6);
+  width: var(--ds-size-6);
+}
+
+.badge-v2--small {
+  height: var(--ds-size-16);
+  padding: var(--ds-size-2) var(--ds-size-8);
+}
+
+.badge-v2--small .badge-v2__inner {
+  padding: 0 var(--ds-space-4);
+}
+
+.badge-v2--small.badge-v2--dot {
+  height: var(--ds-size-8);
+  width: var(--ds-size-8);
+}
+
+.badge-v2--small.badge-v2--with-dot {
+  height: var(--ds-size-6);
+  width: var(--ds-size-6);
+}
+
+.badge-v2--dot {
+  border-radius: 50%;
+  padding: 0;
+}
+
+.badge-v2.badge-v2--disabled {
+  background-color: var(--grey-0);
+  border: 1px solid var(--grey-200);
+}
+
+.badge-v2.badge-v2--disabled > .badge-v2__inner {
+  color: var(--grey-200);
+}
+
+.badge-v2.badge-v2--disabled.badge-v2--with-dot {
+  background-color: var(--grey-300);
 }
 
 .breadcrumb {