feat: separate bg colors from semantic color classes

packages/foundations/scss/colors/_variables.scss

@@ -3,6 +3,11 @@ $variants: "neutral", "brand", "critical", "successful", "warning",
 
 $variant-colors: "neutral", "critical", "successful", "warning", "informational";
 
+$on-background-colors: "default", "weak", "contrast", "contrast-weak", "border";
+
+$background-colors: "lvl-1", "lvl-2", "lvl-3", "transparent-full",
+	"transparent-semi";
+
 // current - for adaptive colors
 $db-current-icon-color: var(--db-current-icon-color, inherit);
 

packages/foundations/scss/colors/classes/_get-class.scss

@@ -32,3 +32,40 @@
 		}
 	}
 }
+
+@mixin init-container-colors($variant) {
+	[data-container-color="#{$variant}"],
+	.db-container-color-#{$variant} {
+		@extend %db-#{$variant}-variables;
+		color: var(--db-current-color-on-bg-enabled);
+		background-color: var(--db-current-color-bg-lvl-1-enabled);
+	}
+}
+
+@mixin init-on-background-colors($color) {
+	[data-on-bg-color="#{$color}"],
+	.db-on-bg-color-#{$color} {
+		@if $color == "default" {
+			color: var(--db-current-color-on-bg-enabled);
+		} @else if $color == "weak" {
+			color: var(--db-current-color-on-bg-weak-enabled);
+		} @else if $color == "contrast" {
+			color: var(--db-current-color-contrast-high-enabled);
+		} @else if $color == "contrast-weak" {
+			color: var(--db-current-color-contrast-low-enabled);
+		} @else if $color == "border" {
+			color: var(--db-current-color-border);
+		} @else {
+			@error "Unknown color #{$color}.";
+		}
+	}
+}
+
+@mixin init-background-colors($background-color) {
+	[data-bg-color="#{$background-color}"],
+	.db-bg-color-#{$background-color} {
+		background-color: var(
+			--db-current-color-bg-#{$background-color}-enabled
+		);
+	}
+}

packages/foundations/scss/colors/classes/all.scss

@@ -3,8 +3,18 @@
 
 @each $variant in index.$variants {
 	@include get-class.init($variant);
+	@include get-class.init-container-colors($variant);
 }
 
