@turquoisehealth/pit-viper 2.55.4-dev.0 → 2.56.0

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

@@ -345,7 +345,7 @@
   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);
+  color: var(--kbd-color, #6E8081);
   border: var(--kbd-border, 1px solid transparent);
   border-radius: var(--kbd-radius, 4px);
   padding: var(--kbd-padding, 0 0.25rem);
@@ -932,7 +932,7 @@
   background-color: var(--text-input-disabled-background-color, #ECECEC);
 }
 .pv-v2 .pv-input-search::placeholder {
-  color: var(--text-input-placeholder-color, #89989B);
+  color: var(--text-input-placeholder-color, #6E8081);
 }
 .pv-v2 .pv-input-search {
   padding-inline-start: 2.25rem;
@@ -1317,7 +1317,7 @@
   line-height: 1.33333333;
 }
 .pv-v2 .pv-ghost-input input::placeholder, .pv-v2 .pv-ghost-input input::-webkit-input-placeholder {
-  color: #B8C1C4;
+  color: #89989B;
 }
 .pv-v2 .pv-ghost-input button {
   opacity: 0;
@@ -1329,7 +1329,7 @@
   outline: 0;
 }
 .pv-v2 .pv-ghost-input:hover input::placeholder, .pv-v2 .pv-ghost-input:hover input::-webkit-input-placeholder, .pv-v2 .pv-ghost-input:focus-visible input::placeholder, .pv-v2 .pv-ghost-input:focus-visible input::-webkit-input-placeholder, .pv-v2 .pv-ghost-input:focus-within input::placeholder, .pv-v2 .pv-ghost-input:focus-within input::-webkit-input-placeholder {
-  color: #89989B;
+  color: #6E8081;
 }
 .pv-v2 .pv-ghost-input[data-style=h1] input {
   font-weight: 600;
@@ -2545,7 +2545,7 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  color: var(--tab-list-text-color, #89989B);
+  color: var(--tab-list-text-color, #6E8081);
   font-weight: var(--tab-list-font-weight, 500);
   font-size: var(--tab-list-font-size, 0.75rem);
   line-height: var(--tab-list-line-height, 1rem);
@@ -2679,7 +2679,7 @@
 .pv-v2 .pv-breadcrumbs li:not(:last-child):after {
   display: block;
   content: "";
-  color: #89989B;
+  color: #6E8081;
   width: 0.75rem;
   height: 0.75rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.707 18.707a1 1 0 0 1-1.414-1.414L13.586 12 8.293 6.707a1 1 0 0 1 1.414-1.414l6 6a.999.999 0 0 1 0 1.414l-6 6Z' fill='%2389989B'/%3E%3C/svg%3E");
@@ -3443,7 +3443,7 @@
   opacity: 1;
 }
 .pv-v2 .pv-rating {
-  --background-color: #DCDFE4;
+  --background-color: #D9DEDE;
   --icon-color: #36C5BA;
   --height: 40px;
   aspect-ratio: 220/40;
@@ -3486,7 +3486,7 @@
   background-repeat: no-repeat;
 }
 .pv-v2 .pv-rating[data-rating=bar] {
-  --background-color: #DCDFE4;
+  --background-color: #D9DEDE;
   --icon-color: #176F6F;
   --height: 10px;
   display: flex;
@@ -3510,6 +3510,30 @@
   background-size: 6px 10px;
   background-repeat: repeat;
 }
+.pv-v2 .pv-rating[data-rating=dot] {
+  --background-color: #D9DEDE;
+  --mask-color: white;
+  --icon-color: #36C5BA;
+  --height: 10px;
+  display: flex;
+  aspect-ratio: unset;
+}
+.pv-v2 .pv-rating[data-rating=dot] meter {
+  position: relative;
+  padding: 0;
+  height: var(--height);
+  aspect-ratio: 50/10;
+}
+.pv-v2 .pv-rating[data-rating=dot]:after {
+  background-color: var(--mask-color);
+  background-image: none;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 10 10'%3E%3Cpath d='M10 0v10H0V0h10ZM1 5a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z'/%3E%3C/svg%3E");
+  mask-repeat: repeat;
+}
+.pv-v2 [style*="--hover-mask-color"]:hover .pv-rating[data-rating=dot]:after,
+.pv-v2 [style*="--hover-mask-color"]:focus-visible .pv-rating[data-rating=dot]:after {
+  background-color: var(--hover-mask-color);
+}
 .pv-v2 .pv-circle-meter {
   --size: 100px;
   --color: #36C5BA;
@@ -4195,6 +4219,9 @@
 .pv-v2 .pv-text-subdued {
   color: var(--color-text-subdued, #4B595C);
 }
+.pv-v2 .pv-text-tertiary {
+  color: var(--color-text-tertiary, #6E8081);
+}
 .pv-v2 .pv-text-subdued-inverse {
   color: var(--color-text-inverse-subdued, #FFFFFF);
 }

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

@@ -399,7 +399,7 @@
   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);
+  color: var(--kbd-color, #6E8081);
   border: var(--kbd-border, 1px solid transparent);
   border-radius: var(--kbd-radius, 4px);
   padding: var(--kbd-padding, 0 0.25rem);
@@ -1019,7 +1019,7 @@
 }
 
 .pv-input-search::placeholder {
-  color: var(--text-input-placeholder-color, #89989B);
+  color: var(--text-input-placeholder-color, #6E8081);
 }
 
 .pv-input-search {
@@ -1428,7 +1428,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   line-height: 1.33333333;
 }
 .pv-ghost-input input::placeholder, .pv-ghost-input input::-webkit-input-placeholder {
-  color: #B8C1C4;
+  color: #89989B;
 }
 .pv-ghost-input button {
   opacity: 0;
@@ -1440,7 +1440,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   outline: 0;
 }
 .pv-ghost-input:hover input::placeholder, .pv-ghost-input:hover input::-webkit-input-placeholder, .pv-ghost-input:focus-visible input::placeholder, .pv-ghost-input:focus-visible input::-webkit-input-placeholder, .pv-ghost-input:focus-within input::placeholder, .pv-ghost-input:focus-within input::-webkit-input-placeholder {
-  color: #89989B;
+  color: #6E8081;
 }
 .pv-ghost-input[data-style=h1] input {
   font-weight: 600;
@@ -2776,7 +2776,7 @@ button.pv-tag-secondary:active {
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  color: var(--tab-list-text-color, #89989B);
+  color: var(--tab-list-text-color, #6E8081);
   font-weight: var(--tab-list-font-weight, 500);
   font-size: var(--tab-list-font-size, 0.75rem);
   line-height: var(--tab-list-line-height, 1rem);
@@ -2916,7 +2916,7 @@ button.pv-tag-secondary:active {
 .pv-breadcrumbs li:not(:last-child):after {
   display: block;
   content: "";
-  color: #89989B;
+  color: #6E8081;
   width: 0.75rem;
   height: 0.75rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.707 18.707a1 1 0 0 1-1.414-1.414L13.586 12 8.293 6.707a1 1 0 0 1 1.414-1.414l6 6a.999.999 0 0 1 0 1.414l-6 6Z' fill='%2389989B'/%3E%3C/svg%3E");
@@ -3723,7 +3723,7 @@ div.pv-drawer[open] {
 }
 
 .pv-rating {
-  --background-color: #DCDFE4;
+  --background-color: #D9DEDE;
   --icon-color: #36C5BA;
   --height: 40px;
   aspect-ratio: 220/40;
@@ -3772,7 +3772,7 @@ div.pv-drawer[open] {
 }
 
 .pv-rating[data-rating=bar] {
-  --background-color: #DCDFE4;
+  --background-color: #D9DEDE;
   --icon-color: #176F6F;
   --height: 10px;
   display: flex;
@@ -3797,6 +3797,32 @@ div.pv-drawer[open] {
   background-repeat: repeat;
 }
 
+.pv-rating[data-rating=dot] {
+  --background-color: #D9DEDE;
+  --mask-color: white;
+  --icon-color: #36C5BA;
+  --height: 10px;
+  display: flex;
+  aspect-ratio: unset;
+}
+.pv-rating[data-rating=dot] meter {
+  position: relative;
+  padding: 0;
+  height: var(--height);
+  aspect-ratio: 50/10;
+}
+.pv-rating[data-rating=dot]:after {
+  background-color: var(--mask-color);
+  background-image: none;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 10 10'%3E%3Cpath d='M10 0v10H0V0h10ZM1 5a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z'/%3E%3C/svg%3E");
+  mask-repeat: repeat;
+}
+
+[style*="--hover-mask-color"]:hover .pv-rating[data-rating=dot]:after,
+[style*="--hover-mask-color"]:focus-visible .pv-rating[data-rating=dot]:after {
+  background-color: var(--hover-mask-color);
+}
+
 .pv-circle-meter {
   --size: 100px;
   --color: #36C5BA;
@@ -4561,6 +4587,10 @@ body:has(.pv-layout-primary) {
   color: var(--color-text-subdued, #4B595C);
 }
 
+.pv-text-tertiary {
+  color: var(--color-text-tertiary, #6E8081);
+}
+
 .pv-text-subdued-inverse {
   color: var(--color-text-inverse-subdued, #FFFFFF);
 }

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

@@ -3728,7 +3728,7 @@ div.pv-drawer[open] {
 }
 
 .pv-rating {
-  --background-color: #DCDFE4;
+  --background-color: #D9DEDE;
   --icon-color: #36C5BA;
   --height: 40px;
   aspect-ratio: 220/40;
@@ -3777,7 +3777,7 @@ div.pv-drawer[open] {
 }
 
 .pv-rating[data-rating=bar] {
-  --background-color: #DCDFE4;
+  --background-color: #D9DEDE;
   --icon-color: #176F6F;
   --height: 10px;
   display: flex;
@@ -3802,6 +3802,32 @@ div.pv-drawer[open] {
   background-repeat: repeat;
 }
 
+.pv-rating[data-rating=dot] {
+  --background-color: #D9DEDE;
+  --mask-color: white;
+  --icon-color: #36C5BA;
+  --height: 10px;
+  display: flex;
+  aspect-ratio: unset;
+}
+.pv-rating[data-rating=dot] meter {
+  position: relative;
+  padding: 0;
+  height: var(--height);
+  aspect-ratio: 50/10;
+}
+.pv-rating[data-rating=dot]:after {
+  background-color: var(--mask-color);
+  background-image: none;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 10 10'%3E%3Cpath d='M10 0v10H0V0h10ZM1 5a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z'/%3E%3C/svg%3E");
+  mask-repeat: repeat;
+}
+
+[style*="--hover-mask-color"]:hover .pv-rating[data-rating=dot]:after,
+[style*="--hover-mask-color"]:focus-visible .pv-rating[data-rating=dot]:after {
+  background-color: var(--hover-mask-color);
+}
+
 .pv-circle-meter {
   --size: 100px;
   --color: #36C5BA;
@@ -4566,6 +4592,10 @@ body:has(.pv-layout-primary) {
   color: var(--color-text-subdued, #6E7784);
 }
 
+.pv-text-tertiary {
+  color: var(--color-text-tertiary, #6E8081);
+}
+
 .pv-text-subdued-inverse {
   color: var(--color-text-inverse-subdued, #DCDFE4);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.55.4-dev.0",
+  "version": "2.56.0",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {