feat: add emphasis for divider

packages/components/src/components/divider/divider.lite.tsx

@@ -50,6 +50,7 @@ export default function DBDivider(props: DBDividerProps) {
 			ref={component}
 			data-margin={props.margin}
 			data-variant={props.variant}
+			data-emphasis={props.emphasis}
 			class={cls('db-divider', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />

packages/components/src/components/divider/model.ts

@@ -1,11 +1,13 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import { EmphasisProps, GlobalProps, GlobalState } from '../../shared/model';
 
 export type DBDividerDefaultProps = {
 	margin?: 'none' | '_';
 	variant?: 'horizontal' | 'vertical';
 };
 
-export type DBDividerProps = DBDividerDefaultProps & GlobalProps;
+export type DBDividerProps = DBDividerDefaultProps &
+	GlobalProps &
+	EmphasisProps;
 
 export type DBDividerDefaultState = {};
 

packages/foundations/scss/_variables.global.scss

@@ -47,6 +47,11 @@ $db-colors-neutral-border-weak: var(
 	)
 );
 
+$db-colors-neutral-border: var(
+	--db-current-border-color,
+	var(--db-neutral-border-enabled, $db-colors-neutral-border-enabled)
+);
+
 // primary
 
 $db-colors-primary: var(--db-primary-enabled, $db-colors-primary-enabled);

packages/foundations/scss/helpers/_functions.scss

@@ -1,6 +1,7 @@
 @use "sass:math";
 @use "a11y" as *;
 @use "clearfix" as *;
+@use "../variables.global" as var;
 
 @function to-rem($pxValue) {
 	@return #{$pxValue * 0.0625}rem;
@@ -41,12 +42,17 @@
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1274133
 // https://github.com/WebKit/WebKit/commit/1890bfb551da24735804cb1a3d5f14b210f7c7b8
 @mixin divider($position: "top", $slot: "before") {
+
+	--db-divider-bg-color: #{var.$db-colors-neutral-border-weak};
 	position: relative;
 
+	&[data-emphasis="strong"] {
+		--db-divider-bg-color: #{var.$db-colors-neutral-border};
+	}
+
 	&::#{$slot} {
 		content: "";
-		background-color: currentColor;
-		opacity: 0.16;
+		background-color: var(--db-divider-bg-color);
 
 		position: absolute;
 		@if $position == "top" {

showcases/angular-showcase/src/app/components/divider/divider.component.html

@@ -13,6 +13,10 @@
 		<db-infotext size="small" variant="informational">
 			{{ exampleName }}</db-infotext
 		>
-		<db-divider [variant]="exampleProps.variant"> </db-divider>
+		<db-divider
+			[variant]="exampleProps.variant"
+			[emphasis]="exampleProps.emphasis"
+		>
+		</db-divider>
 	</ng-template>
 </app-default-component>

showcases/react-showcase/src/components/divider/index.tsx

@@ -4,12 +4,12 @@ import defaultComponentVariants from '../../../../shared/divider.json';
 import { type DBDividerProps } from '../../../../../output/react/src/components/divider/model';
 import { getVariants } from '../data';
 
-const getDivider = ({ variant, children }: DBDividerProps) => (
+const getDivider = ({ variant, emphasis, children }: DBDividerProps) => (
 	<>
 		<DBInfotext size="small" variant="informational">
 			{children}
 		</DBInfotext>
-		<DBDivider variant={variant} />
+		<DBDivider variant={variant} emphasis={emphasis} />
 	</>
 );
 

showcases/shared/divider.json

@@ -38,5 +38,22 @@
 				}
 			}
 		]
+	},
+	{
+		"name": "Emphasis",
+		"examples": [
+			{
+				"name": "Weak (Default)",
+				"style": { "width": "200px" },
+				"props": {}
+			},
+			{
+				"name": "Strong",
+				"style": { "width": "200px" },
+				"props": {
+					"emphasis": "strong"
+				}
+			}
+		]
 	}
 ]

showcases/vue-showcase/src/components/divider/Divider.vue

@@ -12,7 +12,10 @@ import { DBDivider, DBInfotext } from "../../../../../output/vue/vue3/src";
 			<DBInfotext size="small" variant="informational">
 				{{ exampleName }}</DBInfotext
 			>
-			<DBDivider :variant="exampleProps.variant" />
+			<DBDivider
+				:variant="exampleProps.variant"
+				:emphasis="exampleProps.emphasis"
+			/>
 		</template>
 	</DefaultComponent>
 </template>