logo as image

.config/.jscpd.json

@@ -75,7 +75,8 @@
 		"**/examples/**/*.example.lite.tsx",
 		"**/figma/**/*.figma.lite.tsx",
 		"**/figma/**/*.figma.ts",
-		"**/packages/eslint-plugin/src/rules/**"
+		"**/packages/eslint-plugin/src/rules/**",
+		"**/packages/foundations/assets/images/**"
 	],
 	"ignorePattern": ["<option value=\"test5\">Test5</option>"],
 	"absolute": true

__snapshots__/brand/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -3,6 +3,6 @@
   - link "Density"
   - text: Functional (Default) Regular Expressive
   - link "Variants"
-  - text: (Default) With Logo No Logo
+  - text: (Default) With Logo Logo Variant
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/chromium/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -3,6 +3,6 @@
   - link "Density"
   - text: Functional (Default) Regular Expressive
   - link "Variants"
-  - text: (Default) With Logo No Logo
+  - text: (Default) With Logo Logo Variant
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/firefox/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -3,6 +3,6 @@
   - link "Density"
   - text: Functional (Default) Regular Expressive
   - link "Variants"
-  - text: (Default) With Logo No Logo
+  - text: (Default) With Logo Logo Variant
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -3,6 +3,6 @@
   - link "Density"
   - text: Functional (Default) Regular Expressive
   - link "Variants"
-  - text: (Default) With Logo No Logo
+  - text: (Default) With Logo Logo Variant
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/mobile-safari/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -3,6 +3,6 @@
   - link "Density"
   - text: Functional (Default) Regular Expressive
   - link "Variants"
-  - text: (Default) With Logo No Logo
+  - text: (Default) With Logo Logo Variant
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/webkit/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -3,6 +3,6 @@
   - link "Density"
   - text: Functional (Default) Regular Expressive
   - link "Variants"
-  - text: (Default) With Logo No Logo
+  - text: (Default) With Logo Logo Variant
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

packages/components/package.json

@@ -37,7 +37,7 @@
     "dev:angular": "nodemon --watch src --watch scripts --watch configs --ext tsx,ts,cjs --exec \"npm run compile:angular\"",
     "dev:html": "pnpm run copy-assets && pnpm run build-assets && pnpm run build-style:01_sass && vite --open",
     "dev:react": "nodemon --watch src --watch scripts --watch configs --ext tsx,ts,cjs --exec \"pnpm run compile:react\"",
-    "dev:scss": "pnpm run build-style:01_sass -- --watch --source-map",
+    "dev:scss": "sass src:build --load-path=node_modules --watch",
     "dev:stencil": "nodemon --watch src --watch scripts --watch configs --ext tsx,ts,cjs --exec \"pnpm run compile:stencil\"",
     "dev:vue": "nodemon --watch src --watch scripts --watch configs --ext tsx,ts,cjs --exec \"pnpm run compile:vue\"",
     "generate:agent": "mitosis build --config=configs/mitosis.agent.config.cjs",

packages/components/src/components/brand/brand.lite.tsx

@@ -5,7 +5,6 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { DEFAULT_ICON } from '../../shared/constants';
 import { cls, getBooleanAsString } from '../../utils';
 import { DBBrandProps, DBBrandState } from './model';
 
