BC-6842 - Adjust design system

package.json

@@ -48,6 +48,7 @@
 		"@mdi/js": "^7.2.96",
 		"@openapitools/openapi-generator-cli": "^2.7.0",
 		"@types/jest": "^27.5.2",
+		"@types/lodash": "^4.17.0",
 		"@types/object-hash": "^2.2.1",
 		"@types/sortablejs": "^1.15.7",
 		"@typescript-eslint/eslint-plugin": "^6.13.2",

sonar-project.properties

@@ -1,5 +1,5 @@
 sonar.organization=schulcloud-verbund
 sonar.projectKey=hpi-schul-cloud_nuxt-client
-sonar.exclusions=src/serverApi/*.*,src/fileStorageApi/*.*
-sonar.coverage.exclusions=**/*.unit.ts,**/*.unit.js
-sonar.cpd.exclusions=**/locales/**.ts,**/*.unit.ts,**/*.unit.js
+sonar.exclusions=src/serverApi/*.*,src/fileStorageApi/*.*,**/themes/**.ts
+sonar.coverage.exclusions=**/*.unit.ts,**/*.unit.js,**/themes/**.ts
+sonar.cpd.exclusions=**/locales/**.ts,**/*.unit.ts,**/*.unit.js,**/themes/**.ts

src/components/administration/AdminMigrationSection.vue

@@ -394,7 +394,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .alert-text {
-	color: rgba(var(--v-theme-black)) !important;
+	color: rgba(var(--v-theme-on-background)) !important;
 	line-height: var(--line-height-lg) !important;
 }
 </style>

src/components/administration/MigrationWarningCard.vue

@@ -27,11 +27,7 @@
 			/>
 		</v-card-text>
 		<v-card-actions>
-			<v-btn
-				data-testid="disagree-btn"
-				color="secondary"
-				@click="$emit(eventName)"
-			>
+			<v-btn data-testid="disagree-btn" @click="$emit(eventName)">
 				{{ $t(disagree) }}
 			</v-btn>
 			<v-btn

src/components/administration/ProvisioningOptionsPage.vue

@@ -58,7 +58,6 @@
 			<v-btn
 				class="mr-2"
 				data-testid="provisioning-options-cancel-button"
-				color="secondary"
 				variant="outlined"
 				@click="onCancel"
 				>{{ t("common.actions.cancel") }}</v-btn

src/components/atoms/vCustomBreadcrumbs.vue

@@ -12,6 +12,7 @@
 					:disabled="item.disabled"
 					:exact="true"
 					class="breadcrumbs-item"
+					color="primary"
 					:data-testid="`breadcrumb-${index}`"
 				>
 					{{ item.title }}

src/components/atoms/vRoomAvatar.vue

@@ -203,7 +203,6 @@ export default defineComponent({
 .subtitle {
 	margin-right: calc(var(--space-base-vuetify) * -5);
 	margin-left: calc(var(--space-base-vuetify) * -5);
-	color: rgba(var(--v-theme-black));
 	text-align: center;
 	overflow-wrap: break-word;
 	white-space: pre-wrap;
@@ -223,7 +222,6 @@ export default defineComponent({
 		margin-left: unset;
 		/* stylelint-disable-next-line sh-waqar/declaration-use-variable */
 		font-size: 14px;
-		color: rgba(var(--v-theme-black));
 	}
 }
 

src/components/atoms/vRoomEmptyAvatar.vue

