@turquoisehealth/pit-viper 2.23.1 → 2.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +2 -0
  2. package/_site/assets/css/pit-viper-v2.css +24 -14
  3. package/_site/assets/css/pit-viper.css +24 -14
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -16,6 +16,8 @@ Pit Viper has 2 main components:
16
16
 
17
17
  To develop locally (CSS or components), read the [Notion documentation](https://www.notion.so/turquoisehealth/Develop-w-Pit-Viper-Locally-f2c2ce234c934525a18172504f704080).
18
18
 
19
+ For information on versioning/publishing components, refer to the README [here](./.changeset/README.md)
20
+
19
21
  ### Applying Pit Viper (CSS)
20
22
 
21
23
  #### Install as an npm package
package/_site/assets/css/pit-viper-v2.css CHANGED
@@ -3230,22 +3230,23 @@ button.pv-tag-secondary:active {
3230
3230
  .pv-details summary {
3231
3231
  list-style: none;
3232
3232
  cursor: pointer;
3233
- font-weight: 600;
3233
+ font-weight: var(--accordion-summary-font-weight, 500);
3234
3234
  background-repeat: no-repeat;
3235
3235
  }
3236
3236
 
3237
3237
  :where([class*=pv-accordion]) {
3238
3238
  overflow: clip;
3239
- background-color: #FFFFFF;
3239
+ background-color: var(--accordion-background-color, #FFFFFF);
3240
3240
  }
3241
3241
  :where([class*=pv-accordion]) > summary {
3242
- padding: 0.5rem 3.25rem 0.5rem 1rem;
3243
- font-size: 0.6875rem;
3244
- line-height: 1.45454545;
3245
- 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"));
3246
- background-size: 1.25rem 1.25rem;
3247
- background-position: right 1rem center;
3248
- background-color: var(--color-background-accent, transparent);
3242
+ padding: var(--accordion-arrow-right-summary-padding, 0.25rem 1.375rem 0.25rem 0.125rem);
3243
+ font-size: var(--accordion-summary-font-size, 0.75rem);
3244
+ line-height: var(--accordion-summary-line-height, 1.33333333);
3245
+ border-radius: var(--accordion-radius, 4px);
3246
+ 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"));
3247
+ background-size: var(--accordion-summary-background-size, 1rem 1rem);
3248
+ background-position: var(--accordion-arrow-right-summary-background-position, right 0.25rem center);
3249
+ background-color: var(--accordion-summary-background-color, transparent);
3249
3250
  transition-duration: 0.125s;
3250
3251
  transition-timing-function: ease-in;
3251
3252
  transition-property: color;
@@ -3253,14 +3254,23 @@ button.pv-tag-secondary:active {
3253
3254
  :where([class*=pv-accordion]) > summary::-webkit-details-marker {
3254
3255
  display: none;
3255
3256
  }
3256
- :where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-within {
3257
- color: var(--color-text-brand, #16696D);
3257
+ :where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-visible {
3258
+ color: var(--accordion-summary-hover-color, inherit);
3259
+ background-color: var(--accordion-summary-hover-background-color, #E8F2F4);
3260
+ }
3261
+ :where([class*=pv-accordion]) > summary:active {
3262
+ color: var(--accordion-summary-pressed-color, inherit);
3263
+ background-color: var(--accordion-summary-pressed-background-color, #C7D8DB);
3264
+ }
3265
+ :where([class*=pv-accordion])[data-arrow=left] > summary {
3266
+ padding: var(--accordion-arrow-left-summary-padding, 0.25rem 0.125rem 0.25rem 1.375rem);
3267
+ background-position: var(--accordion-arrow-left-summary-background-position, left 0.25rem center);
3258
3268
  }
3259
3269
  :where([class*=pv-accordion]) > :where(:not(summary)) {
3260
- padding: 0 1rem 1rem 1rem;
3270
+ padding: var(--accordion-content-padding, 0.75rem 0 0.75rem 0);
3261
3271
  }
3262
3272
  :where([class*=pv-accordion]):not(:last-of-type) {
3263
- border-bottom: 1px solid var(--color-border, #E3E7EA);
3273
+ border-bottom: var(--accordion-border, none);
3264
3274
  }
3265
3275
  :where([class*=pv-accordion])::details-content {
3266
3276
  height: 0;
@@ -3275,7 +3285,7 @@ button.pv-tag-secondary:active {
3275
3285
  height: auto;
3276
3286
  }
3277
3287
  :where([class*=pv-accordion])[open] > summary {
3278
- 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"));
3288
+ 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"));
3279
3289
  }
3280
3290
 
3281
3291
  .pv-accordion-dark > summary,
package/_site/assets/css/pit-viper.css CHANGED
@@ -3248,22 +3248,23 @@ button.pv-tag-secondary:active {
3248
3248
  .pv-details summary {
3249
3249
  list-style: none;
3250
3250
  cursor: pointer;
3251
- font-weight: 600;
3251
+ font-weight: var(--accordion-summary-font-weight, 600);
3252
3252
  background-repeat: no-repeat;
3253
3253
  }
3254
3254
 
3255
3255
  :where([class*=pv-accordion]) {
3256
3256
  overflow: clip;
3257
- background-color: #FFFFFF;
3257
+ background-color: var(--accordion-background-color, #FFFFFF);
3258
3258
  }
3259
3259
  :where([class*=pv-accordion]) > summary {
3260
- padding: 0.5rem 3.25rem 0.5rem 1rem;
3261
- font-size: 1rem;
3262
- line-height: 1.5;
3263
- 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"));
3264
- background-size: 1.25rem 1.25rem;
3265
- background-position: right 1rem center;
3266
- background-color: var(--color-background-accent, transparent);
3260
+ padding: var(--accordion-arrow-right-summary-padding, 0.5rem 3.25rem 0.5rem 1rem);
3261
+ font-size: var(--accordion-summary-font-size, 1rem);
3262
+ line-height: var(--accordion-summary-line-height, 1.5);
3263
+ border-radius: var(--accordion-radius, 0);
3264
+ 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"));
3265
+ background-size: var(--accordion-summary-background-size, 1.25rem 1.25rem);
3266
+ background-position: var(--accordion-arrow-right-summary-background-position, right 1rem center);
3267
+ background-color: var(--accordion-summary-background-color, transparent);
3267
3268
  transition-duration: 0.125s;
3268
3269
  transition-timing-function: ease-in;
3269
3270
  transition-property: color;
@@ -3271,14 +3272,23 @@ button.pv-tag-secondary:active {
3271
3272
  :where([class*=pv-accordion]) > summary::-webkit-details-marker {
3272
3273
  display: none;
3273
3274
  }
3274
- :where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-within {
3275
- color: var(--color-text-brand, #176F6F);
3275
+ :where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-visible {
3276
+ color: var(--accordion-summary-hover-color, #176F6F);
3277
+ background-color: var(--accordion-summary-hover-background-color, transparent);
3278
+ }
3279
+ :where([class*=pv-accordion]) > summary:active {
3280
+ color: var(--accordion-summary-pressed-color, #176F6F);
3281
+ background-color: var(--accordion-summary-pressed-background-color, transparent);
3282
+ }
3283
+ :where([class*=pv-accordion])[data-arrow=left] > summary {
3284
+ padding: var(--accordion-arrow-left-summary-padding, 0.5rem 1rem 0.5rem 3.25rem);
3285
+ background-position: var(--accordion-arrow-left-summary-background-position, left 1rem center);
3276
3286
  }
3277
3287
  :where([class*=pv-accordion]) > :where(:not(summary)) {
3278
- padding: 0 1rem 1rem 1rem;
3288
+ padding: var(--accordion-content-padding, 0 1rem 1rem 1rem);
3279
3289
  }
3280
3290
  :where([class*=pv-accordion]):not(:last-of-type) {
3281
- border-bottom: 1px solid var(--color-border, #DCDFE4);
3291
+ border-bottom: var(--accordion-border, 1px solid #DCDFE4);
3282
3292
  }
3283
3293
  :where([class*=pv-accordion])::details-content {
3284
3294
  height: 0;
@@ -3293,7 +3303,7 @@ button.pv-tag-secondary:active {
3293
3303
  height: auto;
3294
3304
  }
3295
3305
  :where([class*=pv-accordion])[open] > summary {
3296
- 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"));
3306
+ 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"));
3297
3307
  }
3298
3308
 
3299
3309
  .pv-accordion-dark > summary,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@turquoisehealth/pit-viper",
3
- "version": "2.23.1",
3
+ "version": "2.25.0",
4
4
  "description": "Turquoise Health's design system.",
5
5
  "main": "README.md",
6
6
  "publishConfig": {