chore: document theme switch imports (#540)

* chore: add field-sizing to select and textarea * document theme switches * looks great, a few edits * update commit --------- Co-authored-by: Adam Argyle <[email protected]>
argyleink · Jan 28, 2025 · c07c3bf · c07c3bf
1 parent d4b651a
commit c07c3bf
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -1713,7 +1713,7 @@ <h5>NPM Imported Usage Sample</h5>
       </article>
 
       <details>
-        <summary>Color Theming 101</summary>
+        <summary>Color 101: Themes</summary>
 
         <div class="just-for-gap">
           <header>
@@ -1921,6 +1921,50 @@ <h5>Typography</h5>
           </div>
         </div>
       </details>
+
+      <details>
+        <summary>Color 201: Normalize Theme Switch</summary>
+
+        <div class="just-for-gap">
+          <header>
+            <h3>1) Normalize Theme Switch</h3>
+            <pre class="language-css">
+              <code>
+                @import "https://unpkg.com/open-props/theme.light.switch.min.css";
+                @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
+              </code>
+            </pre>
+            <p>The Open Props <a href="https://codepen.io/argyleink/pen/KKvRORE">normalize.css</a> has light and dark built in, but it only changes with the media query / operating system. If you want users to be able to change this, you'll need <b>Open Props switch imports</b>. These have the same theme values from normalize, but scoped to selectors.</p>
+
+            <p><b>Light Selectors:</b> <code>.light</code> | <code></code>.light-theme</code> | <code>data-theme="light"</code></p>
+            <p><b>Dark Selectors:</b> <code>.dark</code> | <code>.dark-theme</code> | <code>data-theme="dark"</code></p>
+
+            <p>This allows you to apply a light or dark theme to the page or a portion of the page using the selectors imported.</p>
+            <p><b>See it in action:</b> <a href="https://codepen.io/argyleink/pen/JjqYdgr">here</a></p>
+          </header>
+
+          <header>
+            <h3>2) Section theme</h3>
+            <p>When you need to control the appearance of a specific section, use any of the selectors from the switch imports, like <code>.dark</code> or <code>.light</code>, and apply them to HTML elements.</p>
+            <p><b>Try it</b> <a href="https://codepen.io/argyleink/pen/RwEWRwR">here</a></p>
+          </header>
+
+          <div>
+            <pre class="language-css">
+              <code>
+                  @import "https://unpkg.com/open-props/theme.light.switch.min.css";
+                  @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
+
+                  /* classes toggle the adaptive props */
+                  .dark, .light {
+                    color: var(--text-1);
+                    background: var(--surface-1);
+                  }
+              </code>
+            </pre>
+          </div>
+        </div>
+      </details>
     </section>
 
     <section id="gradients" class="just-stretch">

diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css
@@ -138,7 +138,7 @@
   border-radius: var(--radius-2);
 }
 
-:where(textarea) { 
+:where(textarea) {
   resize: block;
   field-sizing: content;
   min-inline-size: var(--size-content-1);