@@ -57,12 +57,10 @@ export default {
 <style scoped>
 .outlined {
 	border: 2px dashed;
-	border-color: rgba(var(--v-theme-secondary));
 }
 
 .hovered-avatar {
 	border: 2px solid;
-	border-color: rgba(var(--v-theme-secondary));
 }
 
 .avatar-component-empty {

src/components/base/BaseDialog/BaseDialog.unit.js

@@ -25,74 +25,37 @@ describe("@/components/base/BaseDialog", () => {
 			expect(dialogCard.text()).toContain(testMessage);
 		});
 
-		it("iconColor Prop should override actionDesign", () => {
+		it("iconColor Prop should override default color", () => {
 			const testColor = "lime";
 			const wrapper = mountDialog({
 				props: {
 					active: true,
 					iconColor: testColor,
-					actionDesign: "danger",
 					icon: "warning",
 				},
 			});
 			expect(wrapper.vm.currentIconColor).toBe(testColor);
 		});
 
-		it("icon should have by default the actionDesign prop color", () => {
+		it("icon should have by default the primary color", () => {
 			const designs = ["success", "danger", "primary"];
 			// Make sure all expects get executed
 			expect.assertions(designs.length);
-			const testWithDesign = async (design) => {
+			const testWithDesign = async () => {
 				const wrapper = mountDialog({
 					props: {
-						actionDesign: design,
 						icon: "warning",
 					},
 				});
 				// We can not test if the style gets applied because
 				// the BaseIcon is not rendered (solvable)
 				// and css custom properties get ignored by vue-test-utils
 				expect(wrapper.vm.currentIconColor).toBe(
-					`rgba(var(--v-theme-${design}))`
+					"rgba(var(--v-theme-primary))"
 				);
 			};
 			designs.map(testWithDesign);
 		});
-
-		it("passes correct button designs", () => {
-			const wrapper = mountDialog({
-				props: {
-					active: true,
-					actionDesign: "success",
-				},
-			});
-			const confirmBtn = wrapper.findComponent(
-				`[data-testid="btn-dialog-confirm"]`
-			);
-			const cancelBtn = wrapper.findComponent(
-				`[data-testid="btn-dialog-cancel"]`
-			);
-			expect(confirmBtn.classes("text-success")).toBe(true);
-			expect(cancelBtn.classes("v-btn")).toBe(true);
-		});
-
-		it("invertedDesign: true switches the confirm and cancel button design", () => {
-			const wrapper = mountDialog({
-				props: {
-					active: true,
-					actionDesign: "success",
-					invertedDesign: true,
-				},
-			});
-			const confirmBtn = wrapper.findComponent(
-				`[data-testid="btn-dialog-confirm"]`
-			);
-			const cancelBtn = wrapper.findComponent(
-				`[data-testid="btn-dialog-cancel"]`
-			);
-			expect(confirmBtn.classes("v-btn")).toBe(true);
-			expect(cancelBtn.classes("bg-success")).toBe(true);
-		});
 	});
 
 	describe("behaviour", () => {

src/components/base/BaseDialog/BaseDialog.vue

@@ -16,17 +16,16 @@
 			</template>
 			<template #footerRight>
 				<v-btn
-					variant="flat"
-					:color="!invertedDesign ? 'secondary' : 'success'"
+					variant="text"
 					data-testid="btn-dialog-cancel"
 					@click="cancel"
 					class="mr-3"
 				>
 					{{ cancelText }}
 				</v-btn>
 				<v-btn
-					variant="text"
-					:color="invertedDesign ? 'secondary' : 'success'"
+					variant="flat"
+					color="primary"
 					data-testid="btn-dialog-confirm"
 					@click="confirm"
 				>
@@ -62,10 +61,6 @@ export default {
 			type: String,
 			default: undefined,
 		},
-		actionDesign: {
-			type: String,
-			default: "primary",
-		},
 		confirmText: {
 			type: String,
 			default: "Bestätigen",
@@ -86,18 +81,13 @@ export default {
 			type: Function,
 			default: () => ({}),
 		},
-		invertedDesign: {
-			type: Boolean,
-		},
 	},
 	data() {
 		return {};
 	},
 	computed: {
 		currentIconColor() {
-			return this.iconColor
-				? this.iconColor
-				: `rgba(var(--v-theme-${this.actionDesign}))`;
+			return this.iconColor ? this.iconColor : "rgba(var(--v-theme-primary))";
 		},
 		isActive: {
 			get() {

src/components/base/BaseInput/BaseInputCheckbox.unit.js

@@ -13,7 +13,7 @@ describe("@/components/base/BaseInputCheckbox", () => {
 					label: "Checkbox",
 					type,
 					modelValue: true,
-					color: `rgba(var(--v-theme-secondary))`,
+					color: `rgba(var(--v-theme-on-background))`,
 				},
 			});
 			expect(wrapper.find("input[type='checkbox']").exists()).toBe(true);

src/components/base/BaseInput/BaseInputCheckbox.vue

@@ -42,7 +42,6 @@ export default {
 		},
 		color: {
 			type: String,
-			default: `rgba(var(--v-theme-secondary))`,
 		},
 		label: {
 			type: String,

src/components/base/BaseInput/BaseInputDefault.vue

@@ -55,7 +55,7 @@
 					<v-btn
 						v-if="type === 'password' && !error && !success"
 						icon
-						variant="plain"
+						variant="text"
 						type="button"
 						data-testid="pwd-visibility-toggle"
 						class="pwd-toggle"
@@ -237,7 +237,7 @@ export default defineComponent({
 
 .top {
 	width: 100%;
-	border-bottom: var(--border-width) solid rgba(var(--v-theme-black));
+	border-bottom: var(--border-width) solid rgba(var(--v-theme-on-background));
 
 	&:focus-within,
 	&:hover:not(.disabled) {

src/components/base/BaseInput/BaseInputRadio.vue

@@ -65,7 +65,7 @@ label {
 	display: inline-block;
 	width: 0.7em;
 	height: 0.7em;
-	border: 2px solid rgba(var(--v-theme-secondary));
+	border: 2px solid rgba(var(--v-theme-on-background));
 	border-radius: var(--radius-round);
 }
 
@@ -82,7 +82,7 @@ input:checked + .radio {
 		margin: 20% auto;
 		/* stylelint-enable */
 		content: "";
-		background: rgba(var(--v-theme-secondary));
+		background: rgba(var(--v-theme-on-background));
 		border-radius: var(--radius-round);
 	}
 }

src/components/copy-result-modal/CopyResultModal.vue

@@ -24,7 +24,7 @@
 							<p
 								v-if="warning.isShow"
 								:key="index"
-								class="text-black mb-0 aligned-with-icon"
+								class="mb-0 aligned-with-icon"
 								data-testid="warning-title"
 							>
 								<strong>{{ warning.title }}</strong>
@@ -36,7 +36,7 @@
 				</div>
 			</div>
 
-			<div v-if="hasErrors" class="text-black">
+			<div v-if="hasErrors">
 				<p>{{ $t("components.molecules.copyResult.information") }}</p>
 			</div>
 			<copy-result-modal-list :items="filteredItems" />

src/components/copy-result-modal/CopyResultModalListItem.vue

@@ -1,14 +1,14 @@
 <template>
 	<div v-if="item !== undefined">
-		<div class="d-flex flex-row align-items-center text-black">
+		<div class="d-flex flex-row align-items-center">
 			{{ elementTypeName }} &middot;&nbsp;
 			<a :href="item.url" target="_blank">{{ breadcrumbTitle }}</a>
 		</div>
 		<ul class="ml-4 mb-4 pl-1">
 			<li v-for="(e, index) of elements" :key="index" class="element-info">
-				<span class="text-black"
-					>{{ getElementType(e) }}&nbsp;·&nbsp;{{ getElementTitle(e) }}</span
-				>
+				<span>
+					{{ getElementType(e) }}&nbsp;·&nbsp;{{ getElementTitle(e) }}
+				</span>
 			</li>
 		</ul>
 	</div>

src/components/external-tools/configuration/ExternalToolConfigurator.vue

@@ -55,7 +55,6 @@
 		<v-row class="justify-end mt-10">
 			<v-btn
 				class="mr-2"
-				color="secondary"
 				variant="outlined"
 				@click="onCancel"
 				data-testId="cancel-button"

src/components/h5p/H5PPlayer.vue

@@ -4,7 +4,7 @@
 			v-if="!playerInitialized"
 			class="d-flex position-fixed justify-center align-center min-height-screen"
 		>
-			<v-progress-circular indeterminate color="secondary" size="115" />
+			<v-progress-circular indeterminate size="115" />
 		</div>
 		<h5p-player
 			ref="h5pPlayerRef"

src/components/legacy/NavigationBar.vue

@@ -103,7 +103,6 @@ export default {
 	justify-content: center;
 	width: 100%;
 	line-height: var(--line-height-lg);
-	color: rgba(var(--v-theme-black));
 	text-align: center;
 	background-color: rgba(var(--v-theme-white));
 	-webkit-backdrop-filter: blur(5px);
@@ -219,7 +218,6 @@ export default {
 	padding: var(--space-xs) var(--space-md);
 	font-family: var(--font-primary);
 	font-size: var(--text-md);
-	color: rgba(var(--v-theme-black));
 
 	@include breakpoint(tablet) {
 		display: flex;

src/components/legacy/TheFooter.vue

@@ -103,7 +103,6 @@ export default {
 	width: 100%;
 	padding: 0 var(--space-md);
 	margin: var(--space-lg) 0 var(--space-md);
-	color: rgba(var(--v-theme-secondary-darken-1));
 	text-align: center;
 
 	@include breakpoint(tablet) {