Update CSS variables

assets/css/framework/colors.css → assets/css/config/colors.css

@@ -1,5 +1,6 @@
 :root {
 	/* Lightness */
+	--color-l-max: 100%;
 	--color-l-100: 98%;
 	--color-l-200: 94%;
 	--color-l-300: 88%;
@@ -9,6 +10,7 @@
 	--color-l-700: 45%;
 	--color-l-800: 30%;
 	--color-l-900: 15%;
+	--color-l-min: 0%;
 
 	/* Colors */
 	--color-red-h: 0;
@@ -239,17 +241,18 @@
 	--color-gray-900: hsl(var(--color-gray-hs), var(--color-gray-l-900));
 
 	/** Shortcuts **/
-	--color-backdrop: rgba(0, 0, 0, 0.6);
-	--color-black: black;
+	--color-black: hsl(0, 0%, var(--color-l-min));
 	--color-border: var(--color-gray-300);
+	--color-border-dimmed: hsla(0, 0%, var(--color-l-min), 0.1);
 	--color-dark: var(--color-gray-900);
 	--color-focus: var(--color-blue-600);
 	--color-light: var(--color-gray-200);
 	--color-text: var(--color-black);
 	--color-text-dimmed: var(--color-gray-700);
-	--color-white: white;
+	--color-white: hsl(0, 0%, var(--color-l-max));
 
 	/** @deprecated */
+	--color-backdrop: rgba(0, 0, 0, 0.6);
 	--color-background: var(--color-light);
 	--color-gray: var(--color-gray-600);
 	--color-red: var(--color-red-600);
@@ -271,3 +274,21 @@
 	--color-positive-outline: var(--color-green-900);
 	--color-text-light: var(--color-text-dimmed);
 }
+
+:root:has(.k-panel[data-theme="dark"]) {
+	--color-l-max: 0%;
+	--color-l-100: 3%;
+	--color-l-200: 10%;
+	--color-l-300: 17%;
+	--color-l-400: 25%;
+	--color-l-500: 36%;
+	--color-l-600: 52%;
+	--color-l-700: 62%;
+	--color-l-800: 70%;
+	--color-l-900: 80%;
+	--color-l-min: 97%;
+
+	--color-gray-250: #0f0f0f;
+
+	color-scheme: dark;
+}

assets/css/config/font-family.css

@@ -0,0 +1,4 @@
+:root {
+	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	--font-mono: "SFMono-Regular", Consolas, Liberation Mono, Menlo, Courier, monospace;
+}

assets/css/config/font-size.css

@@ -0,0 +1,21 @@
+:root {
+	--text-xs: 0.75rem;
+	--text-sm: 0.875rem;
+	--text-md: 1rem;
+	--text-lg: 1.125rem;
+	--text-xl: 1.25rem;
+	--text-2xl: 1.5rem;
+	--text-3xl: 1.75rem;
+	--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);
+}

assets/css/config/font-weight.css

@@ -0,0 +1,6 @@
+:root {
+	--font-thin: 300;
+	--font-normal: 400;
+	--font-semi: 500;
+	--font-bold: 600;
+}

assets/css/config/height.css

@@ -0,0 +1,9 @@
+:root {
+	--height-xs: 1.5rem;
+	--height-sm: 1.75rem;
+	--height-md: 2rem;
+	--height-lg: 2.25rem;
+	--height-xl: 2.5rem;
+
+	--height: var(--height-md);
+}

assets/css/config/opacity.css

@@ -0,0 +1,3 @@
+:root {
+	--opacity-disabled: .5;
+}

assets/css/config/pattern.css

@@ -0,0 +1,25 @@
+:root {
+	--pattern-size: 16px;
+
+	--pattern-light: repeating-conic-gradient(
+			hsl(0, 0%, 100%) 0% 25%,
+			hsl(0, 0%, 90%) 0% 50%
+		)
+		50% / var(--pattern-size) var(--pattern-size);
+
+	--pattern-dark: repeating-conic-gradient(
+			hsla(0, 0%, 15%) 0% 25%,
+			hsl(0, 0%, 22%) 0% 50%
+		)
+		50% / var(--pattern-size) var(--pattern-size);
+
+	--pattern: var(--pattern-dark);
+}
+
+.k-panel[data-theme="dark"] {
+	--pattern-light: repeating-conic-gradient(
+			hsl(0, 0%, 90%) 0% 25%,
+			hsl(0, 0%, 80%) 0% 50%
+		)
+		50% / var(--pattern-size) var(--pattern-size);
+}

assets/css/config/rounded.css

@@ -0,0 +1,9 @@
+:root {
+	--rounded-xs: 1px;
+	--rounded-sm: 0.125rem;
+	--rounded-md: 0.25rem;
+	--rounded-lg: 0.375rem;
+	--rounded-xl: 0.5rem;
+
+	--rounded: var(--rounded-md);
+}

assets/css/config/shadow.css

