/* ============================================================ Digital Commerce Integration — Theme switch (light ⇄ dark) · loaded LAST ------------------------------------------------------------ Before this file existed, light-vs-dark was decided by stylesheet LOAD ORDER: tj-kit-web.css re-lit the --adm-* tokens for the storefront, and web/b2b/layout.blade.php re-darkened them by injecting tj-admin-tokens.css into @yield('style'), which lands after it. Reordering the silently inverted the whole B2B portal. This file replaces that with an explicit switch on : html[data-theme="light"] specificity (0,1,1) :root specificity (0,1,0) The attribute block wins on every property regardless of load order, so none of the four existing token files (tj-tokens, tj-admin-tokens, tj-kit-web, tj-b2b) had to be rewritten. No custom property anywhere uses !important, so nothing fights back. WHICH TOKENS EACH BLOCK MUST CARRY - light: the full --adm-* set, because console pages load tj-admin-tokens.css (dark) at :root and light has to undo it. --tj-* needs nothing: :root is already light. - dark: the full --adm-* set, because storefront pages load tj-kit-web.css (light) at :root — plus the --tj-* neutrals, accent ink and semantic inks. Every value below already existed in tj-tokens.css or tj-admin-tokens.css. No new colors are introduced. KNOWN LIMIT — tree proximity beats specificity for custom properties. A token re-declared on a DESCENDANT (.tj-shop, #tj-skel-overlay, .tjk-tone-*) is nearer its consumer than and wins no matter what. Those are mirrored explicitly in §3; anything new of that shape must be mirrored too. ============================================================ */ /* ============================================================ 1 · LIGHT ============================================================ */ html[data-theme="light"]{ color-scheme: light; --sk-topbar: #ffffff; /* ── Canvas & surfaces ── */ --adm-bg: var(--tj-bg, #f5f6f8); --adm-surface: #ffffff; --adm-surface-2: #f9fafb; /* ── Sidebar / topbar / table head. Absent from tj-kit-web.css — it only got away with that because the storefront never loads tj-admin-tokens.css AND tj-kit.css never reads the sidebar tokens. Console pages DO read them (--adm-side 15 uses, --adm-side-border 21, --adm-side-text-hi 11); omit these and light /b2b renders with an invisible sidebar. ── */ --adm-side: #ffffff; --adm-side-bg: var(--adm-side); --adm-side-bg-2: #f9fafb; --adm-side-border: #e5e7eb; /* = --tj-border */ --adm-side-text: #4b5563; /* = --tj-muted, AA on white */ --adm-side-text-hi: #111827; /* = --tj-ink */ --adm-side-label: #6b7280; /* = --tj-muted-2 */ /* ── ELEVATION INVERTS. On dark, "raised" is LIGHTER than the panel (#1e293b > #131a2c). On light it must be DARKER than white, or all 36 consumers — secondary buttons, modals, toasts — go invisible. ── */ --adm-raised: #f3f4f6; /* ── Accent: indigo darkened for light backgrounds ── */ --adm-accent-50: var(--tj-brand-50); --adm-accent-100: var(--tj-brand-100); --adm-accent-200: var(--tj-brand-200); --adm-accent-300: var(--tj-brand-deep); /* "ink on tint" reads dark on light */ --adm-accent-400: var(--tj-brand-hover); --adm-accent-500: var(--tj-brand-hover); --adm-accent-600: var(--tj-brand-deep); --adm-accent-700: var(--tj-brand-deeper); --adm-accent: var(--adm-accent-500); --adm-violet: var(--adm-accent-400); --adm-cyan: var(--adm-accent-400); --adm-focus-ring: 0 0 0 3px rgba(var(--tj-brand-rgb),.18); /* ── Semantic: solid + light tint + dark ink (mirrors tj-tokens.css) ── */ --adm-success: #12a86b; --adm-success-50: #e6f7ef; --adm-success-ink: #0b7a4e; --adm-warning: #e0891a; --adm-warning-50: #fdf3e4; --adm-warning-ink: #a35b06; --adm-danger: #dc2626; --adm-danger-50: #fdecec; --adm-danger-ink: #b42323; --adm-info: #0284c7; --adm-info-50: #e7f3fb; --adm-info-ink: #06618f; /* ── Text & lines ── */ --adm-ink: var(--tj-ink, #111827); --adm-ink-2: var(--tj-ink-2, #1f2937); --adm-muted: #4b5563; --adm-muted-2: #6b7280; --adm-border: #e5e7eb; --adm-border-2: #f0f1f3; --adm-input-border: #d1d5db; --adm-hover-border: #9ca3af; --adm-input-bg: #ffffff; /* ── Depth: hairline + one neutral shadow step, no neon ── */ --adm-shadow-xs: 0 1px 2px rgba(16,24,40,.04); --adm-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); --adm-shadow: 0 2px 4px -1px rgba(16,24,40,.05), 0 8px 20px -8px rgba(16,24,40,.10); --adm-shadow-lg: 0 12px 32px -10px rgba(16,24,40,.20), 0 2px 6px rgba(16,24,40,.05); --adm-glow: 0 0 0 0 rgba(var(--tj-brand-rgb),0); --adm-glow-soft: 0 0 0 0 rgba(var(--tj-brand-rgb),0); --adm-blur: none; /* ── Neutral "slate" badge tone. tj-kit.css sets these on .tjk-badge and .tjk-tone-slate — i.e. on a descendant — so the root blocks cannot reach them and they have to be themed by name. ── */ --adm-tone-soft: #f3f4f6; --adm-tone-ink: #4b5563; /* ── Storefront chrome. The utility strip is a quiet light-grey band on light and the sidebar step on dark. ── */ --tj-input-border: #d1d5db; --tj-strip-bg: #f3f4f6; --tj-strip-ink: #4b5563; --tj-strip-ink-hi: #111827; --tj-strip-sep: #d1d5db; /* ── Page hero. 16 b2b pages each declare their own copy of the same banner rule; these give all of them one themed surface. ── */ --adm-hero-bg: var(--tj-brand-50); --adm-hero-ink: #111827; --adm-hero-ink-2: #4b5563; /* ── Skeleton shimmer (see §3 for the overlay's own block) ── */ --sk-base: #eef0f3; --sk-sheen: #f8f9fb; } /* ============================================================ 2 · DARK ============================================================ */ html[data-theme="dark"]{ color-scheme: dark; /* ── 2a · Brand tokens (--tj-*), mapped onto the slate-navy ladder that already lives in tj-tokens.css. Nothing invented. ── */ --tj-bg: #0a0f1e; /* = --tj-navy-900 */ --tj-bg-2: #0d1424; /* = --tj-navy-sidebar */ --tj-surface: #131a2c; /* = --tj-navy-panel */ --tj-surface-alt: #111826; --tj-ink: #f3f5fa; --tj-ink-2: #c3cbdb; --tj-muted: #98a1b8; --tj-muted-2: #6e7891; --tj-border: #263049; /* = --tj-navy-750 */ --tj-border-2: #161e30; /* The slate ladder doubles as heading ink on the storefront — 38 `color:` uses (.tj-shop-title h1, .tj-drop strong, .tj-burger span…). Those steps are ink, not surface, so they have to flip. The ground/panel steps (700/800/900/panel/sidebar) are deliberately left alone: they ARE the dark canvas, and --tj-bg/--tj-surface above are written as literals so nothing here can turn circular. */ --tj-navy: var(--tj-ink); --tj-navy-600: var(--tj-ink-2); --tj-navy-500: var(--tj-muted); --tj-navy-400: var(--tj-muted); --tj-navy-300: var(--tj-muted-2); --tj-navy-200: var(--tj-border); --tj-navy-100: var(--tj-border-2); --tj-navy-50: var(--tj-surface-alt); /* Accent: the FILL keeps the 500 weight (29 background: uses need it), but "deep" is de-facto indigo TEXT — 54 `color:` uses — and #4338ca on #0a0f1e is 1.5:1. It has to flip to the 300 step. */ --tj-orange-deep: var(--tj-brand-300); --tj-orange-50: rgba(var(--tj-brand-rgb),.14); --tj-orange-100: rgba(var(--tj-brand-rgb),.18); --tj-orange-200: rgba(var(--tj-brand-400-rgb),.30); /* The four --tj-*-dark tokens have been defined-but-unused since Foundations v1. This is what they were for. */ --tj-success-50: #0f2b25; --tj-success-ink: var(--tj-success-dark, #34d399); --tj-warning-50: #2c2010; --tj-warning-ink: var(--tj-warning-dark, #fbbf24); --tj-danger-50: #2c1416; --tj-danger-ink: var(--tj-danger-dark, #f87171); --tj-info-50: #0d2333; --tj-info-ink: var(--tj-info-dark, #38bdf8); --tj-shadow-sm: 0 1px 2px rgba(0,0,0,.30); --tj-shadow: 0 8px 20px -8px rgba(0,0,0,.50); --tj-shadow-lg: 0 24px 48px -18px rgba(0,0,0,.7); /* ── 2b · Ops tokens (--adm-*). Restated in full because storefront pages load tj-kit-web.css (light) and never load tj-admin-tokens.css — without this, --adm-side / --adm-raised / --adm-*-50 are simply undefined on a dark storefront. ── */ --adm-bg: #0a0f1e; --adm-side: #0d1424; --adm-surface: #131a2c; --adm-surface-2: #111826; --adm-raised: #1e293b; --adm-side-bg: var(--adm-side); --adm-side-bg-2: var(--adm-surface); --adm-side-border: #1b2338; --adm-side-text: #98a1b8; --adm-side-text-hi: #f3f5fa; --adm-side-label: #5d6780; --adm-accent-50: rgba(var(--tj-brand-rgb),.14); --adm-accent-100: rgba(var(--tj-brand-rgb),.18); --adm-accent-200: rgba(var(--tj-brand-400-rgb),.30); --adm-accent-300: var(--tj-brand-300); --adm-accent-400: var(--tj-brand-400); --adm-accent-500: var(--tj-brand); --adm-accent-600: var(--tj-brand-hover); --adm-accent-700: var(--tj-brand-deep); --adm-accent: var(--adm-accent-500); --adm-violet: var(--adm-accent-400); --adm-cyan: var(--adm-accent-400); --adm-focus-ring: 0 0 0 3px rgba(var(--tj-brand-400-rgb),.20); --adm-success: #12a86b; --adm-success-50: #0f2b25; --adm-success-ink: #34d399; --adm-warning: #e0891a; --adm-warning-50: #2c2010; --adm-warning-ink: #fbbf24; --adm-danger: #dc2626; --adm-danger-50: #2c1416; --adm-danger-ink: #f87171; --adm-info: #0284c7; --adm-info-50: #0d2333; --adm-info-ink: #38bdf8; --adm-ink: #f3f5fa; --adm-ink-2: #c3cbdb; --adm-muted: #98a1b8; --adm-muted-2: #6e7891; --adm-border: #263049; --adm-border-2: #161e30; --adm-input-border: #33405c; --adm-input-bg: #0d1424; --adm-hover-border: #465575; --adm-shadow-xs: 0 1px 2px rgba(0,0,0,.30); --adm-shadow-sm: 0 1px 2px rgba(0,0,0,.30); --adm-shadow: 0 8px 20px -8px rgba(0,0,0,.50); --adm-shadow-lg: 0 24px 48px -18px rgba(0,0,0,.7); --adm-glow: none; --adm-glow-soft: none; --adm-blur: none; --adm-tone-soft: rgba(100,116,139,.18); --adm-tone-ink: #cbd5e1; --tj-input-border: #33405c; --tj-strip-bg: #0d1424; --tj-strip-ink: #98a1b8; --tj-strip-ink-hi: #f3f5fa; --tj-strip-sep: #263049; /* Deep indigo, the value those 16 pages have always used — dark is unchanged. */ --adm-hero-bg: var(--tj-brand-950); --adm-hero-ink: #f3f5fa; --adm-hero-ink-2: rgba(255,255,255,.92); --sk-base: #182234; --sk-sheen: #26334c; } /* ============================================================ 3 · Descendant re-declarations ------------------------------------------------------------ Custom properties resolve by tree proximity, not specificity: a token set on .tj-shop is nearer its consumer than one set on , so the root blocks above CANNOT reach these. Each has to be mirrored by hand. ============================================================ */ /* tj-shop.css:37 */ html[data-theme="dark"] .tj-shop{ --shop-media-bg: #111826; --shop-band-gold: #131a2c; --shop-band-navy: #0d1424; } /* tj-skeleton.css:61-68 — same values as the .tjsk-dark class at :79-87, so the overlay is correct even before tj-skeleton.js has decided anything. */ html[data-theme="dark"] #tj-skel-overlay{ --sk-canvas: #0a0f1e; --sk-base: #182234; --sk-sheen: #26334c; --sk-side: #0d1424; --sk-border: #1b2338; --sk-topbar: #0d1424; --sk-card: #0d1424; }