BC-7168 Follow-up: Additions for a good working customized Material D…

…esign System (#3325)

Add surface-light and on-surface-light variables in order to create a uniform design system according to Material Design principles.

* add surface light and on surface light variables for all themes
* adjust color content element bar

src/modules/ui/board/content-element/ContentElementBar.unit.ts

@@ -148,7 +148,7 @@ describe("ContentElementBar", () => {
 	});
 
 	describe("when hasGreyBackground prop is true", () => {
-		it("should render grey background", () => {
+		it("should render surface-light background", () => {
 			const { wrapper } = setup(
 				{
 					hasGreyBackground: true,
@@ -158,17 +158,17 @@ describe("ContentElementBar", () => {
 				}
 			);
 
-			const divWithBackgroundClass = wrapper.find("div.bg-grey-lighten-4");
+			const divWithBackgroundClass = wrapper.find("div.bg-surface-light");
 
 			expect(divWithBackgroundClass.exists()).toBe(true);
 		});
 	});
 
 	describe("when hasGreyBackground prop is false", () => {
-		it("should not render grey background", () => {
+		it("should not render surface-light background", () => {
 			const { wrapper } = setup({});
 
-			const divWithBackgroundClass = wrapper.find("div.bg-grey-lighten-4");
+			const divWithBackgroundClass = wrapper.find("div.bg-surface-light");
 
 			expect(divWithBackgroundClass.exists()).toBe(false);
 		});

src/modules/ui/board/content-element/ContentElementBar.vue

@@ -12,7 +12,7 @@
 			v-if="
 				$slots.title || $slots.element || $slots.subtitle || $slots.description
 			"
-			:class="{ 'bg-grey-lighten-4': props.hasGreyBackground === true }"
+			:class="{ 'bg-surface-light': props.hasGreyBackground === true }"
 			class="content-element-bar-texts rounded-b py-4"
 		>
 			<div

src/themes/brb/vuetify.options.ts

@@ -11,6 +11,8 @@ const brbTheme: ThemeDefinition = {
 		accent: "#e4032e",
 		"on-surface": "#294c5a",
 		"on-background": "#294c5a",
+		"surface-light": "#f2f4f5",
+		"on-surface-light": "#294c5a",
 		"on-white": "#294c5a",
 	},
 };

src/themes/n21/vuetify.options.ts

@@ -12,6 +12,8 @@ const n21Theme: ThemeDefinition = {
 		"on-surface": "#0f3551",
 		"on-background": "#0f3551",
 		"on-white": "#0f3551",
+		"surface-light": "#f1f3f5",
+		"on-surface-light": "#0f3551",
 	},
 };
 

src/themes/thr/vuetify.options.ts

@@ -11,6 +11,8 @@ const thrTheme: ThemeDefinition = {
 		accent: "#f56b00",
 		"on-surface": "#0f3551",
 		"on-background": "#0f3551",
+		"surface-light": "#f1f3f5",
+		"on-surface-light": "#0f3551",
 		"on-white": "#0f3551",
 	},
 };

src/vuetify.options.ts

@@ -12,6 +12,8 @@ const defaultTheme: ThemeDefinition = {
 		"on-surface": "#3a424b",
 		"on-background": "#3a424b",
 		"on-white": "#3a424b",
+		"surface-light": "#f3f4f4",
+		"on-surface-light": "#3a424b",
 	},
 };