s:CMS Theming Guide

s:CMS provides a flexible theming system that combines CSS variables with Tailwind CSS for maximum customization power.

Architecture Overview

1
core/styles/global.css     → Framework design system & CSS variables
2
usr/styles/user-theme.css  → Your custom overrides & styles
3
tailwind.config.js         → Core Tailwind theme with CSS variable integration
4
usr/tailwind.user.config.js → Example user Tailwind extensions

Quick Start

1. Override CSS Variables

Edit usr/styles/user-theme.css to override core design tokens:

1
:root {
2
  --color-primary: #0066cc;        /* Your brand color */
3
  --color-text: #2d3748;           /* Custom text color */
4
  --font-sans: 'Inter', sans-serif; /* Custom typography */
5
}

2. Use Bootstrap Utilities

Thanks to Bootstrap 5 integration, you can now use:

1
<button class="btn btn-primary">Primary Button</button>
2
<div class="text-primary border border-primary">Brand colored content</div>
3
<h1 class="fw-bold">Styled with Bootstrap utilities</h1>

3. Extend Tailwind Theme

Copy usr/tailwind.user.config.js to usr/tailwind.config.js and customize:

1
export default {
2
  theme: {
3
    extend: {
4
      colors: {
5
        brand: { blue: '#0066cc', green: '#00a86b' },
6
        success: '#10b981',
7
      },
8
      fontFamily: {
9
        display: ['Inter', 'var(--font-sans)'],
10
      }
11
    }
12
  }
13
}

Available Design Tokens

Colors (CSS Variables + Tailwind Classes)

Variable	Tailwind Class	Purpose
`--color-primary`	`bg-primary`, `text-primary`, `border-primary`	Brand color
`--color-text`	`text-text`	Main text
`--color-bg`	`bg-background`	Background
`--color-border`	`border-border`	Borders

Typography

Variable	Tailwind Class	Purpose
`--font-sans`	`font-sans`	Body text
`--font-mono`	`font-mono`	Code text

Custom Design Tokens

Variable	Tailwind Class	Purpose
`--radius-base`	`rounded-scms`	Component border radius
`--shadow-focus`	`shadow-scms`	Focus states

Component Classes

s:CMS provides ready-to-use component classes that respect your theme:

Form Elements

1
<input class="scms-input" />        <!-- Styled input with theme colors -->
2
<select class="scms-select">        <!-- Styled select dropdown -->
3
<button class="scms-btn-primary">   <!-- Primary button -->
4
<button class="scms-btn-secondary"> <!-- Secondary button -->

Advanced Usage

1
<!-- Combine s:CMS classes with Tailwind utilities -->
2
<button class="scms-btn-primary text-lg shadow-scms-lg">
3
  Large primary button with custom shadow
4
</button>
5

6
<!-- Use CSS variables in custom styles -->
7
<div style="background: linear-gradient(var(--color-primary), var(--color-primary-dark))">
8
  Gradient using theme colors
9
</div>

Best Practices

Override CSS variables for brand consistency across all components
Use Tailwind utilities for layout, spacing, and custom styling
Extend Tailwind theme for additional utility classes
Combine both approaches for maximum flexibility

Examples

Brand Color Override

1
:root {
2
  --color-primary: #7c3aed;
3
  --color-primary-hover: #6d28d9;
4
}

Dark Theme

1
:root {
2
  --color-text: #f9fafb;
3
  --color-bg: #111827;
4
  --color-border: #374151;
5
}

Custom Component

1
.my-hero {
2
  @apply bg-primary text-white p-8 rounded-scms;
3
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
4
}

This hybrid approach gives you the power of utility-first CSS with the consistency of a design system!