@djangocfg/layouts 2.1.393 → 2.1.395

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.393",
+  "version": "2.1.395",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -84,13 +84,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.393",
-    "@djangocfg/centrifugo": "^2.1.393",
-    "@djangocfg/debuger": "^2.1.393",
-    "@djangocfg/i18n": "^2.1.393",
-    "@djangocfg/monitor": "^2.1.393",
-    "@djangocfg/ui-core": "^2.1.393",
-    "@djangocfg/ui-nextjs": "^2.1.393",
+    "@djangocfg/api": "^2.1.395",
+    "@djangocfg/centrifugo": "^2.1.395",
+    "@djangocfg/debuger": "^2.1.395",
+    "@djangocfg/i18n": "^2.1.395",
+    "@djangocfg/monitor": "^2.1.395",
+    "@djangocfg/ui-core": "^2.1.395",
+    "@djangocfg/ui-nextjs": "^2.1.395",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -121,15 +121,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.393",
-    "@djangocfg/centrifugo": "^2.1.393",
-    "@djangocfg/debuger": "^2.1.393",
-    "@djangocfg/i18n": "^2.1.393",
-    "@djangocfg/monitor": "^2.1.393",
-    "@djangocfg/typescript-config": "^2.1.393",
-    "@djangocfg/ui-core": "^2.1.393",
-    "@djangocfg/ui-nextjs": "^2.1.393",
-    "@djangocfg/ui-tools": "^2.1.393",
+    "@djangocfg/api": "^2.1.395",
+    "@djangocfg/centrifugo": "^2.1.395",
+    "@djangocfg/debuger": "^2.1.395",
+    "@djangocfg/i18n": "^2.1.395",
+    "@djangocfg/monitor": "^2.1.395",
+    "@djangocfg/typescript-config": "^2.1.395",
+    "@djangocfg/ui-core": "^2.1.395",
+    "@djangocfg/ui-nextjs": "^2.1.395",
+    "@djangocfg/ui-tools": "^2.1.395",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/configurator/auth/defaults.ts

