@planningcenter/tapestry 3.1.0-rc.27 → 3.1.0-rc.28

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 (13) hide show
  1. package/dist/index.css +25 -21
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +1064 -1060
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +1064 -1060
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tokens-dark.css +12 -12
  8. package/dist/tokens-dark.css.map +1 -1
  9. package/dist/tokens.css +12 -12
  10. package/dist/tokens.css.map +1 -1
  11. package/dist/unstable.css +25 -21
  12. package/dist/unstable.css.map +1 -1
  13. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -586,11 +586,11 @@
586
586
  --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
587
587
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
588
588
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
589
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
589
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 15%);
590
590
  --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
591
591
  --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
592
592
  --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
593
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
593
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 15%);
594
594
  --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
595
595
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
596
596
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
@@ -599,22 +599,22 @@
599
599
  --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
600
600
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
601
601
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
602
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
602
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 15%);
603
603
  --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
604
604
  --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
605
605
  --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
606
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
606
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 15%);
607
607
  --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
608
608
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
609
609
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
610
610
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
611
611
  --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
612
612
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
613
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
613
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 15%);
614
614
  --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
615
615
  --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
616
616
  --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
617
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
617
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 15%);
618
618
  --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
619
619
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
620
620
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
@@ -810,11 +810,11 @@
810
810
  --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
811
811
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
812
812
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
813
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
813
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 15%);
814
814
  --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
815
815
  --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
816
816
  --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
817
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
817
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 15%);
818
818
  --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
819
819
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
820
820
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
@@ -823,22 +823,22 @@
823
823
  --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
824
824
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
825
825
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
826
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
826
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 15%);
827
827
  --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
828
828
  --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
829
829
  --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
830
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
830
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 15%);
831
831
  --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
832
832
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
833
833
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
834
834
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
835
835
  --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
836
836
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
837
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
837
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 15%);
838
838
  --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
839
839
  --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
840
840
  --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
841
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
841
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 15%);
842
842
  --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
