hrm_ui_lib 2.4.0 → 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--filled.badge--gray {
+.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--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--light.badge--gray {
+.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--blue {
+.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--light.badge--orange {
-  background-color: var(--ds-badge-primary-bg);
+.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--light.badge--red {
+.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--light.badge--green {
+.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-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-v2--stroke.badge-v2--orange {
+  border-color: var(--yellow-800);
+}
+
+.badge-v2--stroke.badge-v2--orange > .badge-v2__inner {
+  color: var(--yellow-800);
+}
+
+.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-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 {
@@ -4041,11 +4464,11 @@ body {
   --ds-controller-size:var(--ds-size-16);
   --ds-controller-font:var(--ds-font-weight-default) var(--ds-paragraph-std)/var(--ds-line-height-caption) var(--ds-font-family);
   --ds-controller-bg-default-light:var(--ds-color-bg-white);
-  --ds-controller-bg-default-dark:var(--ds-color-bg-grey-dark);
+  --ds-controller-bg-default-dark:var(--grey-200);
   --ds-controller-bg-hover-light:var(--ds-color-bg-container-lighter);
-  --ds-controller-bg-hover-dark:var(--ds-color-bg-grey);
+  --ds-controller-bg-hover-dark:var(--grey-300);
   --ds-controller-bg-pressed-light:var(--ds-color-bg-container-light);
-  --ds-controller-bg-pressed-dark:var(--ds-color-bg-grey-darker);
+  --ds-controller-bg-pressed-dark:var(--grey-400);
   --ds-controller-bg-focused:var(--ds-color-bg-container);
   --ds-controller-bg-disabled:var(--ds-color-bg-disabled);
   --ds-controller-selected-bg-default:var(--ds-color-bg-brand);
@@ -4055,12 +4478,11 @@ body {
   --ds-controller-selected-bg-disabled:var(--ds-color-bg-disabled);
   --ds-controller-mark-light:var(--ds-color-icon-inverse);
   --ds-controller-mark-dark:var(--ds-color-icon-disabled);
-  --ds-controller-border-color-default:var(--ds-color-border-primary);
   --ds-controller-border-color-focused:var(--grey-500);
   --ds-controller-border-color-disabled:var(--ds-color-border-disabled);
-  --ds-controller-border:var(--ds-border-thin) solid;
+  --ds-controller-border:var(--border-size-1) solid;
   --ds-controller-border-radius-sm:var(--ds-border-radius-xxs);
-  --ds-controller-border-radius-lg:var(--ds-border-radius-5xl);
+  --ds-controller-border-radius-lg:var(--border-radius-100);
   --ds-controller-label-padding:0 0 0 var(--ds-space-8);
   --ds-controller-icon-disabled:var(--ds-color-text-disabled);
   --ds-controller-helper-padding:var(--ds-space-2) 0 0 var(--ds-space-24);
@@ -4105,7 +4527,7 @@ body {
   -webkit-align-items: center;
   align-items: center;
   background-color: var(--ds-controller-bg-default-light);
-  border: var(--ds-controller-border) var(--ds-controller-border-color-default);
+  border: var(--border-size-1) solid var(--grey-200);
   border-radius: var(--ds-controller-border-radius-sm);
   display: -webkit-box;
   display: -moz-box;
@@ -4136,7 +4558,6 @@ body {
 }
 
 .controller input[type=checkbox] + .controller__icon .controller__mark, .controller input[type=radio] + .controller__icon .controller__mark {
-  opacity: 0;
   position: absolute;
   transition: opacity 0.3s linear;
 }
@@ -4173,8 +4594,8 @@ body {
 }
 
 .controller input[type=checkbox]:disabled + .controller__icon, .controller input[type=radio]:disabled + .controller__icon {
-  background-color: var(--ds-controller-bg-disabled);
-  border-color: var(--ds-controller-border-color-disabled);
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--disabled {
@@ -4240,16 +4661,20 @@ body {
 
 .controller--switch input[type=checkbox] + .controller__icon {
   background-color: var(--ds-controller-bg-default-dark);
-  border: 0;
   border-radius: var(--ds-controller-border-radius-lg);
   position: relative;
 }
 
 .controller--switch input[type=checkbox] + .controller__icon:hover {
   background-color: var(--ds-controller-bg-hover-dark);
+  border-color: var(--ds-controller-bg-hover-dark);
 }
 
-.controller--switch input[type=checkbox] + .controller__icon:active, .controller--switch input[type=checkbox] + .controller__icon:visited {
+.controller--switch input[type=checkbox] + .controller__icon:hover .controller__mark {
+  background-color: var(--ds-controller-bg-hover-dark);
+}
+
+.controller--switch input[type=checkbox] + .controller__icon:active, .controller--switch input[type=checkbox] + .controller__icon:active .controller__mark, .controller--switch input[type=checkbox] + .controller__icon:visited, .controller--switch input[type=checkbox] + .controller__icon:visited .controller__mark {
   background-color: var(--ds-controller-bg-pressed-dark);
 }
 
@@ -4276,15 +4701,23 @@ body {
   transition: transform 0.3s linear;
 }
 
+.controller--switch input[type=checkbox] + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
+  border-radius: var(--ds-controller-border-radius-lg);
+  height: var(--ds-size-8);
+  width: var(--ds-size-8);
+}
+
 .controller--switch input[type=checkbox]:checked + .controller__icon {
   background-color: var(--ds-controller-selected-bg-default);
+  border-color: var(--ds-controller-selected-bg-default);
 }
 
 .controller--switch input[type=checkbox]:checked + .controller__icon .controller__icon__inner {
   color: var(--ds-controller-selected-bg-default);
 }
 
-.controller--switch input[type=checkbox]:checked + .controller__icon:hover {
+.controller--switch input[type=checkbox]:checked + .controller__icon .controller__mark, .controller--switch input[type=checkbox]:checked + .controller__icon:hover {
   background-color: var(--ds-controller-selected-bg-hover);
 }
 
@@ -4292,6 +4725,10 @@ body {
   color: var(--ds-controller-selected-bg-hover);
 }
 
+.controller--switch input[type=checkbox]:checked + .controller__icon:hover .controller__mark {
+  background-color: var(--ds-controller-selected-bg-hover);
+}
+
 .controller--switch input[type=checkbox]:checked + .controller__icon:active, .controller--switch input[type=checkbox]:checked + .controller__icon:visited {
   background-color: var(--ds-controller-selected-bg-pressed);
 }
@@ -4300,17 +4737,30 @@ body {
   color: var(--ds-controller-selected-bg-pressed);
 }
 
+.controller--switch input[type=checkbox]:checked + .controller__icon:active .controller__mark, .controller--switch input[type=checkbox]:checked + .controller__icon:visited .controller__mark {
+  background-color: var(--ds-controller-selected-bg-pressed);
+}
+
 .controller--switch input[type=checkbox]:checked:disabled + .controller__icon {
-  background-color: var(--ds-controller-selected-bg-disabled);
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--switch input[type=checkbox]:checked:disabled + .controller__icon .controller__icon__inner {
   color: var(--ds-controller-mark-dark);
 }
 
-.controller--switch input[type=checkbox]:disabled .controller__icon {
-  background-color: var(--ds-controller-bg-disabled);
-  color: var(--ds-controller-icon-disabled);
+.controller--switch input[type=checkbox]:checked:disabled + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
+}
+
+.controller--switch input[type=checkbox]:disabled + .controller__icon {
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
+}
+
+.controller--switch input[type=checkbox]:disabled + .controller__icon .controller__icon__inner, .controller--switch input[type=checkbox]:disabled + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--switch-large input[type=checkbox] + .controller__icon {