holtek ui makeover and catch work

johntalton · Jun 12, 2024 · 18396a6 · 18396a6
1 parent 1c8b502
commit 18396a6
Show file tree

Hide file tree

Showing 21 changed files with 996 additions and 1,196 deletions.
diff --git a/public/css/app-aside.css b/public/css/app-aside.css
@@ -2,8 +2,8 @@
 aside {
   grid-area: aside;
 
-  background-color: var(--base-accent-background-color, red);
-  color: var(--base-accent-text-color, red);
+  background-color: var(--color-accent--dark, red);
+  color: var(--color-accent--dark-text, red);
 
   display: flex;
   flex-direction: column;

diff --git a/public/css/app-logo.css b/public/css/app-logo.css
@@ -19,7 +19,7 @@ h1 {
   color: var(--logo-color-text, red);
 }
 
-/* [data-view ^= "aside"] {
+/* [data-view ~= "aside"] {
   & h1 {
     grid-column: 1 / -1;
 

diff --git a/public/css/app.css b/public/css/app.css
@@ -19,11 +19,11 @@ body {
 	grid-template-rows: 5em 1fr;
 	grid-template-columns: max-content 1fr;
 
-	background-color: var(--base-accent-background-color, red);
-	color: var(--base-accent-text-color, red);
+	background-color: var(--color-accent--dark, red);
+	color: var(--color-accent--dark-text, red);
 }
 
-body:not([data-view ^= "aside"]) {
+body:not([data-view ~= "aside"]) {
 	/* grid-template-areas:
 		"nav"
 		"main";

diff --git a/public/css/aw9523.css b/public/css/aw9523.css
@@ -31,7 +31,7 @@ aw9523-config {
 			border-radius: 1em;
 			border-color: var(--color-accent--darker, red);
 
-			& legend {
+			& legend:not(:empty) {
 				font-weight: bold;
 				padding-inline: 1ch;
 			}

diff --git a/public/css/defs.css b/public/css/defs.css
@@ -1,51 +1,5 @@
-/* @property --color-accent--h {
-	syntax: "<number>";
-  initial-value: 0;
-  inherits: true;
-}
-
-@property --color-accent--s {
-	syntax: "<percent>";
-  initial-value: 50%;
-  inherits: true;
-}
 
-@property --color-accent--l {
-	syntax: "<percent>";
-  initial-value: 50%;
-  inherits: true;
-}
 
-@property --light-percentage {
-	syntax: "<percent>";
-	initial-value: 10%;
-	inherits: true;
-}
-
-@property --lighter-percentage {
-	syntax: "<percent>";
-	initial-value: 30%;
-	inherits: true;
-}
-
-@property --lightest-percentage {
-	syntax: "<percent>";
-	initial-value: 40%;
-	inherits: true;
-}
-
-
-@property --dark-percentage {
-	syntax: "<percent>";
-	initial-value: 15%;
-	inherits: true;
-}
-
-@property --darker-percentage {
-	syntax: "<percent>";
-	initial-value: 20%;
-	inherits: true;
-} */
 
 @property --color-accent {
   syntax: "<color>";
@@ -65,84 +19,85 @@
   inherits: true;
 }
 
-/* BASE PERCENT - STABLE */
-:root {
-	--color-accent--h: 0;
-	--color-accent--s: 100%;
-	--color-accent--l: 10%;
+@property --color-gray {
+  syntax: "<color>";
+  initial-value: gray;
+  inherits: true;
+}
+
+
+
+[data-theme] {
+	/*  */
+	--color-disabled: var(--color-gray);
+	--color-opaque-black: rgba(50 50 50 / 0.25);
 
 	--light-percentage: 10%;
 	--lighter-percentage: 30%;
 	--lightest-percentage: 40%;
 
 	--dark-percentage: 15%;
 	--darker-percentage: 20%;
-}
-
-[data-theme] {
-	/*  */
-	--color-accent--complement: hsl(
-		calc(var(--color-accent--h) + 180),
-		var(--color-accent--s),
-		var(--color-accent--l));
-
-	--color-accent--triad1: hsl(
-		calc(var(--color-accent--h) + 120),
-		var(--color-accent--s),
-		var(--color-accent--l));
 
-	--color-accent--triad2: hsl(
-		calc(var(--color-accent--h) + 240),
-		var(--color-accent--s),
-		var(--color-accent--l));
+	--color-accent--h: 0;
+	--color-accent--s: 100%;
+	--color-accent--l: 10%;
 
-	/*  */
 	--color-accent: hsl(
 		var(--color-accent--h),
 		var(--color-accent--s),
 		var(--color-accent--l));
 	--color-accent-text: var(--color-white, red);
 
 	/*  */
+
+	/* --color-accent--lighter: hsl(from var(--color-accent, red) h s var(--lighter-percentage, 1)); */
+	/* --color-accent--lightest: hsl(from var(--color-accent, red) h s var(--lightest-percentage, 1)); */
+	/* --color-accent--light: hsl(from var(--color-accent, red) h s var(--light-percentage, 1)); */
+
+	--color-accent--light-text: var(--color-black, red);
+	--color-accent--lighter-text: var(--color-black, red);
+	--color-accent--lightest-text: var(--color-black, red);
+
+	/* --color-accent--dark: hsl(from var(--color-accent, red) h s var(--dark-percentage, 1));
+	--color-accent--darker: hsl(from var(--color-accent, red) h s var(--darker-percentage, 1)); */
+
+	--color-accent--dark-text: var(--color-white, red);
+	--color-accent--darker-text: var(--color-white, red);
+
+
+
+
+
+
 	--color-accent--light: hsl(
 		var(--color-accent--h),
 		var(--color-accent--s),
 		calc(var(--color-accent--l) + var(--light-percentage)));
-	--color-accent--light-text: var(--color-black, red);
 
 	--color-accent--lighter: hsl(
 		var(--color-accent--h),
 		var(--color-accent--s),
 		calc(var(--color-accent--l) + var(--lighter-percentage)));
-	--color-accent--lighter-text: var(--color-black, red);
 
 	--color-accent--lightest: hsl(
 		var(--color-accent--h),
 		var(--color-accent--s),
 		calc(var(--color-accent--l) + var(--lightest-percentage)));
-	--color-accent--lightest-text: var(--color-black, red);
 
-	/*  */
-	--color-accent--dark: hsl(
-		var(--color-accent--h),
-		var(--color-accent--s),
-		calc(var(--color-accent--l) - var(--dark-percentage)));
-	--color-accent--dark-text: var(--color-white, red);
+		--color-accent--dark: hsl(
+			var(--color-accent--h),
+			var(--color-accent--s),
+			calc(var(--color-accent--l) - var(--dark-percentage)));
+
+		--color-accent--darker: hsl(
+			var(--color-accent--h),
+			var(--color-accent--s),
+			calc(var(--color-accent--l) - var(--darker-percentage)));
+
+
 
-	--color-accent--darker: hsl(
-		var(--color-accent--h),
-		var(--color-accent--s),
-		calc(var(--color-accent--l) - var(--darker-percentage)));
-	--color-accent--darker-text: var(--color-white, red);
 
-	/*  */
-	--color-disabled: grey;
-	--color-opaque-black: rgba(50 50 50 / 0.25);
 
-	/*  */
-	--base-accent-background-color: var(--color-accent--dark, red);
-	--base-accent-text-color: var(--color-accent--dark-text, red);
 
-	--base-page-background-color: var(--color-accent--lighter, red);
-	--base-page-text-color: var(--color-black, red);
 }
diff --git a/public/css/ds3502.css b/public/css/ds3502.css
@@ -29,7 +29,7 @@ ds3502-config {
 			border-radius: 1em;
 			border-color: var(--color-accent--darker, red);
 
-			& legend {
+			& legend:not(:empty) {
 				font-weight: bold;
 				padding-inline: 1ch;
 			}

diff --git a/public/css/excamera-i2cdriver.css b/public/css/excamera-i2cdriver.css
@@ -173,7 +173,7 @@ excamera-i2cdriver {
 			background-color: var(--color-accent--lighter, red);
 			color: var(--color-accent--lighter-text, red);
 
-			& legend {
+			& legend:not(:empty) {
 				font-weight: bold;
 				padding-inline: 1ch;
 			}