update UI colors and add shadows

thisanimus · Aug 25, 2023 · a90518b · a90518b
1 parent b53d88c
commit a90518b
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 29 deletions.
diff --git a/assets/page.css b/assets/page.css
@@ -5,6 +5,7 @@
 	color: var(--color-text-muted);
 	text-transform: uppercase;
 	letter-spacing: 0.15em;
+	font-size: 1rem;
 }
 .layout {
 	max-width: 100%;

diff --git a/dist/baselayer-dark.css b/dist/baselayer-dark.css
diff --git a/dist/baselayer-light.css b/dist/baselayer-light.css
diff --git a/dist/baselayer.css b/dist/baselayer.css
diff --git a/index.html b/index.html
@@ -354,7 +354,7 @@ <h2>Radio</h2>
 			<h2>Basic Form</h2>
 			<div class="form-row">
 				<label>First Name* <input id="firstName" name="firstName" placeholder="Jane" required=""
-						type="text"></label> <label for="last_name">Last Name* <input id="lastName" name="lastName"
+						type="text"></label> <label for="lastName">Last Name* <input id="lastName" name="lastName"
 						placeholder="Smith" required="" type="text"></label>
 			</div>
 			<div class="form-row">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "baselayer.css",
-	"version": "1.0.32",
+	"version": "1.0.33",
 	"description": "A solid, minimal CSS framework.",
 	"main": "index.html",
 	"scripts": {

diff --git a/src/_color-mode-auto.css b/src/_color-mode-auto.css
@@ -1,12 +1,12 @@
 :root {
 	color-scheme: light dark;
-	--color-text-muted: #5c6a70;
+	--color-text-muted: #5c6770;
 	--color-text: var(--color-dark);
 	--color-text-intense: var(--color-dark-intentse);
 
-	--color-ui-intense: hsla(206, 5%, 25%, 0.5);
-	--color-ui: hsla(206, 5%, 25%, 0.3);
-	--color-ui-muted: hsla(206, 5%, 25%, 0.1);
+	--color-ui-intense: #9da7af;
+	--color-ui: #b9c0c6;
+	--color-ui-muted: #d6dade;
 
 	--color-background-muted: var(--color-light-muted);
 	--color-background: var(--color-light);
@@ -24,13 +24,13 @@
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--color-text-muted: #657176;
+		--color-text-muted: #818d98;
 		--color-text: var(--color-light);
 		--color-text-intense: var(--color-light-intentse);
 
-		--color-ui-intense: hsla(206, 5%, 75%, 0.5);
-		--color-ui: hsla(206, 5%, 75%, 0.3);
-		--color-ui-muted: hsla(206, 5%, 75%, 0.1);
+		--color-ui-intense: #67747e;
+		--color-ui: #454d54;
+		--color-ui-muted: #2e3338;
 
 		--color-background-muted: var(--color-dark-muted);
 		--color-background: var(--color-dark);

diff --git a/src/_color-mode-dark.css b/src/_color-mode-dark.css
@@ -1,11 +1,12 @@
 :root {
-	--color-text-muted: #657176;
+	color-scheme: dark;
+	--color-text-muted: #818d98;
 	--color-text: var(--color-light);
 	--color-text-intense: var(--color-light-intentse);
 
-	--color-ui-intense: hsla(206, 5%, 75%, 0.5);
-	--color-ui: hsla(206, 5%, 75%, 0.3);
-	--color-ui-muted: hsla(206, 5%, 75%, 0.1);
+	--color-ui-intense: #67747e;
+	--color-ui: #454d54;
+	--color-ui-muted: #2e3338;
 
 	--color-background-muted: var(--color-dark-muted);
 	--color-background: var(--color-dark);
@@ -15,4 +16,8 @@
 	--color-link-default: #64b5f6;
 	--color-link-hover: #bbdefb;
 	--color-link-visited: #ce93d8;
+
+	--color-shadow-intense: rgba(0, 0, 0, 0.3);
+	--color-shadow: rgba(0, 0, 0, 0.2);
+	--color-shadow-muted: rgba(0, 0, 0, 0.1);
 }
diff --git a/src/_color-mode-light.css b/src/_color-mode-light.css
@@ -1,12 +1,12 @@
 :root {
 	color-scheme: light;
-	--color-text-muted: #5c6a70;
+	--color-text-muted: #5c6770;
 	--color-text: var(--color-dark);
 	--color-text-intense: var(--color-dark-intentse);
 
-	--color-ui-intense: hsla(206, 5%, 25%, 0.5);
-	--color-ui: hsla(206, 5%, 25%, 0.3);
-	--color-ui-muted: hsla(206, 5%, 25%, 0.1);
+	--color-ui-intense: #9da7af;
+	--color-ui: #b9c0c6;
+	--color-ui-muted: #d6dade;
 
 	--color-background-muted: var(--color-light-muted);
 	--color-background: var(--color-light);
@@ -16,4 +16,8 @@
 	--color-link-default: #1565c0;
 	--color-link-hover: #0d47a1;
 	--color-link-visited: #7b1fa2;
+
+	--color-shadow-intense: rgba(0, 0, 0, 0.2);
+	--color-shadow: rgba(0, 0, 0, 0.1);
+	--color-shadow-muted: rgba(0, 0, 0, 0.05);
 }
diff --git a/src/_range.css b/src/_range.css
@@ -1,5 +1,5 @@
 :root {
-	--range-track: 4px;
+	--range-track: 2px;
 	--range-size: 20px;
 }
 [type='range'] {
@@ -21,23 +21,23 @@
 	width: 100%;
 	height: var(--range-track);
 	border-radius: var(--border-radius);
-	background: var(--color-ui-muted);
+	background: var(--color-ui);
 }
 [type='range']::-moz-range-track {
 	box-sizing: border-box;
 	border: none;
 	width: 100%;
 	height: var(--range-track);
 	border-radius: var(--border-radius);
-	background: var(--color-ui-muted);
+	background: var(--color-ui);
 }
 [type='range']::-ms-track {
 	box-sizing: border-box;
 	border: none;
 	width: 100%;
 	height: var(--range-track);
 	border-radius: var(--border-radius);
-	background: var(--color-ui-muted);
+	background: var(--color-ui);
 	color: transparent;
 }
 [type='range']::-moz-range-progress {
@@ -51,13 +51,13 @@
 	background: var(--color-ui);
 }
 [type='range']::-webkit-slider-thumb {
-	margin-top: -8px;
+	margin-top: calc((var(--range-size) / -2) + (var(--range-track) / 2));
 	box-sizing: border-box;
 	border: none;
 	width: var(--range-size);
 	height: var(--range-size);
 	border-radius: 50%;
-	border: var(--border-width) solid var(--color-ui);
+	border: var(--border-width) solid var(--color-ui-intense);
 	background: #fff;
 	pointer-events: all !important;
 	cursor: pointer;
@@ -68,7 +68,7 @@
 	width: var(--range-size);
 	height: var(--range-size);
 	border-radius: 50%;
-	border: var(--border-width) solid var(--color-ui);
+	border: var(--border-width) solid var(--color-ui-intense);
 	background: #fff;
 	pointer-events: all !important;
 	cursor: pointer;
@@ -80,7 +80,7 @@
 	width: var(--range-size);
 	height: var(--range-size);
 	border-radius: 50%;
-	border: var(--border-width) solid var(--color-ui);
+	border: var(--border-width) solid var(--color-ui-intense);
 	background: #fff;
 	pointer-events: all !important;
 	cursor: pointer;