refact!: Remove deprecated CSS properties (#7825)

Author: distantnative

panel/src/components/Layout/Stats.vue

@@ -41,7 +41,7 @@ export default {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
 	grid-auto-rows: 1fr;
-	grid-gap: var(--spacing-2px);
+	grid-gap: 2px;
 }
 
 .k-stats[data-size="small"] {

panel/src/components/Views/Files/FilePreviewFrame.vue

@@ -47,7 +47,7 @@ export default {
 	align-items: center;
 	justify-content: center;
 	height: 100%;
-	padding: var(--spacing-10);
+	padding: var(--spacing-8);
 	container-type: size;
 }
 .k-file-preview-frame :where(img, audio, video) {

panel/src/components/Views/Installation/InstallationView.vue

@@ -180,7 +180,7 @@ export default {
 	width: 100%;
 }
 .k-installation-view form .k-button {
-	margin-top: var(--spacing-10);
+	margin-top: var(--spacing-8);
 }
 .k-installation-view .k-headline {
 	font-weight: var(--font-semi);

panel/src/components/Views/Login/LoginView.vue

@@ -103,6 +103,6 @@ export default {
 	gap: 1.5rem;
 	align-items: center;
 	justify-content: space-between;
-	margin-top: var(--spacing-10);
+	margin-top: var(--spacing-8);
 }
 </style>

panel/src/helpers/color.test.js

@@ -8,10 +8,7 @@ import color from "./color.js";
 describe.concurrent("$helper.css.color()", () => {
 	document.documentElement.style.setProperty("--color-white", "white");
 	document.documentElement.style.setProperty("--color-blue-200", "blue-200");
-	document.documentElement.style.setProperty(
-		"--color-background",
-		"background"
-	);
+	document.documentElement.style.setProperty("--color-dark", "background");
 
 	const data = {
 		"should return nothing for non-strings": [
@@ -35,7 +32,7 @@ describe.concurrent("$helper.css.color()", () => {
 			["LightSeaGreen", "lightseagreen"],
 			["DarkSalmon", "darksalmon"],
 			["MediumSlateBlue", "mediumslateblue"],
-			["Background", "var(--color-background)"],
+			["Dark", "var(--color-dark)"],
 			["#E2E2E2", "#e2e2e2"]
 		]
 	};

panel/src/styles/config/colors.css

@@ -421,29 +421,6 @@
 	--color-text: light-dark(var(--color-black), var(--color-white));
 	--color-text-dimmed: light-dark(var(--color-gray-700), var(--color-gray-400));
 	--color-white: hsl(0, 0%, 100%);
-
-	/** @deprecated */
-	--color-backdrop: rgba(0, 0, 0, 0.6);
-	--color-background: var(--panel-color-back);
-	--color-gray: var(--color-gray-600);
-	--color-red: var(--color-red-600);
-	--color-orange: var(--color-orange-600);
-	--color-yellow: var(--color-yellow-600);
-	--color-green: var(--color-green-600);
-	--color-aqua: var(--color-aqua-600);
-	--color-blue: var(--color-blue-600);
-	--color-purple: var(--color-purple-600);
-	--color-focus-light: var(--color-focus);
-	--color-focus-outline: var(--color-focus);
-	--color-negative: var(--color-red-700);
-	--color-negative-light: var(--color-red-500);
-	--color-negative-outline: var(--color-red-900);
-	--color-notice: var(--color-orange-700);
-	--color-notice-light: var(--color-orange-500);
-	--color-positive: var(--color-green-700);
-	--color-positive-light: var(--color-green-500);
-	--color-positive-outline: var(--color-green-900);
-	--color-text-light: var(--color-text-dimmed);
 }
 
 :root:has(.k-panel[data-theme="dark"]) {

panel/src/styles/config/font-size.css

@@ -9,13 +9,4 @@
 	--text-4xl: 2.5rem;
 	--text-5xl: 3rem;
 	--text-6xl: 4rem;
-
-	/** @deprecated */
-	--text-base: var(--text-md);
-	--font-size-tiny: var(--text-xs);
-	--font-size-small: var(--text-sm);
-	--font-size-medium: var(--text-base);
-	--font-size-large: var(--text-xl);
-	--font-size-huge: var(--text-2xl);
-	--font-size-monster: var(--text-3xl);
 }

panel/src/styles/config/shadow.css

@@ -15,16 +15,6 @@
 	--shadow: var(--shadow-sm);
 	--shadow-toolbar: rgba(0, 0, 0, 0.1) -2px 0 5px, var(--shadow),
 		var(--shadow-xl);
-
-	/** @deprecated */
-	--shadow-outline: var(--color-focus, currentColor) 0 0 0 2px;
-	--shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-	--shadow-sticky: rgba(0, 0, 0, 0.05) 0 2px 5px;
-	--box-shadow-dropdown: var(--shadow-dropdown);
-	--box-shadow-item: var(--shadow);
-	--box-shadow-focus: var(--shadow-xl);
-	--shadow-dropdown: var(--shadow-lg);
-	--shadow-item: var(--shadow-sm);
 }
 
 :root:has(.k-panel[data-theme="dark"]) {

panel/src/styles/config/spacing.css

@@ -11,11 +11,4 @@
 	--spacing-24: 6rem;
 	--spacing-36: 9rem;
 	--spacing-48: 12rem;
-
-	/** @deprecated */
-	--spacing-px: 1px;
-	--spacing-2px: 2px;
-	--spacing-5: 1.25rem;
-	--spacing-10: 2.5rem;
-	--spacing-20: 5rem;
 }