@planningcenter/tapestry 4.0.0-rc.20 → 4.0.0-rc.21

package/dist/unstable.css

@@ -329,39 +329,95 @@
 .tds-data-table-cell--numeric{
   font-variant-numeric:tabular-nums;
 }
+
+.tds-data-table-column--selectable,
+.tds-data-table-cell--selectable{
+  width:3rem;
+  text-align:center;
+}
 .tds-data-table-selectable-checkbox{
+  --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
+  --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
+  --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
+  --tds-data-table-selectable-checkbox-cursor:pointer;
+  --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
+  --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
+
+  --tds-data-table-selectable-checkbox-icon:none;
+  --tds-data-table-selectable-checkbox-icon-visibility:hidden;
+  --tds-data-table-selectable-checkbox-icon-opacity:0;
+  --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
+
   position:relative;
-  display:inline-block;
-  width:1em;
-  height:1em;
-  vertical-align:middle;
-  cursor:pointer;
-  border:var(--t-form-border-width) solid var(--t-form-border-color);
-  border-radius:var(--t-border-radius-sm);
+  display:block;
+  width:var(--tds-data-table-selectable-checkbox-size);
+  height:var(--tds-data-table-selectable-checkbox-size);
+  margin-inline:auto;
+  cursor:var(--tds-data-table-selectable-checkbox-cursor);
+  background-color:var(--tds-data-table-selectable-checkbox-background-color);
+  border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
+  border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
+  transition-timing-function:var(--t-ease-in-out);
+  transition-duration:var(--t-duration-200);
+  transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
 }
+.tds-data-table-selectable-checkbox::after{
+    position:absolute;
+    inset:0;
+    content:"";
+    transform:scale(2);
+  }
 .tds-data-table-selectable-checkbox::before{
     position:absolute;
     inset:0;
-    display:flex;
-    visibility:hidden;
-    align-items:center;
-    justify-content:center;
+    visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
     content:"";
-    opacity:0;
+    background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
+    border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
+    opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
+    -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
+            mask-image:var(--tds-data-table-selectable-checkbox-icon);
+    -webkit-mask-repeat:no-repeat;
+            mask-repeat:no-repeat;
+    -webkit-mask-size:contain;
+            mask-size:contain;
+  }
+.tds-data-table-selectable-checkbox[data-hovered]{
+    --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
+    --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
   }
 .tds-data-table-selectable-checkbox[data-focus-visible]{
     outline:var(--t-focus-ring-outline);
     outline-offset:var(--t-focus-ring-offset);
   }
-:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate])::before{
-      visibility:visible;
-      opacity:1;
+.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
+    --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
+    --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
+    --tds-data-table-selectable-checkbox-icon-visibility:visible;
+    --tds-data-table-selectable-checkbox-icon-opacity:1;
+  }
+[data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]){
+      --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
+      --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
     }
-.tds-data-table-selectable-checkbox[data-selected]::before{
-    content:"✅";
+.tds-data-table-selectable-checkbox[data-selected]{
+    --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  }
+.tds-data-table-selectable-checkbox[data-indeterminate]{
+    --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
   }
-.tds-data-table-selectable-checkbox[data-indeterminate]::before{
-    content:"➖";
+.tds-data-table-selectable-checkbox[data-disabled]{
+    --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
+    --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
+    --tds-data-table-selectable-checkbox-cursor:not-allowed;
+  }
+.tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
+      --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
+    }
+@media (prefers-reduced-motion: reduce){
+.tds-data-table-selectable-checkbox{
+    --tds-data-table-selectable-checkbox-transition-property:none;
+}
   }
 
 .tds-loading-spinner{