From 258f42527c54e9924a2a0fb7686fd9548adfdfb9 Mon Sep 17 00:00:00 2001 From: "Tommy D. Rossi" Date: Fri, 20 Feb 2026 23:02:02 +0100 Subject: [PATCH] website: move editorial tokens to globals.css, remove --ll- prefix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit All CSS variables previously scoped under .liveline-page with --ll- prefix are now at :root in globals.css with no prefix. Four names conflicting with shadcn were renamed: --brand-primary, --brand-secondary, --link-accent, --page-border. Class renames: .liveline-page → .editorial-page, .liveline-article → .editorial-article, .ll-bleed → .bleed, .ll-inline-code → .inline-code, .ll-prose → .editorial-prose. Filenames kept as-is for this commit to isolate the rename. --- website/AGENTS.md | 4 +- website/src/components/markdown.tsx | 114 ++++++------- website/src/routes/_index.tsx | 8 +- website/src/styles/globals.css | 136 +++++++++++++++ website/src/styles/liveline-prism.css | 2 +- website/src/styles/liveline.css | 236 ++++++-------------------- 6 files changed, 248 insertions(+), 252 deletions(-) diff --git a/website/AGENTS.md b/website/AGENTS.md index 4915f83..e256c3d 100644 --- a/website/AGENTS.md +++ b/website/AGENTS.md @@ -38,8 +38,8 @@ Dark mode uses `prefers-color-scheme` media query, configured in `globals.css`: ```css /* globals.css — this is the Tailwind entry point */ @import "tailwindcss"; -@import "./liveline.css"; /* these get Tailwind processing */ -@import "./liveline-prism.css"; +@import "./liveline.css"; /* editorial page styles (class names, layout) */ +@import "./liveline-prism.css"; /* prism syntax highlighting */ @custom-variant dark (@media (prefers-color-scheme: dark)); ``` diff --git a/website/src/components/markdown.tsx b/website/src/components/markdown.tsx index d670a41..c4a4609 100644 --- a/website/src/components/markdown.tsx +++ b/website/src/components/markdown.tsx @@ -1,9 +1,9 @@ /* - * Editorial markdown components for the liveline-style pages. - * Extracted from liveline.tsx so page files are content-only. + * Editorial markdown components. * - * All components use CSS variables from liveline.css (--ll-*). - * Import liveline.css and liveline-prism.css in the page file. + * All components use CSS variables from globals.css (no prefix). + * Conflicting names with shadcn: --brand-primary, --brand-secondary, + * --link-accent, --page-border. */ import { useEffect, useRef, useState } from "react"; @@ -88,22 +88,22 @@ export function TableOfContents({ lineHeight: "20px", letterSpacing: "-0.09px", padding: "4px 0", - color: "var(--ll-text-primary)", - fontFamily: "var(--ll-font-primary)", + color: "var(--text-primary)", + fontFamily: "var(--font-primary)", marginBottom: "8px", }} onMouseEnter={(e) => { - e.currentTarget.style.color = "var(--ll-text-hover)"; + e.currentTarget.style.color = "var(--text-hover)"; }} onMouseLeave={(e) => { - e.currentTarget.style.color = "var(--ll-text-primary)"; + e.currentTarget.style.color = "var(--text-primary)"; }} > {logo ?? "index"} {items.map((item) => { const isActive = `#${activeId}` === item.href; - const defaultColor = isActive ? "var(--ll-text-primary)" : "var(--ll-text-secondary)"; + const defaultColor = isActive ? "var(--text-primary)" : "var(--text-secondary)"; return ( { if (!isActive) { - e.currentTarget.style.color = "var(--ll-text-hover)"; + e.currentTarget.style.color = "var(--text-hover)"; } }} onMouseLeave={(e) => { @@ -147,17 +147,17 @@ export function BackButton() { href="/" className="fixed top-5 right-5 z-[100000] flex items-center justify-center w-10 h-10 rounded-full no-underline" style={{ - background: "var(--ll-btn-bg)", - color: "var(--ll-text-secondary)", - boxShadow: "var(--ll-btn-shadow)", + background: "var(--btn-bg)", + color: "var(--text-secondary)", + boxShadow: "var(--btn-shadow)", transition: "color 0.15s, transform 0.15s", }} onMouseEnter={(e) => { - e.currentTarget.style.color = "var(--ll-text-hover)"; + e.currentTarget.style.color = "var(--text-hover)"; e.currentTarget.style.transform = "scale(1.05)"; }} onMouseLeave={(e) => { - e.currentTarget.style.color = "var(--ll-text-secondary)"; + e.currentTarget.style.color = "var(--text-secondary)"; e.currentTarget.style.transform = "scale(1)"; }} onMouseDown={(e) => { @@ -190,12 +190,12 @@ export function SectionHeading({ id, children }: { id: string; children: React.R id={id} className="scroll-mt-[5.25rem]" style={{ - fontFamily: "var(--ll-font-primary)", + fontFamily: "var(--font-primary)", fontSize: "14px", fontWeight: 560, lineHeight: "20px", letterSpacing: "-0.09px", - color: "var(--ll-text-primary)", + color: "var(--text-primary)", margin: 0, padding: 0, display: "flex", @@ -206,7 +206,7 @@ export function SectionHeading({ id, children }: { id: string; children: React.R }} > {children} - + ); } @@ -214,14 +214,14 @@ export function SectionHeading({ id, children }: { id: string; children: React.R export function P({ children, className = "" }: { children: React.ReactNode; className?: string }) { return (

@@ -257,7 +257,7 @@ export function A({ href, children }: { href: string; children: React.ReactNode target="_blank" rel="noopener noreferrer" style={{ - color: "var(--ll-accent, #0969da)", + color: "var(--link-accent, #0969da)", fontWeight: 600, textDecoration: "none", }} @@ -275,7 +275,7 @@ export function A({ href, children }: { href: string; children: React.ReactNode export function Code({ children }: { children: React.ReactNode }) { return ( - + {children} ); @@ -288,7 +288,7 @@ export function Code({ children }: { children: React.ReactNode }) { export function Divider() { return (

-
+
); } @@ -307,12 +307,12 @@ export function OL({ children }: { children: React.ReactNode }) {
    @@ -326,12 +326,12 @@ export function List({ children }: { children: React.ReactNode }) {