refactor(examples): update mcss stylesheets

thi-ng · Mar 17, 2024 · 8d0f5f9 · 8d0f5f9
1 parent 9d62525
commit 8d0f5f9
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 13 deletions.
diff --git a/examples/meta-css-basics/css/style.mcss b/examples/meta-css-basics/css/style.mcss
@@ -2,6 +2,12 @@
 // see package readme for more details/usage
 // use `yarn css:build` or `yarn css:watch` to transpile to CSS
 
+:root {
+	color1=#fb4
+	color2=#4cf
+	color3=#333
+}
+
 body {
 	system ma3 dark:bg-color-near-black dark:color-light-gray bg-color-light-gray color-dark-gray
 }
@@ -51,7 +57,7 @@ a:hover { dark:color-hot-pink color-dark-pink }
 			pa3
 			{
 				// use --color1 var (defined in index.html) for hover
-				:hover { bg-color(1) }
+				:hover { bg-color(color1) }
 				:first-child { brt3 }
 				:last-child { brb3 }
 			}
@@ -67,7 +73,7 @@ a:hover { dark:color-hot-pink color-dark-pink }
 			ns:h4 pa3
 			{
 				// use --color2 var (defined in index.html) for hover
-				:hover { bg-color(2) }
+				:hover { bg-color(color2) }
 				:first-child { ns:brl3 }
 				:last-child { ns:brr3 }
 			}
@@ -88,7 +94,7 @@ a:hover { dark:color-hot-pink color-dark-pink }
 			db dark:bg-color-dark-gray bg-color-moon-gray no-underline
 			{
 				// use --color3 var (defined in index.html) for hover
-				:hover { color(3) anim:bg-anim(0.25) }
+				:hover { color(color3) anim:bg-anim(0.25) }
 			}
 		}
 	}

diff --git a/examples/meta-css-basics/index.html b/examples/meta-css-basics/index.html
@@ -10,13 +10,6 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 		<title>meta-css-basics · @thi.ng/umbrella</title>
 		<link href="/css/style.css" rel="stylesheet" />
-		<style>
-			:root {
-				--color1: #fb4;
-				--color2: #4cf;
-				--color3: #333;
-			}
-		</style>
 	</head>
 	<body class="sans-serif">
 		<div id="app"></div>

diff --git a/examples/rdom-web-components/css/style.mcss b/examples/rdom-web-components/css/style.mcss
@@ -5,4 +5,4 @@
 
 body { system-sans-serif ma3 }
 
-button { db pa3 bw0 bg-color(1) color-white }
+button { db pa3 bw0 bg-color(color1) color-white }
diff --git a/examples/rdom-web-components/src/components/component.mcss b/examples/rdom-web-components/src/components/component.mcss
@@ -1,10 +1,10 @@
 article {
-	b mb3 pa2 bw2 border-color(1) color(1)
+	b mb3 pa2 bw2 border-color(color1) color(color1)
 	{
 		section { mb1 }
 	}
 }
 
 // slotted children
 // map component's `highlight` attrib to color2
-::slotted(*) { pa2 bg-color(2) }
+::slotted(*) { pa2 bg-color(color2) }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,4 @@

		body { system-sans-serif ma3 }

		button { db pa3 bw0 bg-color(1) color-white }
		button { db pa3 bw0 bg-color(color1) color-white }