From 62ff9e8f77041cb637311c011ec63c1107604b8e Mon Sep 17 00:00:00 2001
From: Lewis Dale <lewis.dale@triptease.com>
Date: Thu, 12 Oct 2023 09:09:36 +0100
Subject: [PATCH] * Remove link to web.dev because honestly their site is kinda
 the opposite of the point I want to make * Add a link to Adrian Roselli's
 site instead * Update the toggle to use the `switch` role * Add some text
 about the proposal for the Invoker button * Add a slide about theming

---
 src/slides/02-what.md                         |  2 +-
 src/slides/03-example-1.md                    |  1 +
 src/slides/04-example-1.md                    | 24 +++++++-----
 src/slides/06-example-2.html                  |  6 ++-
 src/slides/09-themes.md                       | 39 +++++++++++++++++++
 ...{09-final-points.md => 10-final-points.md} |  4 +-
 ...{10-useful-links.md => 11-useful-links.md} |  2 +-
 src/styles/styles.css                         |  6 ++-
 8 files changed, 69 insertions(+), 15 deletions(-)
 create mode 100644 src/slides/09-themes.md
 rename src/slides/{09-final-points.md => 10-final-points.md} (65%)
 rename src/slides/{10-useful-links.md => 11-useful-links.md} (69%)

diff --git a/src/slides/02-what.md b/src/slides/02-what.md
index f290a2e..af86264 100644
--- a/src/slides/02-what.md
+++ b/src/slides/02-what.md
@@ -4,6 +4,6 @@ type: statement
 
 ## Huh?
 
-* When we create a custom component, often we have to tell the browser how it should treat it
+* When we create a custom component, we have to tell the browser how it should treat it
 * But often browsers already give us the tools to do that natively
 * Reaching for CSS and HTML first can make our components faster, more reusable, and more accessible
diff --git a/src/slides/03-example-1.md b/src/slides/03-example-1.md
index bf671bf..5958f04 100644
--- a/src/slides/03-example-1.md
+++ b/src/slides/03-example-1.md
@@ -154,6 +154,7 @@ export default class Toggle extends Component<Props, State> {
 * Have to import all of this everywhere we use it
 * No meaningful labels possible!
 * No keyboard navigation
+* No Javascript? No component
 
 </div>
 
diff --git a/src/slides/04-example-1.md b/src/slides/04-example-1.md
index ae9b6d4..8afb8cd 100644
--- a/src/slides/04-example-1.md
+++ b/src/slides/04-example-1.md
@@ -4,7 +4,7 @@
 
 ```html
 <style>
-input[type="checkbox"][data-role="toggle"] {
+input[type="checkbox"][role="switch"] {
 	appearance: none;
 	background: lightgray;
 	border: 1px solid gray;
@@ -43,23 +43,27 @@ input[type="checkbox"][data-role="toggle"] {
 
 <input
     type="checkbox"
-    data-type="toggle"
+    role="switch"
     name="activated"
 />
 ```
 
 <div>
-    <input
-        type="checkbox"
-        data-role="toggle"
-        name="activated"
-    />
+	<label>
+		Enable:
+		<input
+			type="checkbox"
+			role="switch"
+			name="activated"
+		/>
+	</label>
 
 * 42 lines of code
 * Uses regular HTML markup - 0 javascript needed
-* Fully accessible
-* Labels work
-* Can be used anywhere - all you need is the stylesheet
+* `switch` role tells the browser that this is an on/off rather than a checked/unchecked component
+* Easily accessible to screen readers, keyboard users
+* Can be used anywhere - all you need is the stylesheet at the top level
+* Graceful degradation - if the CSS doesn't load we still get a checkbox
 </div>
 
 </div>
\ No newline at end of file
diff --git a/src/slides/06-example-2.html b/src/slides/06-example-2.html
index b919b3d..263ab63 100644
--- a/src/slides/06-example-2.html
+++ b/src/slides/06-example-2.html
@@ -51,7 +51,11 @@ dialog::backdrop {
 
     <ul>
         <li>31 lines of code</li>
-        <li>A teensy bit of Javascript - I know, I'm a hypocrite</li>
+        <li>A teensy bit of Javascript - this is currently unavoidable
+            <ul>
+                <li>But there is an open proposal for `Invoker buttons` (<a href="https://open-ui.org/components/invokers.explainer/" target="_blank" rel="noreferrer">link</a>) to address this</li>
+            </ul>
+        </li>
         <li>Option to use as a popup <i>or</i> a modal</li>
         <li><code>::backdrop</code> pseudo-element for easy styling</li>
     </ul>
diff --git a/src/slides/09-themes.md b/src/slides/09-themes.md
new file mode 100644
index 0000000..6b82a1b
--- /dev/null
+++ b/src/slides/09-themes.md
@@ -0,0 +1,39 @@
+## Themes
+
+<div class="grid">
+
+```css
+:root {
+    --color-primary: #dedede;
+    --color-secondary: #adadad;
+}
+
+body {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+}
+
+
+[class*="column"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--column-spacing, 1rem);
+}
+
+.column-sm {
+    --column-spacing: 0.5rem;
+}
+
+.column-lg {
+    --column-spacing: 1.5rem;
+}
+```
+<div>
+
+* A few of the examples have had theme tokens injected into Styled Components
+* But we can also use CSS variables to inject our design tokens and use them everywhere
+* If we redefine a variable later on in the cascade, it applies to all subcomponents
+* Can also use sensible fallbacks for the instances where variables are undefined
+
+</div>
+</div>
\ No newline at end of file
diff --git a/src/slides/09-final-points.md b/src/slides/10-final-points.md
similarity index 65%
rename from src/slides/09-final-points.md
rename to src/slides/10-final-points.md
index b171c0a..3386c4a 100644
--- a/src/slides/09-final-points.md
+++ b/src/slides/10-final-points.md
@@ -9,4 +9,6 @@ type: statement
 * This entire presentation, with lots of duplication, and every single slide included, is only 92kb (16kb after Gzip)
 * When we build new components, let's see if the browser can't do it for us instead
 * Modern CSS is great
-* Javascript as a garnish, not a main course
\ No newline at end of file
+* Javascript as a garnish, not a main course
+    * Building on the fundamentals of the web and then _progressively enhancing_ means we reach more users
+    * And our applications will be faster and cheaper to run as a result
\ No newline at end of file
diff --git a/src/slides/10-useful-links.md b/src/slides/11-useful-links.md
similarity index 69%
rename from src/slides/10-useful-links.md
rename to src/slides/11-useful-links.md
index 9387ef2..1b3a714 100644
--- a/src/slides/10-useful-links.md
+++ b/src/slides/11-useful-links.md
@@ -6,4 +6,4 @@ type: statement
 
 * W3C Aria Patterns - https://www.w3.org/WAI/ARIA/apg/patterns/
 * Every Layout - https://every-layout.dev/
-* Web.dev - https://web.dev/
\ No newline at end of file
+* Adrian Roselli: Patterns - https://adrianroselli.com/tag/pattern
\ No newline at end of file
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 50fe699..9596432 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -75,6 +75,10 @@ main {
         ul {
             width: 100%;
             margin: var(--space-size-3xl) auto;
+
+            ul {
+                margin: var(--space-size-sm);
+            }
         }
     }
     
@@ -106,7 +110,7 @@ main {
         word-wrap: 
     }
 
-    input[type="checkbox"][data-role="toggle"] {
+    input[type="checkbox"][role="switch"] {
         appearance: none;
         background: lightgray;
         border: 1px solid gray;