Remove color from links and add pointer to details > summary

css/sustainable.css

@@ -1,6 +1,9 @@
 /*!
- * Sustainable CSS v0.0.4 (https://github.com/pdelboca/sustainable-css/)
+ * Sustainable CSS v0.0.5 (https://github.com/pdelboca/sustainable-css/)
  * Copyright 2023 - Licensed under MIT
+ *
+ * Sustainable CSS reuses system colors:
+ * https://drafts.csswg.org/css-color-4/#css-system-colors
  */
 
 :root {
@@ -35,7 +38,7 @@ fieldset, input, select, textarea, button {
  }
 
 fieldset, input:not([type=submit]), select, textarea {
-    border: 1px solid var(--theme-color);
+    border: 1px solid;
 }
 
 button, input[type=submit], input[type=reset] {
@@ -52,10 +55,17 @@ header > nav > * > a, header > nav > a {
     margin: 0 0.5em;
 }
 
+details > summary {
+    cursor: pointer;
+}
+
 /* Branding and colors */
 h1, h2, h3, h4, h5, h6 {
     color: var(--theme-color);
 }
+a {
+    color: canvastext;
+}
 a:hover {
     font-weight: bold;
 }

demo.html

@@ -33,15 +33,15 @@ <h2>Paragraph</h2>
   <h2>Details</h2>
   <details>
     <summary>Click to expand</summary>
-    <p>Good enough.</p>
+    <p>I just added <code>cursor: pointer;</code> to the summary element. Good enough.</p>
   </details>
 
   <h2>Forms</h2>
 
   <p>
     Forms layout are always customized and the styling is highly coupled with the layout. Example: margins of labels are
-    highly coupled with the decision on puting them above the input or besides it. That's why Sustainable.css do not add a lot of CSS to
-    inputs and labels.
+    highly coupled with the decision on puting them above the input or besides it. That's why Sustainable.css do not add
+    a lot of CSS to inputs and labels.
   </p>
   <p>
     We focus on giving a small styling to the inputs elements and let the user define how to layout it and further customize it.
@@ -96,19 +96,20 @@ <h2>Forms</h2>
       <input type="range" id="volume" name="volume" min="0" max="100" />
       <input type="submit" value="Submit">
       <button type="reset">Reset</button>
+      <button>Cancel</button>
     </fieldset>
   </form>
 
   <h2>Mark</h2>
-  <p>This is a <mark>highlighted</mark> text.</p>
+  <p><mark>This is a highlighted text.</mark></p>
 
   <h2>Articles</h2>
   <p>I add a border and align to the right the footer.</p>
   <p>Usages notes in <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article#usage_notes">MDN Web Docs</a></p>
   <article>
     <h3>Main Article Title</h3>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum veritatis doloremque eum omnis corporis mollitia
-      tenetur! Provident quasi praesentium vel, alias saepe quisquam quae hic debitis expedita totam eum libero?</p>
+      tenetur! <mark>Provident quasi praesentium vel, alias saepe quisquam quae</mark> hic debitis expedita totam eum libero?</p>
     <footer>
       <p>Written by <a href="#">John Doe</a> - Posted on <time datetime="2020-01-01">January 1, 2020</time></p>
     </footer>