diff --git a/src/system-selectors.css b/src/system-selectors.css index db1d5bf..92df003 100644 --- a/src/system-selectors.css +++ b/src/system-selectors.css @@ -43,6 +43,9 @@ } } } + body > footer { + border-block-start: thin solid currentcolor; + } body > :is(header, main, footer):not(:has(*)) { display: none; @@ -302,12 +305,13 @@ } table { + display: block; + overflow-x: auto; border-collapse: collapse; width: 100%; font-family: var(--system-font-family-data); font-size: smaller; } - td, th { border: var(--system-stroke-thin) solid var(--system-stroke-color); @@ -386,7 +390,17 @@ max-inline-size: 100%; block-size: auto; } - + main :is(img, picture, svg) { + float: inline-end; + margin-inline-start: var(--system-spacing-main-inline); + max-inline-size: 30cqw; + } + @container --content (width < 42ch) { + main :is(img, picture, svg) { + width: 100%; + max-inline-size: unset; + } + } @media (prefers-reduced-motion: reduce) { *, *::before, diff --git a/style-api.html b/style-api.html index b74c0b8..d1b02b8 100644 --- a/style-api.html +++ b/style-api.html @@ -24,11 +24,8 @@
- A number of system values don't work well in dark mode. With color-mix()
we create
- overrides that are easy to maintain.
-
With color-mix()
we create light and dark mode overrides that are easy to maintain.
--system-canvas: color-mix(
in oklab,
@@ -74,7 +71,7 @@ heading
--system-canvas-text
- --system-field
+ CanvasText
--system-field
@@ -122,6 +119,8 @@ heading
+ Browser Bugs
+ A number of system values don't work well in dark mode.