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

package/dist/components/page-header/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-Bcr6lH9K.js';
+import '../../tapestry-wc/dist/components/p-DOABRZ-u.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-page-header.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-page-header-nav.js';
 

package/dist/components/sidenav/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-Bcr6lH9K.js';
+import '../../tapestry-wc/dist/components/p-DOABRZ-u.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';

package/dist/index.css

@@ -980,31 +980,32 @@
     --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
     --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
     --tds-page-header-color:var(--t-text-color);
+    --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
     --tds-page-header-headline-color:var(--t-text-color-headline);
     --tds-page-header-headline-font-size:var(--t-font-size-2xl);
     --tds-page-header-padding-x:var(--t-spacing-2);
     --tds-page-header-padding-y:var(--t-spacing-2);
     --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
     --tds-page-header-nav-gap:var(--t-spacing-1);
-    --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
+    --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%);
     --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
     --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
     --tds-page-header-nav-item-color:var(--t-text-color-secondary);
-    --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
+    --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
     --tds-page-header-nav-item-border-width:1px;
 
     --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
-    --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
+    --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
 
     --tds-page-header-nav-item-color-hover:var(--t-text-color);
-    --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
+    --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
     --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
 
-    --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
-    --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
+    --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
+    --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
 
     --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
-    --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
+    --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
     --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
 
     --tds-page-header-nav-item-color-selected:var(--t-text-color);
@@ -1017,10 +1018,19 @@
   .tds-page-header--profile{
     --tds-page-header-padding-y:20px;
   }
+
+  @supports (color: light-dark(#fff, #000)){
+    .tds-page-header{
+      --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
+      --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
+    }
+  }
+
   @media (min-width: 600px){
     .tds-page-header{
       --tds-page-header-background-color:var(--t-surface-color-canvas);
       --tds-page-header-color:var(--t-text-color-secondary);
+      --tds-page-header-bottom-border-color:var(--t-border-color);
       --tds-page-header-padding-x:var(--t-spacing-3);
       --tds-page-header-headline-font-size:var(--t-font-size-3xl);
       --tds-page-header-nav-gap:var(--t-spacing-half);
@@ -1029,6 +1039,9 @@
       --tds-page-header-nav-item-border-width:1px;
       --tds-page-header-nav-item-color:var(--t-text-color);
       --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
+      --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
+      --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
+      --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
       --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
     }
   }
@@ -1040,7 +1053,7 @@
   padding-top:var(--tds-page-header-padding-y);
   color:var(--tds-page-header-color);
   background:var(--tds-page-header-background-color);
-  border-bottom:1px solid var(--t-border-color);
+  border-bottom:1px solid var(--tds-page-header-bottom-border-color);
 }
 
 .tds-page-header:not(.has-nav){
@@ -1077,7 +1090,8 @@
   overflow-wrap:break-word;
 }
 
-.tds-page-header [slot="actions"], .tds-page-header .tds-page-header__actions{
+.tds-page-header [slot="actions"],
+.tds-page-header .tds-page-header__actions{
   width:100%;
 }
 
@@ -1178,6 +1192,7 @@
 .tds-page-header nav[slot="navigation"] button:not(.selected):active,
 .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
 .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
+  border-color:var(--tds-page-header-nav-item-border-color-active);
   background-color:var(--tds-page-header-nav-item-background-color-active);
 }
 
@@ -1206,7 +1221,8 @@
     align-items:flex-start;
   }
 
-  .tds-page-header [slot="actions"], .tds-page-header .tds-page-header__actions{
+  .tds-page-header [slot="actions"],
+  .tds-page-header .tds-page-header__actions{
     width:auto;
   }