@turquoisehealth/pit-viper 2.24.0 → 2.25.1

package/README.md

@@ -16,6 +16,8 @@ Pit Viper has 2 main components:
 
 To develop locally (CSS or components), read the [Notion documentation](https://www.notion.so/turquoisehealth/Develop-w-Pit-Viper-Locally-f2c2ce234c934525a18172504f704080).
 
+For information on versioning/publishing components, refer to the README [here](./.changeset/README.md)
+
 ### Applying Pit Viper (CSS)
 
 #### Install as an npm package

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

@@ -2565,7 +2565,7 @@ td:not([rowspan]) > .pv-responsive-cell {
 [class*=pv-tag] {
   font-size: 0.6875rem;
   line-height: 1.45454545;
-  font-weight: 400;
+  font-weight: 500;
   color: #121313;
   display: inline-flex;
   align-items: center;
@@ -2601,9 +2601,8 @@ strong[class*=pv-tag] {
 
 .pv-tag-sm {
   font-size: 0.6875rem;
-  line-height: 1.45454545;
+  line-height: 14px;
   padding: 0 0.5rem;
-  border-width: 0;
 }
 
 .pv-tag-lg {
@@ -2613,6 +2612,20 @@ strong[class*=pv-tag] {
   padding: calc(0.25rem - 1px) 0.5rem;
 }
 
+[class*=pv-tag]:has(.pv-company-xs, .pv-company-sm) {
+  padding: 1px 4px;
+  gap: 4px;
+}
+
+.pv-tag-sm:has(.pv-company-xs) {
+  padding: 0 2px;
+  gap: 2px;
+}
+
+.pv-tag-lg:has(.pv-company-sm) {
+  padding: 3px 4px;
+}
+
 .pv-tag-inverse,
 .pv-tag-red-inverse,
 .pv-tag-yellow-inverse,
@@ -3230,22 +3243,23 @@ button.pv-tag-secondary:active {
 .pv-details summary {
   list-style: none;
   cursor: pointer;
-  font-weight: 600;
+  font-weight: var(--accordion-summary-font-weight, 500);
   background-repeat: no-repeat;
 }
 
 :where([class*=pv-accordion]) {
   overflow: clip;
-  background-color: #FFFFFF;
+  background-color: var(--accordion-background-color, #FFFFFF);
 }
 :where([class*=pv-accordion]) > summary {
-  padding: 0.5rem 3.25rem 0.5rem 1rem;
-  font-size: 0.6875rem;
-  line-height: 1.45454545;
-  background-image: var(--summary-background-image-closed, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%2302363D'/%3E%3C/svg%3E"));
-  background-size: 1.25rem 1.25rem;
-  background-position: right 1rem center;
-  background-color: var(--color-background-accent, transparent);
+  padding: var(--accordion-arrow-right-summary-padding, 0.25rem 1.375rem 0.25rem 0.125rem);
+  font-size: var(--accordion-summary-font-size, 0.75rem);
+  line-height: var(--accordion-summary-line-height, 1.33333333);
+  border-radius: var(--accordion-radius, 4px);
+  background-image: var(--accordion-summary-closed-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%23121313'/%3E%3C/svg%3E"));
+  background-size: var(--accordion-summary-background-size, 1rem 1rem);
+  background-position: var(--accordion-arrow-right-summary-background-position, right 0.25rem center);
+  background-color: var(--accordion-summary-background-color, transparent);
   transition-duration: 0.125s;
   transition-timing-function: ease-in;
   transition-property: color;
@@ -3253,14 +3267,23 @@ button.pv-tag-secondary:active {
 :where([class*=pv-accordion]) > summary::-webkit-details-marker {
   display: none;
 }
-:where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-within {
-  color: var(--color-text-brand, #16696D);
+:where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-visible {
+  color: var(--accordion-summary-hover-color, inherit);
+  background-color: var(--accordion-summary-hover-background-color, #E8F2F4);
+}
+:where([class*=pv-accordion]) > summary:active {
+  color: var(--accordion-summary-pressed-color, inherit);
+  background-color: var(--accordion-summary-pressed-background-color, #C7D8DB);
+}
+:where([class*=pv-accordion])[data-arrow=left] > summary {
+  padding: var(--accordion-arrow-left-summary-padding, 0.25rem 0.125rem 0.25rem 1.375rem);
+  background-position: var(--accordion-arrow-left-summary-background-position, left 0.25rem center);
 }
 :where([class*=pv-accordion]) > :where(:not(summary)) {
-  padding: 0 1rem 1rem 1rem;
+  padding: var(--accordion-content-padding, 0.75rem 0 0.75rem 0);
 }
 :where([class*=pv-accordion]):not(:last-of-type) {
-  border-bottom: 1px solid var(--color-border, #E3E7EA);
+  border-bottom: var(--accordion-border, none);
 }
 :where([class*=pv-accordion])::details-content {
   height: 0;
@@ -3275,7 +3298,7 @@ button.pv-tag-secondary:active {
   height: auto;
 }
 :where([class*=pv-accordion])[open] > summary {
-  background-image: var(--summary-background-image-open, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 16.17c.439.44 1.151.44 1.59 0L12 10.216l5.954 5.955a1.125 1.125 0 0 0 1.591-1.591l-6.75-6.75a1.125 1.125 0 0 0-1.59 0l-6.75 6.75c-.44.439-.44 1.151 0 1.59Z' fill='%2302363D'/%3E%3C/svg%3E"));
+  background-image: var(--accordion-summary-open-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 16.17c.439.44 1.151.44 1.59 0L12 10.216l5.954 5.955a1.125 1.125 0 0 0 1.591-1.591l-6.75-6.75a1.125 1.125 0 0 0-1.59 0l-6.75 6.75c-.44.439-.44 1.151 0 1.59Z' fill='%23121313'/%3E%3C/svg%3E"));
 }
 
 .pv-accordion-dark > summary,

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

@@ -2621,7 +2621,6 @@ strong[class*=pv-tag] {
   font-size: 0.875rem;
   line-height: 1.1428571;
   padding: 0.125rem 0.5rem;
-  border-width: 1px;
 }
 
 .pv-tag-lg {
@@ -2631,6 +2630,20 @@ strong[class*=pv-tag] {
   padding: 0.125rem 0.5rem;
 }
 
+[class*=pv-tag]:has(.pv-company-xs, .pv-company-sm) {
+  padding: 1px 4px;
+  gap: 4px;
+}
+
+.pv-tag-sm:has(.pv-company-xs) {
+  padding: 0 2px;
+  gap: 2px;
+}
+
+.pv-tag-lg:has(.pv-company-sm) {
+  padding: 3px 4px;
+}
+
 .pv-tag-inverse,
 .pv-tag-red-inverse,
 .pv-tag-yellow-inverse,
@@ -3248,22 +3261,23 @@ button.pv-tag-secondary:active {
 .pv-details summary {
   list-style: none;
   cursor: pointer;
-  font-weight: 600;
+  font-weight: var(--accordion-summary-font-weight, 600);
   background-repeat: no-repeat;
 }
 
 :where([class*=pv-accordion]) {
   overflow: clip;
-  background-color: #FFFFFF;
+  background-color: var(--accordion-background-color, #FFFFFF);
 }
 :where([class*=pv-accordion]) > summary {
-  padding: 0.5rem 3.25rem 0.5rem 1rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  background-image: var(--summary-background-image-closed, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%2302363D'/%3E%3C/svg%3E"));
-  background-size: 1.25rem 1.25rem;
-  background-position: right 1rem center;
-  background-color: var(--color-background-accent, transparent);
+  padding: var(--accordion-arrow-right-summary-padding, 0.5rem 3.25rem 0.5rem 1rem);
+  font-size: var(--accordion-summary-font-size, 1rem);
+  line-height: var(--accordion-summary-line-height, 1.5);
+  border-radius: var(--accordion-radius, 0);
+  background-image: var(--accordion-summary-closed-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%2302363D'/%3E%3C/svg%3E"));
+  background-size: var(--accordion-summary-background-size, 1.25rem 1.25rem);
+  background-position: var(--accordion-arrow-right-summary-background-position, right 1rem center);
+  background-color: var(--accordion-summary-background-color, transparent);
   transition-duration: 0.125s;
   transition-timing-function: ease-in;
   transition-property: color;
@@ -3271,14 +3285,23 @@ button.pv-tag-secondary:active {
 :where([class*=pv-accordion]) > summary::-webkit-details-marker {
   display: none;
 }
-:where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-within {
-  color: var(--color-text-brand, #176F6F);
+:where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-visible {
+  color: var(--accordion-summary-hover-color, #176F6F);
+  background-color: var(--accordion-summary-hover-background-color, transparent);
+}
+:where([class*=pv-accordion]) > summary:active {
+  color: var(--accordion-summary-pressed-color, #176F6F);
+  background-color: var(--accordion-summary-pressed-background-color, transparent);
+}
+:where([class*=pv-accordion])[data-arrow=left] > summary {
+  padding: var(--accordion-arrow-left-summary-padding, 0.5rem 1rem 0.5rem 3.25rem);
+  background-position: var(--accordion-arrow-left-summary-background-position, left 1rem center);
 }
 :where([class*=pv-accordion]) > :where(:not(summary)) {
-  padding: 0 1rem 1rem 1rem;
+  padding: var(--accordion-content-padding, 0 1rem 1rem 1rem);
 }
 :where([class*=pv-accordion]):not(:last-of-type) {
-  border-bottom: 1px solid var(--color-border, #DCDFE4);
+  border-bottom: var(--accordion-border, 1px solid #DCDFE4);
 }
 :where([class*=pv-accordion])::details-content {
   height: 0;
@@ -3293,7 +3316,7 @@ button.pv-tag-secondary:active {
   height: auto;
 }
 :where([class*=pv-accordion])[open] > summary {
-  background-image: var(--summary-background-image-open, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 16.17c.439.44 1.151.44 1.59 0L12 10.216l5.954 5.955a1.125 1.125 0 0 0 1.591-1.591l-6.75-6.75a1.125 1.125 0 0 0-1.59 0l-6.75 6.75c-.44.439-.44 1.151 0 1.59Z' fill='%2302363D'/%3E%3C/svg%3E"));
+  background-image: var(--accordion-summary-open-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 16.17c.439.44 1.151.44 1.59 0L12 10.216l5.954 5.955a1.125 1.125 0 0 0 1.591-1.591l-6.75-6.75a1.125 1.125 0 0 0-1.59 0l-6.75 6.75c-.44.439-.44 1.151 0 1.59Z' fill='%2302363D'/%3E%3C/svg%3E"));
 }
 
 .pv-accordion-dark > summary,

package/package.json

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