From a0922af2cd563c47291f11dded62996bc1715b04 Mon Sep 17 00:00:00 2001 From: Egor Kloos Date: Tue, 9 Jan 2024 12:11:46 +0100 Subject: [PATCH] Added a more complete example page --- example.html | 286 ++++++++++++++++++++++++++ forms.html | 7 +- index.html | 203 +----------------- openprops.html | 285 +++++++++++++++---------- src/system-colors.css | 2 +- src/system-custom-colors.css | 2 +- src/system-selectors.css | 22 +- style-api.html | 3 +- theme/openprops/system-open-props.css | 14 +- 9 files changed, 502 insertions(+), 322 deletions(-) create mode 100644 example.html diff --git a/example.html b/example.html new file mode 100644 index 0000000..36e30fd --- /dev/null +++ b/example.html @@ -0,0 +1,286 @@ + + + + + + system.css + + + + + +
+

system.css

+ +
+
+

Heading level 1

+

Heading level 2

+

Heading level 3

+

Heading level 4

+
Heading level 5
+
Heading level 6
+ +

Paragraph

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id risus quis purus mollis + lobortis vel ac tellus. Nam pharetra lorem quis dui commodo dapibus. Curabitur aliquet sapien vitae + ligula pretium sollicitudin. Sed sed magna eu risus placerat gravida non sit amet augue. Morbi volutpat + lobortis imperdiet. Sed elit purus, commodo a mi in, condimentum sagittis urna. Etiam condimentum + pharetra cursus. Aliquam erat volutpat. In vel diam nulla. Praesent faucibus augue quis dui vehicula, a + consequat est fringilla. Sed nec nisi fermentum, maximus nunc ac, hendrerit lorem. Proin mollis metus in + erat dictum egestas. Proin nec ipsum viverra, scelerisque nisi in, faucibus nulla. +

+ +

+ + + + Aspect Ratio 4:3 + If you want the image to float place it inside a <p>, <li>, + <dd>, or a <td>. +

+

+ Nunc accumsan molestie nisl non malesuada. In egestas tellus lectus, nec venenatis tellus pulvinar vel. + Fusce consectetur sodales ante, sed vehicula mauris pulvinar non. Cras tempor ante nec nibh iaculis + aliquet. In quis velit non dui dapibus tempus quis sed velit. Morbi a ornare sem. Maecenas ornare + molestie ex, sed maximus lorem viverra at. In tincidunt vel purus et suscipit. Aenean aliquam neque et + ipsum volutpat, eu laoreet justo vestibulum. Maecenas quam turpis, convallis id nibh efficitur, interdum + volutpat elit. Suspendisse potenti. Nulla in vulputate massa. +

+

+ Normal, abbr, del, dfn, em, + ins, mark, strike through, small, strong, + sub, sup, u +

+ +

Links

+

