@planningcenter/tapestry 3.1.0 → 3.1.1-rc.1

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 (11) hide show
  1. package/dist/index.css +123 -137
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +1247 -1261
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +1247 -1261
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tokens.css +10 -0
  8. package/dist/tokens.css.map +1 -1
  9. package/dist/unstable.css +123 -137
  10. package/dist/unstable.css.map +1 -1
  11. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -402,6 +402,16 @@
402
402
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
403
403
  --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
404
404
  --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
405
+ --t-ease-linear:linear;
406
+ --t-ease-in:cubic-bezier(0.5, 0, 1, 1);
407
+ --t-ease-out:cubic-bezier(0, 0, 0.4, 1);
408
+ --t-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
409
+ --t-duration-0:0ms;
410
+ --t-duration-100:85ms;
411
+ --t-duration-200:130ms;
412
+ --t-duration-300:160ms;
413
+ --t-duration-400:240ms;
414
+ --t-duration-500:400ms;
405
415
  --t-focus-ring-color:var(--t-fill-color-interaction);
406
416
  --t-focus-ring-offset:2px;
407
417
  --t-focus-ring-outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
@@ -979,154 +989,133 @@
979
989
  }
980
990
 
981
991
  .tds-page-header:not(.has-nav){
982
- padding-bottom:var(--tds-page-header-padding-y);
983
- }
992
+ padding-bottom:var(--tds-page-header-padding-y);
993
+ }
984
994
 
985
995
  .tds-page-header.inactive{
986
- background:var(--tds-page-header-background-color-inactive);
987
- }
988
-
989
- .tds-page-header__title-bar{
990
- display:flex;
991
- flex-direction:column;
992
- gap:var(--t-spacing-2) var(--t-spacing-1);
993
- align-items:flex-start;
994
- justify-content:space-between;
995
- padding:0 var(--tds-page-header-padding-x);
996
- }
996
+ background:var(--tds-page-header-background-color-inactive);
997
+ }
997
998
 
998
- .tds-page-header--profile > .tds-page-header__title-bar{
999
- align-items:center;
1000
- }
999
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1000
+ width:100%;
1001
+ }
1001
1002
 
1002
- .tds-page-header__primary{
1003
- width:100%;
1004
- }
1003
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1004
+ display:flex;
1005
+ flex-flow:row wrap;
1006
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1007
+ align-items:flex-start;
1008
+ justify-content:flex-start;
1009
+ min-width:0;
1010
+ }
1005
1011
 
1006
- .tds-page-header__primary h1{
1007
- margin:0;
1008
- font-size:var(--tds-page-header-headline-font-size);
1009
- font-weight:var(--t-font-weight-normal);
1010
- line-height:32px;
1011
- color:var(--tds-page-header-headline-color);
1012
- overflow-wrap:break-word;
1013
- }
1012
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1013
+ display:flex;
1014
+ gap:var(--tds-page-header-nav-gap);
1015
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1016
+ margin:0 0 -1px;
1017
+ overflow:auto;
1018
+ list-style:none;
1019
+ background:var(--tds-page-header-nav-background);
1020
+ }
1014
1021
 
1015
- .tds-page-header [slot="actions"],
1016
- .tds-page-header .tds-page-header__actions{
1017
- width:100%;
1018
- }
1022
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1023
+ position:relative;
1024
+ display:inline-flex;
1025
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1026
+ font-size:var(--t-font-size-sm);
1027
+ line-height:22px;
1028
+ color:var(--tds-page-header-nav-item-color);
1029
+ white-space:nowrap;
1030
+ text-decoration:none;
1031
+ -webkit-appearance:none;
1032
+ -moz-appearance:none;
1033
+ appearance:none;
1034
+ cursor:pointer;
1035
+ outline-offset:-2px;
1036
+ background-color:var(--tds-page-header-nav-item-background-color);
1037
+ background-clip:padding-box;
1038
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1039
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1040
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1041
+ }
1042
+
1043
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1044
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1045
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1046
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1047
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1048
+ }
1019
1049
 
1020
- .has-multi-actions.tds-page-header [slot="actions"],
1021
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1022
- display:flex;
1023
- flex-flow:row wrap;
1024
- gap:var(--t-spacing-half) var(--t-spacing-1);
1025
- align-items:flex-start;
1026
- justify-content:flex-start;
1027
- min-width:0;
1028
- }
1050
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1051
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1052
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1053
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1054
+ }
1029
1055
 
1030
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1031
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1032
- .tds-page-header nav[slot="navigation"] ul,
1033
- .tds-page-header nav.tds-page-header__nav ul{
1034
- display:flex;
1035
- gap:var(--tds-page-header-nav-gap);
1036
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1037
- margin:0 0 -1px;
1038
- overflow:auto;
1039
- list-style:none;
1040
- background:var(--tds-page-header-nav-background);
1041
- }
1056
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1057
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1058
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1059
+ }
1042
1060
 
