150 lines
3.8 KiB
TOML
150 lines
3.8 KiB
TOML
|
# Default Theme Configuration
|
||
|
|
# This file defines the visual design system for the application
|
||
|
|
|
||
|
|
[metadata]
|
||
|
|
name = "Default"
|
||
|
|
description = "Clean, modern design with blue accent colors"
|
||
|
|
version = "1.0.0"
|
||
|
|
author = "Rustelo Contributors"
|
||
|
|
|
||
|
|
[colors]
|
||
|
|
# Primary brand colors
|
||
|
|
primary = "#3b82f6" # Blue-500
|
||
|
|
primary_hover = "#2563eb" # Blue-600
|
||
|
|
secondary = "#6b7280" # Gray-500
|
||
|
|
secondary_hover = "#4b5563" # Gray-600
|
||
|
|
accent = "#f59e0b" # Amber-500
|
||
|
|
|
||
|
|
# Semantic colors
|
||
|
|
success = "#10b981" # Emerald-500
|
||
|
|
warning = "#f59e0b" # Amber-500
|
||
|
|
error = "#ef4444" # Red-500
|
||
|
|
info = "#06b6d4" # Cyan-500
|
||
|
|
|
||
|
|
# Surface colors (backgrounds)
|
||
|
|
surface = "#ffffff" # White
|
||
|
|
surface_dark = "#1f2937" # Gray-800
|
||
|
|
surface_hover = "#f9fafb" # Gray-50
|
||
|
|
surface_hover_dark = "#374151" # Gray-700
|
||
|
|
|
||
|
|
# Text colors
|
||
|
|
text = "#111827" # Gray-900
|
||
|
|
text_dark = "#f9fafb" # Gray-50
|
||
|
|
text_secondary = "#6b7280" # Gray-500
|
||
|
|
text_secondary_dark = "#9ca3af" # Gray-400
|
||
|
|
|
||
|
|
# Border colors
|
||
|
|
border = "#e5e7eb" # Gray-200
|
||
|
|
border_dark = "#374151" # Gray-700
|
||
|
|
|
||
|
|
[typography]
|
||
|
|
# Font families
|
||
|
|
font_family_sans = "Inter, ui-sans-serif, system-ui, sans-serif"
|
||
|
|
font_family_mono = "JetBrains Mono, ui-monospace, 'Cascadia Code', monospace"
|
||
|
|
|
||
|
|
# Font sizes
|
||
|
|
font_size_xs = "0.75rem" # 12px
|
||
|
|
font_size_sm = "0.875rem" # 14px
|
||
|
|
font_size_base = "1rem" # 16px
|
||
|
|
font_size_lg = "1.125rem" # 18px
|
||
|
|
font_size_xl = "1.25rem" # 20px
|
||
|
|
font_size_2xl = "1.5rem" # 24px
|
||
|
|
font_size_3xl = "1.875rem" # 30px
|
||
|
|
|
||
|
|
# Line heights
|
||
|
|
line_height_tight = "1.25"
|
||
|
|
line_height_normal = "1.5"
|
||
|
|
line_height_relaxed = "1.75"
|
||
|
|
|
||
|
|
[spacing]
|
||
|
|
# Spacing scale (rem units)
|
||
|
|
xs = "0.25rem" # 4px
|
||
|
|
sm = "0.5rem" # 8px
|
||
|
|
md = "1rem" # 16px
|
||
|
|
lg = "1.5rem" # 24px
|
||
|
|
xl = "2rem" # 32px
|
||
|
|
"2xl" = "2.5rem" # 40px
|
||
|
|
"3xl" = "3rem" # 48px
|
||
|
|
|
||
|
|
[radius]
|
||
|
|
# Border radius values
|
||
|
|
sm = "0.25rem" # 4px
|
||
|
|
md = "0.375rem" # 6px
|
||
|
|
lg = "0.5rem" # 8px
|
||
|
|
xl = "0.75rem" # 12px
|
||
|
|
"2xl" = "1rem" # 16px
|
||
|
|
full = "9999px" # Full rounded
|
||
|
|
|
||
|
|
[shadows]
|
||
|
|
# Shadow definitions
|
||
|
|
sm = "0 1px 2px 0 rgb(0 0 0 / 0.05)"
|
||
|
|
base = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
|
||
|
|
md = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
|
||
|
|
lg = "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
|
||
|
|
xl = "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
||
|
|
|
||
|
|
[components]
|
||
|
|
# Component-specific configurations
|
||
|
|
|
||
|
|
[components.button]
|
||
|
|
border_radius = "0.5rem"
|
||
|
|
padding_x_sm = "0.75rem"
|
||
|
|
padding_y_sm = "0.375rem"
|
||
|
|
padding_x_md = "1rem"
|
||
|
|
padding_y_md = "0.5rem"
|
||
|
|
padding_x_lg = "1.5rem"
|
||
|
|
padding_y_lg = "0.75rem"
|
||
|
|
font_weight = "500"
|
||
|
|
transition = "all 200ms ease-in-out"
|
||
|
|
|
||
|
|
[components.card]
|
||
|
|
border_radius = "0.75rem"
|
||
|
|
padding = "1.5rem"
|
||
|
|
shadow = "sm"
|
||
|
|
border_width = "1px"
|
||
|
|
|
||
|
|
[components.input]
|
||
|
|
border_radius = "0.375rem"
|
||
|
|
padding_x = "0.75rem"
|
||
|
|
padding_y = "0.5rem"
|
||
|
|
border_width = "1px"
|
||
|
|
transition = "border-color 200ms ease-in-out, box-shadow 200ms ease-in-out"
|
||
|
|
|
||
|
|
[components.navbar]
|
||
|
|
height = "4rem"
|
||
|
|
padding_x = "1rem"
|
||
|
|
backdrop_blur = "true"
|
||
|
|
border_bottom_width = "1px"
|
||
|
|
|
||
|
|
[components.footer]
|
||
|
|
padding_y = "2rem"
|
||
|
|
border_top_width = "1px"
|
||
|
|
|
||
|
|
[assets]
|
||
|
|
# Asset paths
|
||
|
|
logo_light = "/logos/site-logo-b.png"
|
||
|
|
logo_dark = "/logos/site-logo-w.png"
|
||
|
|
logo_icon = "/logos/logo-icon.svg"
|
||
|
|
favicon = "/images/favicon.ico"
|
||
|
|
favicon_dark = "/images/favicon.ico" #-dark.ico"
|
||
|
|
|
||
|
|
# Logo configuration
|
||
|
|
logo_height_sm = "2rem"
|
||
|
|
logo_height_md = "2.5rem"
|
||
|
|
logo_height_lg = "3rem"
|
||
|
|
|
||
|
|
[animations]
|
||
|
|
# Animation configurations
|
||
|
|
duration_fast = "150ms"
|
||
|
|
duration_normal = "200ms"
|
||
|
|
duration_slow = "300ms"
|
||
|
|
easing = "cubic-bezier(0.4, 0, 0.2, 1)"
|
||
|
|
|
||
|
|
[breakpoints]
|
||
|
|
# Responsive breakpoints
|
||
|
|
sm = "640px"
|
||
|
|
md = "768px"
|
||
|
|
lg = "1024px"
|
||
|
|
xl = "1280px"
|
||
|
|
"2xl" = "1536px"
|