@turquoisehealth/pit-viper 2.69.0 → 2.70.0

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

@@ -412,6 +412,7 @@
 .pv-v2 .pv-button-secondary,
 .pv-v2 .pv-button-tertiary,
 .pv-v2 .pv-button-ghost,
+.pv-v2 .pv-button-ghost-inverse,
 .pv-v2 .pv-button-destructive,
 .pv-v2 .pv-button-ghost-destructive,
 .pv-v2 .pv-button-ai {
@@ -424,6 +425,8 @@
 .pv-v2 .pv-button-tertiary:not(:disabled):focus-visible,
 .pv-v2 .pv-button-ghost:not(:disabled):hover,
 .pv-v2 .pv-button-ghost:not(:disabled):focus-visible,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):hover,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):focus-visible,
 .pv-v2 .pv-button-destructive:not(:disabled):hover,
 .pv-v2 .pv-button-destructive:not(:disabled):focus-visible,
 .pv-v2 .pv-button-ghost-destructive:not(:disabled):hover,
@@ -436,6 +439,7 @@
 .pv-v2 .pv-button-secondary:disabled,
 .pv-v2 .pv-button-tertiary:disabled,
 .pv-v2 .pv-button-ghost:disabled,
+.pv-v2 .pv-button-ghost-inverse:disabled,
 .pv-v2 .pv-button-destructive:disabled,
 .pv-v2 .pv-button-ghost-destructive:disabled,
 .pv-v2 .pv-button-ai:disabled {
@@ -485,21 +489,29 @@
 .pv-v2 .pv-button-secondary.pv-button-inverse:not(:disabled):active {
   background-color: var(--color-background-interactive, #A8E6E1);
 }
-.pv-v2 .pv-button-tertiary {
+.pv-v2 .pv-button-tertiary,
+.pv-v2 .pv-button-ghost-inverse {
   background-color: var(--button-tertiary-background-color, #474C4B);
   border-color: var(--button-tertiary-border-color, transparent);
 }
-.pv-v2 .pv-button-tertiary:not(:disabled) {
+.pv-v2 .pv-button-tertiary:not(:disabled),
+.pv-v2 .pv-button-ghost-inverse:not(:disabled) {
   color: var(--button-tertiary-color, #FFFFFF);
 }
-.pv-v2 .pv-button-tertiary:not(:disabled):hover, .pv-v2 .pv-button-tertiary:not(:disabled):focus-visible {
+.pv-v2 .pv-button-tertiary:not(:disabled):hover, .pv-v2 .pv-button-tertiary:not(:disabled):focus-visible,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):hover,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):focus-visible {
   color: var(--button-tertiary-hover-color, #FFFFFF);
   background-color: var(--button-tertiary-hover-background-color, #353938);
 }
-.pv-v2 .pv-button-tertiary:not(:disabled):active {
+.pv-v2 .pv-button-tertiary:not(:disabled):active,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):active {
   background-color: var(--button-tertiary-pressed-color, #FFFFFF);
   background-color: var(--button-tertiary-pressed-background-color, #595F5E);
 }
+.pv-v2 .pv-button-ghost-inverse {
+  background-color: transparent;
+}
 .pv-v2 .pv-button-destructive {
   color: var(--button-destructive-color, #801A00);
   background-color: var(--button-destructive-background-color, #FFEFEB);
@@ -1868,9 +1880,6 @@
 .pv-v2 [class*=pv-toast] p {
   flex: 1;
 }
-.pv-v2 [class*=pv-toast] svg {
-  fill: #121313;
-}
 .pv-v2 .pv-toast-info {
   background-color: #F7F8F8;
 }
@@ -1899,14 +1908,6 @@
   padding: 2px;
   fill: #121313;
 }
-.pv-v2 .pv-toast-dark [class*=pv-button] svg {
-  fill: #FFFFFF;
-}
-.pv-v2 .pv-toast-dark [class*=pv-button]:hover svg,
-.pv-v2 .pv-toast-dark [class*=pv-button]:focus-visible svg,
-.pv-v2 .pv-toast-dark [class*=pv-button]:active svg {
-  fill: #121313;
-}
 .pv-v2 .pv-pulsing-dot {
   --color: #36C5BA;
   --size: 6px;
@@ -4292,6 +4293,9 @@
 .pv-v2 .pv-surface-brand-accent {
   background-color: var(--color-background-brand-accent, #E8F2F4);
 }
+.pv-v2 .pv-surface-inverse {
+  background-color: var(--color-background-inverse, #242626);
+}
 .pv-v2 .pv-surface-warning {
   background-color: #FFEED9;
 }

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

@@ -471,6 +471,7 @@
 .pv-button-secondary,
 .pv-button-tertiary,
 .pv-button-ghost,
+.pv-button-ghost-inverse,
 .pv-button-destructive,
 .pv-button-ghost-destructive,
 .pv-button-ai {
@@ -483,6 +484,8 @@
 .pv-button-tertiary:not(:disabled):focus-visible,
 .pv-button-ghost:not(:disabled):hover,
 .pv-button-ghost:not(:disabled):focus-visible,
+.pv-button-ghost-inverse:not(:disabled):hover,
+.pv-button-ghost-inverse:not(:disabled):focus-visible,
 .pv-button-destructive:not(:disabled):hover,
 .pv-button-destructive:not(:disabled):focus-visible,
 .pv-button-ghost-destructive:not(:disabled):hover,
@@ -495,6 +498,7 @@
 .pv-button-secondary:disabled,
 .pv-button-tertiary:disabled,
 .pv-button-ghost:disabled,
+.pv-button-ghost-inverse:disabled,
 .pv-button-destructive:disabled,
 .pv-button-ghost-destructive:disabled,
 .pv-button-ai:disabled {
@@ -548,22 +552,31 @@
   background-color: var(--color-background-interactive, #A8E6E1);
 }
 
-.pv-button-tertiary {
+.pv-button-tertiary,
+.pv-button-ghost-inverse {
   background-color: var(--button-tertiary-background-color, #474C4B);
   border-color: var(--button-tertiary-border-color, transparent);
 }
-.pv-button-tertiary:not(:disabled) {
+.pv-button-tertiary:not(:disabled),
+.pv-button-ghost-inverse:not(:disabled) {
   color: var(--button-tertiary-color, #FFFFFF);
 }
-.pv-button-tertiary:not(:disabled):hover, .pv-button-tertiary:not(:disabled):focus-visible {
+.pv-button-tertiary:not(:disabled):hover, .pv-button-tertiary:not(:disabled):focus-visible,
+.pv-button-ghost-inverse:not(:disabled):hover,
+.pv-button-ghost-inverse:not(:disabled):focus-visible {
   color: var(--button-tertiary-hover-color, #FFFFFF);
   background-color: var(--button-tertiary-hover-background-color, #353938);
 }
-.pv-button-tertiary:not(:disabled):active {
+.pv-button-tertiary:not(:disabled):active,
+.pv-button-ghost-inverse:not(:disabled):active {
   background-color: var(--button-tertiary-pressed-color, #FFFFFF);
   background-color: var(--button-tertiary-pressed-background-color, #595F5E);
 }
 
+.pv-button-ghost-inverse {
+  background-color: transparent;
+}
+
 .pv-button-destructive {
   color: var(--button-destructive-color, #801A00);
   background-color: var(--button-destructive-background-color, #FFEFEB);
@@ -2018,9 +2031,6 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 [class*=pv-toast] p {
   flex: 1;
 }
-[class*=pv-toast] svg {
-  fill: #121313;
-}
 
 .pv-toast-info {
   background-color: #F7F8F8;
@@ -2053,14 +2063,6 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   padding: 2px;
   fill: #121313;
 }
-.pv-toast-dark [class*=pv-button] svg {
-  fill: #FFFFFF;
-}
-.pv-toast-dark [class*=pv-button]:hover svg,
-.pv-toast-dark [class*=pv-button]:focus-visible svg,
-.pv-toast-dark [class*=pv-button]:active svg {
-  fill: #121313;
-}
 
 .pv-pulsing-dot {
   --color: #36C5BA;
@@ -4660,6 +4662,10 @@ body:has(.pv-layout-primary) {
   background-color: var(--color-background-brand-accent, #E8F2F4);
 }
 
+.pv-surface-inverse {
+  background-color: var(--color-background-inverse, #242626);
+}
+
 .pv-surface-warning {
   background-color: #FFEED9;
 }

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

@@ -476,6 +476,7 @@
 .pv-button-secondary,
 .pv-button-tertiary,
 .pv-button-ghost,
+.pv-button-ghost-inverse,
 .pv-button-destructive,
 .pv-button-ghost-destructive,
 .pv-button-ai {
@@ -488,6 +489,8 @@
 .pv-button-tertiary:not(:disabled):focus-visible,
 .pv-button-ghost:not(:disabled):hover,
 .pv-button-ghost:not(:disabled):focus-visible,
+.pv-button-ghost-inverse:not(:disabled):hover,
+.pv-button-ghost-inverse:not(:disabled):focus-visible,
 .pv-button-destructive:not(:disabled):hover,
 .pv-button-destructive:not(:disabled):focus-visible,
 .pv-button-ghost-destructive:not(:disabled):hover,
@@ -500,6 +503,7 @@
 .pv-button-secondary:disabled,
 .pv-button-tertiary:disabled,
 .pv-button-ghost:disabled,
+.pv-button-ghost-inverse:disabled,
 .pv-button-destructive:disabled,
 .pv-button-ghost-destructive:disabled,
 .pv-button-ai:disabled {
@@ -553,22 +557,31 @@
   background-color: var(--color-background-interactive, #A8E6E1);
 }
 
-.pv-button-tertiary {
+.pv-button-tertiary,
+.pv-button-ghost-inverse {
   background-color: var(--button-tertiary-background-color, #A8E6E1);
   border-color: var(--button-tertiary-border-color, transparent);
 }
-.pv-button-tertiary:not(:disabled) {
+.pv-button-tertiary:not(:disabled),
+.pv-button-ghost-inverse:not(:disabled) {
   color: var(--button-tertiary-color, #02363D);
 }
-.pv-button-tertiary:not(:disabled):hover, .pv-button-tertiary:not(:disabled):focus-visible {
+.pv-button-tertiary:not(:disabled):hover, .pv-button-tertiary:not(:disabled):focus-visible,
+.pv-button-ghost-inverse:not(:disabled):hover,
+.pv-button-ghost-inverse:not(:disabled):focus-visible {
   color: var(--button-tertiary-hover-color, #02363D);
   background-color: var(--button-tertiary-hover-background-color, #6FD6CE);
 }
-.pv-button-tertiary:not(:disabled):active {
+.pv-button-tertiary:not(:disabled):active,
+.pv-button-ghost-inverse:not(:disabled):active {
   background-color: var(--button-tertiary-pressed-color, #02363D);
   background-color: var(--button-tertiary-pressed-background-color, #6FD6CE);
 }
 
+.pv-button-ghost-inverse {
+  background-color: transparent;
+}
+
 .pv-button-destructive {
   color: var(--button-destructive-color, #FFFFFF);
   background-color: var(--button-destructive-background-color, #DA1E28);
@@ -2023,9 +2036,6 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 [class*=pv-toast] p {
   flex: 1;
 }
-[class*=pv-toast] svg {
-  fill: #FFFFFF;
-}
 
 .pv-toast-info {
   background-color: #F7F8F8;
@@ -2058,14 +2068,6 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   padding: 2px;
   fill: #121313;
 }
-.pv-toast-dark [class*=pv-button] svg {
-  fill: #FFFFFF;
-}
-.pv-toast-dark [class*=pv-button]:hover svg,
-.pv-toast-dark [class*=pv-button]:focus-visible svg,
-.pv-toast-dark [class*=pv-button]:active svg {
-  fill: #121313;
-}
 
 .pv-pulsing-dot {
   --color: #36C5BA;
@@ -4665,6 +4667,10 @@ body:has(.pv-layout-primary) {
   background-color: var(--color-background-brand-accent, #F3FCFB);
 }
 
+.pv-surface-inverse {
+  background-color: var(--color-background-inverse, #242626);
+}
+
 .pv-surface-warning {
   background-color: #FAECCC;
 }

package/package.json

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