docs: updated to new syntax (#3641)

* docs: updated to new syntax

* docs: updated to new syntax

packages/components/docs/Validation.md

@@ -13,6 +13,6 @@ If you use some framework you can pass the props `invalidMessage` and `validMess
 
 ## Programmatically set / handle validation by yourself
 
-You can use `data-custom-validity|customValidity="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
+You can use `data-validation|validation="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
 
 > **Note:** This may lead to problems and inconsistency, only use it if you know what you do, and have specific validation conditions that aren't possible to get defined by the huge range of already existing [validation conditions and patterns through attributs](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation).

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

@@ -20,7 +20,7 @@ const ColorUsageGuide = () => {
 			</p>
 			<DBSection>
 				<ArcherContainer
-					strokeColor="var(--db-current-color-border)"
+					strokeColor="var(--db-adaptive-on-bg-basic-emphasis-60-default)"
 					endMarker={true}
 					endShape={{ arrow: { arrowLength: 5, arrowThickness: 5 } }}>
 					<div className="decision-tree" data-density="functional">