Merge pull request #625 from tradingstrategy-ai/624-colors-clean-up

Clean up CSS color properties
tradingstrategy-ai · Nov 20, 2023 · 062848e · 062848e
2 parents 8942a48 + c77d4d3
commit 062848e
Show file tree

Hide file tree

Showing 115 changed files with 904 additions and 1,072 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,9 @@
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-svelte": "^2.33.0",
     "jsdom": "^22.1.0",
-    "postcss-preset-env": "^9.1.3",
+    "postcss": "^8.4.31",
+    "postcss-dark-theme-class": "^1.0.0",
+    "postcss-preset-env": "^9.3.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "svelte": "^4.2.2",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,11 +1,19 @@
-import postcssPresetEnv from 'postcss-preset-env';
-import postcssGlobalData from '@csstools/postcss-global-data';
+import presetEnv from 'postcss-preset-env';
+import globalData from '@csstools/postcss-global-data';
+import darkThemeClass from 'postcss-dark-theme-class';
 
 export default {
 	plugins: [
-		postcssGlobalData({
+		globalData({
 			files: ['./src/lib/components/css/breakpoints.css']
 		}),
-		postcssPresetEnv()
+
+		presetEnv(),
+
+		darkThemeClass({
+			darkSelector: '[data-color-mode="dark"]',
+			lightSelector: '[data-color-mode="light"]',
+			rootSelector: ['body']
+		})
 	]
 };
diff --git a/src/lib/breadcrumb/Breadcrumbs.svelte b/src/lib/breadcrumb/Breadcrumbs.svelte
@@ -78,7 +78,7 @@ https://search.google.com/structured-data/testing-tool
 		margin-bottom: var(--space-sl);
 		margin-left: calc(-1 * var(--space-sm));
 		overflow: hidden;
-		color: hsla(var(--hsl-text-extra-light));
+		color: hsl(var(--hsl-text-extra-light));
 		font: var(--f-ui-xs-medium);
 		letter-spacing: var(--f-ui-xs-spacing, normal);
 
@@ -104,7 +104,7 @@ https://search.google.com/structured-data/testing-tool
 		}
 
 		> span {
-			color: hsla(var(--hsl-text));
+			color: hsl(var(--hsl-text));
 		}
 
 		&:not(:last-child)::after {

diff --git a/src/lib/chart/ChartContainer.svelte b/src/lib/chart/ChartContainer.svelte
@@ -62,7 +62,7 @@ Display a chart container with title, description and timespan selector.
 	.chart-container {
 		display: grid;
 		gap: var(--space-sm);
-		background: hsla(var(--hsl-box), var(--a-box-a));
+		background: hsl(var(--hsla-box-1));
 		border-radius: var(--radius-md);
 		padding: var(--space-lg) var(--space-lg);
 		--chart-aspect-ratio: 2;

diff --git a/src/lib/chart/ChartIQ.svelte b/src/lib/chart/ChartIQ.svelte
@@ -211,7 +211,7 @@ Dynamically ChartIQ modules (if available) and render chart element.
 		</div>
 		{#if loading}
 			<div class="loading" transition:fade={{ duration: 250 }}>
-				<Spinner size="60" color="hsla(var(--hsl-text))" />
+				<Spinner size="60" color="hsl(var(--hsl-text))" />
 			</div>
 		{/if}
 	</div>
@@ -253,7 +253,7 @@ Dynamically ChartIQ modules (if available) and render chart element.
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			background: hsla(var(--hsl-body), 0.75);
+			background: hsl(var(--hsl-body) / 75%);
 		}
 	}
 </style>
diff --git a/src/lib/chart/HudMetric.svelte b/src/lib/chart/HudMetric.svelte
@@ -34,7 +34,7 @@ Use in conjunction with HudRow to display chart HUD (heads-up-display) data.
 		margin: 0;
 
 		dt {
-			color: hsla(var(--hsl-text-light));
+			color: hsl(var(--hsl-text-light));
 		}
 	}
 </style>
diff --git a/src/lib/chart/PairCandleChart.svelte b/src/lib/chart/PairCandleChart.svelte
@@ -131,7 +131,7 @@ Display trading pair candles (ohlc+v) charts, with attached quoteFeed for chart
 
 <style lang="postcss">
 	.pair-candle-chart-hud {
-		background: hsla(var(--hsla-box-3));
+		background: hsl(var(--hsla-box-3));
 		display: inline-grid;
 		gap: var(--space-ss);
 		padding: var(--space-md);

diff --git a/src/lib/chart/PerformanceChart.svelte b/src/lib/chart/PerformanceChart.svelte
@@ -101,7 +101,7 @@ Display a peformance line chart for a given (static) dataset.
 		transform: translate(-50%, calc(-100% - var(--space-md)));
 
 		:global(time) {
-			color: hsla(var(--hsl-text-extra-light));
+			color: hsl(var(--hsl-text-extra-light));
 		}
 
 		.value {

diff --git a/src/lib/chart/ReserveInterestChart.svelte b/src/lib/chart/ReserveInterestChart.svelte
@@ -116,7 +116,7 @@
 
 <style lang="postcss">
 	.reserve-interest-rate-hud {
-		background: hsla(var(--hsla-box-3));
+		background: hsl(var(--hsla-box-3));
 		display: inline-grid;
 		gap: var(--space-ss);
 		padding: var(--space-md);

diff --git a/src/lib/chart/chart.css b/src/lib/chart/chart.css
@@ -4,33 +4,33 @@
  */
 .stx_candle_up,
 .stx_candle_shadow_up {
-	color: hsla(var(--hsl-bullish));
-	border-left-color: hsla(var(--hsl-bullish));
+	color: hsl(var(--hsl-bullish));
+	border-left-color: hsl(var(--hsl-bullish));
 }
 
 .stx_candle_down,
 .stx_candle_shadow_down {
-	color: hsla(var(--hsl-bearish));
-	border-left-color: hsla(var(--hsl-bearish));
+	color: hsl(var(--hsl-bearish));
+	border-left-color: hsl(var(--hsl-bearish));
 }
 
 .stx_current_hr_up {
-	background-color: hsla(var(--hsl-bullish));
+	background-color: hsl(var(--hsl-bullish));
 }
 
 .stx_current_hr_down {
-	background-color: hsla(var(--hsl-bearish));
+	background-color: hsl(var(--hsl-bearish));
 }
 
 .stx_volume_underlay_up,
 .stx_volume_underlay_down {
-	border-left-color: hsla(var(--hsl-body));
+	border-left-color: hsl(var(--hsl-body));
 	opacity: 0.3;
 }
 
 .stx_grid,
 .stx_grid_dark {
-	color: hsla(var(--hsl-box), var(--a-box-c));
+	color: hsl(var(--hsla-box-3));
 	border-style: solid;
 }
 
@@ -44,17 +44,18 @@
 
 .stx_yaxis,
 .stx_xaxis {
-	color: hsla(var(--hsl-text-light));
+	color: hsl(var(--hsl-text-light));
 }
 
 .stx_xaxis_dark {
-	color: hsla(var(--hsl-text));
+	color: hsl(var(--hsl-text));
 }
 
 .stx-float-date,
 .stx-float-price {
-	color: hsla(var(--hsl-text));
-	background: var(--c-background-3); /* this needs to be a solid bg (no transparency) */
+	color: hsl(var(--hsl-text));
+	/* this needs to be a solid bg color (no transparency) */
+	background: color-mix(in srgb, hsl(var(--hsl-body)), hsl(var(--hsl-box)) 36%);
 }
 
 .stx-float-date {
@@ -69,7 +70,7 @@
 }
 
 .stx_jump_today {
-	background: hsla(var(--hsl-box), var(--a-box-b));
+	background: hsl(var(--hsla-box-2));
 }
 
 .crossY,
@@ -96,7 +97,7 @@
 /* default line chart styles */
 .stx_line_chart {
 	--hsl-chart-line: var(--hsl-text-extra-light);
-	color: hsla(var(--hsl-chart-line));
+	color: hsl(var(--hsl-chart-line));
 	width: 2px;
 }
 
@@ -113,9 +114,9 @@
 /* default mountain chart styles */
 .stx_mountain_chart {
 	--hsl-chart-mountain: var(--hsl-text-extra-light);
-	border: hsla(var(--hsl-chart-mountain)); /* line */
-	background-color: hsla(var(--hsl-chart-mountain), 0.25); /* gradient dark */
-	color: hsla(var(--hsl-chart-mountain), 0); /* gradient light */
+	border: hsl(var(--hsl-chart-mountain)); /* line */
+	background-color: hsl(var(--hsl-chart-mountain) / 25%); /* gradient dark */
+	color: hsl(var(--hsl-chart-mountain) / 0%); /* gradient light */
 	width: 2px;
 }
 

diff --git a/src/lib/components/AlertList.svelte b/src/lib/components/AlertList.svelte
@@ -33,23 +33,23 @@ component instead.
 	}
 
 	.error {
-		background: hsl(var(--hsl-error), 0.1);
-		border-color: hsl(var(--hsl-error), 1);
+		background: hsl(var(--hsl-error) / 10%);
+		border-color: hsl(var(--hsl-error));
 	}
 
 	.success {
-		background: hsl(var(--hsl-success), 0.1);
-		border-color: hsl(var(--hsl-success), 1);
+		background: hsl(var(--hsl-success) / 10%);
+		border-color: hsl(var(--hsl-success));
 	}
 
 	.warning {
-		background: hsl(var(--hsl-warning), 0.1);
-		border-color: hsl(var(--hsl-warning), 1);
+		background: hsl(var(--hsl-warning) / 10%);
+		border-color: hsl(var(--hsl-warning));
 	}
 
 	.info {
-		background: hsl(var(--hsl-box), var(--a-box-a));
-		border-color: hsl(var(--hsl-box), var(--a-box-c));
+		background: hsl(var(--hsla-box-1));
+		border-color: hsl(var(--hsla-box-3));
 	}
 
 	.lg {

diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte
@@ -29,7 +29,7 @@ Badge component used for inline text labels.
 	}
 
 	.primary {
-		color: var(--c-text-light);
+		color: hsl(var(--hsl-text-light));
 	}
 
 	.secondary {

diff --git a/src/lib/components/Banner.svelte b/src/lib/components/Banner.svelte
@@ -24,7 +24,7 @@
 <style lang="postcss">
 	.banner {
 		display: contents;
-		--section-background: hsla(var(--hsla-background-accent-1));
+		--section-background: hsl(var(--hsla-background-accent-1));
 
 		:is(h2, footer) {
 			text-align: center;

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -94,44 +94,44 @@ using flags: primary (default), secondary, ternary, quarternary.
 	}
 
 	.primary {
-		--c-accent: var(--hsl-box), var(--a-box-d);
-		background: hsla(var(--c-accent));
-		color: hsla(var(--hsl-text));
+		--c-accent: var(--hsla-box-4);
+		background: hsl(var(--c-accent));
+		color: hsl(var(--hsl-text));
 		outline-color: var(--c-accent);
 		outline-offset: -1px;
 
 		&:hover,
 		&:focus {
-			--c-accent: var(--hsl-text), 1;
-			color: hsla(var(--hsl-text-inverted));
+			--c-accent: var(--hsl-text);
+			color: hsl(var(--hsl-text-inverted));
 		}
 	}
 
 	.secondary {
 		background: transparent;
-		color: hsla(var(--hsl-text));
-		border-color: hsla(var(--hsl-text));
+		color: hsl(var(--hsl-text));
+		border-color: hsl(var(--hsl-text));
 
 		&:hover,
 		&:focus {
-			background: hsla(var(--hsl-text));
-			color: hsla(var(--hsl-text-inverted));
+			background: hsl(var(--hsl-text));
+			color: hsl(var(--hsl-text-inverted));
 		}
 	}
 
 	.tertiary {
-		background: hsla(var(--hsl-box), var(--a-box-b));
-		color: hsla(var(--hsl-text));
+		background: hsl(var(--hsla-box-2));
+		color: hsl(var(--hsl-text));
 		border-color: transparent;
 
 		&:hover,
 		&:focus {
-			background: hsla(var(--hsl-box), var(--a-box-d));
+			background: hsl(var(--hsla-box-4));
 		}
 	}
 
 	.quarternary {
-		background: var(--c-background-4);
+		background: hsl(var(--hsla-box-2));
 	}
 
 	.ghost {

diff --git a/src/lib/components/ContentTile.svelte b/src/lib/components/ContentTile.svelte
@@ -79,7 +79,7 @@ A `ctaLabel` or `cta` slot may also be provided to include an explicit button ta
 		height: 100%;
 		aspect-ratio: 1;
 		object-fit: cover;
-		background: hsla(var(--hsl-box), var(--a-box-b));
+		background: hsl(var(--hsla-box-2));
 
 		@media (--viewport-sm-up) {
 			max-height: 20rem;

diff --git a/src/lib/components/DataBadge.svelte b/src/lib/components/DataBadge.svelte
@@ -17,7 +17,7 @@
 
 <style lang="postcss">
 	.data-badge {
-		background: hsla(var(--hsla-box-2));
+		background: hsl(var(--hsl-box-2));
 		display: inline-grid;
 		transition: var(--transition-1);
 
@@ -59,19 +59,29 @@
 			padding: 0.625rem;
 		}
 
-		&:is(.bullish, .success) {
-			background: hsla(var(--hsl-bullish), 0.25);
-			color: hsla(var(--hsl-bullish));
+		&.bullish {
+			background: hsl(var(--hsl-bullish) / 25%);
+			color: hsl(var(--hsl-bullish));
 		}
 
-		&:is(.bearish, .error) {
-			background: hsla(var(--hsl-bearish), 0.25);
-			color: hsla(var(--hsl-bearish));
+		&.bearish {
+			background: hsl(var(--hsl-bearish) / 25%);
+			color: hsl(var(--hsl-bearish));
 		}
 
-		&:is(.warning) {
-			background: hsla(var(--hsl-warning), 0.25);
-			color: hsla(var(--hsl-warning));
+		&.error {
+			background: hsl(var(--hsl-error) / 25%);
+			color: hsl(var(--hsl-error));
+		}
+
+		&.success {
+			background: hsl(var(--hsl-success) / 25%);
+			color: hsl(var(--hsl-success));
+		}
+
+		&.warning {
+			background: hsl(var(--hsl-warning) / 25%);
+			color: hsl(var(--hsl-warning));
 		}
 	}
 </style>
diff --git a/src/lib/components/DataBox.svelte b/src/lib/components/DataBox.svelte
@@ -27,7 +27,7 @@ Uses together with SummaryBox or DataBoxes to display a set of properties / stat
 <style lang="postcss">
 	.data-box {
 		border-radius: var(--radius-md);
-		background: hsla(var(--hsl-box), var(--a-box-b));
+		background: hsl(var(--hsla-box-2));
 		display: grid;
 
 		&.xs {
@@ -80,7 +80,7 @@ Uses together with SummaryBox or DataBoxes to display a set of properties / stat
 	.label {
 		font: var(--f-ui-md-medium);
 		letter-spacing: var(--f-ui-md-spacing, normal);
-		color: hsla(var(--hsl-text-extra-light));
+		color: hsl(var(--hsl-text-extra-light));
 
 		@media (--viewport-sm-down) {
 			font: var(--f-ui-sm-medium);