fix: issue with bad color-scheme changes (#1951)

packages/foundations/docs/Colors.md

@@ -27,3 +27,18 @@ There are several variants: `base`, `brand`, `neutral`, `critical`, `information
 |         `XXX`          | `class="db-bg-XXX"`                  | `@extend %db-bg-XXX`                  | `class="db-bg-XXX"`                  |
 | `XXX-transparent-semi` | `class="db-bg-XXX-transparent-semi"` | `@extend %db-bg-XXX-transparent-semi` | `class="db-bg-XXX-transparent-semi"` |
 | `XXX-transparent-full` | `class="db-bg-XXX-transparent-full"` | `@extend %db-bg-XXX-transparent-full` | `class="db-bg-XXX-transparent-full"` |
+
+### Dark- & Light-Mode
+
+We provide tokens for both dark- and light-mode. If you include the `db-ui-42` style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.
+We recommend using the default media query based on the user preference, but if you want to force a mode for your page or a container you can do it with adding the attributes `data-color-scheme="dark"` or `data-color-scheme="light"`:
+
+#### HTML
+
+```html
+<div data-color-scheme="dark">...</div>
+```
+
+We're providing an example in our [color schemes documentation](./color-schemes).
+
+We need to set the `base` background to the element with `[data-color-scheme]` so if you want to change the background to another color, make sure to use a wrapping tag like `div` with the `[data-color-scheme]` to avoid issues.

packages/foundations/scss/colors/_placeholder.scss

@@ -1,5 +1,4 @@
 @use "sass:string";
-@use "sass:color";
 @use "variables";
 
 @each $variant in variables.$variants {

packages/foundations/scss/default-theme.scss

@@ -1,4 +1,5 @@
 @use "./colors/default-color-scheme";
+@use "./colors/placeholder";
 
 :root {
 	/* REST */
@@ -576,3 +577,13 @@
 		@include default-color-scheme.get-color-scheme-dark;
 	}
 }
+
+[data-color-scheme="light"] {
+	@extend %db-bg-base;
+	@include default-color-scheme.get-color-scheme-light;
+}
+
+[data-color-scheme="dark"] {
+	@extend %db-bg-base;
+	@include default-color-scheme.get-color-scheme-dark;
+}

showcases/patternhub/components/default-page.tsx

@@ -38,7 +38,6 @@ const DefaultPage = ({ children }: any) => {
 			)}
 			{router.isReady && !fullscreen && (
 				<DBPage
-					className="db-bg-neutral-0"
 					fadeIn
 					type="fixedHeaderFooter"
 					slotHeader={

showcases/patternhub/components/index.tsx

@@ -53,7 +53,7 @@ const DefaultComponent = ({ title, variants }: DefaultComponentProps) => {
 			)}
 			{!foundVariant && (
 				<DefaultPage>
-					<div className="default-container db-bg-neutral-0">
+					<div className="default-container">
 						<h1>{title}</h1>
 						{variants?.map((variant, index) => (
 							<div key={`${variant.name}-${index}`}>

showcases/patternhub/data/routes.ts

@@ -164,7 +164,11 @@ export const ROUTES: NavigationItem[] = [
 				path: '/foundations/colors',
 				subNavigation: [
 					{ label: 'Readme', path: '/foundations/colors/readme' },
-					{ label: 'Overview', path: '/foundations/colors/overview' }
+					{ label: 'Overview', path: '/foundations/colors/overview' },
+					{
+						label: 'Color Schemes',
+						path: '/foundations/colors/color-schemes'
+					}
 				]
 			},
 			{

showcases/patternhub/pages/foundations/colors/color-schemes.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import DefaultPage from '../../../components/default-page';
+import { DBButton, DBTag } from '../../../components/src';
+
+const ColorOverview = () => {
+	const [colorScheme, setColorScheme] = useState<string>('light');
+	return (
+		<DefaultPage>
+			<h1>Color Schemes</h1>
+			<div
+				className="color-schemes-container"
+				data-color-scheme={colorScheme}>
+				<p>This container changes based on the state.</p>
+				<DBTag variant="informational" emphasis="strong">
+					{colorScheme}
+				</DBTag>
+				<DBButton
+					icon={colorScheme === 'light' ? 'night' : 'day'}
+					onClick={() => {
+						setColorScheme(
+							colorScheme === 'light' ? 'dark' : 'light'
+						);
+					}}>
+					Click me for {colorScheme === 'light' ? 'dark' : 'light'}
+					-mode
+				</DBButton>
+
+				<section data-color-scheme="light">
+					<h2>Permanent Light</h2>
+					<p>I'll be always light independent from parent</p>
+				</section>
+				<section data-color-scheme="dark">
+					<h2>Permanent Dark</h2>
+					<p>I'll be always dark independent from parent</p>
+				</section>
+			</div>
+		</DefaultPage>
+	);
+};
+
+export default ColorOverview;

showcases/patternhub/styles/globals.scss

@@ -297,3 +297,23 @@ div[class^="ch-"] {
 		}
 	}
 }
+
+.color-schemes-container {
+	padding: variables.$db-spacing-fixed-md;
+	border: 1px dashed var(--db-current-color);
+	display: grid;
+	gap: variables.$db-spacing-fixed-md;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+
+	.db-button {
+		grid-column: span 2 / span 2;
+	}
+
+	.db-tag {
+		margin-inline-start: auto;
+	}
+
+	section {
+		padding: variables.$db-spacing-fixed-md;
+	}
+}