+ These are links: + never visited link (just don't click or it will becomes visited), visited link. Mouse hover to see effects. +

+ +

Lists

+

Unordered list

+ +

Ordered list

+
    +
  1. List item with a much longer description or more content.
    2. +
  2. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam inventore + voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut commodi odit quae ipsa + quaerat enim. +
    3. +
  3. + List item +
      +
    1. Nested List Item
      2. +
    2. Nested List Item
      3. +
    3. Nested List Item
      4. +
    +
    4. +
  4. List item
    5. +
  5. List item
    6. +
  6. List item
    7. +
+

Mixed

+ +

Definition list

+
+
Definition list
+
+ Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
+
Lorem ipsum dolor sit amet
+
+ Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
+
+

Details & Summary

+
+ Question 1 +

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac + turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat + eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum + sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt + condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. + Donec non enim in turpis pulvinar facilisis. Ut felis. +

+
+ Related documents +

+ Yes, this works. But in general be careful with nesting the + <details> element. +

+ +
+
+
+ Question 2 +

+ Duis consequat metus et eros rutrum, interdum facilisis urna interdum. Etiam facilisis diam in + libero varius ultricies id id est. Sed lacinia pellentesque sem vel sagittis. +

+
+ +

Blockquote

+
+ Those people who think they know everything are a great annoyance to those of us who do. - + Isaac Asimov +
+ +

Code

+

+ This is inline code <div>div element</div>. This is sample output + sample And below is block code. +

+ 
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello World</title>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </body>
+</html>
+

+ The input keyboard Ctrl+S. This is variable: y = mx + b +

+ +

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table headingTable heading
Table footerTable footer
Table dataLorem ipsum dolor sit amet, consectetur adipiscing elit.
Table dataTable data
Table dataTable data
Table dataTable data
+ +

Figure

+ +
+ + + + Aspect Ratio 16:9 + + +
This is a figcaption
+
+
+ + + diff --git a/forms.html b/forms.html index 28fe94f..9146746 100644 --- a/forms.html +++ b/forms.html @@ -13,9 +13,10 @@

system.css

@@ -80,6 +81,10 @@

A form with opinionated style and user validation

+
+ + +
diff --git a/index.html b/index.html index e3c752e..210991b 100644 --- a/index.html +++ b/index.html @@ -13,14 +13,20 @@

system.css

Browsers have a mini design system

-

With this base stylesheet we can utilise a browsers system color and css keywords implementation.

+

+ With this base stylesheet we can utilise a browsers system color and css keywords + implementation. +

Let's build on top of that

This paragraph text is using @@ -32,18 +38,7 @@

Let's build on top of that

delectus dolore enim error id, magni numquam obcaecati quam quas quos rerum sunt suscipit temporibus totam. Blanditiis fuga maxime quae.

-

Heading 2

-

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

-

Heading 3

-

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

-

Heading 4

-

- This is paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur cumque - eligendi enim harum placeat quidem sint tempora voluptas voluptates! Pariatur quam, sed. Cumque deleniti - dicta eum facere hic tempore! -

-
Heading 5
- +

Floating images

@@ -58,190 +53,14 @@

Heading 5
> Aspect Ratio 4:3 This is paragraph text. If you want the image to float place it inside a <detail>, - <p>, <li>, <dd>, or a <td>. + >If you want the image to float place it inside a <p>, <li>, + <dd>, or a <td>.

This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet architecto aspernatur atque aut consequuntur dicta dolore eligendi fugit harum labore maxime, nulla optio pariatur possimus provident quibusdam quos vel.

-
Heading 6
-

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

- -
- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut - harum molestias labore amet possimus exercitationem aperiam earum, doloribus - nobis ducimus maiores quia voluptates quis omnis molestiae quisquam. - Voluptatibus, officiis laudantium? -

- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic culpa, nobis doloremque veniam - non, nihil cupiditate odit repellat est ALT + F4 expedita facilis. Fuga aspernatur, - alias debitis eveniet totam minima vel. -

- -
    -
  • List item
    • -
  • - List item -
      -
    • List item
      • -
    • List item
      • -
    • - Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam - inventore voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut - commodi odit quae ipsa quaerat enim. -
        -
      • List item
        • -
      • List item
        • -
      • List item
        • -
      • List item
        • -
      -
      • -
    • List item
      • -
    -
    • -
  • List item
    • -
  • List item
    • -
- -
    -
  1. Step 1
    2. -
  2. - Step 2 -
      -
    • List item
      • -
    • - Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolore enim? Magnam - provident, alias ab libero molestiae minus, quibusdam velit quo laboriosam at dolorum - possimus repellendus optio nam aut vitae. -
      • -
    • List item
      • -
    • List item
      • -
    -
    3. -
  3. ????
    4. -
  4. PROFIT!!!
    5. -
- -
-
WWW
-
The part of the Internet that contains websites and web pages
-
HTML
-
A markup language for creating web pages
-
CSS
-
A technology to make HTML look better
-
- -
-

- If you think privacy is unimportant for you because you have nothing to hide, you might as well say - free speech is unimportant for you because you have nothing useful to say. -

-

– Edward Snowden

-
- - 
-<!DOCTYPE html>
-<html>
-    <head>
-    <title>Hello World</title>
-    </head>
-    <body>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    </body>
-</html>
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Ho-kago Tea Time -
NameInstrument
Yui HirasawaLead Guitar
Mio AkiyamaBass
Ritsu TainakaDrums
Tsumugi KotobukiKeyboard
Azusa NakanoRhythm Guitar
NameInstrument
- -
- -
- This is the details summary text -

Heading 5

-

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

- - - - Aspect Ratio 16:9 - - -

- This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet - architecto aspernatur atque aut consequuntur dicta dolore eligendi fugit harum labore maxime, nulla - optio pariatur possimus provident quibusdam quos vel. -

-
-
-
- - - - Aspect Ratio 16:9 - - -
diff --git a/openprops.html b/openprops.html index f45f681..cdd921e 100644 --- a/openprops.html +++ b/openprops.html @@ -12,9 +12,11 @@

system.css

@@ -24,46 +26,66 @@

Theme system.css with your own props

Open props. This is a styling solution that works well with system.css. Both focus on the use of CSS Custom Properties.

+
+

Heading level 1

+

Heading level 2

+

Heading level 3

+

Heading level 4

+
Heading level 5
+
Heading level 6
+ +

Paragraph

- This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur - delectus dolore enim error id, magni numquam obcaecati quam quas quos rerum sunt suscipit temporibus - totam. Blanditiis fuga maxime quae. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id risus quis purus mollis + lobortis vel ac tellus. Nam pharetra lorem quis dui commodo dapibus. Curabitur aliquet sapien vitae + ligula pretium sollicitudin. Sed sed magna eu risus placerat gravida non sit amet augue. Morbi volutpat + lobortis imperdiet. Sed elit purus, commodo a mi in, condimentum sagittis urna. Etiam condimentum + pharetra cursus. Aliquam erat volutpat. In vel diam nulla. Praesent faucibus augue quis dui vehicula, a + consequat est fringilla. Sed nec nisi fermentum, maximus nunc ac, hendrerit lorem. Proin mollis metus in + erat dictum egestas. Proin nec ipsum viverra, scelerisque nisi in, faucibus nulla.

-

Heading 2

-

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

-

Heading 3

-

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

-

Heading 4

+

- This is paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur cumque - eligendi enim harum placeat quidem sint tempora voluptas voluptates! Pariatur quam, sed. Cumque deleniti - dicta eum facere hic tempore! + + + + Aspect Ratio 4:3 + If you want the image to float place it inside a <p>, <li>, + <dd>, or a <td>.

-
Heading 5
-

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

- This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet - architecto aspernatur atque aut consequuntur dicta dolore eligendi fugit harum labore maxime, nulla - optio pariatur possimus provident quibusdam quos vel. + Nunc accumsan molestie nisl non malesuada. In egestas tellus lectus, nec venenatis tellus pulvinar vel. + Fusce consectetur sodales ante, sed vehicula mauris pulvinar non. Cras tempor ante nec nibh iaculis + aliquet. In quis velit non dui dapibus tempus quis sed velit. Morbi a ornare sem. Maecenas ornare + molestie ex, sed maximus lorem viverra at. In tincidunt vel purus et suscipit. Aenean aliquam neque et + ipsum volutpat, eu laoreet justo vestibulum. Maecenas quam turpis, convallis id nibh efficitur, interdum + volutpat elit. Suspendisse potenti. Nulla in vulputate massa.

-
Heading 6
-

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

- -
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut - harum molestias labore amet possimus exercitationem aperiam earum, doloribus - nobis ducimus maiores quia voluptates quis omnis molestiae quisquam. - Voluptatibus, officiis laudantium? + Normal, abbr, del, dfn, em, + ins, mark, strike through, small, strong, + sub, sup, u

+

Links

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic culpa, nobis doloremque veniam - non, nihil cupiditate odit repellat est ALT + F4 expedita facilis. Fuga aspernatur, - alias debitis eveniet totam minima vel. + These are links: + never visited link (just don't click or it will becomes visited), visited link. Mouse hover to see effects.

+

Lists

+

Unordered list

  • List item
  • @@ -88,124 +110,166 @@
    Heading 6
  • List item
  • List item
- +

Ordered list

    -
  1. Step 1
    2. +
  2. List item with a much longer description or more content.
  3. - Step 2 -
      -
    • List item
      • + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam inventore + voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut commodi odit quae ipsa + quaerat enim. + +
    • + List item +
        +
      1. Nested List Item
        2. +
      2. Nested List Item
        3. +
      3. Nested List Item
        4. +
      +
      • +
    • List item
      • +
    • List item
      • +
    • List item
      • +
+

Mixed

+
    +
  • List item with a much longer description or more content.
    • +
  • List item
    • +
  • + List item +
      +
    1. Nested list item
    2. - Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolore enim? Magnam - provident, alias ab libero molestiae minus, quibusdam velit quo laboriosam at dolorum - possimus repellendus optio nam aut vitae. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam + inventore voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut + commodi odit quae ipsa quaerat enim.
      3. -
    3. List item
      4. -
    4. List item
      5. -
+
  • Nested list item
    • + -
  • ????
    • -
  • PROFIT!!!
    • - - +
  • List item
    • +
  • List item
    • +
  • List item
    • + +

    Definition list

    -
    WWW
    -
    The part of the Internet that contains websites and web pages
    -
    HTML
    -
    A markup language for creating web pages
    -
    CSS
    -
    A technology to make HTML look better
    +
    Definition list
    +
    + Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
    +
    Lorem ipsum dolor sit amet
    +
    + Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
    - -
    +

    Details & Summary

    +
    + Question 1 +

    + Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac + turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat + eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum + sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt + condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. + Donec non enim in turpis pulvinar facilisis. Ut felis. +

    +
    + Related documents +

    + Yes, this works. But in general be careful with nesting the + <details> element. +

    + +
    +
    +
    + Question 2

    - If you think privacy is unimportant for you because you have nothing to hide, you might as well say - free speech is unimportant for you because you have nothing useful to say. + Duis consequat metus et eros rutrum, interdum facilisis urna interdum. Etiam facilisis diam in + libero varius ultricies id id est. Sed lacinia pellentesque sem vel sagittis.

    -

    – Edward Snowden

    +
    + +

    Blockquote

    +
    + Those people who think they know everything are a great annoyance to those of us who do. - + Isaac Asimov
    +

    Code

    +

    + This is inline code <div>div element</div>. This is sample output + sample And below is block code. + 

     <!DOCTYPE html>
 <html>
-	<head>
+  <head>
 	<title>Hello World</title>
-	</head>
-	<body>
+  </head>
+  <body>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</body>
+  </body>
 </html>
    +

    + The input keyboard Ctrl+S. This is variable: y = mx + b +

    -
    - +

    Table

    - - - + + - + - - + + + + - - + + - - + + - - + + - - + + - - - - - -
    - Ho-kago Tea Time -
    NameInstrumentTable headingTable heading
    Yui HirasawaLead GuitarTable footerTable footer
    Mio AkiyamaBassTable dataLorem ipsum dolor sit amet, consectetur adipiscing elit.
    Ritsu TainakaDrumsTable dataTable data
    Tsumugi KotobukiKeyboardTable dataTable data
    Azusa NakanoRhythm GuitarTable dataTable data
    NameInstrument
    -
    +

    Figure

    -
    - This is the details summary text -

    Heading 5

    -

    This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

    - - - - Aspect Ratio 16:9 - - -

    - This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet - architecto aspernatur atque aut consequuntur dicta dolore eligendi fugit harum labore maxime, nulla - optio pariatur possimus provident quibusdam quos vel. -

    -
    -
    @@ -221,6 +285,7 @@

    Heading 5

    Aspect Ratio 16:9 +
    This is a figcaption
    diff --git a/src/system-colors.css b/src/system-colors.css index 66b8171..e018db1 100644 --- a/src/system-colors.css +++ b/src/system-colors.css @@ -48,7 +48,7 @@ --system-field-text: color-mix(in oklab, FieldText var(--system-cs-state), CanvasText); /* ButtonText is broken in Safari */ - --system-gray-text: color-mix(in oklab, var(--system-canvas) 55%, var(--system-canvas-text)); + --system-gray-text: color-mix(in oklab, var(--system-canvas) 50%, var(--system-canvas-text)); --system-highlight: color-mix( in oklab, diff --git a/src/system-custom-colors.css b/src/system-custom-colors.css index 6fe582a..2049a7d 100644 --- a/src/system-custom-colors.css +++ b/src/system-custom-colors.css @@ -11,7 +11,7 @@ --system-invalid-color: color-mix(in oklab, var(--system-active-text) 90%, var(--system-canvas-text)); --system-interactive-color: var(--system-accent-color); - --system-canvas-text-inverted: var(--system-content-color-light); + --system-canvas-text-inverted: var(--system-canvas); --system-content-color-light: color-mix( in oklab, diff --git a/src/system-selectors.css b/src/system-selectors.css index a8e32ca..c567038 100644 --- a/src/system-selectors.css +++ b/src/system-selectors.css @@ -44,7 +44,7 @@ } } body > footer { - border-block-start: thin solid currentcolor; + border-block-start: var(--system-stroke-thin) solid var(--system-stroke-color); } body > :is(header, main, footer):not(:has(*)) { @@ -255,7 +255,6 @@ cursor: text; overflow: clip; } - summary { cursor: pointer; font-family: var(--system-font-family-data); @@ -269,7 +268,7 @@ padding-block-end: var(--system-spacing-interactive); } - details[open] summary { + details[open] > summary { margin-inline: calc(var(--system-spacing-main) * -1); } @@ -312,6 +311,11 @@ font-family: var(--system-font-family-data); font-size: smaller; } + :is(thead, tfoot) :is(td, th) { + text-transform: capitalize; + padding-block: var(--system-spacing-element-block); + background-color: var(--system-canvas); + } td, th { border: var(--system-stroke-thin) solid var(--system-stroke-color); @@ -323,7 +327,7 @@ background: var(--system-surface-color); } - tr:nth-child(even) { + tr:nth-child(odd) { background: var(--system-surface-color); } @@ -363,7 +367,7 @@ select { appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 48 48' fill='ButtonBorder'%3E%3Cpath d='M8.36612 16.1161C7.87796 16.6043 7.87796 17.3957 8.36612 17.8839L23.1161 32.6339C23.6043 33.122 24.3957 33.122 24.8839 32.6339L39.6339 17.8839C40.122 17.3957 40.122 16.6043 39.6339 16.1161C39.1457 15.628 38.3543 15.628 37.8661 16.1161L24 29.9822L10.1339 16.1161C9.64573 15.628 8.85427 15.628 8.36612 16.1161Z' fill='ButtonBorder'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 48 48' fill='CurrentColor'%3E%3Cpath d='M8.36612 16.1161C7.87796 16.6043 7.87796 17.3957 8.36612 17.8839L23.1161 32.6339C23.6043 33.122 24.3957 33.122 24.8839 32.6339L39.6339 17.8839C40.122 17.3957 40.122 16.6043 39.6339 16.1161C39.1457 15.628 38.3543 15.628 37.8661 16.1161L24 29.9822L10.1339 16.1161C9.64573 15.628 8.85427 15.628 8.36612 16.1161Z' fill='CurrentColor'/%3E%3C/svg%3E"); background-size: 15%; background-position: calc(100% - 1ch) 48%; background-repeat: no-repeat; @@ -390,14 +394,14 @@ max-inline-size: 100%; block-size: auto; } - :is(p, li, td, dd, detail) > :is(img, picture, svg) { + :is(p, li, td, dd) > :is(img, picture, svg, figure) { float: inline-end; margin-inline-start: var(--system-spacing-column-gap); - margin-block-end: var(--system-spacing-element-block); - max-inline-size: 36cqw; + margin-block: var(--system-spacing-element-block); + max-inline-size: 42cqw; } @container --content (width < 42ch) { - :is(p, li, dd, td, detail) > :is(img, picture, svg) { + :is(p, li, dd, td) > :is(img, picture, svg, figure) { width: 100%; max-inline-size: unset; } diff --git a/style-api.html b/style-api.html index d1b02b8..757ffbf 100644 --- a/style-api.html +++ b/style-api.html @@ -13,9 +13,10 @@

    system.css

    diff --git a/theme/openprops/system-open-props.css b/theme/openprops/system-open-props.css index 6d859b5..a255a9e 100644 --- a/theme/openprops/system-open-props.css +++ b/theme/openprops/system-open-props.css @@ -12,22 +12,22 @@ --system-button-border: color-mix(in oklab, var(--system-stroke-color) var(--system-cs-state), ButtonBorder); --system-button-face: var(--system-canvas); --system-button-text: var(--system-canvas-text); - --system-canvas: color-mix(in oklab, var(--blue-1) var(--system-cs-state), var(--blue-12)); - --system-canvas-text: color-mix(in oklab, var(--blue-12) var(--system-cs-state), var(--blue-2)); + --system-canvas: color-mix(in oklab, var(--blue-1) var(--system-cs-state), var(--blue-11)); + --system-canvas-text: color-mix(in oklab, var(--blue-12) var(--system-cs-state), var(--blue-1)); --system-field: var(--system-canvas); --system-field-text: var(--system-canvas-text); - --system-gray-text: color-mix(in oklab, var(--blue-6) var(--system-cs-state), var(--blue-5)); + --system-gray-text: color-mix(in oklab, var(--blue-7) 80%, CanvasText); --system-highlight: color-mix(in oklab, var(--blue-2) var(--system-cs-state), var(--blue-3)); --system-highlight-text: var(--system-canvas-text); - --system-link-text: color-mix(in oklab, var(--indigo-10) var(--system-cs-state), var(--indigo-1)); - --system-mark: color-mix(in oklab, var(--yellow-3) var(--system-cs-state), var(--yellow-8)); - --system-mark-text: color-mix(in oklab, var(--blue-12) var(--system-cs-state), var(--blue-2)); + --system-link-text: color-mix(in oklab, var(--indigo-10) var(--system-cs-state), var(--orange-4)); + --system-mark: color-mix(in oklab, var(--teal-3) var(--system-cs-state), var(--teal-8)); + --system-mark-text: color-mix(in oklab, var(--blue-12) var(--system-cs-state), var(--blue-12)); --system-selected-item: color-mix(in oklab, var(--indigo-2) var(--system-cs-state), var(--indigo-7)); --system-selected-item-text: var(--system-canvas-text) var(--system-canvas-text); --system-visited-text: color-mix(in oklab, var(--purple-10) var(--system-cs-state), var(--purple-2)); /* These are only mixed with system colors */ - --system-surface-color: color-mix(in oklab, var(--blue-2) var(--system-cs-state), var(--blue-10)); + --system-surface-color: color-mix(in oklab, var(--blue-2) var(--system-cs-state), var(--blue-12)); --system-stroke-color: color-mix(in oklab, var(--blue-4) var(--system-cs-state), var(--blue-7)); --system-invalid-color: color-mix(in oklab, var(--system-active-text) 90%, var(--system-canvas-text));