843
843
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
844
844
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
@@ -2584,7 +2584,7 @@ a[class="tds-btn"]{
2584
2584
  --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQzYTQwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIgNSA2IDYgNi02Ii8+PC9zdmc+");
2585
2585
  --tds-select-caret-size:.75em;
2586
2586
  --tds-select-caret-inline-offset:.75em;
2587
- --tds-select-caret-transition:transform 180ms ease-in-out;
2587
+ --tds-select-caret-transition:transform 180ms cubic-bezier(.45, 0, .4, 1);;
2588
2588
 
2589
2589
  --tds-select-dropdown-background-color:var(--t-surface-color-card);
2590
2590
  --tds-select-dropdown-border:1px solid var(--t-border-color);
@@ -2595,11 +2595,12 @@ a[class="tds-btn"]{
2595
2595
  --tds-select-dropdown-border-radius:var(--t-border-radius);
2596
2596
  --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2597
2597
  --tds-select-dropdown-scroll-behavior:smooth;
2598
- --tds-select-dropdown-transition:opacity .2s ease, transform .2s ease-out, display .2s allow-discrete, overlay .2s allow-discrete;
2598
+ --tds-select-dropdown-transition-enter:opacity 160ms ease, transform 160ms cubic-bezier(0, 0, .4, 1), display 160ms allow-discrete, overlay 160ms allow-discrete;
2599
+ --tds-select-dropdown-transition-exit:opacity 130ms ease, transform 130ms cubic-bezier(.5, 0, 1, 1), display 130ms allow-discrete, overlay 130ms allow-discrete;
2599
2600
  --tds-select-dropdown-closed-opacity:0;
2600
2601
  --tds-select-dropdown-open-opacity:1;
2601
- --tds-select-dropdown-closed-transform:scale(.95);
2602
- --tds-select-dropdown-open-transform:scale(1);
2602
+ --tds-select-dropdown-closed-transform:translateY(-8px);
2603
+ --tds-select-dropdown-open-transform:translateY(0);
2603
2604
 
2604
2605
  --tds-select-option-gap:var(--t-spacing-1);
2605
2606
  --tds-select-option-padding-block:var(--t-spacing-1);
@@ -2662,7 +2663,7 @@ a[class="tds-btn"]{
2662
2663
  border:var(--t-form-border-width) solid var(--tds-select-border-color);
2663
2664
  border-radius:var(--t-form-border-radius);
2664
2665
  transition-timing-function:ease-in-out;
2665
- transition-duration:180ms;
2666
+ transition-duration:160ms;
2666
2667
  transition-property:var(--tds-select-transition-property);
2667
2668
  }
2668
2669
 
@@ -2800,7 +2801,8 @@ a[class="tds-btn"]{
2800
2801
 
2801
2802
  .tds-select{
2802
2803
  --tds-select-transition-property:none;
2803
- --tds-select-dropdown-transition:none;
2804
+ --tds-select-dropdown-transition-enter:none;
2805
+ --tds-select-dropdown-transition-exit:none;
2804
2806
  --tds-select-dropdown-scroll-behavior:auto;
2805
2807
  --tds-select-dropdown-closed-transform:none;
2806
2808
  --tds-select-dropdown-open-transform:none;
@@ -2844,7 +2846,7 @@ a[class="tds-btn"]{
2844
2846
  color:var(--tds-select-placeholder-color);
2845
2847
  white-space:nowrap;
2846
2848
  background-image:none;
2847
- transition:background-color 180ms ease-in-out, border-color 180ms ease-in-out, outline-color 180ms ease-in-out, outline-offset 180ms ease-in-out, transform .1s ease;
2849
+ transition:background-color 160ms ease-in-out, border-color 160ms ease-in-out, outline-color 160ms ease-in-out, outline-offset 160ms ease-in-out, transform .1s ease;
2848
2850
  -webkit-tap-highlight-color:transparent;
2849
2851
  }
2850
2852
 
@@ -2889,12 +2891,13 @@ a[class="tds-btn"]{
2889
2891
  box-shadow:var(--tds-select-dropdown-box-shadow);
2890
2892
  opacity:var(--tds-select-dropdown-open-opacity);
2891
2893
  transform:var(--tds-select-dropdown-open-transform);
2892
- transition:var(--tds-select-dropdown-transition);
2894
+ transition:var(--tds-select-dropdown-transition-enter);
2893
2895
  }
2894
2896
 
2895
2897
  :is(.tds-select:has( > button) [popover]):not(:popover-open){
2896
2898
  opacity:var(--tds-select-dropdown-closed-opacity);
2897
2899
  transform:var(--tds-select-dropdown-closed-transform);
2900
+ transition:var(--tds-select-dropdown-transition-exit);
2898
2901
  }
2899
2902
 
2900
2903
  :is(.tds-select:has( > button) [popover]) ul{
@@ -2934,6 +2937,7 @@ a[class="tds-btn"]{
2934
2937
  :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2935
2938
  opacity:var(--tds-select-dropdown-closed-opacity);
2936
2939
  transform:var(--tds-select-dropdown-closed-transform);
2940
+ transition:var(--tds-select-dropdown-transition-exit);
2937
2941
  }
2938
2942
 
2939
2943
  :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
@@ -2980,7 +2984,7 @@ a[class="tds-btn"]{
2980
2984
  box-shadow:var(--tds-select-dropdown-box-shadow);
2981
2985
  opacity:var(--tds-select-dropdown-open-opacity);
2982
2986
  transform:var(--tds-select-dropdown-open-transform);
2983
- transition:var(--tds-select-dropdown-transition);
2987
+ transition:var(--tds-select-dropdown-transition-enter);
2984
2988
  }
2985
2989
 
2986
2990
  :is(.tds-select select:has( > button)) option::checkmark{