Bunch of fixes

getkirby · Dec 2, 2024 · f44228b · f44228b
1 parent 4ec62ad
commit f44228b
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 21 deletions.
diff --git a/panel/lab/basics/icons/1_iconset/index.vue b/panel/lab/basics/icons/1_iconset/index.vue
@@ -36,6 +36,7 @@ export default {
 	align-items: center;
 	gap: 0.75rem;
 	padding: var(--spacing-2);
+	color: var(--color-black);
 	background: var(--color-white);
 	border-radius: var(--rounded);
 	box-shadow: var(--shadow);

diff --git a/panel/lab/components/toolbar/3_writer/index.vue b/panel/lab/components/toolbar/3_writer/index.vue
@@ -26,7 +26,7 @@ export default {
 
 <style>
 .k-writer-input {
-	background-color: white;
+	background-color: var(--input-color-back);
 	border-radius: var(--rounded);
 }
 </style>
diff --git a/panel/src/components/Forms/Previews/BubblesFieldPreview.vue b/panel/src/components/Forms/Previews/BubblesFieldPreview.vue
@@ -62,7 +62,7 @@ export default {
 <style>
 .k-bubbles-field-preview {
 	--bubble-back: var(--panel-color-back);
-	--bubble-text: var(--color-black);
+	--bubble-text: var(--color-text);
 
 	padding: 0.375rem var(--table-cell-padding);
 	overflow: hidden;

diff --git a/panel/src/components/Layout/Frame/Frame.vue b/panel/src/components/Layout/Frame/Frame.vue
@@ -84,7 +84,7 @@ export default {
 
 .k-frame:where([data-theme]) {
 	--back: var(--theme-color-back);
-	color: var(--theme-color-text);
+	color: var(--theme-color-text-highlight);
 }
 
 .k-frame *:where(img, video, iframe, button) {

diff --git a/panel/src/components/Layout/Stat.vue b/panel/src/components/Layout/Stat.vue
@@ -83,7 +83,10 @@ export default {
 <style>
 :root {
 	--stat-color-back: var(--item-color-back);
-	--stat-color-hover-back: light-dark(var(--color-gray-100), var(--color-gray-850));
+	--stat-color-hover-back: light-dark(
+		var(--color-gray-100),
+		var(--color-gray-850)
+	);
 	--stat-info-text-color: var(--color-text-dimmed);
 	--stat-value-text-size: var(--text-2xl);
 }

diff --git a/panel/src/components/Navigation/Browser.vue b/panel/src/components/Navigation/Browser.vue
@@ -53,9 +53,15 @@ export default {
 
 <style>
 :root {
-	--browser-item-hover-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
+	--browser-item-hover-color-back: light-dark(
+		var(--color-gray-300),
+		var(--color-gray-950)
+	);
 	--browser-item-hover-color-text: currentColor;
-	--browser-item-selected-color-back: light-dark(var(--color-blue-300), var(--color-blue-800));
+	--browser-item-selected-color-back: light-dark(
+		var(--color-blue-300),
+		var(--color-blue-800)
+	);
 	--browser-item-selected-color-text: currentColor;
 	--browser-item-gap: 1px;
 	--browser-item-size: 1fr;
@@ -106,7 +112,7 @@ export default {
 /** TODO: .k-browser-item-image:has(svg) */
 .k-browser-item-image.k-icon-frame {
 	box-shadow: none;
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-black));
 }
 .k-browser-item-image svg {
 	transform: scale(0.8);

diff --git a/panel/src/components/Navigation/Tag.vue b/panel/src/components/Navigation/Tag.vue
@@ -127,8 +127,8 @@ export default {
 }
 
 .k-tag[data-theme="light"] {
-	--tag-color-back: var(--color-light);
-	--tag-color-text: var(--color-black);
+	--tag-color-back: var(--panel-color-back);
+	--tag-color-text: var(--color-text);
 	--tag-color-disabled-back: var(--color-gray-200);
 	--tag-color-disabled-text: var(--color-gray-600);
 }

diff --git a/panel/src/components/Views/System/SystemSecurity.vue b/panel/src/components/Views/System/SystemSecurity.vue
@@ -15,7 +15,7 @@
 				issues.map((issue) => ({
 					// give each message an image prop unless it already has one
 					image: {
-						back: 'light-dark(var(--color-red-200), transparent)',
+						back: 'light-dark(var(--color-red-200), var(--color-red-900))',
 						icon: issue.icon ?? 'alert',
 						color: 'var(--color-red)'
 					},

diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
@@ -298,17 +298,17 @@
 	--color-l-max: 100%;
 	--color-l-100: 95%;
 	--color-l-200: 86%;
-	--color-l-250: 78%;
-	--color-l-300: 73%;
-	--color-l-400: 67%;
-	--color-l-500: 62%;
-	--color-l-600: 52%;
+	--color-l-250: 79%;
+	--color-l-300: 74%;
+	--color-l-400: 68%;
+	--color-l-500: 63%;
+	--color-l-600: 54%;
 	--color-l-700: 40%;
 	--color-l-750: 33%;
 	--color-l-800: 26%;
 	--color-l-850: 19%;
 	--color-l-900: 11%;
-	--color-l-950: 6%;
+	--color-l-950: 7%;
 	--color-l-1000: 3%;
 	--color-l-min: 0%;
 }
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
@@ -36,12 +36,13 @@
 	--theme-color-icon: var(--theme-color-600);
 	--theme-color-icon-highlight: var(--theme-color-700);
 	--theme-color-text: light-dark(
-		var(--theme-color-800),
-		var(--theme-color-500)
+		var(--theme-color-700),
+		var(--theme-color-600)
 	);
-	--theme-color-text-dimmed: light-dark(
-		hsl(var(--theme-color-h), calc(var(--theme-color-s) - 60%), 50%),
-		hsl(var(--theme-color-h), calc(var(--theme-color-s) - 60%), 60%)
+	--theme-color-text-dimmed: hsl(
+		var(--theme-color-h),
+		calc(var(--theme-color-s) - 60%),
+		50%
 	);
 	--theme-color-text-highlight: var(--theme-color-900);
 }
@@ -155,6 +156,7 @@
 	--theme-color-border: transparent;
 	--theme-color-icon: var(--color-text);
 	--theme-color-text: var(--color-text);
+	--theme-color-text-highlight: var(--theme-color-text);
 }
 
 [data-theme] {