1043
- .tds-page-header nav[slot="navigation"] a,
1044
- .tds-page-header nav[slot="navigation"] button,
1045
- .tds-page-header nav.tds-page-header__nav a,
1046
- .tds-page-header nav.tds-page-header__nav button{
1047
- position:relative;
1048
- display:inline-flex;
1049
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1050
- font-size:var(--t-font-size-sm);
1051
- line-height:22px;
1052
- color:var(--tds-page-header-nav-item-color);
1053
- white-space:nowrap;
1054
- text-decoration:none;
1055
- -webkit-appearance:none;
1056
- -moz-appearance:none;
1057
- appearance:none;
1058
- cursor:pointer;
1059
- outline-offset:-2px;
1060
- background-color:var(--tds-page-header-nav-item-background-color);
1061
- background-clip:padding-box;
1062
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1063
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1064
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1065
- }
1061
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1062
+ color:var(--tds-page-header-nav-item-color-disabled);
1063
+ cursor:not-allowed;
1064
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1065
+ opacity:1;
1066
+ }
1066
1067
 
1067
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1068
- position:relative;
1069
- }
1068
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1069
+ position:relative;
1070
+ }
1070
1071
 
1071
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1072
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1073
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1074
- }
1072
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1073
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1074
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1075
+ }
1075
1076
 
1076
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1077
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1078
- position:absolute;
1079
- top:-5px;
1080
- right:-2px;
1081
- width:10px;
1082
- height:10px;
1083
- content:"";
1084
- background:var(--tds-page-header-nav-item-indicator-color);
1085
- border-radius:50%;
1086
- }
1077
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1078
+ position:absolute;
1079
+ top:-5px;
1080
+ right:-2px;
1081
+ width:10px;
1082
+ height:10px;
1083
+ content:"";
1084
+ background:var(--tds-page-header-nav-item-indicator-color);
1085
+ border-radius:50%;
1086
+ }
1087
1087
 
1088
1088
  @media (prefers-reduced-motion: no-preference){
1089
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1090
- animation:indicator-pulse 1.25s ease infinite;
1091
- }
1092
- }
1089
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1090
+ animation:indicator-pulse 1.25s ease infinite;
1091
+ }
1092
+ }
1093
1093
 
1094
- .tds-page-header nav[slot="navigation"] a.selected,
1095
- .tds-page-header nav[slot="navigation"] button.selected,
1096
- .tds-page-header nav.tds-page-header__nav a.selected,
1097
- .tds-page-header nav.tds-page-header__nav button.selected{
1098
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1099
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1100
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1101
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1094
+ .tds-page-header__title-bar{
1095
+ display:flex;
1096
+ flex-direction:column;
1097
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1098
+ align-items:flex-start;
1099
+ justify-content:space-between;
1100
+ padding:0 var(--tds-page-header-padding-x);
1102
1101
  }
1103
1102
 
1104
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1105
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1106
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1107
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1108
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1109
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1110
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1111
- }
1103
+ .tds-page-header--profile > .tds-page-header__title-bar{
1104
+ align-items:center;
1105
+ }
1112
1106
 
1113
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1114
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1115
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1116
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1117
- background-color:var(--tds-page-header-nav-item-background-color-active);
1118
- border-color:var(--tds-page-header-nav-item-border-color-active);
1107
+ .tds-page-header__primary{
1108
+ width:100%;
1119
1109
  }
1120
1110
 
1121
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1122
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1123
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1124
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1125
- color:var(--tds-page-header-nav-item-color-disabled);
1126
- cursor:not-allowed;
1127
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1128
- opacity:1;
1129
- }
1111
+ .tds-page-header__primary h1{
1112
+ margin:0;
1113
+ font-size:var(--tds-page-header-headline-font-size);
1114
+ font-weight:var(--t-font-weight-normal);
1115
+ line-height:32px;
1116
+ color:var(--tds-page-header-headline-color);
1117
+ overflow-wrap:break-word;
1118
+ }
1130
1119
 
1131
1120
  @media (min-width: 960px){
1132
1121
  .tds-page-header__primary{
@@ -1142,16 +1131,13 @@
1142
1131
  row-gap:12px;
1143
1132
  align-items:flex-start;
1144
1133
  }
1134
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1135
+ width:auto;
1136
+ }
1145
1137
 
1146
- .tds-page-header [slot="actions"],
1147
- .tds-page-header .tds-page-header__actions{
1148
- width:auto;
1149
- }
1150
-
1151
- .has-multi-actions.tds-page-header [slot="actions"],
1152
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1153
- justify-content:flex-end;
1154
- }
1138
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1139
+ justify-content:flex-end;
1140
+ }
1155
1141
  }
1156
1142
 
1157
1143
  .tds-page-header-phone,