@planningcenter/tapestry 2.8.0-rc.15 → 2.8.0-rc.16

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 (33) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/index.css +26 -10
  4. package/dist/index.css.map +1 -1
  5. package/dist/reactRender.css +26 -10
  6. package/dist/reactRender.css.map +1 -1
  7. package/dist/reactRenderLegacy.css +26 -10
  8. package/dist/reactRenderLegacy.css.map +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-C_7pBu3k.js → p-BI9yOeO7.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-C_7pBu3k.js.map → p-BI9yOeO7.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-o1tW1kNf.js → p-CA8BnUB_.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-o1tW1kNf.js.map → p-CA8BnUB_.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-DfQpCk5x.js → p-CWbdSiUn.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/{p-DfQpCk5x.js.map → p-CWbdSiUn.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-i6MOxNBO.js → p-D5gyTGJV.js} +3 -3
  16. package/dist/tapestry-wc/dist/components/{p-i6MOxNBO.js.map → p-D5gyTGJV.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/{p-Bcr6lH9K.js → p-DOABRZ-u.js} +2 -2
  18. package/dist/tapestry-wc/dist/components/{p-Bcr6lH9K.js.map → p-DOABRZ-u.js.map} +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  20. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  28. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  29. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  30. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  31. package/dist/unstable.css +26 -10
  32. package/dist/unstable.css.map +1 -1
  33. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -9,31 +9,32 @@
9
9
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
10
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
11
  --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
12
13
  --tds-page-header-headline-color:var(--t-text-color-headline);
13
14
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
14
15
  --tds-page-header-padding-x:var(--t-spacing-2);
15
16
  --tds-page-header-padding-y:var(--t-spacing-2);
16
17
  --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
17
18
  --tds-page-header-nav-gap:var(--t-spacing-1);
18
- --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
19
20
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
20
21
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
21
22
  --tds-page-header-nav-item-color:var(--t-text-color-secondary);
22
- --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
23
24
  --tds-page-header-nav-item-border-width:1px;
24
25
 
25
26
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
26
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
27
28
 
28
29
  --tds-page-header-nav-item-color-hover:var(--t-text-color);
29
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
30
31
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
31
32
 
32
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
33
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
34
35
 
35
36
  --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
36
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
37
38
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
38
39
 
39
40
  --tds-page-header-nav-item-color-selected:var(--t-text-color);
@@ -46,10 +47,19 @@
46
47
  .tds-page-header--profile{
47
48
  --tds-page-header-padding-y:20px;
48
49
  }
50
+
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
56
+ }
57
+
49
58
  @media (min-width: 600px){
50
59
  .tds-page-header{
51
60
  --tds-page-header-background-color:var(--t-surface-color-canvas);
52
61
  --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
53
63
  --tds-page-header-padding-x:var(--t-spacing-3);
54
64
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
55
65
  --tds-page-header-nav-gap:var(--t-spacing-half);
@@ -58,6 +68,9 @@
58
68
  --tds-page-header-nav-item-border-width:1px;
59
69
  --tds-page-header-nav-item-color:var(--t-text-color);
60
70
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
61
74
  --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
62
75
  }
63
76
  }
@@ -69,7 +82,7 @@
69
82
  padding-top:var(--tds-page-header-padding-y);
70
83
  color:var(--tds-page-header-color);
71
84
  background:var(--tds-page-header-background-color);
72
- border-bottom:1px solid var(--t-border-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
73
86
  }
74
87
 
75
88
  .tds-page-header:not(.has-nav){
@@ -106,7 +119,8 @@
106
119
  overflow-wrap:break-word;
107
120
  }
108
121
 
109
- .tds-page-header [slot="actions"], .tds-page-header .tds-page-header__actions{
122
+ .tds-page-header [slot="actions"],
123
+ .tds-page-header .tds-page-header__actions{
110
124
  width:100%;
111
125
  }
112
126
 
@@ -207,6 +221,7 @@
207
221
  .tds-page-header nav[slot="navigation"] button:not(.selected):active,
208
222
  .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
209
223
  .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
224
+ border-color:var(--tds-page-header-nav-item-border-color-active);
210
225
  background-color:var(--tds-page-header-nav-item-background-color-active);
211
226
  }
212
227
 
@@ -235,7 +250,8 @@
235
250
  align-items:flex-start;
236
251
  }
237
252
 
238
- .tds-page-header [slot="actions"], .tds-page-header .tds-page-header__actions{
253
+ .tds-page-header [slot="actions"],
254
+ .tds-page-header .tds-page-header__actions{
239
255
  width:auto;
240
256
  }
241
257