Table styles (#394)

* fixes #319

* cut v1.5.14 with <table> styles in normalize

docsite/index.html

@@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1>
           </li>
         </ul>
         <small>
-          v1.5.13
+          v1.5.14
           <span class="license">
             <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
               <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>

package.json

@@ -3,7 +3,7 @@
   "name": "open-props",
   "author": "Adam Argyle",
   "license": "MIT",
-  "version": "1.5.13",
+  "version": "1.5.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/argyleink/open-props"

src/extra/normalize.src.css

@@ -292,3 +292,78 @@
 :where(sup) {
   font-size: .5em;
 }
+
+:where(table) {
+  width: fit-content;
+  border: 1px solid var(--surface-2);
+  background: var(--surface-2);
+  border-radius: var(--radius-3);
+
+  --nice-inner-radius: calc(var(--radius-3) - 2px);
+}
+
+:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
+  border-bottom-left-radius: var(--nice-inner-radius);
+}
+
+:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
+  border-bottom-right-radius: var(--nice-inner-radius);
+}
+
+:where(table thead th:first-child) {
+  border-top-left-radius: var(--nice-inner-radius);
+}
+
+:where(table thead th:last-child) {
+  border-top-right-radius: var(--nice-inner-radius);
+}
+
+:where(tfoot th:first-of-type) {
+  border-end-start-radius: var(--nice-inner-radius);
+}
+
+:where(tfoot th:last-of-type) {
+  border-end-end-radius: var(--nice-inner-radius);
+}
+
+:where(th) {
+  color: var(--text-1);
+  background-color: var(--surface-2);
+}
+
+:where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
+  outline-offset: -2px;
+}
+
+:where(td) {
+  background: var(--surface-1);
+  max-inline-size: var(--size-content-2);
+  text-wrap: pretty;
+}
+
+:where(td,th) {
+  text-align: left;
+  padding: var(--size-2);
+}
+
+:where(thead) {
+  border-collapse: collapse;
+}
+
+:where(table tr:hover td),
+:where(tbody tr:nth-child(even):hover td) {
+  background-color: var(--gray-10);
+
+  @media (prefers-color-scheme: light) {
+    background-color: white;
+  }
+}
+
+:where(table > caption) {
+  margin: var(--size-3);
+}
+
+:where(tfoot button) {
+  padding-block: var(--size-1);
+  padding-inline: var(--size-3);
+}