Reactoring theme font-family defintions (#5983)

packages/components/src/components/link/readme.md

@@ -2,9 +2,6 @@
 
 Die **Link**-Komponente rendert einen auf Barrierefreiheit optimierten Link, der als Text, als Icon oder auch in Kombination ausgegeben werden kann.
 
-Beachten Sie, dass die Komponente automatisch ein Padding links und rechts zum umgebenden Text erzeugt. Sie kann daher im Fließtext ohne
-Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern den Abstand zum umgebenden Text.
-
 ## Konstruktion
 
 ### Code

packages/samples/react/src/App.tsx

@@ -137,7 +137,7 @@ export const App: FC = () => {
 				)}
 
 				<div className="p-4" id="route-container">
-					{!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
+					{!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}
 						<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />

packages/samples/react/src/components/link/basic.tsx

@@ -16,8 +16,8 @@ export const LinkBasic: FC = () => (
 			Eigenschaften zuweisen.
 			<br />
 			<br />
-			Danach folgt ein Link, der als block-Element ausgegeben wird.
-			<KolLink class="d-block" _href="#" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+			Danach folgt ein Link, der als block-Element ausgegeben wird. <KolLink class="d-block" _href="#" _label="Simple Link" />, daher gehe ich über die ganze
+			Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
 		</p>
 	</div>
 );

packages/schema/src/tag-names.ts

@@ -26,9 +26,11 @@ export enum TagEnum {
 	'input-radio',
 	'input-range',
 	'input-text',
+	'kolibri',
 	'link',
 	'link-button',
 	'link-group',
+	'logo',
 	'modal',
 	'nav',
 	'pagination',

packages/themes/bmf/src/index.ts

@@ -44,15 +44,11 @@ export const BMF = KoliBri.createTheme('bmf', {
 			--spacing: 0.25em;
 		}
 		:host {
-			font-family: var(--font-family); /* font-size: var(--font-size); */
 			background-color: transparent; /* Reset global background-color defined by components */
 		}
 		* {
 			box-sizing: border-box;
 		}
-		*:not(i) {
-			font-family: var(--font-family);
-		}
 		h1,
 		h2,
 		h3,
@@ -108,6 +104,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-BUTTON': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		:is(a, button) {
 			font-size: 1.125em;
 		}
@@ -237,6 +236,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-TEXT': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -316,6 +318,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-PASSWORD': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -396,6 +401,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-NUMBER': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -476,6 +484,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-DATE': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -556,6 +567,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-EMAIL': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -636,6 +650,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-FILE': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -722,6 +739,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-TEXTAREA': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 			display: grid;
@@ -825,6 +845,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-ALERT': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		.msg,
 		.msg {
 			border-width: 0;
@@ -1103,6 +1126,11 @@ export const BMF = KoliBri.createTheme('bmf', {
 			outline: none;
 		}
 	`,
+	'KOL-AVATAR': css`
+		:host {
+			font-family: var(--font-family);
+		}
+	`,
 	'KOL-HEADING': css`
 		.headline-h1,
 		.headline-h2,
@@ -1136,6 +1164,7 @@ export const BMF = KoliBri.createTheme('bmf', {
 	'KOL-BADGE': css`
 		:host {
 			display: inline-block;
+			font-family: var(--font-family);
 		}
 		:host > span {
 			border-radius: 0.3125rem;
@@ -1177,6 +1206,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INDENTED-TEXT': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		:host > div {
 			background-color: var(--color-white);
 			border-left: none;
@@ -1225,6 +1257,7 @@ export const BMF = KoliBri.createTheme('bmf', {
 	'KOL-DETAILS': css`
 		details > summary {
 			border-radius: var(--border-radius);
+			font-family: var(--font-family);
 		}
 		details kol-indented-text {
 			margin: 0.25em 0px 0px 0.65em;
@@ -1247,6 +1280,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-PROGRESS': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		.bar > div {
 			flex-direction: column;
 			gap: 0.5rem !important;
@@ -1300,6 +1336,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-SELECT': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -1402,6 +1441,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-COLOR': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -1490,6 +1532,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-ACCORDION': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-span-wc > span {
 			display: flex;
 			place-items: baseline center;
@@ -1548,6 +1593,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-TABLE': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		:host * {
 			hyphens: var(--kolibri-hyphens);
 			font-family: var(--kolibri-font-family);
@@ -1694,6 +1742,10 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-CARD': css`
+		:host {
+			font-family: var(--font-family);
+		}
+
 		/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */
 		:host > div {
 			display: grid;
@@ -1722,6 +1774,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-CHECKBOX': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		/* INPUT */
 		:host kol-input {
 			display: grid;
@@ -1956,6 +2011,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-RADIO': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		/* INPUT */
 		kol-input {
 			display: grid;
@@ -2101,6 +2159,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-TABS': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		button:disabled {
 			opacity: 0.5;
 			cursor: not-allowed;
@@ -2252,6 +2313,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-PAGINATION': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		.icon::part(icon) {
 			font-family: 'Font Awesome 6 Free';
 			font-weight: 900;
@@ -2310,6 +2374,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-INPUT-RANGE': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		kol-input {
 			gap: 0.25em;
 		}
@@ -2385,7 +2452,15 @@ export const BMF = KoliBri.createTheme('bmf', {
 			color: var(--color-black);
 		}
 	`,
+	'KOL-KOLIBRI': css`
+		:host {
+			font-family: var(--font-family);
+		}
+	`,
 	'KOL-LINK-BUTTON': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		:is(a, button) {
 			font-size: 1.125em;
 		}
@@ -2558,6 +2633,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-BREADCRUMB': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {
 			font-size: 0.75rem;
 		}
@@ -2579,6 +2657,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		ul li:last-child > span {
 			color: var(--color-grey);
 		}
+		kol-link {
+			font-family: var(--font-family);
+		}
 	`,
 	'KOL-MODAL': css`
 		:host .overlay .modal {
@@ -9590,6 +9671,9 @@ export const BMF = KoliBri.createTheme('bmf', {
 		}
 	`,
 	'KOL-SPLIT-BUTTON': css`
+		:host {
+			font-family: var(--font-family);
+		}
 		.popover {
 			background: #fff;
 		}

packages/themes/default/src/components/accordion.scss

@@ -1,6 +1,9 @@
 @import '../mixins/focus-outline';
 
 @layer kol-theme-component {
+	:host {
+		font-family: var(--font-family);
+	}
 	kol-span-wc > span {
 		display: flex;
 		place-items: baseline center;
@@ -22,6 +25,7 @@
 	}
 	:host > div > kol-heading-wc button kol-icon {
 		color: var(--color-primary);
+		font-size: 1rem;
 	}
 	:host > div {
 		width: 100%;

packages/themes/default/src/components/alert.scss

@@ -1,4 +1,7 @@
 @layer kol-theme-component {
+	:host {
+		font-family: var(--font-family);
+	}
 	.msg {
 		border-width: 0;
 	}

packages/themes/default/src/components/avatar.scss

@@ -0,0 +1,5 @@
+@layer kol-theme-component {
+	:host {
+		font-family: var(--font-family);
+	}
+}

packages/themes/default/src/components/badge.scss

@@ -1,6 +1,7 @@
 @layer kol-theme-component {
 	:host {
 		display: inline-block;
+		font-family: var(--font-family);
 		font-size: inherit;
 	}
 	:host > span {

packages/themes/default/src/components/breadcrumb.scss

@@ -1,4 +1,7 @@
 @layer kol-theme-component {
+	:host {
+		font-family: var(--font-family);
+	}
 	li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {
 		font-size: 0.75rem;
 		color: var(--color-subtle);
@@ -13,4 +16,7 @@
 	ul li:last-child > span {
 		color: var(--color-subtle);
 	}
+	kol-link {
+		font-family: var(--font-family);
+	}
 }