feat: major theming system refactor v1.1.0 - remove shadcn variables, add 5 accent themes

CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.0] - 2026-05-02
+
+### Breaking Changes
+
+**Major Theming System Refactor**
+
+- Removed all shadcn-style theme variables in favor of pure LSD design tokens
+  - Removed: `--background`, `--foreground`, `--primary`, `--primary-foreground`, `--secondary`, `--secondary-foreground`, `--accent`, `--accent-foreground`, `--destructive`, `--destructive-foreground`, `--muted`, `--muted-foreground`, `--border`, `--input`, `--ring`
+- Renamed design tokens for semantic clarity
+  - Double-prefix pattern (e.g., `text-lsd-text-secondary`) standardized to single prefix (e.g., `text-secondary`)
+  - Updated all component styling to use new variable naming convention
+- Theme structure reorganized to support nested light/dark variants with accent themes
+- Custom theme creation now requires using LSD-specific variable names
+
+### Migration
+
+If you have custom themes or override theme variables, you'll need to update them:
+
+1. Replace shadcn-style variables with LSD tokens
+2. Update variable names to match the new single-prefix pattern
+3. Review custom theme definitions against the new theme structure
+
+### Features
+
+- **Improved Theme System**: Redesigned CSS custom properties for better semantic clarity and consistency
+- **Enhanced Theming Architecture**: Better support for nested light/dark variants with accent theme inheritance
+
+### Improvements
+
+- Standardized variable naming conventions across all 40+ components
+- Improved theme inheritance and scoping behavior
+- Enhanced accessibility with consistent semantic token names
+- Better separation of concerns between color modes and accent themes
+
+### Deprecations
+
+- None removed (shadcn-style variables were fully removed, not deprecated)
+
+---
+
+## Previous Versions
+
+### [1.0.0] - Initial Release
+
+- Initial release of LSD component library
+- 38+ accessible UI components
+- Built on React 19+ with Radix UI
+- Support for light/dark modes and 4 accent themes (Teal, Nord, Terracotta, Catppuccin)
+- Monochrome color palette with semantic styling
+- Comprehensive documentation site
+- Full TypeScript support
+
+---
+
+## Version Reference
+
+- **1.1.0** - Current release (theming refactor)
+- **1.0.0** - Initial release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nipsys/lsd-monorepo",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "description": "Monorepo for the @nipsys/lsd component library and documentation",
   "license": "MIT",

packages/lsd-docs/app/components/SidebarWrapper.tsx