-@each $variant in index.$additional-variants {
-	@include get-class.init($variant);
+@each $additional-variant in index.$additional-variants {
+	@include get-class.init($additional-variant);
+	@include get-class.init-container-colors($additional-variant);
+}
+
+@each $background-color in index.$background-colors {
+	@include get-class.init-background-colors($background-color);
+}
+
+@each $on-background-color in index.$on-background-colors {
+	@include get-class.init-on-background-colors($on-background-color);
 }

packages/foundations/scss/colors/classes/blue.scss

@@ -4,3 +4,4 @@
 $variant: "blue";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/brand.scss

@@ -4,3 +4,4 @@
 $variant: "brand";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/critical.scss

@@ -4,3 +4,4 @@
 $variant: "critical";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/cyan.scss

@@ -4,3 +4,4 @@
 $variant: "cyan";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/green.scss

@@ -4,3 +4,4 @@
 $variant: "green";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/informational.scss

@@ -4,3 +4,4 @@
 $variant: "informational";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/neutral.scss

@@ -4,3 +4,4 @@
 $variant: "neutral";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/orange.scss

@@ -4,3 +4,4 @@
 $variant: "orange";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/pink.scss

@@ -4,3 +4,4 @@
 $variant: "pink";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/red.scss

@@ -4,3 +4,4 @@
 $variant: "red";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/successful.scss

@@ -4,3 +4,4 @@
 $variant: "successful";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/turquoise.scss

@@ -4,3 +4,4 @@
 $variant: "turquoise";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/violet.scss

@@ -4,3 +4,4 @@
 $variant: "violet";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/warning.scss

@@ -4,3 +4,4 @@
 $variant: "warning";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

packages/foundations/scss/colors/classes/yellow.scss

@@ -4,3 +4,4 @@
 $variant: "yellow";
 
 @include get-class.init($variant);
+@include get-class.init-container-colors($variant);

showcases/patternhub/components/copy-clipboard-button/index.tsx

@@ -0,0 +1,59 @@
+import { type MouseEvent, type ReactNode, useEffect, useState } from 'react';
+import { DBButton, DBTooltip } from '../../../../output/react/src/index';
+
+export type CopyClipboardButtonProps = {
+	name: string;
+	children?: ReactNode;
+	copyText: string;
+};
+
+const CopyClipboardButton = ({
+	name,
+	children,
+	copyText
+}: CopyClipboardButtonProps) => {
+	const [justCopied, setJustCopied] = useState<boolean>(false);
+
+	const onCopyButtonClick = async (event: MouseEvent<HTMLButtonElement>) => {
+		event.stopPropagation();
+
+		if (typeof navigator !== 'undefined') {
+			setJustCopied(true);
+			await navigator.clipboard.writeText(copyText);
+		}
+	};
+
+	useEffect(() => {
+		let timeout: ReturnType<typeof setTimeout> | undefined;
+
+		if (justCopied) {
+			timeout = setTimeout(() => {
+				setJustCopied(false);
+			}, 1500);
+		}
+
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [justCopied]);
+
+	return (
+		<DBButton
+			variant="ghost"
+			icon="copy"
+			noText={true}
+			onClick={onCopyButtonClick}
+			describedbyid={name}>
+			<DBTooltip
+				id={name}
+				placement="top"
+				style={{
+					visibility: justCopied ? 'visible' : 'hidden'
+				}}>
+				{children}
+			</DBTooltip>
+		</DBButton>
+	);
+};
+
+export default CopyClipboardButton;

showcases/patternhub/components/foundations/colors/colors-grid/index.tsx

@@ -0,0 +1,63 @@
+import checkerboard from '../../../../public/assets/images/checkerboard.png';
+import CopyClipboardButton from '../../../copy-clipboard-button';
+import { type ColorValue } from '../data';
+
+const ColorsGrid = ({
+	values,
+	prefixClass,
+	dataAttributeName,
+	showCheckerboard,
+	enableDarkMode,
+	variant
+}: {
+	values: ColorValue[];
+	prefixClass: string;
+	dataAttributeName: string;
+	showCheckerboard: boolean;
+	enableDarkMode: boolean;
+	variant: 'class' | 'dataAttribute';
+}) => {
+	const getText = (value: string) =>
+		variant === 'class'
+			? `${prefixClass}${value}`
+			: `${dataAttributeName}="${value}"`;
+
+	const getAttributes = (value: string) =>
+		variant === 'class'
+			? { className: `${prefixClass}${value}` }
+			: { [dataAttributeName]: value };
+
+	return (
+		<div
+			className="color-overview-container db-font-size-sm"
+			data-color-scheme={enableDarkMode ? 'dark' : 'light'}>
+			<span
+				style={{
+					backgroundImage: showCheckerboard
+						? `url(${checkerboard.src})`
+						: 'none'
+				}}
+			/>{' '}
+			{values.map((value, index) => {
+				const v = typeof value === 'string' ? value : value.value;
+				const appendix =
+					typeof value === 'string' ? undefined : value.appendix;
+				return (
+					<div {...getAttributes(v)}>
+						<span>
+							{getText(v)}
+							{appendix}
+						</span>
+						<CopyClipboardButton
+							name={`copy-button-${index}`}
+							copyText={getText(v)}>
+							Copied to clipboard
+						</CopyClipboardButton>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export default ColorsGrid;

showcases/patternhub/components/foundations/colors/colors-overview-tabs/index.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import {
+	DBSwitch,
+	DBTabItem,
+	DBTabList,
+	DBTabPanel,
+	DBTabs
+} from '../../../../../../output/react/src';
+import ColorsGrid from '../colors-grid';
+import { type ColorValue } from '../data';
+
+const ColorsOverviewTabs = ({
+	values,
+	prefixClass,
+	dataAttributeName
+}: {
+	values: ColorValue[];
+	prefixClass: string;
+	dataAttributeName: string;
+}) => {
+	const [showCheckerboard, setShowCheckerboard] = useState<boolean>(false);
+	const [enableDarkMode, setEnableDarkMode] = useState<boolean>(false);
+
+	return (
+		<>
+			<div className="color-overview-switches">
+				<DBSwitch
+					checked={showCheckerboard}
+					onChange={(event) => {
+						setShowCheckerboard(event.target.checked);
+					}}>
+					Show checkerboard
+				</DBSwitch>
+				<DBSwitch
+					checked={enableDarkMode}
+					onChange={(event) => {
+						setEnableDarkMode(event.target.checked);
+					}}>
+					Preview dark mode
+				</DBSwitch>
+			</div>
+			<DBTabs>
+				<DBTabList>
+					<DBTabItem>Classes</DBTabItem>
+					<DBTabItem>Data Attributes</DBTabItem>
+				</DBTabList>
+				<DBTabPanel>
+					<ColorsGrid
+						variant="class"
+						values={values}
+						prefixClass={prefixClass}
+						dataAttributeName={dataAttributeName}
+						showCheckerboard={showCheckerboard}
+						enableDarkMode={enableDarkMode}
+					/>
+				</DBTabPanel>
+				<DBTabPanel>
+					<ColorsGrid
+						variant="dataAttribute"
+						values={values}
+						prefixClass={prefixClass}
+						dataAttributeName={dataAttributeName}
+						showCheckerboard={showCheckerboard}
+						enableDarkMode={enableDarkMode}
+					/>
+				</DBTabPanel>
+			</DBTabs>
+		</>
+	);
+};
+
+export default ColorsOverviewTabs;

showcases/patternhub/components/foundations/colors/data.ts

@@ -0,0 +1,38 @@
+export const semanticColors = [
+	'neutral',
+	'brand',
+	'critical',
+	'successful',
+	'warning',
+	'informational'
+];
+
+export const additionalColors = [
+	'yellow',
+	'orange',
+	'red',
+	'pink',
+	'violet',
+	'blue',
+	'cyan',
+	'turquoise',
+	'green'
+];
+
+export const backgroundColors = [
+	'lvl-1',
+	'lvl-2',
+	'lvl-3',
+	'transparent-full',
+	'transparent-semi'
+];
+
+export const onBackgroundColors = [
+	{ value: 'default' },
+	{ value: 'weak' },
+	{ value: 'contrast' },
+	{ value: 'contrast-weak', appendix: ' *' },
+	{ value: 'border', appendix: ' *' }
+];
+
+export type ColorValue = string | { value: string; appendix?: string };