Commit
Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Wed, 23 Aug 2023 19:42:38 +0000
Hash: de9daf9f44b47c68a4747e567e0085e9b0f98d6a
Timestamp: Wed, 23 Aug 2023 19:42:38 +0000 (1 year ago)

+77 -2 +/-3 browse
Table styles (#394) 
Table styles (#394)

* fixes #319

* cut v1.5.14 with <table> styles in normalize
1diff --git a/docsite/index.html b/docsite/index.html
2index 136e6d4..854f18b 100644
3--- a/docsite/index.html
4+++ b/docsite/index.html
5 @@ -119,7 +119,7 @@
6 </li>
7 </ul>
8 <small>
9- v1.5.13
10+ v1.5.14
11 <span class="license">
12 <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
13 <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>
14 diff --git a/package.json b/package.json
15index d64106e..94e9df5 100644
16--- a/package.json
17+++ b/package.json
18 @@ -3,7 +3,7 @@
19 "name": "open-props",
20 "author": "Adam Argyle",
21 "license": "MIT",
22- "version": "1.5.13",
23+ "version": "1.5.14",
24 "repository": {
25 "type": "git",
26 "url": "https://github.com/argyleink/open-props"
27 diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css
28index d87cf63..3984a86 100644
29--- a/src/extra/normalize.src.css
30+++ b/src/extra/normalize.src.css
31 @@ -292,3 +292,78 @@
32 :where(sup) {
33 font-size: .5em;
34 }
35+
36+ :where(table) {
37+ width: fit-content;
38+ border: 1px solid var(--surface-2);
39+ background: var(--surface-2);
40+ border-radius: var(--radius-3);
41+
42+ --nice-inner-radius: calc(var(--radius-3) - 2px);
43+ }
44+
45+ :where(table:not(:has(tfoot)) tr:last-child td:first-child) {
46+ border-bottom-left-radius: var(--nice-inner-radius);
47+ }
48+
49+ :where(table:not(:has(tfoot)) tr:last-child td:last-child) {
50+ border-bottom-right-radius: var(--nice-inner-radius);
51+ }
52+
53+ :where(table thead th:first-child) {
54+ border-top-left-radius: var(--nice-inner-radius);
55+ }
56+
57+ :where(table thead th:last-child) {
58+ border-top-right-radius: var(--nice-inner-radius);
59+ }
60+
61+ :where(tfoot th:first-of-type) {
62+ border-end-start-radius: var(--nice-inner-radius);
63+ }
64+
65+ :where(tfoot th:last-of-type) {
66+ border-end-end-radius: var(--nice-inner-radius);
67+ }
68+
69+ :where(th) {
70+ color: var(--text-1);
71+ background-color: var(--surface-2);
72+ }
73+
74+ :where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
75+ outline-offset: -2px;
76+ }
77+
78+ :where(td) {
79+ background: var(--surface-1);
80+ max-inline-size: var(--size-content-2);
81+ text-wrap: pretty;
82+ }
83+
84+ :where(td,th) {
85+ text-align: left;
86+ padding: var(--size-2);
87+ }
88+
89+ :where(thead) {
90+ border-collapse: collapse;
91+ }
92+
93+ :where(table tr:hover td),
94+ :where(tbody tr:nth-child(even):hover td) {
95+ background-color: var(--gray-10);
96+
97+ @media (prefers-color-scheme: light) {
98+ background-color: white;
99+ }
100+ }
101+
102+ :where(table > caption) {
103+ margin: var(--size-3);
104+ }
105+
106+ :where(tfoot button) {
107+ padding-block: var(--size-1);
108+ padding-inline: var(--size-3);
109+ }
110\ No newline at end of file