@@ -22,10 +21,9 @@ export default function DBBrand(props: DBBrandProps) {
 	return (
 		<div
 			ref={_ref}
-			data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
-			data-show-icon={getBooleanAsString(props.showIcon)}
 			id={props.id ?? props.propOverrides?.id}
-			class={cls('db-brand', props.className)}>
+			class={cls('db-brand', props.className)}
+			data-no-text={getBooleanAsString(props.noText)}>
 			{props.children}
 			<Show when={props.text}>{props.text}</Show>
 		</div>

packages/components/src/components/brand/brand.scss

@@ -7,14 +7,26 @@
 	@extend %db-overwrite-font-size-md;
 	@include helpers.display(flex);
 
-	gap: variables.$db-spacing-fixed-sm;
 	align-items: center;
 	font-weight: 700;
 
-	&::before {
-		--db-icon-font-size: #{variables.$db-sizing-md};
-		--db-icon-margin-end: 0;
-		--db-icon-color: #{colors.$db-brand-origin-default};
+	&:not(:has(img)) {
+		&::before {
+			content: "";
+			block-size: #{variables.$db-sizing-sm};
+			aspect-ratio: var(--db-logo-aspect-ratio);
+			background-image: var(--db-logo-url);
+			background-repeat: no-repeat;
+			background-size: auto #{variables.$db-sizing-sm};
+		}
+	}
+
+	&:not([data-no-text="true"]) {
+		gap: variables.$db-spacing-fixed-sm;
+	}
+
+	&[data-no-text="true"] {
+		font-size: 0;
 	}
 
 	img {

packages/components/src/components/brand/docs/Migration.md

@@ -17,12 +17,11 @@
 > We removed all old properties, because brand hasn't a wrapping anchor tag (`<a>`) anymore.
 > If you want to use a link around `db-brand`, do it by yourself.
 
-| Before           | Status | After | Description                                                                                           |
-| ---------------- | :----: | :---: | ----------------------------------------------------------------------------------------------------- |
-| `siteNameLink`   |   ❌   |  ❌   | see Note                                                                                              |
-| `alt`            |   ❌   |  ❌   | see Note                                                                                              |
-| `anchorRef`      |   ❌   |  ❌   | see Note                                                                                              |
-| `anchorTitle`    |   ❌   |  ❌   | see Note                                                                                              |
-| `anchorRelation` |   ❌   |  ❌   | see Note                                                                                              |
-| `src`            |   ❌   |  ❌   | see Note                                                                                              |
-| `hideLogo`       |   🆕   |  ❌   | If you want a custom image, you can hide the default one and pass anything into the `children`/`slot` |
+| Before           | Status | After | Description |
+| ---------------- | :----: | :---: | ----------- |
+| `siteNameLink`   |   ❌   |  ❌   | see Note    |
+| `alt`            |   ❌   |  ❌   | see Note    |
+| `anchorRef`      |   ❌   |  ❌   | see Note    |
+| `anchorTitle`    |   ❌   |  ❌   | see Note    |
+| `anchorRelation` |   ❌   |  ❌   | see Note    |
+| `src`            |   ❌   |  ❌   | see Note    |

packages/components/src/components/brand/examples/_brand.arg.types.ts

@@ -1,9 +1,7 @@
 import type { InputType } from 'storybook/internal/csf';
-import { StorybookIconArgTypes } from '../../../shared/examples/_icons.arg.types';
 
 export const StorybookBrandArgTypes: Record<string, InputType> = {
-	hideLogo: { control: 'boolean' },
-	...StorybookIconArgTypes,
+	noText: { control: 'boolean' },
 	text: { control: 'text' },
 	id: { control: 'text' },
 	autofocus: { control: 'boolean' }

packages/components/src/components/brand/examples/variants.example.lite.tsx

@@ -9,7 +9,7 @@ import { StorybookBrandArgTypes } from './_brand.arg.types';
 
 useMetadata({
 	storybookTitle: 'Variants',
-	storybookNames: ['(Default) With Logo', 'No Logo', 'Custom Logo'],
+	storybookNames: ['(Default) With Logo', 'Logo Variant', 'Custom Logo'],
 	storybookArgTypes: StorybookBrandArgTypes
 });
 
@@ -34,8 +34,10 @@ export default function BrandVariants() {
 	return (
 		<Fragment>
 			<DBBrand>(Default) With Logo</DBBrand>
-			<DBBrand hideLogo={true}>No Logo</DBBrand>
-			<DBBrand hideLogo={true}>
+			<DBBrand data-logo="db-systel" noText>
+				Logo Variant
+			</DBBrand>
+			<DBBrand>
 				<img
 					src={state.getImage()}
 					alt="this is a fancy placeholder logo"

packages/components/src/components/brand/model.ts

@@ -2,6 +2,7 @@ import {
 	GlobalProps,
 	GlobalState,
 	IconProps,
+	NoTextProps,
 	ShowIconProps,
 	TextProps
 } from '../../shared/model';
@@ -15,9 +16,10 @@ export type DBBrandDefaultProps = {
 
 export type DBBrandProps = DBBrandDefaultProps &
 	GlobalProps &
+	TextProps &
 	IconProps &
 	ShowIconProps &
-	TextProps;
+	NoTextProps;
 
 export type DBBrandDefaultState = {};
 

packages/foundations/scss/defaults/default-required.scss

@@ -5,29 +5,13 @@
 @use "../helpers";
 @use "../fonts";
 @use "../screen-sizes";
-@use "../colors/default-color-icons";
 @forward "../colors/default-color-mappings";
 @forward "../normalize";
 @include screen-sizes.get-breakpoint-properties;
 
 :root,
 :host {
 	@extend %db-font-size-md;
-
-	/* COLORS */
-	@include default-color-icons.get-color-icons-light;
-
-	@media (prefers-color-scheme: dark) {
-		@include default-color-icons.get-color-icons-dark;
-	}
-
-	[data-mode="dark"] {
-		@include default-color-icons.get-color-icons-dark;
-	}
-
-	[data-mode="light"] {
-		@include default-color-icons.get-color-icons-light;
-	}
 }
 
 // We'll set the color scheme (https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) to light and dark if it's not already set as a meta tag in the head, which would be the recommended way.

packages/foundations/scss/theme/_absolute.assets-paths.scss

@@ -1,5 +1,6 @@
 // If you serve your assets and your css on root level you might need those paths.
 @use "default.assets-paths" as assets-paths with (
 	$icons-path: "/assets/icons/",
-	$fonts-path: "/assets/fonts/"
+	$fonts-path: "/assets/fonts/",
+	$images-path: "/assets/images/"
 );

packages/foundations/scss/theme/_default-images.scss

@@ -0,0 +1,9 @@
+@use "./default.assets-paths" as assets-paths;
+
+@mixin get-images {
+	--db-textarea-resizer-image: url("#{assets-paths.$images-path}resize_handle_corner.svg");
+	--db-textarea-scrollbar-button-decrement: url("#{assets-paths.$images-path}chevron_down.svg");
+	--db-textarea-scrollbar-button-increment: url("#{assets-paths.$images-path}chevron_up.svg");
+	--db-logo-aspect-ratio: 1;
+	--db-logo-url: url("#{assets-paths.$images-path}logo.svg");
+}

packages/foundations/scss/theme/_default.assets-paths.scss

@@ -1,2 +1,3 @@
 $icons-path: "../../assets/icons/" !default;
 $fonts-path: "../../assets/fonts/" !default;
+$images-path: "../../assets/images/" !default;

packages/foundations/scss/theme/_rollup.assets-paths.scss

@@ -1,5 +1,6 @@
 // If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths.
 @use "default.assets-paths" as assets-paths with (
 	$icons-path: "@db-ux/core-foundations/assets/icons/",
-	$fonts-path: "@db-ux/core-foundations/assets/fonts/"
+	$fonts-path: "@db-ux/core-foundations/assets/fonts/",
+	$images-path: "@db-ux/core-foundations/assets/images/"
 );

packages/foundations/scss/theme/_webpack.assets-paths.scss

@@ -1,5 +1,6 @@
 // If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths.
 @use "default.assets-paths" as assets-paths with (
 	$icons-path: "~@db-ux/core-foundations/assets/icons/",
-	$fonts-path: "~@db-ux/core-foundations/assets/fonts/"
+	$fonts-path: "~@db-ux/core-foundations/assets/fonts/",
+	$images-path: "~@db-ux/core-foundations/assets/images/"
 );

packages/foundations/scss/theme/relative.scss

@@ -1,4 +1,5 @@
 @use "../colors/placeholder";
+@use "./default-images";
 @forward "../defaults/default-properties";
 @forward "../fonts/relative";
 @forward "../icons/relative";
@@ -14,3 +15,7 @@
 	initial-value: "OpenSans Head", helvetica, arial, sans-serif;
 	inherits: true;
 }
+
+:is(:root, :host) {
+	@include default-images.get-images;
+}