7abcbafaf4
Some checks are pending
Go / build-and-release (push) Waiting to run
Add runtime-customizable branding allowing relay operators to fully customize UI appearance without rebuilding: - Custom logo, favicon, and PWA icons - Full CSS override capability (colors, themes, components) - Custom app name, title, and NIP-11 relay info - init-branding command with --style generic|orly options - Transparent PNG generation for generic branding New files: - app/branding/ package (branding.go, init.go, types.go) - docs/BRANDING_GUIDE.md Environment variables: - ORLY_BRANDING_DIR: branding directory path - ORLY_BRANDING_ENABLED: enable/disable custom branding Usage: ./orly init-branding --style generic Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
791 lines
25 KiB
Go
791 lines
25 KiB
Go
package branding
|
|
|
|
import (
|
|
"bytes"
|
|
"embed"
|
|
"encoding/json"
|
|
"fmt"
|
|
"image"
|
|
"image/color"
|
|
"image/png"
|
|
"io/fs"
|
|
"math"
|
|
"os"
|
|
"path/filepath"
|
|
)
|
|
|
|
// BrandingStyle represents the type of branding kit to generate
|
|
type BrandingStyle string
|
|
|
|
const (
|
|
StyleORLY BrandingStyle = "orly" // ORLY-branded assets
|
|
StyleGeneric BrandingStyle = "generic" // Generic/white-label assets
|
|
)
|
|
|
|
// InitBrandingKit creates a branding directory with assets and configuration
|
|
func InitBrandingKit(dir string, embeddedFS embed.FS, style BrandingStyle) error {
|
|
// Create directory structure
|
|
dirs := []string{
|
|
dir,
|
|
filepath.Join(dir, "assets"),
|
|
filepath.Join(dir, "css"),
|
|
}
|
|
|
|
for _, d := range dirs {
|
|
if err := os.MkdirAll(d, 0755); err != nil {
|
|
return fmt.Errorf("failed to create directory %s: %w", d, err)
|
|
}
|
|
}
|
|
|
|
// Write branding.json based on style
|
|
var config Config
|
|
var cssTemplate, varsTemplate string
|
|
|
|
switch style {
|
|
case StyleGeneric:
|
|
config = GenericConfig()
|
|
cssTemplate = GenericCSSTemplate
|
|
varsTemplate = GenericCSSVariablesTemplate
|
|
default:
|
|
config = DefaultConfig()
|
|
cssTemplate = CSSTemplate
|
|
varsTemplate = CSSVariablesTemplate
|
|
}
|
|
|
|
configData, err := json.MarshalIndent(config, "", " ")
|
|
if err != nil {
|
|
return fmt.Errorf("failed to marshal config: %w", err)
|
|
}
|
|
configPath := filepath.Join(dir, "branding.json")
|
|
if err := os.WriteFile(configPath, configData, 0644); err != nil {
|
|
return fmt.Errorf("failed to write branding.json: %w", err)
|
|
}
|
|
|
|
// Generate or extract assets based on style
|
|
if style == StyleGeneric {
|
|
// Generate generic placeholder images
|
|
if err := generateGenericAssets(dir); err != nil {
|
|
return fmt.Errorf("failed to generate generic assets: %w", err)
|
|
}
|
|
} else {
|
|
// Extract ORLY embedded assets
|
|
assetMappings := map[string]string{
|
|
"web/dist/orly.png": filepath.Join(dir, "assets", "logo.png"),
|
|
"web/dist/favicon.png": filepath.Join(dir, "assets", "favicon.png"),
|
|
"web/dist/icon-192.png": filepath.Join(dir, "assets", "icon-192.png"),
|
|
"web/dist/icon-512.png": filepath.Join(dir, "assets", "icon-512.png"),
|
|
}
|
|
|
|
for src, dst := range assetMappings {
|
|
data, err := fs.ReadFile(embeddedFS, src)
|
|
if err != nil {
|
|
altSrc := "web/" + filepath.Base(src)
|
|
data, err = fs.ReadFile(embeddedFS, altSrc)
|
|
if err != nil {
|
|
fmt.Printf("Warning: could not extract %s: %v\n", src, err)
|
|
continue
|
|
}
|
|
}
|
|
if err := os.WriteFile(dst, data, 0644); err != nil {
|
|
return fmt.Errorf("failed to write %s: %w", dst, err)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Write CSS template
|
|
cssPath := filepath.Join(dir, "css", "custom.css")
|
|
if err := os.WriteFile(cssPath, []byte(cssTemplate), 0644); err != nil {
|
|
return fmt.Errorf("failed to write custom.css: %w", err)
|
|
}
|
|
|
|
// Write variables-only CSS template
|
|
varsPath := filepath.Join(dir, "css", "variables.css")
|
|
if err := os.WriteFile(varsPath, []byte(varsTemplate), 0644); err != nil {
|
|
return fmt.Errorf("failed to write variables.css: %w", err)
|
|
}
|
|
|
|
return nil
|
|
}
|
|
|
|
// generateGenericAssets creates simple geometric placeholder images
|
|
func generateGenericAssets(dir string) error {
|
|
// Color scheme: neutral blue-gray
|
|
primaryColor := color.RGBA{R: 64, G: 128, B: 192, A: 255} // #4080C0 - professional blue
|
|
transparent := color.RGBA{R: 0, G: 0, B: 0, A: 0} // Transparent background
|
|
|
|
// Generate each size
|
|
sizes := map[string]int{
|
|
"logo.png": 256,
|
|
"favicon.png": 64,
|
|
"icon-192.png": 192,
|
|
"icon-512.png": 512,
|
|
}
|
|
|
|
for filename, size := range sizes {
|
|
img := generateRoundedSquare(size, primaryColor, transparent)
|
|
path := filepath.Join(dir, "assets", filename)
|
|
if err := savePNG(path, img); err != nil {
|
|
return fmt.Errorf("failed to save %s: %w", filename, err)
|
|
}
|
|
}
|
|
|
|
return nil
|
|
}
|
|
|
|
// generateRoundedSquare creates a simple rounded square icon
|
|
func generateRoundedSquare(size int, primary, bg color.RGBA) image.Image {
|
|
img := image.NewRGBA(image.Rect(0, 0, size, size))
|
|
|
|
// Fill background
|
|
for y := 0; y < size; y++ {
|
|
for x := 0; x < size; x++ {
|
|
img.Set(x, y, bg)
|
|
}
|
|
}
|
|
|
|
// Draw a rounded square in the center
|
|
margin := size / 8
|
|
cornerRadius := size / 6
|
|
squareSize := size - (margin * 2)
|
|
|
|
for y := margin; y < margin+squareSize; y++ {
|
|
for x := margin; x < margin+squareSize; x++ {
|
|
// Check if point is inside rounded rectangle
|
|
if isInsideRoundedRect(x-margin, y-margin, squareSize, squareSize, cornerRadius) {
|
|
img.Set(x, y, primary)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Draw a simple inner circle (relay symbol)
|
|
centerX := size / 2
|
|
centerY := size / 2
|
|
innerRadius := size / 5
|
|
ringWidth := size / 20
|
|
|
|
for y := 0; y < size; y++ {
|
|
for x := 0; x < size; x++ {
|
|
dx := float64(x - centerX)
|
|
dy := float64(y - centerY)
|
|
dist := math.Sqrt(dx*dx + dy*dy)
|
|
|
|
// Ring (circle outline)
|
|
if dist >= float64(innerRadius-ringWidth) && dist <= float64(innerRadius) {
|
|
img.Set(x, y, bg)
|
|
}
|
|
}
|
|
}
|
|
|
|
return img
|
|
}
|
|
|
|
// isInsideRoundedRect checks if a point is inside a rounded rectangle
|
|
func isInsideRoundedRect(x, y, w, h, r int) bool {
|
|
// Check corners
|
|
if x < r && y < r {
|
|
// Top-left corner
|
|
return isInsideCircle(x, y, r, r, r)
|
|
}
|
|
if x >= w-r && y < r {
|
|
// Top-right corner
|
|
return isInsideCircle(x, y, w-r-1, r, r)
|
|
}
|
|
if x < r && y >= h-r {
|
|
// Bottom-left corner
|
|
return isInsideCircle(x, y, r, h-r-1, r)
|
|
}
|
|
if x >= w-r && y >= h-r {
|
|
// Bottom-right corner
|
|
return isInsideCircle(x, y, w-r-1, h-r-1, r)
|
|
}
|
|
|
|
// Inside main rectangle
|
|
return x >= 0 && x < w && y >= 0 && y < h
|
|
}
|
|
|
|
// isInsideCircle checks if a point is inside a circle
|
|
func isInsideCircle(x, y, cx, cy, r int) bool {
|
|
dx := x - cx
|
|
dy := y - cy
|
|
return dx*dx+dy*dy <= r*r
|
|
}
|
|
|
|
// savePNG saves an image as a PNG file
|
|
func savePNG(path string, img image.Image) error {
|
|
var buf bytes.Buffer
|
|
if err := png.Encode(&buf, img); err != nil {
|
|
return err
|
|
}
|
|
return os.WriteFile(path, buf.Bytes(), 0644)
|
|
}
|
|
|
|
// GenericConfig returns a generic/white-label configuration
|
|
func GenericConfig() Config {
|
|
return Config{
|
|
Version: 1,
|
|
App: AppConfig{
|
|
Name: "Relay",
|
|
ShortName: "Relay",
|
|
Title: "Relay Dashboard",
|
|
Description: "Nostr relay service",
|
|
},
|
|
NIP11: NIP11Config{
|
|
Name: "Relay",
|
|
Description: "A Nostr relay",
|
|
Icon: "",
|
|
},
|
|
Manifest: ManifestConfig{
|
|
ThemeColor: "#4080C0",
|
|
BackgroundColor: "#F0F4F8",
|
|
},
|
|
Assets: AssetsConfig{
|
|
Logo: "assets/logo.png",
|
|
Favicon: "assets/favicon.png",
|
|
Icon192: "assets/icon-192.png",
|
|
Icon512: "assets/icon-512.png",
|
|
},
|
|
CSS: CSSConfig{
|
|
CustomCSS: "css/custom.css",
|
|
VariablesCSS: "css/variables.css",
|
|
},
|
|
}
|
|
}
|
|
|
|
// CSSTemplate is the full CSS template with all variables and documentation
|
|
const CSSTemplate = `/*
|
|
* Custom Branding CSS for ORLY Relay
|
|
* ==================================
|
|
*
|
|
* This file is loaded AFTER the default styles, so any rules here
|
|
* will override the defaults. You can customize:
|
|
*
|
|
* 1. CSS Variables (colors, spacing, etc.)
|
|
* 2. Component styles (buttons, cards, headers, etc.)
|
|
* 3. Add completely custom styles
|
|
*
|
|
* Restart the relay to apply changes.
|
|
*
|
|
* For variable-only overrides, edit variables.css instead.
|
|
*/
|
|
|
|
/* =============================================================================
|
|
LIGHT THEME VARIABLES
|
|
============================================================================= */
|
|
|
|
:root {
|
|
/* Background colors */
|
|
--bg-color: #ddd; /* Main page background */
|
|
--header-bg: #eee; /* Header background */
|
|
--sidebar-bg: #eee; /* Sidebar background */
|
|
--card-bg: #f8f9fa; /* Card/container background */
|
|
--panel-bg: #f8f9fa; /* Panel background */
|
|
|
|
/* Border colors */
|
|
--border-color: #dee2e6; /* Default border color */
|
|
|
|
/* Text colors */
|
|
--text-color: #444444; /* Primary text color */
|
|
--text-muted: #6c757d; /* Secondary/muted text */
|
|
|
|
/* Input/form colors */
|
|
--input-border: #ccc; /* Input border color */
|
|
--input-bg: #ffffff; /* Input background */
|
|
--input-text-color: #495057; /* Input text color */
|
|
|
|
/* Button colors */
|
|
--button-bg: #ddd; /* Default button background */
|
|
--button-hover-bg: #eee; /* Button hover background */
|
|
--button-text: #444444; /* Button text color */
|
|
--button-hover-border: #adb5bd; /* Button hover border */
|
|
|
|
/* Theme/accent colors */
|
|
--primary: #00bcd4; /* Primary accent (cyan) */
|
|
--primary-bg: rgba(0, 188, 212, 0.1); /* Primary background tint */
|
|
--secondary: #6c757d; /* Secondary color */
|
|
|
|
/* Status colors */
|
|
--success: #28a745; /* Success/positive */
|
|
--success-bg: #d4edda; /* Success background */
|
|
--success-text: #155724; /* Success text */
|
|
--info: #17a2b8; /* Info/neutral */
|
|
--warning: #ff3e00; /* Warning (Svelte orange) */
|
|
--warning-bg: #fff3cd; /* Warning background */
|
|
--danger: #dc3545; /* Danger/error */
|
|
--danger-bg: #f8d7da; /* Danger background */
|
|
--danger-text: #721c24; /* Danger text */
|
|
--error-bg: #f8d7da; /* Error background */
|
|
--error-text: #721c24; /* Error text */
|
|
|
|
/* Code block colors */
|
|
--code-bg: #f8f9fa; /* Code block background */
|
|
--code-text: #495057; /* Code text color */
|
|
|
|
/* Tab colors */
|
|
--tab-inactive-bg: #bbb; /* Inactive tab background */
|
|
|
|
/* Link/accent colors */
|
|
--accent-color: #007bff; /* Link color */
|
|
--accent-hover-color: #0056b3; /* Link hover color */
|
|
}
|
|
|
|
/* =============================================================================
|
|
DARK THEME VARIABLES
|
|
============================================================================= */
|
|
|
|
body.dark-theme {
|
|
/* Background colors */
|
|
--bg-color: #263238; /* Main page background */
|
|
--header-bg: #1e272c; /* Header background */
|
|
--sidebar-bg: #1e272c; /* Sidebar background */
|
|
--card-bg: #37474f; /* Card/container background */
|
|
--panel-bg: #37474f; /* Panel background */
|
|
|
|
/* Border colors */
|
|
--border-color: #404040; /* Default border color */
|
|
|
|
/* Text colors */
|
|
--text-color: #ffffff; /* Primary text color */
|
|
--text-muted: #adb5bd; /* Secondary/muted text */
|
|
|
|
/* Input/form colors */
|
|
--input-border: #555; /* Input border color */
|
|
--input-bg: #37474f; /* Input background */
|
|
--input-text-color: #ffffff; /* Input text color */
|
|
|
|
/* Button colors */
|
|
--button-bg: #263238; /* Default button background */
|
|
--button-hover-bg: #1e272c; /* Button hover background */
|
|
--button-text: #ffffff; /* Button text color */
|
|
--button-hover-border: #6c757d; /* Button hover border */
|
|
|
|
/* Theme/accent colors */
|
|
--primary: #00bcd4; /* Primary accent (cyan) */
|
|
--primary-bg: rgba(0, 188, 212, 0.2); /* Primary background tint */
|
|
--secondary: #6c757d; /* Secondary color */
|
|
|
|
/* Status colors */
|
|
--success: #28a745; /* Success/positive */
|
|
--success-bg: #1e4620; /* Success background (dark) */
|
|
--success-text: #d4edda; /* Success text (light) */
|
|
--info: #17a2b8; /* Info/neutral */
|
|
--warning: #ff3e00; /* Warning (Svelte orange) */
|
|
--warning-bg: #4d1f00; /* Warning background (dark) */
|
|
--danger: #dc3545; /* Danger/error */
|
|
--danger-bg: #4d1319; /* Danger background (dark) */
|
|
--danger-text: #f8d7da; /* Danger text (light) */
|
|
--error-bg: #4d1319; /* Error background */
|
|
--error-text: #f8d7da; /* Error text */
|
|
|
|
/* Code block colors */
|
|
--code-bg: #1e272c; /* Code block background */
|
|
--code-text: #ffffff; /* Code text color */
|
|
|
|
/* Tab colors */
|
|
--tab-inactive-bg: #1a1a1a; /* Inactive tab background */
|
|
|
|
/* Link/accent colors */
|
|
--accent-color: #007bff; /* Link color */
|
|
--accent-hover-color: #0056b3; /* Link hover color */
|
|
}
|
|
|
|
/* =============================================================================
|
|
CUSTOM STYLES
|
|
Add your custom CSS rules below. These will override any default styles.
|
|
============================================================================= */
|
|
|
|
/* Example: Custom header styling
|
|
.header {
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
*/
|
|
|
|
/* Example: Custom button styling
|
|
.btn {
|
|
border-radius: 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
*/
|
|
|
|
/* Example: Custom card styling
|
|
.card {
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
*/
|
|
`
|
|
|
|
// CSSVariablesTemplate contains only CSS variable definitions
|
|
const CSSVariablesTemplate = `/*
|
|
* CSS Variables Override for ORLY Relay
|
|
* ======================================
|
|
*
|
|
* This file contains only CSS variable definitions.
|
|
* Edit values here to customize colors without touching component styles.
|
|
*
|
|
* For full CSS customization (including component styles),
|
|
* edit custom.css instead.
|
|
*/
|
|
|
|
/* Light theme variables */
|
|
:root {
|
|
--bg-color: #ddd;
|
|
--header-bg: #eee;
|
|
--sidebar-bg: #eee;
|
|
--card-bg: #f8f9fa;
|
|
--panel-bg: #f8f9fa;
|
|
--border-color: #dee2e6;
|
|
--text-color: #444444;
|
|
--text-muted: #6c757d;
|
|
--input-border: #ccc;
|
|
--input-bg: #ffffff;
|
|
--input-text-color: #495057;
|
|
--button-bg: #ddd;
|
|
--button-hover-bg: #eee;
|
|
--button-text: #444444;
|
|
--button-hover-border: #adb5bd;
|
|
--primary: #00bcd4;
|
|
--primary-bg: rgba(0, 188, 212, 0.1);
|
|
--secondary: #6c757d;
|
|
--success: #28a745;
|
|
--success-bg: #d4edda;
|
|
--success-text: #155724;
|
|
--info: #17a2b8;
|
|
--warning: #ff3e00;
|
|
--warning-bg: #fff3cd;
|
|
--danger: #dc3545;
|
|
--danger-bg: #f8d7da;
|
|
--danger-text: #721c24;
|
|
--error-bg: #f8d7da;
|
|
--error-text: #721c24;
|
|
--code-bg: #f8f9fa;
|
|
--code-text: #495057;
|
|
--tab-inactive-bg: #bbb;
|
|
--accent-color: #007bff;
|
|
--accent-hover-color: #0056b3;
|
|
}
|
|
|
|
/* Dark theme variables */
|
|
body.dark-theme {
|
|
--bg-color: #263238;
|
|
--header-bg: #1e272c;
|
|
--sidebar-bg: #1e272c;
|
|
--card-bg: #37474f;
|
|
--panel-bg: #37474f;
|
|
--border-color: #404040;
|
|
--text-color: #ffffff;
|
|
--text-muted: #adb5bd;
|
|
--input-border: #555;
|
|
--input-bg: #37474f;
|
|
--input-text-color: #ffffff;
|
|
--button-bg: #263238;
|
|
--button-hover-bg: #1e272c;
|
|
--button-text: #ffffff;
|
|
--button-hover-border: #6c757d;
|
|
--primary: #00bcd4;
|
|
--primary-bg: rgba(0, 188, 212, 0.2);
|
|
--secondary: #6c757d;
|
|
--success: #28a745;
|
|
--success-bg: #1e4620;
|
|
--success-text: #d4edda;
|
|
--info: #17a2b8;
|
|
--warning: #ff3e00;
|
|
--warning-bg: #4d1f00;
|
|
--danger: #dc3545;
|
|
--danger-bg: #4d1319;
|
|
--danger-text: #f8d7da;
|
|
--error-bg: #4d1319;
|
|
--error-text: #f8d7da;
|
|
--code-bg: #1e272c;
|
|
--code-text: #ffffff;
|
|
--tab-inactive-bg: #1a1a1a;
|
|
--accent-color: #007bff;
|
|
--accent-hover-color: #0056b3;
|
|
}
|
|
`
|
|
|
|
// GenericCSSTemplate is the CSS template for generic/white-label branding
|
|
const GenericCSSTemplate = `/*
|
|
* Custom Branding CSS - White Label Template
|
|
* ==========================================
|
|
*
|
|
* This file is loaded AFTER the default styles, so any rules here
|
|
* will override the defaults. You can customize:
|
|
*
|
|
* 1. CSS Variables (colors, spacing, etc.)
|
|
* 2. Component styles (buttons, cards, headers, etc.)
|
|
* 3. Add completely custom styles
|
|
*
|
|
* Restart the relay to apply changes.
|
|
*
|
|
* For variable-only overrides, edit variables.css instead.
|
|
*/
|
|
|
|
/* =============================================================================
|
|
LIGHT THEME VARIABLES - Professional Blue-Gray
|
|
============================================================================= */
|
|
|
|
html, body {
|
|
/* Background colors */
|
|
--bg-color: #F0F4F8; /* Light gray-blue background */
|
|
--header-bg: #FFFFFF; /* Clean white header */
|
|
--sidebar-bg: #FFFFFF; /* Clean white sidebar */
|
|
--card-bg: #FFFFFF; /* White cards */
|
|
--panel-bg: #FFFFFF; /* White panels */
|
|
|
|
/* Border colors */
|
|
--border-color: #E2E8F0; /* Subtle gray border */
|
|
|
|
/* Text colors */
|
|
--text-color: #334155; /* Dark slate text */
|
|
--text-muted: #64748B; /* Muted slate */
|
|
|
|
/* Input/form colors */
|
|
--input-border: #CBD5E1; /* Light slate border */
|
|
--input-bg: #FFFFFF; /* White input */
|
|
--input-text-color: #334155; /* Dark slate text */
|
|
|
|
/* Button colors */
|
|
--button-bg: #F1F5F9; /* Light slate button */
|
|
--button-hover-bg: #E2E8F0; /* Slightly darker on hover */
|
|
--button-text: #334155; /* Dark slate text */
|
|
--button-hover-border: #94A3B8; /* Medium slate border */
|
|
|
|
/* Theme/accent colors - Professional Blue */
|
|
--primary: #4080C0; /* Professional blue */
|
|
--primary-bg: rgba(64, 128, 192, 0.1); /* Light blue tint */
|
|
--secondary: #64748B; /* Slate gray */
|
|
|
|
/* Status colors */
|
|
--success: #22C55E; /* Green */
|
|
--success-bg: #DCFCE7; /* Light green */
|
|
--success-text: #166534; /* Dark green */
|
|
--info: #3B82F6; /* Blue */
|
|
--warning: #F59E0B; /* Amber */
|
|
--warning-bg: #FEF3C7; /* Light amber */
|
|
--danger: #EF4444; /* Red */
|
|
--danger-bg: #FEE2E2; /* Light red */
|
|
--danger-text: #991B1B; /* Dark red */
|
|
--error-bg: #FEE2E2; /* Light red */
|
|
--error-text: #991B1B; /* Dark red */
|
|
|
|
/* Code block colors */
|
|
--code-bg: #F8FAFC; /* Very light slate */
|
|
--code-text: #334155; /* Dark slate */
|
|
|
|
/* Tab colors */
|
|
--tab-inactive-bg: #E2E8F0; /* Light slate */
|
|
|
|
/* Link/accent colors */
|
|
--accent-color: #4080C0; /* Professional blue */
|
|
--accent-hover-color: #2563EB; /* Darker blue */
|
|
}
|
|
|
|
/* =============================================================================
|
|
DARK THEME VARIABLES - Professional Dark
|
|
============================================================================= */
|
|
|
|
body.dark-theme {
|
|
/* Background colors */
|
|
--bg-color: #0F172A; /* Dark navy */
|
|
--header-bg: #1E293B; /* Slate gray */
|
|
--sidebar-bg: #1E293B; /* Slate gray */
|
|
--card-bg: #1E293B; /* Slate gray */
|
|
--panel-bg: #1E293B; /* Slate gray */
|
|
|
|
/* Border colors */
|
|
--border-color: #334155; /* Medium slate */
|
|
|
|
/* Text colors */
|
|
--text-color: #F8FAFC; /* Almost white */
|
|
--text-muted: #94A3B8; /* Muted slate */
|
|
|
|
/* Input/form colors */
|
|
--input-border: #475569; /* Slate border */
|
|
--input-bg: #1E293B; /* Slate background */
|
|
--input-text-color: #F8FAFC; /* Light text */
|
|
|
|
/* Button colors */
|
|
--button-bg: #334155; /* Slate button */
|
|
--button-hover-bg: #475569; /* Lighter on hover */
|
|
--button-text: #F8FAFC; /* Light text */
|
|
--button-hover-border: #64748B; /* Medium slate */
|
|
|
|
/* Theme/accent colors */
|
|
--primary: #60A5FA; /* Lighter blue for dark mode */
|
|
--primary-bg: rgba(96, 165, 250, 0.2); /* Blue tint */
|
|
--secondary: #94A3B8; /* Muted slate */
|
|
|
|
/* Status colors */
|
|
--success: #4ADE80; /* Bright green */
|
|
--success-bg: #166534; /* Dark green */
|
|
--success-text: #DCFCE7; /* Light green */
|
|
--info: #60A5FA; /* Light blue */
|
|
--warning: #FBBF24; /* Bright amber */
|
|
--warning-bg: #78350F; /* Dark amber */
|
|
--danger: #F87171; /* Light red */
|
|
--danger-bg: #7F1D1D; /* Dark red */
|
|
--danger-text: #FEE2E2; /* Light red */
|
|
--error-bg: #7F1D1D; /* Dark red */
|
|
--error-text: #FEE2E2; /* Light red */
|
|
|
|
/* Code block colors */
|
|
--code-bg: #0F172A; /* Dark navy */
|
|
--code-text: #F8FAFC; /* Light text */
|
|
|
|
/* Tab colors */
|
|
--tab-inactive-bg: #1E293B; /* Slate */
|
|
|
|
/* Link/accent colors */
|
|
--accent-color: #60A5FA; /* Light blue */
|
|
--accent-hover-color: #93C5FD; /* Lighter blue */
|
|
}
|
|
|
|
/* =============================================================================
|
|
PRIMARY BUTTON TEXT COLOR FIX
|
|
Ensures buttons with primary background have white text for contrast
|
|
============================================================================= */
|
|
|
|
/* Target all common button patterns that use primary background */
|
|
button[class*="-btn"],
|
|
button[class*="submit"],
|
|
button[class*="action"],
|
|
button[class*="save"],
|
|
button[class*="add"],
|
|
button[class*="create"],
|
|
button[class*="connect"],
|
|
button[class*="refresh"],
|
|
button[class*="retry"],
|
|
button[class*="send"],
|
|
button[class*="apply"],
|
|
button[class*="execute"],
|
|
button[class*="run"],
|
|
.primary-action,
|
|
.action-button,
|
|
.permission-badge,
|
|
[class*="badge"] {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
/* More specific override for any button that visually appears to have primary bg */
|
|
/* This uses a broad selector with low impact on non-primary buttons */
|
|
html:not(.dark-theme) button:not([disabled]) {
|
|
/* Default to inherit, primary buttons will be caught above */
|
|
}
|
|
|
|
/* =============================================================================
|
|
CUSTOM STYLES
|
|
Add your custom CSS rules below. These will override any default styles.
|
|
============================================================================= */
|
|
|
|
/* Example: Custom header styling
|
|
.header {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
*/
|
|
|
|
/* Example: Custom button styling
|
|
.btn {
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
}
|
|
*/
|
|
|
|
/* Example: Custom card styling
|
|
.card {
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
*/
|
|
`
|
|
|
|
// GenericCSSVariablesTemplate contains CSS variables for generic/white-label branding
|
|
const GenericCSSVariablesTemplate = `/*
|
|
* CSS Variables Override - White Label Template
|
|
* ==============================================
|
|
*
|
|
* This file contains only CSS variable definitions.
|
|
* Edit values here to customize colors without touching component styles.
|
|
*
|
|
* For full CSS customization (including component styles),
|
|
* edit custom.css instead.
|
|
*/
|
|
|
|
/* Light theme variables - Professional Blue-Gray */
|
|
/* Applied to both html and body for maximum compatibility */
|
|
html, body {
|
|
--bg-color: #F0F4F8;
|
|
--header-bg: #FFFFFF;
|
|
--sidebar-bg: #FFFFFF;
|
|
--card-bg: #FFFFFF;
|
|
--panel-bg: #FFFFFF;
|
|
--border-color: #E2E8F0;
|
|
--text-color: #334155;
|
|
--text-muted: #64748B;
|
|
--input-border: #CBD5E1;
|
|
--input-bg: #FFFFFF;
|
|
--input-text-color: #334155;
|
|
--button-bg: #F1F5F9;
|
|
--button-hover-bg: #E2E8F0;
|
|
--button-text: #334155;
|
|
--button-hover-border: #94A3B8;
|
|
--primary: #4080C0;
|
|
--primary-bg: rgba(64, 128, 192, 0.1);
|
|
--secondary: #64748B;
|
|
--success: #22C55E;
|
|
--success-bg: #DCFCE7;
|
|
--success-text: #166534;
|
|
--info: #3B82F6;
|
|
--warning: #F59E0B;
|
|
--warning-bg: #FEF3C7;
|
|
--danger: #EF4444;
|
|
--danger-bg: #FEE2E2;
|
|
--danger-text: #991B1B;
|
|
--error-bg: #FEE2E2;
|
|
--error-text: #991B1B;
|
|
--code-bg: #F8FAFC;
|
|
--code-text: #334155;
|
|
--tab-inactive-bg: #E2E8F0;
|
|
--accent-color: #4080C0;
|
|
--accent-hover-color: #2563EB;
|
|
}
|
|
|
|
/* Dark theme variables - Professional Dark */
|
|
body.dark-theme {
|
|
--bg-color: #0F172A;
|
|
--header-bg: #1E293B;
|
|
--sidebar-bg: #1E293B;
|
|
--card-bg: #1E293B;
|
|
--panel-bg: #1E293B;
|
|
--border-color: #334155;
|
|
--text-color: #F8FAFC;
|
|
--text-muted: #94A3B8;
|
|
--input-border: #475569;
|
|
--input-bg: #1E293B;
|
|
--input-text-color: #F8FAFC;
|
|
--button-bg: #334155;
|
|
--button-hover-bg: #475569;
|
|
--button-text: #F8FAFC;
|
|
--button-hover-border: #64748B;
|
|
--primary: #60A5FA;
|
|
--primary-bg: rgba(96, 165, 250, 0.2);
|
|
--secondary: #94A3B8;
|
|
--success: #4ADE80;
|
|
--success-bg: #166534;
|
|
--success-text: #DCFCE7;
|
|
--info: #60A5FA;
|
|
--warning: #FBBF24;
|
|
--warning-bg: #78350F;
|
|
--danger: #F87171;
|
|
--danger-bg: #7F1D1D;
|
|
--danger-text: #FEE2E2;
|
|
--error-bg: #7F1D1D;
|
|
--error-text: #FEE2E2;
|
|
--code-bg: #0F172A;
|
|
--code-text: #F8FAFC;
|
|
--tab-inactive-bg: #1E293B;
|
|
--accent-color: #60A5FA;
|
|
--accent-hover-color: #93C5FD;
|
|
}
|
|
`
|