Merge branch 'main' into test-guidepup-accordion

e2e/package.json

@@ -23,7 +23,7 @@
     "test:vue-showcase": "npm run test:e2e --workspace=vue-showcase"
   },
   "devDependencies": {
-    "@playwright/test": "1.45.3",
+    "@playwright/test": "1.46.0",
     "cpr": "3.0.1",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.3",

output/react/package.json

@@ -26,7 +26,7 @@
     "tsc": "tsc -p . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.45.3",
+    "@playwright/experimental-ct-react": "1.46.0",
     "@types/react": "^18.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

output/vue/package.json

@@ -38,10 +38,10 @@
     "test:components": "playwright test -c playwright.config.ts"
   },
   "dependencies": {
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.45.3",
+    "@playwright/experimental-ct-vue": "1.46.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "replace-in-file": "^8.1.0",
     "tsx": "^4.16.5",

package.json

@@ -51,7 +51,7 @@
     "@double-great/stylelint-a11y": "3.0.2",
     "@guidepup/guidepup": "0.22.3",
     "@guidepup/playwright": "^0.14.0",
-    "@playwright/test": "1.45.3",
+    "@playwright/test": "1.46.0",
     "@types/fs-extra": "^11.0.4",
     "accessibility-checker": "^3.1.71",
     "adm-zip": "0.5.15",

packages/components/package.json

@@ -47,8 +47,8 @@
   },
   "devDependencies": {
     "@builder.io/eslint-plugin-mitosis": "^0.0.16",
-    "@builder.io/mitosis": "^0.3.19",
-    "@builder.io/mitosis-cli": "^0.3.19",
+    "@builder.io/mitosis": "^0.3.20",
+    "@builder.io/mitosis-cli": "^0.3.20",
     "@react-docgen/cli": "^2.0.3",
     "cpr": "3.0.1",
     "cssnano": "^7.0.4",

packages/foundations/docs/Colors.md

@@ -4,6 +4,14 @@
 -   You can also use it to change the text color for components with the `*-transparent-semi` colors.
 -   Most classes/placeholders will change `color` and `background-color` and will set properties, which will be passed down to adaptive components.
 
+## How to use
+
+1. First, you can use our **[color usage guide](./color-usage-guide)** to find out which method is best for coloring your layouts or components.
+2. The colors of layouts can be easily set using the predefined **[color classes](./color-classes)**.
+3. When developing your own components, `SCSS` variables or `CSS Custom Properties` should be used.
+
+**🚧 The overview of our color variables is still in the making. Please come back soon.**
+
 ## How to include colors
 
 For **CSS** and **Tailwind** you need to use the import `@import "@db-ui/foundations/build/css/color/classes/all.css";` in your root `.css` file.
@@ -14,29 +22,7 @@ In case that you're either using a bundler (recommended) or importing the CSS wi
 For **SCSS** you need to use the import `@use @db-ui/foundations/build/scss/color/placeholder` in your `.scss` file, where you need to reference the specific variable.
 Then you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.
 
-### How to use
-
-We're providing an [overview for all possible colors](./overview).
-
-There are several variants: `brand`, `neutral`, `critical`, `informational`, `successful`, `warning`.
-
-**We use `XXX` here you should replace it with a variant from above.**
-
-|        Variant         | CSS                                  | SCSS                                  | Tailwind                             |
-| :--------------------: | ------------------------------------ | ------------------------------------- | ------------------------------------ |
-|       `XXX-bg-1`       | `class="db-XXX-bg-1"`                | `@extend %db-XXX-bg-1`                | `class="db-XXX-bg-1"`                |
-|       `XXX-bg-2`       | `class="db-XXX-bg-2"`                | `@extend %db-XXX-bg-2`                | `class="db-XXX-bg-2"`                |
-|       `XXX-bg-3`       | `class="db-XXX-bg-3"`                | `@extend %db-XXX-bg-3`                | `class="db-XXX-bg-3"`                |
-| `XXX-transparent-semi` | `class="db-XXX-bg-transparent-semi"` | `@extend %db-XXX-bg-transparent-semi` | `class="db-XXX-bg-transparent-semi"` |
-| `XXX-transparent-full` | `class="db-XXX-bg-transparent-full"` | `@extend %db-XXX-bg-transparent-full` | `class="db-XXX-bg-transparent-full"` |
-
-#### Additional Colors
-
-Besides of the variants above we deliver additional colors which aren't required for the Design System, but you can use them the same way. The additional variants are:
-`yellow`, `orange`, `red`, `pink`, `violet`, `blue`,
-`cyan`, `turquoise`, `green`
-
-### Dark- & Light-Mode
+## 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.
 
@@ -48,7 +34,7 @@ It's [recommended to set a `meta`-HTML-tag](https://web.dev/articles/color-schem
 
 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
 
 ```html
 <div data-color-scheme="dark">...</div>

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

@@ -26,7 +26,7 @@
 @mixin init-on-background-colors($color) {
 	[data-on-bg-color="#{$color}"],
 	.db-on-bg-color-#{$color} {
-		color: var(-db-adaptive-on-bg-basic-#{$color}-default);
+		color: var(--db-adaptive-on-bg-basic-#{$color}-default);
 	}
 }
 

packages/foundations/scss/init/default-fonts.scss

@@ -20,6 +20,7 @@ $headlines: (
 :is(h1, h2, h3, h4, h5, h6) {
 	font-family: var(--db-font-family-head);
 	font-weight: 700;
+	text-wrap: balance;
 
 	&[data-variant="light"] {
 		font-weight: 300;

packages/foundations/tailwind/tailwind-tokens.json

@@ -121,28 +121,26 @@
 			"var(--db-type-body-font-size-3xl)",
 			"var(--db-type-body-line-height-3xl)"
 		],
-		"body": {
-			"xs": [
-				"var(--db-type-body-font-size-xs)",
-				"var(--db-type-body-line-height-xs)"
-			],
-			"sm": [
-				"var(--db-type-body-font-size-sm)",
-				"var(--db-type-body-line-height-sm)"
-			],
-			"md": [
-				"var(--db-type-body-font-size-md)",
-				"var(--db-type-body-line-height-md)"
-			],
-			"lg": [
-				"var(--db-type-body-font-size-lg)",
-				"var(--db-type-body-line-height-lg)"
-			],
-			"xl": [
-				"var(--db-type-body-font-size-xl)",
-				"var(--db-type-body-line-height-xl)"
-			]
-		},
+		"body-xs": [
+			"var(--db-type-body-font-size-xs)",
+			"var(--db-type-body-line-height-xs)"
+		],
+		"body-sm": [
+			"var(--db-type-body-font-size-sm)",
+			"var(--db-type-body-line-height-sm)"
+		],
+		"body-md": [
+			"var(--db-type-body-font-size-md)",
+			"var(--db-type-body-line-height-md)"
+		],
+		"body-lg": [
+			"var(--db-type-body-font-size-lg)",
+			"var(--db-type-body-line-height-lg)"
+		],
+		"body-xl": [
+			"var(--db-type-body-font-size-xl)",
+			"var(--db-type-body-line-height-xl)"
+		],
 		"head-3xs": [
 			"var(--db-type-headline-font-size-3xs)",
 			"var(--db-type-headline-line-height-3xs)"
@@ -159,28 +157,26 @@
 			"var(--db-type-headline-font-size-3xl)",
 			"var(--db-type-headline-line-height-3xl)"
 		],
-		"head": {
-			"xs": [
-				"var(--db-type-headline-font-size-xs)",
-				"var(--db-type-headline-line-height-xs)"
-			],
-			"sm": [
-				"var(--db-type-headline-font-size-sm)",
-				"var(--db-type-headline-line-height-sm)"
-			],
-			"md": [
-				"var(--db-type-headline-font-size-md)",
-				"var(--db-type-headline-line-height-md)"
-			],
-			"lg": [
-				"var(--db-type-headline-font-size-lg)",
-				"var(--db-type-headline-line-height-lg)"
-			],
-			"xl": [
-				"var(--db-type-headline-font-size-xl)",
-				"var(--db-type-headline-line-height-xl)"
-			]
-		}
+		"head-xs": [
+			"var(--db-type-headline-font-size-xs)",
+			"var(--db-type-headline-line-height-xs)"
+		],
+		"head-sm": [
+			"var(--db-type-headline-font-size-sm)",
+			"var(--db-type-headline-line-height-sm)"
+		],
+		"head-md": [
+			"var(--db-type-headline-font-size-md)",
+			"var(--db-type-headline-line-height-md)"
+		],
+		"head-lg": [
+			"var(--db-type-headline-font-size-lg)",
+			"var(--db-type-headline-line-height-lg)"
+		],
+		"head-xl": [
+			"var(--db-type-headline-font-size-xl)",
+			"var(--db-type-headline-line-height-xl)"
+		]
 	},
 	"borderRadius": {
 		"DEFAULT": "var(--db-border-radius-xs)",

showcases/nuxt-showcase/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "nuxt": "^3.12.4",
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.2"
+    "vue": "^3.4.36",
+    "vue-router": "^4.4.3"
   }
 }

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

@@ -20,19 +20,20 @@ export const additionalColors = [
 ];
 
 export const backgroundColors = [
-	'lvl-1',
-	'lvl-2',
-	'lvl-3',
-	'transparent-full',
-	'transparent-semi'
+	'basic-level-1',
+	'basic-level-2',
+	'basic-level-3',
+	'basic-transparent-full',
+	'basic-transparent-semi'
 ];
 
 export const onBackgroundColors = [
-	{ value: 'default' },
-	{ value: 'weak' },
-	{ value: 'contrast' },
-	{ value: 'contrast-weak', appendix: ' *' },
-	{ value: 'border', appendix: ' *' }
+	{ value: 'emphasis-100' },
+	{ value: 'emphasis-90' },
+	{ value: 'emphasis-80' },
+	{ value: 'emphasis-70', appendix: ' *' },
+	{ value: 'emphasis-60', appendix: ' *' },
+	{ value: 'emphasis-50', appendix: ' *' }
 ];
 
 export type ColorValue = string | { value: string; appendix?: string };

showcases/patternhub/data/routes.tsx

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

showcases/patternhub/pages/foundations/colors/overview.tsx → showcases/patternhub/pages/foundations/colors/color-classes.tsx

@@ -8,7 +8,7 @@ import {
 	semanticColors
 } from '../../../components/foundations/colors/data';
 
-const ColorOverview = () => {
+const ColorClasses = () => {
 	return (
 		<DefaultPage>
 			<div>
@@ -70,13 +70,13 @@ const ColorOverview = () => {
 					</li>
 					<li>
 						Background color modifier{' '}
-						<strong>db-bg-color-lvl-1</strong> (Level 1 background
-						by default)
+						<strong>db-bg-color-basic-level-1</strong> (Level 1
+						background by default)
 					</li>
 					<li>
 						On background color modifier{' '}
-						<strong>db-on-bg-color-default</strong> (highest text
-						contrast by default)
+						<strong>db-on-bg-color-emphasis-100</strong> (highest
+						text contrast by default)
 					</li>
 				</ul>
 				<h3>Semantic container color</h3>
@@ -136,4 +136,4 @@ const ColorOverview = () => {
 	);
 };
 
-export default ColorOverview;
+export default ColorClasses;

showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx

@@ -332,7 +332,7 @@ const ColorUsageGuide = () => {
 						</div>
 						<div className="decision-tree-row grid-1-1-1">
 							<ArcherElement id="semantic-container-color-link">
-								<Link href="./overview#container-color-classes">
+								<Link href="./color-classes#container-color-classes">
 									<DBCard
 										className="db-container-color-blue"
 										role="button"
@@ -349,7 +349,7 @@ const ColorUsageGuide = () => {
 
 							<div className="decision-tree-row grid-1-1">
 								<ArcherElement id="background-color-link">
-									<Link href="./overview#background-color-modifier-classes">
+									<Link href="./color-classes#background-color-modifier-classes">
 										<DBCard
 											className="db-container-color-violet"
 											role="button"
@@ -365,7 +365,7 @@ const ColorUsageGuide = () => {
 									</Link>
 								</ArcherElement>
 								<ArcherElement id="text-icon-color-link">
-									<Link href="./overview#on-background-color-modifier-classes">
+									<Link href="./color-classes#on-background-color-modifier-classes">
 										<DBCard
 											className="db-container-color-violet"
 											role="button"

showcases/screen-reader/tests/button.spec.ts

@@ -5,7 +5,7 @@ const test = getTest();
 test.describe('DBButton', () => {
 	testDefault({
 		test,
-		title: 'should not have icon in screen reader (next)',
+		title: 'should not have icon in screen reader (next())',
 		url: './#/02/button?page=content',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {

showcases/screen-reader/tests/input.spec.ts

@@ -5,7 +5,7 @@ const test = getTest();
 test.describe('DBInput', () => {
 	testDefault({
 		test,
-		title: 'should have message and label (next)',
+		title: 'should have message and label (next())',
 		url: './#/03/input?page=variant%20helper%20message',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {

showcases/screen-reader/tests/radio.spec.ts

@@ -4,7 +4,7 @@ const test = getTest();
 test.describe('DBRadio', () => {
 	testDefault({
 		test,
-		title: 'should label duplicated (next)',
+		title: 'should label duplicated (next())',
 		url: './#/03/radio?page=density',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {

showcases/vue-showcase/package.json

@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "sa11y": "3.2.2",
-    "vue": "^3.4.35",
-    "vue-router": "4.4.2"
+    "vue": "^3.4.36",
+    "vue-router": "4.4.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.2",