From 640262f87fca049a5e44d360b5037cfd958c5a42 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 6 Aug 2025 15:23:18 +0100
Subject: [PATCH] Add CSS variable example without Tailwind

---
 css/css-variables.html | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 css/css-variables.html

diff --git a/css/css-variables.html b/css/css-variables.html
new file mode 100644
index 0000000..2367333
--- /dev/null
+++ b/css/css-variables.html
@@ -0,0 +1,32 @@
+<style>
+:root {
+  --color-primary: blue;
+  --roundedness: 0;
+}
+
+[data-theme="test"] {
+  --color-primary: red;
+  --roundedness: 100%;
+}
+
+.shape {
+  background-color: var(--color-primary);
+  border-radius: var(--roundedness);
+  height: 7.5rem;
+  width: 7.5rem;
+}
+
+.wrapper {
+  display: flex;
+  gap: 1rem;
+  padding: 2rem;
+}
+</style>
+
+<div class="wrapper">
+  <div class="shape"></div>
+
+  <div data-theme="test">
+    <div class="shape"></div>
+  </div>
+</div>