@@ -28,7 +28,7 @@ interface SidebarWrapperProps {
 export default function SidebarWrapper({ currentPath, children }: SidebarWrapperProps) {
   return (
     <SidebarProvider>
-      <Sidebar>
+      <Sidebar triggerStyle={{ top: '10px' }}>
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
@@ -39,7 +39,7 @@ export default function SidebarWrapper({ currentPath, children }: SidebarWrapper
                   </div>
                   <div className="flex flex-col gap-(--lsd-spacing-smaller) leading-none">
                     <span className="font-semibold">@nipsys/lsd</span>
-                    <span className="text-xs">v1.0.1</span>
+                    <span className="text-xs">v1.1.0</span>
                   </div>
                 </Link>
               </SidebarMenuButton>

packages/lsd-docs/app/components/docs/IframeExample.tsx

@@ -13,7 +13,7 @@ export const IframeExample = forwardRef<HTMLIFrameElement, IframeExampleProps>(
   ({ src, title, size = 'md', className, ...props }, ref) => {
     const heightClass = {
       sm: 'min-h-[128px]',
-      md: 'min-h-[256px]',
+      md: 'min-h-[280px]',
       lg: 'min-h-[450px]',
       xl: 'min-h-[600px]',
     }[size];

packages/lsd-docs/app/components/docs/useSendIframes.ts

@@ -22,12 +22,6 @@ export function useSendThemeToIframes(...iframeRefs: React.RefObject<HTMLIFrameE
   // Send params to iframes when theme, accent, or font changes
   React.useEffect(() => {
     const params: ExampleParams = { theme, accent, font };
-    console.log(
-      '[useSendThemeToIframes] Sending params on change:',
-      params,
-      'to iframes:',
-      iframeRefs.length
-    );
     iframeRefs.forEach(ref => void sendToIframe(ref.current, 'example-params', params));
   }, [theme, accent, font, iframeRefs]);
 

packages/lsd-docs/app/components/docs/useSendThemeToIframes.ts

@@ -4,11 +4,9 @@ import { type ExampleParams, useIframeMessageListener } from './useIframeSync';
 
 export function useSendThemeToIframes() {
   useIframeMessageListener('example-params', (params: ExampleParams) => {
-    console.log('[IFRAME] Received theme params:', params);
     const root = document.documentElement;
 
     if (params.theme) {
-      console.log('[IFRAME] Applying theme:', params.theme);
       if (params.theme === 'dark') {
         root.classList.add('dark');
       } else {
@@ -17,7 +15,6 @@ export function useSendThemeToIframes() {
     }
 
     if (params.accent) {
-      console.log('[IFRAME] Applying accent:', params.accent);
       if (params.accent === 'monochrome') {
         root.removeAttribute('data-theme');
       } else {
@@ -26,7 +23,6 @@ export function useSendThemeToIframes() {
     }
 
     if (params.font) {
-      console.log('[IFRAME] Applying font:', params.font);
       root.classList.remove('font-serif', 'font-sans', 'font-mono');
       if (params.font === 'serif') {
         root.classList.add('font-serif');

packages/lsd-docs/app/config/navigation.ts

@@ -32,7 +32,7 @@ export const navItems: NavGroup[] = [
   {
     title: 'Design Tokens',
     items: [
-      { title: 'Colours', url: '/design-tokens/colours', icon: PaletteIcon },
+      { title: 'Colors', url: '/design-tokens/colors', icon: PaletteIcon },
       {
         title: 'Typography',
         url: '/design-tokens/typography',

packages/lsd-docs/app/design-tokens/colours/page.tsx → packages/lsd-docs/app/design-tokens/colors/page.tsx

@@ -12,23 +12,12 @@ export default function ColorsPage() {
   return (
     <DocsLayout>
       <PageHeader
-        title="Colours"
-        description="Explore the colour palette used throughout LSD components."
+        title="Colors"
+        description="Explore the color palette used throughout LSD components."
       />
 
       <PageContent>
-        <PageSection title="About the Colour Palette">
-          <Typography variant="body1" className="block">
-            Colours are tools for signalling, not branding. LSD's palette is chosen for maximum
-            contrast and accessibility across all conditions.
-          </Typography>
-
-          <Typography variant="body1" className="mt-(--lsd-spacing-base)">
-            High contrast isn't a design choice — it's a commitment to inclusivity.
-          </Typography>
-        </PageSection>
-
-        <PageSection title="Primary Colours">
+        <PageSection title="Primary Colors">
           <Typography variant="body1" className="block">
             Primary marks essential actions and focal points — where the user needs to look to move
             forward.
@@ -54,36 +43,37 @@ export default function ColorsPage() {
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
                   className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-primary-foreground)' }}
+                  style={{ backgroundColor: 'var(--lsd-primary-content)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
-                  Primary Foreground
+                  Primary Content
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-primary-foreground: <ColorValue variable="--lsd-primary-foreground" />
+                  --lsd-primary-content: <ColorValue variable="--lsd-primary-content" />
                 </Typography>
               </CardContent>
             </Card>
           </div>
         </PageSection>
 
-        <PageSection title="Text Colours">
+        <PageSection title="Text Colors">
           <Typography variant="body1" className="block">
-            Text colours for primary content and supporting information, optimized for readability.
+            Text colors for primary content and supporting information, optimized for readability.
+            These same colors are used for icons to maintain visual consistency.
           </Typography>
 
           <div className="inline-grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-(--lsd-spacing-base) mt-(--lsd-spacing-base)">
             <Card className="min-w-fit max-w-[250px]">
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
                   className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-text-primary)' }}
+                  style={{ backgroundColor: 'var(--lsd-text-neutral)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
-                  Text Primary
+                  Text Neutral
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-text-primary: <ColorValue variable="--lsd-text-primary" />
+                  --lsd-text-neutral: <ColorValue variable="--lsd-text-neutral" />
                 </Typography>
               </CardContent>
             </Card>
@@ -105,61 +95,38 @@ export default function ColorsPage() {
           </div>
         </PageSection>
 
-        <PageSection title="Surface & Border Colours">
+        <PageSection title="Background & Border Colors">
           <Typography variant="body1" className="block">
-            Surface and border colours define structure and hierarchy across the interface.
+            Background and border colors define structure and hierarchy across the interface.
           </Typography>
 
           <div className="inline-grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-(--lsd-spacing-base) mt-(--lsd-spacing-base)">
             <Card className="min-w-fit max-w-[250px]">
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
                   className="h-24 mb-(--lsd-spacing-base) border"
-                  style={{ backgroundColor: 'var(--lsd-surface)' }}
-                />
-                <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
-                  Surface
-                </Typography>
-                <Typography variant="label1" className="text-nowrap">
-                  --lsd-surface: <ColorValue variable="--lsd-surface" />
-                </Typography>
-              </CardContent>
-            </Card>
-
-            <Card className="min-w-fit max-w-[250px]">
-              <CardContent className="pt-(--lsd-spacing-large)">
-                <div
-                  className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-border)' }}
+                  style={{ backgroundColor: 'var(--lsd-background)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
-                  Border
+                  Background
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-border: <ColorValue variable="--lsd-border" />
+                  --lsd-background: <ColorValue variable="--lsd-background" />
                 </Typography>
               </CardContent>
             </Card>
-          </div>
-        </PageSection>
-
-        <PageSection title="Icon Colours">
-          <Typography variant="body1" className="block">
-            Icon colours maintain visual consistency across all interactive and decorative elements.
-          </Typography>
 
-          <div className="inline-grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-(--lsd-spacing-base) mt-(--lsd-spacing-base)">
             <Card className="min-w-fit max-w-[250px]">
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
-                  className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-icon-primary)' }}
+                  className="h-24 mb-(--lsd-spacing-base) border"
+                  style={{ backgroundColor: 'var(--lsd-foreground)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
-                  Icon Primary
+                  Foreground
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-icon-primary: <ColorValue variable="--lsd-icon-primary" />
+                  --lsd-foreground: <ColorValue variable="--lsd-foreground" />
                 </Typography>
               </CardContent>
             </Card>
@@ -168,22 +135,22 @@ export default function ColorsPage() {
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
                   className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-icon-secondary)' }}
+                  style={{ backgroundColor: 'var(--lsd-border)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
-                  Icon Secondary
+                  Border
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-icon-secondary: <ColorValue variable="--lsd-icon-secondary" />
+                  --lsd-border: <ColorValue variable="--lsd-border" />
                 </Typography>
               </CardContent>
             </Card>
           </div>
         </PageSection>
 
-        <PageSection title="Semantic Colours">
+        <PageSection title="Semantic Colors">
           <Typography variant="body1" className="block">
-            Semantic colours communicate state — success, warning, destructive actions, and
+            Semantic colors communicate state — success, warning, destructive actions, and
             information.
           </Typography>
 
@@ -250,23 +217,23 @@ export default function ColorsPage() {
           </div>
         </PageSection>
 
-        <PageSection title="Semantic Text Colours">
+        <PageSection title="Semantic Text Colors">
           <Typography variant="body1" className="block">
-            Text colours for semantic states.
+            Text colors for semantic states.
           </Typography>
 
           <div className="inline-grid grid-cols-1 md:grid-cols-2 gap-(--lsd-spacing-base) mt-(--lsd-spacing-base)">
             <Card className="min-w-fit max-w-[250px]">
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
                   className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-success-text)' }}
+                  style={{ backgroundColor: 'var(--lsd-text-success)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
                   Success Text
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-success-text: <ColorValue variable="--lsd-success-text" />
+                  --lsd-text-success: <ColorValue variable="--lsd-text-success" />
                 </Typography>
               </CardContent>
             </Card>
@@ -275,13 +242,13 @@ export default function ColorsPage() {
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
                   className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-destructive-text)' }}
+                  style={{ backgroundColor: 'var(--lsd-text-destructive)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
                   Destructive Text
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-destructive-text: <ColorValue variable="--lsd-destructive-text" />
+                  --lsd-text-destructive: <ColorValue variable="--lsd-text-destructive" />
                 </Typography>
               </CardContent>
             </Card>
@@ -290,13 +257,13 @@ export default function ColorsPage() {
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
                   className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-warning-text)' }}
+                  style={{ backgroundColor: 'var(--lsd-text-warning)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
                   Warning Text
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-warning-text: <ColorValue variable="--lsd-warning-text" />
+                  --lsd-text-warning: <ColorValue variable="--lsd-text-warning" />
                 </Typography>
               </CardContent>
             </Card>
@@ -305,13 +272,13 @@ export default function ColorsPage() {
               <CardContent className="pt-(--lsd-spacing-large)">
                 <div
                   className="h-24 mb-(--lsd-spacing-base)"
-                  style={{ backgroundColor: 'var(--lsd-info-text)' }}
+                  style={{ backgroundColor: 'var(--lsd-text-info)' }}
                 />
                 <Typography variant="h5" className="mb-(--lsd-spacing-smallest)">
                   Info Text
                 </Typography>
                 <Typography variant="label1" className="text-nowrap">
-                  --lsd-info-text: <ColorValue variable="--lsd-info-text" />
+                  --lsd-text-info: <ColorValue variable="--lsd-text-info" />
                 </Typography>
               </CardContent>
             </Card>