@planningcenter/tapestry 3.1.1-rc.0 → 3.1.1-rc.2

package/dist/index.css

@@ -402,6 +402,16 @@
   --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
   --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --t-ease-linear:linear;
+  --t-ease-in:cubic-bezier(0.5, 0, 1, 1);
+  --t-ease-out:cubic-bezier(0, 0, 0.4, 1);
+  --t-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
+  --t-duration-0:0ms;
+  --t-duration-100:85ms;
+  --t-duration-200:130ms;
+  --t-duration-300:160ms;
+  --t-duration-400:240ms;
+  --t-duration-500:400ms;
   --t-focus-ring-color:var(--t-fill-color-interaction);
   --t-focus-ring-offset:2px;
   --t-focus-ring-outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
@@ -1527,7 +1537,9 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   background-clip:padding-box;
   border:var(--tds-btn-border-width) solid var(--tds-btn-border-color);
   border-radius:var(--tds-btn-border-radius);
-  transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  transition-timing-function:var(--t-ease-in-out);
+  transition-duration:var(--t-duration-200);
+  transition-property:color, background-color, border-color, box-shadow, fill, stroke, opacity;
 }
 
 .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))){
@@ -1912,7 +1924,7 @@ a[class="tds-btn"]{
   }
 
 .tds-btn--dropdown .suffix{
-  transition:transform .2s ease-in-out;
+  transition:transform var(--t-duration-300) var(--t-ease-in-out);
 }
 
 .tds-btn--dropdown[aria-expanded="true"] .suffix{
@@ -2033,8 +2045,8 @@ a[class="tds-btn"]{
     background-color:var(--tds-checkbox-input-background-color);
     border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
     border-radius:var(--tds-checkbox-input-border-radius);
-    transition-timing-function:ease-in-out;
-    transition-duration:180ms;
+    transition-timing-function:var(--t-ease-in-out);
+    transition-duration:var(--t-duration-200);
     transition-property:var(--tds-checkbox-transition-property);
   }
 
@@ -2215,8 +2227,8 @@ a[class="tds-btn"]{
 
 .tds-input :is(input,textarea){
     inline-size:100%;
-    min-block-size:var(--tds-input-min-height);
     block-size:auto;
+    min-block-size:var(--tds-input-min-height);
     padding-block:var(--tds-input-padding-block);
     padding-inline:var(--tds-input-padding-inline);
     font-family:inherit;
@@ -2230,8 +2242,8 @@ a[class="tds-btn"]{
     background-color:var(--tds-input-background-color);
     border:var(--t-form-border-width) solid var(--tds-input-border-color);
     border-radius:var(--t-form-border-radius);
-    transition-timing-function:ease-in-out;
-    transition-duration:180ms;
+    transition-timing-function:var(--t-ease-in-out);
+    transition-duration:var(--t-duration-200);
     transition-property:var(--tds-input-transition-property);
   }
 
@@ -2377,8 +2389,8 @@ a[class="tds-btn"]{
     background-color:var(--tds-radio-input-background-color);
     border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
     border-radius:var(--tds-radio-input-border-radius);
-    transition-timing-function:ease-in-out;
-    transition-duration:180ms;
+    transition-timing-function:var(--t-ease-in-out);
+    transition-duration:var(--t-duration-200);
     transition-property:var(--tds-radio-transition-property);
   }
 
@@ -2560,7 +2572,7 @@ a[class="tds-btn"]{
   --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQzYTQwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIgNSA2IDYgNi02Ii8+PC9zdmc+");
   --tds-select-caret-size:.75em;
   --tds-select-caret-inline-offset:.75em;
-  --tds-select-caret-transition:transform 180ms cubic-bezier(.45, 0, .4, 1);;
+  --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
 
   --tds-select-dropdown-background-color:var(--t-surface-color-card);
   --tds-select-dropdown-border:1px solid var(--t-border-color);
@@ -2571,8 +2583,8 @@ a[class="tds-btn"]{
   --tds-select-dropdown-border-radius:var(--t-border-radius);
   --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
   --tds-select-dropdown-scroll-behavior:smooth;
-  --tds-select-dropdown-transition-enter:opacity 160ms ease, transform 160ms cubic-bezier(0, 0, .4, 1), display 160ms allow-discrete, overlay 160ms allow-discrete;
-  --tds-select-dropdown-transition-exit:opacity 130ms ease, transform 130ms cubic-bezier(.5, 0, 1, 1), display 130ms allow-discrete, overlay 130ms allow-discrete;
+  --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
+  --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
   --tds-select-dropdown-closed-opacity:0;
   --tds-select-dropdown-open-opacity:1;
   --tds-select-dropdown-closed-transform:translateY(-8px);
@@ -2597,7 +2609,7 @@ a[class="tds-btn"]{
   --tds-select-group-label-color:var(--t-text-color-secondary);
   --tds-select-group-label-color-stuck:var(--t-text-color-headline);
   --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
-  --tds-select-group-label-transition:color .3s ease;
+  --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
 
   position:relative;
   display:flex;
@@ -2638,8 +2650,8 @@ a[class="tds-btn"]{
     background-size:var(--tds-select-caret-size);
     border:var(--t-form-border-width) solid var(--tds-select-border-color);
     border-radius:var(--t-form-border-radius);
-    transition-timing-function:ease-in-out;
-    transition-duration:160ms;
+    transition-timing-function:var(--t-ease-in-out);
+    transition-duration:var(--t-duration-300);
     transition-property:var(--tds-select-transition-property);
   }
 
@@ -2822,7 +2834,7 @@ a[class="tds-btn"]{
     color:var(--tds-select-placeholder-color);
     white-space:nowrap;
     background-image:none;
-    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;
+    transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
     -webkit-tap-highlight-color:transparent;
   }
 
@@ -3019,8 +3031,8 @@ a[class="tds-btn"]{
   --tds-input-scrollbar-thumb-border-width:3px;
   --tds-input-scrollbar-track-margin-block:.125rem;
   scrollbar-color:initial;
-  transition-timing-function:ease-in-out;
-  transition-duration:180ms;
+  transition-timing-function:var(--t-ease-in-out);
+  transition-duration:var(--t-duration-200);
   transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
 }
 
@@ -3093,11 +3105,11 @@ a[class="tds-btn"]{
   --tds-toggle-switch-track-outline:none;
   --tds-toggle-switch-track-height:var(--t-container-size-xs);
   --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
-  --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
+  --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
 
   --tds-toggle-switch-thumb-size:var(--t-element-size-md);
   --tds-toggle-switch-thumb-transform:translateX(0);
-  --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
+  --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
 
   --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
   --tds-toggle-switch-description-line-height:1.35;