kern fixes

Author: BF150

packages/themes/kern/src/components/progress.scss

@@ -2,47 +2,55 @@
 
 @layer kol-theme-component {
 	.kol-progress {
-		&__bar-border {
-			display: none;
-		}
-
-		&__bar-progress {
-			fill: var(--kern-color-feedback-loader);
-			rx: 0;
-			ry: 0;
-		}
-
-		&__bar-background {
-			fill: var(--kern-color-feedback-loader-background);
-			rx: 0;
-			ry: 0;
-			stroke: var(--kern-color-layout-background-default);
-		}
-
-		&__cycle-background {
-			fill: transparent;
-		}
-
-		&__cycle-border {
-			display: none;
-		}
-
-		&__cycle-background {
-			fill: transparent;
-			stroke: var(--kern-color-feedback-loader-background);
-		}
-
-		&__cycle-whitespace {
-			fill: transparent;
-			stroke: var(--kern-color-feedback-loader-background);
-			stroke-width: to-rem(1);
-		}
-
-		&__cycle-progress {
-			fill: transparent;
-			stroke: var(--kern-color-feedback-loader);
-			stroke-linecap: butt;
-			stroke-width: to-rem(8);
+		&__bar {
+			&-border {
+				display: none;
+			}
+
+			&-progress {
+				fill: var(--kern-color-feedback-loader);
+				rx: 0;
+				ry: 0;
+			}
+
+			&-background {
+				fill: var(--kern-color-feedback-loader-background);
+				rx: 0;
+				ry: 0;
+				stroke: var(--kern-color-layout-background-default);
+			}
+
+			&-value {
+				margin-left: to-rem(8);
+			}
+		}
+
+		&__cycle {
+			&-background {
+				fill: transparent;
+			}
+
+			&-border {
+				display: none;
+			}
+
+			&-background {
+				fill: transparent;
+				stroke: var(--kern-color-feedback-loader-background);
+			}
+
+			&-whitespace {
+				fill: transparent;
+				stroke: var(--kern-color-feedback-loader-background);
+				stroke-width: to-rem(1);
+			}
+
+			&-progress {
+				fill: transparent;
+				stroke: var(--kern-color-feedback-loader);
+				stroke-linecap: butt;
+				stroke-width: to-rem(8);
+			}
 		}
 	}
 }

packages/themes/kern/src/components/quote.scss

@@ -0,0 +1,14 @@
+@use '~@public-ui/components/index' as *;
+
+@layer kol-theme-component {
+	.kol-quote {
+		&__cite {
+			display: inline-flex;
+			align-items: center;
+
+			&::before {
+				margin-right: to-rem(8);
+			}
+		}
+	}
+}

packages/themes/kern/src/components/tree-item.scss

@@ -7,6 +7,8 @@
 		gap: var(--kern-metric-space-small);
 		flex-direction: column;
 
+		--indentation: #{to-rem(16)};
+
 		@include kol-link('kol-tree-item__text');
 
 		&__link {
@@ -28,6 +30,7 @@
 			.kol-link {
 				width: 100%;
 				padding-right: 0;
+				padding-left: max(calc(var(--indentation) * var(--level)));
 
 				&:focus {
 					outline-color: var(--kern-color-action-focus-background);

packages/themes/kern/src/index.ts

@@ -29,6 +29,7 @@ import navCss from './components/nav.scss';
 import paginationCss from './components/pagination.scss';
 import popoverButtonCss from './components/popover-button.scss';
 import progressCss from './components/progress.scss';
+import quoteCss from './components/quote.scss';
 import selectCss from './components/select.scss';
 import singleSelect from './components/single-select.scss';
 import skipNavCss from './components/skip-nav.scss';
@@ -76,6 +77,7 @@ export const KERN_V2 = KoliBri.createTheme('kern-v2', {
 	'KOL-PAGINATION': paginationCss,
 	'KOL-POPOVER-BUTTON': popoverButtonCss,
 	'KOL-PROGRESS': progressCss,
+	'KOL-QUOTE': quoteCss,
 	'KOL-SELECT': selectCss,
 	'KOL-SINGLE-SELECT': singleSelect,
 	'KOL-SKIP-NAV': skipNavCss,

packages/themes/kern/src/mixins/_pagination.mixin.scss

@@ -4,10 +4,16 @@
 
 @mixin pagination {
 	.kol-pagination {
-		display: flex;
 		@include button('kol-button');
 		@include kol-select();
 
+		display: flex;
+		gap: to-rem(16);
+
+		&__navigation-list {
+			gap: to-rem(8);
+		}
+
 		&__button--selected .kol-button--normal:disabled {
 			--button-text-background-color: var(--kern-color-action-default);
 			--button-text-border-color: var(--kern-color-action-default);