@turquoisehealth/pit-viper 2.26.1 → 2.28.0

package/_site/assets/css/pit-viper-v2.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* toggle color styles should align with secondary and tertiary buttons */
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900");
 :root {
@@ -384,12 +385,17 @@
 }
 .pv-kbd {
   display: inline-block;
-  font-size: 0.6875rem;
-  color: #4B595C;
-  border: 1px solid #E3E7EA;
-  border-radius: 4px;
-  padding: 2px 4px;
-  background-color: #FFFFFF;
+  font-size: var(--kbd-font-size, 0.6875rem);
+  line-height: var(--kbd-line-height, 1rem);
+  font-weight: var(--kbd-font-weight, 500);
+  color: var(--kbd-color, #89989B);
+  border: var(--kbd-border, 1px solid transparent);
+  border-radius: var(--kbd-radius, 4px);
+  padding: var(--kbd-padding, 0 0.25rem);
+  background-color: var(--kbd-background-color, #FFFFFF);
+  min-width: var(--kbd-width, 1rem);
+  max-height: var(--kbd-width, 1rem);
+  box-shadow: 0px 4px 6px 0px rgba(45, 46, 47, 0.05), 0px 0.5px 1.5px 0px rgba(45, 47, 47, 0.15);
 }
 
 .pv-link-external {
@@ -922,7 +928,7 @@
 .pv-select,
 .pv-select-multiple {
   color: #121313;
-  padding: var(--text-input-padding, 0.5rem 0.75rem);
+  padding: var(--text-input-padding, calc(0.5rem - 1px) 0.75rem);
   font-size: var(--text-input-font-size, 0.75rem);
   line-height: var(--text-input-line-height, 1.33333333);
   border: var(--text-input-border-width, 1px) solid var(--text-input-border-color, #E3E7EA);
@@ -1084,24 +1090,10 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   transition-duration: 0.125s;
   transition-property: color;
 }
-.pv-checkbox:not(:disabled):hover:before, .pv-checkbox:not(:disabled):focus-visible:before,
-.pv-radio:not(:disabled):hover:before,
-.pv-radio:not(:disabled):focus-visible:before {
-  content: "";
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  background-color: var(--checkbox-hover-before-background-color, #F7F8F8);
-  position: absolute;
-  top: -6px;
-  left: -6px;
-  z-index: -1;
-}
 .pv-checkbox:not(:disabled):focus-visible, .pv-checkbox:not(:disabled):hover,
 .pv-radio:not(:disabled):focus-visible,
 .pv-radio:not(:disabled):hover {
-  background-color: var(--checkbox-hover-background-color, transparent);
+  background-color: var(--checkbox-hover-background-color, #F7F8F8);
   border-color: var(--checkbox-hover-border-color, #D2D8DC);
   cursor: pointer;
   outline-color: var(--checkbox-hover-outline-color, transparent);
@@ -1111,8 +1103,8 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 .pv-radio:not(:disabled):focus-visible:indeterminate,
 .pv-radio:not(:disabled):hover:checked,
 .pv-radio:not(:disabled):hover:indeterminate {
-  border-color: var(--checkbox-checked-hover-border-color, #16696D);
-  background-color: var(--checkbox-checked-hover-background-color, #16696D);
+  border-color: var(--checkbox-checked-hover-border-color, #0D5256);
+  background-color: var(--checkbox-checked-hover-background-color, #0D5256);
 }
 .pv-checkbox:not(:disabled):focus-visible:checked:before, .pv-checkbox:not(:disabled):focus-visible:indeterminate:before, .pv-checkbox:not(:disabled):hover:checked:before, .pv-checkbox:not(:disabled):hover:indeterminate:before,
 .pv-radio:not(:disabled):focus-visible:checked:before,
@@ -1121,6 +1113,15 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 .pv-radio:not(:disabled):hover:indeterminate:before {
   background-color: var(--checkbox-checked-hover-before-background-color, #E4F8F6);
 }
+.pv-checkbox:not(:disabled):active,
+.pv-radio:not(:disabled):active {
+  background-color: var(--checkbox-pressed-background-color, #C7D8DB);
+}
+.pv-checkbox:not(:disabled):active:checked, .pv-checkbox:not(:disabled):active:indeterminate,
+.pv-radio:not(:disabled):active:checked,
+.pv-radio:not(:disabled):active:indeterminate {
+  background-color: var(--checkbox-checked-pressed-background-color, #02363D);
+}
 .pv-checkbox:checked, .pv-checkbox:indeterminate,
 .pv-radio:checked,
 .pv-radio:indeterminate {
@@ -1174,7 +1175,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   background-color: var(--radio-checked-background-color, transparent);
 }
 .pv-radio:checked:not(:disabled):hover, .pv-radio:checked:not(:disabled):focus-visible {
-  background-color: var(--radio-checked-hover-background-color, transparent);
+  background-color: var(--radio-checked-hover-background-color, #F7F8F8);
 }
 .pv-radio:checked:after {
   content: "";
@@ -1196,11 +1197,11 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 }
 
 .pv-input-padded-end {
-  padding-inline-end: 2.25rem;
+  padding-inline-end: 2rem;
 }
-.pv-input-padded-end + button {
+.pv-input-padded-end + * {
   position: absolute;
-  right: 0.5rem;
+  right: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
 }
@@ -1404,7 +1405,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 }
 
 .pv-input-small {
-  padding: 0.25rem 0.5rem;
+  padding: var(--text-input-small-padding, calc(0.25rem - 1px) 0.5rem);
 }
 .pv-input-small.pv-select-multiple, .pv-input-small.pv-select {
   padding-inline-end: 2rem;
@@ -3026,6 +3027,10 @@ button.pv-tag-secondary:active {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 15.3h8.8c.7 0 1-.7.6-1.2L12.6 9c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1s-.2.1-.3.1c-.1.1-.2.1-.3.2l-4.3 5.1c-.5.4-.1 1.2.5 1.2z' fill='%2302363D'/%3E%3C/svg%3E");
 }
 
+pv-dropdown-auto-close.pv-dropdown > [class*=pv-button] {
+  background-image: none;
+}
+
 .pv-pagination {
   display: flex;
   justify-content: center;
@@ -5343,3 +5348,70 @@ svg.pv-text-inherit {
   display: block;
   padding: 6px;
 }
+
+:root {
+  --p-datepicker-today-background: #F7F8F8;
+  --p-datepicker-date-border-radius: 4px;
+  --p-datepicker-date-padding: 1px;
+  --p-datepicker-date-selected-background: #16696D;
+  --p-datepicker-date-hover-background: #E8F2F4;
+  --p-datepicker-date-color: #4B595C;
+  --p-button-text-secondary-hover-background: #E8F2F4;
+  --p-button-text-secondary-color: #4B595C;
+  --p-button-text-secondary-active-background: #C7D8DB;
+  --p-inputtext-color: #4B595C;
+  --p-inputtext-border-color: #E3E7EA;
+  --p-inputtext-hover-border-color: #D2D8DC;
+  --p-inputtext-disabled-background: #ECECEC;
+  --p-inputtext-disabled-color: #7D898D;
+  --p-inputtext-focus-border-color: #36C5BA;
+  --p-inputtext-focus-ring-offset: 2px;
+  --p-inputtext-focus-ring-color: #36C5BA;
+  --p-inputtext-focus-ring-width: 2px;
+  --p-inputtext-focus-ring-style: solid;
+}
+
+.p-datepicker-input {
+  font-size: var(--datepicker-text-size, 0.6875rem);
+  line-height: var(--datepicker-line-height, 1.45454545);
+  letter-spacing: 0.12px;
+  padding: calc(0.5rem - 1px) 0.5rem;
+}
+
+.p-datepicker-year, .p-datepicker-month {
+  font-size: 0.75rem;
+}
+
+.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
+  padding-inline: 2rem 0.5rem;
+}
+
+.p-datepicker-input-icon-container {
+  left: 0px;
+  top: 0px;
+  padding: 0.5rem 0.5rem 0.5rem calc(0.5rem + 1px);
+  width: 2rem;
+  color: #4B595C;
+}
+
+.p-datepicker-calendar-container .p-datepicker-header .p-button {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0.25rem;
+  border-radius: 4px;
+}
+.p-datepicker-calendar-container .p-datepicker-select-month, .p-datepicker-calendar-container .p-datepicker-select-year, .p-datepicker-calendar-container .p-datepicker-weekday, .p-datepicker-calendar-container .p-datepicker-day, .p-datepicker-calendar-container .p-datepicker-decade {
+  font-size: 0.75rem;
+}
+.p-datepicker-calendar-container .p-datepicker-day-selected:hover, .p-datepicker-calendar-container .p-datepicker-day-selected:focus-visible {
+  background-color: #0D5256;
+}
+.p-datepicker-calendar-container .p-datepicker-day-selected:active {
+  background-color: #02363D;
+}
+.p-datepicker-calendar-container .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):active {
+  background-color: #C7D8DB;
+}
+.p-datepicker-calendar-container .p-icon {
+  height: 0.75rem;
+}

package/_site/assets/css/pit-viper.css

@@ -402,12 +402,17 @@
 }
 .pv-kbd {
   display: inline-block;
-  font-size: 0.75rem;
-  color: #6E7784;
-  border: 1px solid #DCDFE4;
-  border-radius: 5px;
-  padding: 2px 4px;
-  background-color: #FFFFFF;
+  font-size: var(--kbd-font-size, 0.75rem);
+  line-height: var(--kbd-line-height, inherit);
+  font-weight: var(--kbd-font-weight, inherit);
+  color: var(--kbd-color, #6E7784);
+  border: var(--kbd-border, 1px solid #DCDFE4);
+  border-radius: var(--kbd-radius, 5px);
+  padding: var(--kbd-padding, 2px 4px);
+  background-color: var(--kbd-background-color, #FFFFFF);
+  min-width: var(--kbd-width, none);
+  max-height: var(--kbd-width, none);
+  box-shadow: 0px 4px 6px 0px rgba(45, 46, 47, 0.05), 0px 0.5px 1.5px 0px rgba(45, 47, 47, 0.15);
 }
 
 .pv-link-external {
@@ -1102,20 +1107,6 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   transition-duration: 0.125s;
   transition-property: color;
 }
-.pv-checkbox:not(:disabled):hover:before, .pv-checkbox:not(:disabled):focus-visible:before,
-.pv-radio:not(:disabled):hover:before,
-.pv-radio:not(:disabled):focus-visible:before {
-  content: "";
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  background-color: var(--checkbox-hover-before-background-color, transparent);
-  position: absolute;
-  top: -6px;
-  left: -6px;
-  z-index: -1;
-}
 .pv-checkbox:not(:disabled):focus-visible, .pv-checkbox:not(:disabled):hover,
 .pv-radio:not(:disabled):focus-visible,
 .pv-radio:not(:disabled):hover {
@@ -1139,6 +1130,15 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 .pv-radio:not(:disabled):hover:indeterminate:before {
   background-color: var(--checkbox-checked-hover-before-background-color, transparent);
 }
+.pv-checkbox:not(:disabled):active,
+.pv-radio:not(:disabled):active {
+  background-color: var(--checkbox-pressed-background-color, #F3F4F6);
+}
+.pv-checkbox:not(:disabled):active:checked, .pv-checkbox:not(:disabled):active:indeterminate,
+.pv-radio:not(:disabled):active:checked,
+.pv-radio:not(:disabled):active:indeterminate {
+  background-color: var(--checkbox-checked-pressed-background-color, #176F6F);
+}
 .pv-checkbox:checked, .pv-checkbox:indeterminate,
 .pv-radio:checked,
 .pv-radio:indeterminate {
@@ -1214,11 +1214,11 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 }
 
 .pv-input-padded-end {
-  padding-inline-end: 2.25rem;
+  padding-inline-end: 2rem;
 }
-.pv-input-padded-end + button {
+.pv-input-padded-end + * {
   position: absolute;
-  right: 0.5rem;
+  right: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
 }
@@ -1422,7 +1422,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 }
 
 .pv-input-small {
-  padding: 0.25rem 0.5rem;
+  padding: var(--text-input-small-padding, 0.25rem 0.5rem);
 }
 .pv-input-small.pv-select-multiple, .pv-input-small.pv-select {
   padding-inline-end: 2rem;
@@ -3044,6 +3044,10 @@ button.pv-tag-secondary:active {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 15.3h8.8c.7 0 1-.7.6-1.2L12.6 9c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1s-.2.1-.3.1c-.1.1-.2.1-.3.2l-4.3 5.1c-.5.4-.1 1.2.5 1.2z' fill='%2302363D'/%3E%3C/svg%3E");
 }
 
+pv-dropdown-auto-close.pv-dropdown > [class*=pv-button] {
+  background-image: none;
+}
+
 .pv-pagination {
   display: flex;
   justify-content: center;