@@ -0,0 +1,23 @@
+:root {
+	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.025);
+	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+		0 2px 4px -1px rgba(0, 0, 0, 0.05);
+	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+		0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+		0 10px 10px -5px rgba(0, 0, 0, 0.05);
+
+	--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);
+}

assets/css/config/spacing.css

@@ -0,0 +1,21 @@
+:root {
+	--spacing-0: 0;
+	--spacing-1: 0.25rem;
+	--spacing-2: 0.5rem;
+	--spacing-3: 0.75rem;
+	--spacing-4: 1rem;
+	--spacing-6: 1.5rem;
+	--spacing-8: 2rem;
+	--spacing-12: 3rem;
+	--spacing-16: 4rem;
+	--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;
+}

assets/css/config/z-index.css

@@ -0,0 +1,14 @@
+:root {
+	--z-offline: 1200;
+	--z-fatal: 1100;
+	--z-loader: 1000;
+	--z-notification: 900;
+	--z-dialog: 800;
+	--z-navigation: 700;
+	--z-dropdown: 600;
+	--z-drawer: 500;
+	--z-dropzone: 400;
+	--z-toolbar: 300;
+	--z-content: 200;
+	--z-background: 100;
+}

assets/css/framework/variables.css

@@ -2,15 +2,7 @@
 	--container: 90rem;
 	--container-padding: var(--spacing-4);
 
-	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-		Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-	--font-mono: "SFMono-Regular", Consolas, Liberation Mono, Menlo, Courier,
-		monospace;
-
-	--font-thin: 300;
-	--font-normal: 400;
-	--font-semibold: 500;
-	--font-bold: 600;
+	--spacing-42: 10.5rem;
 
 	--leading-none: 1;
 	--leading-tight: 1.25;
@@ -19,53 +11,6 @@
 	--leading-relaxed: 1.625;
 	--leading-loose: 2;
 
-	--rounded-xs: 1px;
-	--rounded-sm: 0.125rem;
-	--rounded: 0.25rem;
-
-	--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-		0 2px 4px -1px rgba(0, 0, 0, 0.06);
-	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-		0 4px 6px -2px rgba(0, 0, 0, 0.05);
-	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-		0 10px 10px -5px rgba(0, 0, 0, 0.04);
-	--shadow-2xl: rgba(0, 0, 0, 0.025) 0 0 10px, rgba(0, 0, 0, 0.075) 0 5px 40px,
-		rgba(0, 0, 0, 0.075) 0 30px 100px;
-	--shadow-outline: currentColor 0 0 0 2px;
-	--shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-
-	--spacing-0: 0;
-	--spacing-px: 1px;
-	--spacing-2px: 2px;
-	--spacing-1: 0.25rem;
-	--spacing-2: 0.5rem;
-	--spacing-3: 0.75rem;
-	--spacing-4: 1rem;
-	--spacing-5: 1.25rem;
-	--spacing-6: 1.5rem;
-	--spacing--6: -1.5rem;
-	--spacing-8: 2rem;
-	--spacing-10: 2.5rem;
-	--spacing-12: 3rem;
-	--spacing--12: -3rem;
-	--spacing-16: 4rem;
-	--spacing-20: 5rem;
-	--spacing-24: 6rem;
-	--spacing-36: 9rem;
-	--spacing-42: 10.5rem;
-
-	--text-xs: 0.75rem;
-	--text-sm: 0.875rem;
-	--text-base: 1rem;
-	--text-lg: 1.125rem;
-	--text-xl: 1.25rem;
-	--text-2xl: 1.5rem;
-	--text-3xl: 1.75rem;
-	--text-4xl: 2.25rem;
-	--text-5xl: 2.75rem;
-	--text-6xl: 3.5rem;
-
 	--text-h1: var(--text-4xl);
 }
 

assets/css/index.css

@@ -1,4 +1,15 @@
-@import "framework/colors.css";
+@import "config/colors.css";
+@import "config/font-family.css";
+@import "config/font-size.css";
+@import "config/font-weight.css";
+@import "config/height.css";
+@import "config/opacity.css";
+@import "config/pattern.css";
+@import "config/rounded.css";
+@import "config/shadow.css";
+@import "config/spacing.css";
+@import "config/z-index.css";
+
 @import "framework/variables.css";
 @import "framework/reset.css";
 @import "framework/buttons.css";

assets/css/layouts/reference.css

@@ -182,12 +182,16 @@ html {
 	align-items: center;
 	font-family: var(--font-mono);
 	font-size: var(--text-xs);
-	background: var(--prose-code-bg);
+	background: var(--color-gray-300);
 	padding: var(--spacing-1) 0.375rem;
 	border-radius: var(--rounded-sm);
 	color: inherit;
 }
 
+.reference-meta :not(.since) a:hover {
+	filter: brightness(97%);
+}
+
 .reference-meta svg {
 	margin-right: var(--spacing-2);
 }