@@ -31,8 +31,8 @@ export const defaultCenteredConfig: AuthCenteredConfig = {
   background: {
     enabled: false,
     imageUrl: BG_IMAGES[0].value,
-    gradient: 'linear-gradient(135deg, hsl(var(--primary) / 0.08) 0%, hsl(var(--background)) 100%)',
-    overlay: 'hsl(var(--background) / 0.6)',
+    gradient: 'linear-gradient(135deg, color-mix(in oklab, var(--primary) 8%, transparent) 0%, var(--background) 100%)',
+    overlay: 'color-mix(in oklab, var(--background) 60%, transparent)',
     blur: '8px',
   },
   form: {
@@ -48,7 +48,7 @@ export const defaultSplitConfig: AuthSplitConfig = {
     enabled: true,
     imageUrl: BG_IMAGES[0].value,
     gradient: '',
-    overlay: 'hsl(var(--background) / 0.6)',
+    overlay: 'color-mix(in oklab, var(--background) 60%, transparent)',
     blur: '8px',
   },
   sidebar: {

package/src/configurator/auth/schema.ts

@@ -48,7 +48,7 @@ export const authCenteredSchema: CustomJsonSchema7 = {
         overlay: {
           type: 'string',
           title: 'Overlay color',
-          description: 'e.g. hsl(var(--background) / 0.6)',
+          description: 'e.g. color-mix(in oklab, var(--background) 60%, transparent)',
         },
         blur: {
           type: 'string',
@@ -132,7 +132,7 @@ export const authSplitSchema: CustomJsonSchema7 = {
         overlay: {
           type: 'string',
           title: 'Overlay color',
-          description: 'e.g. hsl(var(--background) / 0.6)',
+          description: 'e.g. color-mix(in oklab, var(--background) 60%, transparent)',
         },
         blur: {
           type: 'string',

package/src/layouts/AppLayout/BaseApp.tsx

@@ -169,10 +169,10 @@ export function BaseApp({
                       )}
                     </LayoutI18nProvider>
                     <NextTopLoader
-                      color="hsl(var(--primary))"
+                      color="var(--primary)"
                       height={3}
                       showSpinner={false}
-                      shadow="0 0 10px hsl(var(--primary)), 0 0 5px hsl(var(--primary))"
+                      shadow="0 0 10px var(--primary), 0 0 5px var(--primary)"
                     />
                     <Toaster />
 

package/src/layouts/AuthLayout/README.md

@@ -38,7 +38,7 @@ import { AuthLayout } from '@djangocfg/layouts';
   sourceUrl="https://myapp.com"
   background={{
     imageUrl: '/assets/signup-bg.jpg',
-    overlay: 'hsl(var(--background) / 0.6)',
+    overlay: 'color-mix(in oklab, var(--background) 60%, transparent)',
     blur: '8px',
   }}
   sidebar={

package/src/layouts/AuthLayout/shells/types.ts

@@ -27,7 +27,7 @@ export interface AuthBackgroundConfig {
   imageUrl?: string;
   /** CSS gradient fallback when no image or image fails to load. */
   gradient?: string;
-  /** Overlay color with opacity (e.g. `hsl(var(--background) / 0.6)`). */
+  /** Overlay color with opacity (e.g. `color-mix(in oklab, var(--background) 60%, transparent)`). */
   overlay?: string;
   /** Backdrop blur amount (e.g. `8px`). */
   blur?: string;

package/src/layouts/AuthLayout/styles/auth.css

@@ -39,10 +39,10 @@
   height: 1.75rem;
   padding-inline: 0.5rem;
   font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
+  color: var(--muted-foreground);
 }
 .auth-locale-trigger:hover {
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 .auth-container[data-entering="true"] {
@@ -95,20 +95,20 @@
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.025em;
-  color: hsl(var(--foreground));
+  color: var(--foreground);
   margin: 0;
 }
 
 .auth-subtitle {
   font-size: 0.9375rem;
   line-height: 1.5;
-  color: hsl(var(--muted-foreground));
+  color: var(--muted-foreground);
   margin: 0.125rem 0 0;
 }
 
 .auth-identifier {
   font-weight: 500;
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 /* ===== FORM ===== */
@@ -124,10 +124,10 @@
   height: 3rem;
   padding: 0 0.875rem;
   font-size: 0.9375rem;
-  background: hsl(var(--input));
-  border: 1px solid hsl(var(--border));
+  background: var(--input);
+  border: 1px solid var(--border);
   border-radius: var(--auth-radius-sm);
-  color: hsl(var(--foreground));
+  color: var(--foreground);
   transition:
     border-color 0.18s var(--spring-snappy),
     box-shadow 0.18s var(--spring-snappy);
@@ -135,8 +135,8 @@
 
 .auth-input:focus {
   outline: none;
-  border-color: hsl(var(--ring));
-  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 12%, transparent);
 }
 
 .auth-input:disabled {
@@ -145,7 +145,7 @@
 }
 
 .auth-input::placeholder {
-  color: hsl(var(--muted-foreground) / 0.6);
+  color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
 }
 
 /* Phone input */
@@ -153,10 +153,10 @@
   height: 3rem;
   padding: 0 0.875rem;
   font-size: 0.9375rem;
-  background: hsl(var(--input));
-  border: 1px solid hsl(var(--border));
+  background: var(--input);
+  border: 1px solid var(--border);
   border-radius: var(--auth-radius-sm);
-  color: hsl(var(--foreground));
+  color: var(--foreground);
   transition:
     border-color 0.18s var(--spring-snappy),
     box-shadow 0.18s var(--spring-snappy);
@@ -164,8 +164,8 @@
 
 .auth-phone-input .PhoneInputInput:focus {
   outline: none;
-  border-color: hsl(var(--ring));
-  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 12%, transparent);
 }
 
 /* ===== BUTTONS ===== */
@@ -200,13 +200,13 @@
 }
 
 .auth-button-primary {
-  background: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
+  background: var(--primary);
+  color: var(--primary-foreground);
 }
 
 .auth-button-secondary {
-  background: hsl(var(--secondary));
-  color: hsl(var(--secondary-foreground));
+  background: var(--secondary);
+  color: var(--secondary-foreground);
   border: none;
 }
 
@@ -233,7 +233,7 @@
 }
 
 .auth-button-primary.auth-button-loading::after {
-  border-color: hsl(var(--primary-foreground) / 0.7);
+  border-color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
   border-right-color: transparent;
 }
 
@@ -247,7 +247,7 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  color: hsl(var(--muted-foreground));
+  color: var(--muted-foreground);
   font-size: 0.75rem;
   letter-spacing: 0.02em;
   text-transform: uppercase;
@@ -258,7 +258,7 @@
   content: "";
   flex: 1;
   height: 1px;
-  background: hsl(var(--border));
+  background: var(--border);
 }
 
 /* ===== LINKS ===== */
@@ -269,7 +269,7 @@
   gap: 0.25rem;
   font-size: 0.875rem;
   font-weight: 500;
-  color: hsl(var(--primary));
+  color: var(--primary);
   background: none;
   border: none;
   padding: 0;
@@ -301,7 +301,7 @@
   gap: 0.375rem;
   font-size: 0.8125rem;
   line-height: 1.4;
-  color: hsl(var(--destructive));
+  color: var(--destructive);
   animation: authShake 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
@@ -327,7 +327,7 @@
   justify-content: center;
   gap: 0.75rem;
   font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
+  color: var(--muted-foreground);
 }
 
 .auth-footer a {
@@ -337,7 +337,7 @@
 }
 
 .auth-footer a:hover {
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 .auth-footer-dot {
@@ -352,7 +352,7 @@
   gap: 0.625rem;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: hsl(var(--muted-foreground));
+  color: var(--muted-foreground);
 }
 
 .auth-terms-checkbox {
@@ -361,7 +361,7 @@
 }
 
 .auth-terms a {
-  color: hsl(var(--primary));
+  color: var(--primary);
   text-decoration: none;
   transition: opacity 0.15s;
 }
@@ -377,7 +377,7 @@
   align-items: center;
   gap: 0.625rem;
   font-size: 0.875rem;
-  color: hsl(var(--foreground));
+  color: var(--foreground);
   cursor: pointer;
   user-select: none;
 }
@@ -396,7 +396,7 @@
 .auth-channel-toggle {
   display: flex;
   padding: 3px;
-  background: hsl(var(--muted));
+  background: var(--muted);
   border-radius: var(--auth-radius-sm);
   gap: 2px;
 }
@@ -411,7 +411,7 @@
   font-size: 0.8125rem;
   font-weight: 500;
   letter-spacing: -0.005em;
-  color: hsl(var(--muted-foreground));
+  color: var(--muted-foreground);
   background: transparent;
   border: none;
   border-radius: calc(var(--auth-radius-sm) - 2px);
@@ -424,11 +424,11 @@
 }
 
 .auth-channel-option[data-active="true"] {
-  color: hsl(var(--foreground));
-  background: hsl(var(--background));
+  color: var(--foreground);
+  background: var(--background);
   box-shadow:
     0 1px 3px hsl(0 0% 0% / 0.08),
-    0 0 0 0.5px hsl(var(--border));
+    0 0 0 0.5px var(--border);
 }
 
 .auth-channel-option:disabled {
@@ -463,10 +463,10 @@
   font-weight: 600;
   text-align: center;
   letter-spacing: -0.01em;
-  background: hsl(var(--input));
-  border: 1px solid hsl(var(--border));
+  background: var(--input);
+  border: 1px solid var(--border);
   border-radius: var(--auth-radius-sm);
-  color: hsl(var(--foreground));
+  color: var(--foreground);
   transition:
     border-color 0.18s,
     box-shadow 0.18s;
@@ -474,8 +474,8 @@
 
 .auth-otp-wrapper input:focus {
   outline: none;
-  border-color: hsl(var(--ring));
-  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 12%, transparent);
 }
 
 .auth-otp-wrapper input:disabled {
@@ -518,9 +518,9 @@
   font-family: ui-monospace, 'SF Mono', monospace;
   font-size: 0.8125rem;
   letter-spacing: 0.08em;
-  background: hsl(var(--muted));
+  background: var(--muted);
   border-radius: var(--auth-radius-xs);
-  color: hsl(var(--foreground));
+  color: var(--foreground);
   word-break: break-all;
   text-align: center;
 }
@@ -532,8 +532,8 @@
   grid-template-columns: repeat(2, 1fr);
   gap: 0.375rem;
   padding: 0.875rem;
-  background: hsl(var(--muted) / 0.4);
-  border: 1px dashed hsl(var(--border));
+  background: color-mix(in oklab, var(--muted) 40%, transparent);
+  border: 1px dashed var(--border);
   border-radius: var(--auth-radius-sm);
 }
 
@@ -543,7 +543,7 @@
   letter-spacing: 0.05em;
   text-align: center;
   padding: 0.375rem;
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 /* ===== SUCCESS OVERLAY ===== */
@@ -554,7 +554,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: hsl(var(--background));
+  background: var(--background);
   z-index: 50;
   animation: authFadeIn 0.25s var(--spring-snappy) both;
 }
@@ -610,7 +610,7 @@
 .auth-success-text {
   font-size: 0.9375rem;
   font-weight: 500;
-  color: hsl(var(--muted-foreground));
+  color: var(--muted-foreground);
   animation: authFadeIn 0.4s 0.15s var(--spring-smooth) both;
 }
 
@@ -618,12 +618,12 @@
 
 .auth-2fa-box {
   padding: 1.5rem 1.25rem 1.25rem;
-  background: hsl(var(--card, var(--muted) / 0.25));
-  border: 1px solid hsl(var(--border));
+  background: var(--card, color-mix(in oklab, var(--muted) 25%, transparent));
+  border: 1px solid var(--border);
   border-radius: var(--auth-radius);
   box-shadow:
     0 2px 12px hsl(0 0% 0% / 0.08),
-    0 0 0 1px hsl(var(--border) / 0.4) inset;
+    0 0 0 1px color-mix(in oklab, var(--border) 40%, transparent) inset;
   display: flex;
   flex-direction: column;
   gap: 1.125rem;
@@ -637,8 +637,8 @@
   height: 2.75rem;
   margin: 0 auto;
   border-radius: 50%;
-  background: hsl(var(--primary) / 0.1);
-  color: hsl(var(--primary));
+  background: color-mix(in oklab, var(--primary) 10%, transparent);
+  color: var(--primary);
   animation: authLogoIn 0.5s var(--spring-bounce) both;
 }
 
@@ -675,7 +675,7 @@
 .auth-instruction {
   font-size: 0.875rem;
   line-height: 1.5;
-  color: hsl(var(--muted-foreground));
+  color: var(--muted-foreground);
   text-align: center;
   margin: 0;
 }

package/src/layouts/AuthLayout/styles/split-shell.css

@@ -38,9 +38,9 @@
   display: flex;
   width: 100%;
   max-width: 420px;
-  background: hsl(var(--background));
+  background: var(--background);
   border-radius: var(--auth-radius);
-  outline: 1px solid hsl(var(--border));
+  outline: 1px solid var(--border);
   box-shadow: 0 4px 24px hsl(0 0% 0% / 0.08);
   overflow: hidden;
   /* Apple-style frosted entry — the card "condenses" out of the
@@ -105,7 +105,7 @@
   flex-direction: column;
   justify-content: center;
   padding: 2.5rem 2rem;
-  background: hsl(var(--muted) / 0.25);
+  background: color-mix(in oklab, var(--muted) 25%, transparent);
 }
 
 /* Desktop: show sidebar, expand card */

package/src/styles/dashboard.css

@@ -17,8 +17,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 1rem;
-  background-color: hsl(var(--background));
-  border-bottom: 1px solid hsl(var(--border));
+  background-color: var(--background);
+  border-bottom: 1px solid var(--border);
 }
 
 /**